chore: define CSS variables for colors, fonts and spacings

4 files changed, 80 insertions, 0 deletions

diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
new file mode 100644
index 0000000..8986dd0
--- /dev/null
+++ b/src/styles/base/_colors.scss
@@ -0,0 +1,16 @@
+@use "@styles/abstracts/variables" as var;
+
+:root {
+  --color-bg: #{var.$color_white};
+  --color-bg-opacity: #{var.$color_white-o90};
+  --color-fg: #{var.$color_black};
+  --color-fg-inverted: #{var.$color_white};
+  --color-primary: #{var.$color_blue};
+  --color-primary-light: #{var.$color_blue-bright};
+  --color-primary-lighter: #{var.$color_blue-brighter};
+  --color-primary-dark: #{var.$color_blue-dark};
+  --color-border: #{var.$color_grey-dark};
+  --color-border-light: #{var.$color_grey};
+  --color-highlight: #{var.$color_blue-brighter};
+  --color-shadow: #{var.$color_grey-dark-o70};
+}
diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss
index 61220a2..88850bb 100644
--- a/src/styles/base/_fonts.scss
+++ b/src/styles/base/_fonts.scss
@@ -132,3 +132,40 @@
   font-style: normal;
   font-display: swap;
 }
+
+:root {
+  --font-family-primary: #{var.$font-family_primary};
+  --font-family-secondary: #{var.$font-family_secondary};
+  --font-family-mono: #{var.$font-family_mono};
+  --font-size-sm: clamp(
+    #{math.div(var.font-size("sm"), 1.2)},
+    1ex + 1vw,
+    #{var.font-size("sm")}
+  );
+  --font-size-md: clamp(
+    #{var.font-size("sm")},
+    1ex + 2vw,
+    #{var.font-size("md")}
+  );
+  --font-size-lg: clamp(
+    #{var.font-size("md")},
+    1ex + 3vw,
+    #{var.font-size("lg")}
+  );
+  --font-size-xl: clamp(
+    #{var.font-size("lg")},
+    1ex + 4vw,
+    #{var.font-size("xl")}
+  );
+  --font-size-2xl: clamp(
+    #{var.font-size("xl")},
+    1ex + 5vw,
+    #{var.font-size("2xl")}
+  );
+  --font-size-3xl: clamp(
+    #{var.font-size("2xl")},
+    1ex + 6vw,
+    #{var.font-size("3xl")}
+  );
+  --line-height: #{var.$line-height};
+}
diff --git a/src/styles/base/_spacings.scss b/src/styles/base/_spacings.scss
new file mode 100644
index 0000000..512b597
--- /dev/null
+++ b/src/styles/base/_spacings.scss
@@ -0,0 +1,25 @@
+@use "@styles/abstracts/variables" as var;
+@use "sass:math";
+
+:root {
+  --spacing-2xs: clamp(
+    #{math.div(var.spacing("2xs"), 1.2)},
+    1ex + 1vw,
+    #{var.spacing("2xs")}
+  );
+  --spacing-xs: clamp(
+    #{math.div(var.spacing("xs"), 1.2)},
+    1ex + 1vw,
+    #{var.spacing("xs")}
+  );
+  --spacing-sm: clamp(
+    #{math.div(var.spacing("sm"), 1.2)},
+    1ex + 1vw,
+    #{var.spacing("sm")}
+  );
+  --spacing-md: clamp(#{var.spacing("sm")}, 1ex + 2vw, #{var.spacing("md")});
+  --spacing-lg: clamp(#{var.spacing("md")}, 1ex + 3vw, #{var.spacing("lg")});
+  --spacing-xl: clamp(#{var.spacing("lg")}, 1ex + 4vw, #{var.spacing("xl")});
+  --spacing-2xl: clamp(#{var.spacing("xl")}, 1ex + 5vw, #{var.spacing("2xl")});
+  --spacing-3xl: clamp(#{var.spacing("2xl")}, 1ex + 6vw, #{var.spacing("3xl")});
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 569035e..56b9ad2 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -12,4 +12,6 @@
  *
  * Define some standard styles and CSS variables (colors, fonts...).
  */
+@use "base/colors";
 @use "base/fonts";
+@use "base/spacings";