@vellira-ui/tokens 2.26.1 → 2.27.0

package/dist/light/components/button.js

@@ -1,174 +1,159 @@
 import { colors } from '../../primitives/colors.js';
-import { action } from '../semantic/action.js';
+import { createButtonPalette } from '../../utils/createButtonPalette.js';
 import { border } from '../semantic/border.js';
-import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
-const transparent = {
-    bg: 'transparent',
-    border: 'transparent',
-};
-export const button = {
-    primary: {
-        solid: {
-            default: action.primary.default,
-            hover: action.primary.hover,
-            pressed: action.primary.active,
+const primary = createButtonPalette({
+    ring: colors.primary[400],
+    solid: {
+        default: {
+            bg: colors.primary[600],
+            fg: colors.primary[50],
+            border: colors.primary[600],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.primary[700],
-                border: colors.primary[600],
-            },
-            hover: {
-                bg: action.primary.subtle.bg,
-                fg: colors.primary[800],
-                border: colors.primary[700],
-            },
-            pressed: {
-                bg: action.primary.muted.bg,
-                fg: colors.primary[900],
-                border: colors.primary[800],
-            },
+        hover: {
+            bg: colors.primary[700],
+            fg: colors.primary[200],
+            border: colors.primary[700],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.primary[700],
-            },
-            hover: {
-                ...transparent,
-                bg: action.primary.subtle.bg,
-                fg: colors.primary[800],
-            },
-            pressed: {
-                ...transparent,
-                bg: action.primary.muted.bg,
-                fg: colors.primary[900],
-            },
+        pressed: {
+            bg: colors.primary[800],
+            fg: colors.primary[300],
+            border: colors.primary[800],
         },
     },
-    secondary: {
-        solid: {
-            default: action.secondary.default,
-            hover: action.secondary.hover,
-            pressed: action.secondary.active,
+    fg: colors.primary[700],
+    bg: colors.primary[50],
+    border: colors.primary[400],
+    hoverFg: colors.primary[800],
+    hoverBg: colors.primary[100],
+    hoverBorder: colors.primary[500],
+    pressedFg: colors.primary[900],
+    pressedBg: colors.primary[200],
+    pressedBorder: colors.primary[600],
+});
+const neutral = createButtonPalette({
+    ring: colors.vellira[400],
+    solid: {
+        default: {
+            bg: colors.vellira[200],
+            fg: colors.vellira[950],
+            border: colors.vellira[200],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.secondary[700],
-                border: colors.secondary[700],
-            },
-            hover: {
-                bg: action.secondary.subtle.bg,
-                fg: colors.secondary[800],
-                border: colors.secondary[800],
-            },
-            pressed: {
-                bg: action.secondary.muted.bg,
-                fg: colors.secondary[900],
-                border: colors.secondary[900],
-            },
+        hover: {
+            bg: colors.vellira[300],
+            fg: colors.vellira[900],
+            border: colors.vellira[300],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.secondary[700],
-            },
-            hover: {
-                ...transparent,
-                bg: action.secondary.subtle.bg,
-                fg: colors.secondary[800],
-            },
-            pressed: {
-                ...transparent,
-                bg: action.secondary.muted.bg,
-                fg: colors.secondary[900],
-            },
+        pressed: {
+            bg: colors.vellira[400],
+            fg: colors.vellira[800],
+            border: colors.vellira[400],
         },
     },
-    close: {
-        solid: {
-            default: action.close.default,
-            hover: action.close.hover,
-            pressed: action.close.active,
+    fg: colors.vellira[600],
+    bg: colors.vellira[100],
+    border: colors.vellira[400],
+    hoverFg: colors.vellira[700],
+    hoverBg: colors.vellira[200],
+    hoverBorder: colors.vellira[500],
+    pressedFg: colors.vellira[800],
+    pressedBg: colors.vellira[300],
+    pressedBorder: colors.vellira[600],
+});
+const success = createButtonPalette({
+    ring: colors.success[500],
+    solid: {
+        default: {
+            bg: colors.success[500],
+            fg: colors.success[950],
+            border: colors.success[500],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.vellira[700],
-                border: colors.vellira[400],
-            },
-            hover: {
-                bg: action.close.subtle.bg,
-                fg: colors.vellira[800],
-                border: colors.vellira[500],
-            },
-            pressed: {
-                bg: action.close.muted.bg,
-                fg: colors.vellira[900],
-                border: colors.vellira[600],
-            },
+        hover: {
+            bg: colors.success[600],
+            fg: colors.success[900],
+            border: colors.success[600],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: text.primary,
-            },
-            hover: {
-                ...transparent,
-                bg: action.close.subtle.bg,
-                fg: colors.vellira[800],
-            },
-            pressed: {
-                ...transparent,
-                bg: action.close.muted.bg,
-                fg: colors.vellira[900],
-            },
+        pressed: {
+            bg: colors.success[700],
+            fg: colors.success[800],
+            border: colors.success[700],
         },
     },
-    danger: {
-        solid: {
-            default: action.danger.default,
-            hover: action.danger.hover,
-            pressed: action.danger.active,
+    fg: colors.success[700],
+    bg: colors.success[50],
+    border: colors.success[600],
+    hoverFg: colors.success[800],
+    hoverBg: colors.success[100],
+    hoverBorder: colors.success[700],
+    pressedFg: colors.success[900],
+    pressedBg: colors.success[200],
+    pressedBorder: colors.success[800],
+});
+const warning = createButtonPalette({
+    ring: colors.warning[500],
+    solid: {
+        default: {
+            bg: colors.warning[500],
+            fg: colors.warning[950],
+            border: colors.warning[500],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: status.error.fg,
-                border: status.error.border,
-            },
-            hover: {
-                bg: status.error.bg,
-                fg: colors.error[800],
-                border: colors.error[700],
-            },
-            pressed: {
-                bg: action.danger.muted.bg,
-                fg: colors.error[900],
-                border: colors.error[800],
-            },
+        hover: {
+            bg: colors.warning[600],
+            fg: colors.warning[900],
+            border: colors.warning[600],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: status.error.fg,
-            },
-            hover: {
-                ...transparent,
-                bg: status.error.bg,
-                fg: colors.error[800],
-            },
-            pressed: {
-                ...transparent,
-                bg: action.danger.muted.bg,
-                fg: colors.error[900],
-            },
+        pressed: {
+            bg: colors.warning[700],
+            fg: colors.warning[800],
+            border: colors.warning[700],
         },
     },
+    fg: colors.warning[700],
+    bg: colors.warning[50],
+    border: colors.warning[600],
+    hoverFg: colors.warning[800],
+    hoverBg: colors.warning[100],
+    hoverBorder: colors.warning[700],
+    pressedFg: colors.warning[900],
+    pressedBg: colors.warning[200],
+    pressedBorder: colors.warning[800],
+});
+const danger = createButtonPalette({
+    ring: colors.error[500],
+    solid: {
+        default: {
+            bg: colors.error[700],
+            fg: colors.error[50],
+            border: colors.error[700],
+        },
+        hover: {
+            bg: colors.error[800],
+            fg: colors.error[200],
+            border: colors.error[800],
+        },
+        pressed: {
+            bg: colors.error[900],
+            fg: colors.error[300],
+            border: colors.error[900],
+        },
+    },
+    fg: colors.error[700],
+    bg: colors.error[50],
+    border: colors.error[500],
+    hoverFg: colors.error[800],
+    hoverBg: colors.error[100],
+    hoverBorder: colors.error[700],
+    pressedFg: colors.error[700],
+    pressedBg: colors.error[200],
+    pressedBorder: colors.error[600],
+});
+export const button = {
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     disabled: {
         bg: surface.disabled,
         fg: text.disabled,

package/dist/light/components/formField.d.ts

@@ -13,10 +13,10 @@ export declare const formField: {
             readonly fg: "#BE123C";
         };
         readonly success: {
-            readonly fg: "#047857";
+            readonly fg: "#0F766E";
         };
         readonly warning: {
-            readonly fg: "#92400E";
+            readonly fg: "#B45309";
         };
         readonly info: {
             readonly fg: "#0C4A6E";

package/dist/light/components/input.d.ts

@@ -33,8 +33,8 @@ export declare const input: {
         readonly ring: "#F43F5E";
     };
     readonly success: {
-        readonly border: "#10B981";
-        readonly ring: "#10B981";
+        readonly border: "#0F766E";
+        readonly ring: "#14B8A6";
     };
     readonly readOnly: {
         readonly bg: "#FDFCFF";
@@ -47,7 +47,7 @@ export declare const input: {
         readonly default: "#3D3754";
         readonly primary: "#5037C8";
         readonly secondary: "#6B6386";
-        readonly success: "#047857";
+        readonly success: "#0F766E";
         readonly danger: "#BE123C";
         readonly muted: "#958CB0";
         readonly inverse: "#FFFFFF";

package/dist/light/semantic/icons.d.ts

@@ -7,7 +7,7 @@ export declare const icons: {
     readonly primary: "#5037C8";
     readonly brand: "#5037C8";
     readonly hover: "#402C9F";
-    readonly success: "#047857";
+    readonly success: "#0F766E";
     readonly danger: "#BE123C";
     readonly inverse: "#FFFFFF";
 };

package/dist/light/semantic/status.d.ts

@@ -1,10 +1,10 @@
 export declare const status: {
     readonly success: {
-        readonly fg: "#047857";
-        readonly bg: "#ECFDF5";
-        readonly border: "#10B981";
-        readonly ring: "#10B981";
-        readonly strong: "#065F46";
+        readonly fg: "#0F766E";
+        readonly bg: "#F0FDFA";
+        readonly border: "#0F766E";
+        readonly ring: "#14B8A6";
+        readonly strong: "#115E59";
     };
     readonly error: {
         readonly fg: "#BE123C";
@@ -14,9 +14,9 @@ export declare const status: {
         readonly strong: "#9F1239";
     };
     readonly warning: {
-        readonly fg: "#92400E";
+        readonly fg: "#B45309";
         readonly bg: "#FFFBEB";
-        readonly border: "#F59E0B";
+        readonly border: "#B45309";
         readonly ring: "#F59E0B";
         readonly strong: "#92400E";
     };

package/dist/light/semantic/status.js

@@ -3,7 +3,7 @@ export const status = {
     success: {
         fg: colors.success[700],
         bg: colors.success[50],
-        border: colors.success[500],
+        border: colors.success[700],
         ring: colors.success[500],
         strong: colors.success[800],
     },
@@ -15,9 +15,9 @@ export const status = {
         strong: colors.error[800],
     },
     warning: {
-        fg: colors.warning[800],
+        fg: colors.warning[700],
         bg: colors.warning[50],
-        border: colors.warning[500],
+        border: colors.warning[700],
         ring: colors.warning[500],
         strong: colors.warning[800],
     },

package/dist/light/theme.d.ts

@@ -62,17 +62,17 @@ export declare const lightTheme: {
             readonly 950: "#071927";
         };
         readonly success: {
-            readonly 50: "#ECFDF5";
-            readonly 100: "#D1FAE5";
-            readonly 200: "#A7F3D0";
-            readonly 300: "#6EE7B7";
-            readonly 400: "#34D399";
-            readonly 500: "#10B981";
-            readonly 600: "#059669";
-            readonly 700: "#047857";
-            readonly 800: "#065F46";
-            readonly 900: "#064E3B";
-            readonly 950: "#022C22";
+            readonly 50: "#F0FDFA";
+            readonly 100: "#CCFBF1";
+            readonly 200: "#99F6E4";
+            readonly 300: "#5EEAD4";
+            readonly 400: "#2DD4BF";
+            readonly 500: "#14B8A6";
+            readonly 600: "#0F9E94";
+            readonly 700: "#0F766E";
+            readonly 800: "#115E59";
+            readonly 900: "#134E4A";
+            readonly 950: "#042F2E";
         };
         readonly error: {
             readonly 50: "#FFF1F2";

package/dist/primitives/colors.d.ts

@@ -64,17 +64,17 @@ export declare const colors: {
         readonly 950: "#071927";
     };
     readonly success: {
-        readonly 50: "#ECFDF5";
-        readonly 100: "#D1FAE5";
-        readonly 200: "#A7F3D0";
-        readonly 300: "#6EE7B7";
-        readonly 400: "#34D399";
-        readonly 500: "#10B981";
-        readonly 600: "#059669";
-        readonly 700: "#047857";
-        readonly 800: "#065F46";
-        readonly 900: "#064E3B";
-        readonly 950: "#022C22";
+        readonly 50: "#F0FDFA";
+        readonly 100: "#CCFBF1";
+        readonly 200: "#99F6E4";
+        readonly 300: "#5EEAD4";
+        readonly 400: "#2DD4BF";
+        readonly 500: "#14B8A6";
+        readonly 600: "#0F9E94";
+        readonly 700: "#0F766E";
+        readonly 800: "#115E59";
+        readonly 900: "#134E4A";
+        readonly 950: "#042F2E";
     };
     readonly error: {
         readonly 50: "#FFF1F2";

package/dist/primitives/colors.js

@@ -64,17 +64,17 @@ export const colors = {
         950: '#071927',
     },
     success: {
-        50: '#ECFDF5',
-        100: '#D1FAE5',
-        200: '#A7F3D0',
-        300: '#6EE7B7',
-        400: '#34D399',
-        500: '#10B981',
-        600: '#059669',
-        700: '#047857',
-        800: '#065F46',
-        900: '#064E3B',
-        950: '#022C22',
+        50: '#F0FDFA',
+        100: '#CCFBF1',
+        200: '#99F6E4',
+        300: '#5EEAD4',
+        400: '#2DD4BF',
+        500: '#14B8A6',
+        600: '#0F9E94',
+        700: '#0F766E',
+        800: '#115E59',
+        900: '#134E4A',
+        950: '#042F2E',
     },
     error: {
         50: '#FFF1F2',

package/dist/utils/createButtonPalette.d.ts

@@ -0,0 +1,106 @@
+export type ButtonState = {
+    bg: string;
+    fg: string;
+    border: string;
+};
+export type ButtonPaletteConfig = {
+    ring: string;
+    solid: {
+        default: ButtonState;
+        hover: ButtonState;
+        pressed: ButtonState;
+    };
+    fg: string;
+    bg: string;
+    border: string;
+    hoverBg: string;
+    hoverFg: string;
+    hoverBorder?: string;
+    pressedBg: string;
+    pressedFg: string;
+    pressedBorder?: string;
+    softBorder?: string;
+    softHoverBorder?: string;
+    softPressedBorder?: string;
+};
+export declare const transparent: {
+    readonly bg: "transparent";
+    readonly border: "transparent";
+};
+export declare const createButtonPalette: ({ ring, solid, fg, bg, border, hoverBg, hoverFg, hoverBorder, pressedBg, pressedFg, pressedBorder, softBorder, softHoverBorder, softPressedBorder, }: ButtonPaletteConfig) => {
+    readonly ring: string;
+    readonly solid: {
+        default: ButtonState;
+        hover: ButtonState;
+        pressed: ButtonState;
+    };
+    readonly outline: {
+        readonly default: {
+            readonly bg: "transparent";
+            readonly fg: string;
+            readonly border: string;
+        };
+        readonly hover: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: string;
+        };
+        readonly pressed: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: string;
+        };
+    };
+    readonly ghost: {
+        readonly default: {
+            readonly fg: string;
+            readonly bg: "transparent";
+            readonly border: "transparent";
+        };
+        readonly hover: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+        readonly pressed: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: "transparent";
+        };
+    };
+    readonly soft: {
+        readonly default: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: string;
+        };
+        readonly hover: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: string;
+        };
+        readonly pressed: {
+            readonly bg: string;
+            readonly fg: string;
+            readonly border: string;
+        };
+    };
+    readonly link: {
+        readonly default: {
+            readonly fg: string;
+            readonly bg: "transparent";
+            readonly border: "transparent";
+        };
+        readonly hover: {
+            readonly fg: string;
+            readonly bg: "transparent";
+            readonly border: "transparent";
+        };
+        readonly pressed: {
+            readonly fg: string;
+            readonly bg: "transparent";
+            readonly border: "transparent";
+        };
+    };
+};
+//# sourceMappingURL=createButtonPalette.d.ts.map

package/dist/utils/createButtonPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createButtonPalette.d.ts","sourceRoot":"","sources":["../../src/utils/createButtonPalette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE;QACL,OAAO,EAAE,WAAW,CAAC;QACrB,KAAK,EAAE,WAAW,CAAC;QACnB,OAAO,EAAE,WAAW,CAAC;KACtB,CAAC;IAEF,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;CAGd,CAAC;AAEX,eAAO,MAAM,mBAAmB,GAAI,sJAejC,mBAAmB;;;iBA1CT,WAAW;eACb,WAAW;iBACT,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHX,CAAC"}

package/dist/utils/createButtonPalette.js

@@ -0,0 +1,72 @@
+export const transparent = {
+    bg: 'transparent',
+    border: 'transparent',
+};
+export const createButtonPalette = ({ ring, solid, fg, bg, border, hoverBg, hoverFg, hoverBorder = border, pressedBg, pressedFg, pressedBorder = border, softBorder = transparent.border, softHoverBorder = softBorder, softPressedBorder = softBorder, }) => ({
+    ring,
+    solid,
+    outline: {
+        default: {
+            bg: transparent.bg,
+            fg,
+            border,
+        },
+        hover: {
+            bg: hoverBg,
+            fg: hoverFg,
+            border: hoverBorder,
+        },
+        pressed: {
+            bg: pressedBg,
+            fg: pressedFg,
+            border: pressedBorder,
+        },
+    },
+    ghost: {
+        default: {
+            ...transparent,
+            fg,
+        },
+        hover: {
+            ...transparent,
+            bg: hoverBg,
+            fg: hoverFg,
+        },
+        pressed: {
+            ...transparent,
+            bg: pressedBg,
+            fg: pressedFg,
+        },
+    },
+    soft: {
+        default: {
+            bg,
+            fg,
+            border: softBorder,
+        },
+        hover: {
+            bg: hoverBg,
+            fg: hoverFg,
+            border: softHoverBorder,
+        },
+        pressed: {
+            bg: pressedBg,
+            fg: pressedFg,
+            border: softPressedBorder,
+        },
+    },
+    link: {
+        default: {
+            ...transparent,
+            fg,
+        },
+        hover: {
+            ...transparent,
+            fg: hoverFg,
+        },
+        pressed: {
+            ...transparent,
+            fg: pressedFg,
+        },
+    },
+});