@vellira-ui/tokens 2.25.1 → 2.26.0

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

@@ -12,42 +12,42 @@ export declare const button: {
                 readonly border: "#7C5CFF";
             };
             readonly pressed: {
-                readonly bg: "#9B7CFF";
+                readonly bg: "#5037C8";
                 readonly fg: "#FFFFFF";
-                readonly border: "#9B7CFF";
+                readonly border: "#5037C8";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#B8A8FF";
-                readonly border: "#B8A8FF";
-                readonly bg: string;
+                readonly border: "#7C5CFF";
             };
             readonly hover: {
-                readonly bg: "#3D3754";
+                readonly bg: "#2F2A42";
                 readonly fg: "#D4CCFF";
-                readonly border: "#D4CCFF";
+                readonly border: "#9B7CFF";
             };
             readonly pressed: {
                 readonly bg: "#3D3754";
-                readonly fg: "#9B7CFF";
-                readonly border: "#9B7CFF";
+                readonly fg: "#E9E6FF";
+                readonly border: "#7C5CFF";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#B8A8FF";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#3D3754";
+                readonly bg: "#2F2A42";
                 readonly fg: "#D4CCFF";
                 readonly border: "transparent";
             };
             readonly pressed: {
                 readonly bg: "#3D3754";
-                readonly fg: "#9B7CFF";
+                readonly fg: "#E9E6FF";
                 readonly border: "transparent";
             };
         };
@@ -65,42 +65,42 @@ export declare const button: {
                 readonly border: "#3ED5EE";
             };
             readonly pressed: {
-                readonly bg: "#79E8F8";
+                readonly bg: "#0F9BB8";
                 readonly fg: "#000000";
-                readonly border: "#79E8F8";
+                readonly border: "#0F9BB8";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#79E8F8";
-                readonly border: "#79E8F8";
-                readonly bg: string;
+                readonly border: "#1FBEDB";
             };
             readonly hover: {
-                readonly bg: "#3D3754";
-                readonly fg: "#3ED5EE";
+                readonly bg: "#2F2A42";
+                readonly fg: "#B4F4FD";
                 readonly border: "#3ED5EE";
             };
             readonly pressed: {
-                readonly bg: "#231F31";
-                readonly fg: "#79E8F8";
-                readonly border: "#79E8F8";
+                readonly bg: "#3D3754";
+                readonly fg: "#D9FBFF";
+                readonly border: "#1FBEDB";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#79E8F8";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#3D3754";
+                readonly bg: "#2F2A42";
                 readonly fg: "#B4F4FD";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#231F31";
-                readonly fg: "#79E8F8";
+                readonly bg: "#3D3754";
+                readonly fg: "#D9FBFF";
                 readonly border: "transparent";
             };
         };
@@ -108,52 +108,52 @@ export declare const button: {
     readonly close: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#BBB2D2";
+                readonly bg: "#958CB0";
                 readonly fg: "#000000";
-                readonly border: "#BBB2D2";
+                readonly border: "#958CB0";
             };
             readonly hover: {
-                readonly bg: "#D4CEE8";
+                readonly bg: "#BBB2D2";
                 readonly fg: "#000000";
-                readonly border: "#D4CEE8";
+                readonly border: "#BBB2D2";
             };
             readonly pressed: {
-                readonly bg: "#E4DDF4";
+                readonly bg: "#6B6386";
                 readonly fg: "#000000";
-                readonly border: "#E4DDF4";
+                readonly border: "#6B6386";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#BBB2D2";
-                readonly border: "#BBB2D2";
-                readonly bg: string;
+                readonly border: "#6B6386";
             };
             readonly hover: {
-                readonly bg: "#3D3754";
-                readonly fg: "#958CB0";
+                readonly bg: "#2F2A42";
+                readonly fg: "#E4DDF4";
                 readonly border: "#958CB0";
             };
             readonly pressed: {
                 readonly bg: "#3D3754";
-                readonly fg: "#E4DDF4";
-                readonly border: "#E4DDF4";
+                readonly fg: "#F4F1FB";
+                readonly border: "#6B6386";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#BBB2D2";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#3D3754";
-                readonly fg: "#D4CEE8";
+                readonly bg: "#2F2A42";
+                readonly fg: "#E4DDF4";
                 readonly border: "transparent";
             };
             readonly pressed: {
                 readonly bg: "#3D3754";
-                readonly fg: "#E4DDF4";
+                readonly fg: "#F4F1FB";
                 readonly border: "transparent";
             };
         };
@@ -171,42 +171,42 @@ export declare const button: {
                 readonly border: "#F43F5E";
             };
             readonly pressed: {
-                readonly bg: "#FB7185";
+                readonly bg: "#BE123C";
                 readonly fg: "#FFFFFF";
-                readonly border: "#FB7185";
+                readonly border: "#BE123C";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#FB7185";
                 readonly border: "#FB7185";
-                readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "rgba(251, 113, 133, 0.16)";
-                readonly fg: "#F43F5E";
-                readonly border: "#F43F5E";
+                readonly fg: "#FDA4AF";
+                readonly border: "#FB7185";
             };
             readonly pressed: {
-                readonly bg: "rgba(251, 113, 133, 0.16)";
-                readonly fg: "#FB7185";
-                readonly border: "#FB7185";
+                readonly bg: string;
+                readonly fg: "#FECDD3";
+                readonly border: "#F43F5E";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#FB7185";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "rgba(251, 113, 133, 0.16)";
-                readonly fg: "#F43F5E";
+                readonly fg: "#FDA4AF";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "rgba(251, 113, 133, 0.16)";
-                readonly fg: "#FB7185";
+                readonly bg: string;
+                readonly fg: "#FECDD3";
                 readonly border: "transparent";
             };
         };
@@ -214,7 +214,7 @@ export declare const button: {
     readonly disabled: {
         readonly bg: "#2F2A42";
         readonly fg: "#6B6386";
-        readonly border: "#4F4867";
+        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":"AAUA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/dark/components/button.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMT,CAAC"}

package/dist/dark/components/button.js

@@ -1,3 +1,4 @@
+import { colors } from '../../primitives/colors.js';
 import { action } from '../semantic/action.js';
 import { border } from '../semantic/border.js';
 import { status } from '../semantic/status.js';
@@ -5,6 +6,7 @@ import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 const transparent = {
     bg: 'transparent',
+    border: 'transparent',
 };
 export const button = {
     primary: {
@@ -15,36 +17,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.primary.muted.bg,
-                border: action.primary.muted.border,
+                bg: 'transparent',
+                fg: colors.primary[300],
+                border: colors.primary[500],
             },
             hover: {
                 bg: surface.elevated,
-                fg: action.primary.subtle.bg,
-                border: action.primary.subtle.border,
+                fg: colors.primary[200],
+                border: colors.primary[400],
             },
             pressed: {
-                bg: surface.elevated,
-                fg: action.primary.active.bg,
-                border: action.primary.active.border,
+                bg: surface.active,
+                fg: colors.primary[100],
+                border: colors.primary[500],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.primary.muted.bg,
-                border: 'transparent',
+                fg: colors.primary[300],
             },
             hover: {
+                ...transparent,
                 bg: surface.elevated,
-                fg: action.primary.subtle.bg,
-                border: 'transparent',
+                fg: colors.primary[200],
             },
             pressed: {
-                bg: surface.elevated,
-                fg: action.primary.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: surface.active,
+                fg: colors.primary[100],
             },
         },
     },
@@ -56,36 +57,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.secondary.muted.bg,
-                border: action.secondary.muted.border,
+                bg: 'transparent',
+                fg: colors.secondary[300],
+                border: colors.secondary[500],
             },
             hover: {
                 bg: surface.elevated,
-                fg: action.secondary.hover.bg,
-                border: action.secondary.hover.border,
+                fg: colors.secondary[200],
+                border: colors.secondary[400],
             },
             pressed: {
-                bg: surface.muted,
-                fg: action.secondary.active.bg,
-                border: action.secondary.active.border,
+                bg: surface.active,
+                fg: colors.secondary[100],
+                border: colors.secondary[500],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.secondary.muted.bg,
-                border: 'transparent',
+                fg: colors.secondary[300],
             },
             hover: {
+                ...transparent,
                 bg: surface.elevated,
-                fg: action.secondary.subtle.bg,
-                border: 'transparent',
+                fg: colors.secondary[200],
             },
             pressed: {
-                bg: surface.muted,
-                fg: action.secondary.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: surface.active,
+                fg: colors.secondary[100],
             },
         },
     },
@@ -97,36 +97,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.close.default.bg,
-                border: action.close.default.border,
+                bg: 'transparent',
+                fg: colors.vellira[300],
+                border: colors.vellira[500],
             },
             hover: {
                 bg: surface.elevated,
-                fg: action.close.muted.bg,
-                border: action.close.muted.border,
+                fg: colors.vellira[200],
+                border: colors.vellira[400],
             },
             pressed: {
-                bg: surface.elevated,
-                fg: action.close.active.bg,
-                border: action.close.active.border,
+                bg: surface.active,
+                fg: colors.vellira[100],
+                border: colors.vellira[500],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.close.default.bg,
-                border: 'transparent',
+                fg: colors.vellira[300],
             },
             hover: {
+                ...transparent,
                 bg: surface.elevated,
-                fg: action.close.hover.bg,
-                border: 'transparent',
+                fg: colors.vellira[200],
             },
             pressed: {
-                bg: surface.elevated,
-                fg: action.close.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: surface.active,
+                fg: colors.vellira[100],
             },
         },
     },
@@ -138,36 +137,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.danger.muted.bg,
-                border: action.danger.muted.border,
+                bg: 'transparent',
+                fg: status.error.fg,
+                border: status.error.border,
             },
             hover: {
                 bg: status.error.bg,
-                fg: action.danger.subtle.bg,
-                border: action.danger.subtle.border,
+                fg: colors.error[300],
+                border: colors.error[400],
             },
             pressed: {
-                bg: status.error.bg,
-                fg: action.danger.active.bg,
-                border: action.danger.active.border,
+                bg: surface.danger,
+                fg: colors.error[200],
+                border: colors.error[500],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.danger.muted.bg,
-                border: 'transparent',
+                fg: status.error.fg,
             },
             hover: {
+                ...transparent,
                 bg: status.error.bg,
-                fg: action.danger.subtle.bg,
-                border: 'transparent',
+                fg: colors.error[300],
             },
             pressed: {
-                bg: status.error.bg,
-                fg: action.danger.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: surface.danger,
+                fg: colors.error[200],
             },
         },
     },

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

@@ -1,42 +1,46 @@
 export declare const checkbox: {
     readonly default: {
-        readonly bg: "#3D3754";
-        readonly fg: "#FFFFFF";
-        readonly border: "#958CB0";
+        readonly bg: "#2F2A42";
+        readonly fg: "#F4F1FB";
+        readonly border: "#4F4867";
     };
     readonly hover: {
-        readonly fg: "#FFFFFF";
-        readonly bg: "#3D3754";
+        readonly bg: "#2F2A42";
+        readonly fg: "#B8A8FF";
         readonly border: "#B8A8FF";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#9B7CFF";
+            readonly labelFg: "#B8A8FF";
+            readonly bg: "#7C5CFF";
             readonly fg: "#FFFFFF";
-            readonly border: "#9B7CFF";
+            readonly border: "#7C5CFF";
         };
         readonly hover: {
-            readonly bg: "#5037C8";
+            readonly labelFg: "#9B7CFF";
+            readonly bg: "#9B7CFF";
             readonly fg: "#FFFFFF";
-            readonly border: "#5037C8";
+            readonly border: "#9B7CFF";
         };
         readonly pressed: {
-            readonly bg: "#402C9F";
+            readonly labelFg: "#7C5CFF";
+            readonly bg: "#6346E8";
             readonly fg: "#FFFFFF";
-            readonly border: "#402C9F";
+            readonly border: "#6346E8";
         };
     };
     readonly focus: {
         readonly ring: "#B8A8FF";
     };
     readonly disabled: {
-        readonly bg: "#242034";
+        readonly bg: "#2F2A42";
         readonly fg: "#6B6386";
-        readonly border: "#958CB0";
+        readonly border: "#3D3754";
     };
     readonly error: {
         readonly fg: "#FB7185";
         readonly border: "#FB7185";
+        readonly ring: "#FB7185";
     };
 };
 //# sourceMappingURL=checkbox.d.ts.map

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

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

package/dist/dark/components/checkbox.js

@@ -7,28 +7,39 @@ import { text } from '../semantic/text.js';
 export const checkbox = {
     default: {
         bg: surface.elevated,
-        fg: text.inverse,
+        fg: text.primary,
         border: border.default,
     },
     hover: {
-        ...control.hover,
-        fg: text.inverse,
+        bg: control.hover.bg,
+        fg: control.hover.fg,
+        border: control.hover.border,
     },
     checked: {
-        default: control.selected.default,
-        hover: control.selected.hover,
-        pressed: control.selected.active,
+        default: {
+            ...control.selected.default,
+            labelFg: text.brand,
+        },
+        hover: {
+            ...control.selected.hover,
+            labelFg: text.interactiveHover,
+        },
+        pressed: {
+            ...control.selected.active,
+            labelFg: text.interactiveActive,
+        },
     },
     focus: {
-        ring: focus.ring,
+        ring: focus.ring.color,
     },
     disabled: {
-        bg: surface.subtle,
+        bg: surface.disabled,
         fg: text.disabled,
-        border: border.default,
+        border: border.disabled,
     },
     error: {
         fg: status.error.fg,
-        border: status.error.fg,
+        border: status.error.border,
+        ring: status.error.ring,
     },
 };

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

@@ -0,0 +1,89 @@
+export declare const contextMenu: {
+    readonly content: {
+        readonly bg: "#2F2A42";
+        readonly border: "#4F4867";
+        readonly shadow: "0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25)";
+    };
+    readonly item: {
+        readonly default: {
+            readonly bg: "transparent";
+            readonly fg: "#F4F1FB";
+        };
+        readonly hover: {
+            readonly bg: "#3D3754";
+            readonly fg: "#F4F1FB";
+        };
+        readonly active: {
+            readonly ring: "transparent";
+            readonly bg: "#3D3754";
+            readonly fg: "#F4F1FB";
+        };
+        readonly pressed: {
+            readonly bg: "#4F4867";
+            readonly fg: "#F4F1FB";
+        };
+        readonly focus: {
+            readonly ring: {
+                readonly color: "#B8A8FF";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(184, 168, 255, 0.14)";
+                readonly offset: "#181521";
+            };
+        };
+        readonly disabled: {
+            readonly bg: "transparent";
+            readonly fg: "#6B6386";
+        };
+        readonly danger: {
+            readonly default: {
+                readonly bg: "transparent";
+                readonly fg: "#FB7185";
+            };
+            readonly hover: {
+                readonly bg: "rgba(251, 113, 133, 0.16)";
+                readonly fg: "#FB7185";
+            };
+            readonly active: {
+                readonly bg: "rgba(251, 113, 133, 0.16)";
+                readonly fg: "#FB7185";
+            };
+            readonly disabled: {
+                readonly bg: "transparent";
+                readonly fg: "#6B6386";
+            };
+        };
+    };
+    readonly trigger: {
+        readonly default: {
+            readonly bg: "transparent";
+            readonly fg: "#B8A8FF";
+            readonly border: "transparent";
+        };
+        readonly hover: {
+            readonly bg: "#3D3754";
+            readonly fg: "#9B7CFF";
+            readonly border: "transparent";
+            readonly ring: "transparent";
+        };
+        readonly focus: {
+            readonly bg: "transparent";
+            readonly fg: "#B8A8FF";
+            readonly border: "transparent";
+            readonly ring: {
+                readonly color: "#B8A8FF";
+                readonly width: "2px";
+                readonly shadow: "0 0 8px rgba(184, 168, 255, 0.14)";
+                readonly offset: "#181521";
+            };
+        };
+        readonly disabled: {
+            readonly bg: "transparent";
+            readonly fg: "#6B6386";
+            readonly border: "transparent";
+        };
+    };
+    readonly groupLabel: {
+        readonly fg: "#BBB2D2";
+    };
+};
+//# sourceMappingURL=contextMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contextMenu.d.ts","sourceRoot":"","sources":["../../../src/dark/components/contextMenu.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Dd,CAAC"}