ada-ui 0.0.0-beta-v5-20240723124551 → 0.0.0-beta-v5-20240723175252

package/CHANGELOG.md

@@ -1,9 +1,14 @@
 # ada-ui
 
-## 0.0.0-beta-v5-20240723124551
+## 0.0.0-beta-v5-20240723175252
 
 ### Major Changes
 
+- 327604d: Remove margins
+- 327604d: Improve demo page
+- 327604d: Use the same disabled style for all color variants
+- 327604d: Remove small border width and light corner
+- 327604d: Add typography and spacing tokens
 - 33e84ac: Simplified colors and using lch instead of hsl
 - 33e84ac: Add reset style
 - 33e84ac: Deprecate Button in favor of Command

package/css/ada.blue-old.css

@@ -0,0 +1 @@
+.warn,.accent,.shade2,.shade1,.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)}.primary,:root{--h: 205;--s: 80%;--l: 23%;--h-light: 205;--s-light: 80%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}:root{--bg: hsl(207, 61%, 7%)}.shade1{--h: 198;--s: 90%;--l: 30%;--h-light: 198;--s-light: 90%;--l-light: 58%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 185;--s: 50%;--l: 30%;--h-light: 185;--s-light: 50%;--l-light: 50%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-light: 146;--s-light: 58%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 100%;--l: 28%;--h-light: 0;--s-light: 85%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}

package/css/ada.blue.css

@@ -1 +1 @@
-.warn,.accent,.shade2,.shade1,.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)}.primary,:root{--h: 205;--s: 80%;--l: 23%;--h-light: 205;--s-light: 80%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}:root{--bg: hsl(207, 61%, 7%)}.shade1{--h: 198;--s: 90%;--l: 30%;--h-light: 198;--s-light: 90%;--l-light: 58%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 185;--s: 50%;--l: 30%;--h-light: 185;--s-light: 50%;--l-light: 50%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-light: 146;--s-light: 58%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 100%;--l: 28%;--h-light: 0;--s-light: 85%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
+.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}

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;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--gap-sm: 4px;--gap: 6px;--spacing: 0.8rem;--border-width-sm: 0.08rem;--border-width: 0.15rem;--focus-border-width: 0.15rem}@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,h5,h6,.panel>header{font-weight:300;text-shadow:0 0 4px var(--bg700);color:var(--fg100)}h1{font-size:3rem;margin:1rem 0 2rem 0}h1.m-0{margin:0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}h2.m-0{margin:0}h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h3.m-0{margin:0}h4{font-size:1.2rem;margin:.5rem 0 .5rem 0}h4.m-0{margin:0}.command{overflow:hidden;outline:none;color:var(--fg100);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;background-color:var(--bg900);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;font-size:1.1rem;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:.25rem .6rem;min-height:3rem;min-width:3rem;border-radius:.3rem}.command:disabled{opacity:.6;filter:saturate(0.2);cursor:default;pointer-events:none}.command.flash{animation:flash-background 1s ease-in-out infinite}.command.outline{background-color:transparent;border-color:var(--bg800);border-width:var(--border-width)}.command.outline.flash{animation-name:flash-border}.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(--gap)}.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:2rem;line-height:2rem;align-self:center;padding:.25rem}.compound-commands>button:first-child,.compound-commands .spacer:first-child{border-radius:.3rem 0 0 .3rem}.compound-commands>button:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>button:last-child,.compound-commands .spacer:last-child{border-radius:0 .3rem .3rem 0}.compound-commands.vertical{grid-auto-flow:row}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>button:first-child,.compound-commands.vertical .spacer:first-child{border-radius:.3rem .3rem 0 0}.compound-commands.vertical>button:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 .3rem .3rem}@keyframes flash-background{50%{background-color:var(--bg700)}}@keyframes flash-border{50%{border-color:var(--bg600)}}.input{border-radius:.3rem;box-shadow:var(--box-shadow);outline:none;border:var(--border-width-sm) solid var(--bg700);color:var(--fg100);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem;font-size:1.1rem}.input:focus{border:var(--border-width-sm) solid var(--bg600)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:1.5rem;padding:.4rem .6rem}.panel>header:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) 0 0 var(--corner-border-width);border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) var(--corner-border-width) 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>article{z-index:1;padding:0 .6rem;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:.4rem .6rem;font-size:.75rem;text-align:right}.panel>footer:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 0 var(--corner-border-width) var(--corner-border-width);border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 var(--corner-border-width) var(--corner-border-width) 0;border-radius:0 0 .3rem 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}}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-lg);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)}}

package/index.html

@@ -10,7 +10,7 @@
       name="viewport"
       content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
     />
-    <link rel="stylesheet" href="css/ada.blue-new.css" />
+    <link rel="stylesheet" href="css/ada.blue.css" />
     <link rel="stylesheet" href="css/ada.css" />
     <link
       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
@@ -56,6 +56,22 @@
         background: var(--fg100);
         color: var(--bg900);
       }
+
+      .typography {
+        display: grid;
+        grid-template-columns: auto auto;
+        gap: var(--spacing);
+        justify-content: start;
+      }
+      .typography > p {
+        grid-column: span 2;
+        display: grid;
+        grid-template-columns: subgrid;
+        gap: var(--spacing);
+      }
+      .typography > p > code {
+        color: var(--fg200);
+      }
     </style>
   </head>
 
@@ -64,34 +80,64 @@
       display: grid;
       grid-template-columns: auto 1fr;
       grid-template-rows: 1fr auto;
-      gap: 0.5rem;
+      column-gap: var(--spacing);
     "
   >
     <div
       class="compound-commands vertical"
-      style="grid-template-rows: auto auto 1fr auto auto; min-width: 10rem"
+      style="display: flex; flex-direction: column"
     >
-      <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 warn">Command</button>
+      <div class="spacer"></div>
+      <a href="#typography" class="command">Typography</a>
+      <a href="#colors" class="command">Colors</a>
+      <a href="#spacing" class="command">Spacing</a>
+      <a href="#commands" class="command">Commands</a>
+      <a href="#panels" class="command">Panels</a>
+      <a href="#input" class="command">Input</a>
+      <a href="#spinner" class="command">Spinner</a>
+      <div style="flex: 1" class="spacer"></div>
+      <div class="spacer"></div>
     </div>
     <div class="panel">
-      <header></header>
-      <article style="display: grid; grid-auto-rows: max-content">
+      <header><h1>Ada UI Design Guide</h1></header>
+      <article
+        style="display: grid; grid-auto-rows: max-content; gap: var(--spacing)"
+      >
         <div class="panel">
-          <header>Colors</header>
-          <article
-            style="
-              display: grid;
-              grid-auto-flow: column;
-              justify-content: start;
-              gap: 3rem;
-            "
-          >
+          <header><h2 id="typography">Typography</h2></header>
+          <article class="typography">
+            <p style="font-size: var(--scale-3xl)">
+              <code>scale-3xl</code>
+              <span>Headline 1, Text in Compound Commands</span>
+            </p>
+            <p style="font-size: var(--scale-2xl)">
+              <code>scale-2xl</code>
+              <span>Headline 2</span>
+            </p>
+            <p style="font-size: var(--scale-xl)">
+              <code>scale-xl</code>
+              <span>Headline 3</span>
+            </p>
+            <p style="font-size: var(--scale-lg)">
+              <code>scale-lg</code>
+              <span>Command Label, Headline 4</span>
+            </p>
+            <p style="font-size: var(--scale-base)">
+              <code>scale-base</code>
+              <span>Normal Text</span>
+            </p>
+            <p style="font-size: var(--scale-sm)">
+              <code>scale-sm</code>
+              <span>Small Text, Panel Footer</span>
+            </p>
+          </article>
+          <footer></footer>
+        </div>
+        <div class="panel">
+          <header><h2 id="colors">Colors</h2></header>
+          <article style="display: flex; gap: 3rem; flex-wrap: wrap">
             <div class="color-shades">
-              <h4>Primary</h4>
+              <h3>Primary</h3>
               <div class="fg100">FG 100</div>
               <div class="fg200">FG 200</div>
               <div class="bg600">BG 600</div>
@@ -100,7 +146,7 @@
               <div class="bg900">BG 900</div>
             </div>
             <div class="color-shades">
-              <h4>Primary Alt</h4>
+              <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>
@@ -109,7 +155,7 @@
               <div class="bg900 primary-alt">BG 900</div>
             </div>
             <div class="color-shades">
-              <h4>Accent</h4>
+              <h3>Accent</h3>
               <div class="fg100 accent">FG 100</div>
               <div class="fg200 accent">FG 200</div>
               <div class="bg600 accent">BG 600</div>
@@ -118,7 +164,7 @@
               <div class="bg900 accent">BG 900</div>
             </div>
             <div class="color-shades">
-              <h4>Accent Alt</h4>
+              <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>
@@ -127,7 +173,7 @@
               <div class="bg900 accent-alt">BG 900</div>
             </div>
             <div class="color-shades">
-              <h4>Warn</h4>
+              <h3>Warn</h3>
               <div class="fg100 warn">FG 100</div>
               <div class="fg200 warn">FG 200</div>
               <div class="bg600 warn">BG 600</div>
@@ -139,7 +185,12 @@
           <footer></footer>
         </div>
         <div class="panel">
-          <header>Commands</header>
+          <header><h2 id="spacing">Spacing</h2></header>
+          <article>TODO</article>
+          <footer></footer>
+        </div>
+        <div class="panel">
+          <header><h2 id="commands">Commands</h2></header>
           <article
             style="
               display: inline-grid;
@@ -148,23 +199,46 @@
               gap: 1rem;
             "
           >
-            <h4 style="grid-column: span 5">Default</h4>
+            <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 warn">Command</button>
-            <h4 style="grid-column: span 5">Default - Wrapping</h4>
+            <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 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 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 warn">Command</button>
+            <h3 style="grid-column: span 5">Disabled</h3>
+            <button disabled class="command">Command</button>
+            <button disabled class="command outline">Command</button>
+            <h3 style="grid-column: span 5">Wrapping</h3>
+            <p style="grid-column: span 5; max-width: 35rem">
+              The command's text is wrapped by default which increases the
+              height of the command.
+            </p>
             <button
               style="max-width: 20rem; grid-column: span 5"
               class="command"
             >
               A command with a quite long description.
             </button>
-            <h4 style="grid-column: span 5">Single line with ellipsis</h4>
             <p style="grid-column: span 5; max-width: 35rem">
-              A wrapper element is needed to achieve ellipsis. See page's source
-              code for details.
+              If you want to use ellipsis and a single line of text, a wrapper
+              element is needed. See page's source code for details.
             </p>
             <p style="grid-column: span 5; max-width: 35rem">
               Double check if ellipsis is really needed and if yes, that the
@@ -186,80 +260,94 @@
                 A command with a quite long description.
               </span>
             </button>
-            <h4 style="grid-column: span 5">Outline</h4>
-            <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 warn">Command</button>
-            <h4 style="grid-column: span 5">Flashing</h4>
-            <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 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 warn">Command</button>
-            <h4 style="grid-column: span 5">Disabled</h4>
-            <button disabled class="command">Command</button>
-            <button disabled class="command primary-alt">Command</button>
-            <button disabled class="command accent-alt">Command</button>
-            <button disabled class="command accent">Command</button>
-            <button disabled class="command warn">Command</button>
-            <button disabled class="command outline">Command</button>
-            <button disabled class="command outline primary-alt">
-              Command
-            </button>
-            <button disabled class="command outline accent-alt">Command</button>
-            <button disabled class="command outline accent">Command</button>
-            <button disabled class="command outline warn">Command</button>
-            <h4 style="grid-column: span 5">Compound</h4>
+            <h3 style="grid-column: span 5">Compound</h3>
             <div style="grid-column: span 5" class="compound-commands">
-              <button class="command outline">Any command</button>
-              <button class="command primary-alt outline"></button>
-              <div class="spacer outline"></div>
+              <button class="command">Command</button>
+              <button class="command"></button>
+              <div class="spacer"></div>
             </div>
+            <h4 style="grid-column: span 5">With Text</h4>
             <div style="grid-column: span 5" class="compound-commands">
               <button class="command">Command</button>
               <div class="text">47</div>
               <div class="spacer"></div>
             </div>
-            <h4 style="grid-column: span 5">Compound Vertical</h4>
+            <h4 style="grid-column: span 5">Vertical</h4>
             <div class="compound-commands vertical">
-              <button class="command">Command</button>
-              <div class="text">47</div>
               <div class="spacer"></div>
+              <button class="command">Command</button>
+              <button class="command"></button>
             </div>
           </article>
           <footer></footer>
         </div>
         <div class="panel">
-          <header>Input</header>
-          <article>
+          <header><h2 id="panels">Panels</h2></header>
+          <article style="display: grid; gap: var(--spacing)">
+            <h3>Without Header and Footer</h3>
+            <div class="panel">
+              <header></header>
+              <article>Content</article>
+              <footer></footer>
+            </div>
+            <h3>With Header and Footer</h3>
+            <div class="panel">
+              <header>Header</header>
+              <article>Content</article>
+              <footer>Footer</footer>
+            </div>
+            <h3>Stacking</h3>
+            <p>
+              The panel has a translucent background, so when stacking multiple
+              panels the background changes slightly with each level.
+            </p>
+            <div class="panel" style="margin: var(--spacing)">
+              <header></header>
+              <article>
+                <div class="panel" style="margin: var(--spacing)">
+                  <header></header>
+                  <article>
+                    <div class="panel" style="margin: var(--spacing)">
+                      <header></header>
+                      <article>Content</article>
+                      <footer></footer>
+                    </div>
+                  </article>
+                  <footer></footer>
+                </div>
+              </article>
+              <footer></footer>
+            </div>
+          </article>
+          <footer></footer>
+        </div>
+        <div class="panel">
+          <header><h2 id="input">Input</h2></header>
+          <article style="display: grid; gap: var(--spacing)">
+            <h3>Default</h3>
             <input class="input" />
+            <h3>Disabled</h3>
+            <input disabled class="input" />
           </article>
           <footer></footer>
         </div>
         <div class="panel">
-          <header>Spinner</header>
+          <header><h2 id="spinner">Spinner</h2></header>
           <article>
             <div>
-              <h4>80px</h4>
+              <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 warn" style="font-size: 80px"></div>
-              <h4>32px</h4>
+              <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 warn" style="font-size: 32px"></div>
-              <h4>16px</h4>
+              <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>
@@ -272,26 +360,5 @@
       </article>
       <footer>Ada Version 5.0.0</footer>
     </div>
-    <div
-      class="compound-commands"
-      style="
-        grid-template-columns: auto auto 12rem auto auto 1fr auto auto;
-        grid-column: span 2;
-      "
-    >
-      <div class="spacer"></div>
-      <button
-        class="command"
-        style="justify-items: center; align-items: center"
-      >
-        <div class="spinner" style="font-size: 30px"></div>
-      </button>
-      <button class="command accent-alt">Command</button>
-      <button class="command warn">Command</button>
-      <button disabled class="command">Disabled Command</button>
-      <div class="spacer"></div>
-      <div class="text">Ada</div>
-      <div class="spacer"></div>
-    </div>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ada-ui",
-  "version": "0.0.0-beta-v5-20240723124551",
+  "version": "0.0.0-beta-v5-20240723175252",
   "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/_command.scss

@@ -1,42 +1,40 @@
-@mixin button {
-  overflow: hidden;
-  outline: none;
-  color: var(--fg100);
-  font-family: inherit;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
-
-  &:disabled {
-    opacity: 0.6;
-    filter: saturate(0.2);
-    cursor: default;
-    pointer-events: none;
-  }
-}
-
 .command {
-  @include button;
   background-color: var(--bg900);
   box-shadow: var(--box-shadow);
   display: grid;
   align-items: end;
   justify-items: end;
   text-align: end;
-  font-size: 1.1rem;
   border-style: solid;
   border-color: transparent;
   border-width: 0 0 0 var(--focus-border-width);
-  padding: 0.25rem 0.6rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
   min-height: 3rem;
   min-width: 3rem;
-  border-radius: 0.3rem;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  outline: none;
+  color: var(--fg100);
+  font-family: inherit;
+  font-size: var(--scale-lg);
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 
   &.flash {
     animation: flash-background 1s ease-in-out infinite;
   }
 
+  &:disabled {
+    opacity: 0.7;
+    //filter: saturate(0.2);
+    cursor: default;
+    pointer-events: none;
+    background: #6d6d6d;
+    color: #ededed;
+  }
+
   &.outline {
     background-color: transparent;
     border-color: var(--bg800);
@@ -45,6 +43,11 @@
     &.flash {
       animation-name: flash-border;
     }
+
+    &:disabled {
+      background: transparent;
+      border-color: #6d6d6d;
+    }
   }
 
   &:focus {
@@ -61,7 +64,7 @@
 .compound-commands {
   display: inline-grid;
   grid-auto-flow: column;
-  gap: var(--gap);
+  gap: var(--spacing-sm);
 
   > .spacer {
     background-color: var(--bg900);
@@ -76,16 +79,16 @@
   }
 
   > .text {
-    font-size: 2rem;
-    line-height: 2rem;
+    font-size: var(--scale-3xl);
+    line-height: var(--scale-3xl);
     align-self: center;
-    padding: 0.25rem;
+    padding: var(--spacing-xs);
   }
 
-  > button,
+  > .command,
   .spacer {
     &:first-child {
-      border-radius: 0.3rem 0 0 0.3rem;
+      border-radius: var(--border-radius) 0 0 var(--border-radius);
     }
 
     &:not(:first-child):not(:last-child) {
@@ -93,7 +96,7 @@
     }
 
     &:last-child {
-      border-radius: 0 0.3rem 0.3rem 0;
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
     }
   }
 
@@ -104,14 +107,14 @@
       justify-self: center;
     }
 
-    > button,
+    > .command,
     .spacer {
       &:first-child {
-        border-radius: 0.3rem 0.3rem 0 0;
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
       }
 
       &:last-child {
-        border-radius: 0 0 0.3rem 0.3rem;
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
       }
     }
   }

package/scss/_commands.scss

@@ -28,7 +28,7 @@
 .commands {
   position: relative;
   display: grid;
-  gap: var(--gap);
+  gap: var(--command-gap);
 
   &:before,
   &:after {
@@ -40,8 +40,8 @@
 
   &:not(.vertical) {
     grid-auto-flow: column;
-    padding-left: calc(1rem + var(--gap));
-    padding-right: calc(1rem + var(--gap));
+    padding-left: calc(1rem + var(--command-gap));
+    padding-right: calc(1rem + var(--command-gap));
 
     &:before,
     &:after {
@@ -68,8 +68,8 @@
   &.vertical {
     grid-auto-flow: row;
     min-width: 12rem;
-    padding-top: calc(1rem + var(--gap));
-    padding-bottom: calc(1rem + var(--gap));
+    padding-top: calc(1rem + var(--command-gap));
+    padding-bottom: calc(1rem + var(--command-gap));
 
     &:before,
     &:after {

package/scss/_global.scss

@@ -1,13 +1,19 @@
 :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);
-  --gap-sm: 4px;
-  --gap: 6px;
-  --spacing: 0.8rem;
-  --border-width-sm: 0.08rem;
+  --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) {
     --font-size: 14px;

package/scss/_input.scss

@@ -1,17 +1,17 @@
 .input {
-  border-radius: 0.3rem;
+  border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   outline: none;
-  border: var(--border-width-sm) solid var(--bg700);
+  border: var(--border-width) solid var(--bg700);
   color: var(--fg100);
   font-family: inherit;
   background-color: transparent;
   transition: border-color 0.15s ease-in-out;
-  padding: 0.8rem;
-  font-size: 1.1rem;
+  padding: var(--spacing-sm);
+  font-size: var(--scale-base);
 
   &:focus {
-    border: var(--border-width-sm) solid var(--bg600);
+    border: var(--border-width) solid var(--bg600);
   }
   &:disabled {
     opacity: 0.4;

package/scss/_panel.scss

@@ -1,32 +1,47 @@
-@import "corner";
+%corner-base {
+  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: 0.3rem;
+  border-radius: var(--border-radius);
   display: grid;
   grid-template-rows: auto 1fr auto;
   overflow: auto;
 
   > header {
     position: relative;
-    //@extend %h3; --> TODO use font-size token
     @extend %header;
-    font-size: 1.5rem;
+    font-size: var(--scale-xl);
 
-    padding: 0.4rem 0.6rem;
+    padding: var(--spacing-sm) var(--spacing);
 
-    &:before {
-      @include corner("top-left");
+    &::before {
+      @extend %corner-base;
+      border-width: var(--border-width) 0 0 var(--border-width);
+      border-radius: var(--border-radius) 0 0 0;
+      left: 0;
+      top: 0;
     }
-    &:after {
-      @include corner("top-right");
+    &::after {
+      @extend %corner-base;
+      border-width: var(--border-width) var(--border-width) 0 0;
+      border-radius: 0 var(--border-radius) 0 0;
+      right: 0;
+      top: 0;
     }
   }
 
   > article {
     z-index: 1;
-    padding: 0 0.6rem;
+    padding: 0 var(--spacing);
     overflow: auto;
 
     &::-webkit-scrollbar {
@@ -47,15 +62,23 @@
     position: relative;
 
     color: var(--fg200);
-    padding: 0.4rem 0.6rem;
-    font-size: 0.75rem;
+    padding: var(--spacing-sm) var(--spacing);
+    font-size: var(--scale-sm);
     text-align: right;
 
-    &:before {
-      @include corner("bottom-left");
+    &::before {
+      @extend %corner-base;
+      border-width: 0 0 var(--border-width) var(--border-width);
+      border-radius: 0 0 0 var(--border-radius);
+      left: 0;
+      bottom: 0;
     }
-    &:after {
-      @include corner("bottom-right");
+    &::after {
+      @extend %corner-base;
+      border-width: 0 var(--border-width) var(--border-width) 0;
+      border-radius: 0 0 var(--border-radius) 0;
+      right: 0;
+      bottom: 0;
     }
   }
 }

package/scss/_spinner.scss

@@ -8,7 +8,7 @@
   box-sizing: border-box;
   animation: 6s 0.5s rotate ease-in-out alternate infinite;
 
-  &:before {
+  &::before {
     content: "";
     position: absolute;
     top: 0;
@@ -23,7 +23,7 @@
     box-shadow: 0px 12px 10px -12px #000a, 0px -12px 10px -12px #000a;
   }
 
-  &:after {
+  &::after {
     content: "";
     position: absolute;
     top: 0;

package/scss/_typography.scss

@@ -2,8 +2,6 @@ h1,
 h2,
 h3,
 h4,
-h5,
-h6,
 %header {
   font-weight: 300;
   text-shadow: 0 0 4px var(--bg700);
@@ -11,37 +9,17 @@ h6,
 }
 
 h1 {
-  font-size: 3rem;
-  margin: 1rem 0 2rem 0;
-
-  &.m-0 {
-    margin: 0;
-  }
+  font-size: var(--scale-3xl);
 }
 
 h2 {
-  font-size: 2rem;
-  margin: 1rem 0 1.5rem 0;
-
-  &.m-0 {
-    margin: 0;
-  }
+  font-size: var(--scale-2xl);
 }
 
 h3 {
-  font-size: 1.5rem;
-  margin: 0.5rem 0 1.5rem 0;
-
-  &.m-0 {
-    margin: 0;
-  }
+  font-size: var(--scale-xl);
 }
 
 h4 {
-  font-size: 1.2rem;
-  margin: 0.5rem 0 0.5rem 0;
-
-  &.m-0 {
-    margin: 0;
-  }
+  font-size: var(--scale-lg);
 }

package/scss/ada.blue-old.scss

@@ -0,0 +1,111 @@
+@import "ada.theme-base";
+
+.primary {
+  @extend %colourShades;
+
+  // old one, more blue-greenish
+  //--h: 197;
+  //--s: 100%;
+  //--l: 19%;
+  //--h-light: 197;
+  //--s-light: 100%;
+  //--l-light: 40%;
+
+  --h: 205;
+  --s: 80%;
+  --l: 23%;
+  --h-light: 205;
+  --s-light: 80%;
+  --l-light: 40%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+
+  //lch test
+  //--default: lch(26 29 260);
+  //--default-alpha70: lch(18 20 260);
+}
+
+:root {
+  @extend .primary;
+  // old one, more blue-greenish
+  //--bg: hsl(197, 80%, 7%);
+  --bg: hsl(207, 61%, 7%);
+}
+
+.shade1 {
+  @extend %colourShades;
+
+  --h: 198;
+  --s: 90%;
+  --l: 30%;
+  --h-light: 198;
+  --s-light: 90%;
+  --l-light: 58%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.shade2 {
+  @extend %colourShades;
+
+  // old one, more blue-greenish
+  //--h: 165;
+  //--s: 90%;
+  //--l: 20%;
+  //--h-light: 165;
+  //--s-light: 90%;
+  //--l-light: 40%;
+
+  --h: 185;
+  --s: 50%;
+  --l: 30%;
+  --h-light: 185;
+  --s-light: 50%;
+  --l-light: 50%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.accent {
+  @extend %colourShades;
+
+  // old one
+  //--h: 11;
+  //--s: 74%;
+  //--l: 45%;
+  //--h-light: 10;
+  //--s-light: 89%;
+  //--l-light: 56%;
+
+  --h: 146;
+  --s: 58%;
+  --l: 20%;
+  --h-light: 146;
+  --s-light: 58%;
+  --l-light: 48%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.warn {
+  @extend %colourShades;
+
+  --h: 0;
+  --s: 100%;
+  --l: 28%;
+  --h-light: 0;
+  --s-light: 85%;
+  --l-light: 48%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}

package/scss/ada.blue.scss

@@ -1,111 +1,68 @@
 @import "ada.theme-base";
 
+:root {
+  --bg-body: lch(5 8 260);
+
+  //Defaults to primary color
+  @extend .primary;
+}
+
 .primary {
   @extend %colourShades;
 
-  // old one, more blue-greenish
-  //--h: 197;
-  //--s: 100%;
-  //--l: 19%;
-  //--h-light: 197;
-  //--s-light: 100%;
-  //--l-light: 40%;
-
-  --h: 205;
-  --s: 80%;
-  --l: 23%;
-  --h-light: 205;
-  --s-light: 80%;
-  --l-light: 40%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-
-  //lch test
-  //--default: lch(26 29 260);
-  //--default-alpha70: lch(18 20 260);
-}
+  --100: 90 17 260;
+  --200: 70 17 260;
 
-:root {
-  @extend .primary;
-  // old one, more blue-greenish
-  //--bg: hsl(197, 80%, 7%);
-  --bg: hsl(207, 61%, 7%);
+  --600: 36 36 260;
+  --700: 29 30 260;
+  --800: 26 29 260;
+  --900: 19 23 260;
 }
 
-.shade1 {
+.primary-alt {
   @extend %colourShades;
 
-  --h: 198;
-  --s: 90%;
-  --l: 30%;
-  --h-light: 198;
-  --s-light: 90%;
-  --l-light: 58%;
+  --100: 90 17 246;
+  --200: 70 17 246;
 
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+  --600: 51 40 246;
+  --700: 44 34 246;
+  --800: 41 33 246;
+  --900: 34 27 246;
 }
 
-.shade2 {
+.accent {
   @extend %colourShades;
 
-  // old one, more blue-greenish
-  //--h: 165;
-  //--s: 90%;
-  //--l: 20%;
-  //--h-light: 165;
-  //--s-light: 90%;
-  //--l-light: 40%;
-
-  --h: 185;
-  --s: 50%;
-  --l: 30%;
-  --h-light: 185;
-  --s-light: 50%;
-  --l-light: 50%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+  --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 {
+.accent-alt {
   @extend %colourShades;
 
-  // old one
-  //--h: 11;
-  //--s: 74%;
-  //--l: 45%;
-  //--h-light: 10;
-  //--s-light: 89%;
-  //--l-light: 56%;
-
-  --h: 146;
-  --s: 58%;
-  --l: 20%;
-  --h-light: 146;
-  --s-light: 58%;
-  --l-light: 48%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+  --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 {
   @extend %colourShades;
 
-  --h: 0;
-  --s: 100%;
-  --l: 28%;
-  --h-light: 0;
-  --s-light: 85%;
-  --l-light: 48%;
+  --100: 90 17 40;
+  --200: 70 17 40;
 
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
+  --600: 40 75 40;
+  --700: 33 69 40;
+  --800: 30 68 40;
+  --900: 23 62 40;
 }

package/css/ada.blue-new.css

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

package/scss/_corner.scss

@@ -1,47 +0,0 @@
-@mixin corner($location, $style: "default") {
-  --corner-border-width: var(--border-width);
-
-  content: "";
-  border-style: solid;
-  border-color: var(--bg800);
-  position: absolute;
-  height: 1rem;
-  width: 1rem;
-  z-index: 2;
-
-  @if $style == "light" {
-    --corner-border-width: var(--border-width-sm);
-
-    border-color: var(--bg700);
-    height: 0.75rem;
-    width: 0.75rem;
-  }
-
-  @if $location == "top-left" {
-    border-width: var(--corner-border-width) 0 0 var(--corner-border-width);
-    border-radius: 0.3rem 0 0 0;
-    left: 0;
-    top: 0;
-  }
-
-  @if $location == "top-right" {
-    border-width: var(--corner-border-width) var(--corner-border-width) 0 0;
-    border-radius: 0 0.3rem 0 0;
-    right: 0;
-    top: 0;
-  }
-
-  @if $location == "bottom-left" {
-    border-width: 0 0 var(--corner-border-width) var(--corner-border-width);
-    border-radius: 0 0 0 0.3rem;
-    left: 0;
-    bottom: 0;
-  }
-
-  @if $location == "bottom-right" {
-    border-width: 0 var(--corner-border-width) var(--corner-border-width) 0;
-    border-radius: 0 0 0.3rem 0;
-    right: 0;
-    bottom: 0;
-  }
-}

package/scss/ada.blue-new.scss

@@ -1,68 +0,0 @@
-@import "ada.theme-base";
-
-:root {
-  --bg-body: lch(5 8 260);
-
-  //Defaults to primary color
-  @extend .primary;
-}
-
-.primary {
-  @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;
-}
-
-.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;
-}
-
-.accent {
-  @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;
-}
-
-.accent-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;
-}
-
-.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;
-}

package/todo

@@ -1,6 +0,0 @@
-- Introduce tokens as css variables
-  - Spacing
-  - Font Sizes
-- Correctly put `:` for pseudo classes and `::` for pseudo elements
-- Only one disabled style for all colors?
-- headlines w/ or w/o margin?