use light-dark() function

basher · Nov 14, 2024 · c927cc8 · c927cc8
1 parent cc41796
commit c927cc8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
diff --git a/ui/package.json b/ui/package.json
@@ -2,7 +2,7 @@
     "name": "web-ui-boilerplate",
     "description": "UI boilerplate for websites/webapps using vanilla HTML/CSS/JavaScript, powered by Storybook, bundled by Parcel.",
     "author": "basher",
-    "version": "4.0.3",
+    "version": "4.0.4",
     "license": "ISC",
     "repository": {
         "type": "git",

diff --git a/ui/src/css/base/colors-to-json.scss b/ui/src/css/base/colors-to-json.scss
@@ -14,7 +14,7 @@ TODO:
 /**
 * @sass-export-section="main theme colours"
 */
-$color-primary-100: hsl(var(--webui-color-brand) / 20%);
+$color-primary-100: hsl(var(--webui-color-brand) / 30%);
 $color-primary-500: hsl(var(--webui-color-brand));
 
 /**
@@ -29,10 +29,10 @@ $color-neutral-darkest: hsl(var(--webui-color-neutral-900));
 /**
 * @sass-export-section="other accent colours"
 */
-$color-success-100: hsl(var(--webui-color-accent-positive) / 10%);
+$color-success-100: hsl(var(--webui-color-accent-positive) / 30%);
 $color-success-500: hsl(var(--webui-color-accent-positive));
-$color-error-100: hsl(var(--webui-color-accent-negative) / 10%);
+$color-error-100: hsl(var(--webui-color-accent-negative) / 30%);
 $color-error-500: hsl(var(--webui-color-accent-negative));
-$color-notify-100: hsl(var(--webui-color-accent-neutral) / 10%);
+$color-notify-100: hsl(var(--webui-color-accent-neutral) / 30%);
 $color-notify-500: hsl(var(--webui-color-accent-neutral));
 $color-focus: hsl(var(--webui-color-state-focus));
diff --git a/ui/src/css/global/reset.css b/ui/src/css/global/reset.css
@@ -37,8 +37,11 @@ html {
         scroll-behavior: smooth;
     }
 
-    background-color: Canvas;
-    color: CanvasText;
+    background-color: light-dark(
+        var(--color-neutral-lightest),
+        var(--color-neutral-dark)
+    );
+    color: light-dark(var(--color-neutral-darkest), var(--color-neutral-light));
     min-block-size: 100vh; /* 100dvb might have performance implications */
 }