@duro-app/tokens 5.13.0 → 5.15.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 (19) hide show
  1. package/dist/index.js +31 -6
  2. package/dist/index.js.map +1 -1
  3. package/dist/mockup.css +75 -0
  4. package/dist/raw.d.ts +25 -0
  5. package/dist/raw.d.ts.map +1 -1
  6. package/dist/raw.js +92 -17
  7. package/dist/raw.js.map +1 -1
  8. package/dist/themes/high-contrast.css.d.ts +25 -0
  9. package/dist/themes/high-contrast.css.d.ts.map +1 -1
  10. package/dist/themes/light.css.d.ts +25 -0
  11. package/dist/themes/light.css.d.ts.map +1 -1
  12. package/dist/tokens/colors.css.d.ts +25 -0
  13. package/dist/tokens/colors.css.d.ts.map +1 -1
  14. package/dist/vars.css +25 -0
  15. package/package.json +1 -1
  16. package/src/raw.ts +100 -0
  17. package/src/themes/high-contrast.css.ts +25 -0
  18. package/src/themes/light.css.ts +25 -0
  19. package/src/tokens/colors.css.ts +41 -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)",
@@ -389,14 +414,14 @@ const e = {
389
414
  easeOut: "var(--easeOut-x1dtgzac)",
390
415
  easeIn: "var(--easeIn-xxaysck)",
391
416
  __varGroupHash__: "x1unb8zz"
392
- }, k = {
393
- xjvd03b: "x14i52nv xjvd03b",
394
- $$css: !0
395
417
  }, m = {
418
+ xjvd03b: "xoev3oz xjvd03b",
419
+ $$css: !0
420
+ }, k = {
396
421
  x13v825q: "x1jk1o70 x13v825q",
397
422
  $$css: !0
398
423
  }, S = {
399
- xjvd03b: "xorrbe1 xjvd03b",
424
+ xjvd03b: "x1ud4188 xjvd03b",
400
425
  $$css: !0
401
426
  }, u = {
402
427
  x13v825q: "xc8o4hb x13v825q",
@@ -414,8 +439,8 @@ export {
414
439
  S as highContrastTheme,
415
440
  s as layers,
416
441
  l as layoutSpacing,
417
- m as lightShadows,
418
- k as lightTheme,
442
+ k as lightShadows,
443
+ m as lightTheme,
419
444
  i as microSpacing,
420
445
  n as radii,
421
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 // 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})\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/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);
@@ -275,11 +300,22 @@
275
300
  /* colors */
276
301
  --duro-color-accent: #1e40af;
277
302
  --duro-color-accent-contrast: #ffffff;
303
+ --duro-color-accent-disabled: rgba(30, 64, 175, 0.4);
278
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;
279
309
  --duro-color-bg: #ffffff;
280
310
  --duro-color-bg-card: #f5f5f5;
281
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);
282
316
  --duro-color-border: #d4d4d4;
317
+ --duro-color-border-strong: #a3a3a3;
318
+ --duro-color-border-subtle: #ebebeb;
283
319
  --duro-color-contrast-border: rgba(255, 255, 255, 0.33);
284
320
  --duro-color-contrast-surface: #1a1a1a;
285
321
  --duro-color-error: #991b1b;
@@ -302,15 +338,29 @@
302
338
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
303
339
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
304
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;
305
345
  --duro-color-on-contrast-surface: #e5e5e5;
346
+ --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);
306
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);
307
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);
308
355
  --duro-color-success: #166534;
309
356
  --duro-color-success-bg: rgba(22, 101, 52, 0.08);
310
357
  --duro-color-success-border: rgba(22, 101, 52, 0.3);
311
358
  --duro-color-success-text: #14532d;
359
+ --duro-color-surface-highlight: rgba(255, 255, 255, 0.7);
312
360
  --duro-color-text: #1a1a1a;
361
+ --duro-color-text-disabled: #a3a3a3;
313
362
  --duro-color-text-muted: #4a4a4a;
363
+ --duro-color-text-subtle: #6b6b6b;
314
364
  --duro-color-warning: #92400e;
315
365
  --duro-color-warning-bg: rgba(146, 64, 14, 0.08);
316
366
  --duro-color-warning-border: rgba(146, 64, 14, 0.3);
@@ -328,11 +378,22 @@
328
378
  /* colors */
329
379
  --duro-color-accent: #60a5fa;
330
380
  --duro-color-accent-contrast: #000000;
381
+ --duro-color-accent-disabled: rgba(96, 165, 250, 0.5);
331
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;
332
387
  --duro-color-bg: #000000;
333
388
  --duro-color-bg-card: #111111;
334
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);
335
394
  --duro-color-border: #555555;
395
+ --duro-color-border-strong: #888888;
396
+ --duro-color-border-subtle: #333333;
336
397
  --duro-color-contrast-border: rgba(0, 0, 0, 0.42);
337
398
  --duro-color-contrast-surface: #ffffff;
338
399
  --duro-color-error: #f87171;
@@ -355,15 +416,29 @@
355
416
  --duro-color-inverse-border-hover: rgba(0, 0, 0, 0.70);
356
417
  --duro-color-inverse-fill: rgba(0, 0, 0, 0.10);
357
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;
358
423
  --duro-color-on-contrast-surface: #000000;
424
+ --duro-color-on-scrim-muted: rgba(255, 255, 255, 0.72);
359
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);
360
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);
361
433
  --duro-color-success: #4ade80;
362
434
  --duro-color-success-bg: rgba(74, 222, 128, 0.15);
363
435
  --duro-color-success-border: rgba(74, 222, 128, 0.5);
364
436
  --duro-color-success-text: #86efac;
437
+ --duro-color-surface-highlight: rgba(255, 255, 255, 0.15);
365
438
  --duro-color-text: #ffffff;
439
+ --duro-color-text-disabled: #808080;
366
440
  --duro-color-text-muted: #b0b0b0;
441
+ --duro-color-text-subtle: #a3a3a3;
367
442
  --duro-color-warning: #fcd34d;
368
443
  --duro-color-warning-bg: rgba(252, 211, 77, 0.15);
369
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;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FX,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,
@@ -136,10 +136,10 @@ const r = {
136
136
  appBarH: 61,
137
137
  dragThumbW: 132,
138
138
  dragThumbH: 99
139
- }, n = {
139
+ }, b = {
140
140
  emailCardW: 520,
141
141
  trackingPixel: 1
142
- }, f = {
142
+ }, n = {
143
143
  bg: "#0f0f0f",
144
144
  bgCard: "#1a1a1a",
145
145
  bgCardHover: "#242424",
@@ -181,7 +181,32 @@ const r = {
181
181
  overlayLight: "rgba(255, 255, 255, 0.78)",
182
182
  contrastSurface: "#f5f5f5",
183
183
  onContrastSurface: "#1a1a1a",
184
- 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)"
185
210
  }, c = {
186
211
  bg: "#ffffff",
187
212
  bgCard: "#f5f5f5",
@@ -224,8 +249,33 @@ const r = {
224
249
  overlayLight: "rgba(255, 255, 255, 0.78)",
225
250
  contrastSurface: "#1a1a1a",
226
251
  onContrastSurface: "#e5e5e5",
227
- contrastBorder: "rgba(255, 255, 255, 0.33)"
228
- }, 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 = {
229
279
  bg: "#000000",
230
280
  bgCard: "#111111",
231
281
  bgCardHover: "#1a1a1a",
@@ -267,19 +317,44 @@ const r = {
267
317
  overlayLight: "rgba(255, 255, 255, 0.78)",
268
318
  contrastSurface: "#ffffff",
269
319
  onContrastSurface: "#000000",
270
- 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)"
271
346
  };
272
347
  export {
273
- o as BORDERS_PX,
274
- t as EFFECTS,
275
- n as EMAIL_PX,
348
+ t as BORDERS_PX,
349
+ o as EFFECTS,
350
+ b as EMAIL_PX,
276
351
  a as FONT_SIZE_REM,
277
- i as LAYERS,
352
+ g as LAYERS,
278
353
  e as RADII_PX,
279
- g as SIZES_PX,
354
+ i as SIZES_PX,
280
355
  r as SPACING_PX,
281
- f as darkColors,
282
- s as highContrastColors,
356
+ n as darkColors,
357
+ f as highContrastColors,
283
358
  c as lightColors
284
359
  };
285
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 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}\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/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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@duro-app/tokens",
3
- "version": "5.13.0",
3
+ "version": "5.15.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
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.
@@ -258,6 +283,31 @@ export const darkColors: RawColors = {
258
283
  contrastSurface: '#f5f5f5',
259
284
  onContrastSurface: '#1a1a1a',
260
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)',
261
311
  }
262
312
 
263
313
  // Light theme — matches the overrides in `themes/light.css.ts`.
@@ -304,6 +354,31 @@ export const lightColors: RawColors = {
304
354
  contrastSurface: '#1a1a1a',
305
355
  onContrastSurface: '#e5e5e5',
306
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)',
307
382
  }
308
383
 
309
384
  // High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.
@@ -350,4 +425,29 @@ export const highContrastColors: RawColors = {
350
425
  contrastSurface: '#ffffff',
351
426
  onContrastSurface: '#000000',
352
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)',
353
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
  })