/* ========================================================================== LDS theme: palette — chromeless, dark-native, media-forward. palette is a gradient tool. The gradient IS the brand colour, so the theme deliberately ships NO brand hue: a violet --c-* ramp would compete with every artwork on screen. The ramp below is a cool neutral instead. USAGE — palette is dark-native (its canvas is #101014), but LDS resolves light in :root. Put both classes on so dark is the resting state: Individual light objects still opt out with .mode-light-scoped markup or by overriding --background locally; see docs/lew-design-system/light-dark.html. ========================================================================== */ .theme-palette{ /* ---- Neutral ramp ---- Not invented. Measured: palette's 19 ad-hoc CSS colours, converted to OKLCH, land on the SAME lightness steps as the LDS gray ramp — just at hue 285 with ~0.02 chroma (a cool violet cast). So this ramp is the LDS gray ramp rotated onto palette's measured hue, with six steps snapped to the exact hexes palette already ships. Every emphasis pair LDS resolves from it clears WCAG AA 4.5:1 (verified, not eyeballed). */ --c-50:#F8F8F9; --c-100:#F0F0F2; --c-200:#E5E4E7; /* palette --border (light) */ --c-300:#C9C9D1; --c-400:#ACACB7; --c-500:#8D8894; /* palette muted text */ --c-600:#6B6375; /* palette --text (light) */ --c-700:#4D4D5A; --c-800:#2E303A; /* palette --border (dark) */ --c-900:#1C1A20; /* palette card surface (dark) */ --c-950:#101014; /* palette GALLERY_SURFACE — the canvas behind everything */ /* The SAME ramp again, as --gray-*, and that is the point rather than a duplication: for palette the neutral ramp IS the brand ramp, because the brand is the artwork and the chrome around it is measured neutral. This has to be declared. Core's --gray-* is the portfolio's oat, and .emph-plain resolves all seven object-colour roles from it, so a theme that sets only --c-* inherits oat paper under its own neutrals. That is what happened when the brand moved into core: this theme rendered warm, which is the one thing a chromeless media theme must not do. */ --gray-50:#F8F8F9; --gray-100:#F0F0F2; --gray-200:#E5E4E7; --gray-300:#C9C9D1; --gray-400:#ACACB7; --gray-500:#8D8894; --gray-600:#6B6375; --gray-700:#4D4D5A; --gray-800:#2E303A; --gray-900:#1C1A20; --gray-950:#101014; /* ---- Type ---- palette's workhorse is 13px with 11px captions (25 and 13 uses in the app's CSS — by far the two most common sizes). The previous version of this theme mapped body→14px and caption→12px, which would have silently restyled the entire app one step larger on adoption. */ --th-display:system-ui,'Segoe UI',Roboto,sans-serif; --th-body:system-ui,'Segoe UI',Roboto,sans-serif; --th-ui:var(--th-display); --th-mono:ui-monospace,Consolas,monospace; --text-caption: var(--size-0); /* 11px */ --text-body: var(--size-2); /* 13px */ --text-subhead: var(--size-4); /* 16px */ --text-title: var(--size-6); /* 24px */ /* ---- Radius ---- palette's measured distribution collapses cleanly onto the LDS scale: 999px (22 uses), 12px (10), 8px (9), 4px (4). The one step LDS lacks is 16px (6 uses), declared here as --radius-xl pending a core addition. */ --radius-sm:4px; --radius-base:8px; --radius-lg:12px; --radius-xl:16px; --pill:999px; --radius:var(--radius-base); /* ---- Elevation ---- Floating chrome sits on artwork, so shadows stay tight — a large soft shadow muddies a gradient. Three steps, measured from palette's own CSS rather than invented. Its 16 box-shadows collapse onto three geometries that were already there, each drifting in alpha only (sm ran .20–.30, base .18–.35): sm 0 2px 8px 4 uses — thumbs, chips, the tab switcher base 0 4px 16px 5 uses — cards and floating pills (was --card-shadow) lg 0 12px 32px 2 uses — modals, which must clear everything --card-shadow stays as the alias .lds-card and .lds-nav were written against; it is now just another name for base. */ --shadow-sm:0 2px 8px rgba(0,0,0,.25); --shadow-base:0 4px 16px rgba(0,0,0,.25); --shadow-lg:0 12px 32px rgba(0,0,0,.45); --card-shadow:var(--shadow-base); --btn-shadow:none; /* ---- Motion ---- palette's deceleration curve, applied consistently to view-transition groups and the edit sheet. Mismatched easing between the card resize and the sheet slide reads as jank even at full frame rate. */ --dur-slow:320ms; --ease-decelerate:cubic-bezier(0.22,1,0.36,1); --density:1; --icon-size:20px;--icon-weight:2; --target-min:44px; /* palette standardises every chrome chip on 44px */ }