Commit 7b18330

@@ -1,9 +1,49 @@
-@use './variables';
+@use 'sass:color';
+@use './variables' as var;
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
+  --theme-color-light: #{var.$theme-color-light};
+  --theme-color-dark: #{var.$theme-color-dark};
+  --theme-color-light-lighten: #{color.adjust(var.$theme-color-light, $lightness: 20%)};
+  --theme-color-dark-lighten: #{color.adjust(var.$theme-color-dark, $lightness: 20%)};
+  --theme-color-light-darken: #{color.adjust(var.$theme-color-light, $lightness: -20%)};
+  --theme-color-dark-darken: #{color.adjust(var.$theme-color-dark, $lightness: -20%)};
+
+  @for $i from 1 through 8 {
+    $numerator: $i;
+    $denominator: 8;
+
+    @while $numerator % 2 == 0 and $denominator % 2 == 0 {
+      $numerator: calc($numerator / 2);
+      $denominator: calc($denominator / 2);
+    }
+
+    $alpha: calc($i / 8 - 1);
+
+    --theme-color-light-trans-#{$numerator}d#{$denominator}: #{color.adjust(
+        var.$theme-color-light,
+        $alpha: $alpha
+      )};
+    --theme-color-dark-trans-#{$numerator}d#{$denominator}: #{color.adjust(
+        var.$theme-color-dark,
+        $alpha: $alpha
+      )};
+  }
+
+  --theme-bg-color-light: #{var.$theme-bg-color-light};
+  --theme-bg-color-dark: #{var.$theme-bg-color-dark};
+  --theme-card-bg-color-light: #{var.$theme-card-bg-color-light};
+  --theme-card-bg-color-dark: #{var.$theme-card-bg-color-dark};
+  --theme-text-color-light: #{var.$theme-text-color-light};
+  --theme-text-color-dark: #{var.$theme-text-color-dark};
+  --theme-text-color-second-light: #{var.$theme-text-color-secondary-light};
+  --theme-text-color-second-dark: #{var.$theme-text-color-secondary-dark};
+  --theme-border-color-light: #{var.$theme-border-color-light};
+  --theme-border-color-dark: #{var.$theme-border-color-dark};
+
   font-size: 17px;
 }
 

@@ -1,5 +1,3 @@
-@use 'sass:color';
-
 $theme-color-light: #f69279;
 $theme-color-dark: #2e6c8b;
 $theme-bg-color-light: theme('colors.neutral.50');
@@ -12,44 +10,3 @@ $theme-text-color-secondary-light: theme('colors.neutral.600');
 $theme-text-color-secondary-dark: theme('colors.neutral.400');
 $theme-border-color-light: theme('colors.neutral.200');
 $theme-border-color-dark: theme('colors.neutral.800');
-
-:root {
-  --theme-color-light: #{$theme-color-light};
-  --theme-color-dark: #{$theme-color-dark};
-  --theme-color-light-lighten: #{color.adjust($theme-color-light, $lightness: 20%)};
-  --theme-color-dark-lighten: #{color.adjust($theme-color-dark, $lightness: 20%)};
-  --theme-color-light-darken: #{color.adjust($theme-color-light, $lightness: -20%)};
-  --theme-color-dark-darken: #{color.adjust($theme-color-dark, $lightness: -20%)};
-
-  @for $i from 1 through 8 {
-    $numerator: $i;
-    $denominator: 8;
-
-    @while $numerator % 2 == 0 and $denominator % 2 == 0 {
-      $numerator: calc($numerator / 2);
-      $denominator: calc($denominator / 2);
-    }
-
-    $alpha: calc($i / 8 - 1);
-
-    --theme-color-light-trans-#{$numerator}d#{$denominator}: #{color.adjust(
-        $theme-color-light,
-        $alpha: $alpha
-      )};
-    --theme-color-dark-trans-#{$numerator}d#{$denominator}: #{color.adjust(
-        $theme-color-dark,
-        $alpha: $alpha
-      )};
-  }
-
-  --theme-bg-color-light: #{$theme-bg-color-light};
-  --theme-bg-color-dark: #{$theme-bg-color-dark};
-  --theme-card-bg-color-light: #{$theme-card-bg-color-light};
-  --theme-card-bg-color-dark: #{$theme-card-bg-color-dark};
-  --theme-text-color-light: #{$theme-text-color-light};
-  --theme-text-color-dark: #{$theme-text-color-dark};
-  --theme-text-color-second-light: #{$theme-text-color-secondary-light};
-  --theme-text-color-second-dark: #{$theme-text-color-secondary-dark};
-  --theme-border-color-light: #{$theme-border-color-light};
-  --theme-border-color-dark: #{$theme-border-color-dark};
-}