@od-oneapp/uni-ui 2026.1.1301

package/src/tokens/form-states.ts

@@ -0,0 +1,521 @@
+/**
+ * @fileoverview Form state design tokens
+ * Form state design tokens
+ *
+ * Provides consistent styling for form element states including placeholder,
+ * autofill, checked, indeterminate, readonly, and validation states.
+ *
+ * @example
+ * ```tsx
+ * // Using placeholder tokens
+ * <input
+ *   placeholder="Enter text..."
+ *   style={{ '--placeholder-color': formStateVars.placeholderColor }}
+ * />
+ *
+ * // Using checked state tokens
+ * <Checkbox style={{ backgroundColor: formStateVars.checkedBg }} />
+ * ```
+ */
+
+// ============================================
+// PLACEHOLDER TOKENS
+// ============================================
+
+export const placeholder = {
+  light: {
+    color: {
+      value: '{palette.zinc.400}',
+      cssVar: '--placeholder-color',
+      type: 'color' as const,
+      description: 'Placeholder text color',
+    },
+    opacity: {
+      value: '1',
+      cssVar: '--placeholder-opacity',
+      type: 'opacity' as const,
+      description: 'Placeholder text opacity',
+    },
+    fontStyle: {
+      value: 'normal',
+      cssVar: '--placeholder-font-style',
+      type: 'other' as const,
+      description: 'Placeholder font style (normal or italic)',
+    },
+  },
+  dark: {
+    color: {
+      value: '{palette.zinc.500}',
+      cssVar: '--placeholder-color',
+      type: 'color' as const,
+      description: 'Placeholder text color (dark)',
+    },
+    opacity: {
+      value: '1',
+      cssVar: '--placeholder-opacity',
+      type: 'opacity' as const,
+      description: 'Placeholder text opacity (dark)',
+    },
+    fontStyle: {
+      value: 'normal',
+      cssVar: '--placeholder-font-style',
+      type: 'other' as const,
+      description: 'Placeholder font style (dark)',
+    },
+  },
+} as const;
+
+// ============================================
+// AUTOFILL TOKENS
+// ============================================
+
+export const autofill = {
+  light: {
+    bg: {
+      value: '{palette.blue.50}',
+      cssVar: '--autofill-bg',
+      type: 'color' as const,
+      description: 'Autofill background color override',
+    },
+    text: {
+      value: '{palette.zinc.900}',
+      cssVar: '--autofill-text',
+      type: 'color' as const,
+      description: 'Autofill text color override',
+    },
+    shadow: {
+      value: 'inset 0 0 0 1000px var(--autofill-bg)',
+      cssVar: '--autofill-shadow',
+      type: 'shadow' as const,
+      description: 'Shadow hack to override browser autofill styling',
+    },
+    caretColor: {
+      value: '{palette.zinc.900}',
+      cssVar: '--autofill-caret-color',
+      type: 'color' as const,
+      description: 'Caret color for autofilled inputs',
+    },
+  },
+  dark: {
+    bg: {
+      value: '{palette.blue.900}',
+      cssVar: '--autofill-bg',
+      type: 'color' as const,
+      description: 'Autofill background color override (dark)',
+    },
+    text: {
+      value: '{palette.zinc.100}',
+      cssVar: '--autofill-text',
+      type: 'color' as const,
+      description: 'Autofill text color override (dark)',
+    },
+    shadow: {
+      value: 'inset 0 0 0 1000px var(--autofill-bg)',
+      cssVar: '--autofill-shadow',
+      type: 'shadow' as const,
+      description: 'Shadow hack to override browser autofill styling (dark)',
+    },
+    caretColor: {
+      value: '{palette.zinc.100}',
+      cssVar: '--autofill-caret-color',
+      type: 'color' as const,
+      description: 'Caret color for autofilled inputs (dark)',
+    },
+  },
+} as const;
+
+// ============================================
+// CHECKED STATE TOKENS (Checkbox/Radio)
+// ============================================
+
+export const checked = {
+  light: {
+    bg: {
+      value: '{colors.light.primary}',
+      cssVar: '--checked-bg',
+      type: 'color' as const,
+      description: 'Background color when checked',
+    },
+    border: {
+      value: '{colors.light.primary}',
+      cssVar: '--checked-border',
+      type: 'color' as const,
+      description: 'Border color when checked',
+    },
+    indicator: {
+      value: '{colors.light.primaryForeground}',
+      cssVar: '--checked-indicator',
+      type: 'color' as const,
+      description: 'Checkmark/indicator color',
+    },
+    hoverBg: {
+      value: '{palette.zinc.200}',
+      cssVar: '--checked-hover-bg',
+      type: 'color' as const,
+      description: 'Background on hover when checked',
+    },
+  },
+  dark: {
+    bg: {
+      value: '{colors.dark.primary}',
+      cssVar: '--checked-bg',
+      type: 'color' as const,
+      description: 'Background color when checked (dark)',
+    },
+    border: {
+      value: '{colors.dark.primary}',
+      cssVar: '--checked-border',
+      type: 'color' as const,
+      description: 'Border color when checked (dark)',
+    },
+    indicator: {
+      value: '{colors.dark.primaryForeground}',
+      cssVar: '--checked-indicator',
+      type: 'color' as const,
+      description: 'Checkmark/indicator color (dark)',
+    },
+    hoverBg: {
+      value: '{palette.zinc.700}',
+      cssVar: '--checked-hover-bg',
+      type: 'color' as const,
+      description: 'Background on hover when checked (dark)',
+    },
+  },
+} as const;
+
+// ============================================
+// INDETERMINATE STATE TOKENS
+// ============================================
+
+export const indeterminate = {
+  light: {
+    bg: {
+      value: '{colors.light.primary}',
+      cssVar: '--indeterminate-bg',
+      type: 'color' as const,
+      description: 'Background color for indeterminate state',
+    },
+    border: {
+      value: '{colors.light.primary}',
+      cssVar: '--indeterminate-border',
+      type: 'color' as const,
+      description: 'Border color for indeterminate state',
+    },
+    indicator: {
+      value: '{colors.light.primaryForeground}',
+      cssVar: '--indeterminate-indicator',
+      type: 'color' as const,
+      description: 'Dash indicator color for indeterminate',
+    },
+  },
+  dark: {
+    bg: {
+      value: '{colors.dark.primary}',
+      cssVar: '--indeterminate-bg',
+      type: 'color' as const,
+      description: 'Background color for indeterminate state (dark)',
+    },
+    border: {
+      value: '{colors.dark.primary}',
+      cssVar: '--indeterminate-border',
+      type: 'color' as const,
+      description: 'Border color for indeterminate state (dark)',
+    },
+    indicator: {
+      value: '{colors.dark.primaryForeground}',
+      cssVar: '--indeterminate-indicator',
+      type: 'color' as const,
+      description: 'Dash indicator color for indeterminate (dark)',
+    },
+  },
+} as const;
+
+// ============================================
+// READONLY STATE TOKENS
+// ============================================
+
+export const readonly = {
+  light: {
+    bg: {
+      value: '{palette.zinc.50}',
+      cssVar: '--readonly-bg',
+      type: 'color' as const,
+      description: 'Background color for readonly inputs',
+    },
+    border: {
+      value: '{palette.zinc.200}',
+      cssVar: '--readonly-border',
+      type: 'color' as const,
+      description: 'Border color for readonly inputs',
+    },
+    text: {
+      value: '{palette.zinc.600}',
+      cssVar: '--readonly-text',
+      type: 'color' as const,
+      description: 'Text color for readonly inputs',
+    },
+    cursor: {
+      value: 'default',
+      cssVar: '--readonly-cursor',
+      type: 'other' as const,
+      description: 'Cursor style for readonly elements',
+    },
+  },
+  dark: {
+    bg: {
+      value: '{palette.zinc.900}',
+      cssVar: '--readonly-bg',
+      type: 'color' as const,
+      description: 'Background color for readonly inputs (dark)',
+    },
+    border: {
+      value: '{palette.zinc.700}',
+      cssVar: '--readonly-border',
+      type: 'color' as const,
+      description: 'Border color for readonly inputs (dark)',
+    },
+    text: {
+      value: '{palette.zinc.400}',
+      cssVar: '--readonly-text',
+      type: 'color' as const,
+      description: 'Text color for readonly inputs (dark)',
+    },
+    cursor: {
+      value: 'default',
+      cssVar: '--readonly-cursor',
+      type: 'other' as const,
+      description: 'Cursor style for readonly elements (dark)',
+    },
+  },
+} as const;
+
+// ============================================
+// REQUIRED FIELD TOKENS
+// ============================================
+
+export const required = {
+  light: {
+    indicator: {
+      value: '{palette.red.500}',
+      cssVar: '--required-indicator',
+      type: 'color' as const,
+      description: 'Color for required field indicator (*)',
+    },
+    borderColor: {
+      value: '{palette.zinc.300}',
+      cssVar: '--required-border',
+      type: 'color' as const,
+      description: 'Border color for required fields',
+    },
+  },
+  dark: {
+    indicator: {
+      value: '{palette.red.400}',
+      cssVar: '--required-indicator',
+      type: 'color' as const,
+      description: 'Color for required field indicator (dark)',
+    },
+    borderColor: {
+      value: '{palette.zinc.600}',
+      cssVar: '--required-border',
+      type: 'color' as const,
+      description: 'Border color for required fields (dark)',
+    },
+  },
+} as const;
+
+// ============================================
+// VALID/INVALID FIELD TOKENS (Progressive validation)
+// ============================================
+
+export const validation = {
+  light: {
+    validBorder: {
+      value: '{palette.green.500}',
+      cssVar: '--valid-border',
+      type: 'color' as const,
+      description: 'Border color for valid fields',
+    },
+    validIcon: {
+      value: '{palette.green.500}',
+      cssVar: '--valid-icon',
+      type: 'color' as const,
+      description: 'Icon color for valid state',
+    },
+    invalidBorder: {
+      value: '{palette.red.500}',
+      cssVar: '--invalid-border',
+      type: 'color' as const,
+      description: 'Border color for invalid fields',
+    },
+    invalidIcon: {
+      value: '{palette.red.500}',
+      cssVar: '--invalid-icon',
+      type: 'color' as const,
+      description: 'Icon color for invalid state',
+    },
+    invalidBg: {
+      value: '{palette.red.50}',
+      cssVar: '--invalid-bg',
+      type: 'color' as const,
+      description: 'Background for invalid fields',
+    },
+  },
+  dark: {
+    validBorder: {
+      value: '{palette.green.400}',
+      cssVar: '--valid-border',
+      type: 'color' as const,
+      description: 'Border color for valid fields (dark)',
+    },
+    validIcon: {
+      value: '{palette.green.400}',
+      cssVar: '--valid-icon',
+      type: 'color' as const,
+      description: 'Icon color for valid state (dark)',
+    },
+    invalidBorder: {
+      value: '{palette.red.400}',
+      cssVar: '--invalid-border',
+      type: 'color' as const,
+      description: 'Border color for invalid fields (dark)',
+    },
+    invalidIcon: {
+      value: '{palette.red.400}',
+      cssVar: '--invalid-icon',
+      type: 'color' as const,
+      description: 'Icon color for invalid state (dark)',
+    },
+    invalidBg: {
+      value: '{palette.red.900}',
+      cssVar: '--invalid-bg',
+      type: 'color' as const,
+      description: 'Background for invalid fields (dark)',
+    },
+  },
+} as const;
+
+// ============================================
+// COMBINED FORM STATE TOKENS
+// ============================================
+
+/**
+ * Combined form state tokens
+ */
+export const formStates = {
+  placeholder,
+  autofill,
+  checked,
+  indeterminate,
+  readonly,
+  required,
+  validation,
+} as const;
+
+/**
+ * Runtime form state token values
+ */
+export const formStateTokens = {
+  light: {
+    placeholderColor: placeholder.light.color.value,
+    placeholderOpacity: placeholder.light.opacity.value,
+    placeholderFontStyle: placeholder.light.fontStyle.value,
+    autofillBg: autofill.light.bg.value,
+    autofillText: autofill.light.text.value,
+    autofillShadow: autofill.light.shadow.value,
+    autofillCaretColor: autofill.light.caretColor.value,
+    checkedBg: checked.light.bg.value,
+    checkedBorder: checked.light.border.value,
+    checkedIndicator: checked.light.indicator.value,
+    checkedHoverBg: checked.light.hoverBg.value,
+    indeterminateBg: indeterminate.light.bg.value,
+    indeterminateBorder: indeterminate.light.border.value,
+    indeterminateIndicator: indeterminate.light.indicator.value,
+    readonlyBg: readonly.light.bg.value,
+    readonlyBorder: readonly.light.border.value,
+    readonlyText: readonly.light.text.value,
+    readonlyCursor: readonly.light.cursor.value,
+    requiredIndicator: required.light.indicator.value,
+    requiredBorder: required.light.borderColor.value,
+    validBorder: validation.light.validBorder.value,
+    validIcon: validation.light.validIcon.value,
+    invalidBorder: validation.light.invalidBorder.value,
+    invalidIcon: validation.light.invalidIcon.value,
+    invalidBg: validation.light.invalidBg.value,
+  },
+  dark: {
+    placeholderColor: placeholder.dark.color.value,
+    placeholderOpacity: placeholder.dark.opacity.value,
+    placeholderFontStyle: placeholder.dark.fontStyle.value,
+    autofillBg: autofill.dark.bg.value,
+    autofillText: autofill.dark.text.value,
+    autofillShadow: autofill.dark.shadow.value,
+    autofillCaretColor: autofill.dark.caretColor.value,
+    checkedBg: checked.dark.bg.value,
+    checkedBorder: checked.dark.border.value,
+    checkedIndicator: checked.dark.indicator.value,
+    checkedHoverBg: checked.dark.hoverBg.value,
+    indeterminateBg: indeterminate.dark.bg.value,
+    indeterminateBorder: indeterminate.dark.border.value,
+    indeterminateIndicator: indeterminate.dark.indicator.value,
+    readonlyBg: readonly.dark.bg.value,
+    readonlyBorder: readonly.dark.border.value,
+    readonlyText: readonly.dark.text.value,
+    readonlyCursor: readonly.dark.cursor.value,
+    requiredIndicator: required.dark.indicator.value,
+    requiredBorder: required.dark.borderColor.value,
+    validBorder: validation.dark.validBorder.value,
+    validIcon: validation.dark.validIcon.value,
+    invalidBorder: validation.dark.invalidBorder.value,
+    invalidIcon: validation.dark.invalidIcon.value,
+    invalidBg: validation.dark.invalidBg.value,
+  },
+} as const;
+
+/**
+ * CSS variable references for form state tokens
+ */
+export const formStateVars = {
+  // Placeholder
+  placeholderColor: 'var(--placeholder-color)',
+  placeholderOpacity: 'var(--placeholder-opacity)',
+  placeholderFontStyle: 'var(--placeholder-font-style)',
+  // Autofill
+  autofillBg: 'var(--autofill-bg)',
+  autofillText: 'var(--autofill-text)',
+  autofillShadow: 'var(--autofill-shadow)',
+  autofillCaretColor: 'var(--autofill-caret-color)',
+  // Checked
+  checkedBg: 'var(--checked-bg)',
+  checkedBorder: 'var(--checked-border)',
+  checkedIndicator: 'var(--checked-indicator)',
+  checkedHoverBg: 'var(--checked-hover-bg)',
+  // Indeterminate
+  indeterminateBg: 'var(--indeterminate-bg)',
+  indeterminateBorder: 'var(--indeterminate-border)',
+  indeterminateIndicator: 'var(--indeterminate-indicator)',
+  // Readonly
+  readonlyBg: 'var(--readonly-bg)',
+  readonlyBorder: 'var(--readonly-border)',
+  readonlyText: 'var(--readonly-text)',
+  readonlyCursor: 'var(--readonly-cursor)',
+  // Required
+  requiredIndicator: 'var(--required-indicator)',
+  requiredBorder: 'var(--required-border)',
+  // Validation
+  validBorder: 'var(--valid-border)',
+  validIcon: 'var(--valid-icon)',
+  invalidBorder: 'var(--invalid-border)',
+  invalidIcon: 'var(--invalid-icon)',
+  invalidBg: 'var(--invalid-bg)',
+} as const;
+
+// Types
+export type FormStateTheme = 'light' | 'dark';
+export type PlaceholderToken = keyof typeof placeholder.light;
+export type AutofillToken = keyof typeof autofill.light;
+export type CheckedToken = keyof typeof checked.light;
+export type IndeterminateToken = keyof typeof indeterminate.light;
+export type ReadonlyToken = keyof typeof readonly.light;
+export type RequiredToken = keyof typeof required.light;
+export type ValidationToken = keyof typeof validation.light;