💄 Add options tokens

src/tokens/themes/options/illustration/_color-850.scss

@@ -0,0 +1,26 @@
+@use '../../../../base/colors/purple-glycine';
+@use '../../../../base/colors/yellow-tournesol';
+
+$purple-glycine-light: (
+    "default": purple-glycine.$purple-glycine-850,
+    "hover": purple-glycine.$purple-glycine-850-hover,
+    "active": purple-glycine.$purple-glycine-850-active,
+);
+
+$purple-glycine-dark: (
+    "default": purple-glycine.$purple-glycine-200,
+    "hover": purple-glycine.$purple-glycine-200-hover,
+    "active": purple-glycine.$purple-glycine-200-active,
+);
+
+$yellow-tournesol-light: (
+    "default": yellow-tournesol.$yellow-tournesol-850,
+    "hover": yellow-tournesol.$yellow-tournesol-850-hover,
+    "active": yellow-tournesol.$yellow-tournesol-850-active,
+);
+
+$yellow-tournesol-dark: (
+    "default": yellow-tournesol.$yellow-tournesol-200,
+    "hover": yellow-tournesol.$yellow-tournesol-200-hover,
+    "active": yellow-tournesol.$yellow-tournesol-200-active,
+);

src/tokens/themes/options/illustration/_color-950.scss

@@ -0,0 +1,26 @@
+@use '../../../../base/colors/purple-glycine';
+@use '../../../../base/colors/yellow-tournesol';
+
+$purple-glycine-light: (
+    "default": purple-glycine.$purple-glycine-950,
+    "hover": purple-glycine.$purple-glycine-950-hover,
+    "active": purple-glycine.$purple-glycine-950-active,
+);
+
+$purple-glycine-dark: (
+    "default": purple-glycine.$purple-glycine-100,
+    "hover": purple-glycine.$purple-glycine-100-hover,
+    "active": purple-glycine.$purple-glycine-100-active,
+);
+
+$yellow-tournesol-light: (
+    "default": yellow-tournesol.$yellow-tournesol-950,
+    "hover": yellow-tournesol.$yellow-tournesol-950-hover,
+    "active": yellow-tournesol.$yellow-tournesol-950-active,
+);
+
+$yellow-tournesol-dark: (
+    "default": yellow-tournesol.$yellow-tournesol-100,
+    "hover": yellow-tournesol.$yellow-tournesol-100-hover,
+    "active": yellow-tournesol.$yellow-tournesol-100-active,
+);

src/tokens/themes/options/illustration/_color-sun.scss

@@ -0,0 +1,26 @@
+@use '../../../../base/colors/purple-glycine';
+@use '../../../../base/colors/yellow-tournesol';
+
+$purple-glycine-sun: (
+    "default": purple-glycine.$purple-glycine-sun-319,
+    "hover": purple-glycine.$purple-glycine-sun-319-hover,
+    "active": purple-glycine.$purple-glycine-sun-319-active,
+);
+
+$purple-glycine-moon: (
+    "default": purple-glycine.$purple-glycine-moon-630,
+    "hover": purple-glycine.$purple-glycine-moon-630-hover,
+    "active": purple-glycine.$purple-glycine-moon-630-active,
+);
+
+$yellow-tournesol-sun: (
+    "default": yellow-tournesol.$yellow-tournesol-sun-407,
+    "hover": yellow-tournesol.$yellow-tournesol-sun-407-hover,
+    "active": yellow-tournesol.$yellow-tournesol-sun-407-active,
+);
+
+$yellow-tournesol-moon: (
+    "default": yellow-tournesol.$yellow-tournesol-moon-922,
+    "hover": yellow-tournesol.$yellow-tournesol-moon-922-hover,
+    "active": yellow-tournesol.$yellow-tournesol-moon-922-active,
+);

src/tokens/themes/options/primary/_color-113.scss

@@ -0,0 +1,7 @@
+@use '../../../../base/colors/blue-france';
+
+$blue-france: (
+    "default": blue-france.$blue-france-113,
+    "hover": blue-france.$blue-france-113-hover,
+    "active": blue-france.$blue-france-113-active,
+); 

src/tokens/themes/options/primary/_color-425.scss

@@ -0,0 +1,13 @@
+@use '../../../../base/colors/red-marianne';
+
+$red-marianne-light: (
+    "default": red-marianne.$red-marianne-425,
+    "hover": red-marianne.$red-marianne-425-hover,
+    "active": red-marianne.$red-marianne-425-active,
+);
+
+$red-marianne-dark: (
+    "default": red-marianne.$red-marianne-625,
+    "hover": red-marianne.$red-marianne-625-hover,
+    "active": red-marianne.$red-marianne-625-active,
+);

src/tokens/themes/options/primary/_color-850.scss

@@ -0,0 +1,26 @@
+@use '../../../../base/colors/blue-france';
+@use '../../../../base/colors/red-marianne';
+
+$blue-france-light: (
+    "default": blue-france.$blue-france-850,
+    "hover": blue-france.$blue-france-850-hover,
+    "active": blue-france.$blue-france-850-active,
+);
+
+$blue-france-dark: (
+    "default": blue-france.$blue-france-200,
+    "hover": blue-france.$blue-france-200-hover,
+    "active": blue-france.$blue-france-200-active,
+);
+
+$red-marianne-light: (
+    "default": red-marianne.$red-marianne-850,
+    "hover": red-marianne.$red-marianne-850-hover,
+    "active": red-marianne.$red-marianne-850-active,
+);
+
+$red-marianne-dark: (
+    "default": red-marianne.$red-marianne-200,
+    "hover": red-marianne.$red-marianne-200-hover,
+    "active": red-marianne.$red-marianne-200-active,
+);

src/tokens/themes/options/primary/_color-950.scss

@@ -0,0 +1,26 @@
+@use '../../../../base/colors/blue-france';
+@use '../../../../base/colors/red-marianne';
+
+$blue-france-light: (
+    "default": blue-france.$blue-france-950,
+    "hover": blue-france.$blue-france-950-hover,
+    "active": blue-france.$blue-france-950-active,
+);
+
+$blue-france-dark: (
+    "default": blue-france.$blue-france-100,
+    "hover": blue-france.$blue-france-100-hover,
+    "active": blue-france.$blue-france-100-active,
+);
+
+$red-marianne-light: (
+    "default": red-marianne.$red-marianne-950,
+    "hover": red-marianne.$red-marianne-950-hover,
+    "active": red-marianne.$red-marianne-950-active,
+);
+
+$red-marianne-dark: (
+    "default": red-marianne.$red-marianne-100,
+    "hover": red-marianne.$red-marianne-100-hover,
+    "active": red-marianne.$red-marianne-100-active,
+);

src/tokens/themes/options/primary/_color-975.scss

@@ -0,0 +1,26 @@
+@use '../../../../base/colors/blue-france';
+@use '../../../../base/colors/red-marianne';
+
+$blue-france-light: (
+    "default": blue-france.$blue-france-975,
+    "hover": blue-france.$blue-france-975-hover,
+    "active": blue-france.$blue-france-975-active,
+);
+
+$blue-france-dark: (
+    "default": blue-france.$blue-france-75,
+    "hover": blue-france.$blue-france-75-hover,
+    "active": blue-france.$blue-france-75-active,
+);
+
+$red-marianne-light: (
+    "default": red-marianne.$red-marianne-975,
+    "hover": red-marianne.$red-marianne-975-hover,
+    "active": red-marianne.$red-marianne-975-active,
+);
+
+$red-marianne-dark: (
+    "default": red-marianne.$red-marianne-75,
+    "hover": red-marianne.$red-marianne-75-hover,
+    "active": red-marianne.$red-marianne-75-active,
+);

src/tokens/themes/options/primary/_color-main.scss

@@ -0,0 +1,14 @@
+@use '../../../../base/colors/blue-france';
+@use '../../../../base/colors/red-marianne';
+
+$blue-france: (
+    "default": blue-france.$blue-france-main-525,
+    "hover": blue-france.$blue-france-main-525-hover,
+    "active": blue-france.$blue-france-main-525-active,
+);
+
+$red-marianne: (
+    "default": red-marianne.$red-marianne-472,
+    "hover": red-marianne.$red-marianne-472-hover,
+    "active": red-marianne.$red-marianne-472-active,
+);

src/tokens/themes/options/primary/_color-sun-113.scss

@@ -0,0 +1,7 @@
+@use '../../../../base/colors/blue-france';
+
+$blue-france: (
+    "default": blue-france.$blue-france-sun-113,
+    "hover": blue-france.$blue-france-sun-113-hover,
+    "active": blue-france.$blue-france-sun-113-active,
+);

src/tokens/themes/options/system/_color-425.scss

@@ -0,0 +1,52 @@
+@use '../../../../base/colors/error';
+@use '../../../../base/colors/info';
+@use '../../../../base/colors/success';
+@use '../../../../base/colors/warning';
+
+$success-light: (
+    "default": success.$success-425,
+    "hover": success.$success-425-hover,
+    "active": success.$success-425-active,
+);
+
+$success-dark: (
+    "default": success.$success-625,
+    "hover": success.$success-625-hover,
+    "active": success.$success-625-active,
+);
+
+$warning-light: (
+    "default": warning.$warning-425,
+    "hover": warning.$warning-425-hover,
+    "active": warning.$warning-425-active,
+);
+
+$warning-dark: (
+    "default": warning.$warning-625,
+    "hover": warning.$warning-625-hover,
+    "active": warning.$warning-625-active,
+);
+
+$info-light: (
+    "default": info.$info-425,
+    "hover": info.$info-425-hover,
+    "active": info.$info-425-active,
+);
+
+$info-dark: (
+    "default": info.$info-625,
+    "hover": info.$info-625-hover,
+    "active": info.$info-625-active,
+);
+
+$error-light: (
+    "default": error.$error-425,
+    "hover": error.$error-425-hover,
+    "active": error.$error-425-active,
+);
+
+$error-dark: (
+    "default": error.$error-625,
+    "hover": error.$error-625-hover,
+    "active": error.$error-625-active,
+);

src/tokens/themes/options/system/_color-950.scss

@@ -0,0 +1,52 @@
+@use '../../../../base/colors/error';
+@use '../../../../base/colors/info';
+@use '../../../../base/colors/success';
+@use '../../../../base/colors/warning';
+
+$success-light: (
+    "default": success.$success-950,
+    "hover": success.$success-950-hover,
+    "active": success.$success-950-active,
+);
+
+$success-dark: (
+    "default": success.$success-100,
+    "hover": success.$success-100-hover,
+    "active": success.$success-100-active,
+);
+
+$warning-light: (
+    "default": warning.$warning-950,
+    "hover": warning.$warning-950-hover,
+    "active": warning.$warning-950-active,
+);
+
+$warning-dark: (
+    "default": warning.$warning-100,
+    "hover": warning.$warning-100-hover,
+    "active": warning.$warning-100-active,
+);
+
+$info-light: (
+    "default": info.$info-950,
+    "hover": info.$info-950-hover,
+    "active": info.$info-950-active,
+);
+
+$info-dark: (
+    "default": info.$info-100,
+    "hover": info.$info-100-hover,
+    "active": info.$info-100-active,
+);
+
+$error-light: (
+    "default": error.$error-950,
+    "hover": error.$error-950-hover,
+    "active": error.$error-950-active,
+);
+
+$error-dark: (
+    "default": error.$error-100,
+    "hover": error.$error-100-hover,
+    "active": error.$error-100-active,
+);

src/tokens/themes/options/system/_color-focus.scss

@@ -0,0 +1,5 @@
+@use '../../../../base/colors/focus';
+
+$focus: (
+    "default": focus.$focus-525,
+)