@duro-app/tokens 5.1.0 → 5.3.0

package/dist/tokens/sizes.css.d.ts

@@ -48,5 +48,38 @@ export declare const sizes: css.VarGroup<Readonly<{
     pageSm: string;
     pageMd: string;
     pageLg: string;
+    sidebarW: string;
+    pageXs: string;
+    pageXl: string;
+    asideW: string;
+    gridColXs: string;
+    fieldMinWSm: string;
+    fieldMinW: string;
+    popoverWSm: string;
+    popoverW: string;
+    popupMaxW: string;
+    meterH: string;
+    skeletonChipW: string;
+    dropZoneMinH: string;
+    canvasMinH: string;
+    editorMinH: string;
+    toolbarH: string;
+    embedW: string;
+    colorPickerW: string;
+    colorAreaH: string;
+    colorTrackH: string;
+    colorSwatch: string;
+    colorPreviewH: string;
+    handle: string;
+    chip: string;
+    placeholderMinH: string;
+    previewMaxH: string;
+    barH: string;
+    readoutW: string;
+    sliderW: string;
+    paletteMinW: string;
+    deviceBarW: string;
+    timeGutterW: string;
+    dayHeaderH: string;
 }>, symbol>;
 //# sourceMappingURL=sizes.css.d.ts.map

package/dist/tokens/sizes.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.css.d.ts","sourceRoot":"","sources":["../../src/tokens/sizes.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAiDhB,CAAA"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAmFhB,CAAA"}

package/dist/vars.css

@@ -20,6 +20,8 @@
   --duro-color-bg-card: var(--bgCard-xj2l5r);
   --duro-color-bg-card-hover: var(--bgCardHover-xlxk7vw);
   --duro-color-border: var(--border-x1drj1pb);
+  --duro-color-contrast-border: var(--contrastBorder-x1g9he7g);
+  --duro-color-contrast-surface: var(--contrastSurface-x1i512m4);
   --duro-color-error: var(--error-x13gdhh0);
   --duro-color-error-bg: var(--errorBg-xrl8836);
   --duro-color-error-border: var(--errorBorder-x1a6pjl);
@@ -27,6 +29,10 @@
   --duro-color-error-hover: var(--errorHover-x7eyu03);
   --duro-color-error-text: var(--errorText-xf51nwe);
   --duro-color-fixed-light: var(--fixedLight-xd608fw);
+  --duro-color-highlight: var(--highlight-x14yvf5c);
+  --duro-color-highlight-bg: var(--highlightBg-x5qhmj2);
+  --duro-color-highlight-border: var(--highlightBorder-xd7ycfq);
+  --duro-color-highlight-text: var(--highlightText-x1lyse6a);
   --duro-color-info: var(--info-x97ho0r);
   --duro-color-info-bg: var(--infoBg-xho8jir);
   --duro-color-info-border: var(--infoBorder-xnevk3x);
@@ -35,6 +41,8 @@
   --duro-color-inverse-border-hover: var(--inverseBorderHover-x12x46ev);
   --duro-color-inverse-fill: var(--inverseFill-x1il694p);
   --duro-color-inverse-fill-hover: var(--inverseFillHover-xmxqxj9);
+  --duro-color-on-contrast-surface: var(--onContrastSurface-x1dm0pi1);
+  --duro-color-overlay-light: var(--overlayLight-x71omwc);
   --duro-color-scrim: var(--scrim-x2ypej7);
   --duro-color-success: var(--success-x197pe5n);
   --duro-color-success-bg: var(--successBg-xzjukav);
@@ -54,6 +62,8 @@
   --duro-radius-sm: var(--sm-x1bhtfs5);
   --duro-radius-xs: var(--xs-x1gb5bcy);
   /* shadows */
+  --duro-shadow-drop-over: var(--dropOver-x1w3k9ro);
+  --duro-shadow-drop-ready: var(--dropReady-x19ev27m);
   --duro-shadow-lg: var(--lg-x1mxd62i);
   --duro-shadow-md: var(--md-x1oyt0aw);
   --duro-shadow-sm: var(--sm-x17hhtln);
@@ -73,21 +83,39 @@
   --duro-micro-spacing-px5: var(--px5-xrmlnev);
   --duro-micro-spacing-px6: var(--px6-x1h3gnvl);
   /* sizes */
+  --duro-size-aside-w: var(--asideW-x1sefzvd);
+  --duro-size-bar-h: var(--barH-x1oc8exn);
+  --duro-size-canvas-min-h: var(--canvasMinH-xpv99dk);
   --duro-size-check-mark-h: var(--checkMarkH-xz3lx6u);
   --duro-size-check-mark-w: var(--checkMarkW-xvyirw7);
+  --duro-size-chip: var(--chip-xofdvjg);
+  --duro-size-color-area-h: var(--colorAreaH-xn4he4);
+  --duro-size-color-picker-w: var(--colorPickerW-xafjozf);
+  --duro-size-color-preview-h: var(--colorPreviewH-x1by70nu);
+  --duro-size-color-swatch: var(--colorSwatch-xr73m8p);
+  --duro-size-color-track-h: var(--colorTrackH-x1ixtmdy);
   --duro-size-control-lg: var(--controlLg-xf3drh3);
   --duro-size-control-md: var(--controlMd-xkvaeme);
   --duro-size-control-sm: var(--controlSm-x6ymn93);
+  --duro-size-day-header-h: var(--dayHeaderH-x1j7gty0);
+  --duro-size-device-bar-w: var(--deviceBarW-xqnx4o4);
   --duro-size-dialog-lg: var(--dialogLg-xsd9wl3);
   --duro-size-dialog-md: var(--dialogMd-x1yjoj5l);
   --duro-size-dialog-sm: var(--dialogSm-x16fibl1);
   --duro-size-divider: var(--divider-x34oj7m);
+  --duro-size-drop-zone-min-h: var(--dropZoneMinH-x9asgie);
   --duro-size-edge-fade: var(--edgeFade-x1a8srg4);
+  --duro-size-editor-min-h: var(--editorMinH-x7umtuv);
+  --duro-size-embed-w: var(--embedW-x1jprk4i);
+  --duro-size-field-min-w: var(--fieldMinW-x3410dk);
+  --duro-size-field-min-w-sm: var(--fieldMinWSm-x17qqf6g);
   --duro-size-glyph-md: var(--glyphMd-x1hz0jso);
   --duro-size-glyph-sm: var(--glyphSm-x17geiot);
   --duro-size-glyph-xs: var(--glyphXs-x7xktls);
   --duro-size-grid-col-md: var(--gridColMd-x1cjqdt9);
   --duro-size-grid-col-sm: var(--gridColSm-xzwpy92);
+  --duro-size-grid-col-xs: var(--gridColXs-x1uralsc);
+  --duro-size-handle: var(--handle-xt9m584);
   --duro-size-icon-button: var(--iconButton-x16lr7a8);
   --duro-size-icon-button-sm: var(--iconButtonSm-xtjgrhy);
   --duro-size-icon-lg: var(--iconLg-x1lsumnr);
@@ -100,16 +128,29 @@
   --duro-size-label-min-w: var(--labelMinW-x1tnvsg3);
   --duro-size-list-max-h: var(--listMaxH-x1g3bmh3);
   --duro-size-list-max-h-sm: var(--listMaxHSm-xhny4oa);
+  --duro-size-meter-h: var(--meterH-x5xauib);
   --duro-size-nav-marker-h: var(--navMarkerH-xlc6r7a);
   --duro-size-nav-marker-w: var(--navMarkerW-x1swbkx4);
   --duro-size-page-lg: var(--pageLg-x393fnm);
   --duro-size-page-md: var(--pageMd-xloo57l);
   --duro-size-page-sm: var(--pageSm-x5j4ghi);
+  --duro-size-page-xl: var(--pageXl-xe1y5wy);
+  --duro-size-page-xs: var(--pageXs-xkx7b2k);
+  --duro-size-palette-min-w: var(--paletteMinW-x1514e6j);
   --duro-size-panel-lg: var(--panelLg-x19cpfjm);
   --duro-size-panel-md: var(--panelMd-x11x23mn);
   --duro-size-panel-sm: var(--panelSm-x1ng1dcv);
+  --duro-size-placeholder-min-h: var(--placeholderMinH-xy0p02w);
+  --duro-size-popover-w: var(--popoverW-xf1f07);
+  --duro-size-popover-w-sm: var(--popoverWSm-x17g62mi);
+  --duro-size-popup-max-w: var(--popupMaxW-x16p43ce);
   --duro-size-popup-min-w: var(--popupMinW-xzyp04);
+  --duro-size-preview-max-h: var(--previewMaxH-x1phh3ob);
+  --duro-size-readout-w: var(--readoutW-xi5rn1i);
   --duro-size-scrollbar: var(--scrollbar-xppi9bb);
+  --duro-size-sidebar-w: var(--sidebarW-x16fh60r);
+  --duro-size-skeleton-chip-w: var(--skeletonChipW-xmw24hn);
+  --duro-size-slider-w: var(--sliderW-xvcfp7i);
   --duro-size-spinner-lg: var(--spinnerLg-x1lgp9p9);
   --duro-size-spinner-md: var(--spinnerMd-x11a4rba);
   --duro-size-spinner-sm: var(--spinnerSm-xoj3xel);
@@ -119,7 +160,9 @@
   --duro-size-switch-track-h: var(--switchTrackH-x1h3icne);
   --duro-size-switch-track-w: var(--switchTrackW-xcah3tt);
   --duro-size-tab-indicator: var(--tabIndicator-xeswvk3);
+  --duro-size-time-gutter-w: var(--timeGutterW-xsc6tna);
   --duro-size-toast-max-w: var(--toastMaxW-x1po6n0z);
+  --duro-size-toolbar-h: var(--toolbarH-x16tj5lc);
   --duro-size-touch-target: var(--touchTarget-x1u5badx);
   /* borders */
   --duro-border-accent: var(--accent-x1eiysj0);
@@ -128,6 +171,18 @@
   --duro-border-focus-ring: var(--focusRing-x851k0b);
   --duro-border-hairline: var(--hairline-xomm6fc);
   --duro-border-strong: var(--strong-x1otbxzr);
+  /* layers */
+  --duro-layer-floating: var(--floating-x1bmxuyp);
+  --duro-layer-modal: var(--modal-x10p0ok);
+  --duro-layer-overlay: var(--overlay-x1pg5hea);
+  --duro-layer-popover: var(--popover-x13dty8z);
+  --duro-layer-popup: var(--popup-xgi3yzv);
+  --duro-layer-popup-backdrop: var(--popupBackdrop-x17sujb4);
+  --duro-layer-portal: var(--portal-xmizwb3);
+  --duro-layer-raised: var(--raised-xnqqeg);
+  --duro-layer-toast: var(--toast-xt0zgmc);
+  /* effects */
+  --duro-effect-overlay-blur: var(--overlayBlur-x1i07nq9);
   /* layoutSpacing */
   --duro-layout-spacing-container-lg: var(--containerLg-x1n6aasq);
   --duro-layout-spacing-container-md: var(--containerMd-x170dvin);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/tokens",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -41,6 +41,8 @@
     "./tokens/spacing.css": "./src/tokens/spacing.css.ts",
     "./tokens/sizes.css": "./src/tokens/sizes.css.ts",
     "./tokens/borders.css": "./src/tokens/borders.css.ts",
+    "./tokens/layers.css": "./src/tokens/layers.css.ts",
+    "./tokens/effects.css": "./src/tokens/effects.css.ts",
     "./tokens/typography.css": "./src/tokens/typography.css.ts",
     "./tokens/layout-spacing.css": "./src/tokens/layout-spacing.css.ts",
     "./tokens/shadows.css": "./src/tokens/shadows.css.ts",

package/src/index.ts

@@ -4,6 +4,8 @@ export {colors} from './tokens/colors.css'
 export {spacing, microSpacing, radii} from './tokens/spacing.css'
 export {sizes} from './tokens/sizes.css'
 export {borders} from './tokens/borders.css'
+export {layers} from './tokens/layers.css'
+export {effects} from './tokens/effects.css'
 export {layoutSpacing} from './tokens/layout-spacing.css'
 export {typography, typeScale} from './tokens/typography.css'
 export {typePresets} from './tokens/type-presets.css'

package/src/keys.ts

@@ -55,7 +55,7 @@ export const RADII_PX = {
   full: 9999,
 } as const
 
-export const SHADOW_KEYS = ['sm', 'md', 'lg'] as const
+export const SHADOW_KEYS = ['sm', 'md', 'lg', 'dropReady', 'dropOver'] as const
 export type ShadowToken = (typeof SHADOW_KEYS)[number]
 
 // Mirrors tokens/motion.css.ts `duration`, as numbers for setTimeout use.
@@ -119,6 +119,39 @@ export const SIZE_KEYS = [
   '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',
 ] as const
 export type SizeToken = (typeof SIZE_KEYS)[number]
 
@@ -172,6 +205,39 @@ export const SIZES_PX = {
   pageSm: 600,
   pageMd: 800,
   pageLg: 1200,
+  sidebarW: 240,
+  pageXs: 480,
+  pageXl: 1440,
+  asideW: 320,
+  gridColXs: 200,
+  fieldMinWSm: 80,
+  fieldMinW: 160,
+  popoverWSm: 240,
+  popoverW: 320,
+  popupMaxW: 280,
+  meterH: 6,
+  skeletonChipW: 96,
+  dropZoneMinH: 128,
+  canvasMinH: 480,
+  editorMinH: 160,
+  toolbarH: 36,
+  embedW: 550,
+  colorPickerW: 196,
+  colorAreaH: 150,
+  colorTrackH: 12,
+  colorSwatch: 20,
+  colorPreviewH: 22,
+  handle: 16,
+  chip: 24,
+  placeholderMinH: 80,
+  previewMaxH: 320,
+  barH: 4,
+  readoutW: 40,
+  sliderW: 96,
+  paletteMinW: 96,
+  deviceBarW: 96,
+  timeGutterW: 64,
+  dayHeaderH: 46,
 } as const
 
 export const BORDER_KEYS = [
@@ -194,6 +260,41 @@ export const BORDERS_PX = {
   focusOffsetSm: 1,
 } as const
 
+export const LAYER_KEYS = [
+  'raised',
+  'floating',
+  'overlay',
+  'modal',
+  'popover',
+  'popupBackdrop',
+  'popup',
+  'toast',
+  'portal',
+] as const
+export type LayerToken = (typeof LAYER_KEYS)[number]
+
+// Mirrors tokens/layers.css.ts `layers` (unitless), as numbers: React Native
+// takes a number for zIndex, not the CSS variable string.
+export const LAYERS = {
+  raised: 1,
+  floating: 50,
+  overlay: 1000,
+  modal: 1001,
+  popover: 1040,
+  popupBackdrop: 1049,
+  popup: 1050,
+  toast: 1060,
+  portal: 1100,
+} as const
+
+export const EFFECT_KEYS = ['overlayBlur'] as const
+export type EffectToken = (typeof EFFECT_KEYS)[number]
+
+// Mirrors tokens/effects.css.ts `effects` verbatim.
+export const EFFECTS = {
+  overlayBlur: 'blur(2px)',
+} as const
+
 // Icon rendering sizes (SVG width/height, px). Not its own css.defineVars
 // scale — icons size via attributes — so it is derived from the `sizes` group
 // (iconSm…iconXxl), keeping one source.
@@ -254,6 +355,8 @@ export const SHADOWS = {
   sm: '0 2px 4px rgba(0, 0, 0, 0.3)',
   md: '0 4px 12px rgba(0, 0, 0, 0.4)',
   lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
+  dropReady: 'inset 0 0 0 1px #333333',
+  dropOver: 'inset 0 0 0 2px #6aaffc',
 } as const
 
 // Mirrors tokens/motion.css.ts `easing` verbatim.

package/src/raw.ts

@@ -37,12 +37,20 @@ export type RawColors = {
   infoBg: string
   infoBorder: string
   infoText: string
+  highlight: string
+  highlightBg: string
+  highlightBorder: string
+  highlightText: string
   scrim: string
   inverseFill: string
   inverseFillHover: string
   inverseBorder: string
   inverseBorderHover: string
   fixedLight: string
+  overlayLight: string
+  contrastSurface: string
+  onContrastSurface: string
+  contrastBorder: string
 }
 
 // Numeric maps for consumers that load only the compiled `/raw` entry (e.g.
@@ -86,6 +94,18 @@ export const BORDERS_PX = {
   focusOffsetSm: 1,
 } as const
 
+export const LAYERS = {
+  raised: 1,
+  floating: 50,
+  overlay: 1000,
+  modal: 1001,
+  popover: 1040,
+  popupBackdrop: 1049,
+  popup: 1050,
+  toast: 1060,
+  portal: 1100,
+} as const
+
 export const SIZES_PX = {
   touchTarget: 44,
   controlSm: 28,
@@ -135,6 +155,39 @@ export const SIZES_PX = {
   pageSm: 600,
   pageMd: 800,
   pageLg: 1200,
+  sidebarW: 240,
+  pageXs: 480,
+  pageXl: 1440,
+  asideW: 320,
+  gridColXs: 200,
+  fieldMinWSm: 80,
+  fieldMinW: 160,
+  popoverWSm: 240,
+  popoverW: 320,
+  popupMaxW: 280,
+  meterH: 6,
+  skeletonChipW: 96,
+  dropZoneMinH: 128,
+  canvasMinH: 480,
+  editorMinH: 160,
+  toolbarH: 36,
+  embedW: 550,
+  colorPickerW: 196,
+  colorAreaH: 150,
+  colorTrackH: 12,
+  colorSwatch: 20,
+  colorPreviewH: 22,
+  handle: 16,
+  chip: 24,
+  placeholderMinH: 80,
+  previewMaxH: 320,
+  barH: 4,
+  readoutW: 40,
+  sliderW: 96,
+  paletteMinW: 96,
+  deviceBarW: 96,
+  timeGutterW: 64,
+  dayHeaderH: 46,
 } as const
 
 // Email-only measures: no CSS variable (mail clients cannot read them) and not
@@ -170,12 +223,20 @@ export const darkColors: RawColors = {
   infoBg: 'rgba(106, 175, 252, 0.1)',
   infoBorder: 'rgba(106, 175, 252, 0.3)',
   infoText: '#93c5fd',
+  highlight: '#c084fc',
+  highlightBg: 'rgba(192, 132, 252, 0.1)',
+  highlightBorder: 'rgba(192, 132, 252, 0.3)',
+  highlightText: '#d8b4fe',
   scrim: 'rgba(0, 0, 0, 0.4)',
   inverseFill: 'rgba(0, 0, 0, 0.10)',
   inverseFillHover: 'rgba(0, 0, 0, 0.18)',
   inverseBorder: 'rgba(0, 0, 0, 0.55)',
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   fixedLight: '#ffffff',
+  overlayLight: 'rgba(255, 255, 255, 0.78)',
+  contrastSurface: '#f5f5f5',
+  onContrastSurface: '#1a1a1a',
+  contrastBorder: 'rgba(0, 0, 0, 0.42)',
 }
 
 // Light theme — matches the overrides in `themes/light.css.ts`.
@@ -207,12 +268,20 @@ export const lightColors: RawColors = {
   infoBg: 'rgba(30, 64, 175, 0.08)',
   infoBorder: 'rgba(30, 64, 175, 0.3)',
   infoText: '#1e40af',
+  highlight: '#6b21a8',
+  highlightBg: 'rgba(107, 33, 168, 0.08)',
+  highlightBorder: 'rgba(107, 33, 168, 0.3)',
+  highlightText: '#581c87',
   scrim: 'rgba(0, 0, 0, 0.4)',
   inverseFill: 'rgba(0, 0, 0, 0.10)',
   inverseFillHover: 'rgba(0, 0, 0, 0.18)',
   inverseBorder: 'rgba(0, 0, 0, 0.55)',
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   fixedLight: '#ffffff',
+  overlayLight: 'rgba(255, 255, 255, 0.78)',
+  contrastSurface: '#1a1a1a',
+  onContrastSurface: '#e5e5e5',
+  contrastBorder: 'rgba(255, 255, 255, 0.33)',
 }
 
 // High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.
@@ -244,10 +313,18 @@ export const highContrastColors: RawColors = {
   infoBg: 'rgba(96, 165, 250, 0.15)',
   infoBorder: 'rgba(96, 165, 250, 0.5)',
   infoText: '#bfdbfe',
+  highlight: '#d8b4fe',
+  highlightBg: 'rgba(216, 180, 254, 0.15)',
+  highlightBorder: 'rgba(216, 180, 254, 0.5)',
+  highlightText: '#e9d5ff',
   scrim: 'rgba(0, 0, 0, 0.4)',
   inverseFill: 'rgba(0, 0, 0, 0.10)',
   inverseFillHover: 'rgba(0, 0, 0, 0.18)',
   inverseBorder: 'rgba(0, 0, 0, 0.55)',
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   fixedLight: '#ffffff',
+  overlayLight: 'rgba(255, 255, 255, 0.78)',
+  contrastSurface: '#ffffff',
+  onContrastSurface: '#000000',
+  contrastBorder: 'rgba(0, 0, 0, 0.42)',
 }

package/src/themes/high-contrast.css.ts

@@ -30,6 +30,12 @@ export const highContrastTheme = css.createTheme(colors, {
   infoBg: 'rgba(96, 165, 250, 0.15)',
   infoBorder: 'rgba(96, 165, 250, 0.5)',
   infoText: '#bfdbfe',
+
+  // Highlight — a non-status accent (a category, an intent); no status meaning.
+  highlight: '#d8b4fe',
+  highlightBg: 'rgba(216, 180, 254, 0.15)',
+  highlightBorder: 'rgba(216, 180, 254, 0.5)',
+  highlightText: '#e9d5ff',
   // Fixed overlays — the same in every theme (a scrim darkens whatever is
   // under it; the inverse overlays sit on an accent surface).
   scrim: 'rgba(0, 0, 0, 0.4)',
@@ -39,10 +45,21 @@ export const highContrastTheme = css.createTheme(colors, {
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   // A light that does not follow the theme (the Switch knob).
   fixedLight: '#ffffff',
+  // A fixed translucent white over content (the light counterpart of scrim).
+  overlayLight: 'rgba(255, 255, 255, 0.78)',
+  // The opposite tone of the theme: a surface that stands out from the page
+  // (toasts, coach marks), with its own text colour. Not the fixed inverse*
+  // overlays above, which sit on an accent fill.
+  contrastSurface: '#ffffff',
+  onContrastSurface: '#000000',
+  // A border on contrastSurface, at least 3:1 against it (non-text).
+  contrastBorder: 'rgba(0, 0, 0, 0.42)',
 })
 
 export const highContrastShadows = css.createTheme(shadows, {
   sm: '0 2px 4px rgba(0, 0, 0, 0.6)',
   md: '0 4px 12px rgba(0, 0, 0, 0.7)',
   lg: '0 8px 24px rgba(0, 0, 0, 0.8)',
+  dropReady: 'inset 0 0 0 1px #555555',
+  dropOver: 'inset 0 0 0 2px #60a5fa',
 })

package/src/themes/light.css.ts

@@ -30,6 +30,12 @@ export const lightTheme = css.createTheme(colors, {
   infoBg: 'rgba(30, 64, 175, 0.08)',
   infoBorder: 'rgba(30, 64, 175, 0.3)',
   infoText: '#1e40af',
+
+  // Highlight — a non-status accent (a category, an intent); no status meaning.
+  highlight: '#6b21a8',
+  highlightBg: 'rgba(107, 33, 168, 0.08)',
+  highlightBorder: 'rgba(107, 33, 168, 0.3)',
+  highlightText: '#581c87',
   // Fixed overlays — the same in every theme (a scrim darkens whatever is
   // under it; the inverse overlays sit on an accent surface).
   scrim: 'rgba(0, 0, 0, 0.4)',
@@ -39,10 +45,21 @@ export const lightTheme = css.createTheme(colors, {
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   // A light that does not follow the theme (the Switch knob).
   fixedLight: '#ffffff',
+  // A fixed translucent white over content (the light counterpart of scrim).
+  overlayLight: 'rgba(255, 255, 255, 0.78)',
+  // The opposite tone of the theme: a surface that stands out from the page
+  // (toasts, coach marks), with its own text colour. Not the fixed inverse*
+  // overlays above, which sit on an accent fill.
+  contrastSurface: '#1a1a1a',
+  onContrastSurface: '#e5e5e5',
+  // A border on contrastSurface, at least 3:1 against it (non-text).
+  contrastBorder: 'rgba(255, 255, 255, 0.33)',
 })
 
 export const lightShadows = css.createTheme(shadows, {
   sm: '0 2px 4px rgba(0, 0, 0, 0.08)',
   md: '0 4px 12px rgba(0, 0, 0, 0.12)',
   lg: '0 8px 24px rgba(0, 0, 0, 0.16)',
+  dropReady: 'inset 0 0 0 1px #d4d4d4',
+  dropOver: 'inset 0 0 0 2px #1e40af',
 })

package/src/tokens/colors.css.ts

@@ -44,6 +44,12 @@ export const colors = css.defineVars({
   infoBorder: 'rgba(106, 175, 252, 0.3)',
   infoText: '#93c5fd',
 
+  // Highlight — a non-status accent (a category, an intent); no status meaning.
+  highlight: '#c084fc',
+  highlightBg: 'rgba(192, 132, 252, 0.1)',
+  highlightBorder: 'rgba(192, 132, 252, 0.3)',
+  highlightText: '#d8b4fe',
+
   // Fixed overlays — the same in every theme (a scrim darkens whatever is
   // under it; the inverse overlays sit on an accent surface).
   scrim: 'rgba(0, 0, 0, 0.4)',
@@ -53,4 +59,13 @@ export const colors = css.defineVars({
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   // A light that does not follow the theme (the Switch knob).
   fixedLight: '#ffffff',
+  // A fixed translucent white over content (the light counterpart of scrim).
+  overlayLight: 'rgba(255, 255, 255, 0.78)',
+  // The opposite tone of the theme: a surface that stands out from the page
+  // (toasts, coach marks), with its own text colour. Not the fixed inverse*
+  // overlays above, which sit on an accent fill.
+  contrastSurface: '#f5f5f5',
+  onContrastSurface: '#1a1a1a',
+  // A border on contrastSurface, at least 3:1 against it (non-text).
+  contrastBorder: 'rgba(0, 0, 0, 0.42)',
 })

package/src/tokens/effects.css.ts

@@ -0,0 +1,12 @@
+import {css} from 'react-strict-dom'
+
+// Visual effects. Not themed.
+//
+// overlayBlur: the blur behind a modal's backdrop (a command palette, a
+// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter
+// (or filter) on an ancestor becomes the containing block for every fixed
+// descendant, so a Dialog or Drawer opened inside it is positioned against
+// that ancestor instead of the viewport.
+export const effects = css.defineVars({
+  overlayBlur: 'blur(2px)',
+})

package/src/tokens/layers.css.ts

@@ -0,0 +1,39 @@
+import {css} from 'react-strict-dom'
+import type {LayerToken} from '../keys'
+
+// The z-index scale. Values are unitless strings so `--duro-layer-*` exists
+// for plain CSS; React Native takes a number, so a native overlay reads the
+// numeric LAYERS map from `@duro-app/tokens/keys` instead.
+//
+// They only compete inside one stacking context. Dialog, Drawer, the popups
+// and the toast region all portal into the ThemeProvider mount (`portal`),
+// and this is the order they keep there.
+// StyleX types a var by its literal, so string values would type every layer
+// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS
+// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has
+// no runtime effect (StyleX and the drift check read straight through it).
+type LayerValue = ReturnType<typeof css.types.integer<number>>
+
+export const layers = css.defineVars({
+  // A focused or sticky part above its siblings (a joined group's focus ring,
+  // a scrollbar, a sticky table header).
+  raised: '1',
+  // Floating chrome over the page: Tooltip, ActionBar.
+  floating: '50',
+  // A modal's backdrop.
+  overlay: '1000',
+  // A modal's panel (Dialog, Drawer).
+  modal: '1001',
+  // A Popover inside a Dialog or Drawer: above that modal, below the popups
+  // (a Select, a Menu) and the Select click-catcher opened from inside it.
+  // Outside a modal a Popover is `floating`, so a modal opened later covers it.
+  popover: '1040',
+  // A popup's click-catcher, under the popup itself.
+  popupBackdrop: '1049',
+  // Popups: Select, Listbox, Menu — above a modal or Popover they open from.
+  popup: '1050',
+  // The toast region: above popups and modals.
+  toast: '1060',
+  // The ThemeProvider portal mount that holds all of the above.
+  portal: '1100',
+} as unknown as Readonly<Record<LayerToken, LayerValue>>)

package/src/tokens/shadows.css.ts

@@ -4,4 +4,10 @@ export const shadows = css.defineVars({
   sm: '0 2px 4px rgba(0, 0, 0, 0.3)',
   md: '0 4px 12px rgba(0, 0, 0, 0.4)',
   lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
+  // DragDrop's drop-target rings: borders.hairline in colors.border on every
+  // zone that can receive, borders.strong in colors.accent on the one under the
+  // pointer. Literal per theme (StyleX needs inline literals); the drift check
+  // rebuilds each from the palette. Not focus: focus stays on outlines.
+  dropReady: 'inset 0 0 0 1px #333333',
+  dropOver: 'inset 0 0 0 2px #6aaffc',
 })