@vellira-ui/tokens 2.28.0 → 2.29.0

package/dist/highContrast/components/radio.js

@@ -1,40 +1,124 @@
+import { createRadioPalette } from '../../factories/createRadioPalette.js';
 import { colors } from '../../primitives/colors.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 = createRadioPalette({
+    ring: colors.primary[400],
+    default: {
+        bg: colors.primary[600],
+        fg: colors.primary[50],
+        border: colors.primary[600],
+        labelFg: colors.primary[300],
+    },
+    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 = createRadioPalette({
+    ring: colors.grayBlue[400],
+    default: {
+        bg: colors.grayBlue[50],
+        fg: colors.grayBlue[950],
+        border: colors.grayBlue[50],
+        labelFg: colors.grayBlue[50],
+    },
+    hover: {
+        bg: colors.grayBlue[200],
+        fg: colors.grayBlue[900],
+        border: colors.grayBlue[200],
+        labelFg: colors.gray[200],
+    },
+    pressed: {
+        bg: colors.grayBlue[400],
+        fg: colors.grayBlue[800],
+        border: colors.grayBlue[400],
+        labelFg: colors.grayBlue[300],
+    },
+});
+const success = createRadioPalette({
+    ring: colors.success[500],
+    default: {
+        bg: colors.success[500],
+        fg: colors.success[950],
+        border: colors.success[500],
+        labelFg: colors.success[300],
+    },
+    hover: {
+        bg: colors.success[600],
+        fg: colors.success[900],
+        border: colors.success[600],
+        labelFg: colors.success[400],
+    },
+    pressed: {
+        bg: colors.success[700],
+        fg: colors.success[800],
+        border: colors.success[700],
+        labelFg: colors.success[500],
+    },
+});
+const warning = createRadioPalette({
+    ring: colors.warning[500],
+    default: {
+        bg: colors.warning[500],
+        fg: colors.warning[950],
+        border: colors.warning[500],
+        labelFg: colors.warning[500],
+    },
+    hover: {
+        bg: colors.warning[600],
+        fg: colors.warning[900],
+        border: colors.warning[600],
+        labelFg: colors.warning[400],
+    },
+    pressed: {
+        bg: colors.warning[700],
+        fg: colors.warning[800],
+        border: colors.warning[700],
+        labelFg: colors.warning[600],
+    },
+});
+const danger = createRadioPalette({
+    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[600],
+        fg: colors.error[200],
+        border: colors.error[600],
+        labelFg: colors.error[200],
+    },
+    pressed: {
+        bg: colors.error[800],
+        fg: colors.error[300],
+        border: colors.error[800],
+        labelFg: colors.error[300],
+    },
+});
 export const radio = {
     default: control.default,
     hover: control.hover,
     pressed: control.active,
-    checked: {
-        default: {
-            bg: surface.default,
-            fg: colors.warning[300],
-            border: colors.warning[300],
-            labelFg: text.interactive,
-        },
-        hover: {
-            bg: surface.hover,
-            fg: colors.warning[200],
-            border: colors.warning[200],
-            labelFg: text.interactiveHover,
-        },
-        pressed: {
-            bg: surface.active,
-            fg: colors.warning[400],
-            border: colors.warning[400],
-            labelFg: text.interactiveActive,
-        },
-        disabled: {
-            bg: surface.disabled,
-            fg: text.disabled,
-            border: border.disabled,
-            labelFg: text.disabled,
-        },
-    },
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     focus: {
         ring: focus.ring.color,
         border: border.focus,
@@ -45,4 +129,10 @@ export const radio = {
         ring: status.error.ring,
     },
     disabled: control.disabled,
+    selectedDisabled: {
+        bg: control.disabled.bg,
+        fg: text.disabled,
+        border: border.disabled,
+        labelFg: text.disabled,
+    },
 };

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

@@ -2,9 +2,9 @@ export declare const button: {
     readonly primary: {
         readonly ring: string;
         readonly solid: {
-            default: import("../../utils/createButtonPalette.js").ButtonState;
-            hover: import("../../utils/createButtonPalette.js").ButtonState;
-            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+            default: import("../../factories/createButtonPalette.js").ButtonState;
+            hover: import("../../factories/createButtonPalette.js").ButtonState;
+            pressed: import("../../factories/createButtonPalette.js").ButtonState;
         };
         readonly outline: {
             readonly default: {
@@ -78,9 +78,9 @@ export declare const button: {
     readonly neutral: {
         readonly ring: string;
         readonly solid: {
-            default: import("../../utils/createButtonPalette.js").ButtonState;
-            hover: import("../../utils/createButtonPalette.js").ButtonState;
-            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+            default: import("../../factories/createButtonPalette.js").ButtonState;
+            hover: import("../../factories/createButtonPalette.js").ButtonState;
+            pressed: import("../../factories/createButtonPalette.js").ButtonState;
         };
         readonly outline: {
             readonly default: {
@@ -154,9 +154,9 @@ export declare const button: {
     readonly success: {
         readonly ring: string;
         readonly solid: {
-            default: import("../../utils/createButtonPalette.js").ButtonState;
-            hover: import("../../utils/createButtonPalette.js").ButtonState;
-            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+            default: import("../../factories/createButtonPalette.js").ButtonState;
+            hover: import("../../factories/createButtonPalette.js").ButtonState;
+            pressed: import("../../factories/createButtonPalette.js").ButtonState;
         };
         readonly outline: {
             readonly default: {
@@ -230,9 +230,9 @@ export declare const button: {
     readonly warning: {
         readonly ring: string;
         readonly solid: {
-            default: import("../../utils/createButtonPalette.js").ButtonState;
-            hover: import("../../utils/createButtonPalette.js").ButtonState;
-            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+            default: import("../../factories/createButtonPalette.js").ButtonState;
+            hover: import("../../factories/createButtonPalette.js").ButtonState;
+            pressed: import("../../factories/createButtonPalette.js").ButtonState;
         };
         readonly outline: {
             readonly default: {
@@ -306,9 +306,9 @@ export declare const button: {
     readonly danger: {
         readonly ring: string;
         readonly solid: {
-            default: import("../../utils/createButtonPalette.js").ButtonState;
-            hover: import("../../utils/createButtonPalette.js").ButtonState;
-            pressed: import("../../utils/createButtonPalette.js").ButtonState;
+            default: import("../../factories/createButtonPalette.js").ButtonState;
+            hover: import("../../factories/createButtonPalette.js").ButtonState;
+            pressed: import("../../factories/createButtonPalette.js").ButtonState;
         };
         readonly outline: {
             readonly default: {

package/dist/light/components/button.js

@@ -1,5 +1,5 @@
+import { createButtonPalette } from '../../factories/createButtonPalette.js';
 import { colors } from '../../primitives/colors.js';
-import { createButtonPalette } from '../../utils/createButtonPalette.js';
 import { border } from '../semantic/border.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';

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

@@ -12,33 +12,33 @@ export declare const checkbox: {
     };
     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 default: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../factories/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 default: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../factories/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 default: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../factories/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 default: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../factories/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 default: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../factories/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../factories/createCheckboxPalette.js").CheckboxState;
     };
     readonly focus: {
         readonly ring: "#5037C8";

package/dist/light/components/checkbox.js

@@ -1,5 +1,5 @@
+import { createCheckboxPalette } from '../../factories/createCheckboxPalette.js';
 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';

package/dist/light/components/radio.d.ts

@@ -14,31 +14,35 @@ export declare const radio: {
         readonly fg: "#342580";
         readonly border: "#402C9F";
     };
-    readonly checked: {
-        readonly default: {
-            readonly bg: "#FFFFFF";
-            readonly fg: "#6346E8";
-            readonly border: "#6346E8";
-            readonly labelFg: "#5037C8";
-        };
-        readonly hover: {
-            readonly bg: "#F4F3FF";
-            readonly fg: "#5037C8";
-            readonly border: "#5037C8";
-            readonly labelFg: "#402C9F";
-        };
-        readonly pressed: {
-            readonly bg: "#E9E6FF";
-            readonly fg: "#402C9F";
-            readonly border: "#402C9F";
-            readonly labelFg: "#342580";
-        };
-        readonly disabled: {
-            readonly bg: "#F4F1FB";
-            readonly fg: "#958CB0";
-            readonly border: "#E4DDF4";
-            readonly labelFg: "#958CB0";
-        };
+    readonly primary: {
+        readonly ring: string;
+        readonly default: import("../../factories/createRadioPalette.js").RadioState;
+        readonly hover: import("../../factories/createRadioPalette.js").RadioState;
+        readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
+    };
+    readonly neutral: {
+        readonly ring: string;
+        readonly default: import("../../factories/createRadioPalette.js").RadioState;
+        readonly hover: import("../../factories/createRadioPalette.js").RadioState;
+        readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
+    };
+    readonly success: {
+        readonly ring: string;
+        readonly default: import("../../factories/createRadioPalette.js").RadioState;
+        readonly hover: import("../../factories/createRadioPalette.js").RadioState;
+        readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
+    };
+    readonly warning: {
+        readonly ring: string;
+        readonly default: import("../../factories/createRadioPalette.js").RadioState;
+        readonly hover: import("../../factories/createRadioPalette.js").RadioState;
+        readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
+    };
+    readonly danger: {
+        readonly ring: string;
+        readonly default: import("../../factories/createRadioPalette.js").RadioState;
+        readonly hover: import("../../factories/createRadioPalette.js").RadioState;
+        readonly pressed: import("../../factories/createRadioPalette.js").RadioState;
     };
     readonly invalid: {
         readonly border: "#E11D48";
@@ -55,5 +59,11 @@ export declare const radio: {
         readonly fg: "#958CB0";
         readonly border: "#E4DDF4";
     };
+    readonly selectedDisabled: {
+        readonly bg: "#F4F1FB";
+        readonly fg: "#958CB0";
+        readonly border: "#E4DDF4";
+        readonly labelFg: "#958CB0";
+    };
 };
 //# sourceMappingURL=radio.d.ts.map

package/dist/light/components/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/light/components/radio.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDR,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/light/components/radio.ts"],"names":[],"mappings":"AAsHA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCR,CAAC"}

package/dist/light/components/radio.js

@@ -1,40 +1,124 @@
+import { createRadioPalette } from '../../factories/createRadioPalette.js';
 import { colors } from '../../primitives/colors.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 = createRadioPalette({
+    ring: colors.primary[400],
+    default: {
+        bg: colors.primary[50],
+        fg: colors.primary[600],
+        border: colors.primary[600],
+        labelFg: colors.primary[700],
+    },
+    hover: {
+        bg: colors.primary[100],
+        fg: colors.primary[700],
+        border: colors.primary[700],
+        labelFg: colors.primary[800],
+    },
+    pressed: {
+        bg: colors.primary[200],
+        fg: colors.primary[800],
+        border: colors.primary[800],
+        labelFg: colors.primary[900],
+    },
+});
+const neutral = createRadioPalette({
+    ring: colors.vellira[400],
+    default: {
+        bg: colors.vellira[50],
+        fg: colors.vellira[600],
+        border: colors.vellira[500],
+        labelFg: colors.vellira[600],
+    },
+    hover: {
+        bg: colors.vellira[100],
+        fg: colors.vellira[700],
+        border: colors.vellira[600],
+        labelFg: colors.vellira[700],
+    },
+    pressed: {
+        bg: colors.vellira[200],
+        fg: colors.vellira[800],
+        border: colors.vellira[700],
+        labelFg: colors.vellira[800],
+    },
+});
+const success = createRadioPalette({
+    ring: colors.success[500],
+    default: {
+        bg: colors.success[50],
+        fg: colors.success[600],
+        border: colors.success[600],
+        labelFg: colors.success[700],
+    },
+    hover: {
+        bg: colors.success[100],
+        fg: colors.success[700],
+        border: colors.success[700],
+        labelFg: colors.success[800],
+    },
+    pressed: {
+        bg: colors.success[200],
+        fg: colors.success[800],
+        border: colors.success[800],
+        labelFg: colors.success[900],
+    },
+});
+const warning = createRadioPalette({
+    ring: colors.warning[500],
+    default: {
+        bg: colors.warning[50],
+        fg: colors.warning[600],
+        border: colors.warning[600],
+        labelFg: colors.warning[700],
+    },
+    hover: {
+        bg: colors.warning[100],
+        fg: colors.warning[700],
+        border: colors.warning[700],
+        labelFg: colors.warning[800],
+    },
+    pressed: {
+        bg: colors.warning[200],
+        fg: colors.warning[800],
+        border: colors.warning[800],
+        labelFg: colors.warning[900],
+    },
+});
+const danger = createRadioPalette({
+    ring: colors.error[500],
+    default: {
+        bg: colors.error[50],
+        fg: colors.error[700],
+        border: colors.error[700],
+        labelFg: colors.error[700],
+    },
+    hover: {
+        bg: colors.error[100],
+        fg: colors.error[800],
+        border: colors.error[800],
+        labelFg: colors.error[800],
+    },
+    pressed: {
+        bg: colors.error[200],
+        fg: colors.error[900],
+        border: colors.error[900],
+        labelFg: colors.error[700],
+    },
+});
 export const radio = {
     default: control.default,
     hover: control.hover,
     pressed: control.active,
-    checked: {
-        default: {
-            bg: surface.elevated,
-            fg: colors.primary[600],
-            border: colors.primary[600],
-            labelFg: text.interactive,
-        },
-        hover: {
-            bg: colors.primary[50],
-            fg: colors.primary[700],
-            border: colors.primary[700],
-            labelFg: text.interactiveHover,
-        },
-        pressed: {
-            bg: colors.primary[100],
-            fg: colors.primary[800],
-            border: colors.primary[800],
-            labelFg: text.interactiveActive,
-        },
-        disabled: {
-            bg: surface.disabled,
-            fg: text.disabled,
-            border: border.disabled,
-            labelFg: text.disabled,
-        },
-    },
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     invalid: {
         ...control.default,
         border: status.error.border,
@@ -45,4 +129,10 @@ export const radio = {
         border: border.focus,
     },
     disabled: control.disabled,
+    selectedDisabled: {
+        bg: control.disabled.bg,
+        fg: text.disabled,
+        border: border.disabled,
+        labelFg: text.disabled,
+    },
 };

package/package.json

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"createButtonPalette.d.ts","sourceRoot":"","sources":["../../src/utils/createButtonPalette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE;QACL,OAAO,EAAE,WAAW,CAAC;QACrB,KAAK,EAAE,WAAW,CAAC;QACnB,OAAO,EAAE,WAAW,CAAC;KACtB,CAAC;IAEF,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;CAGd,CAAC;AAEX,eAAO,MAAM,mBAAmB,GAAI,sJAejC,mBAAmB;;;iBA1CT,WAAW;eACb,WAAW;iBACT,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHX,CAAC"}

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

@@ -1 +0,0 @@
-{"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"}