@vellira-ui/tokens 2.28.0 → 2.30.0

package/dist/dark/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[950],
+        fg: colors.primary[300],
+        border: colors.primary[500],
+        labelFg: colors.primary[400],
+    },
+    hover: {
+        bg: colors.primary[900],
+        fg: colors.primary[200],
+        border: colors.primary[400],
+        labelFg: colors.primary[400],
+    },
+    pressed: {
+        bg: colors.primary[950],
+        fg: colors.primary[400],
+        border: colors.primary[600],
+        labelFg: colors.primary[500],
+    },
+});
+const neutral = createRadioPalette({
+    ring: colors.vellira[400],
+    default: {
+        bg: colors.vellira[950],
+        fg: colors.vellira[200],
+        border: colors.vellira[300],
+        labelFg: colors.vellira[200],
+    },
+    hover: {
+        bg: colors.vellira[900],
+        fg: colors.vellira[100],
+        border: colors.vellira[200],
+        labelFg: colors.vellira[300],
+    },
+    pressed: {
+        bg: colors.vellira[950],
+        fg: colors.vellira[300],
+        border: colors.vellira[400],
+        labelFg: colors.vellira[400],
+    },
+});
+const success = createRadioPalette({
+    ring: colors.success[500],
+    default: {
+        bg: colors.success[950],
+        fg: colors.success[500],
+        border: colors.success[500],
+        labelFg: colors.success[400],
+    },
+    hover: {
+        bg: colors.success[900],
+        fg: colors.success[400],
+        border: colors.success[400],
+        labelFg: colors.success[500],
+    },
+    pressed: {
+        bg: colors.success[950],
+        fg: colors.success[600],
+        border: colors.success[600],
+        labelFg: colors.success[600],
+    },
+});
+const warning = createRadioPalette({
+    ring: colors.warning[500],
+    default: {
+        bg: colors.warning[950],
+        fg: colors.warning[500],
+        border: colors.warning[500],
+        labelFg: colors.warning[400],
+    },
+    hover: {
+        bg: colors.warning[900],
+        fg: colors.warning[400],
+        border: colors.warning[400],
+        labelFg: colors.warning[500],
+    },
+    pressed: {
+        bg: colors.warning[950],
+        fg: colors.warning[600],
+        border: colors.warning[600],
+        labelFg: colors.warning[600],
+    },
+});
+const danger = createRadioPalette({
+    ring: colors.error[500],
+    default: {
+        bg: colors.error[950],
+        fg: colors.error[400],
+        border: colors.error[500],
+        labelFg: colors.error[400],
+    },
+    hover: {
+        bg: colors.error[900],
+        fg: colors.error[300],
+        border: colors.error[400],
+        labelFg: colors.error[500],
+    },
+    pressed: {
+        bg: colors.error[950],
+        fg: colors.error[500],
+        border: colors.error[600],
+        labelFg: colors.error[600],
+    },
+});
 export const radio = {
     default: control.default,
     hover: control.hover,
     pressed: control.active,
-    checked: {
-        default: {
-            bg: surface.default,
-            fg: colors.primary[300],
-            border: colors.primary[500],
-            labelFg: text.brand,
-        },
-        hover: {
-            bg: surface.hover,
-            fg: colors.primary[200],
-            border: colors.primary[400],
-            labelFg: text.interactiveHover,
-        },
-        pressed: {
-            bg: surface.active,
-            fg: colors.primary[400],
-            border: colors.primary[600],
-            labelFg: text.brand,
-        },
-        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/factories/createButtonPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createButtonPalette.d.ts","sourceRoot":"","sources":["../../src/factories/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/factories/createCheckboxPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCheckboxPalette.d.ts","sourceRoot":"","sources":["../../src/factories/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/factories/createInputPalette.d.ts

@@ -0,0 +1,78 @@
+export type InputState = {
+    bg: string;
+    fg: string;
+    border: string;
+    placeholder: string;
+    icon: string;
+};
+export type InputPaletteConfig = {
+    ring: string;
+    outline: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    filled: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    soft: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+};
+export declare const createInputPalette: ({ ring, outline, filled, soft, }: InputPaletteConfig) => {
+    readonly ring: string;
+    readonly outline: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly filled: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly soft: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+};
+export type InputColorPaletteConfig = {
+    accent: string;
+    accentHover: string;
+    accentSoft: string;
+    filledBg: string;
+    filledHoverBg: string;
+    hoverBg: string;
+    ring: string;
+    fg: string;
+    placeholder: string;
+    filledFocusBg: string;
+    filledDefaultBorder?: string;
+    filledHoverBorder?: string;
+    softDefaultBorder?: string;
+    softHoverBorder?: string;
+};
+export declare const createInputColorPalette: ({ accent, accentHover, accentSoft, filledBg, filledHoverBg, hoverBg, ring, fg, placeholder, filledFocusBg, filledDefaultBorder, filledHoverBorder, softDefaultBorder, softHoverBorder, }: InputColorPaletteConfig) => {
+    readonly ring: string;
+    readonly outline: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly filled: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly soft: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+};
+//# sourceMappingURL=createInputPalette.d.ts.map

package/dist/factories/createInputPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createInputPalette.d.ts","sourceRoot":"","sources":["../../src/factories/createInputPalette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QACP,OAAO,EAAE,UAAU,CAAC;QACpB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,UAAU,CAAC;QACpB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU,CAAC;QACpB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kCAKhC,kBAAkB;;;iBArBR,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;CAeR,CAAC;AAEd,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,0LAerC,uBAAuB;;;iBA7Db,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;CAyHjB,CAAC"}

package/dist/factories/createInputPalette.js

@@ -0,0 +1,78 @@
+export const createInputPalette = ({ ring, outline, filled, soft, }) => ({
+    ring,
+    outline,
+    filled,
+    soft,
+});
+export const createInputColorPalette = ({ accent, accentHover, accentSoft, filledBg, filledHoverBg, hoverBg, ring, fg, placeholder, filledFocusBg, filledDefaultBorder = 'transparent', filledHoverBorder = accent, softDefaultBorder = 'transparent', softHoverBorder = accent, }) => createInputPalette({
+    ring,
+    outline: {
+        default: {
+            bg: 'transparent',
+            fg,
+            border: accent,
+            placeholder,
+            icon: accent,
+        },
+        hover: {
+            bg: hoverBg,
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+        focus: {
+            bg: 'transparent',
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+    },
+    filled: {
+        default: {
+            bg: filledBg,
+            fg,
+            border: filledDefaultBorder,
+            placeholder,
+            icon: accent,
+        },
+        hover: {
+            bg: filledHoverBg,
+            fg,
+            border: filledHoverBorder,
+            placeholder,
+            icon: accentHover,
+        },
+        focus: {
+            bg: filledFocusBg,
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+    },
+    soft: {
+        default: {
+            bg: accentSoft,
+            fg,
+            border: softDefaultBorder,
+            placeholder,
+            icon: accent,
+        },
+        hover: {
+            bg: accentSoft,
+            fg,
+            border: softHoverBorder,
+            placeholder,
+            icon: accentHover,
+        },
+        focus: {
+            bg: accentSoft,
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+    },
+});

package/dist/factories/createRadioPalette.d.ts

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

package/dist/factories/createRadioPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRadioPalette.d.ts","sourceRoot":"","sources":["../../src/factories/createRadioPalette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kDAKhC,kBAAkB;;;;;CAMR,CAAC"}

package/dist/factories/createRadioPalette.js

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

package/dist/factories/index.d.ts

@@ -0,0 +1,5 @@
+export * from './createButtonPalette.js';
+export * from './createCheckboxPalette.js';
+export * from './createInputPalette.js';
+export * from './createRadioPalette.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/factories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/factories/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC"}

package/dist/factories/index.js

@@ -0,0 +1,4 @@
+export * from './createButtonPalette.js';
+export * from './createCheckboxPalette.js';
+export * from './createInputPalette.js';
+export * from './createRadioPalette.js';