ada-ui 7.2.2 → 7.3.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +6 -6
  3. package/css/ada.css +1 -1
  4. package/css/ada.green.css +1 -1
  5. package/css/ada.jupiter-2.css +1 -1
  6. package/index.html +20 -1
  7. package/package.json +1 -1
  8. package/scss/_ada.theme-base.scss +9 -2
  9. package/scss/_global.scss +0 -1
  10. package/scss/ada.green.scss +5 -0
  11. package/scss/ada.jupiter-2.scss +8 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # ada-ui
2
2
 
3
+ ## 7.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6453ee9: Added a fifth colour slot `tone-4`. On the hue ramp it derives as
8
+ `--base-hue - 130` (a double step, since continuing the ramp's -25° spacing
9
+ would land next to tone-3); the curated themes got hand-picked values: blue in
10
+ green (hue 230) and a muted verdigris sea-green in jupiter-2 (hue 178).
11
+
12
+ ## 7.2.3
13
+
14
+ ### Patch Changes
15
+
16
+ - 669b37f: Revert the background color on the html element (introduced in 7.2.2). Backgrounding html stops the body background from propagating to the document canvas, so body then paints in its own layer — over any `z-index: -1` element (e.g. a fixed canvas backdrop), hiding it completely. With body-only background the propagation covers the viewport (including overscroll) and negative-z layers stay visible.
17
+
3
18
  ## 7.2.2
4
19
 
5
20
  ### Patch Changes
package/README.md CHANGED
@@ -6,7 +6,7 @@ My sci-fi inspired UI components library. Still growing...
6
6
 
7
7
  ## CDN
8
8
 
9
- https://cdn.jsdelivr.net/gh/tklepzig/Ada@7.2.2/css/ada.css
9
+ https://cdn.jsdelivr.net/gh/tklepzig/Ada@7.3.0/css/ada.css
10
10
 
11
11
  The link points at the latest release. To pin a different one, swap the version
12
12
  — see https://github.com/tklepzig/Ada/releases.
@@ -30,8 +30,8 @@ a theme alongside it. A theme is just a handful of custom properties on `:root`
30
30
 
31
31
  Or via the CDN:
32
32
 
33
- https://cdn.jsdelivr.net/gh/tklepzig/Ada@7.2.2/css/ada.css
34
- https://cdn.jsdelivr.net/gh/tklepzig/Ada@7.2.2/css/ada.blue.css
33
+ https://cdn.jsdelivr.net/gh/tklepzig/Ada@7.3.0/css/ada.css
34
+ https://cdn.jsdelivr.net/gh/tklepzig/Ada@7.3.0/css/ada.blue.css
35
35
 
36
36
  With npm, import the base entry first and the theme second (same cascade rule
37
37
  through your bundler):
@@ -49,8 +49,8 @@ through your bundler):
49
49
 
50
50
  ### The colour slots
51
51
 
52
- The palette is five independent slots, each applied via a class: `primary` (the
53
- no-class default), `tone-1`, `tone-2`, `tone-3`, and `warn`. They are treated as
52
+ The palette is six independent slots, each applied via a class: `primary` (the
53
+ no-class default), `tone-1` … `tone-4`, and `warn`. They are treated as
54
54
  distinct colours, not shades of one. Within a slot, a light→dark `--color100` …
55
55
  `--color950` ladder is derived for you.
56
56
 
@@ -62,7 +62,7 @@ element (e.g. `<html class="light-theme">`).
62
62
  A custom theme is a small CSS file that sets `:root` properties. There are three
63
63
  levels, from least to most control:
64
64
 
65
- 1. **Hue ramp** — set `--base-hue`, `--lightness` and `--chroma`. The four tones
65
+ 1. **Hue ramp** — set `--base-hue`, `--lightness` and `--chroma`. The five tones
66
66
  derive from the base hue by a fixed per-slot offset; `warn` stays at its
67
67
  fixed red. The blue theme lands exactly on the default offsets, so it is
68
68
  just:
package/css/ada.css CHANGED
@@ -1 +1 @@
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)}.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)}:root,.primary,.tone-1,.tone-2,.tone-3,.warn{--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))}*,::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:rgba(0,0,0,0)}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:rgba(0,0,0,0);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;--font-weight-light: 300;--font-weight: 400;--font-weight-bold: 600;--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));--command-min-size-thin: calc(2rem * var(--scale, 1));--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:rgba(0,0,0,0)}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:rgba(0,0,0,0);border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}.panel-commands>.spacer,.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:var(--spacer-min-size);min-height:var(--spacer-min-size)}.panel-commands>.outline.spacer,.compound-commands>.outline.spacer{background-color:rgba(0,0,0,0);border:var(--border-width) solid var(--color700)}.panel-commands>.command:first-child,.panel-commands .spacer:first-child,.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.panel-commands>.command:not(:first-child):not(:last-child),.panel-commands .spacer:not(:first-child):not(:last-child),.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.panel-commands>.command:last-child,.panel-commands .spacer:last-child,.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}html{font-family:var(--font-family);font-weight:var(--font-weight);font-size:var(--font-size);background:var(--bg-body)}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:var(--font-weight-light);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:rgba(0,0,0,0);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-weight:var(--font-weight);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.thin{min-height:var(--command-min-size-thin);min-width:var(--command-min-size-thin)}.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:rgba(0,0,0,0);border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:rgba(0,0,0,0);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}@keyframes flash-background{50%{background-color:var(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.flex{flex:1}.compound-commands>.text{font-size:var(--text-3xl);line-height:var(--text-3xl);align-self:center;padding:var(--padding-xs)}.compound-commands.thin>.command{min-height:var(--command-min-size-thin);min-width:var(--command-min-size-thin)}.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)}.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:rgba(0,0,0,0);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)}.panel-commands{display:flex;align-items:stretch;gap:var(--spacing-sm);min-height:var(--command-min-size-thin)}.panel-commands>.command{min-width:var(--command-min-size-thin);min-height:var(--command-min-size-thin)}.panel-commands>.flex{flex:1}.panel>header:has(>.panel-commands),.tile>header:has(>.panel-commands),.panel>footer:has(>.panel-commands),.tile>footer:has(>.panel-commands){padding:0;z-index:2}.panel>header:has(>.panel-commands)::before,.tile>header:has(>.panel-commands)::before,.panel>header:has(>.panel-commands)::after,.tile>header:has(>.panel-commands)::after,.panel>footer:has(>.panel-commands)::before,.tile>footer:has(>.panel-commands)::before,.panel>footer:has(>.panel-commands)::after,.tile>footer:has(>.panel-commands)::after{display:none}.panel>footer:has(>.panel-commands),.tile>footer:has(>.panel-commands){padding-top:var(--padding-sm)}.panel>header:has(>.panel-commands),.tile>header:has(>.panel-commands){padding-bottom:var(--padding-sm)}.panel>footer>.panel-commands>:first-child,.tile>footer>.panel-commands>:first-child{border-radius:0 0 0 var(--border-radius)}.panel>footer>.panel-commands>:last-child,.tile>footer>.panel-commands>:last-child{border-radius:0 0 var(--border-radius) 0}.panel>header>.panel-commands>:first-child,.tile>header>.panel-commands>:first-child{border-radius:var(--border-radius) 0 0 0}.panel>header>.panel-commands>:last-child,.tile>header>.panel-commands>:last-child{border-radius:0 var(--border-radius) 0 0}.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) rgba(0,0,0,0);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:rgba(0,0,0,0) 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)}.tone-4{--hue: calc(var(--base-hue) - 130)}.warn{--hue: 29}:root,.primary,.tone-1,.tone-2,.tone-3,.tone-4,.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)}.light-theme:root,.light-theme.primary,.light-theme.tone-1,.light-theme.tone-2,.light-theme.tone-3,.light-theme.tone-4,.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 .tone-4,: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)}:root,.primary,.tone-1,.tone-2,.tone-3,.tone-4,.warn{--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))}*,::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:rgba(0,0,0,0)}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:rgba(0,0,0,0);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;--font-weight-light: 300;--font-weight: 400;--font-weight-bold: 600;--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));--command-min-size-thin: calc(2rem * var(--scale, 1));--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:rgba(0,0,0,0)}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:rgba(0,0,0,0);border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}.panel-commands>.spacer,.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:var(--spacer-min-size);min-height:var(--spacer-min-size)}.panel-commands>.outline.spacer,.compound-commands>.outline.spacer{background-color:rgba(0,0,0,0);border:var(--border-width) solid var(--color700)}.panel-commands>.command:first-child,.panel-commands .spacer:first-child,.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.panel-commands>.command:not(:first-child):not(:last-child),.panel-commands .spacer:not(:first-child):not(:last-child),.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.panel-commands>.command:last-child,.panel-commands .spacer:last-child,.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}html{font-family:var(--font-family);font-weight:var(--font-weight);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:var(--font-weight-light);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:rgba(0,0,0,0);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-weight:var(--font-weight);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.thin{min-height:var(--command-min-size-thin);min-width:var(--command-min-size-thin)}.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:rgba(0,0,0,0);border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:rgba(0,0,0,0);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}@keyframes flash-background{50%{background-color:var(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.flex{flex:1}.compound-commands>.text{font-size:var(--text-3xl);line-height:var(--text-3xl);align-self:center;padding:var(--padding-xs)}.compound-commands.thin>.command{min-height:var(--command-min-size-thin);min-width:var(--command-min-size-thin)}.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)}.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:rgba(0,0,0,0);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)}.panel-commands{display:flex;align-items:stretch;gap:var(--spacing-sm);min-height:var(--command-min-size-thin)}.panel-commands>.command{min-width:var(--command-min-size-thin);min-height:var(--command-min-size-thin)}.panel-commands>.flex{flex:1}.panel>header:has(>.panel-commands),.tile>header:has(>.panel-commands),.panel>footer:has(>.panel-commands),.tile>footer:has(>.panel-commands){padding:0;z-index:2}.panel>header:has(>.panel-commands)::before,.tile>header:has(>.panel-commands)::before,.panel>header:has(>.panel-commands)::after,.tile>header:has(>.panel-commands)::after,.panel>footer:has(>.panel-commands)::before,.tile>footer:has(>.panel-commands)::before,.panel>footer:has(>.panel-commands)::after,.tile>footer:has(>.panel-commands)::after{display:none}.panel>footer:has(>.panel-commands),.tile>footer:has(>.panel-commands){padding-top:var(--padding-sm)}.panel>header:has(>.panel-commands),.tile>header:has(>.panel-commands){padding-bottom:var(--padding-sm)}.panel>footer>.panel-commands>:first-child,.tile>footer>.panel-commands>:first-child{border-radius:0 0 0 var(--border-radius)}.panel>footer>.panel-commands>:last-child,.tile>footer>.panel-commands>:last-child{border-radius:0 0 var(--border-radius) 0}.panel>header>.panel-commands>:first-child,.tile>header>.panel-commands>:first-child{border-radius:var(--border-radius) 0 0 0}.panel>header>.panel-commands>:last-child,.tile>header>.panel-commands>:last-child{border-radius:0 var(--border-radius) 0 0}.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) rgba(0,0,0,0);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:rgba(0,0,0,0) 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
- :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}
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}.tone-4{--hue: 230}
package/css/ada.jupiter-2.css CHANGED
@@ -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)}
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}.tone-4{--hue: 178;--chroma: 0.07}.warn{--hue: 28;--lightness: 0.62;--chroma: 0.18;--tile-fg: var(--color100)}
package/index.html CHANGED
@@ -45,7 +45,7 @@
45
45
  <a href="#panel" class="command tone-2">Panel</a>
46
46
  <a href="#tile" class="command tone-2">Tile</a>
47
47
  <a href="#input" class="command">Input</a>
48
- <a href="#spinner" class="command">Spinner</a>
48
+ <a href="#spinner" class="command tone-4">Spinner</a>
49
49
  <div class="spacer flex"></div>
50
50
  <button id="theme-toggle" class="command" onclick="cycleTheme()">
51
51
  Green
@@ -195,6 +195,15 @@
195
195
  <div class="color800 tone-3">800</div>
196
196
  <div class="color950 tone-3">950</div>
197
197
  </div>
198
+ <div class="color-shades">
199
+ <h4>Tone 4</h4>
200
+ <div class="color100 tone-4">100</div>
201
+ <div class="color500 tone-4">500</div>
202
+ <div class="color600 tone-4">600</div>
203
+ <div class="color700 tone-4">700</div>
204
+ <div class="color800 tone-4">800</div>
205
+ <div class="color950 tone-4">950</div>
206
+ </div>
198
207
  <div class="color-shades">
199
208
  <h4>Warn</h4>
200
209
  <div class="color100 warn">100</div>
@@ -272,6 +281,7 @@
272
281
  <button class="command tone-1">Command</button>
273
282
  <button class="command tone-2">Command</button>
274
283
  <button class="command tone-3">Command</button>
284
+ <button class="command tone-4">Command</button>
275
285
  <button class="command warn">Command</button>
276
286
  </div>
277
287
  <h3>Thin</h3>
@@ -280,6 +290,7 @@
280
290
  <button class="command thin tone-1">Command</button>
281
291
  <button class="command thin tone-2">Command</button>
282
292
  <button class="command thin tone-3">Command</button>
293
+ <button class="command thin tone-4">Command</button>
283
294
  <button class="command thin warn">Command</button>
284
295
  </div>
285
296
  <h3>Outline</h3>
@@ -288,6 +299,7 @@
288
299
  <button class="command outline tone-1">Command</button>
289
300
  <button class="command outline tone-2">Command</button>
290
301
  <button class="command outline tone-3">Command</button>
302
+ <button class="command outline tone-4">Command</button>
291
303
  <button class="command outline warn">Command</button>
292
304
  </div>
293
305
  <h3>Flashing</h3>
@@ -296,6 +308,7 @@
296
308
  <button class="command flash tone-1">Command</button>
297
309
  <button class="command flash tone-2">Command</button>
298
310
  <button class="command flash tone-3">Command</button>
311
+ <button class="command flash tone-4">Command</button>
299
312
  <button class="command flash warn">Command</button>
300
313
  </div>
301
314
  <div class="row">
@@ -303,6 +316,7 @@
303
316
  <button class="command flash outline tone-1">Command</button>
304
317
  <button class="command flash outline tone-2">Command</button>
305
318
  <button class="command flash outline tone-3">Command</button>
319
+ <button class="command flash outline tone-4">Command</button>
306
320
  <button class="command flash outline warn">Command</button>
307
321
  </div>
308
322
  <h3>Disabled</h3>
@@ -486,6 +500,11 @@
486
500
  <article>Tile Content</article>
487
501
  <footer></footer>
488
502
  </div>
503
+ <div class="tile tone-4">
504
+ <header></header>
505
+ <article>Tile Content</article>
506
+ <footer></footer>
507
+ </div>
489
508
  <div class="tile warn">
490
509
  <header></header>
491
510
  <article>Tile Content</article>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ada-ui",
3
- "version": "7.2.2",
3
+ "version": "7.3.0",
4
4
  "scripts": {
5
5
  "dev": "concurrently -n scss,serve 'sass scss:css --watch --embed-source-map' 'alive-server .'",
6
6
  "postdev": "git checkout css/*",
package/scss/_ada.theme-base.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  // Colour engine. Lives in the base stylesheet (ada.css) so a theme is just
2
2
  // custom properties on :root — no SCSS, no @extend needed:
3
3
  //
4
- // ramp theme -> set --base-hue (+ --lightness / --chroma). The four tones
4
+ // ramp theme -> set --base-hue (+ --lightness / --chroma). The five tones
5
5
  // derive from --base-hue by a per-slot offset; warn is fixed.
6
6
  // curated theme -> additionally override --hue / --lightness / --chroma per
7
7
  // slot, and the --100 / --950 ends to decouple bg/text.
8
8
  //
9
- // The five slots (primary + tone-1..3 + warn) are an INDEPENDENT palette, not
9
+ // The six slots (primary + tone-1..4 + warn) are an INDEPENDENT palette, not
10
10
  // shades of one colour. The 100..950 ladder below is the light->dark ramp WITHIN
11
11
  // a single slot.
12
12
 
@@ -37,6 +37,12 @@
37
37
  .tone-3 {
38
38
  --hue: calc(var(--base-hue) - 76);
39
39
  }
40
+ // Double step: the ramp's -25 continuation (-101) would land in the same
41
+ // perceptually compressed band as tone-3 (oklch hue steps are not perceptually
42
+ // even at low chroma — 145 vs 170 both read "green"), so tone-4 skips it.
43
+ .tone-4 {
44
+ --hue: calc(var(--base-hue) - 130);
45
+ }
40
46
  .warn {
41
47
  --hue: 29;
42
48
  }
@@ -92,6 +98,7 @@
92
98
  .tone-1,
93
99
  .tone-2,
94
100
  .tone-3,
101
+ .tone-4,
95
102
  .warn {
96
103
  @extend %ladder;
97
104
  }
package/scss/_global.scss CHANGED
@@ -98,7 +98,6 @@ html {
98
98
  font-family: var(--font-family);
99
99
  font-weight: var(--font-weight);
100
100
  font-size: var(--font-size);
101
- background: var(--bg-body);
102
101
  }
103
102
 
104
103
  body {
package/scss/ada.green.scss CHANGED
@@ -18,3 +18,8 @@
18
18
  .tone-3 {
19
19
  --hue: 185;
20
20
  }
21
+ // Off the ramp: the default offset (base - 130 = 2) lands next to warn's red.
22
+ // 230 continues the curated green -> teal drift into blue (#004264).
23
+ .tone-4 {
24
+ --hue: 230;
25
+ }
package/scss/ada.jupiter-2.scss CHANGED
@@ -71,6 +71,14 @@
71
71
  --chroma: 0.06;
72
72
  }
73
73
 
74
+ // Verdigris sea-green — second cool tone next to steel; muted like it so the
75
+ // warm orange trio stays dominant (#6AAA9B). Ramp fallback (hue 279 at the
76
+ // primary's chroma) would be a bright periwinkle, off-palette.
77
+ .tone-4 {
78
+ --hue: 178;
79
+ --chroma: 0.07;
80
+ }
81
+
74
82
  // Danger red — kept clearly distinct from the orange accent. Lightened to L0.62
75
83
  // (#DE4F44) so the dark --command-fg label clears WCAG AA on warn buttons (the
76
84
  // old L0.58 red was a mid-tone where no text colour reached 4.5:1).