@vellira-ui/tokens 2.20.0 → 2.21.0

package/dist/light/components/button.js

@@ -1,5 +1,6 @@
 import { action } from '../semantic/action.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 = {
@@ -19,12 +20,12 @@ export const button = {
                 border: action.primary.default.border,
             },
             hover: {
-                bg: action.primary.subtle.bg,
+                bg: surface.hover,
                 fg: action.primary.hover.bg,
                 border: action.primary.hover.border,
             },
             pressed: {
-                bg: action.primary.subtle.bg,
+                bg: surface.pressed,
                 fg: action.primary.active.bg,
                 border: action.primary.active.border,
             },
@@ -60,7 +61,7 @@ export const button = {
                 border: action.secondary.default.border,
             },
             hover: {
-                bg: surface.hover,
+                bg: surface.elevated,
                 fg: action.secondary.hover.bg,
                 border: action.secondary.hover.border,
             },
@@ -77,7 +78,7 @@ export const button = {
                 border: 'transparent',
             },
             hover: {
-                bg: surface.hover,
+                bg: surface.elevated,
                 fg: action.secondary.hover.bg,
                 border: 'transparent',
             },
@@ -97,13 +98,13 @@ export const button = {
         outline: {
             default: {
                 ...transparent,
-                fg: action.close.default.bg,
-                border: action.close.default.border,
+                fg: action.close.muted.bg,
+                border: action.close.muted.border,
             },
             hover: {
                 bg: surface.hover,
-                fg: action.close.hover.bg,
-                border: action.close.hover.border,
+                fg: action.close.subtle.bg,
+                border: action.close.subtle.border,
             },
             pressed: {
                 bg: surface.pressed,
@@ -114,17 +115,17 @@ export const button = {
         ghost: {
             default: {
                 ...transparent,
-                fg: action.close.default.bg,
+                fg: text.primary,
                 border: 'transparent',
             },
             hover: {
-                bg: surface.hover,
-                fg: action.close.hover.bg,
+                bg: action.primary.subtle.bg,
+                fg: text.primary,
                 border: 'transparent',
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.close.active.bg,
+                bg: action.primary.subtle.bg,
+                fg: text.primary,
                 border: 'transparent',
             },
         },
@@ -142,12 +143,12 @@ export const button = {
                 border: action.danger.default.border,
             },
             hover: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.hover.bg,
                 border: action.danger.hover.border,
             },
             pressed: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: action.danger.active.border,
             },
@@ -159,19 +160,19 @@ export const button = {
                 border: 'transparent',
             },
             hover: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.hover.bg,
                 border: 'transparent',
             },
             pressed: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: 'transparent',
             },
         },
     },
     disabled: {
-        bg: surface.subtle,
+        bg: surface.disabled,
         fg: text.disabled,
         border: border.default,
     },

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

@@ -1,42 +1,42 @@
 export declare const checkbox: {
     readonly default: {
-        readonly bg: "#FDFCFF";
-        readonly fg: "#3A334D";
-        readonly border: "#D8D3E8";
+        readonly bg: "#F4F1FB";
+        readonly fg: "#4F4867";
+        readonly border: "#D4CEE8";
     };
     readonly hover: {
-        readonly bg: "#EEF0FF";
-        readonly fg: "#4338CA";
-        readonly border: "#5B4BEA";
+        readonly bg: "#F4F3FF";
+        readonly fg: "#342580";
+        readonly border: "#5037C8";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#5B4BEA";
+            readonly bg: "#5037C8";
             readonly fg: "#FFFFFF";
-            readonly border: "#5B4BEA";
+            readonly border: "#5037C8";
         };
         readonly hover: {
-            readonly bg: "#4936D9";
+            readonly bg: "#402C9F";
             readonly fg: "#FFFFFF";
-            readonly border: "#4936D9";
+            readonly border: "#402C9F";
         };
         readonly pressed: {
-            readonly bg: "#3B2BBF";
+            readonly bg: "#21164F";
             readonly fg: "#FFFFFF";
-            readonly border: "#3B2BBF";
+            readonly border: "#21164F";
         };
     };
     readonly focus: {
-        readonly ring: "#5B4BEA";
+        readonly ring: "#5037C8";
     };
     readonly disabled: {
-        readonly bg: "#F4F1FB";
+        readonly bg: "#FFFFFF";
         readonly fg: "#9CA3AF";
         readonly border: "#EEE8FA";
     };
     readonly error: {
-        readonly border: "#DC2626";
-        readonly fg: "#DC2626";
+        readonly border: "#BE123C";
+        readonly fg: "#BE123C";
     };
 };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -2,20 +2,20 @@ export declare const dropdown: {
     readonly trigger: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#5B4BEA";
+            readonly fg: "#5037C8";
             readonly border: "transparent";
         };
         readonly hover: {
             readonly bg: "#F4F1FB";
-            readonly fg: "#4338CA";
+            readonly fg: "#342580";
             readonly border: "transparent";
             readonly ring: "transparent";
         };
         readonly focus: {
             readonly bg: "transparent";
-            readonly fg: "#5B4BEA";
-            readonly border: "#5B4BEA";
-            readonly ring: "#5B4BEA";
+            readonly fg: "#5037C8";
+            readonly border: "#5037C8";
+            readonly ring: "#5037C8";
         };
         readonly disabled: {
             readonly bg: "#F4F1FB";
@@ -25,25 +25,25 @@ export declare const dropdown: {
     };
     readonly content: {
         readonly bg: "#FFFFFF";
-        readonly fg: "#3A334D";
-        readonly border: "#E8E2F3";
+        readonly fg: "#4F4867";
+        readonly border: "#E4DDF4";
     };
     readonly item: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#3A334D";
+            readonly fg: "#4F4867";
         };
         readonly hover: {
             readonly bg: "#F4F1FB";
-            readonly fg: "#3A334D";
+            readonly fg: "#4F4867";
         };
         readonly active: {
             readonly bg: "#F4F1FB";
-            readonly fg: "#3A334D";
+            readonly fg: "#4F4867";
             readonly ring: "transparent";
         };
         readonly focus: {
-            readonly ring: "#5B4BEA";
+            readonly ring: "#5037C8";
         };
         readonly disabled: {
             readonly bg: "transparent";
@@ -51,25 +51,25 @@ export declare const dropdown: {
         };
         readonly danger: {
             readonly default: {
-                readonly fg: "#DC2626";
+                readonly fg: "#BE123C";
             };
             readonly hover: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#DC2626";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#BE123C";
             };
             readonly active: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#DC2626";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#BE123C";
                 readonly ring: "transparent";
             };
         };
     };
     readonly groupLabel: {
-        readonly fg: "#746F86";
+        readonly fg: "#958CB0";
     };
     readonly separator: {
         readonly bg: "#EEE8FA";
-        readonly fg: "#746F86";
+        readonly fg: "#958CB0";
     };
 };
 //# sourceMappingURL=dropdown.d.ts.map

package/dist/light/components/dropdown.js

@@ -24,13 +24,13 @@ export const dropdown = {
             ring: focus.ring,
         },
         disabled: {
-            bg: surface.subtle,
+            bg: surface.disabled,
             fg: text.disabled,
             border: border.muted,
         },
     },
     content: {
-        bg: surface.elevated,
+        bg: surface.subtle,
         fg: text.primary,
         border: navigation.border,
     },

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

@@ -1,29 +1,29 @@
 export declare const formField: {
     readonly label: {
-        readonly fg: "#413957";
+        readonly fg: "#6B6386";
     };
     readonly description: {
-        readonly fg: "#746F86";
+        readonly fg: "#6B6386";
     };
     readonly helperText: {
         readonly default: {
-            readonly fg: "#746F86";
+            readonly fg: "#958CB0";
         };
         readonly error: {
-            readonly fg: "#DC2626";
+            readonly fg: "#BE123C";
         };
         readonly success: {
-            readonly fg: "#008F6A";
+            readonly fg: "#047857";
         };
         readonly warning: {
-            readonly fg: "#C05621";
+            readonly fg: "#B45309";
         };
         readonly info: {
-            readonly fg: "#0265c7";
+            readonly fg: "#0C4A6E";
         };
     };
     readonly requiredMark: {
-        readonly fg: "#DC2626";
+        readonly fg: "#BE123C";
     };
     readonly disabled: {
         readonly labelFg: "#9CA3AF";

package/dist/light/components/formField.js

@@ -5,7 +5,7 @@ export const formField = {
         fg: text.secondary,
     },
     description: {
-        fg: text.muted,
+        fg: text.secondary,
     },
     helperText: {
         default: {

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

@@ -1,36 +1,36 @@
 export declare const input: {
     readonly default: {
         readonly bg: "transparent";
-        readonly fg: "#3A334D";
-        readonly border: "#E8E2F3";
-        readonly placeholder: "#746F86";
+        readonly fg: "#4F4867";
+        readonly border: "#EEE8FA";
+        readonly placeholder: "#958CB0";
     };
     readonly hover: {
-        readonly bg: "#EEF0FF";
-        readonly fg: "#3A334D";
-        readonly border: "#5B4BEA";
-        readonly placeholder: "#746F86";
+        readonly bg: "#F4F3FF";
+        readonly fg: "#4F4867";
+        readonly border: "#5037C8";
+        readonly placeholder: "#958CB0";
     };
     readonly focus: {
         readonly bg: "transparent";
-        readonly fg: "#3A334D";
-        readonly border: "#5B4BEA";
-        readonly ring: "#5B4BEA";
-        readonly placeholder: "#746F86";
+        readonly fg: "#4F4867";
+        readonly border: "#5037C8";
+        readonly ring: "#5037C8";
+        readonly placeholder: "#958CB0";
     };
     readonly disabled: {
-        readonly bg: "#F4F1FB";
+        readonly bg: "#FFFFFF";
         readonly fg: "#9CA3AF";
-        readonly border: "#E8E2F3";
+        readonly border: "#EEE8FA";
         readonly placeholder: "#9CA3AF";
     };
     readonly error: {
-        readonly border: "#DC2626";
-        readonly ring: "#DC2626";
+        readonly border: "#BE123C";
+        readonly ring: "#BE123C";
     };
     readonly success: {
-        readonly border: "#008F6A";
-        readonly ring: "#008F6A";
+        readonly border: "#047857";
+        readonly ring: "#047857";
     };
 };
 //# sourceMappingURL=input.d.ts.map

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

@@ -2,49 +2,49 @@ export declare const menu: {
     readonly item: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#3A334D";
+            readonly fg: "#4F4867";
         };
         readonly hover: {
             readonly bg: "#F4F1FB";
-            readonly fg: "#3A334D";
+            readonly fg: "#4F4867";
         };
         readonly active: {
             readonly bg: "#EEE8FA";
-            readonly fg: "#3A334D";
+            readonly fg: "#4F4867";
         };
         readonly focus: {
             readonly ring: "transparent";
         };
         readonly disabled: {
-            readonly bg: "#F4F1FB";
+            readonly bg: "#FFFFFF";
             readonly fg: "#9CA3AF";
         };
         readonly danger: {
             readonly default: {
-                readonly fg: "#DC2626";
+                readonly fg: "#BE123C";
             };
             readonly hover: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#DC2626";
+                readonly bg: "#FFF1F2";
+                readonly fg: "#BE123C";
             };
             readonly active: {
-                readonly bg: "#FFF1F2";
-                readonly fg: "#DC2626";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#BE123C";
             };
         };
     };
     readonly trigger: {
         readonly default: {
-            readonly fg: "#5B4BEA";
+            readonly fg: "#5037C8";
         };
         readonly hover: {
             readonly bg: "#F4F1FB";
-            readonly fg: "#4338CA";
+            readonly fg: "#342580";
             readonly ring: "transparent";
         };
     };
     readonly groupLabel: {
-        readonly fg: "#746F86";
+        readonly fg: "#958CB0";
     };
 };
 //# sourceMappingURL=menu.d.ts.map

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

@@ -4,23 +4,23 @@ export declare const modal: {
     };
     readonly content: {
         readonly bg: "#FFFFFF";
-        readonly fg: "#3A334D";
-        readonly border: "#E8E2F3";
+        readonly fg: "#4F4867";
+        readonly border: "#EEE8FA";
     };
     readonly title: {
-        readonly fg: "#3A334D";
+        readonly fg: "#4F4867";
     };
     readonly description: {
-        readonly fg: "#413957";
+        readonly fg: "#6B6386";
     };
     readonly closeButton: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#746F86";
+            readonly fg: "#958CB0";
         };
         readonly hover: {
-            readonly bg: "#F4F1FB";
-            readonly fg: "#3A334D";
+            readonly bg: "#FFFFFF";
+            readonly fg: "#4F4867";
         };
         readonly disabled: {
             readonly bg: "transparent";

package/dist/light/components/modal.js

@@ -7,7 +7,7 @@ export const modal = {
         bg: overlay.backdrop,
     },
     content: {
-        bg: surface.elevated,
+        bg: surface.subtle,
         fg: text.primary,
         border: border.default,
     },

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

@@ -1,38 +1,38 @@
 export declare const radio: {
     readonly default: {
-        readonly bg: "#FDFCFF";
-        readonly fg: "#3A334D";
-        readonly border: "#E8E2F3";
+        readonly bg: "#F4F1FB";
+        readonly fg: "#4F4867";
+        readonly border: "#EEE8FA";
     };
     readonly hover: {
-        readonly bg: "#EEF0FF";
-        readonly fg: "#4338CA";
-        readonly border: "#5B4BEA";
+        readonly bg: "#F4F3FF";
+        readonly fg: "#342580";
+        readonly border: "#5037C8";
     };
     readonly checked: {
         readonly default: {
-            readonly fg: "#5B4BEA";
-            readonly bg: "#5B4BEA";
-            readonly border: "#5B4BEA";
+            readonly fg: "#5037C8";
+            readonly bg: "#5037C8";
+            readonly border: "#5037C8";
         };
         readonly hover: {
-            readonly fg: "#5B4BEA";
-            readonly bg: "#4936D9";
-            readonly border: "#4936D9";
+            readonly fg: "#5037C8";
+            readonly bg: "#402C9F";
+            readonly border: "#402C9F";
         };
         readonly pressed: {
-            readonly bg: "#3B2BBF";
+            readonly bg: "#21164F";
             readonly fg: "#FFFFFF";
-            readonly border: "#3B2BBF";
+            readonly border: "#21164F";
         };
     };
     readonly focus: {
-        readonly ring: "#5B4BEA";
+        readonly ring: "#5037C8";
     };
     readonly disabled: {
-        readonly bg: "#F4F1FB";
+        readonly bg: "#FFFFFF";
         readonly fg: "#9CA3AF";
-        readonly border: "#E8E2F3";
+        readonly border: "#EEE8FA";
     };
 };
 //# sourceMappingURL=radio.d.ts.map

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

@@ -1,56 +1,56 @@
 export declare const select: {
     readonly trigger: {
         readonly default: {
-            readonly bg: "#FDFCFF";
+            readonly bg: "#F4F1FB";
             readonly fg: "#1A1A1A";
-            readonly border: "#E8E2F3";
+            readonly border: "#EEE8FA";
         };
         readonly hover: {
-            readonly bg: "#EEF0FF";
-            readonly fg: "#4338CA";
-            readonly border: "#5B4BEA";
+            readonly bg: "#F4F3FF";
+            readonly fg: "#342580";
+            readonly border: "#5037C8";
         };
         readonly focus: {
-            readonly bg: "#FDFCFF";
-            readonly fg: "#3A334D";
-            readonly border: "#5B4BEA";
-            readonly ring: "#5B4BEA";
+            readonly bg: "#F4F1FB";
+            readonly fg: "#4F4867";
+            readonly border: "#5037C8";
+            readonly ring: "#5037C8";
         };
         readonly disabled: {
-            readonly bg: "#F4F1FB";
+            readonly bg: "#FFFFFF";
             readonly fg: "#9CA3AF";
             readonly border: "#EEE8FA";
         };
         readonly placeholder: {
-            readonly fg: "#746F86";
+            readonly fg: "#6B6386";
         };
         readonly error: {
-            readonly border: "#DC2626";
-            readonly ring: "#FEF2F2";
+            readonly border: "#BE123C";
+            readonly ring: "#FFE4E6";
         };
     };
     readonly dropdown: {
         readonly bg: "#FFFFFF";
-        readonly fg: "#3A334D";
+        readonly fg: "#4F4867";
         readonly border: "#EEE8FA";
     };
     readonly option: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#3A334D";
+            readonly fg: "#4F4867";
             readonly border: "#EEE8FA";
         };
         readonly hover: {
-            readonly bg: "#D1D5DB";
-            readonly fg: "#3A334D";
+            readonly bg: "#F4F1FB";
+            readonly fg: "#342580";
         };
         readonly active: {
             readonly ring: "transparent";
-            readonly bg: "#E5E7EB";
-            readonly fg: "#3A334D";
+            readonly bg: "#F4F1FB";
+            readonly fg: "#342580";
         };
         readonly selected: {
-            readonly bg: "#5B4BEA";
+            readonly bg: "#5037C8";
             readonly fg: "#FFFFFF";
         };
         readonly disabled: {

package/dist/light/components/select.js

@@ -25,7 +25,7 @@ export const select = {
             border: border.muted,
         },
         placeholder: {
-            fg: text.muted,
+            fg: text.secondary,
         },
         error: {
             border: status.error.fg,
@@ -33,7 +33,7 @@ export const select = {
         },
     },
     dropdown: {
-        bg: surface.elevated,
+        bg: surface.subtle,
         fg: text.primary,
         border: border.muted,
     },
@@ -43,9 +43,9 @@ export const select = {
             fg: text.primary,
             border: border.muted,
         },
-        hover: navigation.optionHover,
+        hover: navigation.brandHover,
         active: {
-            ...navigation.optionActive,
+            ...navigation.brandHover,
             ring: 'transparent',
         },
         selected: {