@duro-app/tokens 5.1.0 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/index.js +66 -29
  2. package/dist/index.js.map +1 -1
  3. package/dist/keys.d.ts +35 -2
  4. package/dist/keys.d.ts.map +1 -1
  5. package/dist/mockup.css +49 -0
  6. package/dist/raw.d.ts +35 -0
  7. package/dist/raw.d.ts.map +1 -1
  8. package/dist/raw.js +53 -10
  9. package/dist/raw.js.map +1 -1
  10. package/dist/themes/high-contrast.css.d.ts +6 -0
  11. package/dist/themes/high-contrast.css.d.ts.map +1 -1
  12. package/dist/themes/light.css.d.ts +6 -0
  13. package/dist/themes/light.css.d.ts.map +1 -1
  14. package/dist/tokens/colors.css.d.ts +4 -0
  15. package/dist/tokens/colors.css.d.ts.map +1 -1
  16. package/dist/tokens/shadows.css.d.ts +2 -0
  17. package/dist/tokens/shadows.css.d.ts.map +1 -1
  18. package/dist/tokens/sizes.css.d.ts +31 -0
  19. package/dist/tokens/sizes.css.d.ts.map +1 -1
  20. package/dist/vars.css +37 -0
  21. package/package.json +1 -1
  22. package/src/keys.ts +65 -1
  23. package/src/raw.ts +47 -0
  24. package/src/themes/high-contrast.css.ts +11 -0
  25. package/src/themes/light.css.ts +11 -0
  26. package/src/tokens/colors.css.ts +9 -0
  27. package/src/tokens/shadows.css.ts +6 -0
  28. package/src/tokens/sizes.css.ts +31 -0
package/dist/index.js CHANGED
@@ -4,13 +4,13 @@ const e = {
4
4
  md: "768px",
5
5
  lg: "1024px",
6
6
  xl: "1280px"
7
- }, t = {
7
+ }, r = {
8
8
  xs: 480,
9
9
  sm: 640,
10
10
  md: 768,
11
11
  lg: 1024,
12
12
  xl: 1280
13
- }, r = {
13
+ }, t = {
14
14
  bg: "var(--bg-xqkwqtp)",
15
15
  bgCard: "var(--bgCard-xj2l5r)",
16
16
  bgCardHover: "var(--bgCardHover-xlxk7vw)",
@@ -44,8 +44,12 @@ const e = {
44
44
  inverseBorder: "var(--inverseBorder-x1x0j0at)",
45
45
  inverseBorderHover: "var(--inverseBorderHover-x12x46ev)",
46
46
  fixedLight: "var(--fixedLight-xd608fw)",
47
+ overlayLight: "var(--overlayLight-x71omwc)",
48
+ contrastSurface: "var(--contrastSurface-x1i512m4)",
49
+ onContrastSurface: "var(--onContrastSurface-x1dm0pi1)",
50
+ contrastBorder: "var(--contrastBorder-x1g9he7g)",
47
51
  __varGroupHash__: "xjvd03b"
48
- }, n = {
52
+ }, a = {
49
53
  xs: "var(--xs-xxfyjsd)",
50
54
  sm: "var(--sm-xbh8y7f)",
51
55
  ms: "var(--ms-x13y09zs)",
@@ -62,7 +66,7 @@ const e = {
62
66
  px5: "var(--px5-xrmlnev)",
63
67
  px6: "var(--px6-x1h3gnvl)",
64
68
  __varGroupHash__: "xufyenp"
65
- }, a = {
69
+ }, n = {
66
70
  xs: "var(--xs-x1gb5bcy)",
67
71
  px6: "var(--px6-xgv4348)",
68
72
  sm: "var(--sm-x1bhtfs5)",
@@ -119,6 +123,37 @@ const e = {
119
123
  pageSm: "var(--pageSm-x5j4ghi)",
120
124
  pageMd: "var(--pageMd-xloo57l)",
121
125
  pageLg: "var(--pageLg-x393fnm)",
126
+ sidebarW: "var(--sidebarW-x16fh60r)",
127
+ pageXs: "var(--pageXs-xkx7b2k)",
128
+ pageXl: "var(--pageXl-xe1y5wy)",
129
+ asideW: "var(--asideW-x1sefzvd)",
130
+ gridColXs: "var(--gridColXs-x1uralsc)",
131
+ fieldMinWSm: "var(--fieldMinWSm-x17qqf6g)",
132
+ fieldMinW: "var(--fieldMinW-x3410dk)",
133
+ popoverWSm: "var(--popoverWSm-x17g62mi)",
134
+ popoverW: "var(--popoverW-xf1f07)",
135
+ popupMaxW: "var(--popupMaxW-x16p43ce)",
136
+ meterH: "var(--meterH-x5xauib)",
137
+ skeletonChipW: "var(--skeletonChipW-xmw24hn)",
138
+ dropZoneMinH: "var(--dropZoneMinH-x9asgie)",
139
+ canvasMinH: "var(--canvasMinH-xpv99dk)",
140
+ editorMinH: "var(--editorMinH-x7umtuv)",
141
+ toolbarH: "var(--toolbarH-x16tj5lc)",
142
+ embedW: "var(--embedW-x1jprk4i)",
143
+ colorPickerW: "var(--colorPickerW-xafjozf)",
144
+ colorAreaH: "var(--colorAreaH-xn4he4)",
145
+ colorTrackH: "var(--colorTrackH-x1ixtmdy)",
146
+ colorSwatch: "var(--colorSwatch-xr73m8p)",
147
+ colorPreviewH: "var(--colorPreviewH-x1by70nu)",
148
+ handle: "var(--handle-xt9m584)",
149
+ chip: "var(--chip-xofdvjg)",
150
+ placeholderMinH: "var(--placeholderMinH-xy0p02w)",
151
+ previewMaxH: "var(--previewMaxH-x1phh3ob)",
152
+ barH: "var(--barH-x1oc8exn)",
153
+ readoutW: "var(--readoutW-xi5rn1i)",
154
+ sliderW: "var(--sliderW-xvcfp7i)",
155
+ paletteMinW: "var(--paletteMinW-x1514e6j)",
156
+ deviceBarW: "var(--deviceBarW-xqnx4o4)",
122
157
  __varGroupHash__: "x1w57kmz"
123
158
  }, x = {
124
159
  hairline: "var(--hairline-xomm6fc)",
@@ -142,7 +177,7 @@ const e = {
142
177
  containerMd: "var(--containerMd-x170dvin)",
143
178
  containerLg: "var(--containerLg-x1n6aasq)",
144
179
  __varGroupHash__: "x16nfoyr"
145
- }, l = {
180
+ }, v = {
146
181
  fontFamily: "var(--fontFamily-xvrmnat)",
147
182
  fontFamilyMono: "var(--fontFamilyMono-x1bzqfky)",
148
183
  fontSizeXs: "var(--fontSizeXs-x1w5m325)",
@@ -157,7 +192,7 @@ const e = {
157
192
  fontWeightBold: "var(--fontWeightBold-x1pjkvwg)",
158
193
  lineHeight: "var(--lineHeight-x1gubzd5)",
159
194
  __varGroupHash__: "xs62swl"
160
- }, v = {
195
+ }, l = {
161
196
  fontSize1: "var(--fontSize1-xx27tux)",
162
197
  fontSize2: "var(--fontSize2-x5hag8h)",
163
198
  fontSize3: "var(--fontSize3-x1mf6j39)",
@@ -183,7 +218,7 @@ const e = {
183
218
  letterSpacingNormal: "var(--letterSpacingNormal-x1ih41v1)",
184
219
  letterSpacingWide: "var(--letterSpacingWide-xt8z9rj)",
185
220
  __varGroupHash__: "x4cj49w"
186
- }, g = {
221
+ }, c = {
187
222
  bodySm: {
188
223
  "fontFamily-kMv6JI": "fontFamily-xce2pww",
189
224
  "fontSize-kGuDYH": "fontSize-x1hn3ytp",
@@ -297,10 +332,12 @@ const e = {
297
332
  "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
298
333
  $$css: "tokens/type-presets.css.ts:104"
299
334
  }
300
- }, c = {
335
+ }, g = {
301
336
  sm: "var(--sm-x17hhtln)",
302
337
  md: "var(--md-x1oyt0aw)",
303
338
  lg: "var(--lg-x1mxd62i)",
339
+ dropReady: "var(--dropReady-x19ev27m)",
340
+ dropOver: "var(--dropOver-x1w3k9ro)",
304
341
  __varGroupHash__: "x13v825q"
305
342
  }, p = {
306
343
  instant: "var(--instant-x3tclo2)",
@@ -311,44 +348,44 @@ const e = {
311
348
  base: "var(--base-x13vs74m)",
312
349
  slow: "var(--slow-xtti36c)",
313
350
  __varGroupHash__: "x8wiu4o"
314
- }, f = {
351
+ }, h = {
315
352
  standard: "var(--standard-xg4ngex)",
316
353
  linear: "var(--linear-x13iskbu)",
317
354
  easeOut: "var(--easeOut-x1dtgzac)",
318
355
  easeIn: "var(--easeIn-xxaysck)",
319
356
  __varGroupHash__: "x1unb8zz"
320
- }, h = {
321
- xjvd03b: "x199coxg xjvd03b",
357
+ }, f = {
358
+ xjvd03b: "xjcnmia xjvd03b",
359
+ $$css: !0
360
+ }, d = {
361
+ x13v825q: "x1jk1o70 x13v825q",
322
362
  $$css: !0
323
363
  }, k = {
324
- x13v825q: "xv9ibj0 x13v825q",
364
+ xjvd03b: "x1vaiyu xjvd03b",
325
365
  $$css: !0
326
366
  }, S = {
327
- xjvd03b: "x1hq5bef xjvd03b",
328
- $$css: !0
329
- }, d = {
330
- x13v825q: "x15e39jv x13v825q",
367
+ x13v825q: "xc8o4hb x13v825q",
331
368
  $$css: !0
332
369
  };
333
370
  export {
334
371
  x as borders,
335
372
  e as breakpoints,
336
- t as breakpointsPx,
337
- r as colors,
373
+ r as breakpointsPx,
374
+ t as colors,
338
375
  p as duration,
339
- f as easing,
340
- d as highContrastShadows,
341
- S as highContrastTheme,
376
+ h as easing,
377
+ S as highContrastShadows,
378
+ k as highContrastTheme,
342
379
  s as layoutSpacing,
343
- k as lightShadows,
344
- h as lightTheme,
380
+ d as lightShadows,
381
+ f as lightTheme,
345
382
  i as microSpacing,
346
- a as radii,
347
- c as shadows,
383
+ n as radii,
384
+ g as shadows,
348
385
  o as sizes,
349
- n as spacing,
350
- g as typePresets,
351
- v as typeScale,
352
- l as typography
386
+ a as spacing,
387
+ c as typePresets,
388
+ l as typeScale,
389
+ v as typography
353
390
  };
354
391
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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/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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"}
1
+ {"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 // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#f5f5f5',\n onContrastSurface: '#1a1a1a',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\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 sidebarW: '240px',\n pageXs: '480px',\n pageXl: '1440px',\n asideW: '320px',\n gridColXs: '200px',\n fieldMinWSm: '80px',\n fieldMinW: '160px',\n popoverWSm: '240px',\n popoverW: '320px',\n popupMaxW: '280px',\n meterH: '6px',\n skeletonChipW: '96px',\n dropZoneMinH: '128px',\n canvasMinH: '480px',\n editorMinH: '160px',\n toolbarH: '36px',\n embedW: '550px',\n colorPickerW: '196px',\n colorAreaH: '150px',\n colorTrackH: '12px',\n colorSwatch: '20px',\n colorPreviewH: '22px',\n handle: '16px',\n chip: '24px',\n placeholderMinH: '80px',\n previewMaxH: '320px',\n barH: '4px',\n readoutW: '40px',\n sliderW: '96px',\n paletteMinW: '96px',\n deviceBarW: '96px',\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 // DragDrop's drop-target rings: borders.hairline in colors.border on every\n // zone that can receive, borders.strong in colors.accent on the one under the\n // pointer. Literal per theme (StyleX needs inline literals); the drift check\n // rebuilds each from the palette. Not focus: focus stays on outlines.\n dropReady: 'inset 0 0 0 1px #333333',\n dropOver: 'inset 0 0 0 2px #6aaffc',\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 // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#1a1a1a',\n onContrastSurface: '#e5e5e5',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(255, 255, 255, 0.33)',\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 dropReady: 'inset 0 0 0 1px #d4d4d4',\n dropOver: 'inset 0 0 0 2px #1e40af',\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 // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#ffffff',\n onContrastSurface: '#000000',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\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 dropReady: 'inset 0 0 0 1px #555555',\n dropOver: 'inset 0 0 0 2px #60a5fa',\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 CHANGED
@@ -30,7 +30,7 @@ export declare const RADII_PX: {
30
30
  readonly lg: 16;
31
31
  readonly full: 9999;
32
32
  };
33
- export declare const SHADOW_KEYS: readonly ["sm", "md", "lg"];
33
+ export declare const SHADOW_KEYS: readonly ["sm", "md", "lg", "dropReady", "dropOver"];
34
34
  export type ShadowToken = (typeof SHADOW_KEYS)[number];
35
35
  export declare const DURATION_MS: {
36
36
  readonly instant: 0;
@@ -42,7 +42,7 @@ export declare const DURATION_MS: {
42
42
  readonly slow: 280;
43
43
  };
44
44
  export type DurationToken = keyof typeof DURATION_MS;
45
- 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"];
45
+ 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", "sidebarW", "pageXs", "pageXl", "asideW", "gridColXs", "fieldMinWSm", "fieldMinW", "popoverWSm", "popoverW", "popupMaxW", "meterH", "skeletonChipW", "dropZoneMinH", "canvasMinH", "editorMinH", "toolbarH", "embedW", "colorPickerW", "colorAreaH", "colorTrackH", "colorSwatch", "colorPreviewH", "handle", "chip", "placeholderMinH", "previewMaxH", "barH", "readoutW", "sliderW", "paletteMinW", "deviceBarW"];
46
46
  export type SizeToken = (typeof SIZE_KEYS)[number];
47
47
  export declare const SIZES_PX: {
48
48
  readonly touchTarget: 44;
@@ -93,6 +93,37 @@ export declare const SIZES_PX: {
93
93
  readonly pageSm: 600;
94
94
  readonly pageMd: 800;
95
95
  readonly pageLg: 1200;
96
+ readonly sidebarW: 240;
97
+ readonly pageXs: 480;
98
+ readonly pageXl: 1440;
99
+ readonly asideW: 320;
100
+ readonly gridColXs: 200;
101
+ readonly fieldMinWSm: 80;
102
+ readonly fieldMinW: 160;
103
+ readonly popoverWSm: 240;
104
+ readonly popoverW: 320;
105
+ readonly popupMaxW: 280;
106
+ readonly meterH: 6;
107
+ readonly skeletonChipW: 96;
108
+ readonly dropZoneMinH: 128;
109
+ readonly canvasMinH: 480;
110
+ readonly editorMinH: 160;
111
+ readonly toolbarH: 36;
112
+ readonly embedW: 550;
113
+ readonly colorPickerW: 196;
114
+ readonly colorAreaH: 150;
115
+ readonly colorTrackH: 12;
116
+ readonly colorSwatch: 20;
117
+ readonly colorPreviewH: 22;
118
+ readonly handle: 16;
119
+ readonly chip: 24;
120
+ readonly placeholderMinH: 80;
121
+ readonly previewMaxH: 320;
122
+ readonly barH: 4;
123
+ readonly readoutW: 40;
124
+ readonly sliderW: 96;
125
+ readonly paletteMinW: 96;
126
+ readonly deviceBarW: 96;
96
127
  };
97
128
  export declare const BORDER_KEYS: readonly ["hairline", "strong", "accent", "focusRing", "focusOffset", "focusOffsetSm"];
98
129
  export type BorderToken = (typeof BORDER_KEYS)[number];
@@ -149,6 +180,8 @@ export declare const SHADOWS: {
149
180
  readonly sm: "0 2px 4px rgba(0, 0, 0, 0.3)";
150
181
  readonly md: "0 4px 12px rgba(0, 0, 0, 0.4)";
151
182
  readonly lg: "0 8px 24px rgba(0, 0, 0, 0.5)";
183
+ readonly dropReady: "inset 0 0 0 1px #333333";
184
+ readonly dropOver: "inset 0 0 0 2px #6aaffc";
152
185
  };
153
186
  export declare const EASINGS: {
154
187
  readonly standard: "ease";
package/dist/keys.d.ts.map CHANGED
@@ -1 +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;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"}
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;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,sDAAuD,CAAA;AAC/E,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,0/BAgFZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFX,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;;;;;;CAMV,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 CHANGED
@@ -19,6 +19,8 @@
19
19
  --duro-color-bg-card: #1a1a1a;
20
20
  --duro-color-bg-card-hover: #242424;
21
21
  --duro-color-border: #333333;
22
+ --duro-color-contrast-border: rgba(0, 0, 0, 0.42);
23
+ --duro-color-contrast-surface: #f5f5f5;
22
24
  --duro-color-error: #f87171;
23
25
  --duro-color-error-bg: rgba(248, 113, 113, 0.1);
24
26
  --duro-color-error-border: rgba(248, 113, 113, 0.3);
@@ -34,6 +36,8 @@
34
36
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
35
37
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
36
38
  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
39
+ --duro-color-on-contrast-surface: #1a1a1a;
40
+ --duro-color-overlay-light: rgba(255, 255, 255, 0.78);
37
41
  --duro-color-scrim: rgba(0, 0, 0, 0.4);
38
42
  --duro-color-success: #22c55e;
39
43
  --duro-color-success-bg: rgba(34, 197, 94, 0.1);
@@ -46,6 +50,8 @@
46
50
  --duro-color-warning-border: rgba(251, 191, 36, 0.3);
47
51
  --duro-color-warning-text: #fde68a;
48
52
  /* shadows */
53
+ --duro-shadow-drop-over: inset 0 0 0 2px #6aaffc;
54
+ --duro-shadow-drop-ready: inset 0 0 0 1px #333333;
49
55
  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
50
56
  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
51
57
  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -72,21 +78,38 @@
72
78
  --duro-radius-sm: 8px;
73
79
  --duro-radius-xs: 4px;
74
80
  /* sizes */
81
+ --duro-size-aside-w: 320px;
82
+ --duro-size-bar-h: 4px;
83
+ --duro-size-canvas-min-h: 480px;
75
84
  --duro-size-check-mark-h: 9px;
76
85
  --duro-size-check-mark-w: 5px;
86
+ --duro-size-chip: 24px;
87
+ --duro-size-color-area-h: 150px;
88
+ --duro-size-color-picker-w: 196px;
89
+ --duro-size-color-preview-h: 22px;
90
+ --duro-size-color-swatch: 20px;
91
+ --duro-size-color-track-h: 12px;
77
92
  --duro-size-control-lg: 40px;
78
93
  --duro-size-control-md: 39px;
79
94
  --duro-size-control-sm: 28px;
95
+ --duro-size-device-bar-w: 96px;
80
96
  --duro-size-dialog-lg: 680px;
81
97
  --duro-size-dialog-md: 520px;
82
98
  --duro-size-dialog-sm: 400px;
83
99
  --duro-size-divider: 1px;
100
+ --duro-size-drop-zone-min-h: 128px;
84
101
  --duro-size-edge-fade: 32px;
102
+ --duro-size-editor-min-h: 160px;
103
+ --duro-size-embed-w: 550px;
104
+ --duro-size-field-min-w: 160px;
105
+ --duro-size-field-min-w-sm: 80px;
85
106
  --duro-size-glyph-md: 16px;
86
107
  --duro-size-glyph-sm: 12px;
87
108
  --duro-size-glyph-xs: 10px;
88
109
  --duro-size-grid-col-md: 280px;
89
110
  --duro-size-grid-col-sm: 240px;
111
+ --duro-size-grid-col-xs: 200px;
112
+ --duro-size-handle: 16px;
90
113
  --duro-size-icon-button: 32px;
91
114
  --duro-size-icon-button-sm: 28px;
92
115
  --duro-size-icon-lg: 24px;
@@ -99,16 +122,29 @@
99
122
  --duro-size-label-min-w: 120px;
100
123
  --duro-size-list-max-h: 280px;
101
124
  --duro-size-list-max-h-sm: 200px;
125
+ --duro-size-meter-h: 6px;
102
126
  --duro-size-nav-marker-h: 18px;
103
127
  --duro-size-nav-marker-w: 3px;
104
128
  --duro-size-page-lg: 1200px;
105
129
  --duro-size-page-md: 800px;
106
130
  --duro-size-page-sm: 600px;
131
+ --duro-size-page-xl: 1440px;
132
+ --duro-size-page-xs: 480px;
133
+ --duro-size-palette-min-w: 96px;
107
134
  --duro-size-panel-lg: 640px;
108
135
  --duro-size-panel-md: 480px;
109
136
  --duro-size-panel-sm: 360px;
137
+ --duro-size-placeholder-min-h: 80px;
138
+ --duro-size-popover-w: 320px;
139
+ --duro-size-popover-w-sm: 240px;
140
+ --duro-size-popup-max-w: 280px;
110
141
  --duro-size-popup-min-w: 160px;
142
+ --duro-size-preview-max-h: 320px;
143
+ --duro-size-readout-w: 40px;
111
144
  --duro-size-scrollbar: 8px;
145
+ --duro-size-sidebar-w: 240px;
146
+ --duro-size-skeleton-chip-w: 96px;
147
+ --duro-size-slider-w: 96px;
112
148
  --duro-size-spinner-lg: 40px;
113
149
  --duro-size-spinner-md: 24px;
114
150
  --duro-size-spinner-sm: 16px;
@@ -119,6 +155,7 @@
119
155
  --duro-size-switch-track-w: 36px;
120
156
  --duro-size-tab-indicator: 2px;
121
157
  --duro-size-toast-max-w: 440px;
158
+ --duro-size-toolbar-h: 36px;
122
159
  --duro-size-touch-target: 44px;
123
160
  /* borders */
124
161
  --duro-border-accent: 3px;
@@ -210,6 +247,8 @@
210
247
  --duro-color-bg-card: #f5f5f5;
211
248
  --duro-color-bg-card-hover: #ebebeb;
212
249
  --duro-color-border: #d4d4d4;
250
+ --duro-color-contrast-border: rgba(255, 255, 255, 0.33);
251
+ --duro-color-contrast-surface: #1a1a1a;
213
252
  --duro-color-error: #991b1b;
214
253
  --duro-color-error-bg: rgba(153, 27, 27, 0.08);
215
254
  --duro-color-error-border: rgba(153, 27, 27, 0.3);
@@ -225,6 +264,8 @@
225
264
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
226
265
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
227
266
  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
267
+ --duro-color-on-contrast-surface: #e5e5e5;
268
+ --duro-color-overlay-light: rgba(255, 255, 255, 0.78);
228
269
  --duro-color-scrim: rgba(0, 0, 0, 0.4);
229
270
  --duro-color-success: #166534;
230
271
  --duro-color-success-bg: rgba(22, 101, 52, 0.08);
@@ -237,6 +278,8 @@
237
278
  --duro-color-warning-border: rgba(146, 64, 14, 0.3);
238
279
  --duro-color-warning-text: #78350f;
239
280
  /* shadows */
281
+ --duro-shadow-drop-over: inset 0 0 0 2px #1e40af;
282
+ --duro-shadow-drop-ready: inset 0 0 0 1px #d4d4d4;
240
283
  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
241
284
  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
242
285
  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
@@ -252,6 +295,8 @@
252
295
  --duro-color-bg-card: #111111;
253
296
  --duro-color-bg-card-hover: #1a1a1a;
254
297
  --duro-color-border: #555555;
298
+ --duro-color-contrast-border: rgba(0, 0, 0, 0.42);
299
+ --duro-color-contrast-surface: #ffffff;
255
300
  --duro-color-error: #f87171;
256
301
  --duro-color-error-bg: rgba(248, 113, 113, 0.15);
257
302
  --duro-color-error-border: rgba(248, 113, 113, 0.5);
@@ -267,6 +312,8 @@
267
312
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
268
313
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
269
314
  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
315
+ --duro-color-on-contrast-surface: #000000;
316
+ --duro-color-overlay-light: rgba(255, 255, 255, 0.78);
270
317
  --duro-color-scrim: rgba(0, 0, 0, 0.4);
271
318
  --duro-color-success: #4ade80;
272
319
  --duro-color-success-bg: rgba(74, 222, 128, 0.15);
@@ -279,6 +326,8 @@
279
326
  --duro-color-warning-border: rgba(252, 211, 77, 0.5);
280
327
  --duro-color-warning-text: #fef08a;
281
328
  /* shadows */
329
+ --duro-shadow-drop-over: inset 0 0 0 2px #60a5fa;
330
+ --duro-shadow-drop-ready: inset 0 0 0 1px #555555;
282
331
  --duro-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
283
332
  --duro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
284
333
  --duro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);
package/dist/raw.d.ts CHANGED
@@ -32,6 +32,10 @@ export type RawColors = {
32
32
  inverseBorder: string;
33
33
  inverseBorderHover: string;
34
34
  fixedLight: string;
35
+ overlayLight: string;
36
+ contrastSurface: string;
37
+ onContrastSurface: string;
38
+ contrastBorder: string;
35
39
  };
36
40
  export declare const SPACING_PX: {
37
41
  readonly xs: 4;
@@ -116,6 +120,37 @@ export declare const SIZES_PX: {
116
120
  readonly pageSm: 600;
117
121
  readonly pageMd: 800;
118
122
  readonly pageLg: 1200;
123
+ readonly sidebarW: 240;
124
+ readonly pageXs: 480;
125
+ readonly pageXl: 1440;
126
+ readonly asideW: 320;
127
+ readonly gridColXs: 200;
128
+ readonly fieldMinWSm: 80;
129
+ readonly fieldMinW: 160;
130
+ readonly popoverWSm: 240;
131
+ readonly popoverW: 320;
132
+ readonly popupMaxW: 280;
133
+ readonly meterH: 6;
134
+ readonly skeletonChipW: 96;
135
+ readonly dropZoneMinH: 128;
136
+ readonly canvasMinH: 480;
137
+ readonly editorMinH: 160;
138
+ readonly toolbarH: 36;
139
+ readonly embedW: 550;
140
+ readonly colorPickerW: 196;
141
+ readonly colorAreaH: 150;
142
+ readonly colorTrackH: 12;
143
+ readonly colorSwatch: 20;
144
+ readonly colorPreviewH: 22;
145
+ readonly handle: 16;
146
+ readonly chip: 24;
147
+ readonly placeholderMinH: 80;
148
+ readonly previewMaxH: 320;
149
+ readonly barH: 4;
150
+ readonly readoutW: 40;
151
+ readonly sliderW: 96;
152
+ readonly paletteMinW: 96;
153
+ readonly deviceBarW: 96;
119
154
  };
120
155
  export declare const EMAIL_PX: {
121
156
  readonly emailCardW: 520;
package/dist/raw.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"raw.d.ts","sourceRoot":"","sources":["../src/raw.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAEV,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDX,CAAA;AAIV,eAAO,MAAM,QAAQ;;;CAA+C,CAAA;AAGpE,eAAO,MAAM,UAAU,EAAE,SAkCxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SAkCzB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,SAkChC,CAAA"}
1
+ {"version":3,"file":"raw.d.ts","sourceRoot":"","sources":["../src/raw.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAEV,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFX,CAAA;AAIV,eAAO,MAAM,QAAQ;;;CAA+C,CAAA;AAGpE,eAAO,MAAM,UAAU,EAAE,SAsCxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SAsCzB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,SAsChC,CAAA"}
package/dist/raw.js CHANGED
@@ -76,11 +76,42 @@ const r = {
76
76
  gridColMd: 280,
77
77
  pageSm: 600,
78
78
  pageMd: 800,
79
- pageLg: 1200
80
- }, f = {
79
+ pageLg: 1200,
80
+ sidebarW: 240,
81
+ pageXs: 480,
82
+ pageXl: 1440,
83
+ asideW: 320,
84
+ gridColXs: 200,
85
+ fieldMinWSm: 80,
86
+ fieldMinW: 160,
87
+ popoverWSm: 240,
88
+ popoverW: 320,
89
+ popupMaxW: 280,
90
+ meterH: 6,
91
+ skeletonChipW: 96,
92
+ dropZoneMinH: 128,
93
+ canvasMinH: 480,
94
+ editorMinH: 160,
95
+ toolbarH: 36,
96
+ embedW: 550,
97
+ colorPickerW: 196,
98
+ colorAreaH: 150,
99
+ colorTrackH: 12,
100
+ colorSwatch: 20,
101
+ colorPreviewH: 22,
102
+ handle: 16,
103
+ chip: 24,
104
+ placeholderMinH: 80,
105
+ previewMaxH: 320,
106
+ barH: 4,
107
+ readoutW: 40,
108
+ sliderW: 96,
109
+ paletteMinW: 96,
110
+ deviceBarW: 96
111
+ }, t = {
81
112
  emailCardW: 520,
82
113
  trackingPixel: 1
83
- }, g = {
114
+ }, f = {
84
115
  bg: "#0f0f0f",
85
116
  bgCard: "#1a1a1a",
86
117
  bgCardHover: "#242424",
@@ -113,7 +144,11 @@ const r = {
113
144
  inverseFillHover: "rgba(0, 0, 0, 0.18)",
114
145
  inverseBorder: "rgba(0, 0, 0, 0.55)",
115
146
  inverseBorderHover: "rgba(0, 0, 0, 0.70)",
116
- fixedLight: "#ffffff"
147
+ fixedLight: "#ffffff",
148
+ overlayLight: "rgba(255, 255, 255, 0.78)",
149
+ contrastSurface: "#f5f5f5",
150
+ onContrastSurface: "#1a1a1a",
151
+ contrastBorder: "rgba(0, 0, 0, 0.42)"
117
152
  }, c = {
118
153
  bg: "#ffffff",
119
154
  bgCard: "#f5f5f5",
@@ -147,8 +182,12 @@ const r = {
147
182
  inverseFillHover: "rgba(0, 0, 0, 0.18)",
148
183
  inverseBorder: "rgba(0, 0, 0, 0.55)",
149
184
  inverseBorderHover: "rgba(0, 0, 0, 0.70)",
150
- fixedLight: "#ffffff"
151
- }, t = {
185
+ fixedLight: "#ffffff",
186
+ overlayLight: "rgba(255, 255, 255, 0.78)",
187
+ contrastSurface: "#1a1a1a",
188
+ onContrastSurface: "#e5e5e5",
189
+ contrastBorder: "rgba(255, 255, 255, 0.33)"
190
+ }, i = {
152
191
  bg: "#000000",
153
192
  bgCard: "#111111",
154
193
  bgCardHover: "#1a1a1a",
@@ -181,17 +220,21 @@ const r = {
181
220
  inverseFillHover: "rgba(0, 0, 0, 0.18)",
182
221
  inverseBorder: "rgba(0, 0, 0, 0.55)",
183
222
  inverseBorderHover: "rgba(0, 0, 0, 0.70)",
184
- fixedLight: "#ffffff"
223
+ fixedLight: "#ffffff",
224
+ overlayLight: "rgba(255, 255, 255, 0.78)",
225
+ contrastSurface: "#ffffff",
226
+ onContrastSurface: "#000000",
227
+ contrastBorder: "rgba(0, 0, 0, 0.42)"
185
228
  };
186
229
  export {
187
230
  o as BORDERS_PX,
188
- f as EMAIL_PX,
231
+ t as EMAIL_PX,
189
232
  a as FONT_SIZE_REM,
190
233
  e as RADII_PX,
191
234
  n as SIZES_PX,
192
235
  r as SPACING_PX,
193
- g as darkColors,
194
- t as highContrastColors,
236
+ f as darkColors,
237
+ i as highContrastColors,
195
238
  c as lightColors
196
239
  };
197
240
  //# sourceMappingURL=raw.js.map
package/dist/raw.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"raw.js","sources":["../src/raw.ts"],"sourcesContent":["// Plain hex values for non-`react-strict-dom` consumers (e.g. an MUI\n// `createTheme` palette). These mirror the literals defined in\n// `tokens/colors.css.ts`, `themes/light.css.ts`, and `themes/high-contrast.css.ts`.\n//\n// We can't make the css.ts files import from here: StyleX (the babel plugin\n// behind RSD's `css.defineVars` / `css.createTheme` on web) requires the\n// argument to be an inline object literal. So values live in two places.\n//\n// `scripts/check-token-drift.mjs` runs in `prebuild` and fails the build if\n// the literal in any css.ts file diverges from the corresponding export here.\n\nexport type RawColors = {\n bg: string\n bgCard: string\n bgCardHover: string\n text: string\n textMuted: string\n accent: string\n accentHover: string\n accentContrast: string\n border: string\n error: string\n errorHover: string\n errorBg: string\n errorBorder: string\n errorText: string\n errorContrast: string\n success: string\n successBg: string\n successBorder: string\n successText: string\n warning: string\n warningBg: string\n warningBorder: string\n warningText: string\n info: string\n infoBg: string\n infoBorder: string\n infoText: string\n scrim: string\n inverseFill: string\n inverseFillHover: string\n inverseBorder: string\n inverseBorderHover: string\n fixedLight: string\n}\n\n// Numeric maps for consumers that load only the compiled `/raw` entry (e.g.\n// ui-email, which cannot read CSS variables or the TypeScript `/keys` source).\n// Copies of the keys.ts maps; check-token-drift.mjs fails if they diverge.\nexport const SPACING_PX = {\n xs: 4,\n sm: 8,\n ms: 12,\n md: 16,\n lg: 24,\n xl: 32,\n xxl: 48,\n xxxl: 64,\n} as const\n\nexport const RADII_PX = {\n xs: 4,\n px6: 6,\n sm: 8,\n md: 12,\n lg: 16,\n full: 9999,\n} as const\n\nexport const FONT_SIZE_REM = {\n fontSizeXs: 0.75,\n fontSizeSm: 0.875,\n fontSizeMd: 1,\n fontSizeLg: 1.125,\n fontSizeXl: 1.25,\n fontSizeHeading: 1.5,\n} as const\n\nexport const BORDERS_PX = {\n hairline: 1,\n strong: 2,\n accent: 3,\n focusRing: 2,\n focusOffset: 2,\n focusOffsetSm: 1,\n} as const\n\nexport const SIZES_PX = {\n touchTarget: 44,\n controlSm: 28,\n controlMd: 39,\n controlLg: 40,\n indicator: 18,\n indicatorDot: 8,\n checkMarkW: 5,\n checkMarkH: 9,\n switchTrackW: 36,\n switchTrackH: 20,\n switchThumb: 16,\n iconButton: 32,\n iconButtonSm: 28,\n spinnerSm: 16,\n spinnerMd: 24,\n spinnerLg: 40,\n glyphXs: 10,\n glyphSm: 12,\n glyphMd: 16,\n iconSm: 16,\n iconMd: 18,\n iconLg: 24,\n iconXl: 36,\n iconXxl: 48,\n navMarkerW: 3,\n navMarkerH: 18,\n divider: 1,\n tabIndicator: 2,\n edgeFade: 32,\n scrollbar: 8,\n swatchW: 44,\n swatchH: 34,\n labelMinW: 120,\n popupMinW: 160,\n listMaxH: 280,\n listMaxHSm: 200,\n dialogSm: 400,\n dialogMd: 520,\n dialogLg: 680,\n panelSm: 360,\n panelMd: 480,\n panelLg: 640,\n toastMaxW: 440,\n gridColSm: 240,\n gridColMd: 280,\n pageSm: 600,\n pageMd: 800,\n pageLg: 1200,\n} as const\n\n// Email-only measures: no CSS variable (mail clients cannot read them) and not\n// a lint candidate, so it is deliberately absent from keys.ts.\nexport const EMAIL_PX = {emailCardW: 520, trackingPixel: 1} as const\n\n// Dark theme — matches the defaults in `tokens/colors.css.ts`.\nexport const darkColors: RawColors = {\n bg: '#0f0f0f',\n bgCard: '#1a1a1a',\n bgCardHover: '#242424',\n text: '#e5e5e5',\n textMuted: '#b0b0b0',\n accent: '#6aaffc',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n border: '#333333',\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 success: '#22c55e',\n successBg: 'rgba(34, 197, 94, 0.1)',\n successBorder: 'rgba(34, 197, 94, 0.3)',\n successText: '#86efac',\n warning: '#fbbf24',\n warningBg: 'rgba(251, 191, 36, 0.1)',\n warningBorder: 'rgba(251, 191, 36, 0.3)',\n warningText: '#fde68a',\n info: '#6aaffc',\n infoBg: 'rgba(106, 175, 252, 0.1)',\n infoBorder: 'rgba(106, 175, 252, 0.3)',\n infoText: '#93c5fd',\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 fixedLight: '#ffffff',\n}\n\n// Light theme — matches the overrides in `themes/light.css.ts`.\nexport const lightColors: RawColors = {\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 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 fixedLight: '#ffffff',\n}\n\n// High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.\nexport const highContrastColors: RawColors = {\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 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 fixedLight: '#ffffff',\n}\n"],"names":["SPACING_PX","RADII_PX","FONT_SIZE_REM","BORDERS_PX","SIZES_PX","EMAIL_PX","darkColors","lightColors","highContrastColors"],"mappings":"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"}
1
+ {"version":3,"file":"raw.js","sources":["../src/raw.ts"],"sourcesContent":["// Plain hex values for non-`react-strict-dom` consumers (e.g. an MUI\n// `createTheme` palette). These mirror the literals defined in\n// `tokens/colors.css.ts`, `themes/light.css.ts`, and `themes/high-contrast.css.ts`.\n//\n// We can't make the css.ts files import from here: StyleX (the babel plugin\n// behind RSD's `css.defineVars` / `css.createTheme` on web) requires the\n// argument to be an inline object literal. So values live in two places.\n//\n// `scripts/check-token-drift.mjs` runs in `prebuild` and fails the build if\n// the literal in any css.ts file diverges from the corresponding export here.\n\nexport type RawColors = {\n bg: string\n bgCard: string\n bgCardHover: string\n text: string\n textMuted: string\n accent: string\n accentHover: string\n accentContrast: string\n border: string\n error: string\n errorHover: string\n errorBg: string\n errorBorder: string\n errorText: string\n errorContrast: string\n success: string\n successBg: string\n successBorder: string\n successText: string\n warning: string\n warningBg: string\n warningBorder: string\n warningText: string\n info: string\n infoBg: string\n infoBorder: string\n infoText: string\n scrim: string\n inverseFill: string\n inverseFillHover: string\n inverseBorder: string\n inverseBorderHover: string\n fixedLight: string\n overlayLight: string\n contrastSurface: string\n onContrastSurface: string\n contrastBorder: string\n}\n\n// Numeric maps for consumers that load only the compiled `/raw` entry (e.g.\n// ui-email, which cannot read CSS variables or the TypeScript `/keys` source).\n// Copies of the keys.ts maps; check-token-drift.mjs fails if they diverge.\nexport const SPACING_PX = {\n xs: 4,\n sm: 8,\n ms: 12,\n md: 16,\n lg: 24,\n xl: 32,\n xxl: 48,\n xxxl: 64,\n} as const\n\nexport const RADII_PX = {\n xs: 4,\n px6: 6,\n sm: 8,\n md: 12,\n lg: 16,\n full: 9999,\n} as const\n\nexport const FONT_SIZE_REM = {\n fontSizeXs: 0.75,\n fontSizeSm: 0.875,\n fontSizeMd: 1,\n fontSizeLg: 1.125,\n fontSizeXl: 1.25,\n fontSizeHeading: 1.5,\n} as const\n\nexport const BORDERS_PX = {\n hairline: 1,\n strong: 2,\n accent: 3,\n focusRing: 2,\n focusOffset: 2,\n focusOffsetSm: 1,\n} as const\n\nexport const SIZES_PX = {\n touchTarget: 44,\n controlSm: 28,\n controlMd: 39,\n controlLg: 40,\n indicator: 18,\n indicatorDot: 8,\n checkMarkW: 5,\n checkMarkH: 9,\n switchTrackW: 36,\n switchTrackH: 20,\n switchThumb: 16,\n iconButton: 32,\n iconButtonSm: 28,\n spinnerSm: 16,\n spinnerMd: 24,\n spinnerLg: 40,\n glyphXs: 10,\n glyphSm: 12,\n glyphMd: 16,\n iconSm: 16,\n iconMd: 18,\n iconLg: 24,\n iconXl: 36,\n iconXxl: 48,\n navMarkerW: 3,\n navMarkerH: 18,\n divider: 1,\n tabIndicator: 2,\n edgeFade: 32,\n scrollbar: 8,\n swatchW: 44,\n swatchH: 34,\n labelMinW: 120,\n popupMinW: 160,\n listMaxH: 280,\n listMaxHSm: 200,\n dialogSm: 400,\n dialogMd: 520,\n dialogLg: 680,\n panelSm: 360,\n panelMd: 480,\n panelLg: 640,\n toastMaxW: 440,\n gridColSm: 240,\n gridColMd: 280,\n pageSm: 600,\n pageMd: 800,\n pageLg: 1200,\n sidebarW: 240,\n pageXs: 480,\n pageXl: 1440,\n asideW: 320,\n gridColXs: 200,\n fieldMinWSm: 80,\n fieldMinW: 160,\n popoverWSm: 240,\n popoverW: 320,\n popupMaxW: 280,\n meterH: 6,\n skeletonChipW: 96,\n dropZoneMinH: 128,\n canvasMinH: 480,\n editorMinH: 160,\n toolbarH: 36,\n embedW: 550,\n colorPickerW: 196,\n colorAreaH: 150,\n colorTrackH: 12,\n colorSwatch: 20,\n colorPreviewH: 22,\n handle: 16,\n chip: 24,\n placeholderMinH: 80,\n previewMaxH: 320,\n barH: 4,\n readoutW: 40,\n sliderW: 96,\n paletteMinW: 96,\n deviceBarW: 96,\n} as const\n\n// Email-only measures: no CSS variable (mail clients cannot read them) and not\n// a lint candidate, so it is deliberately absent from keys.ts.\nexport const EMAIL_PX = {emailCardW: 520, trackingPixel: 1} as const\n\n// Dark theme — matches the defaults in `tokens/colors.css.ts`.\nexport const darkColors: RawColors = {\n bg: '#0f0f0f',\n bgCard: '#1a1a1a',\n bgCardHover: '#242424',\n text: '#e5e5e5',\n textMuted: '#b0b0b0',\n accent: '#6aaffc',\n accentHover: '#93c5fd',\n accentContrast: '#000000',\n border: '#333333',\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 success: '#22c55e',\n successBg: 'rgba(34, 197, 94, 0.1)',\n successBorder: 'rgba(34, 197, 94, 0.3)',\n successText: '#86efac',\n warning: '#fbbf24',\n warningBg: 'rgba(251, 191, 36, 0.1)',\n warningBorder: 'rgba(251, 191, 36, 0.3)',\n warningText: '#fde68a',\n info: '#6aaffc',\n infoBg: 'rgba(106, 175, 252, 0.1)',\n infoBorder: 'rgba(106, 175, 252, 0.3)',\n infoText: '#93c5fd',\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 fixedLight: '#ffffff',\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n contrastSurface: '#f5f5f5',\n onContrastSurface: '#1a1a1a',\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n}\n\n// Light theme — matches the overrides in `themes/light.css.ts`.\nexport const lightColors: RawColors = {\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 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 fixedLight: '#ffffff',\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n contrastSurface: '#1a1a1a',\n onContrastSurface: '#e5e5e5',\n contrastBorder: 'rgba(255, 255, 255, 0.33)',\n}\n\n// High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.\nexport const highContrastColors: RawColors = {\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 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 fixedLight: '#ffffff',\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n contrastSurface: '#ffffff',\n onContrastSurface: '#000000',\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n}\n"],"names":["SPACING_PX","RADII_PX","FONT_SIZE_REM","BORDERS_PX","SIZES_PX","EMAIL_PX","darkColors","lightColors","highContrastColors"],"mappings":"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"}
package/dist/themes/high-contrast.css.d.ts CHANGED
@@ -33,10 +33,16 @@ export declare const highContrastTheme: css.Theme<css.VarGroup<Readonly<{
33
33
  inverseBorder: string;
34
34
  inverseBorderHover: string;
35
35
  fixedLight: string;
36
+ overlayLight: string;
37
+ contrastSurface: string;
38
+ onContrastSurface: string;
39
+ contrastBorder: string;
36
40
  }>, symbol>, symbol>;
37
41
  export declare const highContrastShadows: css.Theme<css.VarGroup<Readonly<{
38
42
  sm: string;
39
43
  md: string;
40
44
  lg: string;
45
+ dropReady: string;
46
+ dropOver: string;
41
47
  }>, symbol>, symbol>;
42
48
  //# sourceMappingURL=high-contrast.css.d.ts.map
package/dist/themes/high-contrast.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"high-contrast.css.d.ts","sourceRoot":"","sources":["../../src/themes/high-contrast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAqC5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;oBAI9B,CAAA"}
1
+ {"version":3,"file":"high-contrast.css.d.ts","sourceRoot":"","sources":["../../src/themes/high-contrast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA8C5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;;;oBAM9B,CAAA"}
package/dist/themes/light.css.d.ts CHANGED
@@ -33,10 +33,16 @@ export declare const lightTheme: css.Theme<css.VarGroup<Readonly<{
33
33
  inverseBorder: string;
34
34
  inverseBorderHover: string;
35
35
  fixedLight: string;
36
+ overlayLight: string;
37
+ contrastSurface: string;
38
+ onContrastSurface: string;
39
+ contrastBorder: string;
36
40
  }>, symbol>, symbol>;
37
41
  export declare const lightShadows: css.Theme<css.VarGroup<Readonly<{
38
42
  sm: string;
39
43
  md: string;
40
44
  lg: string;
45
+ dropReady: string;
46
+ dropOver: string;
41
47
  }>, symbol>, symbol>;
42
48
  //# sourceMappingURL=light.css.d.ts.map
package/dist/themes/light.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"light.css.d.ts","sourceRoot":"","sources":["../../src/themes/light.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAqCrB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;oBAIvB,CAAA"}
1
+ {"version":3,"file":"light.css.d.ts","sourceRoot":"","sources":["../../src/themes/light.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA8CrB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;oBAMvB,CAAA"}
package/dist/tokens/colors.css.d.ts CHANGED
@@ -33,5 +33,9 @@ export declare const colors: css.VarGroup<Readonly<{
33
33
  inverseBorder: string;
34
34
  inverseBorderHover: string;
35
35
  fixedLight: string;
36
+ overlayLight: string;
37
+ contrastSurface: string;
38
+ onContrastSurface: string;
39
+ contrastBorder: string;
36
40
  }>, symbol>;
37
41
  //# sourceMappingURL=colors.css.d.ts.map
package/dist/tokens/colors.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colors.css.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAqDjB,CAAA"}
1
+ {"version":3,"file":"colors.css.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA8DjB,CAAA"}
package/dist/tokens/shadows.css.d.ts CHANGED
@@ -3,5 +3,7 @@ export declare const shadows: css.VarGroup<Readonly<{
3
3
  sm: string;
4
4
  md: string;
5
5
  lg: string;
6
+ dropReady: string;
7
+ dropOver: string;
6
8
  }>, symbol>;
7
9
  //# sourceMappingURL=shadows.css.d.ts.map
package/dist/tokens/shadows.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shadows.css.d.ts","sourceRoot":"","sources":["../../src/tokens/shadows.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,OAAO;;;;WAIlB,CAAA"}
1
+ {"version":3,"file":"shadows.css.d.ts","sourceRoot":"","sources":["../../src/tokens/shadows.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,OAAO;;;;;;WAUlB,CAAA"}
package/dist/tokens/sizes.css.d.ts CHANGED
@@ -48,5 +48,36 @@ export declare const sizes: css.VarGroup<Readonly<{
48
48
  pageSm: string;
49
49
  pageMd: string;
50
50
  pageLg: string;
51
+ sidebarW: string;
52
+ pageXs: string;
53
+ pageXl: string;
54
+ asideW: string;
55
+ gridColXs: string;
56
+ fieldMinWSm: string;
57
+ fieldMinW: string;
58
+ popoverWSm: string;
59
+ popoverW: string;
60
+ popupMaxW: string;
61
+ meterH: string;
62
+ skeletonChipW: string;
63
+ dropZoneMinH: string;
64
+ canvasMinH: string;
65
+ editorMinH: string;
66
+ toolbarH: string;
67
+ embedW: string;
68
+ colorPickerW: string;
69
+ colorAreaH: string;
70
+ colorTrackH: string;
71
+ colorSwatch: string;
72
+ colorPreviewH: string;
73
+ handle: string;
74
+ chip: string;
75
+ placeholderMinH: string;
76
+ previewMaxH: string;
77
+ barH: string;
78
+ readoutW: string;
79
+ sliderW: string;
80
+ paletteMinW: string;
81
+ deviceBarW: string;
51
82
  }>, symbol>;
52
83
  //# sourceMappingURL=sizes.css.d.ts.map
package/dist/tokens/sizes.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sizes.css.d.ts","sourceRoot":"","sources":["../../src/tokens/sizes.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAiDhB,CAAA"}
1
+ {"version":3,"file":"sizes.css.d.ts","sourceRoot":"","sources":["../../src/tokens/sizes.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAgFhB,CAAA"}
package/dist/vars.css CHANGED
@@ -20,6 +20,8 @@
20
20
  --duro-color-bg-card: var(--bgCard-xj2l5r);
21
21
  --duro-color-bg-card-hover: var(--bgCardHover-xlxk7vw);
22
22
  --duro-color-border: var(--border-x1drj1pb);
23
+ --duro-color-contrast-border: var(--contrastBorder-x1g9he7g);
24
+ --duro-color-contrast-surface: var(--contrastSurface-x1i512m4);
23
25
  --duro-color-error: var(--error-x13gdhh0);
24
26
  --duro-color-error-bg: var(--errorBg-xrl8836);
25
27
  --duro-color-error-border: var(--errorBorder-x1a6pjl);
@@ -35,6 +37,8 @@
35
37
  --duro-color-inverse-border-hover: var(--inverseBorderHover-x12x46ev);
36
38
  --duro-color-inverse-fill: var(--inverseFill-x1il694p);
37
39
  --duro-color-inverse-fill-hover: var(--inverseFillHover-xmxqxj9);
40
+ --duro-color-on-contrast-surface: var(--onContrastSurface-x1dm0pi1);
41
+ --duro-color-overlay-light: var(--overlayLight-x71omwc);
38
42
  --duro-color-scrim: var(--scrim-x2ypej7);
39
43
  --duro-color-success: var(--success-x197pe5n);
40
44
  --duro-color-success-bg: var(--successBg-xzjukav);
@@ -54,6 +58,8 @@
54
58
  --duro-radius-sm: var(--sm-x1bhtfs5);
55
59
  --duro-radius-xs: var(--xs-x1gb5bcy);
56
60
  /* shadows */
61
+ --duro-shadow-drop-over: var(--dropOver-x1w3k9ro);
62
+ --duro-shadow-drop-ready: var(--dropReady-x19ev27m);
57
63
  --duro-shadow-lg: var(--lg-x1mxd62i);
58
64
  --duro-shadow-md: var(--md-x1oyt0aw);
59
65
  --duro-shadow-sm: var(--sm-x17hhtln);
@@ -73,21 +79,38 @@
73
79
  --duro-micro-spacing-px5: var(--px5-xrmlnev);
74
80
  --duro-micro-spacing-px6: var(--px6-x1h3gnvl);
75
81
  /* sizes */
82
+ --duro-size-aside-w: var(--asideW-x1sefzvd);
83
+ --duro-size-bar-h: var(--barH-x1oc8exn);
84
+ --duro-size-canvas-min-h: var(--canvasMinH-xpv99dk);
76
85
  --duro-size-check-mark-h: var(--checkMarkH-xz3lx6u);
77
86
  --duro-size-check-mark-w: var(--checkMarkW-xvyirw7);
87
+ --duro-size-chip: var(--chip-xofdvjg);
88
+ --duro-size-color-area-h: var(--colorAreaH-xn4he4);
89
+ --duro-size-color-picker-w: var(--colorPickerW-xafjozf);
90
+ --duro-size-color-preview-h: var(--colorPreviewH-x1by70nu);
91
+ --duro-size-color-swatch: var(--colorSwatch-xr73m8p);
92
+ --duro-size-color-track-h: var(--colorTrackH-x1ixtmdy);
78
93
  --duro-size-control-lg: var(--controlLg-xf3drh3);
79
94
  --duro-size-control-md: var(--controlMd-xkvaeme);
80
95
  --duro-size-control-sm: var(--controlSm-x6ymn93);
96
+ --duro-size-device-bar-w: var(--deviceBarW-xqnx4o4);
81
97
  --duro-size-dialog-lg: var(--dialogLg-xsd9wl3);
82
98
  --duro-size-dialog-md: var(--dialogMd-x1yjoj5l);
83
99
  --duro-size-dialog-sm: var(--dialogSm-x16fibl1);
84
100
  --duro-size-divider: var(--divider-x34oj7m);
101
+ --duro-size-drop-zone-min-h: var(--dropZoneMinH-x9asgie);
85
102
  --duro-size-edge-fade: var(--edgeFade-x1a8srg4);
103
+ --duro-size-editor-min-h: var(--editorMinH-x7umtuv);
104
+ --duro-size-embed-w: var(--embedW-x1jprk4i);
105
+ --duro-size-field-min-w: var(--fieldMinW-x3410dk);
106
+ --duro-size-field-min-w-sm: var(--fieldMinWSm-x17qqf6g);
86
107
  --duro-size-glyph-md: var(--glyphMd-x1hz0jso);
87
108
  --duro-size-glyph-sm: var(--glyphSm-x17geiot);
88
109
  --duro-size-glyph-xs: var(--glyphXs-x7xktls);
89
110
  --duro-size-grid-col-md: var(--gridColMd-x1cjqdt9);
90
111
  --duro-size-grid-col-sm: var(--gridColSm-xzwpy92);
112
+ --duro-size-grid-col-xs: var(--gridColXs-x1uralsc);
113
+ --duro-size-handle: var(--handle-xt9m584);
91
114
  --duro-size-icon-button: var(--iconButton-x16lr7a8);
92
115
  --duro-size-icon-button-sm: var(--iconButtonSm-xtjgrhy);
93
116
  --duro-size-icon-lg: var(--iconLg-x1lsumnr);
@@ -100,16 +123,29 @@
100
123
  --duro-size-label-min-w: var(--labelMinW-x1tnvsg3);
101
124
  --duro-size-list-max-h: var(--listMaxH-x1g3bmh3);
102
125
  --duro-size-list-max-h-sm: var(--listMaxHSm-xhny4oa);
126
+ --duro-size-meter-h: var(--meterH-x5xauib);
103
127
  --duro-size-nav-marker-h: var(--navMarkerH-xlc6r7a);
104
128
  --duro-size-nav-marker-w: var(--navMarkerW-x1swbkx4);
105
129
  --duro-size-page-lg: var(--pageLg-x393fnm);
106
130
  --duro-size-page-md: var(--pageMd-xloo57l);
107
131
  --duro-size-page-sm: var(--pageSm-x5j4ghi);
132
+ --duro-size-page-xl: var(--pageXl-xe1y5wy);
133
+ --duro-size-page-xs: var(--pageXs-xkx7b2k);
134
+ --duro-size-palette-min-w: var(--paletteMinW-x1514e6j);
108
135
  --duro-size-panel-lg: var(--panelLg-x19cpfjm);
109
136
  --duro-size-panel-md: var(--panelMd-x11x23mn);
110
137
  --duro-size-panel-sm: var(--panelSm-x1ng1dcv);
138
+ --duro-size-placeholder-min-h: var(--placeholderMinH-xy0p02w);
139
+ --duro-size-popover-w: var(--popoverW-xf1f07);
140
+ --duro-size-popover-w-sm: var(--popoverWSm-x17g62mi);
141
+ --duro-size-popup-max-w: var(--popupMaxW-x16p43ce);
111
142
  --duro-size-popup-min-w: var(--popupMinW-xzyp04);
143
+ --duro-size-preview-max-h: var(--previewMaxH-x1phh3ob);
144
+ --duro-size-readout-w: var(--readoutW-xi5rn1i);
112
145
  --duro-size-scrollbar: var(--scrollbar-xppi9bb);
146
+ --duro-size-sidebar-w: var(--sidebarW-x16fh60r);
147
+ --duro-size-skeleton-chip-w: var(--skeletonChipW-xmw24hn);
148
+ --duro-size-slider-w: var(--sliderW-xvcfp7i);
113
149
  --duro-size-spinner-lg: var(--spinnerLg-x1lgp9p9);
114
150
  --duro-size-spinner-md: var(--spinnerMd-x11a4rba);
115
151
  --duro-size-spinner-sm: var(--spinnerSm-xoj3xel);
@@ -120,6 +156,7 @@
120
156
  --duro-size-switch-track-w: var(--switchTrackW-xcah3tt);
121
157
  --duro-size-tab-indicator: var(--tabIndicator-xeswvk3);
122
158
  --duro-size-toast-max-w: var(--toastMaxW-x1po6n0z);
159
+ --duro-size-toolbar-h: var(--toolbarH-x16tj5lc);
123
160
  --duro-size-touch-target: var(--touchTarget-x1u5badx);
124
161
  /* borders */
125
162
  --duro-border-accent: var(--accent-x1eiysj0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@duro-app/tokens",
3
- "version": "5.1.0",
3
+ "version": "5.2.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/keys.ts CHANGED
@@ -55,7 +55,7 @@ export const RADII_PX = {
55
55
  full: 9999,
56
56
  } as const
57
57
 
58
- export const SHADOW_KEYS = ['sm', 'md', 'lg'] as const
58
+ export const SHADOW_KEYS = ['sm', 'md', 'lg', 'dropReady', 'dropOver'] as const
59
59
  export type ShadowToken = (typeof SHADOW_KEYS)[number]
60
60
 
61
61
  // Mirrors tokens/motion.css.ts `duration`, as numbers for setTimeout use.
@@ -119,6 +119,37 @@ export const SIZE_KEYS = [
119
119
  'pageSm',
120
120
  'pageMd',
121
121
  'pageLg',
122
+ 'sidebarW',
123
+ 'pageXs',
124
+ 'pageXl',
125
+ 'asideW',
126
+ 'gridColXs',
127
+ 'fieldMinWSm',
128
+ 'fieldMinW',
129
+ 'popoverWSm',
130
+ 'popoverW',
131
+ 'popupMaxW',
132
+ 'meterH',
133
+ 'skeletonChipW',
134
+ 'dropZoneMinH',
135
+ 'canvasMinH',
136
+ 'editorMinH',
137
+ 'toolbarH',
138
+ 'embedW',
139
+ 'colorPickerW',
140
+ 'colorAreaH',
141
+ 'colorTrackH',
142
+ 'colorSwatch',
143
+ 'colorPreviewH',
144
+ 'handle',
145
+ 'chip',
146
+ 'placeholderMinH',
147
+ 'previewMaxH',
148
+ 'barH',
149
+ 'readoutW',
150
+ 'sliderW',
151
+ 'paletteMinW',
152
+ 'deviceBarW',
122
153
  ] as const
123
154
  export type SizeToken = (typeof SIZE_KEYS)[number]
124
155
 
@@ -172,6 +203,37 @@ export const SIZES_PX = {
172
203
  pageSm: 600,
173
204
  pageMd: 800,
174
205
  pageLg: 1200,
206
+ sidebarW: 240,
207
+ pageXs: 480,
208
+ pageXl: 1440,
209
+ asideW: 320,
210
+ gridColXs: 200,
211
+ fieldMinWSm: 80,
212
+ fieldMinW: 160,
213
+ popoverWSm: 240,
214
+ popoverW: 320,
215
+ popupMaxW: 280,
216
+ meterH: 6,
217
+ skeletonChipW: 96,
218
+ dropZoneMinH: 128,
219
+ canvasMinH: 480,
220
+ editorMinH: 160,
221
+ toolbarH: 36,
222
+ embedW: 550,
223
+ colorPickerW: 196,
224
+ colorAreaH: 150,
225
+ colorTrackH: 12,
226
+ colorSwatch: 20,
227
+ colorPreviewH: 22,
228
+ handle: 16,
229
+ chip: 24,
230
+ placeholderMinH: 80,
231
+ previewMaxH: 320,
232
+ barH: 4,
233
+ readoutW: 40,
234
+ sliderW: 96,
235
+ paletteMinW: 96,
236
+ deviceBarW: 96,
175
237
  } as const
176
238
 
177
239
  export const BORDER_KEYS = [
@@ -254,6 +316,8 @@ export const SHADOWS = {
254
316
  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',
255
317
  md: '0 4px 12px rgba(0, 0, 0, 0.4)',
256
318
  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
319
+ dropReady: 'inset 0 0 0 1px #333333',
320
+ dropOver: 'inset 0 0 0 2px #6aaffc',
257
321
  } as const
258
322
 
259
323
  // Mirrors tokens/motion.css.ts `easing` verbatim.
package/src/raw.ts CHANGED
@@ -43,6 +43,10 @@ export type RawColors = {
43
43
  inverseBorder: string
44
44
  inverseBorderHover: string
45
45
  fixedLight: string
46
+ overlayLight: string
47
+ contrastSurface: string
48
+ onContrastSurface: string
49
+ contrastBorder: string
46
50
  }
47
51
 
48
52
  // Numeric maps for consumers that load only the compiled `/raw` entry (e.g.
@@ -135,6 +139,37 @@ export const SIZES_PX = {
135
139
  pageSm: 600,
136
140
  pageMd: 800,
137
141
  pageLg: 1200,
142
+ sidebarW: 240,
143
+ pageXs: 480,
144
+ pageXl: 1440,
145
+ asideW: 320,
146
+ gridColXs: 200,
147
+ fieldMinWSm: 80,
148
+ fieldMinW: 160,
149
+ popoverWSm: 240,
150
+ popoverW: 320,
151
+ popupMaxW: 280,
152
+ meterH: 6,
153
+ skeletonChipW: 96,
154
+ dropZoneMinH: 128,
155
+ canvasMinH: 480,
156
+ editorMinH: 160,
157
+ toolbarH: 36,
158
+ embedW: 550,
159
+ colorPickerW: 196,
160
+ colorAreaH: 150,
161
+ colorTrackH: 12,
162
+ colorSwatch: 20,
163
+ colorPreviewH: 22,
164
+ handle: 16,
165
+ chip: 24,
166
+ placeholderMinH: 80,
167
+ previewMaxH: 320,
168
+ barH: 4,
169
+ readoutW: 40,
170
+ sliderW: 96,
171
+ paletteMinW: 96,
172
+ deviceBarW: 96,
138
173
  } as const
139
174
 
140
175
  // Email-only measures: no CSS variable (mail clients cannot read them) and not
@@ -176,6 +211,10 @@ export const darkColors: RawColors = {
176
211
  inverseBorder: 'rgba(0, 0, 0, 0.55)',
177
212
  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
178
213
  fixedLight: '#ffffff',
214
+ overlayLight: 'rgba(255, 255, 255, 0.78)',
215
+ contrastSurface: '#f5f5f5',
216
+ onContrastSurface: '#1a1a1a',
217
+ contrastBorder: 'rgba(0, 0, 0, 0.42)',
179
218
  }
180
219
 
181
220
  // Light theme — matches the overrides in `themes/light.css.ts`.
@@ -213,6 +252,10 @@ export const lightColors: RawColors = {
213
252
  inverseBorder: 'rgba(0, 0, 0, 0.55)',
214
253
  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
215
254
  fixedLight: '#ffffff',
255
+ overlayLight: 'rgba(255, 255, 255, 0.78)',
256
+ contrastSurface: '#1a1a1a',
257
+ onContrastSurface: '#e5e5e5',
258
+ contrastBorder: 'rgba(255, 255, 255, 0.33)',
216
259
  }
217
260
 
218
261
  // High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.
@@ -250,4 +293,8 @@ export const highContrastColors: RawColors = {
250
293
  inverseBorder: 'rgba(0, 0, 0, 0.55)',
251
294
  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
252
295
  fixedLight: '#ffffff',
296
+ overlayLight: 'rgba(255, 255, 255, 0.78)',
297
+ contrastSurface: '#ffffff',
298
+ onContrastSurface: '#000000',
299
+ contrastBorder: 'rgba(0, 0, 0, 0.42)',
253
300
  }
package/src/themes/high-contrast.css.ts CHANGED
@@ -39,10 +39,21 @@ export const highContrastTheme = css.createTheme(colors, {
39
39
  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
40
40
  // A light that does not follow the theme (the Switch knob).
41
41
  fixedLight: '#ffffff',
42
+ // A fixed translucent white over content (the light counterpart of scrim).
43
+ overlayLight: 'rgba(255, 255, 255, 0.78)',
44
+ // The opposite tone of the theme: a surface that stands out from the page
45
+ // (toasts, coach marks), with its own text colour. Not the fixed inverse*
46
+ // overlays above, which sit on an accent fill.
47
+ contrastSurface: '#ffffff',
48
+ onContrastSurface: '#000000',
49
+ // A border on contrastSurface, at least 3:1 against it (non-text).
50
+ contrastBorder: 'rgba(0, 0, 0, 0.42)',
42
51
  })
43
52
 
44
53
  export const highContrastShadows = css.createTheme(shadows, {
45
54
  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',
46
55
  md: '0 4px 12px rgba(0, 0, 0, 0.7)',
47
56
  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',
57
+ dropReady: 'inset 0 0 0 1px #555555',
58
+ dropOver: 'inset 0 0 0 2px #60a5fa',
48
59
  })
package/src/themes/light.css.ts CHANGED
@@ -39,10 +39,21 @@ export const lightTheme = css.createTheme(colors, {
39
39
  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
40
40
  // A light that does not follow the theme (the Switch knob).
41
41
  fixedLight: '#ffffff',
42
+ // A fixed translucent white over content (the light counterpart of scrim).
43
+ overlayLight: 'rgba(255, 255, 255, 0.78)',
44
+ // The opposite tone of the theme: a surface that stands out from the page
45
+ // (toasts, coach marks), with its own text colour. Not the fixed inverse*
46
+ // overlays above, which sit on an accent fill.
47
+ contrastSurface: '#1a1a1a',
48
+ onContrastSurface: '#e5e5e5',
49
+ // A border on contrastSurface, at least 3:1 against it (non-text).
50
+ contrastBorder: 'rgba(255, 255, 255, 0.33)',
42
51
  })
43
52
 
44
53
  export const lightShadows = css.createTheme(shadows, {
45
54
  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',
46
55
  md: '0 4px 12px rgba(0, 0, 0, 0.12)',
47
56
  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',
57
+ dropReady: 'inset 0 0 0 1px #d4d4d4',
58
+ dropOver: 'inset 0 0 0 2px #1e40af',
48
59
  })
package/src/tokens/colors.css.ts CHANGED
@@ -53,4 +53,13 @@ export const colors = css.defineVars({
53
53
  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
54
54
  // A light that does not follow the theme (the Switch knob).
55
55
  fixedLight: '#ffffff',
56
+ // A fixed translucent white over content (the light counterpart of scrim).
57
+ overlayLight: 'rgba(255, 255, 255, 0.78)',
58
+ // The opposite tone of the theme: a surface that stands out from the page
59
+ // (toasts, coach marks), with its own text colour. Not the fixed inverse*
60
+ // overlays above, which sit on an accent fill.
61
+ contrastSurface: '#f5f5f5',
62
+ onContrastSurface: '#1a1a1a',
63
+ // A border on contrastSurface, at least 3:1 against it (non-text).
64
+ contrastBorder: 'rgba(0, 0, 0, 0.42)',
56
65
  })
package/src/tokens/shadows.css.ts CHANGED
@@ -4,4 +4,10 @@ export const shadows = css.defineVars({
4
4
  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',
5
5
  md: '0 4px 12px rgba(0, 0, 0, 0.4)',
6
6
  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
7
+ // DragDrop's drop-target rings: borders.hairline in colors.border on every
8
+ // zone that can receive, borders.strong in colors.accent on the one under the
9
+ // pointer. Literal per theme (StyleX needs inline literals); the drift check
10
+ // rebuilds each from the palette. Not focus: focus stays on outlines.
11
+ dropReady: 'inset 0 0 0 1px #333333',
12
+ dropOver: 'inset 0 0 0 2px #6aaffc',
7
13
  })
package/src/tokens/sizes.css.ts CHANGED
@@ -49,4 +49,35 @@ export const sizes = css.defineVars({
49
49
  pageSm: '600px',
50
50
  pageMd: '800px',
51
51
  pageLg: '1200px',
52
+ sidebarW: '240px',
53
+ pageXs: '480px',
54
+ pageXl: '1440px',
55
+ asideW: '320px',
56
+ gridColXs: '200px',
57
+ fieldMinWSm: '80px',
58
+ fieldMinW: '160px',
59
+ popoverWSm: '240px',
60
+ popoverW: '320px',
61
+ popupMaxW: '280px',
62
+ meterH: '6px',
63
+ skeletonChipW: '96px',
64
+ dropZoneMinH: '128px',
65
+ canvasMinH: '480px',
66
+ editorMinH: '160px',
67
+ toolbarH: '36px',
68
+ embedW: '550px',
69
+ colorPickerW: '196px',
70
+ colorAreaH: '150px',
71
+ colorTrackH: '12px',
72
+ colorSwatch: '20px',
73
+ colorPreviewH: '22px',
74
+ handle: '16px',
75
+ chip: '24px',
76
+ placeholderMinH: '80px',
77
+ previewMaxH: '320px',
78
+ barH: '4px',
79
+ readoutW: '40px',
80
+ sliderW: '96px',
81
+ paletteMinW: '96px',
82
+ deviceBarW: '96px',
52
83
  })