@retalia/pos-components 0.0.3 → 0.0.4

package/src/lib/tokens/pos-token-catalog.ts

@@ -0,0 +1,514 @@
+/**
+ * Theme-lab catalog. Default values must stay in sync with `styles/tokens.css`.
+ * The lab never writes that file; edits are live overrides only.
+ */
+export type PosTokenKind =
+  | 'color'
+  | 'length'
+  | 'font-family'
+  | 'font-weight'
+  | 'other';
+
+export type PosTokenGroup = 'color' | 'radius' | 'space' | 'type' | 'control';
+
+export type PosTokenPreview =
+  | 'color'
+  | 'radius'
+  | 'space'
+  | 'font-size'
+  | 'font-family'
+  | 'font-weight'
+  | 'letter-spacing'
+  | 'size';
+
+export interface PosTokenSwatch {
+  readonly name: string;
+  readonly variable: string;
+}
+
+export interface PosTokenDefinition extends PosTokenSwatch {
+  readonly kind: PosTokenKind;
+  readonly group: PosTokenGroup;
+  readonly preview: PosTokenPreview;
+  readonly defaultValue: string;
+}
+
+export interface PosTokenSample {
+  readonly id: string;
+  readonly label: string;
+  readonly variables: readonly string[];
+}
+
+export const POS_TOKEN_CATALOG: readonly PosTokenDefinition[] = [
+  {
+    name: 'Primary',
+    variable: '--pos-color-primary',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#c9b5f0',
+  },
+  {
+    name: 'On primary',
+    variable: '--pos-color-on-primary',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#333333',
+  },
+  {
+    name: 'Success',
+    variable: '--pos-color-success',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#16dbcc',
+  },
+  {
+    name: 'On success',
+    variable: '--pos-color-on-success',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#333333',
+  },
+  {
+    name: 'Danger',
+    variable: '--pos-color-danger',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#fe5c73',
+  },
+  {
+    name: 'On danger',
+    variable: '--pos-color-on-danger',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#ffffff',
+  },
+  {
+    name: 'Secondary',
+    variable: '--pos-color-secondary',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#16dbcc',
+  },
+  {
+    name: 'Warning',
+    variable: '--pos-color-warning',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#f0ad4e',
+  },
+  {
+    name: 'Text',
+    variable: '--pos-color-text',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#333333',
+  },
+  {
+    name: 'Text muted',
+    variable: '--pos-color-text-muted',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#999999',
+  },
+  {
+    name: 'Surface',
+    variable: '--pos-color-surface',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#ffffff',
+  },
+  {
+    name: 'Surface muted',
+    variable: '--pos-color-surface-muted',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#f5f5f5',
+  },
+  {
+    name: 'Panel',
+    variable: '--pos-color-panel',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#f5f5f5',
+  },
+  {
+    name: 'Panel elevated',
+    variable: '--pos-color-panel-elevated',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#ffffff',
+  },
+  {
+    name: 'Ink',
+    variable: '--pos-color-ink',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#333333',
+  },
+  {
+    name: 'Border',
+    variable: '--pos-color-border',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#dddddd',
+  },
+  {
+    name: 'Disabled',
+    variable: '--pos-color-disabled',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#dddddd',
+  },
+  {
+    name: 'On disabled',
+    variable: '--pos-color-on-disabled',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#999999',
+  },
+  {
+    name: 'Display',
+    variable: '--pos-color-display',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#333333',
+  },
+  {
+    name: 'On display',
+    variable: '--pos-color-on-display',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#ffffff',
+  },
+  {
+    name: 'Key',
+    variable: '--pos-color-key',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#ffffff',
+  },
+  {
+    name: 'Key border',
+    variable: '--pos-color-key-border',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#dddddd',
+  },
+  {
+    name: 'Key active',
+    variable: '--pos-color-key-active',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#c9b5f0',
+  },
+  {
+    name: 'On key active',
+    variable: '--pos-color-on-key-active',
+    kind: 'color',
+    group: 'color',
+    preview: 'color',
+    defaultValue: '#333333',
+  },
+  {
+    name: 'Radius sm',
+    variable: '--pos-radius-sm',
+    kind: 'length',
+    group: 'radius',
+    preview: 'radius',
+    defaultValue: '4px',
+  },
+  {
+    name: 'Radius md',
+    variable: '--pos-radius-md',
+    kind: 'length',
+    group: 'radius',
+    preview: 'radius',
+    defaultValue: '8px',
+  },
+  {
+    name: 'Radius lg',
+    variable: '--pos-radius-lg',
+    kind: 'length',
+    group: 'radius',
+    preview: 'radius',
+    defaultValue: '12px',
+  },
+  {
+    name: 'Radius pill',
+    variable: '--pos-radius-pill',
+    kind: 'length',
+    group: 'radius',
+    preview: 'radius',
+    defaultValue: '9999px',
+  },
+  {
+    name: 'Space xs',
+    variable: '--pos-space-xs',
+    kind: 'length',
+    group: 'space',
+    preview: 'space',
+    defaultValue: '4px',
+  },
+  {
+    name: 'Space sm',
+    variable: '--pos-space-sm',
+    kind: 'length',
+    group: 'space',
+    preview: 'space',
+    defaultValue: '8px',
+  },
+  {
+    name: 'Space md',
+    variable: '--pos-space-md',
+    kind: 'length',
+    group: 'space',
+    preview: 'space',
+    defaultValue: '12px',
+  },
+  {
+    name: 'Space lg',
+    variable: '--pos-space-lg',
+    kind: 'length',
+    group: 'space',
+    preview: 'space',
+    defaultValue: '16px',
+  },
+  {
+    name: 'Space xl',
+    variable: '--pos-space-xl',
+    kind: 'length',
+    group: 'space',
+    preview: 'space',
+    defaultValue: '24px',
+  },
+  {
+    name: 'Space 2xl',
+    variable: '--pos-space-2xl',
+    kind: 'length',
+    group: 'space',
+    preview: 'space',
+    defaultValue: '40px',
+  },
+  {
+    name: 'Space 3xl',
+    variable: '--pos-space-3xl',
+    kind: 'length',
+    group: 'space',
+    preview: 'space',
+    defaultValue: '56px',
+  },
+  {
+    name: 'Font family',
+    variable: '--pos-font-family',
+    kind: 'font-family',
+    group: 'type',
+    preview: 'font-family',
+    defaultValue:
+      "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+  },
+  {
+    name: 'Font family display',
+    variable: '--pos-font-family-display',
+    kind: 'font-family',
+    group: 'type',
+    preview: 'font-family',
+    defaultValue:
+      "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+  },
+  {
+    name: 'Font size sm',
+    variable: '--pos-font-size-sm',
+    kind: 'length',
+    group: 'type',
+    preview: 'font-size',
+    defaultValue: '0.8125rem',
+  },
+  {
+    name: 'Font size md',
+    variable: '--pos-font-size-md',
+    kind: 'length',
+    group: 'type',
+    preview: 'font-size',
+    defaultValue: '0.875rem',
+  },
+  {
+    name: 'Font size lg',
+    variable: '--pos-font-size-lg',
+    kind: 'length',
+    group: 'type',
+    preview: 'font-size',
+    defaultValue: '1.125rem',
+  },
+  {
+    name: 'Font size xl',
+    variable: '--pos-font-size-xl',
+    kind: 'length',
+    group: 'type',
+    preview: 'font-size',
+    defaultValue: '1.375rem',
+  },
+  {
+    name: 'Font weight semibold',
+    variable: '--pos-font-weight-semibold',
+    kind: 'font-weight',
+    group: 'type',
+    preview: 'font-weight',
+    defaultValue: '600',
+  },
+  {
+    name: 'Font weight bold',
+    variable: '--pos-font-weight-bold',
+    kind: 'font-weight',
+    group: 'type',
+    preview: 'font-weight',
+    defaultValue: '700',
+  },
+  {
+    name: 'Letter spacing display',
+    variable: '--pos-letter-spacing-display',
+    kind: 'length',
+    group: 'type',
+    preview: 'letter-spacing',
+    defaultValue: '0.28em',
+  },
+  {
+    name: 'Button min height',
+    variable: '--pos-button-min-height',
+    kind: 'length',
+    group: 'control',
+    preview: 'size',
+    defaultValue: '48px',
+  },
+  {
+    name: 'Keypad size',
+    variable: '--pos-keypad-size',
+    kind: 'length',
+    group: 'control',
+    preview: 'size',
+    defaultValue: '3.25rem',
+  },
+  {
+    name: 'Keypad size md',
+    variable: '--pos-keypad-size-md',
+    kind: 'length',
+    group: 'control',
+    preview: 'size',
+    defaultValue: '3.75rem',
+  },
+  {
+    name: 'Keypad size lg',
+    variable: '--pos-keypad-size-lg',
+    kind: 'length',
+    group: 'control',
+    preview: 'size',
+    defaultValue: '4.25rem',
+  },
+];
+
+export const POS_TOKEN_DEFAULTS: Readonly<Record<string, string>> = Object.freeze(
+  Object.fromEntries(
+    POS_TOKEN_CATALOG.map((token) => [token.variable, token.defaultValue]),
+  ),
+);
+
+export const POS_TOKEN_BY_VARIABLE: ReadonlyMap<string, PosTokenDefinition> =
+  new Map(POS_TOKEN_CATALOG.map((token) => [token.variable, token]));
+
+export const POS_TOKEN_SAMPLES: readonly PosTokenSample[] = [
+  {
+    id: 'primary',
+    label: 'Primary',
+    variables: [
+      '--pos-color-primary',
+      '--pos-color-on-primary',
+      '--pos-radius-md',
+      '--pos-button-min-height',
+      '--pos-font-weight-bold',
+    ],
+  },
+  {
+    id: 'success',
+    label: 'Success',
+    variables: [
+      '--pos-color-success',
+      '--pos-color-on-success',
+      '--pos-radius-md',
+      '--pos-button-min-height',
+      '--pos-font-weight-bold',
+    ],
+  },
+  {
+    id: 'danger',
+    label: 'Danger',
+    variables: [
+      '--pos-color-danger',
+      '--pos-color-on-danger',
+      '--pos-radius-md',
+      '--pos-button-min-height',
+      '--pos-font-weight-bold',
+    ],
+  },
+  {
+    id: 'disabled',
+    label: 'Disabled',
+    variables: [
+      '--pos-color-disabled',
+      '--pos-color-on-disabled',
+      '--pos-radius-md',
+      '--pos-button-min-height',
+    ],
+  },
+  {
+    id: 'text',
+    label: 'Body text',
+    variables: [
+      '--pos-color-text',
+      '--pos-color-text-muted',
+      '--pos-font-family',
+      '--pos-font-size-md',
+    ],
+  },
+  {
+    id: 'error',
+    label: 'Danger / error message',
+    variables: ['--pos-color-danger', '--pos-font-weight-semibold'],
+  },
+];
+
+export function tokensInGroup(
+  group: PosTokenGroup,
+): readonly PosTokenDefinition[] {
+  return POS_TOKEN_CATALOG.filter((token) => token.group === group);
+}
+
+export function lookupPosTokens(
+  variables: readonly string[],
+): readonly PosTokenDefinition[] {
+  return variables.flatMap((variable) => {
+    const token = POS_TOKEN_BY_VARIABLE.get(variable);
+    return token ? [token] : [];
+  });
+}