@retalia/pos-components 0.0.4 → 0.0.6

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

@@ -1,514 +0,0 @@
-/**
- * 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] : [];
-  });
-}