@vellira-ui/tokens 2.29.0 → 2.31.0

package/dist/highContrast/components/formField.d.ts

@@ -2,6 +2,14 @@ export declare const formField: {
     readonly label: {
         readonly fg: "#FFFFFF";
     };
+    readonly optional: {
+        readonly fg: "#EEE8FA";
+    };
+    readonly labelInfo: {
+        readonly fg: "#EEE8FA";
+        readonly border: "#EEE8FA";
+        readonly radius: 999;
+    };
     readonly description: {
         readonly fg: "#EEE8FA";
     };
@@ -30,5 +38,49 @@ export declare const formField: {
         readonly descriptionFg: "#6B7280";
         readonly helperTextFg: "#6B7280";
     };
+    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/highContrast/components/formField.d.ts.map

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

package/dist/highContrast/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/highContrast/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: "#FFFFFF";
@@ -32,10 +122,6 @@ export declare const input: {
         readonly border: "#FB7185";
         readonly ring: "#FB7185";
     };
-    readonly success: {
-        readonly border: "#5EEAD4";
-        readonly ring: "#5EEAD4";
-    };
     readonly readOnly: {
         readonly bg: "#1F2937";
         readonly fg: "#EEE8FA";
@@ -60,5 +146,24 @@ export declare const input: {
         readonly focusBg: "#1F2937";
         readonly pressedBg: "#374151";
     };
+    readonly revealButton: {
+        readonly fg: "#FFFFFF";
+        readonly hoverFg: "#FFFFFF";
+        readonly hoverBg: "#374151";
+    };
+    readonly addon: {
+        readonly bg: "#111827";
+        readonly fg: "#EEE8FA";
+        readonly border: "#9CA3AF";
+    };
+    readonly affix: {
+        readonly fg: "#FFFFFF";
+    };
+    readonly counter: {
+        readonly fg: "#EEE8FA";
+    };
+    readonly spinner: {
+        readonly fg: "#9CA3AF";
+    };
 };
 //# sourceMappingURL=input.d.ts.map

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

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

package/dist/highContrast/components/input.js

@@ -1,10 +1,92 @@
+import { createInputColorPalette } from '../../factories/createInputPalette.js';
+import { colors } from '../../primitives/colors.js';
 import { border } from '../semantic/border.js';
 import { focus } from '../semantic/focus.js';
 import { icons } from '../semantic/icons.js';
 import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
+const inputPaletteDefaults = {
+    fg: text.primary,
+    placeholder: text.secondary,
+    filledFocusBg: surface.subtle,
+    hoverBg: surface.hover,
+};
+const primary = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.primary[300],
+    accentHover: colors.primary[400],
+    accentSoft: colors.primary[900],
+    filledBg: colors.primary[950],
+    filledHoverBg: colors.primary[900],
+    filledDefaultBorder: colors.primary[300],
+    filledHoverBorder: colors.primary[400],
+    softDefaultBorder: colors.primary[300],
+    softHoverBorder: colors.primary[400],
+    ring: colors.primary[400],
+});
+const neutral = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.grayBlue[200],
+    accentHover: colors.gray[200],
+    accentSoft: colors.grayBlue[800],
+    filledBg: colors.grayBlue[900],
+    filledHoverBg: colors.grayBlue[800],
+    filledDefaultBorder: colors.grayBlue[200],
+    filledHoverBorder: colors.gray[200],
+    softDefaultBorder: colors.grayBlue[200],
+    softHoverBorder: colors.gray[200],
+    hoverBg: colors.grayBlue[900],
+    ring: colors.grayBlue[400],
+});
+const success = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.success[300],
+    accentHover: colors.success[400],
+    accentSoft: colors.success[900],
+    filledBg: colors.success[950],
+    filledHoverBg: colors.success[900],
+    filledDefaultBorder: colors.success[300],
+    filledHoverBorder: colors.success[400],
+    softDefaultBorder: colors.success[300],
+    softHoverBorder: colors.success[400],
+    hoverBg: colors.success[950],
+    ring: colors.success[500],
+});
+const warning = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.warning[500],
+    accentHover: colors.warning[400],
+    accentSoft: colors.warning[900],
+    filledBg: colors.warning[900],
+    filledHoverBg: colors.warning[800],
+    filledDefaultBorder: colors.warning[500],
+    filledHoverBorder: colors.warning[400],
+    softDefaultBorder: colors.warning[500],
+    softHoverBorder: colors.warning[400],
+    hoverBg: colors.warning[950],
+    ring: colors.warning[500],
+});
+const danger = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.error[400],
+    accentHover: colors.error[300],
+    accentSoft: colors.error[900],
+    filledBg: colors.error[950],
+    filledHoverBg: colors.error[900],
+    filledDefaultBorder: colors.error[400],
+    filledHoverBorder: colors.error[300],
+    softDefaultBorder: colors.error[400],
+    softHoverBorder: colors.error[300],
+    hoverBg: colors.error[950],
+    ring: colors.error[500],
+});
 export const input = {
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     default: {
         bg: 'transparent',
         fg: text.primary,
@@ -38,10 +120,6 @@ export const input = {
         border: status.error.border,
         ring: status.error.ring,
     },
-    success: {
-        border: status.success.border,
-        ring: status.success.ring,
-    },
     readOnly: {
         bg: surface.subtle,
         fg: text.secondary,
@@ -66,4 +144,23 @@ export const input = {
         focusBg: surface.subtle,
         pressedBg: surface.active,
     },
+    revealButton: {
+        fg: text.primary,
+        hoverFg: text.primary,
+        hoverBg: surface.hover,
+    },
+    addon: {
+        bg: surface.muted,
+        fg: text.secondary,
+        border: border.default,
+    },
+    affix: {
+        fg: text.primary,
+    },
+    counter: {
+        fg: text.secondary,
+    },
+    spinner: {
+        fg: icons.muted,
+    },
 };