@vellira-ui/tokens 2.27.0 → 2.28.0

package/dist/light/components/checkbox.js

@@ -1,27 +1,125 @@
+import { colors } from '../../primitives/colors.js';
+import { createCheckboxPalette } from '../../utils/createCheckboxPalette.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
 import { status } from '../semantic/status.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[700],
+    },
+    hover: {
+        bg: colors.primary[700],
+        fg: colors.primary[200],
+        border: colors.primary[700],
+        labelFg: colors.primary[800],
+    },
+    pressed: {
+        bg: colors.primary[800],
+        fg: colors.primary[300],
+        border: colors.primary[800],
+        labelFg: colors.primary[900],
+    },
+});
+const neutral = createCheckboxPalette({
+    ring: colors.vellira[400],
+    default: {
+        bg: colors.vellira[200],
+        fg: colors.vellira[950],
+        border: colors.vellira[200],
+        labelFg: colors.vellira[600],
+    },
+    hover: {
+        bg: colors.vellira[300],
+        fg: colors.vellira[900],
+        border: colors.vellira[300],
+        labelFg: colors.vellira[700],
+    },
+    pressed: {
+        bg: colors.vellira[400],
+        fg: colors.vellira[800],
+        border: colors.vellira[400],
+        labelFg: colors.vellira[800],
+    },
+});
+const success = createCheckboxPalette({
+    ring: colors.success[500],
+    default: {
+        bg: colors.success[500],
+        fg: colors.success[950],
+        border: colors.success[500],
+        labelFg: colors.success[700],
+    },
+    hover: {
+        bg: colors.success[600],
+        fg: colors.success[900],
+        border: colors.success[600],
+        labelFg: colors.success[800],
+    },
+    pressed: {
+        bg: colors.success[700],
+        fg: colors.success[800],
+        border: colors.success[700],
+        labelFg: colors.success[900],
+    },
+});
+const warning = createCheckboxPalette({
+    ring: colors.warning[500],
+    default: {
+        bg: colors.warning[500],
+        fg: colors.warning[950],
+        border: colors.warning[500],
+        labelFg: colors.warning[700],
+    },
+    hover: {
+        bg: colors.warning[600],
+        fg: colors.warning[900],
+        border: colors.warning[600],
+        labelFg: colors.warning[800],
+    },
+    pressed: {
+        bg: colors.warning[700],
+        fg: colors.warning[800],
+        border: colors.warning[700],
+        labelFg: colors.warning[900],
+    },
+});
+const danger = createCheckboxPalette({
+    ring: colors.error[500],
+    default: {
+        bg: colors.error[700],
+        fg: colors.error[50],
+        border: colors.error[700],
+        labelFg: colors.error[700],
+    },
+    hover: {
+        bg: colors.error[800],
+        fg: colors.error[200],
+        border: colors.error[800],
+        labelFg: colors.error[800],
+    },
+    pressed: {
+        bg: colors.error[900],
+        fg: colors.error[300],
+        border: colors.error[900],
+        labelFg: colors.error[700],
+    },
+});
 export const checkbox = {
     default: control.default,
     hover: {
         ...control.hover,
         labelFg: text.interactiveHover,
     },
-    checked: {
-        default: {
-            ...control.selected.default,
-            labelFg: text.interactive,
-        },
-        hover: {
-            ...control.selected.hover,
-            labelFg: text.interactiveHover,
-        },
-        pressed: {
-            ...control.selected.active,
-            labelFg: text.interactiveActive,
-        },
-    },
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     focus: {
         ring: focus.ring.color,
     },

package/dist/utils/createCheckboxPalette.d.ts

@@ -0,0 +1,19 @@
+export type CheckboxState = {
+    bg: string;
+    fg: string;
+    border: string;
+    labelFg: string;
+};
+export type CheckboxPaletteConfig = {
+    ring: string;
+    default: CheckboxState;
+    hover: CheckboxState;
+    pressed: CheckboxState;
+};
+export declare const createCheckboxPalette: ({ ring, default: defaultState, hover, pressed, }: CheckboxPaletteConfig) => {
+    readonly ring: string;
+    readonly default: CheckboxState;
+    readonly hover: CheckboxState;
+    readonly pressed: CheckboxState;
+};
+//# sourceMappingURL=createCheckboxPalette.d.ts.map

package/dist/utils/createCheckboxPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCheckboxPalette.d.ts","sourceRoot":"","sources":["../../src/utils/createCheckboxPalette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,kDAKnC,qBAAqB;;;;;CAMX,CAAC"}

package/dist/utils/createCheckboxPalette.js

@@ -0,0 +1,6 @@
+export const createCheckboxPalette = ({ ring, default: defaultState, hover, pressed, }) => ({
+    ring,
+    default: defaultState,
+    hover,
+    pressed,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "Design tokens for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",