From 71d83f45565990d45d542da2d699dee47b49c3c2 Mon Sep 17 00:00:00 2001
From: Andrea Simone Porceddu <andrea@vlkstudio.com>
Date: Fri, 5 Nov 2021 13:42:37 +0100
Subject: [PATCH] feat: spec improvements

closes feat #109
---
 .../_shared/components/Accordion/index.tsx    |    6 +-
 .../components/Accordion/style.module.css     |    5 +-
 .../components/CodeSnippets/style.module.css  |    6 +-
 .../_shared/components/CopyButton/index.tsx   |    2 +-
 .../components/CopyButton/style.module.css    |    8 +-
 .../src/_shared/components/DropDown/index.tsx |    4 +-
 .../components/DropDown/style.module.css      |   18 +-
 .../Slices/Components/Detail/index.tsx        |    2 +-
 .../Slices/Components/Detail/style.module.css |    8 +-
 .../Slices/Components/Tags/style.module.css   |    2 +-
 .../Slices/Components/style.module.css        |    4 +-
 .../_shared/components/Slices/Radii/index.tsx |    4 +-
 .../Slices/Shadows/Detail/index.tsx           |    4 +-
 .../components/Slices/Shadows/index.tsx       |    2 +-
 .../Slices/Spacings/Detail/style.module.css   |    8 +-
 .../_shared/ListItemCard/style.module.css     |    2 +-
 devtool/src/_shared/css/classes.css           | 1226 +++++++++--------
 devtool/src/_shared/css/dark-components.css   |   66 +-
 devtool/src/_shared/css/dark-variables.css    |   64 +-
 devtool/src/_shared/css/light-components.css  |   66 +-
 devtool/src/_shared/css/light-variables.css   |   64 +-
 .../src/_shared/styles/components/button.ts   |    4 +-
 devtool/src/_shared/styles/components/card.ts |    2 +-
 .../src/_shared/styles/components/input.ts    |    6 +-
 .../_shared/styles/components/typography.ts   |    8 +-
 devtool/src/_shared/styles/darkTheme.ts       |    4 +-
 devtool/src/_shared/styles/lightTheme.ts      |    4 +-
 devtool/src/_shared/template/Header/index.tsx |    6 +-
 .../_shared/template/Header/style.module.css  |    8 +-
 devtool/src/_shared/template/Layout.tsx       |    2 +-
 .../src/_shared/template/SideBar/Menus.tsx    |    6 +-
 .../src/_shared/template/SideBar/index.tsx    |   16 +-
 .../_shared/template/SideBar/style.module.css |   14 +-
 devtool/src/_shared/template/style.module.css |    4 +-
 .../src/devtool/pages/ComponentPage/index.tsx |    2 +-
 .../devtool/pages/Credits/style.module.css    |   12 +-
 .../src/devtool/pages/Home/style.module.css   |   16 +-
 devtool/src/devtool/style.css                 |    2 +-
 devtool/src/options/style.module.css          |    2 +-
 39 files changed, 868 insertions(+), 821 deletions(-)

diff --git a/devtool/src/_shared/components/Accordion/index.tsx b/devtool/src/_shared/components/Accordion/index.tsx
index d22131ae..bb6e05f9 100644
--- a/devtool/src/_shared/components/Accordion/index.tsx
+++ b/devtool/src/_shared/components/Accordion/index.tsx
@@ -25,7 +25,7 @@ export const Accordion: React.FC<Props> = ({
         <Icon
           name="chevron.right"
           size="s"
-          color={'invertedTextColor' as Color}
+          color={'invertedText' as Color}
           className={styles.toggle}
         />
         <div className={styles.titleContainer}>
@@ -33,13 +33,13 @@ export const Accordion: React.FC<Props> = ({
             <Icon
               name={icon}
               size="s"
-              color={'invertedTextColor' as Color}
+              color={'invertedText' as Color}
               className={styles.icon}
             />
           )}
           <h2
             className="morfeo-typography-h2"
-            style={{ color: 'var(--color-inverted-text-color)' }}
+            style={{ color: 'var(--color-inverted-text)' }}
           >
             {label}
           </h2>
diff --git a/devtool/src/_shared/components/Accordion/style.module.css b/devtool/src/_shared/components/Accordion/style.module.css
index 1feeee06..fa499ec4 100644
--- a/devtool/src/_shared/components/Accordion/style.module.css
+++ b/devtool/src/_shared/components/Accordion/style.module.css
@@ -7,7 +7,8 @@
 .toggle {
   transform: rotate(0deg);
   transition: var(--transitions-fast);
-  margin-right: var(--spacings-xxs);
+  margin-right: var(--spacings-2xs);
+  transform-origin: center center;
 }
 
 .open .toggle {
@@ -15,7 +16,7 @@
 }
 
 .icon {
-  margin-right: var(--spacings-xxs);
+  margin-right: var(--spacings-2xs);
 }
 
 .titleContainer {
diff --git a/devtool/src/_shared/components/CodeSnippets/style.module.css b/devtool/src/_shared/components/CodeSnippets/style.module.css
index 81f1ad61..706ba8f5 100644
--- a/devtool/src/_shared/components/CodeSnippets/style.module.css
+++ b/devtool/src/_shared/components/CodeSnippets/style.module.css
@@ -14,9 +14,9 @@
   cursor: pointer;
   height: var(--sizes-m);
   transition: var(--transitions-fast);
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
   padding-left: var(--spacings-xs);
-  margin-right: calc(var(--spacings-xxs) / 2);
+  margin-right: calc(var(--spacings-2xs) / 2);
   padding-right: var(--spacings-xs);
   background-color: var(--colors-gray-dark);
   border-top-left-radius: var(--radii-m);
@@ -28,7 +28,7 @@
 }
 
 .tabLabel {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/devtool/src/_shared/components/CopyButton/index.tsx b/devtool/src/_shared/components/CopyButton/index.tsx
index 69c0269e..ab876d53 100644
--- a/devtool/src/_shared/components/CopyButton/index.tsx
+++ b/devtool/src/_shared/components/CopyButton/index.tsx
@@ -63,7 +63,7 @@ export const CopyButton: React.FC<Props> = ({
         <Icon
           name={isCopied ? 'check' : 'copy'}
           size="xs"
-          color={'invertedTextColor' as Color}
+          color={'invertedText' as Color}
           className={styles.icon}
         />
       </div>
diff --git a/devtool/src/_shared/components/CopyButton/style.module.css b/devtool/src/_shared/components/CopyButton/style.module.css
index 89a55483..4ee2c4b9 100644
--- a/devtool/src/_shared/components/CopyButton/style.module.css
+++ b/devtool/src/_shared/components/CopyButton/style.module.css
@@ -2,8 +2,8 @@
   display: flex;
   width: var(--spacings-s);
   height: var(--spacings-s);
-  padding-left: calc(var(--spacings-xxs) / 2);
-  padding-right: calc(var(--spacings-xxs) / 2);
+  padding-left: calc(var(--spacings-2xs) / 2);
+  padding-right: calc(var(--spacings-2xs) / 2);
   overflow: hidden;
   align-items: center;
   justify-content: center;
@@ -21,7 +21,7 @@
 }
 
 .copyButton p {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
   max-width: 0;
   position: absolute;
   opacity: 0;
@@ -37,7 +37,7 @@
 .copyButton:hover p, .copyButton.copied p {
   opacity: 1;
   position: relative;
-  margin-right: var(--spacings-xxs);
+  margin-right: var(--spacings-2xs);
   max-width: 10rem;
 }
 
diff --git a/devtool/src/_shared/components/DropDown/index.tsx b/devtool/src/_shared/components/DropDown/index.tsx
index 5c3bc784..12bc9656 100644
--- a/devtool/src/_shared/components/DropDown/index.tsx
+++ b/devtool/src/_shared/components/DropDown/index.tsx
@@ -49,7 +49,7 @@ export const DropDown: React.FC<Props> = ({
         className={styles.option}
         onClick={getOnClick(optionValue)}
       >
-        <h4 className="morfeo-typography-h4 color-text-color ml-xs">
+        <h4 className="morfeo-typography-h4 color-text ml-xs">
           {optionLabel}
         </h4>
       </div>
@@ -75,7 +75,7 @@ export const DropDown: React.FC<Props> = ({
           {value || placeholder}
           <Icon
             name="chevron.right"
-            color={(inverted ? 'invertedTextColor' : 'textColor') as Color}
+            color={(inverted ? 'invertedText' : 'text') as Color}
             size="xs"
             className={styles.toggle}
           />
diff --git a/devtool/src/_shared/components/DropDown/style.module.css b/devtool/src/_shared/components/DropDown/style.module.css
index cebac6ff..bd464749 100644
--- a/devtool/src/_shared/components/DropDown/style.module.css
+++ b/devtool/src/_shared/components/DropDown/style.module.css
@@ -11,11 +11,11 @@
 }
 
 .title {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
 }
 
 .inverted .title {
-  color: var(--colors-text-color) !important;
+  color: var(--colors-text) !important;
 }
 
 .button {
@@ -29,12 +29,12 @@
 }
 
 .inverted .button {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
   background-color: var(--colors-primary) !important;
 }
 
 .toggle {
-  margin-left: var(--spacings-xxs);
+  margin-left: var(--spacings-2xs);
   transition: var(--transitions-fast);
   transform: rotate(90deg);
 }
@@ -52,9 +52,9 @@
   display: flex;
   overflow: scroll;
   flex-direction: column;
-  bottom: calc(var(--spacings-xxs) * -1);
+  bottom: calc(var(--spacings-2xs) * -1);
   position: absolute;
-  z-index: var(--z-indices-medium);
+  z-index: var(--z-indices-low);
   justify-content: flex-start;
   align-items: flex-start;
   transform: translateY(100%);
@@ -72,15 +72,15 @@
   align-items: center;
   justify-content: flex-start;
   position: relative;
-  padding-top: var(--spacings-xxs);
-  padding-bottom: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
+  padding-bottom: var(--spacings-2xs);
 }
 
 .option::after {
   content: "";
   position: absolute;
   width: 60%;
-  height: var(--border-widths-xxs);
+  height: var(--border-widths-2xs);
   background-color: var(--colors-gray-lighter);
   bottom: 0;
   left: 50%;
diff --git a/devtool/src/_shared/components/Slices/Components/Detail/index.tsx b/devtool/src/_shared/components/Slices/Components/Detail/index.tsx
index e61d82fa..71ecdea5 100644
--- a/devtool/src/_shared/components/Slices/Components/Detail/index.tsx
+++ b/devtool/src/_shared/components/Slices/Components/Detail/index.tsx
@@ -34,7 +34,7 @@ export const Detail = () => {
       {devtoolConfig?.style && (
         <div className={styles.defaultStyleAlertContainer}>
           <input type="checkbox" checked={defaultStyleActive} onChange={onDefaultStyleCheckboxChange} />
-          <div className="ml-xxs">
+          <div className="ml-2xs">
             <Icon name="warning" />
           </div>
           <h4 className="morfeo-typography-h4">
diff --git a/devtool/src/_shared/components/Slices/Components/Detail/style.module.css b/devtool/src/_shared/components/Slices/Components/Detail/style.module.css
index 1d5a96a3..b986c8ad 100644
--- a/devtool/src/_shared/components/Slices/Components/Detail/style.module.css
+++ b/devtool/src/_shared/components/Slices/Components/Detail/style.module.css
@@ -6,17 +6,17 @@
 .defaultStyleAlertContainer {
   display: flex;
   align-items: center;
-  margin-bottom: var(--spacings-xxs);
+  margin-bottom: var(--spacings-2xs);
 }
 
 .icon {
-  margin-right: var(--spacings-xxs);
+  margin-right: var(--spacings-2xs);
 }
 
 .previewContainer {
   width: 100%;
-  padding-top: var(--spacings-xxl);
-  padding-bottom: var(--spacings-xxl);
+  padding-top: var(--spacings-2xl);
+  padding-bottom: var(--spacings-2xl);
   margin-bottom: var(--spacings-l);
   display: flex;
   align-items: center;
diff --git a/devtool/src/_shared/components/Slices/Components/Tags/style.module.css b/devtool/src/_shared/components/Slices/Components/Tags/style.module.css
index 35dab2fc..e5b398de 100644
--- a/devtool/src/_shared/components/Slices/Components/Tags/style.module.css
+++ b/devtool/src/_shared/components/Slices/Components/Tags/style.module.css
@@ -4,6 +4,6 @@
 }
 
 .tag {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
   font-weight: bold;
 }
\ No newline at end of file
diff --git a/devtool/src/_shared/components/Slices/Components/style.module.css b/devtool/src/_shared/components/Slices/Components/style.module.css
index 2c86d499..f62f5b2a 100644
--- a/devtool/src/_shared/components/Slices/Components/style.module.css
+++ b/devtool/src/_shared/components/Slices/Components/style.module.css
@@ -35,7 +35,7 @@
 }
 
 .componentName {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
   max-width: 10rem;
   overflow: hidden;
   white-space: nowrap;
@@ -43,6 +43,6 @@
 }
 
 .tag {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
   font-weight: bold;
 }
\ No newline at end of file
diff --git a/devtool/src/_shared/components/Slices/Radii/index.tsx b/devtool/src/_shared/components/Slices/Radii/index.tsx
index 909fd251..7e0c26e6 100644
--- a/devtool/src/_shared/components/Slices/Radii/index.tsx
+++ b/devtool/src/_shared/components/Slices/Radii/index.tsx
@@ -30,14 +30,14 @@ const RadiusCard: React.FC<Props> = ({ corner, value }) => {
         style={
           {
             corner,
-            size: 'var(--sizes-xxl)',
+            size: 'var(--sizes-2xl)',
             bg: 'var(--colors-primary)',
           } as any
         }
       >
         <h4
           className="morfeo-typography-h4"
-          style={{ color: 'var(--colors-inverted-text-color)' }}
+          style={{ color: 'var(--colors-inverted-text)' }}
         >
           {value}
         </h4>
diff --git a/devtool/src/_shared/components/Slices/Shadows/Detail/index.tsx b/devtool/src/_shared/components/Slices/Shadows/Detail/index.tsx
index 63ab31f0..23e309f8 100644
--- a/devtool/src/_shared/components/Slices/Shadows/Detail/index.tsx
+++ b/devtool/src/_shared/components/Slices/Shadows/Detail/index.tsx
@@ -20,8 +20,8 @@ export const Detail: React.FC = () => {
           style={
             {
               shadow: detailKey as Shadow,
-              size: 'var(--sizes-xxl)',
-              corner: 'var(--radii-xxs)',
+              size: 'var(--sizes-2xl)',
+              corner: 'var(--radii-2xs)',
               bg: 'var(--colors-primary)',
             } as any
           }
diff --git a/devtool/src/_shared/components/Slices/Shadows/index.tsx b/devtool/src/_shared/components/Slices/Shadows/index.tsx
index 79e879dd..6df80ea8 100644
--- a/devtool/src/_shared/components/Slices/Shadows/index.tsx
+++ b/devtool/src/_shared/components/Slices/Shadows/index.tsx
@@ -29,7 +29,7 @@ const ItemCard: React.FC<Props> = ({ shadow }) => {
           {
             shadow,
             size: 'var(--sizes-xl)',
-            corner: 'var(--radii-xxs)',
+            corner: 'var(--radii-2xs)',
             bg: 'var(--colors-primary)',
           } as any
         }
diff --git a/devtool/src/_shared/components/Slices/Spacings/Detail/style.module.css b/devtool/src/_shared/components/Slices/Spacings/Detail/style.module.css
index a3ad5756..31c36d25 100644
--- a/devtool/src/_shared/components/Slices/Spacings/Detail/style.module.css
+++ b/devtool/src/_shared/components/Slices/Spacings/Detail/style.module.css
@@ -8,20 +8,20 @@
 }
 .value::after, .value::before {
   width: var(--sizes-s);
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   transition: var(--transitions-fast);
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 
 .value::after {
   content: '→';
-  margin-left: calc(var(--spacings-xxs) / 2);
+  margin-left: calc(var(--spacings-2xs) / 2);
 }
 
 .value::before {
   content: '←';
-  margin-right: calc(var(--spacings-xxs) / 2);
+  margin-right: calc(var(--spacings-2xs) / 2);
 }
\ No newline at end of file
diff --git a/devtool/src/_shared/components/Slices/_shared/ListItemCard/style.module.css b/devtool/src/_shared/components/Slices/_shared/ListItemCard/style.module.css
index 6abb1afe..bc3700fe 100644
--- a/devtool/src/_shared/components/Slices/_shared/ListItemCard/style.module.css
+++ b/devtool/src/_shared/components/Slices/_shared/ListItemCard/style.module.css
@@ -7,5 +7,5 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
 }
\ No newline at end of file
diff --git a/devtool/src/_shared/css/classes.css b/devtool/src/_shared/css/classes.css
index 9df469ce..d2f89c57 100644
--- a/devtool/src/_shared/css/classes.css
+++ b/devtool/src/_shared/css/classes.css
@@ -262,38 +262,38 @@
 .border-inline-start-width-none {
   border-inline-start-width: var(--border-widths-none);
 }
-.border-width-xxs {
-  border-width: var(--border-widths-xxs);
+.border-width-2xs {
+  border-width: var(--border-widths-2xs);
 }
-.border-top-width-xxs {
-  border-top-width: var(--border-widths-xxs);
+.border-top-width-2xs {
+  border-top-width: var(--border-widths-2xs);
 }
-.border-left-width-xxs {
-  border-left-width: var(--border-widths-xxs);
+.border-left-width-2xs {
+  border-left-width: var(--border-widths-2xs);
 }
-.border-right-width-xxs {
-  border-right-width: var(--border-widths-xxs);
+.border-right-width-2xs {
+  border-right-width: var(--border-widths-2xs);
 }
-.border-block-width-xxs {
-  border-block-width: var(--border-widths-xxs);
+.border-block-width-2xs {
+  border-block-width: var(--border-widths-2xs);
 }
-.border-bottom-width-xxs {
-  border-bottom-width: var(--border-widths-xxs);
+.border-bottom-width-2xs {
+  border-bottom-width: var(--border-widths-2xs);
 }
-.border-inline-width-xxs {
-  border-inline-width: var(--border-widths-xxs);
+.border-inline-width-2xs {
+  border-inline-width: var(--border-widths-2xs);
 }
-.border-block-end-width-xxs {
-  border-block-end-width: var(--border-widths-xxs);
+.border-block-end-width-2xs {
+  border-block-end-width: var(--border-widths-2xs);
 }
-.border-inline-end-width-xxs {
-  border-inline-end-width: var(--border-widths-xxs);
+.border-inline-end-width-2xs {
+  border-inline-end-width: var(--border-widths-2xs);
 }
-.border-block-start-width-xxs {
-  border-block-start-width: var(--border-widths-xxs);
+.border-block-start-width-2xs {
+  border-block-start-width: var(--border-widths-2xs);
 }
-.border-inline-start-width-xxs {
-  border-inline-start-width: var(--border-widths-xxs);
+.border-inline-start-width-2xs {
+  border-inline-start-width: var(--border-widths-2xs);
 }
 .border-width-xs {
   border-width: var(--border-widths-xs);
@@ -460,38 +460,38 @@
 .border-inline-start-width-xl {
   border-inline-start-width: var(--border-widths-xl);
 }
-.border-width-xxl {
-  border-width: var(--border-widths-xxl);
+.border-width-2xl {
+  border-width: var(--border-widths-2xl);
 }
-.border-top-width-xxl {
-  border-top-width: var(--border-widths-xxl);
+.border-top-width-2xl {
+  border-top-width: var(--border-widths-2xl);
 }
-.border-left-width-xxl {
-  border-left-width: var(--border-widths-xxl);
+.border-left-width-2xl {
+  border-left-width: var(--border-widths-2xl);
 }
-.border-right-width-xxl {
-  border-right-width: var(--border-widths-xxl);
+.border-right-width-2xl {
+  border-right-width: var(--border-widths-2xl);
 }
-.border-block-width-xxl {
-  border-block-width: var(--border-widths-xxl);
+.border-block-width-2xl {
+  border-block-width: var(--border-widths-2xl);
 }
-.border-bottom-width-xxl {
-  border-bottom-width: var(--border-widths-xxl);
+.border-bottom-width-2xl {
+  border-bottom-width: var(--border-widths-2xl);
 }
-.border-inline-width-xxl {
-  border-inline-width: var(--border-widths-xxl);
+.border-inline-width-2xl {
+  border-inline-width: var(--border-widths-2xl);
 }
-.border-block-end-width-xxl {
-  border-block-end-width: var(--border-widths-xxl);
+.border-block-end-width-2xl {
+  border-block-end-width: var(--border-widths-2xl);
 }
-.border-inline-end-width-xxl {
-  border-inline-end-width: var(--border-widths-xxl);
+.border-inline-end-width-2xl {
+  border-inline-end-width: var(--border-widths-2xl);
 }
-.border-block-start-width-xxl {
-  border-block-start-width: var(--border-widths-xxl);
+.border-block-start-width-2xl {
+  border-block-start-width: var(--border-widths-2xl);
 }
-.border-inline-start-width-xxl {
-  border-inline-start-width: var(--border-widths-xxl);
+.border-inline-start-width-2xl {
+  border-inline-start-width: var(--border-widths-2xl);
 }
 .border-none {
   border: var(--border-widths-none) var(--border-styles-none);
@@ -526,74 +526,107 @@
 .border-inline-start-none {
   border-inline-start: var(--border-widths-none) var(--border-styles-none);
 }
-.border-primary {
-  border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-strong {
+  border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-top-primary {
-  border-top: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-top-strong {
+  border-top: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-left-primary {
-  border-left: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-left-strong {
+  border-left: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-right-primary {
-  border-right: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-right-strong {
+  border-right: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-block-primary {
-  border-block: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-block-strong {
+  border-block: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-bottom-primary {
-  border-bottom: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-bottom-strong {
+  border-bottom: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-inline-primary {
-  border-inline: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-inline-strong {
+  border-inline: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-block-end-primary {
-  border-block-end: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-block-end-strong {
+  border-block-end: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-inline-end-primary {
-  border-inline-end: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-inline-end-strong {
+  border-inline-end: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-block-start-primary {
-  border-block-start: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-block-start-strong {
+  border-block-start: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-inline-start-primary {
-  border-inline-start: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+.border-inline-start-strong {
+  border-inline-start: var(--border-widths-m) var(--border-styles-solid) var(--colors-text);
 }
-.border-secondary {
-  border: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-medium {
+  border: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-top-secondary {
-  border-top: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-top-medium {
+  border-top: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-left-secondary {
-  border-left: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-left-medium {
+  border-left: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-right-secondary {
-  border-right: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-right-medium {
+  border-right: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-block-secondary {
-  border-block: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-block-medium {
+  border-block: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-bottom-secondary {
-  border-bottom: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-bottom-medium {
+  border-bottom: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-inline-secondary {
-  border-inline: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-inline-medium {
+  border-inline: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-block-end-secondary {
-  border-block-end: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-block-end-medium {
+  border-block-end: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-inline-end-secondary {
-  border-inline-end: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-inline-end-medium {
+  border-inline-end: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-block-start-secondary {
-  border-block-start: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-block-start-medium {
+  border-block-start: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.border-inline-start-secondary {
-  border-inline-start: var(--border-widths-s) var(--border-styles-solid) var(--colors-text-color);
+.border-inline-start-medium {
+  border-inline-start: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
 }
-.font-size-xxs {
-  font-size: var(--font-sizes-xxs);
+.border-thin {
+  border: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-top-thin {
+  border-top: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-left-thin {
+  border-left: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-right-thin {
+  border-right: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-block-thin {
+  border-block: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-bottom-thin {
+  border-bottom: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-inline-thin {
+  border-inline: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-block-end-thin {
+  border-block-end: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-inline-end-thin {
+  border-inline-end: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-block-start-thin {
+  border-block-start: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.border-inline-start-thin {
+  border-inline-start: var(--border-widths-xs) var(--border-styles-solid) var(--colors-text);
+}
+.font-size-2xs {
+  font-size: var(--font-sizes-2xs);
 }
 .font-size-xs {
   font-size: var(--font-sizes-xs);
@@ -610,8 +643,14 @@
 .font-size-xl {
   font-size: var(--font-sizes-xl);
 }
-.font-size-xxl {
-  font-size: var(--font-sizes-xxl);
+.font-size-2xl {
+  font-size: var(--font-sizes-2xl);
+}
+.font-size-3xl {
+  font-size: var(--font-sizes-3xl);
+}
+.font-size-4xl {
+  font-size: var(--font-sizes-4xl);
 }
 .font-size-none {
   font-size: var(--font-sizes-none);
@@ -675,59 +714,59 @@
 .opacity-strong {
   opacity: var(--opacities-strong);
 }
-.border-radius-xxs {
-  border-radius: var(--radii-xxs);
+.border-radius-2xs {
+  border-radius: var(--radii-2xs);
 }
-.border-end-end-radius-xxs {
-  border-end-end-radius: var(--radii-xxs);
+.border-end-end-radius-2xs {
+  border-end-end-radius: var(--radii-2xs);
 }
-.border-top-left-radius-xxs {
-  border-top-left-radius: var(--radii-xxs);
+.border-top-left-radius-2xs {
+  border-top-left-radius: var(--radii-2xs);
 }
-.border-end-start-radius-xxs {
-  border-end-start-radius: var(--radii-xxs);
+.border-end-start-radius-2xs {
+  border-end-start-radius: var(--radii-2xs);
 }
-.border-top-right-radius-xxs {
-  border-top-right-radius: var(--radii-xxs);
+.border-top-right-radius-2xs {
+  border-top-right-radius: var(--radii-2xs);
 }
-.border-start-end-radius-xxs {
-  border-start-end-radius: var(--radii-xxs);
+.border-start-end-radius-2xs {
+  border-start-end-radius: var(--radii-2xs);
 }
-.border-start-start-radius-xxs {
-  border-start-start-radius: var(--radii-xxs);
+.border-start-start-radius-2xs {
+  border-start-start-radius: var(--radii-2xs);
 }
-.border-bottom-left-radius-xxs {
-  border-bottom-left-radius: var(--radii-xxs);
+.border-bottom-left-radius-2xs {
+  border-bottom-left-radius: var(--radii-2xs);
 }
-.border-bottom-right-radius-xxs {
-  border-bottom-right-radius: var(--radii-xxs);
+.border-bottom-right-radius-2xs {
+  border-bottom-right-radius: var(--radii-2xs);
 }
-.corner-xxs {
-  border-radius: var(--radii-xxs);
+.corner-2xs {
+  border-radius: var(--radii-2xs);
 }
-.corner-end-end-xxs {
-  border-end-end-radius: var(--radii-xxs);
+.corner-end-end-2xs {
+  border-end-end-radius: var(--radii-2xs);
 }
-.corner-top-left-xxs {
-  border-top-left-radius: var(--radii-xxs);
+.corner-top-left-2xs {
+  border-top-left-radius: var(--radii-2xs);
 }
-.corner-end-start-xxs {
-  border-end-start-radius: var(--radii-xxs);
+.corner-end-start-2xs {
+  border-end-start-radius: var(--radii-2xs);
 }
-.corner-top-right-xxs {
-  border-top-right-radius: var(--radii-xxs);
+.corner-top-right-2xs {
+  border-top-right-radius: var(--radii-2xs);
 }
-.corner-start-end-xxs {
-  border-start-end-radius: var(--radii-xxs);
+.corner-start-end-2xs {
+  border-start-end-radius: var(--radii-2xs);
 }
-.corner-start-start-xxs {
-  border-start-start-radius: var(--radii-xxs);
+.corner-start-start-2xs {
+  border-start-start-radius: var(--radii-2xs);
 }
-.corner-bottom-left-xxs {
-  border-bottom-left-radius: var(--radii-xxs);
+.corner-bottom-left-2xs {
+  border-bottom-left-radius: var(--radii-2xs);
 }
-.corner-bottom-right-xxs {
-  border-bottom-right-radius: var(--radii-xxs);
+.corner-bottom-right-2xs {
+  border-bottom-right-radius: var(--radii-2xs);
 }
 .border-radius-xs {
   border-radius: var(--radii-xs);
@@ -999,59 +1038,59 @@
 .corner-bottom-right-xl {
   border-bottom-right-radius: var(--radii-xl);
 }
-.border-radius-xxl {
-  border-radius: var(--radii-xxl);
+.border-radius-2xl {
+  border-radius: var(--radii-2xl);
 }
-.border-end-end-radius-xxl {
-  border-end-end-radius: var(--radii-xxl);
+.border-end-end-radius-2xl {
+  border-end-end-radius: var(--radii-2xl);
 }
-.border-top-left-radius-xxl {
-  border-top-left-radius: var(--radii-xxl);
+.border-top-left-radius-2xl {
+  border-top-left-radius: var(--radii-2xl);
 }
-.border-end-start-radius-xxl {
-  border-end-start-radius: var(--radii-xxl);
+.border-end-start-radius-2xl {
+  border-end-start-radius: var(--radii-2xl);
 }
-.border-top-right-radius-xxl {
-  border-top-right-radius: var(--radii-xxl);
+.border-top-right-radius-2xl {
+  border-top-right-radius: var(--radii-2xl);
 }
-.border-start-end-radius-xxl {
-  border-start-end-radius: var(--radii-xxl);
+.border-start-end-radius-2xl {
+  border-start-end-radius: var(--radii-2xl);
 }
-.border-start-start-radius-xxl {
-  border-start-start-radius: var(--radii-xxl);
+.border-start-start-radius-2xl {
+  border-start-start-radius: var(--radii-2xl);
 }
-.border-bottom-left-radius-xxl {
-  border-bottom-left-radius: var(--radii-xxl);
+.border-bottom-left-radius-2xl {
+  border-bottom-left-radius: var(--radii-2xl);
 }
-.border-bottom-right-radius-xxl {
-  border-bottom-right-radius: var(--radii-xxl);
+.border-bottom-right-radius-2xl {
+  border-bottom-right-radius: var(--radii-2xl);
 }
-.corner-xxl {
-  border-radius: var(--radii-xxl);
+.corner-2xl {
+  border-radius: var(--radii-2xl);
 }
-.corner-end-end-xxl {
-  border-end-end-radius: var(--radii-xxl);
+.corner-end-end-2xl {
+  border-end-end-radius: var(--radii-2xl);
 }
-.corner-top-left-xxl {
-  border-top-left-radius: var(--radii-xxl);
+.corner-top-left-2xl {
+  border-top-left-radius: var(--radii-2xl);
 }
-.corner-end-start-xxl {
-  border-end-start-radius: var(--radii-xxl);
+.corner-end-start-2xl {
+  border-end-start-radius: var(--radii-2xl);
 }
-.corner-top-right-xxl {
-  border-top-right-radius: var(--radii-xxl);
+.corner-top-right-2xl {
+  border-top-right-radius: var(--radii-2xl);
 }
-.corner-start-end-xxl {
-  border-start-end-radius: var(--radii-xxl);
+.corner-start-end-2xl {
+  border-start-end-radius: var(--radii-2xl);
 }
-.corner-start-start-xxl {
-  border-start-start-radius: var(--radii-xxl);
+.corner-start-start-2xl {
+  border-start-start-radius: var(--radii-2xl);
 }
-.corner-bottom-left-xxl {
-  border-bottom-left-radius: var(--radii-xxl);
+.corner-bottom-left-2xl {
+  border-bottom-left-radius: var(--radii-2xl);
 }
-.corner-bottom-right-xxl {
-  border-bottom-right-radius: var(--radii-xxl);
+.corner-bottom-right-2xl {
+  border-bottom-right-radius: var(--radii-2xl);
 }
 .border-radius-none {
   border-radius: var(--radii-none);
@@ -1197,56 +1236,56 @@
 .shadow-strong {
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-light);
 }
-.size-xxs {
-  width: var(--sizes-xxs);
-  height: var(--sizes-xxs);
+.size-2xs {
+  width: var(--sizes-2xs);
+  height: var(--sizes-2xs);
 }
-.width-xxs {
-  width: var(--sizes-xxs);
+.width-2xs {
+  width: var(--sizes-2xs);
 }
-.height-xxs {
-  height: var(--sizes-xxs);
+.height-2xs {
+  height: var(--sizes-2xs);
 }
-.min-size-xxs {
-  min-width: var(--sizes-xxs);
-  min-height: var(--sizes-xxs);
+.min-size-2xs {
+  min-width: var(--sizes-2xs);
+  min-height: var(--sizes-2xs);
 }
-.max-size-xxs {
-  max-width: var(--sizes-xxs);
-  max-height: var(--sizes-xxs);
+.max-size-2xs {
+  max-width: var(--sizes-2xs);
+  max-height: var(--sizes-2xs);
 }
-.min-width-xxs {
-  min-width: var(--sizes-xxs);
+.min-width-2xs {
+  min-width: var(--sizes-2xs);
 }
-.max-width-xxs {
-  max-width: var(--sizes-xxs);
+.max-width-2xs {
+  max-width: var(--sizes-2xs);
 }
-.min-height-xxs {
-  min-height: var(--sizes-xxs);
+.min-height-2xs {
+  min-height: var(--sizes-2xs);
 }
-.max-height-xxs {
-  max-height: var(--sizes-xxs);
+.max-height-2xs {
+  max-height: var(--sizes-2xs);
 }
-.flex-basis-xxs {
-  flex-basis: var(--sizes-xxs);
+.flex-basis-2xs {
+  flex-basis: var(--sizes-2xs);
 }
-.block-size-xxs {
-  block-size: var(--sizes-xxs);
+.block-size-2xs {
+  block-size: var(--sizes-2xs);
 }
-.inline-size-xxs {
-  inline-size: var(--sizes-xxs);
+.inline-size-2xs {
+  inline-size: var(--sizes-2xs);
 }
-.max-block-size-xxs {
-  max-block-size: var(--sizes-xxs);
+.max-block-size-2xs {
+  max-block-size: var(--sizes-2xs);
 }
-.min-block-size-xxs {
-  min-block-size: var(--sizes-xxs);
+.min-block-size-2xs {
+  min-block-size: var(--sizes-2xs);
 }
-.min-inline-size-xxs {
-  min-inline-size: var(--sizes-xxs);
+.min-inline-size-2xs {
+  min-inline-size: var(--sizes-2xs);
 }
-.max-inline-size-xxs {
-  max-inline-size: var(--sizes-xxs);
+.max-inline-size-2xs {
+  max-inline-size: var(--sizes-2xs);
 }
 .size-xs {
   width: var(--sizes-xs);
@@ -1503,56 +1542,56 @@
 .max-inline-size-xl {
   max-inline-size: var(--sizes-xl);
 }
-.size-xxl {
-  width: var(--sizes-xxl);
-  height: var(--sizes-xxl);
+.size-2xl {
+  width: var(--sizes-2xl);
+  height: var(--sizes-2xl);
 }
-.width-xxl {
-  width: var(--sizes-xxl);
+.width-2xl {
+  width: var(--sizes-2xl);
 }
-.height-xxl {
-  height: var(--sizes-xxl);
+.height-2xl {
+  height: var(--sizes-2xl);
 }
-.min-size-xxl {
-  min-width: var(--sizes-xxl);
-  min-height: var(--sizes-xxl);
+.min-size-2xl {
+  min-width: var(--sizes-2xl);
+  min-height: var(--sizes-2xl);
 }
-.max-size-xxl {
-  max-width: var(--sizes-xxl);
-  max-height: var(--sizes-xxl);
+.max-size-2xl {
+  max-width: var(--sizes-2xl);
+  max-height: var(--sizes-2xl);
 }
-.min-width-xxl {
-  min-width: var(--sizes-xxl);
+.min-width-2xl {
+  min-width: var(--sizes-2xl);
 }
-.max-width-xxl {
-  max-width: var(--sizes-xxl);
+.max-width-2xl {
+  max-width: var(--sizes-2xl);
 }
-.min-height-xxl {
-  min-height: var(--sizes-xxl);
+.min-height-2xl {
+  min-height: var(--sizes-2xl);
 }
-.max-height-xxl {
-  max-height: var(--sizes-xxl);
+.max-height-2xl {
+  max-height: var(--sizes-2xl);
 }
-.flex-basis-xxl {
-  flex-basis: var(--sizes-xxl);
+.flex-basis-2xl {
+  flex-basis: var(--sizes-2xl);
 }
-.block-size-xxl {
-  block-size: var(--sizes-xxl);
+.block-size-2xl {
+  block-size: var(--sizes-2xl);
 }
-.inline-size-xxl {
-  inline-size: var(--sizes-xxl);
+.inline-size-2xl {
+  inline-size: var(--sizes-2xl);
 }
-.max-block-size-xxl {
-  max-block-size: var(--sizes-xxl);
+.max-block-size-2xl {
+  max-block-size: var(--sizes-2xl);
 }
-.min-block-size-xxl {
-  min-block-size: var(--sizes-xxl);
+.min-block-size-2xl {
+  min-block-size: var(--sizes-2xl);
 }
-.min-inline-size-xxl {
-  min-inline-size: var(--sizes-xxl);
+.min-inline-size-2xl {
+  min-inline-size: var(--sizes-2xl);
 }
-.max-inline-size-xxl {
-  max-inline-size: var(--sizes-xxl);
+.max-inline-size-2xl {
+  max-inline-size: var(--sizes-2xl);
 }
 .size-none {
   width: var(--sizes-none);
@@ -1605,183 +1644,183 @@
 .max-inline-size-none {
   max-inline-size: var(--sizes-none);
 }
-.m-xxs {
-  margin: var(--spacings-xxs);
+.m-2xs {
+  margin: var(--spacings-2xs);
 }
-.mt-xxs {
-  margin-top: var(--spacings-xxs);
+.mt-2xs {
+  margin-top: var(--spacings-2xs);
 }
-.ml-xxs {
-  margin-left: var(--spacings-xxs);
+.ml-2xs {
+  margin-left: var(--spacings-2xs);
 }
-.mr-xxs {
-  margin-right: var(--spacings-xxs);
+.mr-2xs {
+  margin-right: var(--spacings-2xs);
 }
-.mb-xxs {
-  margin-bottom: var(--spacings-xxs);
+.mb-2xs {
+  margin-bottom: var(--spacings-2xs);
 }
-.mx-xxs {
-  margin-left: var(--spacings-xxs);
-  margin-right: var(--spacings-xxs);
+.mx-2xs {
+  margin-left: var(--spacings-2xs);
+  margin-right: var(--spacings-2xs);
 }
-.my-xxs {
-  margin-top: var(--spacings-xxs);
-  margin-bottom: var(--spacings-xxs);
+.my-2xs {
+  margin-top: var(--spacings-2xs);
+  margin-bottom: var(--spacings-2xs);
 }
-.margin-xxs {
-  margin: var(--spacings-xxs);
+.margin-2xs {
+  margin: var(--spacings-2xs);
 }
-.margin-top-xxs {
-  margin-top: var(--spacings-xxs);
+.margin-top-2xs {
+  margin-top: var(--spacings-2xs);
 }
-.margin-right-xxs {
-  margin-right: var(--spacings-xxs);
+.margin-right-2xs {
+  margin-right: var(--spacings-2xs);
 }
-.margin-bottom-xxs {
-  margin-bottom: var(--spacings-xxs);
+.margin-bottom-2xs {
+  margin-bottom: var(--spacings-2xs);
 }
-.margin-left-xxs {
-  margin-left: var(--spacings-xxs);
+.margin-left-2xs {
+  margin-left: var(--spacings-2xs);
 }
-.margin-block-xxs {
-  margin-block: var(--spacings-xxs);
+.margin-block-2xs {
+  margin-block: var(--spacings-2xs);
 }
-.margin-block-end-xxs {
-  margin-block-end: var(--spacings-xxs);
+.margin-block-end-2xs {
+  margin-block-end: var(--spacings-2xs);
 }
-.margin-block-start-xxs {
-  margin-block-start: var(--spacings-xxs);
+.margin-block-start-2xs {
+  margin-block-start: var(--spacings-2xs);
 }
-.margin-inline-xxs {
-  margin-inline: var(--spacings-xxs);
+.margin-inline-2xs {
+  margin-inline: var(--spacings-2xs);
 }
-.margin-inline-end-xxs {
-  margin-inline-end: var(--spacings-xxs);
+.margin-inline-end-2xs {
+  margin-inline-end: var(--spacings-2xs);
 }
-.margin-inline-start-xxs {
-  margin-inline-start: var(--spacings-xxs);
+.margin-inline-start-2xs {
+  margin-inline-start: var(--spacings-2xs);
 }
-.p-xxs {
-  padding: var(--spacings-xxs);
+.p-2xs {
+  padding: var(--spacings-2xs);
 }
-.pt-xxs {
-  padding-top: var(--spacings-xxs);
+.pt-2xs {
+  padding-top: var(--spacings-2xs);
 }
-.pl-xxs {
-  padding-left: var(--spacings-xxs);
+.pl-2xs {
+  padding-left: var(--spacings-2xs);
 }
-.pr-xxs {
-  padding-right: var(--spacings-xxs);
+.pr-2xs {
+  padding-right: var(--spacings-2xs);
 }
-.pb-xxs {
-  padding-bottom: var(--spacings-xxs);
+.pb-2xs {
+  padding-bottom: var(--spacings-2xs);
 }
-.px-xxs {
-  padding-left: var(--spacings-xxs);
-  padding-right: var(--spacings-xxs);
+.px-2xs {
+  padding-left: var(--spacings-2xs);
+  padding-right: var(--spacings-2xs);
 }
-.py-xxs {
-  padding-top: var(--spacings-xxs);
-  padding-bottom: var(--spacings-xxs);
+.py-2xs {
+  padding-top: var(--spacings-2xs);
+  padding-bottom: var(--spacings-2xs);
 }
-.padding-xxs {
-  padding: var(--spacings-xxs);
+.padding-2xs {
+  padding: var(--spacings-2xs);
 }
-.padding-top-xxs {
-  padding-top: var(--spacings-xxs);
+.padding-top-2xs {
+  padding-top: var(--spacings-2xs);
 }
-.padding-left-xxs {
-  padding-left: var(--spacings-xxs);
+.padding-left-2xs {
+  padding-left: var(--spacings-2xs);
 }
-.padding-right-xxs {
-  padding-right: var(--spacings-xxs);
+.padding-right-2xs {
+  padding-right: var(--spacings-2xs);
 }
-.padding-bottom-xxs {
-  padding-bottom: var(--spacings-xxs);
+.padding-bottom-2xs {
+  padding-bottom: var(--spacings-2xs);
 }
-.padding-block-xxs {
-  padding-block: var(--spacings-xxs);
+.padding-block-2xs {
+  padding-block: var(--spacings-2xs);
 }
-.padding-block-end-xxs {
-  padding-block-end: var(--spacings-xxs);
+.padding-block-end-2xs {
+  padding-block-end: var(--spacings-2xs);
 }
-.padding-block-start-xxs {
-  padding-block-start: var(--spacings-xxs);
+.padding-block-start-2xs {
+  padding-block-start: var(--spacings-2xs);
 }
-.padding-inline-xxs {
-  padding-inline: var(--spacings-xxs);
+.padding-inline-2xs {
+  padding-inline: var(--spacings-2xs);
 }
-.padding-inline-end-xxs {
-  padding-inline-end: var(--spacings-xxs);
+.padding-inline-end-2xs {
+  padding-inline-end: var(--spacings-2xs);
 }
-.padding-inline-start-xxs {
-  padding-inline-start: var(--spacings-xxs);
+.padding-inline-start-2xs {
+  padding-inline-start: var(--spacings-2xs);
 }
-.scroll-padding-xxs {
-  scroll-padding: var(--spacings-xxs);
+.scroll-padding-2xs {
+  scroll-padding: var(--spacings-2xs);
 }
-.scroll-padding-top-xxs {
-  scroll-padding-top: var(--spacings-xxs);
+.scroll-padding-top-2xs {
+  scroll-padding-top: var(--spacings-2xs);
 }
-.scroll-padding-right-xxs {
-  scroll-padding-right: var(--spacings-xxs);
+.scroll-padding-right-2xs {
+  scroll-padding-right: var(--spacings-2xs);
 }
-.scroll-padding-bottom-xxs {
-  scroll-padding-bottom: var(--spacings-xxs);
+.scroll-padding-bottom-2xs {
+  scroll-padding-bottom: var(--spacings-2xs);
 }
-.scroll-padding-left-xxs {
-  scroll-padding-left: var(--spacings-xxs);
+.scroll-padding-left-2xs {
+  scroll-padding-left: var(--spacings-2xs);
 }
-.inset-xxs {
-  inset: var(--spacings-xxs);
+.inset-2xs {
+  inset: var(--spacings-2xs);
 }
-.inset-block-xxs {
-  inset-block: var(--spacings-xxs);
+.inset-block-2xs {
+  inset-block: var(--spacings-2xs);
 }
-.inset-block-end-xxs {
-  inset-block-end: var(--spacings-xxs);
+.inset-block-end-2xs {
+  inset-block-end: var(--spacings-2xs);
 }
-.inset-block-start-xxs {
-  inset-block-start: var(--spacings-xxs);
+.inset-block-start-2xs {
+  inset-block-start: var(--spacings-2xs);
 }
-.inset-inline-xxs {
-  inset-inline: var(--spacings-xxs);
+.inset-inline-2xs {
+  inset-inline: var(--spacings-2xs);
 }
-.inset-inline-end-xxs {
-  inset-inline-end: var(--spacings-xxs);
+.inset-inline-end-2xs {
+  inset-inline-end: var(--spacings-2xs);
 }
-.inset-inline-start-xxs {
-  inset-inline-start: var(--spacings-xxs);
+.inset-inline-start-2xs {
+  inset-inline-start: var(--spacings-2xs);
 }
-.top-xxs {
-  top: var(--spacings-xxs);
+.top-2xs {
+  top: var(--spacings-2xs);
 }
-.right-xxs {
-  right: var(--spacings-xxs);
+.right-2xs {
+  right: var(--spacings-2xs);
 }
-.bottom-xxs {
-  bottom: var(--spacings-xxs);
+.bottom-2xs {
+  bottom: var(--spacings-2xs);
 }
-.left-xxs {
-  left: var(--spacings-xxs);
+.left-2xs {
+  left: var(--spacings-2xs);
 }
-.grid-gap-xxs {
-  grid-gap: var(--spacings-xxs);
+.grid-gap-2xs {
+  grid-gap: var(--spacings-2xs);
 }
-.grid-column-gap-xxs {
-  grid-column-gap: var(--spacings-xxs);
+.grid-column-gap-2xs {
+  grid-column-gap: var(--spacings-2xs);
 }
-.grid-row-gap-xxs {
-  grid-row-gap: var(--spacings-xxs);
+.grid-row-gap-2xs {
+  grid-row-gap: var(--spacings-2xs);
 }
-.gap-xxs {
-  gap: var(--spacings-xxs);
+.gap-2xs {
+  gap: var(--spacings-2xs);
 }
-.column-gap-xxs {
-  column-gap: var(--spacings-xxs);
+.column-gap-2xs {
+  column-gap: var(--spacings-2xs);
 }
-.row-gap-xxs {
-  row-gap: var(--spacings-xxs);
+.row-gap-2xs {
+  row-gap: var(--spacings-2xs);
 }
 .m-xs {
   margin: var(--spacings-xs);
@@ -2673,183 +2712,183 @@
 .row-gap-xl {
   row-gap: var(--spacings-xl);
 }
-.m-xxl {
-  margin: var(--spacings-xxl);
+.m-2xl {
+  margin: var(--spacings-2xl);
 }
-.mt-xxl {
-  margin-top: var(--spacings-xxl);
+.mt-2xl {
+  margin-top: var(--spacings-2xl);
 }
-.ml-xxl {
-  margin-left: var(--spacings-xxl);
+.ml-2xl {
+  margin-left: var(--spacings-2xl);
 }
-.mr-xxl {
-  margin-right: var(--spacings-xxl);
+.mr-2xl {
+  margin-right: var(--spacings-2xl);
 }
-.mb-xxl {
-  margin-bottom: var(--spacings-xxl);
+.mb-2xl {
+  margin-bottom: var(--spacings-2xl);
 }
-.mx-xxl {
-  margin-left: var(--spacings-xxl);
-  margin-right: var(--spacings-xxl);
+.mx-2xl {
+  margin-left: var(--spacings-2xl);
+  margin-right: var(--spacings-2xl);
 }
-.my-xxl {
-  margin-top: var(--spacings-xxl);
-  margin-bottom: var(--spacings-xxl);
+.my-2xl {
+  margin-top: var(--spacings-2xl);
+  margin-bottom: var(--spacings-2xl);
 }
-.margin-xxl {
-  margin: var(--spacings-xxl);
+.margin-2xl {
+  margin: var(--spacings-2xl);
 }
-.margin-top-xxl {
-  margin-top: var(--spacings-xxl);
+.margin-top-2xl {
+  margin-top: var(--spacings-2xl);
 }
-.margin-right-xxl {
-  margin-right: var(--spacings-xxl);
+.margin-right-2xl {
+  margin-right: var(--spacings-2xl);
 }
-.margin-bottom-xxl {
-  margin-bottom: var(--spacings-xxl);
+.margin-bottom-2xl {
+  margin-bottom: var(--spacings-2xl);
 }
-.margin-left-xxl {
-  margin-left: var(--spacings-xxl);
+.margin-left-2xl {
+  margin-left: var(--spacings-2xl);
 }
-.margin-block-xxl {
-  margin-block: var(--spacings-xxl);
+.margin-block-2xl {
+  margin-block: var(--spacings-2xl);
 }
-.margin-block-end-xxl {
-  margin-block-end: var(--spacings-xxl);
+.margin-block-end-2xl {
+  margin-block-end: var(--spacings-2xl);
 }
-.margin-block-start-xxl {
-  margin-block-start: var(--spacings-xxl);
+.margin-block-start-2xl {
+  margin-block-start: var(--spacings-2xl);
 }
-.margin-inline-xxl {
-  margin-inline: var(--spacings-xxl);
+.margin-inline-2xl {
+  margin-inline: var(--spacings-2xl);
 }
-.margin-inline-end-xxl {
-  margin-inline-end: var(--spacings-xxl);
+.margin-inline-end-2xl {
+  margin-inline-end: var(--spacings-2xl);
 }
-.margin-inline-start-xxl {
-  margin-inline-start: var(--spacings-xxl);
+.margin-inline-start-2xl {
+  margin-inline-start: var(--spacings-2xl);
 }
-.p-xxl {
-  padding: var(--spacings-xxl);
+.p-2xl {
+  padding: var(--spacings-2xl);
 }
-.pt-xxl {
-  padding-top: var(--spacings-xxl);
+.pt-2xl {
+  padding-top: var(--spacings-2xl);
 }
-.pl-xxl {
-  padding-left: var(--spacings-xxl);
+.pl-2xl {
+  padding-left: var(--spacings-2xl);
 }
-.pr-xxl {
-  padding-right: var(--spacings-xxl);
+.pr-2xl {
+  padding-right: var(--spacings-2xl);
 }
-.pb-xxl {
-  padding-bottom: var(--spacings-xxl);
+.pb-2xl {
+  padding-bottom: var(--spacings-2xl);
 }
-.px-xxl {
-  padding-left: var(--spacings-xxl);
-  padding-right: var(--spacings-xxl);
+.px-2xl {
+  padding-left: var(--spacings-2xl);
+  padding-right: var(--spacings-2xl);
 }
-.py-xxl {
-  padding-top: var(--spacings-xxl);
-  padding-bottom: var(--spacings-xxl);
+.py-2xl {
+  padding-top: var(--spacings-2xl);
+  padding-bottom: var(--spacings-2xl);
 }
-.padding-xxl {
-  padding: var(--spacings-xxl);
+.padding-2xl {
+  padding: var(--spacings-2xl);
 }
-.padding-top-xxl {
-  padding-top: var(--spacings-xxl);
+.padding-top-2xl {
+  padding-top: var(--spacings-2xl);
 }
-.padding-left-xxl {
-  padding-left: var(--spacings-xxl);
+.padding-left-2xl {
+  padding-left: var(--spacings-2xl);
 }
-.padding-right-xxl {
-  padding-right: var(--spacings-xxl);
+.padding-right-2xl {
+  padding-right: var(--spacings-2xl);
 }
-.padding-bottom-xxl {
-  padding-bottom: var(--spacings-xxl);
+.padding-bottom-2xl {
+  padding-bottom: var(--spacings-2xl);
 }
-.padding-block-xxl {
-  padding-block: var(--spacings-xxl);
+.padding-block-2xl {
+  padding-block: var(--spacings-2xl);
 }
-.padding-block-end-xxl {
-  padding-block-end: var(--spacings-xxl);
+.padding-block-end-2xl {
+  padding-block-end: var(--spacings-2xl);
 }
-.padding-block-start-xxl {
-  padding-block-start: var(--spacings-xxl);
+.padding-block-start-2xl {
+  padding-block-start: var(--spacings-2xl);
 }
-.padding-inline-xxl {
-  padding-inline: var(--spacings-xxl);
+.padding-inline-2xl {
+  padding-inline: var(--spacings-2xl);
 }
-.padding-inline-end-xxl {
-  padding-inline-end: var(--spacings-xxl);
+.padding-inline-end-2xl {
+  padding-inline-end: var(--spacings-2xl);
 }
-.padding-inline-start-xxl {
-  padding-inline-start: var(--spacings-xxl);
+.padding-inline-start-2xl {
+  padding-inline-start: var(--spacings-2xl);
 }
-.scroll-padding-xxl {
-  scroll-padding: var(--spacings-xxl);
+.scroll-padding-2xl {
+  scroll-padding: var(--spacings-2xl);
 }
-.scroll-padding-top-xxl {
-  scroll-padding-top: var(--spacings-xxl);
+.scroll-padding-top-2xl {
+  scroll-padding-top: var(--spacings-2xl);
 }
-.scroll-padding-right-xxl {
-  scroll-padding-right: var(--spacings-xxl);
+.scroll-padding-right-2xl {
+  scroll-padding-right: var(--spacings-2xl);
 }
-.scroll-padding-bottom-xxl {
-  scroll-padding-bottom: var(--spacings-xxl);
+.scroll-padding-bottom-2xl {
+  scroll-padding-bottom: var(--spacings-2xl);
 }
-.scroll-padding-left-xxl {
-  scroll-padding-left: var(--spacings-xxl);
+.scroll-padding-left-2xl {
+  scroll-padding-left: var(--spacings-2xl);
 }
-.inset-xxl {
-  inset: var(--spacings-xxl);
+.inset-2xl {
+  inset: var(--spacings-2xl);
 }
-.inset-block-xxl {
-  inset-block: var(--spacings-xxl);
+.inset-block-2xl {
+  inset-block: var(--spacings-2xl);
 }
-.inset-block-end-xxl {
-  inset-block-end: var(--spacings-xxl);
+.inset-block-end-2xl {
+  inset-block-end: var(--spacings-2xl);
 }
-.inset-block-start-xxl {
-  inset-block-start: var(--spacings-xxl);
+.inset-block-start-2xl {
+  inset-block-start: var(--spacings-2xl);
 }
-.inset-inline-xxl {
-  inset-inline: var(--spacings-xxl);
+.inset-inline-2xl {
+  inset-inline: var(--spacings-2xl);
 }
-.inset-inline-end-xxl {
-  inset-inline-end: var(--spacings-xxl);
+.inset-inline-end-2xl {
+  inset-inline-end: var(--spacings-2xl);
 }
-.inset-inline-start-xxl {
-  inset-inline-start: var(--spacings-xxl);
+.inset-inline-start-2xl {
+  inset-inline-start: var(--spacings-2xl);
 }
-.top-xxl {
-  top: var(--spacings-xxl);
+.top-2xl {
+  top: var(--spacings-2xl);
 }
-.right-xxl {
-  right: var(--spacings-xxl);
+.right-2xl {
+  right: var(--spacings-2xl);
 }
-.bottom-xxl {
-  bottom: var(--spacings-xxl);
+.bottom-2xl {
+  bottom: var(--spacings-2xl);
 }
-.left-xxl {
-  left: var(--spacings-xxl);
+.left-2xl {
+  left: var(--spacings-2xl);
 }
-.grid-gap-xxl {
-  grid-gap: var(--spacings-xxl);
+.grid-gap-2xl {
+  grid-gap: var(--spacings-2xl);
 }
-.grid-column-gap-xxl {
-  grid-column-gap: var(--spacings-xxl);
+.grid-column-gap-2xl {
+  grid-column-gap: var(--spacings-2xl);
 }
-.grid-row-gap-xxl {
-  grid-row-gap: var(--spacings-xxl);
+.grid-row-gap-2xl {
+  grid-row-gap: var(--spacings-2xl);
 }
-.gap-xxl {
-  gap: var(--spacings-xxl);
+.gap-2xl {
+  gap: var(--spacings-2xl);
 }
-.column-gap-xxl {
-  column-gap: var(--spacings-xxl);
+.column-gap-2xl {
+  column-gap: var(--spacings-2xl);
 }
-.row-gap-xxl {
-  row-gap: var(--spacings-xxl);
+.row-gap-2xl {
+  row-gap: var(--spacings-2xl);
 }
 .m-none {
   margin: var(--spacings-none);
@@ -3044,14 +3083,23 @@
 .z-index-none {
   z-index: var(--z-indices-none);
 }
-.z-index-light {
-  z-index: var(--z-indices-light);
+.z-index-lowest {
+  z-index: var(--z-indices-lowest);
+}
+.z-index-lower {
+  z-index: var(--z-indices-lower);
 }
-.z-index-medium {
-  z-index: var(--z-indices-medium);
+.z-index-low {
+  z-index: var(--z-indices-low);
 }
-.z-index-strong {
-  z-index: var(--z-indices-strong);
+.z-index-high {
+  z-index: var(--z-indices-high);
+}
+.z-index-higher {
+  z-index: var(--z-indices-higher);
+}
+.z-index-highest {
+  z-index: var(--z-indices-highest);
 }
 .bg-dark {
   background-color: var(--colors-dark);
@@ -4301,168 +4349,162 @@
 .border-bottom-color-inverted-background {
   border-bottom-color: var(--colors-inverted-background);
 }
-.bg-text-color {
-  background-color: var(--colors-text-color);
-}
-.fill-text-color {
-  fill: var(--colors-text-color);
-}
-.color-text-color {
-  color: var(--colors-text-color);
+.bg-text {
+  background-color: var(--colors-text);
 }
-.stroke-text-color {
-  stroke: var(--colors-text-color);
+.fill-text {
+  fill: var(--colors-text);
 }
-.caret-color-text-color {
-  caret-color: var(--colors-text-color);
+.color-text {
+  color: var(--colors-text);
 }
-.border-color-text-color {
-  border-color: var(--colors-text-color);
+.stroke-text {
+  stroke: var(--colors-text);
 }
-.outline-color-text-color {
-  outline-color: var(--colors-text-color);
+.caret-color-text {
+  caret-color: var(--colors-text);
 }
-.border-top-color-text-color {
-  border-top-color: var(--colors-text-color);
+.border-color-text {
+  border-color: var(--colors-text);
 }
-.background-color-text-color {
-  background-color: var(--colors-text-color);
+.outline-color-text {
+  outline-color: var(--colors-text);
 }
-.column-rule-color-text-color {
-  column-rule-color: var(--colors-text-color);
+.border-top-color-text {
+  border-top-color: var(--colors-text);
 }
-.border-left-color-text-color {
-  border-left-color: var(--colors-text-color);
+.background-color-text {
+  background-color: var(--colors-text);
 }
-.border-right-color-text-color {
-  border-right-color: var(--colors-text-color);
+.column-rule-color-text {
+  column-rule-color: var(--colors-text);
 }
-.border-bottom-color-text-color {
-  border-bottom-color: var(--colors-text-color);
+.border-left-color-text {
+  border-left-color: var(--colors-text);
 }
-.bg-inverted-text-color {
-  background-color: var(--colors-inverted-text-color);
+.border-right-color-text {
+  border-right-color: var(--colors-text);
 }
-.fill-inverted-text-color {
-  fill: var(--colors-inverted-text-color);
+.border-bottom-color-text {
+  border-bottom-color: var(--colors-text);
 }
-.color-inverted-text-color {
-  color: var(--colors-inverted-text-color);
+.bg-inverted-text {
+  background-color: var(--colors-inverted-text);
 }
-.stroke-inverted-text-color {
-  stroke: var(--colors-inverted-text-color);
+.fill-inverted-text {
+  fill: var(--colors-inverted-text);
 }
-.caret-color-inverted-text-color {
-  caret-color: var(--colors-inverted-text-color);
+.color-inverted-text {
+  color: var(--colors-inverted-text);
 }
-.border-color-inverted-text-color {
-  border-color: var(--colors-inverted-text-color);
+.stroke-inverted-text {
+  stroke: var(--colors-inverted-text);
 }
-.outline-color-inverted-text-color {
-  outline-color: var(--colors-inverted-text-color);
+.caret-color-inverted-text {
+  caret-color: var(--colors-inverted-text);
 }
-.border-top-color-inverted-text-color {
-  border-top-color: var(--colors-inverted-text-color);
+.border-color-inverted-text {
+  border-color: var(--colors-inverted-text);
 }
-.background-color-inverted-text-color {
-  background-color: var(--colors-inverted-text-color);
+.outline-color-inverted-text {
+  outline-color: var(--colors-inverted-text);
 }
-.column-rule-color-inverted-text-color {
-  column-rule-color: var(--colors-inverted-text-color);
+.border-top-color-inverted-text {
+  border-top-color: var(--colors-inverted-text);
 }
-.border-left-color-inverted-text-color {
-  border-left-color: var(--colors-inverted-text-color);
+.background-color-inverted-text {
+  background-color: var(--colors-inverted-text);
 }
-.border-right-color-inverted-text-color {
-  border-right-color: var(--colors-inverted-text-color);
+.column-rule-color-inverted-text {
+  column-rule-color: var(--colors-inverted-text);
 }
-.border-bottom-color-inverted-text-color {
-  border-bottom-color: var(--colors-inverted-text-color);
+.border-left-color-inverted-text {
+  border-left-color: var(--colors-inverted-text);
 }
-.bg-head-text-color {
-  background-color: var(--colors-head-text-color);
+.border-right-color-inverted-text {
+  border-right-color: var(--colors-inverted-text);
 }
-.fill-head-text-color {
-  fill: var(--colors-head-text-color);
+.border-bottom-color-inverted-text {
+  border-bottom-color: var(--colors-inverted-text);
 }
-.color-head-text-color {
-  color: var(--colors-head-text-color);
+.bg-head-text {
+  background-color: var(--colors-head-text);
 }
-.stroke-head-text-color {
-  stroke: var(--colors-head-text-color);
+.fill-head-text {
+  fill: var(--colors-head-text);
 }
-.caret-color-head-text-color {
-  caret-color: var(--colors-head-text-color);
+.color-head-text {
+  color: var(--colors-head-text);
 }
-.border-color-head-text-color {
-  border-color: var(--colors-head-text-color);
+.stroke-head-text {
+  stroke: var(--colors-head-text);
 }
-.outline-color-head-text-color {
-  outline-color: var(--colors-head-text-color);
+.caret-color-head-text {
+  caret-color: var(--colors-head-text);
 }
-.border-top-color-head-text-color {
-  border-top-color: var(--colors-head-text-color);
+.border-color-head-text {
+  border-color: var(--colors-head-text);
 }
-.background-color-head-text-color {
-  background-color: var(--colors-head-text-color);
+.outline-color-head-text {
+  outline-color: var(--colors-head-text);
 }
-.column-rule-color-head-text-color {
-  column-rule-color: var(--colors-head-text-color);
+.border-top-color-head-text {
+  border-top-color: var(--colors-head-text);
 }
-.border-left-color-head-text-color {
-  border-left-color: var(--colors-head-text-color);
+.background-color-head-text {
+  background-color: var(--colors-head-text);
 }
-.border-right-color-head-text-color {
-  border-right-color: var(--colors-head-text-color);
+.column-rule-color-head-text {
+  column-rule-color: var(--colors-head-text);
 }
-.border-bottom-color-head-text-color {
-  border-bottom-color: var(--colors-head-text-color);
+.border-left-color-head-text {
+  border-left-color: var(--colors-head-text);
 }
-.bg-inverted-head-text-color {
-  background-color: var(--colors-inverted-head-text-color);
+.border-right-color-head-text {
+  border-right-color: var(--colors-head-text);
 }
-.fill-inverted-head-text-color {
-  fill: var(--colors-inverted-head-text-color);
+.border-bottom-color-head-text {
+  border-bottom-color: var(--colors-head-text);
 }
-.color-inverted-head-text-color {
-  color: var(--colors-inverted-head-text-color);
+.bg-inverted-head-text {
+  background-color: var(--colors-inverted-head-text);
 }
-.stroke-inverted-head-text-color {
-  stroke: var(--colors-inverted-head-text-color);
+.fill-inverted-head-text {
+  fill: var(--colors-inverted-head-text);
 }
-.caret-color-inverted-head-text-color {
-  caret-color: var(--colors-inverted-head-text-color);
+.color-inverted-head-text {
+  color: var(--colors-inverted-head-text);
 }
-.border-color-inverted-head-text-color {
-  border-color: var(--colors-inverted-head-text-color);
+.stroke-inverted-head-text {
+  stroke: var(--colors-inverted-head-text);
 }
-.outline-color-inverted-head-text-color {
-  outline-color: var(--colors-inverted-head-text-color);
+.caret-color-inverted-head-text {
+  caret-color: var(--colors-inverted-head-text);
 }
-.border-top-color-inverted-head-text-color {
-  border-top-color: var(--colors-inverted-head-text-color);
+.border-color-inverted-head-text {
+  border-color: var(--colors-inverted-head-text);
 }
-.background-color-inverted-head-text-color {
-  background-color: var(--colors-inverted-head-text-color);
+.outline-color-inverted-head-text {
+  outline-color: var(--colors-inverted-head-text);
 }
-.column-rule-color-inverted-head-text-color {
-  column-rule-color: var(--colors-inverted-head-text-color);
+.border-top-color-inverted-head-text {
+  border-top-color: var(--colors-inverted-head-text);
 }
-.border-left-color-inverted-head-text-color {
-  border-left-color: var(--colors-inverted-head-text-color);
+.background-color-inverted-head-text {
+  background-color: var(--colors-inverted-head-text);
 }
-.border-right-color-inverted-head-text-color {
-  border-right-color: var(--colors-inverted-head-text-color);
+.column-rule-color-inverted-head-text {
+  column-rule-color: var(--colors-inverted-head-text);
 }
-.border-bottom-color-inverted-head-text-color {
-  border-bottom-color: var(--colors-inverted-head-text-color);
+.border-left-color-inverted-head-text {
+  border-left-color: var(--colors-inverted-head-text);
 }
-.font-family-bold {
-  font-family: var(--fonts-bold);
+.border-right-color-inverted-head-text {
+  border-right-color: var(--colors-inverted-head-text);
 }
-.font-family-medium {
-  font-family: var(--fonts-medium);
+.border-bottom-color-inverted-head-text {
+  border-bottom-color: var(--colors-inverted-head-text);
 }
-.font-family-regular {
-  font-family: var(--fonts-regular);
+.font-family-default {
+  font-family: var(--fonts-default);
 }
diff --git a/devtool/src/_shared/css/dark-components.css b/devtool/src/_shared/css/dark-components.css
index 50cfb33c..b0e73fc2 100644
--- a/devtool/src/_shared/css/dark-components.css
+++ b/devtool/src/_shared/css/dark-components.css
@@ -1,6 +1,6 @@
 [data-morfeo-theme="dark"] .morfeo-box {}
 [data-morfeo-theme="dark"] .morfeo-card {
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -8,7 +8,7 @@
   flex-direction: column;
 }
 [data-morfeo-theme="dark"] .morfeo-card-primary {
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   cursor: pointer;
   display: flex;
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest);
@@ -17,7 +17,7 @@
   flex-direction: column;
 }
 [data-morfeo-theme="dark"] .morfeo-card-primary-clickable {
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   cursor: pointer;
   display: flex;
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest);
@@ -31,35 +31,35 @@
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lighter);
 }
 [data-morfeo-theme="dark"] .morfeo-input {
-  border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+  border: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
   height: var(--sizes-m);
   display: block;
   border-color: var(--colors-gray-lightest);
   padding-left: var(--spacings-xs);
-  border-radius: var(--radii-xxs);
+  border-radius: var(--radii-2xs);
   padding-right: var(--spacings-xs);
   background-color: var(--colors-white);
 }
 [data-morfeo-theme="dark"] .morfeo-input:focus {
-  border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+  outline: strong;
   border-color: var(--colors-gray-lighter);
 }
 [data-morfeo-theme="dark"] .morfeo-button {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
   font-size: var(--font-sizes-m);
   font-weight: var(--font-weights-bold);
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xs);
   padding-right: var(--spacings-xs);
-  padding-bottom: var(--spacings-xxs);
+  padding-bottom: var(--spacings-2xs);
   background-color: var(--colors-primary);
 }
 [data-morfeo-theme="dark"] .morfeo-button-round {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
@@ -73,7 +73,7 @@
   background-color: var(--colors-primary);
 }
 [data-morfeo-theme="dark"] .morfeo-button-side {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
@@ -97,109 +97,109 @@
   outline: none;
   font-size: var(--font-sizes-m);
   font-weight: var(--font-weights-bold);
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xs);
   padding-right: var(--spacings-xs);
-  padding-bottom: var(--spacings-xxs);
+  padding-bottom: var(--spacings-2xs);
   background-color: var(--colors-light);
 }
 [data-morfeo-theme="dark"] .morfeo-button-success {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
   font-size: var(--font-sizes-m);
   font-weight: var(--font-weights-bold);
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xs);
   padding-right: var(--spacings-xs);
-  padding-bottom: var(--spacings-xxs);
+  padding-bottom: var(--spacings-2xs);
   background-color: var(--colors-success);
 }
 [data-morfeo-theme="dark"] .morfeo-typography {
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-hero {
   font-size: var(--font-sizes-l);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h1 {
   font-size: var(--font-sizes-xl);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
   letter-spacing: var(--letter-spacings-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h2 {
   font-size: var(--font-sizes-l);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h3 {
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h4 {
   font-size: var(--font-sizes-s);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-h5 {
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-regular);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-p1 {
   font-size: var(--font-sizes-s);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-p2 {
   font-size: var(--font-sizes-xs);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-p3 {
-  font-size: var(--font-sizes-xxs);
-  font-family: var(--fonts-regular);
+  font-size: var(--font-sizes-2xs);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-link {
   color: var(--colors-primary);
   cursor: pointer;
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-link:hover {
   color: var(--colors-primary-lightest);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-cta {
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-cta::after {
   width: var(--sizes-s);
   content: '→';
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
-  margin-left: var(--spacings-xxs);
+  margin-left: var(--spacings-2xs);
 }
 [data-morfeo-theme="dark"] .morfeo-typography-caption {
-  font-size: var(--font-sizes-xxs);
+  font-size: var(--font-sizes-2xs);
   font-style: italic;
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
 }
diff --git a/devtool/src/_shared/css/dark-variables.css b/devtool/src/_shared/css/dark-variables.css
index c6a8ff6f..34ec9248 100644
--- a/devtool/src/_shared/css/dark-variables.css
+++ b/devtool/src/_shared/css/dark-variables.css
@@ -7,78 +7,84 @@
 	--border-styles-none: none;
 	--border-styles-solid: solid;
 	--border-widths-none: 0px;
-	--border-widths-xxs: 0.2px;
+	--border-widths-2xs: 0.2px;
 	--border-widths-xs: 0.5px;
 	--border-widths-s: 1px;
 	--border-widths-m: 2px;
 	--border-widths-l: 4px;
 	--border-widths-xl: 6px;
-	--border-widths-xxl: 8px;
+	--border-widths-2xl: 8px;
 	--borders-none: 0px none;
-	--borders-primary: 2px solid #ececec;
-	--borders-secondary: 1px solid #ececec;
+	--borders-strong: 2px solid #ececec;
+	--borders-medium: 1px solid #ececec;
+	--borders-thin: 0.5px solid #ececec;
 	--breakpoints-lg: 1920px;
 	--breakpoints-md: 1366px;
 	--breakpoints-sm: 768px;
 	--breakpoints-xs: 375px;
-	--font-sizes-xxs: 11px;
-	--font-sizes-xs: 14px;
-	--font-sizes-s: 16px;
-	--font-sizes-m: 18px;
-	--font-sizes-l: 26px;
-	--font-sizes-xl: 36px;
-	--font-sizes-xxl: 44px;
-	--font-sizes-none: 0px;
+	--font-sizes-2xs: .5rem;
+	--font-sizes-xs: .75rem;
+	--font-sizes-s: .875rem;
+	--font-sizes-m: 1rem;
+	--font-sizes-l: 1.125rem;
+	--font-sizes-xl: 1.5rem;
+	--font-sizes-2xl: 2rem;
+	--font-sizes-3xl: 5rem;
+	--font-sizes-4xl: 7rem;
+	--font-sizes-none: 0;
 	--font-weights-regular: 300;
 	--font-weights-medium: 500;
 	--font-weights-bold: 700;
 	--gradients-primary: linear-gradient(180deg, #06f 0%, #db2494 100%);
 	--gradients-secondary: linear-gradient(180deg, #A3A3A3 0%, #ffffff 100%);
-	--letter-spacings-body: 0.01em;
-	--letter-spacings-heading: 0.02em;
+	--letter-spacings-body: 0.02em;
+	--letter-spacings-heading: 0.01em;
 	--line-heights-body: 1.3em;
 	--line-heights-heading: 1.6em;
 	--opacities-none: 0;
 	--opacities-light: 0.2;
 	--opacities-medium: 0.6;
 	--opacities-strong: 1;
-	--radii-xxs: 4px;
+	--radii-2xs: 4px;
 	--radii-xs: 8px;
 	--radii-s: 12px;
 	--radii-m: 16px;
 	--radii-l: 20px;
 	--radii-xl: 24px;
-	--radii-xxl: 28px;
+	--radii-2xl: 28px;
 	--radii-none: 0px;
 	--radii-round: 50%;
 	--shadows-none: 0px 0px 0px #828282;
 	--shadows-light: 0px 6px 20px #E6E6E6;
 	--shadows-medium: 0px 6px 20px #C5C5C5;
 	--shadows-strong: 0px 6px 20px #A3A3A3;
-	--sizes-xxs: 8px;
+	--sizes-2xs: 8px;
 	--sizes-xs: 16px;
 	--sizes-s: 24px;
 	--sizes-m: 32px;
 	--sizes-l: 40px;
 	--sizes-xl: 48px;
-	--sizes-xxl: 56px;
+	--sizes-2xl: 56px;
 	--sizes-none: 0px;
-	--spacings-xxs: 8px;
+	--spacings-2xs: 8px;
 	--spacings-xs: 16px;
 	--spacings-s: 24px;
 	--spacings-m: 32px;
 	--spacings-l: 40px;
 	--spacings-xl: 48px;
-	--spacings-xxl: 56px;
+	--spacings-2xl: 56px;
 	--spacings-none: 0px;
 	--transitions-slow: 1s ease;
 	--transitions-medium: .6s ease;
 	--transitions-fast: .3s ease;
 	--transitions-none: 0s;
 	--z-indices-none: 0;
-	--z-indices-light: 10;
-	--z-indices-medium: 50;
-	--z-indices-strong: 90;
+	--z-indices-lowest: -1;
+	--z-indices-lower: 1;
+	--z-indices-low: 10;
+	--z-indices-high: 20;
+	--z-indices-higher: 30;
+	--z-indices-highest: 40;
 	--colors-dark: #6C6C6C;
 	--colors-light: #A3A3A3;
 	--colors-gray-darkest: #414141;
@@ -111,11 +117,9 @@
 	--colors-black: #000000;
 	--colors-background: #000000;
 	--colors-inverted-background: #ffffff;
-	--colors-text-color: #ececec;
-	--colors-inverted-text-color: #2f2f2f;
-	--colors-head-text-color: #ffffff;
-	--colors-inverted-head-text-color: #000000;
-	--fonts-bold: Montserrat, sans-serif;
-	--fonts-medium: Montserrat, sans-serif;
-	--fonts-regular: Montserrat, sans-serif;
+	--colors-text: #ececec;
+	--colors-inverted-text: #2f2f2f;
+	--colors-head-text: #ffffff;
+	--colors-inverted-head-text: #000000;
+	--fonts-default: Montserrat, sans-serif;
 }
diff --git a/devtool/src/_shared/css/light-components.css b/devtool/src/_shared/css/light-components.css
index ecfdc674..82e9250a 100644
--- a/devtool/src/_shared/css/light-components.css
+++ b/devtool/src/_shared/css/light-components.css
@@ -1,6 +1,6 @@
 [data-morfeo-theme="light"] .morfeo-box {}
 [data-morfeo-theme="light"] .morfeo-card {
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -8,7 +8,7 @@
   flex-direction: column;
 }
 [data-morfeo-theme="light"] .morfeo-card-primary {
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   cursor: pointer;
   display: flex;
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest);
@@ -17,7 +17,7 @@
   flex-direction: column;
 }
 [data-morfeo-theme="light"] .morfeo-card-primary-clickable {
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   cursor: pointer;
   display: flex;
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lightest);
@@ -31,35 +31,35 @@
   box-shadow: var(--border-widths-none) var(--border-widths-xl) var(--radii-l) var(--colors-gray-lighter);
 }
 [data-morfeo-theme="light"] .morfeo-input {
-  border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+  border: var(--border-widths-s) var(--border-styles-solid) var(--colors-text);
   height: var(--sizes-m);
   display: block;
   border-color: var(--colors-gray-lightest);
   padding-left: var(--spacings-xs);
-  border-radius: var(--radii-xxs);
+  border-radius: var(--radii-2xs);
   padding-right: var(--spacings-xs);
   background-color: var(--colors-white);
 }
 [data-morfeo-theme="light"] .morfeo-input:focus {
-  border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
+  outline: strong;
   border-color: var(--colors-gray-lighter);
 }
 [data-morfeo-theme="light"] .morfeo-button {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
   font-size: var(--font-sizes-m);
   font-weight: var(--font-weights-bold);
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xs);
   padding-right: var(--spacings-xs);
-  padding-bottom: var(--spacings-xxs);
+  padding-bottom: var(--spacings-2xs);
   background-color: var(--colors-primary);
 }
 [data-morfeo-theme="light"] .morfeo-button-round {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
@@ -73,7 +73,7 @@
   background-color: var(--colors-primary);
 }
 [data-morfeo-theme="light"] .morfeo-button-side {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
@@ -97,109 +97,109 @@
   outline: none;
   font-size: var(--font-sizes-m);
   font-weight: var(--font-weights-bold);
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xs);
   padding-right: var(--spacings-xs);
-  padding-bottom: var(--spacings-xxs);
+  padding-bottom: var(--spacings-2xs);
   background-color: var(--colors-light);
 }
 [data-morfeo-theme="light"] .morfeo-button-success {
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   border: var(--border-widths-none) var(--border-styles-none);
   cursor: pointer;
   outline: none;
   font-size: var(--font-sizes-m);
   font-weight: var(--font-weights-bold);
-  padding-top: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xs);
   padding-right: var(--spacings-xs);
-  padding-bottom: var(--spacings-xxs);
+  padding-bottom: var(--spacings-2xs);
   background-color: var(--colors-success);
 }
 [data-morfeo-theme="light"] .morfeo-typography {
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
 }
 [data-morfeo-theme="light"] .morfeo-typography-hero {
   font-size: var(--font-sizes-l);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h1 {
   font-size: var(--font-sizes-xl);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
   letter-spacing: var(--letter-spacings-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h2 {
   font-size: var(--font-sizes-l);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h3 {
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h4 {
   font-size: var(--font-sizes-s);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-h5 {
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-regular);
   line-height: var(--line-heights-heading);
 }
 [data-morfeo-theme="light"] .morfeo-typography-p1 {
   font-size: var(--font-sizes-s);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="light"] .morfeo-typography-p2 {
   font-size: var(--font-sizes-xs);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
   letter-spacing: var(--letter-spacings-body);
 }
 [data-morfeo-theme="light"] .morfeo-typography-p3 {
-  font-size: var(--font-sizes-xxs);
-  font-family: var(--fonts-regular);
+  font-size: var(--font-sizes-2xs);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
 }
 [data-morfeo-theme="light"] .morfeo-typography-link {
   color: var(--colors-primary);
   cursor: pointer;
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
 }
 [data-morfeo-theme="light"] .morfeo-typography-link:hover {
   color: var(--colors-primary-lightest);
 }
 [data-morfeo-theme="light"] .morfeo-typography-cta {
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
 }
 [data-morfeo-theme="light"] .morfeo-typography-cta::after {
   width: var(--sizes-s);
   content: '→';
   font-size: var(--font-sizes-m);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
-  margin-left: var(--spacings-xxs);
+  margin-left: var(--spacings-2xs);
 }
 [data-morfeo-theme="light"] .morfeo-typography-caption {
-  font-size: var(--font-sizes-xxs);
+  font-size: var(--font-sizes-2xs);
   font-style: italic;
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   line-height: var(--line-heights-body);
 }
diff --git a/devtool/src/_shared/css/light-variables.css b/devtool/src/_shared/css/light-variables.css
index 8972182d..dcff6c36 100644
--- a/devtool/src/_shared/css/light-variables.css
+++ b/devtool/src/_shared/css/light-variables.css
@@ -7,78 +7,84 @@
 	--border-styles-none: none;
 	--border-styles-solid: solid;
 	--border-widths-none: 0px;
-	--border-widths-xxs: 0.2px;
+	--border-widths-2xs: 0.2px;
 	--border-widths-xs: 0.5px;
 	--border-widths-s: 1px;
 	--border-widths-m: 2px;
 	--border-widths-l: 4px;
 	--border-widths-xl: 6px;
-	--border-widths-xxl: 8px;
+	--border-widths-2xl: 8px;
 	--borders-none: 0px none;
-	--borders-primary: 2px solid #2f2f2f;
-	--borders-secondary: 1px solid #2f2f2f;
+	--borders-strong: 2px solid #2f2f2f;
+	--borders-medium: 1px solid #2f2f2f;
+	--borders-thin: 0.5px solid #2f2f2f;
 	--breakpoints-lg: 1920px;
 	--breakpoints-md: 1366px;
 	--breakpoints-sm: 768px;
 	--breakpoints-xs: 375px;
-	--font-sizes-xxs: 11px;
-	--font-sizes-xs: 14px;
-	--font-sizes-s: 16px;
-	--font-sizes-m: 18px;
-	--font-sizes-l: 26px;
-	--font-sizes-xl: 36px;
-	--font-sizes-xxl: 44px;
-	--font-sizes-none: 0px;
+	--font-sizes-2xs: .5rem;
+	--font-sizes-xs: .75rem;
+	--font-sizes-s: .875rem;
+	--font-sizes-m: 1rem;
+	--font-sizes-l: 1.125rem;
+	--font-sizes-xl: 1.5rem;
+	--font-sizes-2xl: 2rem;
+	--font-sizes-3xl: 5rem;
+	--font-sizes-4xl: 7rem;
+	--font-sizes-none: 0;
 	--font-weights-regular: 300;
 	--font-weights-medium: 500;
 	--font-weights-bold: 700;
 	--gradients-primary: linear-gradient(180deg, #06f 0%, #db2494 100%);
 	--gradients-secondary: linear-gradient(180deg, #A3A3A3 0%, #ffffff 100%);
-	--letter-spacings-body: 0.01em;
-	--letter-spacings-heading: 0.02em;
+	--letter-spacings-body: 0.02em;
+	--letter-spacings-heading: 0.01em;
 	--line-heights-body: 1.3em;
 	--line-heights-heading: 1.6em;
 	--opacities-none: 0;
 	--opacities-light: 0.2;
 	--opacities-medium: 0.6;
 	--opacities-strong: 1;
-	--radii-xxs: 4px;
+	--radii-2xs: 4px;
 	--radii-xs: 8px;
 	--radii-s: 12px;
 	--radii-m: 16px;
 	--radii-l: 20px;
 	--radii-xl: 24px;
-	--radii-xxl: 28px;
+	--radii-2xl: 28px;
 	--radii-none: 0px;
 	--radii-round: 50%;
 	--shadows-none: 0px 0px 0px #828282;
 	--shadows-light: 0px 6px 20px #E6E6E6;
 	--shadows-medium: 0px 6px 20px #C5C5C5;
 	--shadows-strong: 0px 6px 20px #A3A3A3;
-	--sizes-xxs: 8px;
+	--sizes-2xs: 8px;
 	--sizes-xs: 16px;
 	--sizes-s: 24px;
 	--sizes-m: 32px;
 	--sizes-l: 40px;
 	--sizes-xl: 48px;
-	--sizes-xxl: 56px;
+	--sizes-2xl: 56px;
 	--sizes-none: 0px;
-	--spacings-xxs: 8px;
+	--spacings-2xs: 8px;
 	--spacings-xs: 16px;
 	--spacings-s: 24px;
 	--spacings-m: 32px;
 	--spacings-l: 40px;
 	--spacings-xl: 48px;
-	--spacings-xxl: 56px;
+	--spacings-2xl: 56px;
 	--spacings-none: 0px;
 	--transitions-slow: 1s ease;
 	--transitions-medium: .6s ease;
 	--transitions-fast: .3s ease;
 	--transitions-none: 0s;
 	--z-indices-none: 0;
-	--z-indices-light: 10;
-	--z-indices-medium: 50;
-	--z-indices-strong: 90;
+	--z-indices-lowest: -1;
+	--z-indices-lower: 1;
+	--z-indices-low: 10;
+	--z-indices-high: 20;
+	--z-indices-higher: 30;
+	--z-indices-highest: 40;
 	--colors-dark: #6C6C6C;
 	--colors-light: #A3A3A3;
 	--colors-gray-darkest: #414141;
@@ -111,11 +117,9 @@
 	--colors-black: #000000;
 	--colors-background: #ffffff;
 	--colors-inverted-background: #000000;
-	--colors-text-color: #2f2f2f;
-	--colors-inverted-text-color: #ececec;
-	--colors-head-text-color: #000000;
-	--colors-inverted-head-text-color: #ffffff;
-	--fonts-bold: Montserrat, sans-serif;
-	--fonts-medium: Montserrat, sans-serif;
-	--fonts-regular: Montserrat, sans-serif;
+	--colors-text: #2f2f2f;
+	--colors-inverted-text: #ececec;
+	--colors-head-text: #000000;
+	--colors-inverted-head-text: #ffffff;
+	--fonts-default: Montserrat, sans-serif;
 }
diff --git a/devtool/src/_shared/styles/components/button.ts b/devtool/src/_shared/styles/components/button.ts
index c55e0678..49d9e118 100644
--- a/devtool/src/_shared/styles/components/button.ts
+++ b/devtool/src/_shared/styles/components/button.ts
@@ -3,10 +3,10 @@ import { ComponentConfig } from '@morfeo/react';
 export const Button: ComponentConfig = {
   tag: 'button',
   style: {
-    py: 'xxs',
+    py: '2xs',
     px: 'xs',
     bg: 'primary',
-    color: 'invertedTextColor',
+    color: 'invertedText',
     cursor: 'pointer',
     corner: 'xs',
     border: 'none',
diff --git a/devtool/src/_shared/styles/components/card.ts b/devtool/src/_shared/styles/components/card.ts
index 09a34303..e900cac1 100644
--- a/devtool/src/_shared/styles/components/card.ts
+++ b/devtool/src/_shared/styles/components/card.ts
@@ -4,7 +4,7 @@ export const Card: ComponentConfig = {
   tag: 'div',
   style: {
     cursor: 'pointer',
-    color: 'textColor',
+    color: 'text',
     corner: 's',
     display: 'flex',
     alignItems: 'center',
diff --git a/devtool/src/_shared/styles/components/input.ts b/devtool/src/_shared/styles/components/input.ts
index a625d3a1..c4a52a31 100644
--- a/devtool/src/_shared/styles/components/input.ts
+++ b/devtool/src/_shared/styles/components/input.ts
@@ -7,11 +7,11 @@ export const Input: ComponentConfig = {
     px: 'xs',
     bg: 'white',
     height: 'm',
-    corner: 'xxs',
-    border: 'primary',
+    corner: '2xs',
+    border: 'medium',
     borderColor: 'gray.lightest',
     '&:focus': {
-      border: 'primary',
+      outline: 'strong',
       borderColor: 'gray.lighter',
     },
   },
diff --git a/devtool/src/_shared/styles/components/typography.ts b/devtool/src/_shared/styles/components/typography.ts
index ea66d899..438b045a 100644
--- a/devtool/src/_shared/styles/components/typography.ts
+++ b/devtool/src/_shared/styles/components/typography.ts
@@ -2,7 +2,7 @@ import { ComponentConfig } from '@morfeo/react';
 
 export const Typography: ComponentConfig = {
   style: {
-    fontFamily: 'regular',
+    fontFamily: 'default',
   },
   variants: {
     hero: {
@@ -73,7 +73,7 @@ export const Typography: ComponentConfig = {
     p3: {
       tag: 'p',
       style: {
-        fontSize: 'xxs',
+        fontSize: '2xs',
         lineHeight: 'body',
       },
     },
@@ -97,13 +97,13 @@ export const Typography: ComponentConfig = {
           variant: 'h3',
           content: "'→'",
           width: 's',
-          ml: 'xxs',
+          ml: '2xs',
         },
       },
     },
     caption: {
       style: {
-        fontSize: 'xxs',
+        fontSize: '2xs',
         lineHeight: 'body',
         fontStyle: 'italic',
       },
diff --git a/devtool/src/_shared/styles/darkTheme.ts b/devtool/src/_shared/styles/darkTheme.ts
index dbc5aac7..b6380b25 100644
--- a/devtool/src/_shared/styles/darkTheme.ts
+++ b/devtool/src/_shared/styles/darkTheme.ts
@@ -4,9 +4,7 @@ import { components } from './components';
 const theme = {
   ...darkTheme,
   fonts: {
-    bold: 'Montserrat, sans-serif',
-    medium: 'Montserrat, sans-serif',
-    regular: 'Montserrat, sans-serif',
+    default: 'Montserrat, sans-serif',
   },
   components,
 };
diff --git a/devtool/src/_shared/styles/lightTheme.ts b/devtool/src/_shared/styles/lightTheme.ts
index e1c9fffc..74a22f80 100644
--- a/devtool/src/_shared/styles/lightTheme.ts
+++ b/devtool/src/_shared/styles/lightTheme.ts
@@ -4,9 +4,7 @@ import { components } from './components';
 const theme = {
   ...lightTheme,
   fonts: {
-    bold: 'Montserrat, sans-serif',
-    medium: 'Montserrat, sans-serif',
-    regular: 'Montserrat, sans-serif',
+    default: 'Montserrat, sans-serif',
   },
   components,
 };
diff --git a/devtool/src/_shared/template/Header/index.tsx b/devtool/src/_shared/template/Header/index.tsx
index fe915d16..c358c4a5 100644
--- a/devtool/src/_shared/template/Header/index.tsx
+++ b/devtool/src/_shared/template/Header/index.tsx
@@ -17,7 +17,7 @@ export const Header: React.FC = () => {
       return (
         <Icon
           name="chevron.left"
-          color={'invertedTextColor' as Color}
+          color={'invertedText' as Color}
           className={styles.backButton}
           onClick={navigateBack}
         />
@@ -53,8 +53,8 @@ export const Header: React.FC = () => {
         {backButton}
         <Icon
           name="logo"
-          color={'invertedTextColor' as Color}
-          size="xxl"
+          color={'invertedText' as Color}
+          size="2xl"
           onClick={() => navigate(RouteName.HOME)}
         />
       </div>
diff --git a/devtool/src/_shared/template/Header/style.module.css b/devtool/src/_shared/template/Header/style.module.css
index 22f740f8..bf35b61a 100644
--- a/devtool/src/_shared/template/Header/style.module.css
+++ b/devtool/src/_shared/template/Header/style.module.css
@@ -2,11 +2,11 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--z-indices-strong);
+  z-index: var(--z-indices-high);
   height: 5rem;
   width: 100%;
   background-color: var(--colors-primary);
-  color: var(--colors-inverted-text-color);
+  color: var(--colors-inverted-text);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -34,6 +34,6 @@
   background-color: var(--colors-background);
   padding-left: var(--spacings-m);
   padding-right: var(--spacings-m);
-  padding-top: var(--spacings-xxs);
-  padding-bottom: var(--spacings-xxs);
+  padding-top: var(--spacings-2xs);
+  padding-bottom: var(--spacings-2xs);
 }
\ No newline at end of file
diff --git a/devtool/src/_shared/template/Layout.tsx b/devtool/src/_shared/template/Layout.tsx
index 8d00ac6b..405908d0 100644
--- a/devtool/src/_shared/template/Layout.tsx
+++ b/devtool/src/_shared/template/Layout.tsx
@@ -17,7 +17,7 @@ export const Layout: React.FC = ({ children }) => {
     if (shouldRender === false) {
       return (
         <div className={styles.loadingContainer}>
-          <Icon name="loading" size="xxl" />
+          <Icon name="loading" size="2xl" />
         </div>
       );
     }
diff --git a/devtool/src/_shared/template/SideBar/Menus.tsx b/devtool/src/_shared/template/SideBar/Menus.tsx
index b8f00c15..3695df5a 100644
--- a/devtool/src/_shared/template/SideBar/Menus.tsx
+++ b/devtool/src/_shared/template/SideBar/Menus.tsx
@@ -49,7 +49,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     <div className={clsx(styles.menuItem, isNotActive && styles.inactiveItem)}>
       <Icon
         name={icon}
-        color={(isNotActive ? 'gray.lighter' : 'invertedTextColor') as Color}
+        color={(isNotActive ? 'gray.lighter' : 'invertedText') as Color}
         size="xs"
         style={opacityStyle}
       />
@@ -61,9 +61,9 @@ const MenuItem: React.FC<MenuItemProps> = ({
         className="morfeo-typography-h3"
         style={{
           ...opacityStyle,
-          color: 'var(--color-inverted-text-color)',
+          color: 'var(--colors-inverted-text)',
           marginBottom: 'var(--spacings-none)',
-          marginLeft: 'var(--spacings-xxs)',
+          marginLeft: 'var(--spacings-2xs)',
           cursor: 'pointer',
         }}
       >
diff --git a/devtool/src/_shared/template/SideBar/index.tsx b/devtool/src/_shared/template/SideBar/index.tsx
index 5ec41845..2cf304ad 100644
--- a/devtool/src/_shared/template/SideBar/index.tsx
+++ b/devtool/src/_shared/template/SideBar/index.tsx
@@ -30,8 +30,8 @@ export const ExternalLink: React.FC<ExternalLinkProps> = ({ to, children }) => {
   return (
     <h3
       onClick={onClick}
-      className="morfeo-typography-h3  ml-xxs"
-      style={{ cursor: 'pointer', color: 'var(--colors-inverted-text-color)' }}
+      className="morfeo-typography-h3  ml-2xs"
+      style={{ cursor: 'pointer', color: 'var(--colors-inverted-text)' }}
     >
       {children}
     </h3>
@@ -76,24 +76,24 @@ export const SideBar: React.FC<Props> = ({ open, setOpen }) => {
         >
           <Icon
             name="doubleChevron.right"
-            color={'invertedTextColor' as Color}
+            color={'invertedText' as Color}
           />
         </button>
       </div>
       <div className={styles.sidebarFooter}>
         <div className={styles.footerItem}>
-          <Icon name="docs" size="s" color={'invertedTextColor' as Color} />
+          <Icon name="docs" size="s" color={'invertedText' as Color} />
           <ExternalLink to="https://morfeo.dev/">
             {t('sidebarDocs')}
           </ExternalLink>
         </div>
         <div className={styles.footerItem}>
-          <Icon name="credits" size="s" color={'invertedTextColor' as Color} />
+          <Icon name="credits" size="s" color={'invertedText' as Color} />
           <Link
-            className="morfeo-typography-h3 ml-xxs"
+            className="morfeo-typography-h3 ml-2xs"
             style={{
               cursor: 'pointer',
-              color: 'var(--colors-inverted-text-color)',
+              color: 'var(--colors-inverted-text)',
             }}
             to={RouteName.CREDITS}
             onNavigate={toggle}
@@ -102,7 +102,7 @@ export const SideBar: React.FC<Props> = ({ open, setOpen }) => {
           </Link>
         </div>
         <div className={styles.footerItem}>
-          <Icon name="github" size="s" color={'invertedTextColor' as Color} />
+          <Icon name="github" size="s" color={'invertedText' as Color} />
           <ExternalLink to="https://github.com/VLK-STUDIO/morfeo">
             {t('sidebarGithub')}
           </ExternalLink>
diff --git a/devtool/src/_shared/template/SideBar/style.module.css b/devtool/src/_shared/template/SideBar/style.module.css
index e530897c..877c2f0e 100644
--- a/devtool/src/_shared/template/SideBar/style.module.css
+++ b/devtool/src/_shared/template/SideBar/style.module.css
@@ -6,7 +6,7 @@
   position: fixed;
   flex-direction: column;
   justify-content: space-between;
-  z-index: var(--z-indices-medium);
+  z-index: var(--z-indices-low);
   transform: translateX(-100%);
   transition: var(--transitions-fast);
   background-color: var(--colors-primary);
@@ -29,12 +29,12 @@
   width: 100%;
   height: fit-content;
   overflow-y: scroll;
-  color: var(--colors-inverted-text-color);
-  z-index: var(--z-indices-strong);
+  color: var(--colors-inverted-text);
+  z-index: var(--z-indices-high);
   align-items: center;
   flex-direction: column;
   justify-content: flex-start;
-  padding-top: calc(2 * var(--sizes-xxl));
+  padding-top: calc(2 * var(--sizes-2xl));
 }
 
 .menuContainer {
@@ -83,7 +83,7 @@
 }
 
 .sidebarFooter {
-  border-top: var(--border-widths-s) solid var(--colors-inverted-text-color);
+  border-top: var(--border-widths-s) solid var(--colors-inverted-text);
   padding-top: var(--spacings-m);
   padding-bottom: var(--spacings-s);
 }
@@ -92,9 +92,9 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin-bottom: var(--spacings-xxs);
+  margin-bottom: var(--spacings-2xs);
 }
 
 .footerItem a {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
 }
diff --git a/devtool/src/_shared/template/style.module.css b/devtool/src/_shared/template/style.module.css
index 78612003..984ae917 100644
--- a/devtool/src/_shared/template/style.module.css
+++ b/devtool/src/_shared/template/style.module.css
@@ -1,6 +1,6 @@
 .main {
   position: relative;
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   height: 100vh;
   overflow: scroll;
   background-color: var(--colors-background);
@@ -25,7 +25,7 @@
   display: none;
   width: 100%;
   height: 100%;
-  z-index: calc(var(--z-indices-medium) - 1);
+  z-index: calc(var(--z-indices-low) - 1);
   position: fixed;
   opacity: var(--opacities-medium);
   background-color: var(--colors-gray-dark);
diff --git a/devtool/src/devtool/pages/ComponentPage/index.tsx b/devtool/src/devtool/pages/ComponentPage/index.tsx
index e7588d23..fb100b03 100644
--- a/devtool/src/devtool/pages/ComponentPage/index.tsx
+++ b/devtool/src/devtool/pages/ComponentPage/index.tsx
@@ -37,7 +37,7 @@ export const ComponentPage: React.FC = () => {
     <Page breadcrumb={['components', ...breadCrumb]} title={title}>
       <Detail />
       {state && state.detailKey && (
-        <div className="my-xxs mx-xs">
+        <div className="my-2xs mx-xs">
           <CodeSnippets
             slice={slice as SliceName}
             value={detailKey as string}
diff --git a/devtool/src/devtool/pages/Credits/style.module.css b/devtool/src/devtool/pages/Credits/style.module.css
index 5574bc5f..ebde76c7 100644
--- a/devtool/src/devtool/pages/Credits/style.module.css
+++ b/devtool/src/devtool/pages/Credits/style.module.css
@@ -18,21 +18,21 @@
 }
 
 .name {
-  margin-bottom: var(--spacings-xxs);
+  margin-bottom: var(--spacings-2xs);
 }
 
 .cardContainer:hover .name::after {
-  margin-left: var(--spacings-xxs);
+  margin-left: var(--spacings-2xs);
 }
 
 .name::after {
   content: '→';
   width: var(--sizes-s);
-  color: var(--colors-text-color);
-  margin-left: calc(var(--spacings-xxs) / 2);
+  color: var(--colors-text);
+  margin-left: calc(var(--spacings-2xs) / 2);
   transition: var(--transitions-fast);
   font-size: var(--font-sizes-s);
-  font-family: var(--fonts-regular);
+  font-family: var(--fonts-default);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
 }
@@ -42,5 +42,5 @@
 }
 
 .contributionsContainer span:not(:last-child) {
-  margin-right: var(--spacings-xxs);
+  margin-right: var(--spacings-2xs);
 }
\ No newline at end of file
diff --git a/devtool/src/devtool/pages/Home/style.module.css b/devtool/src/devtool/pages/Home/style.module.css
index 30e7f365..7e09a70f 100644
--- a/devtool/src/devtool/pages/Home/style.module.css
+++ b/devtool/src/devtool/pages/Home/style.module.css
@@ -15,10 +15,10 @@
   left: 0;
   display: flex;
   align-items: center;
-  padding-top: calc(var(--spacings-xxs) / 2);
-  padding-bottom: calc(var(--spacings-xxs) / 2);
-  padding-left: var(--spacings-xxs);
-  padding-right: var(--spacings-xxs);
+  padding-top: calc(var(--spacings-2xs) / 2);
+  padding-bottom: calc(var(--spacings-2xs) / 2);
+  padding-left: var(--spacings-2xs);
+  padding-right: var(--spacings-2xs);
   height: fit-content;
   background-color: var(--colors-primary-lighter);
   border-bottom-right-radius: var(--radii-m);
@@ -30,11 +30,11 @@
 }
 
 .value {
-  color: var(--colors-inverted-text-color) !important;
+  color: var(--colors-inverted-text) !important;
 }
 
 .empty .value {
-  margin-left: var(--spacings-xxs);
+  margin-left: var(--spacings-2xs);
   color: var(--colors-warning) !important;
 }
 
@@ -54,8 +54,8 @@
   opacity: 0;
   max-width: 0;
   position: absolute;
-  margin-left: var(--spacings-xxs);
-  margin-right: var(--spacings-xxs);
+  margin-left: var(--spacings-2xs);
+  margin-right: var(--spacings-2xs);
   transition: var(--transitions-none);
 }
 
diff --git a/devtool/src/devtool/style.css b/devtool/src/devtool/style.css
index 6e8b8242..67bf9233 100644
--- a/devtool/src/devtool/style.css
+++ b/devtool/src/devtool/style.css
@@ -1,7 +1,7 @@
 @import url(../_shared/css/index.css);
 
 html, body {
-  color: var(--colors-text-color);
+  color: var(--colors-text);
   background-color: var(--colors-background);
 }
 
diff --git a/devtool/src/options/style.module.css b/devtool/src/options/style.module.css
index 31273fb7..7d5eaa64 100644
--- a/devtool/src/options/style.module.css
+++ b/devtool/src/options/style.module.css
@@ -1,6 +1,6 @@
 .container {
   display: flex;
-  padding: var(--spacings-xxl);
+  padding: var(--spacings-2xl);
   align-items: center;
   flex-direction: column;
   justify-content: center;