@semanticus/semanticus-css 0.3.0

package/src/index.css

@@ -0,0 +1,20 @@
+/**
+ * Semanticus CSS Full
+ * Variables + Normalize + Semantics + Utilities
+ * The complete framework - everything included
+ */
+
+/* Global variables */
+@import './_variables.css';
+
+/* Normalize */
+@import './_normalize.css';
+
+/* Semantics */
+@import './semantics/modules.css';
+
+/* Variants */
+@import './variants/modules.css';
+
+/* Utilities */
+@import './utilities/modules.css';

package/src/palettes/amber.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Amber
+  Overrides primary color variables for the amber palette
+*/
+
+/* Light theme - Amber */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(183, 136, 0, 0.25);
+  --color-primary: #876400;
+  --color-primary-bg: #ffbf00;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(135, 100, 0, 0.5);
+  --color-primary-hover: #694d00;
+  --color-primary-hover-bg: #e8ae01;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(183, 136, 0, 0.5);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}
+
+/* Dark theme - Amber */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(199, 148, 0, 0.1875);
+    --color-primary: #c79400;
+    --color-primary-bg: #ffbf00;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(199, 148, 0, 0.5);
+    --color-primary-hover: #e8ae01;
+    --color-primary-hover-bg: #fecc63;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(199, 148, 0, 0.375);
+    --color-primary-inverse: #000;
+    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(199, 148, 0, 0.1875);
+  --color-primary: #c79400;
+  --color-primary-bg: #ffbf00;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(199, 148, 0, 0.5);
+  --color-primary-hover: #e8ae01;
+  --color-primary-hover-bg: #fecc63;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(199, 148, 0, 0.375);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}

package/src/palettes/blue.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Blue
+  Overrides primary color variables for the blue palette
+*/
+
+/* 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: #2060df;
+  --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: #8999f9;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(137, 153, 249, 0.1875);
+  --color-primary: #8999f9;
+  --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);
+}

package/src/palettes/cyan.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Cyan
+  Overrides primary color variables for the cyan palette
+*/
+
+/* 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: #047878;
+  --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: #0ac2c2;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(11, 194, 194, 0.1875);
+  --color-primary: #0ac2c2;
+  --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);
+}

package/src/palettes/fuchsia.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Fuchsia
+  Overrides primary color variables for the fuchsia palette
+*/
+
+/* 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: #c1208b;
+  --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: #f983c7;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(249, 131, 199, 0.1875);
+  --color-primary: #f983c7;
+  --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);
+}

package/src/palettes/green.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Green
+  Overrides primary color variables for the green palette
+*/
+
+/* 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: #2b7a4c;
+  --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: #6ed59d;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(110, 213, 157, 0.1875);
+  --color-primary: #6ed59d;
+  --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);
+}

package/src/palettes/grey.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Grey
+  Overrides primary color variables for the grey palette
+*/
+
+/* 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: #5c6b82;
+  --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: #afbdd4;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(175, 189, 212, 0.1875);
+  --color-primary: #afbdd4;
+  --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);
+}

package/src/palettes/indigo.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Indigo
+  Overrides primary color variables for the indigo palette
+*/
+
+/* 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: #524ed2;
+  --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: #b0a3e8;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(176, 163, 232, 0.1875);
+  --color-primary: #b0a3e8;
+  --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);
+}

package/src/palettes/jade.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Jade
+  Overrides primary color variables for the jade palette
+*/
+
+/* 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: #199363;
+  --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: #6ee7af;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(110, 231, 175, 0.1875);
+  --color-primary: #6ee7af;
+  --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);
+}

package/src/palettes/lime.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Lime
+  Overrides primary color variables for the lime palette
+*/
+
+/* 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: #5c8a12;
+  --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: #9cdc3c;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(156, 220, 60, 0.1875);
+  --color-primary: #9cdc3c;
+  --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);
+}

package/src/palettes/orange.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Orange
+  Overrides primary color variables for the orange palette
+*/
+
+/* 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: #bf4d00;
+  --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: #ff9e70;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(255, 158, 112, 0.1875);
+  --color-primary: #ff9e70;
+  --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);
+}

package/src/palettes/pink.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Pink
+  Overrides primary color variables for the pink palette
+*/
+
+/* 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: #c72259;
+  --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: #f8889e;
+    --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);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(248, 136, 158, 0.1875);
+  --color-primary: #f8889e;
+  --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);
+}