Merge branch 'dev' of github.com:smart-chain-fr/leCoffre-front into dev

src/front/Components/DesignSystem/Button/classes.module.scss

@@ -13,7 +13,7 @@
 	white-space: nowrap;
 	user-select: none;
 	cursor: pointer;
-	font-family: var(--font-primary);
+	font-family: var(--font-text-family);
 
 	svg {
 		width: 18px;

src/front/Components/DesignSystem/MultiSelect/classes.module.scss

@@ -25,7 +25,7 @@
 			}
 		}
 		.label {
-			font-family: var(--font-primary);
+			font-family: var(--font-text-family);
 			font-style: normal;
 			font-weight: 400;
 			font-size: 12px;

src/front/Components/DesignSystem/MultiSelect/styles.tsx

@@ -3,7 +3,7 @@ export const styles = {
 		...provided,
 		cursor: "pointer",
 		padding: "8px 24px",
-		fontFamily: "var(--font-primary)",
+		fontFamily: "var(--font-text-family)",
 		fontStyle: "normal",
 		fontWeight: "400",
 		fontSize: "18px",
@@ -25,7 +25,7 @@ export const styles = {
 		...provided,
 		padding: 0,
 		minWidth: "100px",
-		fontFamily: "var(--font-primary)",
+		fontFamily: "var(--font-text-family)",
 		fontStyle: "normal",
 		fontWeight: "600",
 		fontSize: "16px",

src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss

@@ -63,7 +63,7 @@
 	}
 
 	.header {
-		font-family: var(--font-primary);
+		font-family: var(--font-text-family);
 		font-style: normal;
 		font-weight: 600;
 		font-size: 16px;
@@ -89,7 +89,7 @@
 	}
 
 	.text-container {
-		font-family: var(--font-primary);
+		font-family: var(--font-text-family);
 		font-style: normal;
 		font-weight: 400;
 		font-size: 14px;

src/front/Components/DesignSystem/ToolTip/index.tsx

@@ -25,7 +25,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipM
 			fontSize: 14,
 			fontWeight: 400,
 			lineHeight: "22px",
-			fontFamily: "var(--font-primary)",
+			fontFamily: "var(--font-text-family)",
 			padding: "16px",
 			borderRadius: "0px",
 		},

src/front/Themes/fonts.scss

@@ -1 +1,2 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

src/front/Themes/variables-old.scss

@@ -5,7 +5,7 @@
 	--root-margin: auto;
 	--root-padding: 64px 120px;
 
-	--font-primary: "Inter", sans-serif;
+	--font-text-family: "Inter", sans-serif;
 
 	--green-flash: #{$green-flash};
 	--blue-flash: #{$blue-flash};

src/front/Themes/variables.scss

@@ -1,153 +1,588 @@
-@import "@Themes/constants.scss";
+/* .primitives */
-
 :root {
-	--root-max-width: 1440px;
+	/* Mode 1 */
-	--root-margin: auto;
+	/* color */
-	--root-padding: 64px 120px;
+	--color-error-100: #fee2e1;
-
+	--color-error-200: #fecaca;
-	--font-primary: "Poppins", sans-serif;
+	--color-error-300: #fda5a5;
-
+	--color-error-400: #f87172;
-	// Generic colors
+	--color-error-50: #fef2f2;
-	--color-generic-black: #{$color-generic-black};
+	--color-error-500: #ef4444;
-	--color-generic-white: #{$color-generic-white};
+	--color-error-600: #dc2625;
-	--color-generic-none: #{$color-generic-none};
+	--color-error-700: #b91c1d;
-
+	--color-error-800: #991b1c;
-	// Neutral colors
+	--color-error-900: #7f1c1d;
-	--color-neutral-50: #{$color-neutral-50};
+	--color-error-950: #450a0a;
-	--color-neutral-100: #{$color-neutral-100};
+	--color-generic-black: #000000;
-	--color-neutral-200: #{$color-neutral-200};
+	--color-generic-none: #00000000;
-	--color-neutral-300: #{$color-neutral-300};
+	--color-generic-white: #ffffff;
-	--color-neutral-400: #{$color-neutral-400};
+	--color-info-100: #d8f1ff;
-	--color-neutral-500: #{$color-neutral-500};
+	--color-info-200: #b9e7ff;
-	--color-neutral-600: #{$color-neutral-600};
+	--color-info-300: #8adaff;
-	--color-neutral-700: #{$color-neutral-700};
+	--color-info-400: #51c3fe;
-	--color-neutral-800: #{$color-neutral-800};
+	--color-info-50: #edf9ff;
-	--color-neutral-900: #{$color-neutral-900};
+	--color-info-500: #29a6ff;
-	--color-neutral-950: #{$color-neutral-950};
+	--color-info-600: #1088fe;
-
+	--color-info-700: #0b71ef;
-	// Primary colors
+	--color-info-800: #0e58bc;
-	--color-primary-50: #{$color-primary-50};
+	--color-info-900: #134d95;
-	--color-primary-100: #{$color-primary-100};
+	--color-info-950: #11305a;
-	--color-primary-200: #{$color-primary-200};
+	--color-neutral-100: #edeff1;
-	--color-primary-300: #{$color-primary-300};
+	--color-neutral-200: #d7dce0;
-	--color-primary-400: #{$color-primary-400};
+	--color-neutral-300: #b4bec5;
-	--color-primary-500: #{$color-primary-500};
+	--color-neutral-400: #8b9aa5;
-	--color-primary-600: #{$color-primary-600};
+	--color-neutral-50: #f7f8f8;
-	--color-primary-700: #{$color-primary-700};
+	--color-neutral-500: #6d7e8a;
-	--color-primary-800: #{$color-primary-800};
+	--color-neutral-600: #576672;
-	--color-primary-900: #{$color-primary-900};
+	--color-neutral-700: #47535d;
-	--color-primary-950: #{$color-primary-950};
+	--color-neutral-800: #3e474e;
-
+	--color-neutral-900: #373e44;
-	// Secondary colors
+	--color-neutral-950: #24282e;
-	--color-secondary-50: #{$color-secondary-50};
+	--color-primary-100: #b7d1f1;
-	--color-secondary-100: #{$color-secondary-100};
+	--color-primary-200: #89b3e7;
-	--color-secondary-200: #{$color-secondary-200};
+	--color-primary-300: #5c96de;
-	--color-secondary-300: #{$color-secondary-300};
+	--color-primary-400: #2e78d4;
-	--color-secondary-400: #{$color-secondary-400};
+	--color-primary-50: #e5eefa;
-	--color-secondary-500: #{$color-secondary-500};
+	--color-primary-500: #005bcb;
-	--color-secondary-600: #{$color-secondary-600};
+	--color-primary-600: #004eb8;
-	--color-secondary-700: #{$color-secondary-700};
+	--color-primary-700: #0040a4;
-	--color-secondary-800: #{$color-secondary-800};
+	--color-primary-800: #013391;
-	--color-secondary-900: #{$color-secondary-900};
+	--color-primary-900: #01257d;
-	--color-secondary-950: #{$color-secondary-950};
+	--color-primary-950: #01186a;
-
+	--color-secondary-100: #ffe4d4;
-	// Error colors
+	--color-secondary-200: #ffc5a8;
-	--color-error-50: #{$color-error-50};
+	--color-secondary-300: #ff9c70;
-	--color-error-100: #{$color-error-100};
+	--color-secondary-400: #ff6737;
-	--color-error-200: #{$color-error-200};
+	--color-secondary-50: #fff3ed;
-	--color-error-300: #{$color-error-300};
+	--color-secondary-500: #ff4617;
-	--color-error-400: #{$color-error-400};
+	--color-secondary-600: #f02505;
-	--color-error-500: #{$color-error-500};
+	--color-secondary-700: #c71707;
-	--color-error-600: #{$color-error-600};
+	--color-secondary-800: #9e150e;
-	--color-error-700: #{$color-error-700};
+	--color-secondary-900: #7f140f;
-	--color-error-800: #{$color-error-800};
+	--color-secondary-950: #450605;
-	--color-error-900: #{$color-error-900};
+	--color-success-100: #dcfce8;
-	--color-error-950: #{$color-error-950};
+	--color-success-200: #bbf7d2;
-
+	--color-success-300: #87efb0;
-	// Warning colors
+	--color-success-400: #49de86;
-	--color-warning-50: #{$color-warning-50};
+	--color-success-50: #effdf4;
-	--color-warning-100: #{$color-warning-100};
+	--color-success-500: #22c564;
-	--color-warning-200: #{$color-warning-200};
+	--color-success-600: #15a450;
-	--color-warning-300: #{$color-warning-300};
+	--color-success-700: #178040;
-	--color-warning-400: #{$color-warning-400};
+	--color-success-800: #166437;
-	--color-warning-500: #{$color-warning-500};
+	--color-success-900: #14532f;
-	--color-warning-600: #{$color-warning-600};
+	--color-success-950: #052e18;
-	--color-warning-700: #{$color-warning-700};
+	--color-warning-100: #fff4c6;
-	--color-warning-800: #{$color-warning-800};
+	--color-warning-200: #ffe788;
-	--color-warning-900: #{$color-warning-900};
+	--color-warning-300: #ffd54a;
-	--color-warning-950: #{$color-warning-950};
+	--color-warning-400: #ffbd12;
-
+	--color-warning-50: #fffbeb;
-	// Success colors
+	--color-warning-500: #f99f09;
-	--color-success-50: #{$color-success-50};
+	--color-warning-600: #de7702;
-	--color-success-100: #{$color-success-100};
+	--color-warning-700: #b75306;
-	--color-success-200: #{$color-success-200};
+	--color-warning-800: #943f0d;
-	--color-success-300: #{$color-success-300};
+	--color-warning-900: #7a340e;
-	--color-success-400: #{$color-success-400};
+	--color-warning-950: #461a02;
-	--color-success-500: #{$color-success-500};
+	/* number */
-	--color-success-600: #{$color-success-600};
+	--radius-xs: 0.125rem;
-	--color-success-700: #{$color-success-700};
+	--radius-sm: 0.25rem;
-	--color-success-800: #{$color-success-800};
+	--radius-md: 0.5rem;
-	--color-success-900: #{$color-success-900};
+	--radius-lg: 1rem;
-	--color-success-950: #{$color-success-950};
+	--radius-xl: 1.5rem;
-
+	--radius-2xl: 2rem;
-	// Info colors
+	--radius-3xl: 22.5rem;
-	--color-info-50: #{$color-info-50};
+	--font-text-weight-light: 18.75rem;
-	--color-info-100: #{$color-info-100};
+	--font-text-weight-regular: 25rem;
-	--color-info-200: #{$color-info-200};
+	--font-text-weight-semibold: 37.5rem;
-	--color-info-300: #{$color-info-300};
+	--font-text-weight-bold: 43.75rem;
-	--color-info-400: #{$color-info-400};
+	--font-title-weight-light: 18.75rem;
-	--color-info-500: #{$color-info-500};
+	--font-title-weight-regular: 25rem;
-	--color-info-600: #{$color-info-600};
+	--font-title-weight-semibold: 37.5rem;
-	--color-info-700: #{$color-info-700};
+	--font-title-weight-bold: 43.75rem;
-	--color-info-800: #{$color-info-800};
+	--spacing-0-25: 0.125rem;
-	--color-info-900: #{$color-info-900};
+	--spacing-0-5: 0.25rem;
-	--color-info-950: #{$color-info-950};
+	--spacing-0-75: 0.375rem;
-
+	--spacing-1: 0.5rem;
-	// Soft colors (TO DELETE AFTER)
+	--spacing-1-5: 0.75rem;
-	--color-primary-500-soft: #{$color-primary-500-soft};
+	--spacing-2: 1rem;
-	--color-secondary-500-soft: #{$color-secondary-500-soft};
+	--spacing-3: 1.5rem;
-	--color-info-500-soft: #{$color-info-500-soft};
+	--spacing-4: 2rem;
-	--color-success-600-soft: #{$color-success-600-soft};
+	--spacing-5: 2.5rem;
-	--color-warning-500-soft: #{$color-warning-500-soft};
+	--spacing-6: 3rem;
-	--color-error-600-soft: #{$color-error-600-soft};
+	--spacing-7: 3.5rem;
-
+	--spacing-8: 4rem;
-	/// Spacing
+	--spacing-9: 4.5rem;
-	--spacing-0-25: #{$spacing-0-25};
+	--spacing-10: 5rem;
-	--spacing-0-5: #{$spacing-0-5};
+	--spacing-11: 5.5rem;
-	--spacing-0-75: #{$spacing-0-75};
+	--spacing-12: 6rem;
-	--spacing-1: #{$spacing-1};
+	--spacing-13: 6.5rem;
-	--spacing-1-5: #{$spacing-1-5};
+	--spacing-14: 7rem;
-	--spacing-2: #{$spacing-2};
+	--spacing-15: 7.5rem;
-	--spacing-3: #{$spacing-3};
+	--spacing-16: 8rem;
-	--spacing-4: #{$spacing-4};
+	/* string */
-	--spacing-5: #{$spacing-5};
+	--font-text-family: Poppins;
-	--spacing-6: #{$spacing-6};
+	--font-title-family: Poppins;
-	--spacing-7: #{$spacing-7};
+}
-	--spacing-8: #{$spacing-8};
+/* tokens */
-	--spacing-9: #{$spacing-9};
+:root {
-	--spacing-10: #{$spacing-10};
+	/* Mode 1 */
-	--spacing-11: #{$spacing-11};
+	/* color */
-	--spacing-12: #{$spacing-12};
+	--alerts-badge-background: var(--color-generic-white);
-	--spacing-13: #{$spacing-13};
+	--alerts-badge-border: var(--color-generic-none);
-	--spacing-14: #{$spacing-14};
+	--alerts-badge-contrast-error: var(--error-default-base);
-	--spacing-15: #{$spacing-15};
+	--alerts-badge-contrast-info: var(--info-default-base);
-	--spacing-16: #{$spacing-16};
+	--alerts-badge-contrast-neutral: var(--neutral-default-base);
-
+	--alerts-badge-contrast-success: var(--success-default-base);
-	--radius-xs: #{$radius-xs};
+	--alerts-badge-contrast-warning: var(--warning-default-base);
-	--radius-sm: #{$radius-sm};
+	--alerts-error-background: var(--error-weak-higlight);
-	--radius-md: #{$radius-md};
+	--alerts-error-border: var(--error-weak-deep);
-	--radius-lg: #{$radius-lg};
+	--alerts-error-description: var(--text-secondary);
-	--radius-xl: #{$radius-xl};
+	--alerts-error-title: var(--text-primary);
-	--radius-2xl: #{radius-2xl};
+	--alerts-info-background: var(--info-weak-higlight);
-	--radius-3xl: #{radius-3xl};
+	--alerts-info-border: var(--info-weak-deep);
-
+	--alerts-info-description: var(--text-secondary);
-	--background-primary: #{$background-primary};
+	--alerts-info-title: var(--text-primary);
-	--background-elevation-1: #{$background-elevation-1};
+	--alerts-neutral-background: var(--neutral-weak-higlight);
-	--background-elevation-2: #{$background-elevation-2};
+	--alerts-neutral-border: var(--neutral-weak-deep);
-
+	--alerts-neutral-description: var(--text-secondary);
-	--opacity-disabled: #{$opacity-disabled};
+	--alerts-neutral-title: var(--text-primary);
-
+	--alerts-success-background: var(--success-weak-higlight);
-	--shadow-sm: #{$shadow-sm};
+	--alerts-success-border: var(--success-weak-deep);
-	--shadow-md: #{$shadow-md};
+	--alerts-success-description: var(--text-secondary);
-	--shadow-lg: #{$shadow-lg};
+	--alerts-success-title: var(--text-primary);
+	--alerts-warning-background: var(--warning-weak-higlight);
+	--alerts-warning-border: var(--warning-weak-deep);
+	--alerts-warning-description: var(--text-secondary);
+	--alerts-warning-title: var(--text-primary);
+	--background-elevation-1: var(--color-neutral-50);
+	--background-elevation-2: var(--color-neutral-100);
+	--background-primary: var(--color-generic-white);
+	--button-header-background: var(--color-generic-white);
+	--button-header-border: var(--secondary-default-base);
+	--button-contained-error-default-background: var(--error-default-base);
+	--button-contained-error-default-border: var(--color-generic-none);
+	--button-contained-error-default-contrast: var(--error-default-contrast);
+	--button-contained-error-hovered-background: var(--error-default-higlight);
+	--button-contained-error-hovered-border: var(--color-generic-none);
+	--button-contained-error-hovered-contrast: var(--error-default-contrast);
+	--button-contained-error-pressed-background: var(--error-default-deep);
+	--button-contained-error-pressed-border: var(--color-generic-none);
+	--button-contained-error-pressed-contrast: var(--error-default-contrast);
+	--button-contained-info-default-background: var(--info-default-base);
+	--button-contained-info-default-border: var(--color-generic-none);
+	--button-contained-info-default-contrast: var(--info-default-contrast);
+	--button-contained-info-hovered-background: var(--info-default-higlight);
+	--button-contained-info-hovered-border: var(--color-generic-none);
+	--button-contained-info-hovered-contrast: var(--info-default-contrast);
+	--button-contained-info-pressed-background: var(--info-default-deep);
+	--button-contained-info-pressed-border: var(--color-generic-none);
+	--button-contained-info-pressed-contrast: var(--info-default-contrast);
+	--button-contained-neutral-default-background: var(--neutral-default-base);
+	--button-contained-neutral-default-border: var(--color-generic-none);
+	--button-contained-neutral-default-contrast: var(--neutral-default-contrast);
+	--button-contained-neutral-hovered-background: var(--neutral-default-higlight);
+	--button-contained-neutral-hovered-border: var(--color-generic-none);
+	--button-contained-neutral-hovered-contrast: var(--neutral-default-contrast);
+	--button-contained-neutral-pressed-background: var(--neutral-default-deep);
+	--button-contained-neutral-pressed-border: var(--color-generic-none);
+	--button-contained-neutral-pressed-contrast: var(--neutral-default-contrast);
+	--button-contained-primary-default-background: var(--primary-default-base);
+	--button-contained-primary-default-border: var(--color-generic-none);
+	--button-contained-primary-default-contrast: var(--primary-default-contrast);
+	--button-contained-primary-hovered-background: var(--primary-default-higlight);
+	--button-contained-primary-hovered-border: var(--color-generic-none);
+	--button-contained-primary-hovered-contrast: var(--primary-default-contrast);
+	--button-contained-primary-pressed-background: var(--primary-default-deep);
+	--button-contained-primary-pressed-border: var(--color-generic-none);
+	--button-contained-primary-pressed-contrast: var(--primary-default-contrast);
+	--button-contained-secondary-default-background: var(--secondary-default-base);
+	--button-contained-secondary-default-border: var(--color-generic-none);
+	--button-contained-secondary-default-contrast: var(--secondary-default-contrast);
+	--button-contained-secondary-hovered-background: var(--secondary-default-higlight);
+	--button-contained-secondary-hovered-border: var(--color-generic-none);
+	--button-contained-secondary-hovered-contrast: var(--secondary-default-contrast);
+	--button-contained-secondary-pressed-background: var(--secondary-default-deep);
+	--button-contained-secondary-pressed-border: var(--color-generic-none);
+	--button-contained-secondary-pressed-contrast: var(--secondary-default-contrast);
+	--button-contained-success-default-background: var(--success-default-base);
+	--button-contained-success-default-border: var(--color-generic-none);
+	--button-contained-success-default-contrast: var(--success-default-contrast);
+	--button-contained-success-hovered-background: var(--success-default-higlight);
+	--button-contained-success-hovered-border: var(--color-generic-none);
+	--button-contained-success-hovered-contrast: var(--success-default-contrast);
+	--button-contained-success-pressed-background: var(--success-default-deep);
+	--button-contained-success-pressed-border: var(--color-generic-none);
+	--button-contained-success-pressed-contrast: var(--success-default-contrast);
+	--button-contained-warning-default-background: var(--warning-default-base);
+	--button-contained-warning-default-border: var(--color-generic-none);
+	--button-contained-warning-default-contrast: var(--warning-default-contrast);
+	--button-contained-warning-hovered-background: var(--warning-default-higlight);
+	--button-contained-warning-hovered-border: var(--color-generic-none);
+	--button-contained-warning-hovered-contrast: var(--warning-default-contrast);
+	--button-contained-warning-pressed-background: var(--warning-default-deep);
+	--button-contained-warning-pressed-border: var(--color-generic-none);
+	--button-contained-warning-pressed-contrast: var(--warning-default-contrast);
+	--button-icon-button-default-default: var(--text-secondary);
+	--button-icon-button-default-hovered: var(--text-primary);
+	--button-icon-button-error-contrast: var(--error-weak-contrast);
+	--button-icon-button-error-default: var(--error-weak-higlight);
+	--button-icon-button-error-hovered: var(--error-weak-deep);
+	--button-icon-button-info-contrast: var(--info-weak-contrast);
+	--button-icon-button-info-default: var(--info-weak-higlight);
+	--button-icon-button-info-hovered: var(--info-weak-deep);
+	--button-icon-button-neutral-contrast: var(--text-primary);
+	--button-icon-button-neutral-default: var(--neutral-weak-higlight);
+	--button-icon-button-neutral-hovered: var(--neutral-weak-deep);
+	--button-icon-button-primary-contrast: var(--primary-weak-contrast);
+	--button-icon-button-primary-default: var(--primary-weak-higlight);
+	--button-icon-button-primary-hovered: var(--primary-weak-deep);
+	--button-icon-button-success-contrast: var(--success-weak-contrast);
+	--button-icon-button-success-default: var(--success-weak-higlight);
+	--button-icon-button-success-hovered: var(--success-weak-deep);
+	--button-icon-button-warning-contrast: var(--warning-weak-contrast);
+	--button-icon-button-warning-default: var(--warning-weak-higlight);
+	--button-icon-button-warning-hovered: var(--warning-weak-deep);
+	--button-outlined-error-default-background: var(--color-generic-none);
+	--button-outlined-error-default-border: var(--error-default-base);
+	--button-outlined-error-default-contrast: var(--error-default-base);
+	--button-outlined-error-hovered-background: var(--error-weak-higlight);
+	--button-outlined-error-hovered-border: var(--error-weak-contrast);
+	--button-outlined-error-hovered-contrast: var(--error-weak-contrast);
+	--button-outlined-error-pressed-background: var(--error-weak-deep);
+	--button-outlined-error-pressed-border: var(--error-weak-contrast);
+	--button-outlined-error-pressed-contrast: var(--error-weak-contrast);
+	--button-outlined-info-default-background: var(--color-generic-none);
+	--button-outlined-info-default-border: var(--info-default-base);
+	--button-outlined-info-default-contrast: var(--info-default-base);
+	--button-outlined-info-hovered-background: var(--info-weak-higlight);
+	--button-outlined-info-hovered-border: var(--info-weak-contrast);
+	--button-outlined-info-hovered-contrast: var(--info-weak-contrast);
+	--button-outlined-info-pressed-background: var(--info-weak-deep);
+	--button-outlined-info-pressed-border: var(--info-weak-contrast);
+	--button-outlined-info-pressed-contrast: var(--info-weak-contrast);
+	--button-outlined-neutral-default-background: var(--color-generic-none);
+	--button-outlined-neutral-default-border: var(--neutral-default-base);
+	--button-outlined-neutral-default-contrast: var(--neutral-default-base);
+	--button-outlined-neutral-hovered-background: var(--neutral-weak-higlight);
+	--button-outlined-neutral-hovered-border: var(--neutral-weak-contrast);
+	--button-outlined-neutral-hovered-contrast: var(--neutral-weak-contrast);
+	--button-outlined-neutral-pressed-background: var(--neutral-weak-deep);
+	--button-outlined-neutral-pressed-border: var(--neutral-weak-contrast);
+	--button-outlined-neutral-pressed-contrast: var(--neutral-weak-contrast);
+	--button-outlined-primary-default-background: var(--color-generic-none);
+	--button-outlined-primary-default-border: var(--primary-default-base);
+	--button-outlined-primary-default-contrast: var(--primary-default-base);
+	--button-outlined-primary-hovered-background: var(--primary-weak-higlight);
+	--button-outlined-primary-hovered-border: var(--primary-default-base);
+	--button-outlined-primary-hovered-contrast: var(--primary-default-base);
+	--button-outlined-primary-pressed-background: var(--primary-weak-deep);
+	--button-outlined-primary-pressed-border: var(--primary-default-higlight);
+	--button-outlined-primary-pressed-contrast: var(--primary-default-higlight);
+	--button-outlined-secondary-default-background: var(--color-generic-none);
+	--button-outlined-secondary-default-border: var(--secondary-default-base);
+	--button-outlined-secondary-default-contrast: var(--secondary-default-base);
+	--button-outlined-secondary-hovered-background: var(--secondary-weak-higlight);
+	--button-outlined-secondary-hovered-border: var(--secondary-weak-contrast);
+	--button-outlined-secondary-hovered-contrast: var(--secondary-weak-contrast);
+	--button-outlined-secondary-pressed-background: var(--secondary-weak-deep);
+	--button-outlined-secondary-pressed-border: var(--secondary-weak-contrast);
+	--button-outlined-secondary-pressed-contrast: var(--secondary-weak-contrast);
+	--button-outlined-success-default-background: var(--color-generic-none);
+	--button-outlined-success-default-border: var(--success-default-base);
+	--button-outlined-success-default-contrast: var(--success-default-base);
+	--button-outlined-success-hovered-background: var(--success-weak-higlight);
+	--button-outlined-success-hovered-border: var(--success-weak-contrast);
+	--button-outlined-success-hovered-contrast: var(--success-weak-contrast);
+	--button-outlined-success-pressed-background: var(--success-weak-deep);
+	--button-outlined-success-pressed-border: var(--success-weak-contrast);
+	--button-outlined-success-pressed-contrast: var(--success-weak-contrast);
+	--button-outlined-warning-default-background: var(--color-generic-none);
+	--button-outlined-warning-default-border: var(--warning-default-base);
+	--button-outlined-warning-default-contrast: var(--warning-default-base);
+	--button-outlined-warning-hovered-background: var(--warning-weak-higlight);
+	--button-outlined-warning-hovered-border: var(--warning-weak-contrast);
+	--button-outlined-warning-hovered-contrast: var(--warning-weak-contrast);
+	--button-outlined-warning-pressed-background: var(--warning-weak-deep);
+	--button-outlined-warning-pressed-border: var(--warning-weak-contrast);
+	--button-outlined-warning-pressed-contrast: var(--warning-weak-contrast);
+	--button-text-error-default-background: var(--color-generic-none);
+	--button-text-error-default-border: var(--error-default-base);
+	--button-text-error-default-contrast: var(--error-default-base);
+	--button-text-error-hovered-background: var(--color-generic-none);
+	--button-text-error-hovered-border: var(--error-default-higlight);
+	--button-text-error-hovered-contrast: var(--error-default-higlight);
+	--button-text-error-pressed-background: var(--color-generic-none);
+	--button-text-error-pressed-border: var(--error-default-deep);
+	--button-text-error-pressed-contrast: var(--error-default-deep);
+	--button-text-info-default-background: var(--color-generic-none);
+	--button-text-info-default-border: var(--info-default-base);
+	--button-text-info-default-contrast: var(--info-default-base);
+	--button-text-info-hovered-background: var(--color-generic-none);
+	--button-text-info-hovered-border: var(--info-default-higlight);
+	--button-text-info-hovered-contrast: var(--info-default-higlight);
+	--button-text-info-pressed-background: var(--color-generic-none);
+	--button-text-info-pressed-border: var(--info-default-deep);
+	--button-text-info-pressed-contrast: var(--info-default-deep);
+	--button-text-neutral-default-background: var(--color-generic-none);
+	--button-text-neutral-default-border: var(--neutral-default-base);
+	--button-text-neutral-default-contrast: var(--neutral-default-base);
+	--button-text-neutral-hovered-background: var(--color-generic-none);
+	--button-text-neutral-hovered-border: var(--neutral-strong-higlight);
+	--button-text-neutral-hovered-contrast: var(--neutral-strong-higlight);
+	--button-text-neutral-pressed-background: var(--color-generic-none);
+	--button-text-neutral-pressed-border: var(--neutral-weak-contrast);
+	--button-text-neutral-pressed-contrast: var(--neutral-weak-contrast);
+	--button-text-primary-default-background: var(--color-generic-none);
+	--button-text-primary-default-border: var(--primary-default-base);
+	--button-text-primary-default-contrast: var(--primary-default-base);
+	--button-text-primary-hovered-background: var(--color-generic-none);
+	--button-text-primary-hovered-border: var(--primary-default-higlight);
+	--button-text-primary-hovered-contrast: var(--primary-default-higlight);
+	--button-text-primary-pressed-background: var(--color-generic-none);
+	--button-text-primary-pressed-border: var(--primary-default-deep);
+	--button-text-primary-pressed-contrast: var(--primary-default-deep);
+	--button-text-secondary-default-background: var(--color-generic-none);
+	--button-text-secondary-default-border: var(--secondary-default-base);
+	--button-text-secondary-default-contrast: var(--secondary-default-base);
+	--button-text-secondary-hovered-background: var(--color-generic-none);
+	--button-text-secondary-hovered-border: var(--secondary-strong-higlight);
+	--button-text-secondary-hovered-contrast: var(--secondary-strong-higlight);
+	--button-text-secondary-pressed-background: var(--color-generic-none);
+	--button-text-secondary-pressed-border: var(--secondary-strong-deep);
+	--button-text-secondary-pressed-contrast: var(--secondary-strong-deep);
+	--button-text-success-default-background: var(--color-generic-none);
+	--button-text-success-default-border: var(--success-default-base);
+	--button-text-success-default-contrast: var(--success-default-base);
+	--button-text-success-hovered-background: var(--color-generic-none);
+	--button-text-success-hovered-border: var(--success-default-higlight);
+	--button-text-success-hovered-contrast: var(--success-default-higlight);
+	--button-text-success-pressed-background: var(--color-generic-none);
+	--button-text-success-pressed-border: var(--success-default-deep);
+	--button-text-success-pressed-contrast: var(--success-default-deep);
+	--button-text-warning-default-background: var(--color-generic-none);
+	--button-text-warning-default-border: var(--warning-default-base);
+	--button-text-warning-default-contrast: var(--warning-default-base);
+	--button-text-warning-hovered-background: var(--color-generic-none);
+	--button-text-warning-hovered-border: var(--warning-default-higlight);
+	--button-text-warning-hovered-contrast: var(--warning-default-higlight);
+	--button-text-warning-pressed-background: var(--color-generic-none);
+	--button-text-warning-pressed-border: var(--warning-default-deep);
+	--button-text-warning-pressed-contrast: var(--warning-default-deep);
+	--contrast-actived: var(--primary-strong-base);
+	--contrast-default: var(--text-secondary);
+	--contrast-hovered: var(--text-primary);
+	--dropdown-border: var(--color-generic-none);
+	--dropdown-contrast-active: var(--text-primary);
+	--dropdown-contrast-default: var(--text-secondary);
+	--dropdown-input-background: var(--color-generic-white);
+	--dropdown-input-border-default: var(--color-neutral-200);
+	--dropdown-input-border-error: var(--error-default-base);
+	--dropdown-input-border-expanded: var(--primary-default-base);
+	--dropdown-input-border-filled: var(--neutral-default-base);
+	--dropdown-input-border-hovered: var(--color-neutral-300);
+	--dropdown-input-border-success: var(--success-default-base);
+	--dropdown-menu-background: var(--color-generic-white);
+	--dropdown-menu-border-error: var(--error-default-base);
+	--dropdown-menu-border-primary: var(--primary-default-base);
+	--dropdown-menu-border-success: var(--success-default-base);
+	--dropdown-option-background-default: var(--color-generic-white);
+	--dropdown-option-background-hovered: var(--neutral-weak-higlight);
+	--dropdown-option-background-pressed: var(--neutral-weak-deep);
+	--error-default-base: var(--color-error-600);
+	--error-default-contrast: var(--color-generic-white);
+	--error-default-deep: var(--color-secondary-900);
+	--error-default-higlight: var(--color-secondary-800);
+	--error-strong-base: var(--color-error-600);
+	--error-strong-contrast: var(--color-generic-white);
+	--error-strong-deep: var(--color-error-900);
+	--error-strong-higlight: var(--color-error-800);
+	--error-weak-base: var(--color-generic-none);
+	--error-weak-contrast: var(--color-secondary-700);
+	--error-weak-deep: var(--color-error-100);
+	--error-weak-higlight: var(--color-error-50);
+	--footer-background: var(--color-generic-white);
+	--footer-border: var(--color-neutral-200);
+	--footer-contrast: var(--text-secondary);
+	--info-default-base: var(--color-info-700);
+	--info-default-contrast: var(--color-generic-white);
+	--info-default-deep: var(--color-info-950);
+	--info-default-higlight: var(--color-info-900);
+	--info-strong-base: var(--color-info-700);
+	--info-strong-contrast: var(--color-generic-white);
+	--info-strong-deep: var(--color-info-950);
+	--info-strong-higlight: var(--color-info-900);
+	--info-weak-base: var(--color-generic-none);
+	--info-weak-contrast: var(--color-info-700);
+	--info-weak-deep: var(--color-info-100);
+	--info-weak-higlight: var(--color-info-50);
+	--input-background: var(--color-generic-white);
+	--input-error: var(--error-default-base);
+	--input-label: var(--text-secondary);
+	--input-success: var(--success-default-base);
+	--input-chip-contrast: var(--text-primary);
+	--input-chip-default-background: var(--primary-weak-higlight);
+	--input-chip-default-border: var(--primary-weak-deep);
+	--input-chip-hovered-background: var(--primary-weak-deep);
+	--input-chip-hovered-border: var(--color-primary-200);
+	--input-main-border-default: var(--color-neutral-200);
+	--input-main-border-filled: var(--neutral-default-base);
+	--input-main-border-focused: var(--primary-default-base);
+	--input-main-border-hovered: var(--color-neutral-300);
+	--input-placeholder-empty: var(--color-neutral-500);
+	--input-placeholder-filled: var(--text-primary);
+	--menu-background: var(--color-generic-white);
+	--menu-border: var(--color-neutral-200);
+	--modal-background: var(--color-generic-white);
+	--navigation-border: var(--primary-default-base);
+	--navigation-button-background-actived: var(--neutral-weak-deep);
+	--navigation-button-background-default: var(--neutral-weak-higlight);
+	--navigation-button-contrast-actived: var(--text-primary);
+	--navigation-button-contrast-default: var(--text-secondary);
+	--neutral-default-base: var(--color-neutral-500);
+	--neutral-default-contrast: var(--color-generic-white);
+	--neutral-default-deep: var(--color-neutral-800);
+	--neutral-default-higlight: var(--color-neutral-700);
+	--neutral-strong-base: var(--color-neutral-500);
+	--neutral-strong-contrast: var(--color-generic-white);
+	--neutral-strong-deep: var(--color-neutral-800);
+	--neutral-strong-higlight: var(--color-neutral-700);
+	--neutral-weak-base: var(--color-generic-none);
+	--neutral-weak-contrast: var(--color-neutral-700);
+	--neutral-weak-deep: var(--color-neutral-100);
+	--neutral-weak-higlight: var(--color-neutral-50);
+	--notification-panel-background: var(--color-generic-white);
+	--notification-read-default: var(--neutral-weak-base);
+	--notification-read-hovered: var(--neutral-weak-higlight);
+	--notification-text-contrast: var(--secondary-default-base);
+	--notification-text-primary: var(--text-primary);
+	--notification-text-secondary: var(--text-secondary);
+	--notification-text-tertiary: var(--color-neutral-500);
+	--notification-unread-default: var(--secondary-weak-higlight);
+	--notification-unread-hovered: var(--secondary-weak-deep);
+	--primary-default-base: var(--color-primary-500);
+	--primary-default-contrast: var(--color-generic-white);
+	--primary-default-deep: var(--color-primary-800);
+	--primary-default-higlight: var(--color-primary-700);
+	--primary-strong-base: var(--color-primary-500);
+	--primary-strong-contrast: var(--color-generic-white);
+	--primary-strong-deep: var(--color-primary-800);
+	--primary-strong-higlight: var(--color-primary-700);
+	--primary-weak-base: var(--color-generic-none);
+	--primary-weak-contrast: var(--color-primary-500);
+	--primary-weak-deep: var(--color-primary-100);
+	--primary-weak-higlight: var(--color-primary-50);
+	--progress-circle-background: var(--neutral-weak-deep);
+	--progress-circle-contrast: var(--secondary-default-base);
+	--progress-circle-text: var(--text-primary);
+	--secondary-default-base: var(--color-secondary-500);
+	--secondary-default-contrast: var(--color-generic-white);
+	--secondary-default-deep: var(--color-secondary-800);
+	--secondary-default-higlight: var(--color-secondary-700);
+	--secondary-strong-base: var(--color-secondary-500);
+	--secondary-strong-contrast: var(--color-generic-white);
+	--secondary-strong-deep: var(--color-secondary-800);
+	--secondary-strong-higlight: var(--color-secondary-700);
+	--secondary-weak-base: var(--color-generic-none);
+	--secondary-weak-contrast: var(--color-secondary-700);
+	--secondary-weak-deep: var(--color-secondary-100);
+	--secondary-weak-higlight: var(--color-secondary-50);
+	--select-option-selected-contrast: var(--color-generic-white);
+	--select-option-selected-default-background: var(--primary-default-base);
+	--select-option-selected-hovered-background: var(--primary-default-higlight);
+	--select-option-selected-pressed-background: var(--primary-default-deep);
+	--select-option-unselected-default-border: var(--neutral-default-base);
+	--select-option-unselected-hovered-border: var(--neutral-default-higlight);
+	--select-option-unselected-pressed-border: var(--neutral-default-deep);
+	--separator-stroke-contrast: var(--primary-weak-deep);
+	--separator-stroke-default: var(--color-neutral-400);
+	--separator-stroke-light: var(--color-neutral-200);
+	--separator-stroke-strong: var(--color-neutral-700);
+	--success-default-base: var(--color-success-600);
+	--success-default-contrast: var(--color-generic-white);
+	--success-default-deep: var(--color-success-900);
+	--success-default-higlight: var(--color-success-800);
+	--success-strong-base: var(--color-success-600);
+	--success-strong-contrast: var(--color-generic-white);
+	--success-strong-deep: var(--color-success-900);
+	--success-strong-higlight: var(--color-success-800);
+	--success-weak-base: var(--color-generic-none);
+	--success-weak-contrast: var(--color-success-700);
+	--success-weak-deep: var(--color-success-100);
+	--success-weak-higlight: var(--color-success-50);
+	--table-background-default: var(--color-generic-white);
+	--table-background-hovered: var(--neutral-weak-higlight);
+	--table-column-contrast: var(--text-primary);
+	--table-header-border: var(--separator-stroke-light);
+	--table-header-contrast: var(--color-neutral-600);
+	--tabs-background: var(--color-generic-none);
+	--tabs-stroke: var(--color-neutral-200);
+	--tabs-contrast-actived: var(--text-primary);
+	--tabs-contrast-default: var(--text-secondary);
+	--tabs-contrast-warning: var(--color-warning-500);
+	--tag-error-background: var(--error-weak-higlight);
+	--tag-error-contrast: var(--error-weak-contrast);
+	--tag-info-background: var(--info-weak-higlight);
+	--tag-info-contrast: var(--info-strong-higlight);
+	--tag-success-background: var(--success-weak-higlight);
+	--tag-success-contrast: var(--success-weak-contrast);
+	--tag-warning-background: var(--warning-weak-higlight);
+	--tag-warning-contrast: var(--warning-weak-contrast);
+	--text-accent: var(--color-primary-500);
+	--text-inverted: var(--color-neutral-50);
+	--text-primary: var(--color-neutral-950);
+	--text-secondary: var(--color-neutral-700);
+	--text-white: var(--color-generic-white);
+	--toaster-background: var(--text-white);
+	--toaster-border: var(--primary-weak-higlight);
+	--toaster-contrast-text: var(--text-secondary);
+	--toaster-contrast-title: var(--text-primary);
+	--toggle-off-background: var(--neutral-weak-deep);
+	--toggle-on-background: var(--primary-default-base);
+	--toggle-switch-background: var(--color-generic-white);
+	--toggle-switch-border: var(--color-generic-none);
+	--tooltip-background: var(--color-generic-white);
+	--warning-default-base: var(--color-warning-600);
+	--warning-default-contrast: var(--color-generic-white);
+	--warning-default-deep: var(--color-warning-900);
+	--warning-default-higlight: var(--color-warning-800);
+	--warning-strong-base: var(--color-warning-600);
+	--warning-strong-contrast: var(--color-generic-white);
+	--warning-strong-deep: var(--color-warning-900);
+	--warning-strong-higlight: var(--color-warning-800);
+	--warning-weak-base: var(--color-generic-none);
+	--warning-weak-contrast: var(--color-warning-700);
+	--warning-weak-deep: var(--color-warning-100);
+	--warning-weak-higlight: var(--color-warning-50);
+	/* number */
+	--alerts-radius: var(--radius-none);
+	--alerts-badge-radius: var(--radius-full);
+	--button-radius: var(--radius-none);
+	--button-icon-button-radius: var(--radius-minimal);
+	--dropdown-radius: var(--radius-none);
+	--input-radius: var(--radius-none);
+	--input-chip-radius: var(--radius-full);
+	--menu-radius: var(--radius-none);
+	--modal-radius: var(--radius-none);
+	--modal-spacing: var(--spacing-md);
+	--navigation-radius: var(--radius-none);
+	--notification-radius: var(--radius-minimal);
+	--opacity-disabled: 1.875rem;
+	--radius-none: 0rem;
+	--radius-minimal: var(--radius-md);
+	--radius-rounded: var(--radius-lg);
+	--radius-full: var(--radius-3xl);
+	--spacing-none: 0rem;
+	--spacing-xs: var(--spacing-0-5);
+	--spacing-sm: var(--spacing-1);
+	--spacing-md: var(--spacing-2);
+	--spacing-lg: var(--spacing-3);
+	--spacing-xl: var(--spacing-4);
+	--spacing-2xl: var(--spacing-5);
+	--spacing-3xl: var(--spacing-7);
+	--spacing-4xl: var(--spacing-9);
+	--table-radius: var(--radius-none);
+	--tabs-radius: var(--radius-none);
+	--tag-radius: var(--radius-full);
+	--toaster-radius: var(--radius-none);
+	--toggle-radius: var(--radius-full);
+	--tooltip-radius: var(--radius-sm);
 }