@semanticus/semanticus-css 0.9.0 → 1.1.0

package/src/palettes/lime.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Lime
-  Overrides primary color variables for the lime palette
-*/
+:root,
+:host {
+  /* --color-lime-950: #101203; */
+  /* --color-lime-900: #191d03; */
+  /* --color-lime-850: #202902; */
+  /* --color-lime-800: #273500; */
+  /* --color-lime-750: #304100; */
+  /* --color-lime-700: #394d00; */
+  /* --color-lime-650: #435a00; */
+  /* --color-lime-600: #4d6600; */
+  --color-lime-550: #577400;
+  /* --color-lime-500: #628100; */
+  /* --color-lime-450: #6c8f00; */
+  /* --color-lime-400: #779c00; */
+  --color-lime-350: #82ab00;
+  /* --color-lime-300: #8eb901; */
+  /* --color-lime-250: #99c801; */
+  --color-lime-200: #a5d601;
+  /* --color-lime-150: #b2e51a; */
+  /* --color-lime-100: #c1f335; */
+  /* --color-lime-50: #defc85; */
+  /* --color-lime: var(--color-lime-550); */
 
-/* Light theme - Lime */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(132, 195, 41, 0.25);
-  --color-primary-rgb: 92, 138, 18;
-  --color-primary-bg: #b3e373;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(92, 138, 18, 0.5);
-  --color-primary-hover: #466b0e;
-  --color-primary-hover-bg: #bfea85;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(132, 195, 41, 0.5);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-/* Dark theme - Lime */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(156, 220, 60, 0.1875);
-    --color-primary-rgb: 156, 220, 60;
-    --color-primary-bg: #b3e373;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(156, 220, 60, 0.5);
-    --color-primary-hover: #b3e56b;
-    --color-primary-hover-bg: #c2e98c;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(156, 220, 60, 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-lime-550), var(--color-lime-350));
+  --color-primary-fill: var(--color-lime-200);
+  --color-primary-on-fill: black;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(156, 220, 60, 0.1875);
-  --color-primary-rgb: 156, 220, 60;
-  --color-primary-bg: #b3e373;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(156, 220, 60, 0.5);
-  --color-primary-hover: #b3e56b;
-  --color-primary-hover-bg: #c2e98c;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(156, 220, 60, 0.375);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  /* System 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/orange.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Orange
-  Overrides primary color variables for the orange palette
-*/
+:root,
+:host {
+  /* --color-orange-950: #1b0d06; */
+  /* --color-orange-900: #2d1509; */
+  /* --color-orange-850: #411a0a; */
+  /* --color-orange-800: #561e0a; */
+  /* --color-orange-750: #6b220a; */
+  /* --color-orange-700: #7f270b; */
+  /* --color-orange-650: #942d0d; */
+  /* --color-orange-600: #a83410; */
+  --color-orange-550: #bd3c13;
+  --color-orange-500: #d24317;
+  /* --color-orange-450: #e74b1a; */
+  /* --color-orange-400: #f45d2c; */
+  --color-orange-350: #f56b3d;
+  /* --color-orange-300: #f68e68; */
+  /* --color-orange-250: #f8a283; */
+  /* --color-orange-200: #f8b79f; */
+  /* --color-orange-150: #f8cab9; */
+  /* --color-orange-100: #f9dcd2; */
+  /* --color-orange-50: #faeeea; */
+  /* --color-orange: var(--color-orange-550); */
 
-/* Light theme - Orange */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(255, 129, 70, 0.25);
-  --color-primary-rgb: 191, 77, 0;
-  --color-primary-bg: #cf5300;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(191, 77, 0, 0.5);
-  --color-primary-hover: #993d00;
-  --color-primary-hover-bg: #b74900;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(255, 129, 70, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Orange */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(255, 158, 112, 0.1875);
-    --color-primary-rgb: 255, 158, 112;
-    --color-primary-bg: #cf5300;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(255, 158, 112, 0.5);
-    --color-primary-hover: #ffb695;
-    --color-primary-hover-bg: #e65c00;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(255, 158, 112, 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-orange-550), var(--color-orange-350));
+  --color-primary-fill: var(--color-orange-500);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(255, 158, 112, 0.1875);
-  --color-primary-rgb: 255, 158, 112;
-  --color-primary-bg: #cf5300;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(255, 158, 112, 0.5);
-  --color-primary-hover: #ffb695;
-  --color-primary-hover-bg: #e65c00;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(255, 158, 112, 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/pink.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Pink
-  Overrides primary color variables for the pink palette
-*/
+:root,
+:host {
+  /* --color-pink-950: #25060c; */
+  /* --color-pink-900: #380916; */
+  /* --color-pink-850: #4b0c1f; */
+  /* --color-pink-800: #5f0e28; */
+  /* --color-pink-750: #740f31; */
+  /* --color-pink-700: #88143b; */
+  /* --color-pink-650: #9d1945; */
+  /* --color-pink-600: #b21e4f; */
+  --color-pink-550: #c72259;
+  --color-pink-500: #d92662;
+  /* --color-pink-450: #f42c6f; */
+  /* --color-pink-400: #f6547e; */
+  --color-pink-350: #f7708e;
+  /* --color-pink-300: #f8889e; */
+  /* --color-pink-250: #f99eae; */
+  /* --color-pink-200: #f9b4be; */
+  /* --color-pink-150: #f9c8ce; */
+  /* --color-pink-100: #f9dbdf; */
+  /* --color-pink-50: #fbedef; */
+  /* --color-pink: var(--color-pink-550); */
 
-/* Light theme - Pink */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(246, 84, 126, 0.25);
-  --color-primary-rgb: 199, 34, 89;
-  --color-primary-bg: #d92662;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(199, 34, 89, 0.5);
-  --color-primary-hover: #9d1945;
-  --color-primary-hover-bg: #b21e4f;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(246, 84, 126, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Pink */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(248, 136, 158, 0.1875);
-    --color-primary-rgb: 248, 136, 158;
-    --color-primary-bg: #d92662;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(248, 136, 158, 0.5);
-    --color-primary-hover: #f9b4be;
-    --color-primary-hover-bg: #f42c6f;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(248, 136, 158, 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-pink-550), var(--color-pink-350));
+  --color-primary-fill: var(--color-pink-500);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(248, 136, 158, 0.1875);
-  --color-primary-rgb: 248, 136, 158;
-  --color-primary-bg: #d92662;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(248, 136, 158, 0.5);
-  --color-primary-hover: #f9b4be;
-  --color-primary-hover-bg: #f42c6f;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(248, 136, 158, 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/pumpkin.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Pumpkin
-  Overrides primary color variables for the pumpkin palette
-*/
+:root,
+:host {
+  /* --color-pumpkin-950: #180f04; */
+  /* --color-pumpkin-900: #271805; */
+  /* --color-pumpkin-850: #372004; */
+  /* --color-pumpkin-800: #482802; */
+  /* --color-pumpkin-750: #593100; */
+  /* --color-pumpkin-700: #693a00; */
+  /* --color-pumpkin-650: #7a4400; */
+  /* --color-pumpkin-600: #8b4f00; */
+  --color-pumpkin-550: #9c5900;
+  /* --color-pumpkin-500: #ad6400; */
+  /* --color-pumpkin-450: #bf6e00; */
+  /* --color-pumpkin-400: #d27a01; */
+  --color-pumpkin-350: #e48500;
+  --color-pumpkin-300: #ff9500;
+  /* --color-pumpkin-250: #ffa23a; */
+  /* --color-pumpkin-200: #feb670; */
+  /* --color-pumpkin-150: #fcca9b; */
+  /* --color-pumpkin-100: #fcdcc1; */
+  /* --color-pumpkin-50: #fceee3; */
+  /* --color-pumpkin: var(--color-pumpkin-550); */
 
-/* Light theme - Pumpkin */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(232, 120, 62, 0.25);
-  --color-primary-rgb: 158, 56, 6;
-  --color-primary-bg: #f4a37d;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(158, 56, 6, 0.5);
-  --color-primary-hover: #7a2b05;
-  --color-primary-hover-bg: #f6b091;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(232, 120, 62, 0.5);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-/* Dark theme - Pumpkin */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(243, 153, 111, 0.1875);
-    --color-primary-rgb: 243, 153, 111;
-    --color-primary-bg: #f4a37d;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(243, 153, 111, 0.5);
-    --color-primary-hover: #f5b7a8;
-    --color-primary-hover-bg: #f5b7a8;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(243, 153, 111, 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-pumpkin-550), var(--color-pumpkin-350));
+  --color-primary-fill: var(--color-pumpkin-300);
+  --color-primary-on-fill: black;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(243, 153, 111, 0.1875);
-  --color-primary-rgb: 243, 153, 111;
-  --color-primary-bg: #f4a37d;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(243, 153, 111, 0.5);
-  --color-primary-hover: #f5b7a8;
-  --color-primary-hover-bg: #f5b7a8;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(243, 153, 111, 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/purple.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Purple
-  Overrides primary color variables for the purple palette
-*/
+:root,
+:host {
+  /* --color-purple-950: #1e0820; */
+  /* --color-purple-900: #2d0f33; */
+  /* --color-purple-850: #3d1545; */
+  /* --color-purple-800: #4d1a57; */
+  /* --color-purple-750: #5e206b; */
+  /* --color-purple-700: #6f277d; */
+  /* --color-purple-650: #802e90; */
+  --color-purple-600: #9236a4;
+  --color-purple-550: #aa40bf;
+  /* --color-purple-500: #b645cd; */
+  /* --color-purple-450: #c652dc; */
+  /* --color-purple-400: #cd68e0; */
+  --color-purple-350: #d47de4;
+  /* --color-purple-300: #db90e8; */
+  /* --color-purple-250: #e2a3eb; */
+  /* --color-purple-200: #e7b6ee; */
+  /* --color-purple-150: #edc9f1; */
+  /* --color-purple-100: #f2dcf4; */
+  /* --color-purple-50: #f8eef9; */
+  /* --color-purple: var(--color-purple-550); */
 
-/* Light theme - Purple */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(205, 104, 224, 0.25);
-  --color-primary-rgb: 146, 54, 164;
-  --color-primary-bg: #9236a4;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(146, 54, 164, 0.5);
-  --color-primary-hover: #802e90;
-  --color-primary-hover-bg: #802e90;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(205, 104, 224, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Purple */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(219, 144, 232, 0.1875);
-    --color-primary-rgb: 219, 144, 232;
-    --color-primary-bg: #9236a4;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(219, 144, 232, 0.5);
-    --color-primary-hover: #e7b6ee;
-    --color-primary-hover-bg: #aa40bf;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(219, 144, 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-purple-550), var(--color-purple-350));
+  --color-primary-fill: var(--color-purple-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(219, 144, 232, 0.1875);
-  --color-primary-rgb: 219, 144, 232;
-  --color-primary-bg: #9236a4;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(219, 144, 232, 0.5);
-  --color-primary-hover: #e7b6ee;
-  --color-primary-hover-bg: #aa40bf;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(219, 144, 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/red.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Red
-  Overrides primary color variables for the red palette
-*/
+:root,
+:host {
+  /* --color-red-950: #1c0d06; */
+  /* --color-red-900: #30130a; */
+  /* --color-red-850: #45150c; */
+  /* --color-red-800: #5c160d; */
+  /* --color-red-750: #72170f; */
+  /* --color-red-700: #861d13; */
+  /* --color-red-650: #9b2318; */
+  /* --color-red-600: #af291d; */
+  --color-red-550: #c52f21;
+  /* --color-red-500: #d93526; */
+  /* --color-red-450: #ee402e; */
+  /* --color-red-400: #f06048; */
+  --color-red-350: #f17961;
+  /* --color-red-300: #f38f79; */
+  /* --color-red-250: #f5a390; */
+  /* --color-red-200: #f5b7a8; */
+  /* --color-red-150: #f6cabf; */
+  /* --color-red-100: #f8dcd6; */
+  /* --color-red-50: #faeeeb; */
+  /* --color-red: var(--color-red-550); */
 
-/* Light theme - Red */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(240, 96, 72, 0.25);
-  --color-primary-rgb: 197, 47, 33;
-  --color-primary-bg: #c52f21;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(197, 47, 33, 0.5);
-  --color-primary-hover: #9b2318;
-  --color-primary-hover-bg: #af291d;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(240, 96, 72, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Red */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(243, 143, 121, 0.1875);
-    --color-primary-rgb: 243, 143, 121;
-    --color-primary-bg: #c52f21;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(243, 143, 121, 0.5);
-    --color-primary-hover: #f5b7a8;
-    --color-primary-hover-bg: #ee402e;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(243, 143, 121, 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-red-550), var(--color-red-350));
+  --color-primary-fill: var(--color-red-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(243, 143, 121, 0.1875);
-  --color-primary-rgb: 243, 143, 121;
-  --color-primary-bg: #c52f21;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(243, 143, 121, 0.5);
-  --color-primary-hover: #f5b7a8;
-  --color-primary-hover-bg: #ee402e;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(243, 143, 121, 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/sand.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Sand
-  Overrides primary color variables for the sand palette
-*/
+:root,
+:host {
+  /* --color-sand-950: #111110; */
+  /* --color-sand-900: #1c1b19; */
+  /* --color-sand-850: #272622; */
+  /* --color-sand-800: #32302b; */
+  /* --color-sand-750: #3d3b35; */
+  /* --color-sand-700: #49463f; */
+  /* --color-sand-650: #55524a; */
+  /* --color-sand-600: #615e55; */
+  --color-sand-550: #6e6a60;
+  /* --color-sand-500: #7b776b; */
+  /* --color-sand-450: #888377; */
+  /* --color-sand-400: #959082; */
+  --color-sand-350: #a39e8f;
+  /* --color-sand-300: #b0ab9b; */
+  /* --color-sand-250: #beb8a7; */
+  --color-sand-200: #ccc6b4;
+  /* --color-sand-150: #dad4c2; */
+  /* --color-sand-100: #e8e2d2; */
+  /* --color-sand-50: #f2f0ec; */
+  /* --color-sand: var(--color-sand-550); */
 
-/* Light theme - Sand */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(181, 157, 119, 0.25);
-  --color-primary-rgb: 107, 87, 51;
-  --color-primary-bg: #e6d5b8;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(107, 87, 51, 0.5);
-  --color-primary-hover: #544229;
-  --color-primary-hover-bg: #ebdcc3;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(181, 157, 119, 0.5);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-/* Dark theme - Sand */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(201, 178, 140, 0.1875);
-    --color-primary-rgb: 201, 178, 140;
-    --color-primary-bg: #e6d5b8;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(201, 178, 140, 0.5);
-    --color-primary-hover: #dcc6a5;
-    --color-primary-hover-bg: #ebdcc3;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(201, 178, 140, 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-sand-550), var(--color-sand-350));
+  --color-primary-fill: var(--color-sand-200);
+  --color-primary-on-fill: black;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(201, 178, 140, 0.1875);
-  --color-primary-rgb: 201, 178, 140;
-  --color-primary-bg: #e6d5b8;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(201, 178, 140, 0.5);
-  --color-primary-hover: #dcc6a5;
-  --color-primary-hover-bg: #ebdcc3;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(201, 178, 140, 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));
 }