@vellira-ui/tokens 2.26.0 → 2.27.0

package/dist/dark/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[300],
-                border: colors.primary[500],
-            },
-            hover: {
-                bg: surface.elevated,
-                fg: colors.primary[200],
-                border: colors.primary[400],
-            },
-            pressed: {
-                bg: surface.active,
-                fg: colors.primary[100],
-                border: colors.primary[500],
-            },
+        hover: {
+            bg: colors.primary[700],
+            fg: colors.primary[200],
+            border: colors.primary[700],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.primary[300],
-            },
-            hover: {
-                ...transparent,
-                bg: surface.elevated,
-                fg: colors.primary[200],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.active,
-                fg: colors.primary[100],
-            },
+        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[400],
+    bg: colors.primary[950],
+    border: colors.primary[300],
+    hoverFg: colors.primary[400],
+    hoverBg: colors.primary[900],
+    hoverBorder: colors.primary[500],
+    pressedFg: colors.primary[500],
+    pressedBg: colors.primary[800],
+    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[300],
-                border: colors.secondary[500],
-            },
-            hover: {
-                bg: surface.elevated,
-                fg: colors.secondary[200],
-                border: colors.secondary[400],
-            },
-            pressed: {
-                bg: surface.active,
-                fg: colors.secondary[100],
-                border: colors.secondary[500],
-            },
+        hover: {
+            bg: colors.vellira[300],
+            fg: colors.vellira[900],
+            border: colors.vellira[300],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.secondary[300],
-            },
-            hover: {
-                ...transparent,
-                bg: surface.elevated,
-                fg: colors.secondary[200],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.active,
-                fg: colors.secondary[100],
-            },
+        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[200],
+    bg: colors.vellira[800],
+    border: colors.vellira[300],
+    hoverFg: colors.vellira[300],
+    hoverBg: colors.vellira[700],
+    hoverBorder: colors.vellira[400],
+    pressedFg: colors.vellira[400],
+    pressedBg: colors.vellira[800],
+    pressedBorder: colors.vellira[500],
+});
+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[300],
-                border: colors.vellira[500],
-            },
-            hover: {
-                bg: surface.elevated,
-                fg: colors.vellira[200],
-                border: colors.vellira[400],
-            },
-            pressed: {
-                bg: surface.active,
-                fg: colors.vellira[100],
-                border: colors.vellira[500],
-            },
+        hover: {
+            bg: colors.success[600],
+            fg: colors.success[900],
+            border: colors.success[600],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.vellira[300],
-            },
-            hover: {
-                ...transparent,
-                bg: surface.elevated,
-                fg: colors.vellira[200],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.active,
-                fg: colors.vellira[100],
-            },
+        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[400],
+    bg: colors.success[950],
+    border: colors.success[500],
+    hoverFg: colors.success[500],
+    hoverBg: colors.success[900],
+    hoverBorder: colors.success[600],
+    pressedFg: colors.success[600],
+    pressedBg: colors.success[800],
+    pressedBorder: colors.success[700],
+});
+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[300],
-                border: colors.error[400],
-            },
-            pressed: {
-                bg: surface.danger,
-                fg: colors.error[200],
-                border: colors.error[500],
-            },
+        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[300],
-            },
-            pressed: {
-                ...transparent,
-                bg: surface.danger,
-                fg: colors.error[200],
-            },
+        pressed: {
+            bg: colors.warning[700],
+            fg: colors.warning[800],
+            border: colors.warning[700],
         },
     },
+    fg: colors.warning[400],
+    bg: colors.warning[950],
+    border: colors.warning[500],
+    hoverFg: colors.warning[500],
+    hoverBg: colors.warning[900],
+    hoverBorder: colors.warning[600],
+    pressedFg: colors.warning[600],
+    pressedBg: colors.warning[800],
+    pressedBorder: colors.warning[700],
+});
+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[400],
+    bg: colors.error[950],
+    border: colors.error[500],
+    hoverFg: colors.error[500],
+    hoverBg: colors.error[900],
+    hoverBorder: colors.error[600],
+    pressedFg: colors.error[600],
+    pressedBg: colors.error[800],
+    pressedBorder: colors.error[700],
+});
+export const button = {
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     disabled: {
         bg: surface.disabled,
         fg: text.disabled,

package/dist/dark/components/checkbox.d.ts

@@ -5,6 +5,7 @@ export declare const checkbox: {
         readonly border: "#4F4867";
     };
     readonly hover: {
+        readonly labelFg: "#9B7CFF";
         readonly bg: "#2F2A42";
         readonly fg: "#B8A8FF";
         readonly border: "#B8A8FF";
@@ -12,9 +13,9 @@ export declare const checkbox: {
     readonly checked: {
         readonly default: {
             readonly labelFg: "#B8A8FF";
-            readonly bg: "#7C5CFF";
+            readonly bg: "#7352F8";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C5CFF";
+            readonly border: "#7352F8";
         };
         readonly hover: {
             readonly labelFg: "#9B7CFF";
@@ -23,7 +24,7 @@ export declare const checkbox: {
             readonly border: "#9B7CFF";
         };
         readonly pressed: {
-            readonly labelFg: "#7C5CFF";
+            readonly labelFg: "#7352F8";
             readonly bg: "#6346E8";
             readonly fg: "#FFFFFF";
             readonly border: "#6346E8";

package/dist/dark/components/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/dark/components/checkbox.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CX,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/dark/components/checkbox.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CX,CAAC"}

package/dist/dark/components/checkbox.js

@@ -11,9 +11,8 @@ export const checkbox = {
         border: border.default,
     },
     hover: {
-        bg: control.hover.bg,
-        fg: control.hover.fg,
-        border: control.hover.border,
+        ...control.hover,
+        labelFg: text.interactiveHover,
     },
     checked: {
         default: {

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

@@ -13,7 +13,7 @@ export declare const formField: {
             readonly fg: "#FB7185";
         };
         readonly success: {
-            readonly fg: "#34D399";
+            readonly fg: "#2DD4BF";
         };
         readonly warning: {
             readonly fg: "#FBBF24";

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

@@ -33,8 +33,8 @@ export declare const input: {
         readonly ring: "#FB7185";
     };
     readonly success: {
-        readonly border: "#34D399";
-        readonly ring: "#34D399";
+        readonly border: "#2DD4BF";
+        readonly ring: "#2DD4BF";
     };
     readonly readOnly: {
         readonly bg: "#242034";
@@ -47,7 +47,7 @@ export declare const input: {
         readonly default: "#F4F1FB";
         readonly primary: "#B8A8FF";
         readonly secondary: "#E5E7EB";
-        readonly success: "#34D399";
+        readonly success: "#2DD4BF";
         readonly danger: "#FB7185";
         readonly muted: "#958CB0";
         readonly inverse: "#000000";

package/dist/dark/components/radio.d.ts

@@ -18,7 +18,7 @@ export declare const radio: {
         readonly default: {
             readonly bg: "#181521";
             readonly fg: "#B8A8FF";
-            readonly border: "#7C5CFF";
+            readonly border: "#7352F8";
             readonly labelFg: "#B8A8FF";
         };
         readonly hover: {

package/dist/dark/components/tabs.d.ts

@@ -59,7 +59,7 @@ export declare const tabs: {
             readonly bg: "#B8A8FF";
         };
         readonly hover: {
-            readonly bg: "#7C5CFF";
+            readonly bg: "#7352F8";
         };
         readonly active: {
             readonly bg: "#6346E8";

package/dist/dark/semantic/action.d.ts

@@ -6,9 +6,9 @@ export declare const action: {
             readonly border: "#6346E8";
         };
         readonly hover: {
-            readonly bg: "#7C5CFF";
+            readonly bg: "#7352F8";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C5CFF";
+            readonly border: "#7352F8";
         };
         readonly active: {
             readonly bg: "#5037C8";
@@ -55,18 +55,18 @@ export declare const action: {
     };
     readonly close: {
         readonly default: {
-            readonly bg: "#958CB0";
+            readonly bg: "#BBB2D2";
             readonly fg: "#000000";
-            readonly border: "#958CB0";
+            readonly border: "#BBB2D2";
         };
         readonly hover: {
-            readonly bg: "#BBB2D2";
+            readonly bg: "#E4DDF4";
             readonly fg: "#000000";
-            readonly border: "#BBB2D2";
+            readonly border: "#E4DDF4";
         };
         readonly active: {
             readonly bg: "#6B6386";
-            readonly fg: "#000000";
+            readonly fg: "#FFFFFF";
             readonly border: "#6B6386";
         };
         readonly muted: {
@@ -75,7 +75,7 @@ export declare const action: {
             readonly border: "#3D3754";
         };
         readonly subtle: {
-            readonly bg: "#E4DDF4";
+            readonly bg: "#EEE8FA";
             readonly fg: "#BBB2D2";
             readonly border: "transparent";
         };

package/dist/dark/semantic/action.js

@@ -57,18 +57,18 @@ export const action = {
     },
     close: {
         default: {
-            bg: colors.vellira[400],
+            bg: colors.vellira[300],
             fg: text.inverse,
-            border: colors.vellira[400],
+            border: colors.vellira[300],
         },
         hover: {
-            bg: colors.vellira[300],
+            bg: colors.vellira[200],
             fg: text.inverse,
-            border: colors.vellira[300],
+            border: colors.vellira[200],
         },
         active: {
             bg: colors.vellira[500],
-            fg: text.inverse,
+            fg: colors.mono[50],
             border: colors.vellira[500],
         },
         muted: {
@@ -77,7 +77,7 @@ export const action = {
             border: colors.vellira[700],
         },
         subtle: {
-            bg: colors.vellira[200],
+            bg: colors.vellira[150],
             fg: text.secondary,
             border: 'transparent',
         },

package/dist/dark/semantic/control.d.ts

@@ -21,9 +21,9 @@ export declare const control: {
     };
     readonly selected: {
         readonly default: {
-            readonly bg: "#7C5CFF";
+            readonly bg: "#7352F8";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C5CFF";
+            readonly border: "#7352F8";
         };
         readonly hover: {
             readonly bg: "#9B7CFF";

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

@@ -7,7 +7,7 @@ export declare const icons: {
     readonly primary: "#B8A8FF";
     readonly brand: "#B8A8FF";
     readonly hover: "#D4CCFF";
-    readonly success: "#34D399";
+    readonly success: "#2DD4BF";
     readonly danger: "#FB7185";
     readonly inverse: "#000000";
 };

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

@@ -1,10 +1,10 @@
 export declare const status: {
     readonly success: {
-        readonly fg: "#34D399";
+        readonly fg: "#2DD4BF";
         readonly bg: "rgba(52, 211, 153, 0.14)";
-        readonly border: "#34D399";
-        readonly ring: "#6EE7B7";
-        readonly strong: "#059669";
+        readonly border: "#2DD4BF";
+        readonly ring: "#5EEAD4";
+        readonly strong: "#0F9E94";
     };
     readonly error: {
         readonly fg: "#FB7185";

package/dist/dark/semantic/text.d.ts

@@ -7,7 +7,7 @@ export declare const text: {
     readonly brand: "#B8A8FF";
     readonly interactive: "#B8A8FF";
     readonly interactiveHover: "#9B7CFF";
-    readonly interactiveActive: "#7C5CFF";
+    readonly interactiveActive: "#7352F8";
     readonly inverse: "#000000";
 };
 //# sourceMappingURL=text.d.ts.map

package/dist/dark/theme.d.ts

@@ -9,7 +9,7 @@ export declare const darkTheme: {
             readonly 200: "#D4CCFF";
             readonly 300: "#B8A8FF";
             readonly 400: "#9B7CFF";
-            readonly 500: "#7C5CFF";
+            readonly 500: "#7352F8";
             readonly 600: "#6346E8";
             readonly 700: "#5037C8";
             readonly 800: "#402C9F";
@@ -62,17 +62,17 @@ export declare const darkTheme: {
             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";