refactor(scss): split CSS variables into different sections

assets/scss/variables.scss

@@ -2,7 +2,7 @@ $defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
 $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
 /*
-*   CSS Variables
+*   Global style
 */
 :root {
     @media (min-width: $on-phone + 1) {
@@ -10,10 +10,40 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     }
 
     --body-background: #f5f5fa;
+
     --accent-color: #34495e;
     --accent-color-darker: #2c3e50;
     --accent-color-text: #fff;
+    --body-text-color: #bababa;
 
+    --tag-border-radius: 4px;
+
+    --section-separation: 40px;
+
+    @media (prefers-color-scheme: dark) {
+        --body-background: #303030;
+        --accent-color: #ecf0f1;
+        --accent-color-darker: #bdc3c7;
+        --accent-color-text: #000;
+        --body-text-color: rgba(255, 255, 255, 0.7);
+    }
+}
+
+/**
+*   Global font family
+*/
+:root {
+    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
+    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
+
+    --base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family);
+    --code-font-family: Menlo, Monaco, Consolas, "Courier New";
+}
+
+/*
+*   Card style
+*/
+:root {
     --card-background: #fff;
     --card-background-selected: #eaeaea;
 
@@ -22,53 +52,51 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --card-text-color-tertiary: #bababa;
     --card-separator-color: rgba(218, 218, 218, 0.5);
 
-    --body-text-color: #bababa;
-
     --card-border-radius: 10px;
-    --tag-border-radius: 4px;
 
-    /**
+    --content-padding: 30px;
-    *   Font variables
+    @media (max-width: $on-desktop-large) {
-    */
+        --content-padding: 25px;
-    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
+    }
-    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
+    @media (max-width: $on-tablet) {
+        --content-padding: 20px;
+    }
 
-    --base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family);
+    @media (prefers-color-scheme: dark) {
-    --code-font-family: Menlo, Monaco, Consolas, "Courier New";
+        --card-background: #424242;
+        --card-background-selected: rgba(255, 255, 255, 0.16);
+        --card-text-color-main: rgba(255, 255, 255, 0.9);
+        --card-text-color-secondary: rgba(255, 255, 255, 0.7);
+        --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
+        --card-separator-color: rgba(255, 255, 255, 0.12);
+    }
+}
 
-    /**
+/**
-    *   Article content font settings
+*   Article content font settings
-    */
+*/
+:root {
     --article-font-family: var(--base-font-family);
     --article-font-size: 1.7rem;
     @media (max-width: $on-tablet) {
         --article-font-size: 1.6rem;
     }
     --article-line-height: 1.85;
+}
 
-    /*
+/*
-        Article style
+*   Article content style
-    */
+*/
-    --content-padding: 30px;
+:root {
     --blockquote-border-size: 4px;
     --blockquote-background-color: rgb(248 248 248);
 
     --heading-border-size: 4px;
 
-    @media (max-width: $on-desktop-large) {
-        --content-padding: 25px;
-    }
-
-    @media (max-width: $on-tablet) {
-        --content-padding: 20px;
-    }
-
     --link-background-color: 189, 195, 199;
     --link-background-opacity: 0.5;
     --link-background-opacity-hover: 0.7;
 
-    --section-separation: 40px;
-
     --small-card-padding: 25px;
 
     --pre-background-color: #272822;
@@ -79,6 +107,16 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --table-border-color: #dadada;
     --tr-even-background-color: #efefee;
+
+    @media (prefers-color-scheme: dark) {
+        --code-background-color: #272822;
+        --code-text-color: rgba(255, 255, 255, 0.9);
+
+        --table-border-color: #717171;
+        --tr-even-background-color: #545454;
+
+        --blockquote-background-color: rgb(75 75 75);
+    }
 }
 
 /*
@@ -92,29 +130,3 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
         0px 0px 1px rgba(0, 0, 0, 0.04);
 }
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --body-background: #303030;
-        --accent-color: #ecf0f1;
-        --accent-color-darker: #bdc3c7;
-        --accent-color-text: #000;
-
-        --card-background: #424242;
-        --card-background-selected: rgba(255, 255, 255, 0.16);
-        --card-text-color-main: rgba(255, 255, 255, 0.9);
-        --card-text-color-secondary: rgba(255, 255, 255, 0.7);
-        --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
-        --card-separator-color: rgba(255, 255, 255, 0.12);
-
-        --body-text-color: rgba(255, 255, 255, 0.7);
-
-        --code-background-color: #272822;
-        --code-text-color: rgba(255, 255, 255, 0.9);
-
-        --table-border-color: #717171;
-        --tr-even-background-color: #545454;
-
-        --blockquote-background-color: rgb(75 75 75);
-    }
-}