From 6198d39a81e3e9c0cb428d123a179182763f3901 Mon Sep 17 00:00:00 2001
From: Yohn <john.skem9@gmail.com>
Date: Sat, 18 Jan 2025 13:09:47 -0500
Subject: [PATCH] Ability to add a custom theme dark and light colors

---
 scss/_settings.scss                    |  10 +
 scss/themes/default/_theme-colors.scss | 961 +++++++++++++------------
 2 files changed, 492 insertions(+), 479 deletions(-)

diff --git a/scss/_settings.scss b/scss/_settings.scss
index 081656eda..bc7f91668 100644
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -198,3 +198,13 @@ $modules: map.merge(
   ),
   $modules
 );
+
+// Custom theme mappings
+$color-mappings: () !default;
+// Check if custom theme mappings are provided and merge them
+$custom-theme-mappings: () !default;
+$color-mappings: if(
+  list.length($custom-theme-mappings) > 0,
+  map.merge($color-mappings, $custom-theme-mappings),
+  $color-mappings
+);
diff --git a/scss/themes/default/_theme-colors.scss b/scss/themes/default/_theme-colors.scss
index 25bd376d5..70c04bc99 100644
--- a/scss/themes/default/_theme-colors.scss
+++ b/scss/themes/default/_theme-colors.scss
@@ -3,487 +3,490 @@
 @use "../../colors" as *;
 @use "../../settings" as *;
 
-$color-mappings: (
-  "amber": (
-    "dark": (
-      "text-selection-color": rgba($amber-350, 0.1875),
-      "primary": $amber-350,
-      "primary-background": $amber-200,
-      "primary-underline": rgba($amber-350, 0.5),
-      "primary-hover": $amber-250,
-      "primary-hover-background": $amber-150,
-      "primary-focus": rgba($amber-350, 0.375),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-    "light": (
-      "text-selection-color": rgba($amber-400, 0.25),
-      "primary": $amber-550,
-      "primary-background": $amber-200,
-      "primary-underline": rgba($amber-550, 0.5),
-      "primary-hover": $amber-650,
-      "primary-hover-background": $amber-250,
-      "primary-focus": rgba($amber-400, 0.5),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-  ),
-  "azure": (
-    "dark": (
-      "text-selection-color": rgba($azure-350, 0.1875),
-      "primary": $azure-350,
-      "primary-background": $azure-550,
-      "primary-underline": rgba($azure-350, 0.5),
-      "primary-hover": $azure-250,
-      "primary-hover-background": $azure-500,
-      "primary-focus": rgba($azure-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($azure-400, 0.25),
-      "primary": $azure-550,
-      "primary-background": $azure-550,
-      "primary-underline": rgba($azure-550, 0.5),
-      "primary-hover": $azure-650,
-      "primary-hover-background": $azure-600,
-      "primary-focus": rgba($azure-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "blue": (
-    "dark": (
-      "text-selection-color": rgba($blue-350, 0.1875),
-      "primary": $blue-350,
-      "primary-background": $blue-550,
-      "primary-underline": rgba($blue-350, 0.5),
-      "primary-hover": $blue-250,
-      "primary-hover-background": $blue-500,
-      "primary-focus": rgba($blue-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($blue-400, 0.25),
-      "primary": $blue-550,
-      "primary-background": $blue-550,
-      "primary-underline": rgba($blue-550, 0.5),
-      "primary-hover": $blue-650,
-      "primary-hover-background": $blue-600,
-      "primary-focus": rgba($blue-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "cyan": (
-    "dark": (
-      "text-selection-color": rgba($cyan-350, 0.1875),
-      "primary": $cyan-350,
-      "primary-background": $cyan-550,
-      "primary-underline": rgba($cyan-350, 0.5),
-      "primary-hover": $cyan-250,
-      "primary-hover-background": $cyan-500,
-      "primary-focus": rgba($cyan-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($cyan-400, 0.25),
-      "primary": $cyan-550,
-      "primary-background": $cyan-550,
-      "primary-underline": rgba($cyan-550, 0.5),
-      "primary-hover": $cyan-650,
-      "primary-hover-background": $cyan-600,
-      "primary-focus": rgba($cyan-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "fuchsia": (
-    "dark": (
-      "text-selection-color": rgba($fuchsia-350, 0.1875),
-      "primary": $fuchsia-350,
-      "primary-background": $fuchsia-550,
-      "primary-underline": rgba($fuchsia-350, 0.5),
-      "primary-hover": $fuchsia-250,
-      "primary-hover-background": $fuchsia-500,
-      "primary-focus": rgba($fuchsia-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($fuchsia-400, 0.25),
-      "primary": $fuchsia-550,
-      "primary-background": $fuchsia-550,
-      "primary-underline": rgba($fuchsia-550, 0.5),
-      "primary-hover": $fuchsia-650,
-      "primary-hover-background": $fuchsia-600,
-      "primary-focus": rgba($fuchsia-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "green": (
-    "dark": (
-      "text-selection-color": rgba($green-350, 0.1875),
-      "primary": $green-350,
-      "primary-background": $green-500,
-      "primary-underline": rgba($green-350, 0.5),
-      "primary-hover": $green-250,
-      "primary-hover-background": $green-450,
-      "primary-focus": rgba($green-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($green-400, 0.25),
-      "primary": $green-550,
-      "primary-background": $green-500,
-      "primary-underline": rgba($green-550, 0.5),
-      "primary-hover": $green-650,
-      "primary-hover-background": $green-550,
-      "primary-focus": rgba($green-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "grey": (
-    "dark": (
-      "text-selection-color": rgba($grey-350, 0.1875),
-      "primary": $grey-350,
-      "primary-background": $grey-300,
-      "primary-underline": rgba($grey-350, 0.5),
-      "primary-hover": $grey-250,
-      "primary-hover-background": $grey-250,
-      "primary-focus": rgba($grey-350, 0.375),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-    "light": (
-      "text-selection-color": rgba($grey-400, 0.25),
-      "primary": $grey-550,
-      "primary-background": $grey-300,
-      "primary-underline": rgba($grey-550, 0.5),
-      "primary-hover": $grey-650,
-      "primary-hover-background": $grey-350,
-      "primary-focus": rgba($grey-400, 0.5),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-  ),
-  "indigo": (
-    "dark": (
-      "text-selection-color": rgba($indigo-350, 0.1875),
-      "primary": $indigo-350,
-      "primary-background": $indigo-600,
-      "primary-underline": rgba($indigo-350, 0.5),
-      "primary-hover": $indigo-250,
-      "primary-hover-background": $indigo-550,
-      "primary-focus": rgba($indigo-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($indigo-400, 0.25),
-      "primary": $indigo-550,
-      "primary-background": $indigo-600,
-      "primary-underline": rgba($indigo-550, 0.5),
-      "primary-hover": $indigo-650,
-      "primary-hover-background": $indigo-650,
-      "primary-focus": rgba($indigo-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "jade": (
-    "dark": (
-      "text-selection-color": rgba($jade-350, 0.1875),
-      "primary": $jade-350,
-      "primary-background": $jade-550,
-      "primary-underline": rgba($jade-350, 0.5),
-      "primary-hover": $jade-250,
-      "primary-hover-background": $jade-500,
-      "primary-focus": rgba($jade-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($jade-400, 0.25),
-      "primary": $jade-550,
-      "primary-background": $jade-550,
-      "primary-underline": rgba($jade-550, 0.5),
-      "primary-hover": $jade-650,
-      "primary-hover-background": $jade-600,
-      "primary-focus": rgba($jade-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "lime": (
-    "dark": (
-      "text-selection-color": rgba($lime-350, 0.1875),
-      "primary": $lime-350,
-      "primary-background": $lime-200,
-      "primary-underline": rgba($lime-350, 0.5),
-      "primary-hover": $lime-250,
-      "primary-hover-background": $lime-150,
-      "primary-focus": rgba($lime-350, 0.375),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-    "light": (
-      "text-selection-color": rgba($lime-400, 0.25),
-      "primary": $lime-550,
-      "primary-background": $lime-200,
-      "primary-underline": rgba($lime-550, 0.5),
-      "primary-hover": $lime-650,
-      "primary-hover-background": $lime-250,
-      "primary-focus": rgba($lime-400, 0.5),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-  ),
-  "orange": (
-    "dark": (
-      "text-selection-color": rgba($orange-350, 0.1875),
-      "primary": $orange-350,
-      "primary-background": $orange-500,
-      "primary-underline": rgba($orange-350, 0.5),
-      "primary-hover": $orange-250,
-      "primary-hover-background": $orange-450,
-      "primary-focus": rgba($orange-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($orange-400, 0.25),
-      "primary": $orange-550,
-      "primary-background": $orange-500,
-      "primary-underline": rgba($orange-550, 0.5),
-      "primary-hover": $orange-650,
-      "primary-hover-background": $orange-550,
-      "primary-focus": rgba($orange-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "pink": (
-    "dark": (
-      "text-selection-color": rgba($pink-350, 0.1875),
-      "primary": $pink-350,
-      "primary-background": $pink-500,
-      "primary-underline": rgba($pink-350, 0.5),
-      "primary-hover": $pink-250,
-      "primary-hover-background": $pink-450,
-      "primary-focus": rgba($pink-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($pink-400, 0.25),
-      "primary": $pink-550,
-      "primary-background": $pink-500,
-      "primary-underline": rgba($pink-550, 0.5),
-      "primary-hover": $pink-650,
-      "primary-hover-background": $pink-550,
-      "primary-focus": rgba($pink-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "pumpkin": (
-    "dark": (
-      "text-selection-color": rgba($pumpkin-350, 0.1875),
-      "primary": $pumpkin-350,
-      "primary-background": $pumpkin-300,
-      "primary-underline": rgba($pumpkin-350, 0.5),
-      "primary-hover": $pumpkin-250,
-      "primary-hover-background": $pumpkin-250,
-      "primary-focus": rgba($pumpkin-350, 0.375),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-    "light": (
-      "text-selection-color": rgba($pumpkin-400, 0.25),
-      "primary": $pumpkin-550,
-      "primary-background": $pumpkin-300,
-      "primary-underline": rgba($pumpkin-550, 0.5),
-      "primary-hover": $pumpkin-650,
-      "primary-hover-background": $pumpkin-350,
-      "primary-focus": rgba($pumpkin-400, 0.5),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-  ),
-  "purple": (
-    "dark": (
-      "text-selection-color": rgba($purple-350, 0.1875),
-      "primary": $purple-350,
-      "primary-background": $purple-600,
-      "primary-underline": rgba($purple-350, 0.5),
-      "primary-hover": $purple-250,
-      "primary-hover-background": $purple-550,
-      "primary-focus": rgba($purple-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($purple-400, 0.25),
-      "primary": $purple-550,
-      "primary-background": $purple-600,
-      "primary-underline": rgba($purple-550, 0.5),
-      "primary-hover": $purple-650,
-      "primary-hover-background": $purple-650,
-      "primary-focus": rgba($purple-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "red": (
-    "dark": (
-      "text-selection-color": rgba($red-350, 0.1875),
-      "primary": $red-350,
-      "primary-background": $red-550,
-      "primary-underline": rgba($red-350, 0.5),
-      "primary-hover": $red-250,
-      "primary-hover-background": $red-500,
-      "primary-focus": rgba($red-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($red-400, 0.25),
-      "primary": $red-550,
-      "primary-background": $red-550,
-      "primary-underline": rgba($red-550, 0.5),
-      "primary-hover": $red-650,
-      "primary-hover-background": $red-600,
-      "primary-focus": rgba($red-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "sand": (
-    "dark": (
-      "text-selection-color": rgba($sand-350, 0.1875),
-      "primary": $sand-350,
-      "primary-background": $sand-200,
-      "primary-underline": rgba($sand-350, 0.5),
-      "primary-hover": $sand-250,
-      "primary-hover-background": $sand-150,
-      "primary-focus": rgba($sand-350, 0.375),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-    "light": (
-      "text-selection-color": rgba($sand-400, 0.25),
-      "primary": $sand-550,
-      "primary-background": $sand-200,
-      "primary-underline": rgba($sand-550, 0.5),
-      "primary-hover": $sand-650,
-      "primary-hover-background": $sand-250,
-      "primary-focus": rgba($sand-400, 0.5),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-  ),
-  "slate": (
-    "dark": (
-      "text-selection-color": rgba($slate-350, 0.1875),
-      "primary": $slate-350,
-      "primary-background": $slate-600,
-      "primary-underline": rgba($slate-350, 0.5),
-      "primary-hover": $slate-250,
-      "primary-hover-background": $slate-550,
-      "primary-focus": rgba($slate-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($slate-400, 0.25),
-      "primary": $slate-550,
-      "primary-background": $slate-600,
-      "primary-underline": rgba($slate-550, 0.5),
-      "primary-hover": $slate-650,
-      "primary-hover-background": $slate-650,
-      "primary-focus": rgba($slate-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "violet": (
-    "dark": (
-      "text-selection-color": rgba($violet-350, 0.1875),
-      "primary": $violet-350,
-      "primary-background": $violet-600,
-      "primary-underline": rgba($violet-350, 0.5),
-      "primary-hover": $violet-250,
-      "primary-hover-background": $violet-550,
-      "primary-focus": rgba($violet-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($violet-400, 0.25),
-      "primary": $violet-550,
-      "primary-background": $violet-600,
-      "primary-underline": rgba($violet-550, 0.5),
-      "primary-hover": $violet-650,
-      "primary-hover-background": $violet-650,
-      "primary-focus": rgba($violet-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-  ),
-  "yellow": (
-    "dark": (
-      "text-selection-color": rgba($yellow-350, 0.1875),
-      "primary": $yellow-350,
-      "primary-background": $yellow-100,
-      "primary-underline": rgba($yellow-350, 0.5),
-      "primary-hover": $yellow-250,
-      "primary-hover-background": color.mix($yellow-100, $yellow-50),
-      "primary-focus": rgba($yellow-350, 0.375),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-    "light": (
-      "text-selection-color": rgba($yellow-400, 0.25),
-      "primary": $yellow-550,
-      "primary-background": $yellow-100,
-      "primary-underline": rgba($yellow-550, 0.5),
-      "primary-hover": $yellow-650,
-      "primary-hover-background": $yellow-150,
-      "primary-focus": rgba($yellow-400, 0.5),
-      "primary-inverse": $black,
-      "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
-    ),
-  ),
-  "zinc": (
-    "dark": (
-      "text-selection-color": rgba($zinc-350, 0.1875),
-      "primary": $zinc-350,
-      "primary-background": $zinc-550,
-      "primary-underline": rgba($zinc-350, 0.5),
-      "primary-hover": $zinc-250,
-      "primary-hover-background": $zinc-500,
-      "primary-focus": rgba($zinc-350, 0.375),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
-    ),
-    "light": (
-      "text-selection-color": rgba($zinc-400, 0.25),
-      "primary": $zinc-550,
-      "primary-background": $zinc-550,
-      "primary-underline": rgba($zinc-550, 0.5),
-      "primary-hover": $zinc-650,
-      "primary-hover-background": $zinc-600,
-      "primary-focus": rgba($zinc-400, 0.5),
-      "primary-inverse": $white,
-      "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+$color-mappings: map.merge(
+  (
+    "amber": (
+      "dark": (
+        "text-selection-color": rgba($amber-350, 0.1875),
+        "primary": $amber-350,
+        "primary-background": $amber-200,
+        "primary-underline": rgba($amber-350, 0.5),
+        "primary-hover": $amber-250,
+        "primary-hover-background": $amber-150,
+        "primary-focus": rgba($amber-350, 0.375),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+      "light": (
+        "text-selection-color": rgba($amber-400, 0.25),
+        "primary": $amber-550,
+        "primary-background": $amber-200,
+        "primary-underline": rgba($amber-550, 0.5),
+        "primary-hover": $amber-650,
+        "primary-hover-background": $amber-250,
+        "primary-focus": rgba($amber-400, 0.5),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+    ),
+    "azure": (
+      "dark": (
+        "text-selection-color": rgba($azure-350, 0.1875),
+        "primary": $azure-350,
+        "primary-background": $azure-550,
+        "primary-underline": rgba($azure-350, 0.5),
+        "primary-hover": $azure-250,
+        "primary-hover-background": $azure-500,
+        "primary-focus": rgba($azure-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($azure-400, 0.25),
+        "primary": $azure-550,
+        "primary-background": $azure-550,
+        "primary-underline": rgba($azure-550, 0.5),
+        "primary-hover": $azure-650,
+        "primary-hover-background": $azure-600,
+        "primary-focus": rgba($azure-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "blue": (
+      "dark": (
+        "text-selection-color": rgba($blue-350, 0.1875),
+        "primary": $blue-350,
+        "primary-background": $blue-550,
+        "primary-underline": rgba($blue-350, 0.5),
+        "primary-hover": $blue-250,
+        "primary-hover-background": $blue-500,
+        "primary-focus": rgba($blue-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($blue-400, 0.25),
+        "primary": $blue-550,
+        "primary-background": $blue-550,
+        "primary-underline": rgba($blue-550, 0.5),
+        "primary-hover": $blue-650,
+        "primary-hover-background": $blue-600,
+        "primary-focus": rgba($blue-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "cyan": (
+      "dark": (
+        "text-selection-color": rgba($cyan-350, 0.1875),
+        "primary": $cyan-350,
+        "primary-background": $cyan-550,
+        "primary-underline": rgba($cyan-350, 0.5),
+        "primary-hover": $cyan-250,
+        "primary-hover-background": $cyan-500,
+        "primary-focus": rgba($cyan-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($cyan-400, 0.25),
+        "primary": $cyan-550,
+        "primary-background": $cyan-550,
+        "primary-underline": rgba($cyan-550, 0.5),
+        "primary-hover": $cyan-650,
+        "primary-hover-background": $cyan-600,
+        "primary-focus": rgba($cyan-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "fuchsia": (
+      "dark": (
+        "text-selection-color": rgba($fuchsia-350, 0.1875),
+        "primary": $fuchsia-350,
+        "primary-background": $fuchsia-550,
+        "primary-underline": rgba($fuchsia-350, 0.5),
+        "primary-hover": $fuchsia-250,
+        "primary-hover-background": $fuchsia-500,
+        "primary-focus": rgba($fuchsia-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($fuchsia-400, 0.25),
+        "primary": $fuchsia-550,
+        "primary-background": $fuchsia-550,
+        "primary-underline": rgba($fuchsia-550, 0.5),
+        "primary-hover": $fuchsia-650,
+        "primary-hover-background": $fuchsia-600,
+        "primary-focus": rgba($fuchsia-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "green": (
+      "dark": (
+        "text-selection-color": rgba($green-350, 0.1875),
+        "primary": $green-350,
+        "primary-background": $green-500,
+        "primary-underline": rgba($green-350, 0.5),
+        "primary-hover": $green-250,
+        "primary-hover-background": $green-450,
+        "primary-focus": rgba($green-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($green-400, 0.25),
+        "primary": $green-550,
+        "primary-background": $green-500,
+        "primary-underline": rgba($green-550, 0.5),
+        "primary-hover": $green-650,
+        "primary-hover-background": $green-550,
+        "primary-focus": rgba($green-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "grey": (
+      "dark": (
+        "text-selection-color": rgba($grey-350, 0.1875),
+        "primary": $grey-350,
+        "primary-background": $grey-300,
+        "primary-underline": rgba($grey-350, 0.5),
+        "primary-hover": $grey-250,
+        "primary-hover-background": $grey-250,
+        "primary-focus": rgba($grey-350, 0.375),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+      "light": (
+        "text-selection-color": rgba($grey-400, 0.25),
+        "primary": $grey-550,
+        "primary-background": $grey-300,
+        "primary-underline": rgba($grey-550, 0.5),
+        "primary-hover": $grey-650,
+        "primary-hover-background": $grey-350,
+        "primary-focus": rgba($grey-400, 0.5),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+    ),
+    "indigo": (
+      "dark": (
+        "text-selection-color": rgba($indigo-350, 0.1875),
+        "primary": $indigo-350,
+        "primary-background": $indigo-600,
+        "primary-underline": rgba($indigo-350, 0.5),
+        "primary-hover": $indigo-250,
+        "primary-hover-background": $indigo-550,
+        "primary-focus": rgba($indigo-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($indigo-400, 0.25),
+        "primary": $indigo-550,
+        "primary-background": $indigo-600,
+        "primary-underline": rgba($indigo-550, 0.5),
+        "primary-hover": $indigo-650,
+        "primary-hover-background": $indigo-650,
+        "primary-focus": rgba($indigo-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "jade": (
+      "dark": (
+        "text-selection-color": rgba($jade-350, 0.1875),
+        "primary": $jade-350,
+        "primary-background": $jade-550,
+        "primary-underline": rgba($jade-350, 0.5),
+        "primary-hover": $jade-250,
+        "primary-hover-background": $jade-500,
+        "primary-focus": rgba($jade-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($jade-400, 0.25),
+        "primary": $jade-550,
+        "primary-background": $jade-550,
+        "primary-underline": rgba($jade-550, 0.5),
+        "primary-hover": $jade-650,
+        "primary-hover-background": $jade-600,
+        "primary-focus": rgba($jade-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "lime": (
+      "dark": (
+        "text-selection-color": rgba($lime-350, 0.1875),
+        "primary": $lime-350,
+        "primary-background": $lime-200,
+        "primary-underline": rgba($lime-350, 0.5),
+        "primary-hover": $lime-250,
+        "primary-hover-background": $lime-150,
+        "primary-focus": rgba($lime-350, 0.375),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+      "light": (
+        "text-selection-color": rgba($lime-400, 0.25),
+        "primary": $lime-550,
+        "primary-background": $lime-200,
+        "primary-underline": rgba($lime-550, 0.5),
+        "primary-hover": $lime-650,
+        "primary-hover-background": $lime-250,
+        "primary-focus": rgba($lime-400, 0.5),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+    ),
+    "orange": (
+      "dark": (
+        "text-selection-color": rgba($orange-350, 0.1875),
+        "primary": $orange-350,
+        "primary-background": $orange-500,
+        "primary-underline": rgba($orange-350, 0.5),
+        "primary-hover": $orange-250,
+        "primary-hover-background": $orange-450,
+        "primary-focus": rgba($orange-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($orange-400, 0.25),
+        "primary": $orange-550,
+        "primary-background": $orange-500,
+        "primary-underline": rgba($orange-550, 0.5),
+        "primary-hover": $orange-650,
+        "primary-hover-background": $orange-550,
+        "primary-focus": rgba($orange-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "pink": (
+      "dark": (
+        "text-selection-color": rgba($pink-350, 0.1875),
+        "primary": $pink-350,
+        "primary-background": $pink-500,
+        "primary-underline": rgba($pink-350, 0.5),
+        "primary-hover": $pink-250,
+        "primary-hover-background": $pink-450,
+        "primary-focus": rgba($pink-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($pink-400, 0.25),
+        "primary": $pink-550,
+        "primary-background": $pink-500,
+        "primary-underline": rgba($pink-550, 0.5),
+        "primary-hover": $pink-650,
+        "primary-hover-background": $pink-550,
+        "primary-focus": rgba($pink-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "pumpkin": (
+      "dark": (
+        "text-selection-color": rgba($pumpkin-350, 0.1875),
+        "primary": $pumpkin-350,
+        "primary-background": $pumpkin-300,
+        "primary-underline": rgba($pumpkin-350, 0.5),
+        "primary-hover": $pumpkin-250,
+        "primary-hover-background": $pumpkin-250,
+        "primary-focus": rgba($pumpkin-350, 0.375),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+      "light": (
+        "text-selection-color": rgba($pumpkin-400, 0.25),
+        "primary": $pumpkin-550,
+        "primary-background": $pumpkin-300,
+        "primary-underline": rgba($pumpkin-550, 0.5),
+        "primary-hover": $pumpkin-650,
+        "primary-hover-background": $pumpkin-350,
+        "primary-focus": rgba($pumpkin-400, 0.5),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+    ),
+    "purple": (
+      "dark": (
+        "text-selection-color": rgba($purple-350, 0.1875),
+        "primary": $purple-350,
+        "primary-background": $purple-600,
+        "primary-underline": rgba($purple-350, 0.5),
+        "primary-hover": $purple-250,
+        "primary-hover-background": $purple-550,
+        "primary-focus": rgba($purple-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($purple-400, 0.25),
+        "primary": $purple-550,
+        "primary-background": $purple-600,
+        "primary-underline": rgba($purple-550, 0.5),
+        "primary-hover": $purple-650,
+        "primary-hover-background": $purple-650,
+        "primary-focus": rgba($purple-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "red": (
+      "dark": (
+        "text-selection-color": rgba($red-350, 0.1875),
+        "primary": $red-350,
+        "primary-background": $red-550,
+        "primary-underline": rgba($red-350, 0.5),
+        "primary-hover": $red-250,
+        "primary-hover-background": $red-500,
+        "primary-focus": rgba($red-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($red-400, 0.25),
+        "primary": $red-550,
+        "primary-background": $red-550,
+        "primary-underline": rgba($red-550, 0.5),
+        "primary-hover": $red-650,
+        "primary-hover-background": $red-600,
+        "primary-focus": rgba($red-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "sand": (
+      "dark": (
+        "text-selection-color": rgba($sand-350, 0.1875),
+        "primary": $sand-350,
+        "primary-background": $sand-200,
+        "primary-underline": rgba($sand-350, 0.5),
+        "primary-hover": $sand-250,
+        "primary-hover-background": $sand-150,
+        "primary-focus": rgba($sand-350, 0.375),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+      "light": (
+        "text-selection-color": rgba($sand-400, 0.25),
+        "primary": $sand-550,
+        "primary-background": $sand-200,
+        "primary-underline": rgba($sand-550, 0.5),
+        "primary-hover": $sand-650,
+        "primary-hover-background": $sand-250,
+        "primary-focus": rgba($sand-400, 0.5),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+    ),
+    "slate": (
+      "dark": (
+        "text-selection-color": rgba($slate-350, 0.1875),
+        "primary": $slate-350,
+        "primary-background": $slate-600,
+        "primary-underline": rgba($slate-350, 0.5),
+        "primary-hover": $slate-250,
+        "primary-hover-background": $slate-550,
+        "primary-focus": rgba($slate-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($slate-400, 0.25),
+        "primary": $slate-550,
+        "primary-background": $slate-600,
+        "primary-underline": rgba($slate-550, 0.5),
+        "primary-hover": $slate-650,
+        "primary-hover-background": $slate-650,
+        "primary-focus": rgba($slate-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "violet": (
+      "dark": (
+        "text-selection-color": rgba($violet-350, 0.1875),
+        "primary": $violet-350,
+        "primary-background": $violet-600,
+        "primary-underline": rgba($violet-350, 0.5),
+        "primary-hover": $violet-250,
+        "primary-hover-background": $violet-550,
+        "primary-focus": rgba($violet-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($violet-400, 0.25),
+        "primary": $violet-550,
+        "primary-background": $violet-600,
+        "primary-underline": rgba($violet-550, 0.5),
+        "primary-hover": $violet-650,
+        "primary-hover-background": $violet-650,
+        "primary-focus": rgba($violet-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+    ),
+    "yellow": (
+      "dark": (
+        "text-selection-color": rgba($yellow-350, 0.1875),
+        "primary": $yellow-350,
+        "primary-background": $yellow-100,
+        "primary-underline": rgba($yellow-350, 0.5),
+        "primary-hover": $yellow-250,
+        "primary-hover-background": color.mix($yellow-100, $yellow-50),
+        "primary-focus": rgba($yellow-350, 0.375),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+      "light": (
+        "text-selection-color": rgba($yellow-400, 0.25),
+        "primary": $yellow-550,
+        "primary-background": $yellow-100,
+        "primary-underline": rgba($yellow-550, 0.5),
+        "primary-hover": $yellow-650,
+        "primary-hover-background": $yellow-150,
+        "primary-focus": rgba($yellow-400, 0.5),
+        "primary-inverse": $black,
+        "switch-thumb-box-shadow": 0 0 0.5rem rgba($black, 0.25),
+      ),
+    ),
+    "zinc": (
+      "dark": (
+        "text-selection-color": rgba($zinc-350, 0.1875),
+        "primary": $zinc-350,
+        "primary-background": $zinc-550,
+        "primary-underline": rgba($zinc-350, 0.5),
+        "primary-hover": $zinc-250,
+        "primary-hover-background": $zinc-500,
+        "primary-focus": rgba($zinc-350, 0.375),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
+      "light": (
+        "text-selection-color": rgba($zinc-400, 0.25),
+        "primary": $zinc-550,
+        "primary-background": $zinc-550,
+        "primary-underline": rgba($zinc-550, 0.5),
+        "primary-hover": $zinc-650,
+        "primary-hover-background": $zinc-600,
+        "primary-focus": rgba($zinc-400, 0.5),
+        "primary-inverse": $white,
+        "switch-thumb-box-shadow": 0 0 0 rgba(0, 0, 0, 0),
+      ),
     ),
   ),
+  $color-mappings
 );
 
 @function get($key, $mode: "light") {