ada-ui 0.0.0-beta-v5-20240723181534 → 0.0.0-beta-v5-20240724160317

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # ada-ui
 
-## 0.0.0-beta-v5-20240723181534
+## 0.0.0-beta-v5-20240724160317
 
 ### Major Changes
 

package/css/ada.blue-light.css

@@ -0,0 +1 @@
+.warn,.secondary-alt,.secondary,.primary-alt,.primary,:root{--color100: lch(var(--100));--color100-on-light-bg: lch(var(--100-on-light-bg, var(--100)));--color300: lch(var(--300));--color400: lch(var(--400));--color500: lch(var(--500));--color600: lch(var(--600));--panel-background: lch(var(--500) / 0.1)}:root{--bg-body: lch(95 10 260)}.warn,.secondary-alt,.secondary,.primary-alt,.primary,:root{--100-on-light-bg: var(--600)}.primary,:root{--100: 90 17 260;--300: 44 47 260;--400: 38 41 260;--500: 32 35 260;--600: 26 29 260}.primary-alt{--100: 90 17 246;--300: 51 40 246;--400: 44 34 246;--500: 41 33 246;--600: 34 27 246}.secondary{--100: 90 17 152;--300: 40 37 152;--400: 33 31 152;--500: 30 30 152;--600: 23 24 152}.secondary-alt{--100: 90 17 206;--300: 52 30 206;--400: 45 24 206;--500: 42 23 206;--600: 35 17 206}.warn{--100: 90 17 40;--300: 40 75 40;--400: 33 69 40;--500: 30 68 40;--600: 23 62 40}

package/css/ada.blue.css

@@ -1 +1 @@
-.warn,.accent-alt,.accent,.primary-alt,.primary,:root{--fg100: lch(var(--100));--fg200: lch(var(--200));--bg600: lch(var(--600));--bg700: lch(var(--700));--bg800: lch(var(--800));--bg900: lch(var(--900));--panel-background: lch(var(--800) / 0.1)}:root{--bg-body: lch(5 8 260)}.primary,:root{--100: 90 17 260;--200: 70 17 260;--600: 36 36 260;--700: 29 30 260;--800: 26 29 260;--900: 19 23 260}.primary-alt{--100: 90 17 246;--200: 70 17 246;--600: 51 40 246;--700: 44 34 246;--800: 41 33 246;--900: 34 27 246}.accent{--100: 90 17 152;--200: 70 17 152;--600: 40 37 152;--700: 33 31 152;--800: 30 30 152;--900: 23 24 152}.accent-alt{--100: 90 17 206;--200: 70 17 206;--600: 52 30 206;--700: 45 24 206;--800: 42 23 206;--900: 35 17 206}.warn{--100: 90 17 40;--200: 70 17 40;--600: 40 75 40;--700: 33 69 40;--800: 30 68 40;--900: 23 62 40}
+.warn,.secondary-alt,.secondary,.primary-alt,.primary,:root{--color100: lch(var(--100));--color100-on-light-bg: lch(var(--100-on-light-bg, var(--100)));--color300: lch(var(--300));--color400: lch(var(--400));--color500: lch(var(--500));--color600: lch(var(--600));--panel-background: lch(var(--500) / 0.1)}:root{--bg-body: lch(5 8 260)}.primary,:root{--100: 90 17 260;--300: 38 41 260;--400: 32 35 260;--500: 26 29 260;--600: 20 23 260}.primary-alt{--100: 90 17 246;--300: 53 45 246;--400: 47 39 246;--500: 41 33 246;--600: 35 27 246}.secondary{--100: 90 17 152;--300: 42 42 152;--400: 36 36 152;--500: 30 30 152;--600: 24 24 152}.secondary-alt{--100: 90 17 206;--300: 54 37 206;--400: 48 29 206;--500: 42 23 206;--600: 36 17 206}.warn{--100: 90 17 40;--300: 42 80 40;--400: 36 74 40;--500: 30 68 40;--600: 24 62 40}

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;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--border-width: 0.15rem;--focus-border-width: 0.15rem;--border-radius: 0.3rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}html{font-family:var(--font-family);font-weight:400}html,body{font-size:var(--font-size);height:100%;min-height:100%}body{padding:var(--spacing);background:var(--bg-body);color:var(--fg100)}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px var(--bg700);color:var(--fg100)}h1{font-size:var(--scale-3xl)}h2{font-size:var(--scale-2xl)}h3{font-size:var(--scale-xl)}h4{font-size:var(--scale-lg)}.command{background-color:var(--bg900);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:var(--spacing-xs) var(--spacing-sm);min-height:3rem;min-width:3rem;border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--fg100);font-family:inherit;font-size:var(--scale-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:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--bg800);border-width:var(--border-width)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d}.command:focus{border-left-color:var(--bg600)}.command:active{border-color:var(--bg600);background-color:var(--bg600);animation-play-state:paused}.compound-commands{display:inline-grid;grid-auto-flow:column;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--bg900);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--bg800)}.compound-commands>.text{font-size:var(--scale-3xl);line-height:var(--scale-3xl);align-self:center;padding:var(--spacing-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{grid-auto-flow:row}.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(--bg700)}}@keyframes flash-border{50%{border-color:var(--bg600)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--bg700);color:var(--fg100);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-base)}.input:focus{border:var(--border-width) solid var(--bg600)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:var(--scale-xl);padding:var(--spacing-sm) var(--spacing)}.panel>header::before{border-width:var(--border-width) 0 0 var(--border-width);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after{border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article{z-index:1;padding:0 var(--spacing);overflow:auto}.panel>article::-webkit-scrollbar{width:var(--border-width);background:transparent}.panel>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--border-width);background:var(--bg800);box-sizing:border-box;background-clip:border-box}.panel>footer{position:relative;color:var(--fg200);padding:var(--spacing-sm) var(--spacing);font-size:var(--scale-sm);text-align:right}.panel>footer::before{border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after{border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom: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(--bg800) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.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(--bg600);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}@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;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--border-width: 0.15rem;--focus-border-width: 0.15rem;--border-radius: 0.3rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}.panel>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--color500);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:1rem;padding:var(--spacing);background:var(--bg-body);color:var(--color100-on-light-bg)}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px lch(var(--400)/0.5);color:var(--color100-on-light-bg)}h1{font-size:var(--scale-3xl)}h2{font-size:var(--scale-2xl)}h3{font-size:var(--scale-xl)}h4{font-size:var(--scale-lg)}.command{background-color:var(--color600);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:var(--spacing-xs) var(--spacing-sm);min-height:3rem;min-width:3rem;border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--color100);font-family:inherit;font-size:var(--scale-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:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color500);border-width:var(--border-width);color:var(--color100-on-light-bg)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d}.command:focus{border-left-color:var(--color300)}.command:active{border-color:var(--color300);background-color:var(--color300);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--color600);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color500)}.compound-commands>.text{font-size:var(--scale-3xl);line-height:var(--scale-3xl);align-self:center;padding:var(--spacing-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(--color400)}}@keyframes flash-border{50%{border-color:var(--color300)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color400);color:var(--color100-on-light-bg);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-base)}.input:focus{border:var(--border-width) solid var(--color300)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--color500);position:absolute;height:1rem;width:1rem;z-index:2}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:var(--scale-xl);padding:var(--spacing-sm) var(--spacing)}.panel>header::before{border-width:var(--border-width) 0 0 var(--border-width);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after{border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article{z-index:1;padding:var(--spacing);overflow:auto}.panel>footer{position:relative;padding:var(--spacing-sm) var(--spacing);font-size:var(--scale-sm);text-align:right}.panel>footer::before{border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after{border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom: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(--color500) 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(--color300);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/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="height-100">
   <head>
     <meta charset="UTF-8" />
     <title>Ada</title>
@@ -17,6 +17,24 @@
       rel="stylesheet"
     />
     <style>
+      html {
+        scroll-padding-top: 1rem;
+      }
+
+      html.height-100 {
+        height: 100%;
+        min-height: 100%;
+      }
+
+      html.height-100 > body {
+        height: 100%;
+        min-height: 100%;
+      }
+
+      html:not(.height-100) > body {
+        align-items: start;
+      }
+
       .color-shades {
         display: grid;
       }
@@ -28,33 +46,28 @@
         width: 8rem;
         height: 3rem;
         box-sizing: border-box;
-        color: var(--fg100);
-      }
-
-      .color-shades > div.bg900 {
-        background: var(--bg900);
+        color: var(--color100);
       }
 
-      .color-shades > div.bg800 {
-        background: var(--bg800);
+      .color-shades > div.color600 {
+        background: var(--color600);
       }
 
-      .color-shades > div.bg700 {
-        background: var(--bg700);
+      .color-shades > div.color500 {
+        background: var(--color500);
       }
 
-      .color-shades > div.bg600 {
-        background: var(--bg600);
+      .color-shades > div.color400 {
+        background: var(--color400);
       }
 
-      .color-shades > div.fg200 {
-        background: var(--fg200);
-        color: var(--bg900);
+      .color-shades > div.color300 {
+        background: var(--color300);
       }
 
-      .color-shades > div.fg100 {
-        background: var(--fg100);
-        color: var(--bg900);
+      .color-shades > div.color100 {
+        background: var(--color100);
+        color: var(--color600);
       }
 
       .typography {
@@ -69,9 +82,6 @@
         grid-template-columns: subgrid;
         gap: var(--spacing);
       }
-      .typography > p > code {
-        color: var(--fg200);
-      }
     </style>
   </head>
 
@@ -85,14 +95,15 @@
   >
     <div
       class="compound-commands vertical"
-      style="display: flex; flex-direction: column"
+      style="position: sticky; top: var(--spacing)"
     >
       <div class="spacer"></div>
       <a href="#typography" class="command primary-alt">Typography</a>
       <a href="#colors" class="command primary-alt">Colors</a>
       <a href="#spacing" class="command primary-alt">Spacing</a>
-      <a href="#commands" class="command">Commands</a>
-      <a href="#panels" class="command">Panels</a>
+      <a href="#page-layout" class="command primary-alt">Page Layout</a>
+      <a href="#commands" class="command secondary">Commands</a>
+      <a href="#panels" class="command secondary-alt">Panels</a>
       <a href="#input" class="command">Input</a>
       <a href="#spinner" class="command">Spinner</a>
       <div style="flex: 1" class="spacer"></div>
@@ -101,7 +112,12 @@
     <div class="panel">
       <header><h1>Ada UI Design Guide</h1></header>
       <article
-        style="display: grid; grid-auto-rows: max-content; gap: var(--spacing)"
+        style="
+          display: grid;
+          grid-auto-rows: max-content;
+          gap: var(--spacing);
+          scroll-padding-top: 1rem;
+        "
       >
         <div class="panel">
           <header><h2 id="typography">Typography</h2></header>
@@ -138,48 +154,43 @@
           <article style="display: flex; gap: 3rem; flex-wrap: wrap">
             <div class="color-shades">
               <h3>Primary</h3>
-              <div class="fg100">FG 100</div>
-              <div class="fg200">FG 200</div>
-              <div class="bg600">BG 600</div>
-              <div class="bg700">BG 700</div>
-              <div class="bg800">BG 800</div>
-              <div class="bg900">BG 900</div>
+              <div class="color100">100</div>
+              <div class="color300">300</div>
+              <div class="color400">400</div>
+              <div class="color500">500</div>
+              <div class="color600">600</div>
             </div>
             <div class="color-shades">
               <h3>Primary Alt</h3>
-              <div class="fg100 primary-alt">FG 100</div>
-              <div class="fg200 primary-alt">FG 200</div>
-              <div class="bg600 primary-alt">BG 600</div>
-              <div class="bg700 primary-alt">BG 700</div>
-              <div class="bg800 primary-alt">BG 800</div>
-              <div class="bg900 primary-alt">BG 900</div>
+              <div class="color100 primary-alt">100</div>
+              <div class="color300 primary-alt">300</div>
+              <div class="color400 primary-alt">400</div>
+              <div class="color500 primary-alt">500</div>
+              <div class="color600 primary-alt">600</div>
             </div>
             <div class="color-shades">
-              <h3>Accent</h3>
-              <div class="fg100 accent">FG 100</div>
-              <div class="fg200 accent">FG 200</div>
-              <div class="bg600 accent">BG 600</div>
-              <div class="bg700 accent">BG 700</div>
-              <div class="bg800 accent">BG 800</div>
-              <div class="bg900 accent">BG 900</div>
+              <h3>Secondary</h3>
+              <div class="color100 secondary">100</div>
+              <div class="color300 secondary">300</div>
+              <div class="color400 secondary">400</div>
+              <div class="color500 secondary">500</div>
+              <div class="color600 secondary">600</div>
             </div>
             <div class="color-shades">
-              <h3>Accent Alt</h3>
-              <div class="fg100 accent-alt">FG 100</div>
-              <div class="fg200 accent-alt">FG 200</div>
-              <div class="bg600 accent-alt">BG 600</div>
-              <div class="bg700 accent-alt">BG 700</div>
-              <div class="bg800 accent-alt">BG 800</div>
-              <div class="bg900 accent-alt">BG 900</div>
+              <h3>Secondary Alt</h3>
+              <div class="color100 secondary-alt">100</div>
+              <div class="color300 secondary-alt">300</div>
+              <div class="color400 secondary-alt">400</div>
+              <div class="color500 secondary-alt">500</div>
+              <div class="color600 secondary-alt">600</div>
             </div>
             <div class="color-shades">
               <h3>Warn</h3>
-              <div class="fg100 warn">FG 100</div>
-              <div class="fg200 warn">FG 200</div>
-              <div class="bg600 warn">BG 600</div>
-              <div class="bg700 warn">BG 700</div>
-              <div class="bg800 warn">BG 800</div>
-              <div class="bg900 warn">BG 900</div>
+              <div class="color100 warn">100</div>
+              <div class="color300 warn">300</div>
+              <div class="color400 warn">400</div>
+              <div class="color500 warn">500</div>
+              <div class="color600 warn">600</div>
             </div>
           </article>
           <footer></footer>
@@ -189,6 +200,20 @@
           <article>TODO</article>
           <footer></footer>
         </div>
+        <div class="panel">
+          <header><h2 id="page-layout">Page Layout</h2></header>
+          <article>
+            <p>
+              Choose yourself whether the body should scroll or the body should
+              have a fixed width of 100%. For the latter, you should use one or
+              more top-most panels which then will scroll their content. You can
+              see both options and how to implement them by toggling the class
+              <code>height-100</code> on the <code>html</code> element of this
+              demo page.
+            </p>
+          </article>
+          <footer></footer>
+        </div>
         <div class="panel">
           <header><h2 id="commands">Commands</h2></header>
           <article
@@ -202,25 +227,25 @@
             <h3 style="grid-column: span 5">Default</h3>
             <button class="command">Command</button>
             <button class="command primary-alt">Command</button>
-            <button class="command accent-alt">Command</button>
-            <button class="command accent">Command</button>
+            <button class="command secondary-alt">Command</button>
+            <button class="command secondary">Command</button>
             <button class="command warn">Command</button>
             <h3 style="grid-column: span 5">Outline</h3>
             <button class="command outline">Command</button>
             <button class="command outline primary-alt">Command</button>
-            <button class="command outline accent-alt">Command</button>
-            <button class="command outline accent">Command</button>
+            <button class="command outline secondary-alt">Command</button>
+            <button class="command outline secondary">Command</button>
             <button class="command outline warn">Command</button>
             <h3 style="grid-column: span 5">Flashing</h3>
             <button class="command flash">Command</button>
             <button class="command flash primary-alt">Command</button>
-            <button class="command flash accent-alt">Command</button>
-            <button class="command flash accent">Command</button>
+            <button class="command flash secondary-alt">Command</button>
+            <button class="command flash secondary">Command</button>
             <button class="command flash warn">Command</button>
             <button class="command flash outline">Command</button>
             <button class="command flash outline primary-alt">Command</button>
-            <button class="command flash outline accent-alt">Command</button>
-            <button class="command flash outline accent">Command</button>
+            <button class="command flash outline secondary-alt">Command</button>
+            <button class="command flash outline secondary">Command</button>
             <button class="command flash outline warn">Command</button>
             <h3 style="grid-column: span 5">Disabled</h3>
             <button disabled class="command">Command</button>
@@ -297,7 +322,7 @@
               <footer>Footer</footer>
             </div>
             <h3>With another color variant</h3>
-            <div class="panel accent">
+            <div class="panel secondary">
               <header>Header</header>
               <article>Content</article>
               <footer>Footer</footer>
@@ -344,20 +369,20 @@
               <h3>80px</h3>
               <div class="spinner" style="font-size: 80px"></div>
               <div class="spinner primary-alt" style="font-size: 80px"></div>
-              <div class="spinner accent-alt" style="font-size: 80px"></div>
-              <div class="spinner accent" style="font-size: 80px"></div>
+              <div class="spinner secondary-alt" style="font-size: 80px"></div>
+              <div class="spinner secondary" style="font-size: 80px"></div>
               <div class="spinner warn" style="font-size: 80px"></div>
               <h3>32px</h3>
               <div class="spinner" style="font-size: 32px"></div>
               <div class="spinner primary-alt" style="font-size: 32px"></div>
-              <div class="spinner accent-alt" style="font-size: 32px"></div>
-              <div class="spinner accent" style="font-size: 32px"></div>
+              <div class="spinner secondary-alt" style="font-size: 32px"></div>
+              <div class="spinner secondary" style="font-size: 32px"></div>
               <div class="spinner warn" style="font-size: 32px"></div>
               <h3>16px</h3>
               <div class="spinner" style="font-size: 16px"></div>
               <div class="spinner primary-alt" style="font-size: 16px"></div>
-              <div class="spinner accent-alt" style="font-size: 16px"></div>
-              <div class="spinner accent" style="font-size: 16px"></div>
+              <div class="spinner secondary-alt" style="font-size: 16px"></div>
+              <div class="spinner secondary" style="font-size: 16px"></div>
               <div class="spinner warn" style="font-size: 16px"></div>
             </div>
           </article>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ada-ui",
-  "version": "0.0.0-beta-v5-20240723181534",
+  "version": "0.0.0-beta-v5-20240724160317",
   "scripts": {
     "dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
     "build": "rm -rf css && sass scss:css -s compressed --no-source-map",

package/scss/_ada.theme-base.scss

@@ -1,11 +1,11 @@
 %colourShades {
-  --fg100: lch(var(--100));
-  --fg200: lch(var(--200));
+  --color100: lch(var(--100));
+  --color100-on-light-bg: lch(var(--100-on-light-bg, var(--100)));
 
-  --bg600: lch(var(--600));
-  --bg700: lch(var(--700));
-  --bg800: lch(var(--800));
-  --bg900: lch(var(--900));
+  --color300: lch(var(--300));
+  --color400: lch(var(--400));
+  --color500: lch(var(--500));
+  --color600: lch(var(--600));
 
-  --panel-background: lch(var(--800) / 0.1);
+  --panel-background: lch(var(--500) / 0.1);
 }

package/scss/_command.scss

@@ -1,5 +1,5 @@
 .command {
-  background-color: var(--bg900);
+  background-color: var(--color600);
   box-shadow: var(--box-shadow);
   display: grid;
   align-items: end;
@@ -14,7 +14,7 @@
   border-radius: var(--border-radius);
   overflow: hidden;
   outline: none;
-  color: var(--fg100);
+  color: var(--color100);
   font-family: inherit;
   font-size: var(--scale-base);
   cursor: pointer;
@@ -37,8 +37,9 @@
 
   &.outline {
     background-color: transparent;
-    border-color: var(--bg800);
+    border-color: var(--color500);
     border-width: var(--border-width);
+    color: var(--color100-on-light-bg);
 
     &.flash {
       animation-name: flash-border;
@@ -51,30 +52,29 @@
   }
 
   &:focus {
-    border-left-color: var(--bg600);
+    border-left-color: var(--color300);
   }
 
   &:active {
-    border-color: var(--bg600);
-    background-color: var(--bg600);
+    border-color: var(--color300);
+    background-color: var(--color300);
     animation-play-state: paused;
   }
 }
 
 .compound-commands {
-  display: inline-grid;
-  grid-auto-flow: column;
+  display: inline-flex;
   gap: var(--spacing-sm);
 
   > .spacer {
-    background-color: var(--bg900);
+    background-color: var(--color600);
     box-shadow: var(--box-shadow);
     min-width: 1rem;
     min-height: 1rem;
 
     &.outline {
       background-color: transparent;
-      border: var(--border-width) solid var(--bg800);
+      border: var(--border-width) solid var(--color500);
     }
   }
 
@@ -101,7 +101,7 @@
   }
 
   &.vertical {
-    grid-auto-flow: row;
+    flex-direction: column;
 
     > .text {
       justify-self: center;
@@ -122,12 +122,12 @@
 
 @keyframes flash-background {
   50% {
-    background-color: var(--bg700);
+    background-color: var(--color400);
   }
 }
 
 @keyframes flash-border {
   50% {
-    border-color: var(--bg600);
+    border-color: var(--color300);
   }
 }

package/scss/_global.scss

@@ -20,20 +20,33 @@
   }
 }
 
+%scrollbar {
+  &::-webkit-scrollbar {
+    width: var(--spacing-sm);
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    min-width: 1rem;
+    border-style: solid;
+    border-color: transparent;
+    border-width: var(--spacing-sm);
+    background: var(--color500);
+    box-sizing: border-box;
+    background-clip: border-box;
+  }
+}
+
 html {
   font-family: var(--font-family);
   font-weight: 400;
-}
-
-html,
-body {
   font-size: var(--font-size);
-  height: 100%;
-  min-height: 100%;
 }
 
 body {
+  font-size: 1rem;
   padding: var(--spacing);
   background: var(--bg-body);
-  color: var(--fg100);
+  color: var(--color100-on-light-bg);
+
+  @extend %scrollbar;
 }

package/scss/_input.scss

@@ -2,8 +2,8 @@
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   outline: none;
-  border: var(--border-width) solid var(--bg700);
-  color: var(--fg100);
+  border: var(--border-width) solid var(--color400);
+  color: var(--color100-on-light-bg);
   font-family: inherit;
   background-color: transparent;
   transition: border-color 0.15s ease-in-out;
@@ -11,7 +11,7 @@
   font-size: var(--scale-base);
 
   &:focus {
-    border: var(--border-width) solid var(--bg600);
+    border: var(--border-width) solid var(--color300);
   }
   &:disabled {
     opacity: 0.4;

package/scss/_panel.scss

@@ -1,7 +1,7 @@
 %corner-base {
   content: "";
   border-style: solid;
-  border-color: var(--bg800);
+  border-color: var(--color500);
   position: absolute;
   height: 1rem;
   width: 1rem;
@@ -41,27 +41,14 @@
 
   > article {
     z-index: 1;
-    padding: 0 var(--spacing);
+    padding: var(--spacing);
     overflow: auto;
 
-    &::-webkit-scrollbar {
-      width: var(--border-width);
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      min-width: 1rem;
-      border-style: solid;
-      border-color: transparent;
-      border-width: var(--border-width);
-      background: var(--bg800);
-      box-sizing: border-box;
-      background-clip: border-box;
-    }
+    @extend %scrollbar;
   }
   > footer {
     position: relative;
 
-    color: var(--fg200);
     padding: var(--spacing-sm) var(--spacing);
     font-size: var(--scale-sm);
     text-align: right;

package/scss/_spinner.scss

@@ -18,9 +18,10 @@
     border-style: solid;
     border-width: 0.05em;
     border-radius: 50%;
-    border-color: var(--bg800) transparent;
+    border-color: var(--color500) transparent;
     animation: 4s 0.5s inset1 ease-in-out infinite;
-    box-shadow: 0px 12px 10px -12px #000a, 0px -12px 10px -12px #000a;
+    box-shadow: 0px 12px 10px -12px rgba(0, 0, 0, 0.4),
+      0px -12px 10px -12px rgba(0, 0, 0, 0.4);
   }
 
   &::after {
@@ -33,9 +34,10 @@
     border-style: solid;
     border-width: 0.05em;
     border-radius: 50%;
-    border-color: transparent var(--bg600);
+    border-color: transparent var(--color300);
     animation: 4s 0.5s inset2 ease-in-out infinite;
-    box-shadow: 12px 0px 10px -12px #000a, -12px 0px 10px -12px #000a;
+    box-shadow: 12px 0px 10px -12px rgba(0, 0, 0, 0.4),
+      -12px 0px 10px -12px rgba(0, 0, 0, 0.4);
   }
 }
 

package/scss/_typography.scss

@@ -4,8 +4,8 @@ h3,
 h4,
 %header {
   font-weight: 300;
-  text-shadow: 0 0 4px var(--bg700);
-  color: var(--fg100);
+  text-shadow: 0 0 4px lch(var(--400) / 0.5);
+  color: var(--color100-on-light-bg);
 }
 
 h1 {

package/scss/ada.blue-light.scss

@@ -0,0 +1,72 @@
+@import "ada.theme-base";
+
+:root {
+  --bg-body: lch(95 10 260);
+
+  //Defaults to primary color
+  @extend .primary;
+}
+
+%light-fg {
+  --100-on-light-bg: var(--600);
+}
+
+.primary {
+  @extend %colourShades;
+  @extend %light-fg;
+
+  --100: 90 17 260;
+
+  --300: 44 47 260;
+  --400: 38 41 260;
+  --500: 32 35 260;
+  --600: 26 29 260;
+}
+
+.primary-alt {
+  @extend %colourShades;
+  @extend %light-fg;
+
+  --100: 90 17 246;
+
+  --300: 51 40 246;
+  --400: 44 34 246;
+  --500: 41 33 246;
+  --600: 34 27 246;
+}
+
+.secondary {
+  @extend %colourShades;
+  @extend %light-fg;
+
+  --100: 90 17 152;
+
+  --300: 40 37 152;
+  --400: 33 31 152;
+  --500: 30 30 152;
+  --600: 23 24 152;
+}
+
+.secondary-alt {
+  @extend %colourShades;
+  @extend %light-fg;
+
+  --100: 90 17 206;
+
+  --300: 52 30 206;
+  --400: 45 24 206;
+  --500: 42 23 206;
+  --600: 35 17 206;
+}
+
+.warn {
+  @extend %colourShades;
+  @extend %light-fg;
+
+  --100: 90 17 40;
+
+  --300: 40 75 40;
+  --400: 33 69 40;
+  --500: 30 68 40;
+  --600: 23 62 40;
+}

package/scss/ada.blue.scss

@@ -11,58 +11,53 @@
   @extend %colourShades;
 
   --100: 90 17 260;
-  --200: 70 17 260;
 
-  --600: 36 36 260;
-  --700: 29 30 260;
-  --800: 26 29 260;
-  --900: 19 23 260;
+  --300: 38 41 260;
+  --400: 32 35 260;
+  --500: 26 29 260; //the base color
+  --600: 20 23 260;
 }
 
 .primary-alt {
   @extend %colourShades;
 
   --100: 90 17 246;
-  --200: 70 17 246;
 
-  --600: 51 40 246;
-  --700: 44 34 246;
-  --800: 41 33 246;
-  --900: 34 27 246;
+  --300: 53 45 246;
+  --400: 47 39 246;
+  --500: 41 33 246;
+  --600: 35 27 246;
 }
 
-.accent {
+.secondary {
   @extend %colourShades;
 
   --100: 90 17 152;
-  --200: 70 17 152;
 
-  --600: 40 37 152;
-  --700: 33 31 152;
-  --800: 30 30 152;
-  --900: 23 24 152;
+  --300: 42 42 152;
+  --400: 36 36 152;
+  --500: 30 30 152;
+  --600: 24 24 152;
 }
 
-.accent-alt {
+.secondary-alt {
   @extend %colourShades;
 
   --100: 90 17 206;
-  --200: 70 17 206;
 
-  --600: 52 30 206;
-  --700: 45 24 206;
-  --800: 42 23 206;
-  --900: 35 17 206;
+  --300: 54 37 206;
+  --400: 48 29 206;
+  --500: 42 23 206;
+  --600: 36 17 206;
 }
 
 .warn {
   @extend %colourShades;
 
   --100: 90 17 40;
-  --200: 70 17 40;
 
-  --600: 40 75 40;
-  --700: 33 69 40;
-  --800: 30 68 40;
-  --900: 23 62 40;
+  --300: 42 80 40;
+  --400: 36 74 40;
+  --500: 30 68 40;
+  --600: 24 62 40;
 }