diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx
index 262e4f141..4362c622c 100644
--- a/packages/propel/src/pill/pill.tsx
+++ b/packages/propel/src/pill/pill.tsx
@@ -44,9 +44,9 @@ export interface PillProps extends React.HTMLAttributes
{
const pillVariants = {
[EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
[EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
- [EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
+ [EPillVariant.SUCCESS]: "bg-green-50 text-success-primary border border-success-subtle",
[EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
- [EPillVariant.ERROR]: "bg-red-50 text-red-700 border border-red-200",
+ [EPillVariant.ERROR]: "bg-red-50 text-danger-primary border border-danger-subtle",
[EPillVariant.INFO]: "bg-blue-50 text-blue-700 border border-blue-200",
};
diff --git a/packages/propel/src/portal/modal-portal.tsx b/packages/propel/src/portal/modal-portal.tsx
index 8aa9663d9..284b0a26a 100644
--- a/packages/propel/src/portal/modal-portal.tsx
+++ b/packages/propel/src/portal/modal-portal.tsx
@@ -95,7 +95,7 @@ export function ModalPortal({
>
{showOverlay && (
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
index 4714a1283..3cb1bab57 100644
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -283,7 +283,7 @@ export const DataTable: Story = {
user{i + 1}@example.com
{i % 3 === 0 ? "Active" : "Inactive"}
diff --git a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
index e32cfacff..c0df9621e 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
@@ -49,7 +49,7 @@ export const ExtraLarge: Story = {
export const CustomColor: Story = {
args: {
- className: "text-green-500",
+ className: "text-success-primary",
},
};
@@ -91,11 +91,11 @@ export const ColorVariations: Story = {
Blue
diff --git a/packages/propel/src/spinners/circular-spinner.stories.tsx b/packages/propel/src/spinners/circular-spinner.stories.tsx
index 42d88dc5b..ca1aabe94 100644
--- a/packages/propel/src/spinners/circular-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-spinner.stories.tsx
@@ -91,11 +91,11 @@ export const ColorVariations: Story = {
Blue
diff --git a/packages/propel/src/switch/switch.stories.tsx b/packages/propel/src/switch/switch.stories.tsx
index fd913b3e7..5c1ce7df0 100644
--- a/packages/propel/src/switch/switch.stories.tsx
+++ b/packages/propel/src/switch/switch.stories.tsx
@@ -185,7 +185,7 @@ export const Interactive: Story = {
Status: {enabled ? "Enabled" : "Disabled"}
- {enabled &&
Feature is now active and ready to use!
}
+ {enabled &&
Feature is now active and ready to use!
}
Admin
Edit
- Delete
+ Delete
@@ -148,7 +148,7 @@ export const WithActions: Story = {
User
Edit
- Delete
+ Delete
@@ -173,10 +173,10 @@ export const WithBadges: Story = {
Website Redesign
- In Progress
+ In Progress
- High
+ High
John Doe
@@ -196,7 +196,7 @@ export const WithBadges: Story = {
Completed
- Low
+ Low
Bob Wilson
@@ -297,7 +297,7 @@ export const LargeDataset: Story = {
{i % 2 === 0 ? "Active" : "Inactive"}
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
index 10f40bfac..cc0fca6bc 100644
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -252,7 +252,7 @@ export const DynamicTabs: Story = {
e.stopPropagation();
removeTab(tab.value);
}}
- className="ml-2 hover:text-red-500"
+ className="ml-2 hover:text-danger-primary"
>
×
diff --git a/packages/propel/src/tooltip/tooltip.stories.tsx b/packages/propel/src/tooltip/tooltip.stories.tsx
index 1ba3cc709..b681afd71 100644
--- a/packages/propel/src/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/tooltip/tooltip.stories.tsx
@@ -237,7 +237,7 @@ export const IconButtons: Story = {
Passwords match
}
+ {confirmPassword && passwordsMatch && Passwords match
}
);
}
diff --git a/packages/ui/src/auth-form/auth-input.tsx b/packages/ui/src/auth-form/auth-input.tsx
index 526cd4f35..42ae865ee 100644
--- a/packages/ui/src/auth-form/auth-input.tsx
+++ b/packages/ui/src/auth-form/auth-input.tsx
@@ -42,7 +42,7 @@ export function AuthInput({
className={cn(
"rounded-md disable-autofill-style h-6 w-full placeholder:text-14 placeholder:text-placeholder p-0 border-none",
{
- "border-red-500": error,
+ "border-danger-strong": error,
},
className
)}
@@ -58,7 +58,7 @@ export function AuthInput({
)}
- {error && {error}
}
+ {error && {error}
}
);
}
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 73d1fee7f..bb7e0acbe 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -81,14 +81,14 @@ export const badgeStyling: IBadgeStyling = {
disabled: `cursor-not-allowed !bg-green-300`,
},
"accent-success": {
- default: `text-green-500 bg-green-50`,
- hover: `hover:bg-green-100 hover:text-green-600`,
- disabled: `cursor-not-allowed !text-green-300`,
+ default: `text-success-primary bg-green-50`,
+ hover: `hover:bg-green-100 hover:text-success-primary`,
+ disabled: `cursor-not-allowed text-success-secondary!`,
},
"outline-success": {
- default: `text-green-500 bg-surface-1 border border-green-500`,
- hover: `hover:text-green-600 hover:bg-green-50`,
- disabled: `cursor-not-allowed !text-green-300 border-green-300`,
+ default: `text-success-primary bg-surface-1 border border-success-strong`,
+ hover: `hover:text-success-primary hover:bg-green-50`,
+ disabled: `cursor-not-allowed text-success-secondary! border-success-subtle`,
},
warning: {
@@ -113,14 +113,14 @@ export const badgeStyling: IBadgeStyling = {
disabled: `cursor-not-allowed !bg-red-300`,
},
"accent-destructive": {
- default: `text-red-500 bg-red-50`,
- hover: `hover:bg-red-100 hover:text-red-600`,
- disabled: `cursor-not-allowed !text-red-300`,
+ default: `text-danger-primary bg-red-50`,
+ hover: `hover:bg-red-100 hover:text-danger-primary`,
+ disabled: `cursor-not-allowed text-danger-secondary!`,
},
"outline-destructive": {
- default: `text-red-500 bg-surface-1 border border-red-500`,
- hover: `hover:text-red-600 hover:bg-red-50`,
- disabled: `cursor-not-allowed !text-red-300 border-red-300`,
+ default: `text-danger-primary bg-surface-1 border border-danger-strong`,
+ hover: `hover:text-danger-primary hover:bg-red-50`,
+ disabled: `cursor-not-allowed text-danger-secondary! border-danger-subtle`,
},
};
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index af923cdf5..e54367fe0 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -74,27 +74,27 @@ export const buttonStyling: IButtonStyling = {
disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
},
"accent-danger": {
- default: `text-red-500 bg-red-50`,
- hover: `hover:text-red-600 hover:bg-red-100`,
- pressed: `focus:text-red-500 focus:bg-red-100`,
+ default: `text-danger-primary bg-red-50`,
+ hover: `hover:text-danger-primary hover:bg-red-100`,
+ pressed: `focus:text-danger-primary focus:bg-red-100`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"outline-danger": {
- default: `bg-layer-2 text-danger border border-danger-strong`,
+ default: `bg-layer-2 text-danger-primary border border-danger-strong`,
hover: `hover:bg-danger-subtle`,
pressed: `focus:bg-danger-subtle-hover`,
disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
},
"link-danger": {
- default: `text-red-500 bg-surface-1`,
- hover: `hover:text-red-400`,
- pressed: `focus:text-red-400`,
+ default: `text-danger-primary bg-surface-1`,
+ hover: `hover:text-danger-primary`,
+ pressed: `focus:text-danger-primary`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"tertiary-danger": {
- default: `text-red-500 bg-surface-1 border border-red-200`,
- hover: `hover:bg-red-50 hover:border-red-300`,
- pressed: `focus:text-red-400`,
+ default: `text-danger-primary bg-surface-1 border border-danger-subtle`,
+ hover: `hover:bg-red-50 hover:border-danger-subtle`,
+ pressed: `focus:text-danger-primary`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"link-neutral": {
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
index a9094977f..292b44a3c 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -36,7 +36,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
mode === "transparent",
"rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
- "border-red-500": hasError,
+ "border-danger-strong": hasError,
"px-1.5 py-1": inputSize === "xs",
"px-3 py-2": inputSize === "sm",
"p-3": inputSize === "md",
diff --git a/packages/ui/src/form-fields/password/helper.tsx b/packages/ui/src/form-fields/password/helper.tsx
index 33f80b145..3af639e61 100644
--- a/packages/ui/src/form-fields/password/helper.tsx
+++ b/packages/ui/src/form-fields/password/helper.tsx
@@ -20,7 +20,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
return {
message: "Password is too short",
- textColor: "text-red-500",
+ textColor: "text-danger-primary",
activeFragments: 1,
};
case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID:
@@ -32,7 +32,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
case E_PASSWORD_STRENGTH.STRENGTH_VALID:
return {
message: "Password is strong",
- textColor: "text-green-500",
+ textColor: "text-success-primary",
activeFragments: 3,
};
default:
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/ui/src/form-fields/password/indicator.tsx
index 95534fa6e..87e5f89f7 100644
--- a/packages/ui/src/form-fields/password/indicator.tsx
+++ b/packages/ui/src/form-fields/password/indicator.tsx
@@ -53,14 +53,14 @@ export function PasswordStrengthIndicator({
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/ui/src/form-fields/password/password-input.tsx
index 34e99a8af..0c453c864 100644
--- a/packages/ui/src/form-fields/password/password-input.tsx
+++ b/packages/ui/src/form-fields/password/password-input.tsx
@@ -34,7 +34,7 @@ export function PasswordInput({
"w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
{
"border-strong": !error,
- "border-red-500": error,
+ "border-danger-strong": error,
},
className
)}
diff --git a/packages/ui/src/form-fields/root.tsx b/packages/ui/src/form-fields/root.tsx
index 03f7d39af..70ee40c05 100644
--- a/packages/ui/src/form-fields/root.tsx
+++ b/packages/ui/src/form-fields/root.tsx
@@ -50,8 +50,8 @@ export function ValidationMessage({ type, message, className }: ValidationMessag
className={cn(
"text-13",
{
- "text-red-500": type === "error",
- "text-green-500": type === "success",
+ "text-danger-primary": type === "error",
+ "text-success-primary": type === "success",
},
className
)}
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index 5f1b5ed94..a38300e94 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -46,7 +46,7 @@ const TextArea = React.forwardRef(function TextArea(
"px-1.5 py-1": textAreaSize === "xs",
"px-3 py-2": textAreaSize === "sm",
"p-3": textAreaSize === "md",
- "border-red-500": hasError,
+ "border-danger-strong": hasError,
"bg-red-100": hasError && mode === "primary",
},
className
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
index 9d9705732..2b7b534d0 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -42,7 +42,7 @@ const BUTTON_VARIANTS: Record = {
};
const VARIANT_CLASSES: Record = {
- danger: "bg-red-500/20 text-red-500",
+ danger: "bg-danger-primary text-danger-primary",
primary: "bg-accent-primary/20 text-accent-primary",
};
diff --git a/packages/utils/src/theme/constants.ts b/packages/utils/src/theme/constants.ts
index a30b7683c..739cb0e9f 100644
--- a/packages/utils/src/theme/constants.ts
+++ b/packages/utils/src/theme/constants.ts
@@ -126,7 +126,7 @@ export const EDITOR_COLORS_LIGHT = {
"light-blue": "#c5eff9",
"dark-blue": "#c9dafb",
purple: "#e3d8fd",
-};
+} as const;
/**
* Editor color backgrounds for dark mode
diff --git a/packages/utils/src/theme/theme-application.ts b/packages/utils/src/theme/theme-application.ts
index 5e8ce421f..dffb2ef05 100644
--- a/packages/utils/src/theme/theme-application.ts
+++ b/packages/utils/src/theme/theme-application.ts
@@ -112,23 +112,23 @@ export function applyCustomTheme(brandColor: string, neutralColor: string, mode:
// Apply base palette colors
// This updates the source palette variables that semantic colors reference
Object.entries(neutralMapping).forEach(([key, value]) => {
- themeElement.style.setProperty(`--color-neutral-${key}`, value);
+ themeElement.style.setProperty(`--neutral-${key}`, value);
});
Object.entries(brandMapping).forEach(([key, value]) => {
- themeElement.style.setProperty(`--color-brand-${key}`, value);
+ themeElement.style.setProperty(`--brand-${key}`, value);
});
Object.entries(ALPHA_MAPPING).forEach(([key, value]) => {
- themeElement.style.setProperty(`--color-alpha-white-${key}`, oklchToCSS(neutralOKLCH, value * 100));
- themeElement.style.setProperty(`--color-alpha-black-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+ themeElement.style.setProperty(`--alpha-white-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+ themeElement.style.setProperty(`--alpha-black-${key}`, oklchToCSS(neutralOKLCH, value * 100));
});
// Apply contrasting text colors for use on colored backgrounds
// Uses WCAG relative luminance for accurate contrast determination
const { textColor, iconColor } = getOnColorTextColors(brandColor, "wcag");
- themeElement.style.setProperty(`--text-color-on-color`, oklchToCSS(textColor));
- themeElement.style.setProperty(`--text-color-icon-on-color`, oklchToCSS(iconColor));
+ themeElement.style.setProperty(`--txt-on-color`, oklchToCSS(textColor));
+ themeElement.style.setProperty(`--txt-icon-on-color`, oklchToCSS(iconColor));
// Apply editor color backgrounds based on mode
const editorColors = mode === "dark" ? EDITOR_COLORS_DARK : EDITOR_COLORS_LIGHT;
@@ -163,22 +163,22 @@ export function clearCustomTheme(): void {
"black",
];
neutralKeys.forEach((key) => {
- themeElement.style.removeProperty(`--color-neutral-${key}`);
+ themeElement.style.removeProperty(`--neutral-${key}`);
});
// Clear brand base palette colors
const brandKeys = ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000", "1100", "1200", "default"];
brandKeys.forEach((key) => {
- themeElement.style.removeProperty(`--color-brand-${key}`);
+ themeElement.style.removeProperty(`--brand-${key}`);
});
Object.keys(ALPHA_MAPPING).forEach((key) => {
- themeElement.style.removeProperty(`--color-alpha-white-${key}`);
- themeElement.style.removeProperty(`--color-alpha-black-${key}`);
+ themeElement.style.removeProperty(`--alpha-white-${key}`);
+ themeElement.style.removeProperty(`--alpha-black-${key}`);
});
- themeElement.style.removeProperty(`--text-color-on-color`);
- themeElement.style.removeProperty(`--text-color-icon-on-color`);
+ themeElement.style.removeProperty(`--txt-on-color`);
+ themeElement.style.removeProperty(`--txt-icon-on-color`);
// Clear editor color background overrides
Object.keys(EDITOR_COLORS_LIGHT).forEach((color) => {