@vellira-ui/tokens 2.20.0 → 2.21.0

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

@@ -2,159 +2,159 @@ export declare const button: {
     readonly primary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#6D5BD0";
+                readonly bg: "#6346E8";
                 readonly fg: "#FFFFFF";
-                readonly border: "#6D5BD0";
+                readonly border: "#6346E8";
             };
             readonly hover: {
-                readonly bg: "#8B7CF6";
+                readonly bg: "#7C5CFF";
                 readonly fg: "#FFFFFF";
-                readonly border: "#8B7CF6";
+                readonly border: "#7C5CFF";
             };
             readonly pressed: {
-                readonly bg: "#6D5BD0";
+                readonly bg: "#9B7CFF";
                 readonly fg: "#FFFFFF";
-                readonly border: "#6D5BD0";
+                readonly border: "#9B7CFF";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#A78BFA";
-                readonly border: "#A78BFA";
+                readonly fg: "#B8A8FF";
+                readonly border: "#B8A8FF";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#8B7CF6";
-                readonly border: "#8B7CF6";
-                readonly bg: string;
+                readonly bg: "#3D3754";
+                readonly fg: "#D4CCFF";
+                readonly border: "#D4CCFF";
             };
             readonly pressed: {
-                readonly fg: "#6D5BD0";
-                readonly border: "#6D5BD0";
-                readonly bg: string;
+                readonly bg: "#3D3754";
+                readonly fg: "#9B7CFF";
+                readonly border: "#9B7CFF";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#A78BFA";
+                readonly fg: "#B8A8FF";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#8B7CF6";
+                readonly bg: "#3D3754";
+                readonly fg: "#D4CCFF";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly pressed: {
-                readonly fg: "#6D5BD0";
+                readonly bg: "#3D3754";
+                readonly fg: "#9B7CFF";
                 readonly border: "transparent";
-                readonly bg: string;
             };
         };
     };
     readonly secondary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#9EA2EA";
+                readonly bg: "#1FBEDB";
                 readonly fg: "#000000";
-                readonly border: "#9EA2EA";
+                readonly border: "#1FBEDB";
             };
             readonly hover: {
-                readonly bg: "#7B80D8";
+                readonly bg: "#3ED5EE";
                 readonly fg: "#000000";
-                readonly border: "#7B80D8";
+                readonly border: "#3ED5EE";
             };
             readonly pressed: {
-                readonly bg: "#4C4F8F";
+                readonly bg: "#79E8F8";
                 readonly fg: "#000000";
-                readonly border: "#4C4F8F";
+                readonly border: "#79E8F8";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#9EA2EA";
-                readonly border: "#9EA2EA";
+                readonly fg: "#79E8F8";
+                readonly border: "#79E8F8";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#7B80D8";
-                readonly border: "#7B80D8";
-                readonly bg: string;
+                readonly bg: "#231F31";
+                readonly fg: "#3ED5EE";
+                readonly border: "#3ED5EE";
             };
             readonly pressed: {
-                readonly fg: "#4C4F8F";
-                readonly border: "#4C4F8F";
-                readonly bg: string;
+                readonly bg: "#231F31";
+                readonly fg: "#79E8F8";
+                readonly border: "#79E8F8";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#9EA2EA";
+                readonly fg: "#79E8F8";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#7B80D8";
+                readonly bg: "#231F31";
+                readonly fg: "#B4F4FD";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly pressed: {
-                readonly fg: "#4C4F8F";
+                readonly bg: "#231F31";
+                readonly fg: "#79E8F8";
                 readonly border: "transparent";
-                readonly bg: string;
             };
         };
     };
     readonly close: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#E8E2F3";
+                readonly bg: "#BBB2D2";
                 readonly fg: "#000000";
-                readonly border: "#E8E2F3";
+                readonly border: "#BBB2D2";
             };
             readonly hover: {
-                readonly bg: "#C4D0DD";
+                readonly bg: "#D4CEE8";
                 readonly fg: "#000000";
-                readonly border: "#C4D0DD";
+                readonly border: "#D4CEE8";
             };
             readonly pressed: {
-                readonly bg: "#D8E4F2";
+                readonly bg: "#E4DDF4";
                 readonly fg: "#000000";
-                readonly border: "#D8E4F2";
+                readonly border: "#E4DDF4";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#E8E2F3";
-                readonly border: "#E8E2F3";
+                readonly fg: "#BBB2D2";
+                readonly border: "#BBB2D2";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#C4D0DD";
-                readonly border: "#C4D0DD";
-                readonly bg: string;
+                readonly bg: "#3D3754";
+                readonly fg: "#958CB0";
+                readonly border: "#958CB0";
             };
             readonly pressed: {
-                readonly fg: "#D8E4F2";
-                readonly border: "#D8E4F2";
-                readonly bg: string;
+                readonly bg: "#3D3754";
+                readonly fg: "#E4DDF4";
+                readonly border: "#E4DDF4";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#E8E2F3";
+                readonly fg: "#BBB2D2";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#C4D0DD";
+                readonly bg: "#3D3754";
+                readonly fg: "#D4CEE8";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly pressed: {
-                readonly fg: "#D8E4F2";
+                readonly bg: "#3D3754";
+                readonly fg: "#E4DDF4";
                 readonly border: "transparent";
-                readonly bg: string;
             };
         };
     };
@@ -166,14 +166,14 @@ export declare const button: {
                 readonly border: "#E11D48";
             };
             readonly hover: {
-                readonly bg: "#DC2626";
+                readonly bg: "#F43F5E";
                 readonly fg: "#FFFFFF";
-                readonly border: "#DC2626";
+                readonly border: "#F43F5E";
             };
             readonly pressed: {
-                readonly bg: "#B91C1C";
+                readonly bg: "#FB7185";
                 readonly fg: "#FFFFFF";
-                readonly border: "#B91C1C";
+                readonly border: "#FB7185";
             };
         };
         readonly outline: {
@@ -183,14 +183,14 @@ export declare const button: {
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#DC2626";
-                readonly border: "#DC2626";
-                readonly bg: string;
+                readonly bg: "rgba(251, 113, 133, 0.16)";
+                readonly fg: "#F43F5E";
+                readonly border: "#F43F5E";
             };
             readonly pressed: {
-                readonly fg: "#B91C1C";
-                readonly border: "#B91C1C";
-                readonly bg: string;
+                readonly bg: "rgba(251, 113, 133, 0.16)";
+                readonly fg: "#FB7185";
+                readonly border: "#FB7185";
             };
         };
         readonly ghost: {
@@ -200,21 +200,21 @@ export declare const button: {
                 readonly bg: string;
             };
             readonly hover: {
-                readonly fg: "#DC2626";
+                readonly bg: "rgba(251, 113, 133, 0.16)";
+                readonly fg: "#F43F5E";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly pressed: {
-                readonly fg: "#B91C1C";
+                readonly bg: "rgba(251, 113, 133, 0.16)";
+                readonly fg: "#FB7185";
                 readonly border: "transparent";
-                readonly bg: string;
             };
         };
     };
     readonly disabled: {
-        readonly bg: "#29253A";
-        readonly fg: "#746F86";
-        readonly border: "#3A334D";
+        readonly bg: "#231F31";
+        readonly fg: "#958CB0";
+        readonly border: "#3D3754";
     };
 };
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/dark/components/button.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/dark/components/button.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}

package/dist/dark/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.muted.border,
             },
             hover: {
-                ...transparent,
-                fg: action.primary.hover.bg,
-                border: action.primary.hover.border,
+                bg: surface.elevated,
+                fg: action.primary.subtle.bg,
+                border: action.primary.subtle.border,
             },
             pressed: {
-                ...transparent,
+                bg: surface.elevated,
                 fg: action.primary.active.bg,
                 border: action.primary.active.border,
             },
@@ -36,12 +37,12 @@ export const button = {
                 border: 'transparent',
             },
             hover: {
-                ...transparent,
-                fg: action.primary.hover.bg,
+                bg: surface.elevated,
+                fg: action.primary.subtle.bg,
                 border: 'transparent',
             },
             pressed: {
-                ...transparent,
+                bg: surface.elevated,
                 fg: action.primary.active.bg,
                 border: 'transparent',
             },
@@ -56,16 +57,16 @@ export const button = {
         outline: {
             default: {
                 ...transparent,
-                fg: action.secondary.default.bg,
-                border: action.secondary.default.border,
+                fg: action.secondary.muted.bg,
+                border: action.secondary.muted.border,
             },
             hover: {
-                ...transparent,
+                bg: surface.muted,
                 fg: action.secondary.hover.bg,
                 border: action.secondary.hover.border,
             },
             pressed: {
-                ...transparent,
+                bg: surface.muted,
                 fg: action.secondary.active.bg,
                 border: action.secondary.active.border,
             },
@@ -73,16 +74,16 @@ export const button = {
         ghost: {
             default: {
                 ...transparent,
-                fg: action.secondary.default.bg,
+                fg: action.secondary.muted.bg,
                 border: 'transparent',
             },
             hover: {
-                ...transparent,
-                fg: action.secondary.hover.bg,
+                bg: surface.muted,
+                fg: action.secondary.subtle.bg,
                 border: 'transparent',
             },
             pressed: {
-                ...transparent,
+                bg: surface.muted,
                 fg: action.secondary.active.bg,
                 border: 'transparent',
             },
@@ -101,12 +102,12 @@ export const button = {
                 border: action.close.default.border,
             },
             hover: {
-                ...transparent,
-                fg: action.close.hover.bg,
-                border: action.close.hover.border,
+                bg: surface.elevated,
+                fg: action.close.muted.bg,
+                border: action.close.muted.border,
             },
             pressed: {
-                ...transparent,
+                bg: surface.elevated,
                 fg: action.close.active.bg,
                 border: action.close.active.border,
             },
@@ -118,12 +119,12 @@ export const button = {
                 border: 'transparent',
             },
             hover: {
-                ...transparent,
+                bg: surface.elevated,
                 fg: action.close.hover.bg,
                 border: 'transparent',
             },
             pressed: {
-                ...transparent,
+                bg: surface.elevated,
                 fg: action.close.active.bg,
                 border: 'transparent',
             },
@@ -138,16 +139,16 @@ export const button = {
         outline: {
             default: {
                 ...transparent,
-                fg: action.danger.subtle.bg,
-                border: action.danger.subtle.border,
+                fg: action.danger.muted.bg,
+                border: action.danger.muted.border,
             },
             hover: {
-                ...transparent,
-                fg: action.danger.hover.bg,
-                border: action.danger.hover.border,
+                bg: status.error.bg,
+                fg: action.danger.subtle.bg,
+                border: action.danger.subtle.border,
             },
             pressed: {
-                ...transparent,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: action.danger.active.border,
             },
@@ -155,24 +156,24 @@ export const button = {
         ghost: {
             default: {
                 ...transparent,
-                fg: action.danger.subtle.bg,
+                fg: action.danger.muted.bg,
                 border: 'transparent',
             },
             hover: {
-                ...transparent,
-                fg: action.danger.hover.bg,
+                bg: status.error.bg,
+                fg: action.danger.subtle.bg,
                 border: 'transparent',
             },
             pressed: {
-                ...transparent,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: 'transparent',
             },
         },
     },
     disabled: {
-        bg: surface.subtle,
+        bg: surface.muted,
         fg: text.disabled,
-        border: border.default,
+        border: border.muted,
     },
 };

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

@@ -1,38 +1,38 @@
 export declare const checkbox: {
     readonly default: {
-        readonly bg: "#312C44";
+        readonly bg: "#3D3754";
         readonly fg: "#FFFFFF";
-        readonly border: "#746F86";
+        readonly border: "#231F31";
     };
     readonly hover: {
         readonly fg: "#FFFFFF";
-        readonly bg: "#29253A";
-        readonly border: "#A78BFA";
+        readonly bg: "#2F2A42";
+        readonly border: "#B8A8FF";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#6D5BD0";
+            readonly bg: "#6346E8";
             readonly fg: "#FFFFFF";
-            readonly border: "#6D5BD0";
+            readonly border: "#6346E8";
         };
         readonly hover: {
-            readonly bg: "#5B4BEA";
+            readonly bg: "#5037C8";
             readonly fg: "#FFFFFF";
-            readonly border: "#5B4BEA";
+            readonly border: "#5037C8";
         };
         readonly pressed: {
-            readonly bg: "#4936D9";
+            readonly bg: "#402C9F";
             readonly fg: "#FFFFFF";
-            readonly border: "#4936D9";
+            readonly border: "#402C9F";
         };
     };
     readonly focus: {
-        readonly ring: "#A78BFA";
+        readonly ring: "#B8A8FF";
     };
     readonly disabled: {
-        readonly bg: "#29253A";
-        readonly fg: "#746F86";
-        readonly border: "#3A334D";
+        readonly bg: "#2F2A42";
+        readonly fg: "#958CB0";
+        readonly border: "#4F4867";
     };
     readonly error: {
         readonly border: "#FB7185";

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

@@ -2,31 +2,31 @@ export declare const dropdown: {
     readonly trigger: {
         readonly default: {
             readonly bg: "transparent";
-            readonly fg: "#A78BFA";
+            readonly fg: "#B8A8FF";
             readonly border: "transparent";
         };
         readonly hover: {
-            readonly bg: "#29253A";
-            readonly fg: "#C4B5FD";
+            readonly bg: "#2F2A42";
+            readonly fg: "#D4CCFF";
             readonly border: "transparent";
             readonly ring: "transparent";
         };
         readonly focus: {
             readonly bg: "transparent";
-            readonly fg: "#A78BFA";
-            readonly border: "#A78BFA";
-            readonly ring: "#A78BFA";
+            readonly fg: "#B8A8FF";
+            readonly border: "#B8A8FF";
+            readonly ring: "#B8A8FF";
         };
         readonly disabled: {
-            readonly bg: "#29253A";
-            readonly fg: "#746F86";
-            readonly border: "#3A334D";
+            readonly bg: "#2F2A42";
+            readonly fg: "#958CB0";
+            readonly border: "#4F4867";
         };
     };
     readonly content: {
-        readonly bg: "#312C44";
+        readonly bg: "#3D3754";
         readonly fg: "#F4F1FB";
-        readonly border: "#3A334D";
+        readonly border: "#4F4867";
     };
     readonly item: {
         readonly default: {
@@ -34,20 +34,20 @@ export declare const dropdown: {
             readonly fg: "#F4F1FB";
         };
         readonly hover: {
-            readonly bg: "#413957";
+            readonly bg: "#6B6386";
             readonly fg: "#F4F1FB";
         };
         readonly active: {
-            readonly bg: "#413957";
+            readonly bg: "#6B6386";
             readonly fg: "#F4F1FB";
             readonly ring: "transparent";
         };
         readonly focus: {
-            readonly ring: "#A78BFA";
+            readonly ring: "#B8A8FF";
         };
         readonly disabled: {
             readonly bg: "transparent";
-            readonly fg: "#746F86";
+            readonly fg: "#958CB0";
         };
         readonly danger: {
             readonly default: {
@@ -58,18 +58,18 @@ export declare const dropdown: {
                 readonly fg: "#FB7185";
             };
             readonly active: {
-                readonly bg: "#FF8A8A";
+                readonly bg: "#FDA4AF";
                 readonly fg: "#FB7185";
                 readonly ring: "transparent";
             };
         };
     };
     readonly groupLabel: {
-        readonly fg: "#A8A1BA";
+        readonly fg: "#BBB2D2";
     };
     readonly separator: {
-        readonly bg: "#29253A";
-        readonly fg: "#413957";
+        readonly bg: "#3D3754";
+        readonly fg: "#6B6386";
     };
 };
 //# sourceMappingURL=dropdown.d.ts.map

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

@@ -3,32 +3,32 @@ export declare const formField: {
         readonly fg: "#F4F1FB";
     };
     readonly description: {
-        readonly fg: "#A8A1BA";
+        readonly fg: "#BBB2D2";
     };
     readonly helperText: {
         readonly default: {
-            readonly fg: "#A8A1BA";
+            readonly fg: "#BBB2D2";
         };
         readonly error: {
             readonly fg: "#FB7185";
         };
         readonly success: {
-            readonly fg: "#4ADE80";
+            readonly fg: "#34D399";
         };
         readonly warning: {
-            readonly fg: "#FFFF99";
+            readonly fg: "#FBBF24";
         };
         readonly info: {
-            readonly fg: "#3399FF";
+            readonly fg: "#0284C7";
         };
     };
     readonly requiredMark: {
         readonly fg: "#FB7185";
     };
     readonly disabled: {
-        readonly labelFg: "#746F86";
-        readonly descriptionFg: "#746F86";
-        readonly helperTextFg: "#746F86";
+        readonly labelFg: "#958CB0";
+        readonly descriptionFg: "#958CB0";
+        readonly helperTextFg: "#958CB0";
     };
 };
 //# sourceMappingURL=formField.d.ts.map