@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/palettes/blue.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Blue
-  Overrides primary color variables for the blue palette
-*/
+:root,
+:host {
+  /* --color-blue-950: #080f2d; */
+  /* --color-blue-900: #0c1a41; */
+  /* --color-blue-850: #0e2358; */
+  /* --color-blue-800: #0f2d70; */
+  /* --color-blue-750: #0f3888; */
+  /* --color-blue-700: #1343a0; */
+  /* --color-blue-650: #184eb8; */
+  /* --color-blue-600: #1d59d0; */
+  --color-blue-550: #2060df;
+  /* --color-blue-500: #3c71f7; */
+  /* --color-blue-450: #5c7ef8; */
+  /* --color-blue-400: #748bf8; */
+  --color-blue-350: #8999f9;
+  /* --color-blue-300: #9ca7fa; */
+  /* --color-blue-250: #aeb5fb; */
+  /* --color-blue-200: #bfc3fa; */
+  /* --color-blue-150: #d0d2fa; */
+  /* --color-blue-100: #e0e1fa; */
+  /* --color-blue-50: #f0f0fb; */
+  /* --color-blue: var(--color-blue-550); */
 
-/* Light theme - Blue */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(116, 139, 248, 0.25);
-  --color-primary-rgb: 32, 96, 223;
-  --color-primary-bg: #2060df;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(32, 96, 223, 0.5);
-  --color-primary-hover: #184eb8;
-  --color-primary-hover-bg: #1d59d0;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(116, 139, 248, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Blue */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(137, 153, 249, 0.1875);
-    --color-primary-rgb: 137, 153, 249;
-    --color-primary-bg: #2060df;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(137, 153, 249, 0.5);
-    --color-primary-hover: #aeb5fb;
-    --color-primary-hover-bg: #3c71f7;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(137, 153, 249, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-blue-550), var(--color-blue-350));
+  --color-primary-fill: var(--color-blue-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(137, 153, 249, 0.1875);
-  --color-primary-rgb: 137, 153, 249;
-  --color-primary-bg: #2060df;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(137, 153, 249, 0.5);
-  --color-primary-hover: #aeb5fb;
-  --color-primary-hover-bg: #3c71f7;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(137, 153, 249, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/cyan.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Cyan
-  Overrides primary color variables for the cyan palette
-*/
+:root,
+:host {
+  /* --color-cyan-950: #041413; */
+  /* --color-cyan-900: #051f1f; */
+  /* --color-cyan-850: #052b2b; */
+  /* --color-cyan-800: #043737; */
+  /* --color-cyan-750: #014343; */
+  /* --color-cyan-700: #015050; */
+  /* --color-cyan-650: #025d5d; */
+  /* --color-cyan-600: #046a6a; */
+  --color-cyan-550: #047878;
+  /* --color-cyan-500: #058686; */
+  /* --color-cyan-450: #059494; */
+  /* --color-cyan-400: #05a2a2; */
+  --color-cyan-350: #0ab1b1;
+  /* --color-cyan-300: #0ac2c2; */
+  /* --color-cyan-250: #0ccece; */
+  /* --color-cyan-200: #25dddd; */
+  /* --color-cyan-150: #3deceb; */
+  /* --color-cyan-100: #58faf9; */
+  /* --color-cyan-50: #c3fcfa; */
+  /* --color-cyan: var(--color-cyan-550); */
 
-/* Light theme - Cyan */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(92, 167, 250, 0.25);
-  --color-primary-rgb: 4, 120, 120;
-  --color-primary-bg: #047878;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(4, 120, 120, 0.5);
-  --color-primary-hover: #025d5d;
-  --color-primary-hover-bg: #046a6a;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(92, 167, 250, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Cyan */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(11, 194, 194, 0.1875);
-    --color-primary-rgb: 10, 194, 194;
-    --color-primary-bg: #047878;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(11, 194, 194, 0.5);
-    --color-primary-hover: #25dddd;
-    --color-primary-hover-bg: #058686;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(11, 194, 194, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-cyan-550), var(--color-cyan-350));
+  --color-primary-fill: var(--color-cyan-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(11, 194, 194, 0.1875);
-  --color-primary-rgb: 10, 194, 194;
-  --color-primary-bg: #047878;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(11, 194, 194, 0.5);
-  --color-primary-hover: #25dddd;
-  --color-primary-hover-bg: #058686;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(11, 194, 194, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/fuchsia.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Fuchsia
-  Overrides primary color variables for the fuchsia palette
-*/
+:root,
+:host {
+  /* --color-fuchsia-950: #230518; */
+  /* --color-fuchsia-900: #360925; */
+  /* --color-fuchsia-850: #480b33; */
+  /* --color-fuchsia-800: #5c0d41; */
+  /* --color-fuchsia-750: #700e4f; */
+  /* --color-fuchsia-700: #84135e; */
+  /* --color-fuchsia-650: #98176d; */
+  /* --color-fuchsia-600: #ac1c7c; */
+  --color-fuchsia-550: #c1208b;
+  /* --color-fuchsia-500: #d9269d; */
+  /* --color-fuchsia-450: #ed2aac; */
+  /* --color-fuchsia-400: #f748b7; */
+  --color-fuchsia-350: #f869bf;
+  /* --color-fuchsia-300: #f983c7; */
+  /* --color-fuchsia-250: #fa9acf; */
+  /* --color-fuchsia-200: #f9b1d8; */
+  /* --color-fuchsia-150: #f9c6e1; */
+  /* --color-fuchsia-100: #f9daea; */
+  /* --color-fuchsia-50: #fbedf4; */
+  /* --color-fuchsia: var(--color-fuchsia-550); */
 
-/* Light theme - Fuchsia */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(247, 72, 183, 0.25);
-  --color-primary-rgb: 193, 32, 139;
-  --color-primary-bg: #c1208b;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(193, 32, 139, 0.5);
-  --color-primary-hover: #98176d;
-  --color-primary-hover-bg: #ac1c7c;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(247, 72, 183, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Fuchsia */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(249, 131, 199, 0.1875);
-    --color-primary-rgb: 249, 131, 199;
-    --color-primary-bg: #c1208b;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(249, 131, 199, 0.5);
-    --color-primary-hover: #f9b1d8;
-    --color-primary-hover-bg: #ed2aac;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(249, 131, 199, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-fuchsia-550), var(--color-fuchsia-350));
+  --color-primary-fill: var(--color-fuchsia-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(249, 131, 199, 0.1875);
-  --color-primary-rgb: 249, 131, 199;
-  --color-primary-bg: #c1208b;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(249, 131, 199, 0.5);
-  --color-primary-hover: #f9b1d8;
-  --color-primary-hover-bg: #ed2aac;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(249, 131, 199, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/green.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Green
-  Overrides primary color variables for the green palette
-*/
+:root,
+:host {
+  /* --color-green-950: #0b1305; */
+  /* --color-green-900: #131f07; */
+  /* --color-green-850: #152b07; */
+  /* --color-green-800: #173806; */
+  /* --color-green-750: #1a4405; */
+  /* --color-green-700: #205107; */
+  /* --color-green-650: #265e09; */
+  /* --color-green-600: #2c6c0c; */
+  --color-green-550: #33790f;
+  /* --color-green-500: #398712; */
+  /* --color-green-450: #409614; */
+  /* --color-green-400: #47a417; */
+  --color-green-350: #4eb31b;
+  /* --color-green-300: #55c21e; */
+  /* --color-green-250: #5dd121; */
+  /* --color-green-200: #62d926; */
+  /* --color-green-150: #77ef3d; */
+  /* --color-green-100: #95fb62; */
+  /* --color-green-50: #d7fbc1; */
+  /* --color-green: var(--color-green-550); */
 
-/* Light theme - Green */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(92, 199, 142, 0.25);
-  --color-primary-rgb: 43, 122, 76;
-  --color-primary-bg: #2b7a4c;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(43, 122, 76, 0.5);
-  --color-primary-hover: #20603b;
-  --color-primary-hover-bg: #256d43;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(92, 199, 142, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Green */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(110, 213, 157, 0.1875);
-    --color-primary-rgb: 110, 213, 157;
-    --color-primary-bg: #2b7a4c;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(110, 213, 157, 0.5);
-    --color-primary-hover: #93deb5;
-    --color-primary-hover-bg: #348e59;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(110, 213, 157, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-green-550), var(--color-green-350));
+  --color-primary-fill: var(--color-green-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(110, 213, 157, 0.1875);
-  --color-primary-rgb: 110, 213, 157;
-  --color-primary-bg: #2b7a4c;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(110, 213, 157, 0.5);
-  --color-primary-hover: #93deb5;
-  --color-primary-hover-bg: #348e59;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(110, 213, 157, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/grey.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Grey
-  Overrides primary color variables for the grey palette
-*/
+:root,
+:host {
+  /* --color-grey-950: #111111; */
+  /* --color-grey-900: #1b1b1b; */
+  /* --color-grey-850: #262626; */
+  /* --color-grey-800: #303030; */
+  /* --color-grey-750: #3b3b3b; */
+  /* --color-grey-700: #474747; */
+  /* --color-grey-650: #525252; */
+  /* --color-grey-600: #5e5e5e; */
+  --color-grey-550: #6a6a6a;
+  /* --color-grey-500: #777777; */
+  /* --color-grey-450: #808080; */
+  /* --color-grey-400: #919191; */
+  --color-grey-350: #9e9e9e;
+  --color-grey-300: #ababab;
+  /* --color-grey-250: #b9b9b9; */
+  /* --color-grey-200: #c6c6c6; */
+  /* --color-grey-150: #d4d4d4; */
+  /* --color-grey-100: #e2e2e2; */
+  /* --color-grey-50: #f1f1f1; */
+  /* --color-grey: var(--color-grey-550); */
 
-/* Light theme - Grey */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(138, 153, 175, 0.25);
-  --color-primary-rgb: 92, 107, 130;
-  --color-primary-bg: #bfc7d9;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(92, 107, 130, 0.5);
-  --color-primary-hover: #48536b;
-  --color-primary-hover-bg: #aab4c9;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(138, 153, 175, 0.5);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-/* Dark theme - Grey */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(175, 189, 212, 0.1875);
-    --color-primary-rgb: 175, 189, 212;
-    --color-primary-bg: #bfc7d9;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(175, 189, 212, 0.5);
-    --color-primary-hover: #c9d3e3;
-    --color-primary-hover-bg: #c9d3e3;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(175, 189, 212, 0.375);
-    --color-primary-inverse: #000;
-    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-grey-550), var(--color-grey-350));
+  --color-primary-fill: var(--color-grey-300);
+  --color-primary-on-fill: black;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(175, 189, 212, 0.1875);
-  --color-primary-rgb: 175, 189, 212;
-  --color-primary-bg: #bfc7d9;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(175, 189, 212, 0.5);
-  --color-primary-hover: #c9d3e3;
-  --color-primary-hover-bg: #c9d3e3;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(175, 189, 212, 0.375);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0.5rem oklch(0% 0 0deg / 0.25), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
 }

package/src/palettes/indigo.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Indigo
-  Overrides primary color variables for the indigo palette
-*/
+:root,
+:host {
+  /* --color-indigo-950: #110b31; */
+  /* --color-indigo-900: #181546; */
+  /* --color-indigo-850: #1f1e5e; */
+  /* --color-indigo-800: #272678; */
+  /* --color-indigo-750: #2f2f92; */
+  /* --color-indigo-700: #3838ab; */
+  /* --color-indigo-650: #4040bf; */
+  --color-indigo-600: #524ed2;
+  --color-indigo-550: #655cd6;
+  /* --color-indigo-500: #7569da; */
+  /* --color-indigo-450: #8577dd; */
+  /* --color-indigo-400: #9486e1; */
+  --color-indigo-350: #a294e5;
+  /* --color-indigo-300: #b0a3e8; */
+  /* --color-indigo-250: #bdb2ec; */
+  /* --color-indigo-200: #cac1ee; */
+  /* --color-indigo-150: #d8d0f1; */
+  /* --color-indigo-100: #e5e0f4; */
+  /* --color-indigo-50: #f2f0f9; */
+  /* --color-indigo: var(--color-indigo-550); */
 
-/* Light theme - Indigo */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(148, 134, 225, 0.25);
-  --color-primary-rgb: 82, 78, 210;
-  --color-primary-bg: #524ed2;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(82, 78, 210, 0.5);
-  --color-primary-hover: #4040bf;
-  --color-primary-hover-bg: #4040bf;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(148, 134, 225, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Indigo */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(176, 163, 232, 0.1875);
-    --color-primary-rgb: 176, 163, 232;
-    --color-primary-bg: #524ed2;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(176, 163, 232, 0.5);
-    --color-primary-hover: #cac1ee;
-    --color-primary-hover-bg: #655cd6;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(176, 163, 232, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-indigo-550), var(--color-indigo-350));
+  --color-primary-fill: var(--color-indigo-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(176, 163, 232, 0.1875);
-  --color-primary-rgb: 176, 163, 232;
-  --color-primary-bg: #524ed2;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(176, 163, 232, 0.5);
-  --color-primary-hover: #cac1ee;
-  --color-primary-hover-bg: #655cd6;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(176, 163, 232, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/jade.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Jade
-  Overrides primary color variables for the jade palette
-*/
+:root,
+:host {
+  /* --color-jade-950: #04140c; */
+  /* --color-jade-900: #052014; */
+  /* --color-jade-850: #042c1b; */
+  /* --color-jade-800: #033823; */
+  /* --color-jade-750: #00452b; */
+  /* --color-jade-700: #015234; */
+  /* --color-jade-650: #005f3d; */
+  /* --color-jade-600: #006d46; */
+  --color-jade-550: #007a50;
+  /* --color-jade-500: #00895a; */
+  /* --color-jade-450: #029764; */
+  /* --color-jade-400: #00a66e; */
+  --color-jade-350: #00b478;
+  /* --color-jade-300: #00c482; */
+  /* --color-jade-250: #00cc88; */
+  /* --color-jade-200: #21e299; */
+  /* --color-jade-150: #39f1a6; */
+  /* --color-jade-100: #70fcba; */
+  /* --color-jade-50: #cbfce1; */
+  /* --color-jade: var(--color-jade-550); */
 
-/* Light theme - Jade */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(96, 206, 155, 0.25);
-  --color-primary-rgb: 25, 147, 99;
-  --color-primary-bg: #199363;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(25, 147, 99, 0.5);
-  --color-primary-hover: #147a51;
-  --color-primary-hover-bg: #16885b;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(96, 206, 155, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Jade */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(110, 231, 175, 0.1875);
-    --color-primary-rgb: 110, 231, 175;
-    --color-primary-bg: #199363;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(110, 231, 175, 0.5);
-    --color-primary-hover: #93edc3;
-    --color-primary-hover-bg: #1ea672;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(110, 231, 175, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-jade-550), var(--color-jade-350));
+  --color-primary-fill: var(--color-jade-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(110, 231, 175, 0.1875);
-  --color-primary-rgb: 110, 231, 175;
-  --color-primary-bg: #199363;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(110, 231, 175, 0.5);
-  --color-primary-hover: #93edc3;
-  --color-primary-hover-bg: #1ea672;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(110, 231, 175, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }