@duro-app/tokens 4.5.0 → 5.1.0

package/src/keys.ts

@@ -31,12 +31,24 @@ export const SPACING_PX = {
   xxxl: 64,
 } as const
 
-export const RADIUS_KEYS = ['xs', 'sm', 'md', 'lg', 'full'] as const
+// Mirrors tokens/spacing.css.ts `microSpacing` (px). Not a SpacingToken.
+export const MICRO_SPACING_KEYS = ['px1', 'px2', 'px3', 'px5', 'px6'] as const
+export type MicroSpacingToken = (typeof MICRO_SPACING_KEYS)[number]
+export const MICRO_SPACING_PX = {
+  px1: 1,
+  px2: 2,
+  px3: 3,
+  px5: 5,
+  px6: 6,
+} as const
+
+export const RADIUS_KEYS = ['xs', 'px6', 'sm', 'md', 'lg', 'full'] as const
 export type RadiusToken = (typeof RADIUS_KEYS)[number]
 
 // Mirrors tokens/spacing.css.ts `radii` (px).
 export const RADII_PX = {
   xs: 4,
+  px6: 6,
   sm: 8,
   md: 12,
   lg: 16,
@@ -49,20 +61,148 @@ export type ShadowToken = (typeof SHADOW_KEYS)[number]
 // Mirrors tokens/motion.css.ts `duration`, as numbers for setTimeout use.
 export const DURATION_MS = {
   instant: 0,
+  minimal: 1,
+  quick: 120,
   fast: 150,
+  brisk: 160,
   base: 200,
   slow: 280,
 } as const
 export type DurationToken = keyof typeof DURATION_MS
 
-// Icon rendering sizes (SVG width/height, px). Not a css.defineVars scale —
-// icons size via attributes, not CSS custom properties.
+export const SIZE_KEYS = [
+  'touchTarget',
+  'controlSm',
+  'controlMd',
+  'controlLg',
+  'indicator',
+  'indicatorDot',
+  'checkMarkW',
+  'checkMarkH',
+  'switchTrackW',
+  'switchTrackH',
+  'switchThumb',
+  'iconButton',
+  'iconButtonSm',
+  'spinnerSm',
+  'spinnerMd',
+  'spinnerLg',
+  'glyphXs',
+  'glyphSm',
+  'glyphMd',
+  'iconSm',
+  'iconMd',
+  'iconLg',
+  'iconXl',
+  'iconXxl',
+  'navMarkerW',
+  'navMarkerH',
+  'divider',
+  'tabIndicator',
+  'edgeFade',
+  'scrollbar',
+  'swatchW',
+  'swatchH',
+  'labelMinW',
+  'popupMinW',
+  'listMaxH',
+  'listMaxHSm',
+  'dialogSm',
+  'dialogMd',
+  'dialogLg',
+  'panelSm',
+  'panelMd',
+  'panelLg',
+  'toastMaxW',
+  'gridColSm',
+  'gridColMd',
+  'pageSm',
+  'pageMd',
+  'pageLg',
+] as const
+export type SizeToken = (typeof SIZE_KEYS)[number]
+
+// Mirrors tokens/sizes.css.ts `sizes` (px).
+export const SIZES_PX = {
+  touchTarget: 44,
+  controlSm: 28,
+  controlMd: 39,
+  controlLg: 40,
+  indicator: 18,
+  indicatorDot: 8,
+  checkMarkW: 5,
+  checkMarkH: 9,
+  switchTrackW: 36,
+  switchTrackH: 20,
+  switchThumb: 16,
+  iconButton: 32,
+  iconButtonSm: 28,
+  spinnerSm: 16,
+  spinnerMd: 24,
+  spinnerLg: 40,
+  glyphXs: 10,
+  glyphSm: 12,
+  glyphMd: 16,
+  iconSm: 16,
+  iconMd: 18,
+  iconLg: 24,
+  iconXl: 36,
+  iconXxl: 48,
+  navMarkerW: 3,
+  navMarkerH: 18,
+  divider: 1,
+  tabIndicator: 2,
+  edgeFade: 32,
+  scrollbar: 8,
+  swatchW: 44,
+  swatchH: 34,
+  labelMinW: 120,
+  popupMinW: 160,
+  listMaxH: 280,
+  listMaxHSm: 200,
+  dialogSm: 400,
+  dialogMd: 520,
+  dialogLg: 680,
+  panelSm: 360,
+  panelMd: 480,
+  panelLg: 640,
+  toastMaxW: 440,
+  gridColSm: 240,
+  gridColMd: 280,
+  pageSm: 600,
+  pageMd: 800,
+  pageLg: 1200,
+} as const
+
+export const BORDER_KEYS = [
+  'hairline',
+  'strong',
+  'accent',
+  'focusRing',
+  'focusOffset',
+  'focusOffsetSm',
+] as const
+export type BorderToken = (typeof BORDER_KEYS)[number]
+
+// Mirrors tokens/borders.css.ts `borders` (px).
+export const BORDERS_PX = {
+  hairline: 1,
+  strong: 2,
+  accent: 3,
+  focusRing: 2,
+  focusOffset: 2,
+  focusOffsetSm: 1,
+} as const
+
+// Icon rendering sizes (SVG width/height, px). Not its own css.defineVars
+// scale — icons size via attributes — so it is derived from the `sizes` group
+// (iconSm…iconXxl), keeping one source.
 export const ICON_SIZES = {
-  sm: 16,
-  md: 18,
-  lg: 24,
-  xl: 36,
-  xxl: 48,
+  sm: SIZES_PX.iconSm,
+  md: SIZES_PX.iconMd,
+  lg: SIZES_PX.iconLg,
+  xl: SIZES_PX.iconXl,
+  xxl: SIZES_PX.iconXxl,
 } as const
 export type IconSize = keyof typeof ICON_SIZES
 
@@ -119,6 +259,7 @@ export const SHADOWS = {
 // Mirrors tokens/motion.css.ts `easing` verbatim.
 export const EASINGS = {
   standard: 'ease',
+  linear: 'linear',
   easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',
   easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',
 } as const

package/src/raw.ts

@@ -37,8 +37,110 @@ export type RawColors = {
   infoBg: string
   infoBorder: string
   infoText: string
+  scrim: string
+  inverseFill: string
+  inverseFillHover: string
+  inverseBorder: string
+  inverseBorderHover: string
+  fixedLight: string
 }
 
+// Numeric maps for consumers that load only the compiled `/raw` entry (e.g.
+// ui-email, which cannot read CSS variables or the TypeScript `/keys` source).
+// Copies of the keys.ts maps; check-token-drift.mjs fails if they diverge.
+export const SPACING_PX = {
+  xs: 4,
+  sm: 8,
+  ms: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  xxxl: 64,
+} as const
+
+export const RADII_PX = {
+  xs: 4,
+  px6: 6,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  full: 9999,
+} as const
+
+export const FONT_SIZE_REM = {
+  fontSizeXs: 0.75,
+  fontSizeSm: 0.875,
+  fontSizeMd: 1,
+  fontSizeLg: 1.125,
+  fontSizeXl: 1.25,
+  fontSizeHeading: 1.5,
+} as const
+
+export const BORDERS_PX = {
+  hairline: 1,
+  strong: 2,
+  accent: 3,
+  focusRing: 2,
+  focusOffset: 2,
+  focusOffsetSm: 1,
+} as const
+
+export const SIZES_PX = {
+  touchTarget: 44,
+  controlSm: 28,
+  controlMd: 39,
+  controlLg: 40,
+  indicator: 18,
+  indicatorDot: 8,
+  checkMarkW: 5,
+  checkMarkH: 9,
+  switchTrackW: 36,
+  switchTrackH: 20,
+  switchThumb: 16,
+  iconButton: 32,
+  iconButtonSm: 28,
+  spinnerSm: 16,
+  spinnerMd: 24,
+  spinnerLg: 40,
+  glyphXs: 10,
+  glyphSm: 12,
+  glyphMd: 16,
+  iconSm: 16,
+  iconMd: 18,
+  iconLg: 24,
+  iconXl: 36,
+  iconXxl: 48,
+  navMarkerW: 3,
+  navMarkerH: 18,
+  divider: 1,
+  tabIndicator: 2,
+  edgeFade: 32,
+  scrollbar: 8,
+  swatchW: 44,
+  swatchH: 34,
+  labelMinW: 120,
+  popupMinW: 160,
+  listMaxH: 280,
+  listMaxHSm: 200,
+  dialogSm: 400,
+  dialogMd: 520,
+  dialogLg: 680,
+  panelSm: 360,
+  panelMd: 480,
+  panelLg: 640,
+  toastMaxW: 440,
+  gridColSm: 240,
+  gridColMd: 280,
+  pageSm: 600,
+  pageMd: 800,
+  pageLg: 1200,
+} as const
+
+// Email-only measures: no CSS variable (mail clients cannot read them) and not
+// a lint candidate, so it is deliberately absent from keys.ts.
+export const EMAIL_PX = {emailCardW: 520, trackingPixel: 1} as const
+
 // Dark theme — matches the defaults in `tokens/colors.css.ts`.
 export const darkColors: RawColors = {
   bg: '#0f0f0f',
@@ -68,6 +170,12 @@ export const darkColors: RawColors = {
   infoBg: 'rgba(106, 175, 252, 0.1)',
   infoBorder: 'rgba(106, 175, 252, 0.3)',
   infoText: '#93c5fd',
+  scrim: 'rgba(0, 0, 0, 0.4)',
+  inverseFill: 'rgba(0, 0, 0, 0.10)',
+  inverseFillHover: 'rgba(0, 0, 0, 0.18)',
+  inverseBorder: 'rgba(0, 0, 0, 0.55)',
+  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
+  fixedLight: '#ffffff',
 }
 
 // Light theme — matches the overrides in `themes/light.css.ts`.
@@ -99,6 +207,12 @@ export const lightColors: RawColors = {
   infoBg: 'rgba(30, 64, 175, 0.08)',
   infoBorder: 'rgba(30, 64, 175, 0.3)',
   infoText: '#1e40af',
+  scrim: 'rgba(0, 0, 0, 0.4)',
+  inverseFill: 'rgba(0, 0, 0, 0.10)',
+  inverseFillHover: 'rgba(0, 0, 0, 0.18)',
+  inverseBorder: 'rgba(0, 0, 0, 0.55)',
+  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
+  fixedLight: '#ffffff',
 }
 
 // High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.
@@ -130,4 +244,10 @@ export const highContrastColors: RawColors = {
   infoBg: 'rgba(96, 165, 250, 0.15)',
   infoBorder: 'rgba(96, 165, 250, 0.5)',
   infoText: '#bfdbfe',
+  scrim: 'rgba(0, 0, 0, 0.4)',
+  inverseFill: 'rgba(0, 0, 0, 0.10)',
+  inverseFillHover: 'rgba(0, 0, 0, 0.18)',
+  inverseBorder: 'rgba(0, 0, 0, 0.55)',
+  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
+  fixedLight: '#ffffff',
 }

package/src/themes/high-contrast.css.ts

@@ -30,6 +30,15 @@ export const highContrastTheme = css.createTheme(colors, {
   infoBg: 'rgba(96, 165, 250, 0.15)',
   infoBorder: 'rgba(96, 165, 250, 0.5)',
   infoText: '#bfdbfe',
+  // Fixed overlays — the same in every theme (a scrim darkens whatever is
+  // under it; the inverse overlays sit on an accent surface).
+  scrim: 'rgba(0, 0, 0, 0.4)',
+  inverseFill: 'rgba(0, 0, 0, 0.10)',
+  inverseFillHover: 'rgba(0, 0, 0, 0.18)',
+  inverseBorder: 'rgba(0, 0, 0, 0.55)',
+  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
+  // A light that does not follow the theme (the Switch knob).
+  fixedLight: '#ffffff',
 })
 
 export const highContrastShadows = css.createTheme(shadows, {

package/src/themes/light.css.ts

@@ -30,6 +30,15 @@ export const lightTheme = css.createTheme(colors, {
   infoBg: 'rgba(30, 64, 175, 0.08)',
   infoBorder: 'rgba(30, 64, 175, 0.3)',
   infoText: '#1e40af',
+  // Fixed overlays — the same in every theme (a scrim darkens whatever is
+  // under it; the inverse overlays sit on an accent surface).
+  scrim: 'rgba(0, 0, 0, 0.4)',
+  inverseFill: 'rgba(0, 0, 0, 0.10)',
+  inverseFillHover: 'rgba(0, 0, 0, 0.18)',
+  inverseBorder: 'rgba(0, 0, 0, 0.55)',
+  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
+  // A light that does not follow the theme (the Switch knob).
+  fixedLight: '#ffffff',
 })
 
 export const lightShadows = css.createTheme(shadows, {

package/src/tokens/borders.css.ts

@@ -0,0 +1,10 @@
+import {css} from 'react-strict-dom'
+
+export const borders = css.defineVars({
+  hairline: '1px',
+  strong: '2px',
+  accent: '3px',
+  focusRing: '2px',
+  focusOffset: '2px',
+  focusOffsetSm: '1px',
+})

package/src/tokens/colors.css.ts

@@ -43,4 +43,14 @@ export const colors = css.defineVars({
   infoBg: 'rgba(106, 175, 252, 0.1)',
   infoBorder: 'rgba(106, 175, 252, 0.3)',
   infoText: '#93c5fd',
+
+  // Fixed overlays — the same in every theme (a scrim darkens whatever is
+  // under it; the inverse overlays sit on an accent surface).
+  scrim: 'rgba(0, 0, 0, 0.4)',
+  inverseFill: 'rgba(0, 0, 0, 0.10)',
+  inverseFillHover: 'rgba(0, 0, 0, 0.18)',
+  inverseBorder: 'rgba(0, 0, 0, 0.55)',
+  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
+  // A light that does not follow the theme (the Switch knob).
+  fixedLight: '#ffffff',
 })

package/src/tokens/motion.css.ts

@@ -7,8 +7,12 @@ import {css} from 'react-strict-dom'
  * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other
  *   spots), 200ms the common overlay enter (Drawer), 280ms the larger panel
  *   enter (DetailPanel). `instant` is for explicit no-motion.
+ *   `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the
+ *   two other values components used; `minimal` is the 1ms reduced-motion
+ *   duration that still fires animationend.
  * - easings: `standard` is the default `ease` used throughout; `easeOut` /
  *   `easeIn` are the "Apple ease" curves already defined for DetailPanel.
+ *   `linear` is the Spinner's constant rotation.
  *
  * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`
  * rule in the reset neutralizes timing) plus per-component transform guards, so
@@ -16,13 +20,18 @@ import {css} from 'react-strict-dom'
  */
 export const duration = css.defineVars({
   instant: '0ms',
+  // Non-zero so animationend still fires under reduced motion.
+  minimal: '1ms',
+  quick: '120ms',
   fast: '150ms',
+  brisk: '160ms',
   base: '200ms',
   slow: '280ms',
 })
 
 export const easing = css.defineVars({
   standard: 'ease',
+  linear: 'linear',
   easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',
   easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',
 })

package/src/tokens/sizes.css.ts

@@ -0,0 +1,52 @@
+import {css} from 'react-strict-dom'
+
+export const sizes = css.defineVars({
+  touchTarget: '44px',
+  controlSm: '28px',
+  controlMd: '39px',
+  controlLg: '40px',
+  indicator: '18px',
+  indicatorDot: '8px',
+  checkMarkW: '5px',
+  checkMarkH: '9px',
+  switchTrackW: '36px',
+  switchTrackH: '20px',
+  switchThumb: '16px',
+  iconButton: '32px',
+  iconButtonSm: '28px',
+  spinnerSm: '16px',
+  spinnerMd: '24px',
+  spinnerLg: '40px',
+  glyphXs: '10px',
+  glyphSm: '12px',
+  glyphMd: '16px',
+  iconSm: '16px',
+  iconMd: '18px',
+  iconLg: '24px',
+  iconXl: '36px',
+  iconXxl: '48px',
+  navMarkerW: '3px',
+  navMarkerH: '18px',
+  divider: '1px',
+  tabIndicator: '2px',
+  edgeFade: '32px',
+  scrollbar: '8px',
+  swatchW: '44px',
+  swatchH: '34px',
+  labelMinW: '120px',
+  popupMinW: '160px',
+  listMaxH: '280px',
+  listMaxHSm: '200px',
+  dialogSm: '400px',
+  dialogMd: '520px',
+  dialogLg: '680px',
+  panelSm: '360px',
+  panelMd: '480px',
+  panelLg: '640px',
+  toastMaxW: '440px',
+  gridColSm: '240px',
+  gridColMd: '280px',
+  pageSm: '600px',
+  pageMd: '800px',
+  pageLg: '1200px',
+})

package/src/tokens/spacing.css.ts

@@ -11,8 +11,20 @@ export const spacing = css.defineVars({
   xxxl: '64px',
 })
 
+// Optical micro-steps below and between the spacing scale: a 1-6px nudge that
+// aligns a glyph or tightens a dense control. Not a layout choice, so not part
+// of SpacingToken (no `gap="px2"`); prefer the scale.
+export const microSpacing = css.defineVars({
+  px1: '1px',
+  px2: '2px',
+  px3: '3px',
+  px5: '5px',
+  px6: '6px',
+})
+
 export const radii = css.defineVars({
   xs: '4px',
+  px6: '6px',
   sm: '8px',
   md: '12px',
   lg: '16px',