@vellira-ui/tokens 2.20.0 → 2.22.0

package/dist/dark/semantic/action.js

@@ -8,14 +8,14 @@ export const action = {
             border: colors.primary[600],
         },
         hover: {
-            bg: colors.primary[400],
+            bg: colors.primary[500],
             fg: text.inverse,
-            border: colors.primary[400],
+            border: colors.primary[500],
         },
         active: {
-            bg: colors.primary[600],
+            bg: colors.primary[400],
             fg: text.inverse,
-            border: colors.primary[600],
+            border: colors.primary[400],
         },
         muted: {
             bg: colors.primary[300],
@@ -30,9 +30,9 @@ export const action = {
     },
     secondary: {
         default: {
-            bg: colors.secondary[300],
+            bg: colors.secondary[500],
             fg: text.onInverse,
-            border: colors.secondary[300],
+            border: colors.secondary[500],
         },
         hover: {
             bg: colors.secondary[400],
@@ -40,26 +40,46 @@ export const action = {
             border: colors.secondary[400],
         },
         active: {
-            bg: colors.secondary[500],
+            bg: colors.secondary[300],
             fg: text.onInverse,
-            border: colors.secondary[500],
+            border: colors.secondary[300],
+        },
+        muted: {
+            bg: colors.secondary[300],
+            fg: text.inverse,
+            border: colors.secondary[300],
+        },
+        subtle: {
+            bg: colors.secondary[200],
+            fg: text.brand,
+            border: colors.secondary[200],
         },
     },
     close: {
         default: {
-            bg: colors.vellira[200],
+            bg: colors.vellira[300],
             fg: text.onInverse,
-            border: colors.vellira[200],
+            border: colors.vellira[300],
         },
         hover: {
-            bg: colors.grayBlue[300],
+            bg: colors.vellira[250],
             fg: text.onInverse,
-            border: colors.grayBlue[300],
+            border: colors.vellira[250],
         },
         active: {
-            bg: colors.grayBlue[200],
+            bg: colors.vellira[200],
             fg: text.onInverse,
-            border: colors.grayBlue[200],
+            border: colors.vellira[200],
+        },
+        muted: {
+            bg: colors.vellira[400],
+            fg: text.inverse,
+            border: colors.vellira[400],
+        },
+        subtle: {
+            bg: colors.vellira[200],
+            fg: text.brand,
+            border: colors.vellira[200],
         },
     },
     danger: {
@@ -69,23 +89,24 @@ export const action = {
             border: colors.error[600],
         },
         hover: {
-            bg: colors.error[700],
+            bg: colors.error[500],
             fg: text.inverse,
-            border: colors.error[700],
+            border: colors.error[500],
         },
         active: {
-            bg: colors.error[800],
+            bg: colors.error[400],
             fg: text.inverse,
-            border: colors.error[800],
+            border: colors.error[400],
         },
-        subtle: {
+        muted: {
             bg: colors.error[400],
             fg: colors.error[400],
             border: colors.error[400],
         },
-        muted: {
-            bg: colors.error[900],
-            fg: colors.error[200],
+        subtle: {
+            bg: colors.error[500],
+            fg: colors.error[500],
+            border: colors.error[500],
         },
     },
 };

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

@@ -1,9 +1,9 @@
 export declare const border: {
-    readonly default: "#3A334D";
-    readonly muted: "#29253A";
-    readonly strong: "#413957";
-    readonly subtle: "#746F86";
-    readonly elevated: "#E8E2F3";
-    readonly focus: "#A78BFA";
+    readonly default: "#4F4867";
+    readonly muted: "#3D3754";
+    readonly strong: "#2F2A42";
+    readonly subtle: "#231F31";
+    readonly elevated: "#6B6386";
+    readonly focus: "#B8A8FF";
 };
 //# sourceMappingURL=border.d.ts.map

package/dist/dark/semantic/border.js

@@ -1,9 +1,9 @@
 import { colors } from '../../primitives/colors.js';
 export const border = {
     default: colors.vellira[600],
-    muted: colors.vellira[800],
-    strong: colors.vellira[500],
-    subtle: colors.vellira[400],
-    elevated: colors.vellira[200],
+    muted: colors.vellira[700],
+    strong: colors.vellira[800],
+    subtle: colors.vellira[900],
+    elevated: colors.vellira[500],
     focus: colors.primary[300],
 };

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

@@ -1,29 +1,34 @@
 export declare const control: {
+    readonly default: {
+        readonly bg: "#3D3754";
+        readonly fg: "#FFFFFF";
+        readonly border: "#231F31";
+    };
     readonly hover: {
-        readonly bg: "#29253A";
-        readonly fg: "#A78BFA";
-        readonly border: "#A78BFA";
+        readonly bg: "#3D3754";
+        readonly fg: "#B8A8FF";
+        readonly border: "#B8A8FF";
     };
     readonly selected: {
         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 active: {
-            readonly bg: "#4936D9";
+            readonly bg: "#402C9F";
             readonly fg: "#FFFFFF";
-            readonly border: "#4936D9";
+            readonly border: "#402C9F";
         };
         readonly muted: {
-            readonly bg: "#5B4BEA";
+            readonly bg: "#5037C8";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C6CF2";
+            readonly border: "#7C5CFF";
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/control.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BV,CAAC"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/control.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCV,CAAC"}

package/dist/dark/semantic/control.js

@@ -1,7 +1,13 @@
 import { colors } from '../../primitives/colors.js';
+import { border } from './border.js';
 import { surface } from './surface.js';
 import { text } from './text.js';
 export const control = {
+    default: {
+        bg: surface.elevated,
+        fg: text.inverse,
+        border: border.subtle,
+    },
     hover: {
         bg: surface.hover,
         fg: text.brand,

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

@@ -1,5 +1,5 @@
 export declare const focus: {
-    readonly ring: "#A78BFA";
+    readonly ring: "#B8A8FF";
     readonly ringOffset: "#000000";
 };
 //# sourceMappingURL=focus.d.ts.map

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

@@ -0,0 +1,15 @@
+export declare const icons: {
+    readonly default: "#0F0F0F";
+    readonly primary: "#B8A8FF";
+    readonly secondary: "#9CA3AF";
+    readonly success: "#10B981";
+    readonly muted: "#9CA3AF";
+    readonly disabled: "#D1D5DB";
+    readonly subtle: "#FFFFFF";
+    readonly danger: "#F43F5E";
+    readonly hover: "#9B7CFF";
+    readonly inverse: "#1A1A1A";
+    readonly onInverse: "#000000";
+    readonly brand: "#9B7CFF";
+};
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/icons.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAgBR,CAAC"}

package/dist/dark/semantic/icons.js

@@ -0,0 +1,15 @@
+import { colors } from '../../primitives/colors.js';
+export const icons = {
+    default: colors.mono[900],
+    primary: colors.primary[300],
+    secondary: colors.mono[500],
+    success: colors.success[500],
+    muted: colors.mono[500],
+    disabled: colors.mono[400],
+    subtle: colors.mono[50],
+    danger: colors.error[500],
+    hover: colors.primary[400],
+    inverse: colors.mono[800],
+    onInverse: colors.mono[950],
+    brand: colors.primary[400],
+};

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

@@ -1,33 +1,33 @@
 export declare const navigation: {
     readonly hover: {
-        readonly bg: "#413957";
+        readonly bg: "#6B6386";
         readonly fg: "#F4F1FB";
     };
     readonly active: {
-        readonly bg: "#413957";
+        readonly bg: "#6B6386";
         readonly fg: "#F4F1FB";
     };
     readonly brandHover: {
-        readonly bg: "#29253A";
-        readonly fg: "#C4B5FD";
+        readonly bg: "#3D3754";
+        readonly fg: "#D4CCFF";
     };
     readonly tabHover: {
-        readonly fg: "#C4B5FD";
+        readonly fg: "#D4CCFF";
     };
     readonly tabFocus: {
-        readonly ring: "#FFFF00";
+        readonly ring: "#F59E0B";
     };
     readonly optionHover: {
-        readonly bg: "#413957";
+        readonly bg: "#6B6386";
         readonly fg: "#F4F1FB";
     };
     readonly optionActive: {
-        readonly bg: "#413957";
+        readonly bg: "#6B6386";
         readonly fg: "#F4F1FB";
     };
-    readonly border: "#312C44";
+    readonly border: "#3D3754";
     readonly triggerHover: {
-        readonly bg: "#29253A";
+        readonly bg: "#3D3754";
         readonly fg: "#FAF8FF";
     };
 };

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

@@ -1,27 +1,27 @@
 export declare const status: {
     readonly success: {
-        readonly fg: "#4ADE80";
+        readonly fg: "#34D399";
         readonly bg: "rgba(74, 222, 128, 0.14)";
-        readonly border: "#9AFFB8";
-        readonly strong: "#22C55E";
+        readonly border: "#6EE7B7";
+        readonly strong: "#059669";
     };
     readonly error: {
         readonly fg: "#FB7185";
         readonly bg: "rgba(251, 113, 133, 0.16)";
-        readonly border: "#FF8A8A";
+        readonly border: "#FB7185";
         readonly strong: "#E11D48";
     };
     readonly warning: {
-        readonly fg: "#FFFF99";
+        readonly fg: "#FBBF24";
         readonly bg: "rgba(251, 191, 36, 0.14)";
         readonly border: "#FCD34D";
-        readonly strong: "#FFEA00";
+        readonly strong: "#D97706";
     };
     readonly info: {
-        readonly fg: "#3399FF";
+        readonly fg: "#0284C7";
         readonly bg: "rgba(96, 165, 250, 0.14)";
-        readonly border: "#7BBCFF";
-        readonly strong: "#0284C7";
+        readonly border: "#0EA5E9";
+        readonly strong: "#075985";
     };
 };
 //# sourceMappingURL=status.d.ts.map

package/dist/dark/semantic/status.js

@@ -9,7 +9,7 @@ export const status = {
     error: {
         fg: colors.error[400],
         bg: 'rgba(251, 113, 133, 0.16)',
-        border: colors.error[300],
+        border: colors.error[400],
         strong: colors.error[600],
     },
     warning: {

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

@@ -1,11 +1,12 @@
 export declare const surface: {
-    readonly default: "#1B1726";
-    readonly muted: "#211E2E";
-    readonly subtle: "#29253A";
-    readonly elevated: "#312C44";
-    readonly pressed: "#3A334D";
-    readonly hover: "#29253A";
-    readonly active: "#413957";
+    readonly default: "#181521";
+    readonly muted: "#231F31";
+    readonly subtle: "#2F2A42";
+    readonly elevated: "#3D3754";
+    readonly pressed: "#4F4867";
+    readonly danger: string;
+    readonly hover: "#3D3754";
+    readonly active: "#6B6386";
     readonly inverse: "#FFFFFF";
 };
 //# sourceMappingURL=surface.d.ts.map

package/dist/dark/semantic/surface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/surface.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;CAWV,CAAC"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;CAYV,CAAC"}

package/dist/dark/semantic/surface.js

@@ -1,11 +1,13 @@
 import { colors } from '../../primitives/colors.js';
+import { withAlpha } from '../../utils/color.js';
 export const surface = {
     default: colors.vellira[950],
     muted: colors.vellira[900],
     subtle: colors.vellira[800],
     elevated: colors.vellira[700],
     pressed: colors.vellira[600],
-    hover: colors.vellira[800],
+    danger: withAlpha(colors.error[800], 0.5),
+    hover: colors.vellira[700],
     active: colors.vellira[500],
     inverse: colors.mono[50],
 };

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

@@ -1,12 +1,12 @@
 export declare const text: {
     readonly primary: "#F4F1FB";
-    readonly secondary: "#A8A1BA";
-    readonly muted: "#413957";
-    readonly disabled: "#746F86";
+    readonly secondary: "#BBB2D2";
+    readonly muted: "#6B6386";
+    readonly disabled: "#958CB0";
     readonly subtle: "#FFFFFF";
-    readonly hover: "#8B7CF6";
+    readonly hover: "#9B7CFF";
     readonly inverse: "#FFFFFF";
     readonly onInverse: "#000000";
-    readonly brand: "#A78BFA";
+    readonly brand: "#B8A8FF";
 };
 //# sourceMappingURL=text.d.ts.map

package/dist/dark/theme.d.ts

@@ -4,100 +4,100 @@ export declare const darkTheme: {
     readonly name: "dark";
     readonly colors: {
         readonly primary: {
-            readonly 50: "#EEF0FF";
-            readonly 100: "#DDD6FE";
-            readonly 200: "#C4B5FD";
-            readonly 300: "#A78BFA";
-            readonly 400: "#8B7CF6";
-            readonly 500: "#7C6CF2";
-            readonly 600: "#6D5BD0";
-            readonly 700: "#5B4BEA";
-            readonly 800: "#4936D9";
-            readonly 900: "#4338CA";
-            readonly 950: "#3B2BBF";
+            readonly 50: "#F4F3FF";
+            readonly 100: "#E9E6FF";
+            readonly 200: "#D4CCFF";
+            readonly 300: "#B8A8FF";
+            readonly 400: "#9B7CFF";
+            readonly 500: "#7C5CFF";
+            readonly 600: "#6346E8";
+            readonly 700: "#5037C8";
+            readonly 800: "#402C9F";
+            readonly 900: "#342580";
+            readonly 950: "#21164F";
         };
         readonly secondary: {
-            readonly 50: "#F0F1FF";
-            readonly 100: "#D8DAFF";
-            readonly 200: "#B8BBF2";
-            readonly 300: "#9EA2EA";
-            readonly 400: "#7B80D8";
-            readonly 500: "#4C4F8F";
-            readonly 600: "#3c2d9e";
-            readonly 700: "#2e156e";
-            readonly 800: "#2f106c";
-            readonly 900: "#190947";
-            readonly 950: "#160537";
+            readonly 50: "#F2FDFF";
+            readonly 100: "#D9FBFF";
+            readonly 200: "#B4F4FD";
+            readonly 300: "#79E8F8";
+            readonly 400: "#3ED5EE";
+            readonly 500: "#1FBEDB";
+            readonly 600: "#0F9BB8";
+            readonly 700: "#0B7D95";
+            readonly 800: "#0A6175";
+            readonly 900: "#094C5E";
+            readonly 950: "#062F3B";
         };
         readonly vellira: {
             readonly 25: "#FDFCFF";
             readonly 50: "#FAF8FF";
             readonly 100: "#F4F1FB";
             readonly 150: "#EEE8FA";
-            readonly 200: "#E8E2F3";
-            readonly 250: "#D8D3E8";
-            readonly 300: "#A8A1BA";
-            readonly 400: "#746F86";
-            readonly 500: "#413957";
-            readonly 600: "#3A334D";
-            readonly 700: "#312C44";
-            readonly 800: "#29253A";
-            readonly 900: "#211E2E";
-            readonly 950: "#1B1726";
+            readonly 200: "#E4DDF4";
+            readonly 250: "#D4CEE8";
+            readonly 300: "#BBB2D2";
+            readonly 400: "#958CB0";
+            readonly 500: "#6B6386";
+            readonly 600: "#4F4867";
+            readonly 700: "#3D3754";
+            readonly 800: "#2F2A42";
+            readonly 900: "#231F31";
+            readonly 950: "#181521";
         };
         readonly info: {
             readonly 50: "#F0F9FF";
-            readonly 100: "#EFF6FF";
-            readonly 150: "#DBEAFE";
-            readonly 200: "#93C5FD";
-            readonly 250: "#4DA3FF";
-            readonly 300: "#7BBCFF";
-            readonly 400: "#3399FF";
-            readonly 500: "#0EA5E9";
-            readonly 600: "#0284C7";
-            readonly 700: "#0265c7";
-            readonly 800: "#023ac7";
-            readonly 900: "#002B55";
-            readonly 950: "#102A43";
+            readonly 100: "#E0F2FE";
+            readonly 150: "#BAE6FD";
+            readonly 200: "#7DD3FC";
+            readonly 250: "#38BDF8";
+            readonly 300: "#0EA5E9";
+            readonly 400: "#0284C7";
+            readonly 500: "#0369A1";
+            readonly 600: "#075985";
+            readonly 700: "#0C4A6E";
+            readonly 800: "#082F49";
+            readonly 900: "#0B2538";
+            readonly 950: "#071927";
         };
         readonly success: {
             readonly 50: "#ECFDF5";
             readonly 100: "#D1FAE5";
             readonly 200: "#A7F3D0";
-            readonly 300: "#9AFFB8";
-            readonly 400: "#4ADE80";
-            readonly 500: "#00B956";
-            readonly 600: "#22C55E";
-            readonly 700: "#008F6A";
-            readonly 800: "#00785A";
-            readonly 900: "#166534";
-            readonly 950: "#0F2F26";
+            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 error: {
-            readonly 50: "#FEF2F2";
-            readonly 100: "#FFF1F2";
-            readonly 200: "#FDA4AF";
-            readonly 300: "#FF8A8A";
+            readonly 50: "#FFF1F2";
+            readonly 100: "#FFE4E6";
+            readonly 200: "#FECDD3";
+            readonly 300: "#FDA4AF";
             readonly 400: "#FB7185";
             readonly 500: "#F43F5E";
             readonly 600: "#E11D48";
-            readonly 700: "#DC2626";
-            readonly 800: "#B91C1C";
-            readonly 900: "#9F1239";
+            readonly 700: "#BE123C";
+            readonly 800: "#9F1239";
+            readonly 900: "#881337";
             readonly 950: "#4C0519";
         };
         readonly warning: {
-            readonly 50: "#FFF7ED";
-            readonly 100: "#FFFBEB";
-            readonly 200: "#FEF3C7";
+            readonly 50: "#FFFBEB";
+            readonly 100: "#FEF3C7";
+            readonly 200: "#FDE68A";
             readonly 300: "#FCD34D";
-            readonly 400: "#FFFF99";
-            readonly 500: "#FFFF00";
-            readonly 600: "#FFEA00";
-            readonly 700: "#C05621";
-            readonly 800: "#A74308";
-            readonly 900: "#92400E";
-            readonly 950: "#3A2412";
+            readonly 400: "#FBBF24";
+            readonly 500: "#F59E0B";
+            readonly 600: "#D97706";
+            readonly 700: "#B45309";
+            readonly 800: "#92400E";
+            readonly 900: "#78350F";
+            readonly 950: "#451A03";
         };
         readonly gray: {
             readonly 50: "#F9FAFB";
@@ -143,10 +143,11 @@ export declare const darkTheme: {
     readonly components: typeof components;
     readonly tokens: {
         readonly radius: {
-            readonly sm: 4;
-            readonly md: 8;
-            readonly lg: 12;
-            readonly xl: 16;
+            readonly xs: 4;
+            readonly sm: 8;
+            readonly md: 12;
+            readonly lg: 16;
+            readonly xl: 20;
             readonly full: 999;
         };
         readonly shadows: {

package/dist/dark/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/dark/theme.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYZ,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/dark/theme.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYZ,CAAC"}