@duro-app/tokens 4.5.0 → 5.1.0

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { breakpoints, breakpointsPx, type Breakpoint } from './tokens/breakpoints.css';
 export { colors } from './tokens/colors.css';
-export { spacing, radii } from './tokens/spacing.css';
+export { spacing, microSpacing, radii } from './tokens/spacing.css';
+export { sizes } from './tokens/sizes.css';
+export { borders } from './tokens/borders.css';
 export { layoutSpacing } from './tokens/layout-spacing.css';
 export { typography, typeScale } from './tokens/typography.css';
 export { typePresets } from './tokens/type-presets.css';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,OAAO,EAAE,KAAK,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAC7D,OAAO,EAAC,WAAW,EAAC,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAGpD,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAC,MAAM,sBAAsB,CAAA;AACjE,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAA;AACxC,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAC,UAAU,EAAE,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAC7D,OAAO,EAAC,WAAW,EAAC,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAGpD,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAC3D,OAAO,EAAC,iBAAiB,EAAE,mBAAmB,EAAC,MAAM,4BAA4B,CAAA"}

package/dist/index.js

@@ -10,7 +10,7 @@ const e = {
   md: 768,
   lg: 1024,
   xl: 1280
-}, n = {
+}, r = {
   bg: "var(--bg-xqkwqtp)",
   bgCard: "var(--bgCard-xj2l5r)",
   bgCardHover: "var(--bgCardHover-xlxk7vw)",
@@ -38,8 +38,14 @@ const e = {
   infoBg: "var(--infoBg-xho8jir)",
   infoBorder: "var(--infoBorder-xnevk3x)",
   infoText: "var(--infoText-x19pseus)",
+  scrim: "var(--scrim-x2ypej7)",
+  inverseFill: "var(--inverseFill-x1il694p)",
+  inverseFillHover: "var(--inverseFillHover-xmxqxj9)",
+  inverseBorder: "var(--inverseBorder-x1x0j0at)",
+  inverseBorderHover: "var(--inverseBorderHover-x12x46ev)",
+  fixedLight: "var(--fixedLight-xd608fw)",
   __varGroupHash__: "xjvd03b"
-}, i = {
+}, n = {
   xs: "var(--xs-xxfyjsd)",
   sm: "var(--sm-xbh8y7f)",
   ms: "var(--ms-x13y09zs)",
@@ -49,14 +55,80 @@ const e = {
   xxl: "var(--xxl-xbe9eha)",
   xxxl: "var(--xxxl-xroalp5)",
   __varGroupHash__: "x6uc9q"
+}, i = {
+  px1: "var(--px1-xt32so4)",
+  px2: "var(--px2-x127ks2i)",
+  px3: "var(--px3-xzcc43o)",
+  px5: "var(--px5-xrmlnev)",
+  px6: "var(--px6-x1h3gnvl)",
+  __varGroupHash__: "xufyenp"
 }, a = {
   xs: "var(--xs-x1gb5bcy)",
+  px6: "var(--px6-xgv4348)",
   sm: "var(--sm-x1bhtfs5)",
   md: "var(--md-xx2g89g)",
   lg: "var(--lg-xwd56yl)",
   full: "var(--full-x9vxdtd)",
   __varGroupHash__: "xw3ffwm"
-}, r = {
+}, o = {
+  touchTarget: "var(--touchTarget-x1u5badx)",
+  controlSm: "var(--controlSm-x6ymn93)",
+  controlMd: "var(--controlMd-xkvaeme)",
+  controlLg: "var(--controlLg-xf3drh3)",
+  indicator: "var(--indicator-xce456j)",
+  indicatorDot: "var(--indicatorDot-xqflvbi)",
+  checkMarkW: "var(--checkMarkW-xvyirw7)",
+  checkMarkH: "var(--checkMarkH-xz3lx6u)",
+  switchTrackW: "var(--switchTrackW-xcah3tt)",
+  switchTrackH: "var(--switchTrackH-x1h3icne)",
+  switchThumb: "var(--switchThumb-x6qupft)",
+  iconButton: "var(--iconButton-x16lr7a8)",
+  iconButtonSm: "var(--iconButtonSm-xtjgrhy)",
+  spinnerSm: "var(--spinnerSm-xoj3xel)",
+  spinnerMd: "var(--spinnerMd-x11a4rba)",
+  spinnerLg: "var(--spinnerLg-x1lgp9p9)",
+  glyphXs: "var(--glyphXs-x7xktls)",
+  glyphSm: "var(--glyphSm-x17geiot)",
+  glyphMd: "var(--glyphMd-x1hz0jso)",
+  iconSm: "var(--iconSm-x1k4bwrj)",
+  iconMd: "var(--iconMd-x1oru5hg)",
+  iconLg: "var(--iconLg-x1lsumnr)",
+  iconXl: "var(--iconXl-x7w40q9)",
+  iconXxl: "var(--iconXxl-xij55jf)",
+  navMarkerW: "var(--navMarkerW-x1swbkx4)",
+  navMarkerH: "var(--navMarkerH-xlc6r7a)",
+  divider: "var(--divider-x34oj7m)",
+  tabIndicator: "var(--tabIndicator-xeswvk3)",
+  edgeFade: "var(--edgeFade-x1a8srg4)",
+  scrollbar: "var(--scrollbar-xppi9bb)",
+  swatchW: "var(--swatchW-x14v7170)",
+  swatchH: "var(--swatchH-x5k3223)",
+  labelMinW: "var(--labelMinW-x1tnvsg3)",
+  popupMinW: "var(--popupMinW-xzyp04)",
+  listMaxH: "var(--listMaxH-x1g3bmh3)",
+  listMaxHSm: "var(--listMaxHSm-xhny4oa)",
+  dialogSm: "var(--dialogSm-x16fibl1)",
+  dialogMd: "var(--dialogMd-x1yjoj5l)",
+  dialogLg: "var(--dialogLg-xsd9wl3)",
+  panelSm: "var(--panelSm-x1ng1dcv)",
+  panelMd: "var(--panelMd-x11x23mn)",
+  panelLg: "var(--panelLg-x19cpfjm)",
+  toastMaxW: "var(--toastMaxW-x1po6n0z)",
+  gridColSm: "var(--gridColSm-xzwpy92)",
+  gridColMd: "var(--gridColMd-x1cjqdt9)",
+  pageSm: "var(--pageSm-x5j4ghi)",
+  pageMd: "var(--pageMd-xloo57l)",
+  pageLg: "var(--pageLg-x393fnm)",
+  __varGroupHash__: "x1w57kmz"
+}, x = {
+  hairline: "var(--hairline-xomm6fc)",
+  strong: "var(--strong-x1otbxzr)",
+  accent: "var(--accent-x1eiysj0)",
+  focusRing: "var(--focusRing-x851k0b)",
+  focusOffset: "var(--focusOffset-xvo0vkt)",
+  focusOffsetSm: "var(--focusOffsetSm-x1xhasg3)",
+  __varGroupHash__: "xqyt3or"
+}, s = {
   stackXs: "var(--stackXs-x1qfrfo2)",
   stackSm: "var(--stackSm-x2rk1ut)",
   stackMd: "var(--stackMd-xhblkt4)",
@@ -70,7 +142,7 @@ const e = {
   containerMd: "var(--containerMd-x170dvin)",
   containerLg: "var(--containerLg-x1n6aasq)",
   __varGroupHash__: "x16nfoyr"
-}, s = {
+}, l = {
   fontFamily: "var(--fontFamily-xvrmnat)",
   fontFamilyMono: "var(--fontFamilyMono-x1bzqfky)",
   fontSizeXs: "var(--fontSizeXs-x1w5m325)",
@@ -85,7 +157,7 @@ const e = {
   fontWeightBold: "var(--fontWeightBold-x1pjkvwg)",
   lineHeight: "var(--lineHeight-x1gubzd5)",
   __varGroupHash__: "xs62swl"
-}, o = {
+}, v = {
   fontSize1: "var(--fontSize1-xx27tux)",
   fontSize2: "var(--fontSize2-x5hag8h)",
   fontSize3: "var(--fontSize3-x1mf6j39)",
@@ -111,7 +183,7 @@ const e = {
   letterSpacingNormal: "var(--letterSpacingNormal-x1ih41v1)",
   letterSpacingWide: "var(--letterSpacingWide-xt8z9rj)",
   __varGroupHash__: "x4cj49w"
-}, x = {
+}, g = {
   bodySm: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
     "fontSize-kGuDYH": "fontSize-x1hn3ytp",
@@ -225,51 +297,58 @@ const e = {
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
     $$css: "tokens/type-presets.css.ts:104"
   }
-}, l = {
+}, c = {
   sm: "var(--sm-x17hhtln)",
   md: "var(--md-x1oyt0aw)",
   lg: "var(--lg-x1mxd62i)",
   __varGroupHash__: "x13v825q"
-}, g = {
+}, p = {
   instant: "var(--instant-x3tclo2)",
+  minimal: "var(--minimal-x39oeki)",
+  quick: "var(--quick-xmb6uht)",
   fast: "var(--fast-x8gs7zb)",
+  brisk: "var(--brisk-xsyifss)",
   base: "var(--base-x13vs74m)",
   slow: "var(--slow-xtti36c)",
   __varGroupHash__: "x8wiu4o"
-}, c = {
+}, f = {
   standard: "var(--standard-xg4ngex)",
+  linear: "var(--linear-x13iskbu)",
   easeOut: "var(--easeOut-x1dtgzac)",
   easeIn: "var(--easeIn-xxaysck)",
   __varGroupHash__: "x1unb8zz"
-}, v = {
-  xjvd03b: "xrtwk39 xjvd03b",
+}, h = {
+  xjvd03b: "x199coxg xjvd03b",
   $$css: !0
-}, f = {
+}, k = {
   x13v825q: "xv9ibj0 x13v825q",
   $$css: !0
-}, h = {
-  xjvd03b: "xaveibd xjvd03b",
+}, S = {
+  xjvd03b: "x1hq5bef xjvd03b",
   $$css: !0
-}, p = {
+}, d = {
   x13v825q: "x15e39jv x13v825q",
   $$css: !0
 };
 export {
+  x as borders,
   e as breakpoints,
   t as breakpointsPx,
-  n as colors,
-  g as duration,
-  c as easing,
-  p as highContrastShadows,
-  h as highContrastTheme,
-  r as layoutSpacing,
-  f as lightShadows,
-  v as lightTheme,
+  r as colors,
+  p as duration,
+  f as easing,
+  d as highContrastShadows,
+  S as highContrastTheme,
+  s as layoutSpacing,
+  k as lightShadows,
+  h as lightTheme,
+  i as microSpacing,
   a as radii,
-  l as shadows,
-  i as spacing,
-  x as typePresets,
-  o as typeScale,
-  s as typography
+  c as shadows,
+  o as sizes,
+  n as spacing,
+  g as typePresets,
+  v as typeScale,
+  l as typography
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n  /** Phones — dense tables card up below here. */\n  xs: '480px',\n  /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n  sm: '640px',\n  /** Tablet portrait. */\n  md: '768px',\n  /** Tablet landscape / small laptop. */\n  lg: '1024px',\n  /** Desktop. */\n  xl: '1280px',\n})\n\nexport const breakpointsPx = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n})\n\nexport const radii = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n  // Vertical rhythm (stack gaps)\n  stackXs: '4px',\n  stackSm: '8px',\n  stackMd: '16px',\n  stackLg: '24px',\n  stackXl: '48px',\n\n  // Horizontal rhythm (inline gaps)\n  inlineXs: '4px',\n  inlineSm: '8px',\n  inlineMd: '16px',\n  inlineLg: '24px',\n\n  // Container insets\n  containerSm: '16px',\n  containerMd: '24px',\n  containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.125rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n  // 9-step font size scale\n  fontSize1: '0.75rem', // 12px — captions, badges\n  fontSize2: '0.8125rem', // 13px — small UI\n  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n  fontSize4: '1rem', // 16px — body text\n  fontSize5: '1.125rem', // 18px — body-lg\n  fontSize6: '1.25rem', // 20px — subheading\n  fontSize7: '1.5rem', // 24px — heading-sm\n  fontSize8: '1.875rem', // 30px — heading-md\n  fontSize9: '2.25rem', // 36px — heading-lg\n\n  // Matched line-heights\n  lineHeight1: '1rem', // 16px\n  lineHeight2: '1.25rem', // 20px\n  lineHeight3: '1.25rem', // 20px\n  lineHeight4: '1.5rem', // 24px\n  lineHeight5: '1.5rem', // 24px\n  lineHeight6: '1.75rem', // 28px\n  lineHeight7: '2rem', // 32px\n  lineHeight8: '2.25rem', // 36px\n  lineHeight9: '2.75rem', // 44px\n\n  // Fluid display sizes\n  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n  // Letter-spacing\n  letterSpacingTight: '-0.02em',\n  letterSpacingNormal: '0',\n  letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n  // Body\n  bodySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize5,\n    lineHeight: typeScale.lineHeight5,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n\n  // UI\n  caption: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingWide,\n  },\n  label: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightMedium,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  code: {\n    fontFamily: typography.fontFamilyMono,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  overline: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n\n  // Heading\n  headingSm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize6,\n    lineHeight: typeScale.lineHeight6,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize7,\n    lineHeight: typeScale.lineHeight7,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize8,\n    lineHeight: typeScale.lineHeight8,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingXl: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize9,\n    lineHeight: typeScale.lineHeight9,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n\n  // Display (fluid)\n  displaySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displaySm,\n    lineHeight: 1.2,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayMd,\n    lineHeight: 1.15,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayLg,\n    lineHeight: 1.1,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n *   spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n *   enter (DetailPanel). `instant` is for explicit no-motion.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n *   `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n  instant: '0ms',\n  fast: '150ms',\n  base: '200ms',\n  slow: '280ms',\n})\n\nexport const easing = css.defineVars({\n  standard: 'ease',\n  easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n  easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","radii","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/sizes.css.ts","../src/tokens/borders.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n  /** Phones — dense tables card up below here. */\n  xs: '480px',\n  /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n  sm: '640px',\n  /** Tablet portrait. */\n  md: '768px',\n  /** Tablet landscape / small laptop. */\n  lg: '1024px',\n  /** Desktop. */\n  xl: '1280px',\n})\n\nexport const breakpointsPx = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n  px1: '1px',\n  px2: '2px',\n  px3: '3px',\n  px5: '5px',\n  px6: '6px',\n})\n\nexport const radii = css.defineVars({\n  xs: '4px',\n  px6: '6px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n  touchTarget: '44px',\n  controlSm: '28px',\n  controlMd: '39px',\n  controlLg: '40px',\n  indicator: '18px',\n  indicatorDot: '8px',\n  checkMarkW: '5px',\n  checkMarkH: '9px',\n  switchTrackW: '36px',\n  switchTrackH: '20px',\n  switchThumb: '16px',\n  iconButton: '32px',\n  iconButtonSm: '28px',\n  spinnerSm: '16px',\n  spinnerMd: '24px',\n  spinnerLg: '40px',\n  glyphXs: '10px',\n  glyphSm: '12px',\n  glyphMd: '16px',\n  iconSm: '16px',\n  iconMd: '18px',\n  iconLg: '24px',\n  iconXl: '36px',\n  iconXxl: '48px',\n  navMarkerW: '3px',\n  navMarkerH: '18px',\n  divider: '1px',\n  tabIndicator: '2px',\n  edgeFade: '32px',\n  scrollbar: '8px',\n  swatchW: '44px',\n  swatchH: '34px',\n  labelMinW: '120px',\n  popupMinW: '160px',\n  listMaxH: '280px',\n  listMaxHSm: '200px',\n  dialogSm: '400px',\n  dialogMd: '520px',\n  dialogLg: '680px',\n  panelSm: '360px',\n  panelMd: '480px',\n  panelLg: '640px',\n  toastMaxW: '440px',\n  gridColSm: '240px',\n  gridColMd: '280px',\n  pageSm: '600px',\n  pageMd: '800px',\n  pageLg: '1200px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const borders = css.defineVars({\n  hairline: '1px',\n  strong: '2px',\n  accent: '3px',\n  focusRing: '2px',\n  focusOffset: '2px',\n  focusOffsetSm: '1px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n  // Vertical rhythm (stack gaps)\n  stackXs: '4px',\n  stackSm: '8px',\n  stackMd: '16px',\n  stackLg: '24px',\n  stackXl: '48px',\n\n  // Horizontal rhythm (inline gaps)\n  inlineXs: '4px',\n  inlineSm: '8px',\n  inlineMd: '16px',\n  inlineLg: '24px',\n\n  // Container insets\n  containerSm: '16px',\n  containerMd: '24px',\n  containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.125rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n  // 9-step font size scale\n  fontSize1: '0.75rem', // 12px — captions, badges\n  fontSize2: '0.8125rem', // 13px — small UI\n  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n  fontSize4: '1rem', // 16px — body text\n  fontSize5: '1.125rem', // 18px — body-lg\n  fontSize6: '1.25rem', // 20px — subheading\n  fontSize7: '1.5rem', // 24px — heading-sm\n  fontSize8: '1.875rem', // 30px — heading-md\n  fontSize9: '2.25rem', // 36px — heading-lg\n\n  // Matched line-heights\n  lineHeight1: '1rem', // 16px\n  lineHeight2: '1.25rem', // 20px\n  lineHeight3: '1.25rem', // 20px\n  lineHeight4: '1.5rem', // 24px\n  lineHeight5: '1.5rem', // 24px\n  lineHeight6: '1.75rem', // 28px\n  lineHeight7: '2rem', // 32px\n  lineHeight8: '2.25rem', // 36px\n  lineHeight9: '2.75rem', // 44px\n\n  // Fluid display sizes\n  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n  // Letter-spacing\n  letterSpacingTight: '-0.02em',\n  letterSpacingNormal: '0',\n  letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n  // Body\n  bodySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize5,\n    lineHeight: typeScale.lineHeight5,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n\n  // UI\n  caption: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingWide,\n  },\n  label: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightMedium,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  code: {\n    fontFamily: typography.fontFamilyMono,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  overline: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n\n  // Heading\n  headingSm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize6,\n    lineHeight: typeScale.lineHeight6,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize7,\n    lineHeight: typeScale.lineHeight7,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize8,\n    lineHeight: typeScale.lineHeight8,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingXl: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize9,\n    lineHeight: typeScale.lineHeight9,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n\n  // Display (fluid)\n  displaySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displaySm,\n    lineHeight: 1.2,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayMd,\n    lineHeight: 1.15,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayLg,\n    lineHeight: 1.1,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n *   spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n *   enter (DetailPanel). `instant` is for explicit no-motion.\n *   `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the\n *   two other values components used; `minimal` is the 1ms reduced-motion\n *   duration that still fires animationend.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n *   `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n *   `linear` is the Spinner's constant rotation.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n  instant: '0ms',\n  // Non-zero so animationend still fires under reduced motion.\n  minimal: '1ms',\n  quick: '120ms',\n  fast: '150ms',\n  brisk: '160ms',\n  base: '200ms',\n  slow: '280ms',\n})\n\nexport const easing = css.defineVars({\n  standard: 'ease',\n  linear: 'linear',\n  easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n  easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","microSpacing","radii","sizes","borders","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}

package/dist/keys.d.ts

@@ -11,10 +11,20 @@ export declare const SPACING_PX: {
     readonly xxl: 48;
     readonly xxxl: 64;
 };
-export declare const RADIUS_KEYS: readonly ["xs", "sm", "md", "lg", "full"];
+export declare const MICRO_SPACING_KEYS: readonly ["px1", "px2", "px3", "px5", "px6"];
+export type MicroSpacingToken = (typeof MICRO_SPACING_KEYS)[number];
+export declare const MICRO_SPACING_PX: {
+    readonly px1: 1;
+    readonly px2: 2;
+    readonly px3: 3;
+    readonly px5: 5;
+    readonly px6: 6;
+};
+export declare const RADIUS_KEYS: readonly ["xs", "px6", "sm", "md", "lg", "full"];
 export type RadiusToken = (typeof RADIUS_KEYS)[number];
 export declare const RADII_PX: {
     readonly xs: 4;
+    readonly px6: 6;
     readonly sm: 8;
     readonly md: 12;
     readonly lg: 16;
@@ -24,11 +34,76 @@ export declare const SHADOW_KEYS: readonly ["sm", "md", "lg"];
 export type ShadowToken = (typeof SHADOW_KEYS)[number];
 export declare const DURATION_MS: {
     readonly instant: 0;
+    readonly minimal: 1;
+    readonly quick: 120;
     readonly fast: 150;
+    readonly brisk: 160;
     readonly base: 200;
     readonly slow: 280;
 };
 export type DurationToken = keyof typeof DURATION_MS;
+export declare const SIZE_KEYS: readonly ["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"];
+export type SizeToken = (typeof SIZE_KEYS)[number];
+export declare const SIZES_PX: {
+    readonly touchTarget: 44;
+    readonly controlSm: 28;
+    readonly controlMd: 39;
+    readonly controlLg: 40;
+    readonly indicator: 18;
+    readonly indicatorDot: 8;
+    readonly checkMarkW: 5;
+    readonly checkMarkH: 9;
+    readonly switchTrackW: 36;
+    readonly switchTrackH: 20;
+    readonly switchThumb: 16;
+    readonly iconButton: 32;
+    readonly iconButtonSm: 28;
+    readonly spinnerSm: 16;
+    readonly spinnerMd: 24;
+    readonly spinnerLg: 40;
+    readonly glyphXs: 10;
+    readonly glyphSm: 12;
+    readonly glyphMd: 16;
+    readonly iconSm: 16;
+    readonly iconMd: 18;
+    readonly iconLg: 24;
+    readonly iconXl: 36;
+    readonly iconXxl: 48;
+    readonly navMarkerW: 3;
+    readonly navMarkerH: 18;
+    readonly divider: 1;
+    readonly tabIndicator: 2;
+    readonly edgeFade: 32;
+    readonly scrollbar: 8;
+    readonly swatchW: 44;
+    readonly swatchH: 34;
+    readonly labelMinW: 120;
+    readonly popupMinW: 160;
+    readonly listMaxH: 280;
+    readonly listMaxHSm: 200;
+    readonly dialogSm: 400;
+    readonly dialogMd: 520;
+    readonly dialogLg: 680;
+    readonly panelSm: 360;
+    readonly panelMd: 480;
+    readonly panelLg: 640;
+    readonly toastMaxW: 440;
+    readonly gridColSm: 240;
+    readonly gridColMd: 280;
+    readonly pageSm: 600;
+    readonly pageMd: 800;
+    readonly pageLg: 1200;
+};
+export declare const BORDER_KEYS: readonly ["hairline", "strong", "accent", "focusRing", "focusOffset", "focusOffsetSm"];
+export type BorderToken = (typeof BORDER_KEYS)[number];
+export declare const BORDERS_PX: {
+    readonly hairline: 1;
+    readonly strong: 2;
+    readonly accent: 3;
+    readonly focusRing: 2;
+    readonly focusOffset: 2;
+    readonly focusOffsetSm: 1;
+};
 export declare const ICON_SIZES: {
     readonly sm: 16;
     readonly md: 18;
@@ -77,6 +152,7 @@ export declare const SHADOWS: {
 };
 export declare const EASINGS: {
     readonly standard: "ease";
+    readonly linear: "linear";
     readonly easeOut: "cubic-bezier(0.32, 0.72, 0, 1)";
     readonly easeIn: "cubic-bezier(0.72, 0, 0.68, 0.28)";
 };

package/dist/keys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,eAAO,MAAM,WAAW,2CAA4C,CAAA;AACpE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAA;AAEV,eAAO,MAAM,WAAW,6BAA8B,CAAA;AACtD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;CAKd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAIpD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;CAIV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;CAIV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,6BAA8B,CAAA;AACtD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAEpD,eAAO,MAAM,SAAS,smBAiDZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDX,CAAA;AAEV,eAAO,MAAM,WAAW,wFAOd,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAKV,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;CAIV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}

package/dist/mockup.css

@@ -25,10 +25,16 @@
   --duro-color-error-contrast: #000000;
   --duro-color-error-hover: #fca5a5;
   --duro-color-error-text: #fca5a5;
+  --duro-color-fixed-light: #ffffff;
   --duro-color-info: #6aaffc;
   --duro-color-info-bg: rgba(106, 175, 252, 0.1);
   --duro-color-info-border: rgba(106, 175, 252, 0.3);
   --duro-color-info-text: #93c5fd;
+  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);
+  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
+  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
+  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
+  --duro-color-scrim: rgba(0, 0, 0, 0.4);
   --duro-color-success: #22c55e;
   --duro-color-success-bg: rgba(34, 197, 94, 0.1);
   --duro-color-success-border: rgba(34, 197, 94, 0.3);
@@ -52,12 +58,75 @@
   --duro-spacing-xs: 4px;
   --duro-spacing-xxl: 48px;
   --duro-spacing-xxxl: 64px;
+  /* microSpacing */
+  --duro-micro-spacing-px1: 1px;
+  --duro-micro-spacing-px2: 2px;
+  --duro-micro-spacing-px3: 3px;
+  --duro-micro-spacing-px5: 5px;
+  --duro-micro-spacing-px6: 6px;
   /* radii */
   --duro-radius-full: 9999px;
   --duro-radius-lg: 16px;
   --duro-radius-md: 12px;
+  --duro-radius-px6: 6px;
   --duro-radius-sm: 8px;
   --duro-radius-xs: 4px;
+  /* sizes */
+  --duro-size-check-mark-h: 9px;
+  --duro-size-check-mark-w: 5px;
+  --duro-size-control-lg: 40px;
+  --duro-size-control-md: 39px;
+  --duro-size-control-sm: 28px;
+  --duro-size-dialog-lg: 680px;
+  --duro-size-dialog-md: 520px;
+  --duro-size-dialog-sm: 400px;
+  --duro-size-divider: 1px;
+  --duro-size-edge-fade: 32px;
+  --duro-size-glyph-md: 16px;
+  --duro-size-glyph-sm: 12px;
+  --duro-size-glyph-xs: 10px;
+  --duro-size-grid-col-md: 280px;
+  --duro-size-grid-col-sm: 240px;
+  --duro-size-icon-button: 32px;
+  --duro-size-icon-button-sm: 28px;
+  --duro-size-icon-lg: 24px;
+  --duro-size-icon-md: 18px;
+  --duro-size-icon-sm: 16px;
+  --duro-size-icon-xl: 36px;
+  --duro-size-icon-xxl: 48px;
+  --duro-size-indicator: 18px;
+  --duro-size-indicator-dot: 8px;
+  --duro-size-label-min-w: 120px;
+  --duro-size-list-max-h: 280px;
+  --duro-size-list-max-h-sm: 200px;
+  --duro-size-nav-marker-h: 18px;
+  --duro-size-nav-marker-w: 3px;
+  --duro-size-page-lg: 1200px;
+  --duro-size-page-md: 800px;
+  --duro-size-page-sm: 600px;
+  --duro-size-panel-lg: 640px;
+  --duro-size-panel-md: 480px;
+  --duro-size-panel-sm: 360px;
+  --duro-size-popup-min-w: 160px;
+  --duro-size-scrollbar: 8px;
+  --duro-size-spinner-lg: 40px;
+  --duro-size-spinner-md: 24px;
+  --duro-size-spinner-sm: 16px;
+  --duro-size-swatch-h: 34px;
+  --duro-size-swatch-w: 44px;
+  --duro-size-switch-thumb: 16px;
+  --duro-size-switch-track-h: 20px;
+  --duro-size-switch-track-w: 36px;
+  --duro-size-tab-indicator: 2px;
+  --duro-size-toast-max-w: 440px;
+  --duro-size-touch-target: 44px;
+  /* borders */
+  --duro-border-accent: 3px;
+  --duro-border-focus-offset: 2px;
+  --duro-border-focus-offset-sm: 1px;
+  --duro-border-focus-ring: 2px;
+  --duro-border-hairline: 1px;
+  --duro-border-strong: 2px;
   /* layoutSpacing */
   --duro-layout-spacing-container-lg: 32px;
   --duro-layout-spacing-container-md: 24px;
@@ -112,12 +181,16 @@
   --duro-type-scale-line-height9: 2.75rem;
   /* duration */
   --duro-duration-base: 200ms;
+  --duro-duration-brisk: 160ms;
   --duro-duration-fast: 150ms;
   --duro-duration-instant: 0ms;
+  --duro-duration-minimal: 1ms;
+  --duro-duration-quick: 120ms;
   --duro-duration-slow: 280ms;
   /* easing */
   --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);
   --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
+  --duro-easing-linear: linear;
   --duro-easing-standard: ease;
   /* breakpoints */
   --duro-breakpoint-lg: 1024px;
@@ -143,10 +216,16 @@
   --duro-color-error-contrast: #ffffff;
   --duro-color-error-hover: #7f1d1d;
   --duro-color-error-text: #7f1d1d;
+  --duro-color-fixed-light: #ffffff;
   --duro-color-info: #1e40af;
   --duro-color-info-bg: rgba(30, 64, 175, 0.08);
   --duro-color-info-border: rgba(30, 64, 175, 0.3);
   --duro-color-info-text: #1e40af;
+  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);
+  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
+  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
+  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
+  --duro-color-scrim: rgba(0, 0, 0, 0.4);
   --duro-color-success: #166534;
   --duro-color-success-bg: rgba(22, 101, 52, 0.08);
   --duro-color-success-border: rgba(22, 101, 52, 0.3);
@@ -179,10 +258,16 @@
   --duro-color-error-contrast: #000000;
   --duro-color-error-hover: #fca5a5;
   --duro-color-error-text: #fca5a5;
+  --duro-color-fixed-light: #ffffff;
   --duro-color-info: #60a5fa;
   --duro-color-info-bg: rgba(96, 165, 250, 0.15);
   --duro-color-info-border: rgba(96, 165, 250, 0.5);
   --duro-color-info-text: #bfdbfe;
+  --duro-color-inverse-border: rgba(0, 0, 0, 0.55);
+  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
+  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
+  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
+  --duro-color-scrim: rgba(0, 0, 0, 0.4);
   --duro-color-success: #4ade80;
   --duro-color-success-bg: rgba(74, 222, 128, 0.15);
   --duro-color-success-border: rgba(74, 222, 128, 0.5);