/* ============================================================================ drop_console — tokens.css The design tokens for the Drop Console (tools/web/drop_console). WHAT THIS IS 452 measured LIGHT-THEME values transcribed from Shopify's admin, machine- renamed `--p-*` -> `--dc-*` so that NONE of Shopify's own CSS, class names or files ship with this app. Source of the measurements: /private/tmp/.../scratchpad/polaris_tokens_light.css (452 tokens, 30,325 B) which was itself read once off @shopify/polaris-tokens@9.4.2 on 2026-09-15. Nothing here is fetched at runtime and nothing is redistributed. ⚠️ LICENCE — why the rename is not cosmetic. @shopify/polaris-tokens is NOT plain MIT: its LICENSE.md restricts use to apps "dissimilar and visually distinct" from the Shopify admin when the app is stand-alone rather than embedded. This app is INTERNAL ONLY, never distributed, never installed on a client store (project_drop_console.md, Decisions already taken + HARD RULE 13). We ship our own stylesheet built from measured numbers; we ship none of theirs. Class names here are all `dc-`. There is no `Polaris-` class anywhere in this directory and `grep -ric polaris tools/web/drop_console/static/` must only ever match these provenance comments. ⚠️ HARD RULE 13 — this app has its OWN brand token file, `tools/config/drop_console_tokens.json`, and is deliberately NOT in `rwe_tokens.json`'s SCAN_GLOBS. Its ~450 admin-derived hexes are not RWE house colours and would fail `python3 tools/design_tokens.py --check` forever. NAMING — mechanical, so a value can be diffed back to its source: --p-color-X -> --dc-X (bg, text, border, icon, …) --p-font-X -> --dc-font-X --p-text--X -> --dc-text--X --p-space-X -> --dc-space-X --p-border-radius-X -> --dc-border-radius-X --p-shadow-X -> --dc-shadow-X --p-motion-X -> --dc-motion-X --p-z-index-X -> --dc-z-index-X --p-height/width-X -> --dc-height/width-X --pg- -> --dc-shell- TRANSCRIPTION — `rgba(r,g,b,1)` was folded to `#RRGGBB` (208 of the 452 values). Every alpha < 1 is left as rgba so the transparency is visible. Dark-theme annotations were dropped: light theme only, because Polaris' dark theme overrides just 40 of 452 tokens and has NO dark value for any semantic tone — there is nothing to copy. FILES: tokens.css (this) -> shell.css -> components.css, in that order. ========================================================================== */ /* --------------------------------------------------------------------------- Inter, variable axis. Polaris ships NO @font-face at all, so the admin only looks right on a machine that happens to have Inter. We load it ourselves. ⚠️ It MUST be the variable axis (`wght@100..900`). The weights are non-standard — regular 450, medium 550, semibold 650, bold 700 — and a static Inter rounds 450->400 and 650->600, which makes every label in the app read subtly wrong. `display=swap` so a blocked CDN degrades to the -apple-system fallback rather than to invisible text. ⚠️ This is the ONE remote asset in this app. tools/web/design_studio ships zero on purpose; if this container ever loses egress the page still renders, in San Francisco / Segoe UI, with slightly wider labels. ------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); :root { color-scheme: light; /* ---- FONT — family, size, weight, line-height, letter-spacing ---- */ --dc-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --dc-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; --dc-font-size-275: 0.6875rem; --dc-font-size-300: 0.75rem; --dc-font-size-325: 0.8125rem; --dc-font-size-350: 0.875rem; --dc-font-size-400: 1rem; --dc-font-size-450: 1.125rem; --dc-font-size-500: 1.25rem; --dc-font-size-550: 1.375rem; --dc-font-size-600: 1.5rem; --dc-font-size-750: 1.875rem; --dc-font-size-800: 2rem; --dc-font-size-900: 2.25rem; --dc-font-size-1000: 2.5rem; --dc-font-weight-regular: 450; --dc-font-weight-medium: 550; --dc-font-weight-semibold: 650; --dc-font-weight-bold: 700; --dc-font-letter-spacing-densest: -0.03375rem; --dc-font-letter-spacing-denser: -0.01875rem; --dc-font-letter-spacing-dense: -0.0125rem; --dc-font-letter-spacing-normal: 0rem; --dc-font-line-height-300: 0.75rem; --dc-font-line-height-400: 1rem; --dc-font-line-height-500: 1.25rem; --dc-font-line-height-600: 1.5rem; --dc-font-line-height-700: 1.75rem; --dc-font-line-height-800: 2rem; --dc-font-line-height-1000: 2.5rem; --dc-font-line-height-1200: 3rem; /* ---- TYPE STYLES — the named steps Polaris actually ships (heading/body) ---- */ --dc-text-heading-3xl-font-family: var(--dc-font-family-sans); --dc-text-heading-3xl-font-size: var(--dc-font-size-900); --dc-text-heading-3xl-font-weight: var(--dc-font-weight-bold); --dc-text-heading-3xl-font-letter-spacing: var(--dc-font-letter-spacing-densest); --dc-text-heading-3xl-font-line-height: var(--dc-font-line-height-1200); --dc-text-heading-2xl-font-family: var(--dc-font-family-sans); --dc-text-heading-2xl-font-size: var(--dc-font-size-750); --dc-text-heading-2xl-font-weight: var(--dc-font-weight-bold); --dc-text-heading-2xl-font-letter-spacing: var(--dc-font-letter-spacing-denser); --dc-text-heading-2xl-font-line-height: var(--dc-font-line-height-1000); --dc-text-heading-xl-font-family: var(--dc-font-family-sans); --dc-text-heading-xl-font-size: var(--dc-font-size-600); --dc-text-heading-xl-font-weight: var(--dc-font-weight-bold); --dc-text-heading-xl-font-letter-spacing: var(--dc-font-letter-spacing-dense); --dc-text-heading-xl-font-line-height: var(--dc-font-line-height-800); --dc-text-heading-lg-font-family: var(--dc-font-family-sans); --dc-text-heading-lg-font-size: var(--dc-font-size-500); --dc-text-heading-lg-font-weight: var(--dc-font-weight-semibold); --dc-text-heading-lg-font-letter-spacing: var(--dc-font-letter-spacing-dense); --dc-text-heading-lg-font-line-height: var(--dc-font-line-height-600); --dc-text-heading-md-font-family: var(--dc-font-family-sans); --dc-text-heading-md-font-size: var(--dc-font-size-350); --dc-text-heading-md-font-weight: var(--dc-font-weight-semibold); --dc-text-heading-md-font-letter-spacing: var(--dc-font-letter-spacing-normal); --dc-text-heading-md-font-line-height: var(--dc-font-line-height-500); --dc-text-heading-sm-font-family: var(--dc-font-family-sans); --dc-text-heading-sm-font-size: var(--dc-font-size-325); --dc-text-heading-sm-font-weight: var(--dc-font-weight-semibold); --dc-text-heading-sm-font-letter-spacing: var(--dc-font-letter-spacing-normal); --dc-text-heading-sm-font-line-height: var(--dc-font-line-height-500); --dc-text-heading-xs-font-family: var(--dc-font-family-sans); --dc-text-heading-xs-font-size: var(--dc-font-size-300); --dc-text-heading-xs-font-weight: var(--dc-font-weight-semibold); --dc-text-heading-xs-font-letter-spacing: var(--dc-font-letter-spacing-normal); --dc-text-heading-xs-font-line-height: var(--dc-font-line-height-400); --dc-text-body-lg-font-family: var(--dc-font-family-sans); --dc-text-body-lg-font-size: var(--dc-font-size-350); --dc-text-body-lg-font-weight: var(--dc-font-weight-regular); --dc-text-body-lg-font-letter-spacing: var(--dc-font-letter-spacing-normal); --dc-text-body-lg-font-line-height: var(--dc-font-line-height-500); --dc-text-body-md-font-family: var(--dc-font-family-sans); --dc-text-body-md-font-size: var(--dc-font-size-325); --dc-text-body-md-font-weight: var(--dc-font-weight-regular); --dc-text-body-md-font-letter-spacing: var(--dc-font-letter-spacing-normal); --dc-text-body-md-font-line-height: var(--dc-font-line-height-500); --dc-text-body-sm-font-family: var(--dc-font-family-sans); --dc-text-body-sm-font-size: var(--dc-font-size-300); --dc-text-body-sm-font-weight: var(--dc-font-weight-regular); --dc-text-body-sm-font-letter-spacing: var(--dc-font-letter-spacing-normal); --dc-text-body-sm-font-line-height: var(--dc-font-line-height-400); --dc-text-body-xs-font-family: var(--dc-font-family-sans); --dc-text-body-xs-font-size: var(--dc-font-size-275); --dc-text-body-xs-font-weight: var(--dc-font-weight-regular); --dc-text-body-xs-font-letter-spacing: var(--dc-font-letter-spacing-normal); --dc-text-body-xs-font-line-height: var(--dc-font-line-height-300); /* ---- SPACE ladder ---- */ --dc-space-0: 0rem; --dc-space-025: 0.0625rem; --dc-space-050: 0.125rem; --dc-space-100: 0.25rem; --dc-space-150: 0.375rem; --dc-space-200: 0.5rem; --dc-space-300: 0.75rem; --dc-space-400: 1rem; --dc-space-500: 1.25rem; --dc-space-600: 1.5rem; --dc-space-800: 2rem; --dc-space-1000: 2.5rem; --dc-space-1200: 3rem; --dc-space-1600: 4rem; --dc-space-2000: 5rem; --dc-space-2400: 6rem; --dc-space-2800: 7rem; --dc-space-3200: 8rem; --dc-space-button-group-gap: var(--dc-space-200); --dc-space-card-gap: var(--dc-space-400); --dc-space-card-padding: var(--dc-space-400); --dc-space-table-cell-padding: var(--dc-space-150); /* ---- BORDER radius + width ---- */ --dc-border-radius-0: 0rem; --dc-border-radius-050: 0.125rem; --dc-border-radius-100: 0.25rem; --dc-border-radius-150: 0.375rem; --dc-border-radius-200: 0.5rem; --dc-border-radius-300: 0.75rem; --dc-border-radius-400: 1rem; --dc-border-radius-500: 1.25rem; --dc-border-radius-750: 1.875rem; --dc-border-radius-full: 624.9375rem; --dc-border-width-0: 0rem; --dc-border-width-0165: 0.04125rem; --dc-border-width-025: 0.0625rem; --dc-border-width-050: 0.125rem; --dc-border-width-100: 0.25rem; /* ---- SHADOW (elevation + the button bevels) ---- */ --dc-shadow-0: none; --dc-shadow-100: 0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07); --dc-shadow-200: 0rem 0.1875rem 0.0625rem -0.0625rem rgba(26, 26, 26, 0.07); --dc-shadow-300: 0rem 0.25rem 0.375rem -0.125rem rgba(26, 26, 26, 0.20); --dc-shadow-400: 0rem 0.5rem 1rem -0.25rem rgba(26, 26, 26, 0.22); --dc-shadow-500: 0rem 0.75rem 1.25rem -0.5rem rgba(26, 26, 26, 0.24); --dc-shadow-600: 0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, 0.28); --dc-shadow-bevel-100: 0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, -0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, 0rem -0.0625rem 0rem 0rem rgba(0, 0, 0, 0.17) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.5) inset; --dc-shadow-inset-100: 0rem 0.0625rem 0.125rem 0rem rgba(26, 26, 26, 0.15) inset, 0rem 0.0625rem 0.0625rem 0rem rgba(26, 26, 26, 0.15) inset; --dc-shadow-inset-200: 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.20) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset, -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset; --dc-shadow-button: 0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset, 0rem 0.03125rem 0rem 0.09375rem #FFF inset; --dc-shadow-button-hover: 0rem 0.0625rem 0rem 0rem #EBEBEB inset, -0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0rem -0.0625rem 0rem 0rem #CCC inset; --dc-shadow-button-inset: -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset; --dc-shadow-button-primary: 0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, 0.8) inset, 0rem 0rem 0rem 0.0625rem #303030 inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.25) inset; --dc-shadow-button-primary-hover: 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.0625rem 0rem 0rem #000 inset, 0rem -0.0625rem 0rem 0.0625rem #1A1A1A; --dc-shadow-button-primary-inset: 0rem 0.1875rem 0rem 0rem rgb(0, 0, 0) inset; --dc-shadow-button-primary-critical: 0rem -0.0625rem 0rem 0.0625rem rgba(142, 31, 11, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(181, 38, 11, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.349) inset; --dc-shadow-button-primary-critical-hover: 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset; --dc-shadow-button-primary-critical-inset: -0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset; --dc-shadow-button-primary-success: 0rem -0.0625rem 0rem 0.0625rem rgba(12, 81, 50, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(19, 111, 69, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.251) inset; --dc-shadow-button-primary-success-hover: 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset; --dc-shadow-button-primary-success-inset: -0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset; --dc-shadow-border-inset: 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.08) inset; /* ---- MOTION — duration + easing ---- */ --dc-motion-duration-0: 0ms; --dc-motion-duration-50: 50ms; --dc-motion-duration-100: 100ms; --dc-motion-duration-150: 150ms; --dc-motion-duration-200: 200ms; --dc-motion-duration-250: 250ms; --dc-motion-duration-300: 300ms; --dc-motion-duration-350: 350ms; --dc-motion-duration-400: 400ms; --dc-motion-duration-450: 450ms; --dc-motion-duration-500: 500ms; --dc-motion-duration-5000: 5000ms; --dc-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --dc-motion-ease-in: cubic-bezier(0.42, 0, 1, 1); --dc-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1); --dc-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --dc-motion-linear: cubic-bezier(0, 0, 1, 1); --dc-motion-keyframes-bounce: p-motion-keyframes-bounce; --dc-motion-keyframes-fade-in: p-motion-keyframes-fade-in; --dc-motion-keyframes-pulse: p-motion-keyframes-pulse; --dc-motion-keyframes-spin: p-motion-keyframes-spin; --dc-motion-keyframes-appear-above: p-motion-keyframes-appear-above; --dc-motion-keyframes-appear-below: p-motion-keyframes-appear-below; /* ---- BREAKPOINTS + Z-INDEX ---- */ --dc-breakpoints-xs: 0rem; --dc-breakpoints-sm: 30.625rem; --dc-breakpoints-md: 48rem; --dc-breakpoints-lg: 65rem; --dc-breakpoints-xl: 90rem; --dc-z-index-0: auto; --dc-z-index-1: 100; --dc-z-index-2: 400; --dc-z-index-3: 510; --dc-z-index-4: 512; --dc-z-index-5: 513; --dc-z-index-6: 514; --dc-z-index-7: 515; --dc-z-index-8: 516; --dc-z-index-9: 517; --dc-z-index-10: 518; --dc-z-index-11: 519; --dc-z-index-12: 520; /* ---- HEIGHT / WIDTH ladders (used by Button min-height etc.) ---- */ --dc-height-0: 0rem; --dc-height-025: 0.0625rem; --dc-height-050: 0.125rem; --dc-height-100: 0.25rem; --dc-height-150: 0.375rem; --dc-height-200: 0.5rem; --dc-height-300: 0.75rem; --dc-height-400: 1rem; --dc-height-500: 1.25rem; --dc-height-600: 1.5rem; --dc-height-700: 1.75rem; --dc-height-800: 2rem; --dc-height-900: 2.25rem; --dc-height-1000: 2.5rem; --dc-height-1200: 3rem; --dc-height-1600: 4rem; --dc-height-2000: 5rem; --dc-height-2400: 6rem; --dc-height-2800: 7rem; --dc-height-3200: 8rem; --dc-width-0: 0rem; --dc-width-025: 0.0625rem; --dc-width-050: 0.125rem; --dc-width-100: 0.25rem; --dc-width-150: 0.375rem; --dc-width-200: 0.5rem; --dc-width-300: 0.75rem; --dc-width-400: 1rem; --dc-width-500: 1.25rem; --dc-width-600: 1.5rem; --dc-width-700: 1.75rem; --dc-width-800: 2rem; --dc-width-900: 2.25rem; --dc-width-1000: 2.5rem; --dc-width-1200: 3rem; --dc-width-1600: 4rem; --dc-width-2000: 5rem; --dc-width-2400: 6rem; --dc-width-2800: 7rem; --dc-width-3200: 8rem; /* ---- COLOR — page + surfaces ---- */ --dc-bg: #F1F1F1; --dc-bg-inverse: #1A1A1A; --dc-bg-surface: #FFFFFF; --dc-bg-surface-hover: #F7F7F7; --dc-bg-surface-active: #F3F3F3; --dc-bg-surface-selected: #F1F1F1; --dc-bg-surface-disabled: rgba(0, 0, 0, 0.05); --dc-bg-surface-secondary: #F7F7F7; --dc-bg-surface-secondary-hover: #F1F1F1; --dc-bg-surface-secondary-active: #EBEBEB; --dc-bg-surface-secondary-selected: #EBEBEB; --dc-bg-surface-tertiary: #F3F3F3; --dc-bg-surface-tertiary-hover: #EBEBEB; --dc-bg-surface-tertiary-active: #E3E3E3; --dc-bg-surface-brand: #E3E3E3; --dc-bg-surface-brand-hover: #EBEBEB; --dc-bg-surface-brand-active: #F1F1F1; --dc-bg-surface-brand-selected: #F1F1F1; --dc-bg-surface-info: #EAF4FF; --dc-bg-surface-info-hover: #E0F0FF; --dc-bg-surface-info-active: #CAE6FF; --dc-bg-surface-success: #CDFED4; --dc-bg-surface-success-hover: #AFFEBF; --dc-bg-surface-success-active: #92FCAC; --dc-bg-surface-caution: #FFF8DB; --dc-bg-surface-caution-hover: #FFF4BF; --dc-bg-surface-caution-active: #FFEF9D; --dc-bg-surface-warning: #FFF1E3; --dc-bg-surface-warning-hover: #FFEBD5; --dc-bg-surface-warning-active: #FFE4C6; --dc-bg-surface-critical: #FEE8EB; --dc-bg-surface-critical-hover: #FEE1E6; --dc-bg-surface-critical-active: #FED9DF; --dc-bg-surface-emphasis: #F0F2FF; --dc-bg-surface-emphasis-hover: #EAEDFF; --dc-bg-surface-emphasis-active: #E2E7FF; --dc-bg-surface-magic: #F8F7FF; --dc-bg-surface-magic-hover: #F3F1FF; --dc-bg-surface-magic-active: #E9E5FF; --dc-bg-surface-inverse: #303030; --dc-bg-surface-transparent: rgba(0, 0, 0, 0); /* ---- COLOR — fills (buttons, badges, bars) ---- */ --dc-bg-fill: #FFFFFF; --dc-bg-fill-hover: #FAFAFA; --dc-bg-fill-active: #F7F7F7; --dc-bg-fill-selected: #CCCCCC; --dc-bg-fill-disabled: rgba(0, 0, 0, 0.05); --dc-bg-fill-secondary: #F1F1F1; --dc-bg-fill-secondary-hover: #EBEBEB; --dc-bg-fill-secondary-active: #E3E3E3; --dc-bg-fill-secondary-selected: #E3E3E3; --dc-bg-fill-tertiary: #E3E3E3; --dc-bg-fill-tertiary-hover: #D4D4D4; --dc-bg-fill-tertiary-active: #CCCCCC; --dc-bg-fill-brand: #303030; --dc-bg-fill-brand-hover: #1A1A1A; --dc-bg-fill-brand-active: #1A1A1A; --dc-bg-fill-brand-selected: #303030; --dc-bg-fill-brand-disabled: rgba(0, 0, 0, 0.17); --dc-bg-fill-info: #91D0FF; --dc-bg-fill-info-hover: #51C0FF; --dc-bg-fill-info-active: #0094D5; --dc-bg-fill-info-secondary: #D5EBFF; --dc-bg-fill-success: #047B5D; --dc-bg-fill-success-hover: #035E4C; --dc-bg-fill-success-active: #014B40; --dc-bg-fill-success-secondary: #AFFEBF; --dc-bg-fill-warning: #FFB800; --dc-bg-fill-warning-hover: #E5A500; --dc-bg-fill-warning-active: #B28400; --dc-bg-fill-warning-secondary: #FFD6A4; --dc-bg-fill-caution: #FFE600; --dc-bg-fill-caution-hover: #EAD300; --dc-bg-fill-caution-active: #E1CB00; --dc-bg-fill-caution-secondary: #FFEB78; --dc-bg-fill-critical: #C70A24; --dc-bg-fill-critical-hover: #A30A24; --dc-bg-fill-critical-active: #8E0B21; --dc-bg-fill-critical-selected: #8E0B21; --dc-bg-fill-critical-secondary: #FED1D7; --dc-bg-fill-emphasis: #005BD3; --dc-bg-fill-emphasis-hover: #004299; --dc-bg-fill-emphasis-active: #002E6A; --dc-bg-fill-magic: #8051FF; --dc-bg-fill-magic-secondary: #E9E5FF; --dc-bg-fill-magic-secondary-hover: #E4DEFF; --dc-bg-fill-magic-secondary-active: #DFD9FF; --dc-bg-fill-inverse: #303030; --dc-bg-fill-inverse-hover: #4A4A4A; --dc-bg-fill-inverse-active: #616161; --dc-bg-fill-transparent: rgba(0, 0, 0, 0.02); --dc-bg-fill-transparent-hover: rgba(0, 0, 0, 0.05); --dc-bg-fill-transparent-active: rgba(0, 0, 0, 0.08); --dc-bg-fill-transparent-selected: rgba(0, 0, 0, 0.08); --dc-bg-fill-transparent-secondary: rgba(0, 0, 0, 0.06); --dc-bg-fill-transparent-secondary-hover: rgba(0, 0, 0, 0.08); --dc-bg-fill-transparent-secondary-active: rgba(0, 0, 0, 0.11); /* ---- COLOR — text ---- */ --dc-text: #303030; --dc-text-secondary: #616161; --dc-text-disabled: #B5B5B5; --dc-text-link: #005BD3; --dc-text-link-hover: #004299; --dc-text-link-active: #002E6A; --dc-text-brand: #4A4A4A; --dc-text-brand-hover: #303030; --dc-text-brand-on-bg-fill: #FFFFFF; --dc-text-brand-on-bg-fill-hover: #E3E3E3; --dc-text-brand-on-bg-fill-active: #CCCCCC; --dc-text-brand-on-bg-fill-disabled: #FFFFFF; --dc-text-info: #003A5A; --dc-text-info-hover: #003A5A; --dc-text-info-active: #002133; --dc-text-info-secondary: #007CB4; --dc-text-info-on-bg-fill: #002133; --dc-text-success: #014B40; --dc-text-success-hover: #073630; --dc-text-success-active: #022622; --dc-text-success-secondary: #047B5D; --dc-text-success-on-bg-fill: #FAFFFB; --dc-text-caution: #4F4700; --dc-text-caution-hover: #332E00; --dc-text-caution-active: #1F1C00; --dc-text-caution-secondary: #827500; --dc-text-caution-on-bg-fill: #332E00; --dc-text-warning: #5E4200; --dc-text-warning-hover: #412D00; --dc-text-warning-active: #251A00; --dc-text-warning-secondary: #956F00; --dc-text-warning-on-bg-fill: #251A00; --dc-text-critical: #8E0B21; --dc-text-critical-hover: #5F0716; --dc-text-critical-active: #2F040B; --dc-text-critical-secondary: #C70A24; --dc-text-critical-on-bg-fill: #FFFAFB; --dc-text-emphasis: #005BD3; --dc-text-emphasis-hover: #004299; --dc-text-emphasis-active: #002E6A; --dc-text-emphasis-on-bg-fill: #FCFDFF; --dc-text-emphasis-on-bg-fill-hover: #E2E7FF; --dc-text-emphasis-on-bg-fill-active: #D5DCFF; --dc-text-magic: #5700D1; --dc-text-magic-secondary: #7126FF; --dc-text-magic-on-bg-fill: #FDFDFF; --dc-text-inverse: #E3E3E3; --dc-text-inverse-secondary: #B5B5B5; --dc-text-link-inverse: #C5D0FF; /* ---- COLOR — border ---- */ --dc-border: #E3E3E3; --dc-border-hover: #CCCCCC; --dc-border-disabled: #EBEBEB; --dc-border-secondary: #EBEBEB; --dc-border-tertiary: #CCCCCC; --dc-border-focus: #005BD3; --dc-border-brand: #E3E3E3; --dc-border-info: #A8D8FF; --dc-border-success: #92FCAC; --dc-border-caution: #FFEB78; --dc-border-warning: #FFC879; --dc-border-critical: #FEC1C7; --dc-border-critical-secondary: #8E0B21; --dc-border-emphasis: #005BD3; --dc-border-emphasis-hover: #004299; --dc-border-emphasis-active: #002E6A; --dc-border-magic: #E4DEFF; --dc-border-magic-secondary: #9474FF; --dc-border-magic-secondary-hover: #8051FF; --dc-border-inverse: #616161; --dc-border-inverse-hover: #CCCCCC; --dc-border-inverse-active: #E3E3E3; /* ---- COLOR — icon ---- */ --dc-icon: #4A4A4A; --dc-icon-hover: #303030; --dc-icon-active: #1A1A1A; --dc-icon-disabled: #CCCCCC; --dc-icon-secondary: #8A8A8A; --dc-icon-secondary-hover: #616161; --dc-icon-secondary-active: #4A4A4A; --dc-icon-brand: #1A1A1A; --dc-icon-info: #0094D5; --dc-icon-success: #047B5D; --dc-icon-caution: #998A00; --dc-icon-warning: #B28400; --dc-icon-critical: #E22C38; --dc-icon-emphasis: #005BD3; --dc-icon-emphasis-hover: #004299; --dc-icon-emphasis-active: #002E6A; --dc-icon-magic: #8051FF; --dc-icon-inverse: #E3E3E3; /* ---- COLOR — inputs, nav, avatar, misc component colours ---- */ --dc-tooltip-tail-down-border: #D4D4D4; --dc-tooltip-tail-up-border: #E3E3E3; --dc-avatar-bg-fill: #B5B5B5; --dc-avatar-five-bg-fill: #FD4B92; --dc-avatar-five-text-on-bg-fill: #FFF6F8; --dc-avatar-four-bg-fill: #51C0FF; --dc-avatar-four-text-on-bg-fill: #002133; --dc-avatar-one-bg-fill: #C530C5; --dc-avatar-one-text-on-bg-fill: #FDEFFD; --dc-avatar-seven-bg-fill: #9474FF; --dc-avatar-seven-text-on-bg-fill: #F8F7FF; --dc-avatar-six-bg-fill: #25E82B; --dc-avatar-six-text-on-bg-fill: #033D05; --dc-avatar-text-on-bg-fill: #FFFFFF; --dc-avatar-three-bg-fill: #2CE0D4; --dc-avatar-three-text-on-bg-fill: #033C39; --dc-avatar-two-bg-fill: #52F490; --dc-avatar-two-text-on-bg-fill: #014B40; --dc-backdrop-bg: rgba(0, 0, 0, 0.71); --dc-button-gradient-bg-fill: linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%); --dc-checkbox-bg-surface-disabled: rgba(0, 0, 0, 0.08); --dc-checkbox-icon-disabled: #FFFFFF; --dc-input-bg-surface: #FDFDFD; --dc-input-bg-surface-hover: #FAFAFA; --dc-input-bg-surface-active: #F7F7F7; --dc-input-border: #8A8A8A; --dc-input-border-hover: #616161; --dc-input-border-active: #1A1A1A; --dc-nav-bg: #EBEBEB; --dc-nav-bg-surface: rgba(0, 0, 0, 0.02); --dc-nav-bg-surface-hover: #F1F1F1; --dc-nav-bg-surface-active: #FAFAFA; --dc-nav-bg-surface-selected: #FAFAFA; --dc-radio-button-bg-surface-disabled: rgba(0, 0, 0, 0.08); --dc-radio-button-icon-disabled: #FFFFFF; --dc-video-thumbnail-play-button-bg-fill-hover: rgba(0, 0, 0, 0.81); --dc-video-thumbnail-play-button-bg-fill: rgba(0, 0, 0, 0.71); --dc-video-thumbnail-play-button-text-on-bg-fill: #FFFFFF; --dc-scrollbar-thumb-bg-hover: #8A8A8A; --dc-scrollbar-thumb-bg: #B5B5B5; /* ---- ADDED BY US — Polaris REFERENCES these and never DEFINES them ---- `--p-color-bg-fill-{success,caution,warning}-selected` are read by `.Polaris-Button--tone*:is(--variantPrimary)` as `--pc-button-bg_pressed` and are absent from all five theme selectors, so a pressed success/warning primary button falls back to `initial` (transparent) in real Polaris. Verified absent from all FOUR theme selectors polaris-tokens ships (:root/.p-theme-light, -mobile, -high-contrast-experimental, -dark-experimental). `--p-color-bg-fill-critical-selected` DOES exist — only these three are missing, which is why the defect is easy to miss. Chosen here as the tone's `-active` fill, which is what every other variant's pressed state resolves to. */ --dc-bg-fill-success-selected: #014B40; --dc-bg-fill-caution-selected: #E1CB00; --dc-bg-fill-warning-selected: #B28400; /* ---- ADDED BY US — the `--pc-*` component vars React injects ---- Polaris leaves these `initial` in CSS and sets them from JS, so a pure-CSS build has to choose. Every one is listed in this file's report; these are the values the rendered admin shows. */ --dc-tooltip-padding: var(--dc-space-200); /* 8px — unset in Polaris CSS */ --dc-tooltip-border-radius: var(--dc-border-radius-200); /* 8px — unset in Polaris CSS */ --dc-checkbox-size: 1rem; /* 16px — set by the Choice wrapper in React */ --dc-icon-size: 1.25rem; /* 20px — the ONLY icon size Polaris ships */ --dc-popover-max-width: 25rem; /* 400px */ --dc-popover-max-height: 31.25rem; /* 500px */ --dc-tooltip-max-width: 12.5rem; /* 200px */ --dc-tooltip-max-width-wide: 17.1875rem; /* 275px */ /* ---- SHELL GEOMETRY — Polaris' own `--pg-*` globals, verbatim ---- */ --dc-shell-top-bar-height: 3.5rem; /* 56px */ --dc-shell-navigation-width: 15rem; /* 240px */ --dc-shell-layout-width-nav-base: var(--dc-shell-navigation-width); --dc-shell-layout-width-primary-min: 30rem; /* 480px */ --dc-shell-layout-width-primary-max: 41.375rem; /* 662px — main column */ --dc-shell-layout-width-secondary-min: 15rem; /* 240px */ --dc-shell-layout-width-secondary-max: 20rem; /* 320px — right sidebar */ --dc-shell-layout-width-one-half-width-base: 28.125rem; /* 450px */ --dc-shell-layout-width-one-third-width-base: 15rem; /* 240px */ --dc-shell-layout-width-inner-spacing-base: 1rem; /* 16px column gutter */ --dc-shell-layout-width-outer-spacing-min: 1.25rem; /* 20px */ --dc-shell-layout-width-outer-spacing-max: 2rem; /* 32px */ --dc-shell-layout-relative-size: 2; --dc-shell-dismiss-icon-size: 2rem; --dc-shell-control-height: 2rem; /* 32px — input/select min-height */ --dc-shell-control-vertical-padding: calc((2.25rem - var(--dc-font-line-height-600) - var(--dc-space-050)) / 2); /* primary-max + secondary-max + inner-spacing = 62.375rem = 998px */ --dc-shell-page-max-width: calc( var(--dc-shell-layout-width-primary-max) + var(--dc-shell-layout-width-secondary-max) + var(--dc-shell-layout-width-inner-spacing-base) ); } /* ============================================================================ BASE — reproduce these or the type scale does not match the admin. 1rem = 16px (`html{font-size:100%}`); body text is 0.8125rem = 13px. ========================================================================== */ /* ⚠️⚠️ THE ROOT MUST STAY AT 16px, AND THIS IS A TRAP THAT SHRINKS THE WHOLE APP. Polaris' own source declares `html,body{font-size:0.8125rem}` at byte 29,373 of its stylesheet and `html{…font-size:100%}` at byte 29,709 — the html-only rule comes SECOND, so it wins, `html` computes to 16px, and only `body` is 13px. Copy those two rules in the OPPOSITE order (the obvious order: reset first, type second) and `html` computes to 13px instead. Because `rem` resolves against the ROOT font-size, every single rem in this app then shrinks by 0.8125x: measured on the first build of this file — top bar 45.5px not 56, nav 195px not 240, page cap 811px not 998, body text 10.56px not 13, primary button 23px not 28. It looks like a deliberately compact skin, not like a bug. So: `font-size` is set on `body` ONLY here, which removes the order dependency entirely rather than relying on cascade position. Do not add `html` back to that selector list. */ html { font-size: 100%; /* 1rem === 16px. Keep it. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html, body { font-family: var(--dc-font-family-sans); line-height: var(--dc-font-line-height-500); /* 20px */ font-weight: var(--dc-font-weight-regular); /* 450 */ /* ⚠️ 'calt' 0 disables Inter's contextual alternates. Leave it ON and Inter substitutes in numeric and punctuation sequences, which is visible in an IndexTable of prices and dates. The admin runs with it off. */ font-feature-settings: 'calt' 0; color: var(--dc-text); } body { font-size: var(--dc-font-size-325); } /* 13px — body only, never html */ body { min-height: 100%; margin: 0; padding: 0; background-color: var(--dc-bg); /* #F1F1F1 — the app ground */ } *, *::before, *::after { box-sizing: border-box; } /* ============================================================================ TYPE SCALE — the named steps, as utility classes. Desktop values apply at >= 768px; two steps shrink below it (Polaris' own responsive behaviour, not ours): headingXl 24->20, heading2xl 30->24. ========================================================================== */ .dc-text { margin: 0; font-family: var(--dc-font-family-sans); } .dc-text--heading-3xl { font-size: var(--dc-font-size-900); line-height: var(--dc-font-line-height-1200); font-weight: var(--dc-font-weight-bold); letter-spacing: var(--dc-font-letter-spacing-densest); } .dc-text--heading-2xl { font-size: var(--dc-font-size-600); line-height: var(--dc-font-line-height-800); font-weight: var(--dc-font-weight-bold); letter-spacing: var(--dc-font-letter-spacing-denser); } .dc-text--heading-xl { font-size: var(--dc-font-size-500); line-height: var(--dc-font-line-height-600); font-weight: var(--dc-font-weight-semibold); letter-spacing: var(--dc-font-letter-spacing-dense); } .dc-text--heading-lg { font-size: var(--dc-font-size-500); line-height: var(--dc-font-line-height-600); font-weight: var(--dc-font-weight-semibold); letter-spacing: var(--dc-font-letter-spacing-dense); } .dc-text--heading-md { font-size: var(--dc-font-size-350); line-height: var(--dc-font-line-height-500); font-weight: var(--dc-font-weight-semibold); letter-spacing: var(--dc-font-letter-spacing-normal); } .dc-text--heading-sm { font-size: var(--dc-font-size-325); line-height: var(--dc-font-line-height-500); font-weight: var(--dc-font-weight-semibold); letter-spacing: var(--dc-font-letter-spacing-normal); } .dc-text--heading-xs { font-size: var(--dc-font-size-300); line-height: var(--dc-font-line-height-400); font-weight: var(--dc-font-weight-semibold); letter-spacing: var(--dc-font-letter-spacing-normal); } .dc-text--body-lg { font-size: var(--dc-font-size-350); line-height: var(--dc-font-line-height-500); font-weight: var(--dc-font-weight-regular); letter-spacing: var(--dc-font-letter-spacing-normal); } .dc-text--body-md { font-size: var(--dc-font-size-325); line-height: var(--dc-font-line-height-500); font-weight: var(--dc-font-weight-regular); letter-spacing: var(--dc-font-letter-spacing-normal); } .dc-text--body-sm { font-size: var(--dc-font-size-300); line-height: var(--dc-font-line-height-400); font-weight: var(--dc-font-weight-regular); letter-spacing: var(--dc-font-letter-spacing-normal); } .dc-text--body-xs { font-size: var(--dc-font-size-275); line-height: var(--dc-font-line-height-300); font-weight: var(--dc-font-weight-regular); letter-spacing: var(--dc-font-letter-spacing-normal); } /* >= 768px the two largest headings step up to their full desktop size. */ @media (min-width: 48em) { .dc-text--heading-2xl { font-size: var(--dc-font-size-750); line-height: var(--dc-font-line-height-1000); } .dc-text--heading-xl { font-size: var(--dc-font-size-600); line-height: var(--dc-font-line-height-800); font-weight: var(--dc-font-weight-bold); } } /* Tones, so a heading and its subtitle can be written without a second class. */ .dc-text--subdued { color: var(--dc-text-secondary); } .dc-text--disabled { color: var(--dc-text-disabled); } .dc-text--critical { color: var(--dc-text-critical); } .dc-text--success { color: var(--dc-text-success); } .dc-text--warning { color: var(--dc-text-warning); } .dc-text--magic { color: var(--dc-text-magic); } .dc-text--inverse { color: var(--dc-text-inverse); } .dc-text--mono { font-family: var(--dc-font-family-mono); } .dc-text--numeric { font-variant-numeric: tabular-nums; } /* ---- visually-hidden, for labels a screen reader still needs ---- */ .dc-visually-hidden { position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }