ada-ui 6.1.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # ada-ui
 
+## 7.0.0
+
+### Major Changes
+
+- d9bb452: Reworked the colour system around an independent five-slot palette and a pure-CSS theming engine.
+
+  **Renamed the colour slots** (breaking — update your markup):
+
+  - `default` (the no-class default) → `primary`
+  - `shade1` / `shade2` / `shade3` → `tone-1` / `tone-2` / `tone-3`
+  - `warn` → unchanged
+
+  The slots are now treated as an independent palette rather than shades of one colour. The per-colour base variables were renamed to spell out their meaning: `--l-base` → `--lightness`, `--c-base` → `--chroma`.
+
+  **Moved the colour engine into the base stylesheet (`ada.css`).** The slot classes and the 100–950 ladder now live in `ada.css`, so a theme is just custom properties on `:root` — no SCSS or `@extend` needed:
+
+  - A _ramp_ theme sets `--base-hue` (plus `--lightness` / `--chroma`); the four tones derive from the base hue by a per-slot offset, and `warn` stays fixed. The **blue** theme lands on the default offsets, so it is now a handful of properties.
+  - A _curated_ theme additionally overrides `--hue` / `--lightness` / `--chroma` per slot and the `--100` / `--950` ends. **jupiter-2** is authored this way.
+
+  **Fixed light theme dropping per-slot overrides.** Light mode previously reassigned lightness/chroma to a theme's absolute light values, silently flattening every slot onto the primary's. The light theme is now expressed as a per-theme shift (`--lightness-light-shift` / `--chroma-light-shift`) added on top of each slot's own value, so per-slot overrides survive. Blue and green render identically; jupiter-2's light theme is corrected (its steel reads as a muted blue and its burnt orange stays distinct, instead of both collapsing onto the primary orange).
+
 ## 6.1.0
 
 ### Minor Changes

package/css/ada.blue.css

@@ -1 +1 @@
-.warn,.shade3,.shade2,.shade1,.default,:root{--bg-body: var(--color950);--fg-body: var(--color100);--bg-body-light: var(--color100);--fg-body-light: var(--color800);--panel-bg: oklch(var(--500) / 0.1);--100: 0.91 0.05 var(--hue);--500: calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue);--600: calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue);--700: calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue);--800: var(--l-base) var(--c-base) var(--hue);--950: 0.18 0.03 var(--hue);--color100: oklch(var(--100));--color500: oklch(var(--500));--color600: oklch(var(--600));--color700: oklch(var(--700));--color800: oklch(var(--800));--color950: oklch(var(--950))}.light-theme.warn,.light-theme.shade3,.light-theme.shade2,.light-theme.shade1,.light-theme.default,.light-theme:root,:root.light-theme .warn,:root.light-theme .shade3,:root.light-theme .shade2,:root.light-theme .shade1,:root.light-theme .default,:root.light-theme :root{--l-base: var(--l-base-light);--c-base: var(--c-base-light);--bg-body: var(--bg-body-light);--fg-body: var(--fg-body-light)}:root{--l-base: 0.3;--c-base: 0.1;--l-base-light: 0.4;--c-base-light: 0.1}.default,:root{--hue: 246}.shade1{--hue: 220}.shade2{--hue: 195}.shade3{--hue: 170}.warn{--hue: 29}
+:root{--base-hue: 246;--lightness: 0.3;--chroma: 0.1;--lightness-light-shift: 0.1}

package/css/ada.css

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--spacing-lg: 14px;--border-width-sm: 1px;--border-width: 2px;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4)}@media screen and (min-width: 640px){:root{--font-size: 14px}}:root.light-theme{--box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4)}.scaled,:root{--text-xs: calc(0.75rem * var(--scale, 1));--text-sm: calc(0.85rem * var(--scale, 1));--text-base: calc(1rem * var(--scale, 1));--text-lg: calc(1.2rem * var(--scale, 1));--text-xl: calc(1.4rem * var(--scale, 1));--text-2xl: calc(1.6rem * var(--scale, 1));--text-3xl: calc(1.8rem * var(--scale, 1));--padding-xs: calc(0.15rem * var(--scale, 1));--padding-sm: calc(0.4rem * var(--scale, 1));--padding: calc(0.75rem * var(--scale, 1));--padding-lg: calc(1rem * var(--scale, 1));--border-radius: calc(0.3rem * var(--scale, 1));--command-min-size: calc(3rem * var(--scale, 1));--compound-spacer-min-size: calc(1rem * var(--scale, 1));--corner-size: calc(1rem * var(--scale, 1));--corner-small-size: calc(0.75rem * var(--scale, 1))}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:var(--text-base);padding:var(--padding);background:var(--bg-body);color:var(--fg-body);transition:background-color .15s ease-in-out}h1,h2,h3,h4,.panel>header,.tile>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}.command{background-color:var(--color800);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:var(--border-width);padding:var(--padding-xs) var(--padding-sm);min-height:var(--command-min-size);min-width:var(--command-min-size);border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--command-fg, var(--color100));font-family:inherit;font-size:var(--text-base);cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command.flash{animation:flash-background 1s ease-in-out infinite}.command[data-label][data-abbr]::after{content:attr(data-abbr)}@media(min-width: 640px){.command[data-label][data-abbr]::after{content:attr(data-label)}}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:active{color:var(--command-fg, var(--color100))}.command:focus{border-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.flex{flex:1}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:var(--compound-spacer-min-size);min-height:var(--compound-spacer-min-size)}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.compound-commands>.text{font-size:var(--text-3xl);line-height:var(--text-3xl);align-self:center;padding:var(--padding-xs)}.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.compound-commands.vertical{flex-direction:column}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>.command:first-child,.compound-commands.vertical .spacer:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.compound-commands.vertical>.command:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}@keyframes flash-background{50%{background-color:var(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--padding);font-size:var(--text-base)}.input:focus{border:var(--border-width) solid var(--color500)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.tile>footer::after,.panel>footer::before,.tile>footer::before,.panel>header::after,.tile>header::after,.panel>header::before,.tile>header::before{content:"";border-style:solid;border-color:var(--color700);position:absolute;height:var(--corner-size);width:var(--corner-size);z-index:2;--thickness: var(--border-width)}.tile>footer::after,.tile>footer::before,.tile>header::after,.tile>header::before{height:var(--corner-small-size);width:var(--corner-small-size);border-color:var(--color600);--thickness: var(--border-width-sm)}.panel,.tile{background:var(--panel-bg);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header,.tile>header{position:relative;font-size:var(--text-2xl);padding:var(--padding-sm) var(--padding)}.panel>header:empty,.tile>header:empty{padding:0}.panel>header::before,.tile>header::before{border-width:var(--thickness) 0 0 var(--thickness);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after,.tile>header::after{border-width:var(--thickness) var(--thickness) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article,.tile>article{z-index:1;padding:var(--padding);overflow:auto;font-size:var(--text-base)}.panel>footer,.tile>footer{position:relative;padding:var(--padding-sm) var(--padding);font-size:var(--text-sm);text-align:right}.panel>footer:empty,.tile>footer:empty{padding:0}.panel>footer::before,.tile>footer::before{border-width:0 0 var(--thickness) var(--thickness);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after,.tile>footer::after{border-width:0 var(--thickness) var(--thickness) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom:0}.tile{background:oklch(var(--800)/0.75);color:var(--tile-fg, var(--fg-body))}.tile>header{font-size:var(--text-lg)}.tile>footer{font-size:var(--text-xs)}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
+:root,.primary{--hue: var(--base-hue)}.tone-1{--hue: calc(var(--base-hue) - 26)}.tone-2{--hue: calc(var(--base-hue) - 51)}.tone-3{--hue: calc(var(--base-hue) - 76)}.warn{--hue: 29}:root,.primary,.tone-1,.tone-2,.tone-3,.warn{--lightness-resolved: var(--lightness);--chroma-resolved: var(--chroma);--bg-body: var(--color950);--fg-body: var(--color100);--bg-body-light: var(--color100);--fg-body-light: var(--color800);--panel-bg: oklch(var(--500) / 0.1);--100: 0.91 0.05 var(--hue);--500: calc(var(--lightness-resolved) + 0.15) calc(var(--chroma-resolved) + 0.06) var(--hue);--600: calc(var(--lightness-resolved) + 0.1) calc(var(--chroma-resolved) + 0.04) var(--hue);--700: calc(var(--lightness-resolved) + 0.05) calc(var(--chroma-resolved) + 0.02) var(--hue);--800: var(--lightness-resolved) var(--chroma-resolved) var(--hue);--950: 0.18 0.03 var(--hue);--color100: oklch(var(--100));--color500: oklch(var(--500));--color600: oklch(var(--600));--color700: oklch(var(--700));--color800: oklch(var(--800));--color950: oklch(var(--950))}.light-theme:root,.light-theme.primary,.light-theme.tone-1,.light-theme.tone-2,.light-theme.tone-3,.light-theme.warn,:root.light-theme :root,:root.light-theme .primary,:root.light-theme .tone-1,:root.light-theme .tone-2,:root.light-theme .tone-3,:root.light-theme .warn{--lightness-resolved: calc(var(--lightness) + var(--lightness-light-shift, 0));--chroma-resolved: calc(var(--chroma) + var(--chroma-light-shift, 0));--bg-body: var(--bg-body-light);--fg-body: var(--fg-body-light)}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--spacing-lg: 14px;--border-width-sm: 1px;--border-width: 2px;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4)}@media screen and (min-width: 640px){:root{--font-size: 14px}}:root.light-theme{--box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4)}.scaled,:root{--text-xs: calc(0.75rem * var(--scale, 1));--text-sm: calc(0.85rem * var(--scale, 1));--text-base: calc(1rem * var(--scale, 1));--text-lg: calc(1.2rem * var(--scale, 1));--text-xl: calc(1.4rem * var(--scale, 1));--text-2xl: calc(1.6rem * var(--scale, 1));--text-3xl: calc(1.8rem * var(--scale, 1));--padding-xs: calc(0.15rem * var(--scale, 1));--padding-sm: calc(0.4rem * var(--scale, 1));--padding: calc(0.75rem * var(--scale, 1));--padding-lg: calc(1rem * var(--scale, 1));--border-radius: calc(0.3rem * var(--scale, 1));--command-min-size: calc(3rem * var(--scale, 1));--compound-spacer-min-size: calc(1rem * var(--scale, 1));--corner-size: calc(1rem * var(--scale, 1));--corner-small-size: calc(0.75rem * var(--scale, 1))}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:var(--text-base);padding:var(--padding);background:var(--bg-body);color:var(--fg-body);transition:background-color .15s ease-in-out}h1,h2,h3,h4,.panel>header,.tile>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}.command{background-color:var(--color800);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:var(--border-width);padding:var(--padding-xs) var(--padding-sm);min-height:var(--command-min-size);min-width:var(--command-min-size);border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--command-fg, var(--color100));font-family:inherit;font-size:var(--text-base);cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command.flash{animation:flash-background 1s ease-in-out infinite}.command[data-label][data-abbr]::after{content:attr(data-abbr)}@media(min-width: 640px){.command[data-label][data-abbr]::after{content:attr(data-label)}}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:active{color:var(--command-fg, var(--color100))}.command:focus{border-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.flex{flex:1}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:var(--compound-spacer-min-size);min-height:var(--compound-spacer-min-size)}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.compound-commands>.text{font-size:var(--text-3xl);line-height:var(--text-3xl);align-self:center;padding:var(--padding-xs)}.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.compound-commands.vertical{flex-direction:column}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>.command:first-child,.compound-commands.vertical .spacer:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.compound-commands.vertical>.command:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}@keyframes flash-background{50%{background-color:var(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--padding);font-size:var(--text-base)}.input:focus{border:var(--border-width) solid var(--color500)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.tile>footer::after,.panel>footer::before,.tile>footer::before,.panel>header::after,.tile>header::after,.panel>header::before,.tile>header::before{content:"";border-style:solid;border-color:var(--color700);position:absolute;height:var(--corner-size);width:var(--corner-size);z-index:2;--thickness: var(--border-width)}.tile>footer::after,.tile>footer::before,.tile>header::after,.tile>header::before{height:var(--corner-small-size);width:var(--corner-small-size);border-color:var(--color600);--thickness: var(--border-width-sm)}.panel,.tile{background:var(--panel-bg);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header,.tile>header{position:relative;font-size:var(--text-2xl);padding:var(--padding-sm) var(--padding)}.panel>header:empty,.tile>header:empty{padding:0}.panel>header::before,.tile>header::before{border-width:var(--thickness) 0 0 var(--thickness);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after,.tile>header::after{border-width:var(--thickness) var(--thickness) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article,.tile>article{z-index:1;padding:var(--padding);overflow:auto;font-size:var(--text-base)}.panel>footer,.tile>footer{position:relative;padding:var(--padding-sm) var(--padding);font-size:var(--text-sm);text-align:right}.panel>footer:empty,.tile>footer:empty{padding:0}.panel>footer::before,.tile>footer::before{border-width:0 0 var(--thickness) var(--thickness);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after,.tile>footer::after{border-width:0 var(--thickness) var(--thickness) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom:0}.tile{background:oklch(var(--800)/0.75);color:var(--tile-fg, var(--fg-body))}.tile>header{font-size:var(--text-lg)}.tile>footer{font-size:var(--text-xs)}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}

package/css/ada.green.css

@@ -1 +1 @@
-.warn,.shade3,.shade2,.shade1,.default,:root{--bg-body: var(--color950);--fg-body: var(--color100);--bg-body-light: var(--color100);--fg-body-light: var(--color800);--panel-bg: oklch(var(--500) / 0.1);--100: 0.91 0.05 var(--hue);--500: calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue);--600: calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue);--700: calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue);--800: var(--l-base) var(--c-base) var(--hue);--950: 0.18 0.03 var(--hue);--color100: oklch(var(--100));--color500: oklch(var(--500));--color600: oklch(var(--600));--color700: oklch(var(--700));--color800: oklch(var(--800));--color950: oklch(var(--950))}.light-theme.warn,.light-theme.shade3,.light-theme.shade2,.light-theme.shade1,.light-theme.default,.light-theme:root,:root.light-theme .warn,:root.light-theme .shade3,:root.light-theme .shade2,:root.light-theme .shade1,:root.light-theme .default,:root.light-theme :root{--l-base: var(--l-base-light);--c-base: var(--c-base-light);--bg-body: var(--bg-body-light);--fg-body: var(--fg-body-light)}:root{--l-base: 0.35;--c-base: 0.1;--l-base-light: 0.45;--c-base-light: 0.15}.default,:root{--hue: 132}.shade1{--hue: 121}.shade2{--hue: 164}.shade3{--hue: 185}.warn{--hue: 29}
+:root{--base-hue: 132;--lightness: 0.35;--chroma: 0.1;--lightness-light-shift: 0.1;--chroma-light-shift: 0.05}.tone-1{--hue: 121}.tone-2{--hue: 164}.tone-3{--hue: 185}

package/css/ada.jupiter-2.css

@@ -1 +1 @@
-.warn,.shade3,.shade2,.shade1,.default,:root{--bg-body: var(--color950);--fg-body: var(--color100);--bg-body-light: var(--color100);--fg-body-light: var(--color800);--panel-bg: oklch(var(--500) / 0.1);--100: 0.91 0.05 var(--hue);--500: calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue);--600: calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue);--700: calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue);--800: var(--l-base) var(--c-base) var(--hue);--950: 0.18 0.03 var(--hue);--color100: oklch(var(--100));--color500: oklch(var(--500));--color600: oklch(var(--600));--color700: oklch(var(--700));--color800: oklch(var(--800));--color950: oklch(var(--950))}.light-theme.warn,.light-theme.shade3,.light-theme.shade2,.light-theme.shade1,.light-theme.default,.light-theme:root,:root.light-theme .warn,:root.light-theme .shade3,:root.light-theme .shade2,:root.light-theme .shade1,:root.light-theme .default,:root.light-theme :root{--l-base: var(--l-base-light);--c-base: var(--c-base-light);--bg-body: var(--bg-body-light);--fg-body: var(--fg-body-light)}:root{--l-base: 0.69;--c-base: 0.179;--l-base-light: 0.69;--c-base-light: 0.179;--panel-bg: oklch(0.3 0.052 268 / 0.5);--command-fg: oklch(0 0 0);--tile-fg: var(--command-fg)}.default,:root{--hue: 49;--950: 0.21 0.055 270;--100: 0.947 0.007 81;--fg-body-light: var(--color950)}:root.light-theme{--panel-bg: oklch(var(--500) / 0.1)}.shade1{--hue: 45;--l-base: 0.6;--c-base: 0.164;--tile-fg: var(--color100)}.shade2{--hue: 73;--l-base: 0.73;--c-base: 0.16}.shade3{--hue: 258;--c-base: 0.06}.warn{--hue: 28;--l-base: 0.62;--c-base: 0.18;--tile-fg: var(--color100)}
+:root{--base-hue: 49;--lightness: 0.69;--chroma: 0.179;--950: 0.21 0.055 270;--100: 0.947 0.007 81;--fg-body-light: var(--color950);--panel-bg: oklch(0.3 0.052 268 / 0.5);--command-fg: oklch(0 0 0);--tile-fg: var(--command-fg)}:root.light-theme{--panel-bg: oklch(var(--500) / 0.1)}.tone-1{--hue: 45;--lightness: 0.6;--chroma: 0.164;--tile-fg: var(--color100)}.tone-2{--hue: 73;--lightness: 0.73;--chroma: 0.16}.tone-3{--hue: 258;--chroma: 0.06}.warn{--hue: 28;--lightness: 0.62;--chroma: 0.18;--tile-fg: var(--color100)}

package/index.html

@@ -27,23 +27,23 @@
       <div class="spacer"></div>
       <a
         href="#typography"
-        class="command shade1"
+        class="command tone-1"
         data-label="Typography"
         data-abbr="Typo"
       ></a>
-      <a href="#padding" class="command shade1">Padding</a>
-      <a href="#spacing" class="command shade1">Spacing</a>
-      <a href="#colors" class="command shade1">Colors</a>
-      <a href="#scaling" class="command shade2">Scaling</a>
-      <a href="#page-layout" class="command shade1">Page Layout</a>
+      <a href="#padding" class="command tone-1">Padding</a>
+      <a href="#spacing" class="command tone-1">Spacing</a>
+      <a href="#colors" class="command tone-1">Colors</a>
+      <a href="#scaling" class="command tone-2">Scaling</a>
+      <a href="#page-layout" class="command tone-1">Page Layout</a>
       <a
         href="#command"
-        class="command shade3"
+        class="command tone-3"
         data-label="Command"
         data-abbr="Cmd"
       ></a>
-      <a href="#panel" class="command shade2">Panel</a>
-      <a href="#tile" class="command shade2">Tile</a>
+      <a href="#panel" class="command tone-2">Panel</a>
+      <a href="#tile" class="command tone-2">Tile</a>
       <a href="#input" class="command">Input</a>
       <a href="#spinner" class="command">Spinner</a>
       <div class="spacer flex"></div>
@@ -114,16 +114,16 @@
           <article class="padding">
             <code>--padding-xs</code>
             <span>0.15rem</span>
-            <div class="padding-box xs shade2"></div>
+            <div class="padding-box xs tone-2"></div>
             <code>--padding-sm</code>
             <span>0.4rem</span>
-            <div class="padding-box sm shade2"></div>
+            <div class="padding-box sm tone-2"></div>
             <code>--padding</code>
             <span>0.75rem</span>
-            <div class="padding-box shade2"></div>
+            <div class="padding-box tone-2"></div>
             <code>--padding-lg</code>
             <span>1rem</span>
-            <div class="padding-box lg shade2"></div>
+            <div class="padding-box lg tone-2"></div>
             <p>&rarr; Paddings are responsive (in rem).</p>
             <p>
               Usage: paddings, anything which should grow/shrink with the root
@@ -137,16 +137,16 @@
           <article class="spacing">
             <code>--spacing-xs</code>
             <span>2px</span>
-            <div class="spacing-box xs shade3"></div>
+            <div class="spacing-box xs tone-3"></div>
             <code>--spacing-sm</code>
             <span>6px</span>
-            <div class="spacing-box sm shade3"></div>
+            <div class="spacing-box sm tone-3"></div>
             <code>--spacing</code>
             <span>10px</span>
-            <div class="spacing-box shade3"></div>
+            <div class="spacing-box tone-3"></div>
             <code>--spacing-lg</code>
             <span>14px</span>
-            <div class="spacing-box lg shade3"></div>
+            <div class="spacing-box lg tone-3"></div>
             <p>&rarr; Spacings are not responsive (in px).</p>
             <p>
               Usage: spacings, gaps, anything which should be stable regardless
@@ -160,7 +160,7 @@
           <article style="display: grid; gap: var(--spacing)">
             <div class="colors">
               <div class="color-shades">
-                <h4>Default</h4>
+                <h4>Primary</h4>
                 <div class="color100">100</div>
                 <div class="color500">500</div>
                 <div class="color600">600</div>
@@ -169,31 +169,31 @@
                 <div class="color950">950</div>
               </div>
               <div class="color-shades">
-                <h4>Shade 1</h4>
-                <div class="color100 shade1">100</div>
-                <div class="color500 shade1">500</div>
-                <div class="color600 shade1">600</div>
-                <div class="color700 shade1">700</div>
-                <div class="color800 shade1">800</div>
-                <div class="color950 shade1">950</div>
+                <h4>Tone 1</h4>
+                <div class="color100 tone-1">100</div>
+                <div class="color500 tone-1">500</div>
+                <div class="color600 tone-1">600</div>
+                <div class="color700 tone-1">700</div>
+                <div class="color800 tone-1">800</div>
+                <div class="color950 tone-1">950</div>
               </div>
               <div class="color-shades">
-                <h4>Shade 2</h4>
-                <div class="color100 shade2">100</div>
-                <div class="color500 shade2">500</div>
-                <div class="color600 shade2">600</div>
-                <div class="color700 shade2">700</div>
-                <div class="color800 shade2">800</div>
-                <div class="color950 shade2">950</div>
+                <h4>Tone 2</h4>
+                <div class="color100 tone-2">100</div>
+                <div class="color500 tone-2">500</div>
+                <div class="color600 tone-2">600</div>
+                <div class="color700 tone-2">700</div>
+                <div class="color800 tone-2">800</div>
+                <div class="color950 tone-2">950</div>
               </div>
               <div class="color-shades">
-                <h4>Shade 3</h4>
-                <div class="color100 shade3">100</div>
-                <div class="color500 shade3">500</div>
-                <div class="color600 shade3">600</div>
-                <div class="color700 shade3">700</div>
-                <div class="color800 shade3">800</div>
-                <div class="color950 shade3">950</div>
+                <h4>Tone 3</h4>
+                <div class="color100 tone-3">100</div>
+                <div class="color500 tone-3">500</div>
+                <div class="color600 tone-3">600</div>
+                <div class="color700 tone-3">700</div>
+                <div class="color800 tone-3">800</div>
+                <div class="color950 tone-3">950</div>
               </div>
               <div class="color-shades">
                 <h4>Warn</h4>
@@ -232,7 +232,7 @@
               every responsive token (sizes, paddings, font-size) is scaled in
               this scope. See the scaled tile as an example:
             </p>
-            <div class="tile scaled shade2" style="--scale: 1.5">
+            <div class="tile scaled tone-2" style="--scale: 1.5">
               <header></header>
               <article>Scaled Tile (factor 1.5)</article>
               <footer></footer>
@@ -269,32 +269,32 @@
           >
             <div class="row">
               <button class="command">Command</button>
-              <button class="command shade1">Command</button>
-              <button class="command shade2">Command</button>
-              <button class="command shade3">Command</button>
+              <button class="command tone-1">Command</button>
+              <button class="command tone-2">Command</button>
+              <button class="command tone-3">Command</button>
               <button class="command warn">Command</button>
             </div>
             <h3>Outline</h3>
             <div class="row">
               <button class="command outline">Command</button>
-              <button class="command outline shade1">Command</button>
-              <button class="command outline shade2">Command</button>
-              <button class="command outline shade3">Command</button>
+              <button class="command outline tone-1">Command</button>
+              <button class="command outline tone-2">Command</button>
+              <button class="command outline tone-3">Command</button>
               <button class="command outline warn">Command</button>
             </div>
             <h3>Flashing</h3>
             <div class="row">
               <button class="command flash">Command</button>
-              <button class="command flash shade1">Command</button>
-              <button class="command flash shade2">Command</button>
-              <button class="command flash shade3">Command</button>
+              <button class="command flash tone-1">Command</button>
+              <button class="command flash tone-2">Command</button>
+              <button class="command flash tone-3">Command</button>
               <button class="command flash warn">Command</button>
             </div>
             <div class="row">
               <button class="command flash outline">Command</button>
-              <button class="command flash outline shade1">Command</button>
-              <button class="command flash outline shade2">Command</button>
-              <button class="command flash outline shade3">Command</button>
+              <button class="command flash outline tone-1">Command</button>
+              <button class="command flash outline tone-2">Command</button>
+              <button class="command flash outline tone-3">Command</button>
               <button class="command flash outline warn">Command</button>
             </div>
             <h3>Disabled</h3>
@@ -386,7 +386,7 @@
               <footer>Footer</footer>
             </div>
             <h3>With another color variant</h3>
-            <div class="panel shade3">
+            <div class="panel tone-3">
               <header>Header</header>
               <article>Content</article>
               <footer>Footer</footer>
@@ -430,17 +430,17 @@
               <article>Tile Content</article>
               <footer></footer>
             </div>
-            <div class="tile shade1">
+            <div class="tile tone-1">
               <header></header>
               <article>Tile Content</article>
               <footer></footer>
             </div>
-            <div class="tile shade2">
+            <div class="tile tone-2">
               <header></header>
               <article>Tile Content</article>
               <footer></footer>
             </div>
-            <div class="tile shade3">
+            <div class="tile tone-3">
               <header></header>
               <article>Tile Content</article>
               <footer></footer>
@@ -468,21 +468,21 @@
             <div>
               <h3>80px</h3>
               <div class="spinner" style="font-size: 80px"></div>
-              <div class="spinner shade1" style="font-size: 80px"></div>
-              <div class="spinner shade2" style="font-size: 80px"></div>
-              <div class="spinner shade3" style="font-size: 80px"></div>
+              <div class="spinner tone-1" style="font-size: 80px"></div>
+              <div class="spinner tone-2" style="font-size: 80px"></div>
+              <div class="spinner tone-3" style="font-size: 80px"></div>
               <div class="spinner warn" style="font-size: 80px"></div>
               <h3>32px</h3>
               <div class="spinner" style="font-size: 32px"></div>
-              <div class="spinner shade1" style="font-size: 32px"></div>
-              <div class="spinner shade2" style="font-size: 32px"></div>
-              <div class="spinner shade3" style="font-size: 32px"></div>
+              <div class="spinner tone-1" style="font-size: 32px"></div>
+              <div class="spinner tone-2" style="font-size: 32px"></div>
+              <div class="spinner tone-3" style="font-size: 32px"></div>
               <div class="spinner warn" style="font-size: 32px"></div>
               <h3>16px</h3>
               <div class="spinner" style="font-size: 16px"></div>
-              <div class="spinner shade1" style="font-size: 16px"></div>
-              <div class="spinner shade2" style="font-size: 16px"></div>
-              <div class="spinner shade3" style="font-size: 16px"></div>
+              <div class="spinner tone-1" style="font-size: 16px"></div>
+              <div class="spinner tone-2" style="font-size: 16px"></div>
+              <div class="spinner tone-3" style="font-size: 16px"></div>
               <div class="spinner warn" style="font-size: 16px"></div>
             </div>
           </article>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ada-ui",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "scripts": {
     "dev": "concurrently -n scss,serve 'sass scss:css --watch --embed-source-map' 'alive-server .'",
     "postdev": "git checkout css/*",

package/scss/_ada.theme-base.scss

@@ -1,4 +1,58 @@
-%colourShades {
+// Colour engine. Lives in the base stylesheet (ada.css) so a theme is just
+// custom properties on :root — no SCSS, no @extend needed:
+//
+//   ramp theme    -> set --base-hue (+ --lightness / --chroma). The four tones
+//                    derive from --base-hue by a per-slot offset; warn is fixed.
+//   curated theme -> additionally override --hue / --lightness / --chroma per
+//                    slot, and the --100 / --950 ends to decouple bg/text.
+//
+// The five slots (primary + tone-1..3 + warn) are an INDEPENDENT palette, not
+// shades of one colour. The 100..950 ladder below is the light->dark ramp WITHIN
+// a single slot.
+
+// --- per-slot hue ------------------------------------------------------------
+// --base-hue is the theme's anchor: primary uses it, and the tones offset from
+// it by default (an even ramp — the blue theme lands exactly on these, so it
+// sets nothing but --base-hue). Override any individual slot by setting --hue on
+// its class, the same way --lightness / --chroma are overridden per slot. warn
+// sits off the ramp at a fixed red. :root mirrors primary so no-class elements
+// (body, plain commands) read as the primary colour.
+//
+// Why --base-hue is the only "base"-prefixed input: hue is the one value
+// derived per slot (tone = base - N), so its anchor must be a SEPARATE variable
+// from the per-slot --hue the ladder consumes — `--hue: calc(var(--hue) - 26)`
+// would be a self-referential cycle (invalid CSS). Lightness/chroma aren't
+// derived, so a single --lightness / --chroma is both the theme default and a
+// per-slot override via the cascade; no separate anchor is needed.
+:root,
+.primary {
+  --hue: var(--base-hue);
+}
+.tone-1 {
+  --hue: calc(var(--base-hue) - 26);
+}
+.tone-2 {
+  --hue: calc(var(--base-hue) - 51);
+}
+.tone-3 {
+  --hue: calc(var(--base-hue) - 76);
+}
+.warn {
+  --hue: 29;
+}
+
+// --- the shade ladder within one slot ----------------------------------------
+%ladder {
+  // The ladder reads --lightness-resolved / --chroma-resolved so the light theme can
+  // shift them without clobbering a slot's own --lightness/--chroma. In light
+  // mode every slot keeps its own value plus a per-theme shift, so per-slot
+  // overrides survive (they used to be silently dropped in light mode).
+  // The shift is itself a cascade input: set --lightness-light-shift on a slot to
+  // lift it more/less than the theme-wide value — it REPLACES the :root shift for
+  // that slot (it does not stack on it).
+  --lightness-resolved: var(--lightness);
+  --chroma-resolved: var(--chroma);
+
   --bg-body: var(--color950);
   --fg-body: var(--color100);
 
@@ -7,22 +61,22 @@
 
   &.light-theme,
   :root.light-theme & {
-    --l-base: var(--l-base-light);
-    --c-base: var(--c-base-light);
+    --lightness-resolved: calc(var(--lightness) + var(--lightness-light-shift, 0));
+    --chroma-resolved: calc(var(--chroma) + var(--chroma-light-shift, 0));
     --bg-body: var(--bg-body-light);
     --fg-body: var(--fg-body-light);
   }
 
   // Panel surface colour. Lives here (not on :root in each theme) so var(--500)
-  // resolves per shade class — that keeps `.panel.shadeN` tinting its own surface.
+  // resolves per slot — that keeps `.panel.tone-N` tinting its own surface.
   // Themes can override it (e.g. jupiter-2 sets a flat navy for the base panel).
   --panel-bg: oklch(var(--500) / 0.1);
 
   --100: 0.91 0.05 var(--hue);
-  --500: calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue);
-  --600: calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue);
-  --700: calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue);
-  --800: var(--l-base) var(--c-base) var(--hue);
+  --500: calc(var(--lightness-resolved) + 0.15) calc(var(--chroma-resolved) + 0.06) var(--hue);
+  --600: calc(var(--lightness-resolved) + 0.1) calc(var(--chroma-resolved) + 0.04) var(--hue);
+  --700: calc(var(--lightness-resolved) + 0.05) calc(var(--chroma-resolved) + 0.02) var(--hue);
+  --800: var(--lightness-resolved) var(--chroma-resolved) var(--hue);
   --950: 0.18 0.03 var(--hue);
 
   --color100: oklch(var(--100));
@@ -32,3 +86,12 @@
   --color800: oklch(var(--800));
   --color950: oklch(var(--950));
 }
+
+:root,
+.primary,
+.tone-1,
+.tone-2,
+.tone-3,
+.warn {
+  @extend %ladder;
+}

package/scss/ada.blue.scss

@@ -1,35 +1,9 @@
-@import "ada.theme-base";
-
 :root {
-  @extend .default;
-  --l-base: 0.3;
-  --c-base: 0.1;
-
-  --l-base-light: 0.4;
-  --c-base-light: 0.1;
-}
-
-.default {
-  @extend %colourShades;
-  --hue: 246;
-}
+  --base-hue: 246;
 
-.shade1 {
-  @extend %colourShades;
-  --hue: 220;
-}
-
-.shade2 {
-  @extend %colourShades;
-  --hue: 195;
-}
-
-.shade3 {
-  @extend %colourShades;
-  --hue: 170;
-}
+  --lightness: 0.3;
+  --chroma: 0.1;
 
-.warn {
-  @extend %colourShades;
-  --hue: 29;
+  // Light theme: lift lightness, keep chroma (0.3 -> 0.4).
+  --lightness-light-shift: 0.1;
 }

package/scss/ada.green.scss

@@ -1,35 +1,20 @@
-@import "ada.theme-base";
-
 :root {
-  @extend .default;
-  --l-base: 0.35;
-  --c-base: 0.1;
+  --base-hue: 132;
 
-  --l-base-light: 0.45;
-  --c-base-light: 0.15;
-}
+  --lightness: 0.35;
+  --chroma: 0.1;
 
-.default {
-  @extend %colourShades;
-  --hue: 132;
+  // Light theme: lift lightness and chroma (0.35 -> 0.45, 0.1 -> 0.15).
+  --lightness-light-shift: 0.1;
+  --chroma-light-shift: 0.05;
 }
 
-.shade1 {
-  @extend %colourShades;
+.tone-1 {
   --hue: 121;
 }
-
-.shade2 {
-  @extend %colourShades;
+.tone-2 {
   --hue: 164;
 }
-
-.shade3 {
-  @extend %colourShades;
+.tone-3 {
   --hue: 185;
 }
-
-.warn {
-  @extend %colourShades;
-  --hue: 29;
-}

package/scss/ada.jupiter-2.scss

@@ -1,28 +1,31 @@
-@import "ada.theme-base";
-
 // "Jupiter 2" — a deep-space palette: navy hull + vivid warning-orange + cream.
 //
-// This theme is deliberately TWO-HUE. The shade ladder (%colourShades) derives
-// everything from a single --hue, which reads as monochrome for this palette.
-// Here the accent ramp stays orange, but the dark/light ends (--950 bg, --100
-// text) are overridden to navy and cream so the page reads as the full palette:
-// navy (~60%) + orange accents & trim (~30%) + cream text (~10%).
+// A CURATED theme (not a hue ramp): each slot sets its own LCH rather than
+// deriving from --base-hue. The page reads as the full palette — navy (~60%) +
+// orange accents & trim (~30%) + cream text (~10%) — by overriding the primary's
+// dark/light ends to navy and cream. (Requires ada.css for the engine.)
 //
 // Lightness matters: the orange is oklch(0.69 0.179 49). At L≈0.38 orange renders
-// as brown/red, so --l-base sits at 0.69 to land a true orange on --color800.
+// as brown/red, so --lightness sits at 0.69 to land a true orange on --color800.
 :root {
-  @extend .default;
-
-  // Accent base lands a vivid orange (#F07214) exactly on --color800.
-  --l-base: 0.69;
-  --c-base: 0.179;
+  // Primary accent lands a vivid orange (#F07214) exactly on --color800.
+  --base-hue: 49;
+  --lightness: 0.69;
+  --chroma: 0.179;
+  // No light-theme shift: the orange stays put, and every tone keeps its own
+  // lightness/chroma in light mode (previously the absolute light values
+  // silently flattened burnt/steel/warn to the primary's lightness).
 
-  --l-base-light: 0.69;
-  --c-base-light: 0.179;
+  // Decouple the primary bg/fg from the orange hue (overrides the ladder's
+  // single-hue ends): deep navy surface + warm cream text.
+  --950: 0.21 0.055 270; // dominant surface (~#0F1631)
+  --100: 0.947 0.007 81; // body + button text (#F0EDE8)
+  // Light theme would otherwise put orange (color800) text on cream — force navy.
+  --fg-body-light: var(--color950);
 
   // Base panel surface is a flat mid navy (#263660) instead of the orange accent
   // wash, so the orange corner-trim reads as trim rather than blending in.
-  // Variant panels (.panel.shadeN) keep their per-shade tint (from %colourShades).
+  // Variant panels (.panel.tone-N) keep their per-tone tint (from the ladder).
   --panel-bg: oklch(0.3 0.052 268 / 0.5);
 
   // Dark label colour for text on the light accent surfaces. The accent
@@ -30,30 +33,15 @@
   // Pure black clears WCAG AA on every button shade (orange 7.1, amber 8.6,
   // steel 7.6, burnt 5.0, warn 5.3) and on the lighter tiles too (it needs to be
   // this dark to clear the mid-tone 75% orange tile at 4.55). Set on :root so all
-  // buttons inherit it uniformly (no shade class re-sets it).
+  // buttons inherit it uniformly (no slot re-sets it).
   --command-fg: oklch(0 0 0);
 
   // Tile labels: tiles are color800 at 75% over navy, i.e. mid-tone. Adaptive
-  // contrast — dark text on the lighter tiles (default/amber/steel inherit this);
+  // contrast — dark text on the lighter tiles (primary/amber/steel inherit this);
   // the darker burnt/warn tiles flip back to cream below.
   --tile-fg: var(--command-fg);
 }
 
-// Vivid orange — primary accent: buttons (800), trim/corners (700),
-// input border (600), active/focus glow (500). 700/600/500 clamp to vivid
-// pure orange, which reads like panel lighting / warning indicators.
-.default {
-  @extend %colourShades;
-  --hue: 49;
-
-  // Decouple bg/fg from the orange hue (overrides %colourShades' single-hue ends):
-  --950: 0.21 0.055 270; // deep navy — dominant surface (~#0F1631)
-  --100: 0.947 0.007 81; // warm cream — body + button text (#F0EDE8)
-
-  // Light theme would otherwise put orange (color800) text on cream — force navy.
-  --fg-body-light: var(--color950);
-}
-
 // In light theme a translucent navy over cream looks muddy — restore the
 // standard warm wash so the light base panel looks as it would by default.
 :root.light-theme {
@@ -61,39 +49,35 @@
 }
 
 // Deeper burnt orange (#CC5812).
-.shade1 {
-  @extend %colourShades;
+.tone-1 {
   --hue: 45;
-  --l-base: 0.6;
-  --c-base: 0.164;
+  --lightness: 0.6;
+  --chroma: 0.164;
   // Darker tile surface — cream reads better than dark here.
   --tile-fg: var(--color100);
 }
 
 // Amber / warning-light gold (#E8A030).
-.shade2 {
-  @extend %colourShades;
+.tone-2 {
   --hue: 73;
-  --l-base: 0.73;
-  --c-base: 0.16;
+  --lightness: 0.73;
+  --chroma: 0.16;
 }
 
 // Steel blue-gray — the cool counterpoint that keeps the UI from going
 // all-orange. Lower chroma so it reads as steel, not a loud cornflower (#859DC1).
-.shade3 {
-  @extend %colourShades;
+.tone-3 {
   --hue: 258;
-  --c-base: 0.06;
+  --chroma: 0.06;
 }
 
 // Danger red — kept clearly distinct from the orange accent. Lightened to L0.62
 // (#DE4F44) so the dark --command-fg label clears WCAG AA on warn buttons (the
 // old L0.58 red was a mid-tone where no text colour reached 4.5:1).
 .warn {
-  @extend %colourShades;
   --hue: 28;
-  --l-base: 0.62;
-  --c-base: 0.18;
+  --lightness: 0.62;
+  --chroma: 0.18;
   // Darker tile surface — cream reads better than dark here.
   --tile-fg: var(--color100);
 }

package/scss/ada.scss

@@ -1,3 +1,4 @@
+@import "ada.theme-base";
 @import "reset";
 @import "global";
 @import "typography";