ada-ui 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # ada-ui
 
+## 5.4.0
+
+### Minor Changes
+
+- 063ef97: Add npx script to generate one complete css file
+
+## 5.3.1
+
+### Patch Changes
+
+- d04cec7: Simplify light theme logic by using a hard-coded light theme lightness and chroma base
+
 ## 5.3.0
 
 ### Minor 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: var(--l-base-override, 0.31);--c-base: var(--c-base-override, 0.07);--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));--bg-body: var(--bg-body-override, var(--color950));--fg-body: var(--fg-body-override, var(--color100));--panel-background: oklch(var(--500) / 0.1)}:root.light-theme .warn,:root.light-theme .shade2,:root.light-theme .shade3,:root.light-theme .shade1,:root.light-theme .primary,:root.light-theme :root,:root.light-theme{--l-base-override: 0.4;--c-base-override: 0.1;--bg-body-override: var(--color100);--fg-body-override: var(--color800)}.primary,:root{--hue: 246}.shade1{--hue: 225}.shade3{--hue: 165}.shade2{--hue: 190}.warn{--hue: 29}
+.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}

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.0",
+  "version": "5.4.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,6 +1,17 @@
 %colourShades {
-  --l-base: var(--l-base-override, 0.31);
-  --c-base: var(--c-base-override, 0.07);
+  --l-base: 0.31;
+  --c-base: 0.07;
+  --bg-body: var(--color950);
+  --fg-body: var(--color100);
+
+  &.light-theme,
+  :root.light-theme & {
+    --l-base: 0.4;
+    --c-base: 0.1;
+    --bg-body: var(--color100);
+    --fg-body: var(--color800);
+  }
+
   --color100: oklch(0.91 0.05 var(--hue));
 
   --color500: oklch(
@@ -16,7 +27,5 @@
 
   --color950: oklch(0.18 0.03 var(--hue));
 
-  --bg-body: var(--bg-body-override, var(--color950));
-  --fg-body: var(--fg-body-override, var(--color100));
   --panel-background: oklch(var(--500) / 0.1);
 }

package/scss/ada.blue.scss

@@ -1,73 +1,31 @@
 @import "ada.theme-base";
 
-// The whole logic of setting the variables
-// for every class to ensure the colors are all
-// correct for all variants is quite repetitive.
-// This needs improvement
-
-%light-override {
-  //Set overrides for light theme
-  --l-base-override: 0.4;
-  --c-base-override: 0.1;
-  --bg-body-override: var(--color100);
-  --fg-body-override: var(--color800);
-}
-
 :root {
   //Defaults to primary color
   @extend .primary;
-
-  &.light-theme {
-    @extend %light-override;
-  }
 }
 
 .primary {
   @extend %colourShades;
-
-  :root.light-theme & {
-    @extend %light-override;
-  }
-
   --hue: 246;
 }
 
 .shade1 {
   @extend %colourShades;
-
-  :root.light-theme & {
-    @extend %light-override;
-  }
-
   --hue: 225;
 }
 
 .shade3 {
   @extend %colourShades;
-
-  :root.light-theme & {
-    @extend %light-override;
-  }
-
   --hue: 165;
 }
 
 .shade2 {
   @extend %colourShades;
-
-  :root.light-theme & {
-    @extend %light-override;
-  }
-
   --hue: 190;
 }
 
 .warn {
   @extend %colourShades;
-
-  :root.light-theme & {
-    @extend %light-override;
-  }
-
   --hue: 29;
 }