@semanticus/semanticus-css 2.2.0 → 3.1.0

package/src/palettes/cyan.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-cyan-550), var(--_color-cyan-350));
+  --primary-background-color: var(--_color-cyan-550);
 }

package/src/palettes/fuchsia.css

@@ -1,31 +1,30 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(
+    var(--_color-fuchsia-550),
+    var(--_color-fuchsia-350)
+  );
+  --primary-background-color: var(--_color-fuchsia-550);
 }

package/src/palettes/green.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-green-550), var(--_color-green-350));
+  --primary-background-color: var(--_color-green-550);
 }

package/src/palettes/grey.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* 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));
+  --primary-color: light-dark(var(--_color-grey-550), var(--_color-grey-350));
+  --primary-background-color: var(--_color-grey-300);
 }

package/src/palettes/indigo.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-indigo-550), var(--_color-indigo-350));
+  --primary-background-color: var(--_color-indigo-600);
 }

package/src/palettes/jade.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-jade-550), var(--_color-jade-350));
+  --primary-background-color: var(--_color-jade-550);
 }

package/src/palettes/lime.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* 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));
+  --primary-color: light-dark(var(--_color-lime-550), var(--_color-lime-350));
+  --primary-background-color: var(--_color-lime-200);
 }

package/src/palettes/orange.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-orange-550), var(--_color-orange-350));
+  --primary-background-color: var(--_color-orange-500);
 }

package/src/palettes/pink.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-pink-550), var(--_color-pink-350));
+  --primary-background-color: var(--_color-pink-500);
 }

package/src/palettes/pumpkin.css

@@ -1,31 +1,30 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* 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));
+  --primary-color: light-dark(
+    var(--_color-pumpkin-550),
+    var(--_color-pumpkin-350)
+  );
+  --primary-background-color: var(--_color-pumpkin-300);
 }

package/src/palettes/purple.css

@@ -1,31 +1,27 @@
 :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); */
+  /* --_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); */
 
   /* 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;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-purple-550), var(--_color-purple-350));
+  --primary-background-color: var(--_color-purple-600);
 }