Refactor tokens and utils

dostonnabotov · Dec 7, 2023 · 47396c7 · 47396c7
1 parent bea93c0
commit 47396c7
Show file tree

Hide file tree

Showing 18 changed files with 289 additions and 356 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/sass/abstracts/_tokens.scss b/sass/abstracts/_tokens.scss
@@ -1 +1,5 @@
+// layout
+$container-max-width: 70rem;
+$container-padding-x: 2rem;
 
+$flow-space: 1em;
diff --git a/sass/abstracts/_type.scss b/sass/abstracts/_type.scss
@@ -1,3 +1,13 @@
+// global tokens
+$-ff-roboto: "Roboto", sans-serif;
+$-ff-merriweather: "Merriweather", serif;
+
+// variables & utils
+$font-families: (
+  "primary": $-ff-roboto,
+  "secondary": $-ff-merriweather,
+);
+
 $font-sizes: (
   "300": 0.875rem,
   "400": 1rem,

diff --git a/sass/base/_base.scss → sass/base/_global.scss b/sass/base/_base.scss → sass/base/_global.scss
@@ -1,7 +1,13 @@
 @use "../abstracts" as *;
 
 body {
-  font-family: system-ui;
+  font-family: var(--ff-primary);
   background-color: var(--background-primary);
   color: var(--text-primary);
 }
+
+h1,
+h2,
+h3 {
+  line-height: 1.1;
+}
diff --git a/sass/base/_index.scss b/sass/base/_index.scss
@@ -1,4 +1,3 @@
 @forward "root";
 @forward "reset";
-@forward "base";
-@forward "typography";
+@forward "global";
diff --git a/sass/base/_reset.scss b/sass/base/_reset.scss
@@ -19,6 +19,8 @@ body {
   line-height: 1.5;
 }
 
+// :where() is used to remove specificity,
+// so that it doesn't interfere when styled with class.
 ul:where([role="list"]),
 ol:where([role="list"]) {
   list-style: none;

diff --git a/sass/base/_root.scss b/sass/base/_root.scss
@@ -1,6 +1,10 @@
 @use "../abstracts" as *;
 
 :root {
+  @each $key, $value in $font-families {
+    --ff-#{$key}: #{$value};
+  }
+
   @each $key, $value in $font-sizes {
     --fs-#{$key}: #{$value};
   }

diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
diff --git a/sass/layout/_flex.scss b/sass/layout/_flex.scss
diff --git a/sass/layout/_grid.scss b/sass/layout/_grid.scss
diff --git a/sass/layouts/_flex.scss b/sass/layouts/_flex.scss
@@ -0,0 +1,6 @@
+.flex-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
diff --git a/sass/layouts/_grid.scss b/sass/layouts/_grid.scss
@@ -0,0 +1,4 @@
+.grid-flow {
+  display: grid;
+  gap: 1rem;
+}
diff --git a/sass/layout/_index.scss → sass/layouts/_index.scss b/sass/layout/_index.scss → sass/layouts/_index.scss
diff --git a/sass/style.scss b/sass/style.scss
@@ -2,5 +2,5 @@
 @use "themes";
 @use "base";
 @use "components";
-@use "layout";
+@use "layouts";
 @use "utilities";
diff --git a/sass/themes/_theme.scss b/sass/themes/_theme.scss
@@ -1,16 +1,16 @@
 @use "../abstracts" as *;
 
-:root {
-  @include light-theme;
+// :root {
+//   @include light-theme;
 
-  @media (prefers-color-scheme: light) {
-    @include light-theme;
-  }
+//   @media (prefers-color-scheme: light) {
+//     @include light-theme;
+//   }
 
-  @media (prefers-color-scheme: dark) {
-    @include dark-theme;
-  }
-}
+//   @media (prefers-color-scheme: dark) {
+//     @include dark-theme;
+//   }
+// }
 
 .light-theme {
   @include light-theme;

diff --git a/sass/utilities/_container.scss b/sass/utilities/_container.scss
@@ -1,6 +1,8 @@
+@use "../abstracts" as *;
+
 .container {
   width: 100%;
-  max-width: 70rem;
+  max-width: $container-max-width;
   margin-inline: auto;
-  padding-inline: 2rem;
+  padding-inline: $container-padding-x;
 }
diff --git a/sass/utilities/_flow.scss b/sass/utilities/_flow.scss
@@ -0,0 +1,5 @@
+@use "../abstracts" as *;
+
+.flow > *:where(:not(:first-child)) {
+  margin-top: $flow-space;
+}
diff --git a/sass/utilities/_index.scss b/sass/utilities/_index.scss
@@ -1,2 +1,3 @@
 @forward "container";
+@forward "flow";
 @forward "sr-only";