From dd368687280284ee49801aaf3f1a61adb8e575d5 Mon Sep 17 00:00:00 2001
From: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com>
Date: Mon, 11 Mar 2024 17:30:14 +0100
Subject: [PATCH] ThemeProvider component SSR support (#2739)

* refactor(design-system): add support for ssr

* refactor(design-system): remove naive theme-provider ssr support

* chore: changeset added
---
 .changeset/stale-grapes-yell.md               |  17 ++
 .../materials/custom-properties_default.css   | 283 +++++++++++++++++
 .../custom-properties_recolouring.css         | 287 ++++++++++++++++++
 .../scripts/generate-design-tokens.js         |  21 +-
 4 files changed, 605 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/stale-grapes-yell.md
 create mode 100644 design-system/materials/custom-properties_default.css
 create mode 100644 design-system/materials/custom-properties_recolouring.css

diff --git a/.changeset/stale-grapes-yell.md b/.changeset/stale-grapes-yell.md
new file mode 100644
index 0000000000..38fad4c759
--- /dev/null
+++ b/.changeset/stale-grapes-yell.md
@@ -0,0 +1,17 @@
+---
+'@commercetools-uikit/design-system': minor
+---
+
+This package now contains a CSS file with all CSS variables per theme.
+
+We still support the `custom-properties.css` file for backwards compatibility, but we now create other files based on each theme using their names as suffix.
+
+Pattern:
+```
+custom-properties_<theme-name>.css
+```
+
+Example:
+```
+custom-properties_default.css
+```
diff --git a/design-system/materials/custom-properties_default.css b/design-system/materials/custom-properties_default.css
new file mode 100644
index 0000000000..952b48c2bf
--- /dev/null
+++ b/design-system/materials/custom-properties_default.css
@@ -0,0 +1,283 @@
+/*
+  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+
+  This file is created by the 'scripts/generate-design-tokens.js' script.
+  The variables should be updated in 'materials/internals/definition.yaml'.
+*/
+
+:root {
+  --color-primary: hsl(175, 55%, 45%);
+  --color-primary-10: hsl(240, 66%, 19%);
+  --color-primary-20: hsl(175, 55%, 20%);
+  --color-primary-25: hsl(175, 55%, 25%);
+  --color-primary-30: hsl(175, 55%, 30%);
+  --color-primary-40: hsl(175, 55%, 40%);
+  --color-primary-85: hsl(175, 70%, 85%);
+  --color-primary-90: hsl(175, 70%, 90%);
+  --color-primary-95: hsl(175, 90%, 95%);
+  --color-accent: #213c45;
+  --color-accent-10: hsl(195, 35.2941176471%, 10%);
+  --color-accent-20: hsl(195, 35.2941176471%, 20%);
+  --color-accent-30: hsl(195, 35.2941176471%, 30%);
+  --color-accent-40: hsl(195, 35.2941176471%, 40%);
+  --color-accent-50: hsl(195, 35%, 50%);
+  --color-accent-60: hsl(195, 35.2941176471%, 60%);
+  --color-accent-85: hsl(195, 35%, 85%);
+  --color-accent-90: hsl(195, 35.2941176471%, 90%);
+  --color-accent-95: hsl(195, 35.2941176471%, 95%);
+  --color-accent-98: hsl(195, 35.2941176471%, 98%);
+  --color-brown-10: hsl(35, 90%, 10%);
+  --color-brown-20: hsl(35, 50%, 20%);
+  --color-brown-35: hsl(35, 25%, 35%);
+  --color-brown-50: hsl(35, 30%, 50%);
+  --color-brown-70: hsl(35, 40%, 70%);
+  --color-brown-85: hsl(35, 60%, 85%);
+  --color-brown-90: hsl(35, 90%, 90%);
+  --color-brown-95: hsl(35, 80%, 95%);
+  --color-brown-98: hsl(35, 90%, 98%);
+  --color-purple-10: hsl(248, 90%, 10%);
+  --color-purple-20: hsl(248, 50%, 20%);
+  --color-purple-35: hsl(248, 25%, 35%);
+  --color-purple-50: hsl(248, 30%, 50%);
+  --color-purple-70: hsl(248, 40%, 70%);
+  --color-purple-85: hsl(248, 60%, 85%);
+  --color-purple-90: hsl(248, 50%, 90%);
+  --color-purple-95: hsl(248, 80%, 95%);
+  --color-purple-98: hsl(248, 90%, 98%);
+  --color-turquoise-10: hsl(180, 90%, 10%);
+  --color-turquoise-20: hsl(180, 50%, 20%);
+  --color-turquoise-35: hsl(180, 25%, 35%);
+  --color-turquoise-50: hsl(180, 30%, 45%);
+  --color-turquoise-70: hsl(180, 40%, 70%);
+  --color-turquoise-85: hsl(180, 60%, 85%);
+  --color-turquoise-90: hsl(180, 40%, 90%);
+  --color-turquoise-95: hsl(180, 80%, 95%);
+  --color-turquoise-98: hsl(180, 90%, 98%);
+  --color-neutral: hsl(232, 18%, 80%);
+  --color-neutral-05: hsl(0deg 0% 80% / 5%);
+  --color-neutral-10: hsl(0deg 0% 80% / 10%);
+  --color-neutral-40: hsl(232, 18%, 40%);
+  --color-neutral-60: hsl(232, 18%, 60%);
+  --color-neutral-85: hsl(232, 18%, 85%);
+  --color-neutral-90: hsl(232, 18%, 90%);
+  --color-neutral-95: hsl(232, 18%, 95%);
+  --color-neutral-98: hsl(232, 18%, 98%);
+  --color-info: #078cdf;
+  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
+  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
+  --color-info-90: #ceebfd;
+  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
+  --color-warning: #f16d0e;
+  --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
+  --color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
+  --color-warning-60: hsl(35, 90%, 55%);
+  --color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
+  --color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
+  --color-error: #e60050;
+  --color-error-25: hsl(339.1304347826087, 100%, 25%);
+  --color-error-40: hsl(339.1304347826087, 100%, 40%);
+  --color-error-85: hsl(339.1304347826087, 100%, 85%);
+  --color-error-95: hsl(339.1304347826087, 100%, 95%);
+  --color-solid: #1a1a1a;
+  --color-solid-02: hsl(0deg 0% 10% / 2%);
+  --color-solid-05: hsl(0deg 0% 10% / 5%);
+  --color-solid-10: hsl(0deg 0% 10% / 10%);
+  --color-surface: #fff;
+  --color-transparent: transparent;
+  --color-success: hsl(152, 77%, 39%);
+  --color-success-25: hsl(155, 84%, 20%);
+  --color-success-40: hsl(155, 90%, 24%);
+  --color-success-85: hsl(144, 69%, 80%);
+  --color-success-95: hsl(141, 76%, 92%);
+  --border-radius-1: 1px;
+  --border-radius-2: 2px;
+  --border-radius-4: 4px;
+  --border-radius-6: 6px;
+  --border-radius-8: 8px;
+  --border-radius-20: 20px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --font-family: 'Inter', system-ui;
+  --font-size-10: 0.75rem;
+  --font-size-12: 0.8rem;
+  --font-size-20: 0.875rem;
+  --font-size-30: 1rem;
+  --font-size-40: 1.125rem;
+  --font-size-50: 1.25rem;
+  --font-size-60: 1.5rem;
+  --font-size-70: 2rem;
+  --font-size-80: 2.5rem;
+  --font-size-90: 3rem;
+  --font-size-15: 0.9231rem;
+  --font-size-35: 1.0769rem;
+  --font-size-45: 1.2308rem;
+  --font-size-63: 1.5385rem;
+  --font-size-66: 1.8462rem;
+  --font-size-69: 2.4615rem;
+  --font-size-78: 3rem;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --line-height-05: 1.125rem;
+  --line-height-10: 1.25rem;
+  --line-height-18: 1.3rem;
+  --line-height-20: 1.375rem;
+  --line-height-30: 1.5rem;
+  --line-height-40: 1.625rem;
+  --line-height-50: 1.75rem;
+  --line-height-60: 2.125rem;
+  --shadow-0: none;
+  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  --shadow-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+  --shadow-6: 0 -1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-7: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
+    0 1px 1px 0 rgba(0, 0, 0, 0.24);
+  --shadow-8: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
+  --shadow-9: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
+    inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
+  --shadow-10: 0 0 0 1px rgba(224, 230, 237, 0.5);
+  --shadow-11: 0 1px 0.5px rgba(0, 0, 0, 0.24),
+    0 -1px 0.75px rgba(0, 0, 0, 0.12);
+  --shadow-12: 0 0 1px rgba(0, 0, 0, 0.25);
+  --shadow-13: 0 0 1px rgba(0, 0, 0, 0.25);
+  --shadow-14: 0 0 0.5px rgba(0, 0, 0, 0.1);
+  --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12);
+  --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25),
+    -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25);
+  --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
+  --constraint-scale: 100%;
+  --constraint-1: 42px;
+  --constraint-2: 84px;
+  --constraint-3: 142px;
+  --constraint-4: 184px;
+  --constraint-5: 242px;
+  --constraint-6: 284px;
+  --constraint-7: 342px;
+  --constraint-8: 384px;
+  --constraint-9: 442px;
+  --constraint-10: 484px;
+  --constraint-11: 542px;
+  --constraint-12: 584px;
+  --constraint-13: 642px;
+  --constraint-14: 684px;
+  --constraint-15: 742px;
+  --constraint-16: 784px;
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --spacing-05: 2px;
+  --spacing-10: 4px;
+  --spacing-20: 8px;
+  --spacing-25: 12px;
+  --spacing-30: 16px;
+  --spacing-40: 24px;
+  --spacing-50: 32px;
+  --spacing-55: 40px;
+  --spacing-60: 48px;
+  --spacing-70: 64px;
+  --transition-linear-80ms: 80ms linear;
+  --transition-easeinout-150ms: 150ms ease-in-out;
+  --transition-standard: 200ms ease;
+  --break-point-mobile: 768px;
+  --break-point-desktop: 1024px;
+  --break-point-biggerdesktop: 1280px;
+  --break-point-giantdesktop: 1680px;
+  --break-point-jumbodesktop: 1920px;
+  --background-color-for-button-when-active: hsl(232, 18%, 95%);
+  --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
+  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-input: #fff;
+  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
+  --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
+  --background-color-for-input-when-focused: #fff;
+  --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
+  --background-color-for-input-when-active: hsl(
+    203.05555555555554,
+    93.9130434783%,
+    95%
+  );
+  --background-color-for-input-as-quiet: transparent;
+  --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
+  --background-color-for-localized-input-label: #fff;
+  --background-color-for-localized-input-label-when-readonly: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-localized-input-label-when-disabled: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-button-as-primary: #15a390;
+  --background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%);
+  --background-color-for-button-as-primary-as-default-when-hovered: #17ab97;
+  --background-color-for-button-as-primary-as-default-when-active: #15a390;
+  --background-color-for-button-as-primary-as-urgent: #f16d0e;
+  --background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
+  --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
+  --background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
+  --background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
+  --background-color-for-toggle-thumb-when-disabled: hsl(232, 18%, 60%);
+  --background-color-for-toggle-track-when-disabled: hsl(232, 18%, 90%);
+  --background-color-for-loading-spinner-track: #213c45;
+  --background-color-for-loading-spinner-dot: #213c45;
+  --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
+  --border-color-for-input: hsl(232, 18%, 80%);
+  --border-color-for-input-when-focused: hsl(175, 55%, 45%);
+  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
+  --border-color-for-input-when-readonly: #fff;
+  --border-color-for-input-when-error: #e60050;
+  --border-color-for-input-when-warning: #f16d0e;
+  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
+  --border-color-for-input-as-quiet: transparent;
+  --border-color-for-button-as-secondary: hsl(232, 18%, 80%);
+  --border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
+  --border-radius-for-button-as-big: 4px;
+  --border-radius-for-button-as-medium: 4px;
+  --border-radius-for-input: 4px;
+  --border-width-for-input: 1px;
+  --border-width-for-input-when-warning: 1px;
+  --border-width-for-input-when-error: 1px;
+  --border-width-for-input-when-focused: 1px;
+  --font-color-for-input: #1a1a1a;
+  --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
+  --font-color-for-input-when-error: #e60050;
+  --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
+  --font-color-for-input-when-warning: #f16d0e;
+  --font-color-for-button-as-secondary: #1a1a1a;
+  --font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%);
+  --font-color-for-button-as-flat-as-critical: #e60050;
+  --font-color-for-button-as-flat-as-critical-when-hovered: hsl(
+    339.1304347826087,
+    100%,
+    25%
+  );
+  --font-color-for-view-switcher-button: hsl(232, 18%, 40%);
+  --font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
+  --font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
+  --height-for-button-as-big: 40px;
+  --height-for-button-as-medium: 32px;
+  --height-for-button-as-small: 16px;
+  --height-for-input: 40px;
+  --height-for-input-as-small: 32px;
+  --placeholder-font-color-for-input: hsl(232, 18%, 60%);
+  --font-size-for-button: 0.875rem;
+  --font-size-for-input: 1rem;
+  --padding-for-input: 0 var(--spacing-30);
+  --padding-for-input-as-quiet: 0 var(--spacing-20);
+  --padding-for-button: 0 var(--spacing-30);
+  --shadow-for-input: none;
+  --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
+  --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
+  --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning);
+}
diff --git a/design-system/materials/custom-properties_recolouring.css b/design-system/materials/custom-properties_recolouring.css
new file mode 100644
index 0000000000..777f25c6ae
--- /dev/null
+++ b/design-system/materials/custom-properties_recolouring.css
@@ -0,0 +1,287 @@
+/*
+  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+
+  This file is created by the 'scripts/generate-design-tokens.js' script.
+  The variables should be updated in 'materials/internals/definition.yaml'.
+*/
+
+:root {
+  --color-primary: hsl(240, 64%, 58%);
+  --color-primary-10: hsl(240, 66%, 19%);
+  --color-primary-20: hsl(240, 45%, 33%);
+  --color-primary-25: hsl(240, 46%, 48%);
+  --color-primary-30: hsl(240, 46%, 53%);
+  --color-primary-40: hsl(240, 100%, 67%);
+  --color-primary-85: hsl(244, 100%, 84%);
+  --color-primary-90: hsl(243, 100%, 93%);
+  --color-primary-95: hsl(244, 100%, 97%);
+  --color-accent: #213c45;
+  --color-accent-10: hsl(195, 35.2941176471%, 10%);
+  --color-accent-20: hsl(195, 35.2941176471%, 20%);
+  --color-accent-30: hsl(195, 35.2941176471%, 30%);
+  --color-accent-40: hsl(195, 35.2941176471%, 40%);
+  --color-accent-50: hsl(195, 35%, 50%);
+  --color-accent-60: hsl(195, 35.2941176471%, 60%);
+  --color-accent-85: hsl(195, 35%, 85%);
+  --color-accent-90: hsl(195, 35.2941176471%, 90%);
+  --color-accent-95: hsl(195, 35.2941176471%, 95%);
+  --color-accent-98: hsl(195, 35.2941176471%, 98%);
+  --color-brown-10: hsl(35, 90%, 10%);
+  --color-brown-20: hsl(35, 50%, 20%);
+  --color-brown-35: hsl(35, 25%, 35%);
+  --color-brown-50: hsl(35, 30%, 50%);
+  --color-brown-70: hsl(35, 40%, 70%);
+  --color-brown-85: hsl(35, 60%, 85%);
+  --color-brown-90: hsl(35, 90%, 90%);
+  --color-brown-95: hsl(35, 80%, 95%);
+  --color-brown-98: hsl(35, 90%, 98%);
+  --color-purple-10: hsl(248, 90%, 10%);
+  --color-purple-20: hsl(248, 50%, 20%);
+  --color-purple-35: hsl(248, 25%, 35%);
+  --color-purple-50: hsl(248, 30%, 50%);
+  --color-purple-70: hsl(248, 40%, 70%);
+  --color-purple-85: hsl(248, 60%, 85%);
+  --color-purple-90: hsl(248, 50%, 90%);
+  --color-purple-95: hsl(248, 80%, 95%);
+  --color-purple-98: hsl(248, 90%, 98%);
+  --color-turquoise-10: hsl(180, 90%, 10%);
+  --color-turquoise-20: hsl(180, 50%, 20%);
+  --color-turquoise-35: hsl(180, 25%, 35%);
+  --color-turquoise-50: hsl(180, 30%, 45%);
+  --color-turquoise-70: hsl(180, 40%, 70%);
+  --color-turquoise-85: hsl(180, 60%, 85%);
+  --color-turquoise-90: hsl(180, 40%, 90%);
+  --color-turquoise-95: hsl(180, 80%, 95%);
+  --color-turquoise-98: hsl(180, 90%, 98%);
+  --color-neutral: hsl(232, 18%, 80%);
+  --color-neutral-05: hsl(0deg 0% 80% / 5%);
+  --color-neutral-10: hsl(0deg 0% 80% / 10%);
+  --color-neutral-40: hsl(232, 18%, 40%);
+  --color-neutral-60: hsl(232, 18%, 60%);
+  --color-neutral-85: hsl(232, 18%, 85%);
+  --color-neutral-90: hsl(232, 18%, 90%);
+  --color-neutral-95: hsl(232, 18%, 95%);
+  --color-neutral-98: hsl(232, 18%, 98%);
+  --color-info: #078cdf;
+  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
+  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
+  --color-info-90: #ceebfd;
+  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
+  --color-warning: hsl(35, 90%, 45%);
+  --color-warning-25: hsl(33, 83%, 25%);
+  --color-warning-40: hsl(33, 80%, 34%);
+  --color-warning-60: hsl(35, 90%, 55%);
+  --color-warning-85: hsl(33, 90%, 80%);
+  --color-warning-95: hsl(45, 100%, 92%);
+  --color-error: hsl(3, 65%, 58%);
+  --color-error-25: hsl(4, 69%, 37%);
+  --color-error-40: hsl(3, 60%, 46%);
+  --color-error-85: hsl(1, 55%, 74%);
+  --color-error-95: hsl(349, 66%, 92%);
+  --color-solid: #1a1a1a;
+  --color-solid-02: hsl(0deg 0% 10% / 2%);
+  --color-solid-05: hsl(0deg 0% 10% / 5%);
+  --color-solid-10: hsl(0deg 0% 10% / 10%);
+  --color-surface: #fff;
+  --color-transparent: transparent;
+  --color-success: hsl(152, 77%, 39%);
+  --color-success-25: hsl(155, 84%, 20%);
+  --color-success-40: hsl(155, 90%, 24%);
+  --color-success-85: hsl(144, 69%, 80%);
+  --color-success-95: hsl(141, 76%, 92%);
+  --border-radius-1: 1px;
+  --border-radius-2: 2px;
+  --border-radius-4: 4px;
+  --border-radius-6: 6px;
+  --border-radius-8: 8px;
+  --border-radius-20: 20px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --font-family: 'Inter', system-ui;
+  --font-size-10: 0.75rem;
+  --font-size-12: 0.8rem;
+  --font-size-20: 0.875rem;
+  --font-size-30: 1rem;
+  --font-size-40: 1.125rem;
+  --font-size-50: 1.25rem;
+  --font-size-60: 1.5rem;
+  --font-size-70: 2rem;
+  --font-size-80: 2.5rem;
+  --font-size-90: 3rem;
+  --font-size-15: 0.9231rem;
+  --font-size-35: 1.0769rem;
+  --font-size-45: 1.2308rem;
+  --font-size-63: 1.5385rem;
+  --font-size-66: 1.8462rem;
+  --font-size-69: 2.4615rem;
+  --font-size-78: 3rem;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --line-height-05: 1.125rem;
+  --line-height-10: 1.25rem;
+  --line-height-18: 1.3rem;
+  --line-height-20: 1.375rem;
+  --line-height-30: 1.5rem;
+  --line-height-40: 1.625rem;
+  --line-height-50: 1.75rem;
+  --line-height-60: 2.125rem;
+  --shadow-0: none;
+  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  --shadow-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+  --shadow-6: 0 -1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-7: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
+    0 1px 1px 0 rgba(0, 0, 0, 0.24);
+  --shadow-8: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
+  --shadow-9: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
+    inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
+  --shadow-10: 0 0 0 1px rgba(224, 230, 237, 0.5);
+  --shadow-11: 0 1px 0.5px rgba(0, 0, 0, 0.24),
+    0 -1px 0.75px rgba(0, 0, 0, 0.12);
+  --shadow-12: 0 0 1px rgba(0, 0, 0, 0.25);
+  --shadow-13: 0 0 1px rgba(0, 0, 0, 0.25);
+  --shadow-14: 0 0 0.5px rgba(0, 0, 0, 0.1);
+  --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12);
+  --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25),
+    -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25);
+  --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
+  --constraint-scale: 100%;
+  --constraint-1: 42px;
+  --constraint-2: 84px;
+  --constraint-3: 142px;
+  --constraint-4: 184px;
+  --constraint-5: 242px;
+  --constraint-6: 284px;
+  --constraint-7: 342px;
+  --constraint-8: 384px;
+  --constraint-9: 442px;
+  --constraint-10: 484px;
+  --constraint-11: 542px;
+  --constraint-12: 584px;
+  --constraint-13: 642px;
+  --constraint-14: 684px;
+  --constraint-15: 742px;
+  --constraint-16: 784px;
+  --spacing-xs: 4px;
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --spacing-05: 2px;
+  --spacing-10: 4px;
+  --spacing-20: 8px;
+  --spacing-25: 12px;
+  --spacing-30: 16px;
+  --spacing-40: 24px;
+  --spacing-50: 32px;
+  --spacing-55: 40px;
+  --spacing-60: 48px;
+  --spacing-70: 64px;
+  --transition-linear-80ms: 80ms linear;
+  --transition-easeinout-150ms: 150ms ease-in-out;
+  --transition-standard: 200ms ease;
+  --break-point-mobile: 768px;
+  --break-point-desktop: 1024px;
+  --break-point-biggerdesktop: 1280px;
+  --break-point-giantdesktop: 1680px;
+  --break-point-jumbodesktop: 1920px;
+  --background-color-for-button-when-active: hsl(243, 100%, 93%);
+  --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
+  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-input: #fff;
+  --background-color-for-input-when-selected: hsl(244, 100%, 97%);
+  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
+  --background-color-for-input-when-hovered: hsl(232, 18%, 98%);
+  --background-color-for-input-when-focused: #fff;
+  --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
+  --background-color-for-input-when-active: hsl(
+    203.05555555555554,
+    93.9130434783%,
+    95%
+  );
+  --background-color-for-input-as-quiet: transparent;
+  --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
+  --background-color-for-localized-input-label: #fff;
+  --background-color-for-localized-input-label-when-readonly: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-localized-input-label-when-disabled: hsl(
+    232,
+    18%,
+    95%
+  );
+  --background-color-for-button-as-primary: hsl(240, 64%, 58%);
+  --background-color-for-button-as-primary-when-hovered: hsl(240, 100%, 67%);
+  --background-color-for-button-as-primary-as-default-when-hovered: hsl(
+    240,
+    100%,
+    67%
+  );
+  --background-color-for-button-as-primary-as-default-when-active: hsl(
+    240,
+    46%,
+    48%
+  );
+  --background-color-for-button-as-primary-as-urgent: hsl(35, 90%, 55%);
+  --background-color-for-stamp-as-primary: hsl(244, 100%, 97%);
+  --background-color-for-stamp-as-positive: hsl(141, 76%, 92%);
+  --background-color-for-toggle-thumb-when-active: hsl(240, 100%, 67%);
+  --background-color-for-toggle-track-when-active: hsl(244, 100%, 84%);
+  --background-color-for-toggle-thumb-when-disabled: hsl(244, 100%, 84%);
+  --background-color-for-toggle-track-when-disabled: hsl(243, 100%, 93%);
+  --background-color-for-loading-spinner-track: hsl(243, 100%, 93%);
+  --background-color-for-loading-spinner-dot: hsl(240, 64%, 58%);
+  --background-color-for-content-notification-when-success: hsl(141, 76%, 92%);
+  --border-color-for-input: hsl(232, 18%, 80%);
+  --border-color-for-input-when-focused: hsl(240, 100%, 67%);
+  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
+  --border-color-for-input-when-readonly: #fff;
+  --border-color-for-input-when-error: #e60050;
+  --border-color-for-input-when-warning: #f16d0e;
+  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
+  --border-color-for-input-as-quiet: transparent;
+  --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
+  --border-color-for-content-notification-when-success: hsl(144, 69%, 80%);
+  --border-radius-for-button-as-big: 4px;
+  --border-radius-for-button-as-medium: 4px;
+  --border-radius-for-input: 4px;
+  --border-width-for-input: 1px;
+  --border-width-for-input-when-warning: 1px;
+  --border-width-for-input-when-error: 1px;
+  --border-width-for-input-when-focused: 1px;
+  --font-color-for-input: #1a1a1a;
+  --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
+  --font-color-for-input-when-error: hsl(3, 60%, 46%);
+  --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
+  --font-color-for-input-when-warning: #f16d0e;
+  --font-color-for-button-as-secondary: hsl(240, 64%, 58%);
+  --font-color-for-button-as-flat-when-hovered: hsl(240, 100%, 67%);
+  --font-color-for-button-as-flat-as-critical: hsl(3, 60%, 46%);
+  --font-color-for-button-as-flat-as-critical-when-hovered: hsl(3, 65%, 58%);
+  --font-color-for-view-switcher-button: hsl(240, 64%, 58%);
+  --font-color-for-stamp-as-positive: hsl(155, 90%, 24%);
+  --font-color-for-content-notification-when-success: hsl(152, 77%, 39%);
+  --height-for-button-as-big: 40px;
+  --height-for-button-as-medium: 32px;
+  --height-for-button-as-small: 16px;
+  --height-for-input: 40px;
+  --height-for-input-as-small: 32px;
+  --placeholder-font-color-for-input: hsl(232, 18%, 60%);
+  --font-size-for-button: 0.875rem;
+  --font-size-for-input: 1rem;
+  --padding-for-input: 0 var(--spacing-30);
+  --padding-for-input-as-quiet: 0 var(--spacing-20);
+  --padding-for-button: 0 var(--spacing-30);
+  --shadow-for-input: none;
+  --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
+  --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
+  --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning);
+}
diff --git a/design-system/scripts/generate-design-tokens.js b/design-system/scripts/generate-design-tokens.js
index 635bddcfd7..47000badef 100644
--- a/design-system/scripts/generate-design-tokens.js
+++ b/design-system/scripts/generate-design-tokens.js
@@ -261,7 +261,7 @@ export default designTokens;
 `;
 };
 
-const printCss = (data) => `
+const printCss = (designTokens) => `
 /*
   THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 
@@ -270,7 +270,7 @@ const printCss = (data) => `
 */
 
 :root {
-  ${Object.entries(data.default)
+  ${Object.entries(designTokens)
     .map(([key, value]) => `--${key}: ${value};`)
     .join('\n')}
 }
@@ -290,11 +290,26 @@ fs.writeFileSync(
 // This file is now deprecated and will be remove in the future
 fs.writeFileSync(
   path.join(__dirname, '../materials/custom-properties.css'),
-  prettier.format(printCss(designTokens), {
+  prettier.format(printCss(designTokens.default), {
     ...prettierConfig,
     parser: 'css',
   })
 );
+Object.keys(designTokens).forEach((theme) => {
+  fs.writeFileSync(
+    path.join(__dirname, `../materials/custom-properties_${theme}.css`),
+    prettier.format(
+      printCss({
+        ...designTokens.default,
+        ...designTokens[theme],
+      }),
+      {
+        ...prettierConfig,
+        parser: 'css',
+      }
+    )
+  );
+});
 
 fs.writeFileSync(
   path.join(__dirname, '../src/design-tokens.ts'),