feat(design): color dynamic import

.script/scss.js

@@ -0,0 +1,10 @@
+function toScss(results) {
+  const [_, ...data] = results[0].result.rawData;
+
+  const colors = {};
+  data.forEach((it) => {
+    colors[it[0]] = it[1];
+  });
+
+  console.log(colors);
+}

assets/css/setting.scss

@@ -0,0 +1,8 @@
+$accent: #FF4853;
+$primary: #6B68F7;
+$black: #000000;
+$white: #FFFFFF;
+$grey01: #F6F6F6;
+$grey02: #DDDDDD;
+$grey03: #777777;
+$grey04: #3B3B3B;

components/about/activity/card.vue

@@ -26,6 +26,8 @@ export default ActivityCard;
   font-family: Spoqa Han Sans Neo;
 }
 
+@import "~/assets/css/setting.scss";
+
 @include desktop {
   .activity-container {
     border-radius: 16px;
@@ -45,7 +47,7 @@ export default ActivityCard;
         line-height: 48px;
         letter-spacing: -0.02em;
 
-        color: #ffffff;
+        color: $white;
       }
       .title {
         margin-top: auto;
@@ -55,7 +57,7 @@ export default ActivityCard;
         line-height: 27px;
         letter-spacing: -0.02em;
 
-        color: #ffffff;
+        color: $white;
       }
     }
   }

content/color.json

@@ -0,0 +1,36 @@
+{
+  "results": [
+    {
+      "command": {
+        "func": "getData",
+        "kwargs": [{ "minCol": 1, "worksheetTitle": "color-palette" }, null]
+      },
+      "result": {
+        "rawData": [
+          ["color name", "color"],
+          ["accent", "#FF4853"],
+          ["primary", "#6B68F7"],
+          ["black", "#000000"],
+          ["white", "#FFFFFF"],
+          ["grey01", "#F6F6F6"],
+          ["grey02", "#DDDDDD"],
+          ["grey03", "#777777"],
+          ["grey04", "#3B3B3B"]
+        ],
+        "formatted": [
+          { "(A)": "color name", "(B)": "color" },
+          { "(A)": "accent", "(B)": "#FF4853" },
+          { "(A)": "primary", "(B)": "#6B68F7" },
+          { "(A)": "black", "(B)": "#000000" },
+          { "(A)": "white", "(B)": "#FFFFFF" },
+          { "(A)": "grey01", "(B)": "#F6F6F6" },
+          { "(A)": "grey02", "(B)": "#DDDDDD" },
+          { "(A)": "grey03", "(B)": "#777777" },
+          { "(A)": "grey04", "(B)": "#3B3B3B" }
+        ],
+        "header": ["(A)", "(B)"],
+        "range": "'color-palette'!A1:Z1000"
+      }
+    }
+  ]
+}

content/setting.json

@@ -0,0 +1,10 @@
+{
+  "accent": "#FF4853",
+  "primary": "#6B68F7",
+  "black": "#000000",
+  "white": "#FFFFFF",
+  "grey01": "#F6F6F6",
+  "grey02": "#DDDDDD",
+  "grey03": "#777777",
+  "grey04": "#3B3B3B"
+}

package.json

@@ -8,7 +8,8 @@
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
-    "post-update": "yarn upgrade --latest"
+    "post-update": "yarn upgrade --latest",
+    "setting": "yarn run json-to-scss ./content/setting.json ./assets/css/setting.scss --fk"
   },
   "repository": {
     "type": "git",
@@ -31,6 +32,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^7.18.0",
     "fibers": "^5.0.0",
+    "json-to-scss": "^1.6.2",
     "prettier": "^2.4.1",
     "sass": "^1.42.1",
     "sass-loader": "10"