@vellira-ui/tokens 2.27.0 → 2.28.0

package/dist/css/tokens.css

@@ -1,7 +1,7 @@
 /**
  * AUTO-GENERATED FILE
  * DO NOT EDIT MANUALLY
- * Generated: 2026-07-16T20:35:58.329Z
+ * Generated: 2026-07-16T22:04:33.944Z
  */
 
 :root {
@@ -601,18 +601,71 @@
   --checkbox-hover-fg: #402C9F;
   --checkbox-hover-border: #5037C8;
   --checkbox-hover-label-fg: #402C9F;
-  --checkbox-checked-default-bg: #6346E8;
-  --checkbox-checked-default-fg: #FFFFFF;
-  --checkbox-checked-default-border: #6346E8;
-  --checkbox-checked-default-label-fg: #5037C8;
-  --checkbox-checked-hover-bg: #5037C8;
-  --checkbox-checked-hover-fg: #FFFFFF;
-  --checkbox-checked-hover-border: #5037C8;
-  --checkbox-checked-hover-label-fg: #402C9F;
-  --checkbox-checked-pressed-bg: #402C9F;
-  --checkbox-checked-pressed-fg: #FFFFFF;
-  --checkbox-checked-pressed-border: #402C9F;
-  --checkbox-checked-pressed-label-fg: #342580;
+  --checkbox-primary-ring: #9B7CFF;
+  --checkbox-primary-default-bg: #6346E8;
+  --checkbox-primary-default-fg: #F4F3FF;
+  --checkbox-primary-default-border: #6346E8;
+  --checkbox-primary-default-label-fg: #5037C8;
+  --checkbox-primary-hover-bg: #5037C8;
+  --checkbox-primary-hover-fg: #D4CCFF;
+  --checkbox-primary-hover-border: #5037C8;
+  --checkbox-primary-hover-label-fg: #402C9F;
+  --checkbox-primary-pressed-bg: #402C9F;
+  --checkbox-primary-pressed-fg: #B8A8FF;
+  --checkbox-primary-pressed-border: #402C9F;
+  --checkbox-primary-pressed-label-fg: #342580;
+  --checkbox-neutral-ring: #958CB0;
+  --checkbox-neutral-default-bg: #E4DDF4;
+  --checkbox-neutral-default-fg: #181521;
+  --checkbox-neutral-default-border: #E4DDF4;
+  --checkbox-neutral-default-label-fg: #4F4867;
+  --checkbox-neutral-hover-bg: #BBB2D2;
+  --checkbox-neutral-hover-fg: #231F31;
+  --checkbox-neutral-hover-border: #BBB2D2;
+  --checkbox-neutral-hover-label-fg: #3D3754;
+  --checkbox-neutral-pressed-bg: #958CB0;
+  --checkbox-neutral-pressed-fg: #2F2A42;
+  --checkbox-neutral-pressed-border: #958CB0;
+  --checkbox-neutral-pressed-label-fg: #2F2A42;
+  --checkbox-success-ring: #14B8A6;
+  --checkbox-success-default-bg: #14B8A6;
+  --checkbox-success-default-fg: #042F2E;
+  --checkbox-success-default-border: #14B8A6;
+  --checkbox-success-default-label-fg: #0F766E;
+  --checkbox-success-hover-bg: #0F9E94;
+  --checkbox-success-hover-fg: #134E4A;
+  --checkbox-success-hover-border: #0F9E94;
+  --checkbox-success-hover-label-fg: #115E59;
+  --checkbox-success-pressed-bg: #0F766E;
+  --checkbox-success-pressed-fg: #115E59;
+  --checkbox-success-pressed-border: #0F766E;
+  --checkbox-success-pressed-label-fg: #134E4A;
+  --checkbox-warning-ring: #F59E0B;
+  --checkbox-warning-default-bg: #F59E0B;
+  --checkbox-warning-default-fg: #451A03;
+  --checkbox-warning-default-border: #F59E0B;
+  --checkbox-warning-default-label-fg: #B45309;
+  --checkbox-warning-hover-bg: #D97706;
+  --checkbox-warning-hover-fg: #78350F;
+  --checkbox-warning-hover-border: #D97706;
+  --checkbox-warning-hover-label-fg: #92400E;
+  --checkbox-warning-pressed-bg: #B45309;
+  --checkbox-warning-pressed-fg: #92400E;
+  --checkbox-warning-pressed-border: #B45309;
+  --checkbox-warning-pressed-label-fg: #78350F;
+  --checkbox-danger-ring: #F43F5E;
+  --checkbox-danger-default-bg: #BE123C;
+  --checkbox-danger-default-fg: #FFF1F2;
+  --checkbox-danger-default-border: #BE123C;
+  --checkbox-danger-default-label-fg: #BE123C;
+  --checkbox-danger-hover-bg: #9F1239;
+  --checkbox-danger-hover-fg: #FECDD3;
+  --checkbox-danger-hover-border: #9F1239;
+  --checkbox-danger-hover-label-fg: #9F1239;
+  --checkbox-danger-pressed-bg: #881337;
+  --checkbox-danger-pressed-fg: #FDA4AF;
+  --checkbox-danger-pressed-border: #881337;
+  --checkbox-danger-pressed-label-fg: #BE123C;
   --checkbox-focus-ring: #5037C8;
   --checkbox-disabled-bg: #F4F1FB;
   --checkbox-disabled-fg: #958CB0;
@@ -1449,18 +1502,71 @@
   --checkbox-hover-fg: #B8A8FF;
   --checkbox-hover-border: #B8A8FF;
   --checkbox-hover-label-fg: #9B7CFF;
-  --checkbox-checked-default-bg: #7352F8;
-  --checkbox-checked-default-fg: #FFFFFF;
-  --checkbox-checked-default-border: #7352F8;
-  --checkbox-checked-default-label-fg: #B8A8FF;
-  --checkbox-checked-hover-bg: #9B7CFF;
-  --checkbox-checked-hover-fg: #FFFFFF;
-  --checkbox-checked-hover-border: #9B7CFF;
-  --checkbox-checked-hover-label-fg: #9B7CFF;
-  --checkbox-checked-pressed-bg: #6346E8;
-  --checkbox-checked-pressed-fg: #FFFFFF;
-  --checkbox-checked-pressed-border: #6346E8;
-  --checkbox-checked-pressed-label-fg: #7352F8;
+  --checkbox-primary-ring: #9B7CFF;
+  --checkbox-primary-default-bg: #6346E8;
+  --checkbox-primary-default-fg: #F4F3FF;
+  --checkbox-primary-default-border: #6346E8;
+  --checkbox-primary-default-label-fg: #9B7CFF;
+  --checkbox-primary-hover-bg: #5037C8;
+  --checkbox-primary-hover-fg: #D4CCFF;
+  --checkbox-primary-hover-border: #5037C8;
+  --checkbox-primary-hover-label-fg: #9B7CFF;
+  --checkbox-primary-pressed-bg: #402C9F;
+  --checkbox-primary-pressed-fg: #B8A8FF;
+  --checkbox-primary-pressed-border: #402C9F;
+  --checkbox-primary-pressed-label-fg: #7352F8;
+  --checkbox-neutral-ring: #958CB0;
+  --checkbox-neutral-default-bg: #E4DDF4;
+  --checkbox-neutral-default-fg: #181521;
+  --checkbox-neutral-default-border: #E4DDF4;
+  --checkbox-neutral-default-label-fg: #E4DDF4;
+  --checkbox-neutral-hover-bg: #BBB2D2;
+  --checkbox-neutral-hover-fg: #231F31;
+  --checkbox-neutral-hover-border: #BBB2D2;
+  --checkbox-neutral-hover-label-fg: #BBB2D2;
+  --checkbox-neutral-pressed-bg: #958CB0;
+  --checkbox-neutral-pressed-fg: #2F2A42;
+  --checkbox-neutral-pressed-border: #958CB0;
+  --checkbox-neutral-pressed-label-fg: #958CB0;
+  --checkbox-success-ring: #14B8A6;
+  --checkbox-success-default-bg: #14B8A6;
+  --checkbox-success-default-fg: #042F2E;
+  --checkbox-success-default-border: #14B8A6;
+  --checkbox-success-default-label-fg: #2DD4BF;
+  --checkbox-success-hover-bg: #0F9E94;
+  --checkbox-success-hover-fg: #134E4A;
+  --checkbox-success-hover-border: #0F9E94;
+  --checkbox-success-hover-label-fg: #14B8A6;
+  --checkbox-success-pressed-bg: #0F766E;
+  --checkbox-success-pressed-fg: #115E59;
+  --checkbox-success-pressed-border: #0F766E;
+  --checkbox-success-pressed-label-fg: #0F9E94;
+  --checkbox-warning-ring: #F59E0B;
+  --checkbox-warning-default-bg: #F59E0B;
+  --checkbox-warning-default-fg: #451A03;
+  --checkbox-warning-default-border: #F59E0B;
+  --checkbox-warning-default-label-fg: #FBBF24;
+  --checkbox-warning-hover-bg: #D97706;
+  --checkbox-warning-hover-fg: #78350F;
+  --checkbox-warning-hover-border: #D97706;
+  --checkbox-warning-hover-label-fg: #F59E0B;
+  --checkbox-warning-pressed-bg: #B45309;
+  --checkbox-warning-pressed-fg: #92400E;
+  --checkbox-warning-pressed-border: #B45309;
+  --checkbox-warning-pressed-label-fg: #D97706;
+  --checkbox-danger-ring: #F43F5E;
+  --checkbox-danger-default-bg: #BE123C;
+  --checkbox-danger-default-fg: #FFF1F2;
+  --checkbox-danger-default-border: #BE123C;
+  --checkbox-danger-default-label-fg: #FB7185;
+  --checkbox-danger-hover-bg: #9F1239;
+  --checkbox-danger-hover-fg: #FECDD3;
+  --checkbox-danger-hover-border: #9F1239;
+  --checkbox-danger-hover-label-fg: #F43F5E;
+  --checkbox-danger-pressed-bg: #881337;
+  --checkbox-danger-pressed-fg: #FDA4AF;
+  --checkbox-danger-pressed-border: #881337;
+  --checkbox-danger-pressed-label-fg: #E11D48;
   --checkbox-focus-ring: #B8A8FF;
   --checkbox-disabled-bg: #2F2A42;
   --checkbox-disabled-fg: #6B6386;
@@ -2308,18 +2414,71 @@
   --checkbox-hover-fg: #FBBF24;
   --checkbox-hover-border: #FCD34D;
   --checkbox-hover-label-fg: #FCD34D;
-  --checkbox-checked-default-bg: #FCD34D;
-  --checkbox-checked-default-fg: #000000;
-  --checkbox-checked-default-border: #FCD34D;
-  --checkbox-checked-default-label-fg: #FBBF24;
-  --checkbox-checked-hover-bg: #FDE68A;
-  --checkbox-checked-hover-fg: #000000;
-  --checkbox-checked-hover-border: #FDE68A;
-  --checkbox-checked-hover-label-fg: #FCD34D;
-  --checkbox-checked-pressed-bg: #FBBF24;
-  --checkbox-checked-pressed-fg: #000000;
-  --checkbox-checked-pressed-border: #FBBF24;
-  --checkbox-checked-pressed-label-fg: #FDE68A;
+  --checkbox-primary-ring: #9B7CFF;
+  --checkbox-primary-default-bg: #6346E8;
+  --checkbox-primary-default-fg: #F4F3FF;
+  --checkbox-primary-default-border: #6346E8;
+  --checkbox-primary-default-label-fg: #B8A8FF;
+  --checkbox-primary-hover-bg: #5037C8;
+  --checkbox-primary-hover-fg: #D4CCFF;
+  --checkbox-primary-hover-border: #5037C8;
+  --checkbox-primary-hover-label-fg: #9B7CFF;
+  --checkbox-primary-pressed-bg: #402C9F;
+  --checkbox-primary-pressed-fg: #B8A8FF;
+  --checkbox-primary-pressed-border: #402C9F;
+  --checkbox-primary-pressed-label-fg: #7352F8;
+  --checkbox-neutral-ring: #98A8BD;
+  --checkbox-neutral-default-bg: #F7FBFF;
+  --checkbox-neutral-default-fg: #0B1120;
+  --checkbox-neutral-default-border: #F7FBFF;
+  --checkbox-neutral-default-label-fg: #F7FBFF;
+  --checkbox-neutral-hover-bg: #D8E4F2;
+  --checkbox-neutral-hover-fg: #111C2E;
+  --checkbox-neutral-hover-border: #D8E4F2;
+  --checkbox-neutral-hover-label-fg: #E5E7EB;
+  --checkbox-neutral-pressed-bg: #98A8BD;
+  --checkbox-neutral-pressed-fg: #1E2A44;
+  --checkbox-neutral-pressed-border: #98A8BD;
+  --checkbox-neutral-pressed-label-fg: #C4D0DD;
+  --checkbox-success-ring: #14B8A6;
+  --checkbox-success-default-bg: #14B8A6;
+  --checkbox-success-default-fg: #042F2E;
+  --checkbox-success-default-border: #14B8A6;
+  --checkbox-success-default-label-fg: #5EEAD4;
+  --checkbox-success-hover-bg: #0F9E94;
+  --checkbox-success-hover-fg: #134E4A;
+  --checkbox-success-hover-border: #0F9E94;
+  --checkbox-success-hover-label-fg: #2DD4BF;
+  --checkbox-success-pressed-bg: #0F766E;
+  --checkbox-success-pressed-fg: #115E59;
+  --checkbox-success-pressed-border: #0F766E;
+  --checkbox-success-pressed-label-fg: #14B8A6;
+  --checkbox-warning-ring: #F59E0B;
+  --checkbox-warning-default-bg: #F59E0B;
+  --checkbox-warning-default-fg: #451A03;
+  --checkbox-warning-default-border: #F59E0B;
+  --checkbox-warning-default-label-fg: #F59E0B;
+  --checkbox-warning-hover-bg: #D97706;
+  --checkbox-warning-hover-fg: #78350F;
+  --checkbox-warning-hover-border: #D97706;
+  --checkbox-warning-hover-label-fg: #FBBF24;
+  --checkbox-warning-pressed-bg: #B45309;
+  --checkbox-warning-pressed-fg: #92400E;
+  --checkbox-warning-pressed-border: #B45309;
+  --checkbox-warning-pressed-label-fg: #D97706;
+  --checkbox-danger-ring: #F43F5E;
+  --checkbox-danger-default-bg: #BE123C;
+  --checkbox-danger-default-fg: #FFF1F2;
+  --checkbox-danger-default-border: #BE123C;
+  --checkbox-danger-default-label-fg: #FB7185;
+  --checkbox-danger-hover-bg: #E11D48;
+  --checkbox-danger-hover-fg: #FECDD3;
+  --checkbox-danger-hover-border: #E11D48;
+  --checkbox-danger-hover-label-fg: #FECDD3;
+  --checkbox-danger-pressed-bg: #9F1239;
+  --checkbox-danger-pressed-fg: #FDA4AF;
+  --checkbox-danger-pressed-border: #9F1239;
+  --checkbox-danger-pressed-label-fg: #FDA4AF;
   --checkbox-focus-ring: #FCD34D;
   --checkbox-disabled-bg: #111827;
   --checkbox-disabled-fg: #6B7280;

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

@@ -10,25 +10,35 @@ export declare const checkbox: {
         readonly fg: "#B8A8FF";
         readonly border: "#B8A8FF";
     };
-    readonly checked: {
-        readonly default: {
-            readonly labelFg: "#B8A8FF";
-            readonly bg: "#7352F8";
-            readonly fg: "#FFFFFF";
-            readonly border: "#7352F8";
-        };
-        readonly hover: {
-            readonly labelFg: "#9B7CFF";
-            readonly bg: "#9B7CFF";
-            readonly fg: "#FFFFFF";
-            readonly border: "#9B7CFF";
-        };
-        readonly pressed: {
-            readonly labelFg: "#7352F8";
-            readonly bg: "#6346E8";
-            readonly fg: "#FFFFFF";
-            readonly border: "#6346E8";
-        };
+    readonly primary: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly neutral: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly success: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly warning: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly danger: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
     };
     readonly focus: {
         readonly ring: "#B8A8FF";

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CX,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/dark/components/checkbox.ts"],"names":[],"mappings":"AAuHA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCX,CAAC"}

package/dist/dark/components/checkbox.js

@@ -1,9 +1,116 @@
+import { colors } from '../../primitives/colors.js';
+import { createCheckboxPalette } from '../../utils/createCheckboxPalette.js';
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
 import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
+const primary = createCheckboxPalette({
+    ring: colors.primary[400],
+    default: {
+        bg: colors.primary[600],
+        fg: colors.primary[50],
+        border: colors.primary[600],
+        labelFg: colors.primary[400],
+    },
+    hover: {
+        bg: colors.primary[700],
+        fg: colors.primary[200],
+        border: colors.primary[700],
+        labelFg: colors.primary[400],
+    },
+    pressed: {
+        bg: colors.primary[800],
+        fg: colors.primary[300],
+        border: colors.primary[800],
+        labelFg: colors.primary[500],
+    },
+});
+const neutral = createCheckboxPalette({
+    ring: colors.vellira[400],
+    default: {
+        bg: colors.vellira[200],
+        fg: colors.vellira[950],
+        border: colors.vellira[200],
+        labelFg: colors.vellira[200],
+    },
+    hover: {
+        bg: colors.vellira[300],
+        fg: colors.vellira[900],
+        border: colors.vellira[300],
+        labelFg: colors.vellira[300],
+    },
+    pressed: {
+        bg: colors.vellira[400],
+        fg: colors.vellira[800],
+        border: colors.vellira[400],
+        labelFg: colors.vellira[400],
+    },
+});
+const success = createCheckboxPalette({
+    ring: colors.success[500],
+    default: {
+        bg: colors.success[500],
+        fg: colors.success[950],
+        border: colors.success[500],
+        labelFg: colors.success[400],
+    },
+    hover: {
+        bg: colors.success[600],
+        fg: colors.success[900],
+        border: colors.success[600],
+        labelFg: colors.success[500],
+    },
+    pressed: {
+        bg: colors.success[700],
+        fg: colors.success[800],
+        border: colors.success[700],
+        labelFg: colors.success[600],
+    },
+});
+const warning = createCheckboxPalette({
+    ring: colors.warning[500],
+    default: {
+        bg: colors.warning[500],
+        fg: colors.warning[950],
+        border: colors.warning[500],
+        labelFg: colors.warning[400],
+    },
+    hover: {
+        bg: colors.warning[600],
+        fg: colors.warning[900],
+        border: colors.warning[600],
+        labelFg: colors.warning[500],
+    },
+    pressed: {
+        bg: colors.warning[700],
+        fg: colors.warning[800],
+        border: colors.warning[700],
+        labelFg: colors.warning[600],
+    },
+});
+const danger = createCheckboxPalette({
+    ring: colors.error[500],
+    default: {
+        bg: colors.error[700],
+        fg: colors.error[50],
+        border: colors.error[700],
+        labelFg: colors.error[400],
+    },
+    hover: {
+        bg: colors.error[800],
+        fg: colors.error[200],
+        border: colors.error[800],
+        labelFg: colors.error[500],
+    },
+    pressed: {
+        bg: colors.error[900],
+        fg: colors.error[300],
+        border: colors.error[900],
+        labelFg: colors.error[600],
+    },
+});
 export const checkbox = {
     default: {
         bg: surface.elevated,
@@ -14,20 +121,11 @@ export const checkbox = {
         ...control.hover,
         labelFg: text.interactiveHover,
     },
-    checked: {
-        default: {
-            ...control.selected.default,
-            labelFg: text.brand,
-        },
-        hover: {
-            ...control.selected.hover,
-            labelFg: text.interactiveHover,
-        },
-        pressed: {
-            ...control.selected.active,
-            labelFg: text.interactiveActive,
-        },
-    },
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     focus: {
         ring: focus.ring.color,
     },