@duro-app/tokens 5.12.0 → 5.14.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 (25) hide show
  1. package/dist/index.js +33 -6
  2. package/dist/index.js.map +1 -1
  3. package/dist/keys.d.ts +3 -1
  4. package/dist/keys.d.ts.map +1 -1
  5. package/dist/mockup.css +77 -0
  6. package/dist/raw.d.ts +27 -0
  7. package/dist/raw.d.ts.map +1 -1
  8. package/dist/raw.js +94 -17
  9. package/dist/raw.js.map +1 -1
  10. package/dist/themes/high-contrast.css.d.ts +25 -0
  11. package/dist/themes/high-contrast.css.d.ts.map +1 -1
  12. package/dist/themes/light.css.d.ts +25 -0
  13. package/dist/themes/light.css.d.ts.map +1 -1
  14. package/dist/tokens/colors.css.d.ts +25 -0
  15. package/dist/tokens/colors.css.d.ts.map +1 -1
  16. package/dist/tokens/sizes.css.d.ts +2 -0
  17. package/dist/tokens/sizes.css.d.ts.map +1 -1
  18. package/dist/vars.css +27 -0
  19. package/package.json +1 -1
  20. package/src/keys.ts +4 -0
  21. package/src/raw.ts +102 -0
  22. package/src/themes/high-contrast.css.ts +25 -0
  23. package/src/themes/light.css.ts +25 -0
  24. package/src/tokens/colors.css.ts +41 -0
  25. package/src/tokens/sizes.css.ts +3 -0
package/dist/index.js CHANGED
@@ -53,6 +53,31 @@ const e = {
53
53
  contrastSurface: "var(--contrastSurface-x1i512m4)",
54
54
  onContrastSurface: "var(--onContrastSurface-x1dm0pi1)",
55
55
  contrastBorder: "var(--contrastBorder-x1g9he7g)",
56
+ bgInset: "var(--bgInset-x1985064)",
57
+ bgElevated: "var(--bgElevated-x5jb1ex)",
58
+ bgSelected: "var(--bgSelected-x1tz8xx4)",
59
+ pressOverlay: "var(--pressOverlay-xwcyaps)",
60
+ ripple: "var(--ripple-x4boxpx)",
61
+ bgSectionTint: "var(--bgSectionTint-x1jltjee)",
62
+ borderSubtle: "var(--borderSubtle-xazur3r)",
63
+ borderStrong: "var(--borderStrong-x1hk6q8z)",
64
+ surfaceHighlight: "var(--surfaceHighlight-xaxphpr)",
65
+ textSubtle: "var(--textSubtle-x1v06cot)",
66
+ textDisabled: "var(--textDisabled-x1h1b3kn)",
67
+ neutral: "var(--neutral-xomrn58)",
68
+ neutralBg: "var(--neutralBg-x19rt8v4)",
69
+ neutralBorder: "var(--neutralBorder-x5p3bn0)",
70
+ neutralText: "var(--neutralText-x1xjscs0)",
71
+ active: "var(--active-xs7lmjr)",
72
+ activeBg: "var(--activeBg-x35bva0)",
73
+ activeBorder: "var(--activeBorder-x16mx242)",
74
+ activeText: "var(--activeText-x1m8q3u3)",
75
+ accentDisabled: "var(--accentDisabled-x1u9f29m)",
76
+ segmentTrack: "var(--segmentTrack-x1bxdgyc)",
77
+ segmentActive: "var(--segmentActive-xiwz7t0)",
78
+ scrimSoft: "var(--scrimSoft-x1hszvdp)",
79
+ scrimStrong: "var(--scrimStrong-x1bj3i5v)",
80
+ onScrimMuted: "var(--onScrimMuted-xqxo091)",
56
81
  __varGroupHash__: "xjvd03b"
57
82
  }, t = {
58
83
  xs: "var(--xs-xxfyjsd)",
@@ -159,6 +184,8 @@ const e = {
159
184
  placeholderMinH: "var(--placeholderMinH-xy0p02w)",
160
185
  previewMaxH: "var(--previewMaxH-x1phh3ob)",
161
186
  barH: "var(--barH-x1oc8exn)",
187
+ sheetGrabberW: "var(--sheetGrabberW-xqnf4ck)",
188
+ sheetGrabberH: "var(--sheetGrabberH-x1mzwlvd)",
162
189
  readoutW: "var(--readoutW-xi5rn1i)",
163
190
  sliderW: "var(--sliderW-xvcfp7i)",
164
191
  paletteMinW: "var(--paletteMinW-x1514e6j)",
@@ -387,14 +414,14 @@ const e = {
387
414
  easeOut: "var(--easeOut-x1dtgzac)",
388
415
  easeIn: "var(--easeIn-xxaysck)",
389
416
  __varGroupHash__: "x1unb8zz"
390
- }, k = {
391
- xjvd03b: "x14i52nv xjvd03b",
392
- $$css: !0
393
417
  }, m = {
418
+ xjvd03b: "xoev3oz xjvd03b",
419
+ $$css: !0
420
+ }, k = {
394
421
  x13v825q: "x1jk1o70 x13v825q",
395
422
  $$css: !0
396
423
  }, S = {
397
- xjvd03b: "xorrbe1 xjvd03b",
424
+ xjvd03b: "x1ud4188 xjvd03b",
398
425
  $$css: !0
399
426
  }, u = {
400
427
  x13v825q: "xc8o4hb x13v825q",
@@ -412,8 +439,8 @@ export {
412
439
  S as highContrastTheme,
413
440
  s as layers,
414
441
  l as layoutSpacing,
415
- m as lightShadows,
416
- k as lightTheme,
442
+ k as lightShadows,
443
+ m as lightTheme,
417
444
  i as microSpacing,
418
445
  n as radii,
419
446
  h as shadows,
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/layers.css.ts","../src/tokens/effects.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 // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#c084fc',\n highlightBg: 'rgba(192, 132, 252, 0.1)',\n highlightBorder: 'rgba(192, 132, 252, 0.3)',\n highlightText: '#d8b4fe',\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 // The fixed black, the same in every theme (video letterbox).\n fixedDark: '#000000',\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 // A small square thumbnail (a file/media row preview).\n thumbSm: '40px',\n // Minimum width of a media grid tile.\n mediaTileMinW: '108px',\n // Upper bound a glyph scales up to inside its tile.\n glyphClampMax: '160px',\n // Width of a mm:ss time readout, so digits do not shift the layout.\n timeReadoutW: '74px',\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 // Calendar grids: the time-label column and the day-header row.\n timeGutterW: '64px',\n dayHeaderH: '46px',\n // Timeline: the row-label column beside the date track.\n timelineLabelW: '180px',\n // AppShell's bar below its collapse point: a touch-target Menu button\n // between spacing.sm above and below, plus the hairline under it.\n appBarH: '61px',\n // Drag-ghost thumbnail: the small preview image that follows the pointer.\n dragThumbW: '132px',\n dragThumbH: '99px',\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'\nimport type {LayerToken} from '../keys'\n\n// The z-index scale. Values are unitless strings so `--duro-layer-*` exists\n// for plain CSS; React Native takes a number, so a native overlay reads the\n// numeric LAYERS map from `@duro-app/tokens/keys` instead.\n//\n// They only compete inside one stacking context. Dialog, Drawer, the popups\n// and the toast region all portal into the ThemeProvider mount (`portal`),\n// and this is the order they keep there.\n// StyleX types a var by its literal, so string values would type every layer\n// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS\n// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has\n// no runtime effect (StyleX and the drift check read straight through it).\ntype LayerValue = ReturnType<typeof css.types.integer<number>>\n\nexport const layers = css.defineVars({\n // A focused or sticky part above its siblings (a joined group's focus ring,\n // a scrollbar, a sticky table header).\n raised: '1',\n // Floating chrome over the page: Tooltip, ActionBar.\n floating: '50',\n // A floating surface that must cover another floating one, outside a modal:\n // a link editor over a selection format bar. Pair it with `popoverRaised`\n // and pick by `useInModal()` (a Popover does it with `raised`). It covers a\n // sibling floating surface, never a modal.\n floatingRaised: '60',\n // A modal's backdrop.\n overlay: '1000',\n // A modal's panel (Dialog, Drawer).\n modal: '1001',\n // Chrome that sits on a modal-level surface, above that surface's own\n // parts: a sheet's toolbar over its bottom bar. Still below a Popover.\n modalRaised: '1002',\n // A Popover inside a Dialog or Drawer: above that modal, below the popups\n // (a Select, a Menu) and the Select click-catcher opened from inside it.\n // Outside a modal a Popover is `floating`, so a modal opened later covers it.\n popover: '1040',\n // `floatingRaised` inside a Dialog or Drawer: over a Popover there, under\n // a popup's click-catcher and the popup itself.\n popoverRaised: '1041',\n // A popup's click-catcher, under the popup itself.\n popupBackdrop: '1049',\n // Popups: Select, Listbox, Menu — above a modal or Popover they open from.\n popup: '1050',\n // The toast region: above popups and modals.\n toast: '1060',\n // The ThemeProvider portal mount that holds all of the above.\n portal: '1100',\n} as unknown as Readonly<Record<LayerToken, LayerValue>>)\n","import {css} from 'react-strict-dom'\n\n// Visual effects. Not themed.\n//\n// overlayBlur: the blur behind a modal's backdrop (a command palette, a\n// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter\n// (or filter) on an ancestor becomes the containing block for every fixed\n// descendant, so a Dialog or Drawer opened inside it is positioned against\n// that ancestor instead of the viewport.\n//\n// surfaceBlur: a frosted surface over imagery (a pill or a chip on a photo).\n// The same warning holds: put it ONLY on that surface element itself, never on\n// a wrapper that holds a Dialog, a Drawer or any fixed descendant.\nexport const effects = css.defineVars({\n overlayBlur: 'blur(2px)',\n surfaceBlur: 'blur(6px)',\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\n // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#6b21a8',\n highlightBg: 'rgba(107, 33, 168, 0.08)',\n highlightBorder: 'rgba(107, 33, 168, 0.3)',\n highlightText: '#581c87',\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 fixedDark: '#000000',\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\n // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#d8b4fe',\n highlightBg: 'rgba(216, 180, 254, 0.15)',\n highlightBorder: 'rgba(216, 180, 254, 0.5)',\n highlightText: '#e9d5ff',\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 fixedDark: '#000000',\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","layers","effects","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/layers.css.ts","../src/tokens/effects.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 // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#c084fc',\n highlightBg: 'rgba(192, 132, 252, 0.1)',\n highlightBorder: 'rgba(192, 132, 252, 0.3)',\n highlightText: '#d8b4fe',\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 // The fixed black, the same in every theme (video letterbox).\n fixedDark: '#000000',\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 // Gap tokens (5.14, plan N0 C0 inventory). A recessed well below its surface: code, editor, input-like insets.\n bgInset: '#0a0a0a',\n // A surface lifted above its parent (a selected or floating card).\n bgElevated: '#242424',\n // Selected rows and selectable containers: the accent hue, stronger than activeBg.\n bgSelected: 'rgba(106, 175, 252, 0.15)',\n // Drawn over a pressed surface (not inverseFill, which sits on an accent fill).\n pressOverlay: 'rgba(255, 255, 255, 0.08)',\n // A touch ripple.\n ripple: 'rgba(255, 255, 255, 0.12)',\n // A hair of tint that separates grouped sections.\n bgSectionTint: 'rgba(255, 255, 255, 0.03)',\n // Low-emphasis hairlines, below border.\n borderSubtle: '#242424',\n // Higher-emphasis outlines, above border.\n borderStrong: '#555555',\n // The top-edge highlight on a bounded surface.\n surfaceHighlight: 'rgba(255, 255, 255, 0.06)',\n // The lowest-emphasis readable text, below textMuted (at least 4.5:1 on bg).\n textSubtle: '#8a8a8a',\n // Text of a disabled control (not required to meet contrast).\n textDisabled: '#6b6b6b',\n // A neutral status (inactive, unknown): the status family without a status meaning.\n neutral: '#a3a3a3',\n neutralBg: 'rgba(163, 163, 163, 0.1)',\n neutralBorder: 'rgba(163, 163, 163, 0.3)',\n neutralText: '#d4d4d4',\n // The active choice: chips, toolbar pills, segmented options (the accent family).\n active: '#6aaffc',\n activeBg: 'rgba(106, 175, 252, 0.1)',\n activeBorder: 'rgba(106, 175, 252, 0.3)',\n activeText: '#93c5fd',\n // A disabled primary fill, where opacity would show what is behind it.\n accentDisabled: 'rgba(106, 175, 252, 0.4)',\n // A segmented control's track, and its raised active segment.\n segmentTrack: 'rgba(255, 255, 255, 0.06)',\n segmentActive: '#333333',\n // Lighter and heavier scrims beside scrim, and secondary text on one.\n scrimSoft: 'rgba(0, 0, 0, 0.2)',\n scrimStrong: 'rgba(0, 0, 0, 0.6)',\n onScrimMuted: 'rgba(255, 255, 255, 0.72)',\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 // A small square thumbnail (a file/media row preview).\n thumbSm: '40px',\n // Minimum width of a media grid tile.\n mediaTileMinW: '108px',\n // Upper bound a glyph scales up to inside its tile.\n glyphClampMax: '160px',\n // Width of a mm:ss time readout, so digits do not shift the layout.\n timeReadoutW: '74px',\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 // Bottom-sheet grabber (Drawer snapPoints).\n sheetGrabberW: '40px',\n sheetGrabberH: '4px',\n readoutW: '40px',\n sliderW: '96px',\n paletteMinW: '96px',\n deviceBarW: '96px',\n // Calendar grids: the time-label column and the day-header row.\n timeGutterW: '64px',\n dayHeaderH: '46px',\n // Timeline: the row-label column beside the date track.\n timelineLabelW: '180px',\n // AppShell's bar below its collapse point: a touch-target Menu button\n // between spacing.sm above and below, plus the hairline under it.\n appBarH: '61px',\n // Drag-ghost thumbnail: the small preview image that follows the pointer.\n dragThumbW: '132px',\n dragThumbH: '99px',\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'\nimport type {LayerToken} from '../keys'\n\n// The z-index scale. Values are unitless strings so `--duro-layer-*` exists\n// for plain CSS; React Native takes a number, so a native overlay reads the\n// numeric LAYERS map from `@duro-app/tokens/keys` instead.\n//\n// They only compete inside one stacking context. Dialog, Drawer, the popups\n// and the toast region all portal into the ThemeProvider mount (`portal`),\n// and this is the order they keep there.\n// StyleX types a var by its literal, so string values would type every layer\n// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS\n// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has\n// no runtime effect (StyleX and the drift check read straight through it).\ntype LayerValue = ReturnType<typeof css.types.integer<number>>\n\nexport const layers = css.defineVars({\n // A focused or sticky part above its siblings (a joined group's focus ring,\n // a scrollbar, a sticky table header).\n raised: '1',\n // Floating chrome over the page: Tooltip, ActionBar.\n floating: '50',\n // A floating surface that must cover another floating one, outside a modal:\n // a link editor over a selection format bar. Pair it with `popoverRaised`\n // and pick by `useInModal()` (a Popover does it with `raised`). It covers a\n // sibling floating surface, never a modal.\n floatingRaised: '60',\n // A modal's backdrop.\n overlay: '1000',\n // A modal's panel (Dialog, Drawer).\n modal: '1001',\n // Chrome that sits on a modal-level surface, above that surface's own\n // parts: a sheet's toolbar over its bottom bar. Still below a Popover.\n modalRaised: '1002',\n // A Popover inside a Dialog or Drawer: above that modal, below the popups\n // (a Select, a Menu) and the Select click-catcher opened from inside it.\n // Outside a modal a Popover is `floating`, so a modal opened later covers it.\n popover: '1040',\n // `floatingRaised` inside a Dialog or Drawer: over a Popover there, under\n // a popup's click-catcher and the popup itself.\n popoverRaised: '1041',\n // A popup's click-catcher, under the popup itself.\n popupBackdrop: '1049',\n // Popups: Select, Listbox, Menu — above a modal or Popover they open from.\n popup: '1050',\n // The toast region: above popups and modals.\n toast: '1060',\n // The ThemeProvider portal mount that holds all of the above.\n portal: '1100',\n} as unknown as Readonly<Record<LayerToken, LayerValue>>)\n","import {css} from 'react-strict-dom'\n\n// Visual effects. Not themed.\n//\n// overlayBlur: the blur behind a modal's backdrop (a command palette, a\n// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter\n// (or filter) on an ancestor becomes the containing block for every fixed\n// descendant, so a Dialog or Drawer opened inside it is positioned against\n// that ancestor instead of the viewport.\n//\n// surfaceBlur: a frosted surface over imagery (a pill or a chip on a photo).\n// The same warning holds: put it ONLY on that surface element itself, never on\n// a wrapper that holds a Dialog, a Drawer or any fixed descendant.\nexport const effects = css.defineVars({\n overlayBlur: 'blur(2px)',\n surfaceBlur: 'blur(6px)',\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\n // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#6b21a8',\n highlightBg: 'rgba(107, 33, 168, 0.08)',\n highlightBorder: 'rgba(107, 33, 168, 0.3)',\n highlightText: '#581c87',\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 fixedDark: '#000000',\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 bgInset: '#f0f0f0',\n bgElevated: '#ffffff',\n bgSelected: 'rgba(30, 64, 175, 0.12)',\n pressOverlay: 'rgba(0, 0, 0, 0.08)',\n ripple: 'rgba(0, 0, 0, 0.12)',\n bgSectionTint: 'rgba(0, 0, 0, 0.03)',\n borderSubtle: '#ebebeb',\n borderStrong: '#a3a3a3',\n surfaceHighlight: 'rgba(255, 255, 255, 0.7)',\n textSubtle: '#6b6b6b',\n textDisabled: '#a3a3a3',\n neutral: '#525252',\n neutralBg: 'rgba(82, 82, 82, 0.08)',\n neutralBorder: 'rgba(82, 82, 82, 0.3)',\n neutralText: '#404040',\n active: '#1e40af',\n activeBg: 'rgba(30, 64, 175, 0.08)',\n activeBorder: 'rgba(30, 64, 175, 0.3)',\n activeText: '#1e40af',\n accentDisabled: 'rgba(30, 64, 175, 0.4)',\n segmentTrack: 'rgba(0, 0, 0, 0.06)',\n segmentActive: '#ffffff',\n scrimSoft: 'rgba(0, 0, 0, 0.2)',\n scrimStrong: 'rgba(0, 0, 0, 0.6)',\n onScrimMuted: 'rgba(255, 255, 255, 0.72)',\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\n // Highlight — a non-status accent (a category, an intent); no status meaning.\n highlight: '#d8b4fe',\n highlightBg: 'rgba(216, 180, 254, 0.15)',\n highlightBorder: 'rgba(216, 180, 254, 0.5)',\n highlightText: '#e9d5ff',\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 fixedDark: '#000000',\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 bgInset: '#0a0a0a',\n bgElevated: '#1a1a1a',\n bgSelected: 'rgba(96, 165, 250, 0.25)',\n pressOverlay: 'rgba(255, 255, 255, 0.15)',\n ripple: 'rgba(255, 255, 255, 0.2)',\n bgSectionTint: 'rgba(255, 255, 255, 0.06)',\n borderSubtle: '#333333',\n borderStrong: '#888888',\n surfaceHighlight: 'rgba(255, 255, 255, 0.15)',\n textSubtle: '#a3a3a3',\n textDisabled: '#808080',\n neutral: '#d4d4d4',\n neutralBg: 'rgba(212, 212, 212, 0.15)',\n neutralBorder: 'rgba(212, 212, 212, 0.5)',\n neutralText: '#e5e5e5',\n active: '#60a5fa',\n activeBg: 'rgba(96, 165, 250, 0.15)',\n activeBorder: 'rgba(96, 165, 250, 0.5)',\n activeText: '#bfdbfe',\n accentDisabled: 'rgba(96, 165, 250, 0.5)',\n segmentTrack: 'rgba(255, 255, 255, 0.12)',\n segmentActive: '#333333',\n scrimSoft: 'rgba(0, 0, 0, 0.3)',\n scrimStrong: 'rgba(0, 0, 0, 0.7)',\n onScrimMuted: 'rgba(255, 255, 255, 0.72)',\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","layers","effects","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}
package/dist/keys.d.ts CHANGED
@@ -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", "thumbSm", "mediaTileMinW", "glyphClampMax", "timeReadoutW", "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", "timeGutterW", "dayHeaderH", "timelineLabelW", "appBarH", "dragThumbW", "dragThumbH"];
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", "thumbSm", "mediaTileMinW", "glyphClampMax", "timeReadoutW", "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", "sheetGrabberW", "sheetGrabberH", "readoutW", "sliderW", "paletteMinW", "deviceBarW", "timeGutterW", "dayHeaderH", "timelineLabelW", "appBarH", "dragThumbW", "dragThumbH"];
46
46
  export type SizeToken = (typeof SIZE_KEYS)[number];
47
47
  export declare const SIZES_PX: {
48
48
  readonly touchTarget: 44;
@@ -124,6 +124,8 @@ export declare const SIZES_PX: {
124
124
  readonly placeholderMinH: 80;
125
125
  readonly previewMaxH: 320;
126
126
  readonly barH: 4;
127
+ readonly sheetGrabberW: 40;
128
+ readonly sheetGrabberH: 4;
127
129
  readonly readoutW: 40;
128
130
  readonly sliderW: 96;
129
131
  readonly paletteMinW: 96;
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,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,6oCA0FZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FX,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;AAEV,eAAO,MAAM,UAAU,+JAab,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;;CAGV,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"}
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,+qCA4FZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FX,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;AAEV,eAAO,MAAM,UAAU,+JAab,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;;CAGV,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
@@ -14,11 +14,22 @@
14
14
  /* colors */
15
15
  --duro-color-accent: #6aaffc;
16
16
  --duro-color-accent-contrast: #000000;
17
+ --duro-color-accent-disabled: rgba(106, 175, 252, 0.4);
17
18
  --duro-color-accent-hover: #93c5fd;
19
+ --duro-color-active: #6aaffc;
20
+ --duro-color-active-bg: rgba(106, 175, 252, 0.1);
21
+ --duro-color-active-border: rgba(106, 175, 252, 0.3);
22
+ --duro-color-active-text: #93c5fd;
18
23
  --duro-color-bg: #0f0f0f;
19
24
  --duro-color-bg-card: #1a1a1a;
20
25
  --duro-color-bg-card-hover: #242424;
26
+ --duro-color-bg-elevated: #242424;
27
+ --duro-color-bg-inset: #0a0a0a;
28
+ --duro-color-bg-section-tint: rgba(255, 255, 255, 0.03);
29
+ --duro-color-bg-selected: rgba(106, 175, 252, 0.15);
21
30
  --duro-color-border: #333333;
31
+ --duro-color-border-strong: #555555;
32
+ --duro-color-border-subtle: #242424;
22
33
  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);
23
34
  --duro-color-contrast-surface: #f5f5f5;
24
35
  --duro-color-error: #f87171;
@@ -41,15 +52,29 @@
41
52
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
42
53
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
43
54
  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
55
+ --duro-color-neutral: #a3a3a3;
56
+ --duro-color-neutral-bg: rgba(163, 163, 163, 0.1);
57
+ --duro-color-neutral-border: rgba(163, 163, 163, 0.3);
58
+ --duro-color-neutral-text: #d4d4d4;
44
59
  --duro-color-on-contrast-surface: #1a1a1a;
60
+ --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);
45
61
  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);
62
+ --duro-color-press-overlay: rgba(255, 255, 255, 0.08);
63
+ --duro-color-ripple: rgba(255, 255, 255, 0.12);
46
64
  --duro-color-scrim: rgba(0, 0, 0, 0.4);
65
+ --duro-color-scrim-soft: rgba(0, 0, 0, 0.2);
66
+ --duro-color-scrim-strong: rgba(0, 0, 0, 0.6);
67
+ --duro-color-segment-active: #333333;
68
+ --duro-color-segment-track: rgba(255, 255, 255, 0.06);
47
69
  --duro-color-success: #22c55e;
48
70
  --duro-color-success-bg: rgba(34, 197, 94, 0.1);
49
71
  --duro-color-success-border: rgba(34, 197, 94, 0.3);
50
72
  --duro-color-success-text: #86efac;
73
+ --duro-color-surface-highlight: rgba(255, 255, 255, 0.06);
51
74
  --duro-color-text: #e5e5e5;
75
+ --duro-color-text-disabled: #6b6b6b;
52
76
  --duro-color-text-muted: #b0b0b0;
77
+ --duro-color-text-subtle: #8a8a8a;
53
78
  --duro-color-warning: #fbbf24;
54
79
  --duro-color-warning-bg: rgba(251, 191, 36, 0.1);
55
80
  --duro-color-warning-border: rgba(251, 191, 36, 0.3);
@@ -153,6 +178,8 @@
153
178
  --duro-size-preview-max-h: 320px;
154
179
  --duro-size-readout-w: 40px;
155
180
  --duro-size-scrollbar: 8px;
181
+ --duro-size-sheet-grabber-h: 4px;
182
+ --duro-size-sheet-grabber-w: 40px;
156
183
  --duro-size-sidebar-w: 240px;
157
184
  --duro-size-skeleton-chip-w: 96px;
158
185
  --duro-size-slider-w: 96px;
@@ -273,11 +300,22 @@
273
300
  /* colors */
274
301
  --duro-color-accent: #1e40af;
275
302
  --duro-color-accent-contrast: #ffffff;
303
+ --duro-color-accent-disabled: rgba(30, 64, 175, 0.4);
276
304
  --duro-color-accent-hover: #1a3799;
305
+ --duro-color-active: #1e40af;
306
+ --duro-color-active-bg: rgba(30, 64, 175, 0.08);
307
+ --duro-color-active-border: rgba(30, 64, 175, 0.3);
308
+ --duro-color-active-text: #1e40af;
277
309
  --duro-color-bg: #ffffff;
278
310
  --duro-color-bg-card: #f5f5f5;
279
311
  --duro-color-bg-card-hover: #ebebeb;
312
+ --duro-color-bg-elevated: #ffffff;
313
+ --duro-color-bg-inset: #f0f0f0;
314
+ --duro-color-bg-section-tint: rgba(0, 0, 0, 0.03);
315
+ --duro-color-bg-selected: rgba(30, 64, 175, 0.12);
280
316
  --duro-color-border: #d4d4d4;
317
+ --duro-color-border-strong: #a3a3a3;
318
+ --duro-color-border-subtle: #ebebeb;
281
319
  --duro-color-contrast-border: rgba(255, 255, 255, 0.33);
282
320
  --duro-color-contrast-surface: #1a1a1a;
283
321
  --duro-color-error: #991b1b;
@@ -300,15 +338,29 @@
300
338
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
301
339
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
302
340
  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
341
+ --duro-color-neutral: #525252;
342
+ --duro-color-neutral-bg: rgba(82, 82, 82, 0.08);
343
+ --duro-color-neutral-border: rgba(82, 82, 82, 0.3);
344
+ --duro-color-neutral-text: #404040;
303
345
  --duro-color-on-contrast-surface: #e5e5e5;
346
+ --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);
304
347
  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);
348
+ --duro-color-press-overlay: rgba(0, 0, 0, 0.08);
349
+ --duro-color-ripple: rgba(0, 0, 0, 0.12);
305
350
  --duro-color-scrim: rgba(0, 0, 0, 0.4);
351
+ --duro-color-scrim-soft: rgba(0, 0, 0, 0.2);
352
+ --duro-color-scrim-strong: rgba(0, 0, 0, 0.6);
353
+ --duro-color-segment-active: #ffffff;
354
+ --duro-color-segment-track: rgba(0, 0, 0, 0.06);
306
355
  --duro-color-success: #166534;
307
356
  --duro-color-success-bg: rgba(22, 101, 52, 0.08);
308
357
  --duro-color-success-border: rgba(22, 101, 52, 0.3);
309
358
  --duro-color-success-text: #14532d;
359
+ --duro-color-surface-highlight: rgba(255, 255, 255, 0.7);
310
360
  --duro-color-text: #1a1a1a;
361
+ --duro-color-text-disabled: #a3a3a3;
311
362
  --duro-color-text-muted: #4a4a4a;
363
+ --duro-color-text-subtle: #6b6b6b;
312
364
  --duro-color-warning: #92400e;
313
365
  --duro-color-warning-bg: rgba(146, 64, 14, 0.08);
314
366
  --duro-color-warning-border: rgba(146, 64, 14, 0.3);
@@ -326,11 +378,22 @@
326
378
  /* colors */
327
379
  --duro-color-accent: #60a5fa;
328
380
  --duro-color-accent-contrast: #000000;
381
+ --duro-color-accent-disabled: rgba(96, 165, 250, 0.5);
329
382
  --duro-color-accent-hover: #93c5fd;
383
+ --duro-color-active: #60a5fa;
384
+ --duro-color-active-bg: rgba(96, 165, 250, 0.15);
385
+ --duro-color-active-border: rgba(96, 165, 250, 0.5);
386
+ --duro-color-active-text: #bfdbfe;
330
387
  --duro-color-bg: #000000;
331
388
  --duro-color-bg-card: #111111;
332
389
  --duro-color-bg-card-hover: #1a1a1a;
390
+ --duro-color-bg-elevated: #1a1a1a;
391
+ --duro-color-bg-inset: #0a0a0a;
392
+ --duro-color-bg-section-tint: rgba(255, 255, 255, 0.06);
393
+ --duro-color-bg-selected: rgba(96, 165, 250, 0.25);
333
394
  --duro-color-border: #555555;
395
+ --duro-color-border-strong: #888888;
396
+ --duro-color-border-subtle: #333333;
334
397
  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);
335
398
  --duro-color-contrast-surface: #ffffff;
336
399
  --duro-color-error: #f87171;
@@ -353,15 +416,29 @@
353
416
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
354
417
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
355
418
  --duro-color-inverse-fill-hover: rgba(0, 0, 0, 0.18);
419
+ --duro-color-neutral: #d4d4d4;
420
+ --duro-color-neutral-bg: rgba(212, 212, 212, 0.15);
421
+ --duro-color-neutral-border: rgba(212, 212, 212, 0.5);
422
+ --duro-color-neutral-text: #e5e5e5;
356
423
  --duro-color-on-contrast-surface: #000000;
424
+ --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);
357
425
  --duro-color-overlay-light: rgba(255, 255, 255, 0.78);
426
+ --duro-color-press-overlay: rgba(255, 255, 255, 0.15);
427
+ --duro-color-ripple: rgba(255, 255, 255, 0.2);
358
428
  --duro-color-scrim: rgba(0, 0, 0, 0.4);
429
+ --duro-color-scrim-soft: rgba(0, 0, 0, 0.3);
430
+ --duro-color-scrim-strong: rgba(0, 0, 0, 0.7);
431
+ --duro-color-segment-active: #333333;
432
+ --duro-color-segment-track: rgba(255, 255, 255, 0.12);
359
433
  --duro-color-success: #4ade80;
360
434
  --duro-color-success-bg: rgba(74, 222, 128, 0.15);
361
435
  --duro-color-success-border: rgba(74, 222, 128, 0.5);
362
436
  --duro-color-success-text: #86efac;
437
+ --duro-color-surface-highlight: rgba(255, 255, 255, 0.15);
363
438
  --duro-color-text: #ffffff;
439
+ --duro-color-text-disabled: #808080;
364
440
  --duro-color-text-muted: #b0b0b0;
441
+ --duro-color-text-subtle: #a3a3a3;
365
442
  --duro-color-warning: #fcd34d;
366
443
  --duro-color-warning-bg: rgba(252, 211, 77, 0.15);
367
444
  --duro-color-warning-border: rgba(252, 211, 77, 0.5);
package/dist/raw.d.ts CHANGED
@@ -41,6 +41,31 @@ export type RawColors = {
41
41
  contrastSurface: string;
42
42
  onContrastSurface: string;
43
43
  contrastBorder: string;
44
+ bgInset: string;
45
+ bgElevated: string;
46
+ bgSelected: string;
47
+ pressOverlay: string;
48
+ ripple: string;
49
+ bgSectionTint: string;
50
+ borderSubtle: string;
51
+ borderStrong: string;
52
+ surfaceHighlight: string;
53
+ textSubtle: string;
54
+ textDisabled: string;
55
+ neutral: string;
56
+ neutralBg: string;
57
+ neutralBorder: string;
58
+ neutralText: string;
59
+ active: string;
60
+ activeBg: string;
61
+ activeBorder: string;
62
+ activeText: string;
63
+ accentDisabled: string;
64
+ segmentTrack: string;
65
+ segmentActive: string;
66
+ scrimSoft: string;
67
+ scrimStrong: string;
68
+ onScrimMuted: string;
44
69
  };
45
70
  export declare const SPACING_PX: {
46
71
  readonly xs: 4;
@@ -174,6 +199,8 @@ export declare const SIZES_PX: {
174
199
  readonly placeholderMinH: 80;
175
200
  readonly previewMaxH: 320;
176
201
  readonly barH: 4;
202
+ readonly sheetGrabberW: 40;
203
+ readonly sheetGrabberH: 4;
177
204
  readonly readoutW: 40;
178
205
  readonly sliderW: 96;
179
206
  readonly paletteMinW: 96;
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,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,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,SAAS,EAAE,MAAM,CAAA;IACjB,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,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAGV,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FX,CAAA;AAIV,eAAO,MAAM,QAAQ;;;CAA+C,CAAA;AAGpE,eAAO,MAAM,UAAU,EAAE,SA2CxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SA2CzB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,SA2ChC,CAAA"}
1
+ {"version":3,"file":"raw.d.ts","sourceRoot":"","sources":["../src/raw.ts"],"names":[],"mappings":"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"}
package/dist/raw.js CHANGED
@@ -21,14 +21,14 @@ const r = {
21
21
  fontSizeLg: 1.125,
22
22
  fontSizeXl: 1.25,
23
23
  fontSizeHeading: 1.5
24
- }, o = {
24
+ }, t = {
25
25
  hairline: 1,
26
26
  strong: 2,
27
27
  accent: 3,
28
28
  focusRing: 2,
29
29
  focusOffset: 2,
30
30
  focusOffsetSm: 1
31
- }, i = {
31
+ }, g = {
32
32
  raised: 1,
33
33
  floating: 50,
34
34
  floatingRaised: 60,
@@ -41,10 +41,10 @@ const r = {
41
41
  popup: 1050,
42
42
  toast: 1060,
43
43
  portal: 1100
44
- }, t = {
44
+ }, o = {
45
45
  overlayBlur: "blur(2px)",
46
46
  surfaceBlur: "blur(6px)"
47
- }, g = {
47
+ }, i = {
48
48
  touchTarget: 44,
49
49
  controlSm: 28,
50
50
  controlMd: 39,
@@ -124,6 +124,8 @@ const r = {
124
124
  placeholderMinH: 80,
125
125
  previewMaxH: 320,
126
126
  barH: 4,
127
+ sheetGrabberW: 40,
128
+ sheetGrabberH: 4,
127
129
  readoutW: 40,
128
130
  sliderW: 96,
129
131
  paletteMinW: 96,
@@ -134,10 +136,10 @@ const r = {
134
136
  appBarH: 61,
135
137
  dragThumbW: 132,
136
138
  dragThumbH: 99
137
- }, n = {
139
+ }, b = {
138
140
  emailCardW: 520,
139
141
  trackingPixel: 1
140
- }, f = {
142
+ }, n = {
141
143
  bg: "#0f0f0f",
142
144
  bgCard: "#1a1a1a",
143
145
  bgCardHover: "#242424",
@@ -179,7 +181,32 @@ const r = {
179
181
  overlayLight: "rgba(255, 255, 255, 0.78)",
180
182
  contrastSurface: "#f5f5f5",
181
183
  onContrastSurface: "#1a1a1a",
182
- contrastBorder: "rgba(0, 0, 0, 0.42)"
184
+ contrastBorder: "rgba(0, 0, 0, 0.42)",
185
+ bgInset: "#0a0a0a",
186
+ bgElevated: "#242424",
187
+ bgSelected: "rgba(106, 175, 252, 0.15)",
188
+ pressOverlay: "rgba(255, 255, 255, 0.08)",
189
+ ripple: "rgba(255, 255, 255, 0.12)",
190
+ bgSectionTint: "rgba(255, 255, 255, 0.03)",
191
+ borderSubtle: "#242424",
192
+ borderStrong: "#555555",
193
+ surfaceHighlight: "rgba(255, 255, 255, 0.06)",
194
+ textSubtle: "#8a8a8a",
195
+ textDisabled: "#6b6b6b",
196
+ neutral: "#a3a3a3",
197
+ neutralBg: "rgba(163, 163, 163, 0.1)",
198
+ neutralBorder: "rgba(163, 163, 163, 0.3)",
199
+ neutralText: "#d4d4d4",
200
+ active: "#6aaffc",
201
+ activeBg: "rgba(106, 175, 252, 0.1)",
202
+ activeBorder: "rgba(106, 175, 252, 0.3)",
203
+ activeText: "#93c5fd",
204
+ accentDisabled: "rgba(106, 175, 252, 0.4)",
205
+ segmentTrack: "rgba(255, 255, 255, 0.06)",
206
+ segmentActive: "#333333",
207
+ scrimSoft: "rgba(0, 0, 0, 0.2)",
208
+ scrimStrong: "rgba(0, 0, 0, 0.6)",
209
+ onScrimMuted: "rgba(255, 255, 255, 0.72)"
183
210
  }, c = {
184
211
  bg: "#ffffff",
185
212
  bgCard: "#f5f5f5",
@@ -222,8 +249,33 @@ const r = {
222
249
  overlayLight: "rgba(255, 255, 255, 0.78)",
223
250
  contrastSurface: "#1a1a1a",
224
251
  onContrastSurface: "#e5e5e5",
225
- contrastBorder: "rgba(255, 255, 255, 0.33)"
226
- }, s = {
252
+ contrastBorder: "rgba(255, 255, 255, 0.33)",
253
+ bgInset: "#f0f0f0",
254
+ bgElevated: "#ffffff",
255
+ bgSelected: "rgba(30, 64, 175, 0.12)",
256
+ pressOverlay: "rgba(0, 0, 0, 0.08)",
257
+ ripple: "rgba(0, 0, 0, 0.12)",
258
+ bgSectionTint: "rgba(0, 0, 0, 0.03)",
259
+ borderSubtle: "#ebebeb",
260
+ borderStrong: "#a3a3a3",
261
+ surfaceHighlight: "rgba(255, 255, 255, 0.7)",
262
+ textSubtle: "#6b6b6b",
263
+ textDisabled: "#a3a3a3",
264
+ neutral: "#525252",
265
+ neutralBg: "rgba(82, 82, 82, 0.08)",
266
+ neutralBorder: "rgba(82, 82, 82, 0.3)",
267
+ neutralText: "#404040",
268
+ active: "#1e40af",
269
+ activeBg: "rgba(30, 64, 175, 0.08)",
270
+ activeBorder: "rgba(30, 64, 175, 0.3)",
271
+ activeText: "#1e40af",
272
+ accentDisabled: "rgba(30, 64, 175, 0.4)",
273
+ segmentTrack: "rgba(0, 0, 0, 0.06)",
274
+ segmentActive: "#ffffff",
275
+ scrimSoft: "rgba(0, 0, 0, 0.2)",
276
+ scrimStrong: "rgba(0, 0, 0, 0.6)",
277
+ onScrimMuted: "rgba(255, 255, 255, 0.72)"
278
+ }, f = {
227
279
  bg: "#000000",
228
280
  bgCard: "#111111",
229
281
  bgCardHover: "#1a1a1a",
@@ -265,19 +317,44 @@ const r = {
265
317
  overlayLight: "rgba(255, 255, 255, 0.78)",
266
318
  contrastSurface: "#ffffff",
267
319
  onContrastSurface: "#000000",
268
- contrastBorder: "rgba(0, 0, 0, 0.42)"
320
+ contrastBorder: "rgba(0, 0, 0, 0.42)",
321
+ bgInset: "#0a0a0a",
322
+ bgElevated: "#1a1a1a",
323
+ bgSelected: "rgba(96, 165, 250, 0.25)",
324
+ pressOverlay: "rgba(255, 255, 255, 0.15)",
325
+ ripple: "rgba(255, 255, 255, 0.2)",
326
+ bgSectionTint: "rgba(255, 255, 255, 0.06)",
327
+ borderSubtle: "#333333",
328
+ borderStrong: "#888888",
329
+ surfaceHighlight: "rgba(255, 255, 255, 0.15)",
330
+ textSubtle: "#a3a3a3",
331
+ textDisabled: "#808080",
332
+ neutral: "#d4d4d4",
333
+ neutralBg: "rgba(212, 212, 212, 0.15)",
334
+ neutralBorder: "rgba(212, 212, 212, 0.5)",
335
+ neutralText: "#e5e5e5",
336
+ active: "#60a5fa",
337
+ activeBg: "rgba(96, 165, 250, 0.15)",
338
+ activeBorder: "rgba(96, 165, 250, 0.5)",
339
+ activeText: "#bfdbfe",
340
+ accentDisabled: "rgba(96, 165, 250, 0.5)",
341
+ segmentTrack: "rgba(255, 255, 255, 0.12)",
342
+ segmentActive: "#333333",
343
+ scrimSoft: "rgba(0, 0, 0, 0.3)",
344
+ scrimStrong: "rgba(0, 0, 0, 0.7)",
345
+ onScrimMuted: "rgba(255, 255, 255, 0.72)"
269
346
  };
270
347
  export {
271
- o as BORDERS_PX,
272
- t as EFFECTS,
273
- n as EMAIL_PX,
348
+ t as BORDERS_PX,
349
+ o as EFFECTS,
350
+ b as EMAIL_PX,
274
351
  a as FONT_SIZE_REM,
275
- i as LAYERS,
352
+ g as LAYERS,
276
353
  e as RADII_PX,
277
- g as SIZES_PX,
354
+ i as SIZES_PX,
278
355
  r as SPACING_PX,
279
- f as darkColors,
280
- s as highContrastColors,
356
+ n as darkColors,
357
+ f as highContrastColors,
281
358
  c as lightColors
282
359
  };
283
360
  //# 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 highlight: string\n highlightBg: string\n highlightBorder: string\n highlightText: string\n scrim: string\n inverseFill: string\n inverseFillHover: string\n inverseBorder: string\n inverseBorderHover: string\n fixedLight: string\n fixedDark: 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 LAYERS = {\n raised: 1,\n floating: 50,\n floatingRaised: 60,\n overlay: 1000,\n modal: 1001,\n modalRaised: 1002,\n popover: 1040,\n popoverRaised: 1041,\n popupBackdrop: 1049,\n popup: 1050,\n toast: 1060,\n portal: 1100,\n} as const\n\n// Copy of keys.ts EFFECTS (CSS filter strings, not a numeric map).\nexport const EFFECTS = {\n overlayBlur: 'blur(2px)',\n surfaceBlur: 'blur(6px)',\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 thumbSm: 40,\n mediaTileMinW: 108,\n glyphClampMax: 160,\n timeReadoutW: 74,\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 timeGutterW: 64,\n dayHeaderH: 46,\n timelineLabelW: 180,\n appBarH: 61,\n dragThumbW: 132,\n dragThumbH: 99,\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 highlight: '#c084fc',\n highlightBg: 'rgba(192, 132, 252, 0.1)',\n highlightBorder: 'rgba(192, 132, 252, 0.3)',\n highlightText: '#d8b4fe',\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 fixedDark: '#000000',\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 highlight: '#6b21a8',\n highlightBg: 'rgba(107, 33, 168, 0.08)',\n highlightBorder: 'rgba(107, 33, 168, 0.3)',\n highlightText: '#581c87',\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 fixedDark: '#000000',\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 highlight: '#d8b4fe',\n highlightBg: 'rgba(216, 180, 254, 0.15)',\n highlightBorder: 'rgba(216, 180, 254, 0.5)',\n highlightText: '#e9d5ff',\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 fixedDark: '#000000',\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","LAYERS","EFFECTS","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 highlight: string\n highlightBg: string\n highlightBorder: string\n highlightText: string\n scrim: string\n inverseFill: string\n inverseFillHover: string\n inverseBorder: string\n inverseBorderHover: string\n fixedLight: string\n fixedDark: string\n overlayLight: string\n contrastSurface: string\n onContrastSurface: string\n contrastBorder: string\n bgInset: string\n bgElevated: string\n bgSelected: string\n pressOverlay: string\n ripple: string\n bgSectionTint: string\n borderSubtle: string\n borderStrong: string\n surfaceHighlight: string\n textSubtle: string\n textDisabled: string\n neutral: string\n neutralBg: string\n neutralBorder: string\n neutralText: string\n active: string\n activeBg: string\n activeBorder: string\n activeText: string\n accentDisabled: string\n segmentTrack: string\n segmentActive: string\n scrimSoft: string\n scrimStrong: string\n onScrimMuted: 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 LAYERS = {\n raised: 1,\n floating: 50,\n floatingRaised: 60,\n overlay: 1000,\n modal: 1001,\n modalRaised: 1002,\n popover: 1040,\n popoverRaised: 1041,\n popupBackdrop: 1049,\n popup: 1050,\n toast: 1060,\n portal: 1100,\n} as const\n\n// Copy of keys.ts EFFECTS (CSS filter strings, not a numeric map).\nexport const EFFECTS = {\n overlayBlur: 'blur(2px)',\n surfaceBlur: 'blur(6px)',\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 thumbSm: 40,\n mediaTileMinW: 108,\n glyphClampMax: 160,\n timeReadoutW: 74,\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 sheetGrabberW: 40,\n sheetGrabberH: 4,\n readoutW: 40,\n sliderW: 96,\n paletteMinW: 96,\n deviceBarW: 96,\n timeGutterW: 64,\n dayHeaderH: 46,\n timelineLabelW: 180,\n appBarH: 61,\n dragThumbW: 132,\n dragThumbH: 99,\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 highlight: '#c084fc',\n highlightBg: 'rgba(192, 132, 252, 0.1)',\n highlightBorder: 'rgba(192, 132, 252, 0.3)',\n highlightText: '#d8b4fe',\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 fixedDark: '#000000',\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n contrastSurface: '#f5f5f5',\n onContrastSurface: '#1a1a1a',\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n bgInset: '#0a0a0a',\n bgElevated: '#242424',\n bgSelected: 'rgba(106, 175, 252, 0.15)',\n pressOverlay: 'rgba(255, 255, 255, 0.08)',\n ripple: 'rgba(255, 255, 255, 0.12)',\n bgSectionTint: 'rgba(255, 255, 255, 0.03)',\n borderSubtle: '#242424',\n borderStrong: '#555555',\n surfaceHighlight: 'rgba(255, 255, 255, 0.06)',\n textSubtle: '#8a8a8a',\n textDisabled: '#6b6b6b',\n neutral: '#a3a3a3',\n neutralBg: 'rgba(163, 163, 163, 0.1)',\n neutralBorder: 'rgba(163, 163, 163, 0.3)',\n neutralText: '#d4d4d4',\n active: '#6aaffc',\n activeBg: 'rgba(106, 175, 252, 0.1)',\n activeBorder: 'rgba(106, 175, 252, 0.3)',\n activeText: '#93c5fd',\n accentDisabled: 'rgba(106, 175, 252, 0.4)',\n segmentTrack: 'rgba(255, 255, 255, 0.06)',\n segmentActive: '#333333',\n scrimSoft: 'rgba(0, 0, 0, 0.2)',\n scrimStrong: 'rgba(0, 0, 0, 0.6)',\n onScrimMuted: 'rgba(255, 255, 255, 0.72)',\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 highlight: '#6b21a8',\n highlightBg: 'rgba(107, 33, 168, 0.08)',\n highlightBorder: 'rgba(107, 33, 168, 0.3)',\n highlightText: '#581c87',\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 fixedDark: '#000000',\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n contrastSurface: '#1a1a1a',\n onContrastSurface: '#e5e5e5',\n contrastBorder: 'rgba(255, 255, 255, 0.33)',\n bgInset: '#f0f0f0',\n bgElevated: '#ffffff',\n bgSelected: 'rgba(30, 64, 175, 0.12)',\n pressOverlay: 'rgba(0, 0, 0, 0.08)',\n ripple: 'rgba(0, 0, 0, 0.12)',\n bgSectionTint: 'rgba(0, 0, 0, 0.03)',\n borderSubtle: '#ebebeb',\n borderStrong: '#a3a3a3',\n surfaceHighlight: 'rgba(255, 255, 255, 0.7)',\n textSubtle: '#6b6b6b',\n textDisabled: '#a3a3a3',\n neutral: '#525252',\n neutralBg: 'rgba(82, 82, 82, 0.08)',\n neutralBorder: 'rgba(82, 82, 82, 0.3)',\n neutralText: '#404040',\n active: '#1e40af',\n activeBg: 'rgba(30, 64, 175, 0.08)',\n activeBorder: 'rgba(30, 64, 175, 0.3)',\n activeText: '#1e40af',\n accentDisabled: 'rgba(30, 64, 175, 0.4)',\n segmentTrack: 'rgba(0, 0, 0, 0.06)',\n segmentActive: '#ffffff',\n scrimSoft: 'rgba(0, 0, 0, 0.2)',\n scrimStrong: 'rgba(0, 0, 0, 0.6)',\n onScrimMuted: 'rgba(255, 255, 255, 0.72)',\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 highlight: '#d8b4fe',\n highlightBg: 'rgba(216, 180, 254, 0.15)',\n highlightBorder: 'rgba(216, 180, 254, 0.5)',\n highlightText: '#e9d5ff',\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 fixedDark: '#000000',\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n contrastSurface: '#ffffff',\n onContrastSurface: '#000000',\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n bgInset: '#0a0a0a',\n bgElevated: '#1a1a1a',\n bgSelected: 'rgba(96, 165, 250, 0.25)',\n pressOverlay: 'rgba(255, 255, 255, 0.15)',\n ripple: 'rgba(255, 255, 255, 0.2)',\n bgSectionTint: 'rgba(255, 255, 255, 0.06)',\n borderSubtle: '#333333',\n borderStrong: '#888888',\n surfaceHighlight: 'rgba(255, 255, 255, 0.15)',\n textSubtle: '#a3a3a3',\n textDisabled: '#808080',\n neutral: '#d4d4d4',\n neutralBg: 'rgba(212, 212, 212, 0.15)',\n neutralBorder: 'rgba(212, 212, 212, 0.5)',\n neutralText: '#e5e5e5',\n active: '#60a5fa',\n activeBg: 'rgba(96, 165, 250, 0.15)',\n activeBorder: 'rgba(96, 165, 250, 0.5)',\n activeText: '#bfdbfe',\n accentDisabled: 'rgba(96, 165, 250, 0.5)',\n segmentTrack: 'rgba(255, 255, 255, 0.12)',\n segmentActive: '#333333',\n scrimSoft: 'rgba(0, 0, 0, 0.3)',\n scrimStrong: 'rgba(0, 0, 0, 0.7)',\n onScrimMuted: 'rgba(255, 255, 255, 0.72)',\n}\n"],"names":["SPACING_PX","RADII_PX","FONT_SIZE_REM","BORDERS_PX","LAYERS","EFFECTS","SIZES_PX","EMAIL_PX","darkColors","lightColors","highContrastColors"],"mappings":"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"}
package/dist/themes/high-contrast.css.d.ts CHANGED
@@ -42,6 +42,31 @@ export declare const highContrastTheme: css.Theme<css.VarGroup<Readonly<{
42
42
  contrastSurface: string;
43
43
  onContrastSurface: string;
44
44
  contrastBorder: string;
45
+ bgInset: string;
46
+ bgElevated: string;
47
+ bgSelected: string;
48
+ pressOverlay: string;
49
+ ripple: string;
50
+ bgSectionTint: string;
51
+ borderSubtle: string;
52
+ borderStrong: string;
53
+ surfaceHighlight: string;
54
+ textSubtle: string;
55
+ textDisabled: string;
56
+ neutral: string;
57
+ neutralBg: string;
58
+ neutralBorder: string;
59
+ neutralText: string;
60
+ active: string;
61
+ activeBg: string;
62
+ activeBorder: string;
63
+ activeText: string;
64
+ accentDisabled: string;
65
+ segmentTrack: string;
66
+ segmentActive: string;
67
+ scrimSoft: string;
68
+ scrimStrong: string;
69
+ onScrimMuted: string;
45
70
  }>, symbol>, symbol>;
46
71
  export declare const highContrastShadows: css.Theme<css.VarGroup<Readonly<{
47
72
  sm: string;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAqD5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;;;oBAM9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA8E5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;;;oBAM9B,CAAA"}
package/dist/themes/light.css.d.ts CHANGED
@@ -42,6 +42,31 @@ export declare const lightTheme: css.Theme<css.VarGroup<Readonly<{
42
42
  contrastSurface: string;
43
43
  onContrastSurface: string;
44
44
  contrastBorder: string;
45
+ bgInset: string;
46
+ bgElevated: string;
47
+ bgSelected: string;
48
+ pressOverlay: string;
49
+ ripple: string;
50
+ bgSectionTint: string;
51
+ borderSubtle: string;
52
+ borderStrong: string;
53
+ surfaceHighlight: string;
54
+ textSubtle: string;
55
+ textDisabled: string;
56
+ neutral: string;
57
+ neutralBg: string;
58
+ neutralBorder: string;
59
+ neutralText: string;
60
+ active: string;
61
+ activeBg: string;
62
+ activeBorder: string;
63
+ activeText: string;
64
+ accentDisabled: string;
65
+ segmentTrack: string;
66
+ segmentActive: string;
67
+ scrimSoft: string;
68
+ scrimStrong: string;
69
+ onScrimMuted: string;
45
70
  }>, symbol>, symbol>;
46
71
  export declare const lightShadows: css.Theme<css.VarGroup<Readonly<{
47
72
  sm: string;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAqDrB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;oBAMvB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA8ErB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;oBAMvB,CAAA"}
package/dist/tokens/colors.css.d.ts CHANGED
@@ -42,5 +42,30 @@ export declare const colors: css.VarGroup<Readonly<{
42
42
  contrastSurface: string;
43
43
  onContrastSurface: string;
44
44
  contrastBorder: string;
45
+ bgInset: string;
46
+ bgElevated: string;
47
+ bgSelected: string;
48
+ pressOverlay: string;
49
+ ripple: string;
50
+ bgSectionTint: string;
51
+ borderSubtle: string;
52
+ borderStrong: string;
53
+ surfaceHighlight: string;
54
+ textSubtle: string;
55
+ textDisabled: string;
56
+ neutral: string;
57
+ neutralBg: string;
58
+ neutralBorder: string;
59
+ neutralText: string;
60
+ active: string;
61
+ activeBg: string;
62
+ activeBorder: string;
63
+ activeText: string;
64
+ accentDisabled: string;
65
+ segmentTrack: string;
66
+ segmentActive: string;
67
+ scrimSoft: string;
68
+ scrimStrong: string;
69
+ onScrimMuted: string;
45
70
  }>, symbol>;
46
71
  //# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAsEjB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA+GjB,CAAA"}
package/dist/tokens/sizes.css.d.ts CHANGED
@@ -79,6 +79,8 @@ export declare const sizes: css.VarGroup<Readonly<{
79
79
  placeholderMinH: string;
80
80
  previewMaxH: string;
81
81
  barH: string;
82
+ sheetGrabberW: string;
83
+ sheetGrabberH: string;
82
84
  readoutW: string;
83
85
  sliderW: string;
84
86
  paletteMinW: string;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAmGhB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAsGhB,CAAA"}
package/dist/vars.css CHANGED
@@ -15,11 +15,22 @@
15
15
  /* colors */
16
16
  --duro-color-accent: var(--accent-xw7wp3v);
17
17
  --duro-color-accent-contrast: var(--accentContrast-x3gzxyp);
18
+ --duro-color-accent-disabled: var(--accentDisabled-x1u9f29m);
18
19
  --duro-color-accent-hover: var(--accentHover-x18fqoz);
20
+ --duro-color-active: var(--active-xs7lmjr);
21
+ --duro-color-active-bg: var(--activeBg-x35bva0);
22
+ --duro-color-active-border: var(--activeBorder-x16mx242);
23
+ --duro-color-active-text: var(--activeText-x1m8q3u3);
19
24
  --duro-color-bg: var(--bg-xqkwqtp);
20
25
  --duro-color-bg-card: var(--bgCard-xj2l5r);
21
26
  --duro-color-bg-card-hover: var(--bgCardHover-xlxk7vw);
27
+ --duro-color-bg-elevated: var(--bgElevated-x5jb1ex);
28
+ --duro-color-bg-inset: var(--bgInset-x1985064);
29
+ --duro-color-bg-section-tint: var(--bgSectionTint-x1jltjee);
30
+ --duro-color-bg-selected: var(--bgSelected-x1tz8xx4);
22
31
  --duro-color-border: var(--border-x1drj1pb);
32
+ --duro-color-border-strong: var(--borderStrong-x1hk6q8z);
33
+ --duro-color-border-subtle: var(--borderSubtle-xazur3r);
23
34
  --duro-color-contrast-border: var(--contrastBorder-x1g9he7g);
24
35
  --duro-color-contrast-surface: var(--contrastSurface-x1i512m4);
25
36
  --duro-color-error: var(--error-x13gdhh0);
@@ -42,15 +53,29 @@
42
53
  --duro-color-inverse-border-hover: var(--inverseBorderHover-x12x46ev);
43
54
  --duro-color-inverse-fill: var(--inverseFill-x1il694p);
44
55
  --duro-color-inverse-fill-hover: var(--inverseFillHover-xmxqxj9);
56
+ --duro-color-neutral: var(--neutral-xomrn58);
57
+ --duro-color-neutral-bg: var(--neutralBg-x19rt8v4);
58
+ --duro-color-neutral-border: var(--neutralBorder-x5p3bn0);
59
+ --duro-color-neutral-text: var(--neutralText-x1xjscs0);
45
60
  --duro-color-on-contrast-surface: var(--onContrastSurface-x1dm0pi1);
61
+ --duro-color-on-scrim-muted: var(--onScrimMuted-xqxo091);
46
62
  --duro-color-overlay-light: var(--overlayLight-x71omwc);
63
+ --duro-color-press-overlay: var(--pressOverlay-xwcyaps);
64
+ --duro-color-ripple: var(--ripple-x4boxpx);
47
65
  --duro-color-scrim: var(--scrim-x2ypej7);
66
+ --duro-color-scrim-soft: var(--scrimSoft-x1hszvdp);
67
+ --duro-color-scrim-strong: var(--scrimStrong-x1bj3i5v);
68
+ --duro-color-segment-active: var(--segmentActive-xiwz7t0);
69
+ --duro-color-segment-track: var(--segmentTrack-x1bxdgyc);
48
70
  --duro-color-success: var(--success-x197pe5n);
49
71
  --duro-color-success-bg: var(--successBg-xzjukav);
50
72
  --duro-color-success-border: var(--successBorder-x1my3ygc);
51
73
  --duro-color-success-text: var(--successText-x46dg9e);
74
+ --duro-color-surface-highlight: var(--surfaceHighlight-xaxphpr);
52
75
  --duro-color-text: var(--text-xlpbogt);
76
+ --duro-color-text-disabled: var(--textDisabled-x1h1b3kn);
53
77
  --duro-color-text-muted: var(--textMuted-x651nu9);
78
+ --duro-color-text-subtle: var(--textSubtle-x1v06cot);
54
79
  --duro-color-warning: var(--warning-x1gq0pyw);
55
80
  --duro-color-warning-bg: var(--warningBg-xtnxqss);
56
81
  --duro-color-warning-border: var(--warningBorder-x1ev2mr5);
@@ -154,6 +179,8 @@
154
179
  --duro-size-preview-max-h: var(--previewMaxH-x1phh3ob);
155
180
  --duro-size-readout-w: var(--readoutW-xi5rn1i);
156
181
  --duro-size-scrollbar: var(--scrollbar-xppi9bb);
182
+ --duro-size-sheet-grabber-h: var(--sheetGrabberH-x1mzwlvd);
183
+ --duro-size-sheet-grabber-w: var(--sheetGrabberW-xqnf4ck);
157
184
  --duro-size-sidebar-w: var(--sidebarW-x16fh60r);
158
185
  --duro-size-skeleton-chip-w: var(--skeletonChipW-xmw24hn);
159
186
  --duro-size-slider-w: var(--sliderW-xvcfp7i);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@duro-app/tokens",
3
- "version": "5.12.0",
3
+ "version": "5.14.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/keys.ts CHANGED
@@ -150,6 +150,8 @@ export const SIZE_KEYS = [
150
150
  'placeholderMinH',
151
151
  'previewMaxH',
152
152
  'barH',
153
+ 'sheetGrabberW',
154
+ 'sheetGrabberH',
153
155
  'readoutW',
154
156
  'sliderW',
155
157
  'paletteMinW',
@@ -244,6 +246,8 @@ export const SIZES_PX = {
244
246
  placeholderMinH: 80,
245
247
  previewMaxH: 320,
246
248
  barH: 4,
249
+ sheetGrabberW: 40,
250
+ sheetGrabberH: 4,
247
251
  readoutW: 40,
248
252
  sliderW: 96,
249
253
  paletteMinW: 96,
package/src/raw.ts CHANGED
@@ -52,6 +52,31 @@ export type RawColors = {
52
52
  contrastSurface: string
53
53
  onContrastSurface: string
54
54
  contrastBorder: string
55
+ bgInset: string
56
+ bgElevated: string
57
+ bgSelected: string
58
+ pressOverlay: string
59
+ ripple: string
60
+ bgSectionTint: string
61
+ borderSubtle: string
62
+ borderStrong: string
63
+ surfaceHighlight: string
64
+ textSubtle: string
65
+ textDisabled: string
66
+ neutral: string
67
+ neutralBg: string
68
+ neutralBorder: string
69
+ neutralText: string
70
+ active: string
71
+ activeBg: string
72
+ activeBorder: string
73
+ activeText: string
74
+ accentDisabled: string
75
+ segmentTrack: string
76
+ segmentActive: string
77
+ scrimSoft: string
78
+ scrimStrong: string
79
+ onScrimMuted: string
55
80
  }
56
81
 
57
82
  // Numeric maps for consumers that load only the compiled `/raw` entry (e.g.
@@ -196,6 +221,8 @@ export const SIZES_PX = {
196
221
  placeholderMinH: 80,
197
222
  previewMaxH: 320,
198
223
  barH: 4,
224
+ sheetGrabberW: 40,
225
+ sheetGrabberH: 4,
199
226
  readoutW: 40,
200
227
  sliderW: 96,
201
228
  paletteMinW: 96,
@@ -256,6 +283,31 @@ export const darkColors: RawColors = {
256
283
  contrastSurface: '#f5f5f5',
257
284
  onContrastSurface: '#1a1a1a',
258
285
  contrastBorder: 'rgba(0, 0, 0, 0.42)',
286
+ bgInset: '#0a0a0a',
287
+ bgElevated: '#242424',
288
+ bgSelected: 'rgba(106, 175, 252, 0.15)',
289
+ pressOverlay: 'rgba(255, 255, 255, 0.08)',
290
+ ripple: 'rgba(255, 255, 255, 0.12)',
291
+ bgSectionTint: 'rgba(255, 255, 255, 0.03)',
292
+ borderSubtle: '#242424',
293
+ borderStrong: '#555555',
294
+ surfaceHighlight: 'rgba(255, 255, 255, 0.06)',
295
+ textSubtle: '#8a8a8a',
296
+ textDisabled: '#6b6b6b',
297
+ neutral: '#a3a3a3',
298
+ neutralBg: 'rgba(163, 163, 163, 0.1)',
299
+ neutralBorder: 'rgba(163, 163, 163, 0.3)',
300
+ neutralText: '#d4d4d4',
301
+ active: '#6aaffc',
302
+ activeBg: 'rgba(106, 175, 252, 0.1)',
303
+ activeBorder: 'rgba(106, 175, 252, 0.3)',
304
+ activeText: '#93c5fd',
305
+ accentDisabled: 'rgba(106, 175, 252, 0.4)',
306
+ segmentTrack: 'rgba(255, 255, 255, 0.06)',
307
+ segmentActive: '#333333',
308
+ scrimSoft: 'rgba(0, 0, 0, 0.2)',
309
+ scrimStrong: 'rgba(0, 0, 0, 0.6)',
310
+ onScrimMuted: 'rgba(255, 255, 255, 0.72)',
259
311
  }
260
312
 
261
313
  // Light theme — matches the overrides in `themes/light.css.ts`.
@@ -302,6 +354,31 @@ export const lightColors: RawColors = {
302
354
  contrastSurface: '#1a1a1a',
303
355
  onContrastSurface: '#e5e5e5',
304
356
  contrastBorder: 'rgba(255, 255, 255, 0.33)',
357
+ bgInset: '#f0f0f0',
358
+ bgElevated: '#ffffff',
359
+ bgSelected: 'rgba(30, 64, 175, 0.12)',
360
+ pressOverlay: 'rgba(0, 0, 0, 0.08)',
361
+ ripple: 'rgba(0, 0, 0, 0.12)',
362
+ bgSectionTint: 'rgba(0, 0, 0, 0.03)',
363
+ borderSubtle: '#ebebeb',
364
+ borderStrong: '#a3a3a3',
365
+ surfaceHighlight: 'rgba(255, 255, 255, 0.7)',
366
+ textSubtle: '#6b6b6b',
367
+ textDisabled: '#a3a3a3',
368
+ neutral: '#525252',
369
+ neutralBg: 'rgba(82, 82, 82, 0.08)',
370
+ neutralBorder: 'rgba(82, 82, 82, 0.3)',
371
+ neutralText: '#404040',
372
+ active: '#1e40af',
373
+ activeBg: 'rgba(30, 64, 175, 0.08)',
374
+ activeBorder: 'rgba(30, 64, 175, 0.3)',
375
+ activeText: '#1e40af',
376
+ accentDisabled: 'rgba(30, 64, 175, 0.4)',
377
+ segmentTrack: 'rgba(0, 0, 0, 0.06)',
378
+ segmentActive: '#ffffff',
379
+ scrimSoft: 'rgba(0, 0, 0, 0.2)',
380
+ scrimStrong: 'rgba(0, 0, 0, 0.6)',
381
+ onScrimMuted: 'rgba(255, 255, 255, 0.72)',
305
382
  }
306
383
 
307
384
  // High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.
@@ -348,4 +425,29 @@ export const highContrastColors: RawColors = {
348
425
  contrastSurface: '#ffffff',
349
426
  onContrastSurface: '#000000',
350
427
  contrastBorder: 'rgba(0, 0, 0, 0.42)',
428
+ bgInset: '#0a0a0a',
429
+ bgElevated: '#1a1a1a',
430
+ bgSelected: 'rgba(96, 165, 250, 0.25)',
431
+ pressOverlay: 'rgba(255, 255, 255, 0.15)',
432
+ ripple: 'rgba(255, 255, 255, 0.2)',
433
+ bgSectionTint: 'rgba(255, 255, 255, 0.06)',
434
+ borderSubtle: '#333333',
435
+ borderStrong: '#888888',
436
+ surfaceHighlight: 'rgba(255, 255, 255, 0.15)',
437
+ textSubtle: '#a3a3a3',
438
+ textDisabled: '#808080',
439
+ neutral: '#d4d4d4',
440
+ neutralBg: 'rgba(212, 212, 212, 0.15)',
441
+ neutralBorder: 'rgba(212, 212, 212, 0.5)',
442
+ neutralText: '#e5e5e5',
443
+ active: '#60a5fa',
444
+ activeBg: 'rgba(96, 165, 250, 0.15)',
445
+ activeBorder: 'rgba(96, 165, 250, 0.5)',
446
+ activeText: '#bfdbfe',
447
+ accentDisabled: 'rgba(96, 165, 250, 0.5)',
448
+ segmentTrack: 'rgba(255, 255, 255, 0.12)',
449
+ segmentActive: '#333333',
450
+ scrimSoft: 'rgba(0, 0, 0, 0.3)',
451
+ scrimStrong: 'rgba(0, 0, 0, 0.7)',
452
+ onScrimMuted: 'rgba(255, 255, 255, 0.72)',
351
453
  }
package/src/themes/high-contrast.css.ts CHANGED
@@ -55,6 +55,31 @@ export const highContrastTheme = css.createTheme(colors, {
55
55
  onContrastSurface: '#000000',
56
56
  // A border on contrastSurface, at least 3:1 against it (non-text).
57
57
  contrastBorder: 'rgba(0, 0, 0, 0.42)',
58
+ bgInset: '#0a0a0a',
59
+ bgElevated: '#1a1a1a',
60
+ bgSelected: 'rgba(96, 165, 250, 0.25)',
61
+ pressOverlay: 'rgba(255, 255, 255, 0.15)',
62
+ ripple: 'rgba(255, 255, 255, 0.2)',
63
+ bgSectionTint: 'rgba(255, 255, 255, 0.06)',
64
+ borderSubtle: '#333333',
65
+ borderStrong: '#888888',
66
+ surfaceHighlight: 'rgba(255, 255, 255, 0.15)',
67
+ textSubtle: '#a3a3a3',
68
+ textDisabled: '#808080',
69
+ neutral: '#d4d4d4',
70
+ neutralBg: 'rgba(212, 212, 212, 0.15)',
71
+ neutralBorder: 'rgba(212, 212, 212, 0.5)',
72
+ neutralText: '#e5e5e5',
73
+ active: '#60a5fa',
74
+ activeBg: 'rgba(96, 165, 250, 0.15)',
75
+ activeBorder: 'rgba(96, 165, 250, 0.5)',
76
+ activeText: '#bfdbfe',
77
+ accentDisabled: 'rgba(96, 165, 250, 0.5)',
78
+ segmentTrack: 'rgba(255, 255, 255, 0.12)',
79
+ segmentActive: '#333333',
80
+ scrimSoft: 'rgba(0, 0, 0, 0.3)',
81
+ scrimStrong: 'rgba(0, 0, 0, 0.7)',
82
+ onScrimMuted: 'rgba(255, 255, 255, 0.72)',
58
83
  })
59
84
 
60
85
  export const highContrastShadows = css.createTheme(shadows, {
package/src/themes/light.css.ts CHANGED
@@ -55,6 +55,31 @@ export const lightTheme = css.createTheme(colors, {
55
55
  onContrastSurface: '#e5e5e5',
56
56
  // A border on contrastSurface, at least 3:1 against it (non-text).
57
57
  contrastBorder: 'rgba(255, 255, 255, 0.33)',
58
+ bgInset: '#f0f0f0',
59
+ bgElevated: '#ffffff',
60
+ bgSelected: 'rgba(30, 64, 175, 0.12)',
61
+ pressOverlay: 'rgba(0, 0, 0, 0.08)',
62
+ ripple: 'rgba(0, 0, 0, 0.12)',
63
+ bgSectionTint: 'rgba(0, 0, 0, 0.03)',
64
+ borderSubtle: '#ebebeb',
65
+ borderStrong: '#a3a3a3',
66
+ surfaceHighlight: 'rgba(255, 255, 255, 0.7)',
67
+ textSubtle: '#6b6b6b',
68
+ textDisabled: '#a3a3a3',
69
+ neutral: '#525252',
70
+ neutralBg: 'rgba(82, 82, 82, 0.08)',
71
+ neutralBorder: 'rgba(82, 82, 82, 0.3)',
72
+ neutralText: '#404040',
73
+ active: '#1e40af',
74
+ activeBg: 'rgba(30, 64, 175, 0.08)',
75
+ activeBorder: 'rgba(30, 64, 175, 0.3)',
76
+ activeText: '#1e40af',
77
+ accentDisabled: 'rgba(30, 64, 175, 0.4)',
78
+ segmentTrack: 'rgba(0, 0, 0, 0.06)',
79
+ segmentActive: '#ffffff',
80
+ scrimSoft: 'rgba(0, 0, 0, 0.2)',
81
+ scrimStrong: 'rgba(0, 0, 0, 0.6)',
82
+ onScrimMuted: 'rgba(255, 255, 255, 0.72)',
58
83
  })
59
84
 
60
85
  export const lightShadows = css.createTheme(shadows, {
package/src/tokens/colors.css.ts CHANGED
@@ -70,4 +70,45 @@ export const colors = css.defineVars({
70
70
  onContrastSurface: '#1a1a1a',
71
71
  // A border on contrastSurface, at least 3:1 against it (non-text).
72
72
  contrastBorder: 'rgba(0, 0, 0, 0.42)',
73
+ // Gap tokens (5.14, plan N0 C0 inventory). A recessed well below its surface: code, editor, input-like insets.
74
+ bgInset: '#0a0a0a',
75
+ // A surface lifted above its parent (a selected or floating card).
76
+ bgElevated: '#242424',
77
+ // Selected rows and selectable containers: the accent hue, stronger than activeBg.
78
+ bgSelected: 'rgba(106, 175, 252, 0.15)',
79
+ // Drawn over a pressed surface (not inverseFill, which sits on an accent fill).
80
+ pressOverlay: 'rgba(255, 255, 255, 0.08)',
81
+ // A touch ripple.
82
+ ripple: 'rgba(255, 255, 255, 0.12)',
83
+ // A hair of tint that separates grouped sections.
84
+ bgSectionTint: 'rgba(255, 255, 255, 0.03)',
85
+ // Low-emphasis hairlines, below border.
86
+ borderSubtle: '#242424',
87
+ // Higher-emphasis outlines, above border.
88
+ borderStrong: '#555555',
89
+ // The top-edge highlight on a bounded surface.
90
+ surfaceHighlight: 'rgba(255, 255, 255, 0.06)',
91
+ // The lowest-emphasis readable text, below textMuted (at least 4.5:1 on bg).
92
+ textSubtle: '#8a8a8a',
93
+ // Text of a disabled control (not required to meet contrast).
94
+ textDisabled: '#6b6b6b',
95
+ // A neutral status (inactive, unknown): the status family without a status meaning.
96
+ neutral: '#a3a3a3',
97
+ neutralBg: 'rgba(163, 163, 163, 0.1)',
98
+ neutralBorder: 'rgba(163, 163, 163, 0.3)',
99
+ neutralText: '#d4d4d4',
100
+ // The active choice: chips, toolbar pills, segmented options (the accent family).
101
+ active: '#6aaffc',
102
+ activeBg: 'rgba(106, 175, 252, 0.1)',
103
+ activeBorder: 'rgba(106, 175, 252, 0.3)',
104
+ activeText: '#93c5fd',
105
+ // A disabled primary fill, where opacity would show what is behind it.
106
+ accentDisabled: 'rgba(106, 175, 252, 0.4)',
107
+ // A segmented control's track, and its raised active segment.
108
+ segmentTrack: 'rgba(255, 255, 255, 0.06)',
109
+ segmentActive: '#333333',
110
+ // Lighter and heavier scrims beside scrim, and secondary text on one.
111
+ scrimSoft: 'rgba(0, 0, 0, 0.2)',
112
+ scrimStrong: 'rgba(0, 0, 0, 0.6)',
113
+ onScrimMuted: 'rgba(255, 255, 255, 0.72)',
73
114
  })
package/src/tokens/sizes.css.ts CHANGED
@@ -84,6 +84,9 @@ export const sizes = css.defineVars({
84
84
  placeholderMinH: '80px',
85
85
  previewMaxH: '320px',
86
86
  barH: '4px',
87
+ // Bottom-sheet grabber (Drawer snapPoints).
88
+ sheetGrabberW: '40px',
89
+ sheetGrabberH: '4px',
87
90
  readoutW: '40px',
88
91
  sliderW: '96px',
89
92
  paletteMinW: '96px',