@vellira-ui/tokens 2.28.0 → 2.30.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/formField.d.ts

@@ -2,6 +2,14 @@ export declare const formField: {
     readonly label: {
         readonly fg: "#3D3754";
     };
+    readonly optional: {
+        readonly fg: "#6B6386";
+    };
+    readonly labelInfo: {
+        readonly fg: "#6B6386";
+        readonly border: "#6B6386";
+        readonly radius: 999;
+    };
     readonly description: {
         readonly fg: "#6B6386";
     };
@@ -30,5 +38,49 @@ export declare const formField: {
         readonly descriptionFg: "#958CB0";
         readonly helperTextFg: "#958CB0";
     };
+    readonly size: {
+        readonly sm: {
+            readonly gap: 4;
+            readonly horizontalGap: 12;
+            readonly labelFontSize: 14;
+            readonly labelLineHeight: 20;
+            readonly descriptionFontSize: 12;
+            readonly descriptionLineHeight: 16;
+            readonly helperTextFontSize: 12;
+            readonly helperTextLineHeight: 16;
+            readonly optionalFontSize: 12;
+            readonly optionalLineHeight: 16;
+            readonly labelInfoSize: 16;
+            readonly labelInfoFontSize: 12;
+        };
+        readonly md: {
+            readonly gap: 8;
+            readonly horizontalGap: 16;
+            readonly labelFontSize: 16;
+            readonly labelLineHeight: 24;
+            readonly descriptionFontSize: 14;
+            readonly descriptionLineHeight: 20;
+            readonly helperTextFontSize: 14;
+            readonly helperTextLineHeight: 20;
+            readonly optionalFontSize: 12;
+            readonly optionalLineHeight: 16;
+            readonly labelInfoSize: 16;
+            readonly labelInfoFontSize: 12;
+        };
+        readonly lg: {
+            readonly gap: 12;
+            readonly horizontalGap: 20;
+            readonly labelFontSize: 20;
+            readonly labelLineHeight: 28;
+            readonly descriptionFontSize: 16;
+            readonly descriptionLineHeight: 24;
+            readonly helperTextFontSize: 16;
+            readonly helperTextLineHeight: 24;
+            readonly optionalFontSize: 14;
+            readonly optionalLineHeight: 20;
+            readonly labelInfoSize: 20;
+            readonly labelInfoFontSize: 14;
+        };
+    };
 };
 //# sourceMappingURL=formField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"formField.d.ts","sourceRoot":"","sources":["../../../src/light/components/formField.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCZ,CAAC"}
+{"version":3,"file":"formField.d.ts","sourceRoot":"","sources":["../../../src/light/components/formField.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FZ,CAAC"}

package/dist/light/components/formField.js

@@ -1,9 +1,20 @@
+import { radius } from '../../tokens/radius.js';
+import { spacing } from '../../tokens/spacing.js';
+import { typography } from '../../tokens/typography.js';
 import { status } from '../semantic/status.js';
 import { text } from '../semantic/text.js';
 export const formField = {
     label: {
         fg: text.primary,
     },
+    optional: {
+        fg: text.secondary,
+    },
+    labelInfo: {
+        fg: text.secondary,
+        border: text.secondary,
+        radius: radius.full,
+    },
     description: {
         fg: text.secondary,
     },
@@ -32,4 +43,48 @@ export const formField = {
         descriptionFg: text.disabled,
         helperTextFg: text.disabled,
     },
+    size: {
+        sm: {
+            gap: spacing[1],
+            horizontalGap: spacing[3],
+            labelFontSize: typography.size.sm,
+            labelLineHeight: typography.lineHeight.sm,
+            descriptionFontSize: typography.size.xs,
+            descriptionLineHeight: typography.lineHeight.xs,
+            helperTextFontSize: typography.size.xs,
+            helperTextLineHeight: typography.lineHeight.xs,
+            optionalFontSize: typography.size.xs,
+            optionalLineHeight: typography.lineHeight.xs,
+            labelInfoSize: spacing[4],
+            labelInfoFontSize: typography.size.xs,
+        },
+        md: {
+            gap: spacing[2],
+            horizontalGap: spacing[4],
+            labelFontSize: typography.size.md,
+            labelLineHeight: typography.lineHeight.md,
+            descriptionFontSize: typography.size.sm,
+            descriptionLineHeight: typography.lineHeight.sm,
+            helperTextFontSize: typography.size.sm,
+            helperTextLineHeight: typography.lineHeight.sm,
+            optionalFontSize: typography.size.xs,
+            optionalLineHeight: typography.lineHeight.xs,
+            labelInfoSize: spacing[4],
+            labelInfoFontSize: typography.size.xs,
+        },
+        lg: {
+            gap: spacing[3],
+            horizontalGap: spacing[5],
+            labelFontSize: typography.size.lg,
+            labelLineHeight: typography.lineHeight.lg,
+            descriptionFontSize: typography.size.md,
+            descriptionLineHeight: typography.lineHeight.md,
+            helperTextFontSize: typography.size.md,
+            helperTextLineHeight: typography.lineHeight.md,
+            optionalFontSize: typography.size.sm,
+            optionalLineHeight: typography.lineHeight.sm,
+            labelInfoSize: spacing[5],
+            labelInfoFontSize: typography.size.sm,
+        },
+    },
 };

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

@@ -1,4 +1,94 @@
 export declare const input: {
+    readonly primary: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly neutral: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly success: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly warning: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly danger: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
     readonly default: {
         readonly bg: "transparent";
         readonly fg: "#3D3754";
@@ -32,10 +122,6 @@ export declare const input: {
         readonly border: "#E11D48";
         readonly ring: "#F43F5E";
     };
-    readonly success: {
-        readonly border: "#0F766E";
-        readonly ring: "#14B8A6";
-    };
     readonly readOnly: {
         readonly bg: "#FDFCFF";
         readonly fg: "#6B6386";
@@ -47,7 +133,7 @@ export declare const input: {
         readonly default: "#3D3754";
         readonly primary: "#5037C8";
         readonly secondary: "#6B6386";
-        readonly success: "#0F766E";
+        readonly success: "#14B8A6";
         readonly danger: "#BE123C";
         readonly muted: "#958CB0";
         readonly inverse: "#FFFFFF";
@@ -60,5 +146,24 @@ export declare const input: {
         readonly focusBg: "#FDFCFF";
         readonly pressedBg: "#EEE8FA";
     };
+    readonly revealButton: {
+        readonly fg: "#3D3754";
+        readonly hoverFg: "#3D3754";
+        readonly hoverBg: "#F4F1FB";
+    };
+    readonly addon: {
+        readonly bg: "#F4F1FB";
+        readonly fg: "#6B6386";
+        readonly border: "#BBB2D2";
+    };
+    readonly affix: {
+        readonly fg: "#3D3754";
+    };
+    readonly counter: {
+        readonly fg: "#6B6386";
+    };
+    readonly spinner: {
+        readonly fg: "#958CB0";
+    };
 };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsER,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAsEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FR,CAAC"}