alouette/src/controlSizes.ts

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

/* Generated by scripts/build-css.ts. DO NOT EDIT. */

/**
 * The `--spacing-control-*` tokens of each density, shared with core.css's
 * `.density-*` blocks. Native never sees those classes, so `DensityScope`
 * pushes this map through NativeWind's `VariableContextProvider` instead.
 */
export const densityVariables = {
  comfortable: {
    "--spacing-control-sm": 38,
    "--spacing-control-md": 44,
    "--spacing-control-lg": 52,
    "--spacing-control-chip": 32,
    "--spacing-control-chip-icon": 36,
    "--spacing-control-chip-stacked": 40,
    "--spacing-control-inset": 8,
  },
  compact: {
    "--spacing-control-sm": 32,
    "--spacing-control-md": 36,
    "--spacing-control-lg": 44,
    "--spacing-control-chip": 28,
    "--spacing-control-chip-icon": 28,
    "--spacing-control-chip-stacked": 32,
    "--spacing-control-inset": 4,
  },
} as const;

export type Density = keyof typeof densityVariables;

/**
 * Height (px) of a control at each size, per density — the
 * `--spacing-control-{sm,md,lg}` tokens, for a dimension set from JS (an
 * `IconButton`'s diameter). Read the density with `useDensity()`.
 */
export const controlHeightsPx = {
  comfortable: {
    sm: 38,
    md: 44,
    lg: 52,
  },
  compact: {
    sm: 32,
    md: 36,
    lg: 44,
  },
} as const;