ada-ui 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # ada-ui
 
+## 6.1.0
+
+### Minor Changes
+
+- 5d9f45c: Added the **jupiter-2** theme — a deep-space palette (navy + warning-orange + cream), available via the `ada-ui/jupiter-2` export.
+
+  Also introduced a themeable `--panel-bg` custom property. Panel surface colour is now a per-theme knob: it defaulted in the shared shade system to the existing translucent accent wash, so the **blue** and **green** themes render identically. The jupiter-2 theme overrode it to give panels a flat navy surface, while variant panels (`.panel.shadeN`) kept their per-shade tint.
+
+  Added two themeable label-colour custom properties so text stays legible on light surfaces:
+
+  - `--command-fg` (button labels, default `--color100`) — jupiter-2 set it to black so labels clear WCAG AA on its light orange/amber/steel/red buttons (cream only reached ~2.5:1); its warn red was lightened slightly so the dark labels pass there too.
+  - `--tile-fg` (tile labels, default `--fg-body`) — jupiter-2 used it for adaptive contrast: dark labels on its lighter tiles (orange/amber/steel), cream kept on the darker ones (burnt/red).
+
+  The blue and green themes set neither property, so they rendered identically.
+
+## 6.0.1
+
+### Patch Changes
+
+- bb5e4ed: Added `flex` class to easily stretch any element inside compound-commands.
+  (Sets `flex: 1`)
+
 ## 6.0.0
 
 ### Major 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);--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}
+.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}

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(--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(--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>.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:oklch(var(--500)/0.1);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)}.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)}}
+*,::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);--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}
+.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}

package/css/ada.jupiter-2.css

@@ -0,0 +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)}

package/index.html

@@ -11,8 +11,8 @@
       content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
     />
     <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="css/ada.blue.css" />
     <link rel="stylesheet" href="css/ada.css" />
+    <link id="theme-override" rel="stylesheet" href="css/ada.blue.css" />
     <link
       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
       rel="stylesheet"
@@ -46,7 +46,10 @@
       <a href="#tile" class="command shade2">Tile</a>
       <a href="#input" class="command">Input</a>
       <a href="#spinner" class="command">Spinner</a>
-      <div style="flex: 1" class="spacer"></div>
+      <div class="spacer flex"></div>
+      <button id="theme-toggle" class="command" onclick="cycleTheme()">
+        Green
+      </button>
       <button
         class="command"
         onclick="document.documentElement.classList.toggle('light-theme'); this.textContent = this.textContent === 'Dark' ? 'Light' : 'Dark'"
@@ -488,5 +491,20 @@
       </article>
       <footer>Ada Version 5</footer>
     </div>
+    <script>
+      const themes = [
+        { label: "Blue", href: "css/ada.blue.css" },
+        { label: "Green", href: "css/ada.green.css" },
+        { label: "Jupiter 2", href: "css/ada.jupiter-2.css" },
+      ];
+      let themeIndex = 0;
+
+      function cycleTheme() {
+        themeIndex = (themeIndex + 1) % themes.length;
+        document.getElementById("theme-override").href = themes[themeIndex].href;
+        const nextLabel = themes[(themeIndex + 1) % themes.length].label;
+        document.getElementById("theme-toggle").textContent = nextLabel;
+      }
+    </script>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ada-ui",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "scripts": {
     "dev": "concurrently -n scss,serve 'sass scss:css --watch --embed-source-map' 'alive-server .'",
     "postdev": "git checkout css/*",
@@ -15,7 +15,8 @@
   "exports": {
     ".": "./css/ada.css",
     "./blue": "./css/ada.blue.css",
-    "./green": "./css/ada.green.css"
+    "./green": "./css/ada.green.css",
+    "./jupiter-2": "./css/ada.jupiter-2.css"
   },
   "repository": {
     "type": "git",

package/scss/_ada.theme-base.scss

@@ -13,6 +13,11 @@
     --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.
+  // 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);

package/scss/_command.scss

@@ -14,7 +14,10 @@
   border-radius: var(--border-radius);
   overflow: hidden;
   outline: none;
-  color: var(--color100);
+  // Text colour on the filled (accent) button surface. Themeable via --command-fg
+  // (default --color100). Themes whose button bg is light — e.g. jupiter-2's
+  // orange — set a dark --command-fg so labels stay legible (WCAG AA).
+  color: var(--command-fg, var(--color100));
   font-family: inherit;
   font-size: var(--text-base);
   cursor: pointer;
@@ -60,7 +63,8 @@
     }
 
     &:active {
-      color: var(--color100);
+      // active outline gets the accent (color500) fill — match the filled text colour
+      color: var(--command-fg, var(--color100));
     }
   }
 
@@ -79,6 +83,10 @@
   display: inline-flex;
   gap: var(--spacing-sm);
 
+  > .flex {
+    flex: 1;
+  }
+
   > .spacer {
     background-color: var(--color800);
     box-shadow: var(--box-shadow);

package/scss/_panel.scss

@@ -19,7 +19,9 @@
 }
 
 .panel {
-  background: oklch(var(--500) / 0.1);
+  // Panel surface colour is a per-theme knob — every theme defines --panel-bg
+  // (blue/green: the translucent accent wash; jupiter-2: navy). See the theme files.
+  background: var(--panel-bg);
   box-shadow: var(--box-shadow);
   border-radius: var(--border-radius);
   display: grid;
@@ -93,6 +95,10 @@
   @extend .panel;
 
   background: oklch(var(--800) / 0.75);
+  // Tile label colour, themeable (default --fg-body). A theme with light tile
+  // surfaces can flip this to a dark colour per shade for legibility — see
+  // jupiter-2, which inverts it on its lighter tiles.
+  color: var(--tile-fg, var(--fg-body));
 
   > header {
     font-size: var(--text-lg);

package/scss/ada.jupiter-2.scss

@@ -0,0 +1,99 @@
+@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%).
+//
+// 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.
+:root {
+  @extend .default;
+
+  // Accent base lands a vivid orange (#F07214) exactly on --color800.
+  --l-base: 0.69;
+  --c-base: 0.179;
+
+  --l-base-light: 0.69;
+  --c-base-light: 0.179;
+
+  // 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).
+  --panel-bg: oklch(0.3 0.052 268 / 0.5);
+
+  // Dark label colour for text on the light accent surfaces. The accent
+  // backgrounds are light (orange L≈0.69), so cream text only hits ~2.5:1.
+  // 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).
+  --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);
+  // 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 {
+  --panel-bg: oklch(var(--500) / 0.1);
+}
+
+// Deeper burnt orange (#CC5812).
+.shade1 {
+  @extend %colourShades;
+  --hue: 45;
+  --l-base: 0.6;
+  --c-base: 0.164;
+  // Darker tile surface — cream reads better than dark here.
+  --tile-fg: var(--color100);
+}
+
+// Amber / warning-light gold (#E8A030).
+.shade2 {
+  @extend %colourShades;
+  --hue: 73;
+  --l-base: 0.73;
+  --c-base: 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;
+  --hue: 258;
+  --c-base: 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;
+  // Darker tile surface — cream reads better than dark here.
+  --tile-fg: var(--color100);
+}

package/style.css

@@ -71,7 +71,10 @@ body {
       width: 6rem;
       height: 3rem;
       box-sizing: border-box;
-      color: var(--color100);
+      /* Accent swatches (500-800) use the theme's on-accent ink: cream for the
+         dark-ramp themes (blue/green, via the fallback) and dark for jupiter-2,
+         whose accent ramp is light. */
+      color: var(--command-fg, var(--color100));
       border-bottom: 1px solid transparent;
 
       &:last-of-type {
@@ -80,6 +83,8 @@ body {
 
       &.color950 {
         background: var(--color950);
+        /* darkest swatch — always needs the light ink */
+        color: var(--color100);
       }
 
       &.color800 {
@@ -100,7 +105,8 @@ body {
 
       &.color100 {
         background: var(--color100);
-        color: var(--color800);
+        /* lightest swatch — always needs the dark ink (color800 is light in jupiter-2) */
+        color: var(--color950);
       }
     }
   }