ada-ui 6.1.0 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/css/ada.blue.css +1 -1
- package/css/ada.css +1 -1
- package/css/ada.green.css +1 -1
- package/css/ada.jupiter-2.css +1 -1
- package/index.html +65 -65
- package/package.json +1 -1
- package/scss/_ada.theme-base.scss +71 -8
- package/scss/ada.blue.scss +5 -31
- package/scss/ada.green.scss +9 -24
- package/scss/ada.jupiter-2.scss +31 -47
- package/scss/ada.scss +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# ada-ui
|
|
2
2
|
|
|
3
|
+
## 7.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- d9bb452: Reworked the colour system around an independent five-slot palette and a pure-CSS theming engine.
|
|
8
|
+
|
|
9
|
+
**Renamed the colour slots** (breaking — update your markup):
|
|
10
|
+
|
|
11
|
+
- `default` (the no-class default) → `primary`
|
|
12
|
+
- `shade1` / `shade2` / `shade3` → `tone-1` / `tone-2` / `tone-3`
|
|
13
|
+
- `warn` → unchanged
|
|
14
|
+
|
|
15
|
+
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`.
|
|
16
|
+
|
|
17
|
+
**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:
|
|
18
|
+
|
|
19
|
+
- 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.
|
|
20
|
+
- A _curated_ theme additionally overrides `--hue` / `--lightness` / `--chroma` per slot and the `--100` / `--950` ends. **jupiter-2** is authored this way.
|
|
21
|
+
|
|
22
|
+
**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).
|
|
23
|
+
|
|
3
24
|
## 6.1.0
|
|
4
25
|
|
|
5
26
|
### Minor Changes
|
package/css/ada.blue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:root{--base-hue: 246;--lightness: 0.3;--chroma: 0.1;--lightness-light-shift: 0.1}
|
package/css/ada.css
CHANGED
|
@@ -1 +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)}}
|
|
1
|
+
: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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
: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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
: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
CHANGED
|
@@ -27,23 +27,23 @@
|
|
|
27
27
|
<div class="spacer"></div>
|
|
28
28
|
<a
|
|
29
29
|
href="#typography"
|
|
30
|
-
class="command
|
|
30
|
+
class="command tone-1"
|
|
31
31
|
data-label="Typography"
|
|
32
32
|
data-abbr="Typo"
|
|
33
33
|
></a>
|
|
34
|
-
<a href="#padding" class="command
|
|
35
|
-
<a href="#spacing" class="command
|
|
36
|
-
<a href="#colors" class="command
|
|
37
|
-
<a href="#scaling" class="command
|
|
38
|
-
<a href="#page-layout" class="command
|
|
34
|
+
<a href="#padding" class="command tone-1">Padding</a>
|
|
35
|
+
<a href="#spacing" class="command tone-1">Spacing</a>
|
|
36
|
+
<a href="#colors" class="command tone-1">Colors</a>
|
|
37
|
+
<a href="#scaling" class="command tone-2">Scaling</a>
|
|
38
|
+
<a href="#page-layout" class="command tone-1">Page Layout</a>
|
|
39
39
|
<a
|
|
40
40
|
href="#command"
|
|
41
|
-
class="command
|
|
41
|
+
class="command tone-3"
|
|
42
42
|
data-label="Command"
|
|
43
43
|
data-abbr="Cmd"
|
|
44
44
|
></a>
|
|
45
|
-
<a href="#panel" class="command
|
|
46
|
-
<a href="#tile" class="command
|
|
45
|
+
<a href="#panel" class="command tone-2">Panel</a>
|
|
46
|
+
<a href="#tile" class="command tone-2">Tile</a>
|
|
47
47
|
<a href="#input" class="command">Input</a>
|
|
48
48
|
<a href="#spinner" class="command">Spinner</a>
|
|
49
49
|
<div class="spacer flex"></div>
|
|
@@ -114,16 +114,16 @@
|
|
|
114
114
|
<article class="padding">
|
|
115
115
|
<code>--padding-xs</code>
|
|
116
116
|
<span>0.15rem</span>
|
|
117
|
-
<div class="padding-box xs
|
|
117
|
+
<div class="padding-box xs tone-2"></div>
|
|
118
118
|
<code>--padding-sm</code>
|
|
119
119
|
<span>0.4rem</span>
|
|
120
|
-
<div class="padding-box sm
|
|
120
|
+
<div class="padding-box sm tone-2"></div>
|
|
121
121
|
<code>--padding</code>
|
|
122
122
|
<span>0.75rem</span>
|
|
123
|
-
<div class="padding-box
|
|
123
|
+
<div class="padding-box tone-2"></div>
|
|
124
124
|
<code>--padding-lg</code>
|
|
125
125
|
<span>1rem</span>
|
|
126
|
-
<div class="padding-box lg
|
|
126
|
+
<div class="padding-box lg tone-2"></div>
|
|
127
127
|
<p>→ Paddings are responsive (in rem).</p>
|
|
128
128
|
<p>
|
|
129
129
|
Usage: paddings, anything which should grow/shrink with the root
|
|
@@ -137,16 +137,16 @@
|
|
|
137
137
|
<article class="spacing">
|
|
138
138
|
<code>--spacing-xs</code>
|
|
139
139
|
<span>2px</span>
|
|
140
|
-
<div class="spacing-box xs
|
|
140
|
+
<div class="spacing-box xs tone-3"></div>
|
|
141
141
|
<code>--spacing-sm</code>
|
|
142
142
|
<span>6px</span>
|
|
143
|
-
<div class="spacing-box sm
|
|
143
|
+
<div class="spacing-box sm tone-3"></div>
|
|
144
144
|
<code>--spacing</code>
|
|
145
145
|
<span>10px</span>
|
|
146
|
-
<div class="spacing-box
|
|
146
|
+
<div class="spacing-box tone-3"></div>
|
|
147
147
|
<code>--spacing-lg</code>
|
|
148
148
|
<span>14px</span>
|
|
149
|
-
<div class="spacing-box lg
|
|
149
|
+
<div class="spacing-box lg tone-3"></div>
|
|
150
150
|
<p>→ Spacings are not responsive (in px).</p>
|
|
151
151
|
<p>
|
|
152
152
|
Usage: spacings, gaps, anything which should be stable regardless
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
<article style="display: grid; gap: var(--spacing)">
|
|
161
161
|
<div class="colors">
|
|
162
162
|
<div class="color-shades">
|
|
163
|
-
<h4>
|
|
163
|
+
<h4>Primary</h4>
|
|
164
164
|
<div class="color100">100</div>
|
|
165
165
|
<div class="color500">500</div>
|
|
166
166
|
<div class="color600">600</div>
|
|
@@ -169,31 +169,31 @@
|
|
|
169
169
|
<div class="color950">950</div>
|
|
170
170
|
</div>
|
|
171
171
|
<div class="color-shades">
|
|
172
|
-
<h4>
|
|
173
|
-
<div class="color100
|
|
174
|
-
<div class="color500
|
|
175
|
-
<div class="color600
|
|
176
|
-
<div class="color700
|
|
177
|
-
<div class="color800
|
|
178
|
-
<div class="color950
|
|
172
|
+
<h4>Tone 1</h4>
|
|
173
|
+
<div class="color100 tone-1">100</div>
|
|
174
|
+
<div class="color500 tone-1">500</div>
|
|
175
|
+
<div class="color600 tone-1">600</div>
|
|
176
|
+
<div class="color700 tone-1">700</div>
|
|
177
|
+
<div class="color800 tone-1">800</div>
|
|
178
|
+
<div class="color950 tone-1">950</div>
|
|
179
179
|
</div>
|
|
180
180
|
<div class="color-shades">
|
|
181
|
-
<h4>
|
|
182
|
-
<div class="color100
|
|
183
|
-
<div class="color500
|
|
184
|
-
<div class="color600
|
|
185
|
-
<div class="color700
|
|
186
|
-
<div class="color800
|
|
187
|
-
<div class="color950
|
|
181
|
+
<h4>Tone 2</h4>
|
|
182
|
+
<div class="color100 tone-2">100</div>
|
|
183
|
+
<div class="color500 tone-2">500</div>
|
|
184
|
+
<div class="color600 tone-2">600</div>
|
|
185
|
+
<div class="color700 tone-2">700</div>
|
|
186
|
+
<div class="color800 tone-2">800</div>
|
|
187
|
+
<div class="color950 tone-2">950</div>
|
|
188
188
|
</div>
|
|
189
189
|
<div class="color-shades">
|
|
190
|
-
<h4>
|
|
191
|
-
<div class="color100
|
|
192
|
-
<div class="color500
|
|
193
|
-
<div class="color600
|
|
194
|
-
<div class="color700
|
|
195
|
-
<div class="color800
|
|
196
|
-
<div class="color950
|
|
190
|
+
<h4>Tone 3</h4>
|
|
191
|
+
<div class="color100 tone-3">100</div>
|
|
192
|
+
<div class="color500 tone-3">500</div>
|
|
193
|
+
<div class="color600 tone-3">600</div>
|
|
194
|
+
<div class="color700 tone-3">700</div>
|
|
195
|
+
<div class="color800 tone-3">800</div>
|
|
196
|
+
<div class="color950 tone-3">950</div>
|
|
197
197
|
</div>
|
|
198
198
|
<div class="color-shades">
|
|
199
199
|
<h4>Warn</h4>
|
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
every responsive token (sizes, paddings, font-size) is scaled in
|
|
233
233
|
this scope. See the scaled tile as an example:
|
|
234
234
|
</p>
|
|
235
|
-
<div class="tile scaled
|
|
235
|
+
<div class="tile scaled tone-2" style="--scale: 1.5">
|
|
236
236
|
<header></header>
|
|
237
237
|
<article>Scaled Tile (factor 1.5)</article>
|
|
238
238
|
<footer></footer>
|
|
@@ -269,32 +269,32 @@
|
|
|
269
269
|
>
|
|
270
270
|
<div class="row">
|
|
271
271
|
<button class="command">Command</button>
|
|
272
|
-
<button class="command
|
|
273
|
-
<button class="command
|
|
274
|
-
<button class="command
|
|
272
|
+
<button class="command tone-1">Command</button>
|
|
273
|
+
<button class="command tone-2">Command</button>
|
|
274
|
+
<button class="command tone-3">Command</button>
|
|
275
275
|
<button class="command warn">Command</button>
|
|
276
276
|
</div>
|
|
277
277
|
<h3>Outline</h3>
|
|
278
278
|
<div class="row">
|
|
279
279
|
<button class="command outline">Command</button>
|
|
280
|
-
<button class="command outline
|
|
281
|
-
<button class="command outline
|
|
282
|
-
<button class="command outline
|
|
280
|
+
<button class="command outline tone-1">Command</button>
|
|
281
|
+
<button class="command outline tone-2">Command</button>
|
|
282
|
+
<button class="command outline tone-3">Command</button>
|
|
283
283
|
<button class="command outline warn">Command</button>
|
|
284
284
|
</div>
|
|
285
285
|
<h3>Flashing</h3>
|
|
286
286
|
<div class="row">
|
|
287
287
|
<button class="command flash">Command</button>
|
|
288
|
-
<button class="command flash
|
|
289
|
-
<button class="command flash
|
|
290
|
-
<button class="command flash
|
|
288
|
+
<button class="command flash tone-1">Command</button>
|
|
289
|
+
<button class="command flash tone-2">Command</button>
|
|
290
|
+
<button class="command flash tone-3">Command</button>
|
|
291
291
|
<button class="command flash warn">Command</button>
|
|
292
292
|
</div>
|
|
293
293
|
<div class="row">
|
|
294
294
|
<button class="command flash outline">Command</button>
|
|
295
|
-
<button class="command flash outline
|
|
296
|
-
<button class="command flash outline
|
|
297
|
-
<button class="command flash outline
|
|
295
|
+
<button class="command flash outline tone-1">Command</button>
|
|
296
|
+
<button class="command flash outline tone-2">Command</button>
|
|
297
|
+
<button class="command flash outline tone-3">Command</button>
|
|
298
298
|
<button class="command flash outline warn">Command</button>
|
|
299
299
|
</div>
|
|
300
300
|
<h3>Disabled</h3>
|
|
@@ -386,7 +386,7 @@
|
|
|
386
386
|
<footer>Footer</footer>
|
|
387
387
|
</div>
|
|
388
388
|
<h3>With another color variant</h3>
|
|
389
|
-
<div class="panel
|
|
389
|
+
<div class="panel tone-3">
|
|
390
390
|
<header>Header</header>
|
|
391
391
|
<article>Content</article>
|
|
392
392
|
<footer>Footer</footer>
|
|
@@ -430,17 +430,17 @@
|
|
|
430
430
|
<article>Tile Content</article>
|
|
431
431
|
<footer></footer>
|
|
432
432
|
</div>
|
|
433
|
-
<div class="tile
|
|
433
|
+
<div class="tile tone-1">
|
|
434
434
|
<header></header>
|
|
435
435
|
<article>Tile Content</article>
|
|
436
436
|
<footer></footer>
|
|
437
437
|
</div>
|
|
438
|
-
<div class="tile
|
|
438
|
+
<div class="tile tone-2">
|
|
439
439
|
<header></header>
|
|
440
440
|
<article>Tile Content</article>
|
|
441
441
|
<footer></footer>
|
|
442
442
|
</div>
|
|
443
|
-
<div class="tile
|
|
443
|
+
<div class="tile tone-3">
|
|
444
444
|
<header></header>
|
|
445
445
|
<article>Tile Content</article>
|
|
446
446
|
<footer></footer>
|
|
@@ -468,21 +468,21 @@
|
|
|
468
468
|
<div>
|
|
469
469
|
<h3>80px</h3>
|
|
470
470
|
<div class="spinner" style="font-size: 80px"></div>
|
|
471
|
-
<div class="spinner
|
|
472
|
-
<div class="spinner
|
|
473
|
-
<div class="spinner
|
|
471
|
+
<div class="spinner tone-1" style="font-size: 80px"></div>
|
|
472
|
+
<div class="spinner tone-2" style="font-size: 80px"></div>
|
|
473
|
+
<div class="spinner tone-3" style="font-size: 80px"></div>
|
|
474
474
|
<div class="spinner warn" style="font-size: 80px"></div>
|
|
475
475
|
<h3>32px</h3>
|
|
476
476
|
<div class="spinner" style="font-size: 32px"></div>
|
|
477
|
-
<div class="spinner
|
|
478
|
-
<div class="spinner
|
|
479
|
-
<div class="spinner
|
|
477
|
+
<div class="spinner tone-1" style="font-size: 32px"></div>
|
|
478
|
+
<div class="spinner tone-2" style="font-size: 32px"></div>
|
|
479
|
+
<div class="spinner tone-3" style="font-size: 32px"></div>
|
|
480
480
|
<div class="spinner warn" style="font-size: 32px"></div>
|
|
481
481
|
<h3>16px</h3>
|
|
482
482
|
<div class="spinner" style="font-size: 16px"></div>
|
|
483
|
-
<div class="spinner
|
|
484
|
-
<div class="spinner
|
|
485
|
-
<div class="spinner
|
|
483
|
+
<div class="spinner tone-1" style="font-size: 16px"></div>
|
|
484
|
+
<div class="spinner tone-2" style="font-size: 16px"></div>
|
|
485
|
+
<div class="spinner tone-3" style="font-size: 16px"></div>
|
|
486
486
|
<div class="spinner warn" style="font-size: 16px"></div>
|
|
487
487
|
</div>
|
|
488
488
|
</article>
|
package/package.json
CHANGED
|
@@ -1,4 +1,58 @@
|
|
|
1
|
-
|
|
1
|
+
// Colour engine. Lives in the base stylesheet (ada.css) so a theme is just
|
|
2
|
+
// custom properties on :root — no SCSS, no @extend needed:
|
|
3
|
+
//
|
|
4
|
+
// ramp theme -> set --base-hue (+ --lightness / --chroma). The four tones
|
|
5
|
+
// derive from --base-hue by a per-slot offset; warn is fixed.
|
|
6
|
+
// curated theme -> additionally override --hue / --lightness / --chroma per
|
|
7
|
+
// slot, and the --100 / --950 ends to decouple bg/text.
|
|
8
|
+
//
|
|
9
|
+
// The five slots (primary + tone-1..3 + warn) are an INDEPENDENT palette, not
|
|
10
|
+
// shades of one colour. The 100..950 ladder below is the light->dark ramp WITHIN
|
|
11
|
+
// a single slot.
|
|
12
|
+
|
|
13
|
+
// --- per-slot hue ------------------------------------------------------------
|
|
14
|
+
// --base-hue is the theme's anchor: primary uses it, and the tones offset from
|
|
15
|
+
// it by default (an even ramp — the blue theme lands exactly on these, so it
|
|
16
|
+
// sets nothing but --base-hue). Override any individual slot by setting --hue on
|
|
17
|
+
// its class, the same way --lightness / --chroma are overridden per slot. warn
|
|
18
|
+
// sits off the ramp at a fixed red. :root mirrors primary so no-class elements
|
|
19
|
+
// (body, plain commands) read as the primary colour.
|
|
20
|
+
//
|
|
21
|
+
// Why --base-hue is the only "base"-prefixed input: hue is the one value
|
|
22
|
+
// derived per slot (tone = base - N), so its anchor must be a SEPARATE variable
|
|
23
|
+
// from the per-slot --hue the ladder consumes — `--hue: calc(var(--hue) - 26)`
|
|
24
|
+
// would be a self-referential cycle (invalid CSS). Lightness/chroma aren't
|
|
25
|
+
// derived, so a single --lightness / --chroma is both the theme default and a
|
|
26
|
+
// per-slot override via the cascade; no separate anchor is needed.
|
|
27
|
+
:root,
|
|
28
|
+
.primary {
|
|
29
|
+
--hue: var(--base-hue);
|
|
30
|
+
}
|
|
31
|
+
.tone-1 {
|
|
32
|
+
--hue: calc(var(--base-hue) - 26);
|
|
33
|
+
}
|
|
34
|
+
.tone-2 {
|
|
35
|
+
--hue: calc(var(--base-hue) - 51);
|
|
36
|
+
}
|
|
37
|
+
.tone-3 {
|
|
38
|
+
--hue: calc(var(--base-hue) - 76);
|
|
39
|
+
}
|
|
40
|
+
.warn {
|
|
41
|
+
--hue: 29;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// --- the shade ladder within one slot ----------------------------------------
|
|
45
|
+
%ladder {
|
|
46
|
+
// The ladder reads --lightness-resolved / --chroma-resolved so the light theme can
|
|
47
|
+
// shift them without clobbering a slot's own --lightness/--chroma. In light
|
|
48
|
+
// mode every slot keeps its own value plus a per-theme shift, so per-slot
|
|
49
|
+
// overrides survive (they used to be silently dropped in light mode).
|
|
50
|
+
// The shift is itself a cascade input: set --lightness-light-shift on a slot to
|
|
51
|
+
// lift it more/less than the theme-wide value — it REPLACES the :root shift for
|
|
52
|
+
// that slot (it does not stack on it).
|
|
53
|
+
--lightness-resolved: var(--lightness);
|
|
54
|
+
--chroma-resolved: var(--chroma);
|
|
55
|
+
|
|
2
56
|
--bg-body: var(--color950);
|
|
3
57
|
--fg-body: var(--color100);
|
|
4
58
|
|
|
@@ -7,22 +61,22 @@
|
|
|
7
61
|
|
|
8
62
|
&.light-theme,
|
|
9
63
|
:root.light-theme & {
|
|
10
|
-
--
|
|
11
|
-
--
|
|
64
|
+
--lightness-resolved: calc(var(--lightness) + var(--lightness-light-shift, 0));
|
|
65
|
+
--chroma-resolved: calc(var(--chroma) + var(--chroma-light-shift, 0));
|
|
12
66
|
--bg-body: var(--bg-body-light);
|
|
13
67
|
--fg-body: var(--fg-body-light);
|
|
14
68
|
}
|
|
15
69
|
|
|
16
70
|
// Panel surface colour. Lives here (not on :root in each theme) so var(--500)
|
|
17
|
-
// resolves per
|
|
71
|
+
// resolves per slot — that keeps `.panel.tone-N` tinting its own surface.
|
|
18
72
|
// Themes can override it (e.g. jupiter-2 sets a flat navy for the base panel).
|
|
19
73
|
--panel-bg: oklch(var(--500) / 0.1);
|
|
20
74
|
|
|
21
75
|
--100: 0.91 0.05 var(--hue);
|
|
22
|
-
--500: calc(var(--
|
|
23
|
-
--600: calc(var(--
|
|
24
|
-
--700: calc(var(--
|
|
25
|
-
--800: var(--
|
|
76
|
+
--500: calc(var(--lightness-resolved) + 0.15) calc(var(--chroma-resolved) + 0.06) var(--hue);
|
|
77
|
+
--600: calc(var(--lightness-resolved) + 0.1) calc(var(--chroma-resolved) + 0.04) var(--hue);
|
|
78
|
+
--700: calc(var(--lightness-resolved) + 0.05) calc(var(--chroma-resolved) + 0.02) var(--hue);
|
|
79
|
+
--800: var(--lightness-resolved) var(--chroma-resolved) var(--hue);
|
|
26
80
|
--950: 0.18 0.03 var(--hue);
|
|
27
81
|
|
|
28
82
|
--color100: oklch(var(--100));
|
|
@@ -32,3 +86,12 @@
|
|
|
32
86
|
--color800: oklch(var(--800));
|
|
33
87
|
--color950: oklch(var(--950));
|
|
34
88
|
}
|
|
89
|
+
|
|
90
|
+
:root,
|
|
91
|
+
.primary,
|
|
92
|
+
.tone-1,
|
|
93
|
+
.tone-2,
|
|
94
|
+
.tone-3,
|
|
95
|
+
.warn {
|
|
96
|
+
@extend %ladder;
|
|
97
|
+
}
|
package/scss/ada.blue.scss
CHANGED
|
@@ -1,35 +1,9 @@
|
|
|
1
|
-
@import "ada.theme-base";
|
|
2
|
-
|
|
3
1
|
:root {
|
|
4
|
-
|
|
5
|
-
--l-base: 0.3;
|
|
6
|
-
--c-base: 0.1;
|
|
7
|
-
|
|
8
|
-
--l-base-light: 0.4;
|
|
9
|
-
--c-base-light: 0.1;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.default {
|
|
13
|
-
@extend %colourShades;
|
|
14
|
-
--hue: 246;
|
|
15
|
-
}
|
|
2
|
+
--base-hue: 246;
|
|
16
3
|
|
|
17
|
-
.
|
|
18
|
-
|
|
19
|
-
--hue: 220;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.shade2 {
|
|
23
|
-
@extend %colourShades;
|
|
24
|
-
--hue: 195;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.shade3 {
|
|
28
|
-
@extend %colourShades;
|
|
29
|
-
--hue: 170;
|
|
30
|
-
}
|
|
4
|
+
--lightness: 0.3;
|
|
5
|
+
--chroma: 0.1;
|
|
31
6
|
|
|
32
|
-
.
|
|
33
|
-
|
|
34
|
-
--hue: 29;
|
|
7
|
+
// Light theme: lift lightness, keep chroma (0.3 -> 0.4).
|
|
8
|
+
--lightness-light-shift: 0.1;
|
|
35
9
|
}
|
package/scss/ada.green.scss
CHANGED
|
@@ -1,35 +1,20 @@
|
|
|
1
|
-
@import "ada.theme-base";
|
|
2
|
-
|
|
3
1
|
:root {
|
|
4
|
-
|
|
5
|
-
--l-base: 0.35;
|
|
6
|
-
--c-base: 0.1;
|
|
2
|
+
--base-hue: 132;
|
|
7
3
|
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
}
|
|
4
|
+
--lightness: 0.35;
|
|
5
|
+
--chroma: 0.1;
|
|
11
6
|
|
|
12
|
-
.
|
|
13
|
-
|
|
14
|
-
--
|
|
7
|
+
// Light theme: lift lightness and chroma (0.35 -> 0.45, 0.1 -> 0.15).
|
|
8
|
+
--lightness-light-shift: 0.1;
|
|
9
|
+
--chroma-light-shift: 0.05;
|
|
15
10
|
}
|
|
16
11
|
|
|
17
|
-
.
|
|
18
|
-
@extend %colourShades;
|
|
12
|
+
.tone-1 {
|
|
19
13
|
--hue: 121;
|
|
20
14
|
}
|
|
21
|
-
|
|
22
|
-
.shade2 {
|
|
23
|
-
@extend %colourShades;
|
|
15
|
+
.tone-2 {
|
|
24
16
|
--hue: 164;
|
|
25
17
|
}
|
|
26
|
-
|
|
27
|
-
.shade3 {
|
|
28
|
-
@extend %colourShades;
|
|
18
|
+
.tone-3 {
|
|
29
19
|
--hue: 185;
|
|
30
20
|
}
|
|
31
|
-
|
|
32
|
-
.warn {
|
|
33
|
-
@extend %colourShades;
|
|
34
|
-
--hue: 29;
|
|
35
|
-
}
|
package/scss/ada.jupiter-2.scss
CHANGED
|
@@ -1,28 +1,31 @@
|
|
|
1
|
-
@import "ada.theme-base";
|
|
2
|
-
|
|
3
1
|
// "Jupiter 2" — a deep-space palette: navy hull + vivid warning-orange + cream.
|
|
4
2
|
//
|
|
5
|
-
//
|
|
6
|
-
//
|
|
7
|
-
//
|
|
8
|
-
//
|
|
9
|
-
// navy (~60%) + orange accents & trim (~30%) + cream text (~10%).
|
|
3
|
+
// A CURATED theme (not a hue ramp): each slot sets its own LCH rather than
|
|
4
|
+
// deriving from --base-hue. The page reads as the full palette — navy (~60%) +
|
|
5
|
+
// orange accents & trim (~30%) + cream text (~10%) — by overriding the primary's
|
|
6
|
+
// dark/light ends to navy and cream. (Requires ada.css for the engine.)
|
|
10
7
|
//
|
|
11
8
|
// Lightness matters: the orange is oklch(0.69 0.179 49). At L≈0.38 orange renders
|
|
12
|
-
// as brown/red, so --
|
|
9
|
+
// as brown/red, so --lightness sits at 0.69 to land a true orange on --color800.
|
|
13
10
|
:root {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--
|
|
18
|
-
|
|
11
|
+
// Primary accent lands a vivid orange (#F07214) exactly on --color800.
|
|
12
|
+
--base-hue: 49;
|
|
13
|
+
--lightness: 0.69;
|
|
14
|
+
--chroma: 0.179;
|
|
15
|
+
// No light-theme shift: the orange stays put, and every tone keeps its own
|
|
16
|
+
// lightness/chroma in light mode (previously the absolute light values
|
|
17
|
+
// silently flattened burnt/steel/warn to the primary's lightness).
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
// Decouple the primary bg/fg from the orange hue (overrides the ladder's
|
|
20
|
+
// single-hue ends): deep navy surface + warm cream text.
|
|
21
|
+
--950: 0.21 0.055 270; // dominant surface (~#0F1631)
|
|
22
|
+
--100: 0.947 0.007 81; // body + button text (#F0EDE8)
|
|
23
|
+
// Light theme would otherwise put orange (color800) text on cream — force navy.
|
|
24
|
+
--fg-body-light: var(--color950);
|
|
22
25
|
|
|
23
26
|
// Base panel surface is a flat mid navy (#263660) instead of the orange accent
|
|
24
27
|
// wash, so the orange corner-trim reads as trim rather than blending in.
|
|
25
|
-
// Variant panels (.panel.
|
|
28
|
+
// Variant panels (.panel.tone-N) keep their per-tone tint (from the ladder).
|
|
26
29
|
--panel-bg: oklch(0.3 0.052 268 / 0.5);
|
|
27
30
|
|
|
28
31
|
// Dark label colour for text on the light accent surfaces. The accent
|
|
@@ -30,30 +33,15 @@
|
|
|
30
33
|
// Pure black clears WCAG AA on every button shade (orange 7.1, amber 8.6,
|
|
31
34
|
// steel 7.6, burnt 5.0, warn 5.3) and on the lighter tiles too (it needs to be
|
|
32
35
|
// this dark to clear the mid-tone 75% orange tile at 4.55). Set on :root so all
|
|
33
|
-
// buttons inherit it uniformly (no
|
|
36
|
+
// buttons inherit it uniformly (no slot re-sets it).
|
|
34
37
|
--command-fg: oklch(0 0 0);
|
|
35
38
|
|
|
36
39
|
// Tile labels: tiles are color800 at 75% over navy, i.e. mid-tone. Adaptive
|
|
37
|
-
// contrast — dark text on the lighter tiles (
|
|
40
|
+
// contrast — dark text on the lighter tiles (primary/amber/steel inherit this);
|
|
38
41
|
// the darker burnt/warn tiles flip back to cream below.
|
|
39
42
|
--tile-fg: var(--command-fg);
|
|
40
43
|
}
|
|
41
44
|
|
|
42
|
-
// Vivid orange — primary accent: buttons (800), trim/corners (700),
|
|
43
|
-
// input border (600), active/focus glow (500). 700/600/500 clamp to vivid
|
|
44
|
-
// pure orange, which reads like panel lighting / warning indicators.
|
|
45
|
-
.default {
|
|
46
|
-
@extend %colourShades;
|
|
47
|
-
--hue: 49;
|
|
48
|
-
|
|
49
|
-
// Decouple bg/fg from the orange hue (overrides %colourShades' single-hue ends):
|
|
50
|
-
--950: 0.21 0.055 270; // deep navy — dominant surface (~#0F1631)
|
|
51
|
-
--100: 0.947 0.007 81; // warm cream — body + button text (#F0EDE8)
|
|
52
|
-
|
|
53
|
-
// Light theme would otherwise put orange (color800) text on cream — force navy.
|
|
54
|
-
--fg-body-light: var(--color950);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
45
|
// In light theme a translucent navy over cream looks muddy — restore the
|
|
58
46
|
// standard warm wash so the light base panel looks as it would by default.
|
|
59
47
|
:root.light-theme {
|
|
@@ -61,39 +49,35 @@
|
|
|
61
49
|
}
|
|
62
50
|
|
|
63
51
|
// Deeper burnt orange (#CC5812).
|
|
64
|
-
.
|
|
65
|
-
@extend %colourShades;
|
|
52
|
+
.tone-1 {
|
|
66
53
|
--hue: 45;
|
|
67
|
-
--
|
|
68
|
-
--
|
|
54
|
+
--lightness: 0.6;
|
|
55
|
+
--chroma: 0.164;
|
|
69
56
|
// Darker tile surface — cream reads better than dark here.
|
|
70
57
|
--tile-fg: var(--color100);
|
|
71
58
|
}
|
|
72
59
|
|
|
73
60
|
// Amber / warning-light gold (#E8A030).
|
|
74
|
-
.
|
|
75
|
-
@extend %colourShades;
|
|
61
|
+
.tone-2 {
|
|
76
62
|
--hue: 73;
|
|
77
|
-
--
|
|
78
|
-
--
|
|
63
|
+
--lightness: 0.73;
|
|
64
|
+
--chroma: 0.16;
|
|
79
65
|
}
|
|
80
66
|
|
|
81
67
|
// Steel blue-gray — the cool counterpoint that keeps the UI from going
|
|
82
68
|
// all-orange. Lower chroma so it reads as steel, not a loud cornflower (#859DC1).
|
|
83
|
-
.
|
|
84
|
-
@extend %colourShades;
|
|
69
|
+
.tone-3 {
|
|
85
70
|
--hue: 258;
|
|
86
|
-
--
|
|
71
|
+
--chroma: 0.06;
|
|
87
72
|
}
|
|
88
73
|
|
|
89
74
|
// Danger red — kept clearly distinct from the orange accent. Lightened to L0.62
|
|
90
75
|
// (#DE4F44) so the dark --command-fg label clears WCAG AA on warn buttons (the
|
|
91
76
|
// old L0.58 red was a mid-tone where no text colour reached 4.5:1).
|
|
92
77
|
.warn {
|
|
93
|
-
@extend %colourShades;
|
|
94
78
|
--hue: 28;
|
|
95
|
-
--
|
|
96
|
-
--
|
|
79
|
+
--lightness: 0.62;
|
|
80
|
+
--chroma: 0.18;
|
|
97
81
|
// Darker tile surface — cream reads better than dark here.
|
|
98
82
|
--tile-fg: var(--color100);
|
|
99
83
|
}
|
package/scss/ada.scss
CHANGED