@duro-app/tokens 5.5.0 → 5.7.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.
- package/dist/index.js +7 -4
- package/dist/index.js.map +1 -1
- package/dist/keys.d.ts +5 -2
- package/dist/keys.d.ts.map +1 -1
- package/dist/mockup.css +3 -0
- package/dist/raw.d.ts +3 -0
- package/dist/raw.d.ts.map +1 -1
- package/dist/raw.js +8 -5
- package/dist/raw.js.map +1 -1
- package/dist/tokens/layers.css.d.ts +2 -0
- package/dist/tokens/layers.css.d.ts.map +1 -1
- package/dist/tokens/sizes.css.d.ts +1 -0
- package/dist/tokens/sizes.css.d.ts.map +1 -1
- package/dist/vars.css +3 -0
- package/package.json +1 -1
- package/src/keys.ts +6 -0
- package/src/raw.ts +3 -0
- package/src/tokens/layers.css.ts +8 -0
- package/src/tokens/sizes.css.ts +2 -0
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
md: 768,
|
|
11
11
|
lg: 1024,
|
|
12
12
|
xl: 1280
|
|
13
|
-
},
|
|
13
|
+
}, a = {
|
|
14
14
|
bg: "var(--bg-xqkwqtp)",
|
|
15
15
|
bgCard: "var(--bgCard-xj2l5r)",
|
|
16
16
|
bgCardHover: "var(--bgCardHover-xlxk7vw)",
|
|
@@ -53,7 +53,7 @@ const e = {
|
|
|
53
53
|
onContrastSurface: "var(--onContrastSurface-x1dm0pi1)",
|
|
54
54
|
contrastBorder: "var(--contrastBorder-x1g9he7g)",
|
|
55
55
|
__varGroupHash__: "xjvd03b"
|
|
56
|
-
},
|
|
56
|
+
}, t = {
|
|
57
57
|
xs: "var(--xs-xxfyjsd)",
|
|
58
58
|
sm: "var(--sm-xbh8y7f)",
|
|
59
59
|
ms: "var(--ms-x13y09zs)",
|
|
@@ -160,6 +160,7 @@ const e = {
|
|
|
160
160
|
deviceBarW: "var(--deviceBarW-xqnx4o4)",
|
|
161
161
|
timeGutterW: "var(--timeGutterW-xsc6tna)",
|
|
162
162
|
dayHeaderH: "var(--dayHeaderH-x1j7gty0)",
|
|
163
|
+
timelineLabelW: "var(--timelineLabelW-xx6mz1f)",
|
|
163
164
|
__varGroupHash__: "x1w57kmz"
|
|
164
165
|
}, x = {
|
|
165
166
|
hairline: "var(--hairline-xomm6fc)",
|
|
@@ -172,10 +173,12 @@ const e = {
|
|
|
172
173
|
}, s = {
|
|
173
174
|
raised: "var(--raised-xnqqeg)",
|
|
174
175
|
floating: "var(--floating-x1bmxuyp)",
|
|
176
|
+
floatingRaised: "var(--floatingRaised-x1eg1u0w)",
|
|
175
177
|
overlay: "var(--overlay-x1pg5hea)",
|
|
176
178
|
modal: "var(--modal-x10p0ok)",
|
|
177
179
|
modalRaised: "var(--modalRaised-x1j0jssi)",
|
|
178
180
|
popover: "var(--popover-x13dty8z)",
|
|
181
|
+
popoverRaised: "var(--popoverRaised-x1pp3rn0)",
|
|
179
182
|
popupBackdrop: "var(--popupBackdrop-x17sujb4)",
|
|
180
183
|
popup: "var(--popup-xgi3yzv)",
|
|
181
184
|
toast: "var(--toast-xt0zgmc)",
|
|
@@ -393,7 +396,7 @@ export {
|
|
|
393
396
|
x as borders,
|
|
394
397
|
e as breakpoints,
|
|
395
398
|
r as breakpointsPx,
|
|
396
|
-
|
|
399
|
+
a as colors,
|
|
397
400
|
f as duration,
|
|
398
401
|
d as easing,
|
|
399
402
|
v as effects,
|
|
@@ -407,7 +410,7 @@ export {
|
|
|
407
410
|
n as radii,
|
|
408
411
|
h as shadows,
|
|
409
412
|
o as sizes,
|
|
410
|
-
|
|
413
|
+
t as spacing,
|
|
411
414
|
p as typePresets,
|
|
412
415
|
g as typeScale,
|
|
413
416
|
c as typography
|
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 // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#f5f5f5',\n onContrastSurface: '#1a1a1a',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n xs: '4px',\n sm: '8px',\n ms: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n px1: '1px',\n px2: '2px',\n px3: '3px',\n px5: '5px',\n px6: '6px',\n})\n\nexport const radii = css.defineVars({\n xs: '4px',\n px6: '6px',\n sm: '8px',\n md: '12px',\n lg: '16px',\n full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n touchTarget: '44px',\n controlSm: '28px',\n controlMd: '39px',\n controlLg: '40px',\n indicator: '18px',\n indicatorDot: '8px',\n checkMarkW: '5px',\n checkMarkH: '9px',\n switchTrackW: '36px',\n switchTrackH: '20px',\n switchThumb: '16px',\n iconButton: '32px',\n iconButtonSm: '28px',\n spinnerSm: '16px',\n spinnerMd: '24px',\n spinnerLg: '40px',\n glyphXs: '10px',\n glyphSm: '12px',\n glyphMd: '16px',\n iconSm: '16px',\n iconMd: '18px',\n iconLg: '24px',\n iconXl: '36px',\n iconXxl: '48px',\n navMarkerW: '3px',\n navMarkerH: '18px',\n divider: '1px',\n tabIndicator: '2px',\n edgeFade: '32px',\n scrollbar: '8px',\n swatchW: '44px',\n swatchH: '34px',\n labelMinW: '120px',\n popupMinW: '160px',\n listMaxH: '280px',\n listMaxHSm: '200px',\n dialogSm: '400px',\n dialogMd: '520px',\n dialogLg: '680px',\n panelSm: '360px',\n panelMd: '480px',\n panelLg: '640px',\n toastMaxW: '440px',\n gridColSm: '240px',\n gridColMd: '280px',\n pageSm: '600px',\n pageMd: '800px',\n pageLg: '1200px',\n sidebarW: '240px',\n pageXs: '480px',\n pageXl: '1440px',\n asideW: '320px',\n gridColXs: '200px',\n fieldMinWSm: '80px',\n fieldMinW: '160px',\n popoverWSm: '240px',\n popoverW: '320px',\n popupMaxW: '280px',\n meterH: '6px',\n skeletonChipW: '96px',\n dropZoneMinH: '128px',\n canvasMinH: '480px',\n editorMinH: '160px',\n toolbarH: '36px',\n embedW: '550px',\n colorPickerW: '196px',\n colorAreaH: '150px',\n colorTrackH: '12px',\n colorSwatch: '20px',\n colorPreviewH: '22px',\n handle: '16px',\n chip: '24px',\n placeholderMinH: '80px',\n previewMaxH: '320px',\n barH: '4px',\n readoutW: '40px',\n sliderW: '96px',\n paletteMinW: '96px',\n deviceBarW: '96px',\n // Calendar grids: the time-label column and the day-header row.\n timeGutterW: '64px',\n dayHeaderH: '46px',\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 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 // 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 // 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 // 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 // A fixed translucent white over content (the light counterpart of scrim).\n overlayLight: 'rgba(255, 255, 255, 0.78)',\n // The opposite tone of the theme: a surface that stands out from the page\n // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n // overlays above, which sit on an accent fill.\n contrastSurface: '#f5f5f5',\n onContrastSurface: '#1a1a1a',\n // A border on contrastSurface, at least 3:1 against it (non-text).\n contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n xs: '4px',\n sm: '8px',\n ms: '12px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n xxl: '48px',\n xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n px1: '1px',\n px2: '2px',\n px3: '3px',\n px5: '5px',\n px6: '6px',\n})\n\nexport const radii = css.defineVars({\n xs: '4px',\n px6: '6px',\n sm: '8px',\n md: '12px',\n lg: '16px',\n full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n touchTarget: '44px',\n controlSm: '28px',\n controlMd: '39px',\n controlLg: '40px',\n indicator: '18px',\n indicatorDot: '8px',\n checkMarkW: '5px',\n checkMarkH: '9px',\n switchTrackW: '36px',\n switchTrackH: '20px',\n switchThumb: '16px',\n iconButton: '32px',\n iconButtonSm: '28px',\n spinnerSm: '16px',\n spinnerMd: '24px',\n spinnerLg: '40px',\n glyphXs: '10px',\n glyphSm: '12px',\n glyphMd: '16px',\n iconSm: '16px',\n iconMd: '18px',\n iconLg: '24px',\n iconXl: '36px',\n iconXxl: '48px',\n navMarkerW: '3px',\n navMarkerH: '18px',\n divider: '1px',\n tabIndicator: '2px',\n edgeFade: '32px',\n scrollbar: '8px',\n swatchW: '44px',\n swatchH: '34px',\n labelMinW: '120px',\n popupMinW: '160px',\n listMaxH: '280px',\n listMaxHSm: '200px',\n dialogSm: '400px',\n dialogMd: '520px',\n dialogLg: '680px',\n panelSm: '360px',\n panelMd: '480px',\n panelLg: '640px',\n toastMaxW: '440px',\n gridColSm: '240px',\n gridColMd: '280px',\n pageSm: '600px',\n pageMd: '800px',\n pageLg: '1200px',\n sidebarW: '240px',\n pageXs: '480px',\n pageXl: '1440px',\n asideW: '320px',\n gridColXs: '200px',\n fieldMinWSm: '80px',\n fieldMinW: '160px',\n popoverWSm: '240px',\n popoverW: '320px',\n popupMaxW: '280px',\n meterH: '6px',\n skeletonChipW: '96px',\n dropZoneMinH: '128px',\n canvasMinH: '480px',\n editorMinH: '160px',\n toolbarH: '36px',\n embedW: '550px',\n colorPickerW: '196px',\n colorAreaH: '150px',\n colorTrackH: '12px',\n colorSwatch: '20px',\n colorPreviewH: '22px',\n handle: '16px',\n chip: '24px',\n placeholderMinH: '80px',\n previewMaxH: '320px',\n barH: '4px',\n readoutW: '40px',\n sliderW: '96px',\n paletteMinW: '96px',\n deviceBarW: '96px',\n // 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})\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 // 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 // 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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"}
|
package/dist/keys.d.ts
CHANGED
|
@@ -42,7 +42,7 @@ export declare const DURATION_MS: {
|
|
|
42
42
|
readonly slow: 280;
|
|
43
43
|
};
|
|
44
44
|
export type DurationToken = keyof typeof DURATION_MS;
|
|
45
|
-
export declare const SIZE_KEYS: readonly ["touchTarget", "controlSm", "controlMd", "controlLg", "indicator", "indicatorDot", "checkMarkW", "checkMarkH", "switchTrackW", "switchTrackH", "switchThumb", "iconButton", "iconButtonSm", "spinnerSm", "spinnerMd", "spinnerLg", "glyphXs", "glyphSm", "glyphMd", "iconSm", "iconMd", "iconLg", "iconXl", "iconXxl", "navMarkerW", "navMarkerH", "divider", "tabIndicator", "edgeFade", "scrollbar", "swatchW", "swatchH", "labelMinW", "popupMinW", "listMaxH", "listMaxHSm", "dialogSm", "dialogMd", "dialogLg", "panelSm", "panelMd", "panelLg", "toastMaxW", "gridColSm", "gridColMd", "pageSm", "pageMd", "pageLg", "sidebarW", "pageXs", "pageXl", "asideW", "gridColXs", "fieldMinWSm", "fieldMinW", "popoverWSm", "popoverW", "popupMaxW", "meterH", "skeletonChipW", "dropZoneMinH", "canvasMinH", "editorMinH", "toolbarH", "embedW", "colorPickerW", "colorAreaH", "colorTrackH", "colorSwatch", "colorPreviewH", "handle", "chip", "placeholderMinH", "previewMaxH", "barH", "readoutW", "sliderW", "paletteMinW", "deviceBarW", "timeGutterW", "dayHeaderH"];
|
|
45
|
+
export declare const SIZE_KEYS: readonly ["touchTarget", "controlSm", "controlMd", "controlLg", "indicator", "indicatorDot", "checkMarkW", "checkMarkH", "switchTrackW", "switchTrackH", "switchThumb", "iconButton", "iconButtonSm", "spinnerSm", "spinnerMd", "spinnerLg", "glyphXs", "glyphSm", "glyphMd", "iconSm", "iconMd", "iconLg", "iconXl", "iconXxl", "navMarkerW", "navMarkerH", "divider", "tabIndicator", "edgeFade", "scrollbar", "swatchW", "swatchH", "labelMinW", "popupMinW", "listMaxH", "listMaxHSm", "dialogSm", "dialogMd", "dialogLg", "panelSm", "panelMd", "panelLg", "toastMaxW", "gridColSm", "gridColMd", "pageSm", "pageMd", "pageLg", "sidebarW", "pageXs", "pageXl", "asideW", "gridColXs", "fieldMinWSm", "fieldMinW", "popoverWSm", "popoverW", "popupMaxW", "meterH", "skeletonChipW", "dropZoneMinH", "canvasMinH", "editorMinH", "toolbarH", "embedW", "colorPickerW", "colorAreaH", "colorTrackH", "colorSwatch", "colorPreviewH", "handle", "chip", "placeholderMinH", "previewMaxH", "barH", "readoutW", "sliderW", "paletteMinW", "deviceBarW", "timeGutterW", "dayHeaderH", "timelineLabelW"];
|
|
46
46
|
export type SizeToken = (typeof SIZE_KEYS)[number];
|
|
47
47
|
export declare const SIZES_PX: {
|
|
48
48
|
readonly touchTarget: 44;
|
|
@@ -126,6 +126,7 @@ export declare const SIZES_PX: {
|
|
|
126
126
|
readonly deviceBarW: 96;
|
|
127
127
|
readonly timeGutterW: 64;
|
|
128
128
|
readonly dayHeaderH: 46;
|
|
129
|
+
readonly timelineLabelW: 180;
|
|
129
130
|
};
|
|
130
131
|
export declare const BORDER_KEYS: readonly ["hairline", "strong", "accent", "focusRing", "focusOffset", "focusOffsetSm"];
|
|
131
132
|
export type BorderToken = (typeof BORDER_KEYS)[number];
|
|
@@ -137,15 +138,17 @@ export declare const BORDERS_PX: {
|
|
|
137
138
|
readonly focusOffset: 2;
|
|
138
139
|
readonly focusOffsetSm: 1;
|
|
139
140
|
};
|
|
140
|
-
export declare const LAYER_KEYS: readonly ["raised", "floating", "overlay", "modal", "modalRaised", "popover", "popupBackdrop", "popup", "toast", "portal"];
|
|
141
|
+
export declare const LAYER_KEYS: readonly ["raised", "floating", "floatingRaised", "overlay", "modal", "modalRaised", "popover", "popoverRaised", "popupBackdrop", "popup", "toast", "portal"];
|
|
141
142
|
export type LayerToken = (typeof LAYER_KEYS)[number];
|
|
142
143
|
export declare const LAYERS: {
|
|
143
144
|
readonly raised: 1;
|
|
144
145
|
readonly floating: 50;
|
|
146
|
+
readonly floatingRaised: 60;
|
|
145
147
|
readonly overlay: 1000;
|
|
146
148
|
readonly modal: 1001;
|
|
147
149
|
readonly modalRaised: 1002;
|
|
148
150
|
readonly popover: 1040;
|
|
151
|
+
readonly popoverRaised: 1041;
|
|
149
152
|
readonly popupBackdrop: 1049;
|
|
150
153
|
readonly popup: 1050;
|
|
151
154
|
readonly toast: 1060;
|
package/dist/keys.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,sDAAuD,CAAA;AAC/E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAEpD,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,sDAAuD,CAAA;AAC/E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAEpD,eAAO,MAAM,SAAS,yiCAmFZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFX,CAAA;AAEV,eAAO,MAAM,WAAW,wFAOd,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,UAAU,+JAab,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAKV,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;;CAMV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}
|
package/dist/mockup.css
CHANGED
|
@@ -160,6 +160,7 @@
|
|
|
160
160
|
--duro-size-switch-track-w: 36px;
|
|
161
161
|
--duro-size-tab-indicator: 2px;
|
|
162
162
|
--duro-size-time-gutter-w: 64px;
|
|
163
|
+
--duro-size-timeline-label-w: 180px;
|
|
163
164
|
--duro-size-toast-max-w: 440px;
|
|
164
165
|
--duro-size-toolbar-h: 36px;
|
|
165
166
|
--duro-size-touch-target: 44px;
|
|
@@ -172,10 +173,12 @@
|
|
|
172
173
|
--duro-border-strong: 2px;
|
|
173
174
|
/* layers */
|
|
174
175
|
--duro-layer-floating: 50;
|
|
176
|
+
--duro-layer-floating-raised: 60;
|
|
175
177
|
--duro-layer-modal: 1001;
|
|
176
178
|
--duro-layer-modal-raised: 1002;
|
|
177
179
|
--duro-layer-overlay: 1000;
|
|
178
180
|
--duro-layer-popover: 1040;
|
|
181
|
+
--duro-layer-popover-raised: 1041;
|
|
179
182
|
--duro-layer-popup: 1050;
|
|
180
183
|
--duro-layer-popup-backdrop: 1049;
|
|
181
184
|
--duro-layer-portal: 1100;
|
package/dist/raw.d.ts
CHANGED
|
@@ -78,10 +78,12 @@ export declare const BORDERS_PX: {
|
|
|
78
78
|
export declare const LAYERS: {
|
|
79
79
|
readonly raised: 1;
|
|
80
80
|
readonly floating: 50;
|
|
81
|
+
readonly floatingRaised: 60;
|
|
81
82
|
readonly overlay: 1000;
|
|
82
83
|
readonly modal: 1001;
|
|
83
84
|
readonly modalRaised: 1002;
|
|
84
85
|
readonly popover: 1040;
|
|
86
|
+
readonly popoverRaised: 1041;
|
|
85
87
|
readonly popupBackdrop: 1049;
|
|
86
88
|
readonly popup: 1050;
|
|
87
89
|
readonly toast: 1060;
|
|
@@ -173,6 +175,7 @@ export declare const SIZES_PX: {
|
|
|
173
175
|
readonly deviceBarW: 96;
|
|
174
176
|
readonly timeGutterW: 64;
|
|
175
177
|
readonly dayHeaderH: 46;
|
|
178
|
+
readonly timelineLabelW: 180;
|
|
176
179
|
};
|
|
177
180
|
export declare const EMAIL_PX: {
|
|
178
181
|
readonly emailCardW: 520;
|
package/dist/raw.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raw.d.ts","sourceRoot":"","sources":["../src/raw.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,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,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
|
|
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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFX,CAAA;AAIV,eAAO,MAAM,QAAQ;;;CAA+C,CAAA;AAGpE,eAAO,MAAM,UAAU,EAAE,SA0CxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SA0CzB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,SA0ChC,CAAA"}
|
package/dist/raw.js
CHANGED
|
@@ -31,18 +31,20 @@ const r = {
|
|
|
31
31
|
}, t = {
|
|
32
32
|
raised: 1,
|
|
33
33
|
floating: 50,
|
|
34
|
+
floatingRaised: 60,
|
|
34
35
|
overlay: 1e3,
|
|
35
36
|
modal: 1001,
|
|
36
37
|
modalRaised: 1002,
|
|
37
38
|
popover: 1040,
|
|
39
|
+
popoverRaised: 1041,
|
|
38
40
|
popupBackdrop: 1049,
|
|
39
41
|
popup: 1050,
|
|
40
42
|
toast: 1060,
|
|
41
43
|
portal: 1100
|
|
42
|
-
},
|
|
44
|
+
}, i = {
|
|
43
45
|
overlayBlur: "blur(2px)",
|
|
44
46
|
surfaceBlur: "blur(6px)"
|
|
45
|
-
},
|
|
47
|
+
}, g = {
|
|
46
48
|
touchTarget: 44,
|
|
47
49
|
controlSm: 28,
|
|
48
50
|
controlMd: 39,
|
|
@@ -123,7 +125,8 @@ const r = {
|
|
|
123
125
|
paletteMinW: 96,
|
|
124
126
|
deviceBarW: 96,
|
|
125
127
|
timeGutterW: 64,
|
|
126
|
-
dayHeaderH: 46
|
|
128
|
+
dayHeaderH: 46,
|
|
129
|
+
timelineLabelW: 180
|
|
127
130
|
}, n = {
|
|
128
131
|
emailCardW: 520,
|
|
129
132
|
trackingPixel: 1
|
|
@@ -256,12 +259,12 @@ const r = {
|
|
|
256
259
|
};
|
|
257
260
|
export {
|
|
258
261
|
o as BORDERS_PX,
|
|
259
|
-
|
|
262
|
+
i as EFFECTS,
|
|
260
263
|
n as EMAIL_PX,
|
|
261
264
|
a as FONT_SIZE_REM,
|
|
262
265
|
t as LAYERS,
|
|
263
266
|
e as RADII_PX,
|
|
264
|
-
|
|
267
|
+
g as SIZES_PX,
|
|
265
268
|
r as SPACING_PX,
|
|
266
269
|
f as darkColors,
|
|
267
270
|
s as highContrastColors,
|
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 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 overlay: 1000,\n modal: 1001,\n modalRaised: 1002,\n popover: 1040,\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 navMarkerW: 3,\n navMarkerH: 18,\n divider: 1,\n tabIndicator: 2,\n edgeFade: 32,\n scrollbar: 8,\n swatchW: 44,\n swatchH: 34,\n labelMinW: 120,\n popupMinW: 160,\n listMaxH: 280,\n listMaxHSm: 200,\n dialogSm: 400,\n dialogMd: 520,\n dialogLg: 680,\n panelSm: 360,\n panelMd: 480,\n panelLg: 640,\n toastMaxW: 440,\n gridColSm: 240,\n gridColMd: 280,\n pageSm: 600,\n pageMd: 800,\n pageLg: 1200,\n sidebarW: 240,\n pageXs: 480,\n pageXl: 1440,\n asideW: 320,\n gridColXs: 200,\n fieldMinWSm: 80,\n fieldMinW: 160,\n popoverWSm: 240,\n popoverW: 320,\n popupMaxW: 280,\n meterH: 6,\n skeletonChipW: 96,\n dropZoneMinH: 128,\n canvasMinH: 480,\n editorMinH: 160,\n toolbarH: 36,\n embedW: 550,\n colorPickerW: 196,\n colorAreaH: 150,\n colorTrackH: 12,\n colorSwatch: 20,\n colorPreviewH: 22,\n handle: 16,\n chip: 24,\n placeholderMinH: 80,\n previewMaxH: 320,\n barH: 4,\n readoutW: 40,\n sliderW: 96,\n paletteMinW: 96,\n deviceBarW: 96,\n timeGutterW: 64,\n dayHeaderH: 46,\n} 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 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 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 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 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 navMarkerW: 3,\n navMarkerH: 18,\n divider: 1,\n tabIndicator: 2,\n edgeFade: 32,\n scrollbar: 8,\n swatchW: 44,\n swatchH: 34,\n labelMinW: 120,\n popupMinW: 160,\n listMaxH: 280,\n listMaxHSm: 200,\n dialogSm: 400,\n dialogMd: 520,\n dialogLg: 680,\n panelSm: 360,\n panelMd: 480,\n panelLg: 640,\n toastMaxW: 440,\n gridColSm: 240,\n gridColMd: 280,\n pageSm: 600,\n pageMd: 800,\n pageLg: 1200,\n sidebarW: 240,\n pageXs: 480,\n pageXl: 1440,\n asideW: 320,\n gridColXs: 200,\n fieldMinWSm: 80,\n fieldMinW: 160,\n popoverWSm: 240,\n popoverW: 320,\n popupMaxW: 280,\n meterH: 6,\n skeletonChipW: 96,\n dropZoneMinH: 128,\n canvasMinH: 480,\n editorMinH: 160,\n toolbarH: 36,\n embedW: 550,\n colorPickerW: 196,\n colorAreaH: 150,\n colorTrackH: 12,\n colorSwatch: 20,\n colorPreviewH: 22,\n handle: 16,\n chip: 24,\n placeholderMinH: 80,\n previewMaxH: 320,\n barH: 4,\n readoutW: 40,\n sliderW: 96,\n paletteMinW: 96,\n deviceBarW: 96,\n timeGutterW: 64,\n dayHeaderH: 46,\n timelineLabelW: 180,\n} 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 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 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 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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"}
|
|
@@ -2,10 +2,12 @@ import { css } from 'react-strict-dom';
|
|
|
2
2
|
export declare const layers: css.VarGroup<Readonly<{
|
|
3
3
|
readonly raised: css.Types.Integer<number>;
|
|
4
4
|
readonly floating: css.Types.Integer<number>;
|
|
5
|
+
readonly floatingRaised: css.Types.Integer<number>;
|
|
5
6
|
readonly overlay: css.Types.Integer<number>;
|
|
6
7
|
readonly modal: css.Types.Integer<number>;
|
|
7
8
|
readonly modalRaised: css.Types.Integer<number>;
|
|
8
9
|
readonly popover: css.Types.Integer<number>;
|
|
10
|
+
readonly popoverRaised: css.Types.Integer<number>;
|
|
9
11
|
readonly popupBackdrop: css.Types.Integer<number>;
|
|
10
12
|
readonly popup: css.Types.Integer<number>;
|
|
11
13
|
readonly toast: css.Types.Integer<number>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layers.css.d.ts","sourceRoot":"","sources":["../../src/tokens/layers.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAgBpC,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"layers.css.d.ts","sourceRoot":"","sources":["../../src/tokens/layers.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAgBpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;WAiCsC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sizes.css.d.ts","sourceRoot":"","sources":["../../src/tokens/sizes.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"sizes.css.d.ts","sourceRoot":"","sources":["../../src/tokens/sizes.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAqFhB,CAAA"}
|
package/dist/vars.css
CHANGED
|
@@ -161,6 +161,7 @@
|
|
|
161
161
|
--duro-size-switch-track-w: var(--switchTrackW-xcah3tt);
|
|
162
162
|
--duro-size-tab-indicator: var(--tabIndicator-xeswvk3);
|
|
163
163
|
--duro-size-time-gutter-w: var(--timeGutterW-xsc6tna);
|
|
164
|
+
--duro-size-timeline-label-w: var(--timelineLabelW-xx6mz1f);
|
|
164
165
|
--duro-size-toast-max-w: var(--toastMaxW-x1po6n0z);
|
|
165
166
|
--duro-size-toolbar-h: var(--toolbarH-x16tj5lc);
|
|
166
167
|
--duro-size-touch-target: var(--touchTarget-x1u5badx);
|
|
@@ -173,10 +174,12 @@
|
|
|
173
174
|
--duro-border-strong: var(--strong-x1otbxzr);
|
|
174
175
|
/* layers */
|
|
175
176
|
--duro-layer-floating: var(--floating-x1bmxuyp);
|
|
177
|
+
--duro-layer-floating-raised: var(--floatingRaised-x1eg1u0w);
|
|
176
178
|
--duro-layer-modal: var(--modal-x10p0ok);
|
|
177
179
|
--duro-layer-modal-raised: var(--modalRaised-x1j0jssi);
|
|
178
180
|
--duro-layer-overlay: var(--overlay-x1pg5hea);
|
|
179
181
|
--duro-layer-popover: var(--popover-x13dty8z);
|
|
182
|
+
--duro-layer-popover-raised: var(--popoverRaised-x1pp3rn0);
|
|
180
183
|
--duro-layer-popup: var(--popup-xgi3yzv);
|
|
181
184
|
--duro-layer-popup-backdrop: var(--popupBackdrop-x17sujb4);
|
|
182
185
|
--duro-layer-portal: var(--portal-xmizwb3);
|
package/package.json
CHANGED
package/src/keys.ts
CHANGED
|
@@ -152,6 +152,7 @@ export const SIZE_KEYS = [
|
|
|
152
152
|
'deviceBarW',
|
|
153
153
|
'timeGutterW',
|
|
154
154
|
'dayHeaderH',
|
|
155
|
+
'timelineLabelW',
|
|
155
156
|
] as const
|
|
156
157
|
export type SizeToken = (typeof SIZE_KEYS)[number]
|
|
157
158
|
|
|
@@ -238,6 +239,7 @@ export const SIZES_PX = {
|
|
|
238
239
|
deviceBarW: 96,
|
|
239
240
|
timeGutterW: 64,
|
|
240
241
|
dayHeaderH: 46,
|
|
242
|
+
timelineLabelW: 180,
|
|
241
243
|
} as const
|
|
242
244
|
|
|
243
245
|
export const BORDER_KEYS = [
|
|
@@ -263,10 +265,12 @@ export const BORDERS_PX = {
|
|
|
263
265
|
export const LAYER_KEYS = [
|
|
264
266
|
'raised',
|
|
265
267
|
'floating',
|
|
268
|
+
'floatingRaised',
|
|
266
269
|
'overlay',
|
|
267
270
|
'modal',
|
|
268
271
|
'modalRaised',
|
|
269
272
|
'popover',
|
|
273
|
+
'popoverRaised',
|
|
270
274
|
'popupBackdrop',
|
|
271
275
|
'popup',
|
|
272
276
|
'toast',
|
|
@@ -279,10 +283,12 @@ export type LayerToken = (typeof LAYER_KEYS)[number]
|
|
|
279
283
|
export const LAYERS = {
|
|
280
284
|
raised: 1,
|
|
281
285
|
floating: 50,
|
|
286
|
+
floatingRaised: 60,
|
|
282
287
|
overlay: 1000,
|
|
283
288
|
modal: 1001,
|
|
284
289
|
modalRaised: 1002,
|
|
285
290
|
popover: 1040,
|
|
291
|
+
popoverRaised: 1041,
|
|
286
292
|
popupBackdrop: 1049,
|
|
287
293
|
popup: 1050,
|
|
288
294
|
toast: 1060,
|
package/src/raw.ts
CHANGED
|
@@ -97,10 +97,12 @@ export const BORDERS_PX = {
|
|
|
97
97
|
export const LAYERS = {
|
|
98
98
|
raised: 1,
|
|
99
99
|
floating: 50,
|
|
100
|
+
floatingRaised: 60,
|
|
100
101
|
overlay: 1000,
|
|
101
102
|
modal: 1001,
|
|
102
103
|
modalRaised: 1002,
|
|
103
104
|
popover: 1040,
|
|
105
|
+
popoverRaised: 1041,
|
|
104
106
|
popupBackdrop: 1049,
|
|
105
107
|
popup: 1050,
|
|
106
108
|
toast: 1060,
|
|
@@ -195,6 +197,7 @@ export const SIZES_PX = {
|
|
|
195
197
|
deviceBarW: 96,
|
|
196
198
|
timeGutterW: 64,
|
|
197
199
|
dayHeaderH: 46,
|
|
200
|
+
timelineLabelW: 180,
|
|
198
201
|
} as const
|
|
199
202
|
|
|
200
203
|
// Email-only measures: no CSS variable (mail clients cannot read them) and not
|
package/src/tokens/layers.css.ts
CHANGED
|
@@ -20,6 +20,11 @@ export const layers = css.defineVars({
|
|
|
20
20
|
raised: '1',
|
|
21
21
|
// Floating chrome over the page: Tooltip, ActionBar.
|
|
22
22
|
floating: '50',
|
|
23
|
+
// A floating surface that must cover another floating one, outside a modal:
|
|
24
|
+
// a link editor over a selection format bar. Pair it with `popoverRaised`
|
|
25
|
+
// and pick by `useInModal()` (a Popover does it with `raised`). It covers a
|
|
26
|
+
// sibling floating surface, never a modal.
|
|
27
|
+
floatingRaised: '60',
|
|
23
28
|
// A modal's backdrop.
|
|
24
29
|
overlay: '1000',
|
|
25
30
|
// A modal's panel (Dialog, Drawer).
|
|
@@ -31,6 +36,9 @@ export const layers = css.defineVars({
|
|
|
31
36
|
// (a Select, a Menu) and the Select click-catcher opened from inside it.
|
|
32
37
|
// Outside a modal a Popover is `floating`, so a modal opened later covers it.
|
|
33
38
|
popover: '1040',
|
|
39
|
+
// `floatingRaised` inside a Dialog or Drawer: over a Popover there, under
|
|
40
|
+
// a popup's click-catcher and the popup itself.
|
|
41
|
+
popoverRaised: '1041',
|
|
34
42
|
// A popup's click-catcher, under the popup itself.
|
|
35
43
|
popupBackdrop: '1049',
|
|
36
44
|
// Popups: Select, Listbox, Menu — above a modal or Popover they open from.
|
package/src/tokens/sizes.css.ts
CHANGED