From 06509c5c44e448a67a814d5fb7bbede46291b55e Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Mon, 17 Feb 2025 16:11:26 +0100
Subject: [PATCH] fix: remaining issues with colors

---
 .../ColorPicker/color-picker.tsx              |   2 +-
 src/components/DefaultPage/default-page.tsx   |   2 +-
 src/components/Demo/Sidenav/sidenav.tsx       |   2 +-
 src/data/db-theme.json                        | 579 +++++++++--------
 src/data/sbahn-theme.json                     | 582 +++++++++---------
 src/pages/Customization/customization.tsx     |   2 +-
 src/pages/Demo/demo.tsx                       |   9 +-
 7 files changed, 587 insertions(+), 591 deletions(-)

diff --git a/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx b/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx
index 2ec5f7d6..bef7f3e9 100644
--- a/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx
+++ b/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx
@@ -84,7 +84,7 @@ const ColorPicker = ({
             {!isAddColor && (
               <DBTooltip
                 placement="bottom"
-                className="db-neutral-bg-basic-level-1"
+                className="db-bg-color-basic-level-1"
               >
                 {t("adaptColor")}
               </DBTooltip>
diff --git a/src/components/DefaultPage/default-page.tsx b/src/components/DefaultPage/default-page.tsx
index c4335c68..e6c583cf 100644
--- a/src/components/DefaultPage/default-page.tsx
+++ b/src/components/DefaultPage/default-page.tsx
@@ -30,7 +30,7 @@ const DefaultPage = ({
       <DBPage
         className={className}
         variant="fixed"
-        data-color="neutral-bg-basic-level-1"
+        data-color="neutral"
         header={
           <DBHeader
             drawerOpen={drawerOpen}
diff --git a/src/components/Demo/Sidenav/sidenav.tsx b/src/components/Demo/Sidenav/sidenav.tsx
index 97ab0b34..58eafd50 100644
--- a/src/components/Demo/Sidenav/sidenav.tsx
+++ b/src/components/Demo/Sidenav/sidenav.tsx
@@ -13,7 +13,7 @@ const Sidenav = () => {
   const { t } = useTranslation();
   return (
     <div
-      className="demo-side-nav w-full min-w-auto md:min-w-fit  md:w-auto db-neutral-bg-basic-level-1
+      className="demo-side-nav w-full min-w-auto md:min-w-fit  md:w-auto db-bg-color-basic-level-1
       p-fix-md gap-fix-md mx-[1px] md:mx-0
     border-b md:border-b-0 md:border-r
     flex md:flex-col h-auto md:h-full
diff --git a/src/data/db-theme.json b/src/data/db-theme.json
index f95d7297..1854cd5e 100644
--- a/src/data/db-theme.json
+++ b/src/data/db-theme.json
@@ -1,8 +1,9 @@
 {
   "branding": {
-    "name": "Deutsche Bahn",
+    "name": "DB",
     "image": {
-      "light": "db_logo.svg"
+      "light": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCAyOCIgaWQ9ImxvZ28iPgoJPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjI0IiBmaWxsPSJ0cmFuc3BhcmVudCIgc3R5bGU9ImZpbGw6dHJhbnNwYXJlbnQ7ZmlsbDogdmFyKC0tZGItbG9nby1iYWNrZ3JvdW5kY29sb3IsIHRyYW5zcGFyZW50KSI+PC9yZWN0PgoJPHBhdGggZD0iTTI3LjIgNy41M2gtMS40M3Y0LjU0aDEuODNjMS41My4wMyAyLjQ3LTEuMDQgMi40Ny0yLjI3IDAtMS42My0uOTYtMi4zMi0yLjg3LTIuMjd6bS42IDcuOGgtMi4wNHY0Ljg0aDEuODRjLjcuMDEgMy4wNyAwIDMuMDctMi4zNyAwLTEuMDEtLjYyLTIuNS0yLjg3LTIuNDd6bS0xNy4xLTcuN2gtLjgzdjEyLjU0aDEuNTNjMi41OC4wNiAzLjc3LTIuMDUgMy43Ny01Ljk3IDAtMy42LS40MS02Ljc0LTQuNDctNi41N3ptMTguNC0yLjc2YzUuMTMuMDIgNS4yMyA0LjAzIDUuMjMgNC40M2E0LjMzIDQuMzMgMCAwMS0zLjE1IDQuMTN2LjE0YzMuMjYuNzkgMy43NSAzLjE0IDMuNzUgNC40MyAwIDQuNzYtNC42OCA1LjAyLTYuNzEgNS4wM2gtNi42OFY0Ljg3aDcuNTZ6bS0xNi45IDBjNC43LjAyIDcuMjMgMy4wMSA3LjIzIDkuMDMgMCA1LjI5LTEuNjggOS4xLTcuMjMgOS4xM0g1LjU0VjQuODdoNi42NnptMjMuNy0xLjk0SDRjLS42MyAwLTEuMDQuNS0xLjA2IDEuMDVsLS4wMS4xMnYxOS43YzAgLjU3LjM1IDEuMjIuOTUgMS4yNmwuMTIuMDFoMzEuOWMuNjMgMCAxLjEzLS42IDEuMTYtMS4xNGwuMDEtLjEzVjQuMWExLjIgMS4yIDAgMDAtMS4xNy0xLjE3em0wLTIuODZjMi4xIDAgMy45NyAxLjU2IDQuMDMgMy42M3YyMC4yYTQgNCAwIDAxLTMuODMgNC4wM0g0QTMuOTEgMy45MSAwIDAxLjA3IDI0LjFWMy45QTMuOCAzLjggMCAwMTMuOC4wN2gzMi4xeiIgZmlsbD0iI2YwMTQxNCIgc3R5bGU9ImZpbGw6I2YwMTQxNDtmaWxsOiB2YXIoLS1kYi1sb2dvLWNvbG9yLCAjZjAxNDE0KSI+PC9wYXRoPgo8L3N2Zz4K",
+      "dark": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCAyOCIgaWQ9ImxvZ28iPgoJPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjI0IiBmaWxsPSJ0cmFuc3BhcmVudCIgc3R5bGU9ImZpbGw6dHJhbnNwYXJlbnQ7ZmlsbDogdmFyKC0tZGItbG9nby1iYWNrZ3JvdW5kY29sb3IsIHRyYW5zcGFyZW50KSI+PC9yZWN0PgoJPHBhdGggZD0iTTI3LjIgNy41M2gtMS40M3Y0LjU0aDEuODNjMS41My4wMyAyLjQ3LTEuMDQgMi40Ny0yLjI3IDAtMS42My0uOTYtMi4zMi0yLjg3LTIuMjd6bS42IDcuOGgtMi4wNHY0Ljg0aDEuODRjLjcuMDEgMy4wNyAwIDMuMDctMi4zNyAwLTEuMDEtLjYyLTIuNS0yLjg3LTIuNDd6bS0xNy4xLTcuN2gtLjgzdjEyLjU0aDEuNTNjMi41OC4wNiAzLjc3LTIuMDUgMy43Ny01Ljk3IDAtMy42LS40MS02Ljc0LTQuNDctNi41N3ptMTguNC0yLjc2YzUuMTMuMDIgNS4yMyA0LjAzIDUuMjMgNC40M2E0LjMzIDQuMzMgMCAwMS0zLjE1IDQuMTN2LjE0YzMuMjYuNzkgMy43NSAzLjE0IDMuNzUgNC40MyAwIDQuNzYtNC42OCA1LjAyLTYuNzEgNS4wM2gtNi42OFY0Ljg3aDcuNTZ6bS0xNi45IDBjNC43LjAyIDcuMjMgMy4wMSA3LjIzIDkuMDMgMCA1LjI5LTEuNjggOS4xLTcuMjMgOS4xM0g1LjU0VjQuODdoNi42NnptMjMuNy0xLjk0SDRjLS42MyAwLTEuMDQuNS0xLjA2IDEuMDVsLS4wMS4xMnYxOS43YzAgLjU3LjM1IDEuMjIuOTUgMS4yNmwuMTIuMDFoMzEuOWMuNjMgMCAxLjEzLS42IDEuMTYtMS4xNGwuMDEtLjEzVjQuMWExLjIgMS4yIDAgMDAtMS4xNy0xLjE3em0wLTIuODZjMi4xIDAgMy45NyAxLjU2IDQuMDMgMy42M3YyMC4yYTQgNCAwIDAxLTMuODMgNC4wM0g0QTMuOTEgMy45MSAwIDAxLjA3IDI0LjFWMy45QTMuOCAzLjggMCAwMTMuOC4wN2gzMi4xeiIgZmlsbD0iI2YwMTQxNCIgc3R5bGU9ImZpbGw6I2YwMTQxNDtmaWxsOiB2YXIoLS1kYi1sb2dvLWNvbG9yLCAjZjAxNDE0KSI+PC9wYXRoPgo8L3N2Zz4K"
     }
   },
   "spacing": {
@@ -152,11 +153,7 @@
   },
   "sizing": {
     "_scale": "100%",
-    "fixed": {
-      "mobile": {
-        "header": "3.5"
-      }
-    },
+    "fixed": { "mobile": { "header": "3.5" } },
     "regular": {
       "3xl": "15",
       "2xl": "10",
@@ -402,10 +399,7 @@
           "3xs": { "lineHeight": 1.4, "fontSize": "0.625" }
         },
         "headline": {
-          "lg": {
-            "lineHeight": 1.25,
-            "fontSize": "2"
-          },
+          "lg": { "lineHeight": 1.25, "fontSize": "2" },
           "md": { "lineHeight": 1.1428571428571428, "fontSize": "1.75" },
           "sm": { "lineHeight": 1.1666666666666667, "fontSize": "1.5" },
           "xl": { "lineHeight": 1.2, "fontSize": "2.5" },
@@ -548,49 +542,49 @@
   },
   "colors": {
     "neutral": {
-      "origin": "#646973",
-      "originHSLBgLight": "#edeef0",
-      "originHSLBgDark": "#070709",
-      "originLightDefault": "#646973",
-      "originLightAlternative": "#646973",
-      "originLightAccessible": true,
-      "originLightHovered": "#4d5159",
-      "originLightPressed": "#373a40",
-      "originDarkDefault": "#646973",
-      "originDarkAlternative": "#646973",
+      "origin": "#AFB4Bb",
+      "originHSLBgLight": "#edeeef",
+      "originHSLBgDark": "#070708",
+      "originLightAlternative": "#73777e",
+      "originLightAccessible": false,
+      "originLightDefault": "#AFB4Bb",
+      "originLightHovered": "#9399a2",
+      "originLightPressed": "#7a7f86",
+      "originDarkAlternative": "#AFB4Bb",
       "originDarkAccessible": true,
-      "originDarkHovered": "#7c828e",
-      "originDarkPressed": "#969ca9",
-      "onOriginLightDefault": "#f9f9fa",
-      "onOriginLightHovered": "#dcdce2",
-      "onOriginLightPressed": "#c0c0cb",
+      "originDarkDefault": "#AFB4Bb",
+      "originDarkHovered": "#9399a2",
+      "originDarkPressed": "#7a7f86",
+      "onOriginLightDefault": "#070708",
+      "onOriginLightHovered": "#1e2022",
+      "onOriginLightPressed": "#323538",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#f9f9fa",
-      "onOriginDarkDefault": "#f9f9fa",
-      "onOriginDarkHovered": "#dcdce2",
-      "onOriginDarkPressed": "#c0c0cb",
+      "onOriginLightAlternative": "#070708",
+      "onOriginDarkDefault": "#070708",
+      "onOriginDarkHovered": "#1e2022",
+      "onOriginDarkPressed": "#323538",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#f9f9fa"
+      "onOriginDarkAlternative": "#070708"
     },
     "brand": {
       "origin": "#EC0016",
       "originHSLBgLight": "#ffe9e9",
       "originHSLBgDark": "#1a0000",
-      "originLightDefault": "#EC0016",
       "originLightAlternative": "#EC0016",
       "originLightAccessible": true,
+      "originLightDefault": "#EC0016",
       "originLightHovered": "#bd000f",
       "originLightPressed": "#900009",
-      "originDarkDefault": "#EC0016",
       "originDarkAlternative": "#EC0016",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ff4f53",
-      "originDarkPressed": "#ff8587",
+      "originDarkDefault": "#EC0016",
+      "originDarkHovered": "#bd000f",
+      "originDarkPressed": "#900009",
       "onOriginLightDefault": "#ffffff",
       "onOriginLightHovered": "#ffdada",
       "onOriginLightPressed": "#ffb3b4",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#000000",
+      "onOriginLightAlternative": "#ffffff",
       "onOriginDarkDefault": "#ffffff",
       "onOriginDarkHovered": "#ffdada",
       "onOriginDarkPressed": "#ffb3b4",
@@ -598,331 +592,332 @@
       "onOriginDarkAlternative": "#ffffff"
     },
     "informational": {
-      "origin": "#309FD1",
-      "originHSLBgLight": "#e0f0fe",
-      "originHSLBgDark": "#01080f",
-      "originLightDefault": "#309FD1",
-      "originLightAlternative": "#257fa8",
+      "origin": "#55B9E6",
+      "originHSLBgLight": "#e0f0fc",
+      "originHSLBgDark": "#02080d",
+      "originLightAlternative": "#387f9e",
       "originLightAccessible": false,
-      "originLightHovered": "#2684ae",
-      "originLightPressed": "#1d698c",
-      "originDarkDefault": "#309FD1",
-      "originDarkAlternative": "#309FD1",
+      "originLightDefault": "#55B9E6",
+      "originLightHovered": "#479dc3",
+      "originLightPressed": "#3982a2",
+      "originDarkAlternative": "#55B9E6",
       "originDarkAccessible": true,
-      "originDarkHovered": "#3abbf5",
-      "originDarkPressed": "#96d2fb",
-      "onOriginLightDefault": "#01080f",
-      "onOriginLightHovered": "#072231",
-      "onOriginLightPressed": "#0f384f",
+      "originDarkDefault": "#55B9E6",
+      "originDarkHovered": "#479dc3",
+      "originDarkPressed": "#3982a2",
+      "onOriginLightDefault": "#02080d",
+      "onOriginLightHovered": "#0a222d",
+      "onOriginLightPressed": "#153848",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#01080f",
-      "onOriginDarkDefault": "#01080f",
-      "onOriginDarkHovered": "#072231",
-      "onOriginDarkPressed": "#0f384f",
+      "onOriginLightAlternative": "#02080d",
+      "onOriginDarkDefault": "#02080d",
+      "onOriginDarkHovered": "#0a222d",
+      "onOriginDarkPressed": "#153848",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#01080f"
+      "onOriginDarkAlternative": "#02080d"
     },
     "warning": {
-      "origin": "#F39200",
-      "originHSLBgLight": "#ffeadf",
-      "originHSLBgDark": "#100500",
-      "originLightDefault": "#F39200",
-      "originLightAlternative": "#ad6600",
+      "origin": "#F8AB37",
+      "originHSLBgLight": "#feeadc",
+      "originHSLBgDark": "#0e0601",
+      "originLightAlternative": "#a06d20",
       "originLightAccessible": false,
-      "originLightHovered": "#ce7b00",
-      "originLightPressed": "#aa6500",
-      "originDarkDefault": "#F39200",
-      "originDarkAlternative": "#F39200",
+      "originLightDefault": "#F8AB37",
+      "originLightHovered": "#d5922e",
+      "originLightPressed": "#b37a25",
+      "originDarkAlternative": "#F8AB37",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ffb47b",
-      "originDarkPressed": "#ffd9c3",
-      "onOriginLightDefault": "#100500",
-      "onOriginLightHovered": "#331900",
-      "onOriginLightPressed": "#512b00",
+      "originDarkDefault": "#F8AB37",
+      "originDarkHovered": "#d5922e",
+      "originDarkPressed": "#b37a25",
+      "onOriginLightDefault": "#0e0601",
+      "onOriginLightHovered": "#2e1c04",
+      "onOriginLightPressed": "#493009",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#100500",
-      "onOriginDarkDefault": "#100500",
-      "onOriginDarkHovered": "#331900",
-      "onOriginDarkPressed": "#512b00",
+      "onOriginLightAlternative": "#0e0601",
+      "onOriginDarkDefault": "#0e0601",
+      "onOriginDarkHovered": "#2e1c04",
+      "onOriginDarkPressed": "#493009",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#100500"
+      "onOriginDarkAlternative": "#0e0601"
     },
     "successful": {
-      "origin": "#63A615",
-      "originHSLBgLight": "#c3ff9d",
-      "originHSLBgDark": "#030900",
-      "originLightDefault": "#63A615",
-      "originLightAlternative": "#4e850f",
+      "origin": "#9FD45F",
+      "originHSLBgLight": "#cffba4",
+      "originHSLBgDark": "#050902",
+      "originLightAlternative": "#5f8137",
       "originLightAccessible": false,
-      "originLightHovered": "#51890f",
-      "originLightPressed": "#406e0a",
-      "originDarkDefault": "#63A615",
-      "originDarkAlternative": "#63A615",
+      "originLightDefault": "#9FD45F",
+      "originLightHovered": "#89b751",
+      "originLightPressed": "#739a43",
+      "originDarkAlternative": "#9FD45F",
       "originDarkAccessible": true,
-      "originDarkHovered": "#75c31b",
-      "originDarkPressed": "#88e221",
-      "onOriginLightDefault": "#030900",
-      "onOriginLightHovered": "#122400",
-      "onOriginLightPressed": "#213c00",
+      "originDarkDefault": "#9FD45F",
+      "originDarkHovered": "#89b751",
+      "originDarkPressed": "#739a43",
+      "onOriginLightDefault": "#050902",
+      "onOriginLightHovered": "#18230a",
+      "onOriginLightPressed": "#293a15",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#030900",
-      "onOriginDarkDefault": "#030900",
-      "onOriginDarkHovered": "#122400",
-      "onOriginDarkPressed": "#213c00",
+      "onOriginLightAlternative": "#050902",
+      "onOriginDarkDefault": "#050902",
+      "onOriginDarkHovered": "#18230a",
+      "onOriginDarkPressed": "#293a15",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#030900"
+      "onOriginDarkAlternative": "#050902"
     },
     "critical": {
-      "origin": "#EC0016",
-      "originHSLBgLight": "#ffe9e9",
-      "originHSLBgDark": "#1a0000",
-      "originLightDefault": "#EC0016",
-      "originLightAlternative": "#EC0016",
-      "originLightAccessible": true,
-      "originLightHovered": "#bd000f",
-      "originLightPressed": "#900009",
-      "originDarkDefault": "#EC0016",
-      "originDarkAlternative": "#EC0016",
+      "origin": "#FA9090",
+      "originHSLBgLight": "#fee9e9",
+      "originHSLBgDark": "#190101",
+      "originLightAlternative": "#e91e1e",
+      "originLightAccessible": false,
+      "originLightDefault": "#FA9090",
+      "originLightHovered": "#f96060",
+      "originLightPressed": "#ee1f1f",
+      "originDarkAlternative": "#FA9090",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ff4f53",
-      "originDarkPressed": "#ff8587",
-      "onOriginLightDefault": "#ffffff",
-      "onOriginLightHovered": "#ffdada",
-      "onOriginLightPressed": "#ffb3b4",
+      "originDarkDefault": "#FA9090",
+      "originDarkHovered": "#f96060",
+      "originDarkPressed": "#ee1f1f",
+      "onOriginLightDefault": "#190101",
+      "onOriginLightHovered": "#470303",
+      "onOriginLightPressed": "#6e0808",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#000000",
-      "onOriginDarkDefault": "#ffffff",
-      "onOriginDarkHovered": "#ffdada",
-      "onOriginDarkPressed": "#ffb3b4",
+      "onOriginLightAlternative": "#190101",
+      "onOriginDarkDefault": "#190101",
+      "onOriginDarkHovered": "#470303",
+      "onOriginDarkPressed": "#6e0808",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#ffffff"
+      "onOriginDarkAlternative": "#190101"
     }
   },
   "additionalColors": {
     "yellow": {
-      "origin": "#FFD800",
-      "originHSLBgLight": "#ffedbc",
-      "originHSLBgDark": "#0a0700",
-      "originLightDefault": "#FFD800",
-      "originLightAlternative": "#8c7600",
+      "origin": "#FFF000",
+      "originHSLBgLight": "#fff25a",
+      "originHSLBgDark": "#090800",
+      "originLightAlternative": "#817900",
       "originLightAccessible": false,
-      "originLightHovered": "#dfbc00",
-      "originLightPressed": "#bfa200",
-      "originDarkDefault": "#FFD800",
-      "originDarkAlternative": "#FFD800",
+      "originLightDefault": "#FFF000",
+      "originLightHovered": "#e1d300",
+      "originLightPressed": "#c3b700",
+      "originDarkAlternative": "#FFF000",
       "originDarkAccessible": true,
-      "originDarkHovered": "#dfbc00",
-      "originDarkPressed": "#bfa200",
-      "onOriginLightDefault": "#0a0700",
-      "onOriginLightHovered": "#261f00",
-      "onOriginLightPressed": "#3f3400",
+      "originDarkDefault": "#FFF000",
+      "originDarkHovered": "#e1d300",
+      "originDarkPressed": "#c3b700",
+      "onOriginLightDefault": "#090800",
+      "onOriginLightHovered": "#232000",
+      "onOriginLightPressed": "#3a3600",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#0a0700",
-      "onOriginDarkDefault": "#0a0700",
-      "onOriginDarkHovered": "#261f00",
-      "onOriginDarkPressed": "#3f3400",
+      "onOriginLightAlternative": "#090800",
+      "onOriginDarkDefault": "#090800",
+      "onOriginDarkHovered": "#232000",
+      "onOriginDarkPressed": "#3a3600",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#0a0700"
+      "onOriginDarkAlternative": "#090800"
     },
     "orange": {
-      "origin": "#F39200",
-      "originHSLBgLight": "#ffeadf",
-      "originHSLBgDark": "#100500",
-      "originLightDefault": "#F39200",
-      "originLightAlternative": "#ad6600",
+      "origin": "#F8AB37",
+      "originHSLBgLight": "#feeadc",
+      "originHSLBgDark": "#0e0601",
+      "originLightAlternative": "#a06d20",
       "originLightAccessible": false,
-      "originLightHovered": "#ce7b00",
-      "originLightPressed": "#aa6500",
-      "originDarkDefault": "#F39200",
-      "originDarkAlternative": "#F39200",
+      "originLightDefault": "#F8AB37",
+      "originLightHovered": "#d5922e",
+      "originLightPressed": "#b37a25",
+      "originDarkAlternative": "#F8AB37",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ffb47b",
-      "originDarkPressed": "#ffd9c3",
-      "onOriginLightDefault": "#100500",
-      "onOriginLightHovered": "#331900",
-      "onOriginLightPressed": "#512b00",
+      "originDarkDefault": "#F8AB37",
+      "originDarkHovered": "#d5922e",
+      "originDarkPressed": "#b37a25",
+      "onOriginLightDefault": "#0e0601",
+      "onOriginLightHovered": "#2e1c04",
+      "onOriginLightPressed": "#493009",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#100500",
-      "onOriginDarkDefault": "#100500",
-      "onOriginDarkHovered": "#331900",
-      "onOriginDarkPressed": "#512b00",
+      "onOriginLightAlternative": "#0e0601",
+      "onOriginDarkDefault": "#0e0601",
+      "onOriginDarkHovered": "#2e1c04",
+      "onOriginDarkPressed": "#493009",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#100500"
+      "onOriginDarkAlternative": "#0e0601"
     },
     "red": {
-      "origin": "#EC0016",
-      "originHSLBgLight": "#ffe9e9",
-      "originHSLBgDark": "#1a0000",
-      "originLightDefault": "#EC0016",
-      "originLightAlternative": "#EC0016",
-      "originLightAccessible": true,
-      "originLightHovered": "#bd000f",
-      "originLightPressed": "#900009",
-      "originDarkDefault": "#EC0016",
-      "originDarkAlternative": "#EC0016",
+      "origin": "#FA9090",
+      "originHSLBgLight": "#fee9e9",
+      "originHSLBgDark": "#190101",
+      "originLightAlternative": "#e91e1e",
+      "originLightAccessible": false,
+      "originLightDefault": "#FA9090",
+      "originLightHovered": "#f96060",
+      "originLightPressed": "#ee1f1f",
+      "originDarkAlternative": "#FA9090",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ff4f53",
-      "originDarkPressed": "#ff8587",
-      "onOriginLightDefault": "#ffffff",
-      "onOriginLightHovered": "#ffdada",
-      "onOriginLightPressed": "#ffb3b4",
+      "originDarkDefault": "#FA9090",
+      "originDarkHovered": "#f96060",
+      "originDarkPressed": "#ee1f1f",
+      "onOriginLightDefault": "#190101",
+      "onOriginLightHovered": "#470303",
+      "onOriginLightPressed": "#6e0808",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#000000",
-      "onOriginDarkDefault": "#ffffff",
-      "onOriginDarkHovered": "#ffdada",
-      "onOriginDarkPressed": "#ffb3b4",
+      "onOriginLightAlternative": "#190101",
+      "onOriginDarkDefault": "#190101",
+      "onOriginDarkHovered": "#470303",
+      "onOriginDarkPressed": "#6e0808",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#ffffff"
+      "onOriginDarkAlternative": "#190101"
     },
     "pink": {
-      "origin": "#E93E8F",
-      "originHSLBgLight": "#fce9ef",
-      "originHSLBgDark": "#160209",
-      "originLightDefault": "#E93E8F",
-      "originLightAlternative": "#E93E8F",
-      "originLightAccessible": true,
-      "originLightHovered": "#be3174",
-      "originLightPressed": "#95245a",
-      "originDarkDefault": "#E93E8F",
-      "originDarkAlternative": "#E93E8F",
+      "origin": "#EE7BAe",
+      "originHSLBgLight": "#fbe9f0",
+      "originHSLBgDark": "#15020a",
+      "originLightAlternative": "#d13a88",
+      "originLightAccessible": false,
+      "originLightDefault": "#EE7BAe",
+      "originLightHovered": "#ea4499",
+      "originLightPressed": "#c1357d",
+      "originDarkAlternative": "#EE7BAe",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ef75a6",
-      "originDarkPressed": "#f3a0be",
-      "onOriginLightDefault": "#260413",
-      "onOriginLightHovered": "#490e29",
-      "onOriginLightPressed": "#6e1941",
-      "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#260413",
-      "onOriginDarkDefault": "#260413",
-      "onOriginDarkHovered": "#490e29",
-      "onOriginDarkPressed": "#6e1941",
-      "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#260413"
+      "originDarkDefault": "#EE7BAe",
+      "originDarkHovered": "#ea4499",
+      "originDarkPressed": "#c1357d",
+      "onOriginLightDefault": "#000000",
+      "onOriginLightHovered": "#380921",
+      "onOriginLightPressed": "#5b1438",
+      "onOriginLightAccessible": false,
+      "onOriginLightAlternative": "#000000",
+      "onOriginDarkDefault": "#ffffff",
+      "onOriginDarkHovered": "#f9dbe6",
+      "onOriginDarkPressed": "#f4b5cd",
+      "onOriginDarkAccessible": false,
+      "onOriginDarkAlternative": "#ffffff"
     },
     "violet": {
-      "origin": "#814997",
-      "originHSLBgLight": "#f3ebf7",
-      "originHSLBgDark": "#0d0412",
-      "originLightDefault": "#814997",
-      "originLightAlternative": "#814997",
-      "originLightAccessible": true,
-      "originLightHovered": "#623673",
-      "originLightPressed": "#452452",
-      "originDarkDefault": "#814997",
-      "originDarkAlternative": "#814997",
+      "origin": "#C2A1C7",
+      "originHSLBgLight": "#f2ecf3",
+      "originHSLBgDark": "#0b060c",
+      "originLightAlternative": "#926998",
+      "originLightAccessible": false,
+      "originLightDefault": "#C2A1C7",
+      "originLightHovered": "#ae82b5",
+      "originLightPressed": "#936998",
+      "originDarkAlternative": "#C2A1C7",
       "originDarkAccessible": true,
-      "originDarkHovered": "#a15dbc",
-      "originDarkPressed": "#b67cce",
-      "onOriginLightDefault": "#fbf8fc",
-      "onOriginLightHovered": "#e9d7ee",
-      "onOriginLightPressed": "#d7b5e1",
+      "originDarkDefault": "#C2A1C7",
+      "originDarkHovered": "#ae82b5",
+      "originDarkPressed": "#936998",
+      "onOriginLightDefault": "#0b060c",
+      "onOriginLightHovered": "#291b2b",
+      "onOriginLightPressed": "#432e45",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#fbf8fc",
-      "onOriginDarkDefault": "#fbf8fc",
-      "onOriginDarkHovered": "#e9d7ee",
-      "onOriginDarkPressed": "#d7b5e1",
+      "onOriginLightAlternative": "#0b060c",
+      "onOriginDarkDefault": "#0b060c",
+      "onOriginDarkHovered": "#291b2b",
+      "onOriginDarkPressed": "#432e45",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#fbf8fc"
+      "onOriginDarkAlternative": "#0b060c"
     },
     "blue": {
-      "origin": "#1455C0",
-      "originHSLBgLight": "#eaedfe",
-      "originHSLBgDark": "#00061b",
-      "originLightDefault": "#1455C0",
-      "originLightAlternative": "#1455C0",
-      "originLightAccessible": true,
-      "originLightHovered": "#0c3f92",
-      "originLightPressed": "#062a67",
-      "originDarkDefault": "#1455C0",
-      "originDarkAlternative": "#1558c6",
-      "originDarkAccessible": false,
-      "originDarkHovered": "#1c6cf0",
-      "originDarkPressed": "#5c87fa",
-      "onOriginLightDefault": "#f8f9ff",
-      "onOriginLightHovered": "#d5dbff",
-      "onOriginLightPressed": "#b0beff",
+      "origin": "#73AEF4",
+      "originHSLBgLight": "#e6eefd",
+      "originHSLBgDark": "#010812",
+      "originLightAlternative": "#327bbe",
+      "originLightAccessible": false,
+      "originLightDefault": "#73AEF4",
+      "originLightHovered": "#3e94e4",
+      "originLightPressed": "#317abd",
+      "originDarkAlternative": "#73AEF4",
+      "originDarkAccessible": true,
+      "originDarkDefault": "#73AEF4",
+      "originDarkHovered": "#3e94e4",
+      "originDarkPressed": "#317abd",
+      "onOriginLightDefault": "#01040a",
+      "onOriginLightHovered": "#071f35",
+      "onOriginLightPressed": "#113455",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#f8f9ff",
-      "onOriginDarkDefault": "#f8f9ff",
-      "onOriginDarkHovered": "#d5dbff",
-      "onOriginDarkPressed": "#b0beff",
+      "onOriginLightAlternative": "#01040a",
+      "onOriginDarkDefault": "#01040a",
+      "onOriginDarkHovered": "#071f35",
+      "onOriginDarkPressed": "#113455",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#f8f9ff"
+      "onOriginDarkAlternative": "#01040a"
     },
     "cyan": {
-      "origin": "#309FD1",
-      "originHSLBgLight": "#e0f0fe",
-      "originHSLBgDark": "#01080f",
-      "originLightDefault": "#309FD1",
-      "originLightAlternative": "#257fa8",
+      "origin": "#55B9E6",
+      "originHSLBgLight": "#e0f0fc",
+      "originHSLBgDark": "#02080d",
+      "originLightAlternative": "#387f9e",
       "originLightAccessible": false,
-      "originLightHovered": "#2684ae",
-      "originLightPressed": "#1d698c",
-      "originDarkDefault": "#309FD1",
-      "originDarkAlternative": "#309FD1",
+      "originLightDefault": "#55B9E6",
+      "originLightHovered": "#479dc3",
+      "originLightPressed": "#3982a2",
+      "originDarkAlternative": "#55B9E6",
       "originDarkAccessible": true,
-      "originDarkHovered": "#3abbf5",
-      "originDarkPressed": "#96d2fb",
-      "onOriginLightDefault": "#01080f",
-      "onOriginLightHovered": "#072231",
-      "onOriginLightPressed": "#0f384f",
+      "originDarkDefault": "#55B9E6",
+      "originDarkHovered": "#479dc3",
+      "originDarkPressed": "#3982a2",
+      "onOriginLightDefault": "#02080d",
+      "onOriginLightHovered": "#0a222d",
+      "onOriginLightPressed": "#153848",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#01080f",
-      "onOriginDarkDefault": "#01080f",
-      "onOriginDarkHovered": "#072231",
-      "onOriginDarkPressed": "#0f384f",
+      "onOriginLightAlternative": "#02080d",
+      "onOriginDarkDefault": "#02080d",
+      "onOriginDarkHovered": "#0a222d",
+      "onOriginDarkPressed": "#153848",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#01080f"
+      "onOriginDarkAlternative": "#02080d"
     },
     "turquoise": {
-      "origin": "#00A099",
-      "originHSLBgLight": "#9bfff8",
-      "originHSLBgDark": "#000908",
-      "originLightDefault": "#00A099",
-      "originLightAlternative": "#00857f",
+      "origin": "#83CACA",
+      "originHSLBgLight": "#c3f8f8",
+      "originHSLBgDark": "#030808",
+      "originLightAlternative": "#517f7f",
       "originLightAccessible": false,
-      "originLightHovered": "#00847e",
-      "originLightPressed": "#006864",
-      "originDarkDefault": "#00A099",
-      "originDarkAlternative": "#00A099",
+      "originLightDefault": "#83CACA",
+      "originLightHovered": "#70adad",
+      "originLightPressed": "#5d9292",
+      "originDarkAlternative": "#83CACA",
       "originDarkAccessible": true,
-      "originDarkHovered": "#00bdb5",
-      "originDarkPressed": "#00dcd2",
-      "onOriginLightDefault": "#000908",
-      "onOriginLightHovered": "#002422",
-      "onOriginLightPressed": "#003c38",
+      "originDarkDefault": "#83CACA",
+      "originDarkHovered": "#70adad",
+      "originDarkPressed": "#5d9292",
+      "onOriginLightDefault": "#030808",
+      "onOriginLightHovered": "#122222",
+      "onOriginLightPressed": "#213838",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#000908",
-      "onOriginDarkDefault": "#000908",
-      "onOriginDarkHovered": "#002422",
-      "onOriginDarkPressed": "#003c38",
+      "onOriginLightAlternative": "#030808",
+      "onOriginDarkDefault": "#030808",
+      "onOriginDarkHovered": "#122222",
+      "onOriginDarkPressed": "#213838",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#000908"
+      "onOriginDarkAlternative": "#030808"
     },
     "green": {
-      "origin": "#63A615",
-      "originHSLBgLight": "#c3ff9d",
-      "originHSLBgDark": "#030900",
-      "originLightDefault": "#63A615",
-      "originLightAlternative": "#4e850f",
+      "origin": "#9FD45f",
+      "originHSLBgLight": "#cffba4",
+      "originHSLBgDark": "#050902",
+      "originLightAlternative": "#5f8137",
       "originLightAccessible": false,
-      "originLightHovered": "#51890f",
-      "originLightPressed": "#406e0a",
-      "originDarkDefault": "#63A615",
-      "originDarkAlternative": "#63A615",
+      "originLightDefault": "#9FD45f",
+      "originLightHovered": "#89b751",
+      "originLightPressed": "#739a43",
+      "originDarkAlternative": "#9FD45f",
       "originDarkAccessible": true,
-      "originDarkHovered": "#75c31b",
-      "originDarkPressed": "#88e221",
-      "onOriginLightDefault": "#030900",
-      "onOriginLightHovered": "#122400",
-      "onOriginLightPressed": "#213c00",
+      "originDarkDefault": "#9FD45f",
+      "originDarkHovered": "#89b751",
+      "originDarkPressed": "#739a43",
+      "onOriginLightDefault": "#050902",
+      "onOriginLightHovered": "#18230a",
+      "onOriginLightPressed": "#293a15",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#030900",
-      "onOriginDarkDefault": "#030900",
-      "onOriginDarkHovered": "#122400",
-      "onOriginDarkPressed": "#213c00",
+      "onOriginLightAlternative": "#050902",
+      "onOriginDarkDefault": "#050902",
+      "onOriginDarkHovered": "#18230a",
+      "onOriginDarkPressed": "#293a15",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#030900"
+      "onOriginDarkAlternative": "#050902"
     }
-  }
+  },
+  "customColors": {}
 }
diff --git a/src/data/sbahn-theme.json b/src/data/sbahn-theme.json
index f1c34f95..bf1ea70f 100644
--- a/src/data/sbahn-theme.json
+++ b/src/data/sbahn-theme.json
@@ -548,381 +548,381 @@
   },
   "colors": {
     "neutral": {
-      "origin": "#646973",
-      "originHSLBgLight": "#edeef0",
-      "originHSLBgDark": "#070709",
-      "originLightDefault": "#646973",
-      "originLightAlternative": "#646973",
-      "originLightAccessible": true,
-      "originLightHovered": "#4d5159",
-      "originLightPressed": "#373a40",
-      "originDarkDefault": "#646973",
-      "originDarkAlternative": "#646973",
+      "origin": "#AFB4Bb",
+      "originHSLBgLight": "#edeeef",
+      "originHSLBgDark": "#070708",
+      "originLightAlternative": "#73777e",
+      "originLightAccessible": false,
+      "originLightDefault": "#AFB4Bb",
+      "originLightHovered": "#9399a2",
+      "originLightPressed": "#7a7f86",
+      "originDarkAlternative": "#AFB4Bb",
       "originDarkAccessible": true,
-      "originDarkHovered": "#7c828e",
-      "originDarkPressed": "#969ca9",
-      "onOriginLightDefault": "#f9f9fa",
-      "onOriginLightHovered": "#dcdce2",
-      "onOriginLightPressed": "#c0c0cb",
+      "originDarkDefault": "#AFB4Bb",
+      "originDarkHovered": "#9399a2",
+      "originDarkPressed": "#7a7f86",
+      "onOriginLightDefault": "#070708",
+      "onOriginLightHovered": "#1e2022",
+      "onOriginLightPressed": "#323538",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#f9f9fa",
-      "onOriginDarkDefault": "#f9f9fa",
-      "onOriginDarkHovered": "#dcdce2",
-      "onOriginDarkPressed": "#c0c0cb",
+      "onOriginLightAlternative": "#070708",
+      "onOriginDarkDefault": "#070708",
+      "onOriginDarkHovered": "#1e2022",
+      "onOriginDarkPressed": "#323538",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#f9f9fa"
+      "onOriginDarkAlternative": "#070708"
     },
     "brand": {
       "origin": "#408335",
-      "originHSLBgLight": "#cbfac7",
-      "originHSLBgDark": "#ffffff",
-      "originLightDefault": "#408335",
+      "originHSLBgLight": "#c7fbc2",
+      "originHSLBgDark": "#020901",
       "originLightAlternative": "#408335",
       "originLightAccessible": true,
-      "originLightHovered": "#3d7236",
-      "originLightPressed": "#2d5828",
-      "originDarkDefault": "#408335",
+      "originLightDefault": "#408335",
+      "originLightHovered": "#316828",
+      "originLightPressed": "#234e1c",
       "originDarkAlternative": "#408335",
       "originDarkAccessible": true,
-      "originDarkHovered": "#5eab54",
-      "originDarkPressed": "#6fc864",
-      "onOriginLightDefault": "#ffffff",
-      "onOriginLightHovered": "#12240d",
-      "onOriginLightPressed": "#203b19",
+      "originDarkDefault": "#408335",
+      "originDarkHovered": "#316828",
+      "originDarkPressed": "#234e1c",
+      "onOriginLightDefault": "#f7fef6",
+      "onOriginLightHovered": "#85f973",
+      "onOriginLightPressed": "#6edb5c",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#ffffff",
-      "onOriginDarkDefault": "#ffffff",
-      "onOriginDarkHovered": "#12240d",
-      "onOriginDarkPressed": "#203b19",
+      "onOriginLightAlternative": "#f7fef6",
+      "onOriginDarkDefault": "#f7fef6",
+      "onOriginDarkHovered": "#85f973",
+      "onOriginDarkPressed": "#6edb5c",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#ffffff"
+      "onOriginDarkAlternative": "#f7fef6"
     },
     "informational": {
-      "origin": "#309FD1",
-      "originHSLBgLight": "#e0f0fe",
-      "originHSLBgDark": "#01080f",
-      "originLightDefault": "#309FD1",
-      "originLightAlternative": "#257fa8",
+      "origin": "#55B9E6",
+      "originHSLBgLight": "#e0f0fc",
+      "originHSLBgDark": "#02080d",
+      "originLightAlternative": "#387f9e",
       "originLightAccessible": false,
-      "originLightHovered": "#2684ae",
-      "originLightPressed": "#1d698c",
-      "originDarkDefault": "#309FD1",
-      "originDarkAlternative": "#309FD1",
+      "originLightDefault": "#55B9E6",
+      "originLightHovered": "#479dc3",
+      "originLightPressed": "#3982a2",
+      "originDarkAlternative": "#55B9E6",
       "originDarkAccessible": true,
-      "originDarkHovered": "#3abbf5",
-      "originDarkPressed": "#96d2fb",
-      "onOriginLightDefault": "#01080f",
-      "onOriginLightHovered": "#072231",
-      "onOriginLightPressed": "#0f384f",
+      "originDarkDefault": "#55B9E6",
+      "originDarkHovered": "#479dc3",
+      "originDarkPressed": "#3982a2",
+      "onOriginLightDefault": "#02080d",
+      "onOriginLightHovered": "#0a222d",
+      "onOriginLightPressed": "#153848",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#01080f",
-      "onOriginDarkDefault": "#01080f",
-      "onOriginDarkHovered": "#072231",
-      "onOriginDarkPressed": "#0f384f",
+      "onOriginLightAlternative": "#02080d",
+      "onOriginDarkDefault": "#02080d",
+      "onOriginDarkHovered": "#0a222d",
+      "onOriginDarkPressed": "#153848",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#01080f"
+      "onOriginDarkAlternative": "#02080d"
     },
     "warning": {
-      "origin": "#F39200",
-      "originHSLBgLight": "#ffeadf",
-      "originHSLBgDark": "#100500",
-      "originLightDefault": "#F39200",
-      "originLightAlternative": "#ad6600",
+      "origin": "#F8AB37",
+      "originHSLBgLight": "#feeadc",
+      "originHSLBgDark": "#0e0601",
+      "originLightAlternative": "#a06d20",
       "originLightAccessible": false,
-      "originLightHovered": "#ce7b00",
-      "originLightPressed": "#aa6500",
-      "originDarkDefault": "#F39200",
-      "originDarkAlternative": "#F39200",
+      "originLightDefault": "#F8AB37",
+      "originLightHovered": "#d5922e",
+      "originLightPressed": "#b37a25",
+      "originDarkAlternative": "#F8AB37",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ffb47b",
-      "originDarkPressed": "#ffd9c3",
-      "onOriginLightDefault": "#100500",
-      "onOriginLightHovered": "#331900",
-      "onOriginLightPressed": "#512b00",
+      "originDarkDefault": "#F8AB37",
+      "originDarkHovered": "#d5922e",
+      "originDarkPressed": "#b37a25",
+      "onOriginLightDefault": "#0e0601",
+      "onOriginLightHovered": "#2e1c04",
+      "onOriginLightPressed": "#493009",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#100500",
-      "onOriginDarkDefault": "#100500",
-      "onOriginDarkHovered": "#331900",
-      "onOriginDarkPressed": "#512b00",
+      "onOriginLightAlternative": "#0e0601",
+      "onOriginDarkDefault": "#0e0601",
+      "onOriginDarkHovered": "#2e1c04",
+      "onOriginDarkPressed": "#493009",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#100500"
+      "onOriginDarkAlternative": "#0e0601"
     },
     "successful": {
-      "origin": "#63A615",
-      "originHSLBgLight": "#c3ff9d",
-      "originHSLBgDark": "#030900",
-      "originLightDefault": "#63A615",
-      "originLightAlternative": "#4e850f",
+      "origin": "#9FD45F",
+      "originHSLBgLight": "#cffba4",
+      "originHSLBgDark": "#050902",
+      "originLightAlternative": "#5f8137",
       "originLightAccessible": false,
-      "originLightHovered": "#51890f",
-      "originLightPressed": "#406e0a",
-      "originDarkDefault": "#63A615",
-      "originDarkAlternative": "#63A615",
+      "originLightDefault": "#9FD45F",
+      "originLightHovered": "#89b751",
+      "originLightPressed": "#739a43",
+      "originDarkAlternative": "#9FD45F",
       "originDarkAccessible": true,
-      "originDarkHovered": "#75c31b",
-      "originDarkPressed": "#88e221",
-      "onOriginLightDefault": "#030900",
-      "onOriginLightHovered": "#122400",
-      "onOriginLightPressed": "#213c00",
+      "originDarkDefault": "#9FD45F",
+      "originDarkHovered": "#89b751",
+      "originDarkPressed": "#739a43",
+      "onOriginLightDefault": "#050902",
+      "onOriginLightHovered": "#18230a",
+      "onOriginLightPressed": "#293a15",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#030900",
-      "onOriginDarkDefault": "#030900",
-      "onOriginDarkHovered": "#122400",
-      "onOriginDarkPressed": "#213c00",
+      "onOriginLightAlternative": "#050902",
+      "onOriginDarkDefault": "#050902",
+      "onOriginDarkHovered": "#18230a",
+      "onOriginDarkPressed": "#293a15",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#030900"
+      "onOriginDarkAlternative": "#050902"
     },
     "critical": {
-      "origin": "#EC0016",
-      "originHSLBgLight": "#ffe9e9",
-      "originHSLBgDark": "#1a0000",
-      "originLightDefault": "#EC0016",
-      "originLightAlternative": "#EC0016",
-      "originLightAccessible": true,
-      "originLightHovered": "#bd000f",
-      "originLightPressed": "#900009",
-      "originDarkDefault": "#EC0016",
-      "originDarkAlternative": "#EC0016",
+      "origin": "#FA9090",
+      "originHSLBgLight": "#fee9e9",
+      "originHSLBgDark": "#190101",
+      "originLightAlternative": "#e91e1e",
+      "originLightAccessible": false,
+      "originLightDefault": "#FA9090",
+      "originLightHovered": "#f96060",
+      "originLightPressed": "#ee1f1f",
+      "originDarkAlternative": "#FA9090",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ff4f53",
-      "originDarkPressed": "#ff8587",
-      "onOriginLightDefault": "#ffffff",
-      "onOriginLightHovered": "#ffdada",
-      "onOriginLightPressed": "#ffb3b4",
+      "originDarkDefault": "#FA9090",
+      "originDarkHovered": "#f96060",
+      "originDarkPressed": "#ee1f1f",
+      "onOriginLightDefault": "#190101",
+      "onOriginLightHovered": "#470303",
+      "onOriginLightPressed": "#6e0808",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#000000",
-      "onOriginDarkDefault": "#ffffff",
-      "onOriginDarkHovered": "#ffdada",
-      "onOriginDarkPressed": "#ffb3b4",
+      "onOriginLightAlternative": "#190101",
+      "onOriginDarkDefault": "#190101",
+      "onOriginDarkHovered": "#470303",
+      "onOriginDarkPressed": "#6e0808",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#ffffff"
+      "onOriginDarkAlternative": "#190101"
     }
   },
   "additionalColors": {
     "yellow": {
-      "origin": "#FFD800",
-      "originHSLBgLight": "#ffedbc",
-      "originHSLBgDark": "#0a0700",
-      "originLightDefault": "#FFD800",
-      "originLightAlternative": "#8c7600",
+      "origin": "#FFF000",
+      "originHSLBgLight": "#fff25a",
+      "originHSLBgDark": "#090800",
+      "originLightAlternative": "#817900",
       "originLightAccessible": false,
-      "originLightHovered": "#dfbc00",
-      "originLightPressed": "#bfa200",
-      "originDarkDefault": "#FFD800",
-      "originDarkAlternative": "#FFD800",
+      "originLightDefault": "#FFF000",
+      "originLightHovered": "#e1d300",
+      "originLightPressed": "#c3b700",
+      "originDarkAlternative": "#FFF000",
       "originDarkAccessible": true,
-      "originDarkHovered": "#dfbc00",
-      "originDarkPressed": "#bfa200",
-      "onOriginLightDefault": "#0a0700",
-      "onOriginLightHovered": "#261f00",
-      "onOriginLightPressed": "#3f3400",
+      "originDarkDefault": "#FFF000",
+      "originDarkHovered": "#e1d300",
+      "originDarkPressed": "#c3b700",
+      "onOriginLightDefault": "#090800",
+      "onOriginLightHovered": "#232000",
+      "onOriginLightPressed": "#3a3600",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#0a0700",
-      "onOriginDarkDefault": "#0a0700",
-      "onOriginDarkHovered": "#261f00",
-      "onOriginDarkPressed": "#3f3400",
+      "onOriginLightAlternative": "#090800",
+      "onOriginDarkDefault": "#090800",
+      "onOriginDarkHovered": "#232000",
+      "onOriginDarkPressed": "#3a3600",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#0a0700"
+      "onOriginDarkAlternative": "#090800"
     },
     "orange": {
-      "origin": "#F39200",
-      "originHSLBgLight": "#ffeadf",
-      "originHSLBgDark": "#100500",
-      "originLightDefault": "#F39200",
-      "originLightAlternative": "#ad6600",
+      "origin": "#F8AB37",
+      "originHSLBgLight": "#feeadc",
+      "originHSLBgDark": "#0e0601",
+      "originLightAlternative": "#a06d20",
       "originLightAccessible": false,
-      "originLightHovered": "#ce7b00",
-      "originLightPressed": "#aa6500",
-      "originDarkDefault": "#F39200",
-      "originDarkAlternative": "#F39200",
+      "originLightDefault": "#F8AB37",
+      "originLightHovered": "#d5922e",
+      "originLightPressed": "#b37a25",
+      "originDarkAlternative": "#F8AB37",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ffb47b",
-      "originDarkPressed": "#ffd9c3",
-      "onOriginLightDefault": "#100500",
-      "onOriginLightHovered": "#331900",
-      "onOriginLightPressed": "#512b00",
+      "originDarkDefault": "#F8AB37",
+      "originDarkHovered": "#d5922e",
+      "originDarkPressed": "#b37a25",
+      "onOriginLightDefault": "#0e0601",
+      "onOriginLightHovered": "#2e1c04",
+      "onOriginLightPressed": "#493009",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#100500",
-      "onOriginDarkDefault": "#100500",
-      "onOriginDarkHovered": "#331900",
-      "onOriginDarkPressed": "#512b00",
+      "onOriginLightAlternative": "#0e0601",
+      "onOriginDarkDefault": "#0e0601",
+      "onOriginDarkHovered": "#2e1c04",
+      "onOriginDarkPressed": "#493009",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#100500"
+      "onOriginDarkAlternative": "#0e0601"
     },
     "red": {
-      "origin": "#EC0016",
-      "originHSLBgLight": "#ffe9e9",
-      "originHSLBgDark": "#1a0000",
-      "originLightDefault": "#EC0016",
-      "originLightAlternative": "#EC0016",
-      "originLightAccessible": true,
-      "originLightHovered": "#bd000f",
-      "originLightPressed": "#900009",
-      "originDarkDefault": "#EC0016",
-      "originDarkAlternative": "#EC0016",
+      "origin": "#FA9090",
+      "originHSLBgLight": "#fee9e9",
+      "originHSLBgDark": "#190101",
+      "originLightAlternative": "#e91e1e",
+      "originLightAccessible": false,
+      "originLightDefault": "#FA9090",
+      "originLightHovered": "#f96060",
+      "originLightPressed": "#ee1f1f",
+      "originDarkAlternative": "#FA9090",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ff4f53",
-      "originDarkPressed": "#ff8587",
-      "onOriginLightDefault": "#ffffff",
-      "onOriginLightHovered": "#ffdada",
-      "onOriginLightPressed": "#ffb3b4",
+      "originDarkDefault": "#FA9090",
+      "originDarkHovered": "#f96060",
+      "originDarkPressed": "#ee1f1f",
+      "onOriginLightDefault": "#190101",
+      "onOriginLightHovered": "#470303",
+      "onOriginLightPressed": "#6e0808",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#000000",
-      "onOriginDarkDefault": "#ffffff",
-      "onOriginDarkHovered": "#ffdada",
-      "onOriginDarkPressed": "#ffb3b4",
+      "onOriginLightAlternative": "#190101",
+      "onOriginDarkDefault": "#190101",
+      "onOriginDarkHovered": "#470303",
+      "onOriginDarkPressed": "#6e0808",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#ffffff"
+      "onOriginDarkAlternative": "#190101"
     },
     "pink": {
-      "origin": "#E93E8F",
-      "originHSLBgLight": "#fce9ef",
-      "originHSLBgDark": "#160209",
-      "originLightDefault": "#E93E8F",
-      "originLightAlternative": "#E93E8F",
-      "originLightAccessible": true,
-      "originLightHovered": "#be3174",
-      "originLightPressed": "#95245a",
-      "originDarkDefault": "#E93E8F",
-      "originDarkAlternative": "#E93E8F",
+      "origin": "#EE7BAe",
+      "originHSLBgLight": "#fbe9f0",
+      "originHSLBgDark": "#15020a",
+      "originLightAlternative": "#d13a88",
+      "originLightAccessible": false,
+      "originLightDefault": "#EE7BAe",
+      "originLightHovered": "#ea4499",
+      "originLightPressed": "#c1357d",
+      "originDarkAlternative": "#EE7BAe",
       "originDarkAccessible": true,
-      "originDarkHovered": "#ef75a6",
-      "originDarkPressed": "#f3a0be",
-      "onOriginLightDefault": "#260413",
-      "onOriginLightHovered": "#490e29",
-      "onOriginLightPressed": "#6e1941",
-      "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#260413",
-      "onOriginDarkDefault": "#260413",
-      "onOriginDarkHovered": "#490e29",
-      "onOriginDarkPressed": "#6e1941",
-      "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#260413"
+      "originDarkDefault": "#EE7BAe",
+      "originDarkHovered": "#ea4499",
+      "originDarkPressed": "#c1357d",
+      "onOriginLightDefault": "#000000",
+      "onOriginLightHovered": "#380921",
+      "onOriginLightPressed": "#5b1438",
+      "onOriginLightAccessible": false,
+      "onOriginLightAlternative": "#000000",
+      "onOriginDarkDefault": "#ffffff",
+      "onOriginDarkHovered": "#f9dbe6",
+      "onOriginDarkPressed": "#f4b5cd",
+      "onOriginDarkAccessible": false,
+      "onOriginDarkAlternative": "#ffffff"
     },
     "violet": {
-      "origin": "#814997",
-      "originHSLBgLight": "#f3ebf7",
-      "originHSLBgDark": "#0d0412",
-      "originLightDefault": "#814997",
-      "originLightAlternative": "#814997",
-      "originLightAccessible": true,
-      "originLightHovered": "#623673",
-      "originLightPressed": "#452452",
-      "originDarkDefault": "#814997",
-      "originDarkAlternative": "#814997",
+      "origin": "#C2A1C7",
+      "originHSLBgLight": "#f2ecf3",
+      "originHSLBgDark": "#0b060c",
+      "originLightAlternative": "#926998",
+      "originLightAccessible": false,
+      "originLightDefault": "#C2A1C7",
+      "originLightHovered": "#ae82b5",
+      "originLightPressed": "#936998",
+      "originDarkAlternative": "#C2A1C7",
       "originDarkAccessible": true,
-      "originDarkHovered": "#a15dbc",
-      "originDarkPressed": "#b67cce",
-      "onOriginLightDefault": "#fbf8fc",
-      "onOriginLightHovered": "#e9d7ee",
-      "onOriginLightPressed": "#d7b5e1",
+      "originDarkDefault": "#C2A1C7",
+      "originDarkHovered": "#ae82b5",
+      "originDarkPressed": "#936998",
+      "onOriginLightDefault": "#0b060c",
+      "onOriginLightHovered": "#291b2b",
+      "onOriginLightPressed": "#432e45",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#fbf8fc",
-      "onOriginDarkDefault": "#fbf8fc",
-      "onOriginDarkHovered": "#e9d7ee",
-      "onOriginDarkPressed": "#d7b5e1",
+      "onOriginLightAlternative": "#0b060c",
+      "onOriginDarkDefault": "#0b060c",
+      "onOriginDarkHovered": "#291b2b",
+      "onOriginDarkPressed": "#432e45",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#fbf8fc"
+      "onOriginDarkAlternative": "#0b060c"
     },
     "blue": {
-      "origin": "#1455C0",
-      "originHSLBgLight": "#eaedfe",
-      "originHSLBgDark": "#00061b",
-      "originLightDefault": "#1455C0",
-      "originLightAlternative": "#1455C0",
-      "originLightAccessible": true,
-      "originLightHovered": "#0c3f92",
-      "originLightPressed": "#062a67",
-      "originDarkDefault": "#1455C0",
-      "originDarkAlternative": "#1558c6",
-      "originDarkAccessible": false,
-      "originDarkHovered": "#1c6cf0",
-      "originDarkPressed": "#5c87fa",
-      "onOriginLightDefault": "#f8f9ff",
-      "onOriginLightHovered": "#d5dbff",
-      "onOriginLightPressed": "#b0beff",
+      "origin": "#73AEF4",
+      "originHSLBgLight": "#e6eefd",
+      "originHSLBgDark": "#010812",
+      "originLightAlternative": "#327bbe",
+      "originLightAccessible": false,
+      "originLightDefault": "#73AEF4",
+      "originLightHovered": "#3e94e4",
+      "originLightPressed": "#317abd",
+      "originDarkAlternative": "#73AEF4",
+      "originDarkAccessible": true,
+      "originDarkDefault": "#73AEF4",
+      "originDarkHovered": "#3e94e4",
+      "originDarkPressed": "#317abd",
+      "onOriginLightDefault": "#01040a",
+      "onOriginLightHovered": "#071f35",
+      "onOriginLightPressed": "#113455",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#f8f9ff",
-      "onOriginDarkDefault": "#f8f9ff",
-      "onOriginDarkHovered": "#d5dbff",
-      "onOriginDarkPressed": "#b0beff",
+      "onOriginLightAlternative": "#01040a",
+      "onOriginDarkDefault": "#01040a",
+      "onOriginDarkHovered": "#071f35",
+      "onOriginDarkPressed": "#113455",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#f8f9ff"
+      "onOriginDarkAlternative": "#01040a"
     },
     "cyan": {
-      "origin": "#309FD1",
-      "originHSLBgLight": "#e0f0fe",
-      "originHSLBgDark": "#01080f",
-      "originLightDefault": "#309FD1",
-      "originLightAlternative": "#257fa8",
+      "origin": "#55B9E6",
+      "originHSLBgLight": "#e0f0fc",
+      "originHSLBgDark": "#02080d",
+      "originLightAlternative": "#387f9e",
       "originLightAccessible": false,
-      "originLightHovered": "#2684ae",
-      "originLightPressed": "#1d698c",
-      "originDarkDefault": "#309FD1",
-      "originDarkAlternative": "#309FD1",
+      "originLightDefault": "#55B9E6",
+      "originLightHovered": "#479dc3",
+      "originLightPressed": "#3982a2",
+      "originDarkAlternative": "#55B9E6",
       "originDarkAccessible": true,
-      "originDarkHovered": "#3abbf5",
-      "originDarkPressed": "#96d2fb",
-      "onOriginLightDefault": "#01080f",
-      "onOriginLightHovered": "#072231",
-      "onOriginLightPressed": "#0f384f",
+      "originDarkDefault": "#55B9E6",
+      "originDarkHovered": "#479dc3",
+      "originDarkPressed": "#3982a2",
+      "onOriginLightDefault": "#02080d",
+      "onOriginLightHovered": "#0a222d",
+      "onOriginLightPressed": "#153848",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#01080f",
-      "onOriginDarkDefault": "#01080f",
-      "onOriginDarkHovered": "#072231",
-      "onOriginDarkPressed": "#0f384f",
+      "onOriginLightAlternative": "#02080d",
+      "onOriginDarkDefault": "#02080d",
+      "onOriginDarkHovered": "#0a222d",
+      "onOriginDarkPressed": "#153848",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#01080f"
+      "onOriginDarkAlternative": "#02080d"
     },
     "turquoise": {
-      "origin": "#00A099",
-      "originHSLBgLight": "#9bfff8",
-      "originHSLBgDark": "#000908",
-      "originLightDefault": "#00A099",
-      "originLightAlternative": "#00857f",
+      "origin": "#83CACA",
+      "originHSLBgLight": "#c3f8f8",
+      "originHSLBgDark": "#030808",
+      "originLightAlternative": "#517f7f",
       "originLightAccessible": false,
-      "originLightHovered": "#00847e",
-      "originLightPressed": "#006864",
-      "originDarkDefault": "#00A099",
-      "originDarkAlternative": "#00A099",
+      "originLightDefault": "#83CACA",
+      "originLightHovered": "#70adad",
+      "originLightPressed": "#5d9292",
+      "originDarkAlternative": "#83CACA",
       "originDarkAccessible": true,
-      "originDarkHovered": "#00bdb5",
-      "originDarkPressed": "#00dcd2",
-      "onOriginLightDefault": "#000908",
-      "onOriginLightHovered": "#002422",
-      "onOriginLightPressed": "#003c38",
+      "originDarkDefault": "#83CACA",
+      "originDarkHovered": "#70adad",
+      "originDarkPressed": "#5d9292",
+      "onOriginLightDefault": "#030808",
+      "onOriginLightHovered": "#122222",
+      "onOriginLightPressed": "#213838",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#000908",
-      "onOriginDarkDefault": "#000908",
-      "onOriginDarkHovered": "#002422",
-      "onOriginDarkPressed": "#003c38",
+      "onOriginLightAlternative": "#030808",
+      "onOriginDarkDefault": "#030808",
+      "onOriginDarkHovered": "#122222",
+      "onOriginDarkPressed": "#213838",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#000908"
+      "onOriginDarkAlternative": "#030808"
     },
     "green": {
-      "origin": "#63A615",
-      "originHSLBgLight": "#c3ff9d",
-      "originHSLBgDark": "#030900",
-      "originLightDefault": "#63A615",
-      "originLightAlternative": "#4e850f",
+      "origin": "#9FD45f",
+      "originHSLBgLight": "#cffba4",
+      "originHSLBgDark": "#050902",
+      "originLightAlternative": "#5f8137",
       "originLightAccessible": false,
-      "originLightHovered": "#51890f",
-      "originLightPressed": "#406e0a",
-      "originDarkDefault": "#63A615",
-      "originDarkAlternative": "#63A615",
+      "originLightDefault": "#9FD45f",
+      "originLightHovered": "#89b751",
+      "originLightPressed": "#739a43",
+      "originDarkAlternative": "#9FD45f",
       "originDarkAccessible": true,
-      "originDarkHovered": "#75c31b",
-      "originDarkPressed": "#88e221",
-      "onOriginLightDefault": "#030900",
-      "onOriginLightHovered": "#122400",
-      "onOriginLightPressed": "#213c00",
+      "originDarkDefault": "#9FD45f",
+      "originDarkHovered": "#89b751",
+      "originDarkPressed": "#739a43",
+      "onOriginLightDefault": "#050902",
+      "onOriginLightHovered": "#18230a",
+      "onOriginLightPressed": "#293a15",
       "onOriginLightAccessible": true,
-      "onOriginLightAlternative": "#030900",
-      "onOriginDarkDefault": "#030900",
-      "onOriginDarkHovered": "#122400",
-      "onOriginDarkPressed": "#213c00",
+      "onOriginLightAlternative": "#050902",
+      "onOriginDarkDefault": "#050902",
+      "onOriginDarkHovered": "#18230a",
+      "onOriginDarkPressed": "#293a15",
       "onOriginDarkAccessible": true,
-      "onOriginDarkAlternative": "#030900"
+      "onOriginDarkAlternative": "#050902"
     }
   }
 }
diff --git a/src/pages/Customization/customization.tsx b/src/pages/Customization/customization.tsx
index 8251e971..66a30b83 100644
--- a/src/pages/Customization/customization.tsx
+++ b/src/pages/Customization/customization.tsx
@@ -79,7 +79,7 @@ const Customization = () => {
           <Scaling label="borderRadius" params={["border", "radius"]} />
         </div>
         <div
-          className="db-neutral-bg-basic-level-2 p-fix-sm md:p-res-sm
+          className="db-bg-color-basic-level-2 p-fix-sm md:p-res-sm
       flex flex-col gap-res-sm w-full md:overflow-auto"
         >
           <Tabs tabs={tabs} />
diff --git a/src/pages/Demo/demo.tsx b/src/pages/Demo/demo.tsx
index 77114be3..5db80a30 100644
--- a/src/pages/Demo/demo.tsx
+++ b/src/pages/Demo/demo.tsx
@@ -26,12 +26,13 @@ const Demo = ({ linkToDemo, density }: DemoPropsType) => {
     >
       <div className="flex flex-col md:flex-row h-full">
         <Sidenav />
-        <div className="flex flex-col gap-fix-md py-fix-md px-res-sm db-neutral-bg-basic-level-2 w-full h-full overflow-y-auto">
+        <div className="flex flex-col gap-fix-md py-fix-md px-res-sm
+        db-bg-color-basic-level-2 w-full h-full overflow-y-auto">
           <h1>{t("Dashboard")}</h1>
           <div className="demo-dashboard grid gap-fix-md h-full">
             <DBCard
               spacing="small"
-              className="dashboard-short1 db-neutral-bg-basic-level-1"
+              className="dashboard-short1 db-bg-color-basic-level-1"
             >
               <div className="flex flex-col gap-fix-md h-full">
                 <h5>Mobile Users</h5>
@@ -43,7 +44,7 @@ const Demo = ({ linkToDemo, density }: DemoPropsType) => {
             </DBCard>
             <DBCard
               spacing="small"
-              className="dashboard-short2 db-neutral-bg-basic-level-1"
+              className="dashboard-short2 db-bg-color-basic-level-1"
             >
               <div className="flex flex-col gap-fix-md h-full">
                 <h5>Tablet Users</h5>
@@ -67,7 +68,7 @@ const Demo = ({ linkToDemo, density }: DemoPropsType) => {
             </DBCard>
             <DBCard
               spacing="small"
-              className="dashboard-big db-neutral-bg-basic-level-1 flex-row justify-between"
+              className="dashboard-big db-bg-color-basic-level-1 flex-row justify-between"
             >
               <div className="flex flex-col gap-fix-md h-full">
                 <h5>Desktop Users</h5>