@vellira-ui/tokens 2.20.0 → 2.22.0

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 fg: "#F43F5E";
+        readonly border: "#F43F5E";
     };
 };
 //# sourceMappingURL=checkbox.d.ts.map

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

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

package/dist/light/components/checkbox.js

@@ -5,11 +5,7 @@ import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const checkbox = {
-    default: {
-        bg: surface.default,
-        fg: text.primary,
-        border: border.subtle,
-    },
+    default: control.default,
     hover: control.hover,
     checked: {
         default: control.selected.default,
@@ -25,7 +21,7 @@ export const checkbox = {
         border: border.muted,
     },
     error: {
-        border: status.error.fg,
         fg: status.error.fg,
+        border: status.error.fg,
     },
 };

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: "#F43F5E";
             };
             readonly hover: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#DC2626";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#F43F5E";
             };
             readonly active: {
-                readonly bg: "#FEF2F2";
-                readonly fg: "#DC2626";
+                readonly bg: "#FFE4E6";
+                readonly fg: "#F43F5E";
                 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: "#1A1A1A";
     };
     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: "#F43F5E";
         };
         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: "#F43F5E";
     };
     readonly disabled: {
         readonly labelFg: "#9CA3AF";

package/dist/light/components/formField.js

@@ -2,10 +2,10 @@ import { status } from '../semantic/status.js';
 import { text } from '../semantic/text.js';
 export const formField = {
     label: {
-        fg: text.secondary,
+        fg: text.subtle,
     },
     description: {
-        fg: text.muted,
+        fg: text.secondary,
     },
     helperText: {
         default: {

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

@@ -1,36 +1,63 @@
 export declare const input: {
     readonly default: {
         readonly bg: "transparent";
-        readonly fg: "#3A334D";
-        readonly border: "#E8E2F3";
-        readonly placeholder: "#746F86";
+        readonly fg: "#4F4867";
+        readonly border: "#BBB2D2";
+        readonly placeholder: "#958CB0";
+        readonly icon: "#9B7CFF";
     };
     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 icon: "#9B7CFF";
     };
     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 icon: "#FFFFFF";
     };
     readonly disabled: {
         readonly bg: "#F4F1FB";
         readonly fg: "#9CA3AF";
-        readonly border: "#E8E2F3";
+        readonly border: "#E4DDF4";
         readonly placeholder: "#9CA3AF";
+        readonly icon: "#958CB0";
     };
     readonly error: {
-        readonly border: "#DC2626";
-        readonly ring: "#DC2626";
+        readonly border: "#BE123C";
+        readonly ring: "#F43F5E";
     };
     readonly success: {
-        readonly border: "#008F6A";
-        readonly ring: "#008F6A";
+        readonly border: "#047857";
+        readonly ring: "#047857";
+    };
+    readonly readOnly: {
+        readonly bg: "#FFFFFF";
+        readonly fg: "#6B6386";
+        readonly border: "#BBB2D2";
+        readonly placeholder: "#958CB0";
+        readonly icon: "#6B6386";
+    };
+    readonly icon: {
+        readonly default: "#0F0F0F";
+        readonly primary: "#7C5CFF";
+        readonly secondary: "#1FBEDB";
+        readonly success: "#059669";
+        readonly danger: "#E11D48";
+        readonly muted: "#6B6386";
+        readonly inverse: "#1A1A1A";
+    };
+    readonly clearButton: {
+        readonly fg: "#F43F5E";
+        readonly hoverFg: "#F43F5E";
+        readonly hoverBg: string;
+        readonly focusBg: "#181521";
+        readonly pressedBg: "#BBB2D2";
     };
 };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCR,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqER,CAAC"}

package/dist/light/components/input.js

@@ -1,6 +1,7 @@
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
+import { icons } from '../semantic/icons.js';
 import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
@@ -10,12 +11,14 @@ export const input = {
         fg: text.primary,
         border: border.default,
         placeholder: text.muted,
+        icon: icons.brand,
     },
     hover: {
         bg: control.hover.bg,
         fg: text.primary,
         border: control.hover.border,
         placeholder: text.muted,
+        icon: icons.hover,
     },
     focus: {
         bg: 'transparent',
@@ -23,12 +26,14 @@ export const input = {
         border: border.focus,
         ring: focus.ring,
         placeholder: text.muted,
+        icon: icons.subtle,
     },
     disabled: {
-        bg: surface.subtle,
+        bg: surface.disabled,
         fg: text.disabled,
-        border: border.default,
+        border: border.disabled,
         placeholder: text.disabled,
+        icon: icons.disabled,
     },
     error: {
         border: status.error.strong,
@@ -38,4 +43,27 @@ export const input = {
         border: status.success.strong,
         ring: status.success.fg,
     },
+    readOnly: {
+        bg: surface.subtle,
+        fg: text.secondary,
+        border: border.default,
+        placeholder: text.muted,
+        icon: icons.muted,
+    },
+    icon: {
+        default: icons.default,
+        primary: icons.primary,
+        secondary: icons.secondary,
+        success: icons.success,
+        danger: icons.danger,
+        muted: icons.muted,
+        inverse: icons.inverse,
+    },
+    clearButton: {
+        fg: status.error.fg,
+        hoverFg: status.error.fg,
+        hoverBg: surface.danger,
+        focusBg: surface.inverse,
+        pressedBg: surface.active,
+    },
 };

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: "#F43F5E";
             };
             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: "#BBB2D2";
     };
     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: "#BBB2D2";
     };
     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: "#BBB2D2";
     };
 };
 //# 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: "#BBB2D2";
         };
         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: "#F43F5E";
+            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: {