ada-ui 5.3.1 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # ada-ui
 
+## 5.5.0
+
+### Minor Changes
+
+- 0ca0582: Renamed primary color to default
+- 9336950: Aligned input height with command height
+- 462ca48: Made blue theme a bit darker
+
+### Patch Changes
+
+- 5cdd331: Moved base l and c values into specific theme
+
+## 5.4.0
+
+### Minor Changes
+
+- 063ef97: Add npx script to generate one complete css file
+
 ## 5.3.1
 
 ### Patch Changes

package/README.md

@@ -34,10 +34,10 @@ e.g.:
 
 - Releases are created via GitHub Actions using
   [Changesets](https://github.com/changesets/changesets)
-- When adding changes which needs a version update, add a changeset by running
+- When adding changes which need a version update, add a changeset by running
   `npm run changeset`
 - When the changes are done, commit/merge your branch which will create/update a
   Release PR (opened by a bot) that incorporates the changesets to update the
   changelog and version number
 - When ready for release, merge the Release PR
-- For creating prereleases (snapshots), run `npm run snapshot <prerelease-tag>`
+- For creating prereleases (snapshots), add a new comment to your PR which contains only `/snapshot`

package/css/ada.blue.css

@@ -1 +1 @@
-.warn,.shade2,.shade3,.shade1,.primary,:root{--l-base: 0.31;--c-base: 0.07;--bg-body: var(--color950);--fg-body: var(--color100);--color100: oklch(0.91 0.05 var(--hue));--color500: oklch( calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue) );--color600: oklch( calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue) );--color700: oklch( calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue) );--color800: oklch(var(--l-base) var(--c-base) var(--hue));--color950: oklch(0.18 0.03 var(--hue));--panel-background: oklch(var(--500) / 0.1)}.light-theme.warn,.light-theme.shade2,.light-theme.shade3,.light-theme.shade1,.light-theme.primary,.light-theme:root,:root.light-theme .warn,:root.light-theme .shade2,:root.light-theme .shade3,:root.light-theme .shade1,:root.light-theme .primary,:root.light-theme :root{--l-base: 0.4;--c-base: 0.1;--bg-body: var(--color100);--fg-body: var(--color800)}.primary,:root{--hue: 246}.shade1{--hue: 225}.shade3{--hue: 165}.shade2{--hue: 190}.warn{--hue: 29}
+.warn,.shade3,.shade2,.shade1,.default,:root{--bg-body: var(--color950);--fg-body: var(--color100);--bg-body-light: var(--color100);--fg-body-light: var(--color800);--color100: oklch(0.91 0.05 var(--hue));--color500: oklch( calc(var(--l-base) + 0.15) calc(var(--c-base) + 0.06) var(--hue) );--color600: oklch( calc(var(--l-base) + 0.1) calc(var(--c-base) + 0.04) var(--hue) );--color700: oklch( calc(var(--l-base) + 0.05) calc(var(--c-base) + 0.02) var(--hue) );--color800: oklch(var(--l-base) var(--c-base) var(--hue));--color950: oklch(0.18 0.03 var(--hue));--panel-background: oklch(var(--500) / 0.1)}.light-theme.warn,.light-theme.shade3,.light-theme.shade2,.light-theme.shade1,.light-theme.default,.light-theme:root,:root.light-theme .warn,:root.light-theme .shade3,:root.light-theme .shade2,:root.light-theme .shade1,:root.light-theme .default,:root.light-theme :root{--l-base: var(--l-light-base);--c-base: var(--c-light-base);--bg-body: var(--bg-body-light);--fg-body: var(--fg-body-light)}:root{--l-base: 0.26;--c-base: 0.06;--l-light-base: 0.4;--c-light-base: 0.1}.default,:root{--hue: 246}.shade1{--hue: 225}.shade2{--hue: 190}.shade3{--hue: 165}.warn{--hue: 29}

package/css/ada.css

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--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;--spacing-lg: 14px;--border-width: 2px;--border-radius: 0.3rem}@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)}.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(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:1rem;padding:var(--spacing);background:var(--bg-body);color:var(--fg-body);transition:background-color .15s ease-in-out}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}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(--color800);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:var(--border-width);padding:var(--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[data-label][data-abbr]::after{content:attr(data-abbr)}@media(min-width: 640px){.command[data-label][data-abbr]::after{content:attr(data-label)}}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:active{color:var(--color100)}.command:focus{border-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.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(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-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,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--color700);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:empty{padding:0}.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:empty{padding:0}.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(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
+*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--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;--spacing-lg: 14px;--border-width: 2px;--border-radius: 0.3rem}@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)}.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(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:1rem;padding:var(--spacing);background:var(--bg-body);color:var(--fg-body);transition:background-color .15s ease-in-out}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}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(--color800);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:var(--border-width);padding:var(--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[data-label][data-abbr]::after{content:attr(data-abbr)}@media(min-width: 640px){.command[data-label][data-abbr]::after{content:attr(data-label)}}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color700);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:active{color:var(--color100)}.command:focus{border-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.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(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing);font-size:var(--scale-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,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--color700);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:empty{padding:0}.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:empty{padding:0}.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(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}

package/index.html

@@ -121,7 +121,7 @@
           <article style="display: grid; gap: var(--spacing)">
             <div class="colors">
               <div class="color-shades">
-                <h4>Primary</h4>
+                <h4>Default</h4>
                 <div class="color100">100</div>
                 <div class="color500">500</div>
                 <div class="color600">600</div>
@@ -210,7 +210,6 @@
               gap: 1rem;
             "
           >
-            <h3>Default</h3>
             <div class="row">
               <button class="command">Command</button>
               <button class="command shade1">Command</button>
@@ -275,10 +274,7 @@
               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
-              class="warn"
-              style="font-size: var(--scale-lg); color: var(--fg-body)"
-            >
+            <p class="warn" style="color: var(--fg-body)">
               Double check if ellipsis is really needed and if yes, that the
               full text is visible with another interaction (no tooltip, since
               not mobile friendly and not in the sense of the Ada look and
@@ -366,7 +362,6 @@
         <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" />

package/install.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+"use strict";
+
+import { writeFile, readFile } from "fs/promises";
+import { fileURLToPath } from "url";
+import { resolve, dirname } from "path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const run = async (theme) => {
+  const themeFile = await readFile(
+    resolve(__dirname, "css", `ada.${theme}.css`),
+    "utf8",
+  );
+  const baseFile = await readFile(resolve(__dirname, "css", "ada.css"), "utf8");
+
+  const themeSuffix = theme === "blue" ? "" : `-${theme}`;
+  writeFile(`ada${themeSuffix}.css`, themeFile.trim() + baseFile.trim());
+};
+
+const theme = process.argv[2] ?? "blue";
+run(theme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ada-ui",
-  "version": "5.3.1",
+  "version": "5.5.0",
   "scripts": {
     "dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
     "build": "rm -rf css && sass scss:css -s compressed --no-source-map",
@@ -8,6 +8,8 @@
     "remove-snapshot": "f(){ if [ -z \"$1\" ]; then echo \"Error: No tag name specified, exiting.\"; exit 1; fi; npm dist-tag rm ada-ui $1; }; f",
     "version": "npm run build && changeset version"
   },
+  "bin": "install.js",
+  "type": "module",
   "license": "MIT",
   "exports": {
     ".": "./css/ada.css",

package/scss/_ada.theme-base.scss

@@ -1,15 +1,16 @@
 %colourShades {
-  --l-base: 0.31;
-  --c-base: 0.07;
   --bg-body: var(--color950);
   --fg-body: var(--color100);
 
+  --bg-body-light: var(--color100);
+  --fg-body-light: var(--color800);
+
   &.light-theme,
   :root.light-theme & {
-    --l-base: 0.4;
-    --c-base: 0.1;
-    --bg-body: var(--color100);
-    --fg-body: var(--color800);
+    --l-base: var(--l-light-base);
+    --c-base: var(--c-light-base);
+    --bg-body: var(--bg-body-light);
+    --fg-body: var(--fg-body-light);
   }
 
   --color100: oklch(0.91 0.05 var(--hue));

package/scss/_input.scss

@@ -7,7 +7,7 @@
   font-family: inherit;
   background-color: transparent;
   transition: border-color 0.15s ease-in-out;
-  padding: var(--spacing-sm);
+  padding: var(--spacing);
   font-size: var(--scale-base);
 
   &:focus {

package/scss/ada.blue.scss

@@ -1,11 +1,15 @@
 @import "ada.theme-base";
 
 :root {
-  //Defaults to primary color
-  @extend .primary;
+  @extend .default;
+  --l-base: 0.26;
+  --c-base: 0.06;
+
+  --l-light-base: 0.4;
+  --c-light-base: 0.1;
 }
 
-.primary {
+.default {
   @extend %colourShades;
   --hue: 246;
 }
@@ -15,14 +19,14 @@
   --hue: 225;
 }
 
-.shade3 {
+.shade2 {
   @extend %colourShades;
-  --hue: 165;
+  --hue: 190;
 }
 
-.shade2 {
+.shade3 {
   @extend %colourShades;
-  --hue: 190;
+  --hue: 165;
 }
 
 .warn {