@vellira-ui/tokens 2.25.0 → 2.26.0

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

@@ -1,12 +1,12 @@
 export declare const radio: {
     readonly default: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#4F4867";
+        readonly bg: "#FFFFFF";
+        readonly fg: "#3D3754";
         readonly border: "#BBB2D2";
     };
     readonly hover: {
         readonly bg: "#F4F3FF";
-        readonly fg: "#5037C8";
+        readonly fg: "#402C9F";
         readonly border: "#5037C8";
     };
     readonly pressed: {
@@ -16,39 +16,44 @@ export declare const radio: {
     };
     readonly checked: {
         readonly default: {
-            readonly fg: "#5037C8";
-            readonly bg: "#6346E8";
+            readonly bg: "#FFFFFF";
+            readonly fg: "#6346E8";
             readonly border: "#6346E8";
+            readonly labelFg: "#5037C8";
         };
         readonly hover: {
+            readonly bg: "#F4F3FF";
             readonly fg: "#5037C8";
-            readonly bg: "#402C9F";
-            readonly border: "#402C9F";
+            readonly border: "#5037C8";
+            readonly labelFg: "#402C9F";
         };
         readonly pressed: {
-            readonly fg: "#5037C8";
-            readonly bg: "#21164F";
-            readonly border: "#21164F";
+            readonly bg: "#E9E6FF";
+            readonly fg: "#402C9F";
+            readonly border: "#402C9F";
+            readonly labelFg: "#342580";
         };
         readonly disabled: {
-            readonly bg: "#FFFFFF";
-            readonly fg: "#9CA3AF";
-            readonly border: "#BBB2D2";
+            readonly bg: "#F4F1FB";
+            readonly fg: "#958CB0";
+            readonly border: "#E4DDF4";
+            readonly labelFg: "#958CB0";
         };
     };
     readonly invalid: {
-        readonly bg: "#F4F1FB";
-        readonly fg: "#0F0F0F";
         readonly border: "#E11D48";
+        readonly ring: "#F43F5E";
+        readonly bg: "#FFFFFF";
+        readonly fg: "#3D3754";
     };
     readonly focus: {
         readonly ring: "#5037C8";
         readonly border: "#5037C8";
     };
     readonly disabled: {
-        readonly bg: "#FFFFFF";
-        readonly fg: "#9CA3AF";
-        readonly border: "#BBB2D2";
+        readonly bg: "#F4F1FB";
+        readonly fg: "#958CB0";
+        readonly border: "#E4DDF4";
     };
 };
 //# sourceMappingURL=radio.d.ts.map

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

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

package/dist/light/components/radio.js

@@ -1,3 +1,4 @@
+import { colors } from '../../primitives/colors.js';
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
@@ -5,44 +6,43 @@ import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const radio = {
-    default: {
-        bg: surface.default,
-        fg: text.primary,
-        border: border.default,
-    },
+    default: control.default,
     hover: control.hover,
     pressed: control.active,
     checked: {
         default: {
-            ...control.selected.default,
-            fg: text.brand,
+            bg: surface.elevated,
+            fg: colors.primary[600],
+            border: colors.primary[600],
+            labelFg: text.interactive,
         },
         hover: {
-            ...control.selected.hover,
-            fg: text.brand,
+            bg: colors.primary[50],
+            fg: colors.primary[700],
+            border: colors.primary[700],
+            labelFg: text.interactiveHover,
         },
         pressed: {
-            ...control.selected.active,
-            fg: text.brand,
+            bg: colors.primary[100],
+            fg: colors.primary[800],
+            border: colors.primary[800],
+            labelFg: text.interactiveActive,
         },
         disabled: {
-            bg: surface.subtle,
+            bg: surface.disabled,
             fg: text.disabled,
-            border: border.default,
+            border: border.disabled,
+            labelFg: text.disabled,
         },
     },
     invalid: {
-        bg: surface.default,
-        fg: text.inverse,
+        ...control.default,
         border: status.error.border,
+        ring: status.error.ring,
     },
     focus: {
-        ring: focus.ring,
+        ring: focus.ring.color,
         border: border.focus,
     },
-    disabled: {
-        bg: surface.subtle,
-        fg: text.disabled,
-        border: border.default,
-    },
+    disabled: control.disabled,
 };

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

@@ -1,24 +1,24 @@
 export declare const select: {
     readonly trigger: {
         readonly default: {
-            readonly bg: "#FFFFFF";
-            readonly fg: "#1A1A1A";
+            readonly bg: "transparent";
+            readonly fg: "#3D3754";
             readonly border: "#BBB2D2";
         };
         readonly hover: {
             readonly bg: "#F4F3FF";
-            readonly fg: "#5037C8";
+            readonly fg: "#402C9F";
             readonly border: "#5037C8";
         };
         readonly focus: {
-            readonly bg: "#F4F1FB";
-            readonly fg: "#4F4867";
+            readonly bg: "transparent";
+            readonly fg: "#3D3754";
             readonly border: "#5037C8";
             readonly ring: "#5037C8";
         };
         readonly disabled: {
             readonly bg: "#F4F1FB";
-            readonly fg: "#9CA3AF";
+            readonly fg: "#958CB0";
             readonly border: "#E4DDF4";
         };
         readonly placeholder: {
@@ -26,37 +26,47 @@ export declare const select: {
         };
         readonly error: {
             readonly border: "#E11D48";
-            readonly ring: "#FFE4E6";
+            readonly ring: "#F43F5E";
         };
     };
     readonly dropdown: {
         readonly bg: "#FFFFFF";
-        readonly fg: "#4F4867";
-        readonly border: "#EEE8FA";
+        readonly fg: "#3D3754";
+        readonly border: "#E4DDF4";
+        readonly shadow: "0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1)";
     };
     readonly option: {
         readonly default: {
+            readonly border: "transparent";
             readonly bg: "transparent";
-            readonly fg: "#4F4867";
-            readonly border: "#EEE8FA";
+            readonly fg: "#3D3754";
         };
         readonly hover: {
+            readonly border: "transparent";
             readonly bg: "#F4F1FB";
-            readonly fg: "#342580";
+            readonly fg: "#3D3754";
         };
         readonly active: {
+            readonly border: "transparent";
             readonly ring: "transparent";
-            readonly bg: "#F4F1FB";
-            readonly fg: "#342580";
+            readonly bg: "#EEE8FA";
+            readonly fg: "#3D3754";
+        };
+        readonly pressed: {
+            readonly border: "transparent";
+            readonly bg: "#E4DDF4";
+            readonly fg: "#3D3754";
         };
         readonly selected: {
-            readonly bg: "#6346E8";
-            readonly fg: "#FFFFFF";
+            readonly bg: "#E9E6FF";
+            readonly fg: "#342580";
+            readonly border: "#B8A8FF";
+            readonly shadow: "inset 0 1px 0 rgba(255, 255, 255, 0.55)";
         };
         readonly disabled: {
+            readonly border: "transparent";
             readonly bg: "transparent";
-            readonly fg: "#9CA3AF";
-            readonly border: "#EEE8FA";
+            readonly fg: "#958CB0";
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/light/components/select.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgET,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/light/components/select.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsET,CAAC"}

package/dist/light/components/select.js

@@ -1,61 +1,66 @@
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
-import { navigation } from '../semantic/navigation.js';
+import { menu } from '../semantic/menu.js';
+import { shadow } from '../semantic/shadow.js';
 import { status } from '../semantic/status.js';
-import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const select = {
     trigger: {
         default: {
-            bg: surface.subtle,
-            fg: text.subtle,
+            bg: 'transparent',
+            fg: text.primary,
             border: border.default,
         },
         hover: control.hover,
         focus: {
-            bg: surface.default,
+            bg: 'transparent',
             fg: text.primary,
             border: border.focus,
-            ring: focus.ring,
-        },
-        disabled: {
-            bg: surface.disabled,
-            fg: text.disabled,
-            border: border.disabled,
+            ring: focus.ring.color,
         },
+        disabled: control.disabled,
         placeholder: {
             fg: text.secondary,
         },
         error: {
-            border: status.error.fg,
-            ring: status.error.bg,
+            border: status.error.border,
+            ring: status.error.ring,
         },
     },
     dropdown: {
-        bg: surface.subtle,
-        fg: text.primary,
-        border: border.muted,
+        bg: menu.background,
+        fg: menu.item.default.fg,
+        border: menu.border,
+        shadow: shadow.lg,
     },
     option: {
         default: {
-            bg: 'transparent',
-            fg: text.primary,
-            border: border.muted,
+            ...menu.item.default,
+            border: 'transparent',
+        },
+        hover: {
+            ...menu.item.hover,
+            border: 'transparent',
         },
-        hover: navigation.brandHover,
         active: {
-            ...navigation.brandHover,
+            ...menu.item.active,
+            border: 'transparent',
             ring: 'transparent',
         },
+        pressed: {
+            ...menu.item.pressed,
+            border: 'transparent',
+        },
         selected: {
-            bg: control.selected.default.bg,
-            fg: control.selected.default.fg,
+            bg: control.selected.muted.bg,
+            fg: control.selected.muted.fg,
+            border: control.selected.muted.border,
+            shadow: shadow.inset,
         },
         disabled: {
-            bg: 'transparent',
-            fg: text.disabled,
-            border: border.muted,
+            ...menu.item.disabled,
+            border: 'transparent',
         },
     },
 };

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

@@ -1,17 +1,17 @@
 export declare const tabs: {
     readonly list: {
-        readonly border: "#BBB2D2";
+        readonly border: "#E4DDF4";
     };
     readonly trigger: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#4F4867";
+            readonly fg: "#6B6386";
             readonly border: "transparent";
         };
         readonly hover: {
             readonly bg: "transparent";
-            readonly fg: "#F4F1FB";
-            readonly border: "#F4F1FB";
+            readonly fg: "#402C9F";
+            readonly border: "transparent";
         };
         readonly active: {
             readonly bg: "transparent";
@@ -19,33 +19,38 @@ export declare const tabs: {
             readonly border: "#6346E8";
         };
         readonly focus: {
-            readonly ring: "#F4F1FB";
+            readonly ring: {
+                readonly color: "#5037C8";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(99, 70, 232, 0.14)";
+                readonly offset: "#FFFFFF";
+            };
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#9CA3AF";
+            readonly fg: "#958CB0";
             readonly border: "transparent";
         };
     };
     readonly pills: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#4F4867";
+            readonly fg: "#6B6386";
             readonly border: "transparent";
         };
         readonly hover: {
-            readonly bg: "#EEE8FA";
-            readonly fg: "#4F4867";
+            readonly bg: "#F4F1FB";
+            readonly fg: "#3D3754";
             readonly border: "transparent";
         };
         readonly active: {
-            readonly bg: "#5037C8";
-            readonly fg: "#0F0F0F";
-            readonly border: "#7C5CFF";
+            readonly bg: "#6346E8";
+            readonly fg: "#FFFFFF";
+            readonly border: "#6346E8";
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#9CA3AF";
+            readonly fg: "#958CB0";
             readonly border: "transparent";
         };
     };
@@ -57,11 +62,11 @@ export declare const tabs: {
             readonly bg: "#5037C8";
         };
         readonly active: {
-            readonly bg: "#5037C8";
+            readonly bg: "#6346E8";
         };
     };
     readonly panel: {
-        readonly fg: "#4F4867";
+        readonly fg: "#3D3754";
     };
 };
 //# sourceMappingURL=tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/light/components/tabs.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EP,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/light/components/tabs.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EP,CAAC"}

package/dist/light/components/tabs.js

@@ -1,31 +1,32 @@
 import { action } from '../semantic/action.js';
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
+import { focus } from '../semantic/focus.js';
 import { navigation } from '../semantic/navigation.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const tabs = {
     list: {
-        border: border.default,
+        border: border.muted,
     },
     trigger: {
         default: {
             bg: 'transparent',
-            fg: text.primary,
+            fg: text.secondary,
             border: 'transparent',
         },
         hover: {
             bg: 'transparent',
-            fg: navigation.hover.bg,
-            border: navigation.hover.bg,
+            fg: navigation.tabHover.fg,
+            border: 'transparent',
         },
         active: {
             bg: 'transparent',
-            fg: text.brand,
+            fg: text.interactive,
             border: action.primary.default.border,
         },
         focus: {
-            ring: navigation.hover.bg,
+            ring: focus.ring,
         },
         disabled: {
             bg: 'transparent',
@@ -36,7 +37,7 @@ export const tabs = {
     pills: {
         default: {
             bg: 'transparent',
-            fg: text.primary,
+            fg: text.secondary,
             border: 'transparent',
         },
         hover: {
@@ -45,9 +46,9 @@ export const tabs = {
             border: 'transparent',
         },
         active: {
-            bg: control.selected.muted.bg,
-            fg: control.selected.muted.fg,
-            border: control.selected.muted.border,
+            bg: control.selected.default.bg,
+            fg: control.selected.default.fg,
+            border: control.selected.default.border,
         },
         disabled: {
             bg: 'transparent',
@@ -57,13 +58,13 @@ export const tabs = {
     },
     indicator: {
         default: {
-            bg: text.brand,
+            bg: text.interactive,
         },
         hover: {
-            bg: control.selected.muted.bg,
+            bg: action.primary.hover.bg,
         },
         active: {
-            bg: text.brand,
+            bg: action.primary.default.bg,
         },
     },
     panel: {

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

@@ -1,8 +1,9 @@
 export declare const tooltip: {
     readonly content: {
         readonly bg: "#181521";
-        readonly fg: "#0F0F0F";
-        readonly border: "#BBB2D2";
+        readonly fg: "#FFFFFF";
+        readonly border: "#181521";
+        readonly shadow: "0 4px 12px rgba(24, 21, 33, 0.12)";
     };
     readonly arrow: {
         readonly bg: "#181521";

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/light/components/tooltip.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO;;;;;;;;;CAUV,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/light/components/tooltip.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;CAWV,CAAC"}

package/dist/light/components/tooltip.js

@@ -1,13 +1,13 @@
-import { border } from '../semantic/border.js';
-import { surface } from '../semantic/surface.js';
-import { text } from '../semantic/text.js';
+import { overlay } from '../semantic/overlay.js';
+import { shadow } from '../semantic/shadow.js';
 export const tooltip = {
     content: {
-        bg: surface.inverse,
-        fg: text.inverse,
-        border: border.default,
+        bg: overlay.tooltip.bg,
+        fg: overlay.tooltip.fg,
+        border: overlay.tooltip.border,
+        shadow: shadow.md,
     },
     arrow: {
-        bg: surface.inverse,
+        bg: overlay.tooltip.bg,
     },
 };

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

@@ -16,14 +16,14 @@ export declare const action: {
             readonly border: "#402C9F";
         };
         readonly muted: {
-            readonly bg: "#7C5CFF";
-            readonly fg: "#FFFFFF";
-            readonly border: "#7C5CFF";
+            readonly bg: "#E9E6FF";
+            readonly fg: "#342580";
+            readonly border: "#B8A8FF";
         };
         readonly subtle: {
             readonly bg: "#F4F3FF";
             readonly fg: "#342580";
-            readonly border: "#5037C8";
+            readonly border: "transparent";
         };
     };
     readonly secondary: {
@@ -43,41 +43,41 @@ export declare const action: {
             readonly border: "#094C5E";
         };
         readonly muted: {
-            readonly bg: "#1FBEDB";
-            readonly fg: "#FFFFFF";
-            readonly border: "#1FBEDB";
+            readonly bg: "#D9FBFF";
+            readonly fg: "#094C5E";
+            readonly border: "#79E8F8";
         };
         readonly subtle: {
             readonly bg: "#F2FDFF";
-            readonly fg: "#FFFFFF";
-            readonly border: "#0B7D95";
+            readonly fg: "#094C5E";
+            readonly border: "transparent";
         };
     };
     readonly close: {
         readonly default: {
-            readonly bg: "#D8E4F2";
-            readonly fg: "#0F0F0F";
-            readonly border: "#D8E4F2";
+            readonly bg: "#D4CEE8";
+            readonly fg: "#231F31";
+            readonly border: "#D4CEE8";
         };
         readonly hover: {
-            readonly bg: "#C4D0DD";
-            readonly fg: "#0F0F0F";
-            readonly border: "#C4D0DD";
+            readonly bg: "#BBB2D2";
+            readonly fg: "#181521";
+            readonly border: "#BBB2D2";
         };
         readonly active: {
-            readonly bg: "#98A8BD";
-            readonly fg: "#0F0F0F";
-            readonly border: "#98A8BD";
+            readonly bg: "#958CB0";
+            readonly fg: "#FFFFFF";
+            readonly border: "#958CB0";
         };
         readonly muted: {
-            readonly bg: "#4B5F7A";
-            readonly fg: "#FFFFFF";
-            readonly border: "#4B5F7A";
+            readonly bg: "#EEE8FA";
+            readonly fg: "#2F2A42";
+            readonly border: "#BBB2D2";
         };
         readonly subtle: {
-            readonly bg: "#6B7F99";
-            readonly fg: "#FFFFFF";
-            readonly border: "#6B7F99";
+            readonly bg: "#F4F1FB";
+            readonly fg: "#3D3754";
+            readonly border: "transparent";
         };
     };
     readonly danger: {
@@ -96,13 +96,15 @@ export declare const action: {
             readonly fg: "#FFFFFF";
             readonly border: "#881337";
         };
-        readonly subtle: {
-            readonly bg: "#FFF1F2";
-            readonly fg: "#BE123C";
-        };
         readonly muted: {
             readonly bg: "#FFE4E6";
+            readonly fg: "#9F1239";
+            readonly border: "#FDA4AF";
+        };
+        readonly subtle: {
+            readonly bg: "#FFF1F2";
             readonly fg: "#BE123C";
+            readonly border: "transparent";
         };
     };
 };

package/dist/light/semantic/action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/action.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GT,CAAC"}
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../src/light/semantic/action.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHT,CAAC"}