refactor: prefix

daangn · Oct 16, 2024 · 6eced40 · 6eced40
1 parent 8081f85
commit 6eced40
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/packages/component-spec/core/src/stringify.ts b/packages/component-spec/core/src/stringify.ts
@@ -1,7 +1,7 @@
 import { camelCase } from "change-case";
 import type { ParsedExpression, Token } from "./types";
 
-const DESIGN_SYSTEM_NAME = "seed-v3";
+const PREFIX = "seed-v3";
 
 function stringifyVariantKey(variant: Record<string, string>) {
   const asKebab = Object.entries(variant)
@@ -21,10 +21,10 @@ function stringifyStateKey(state: string[]) {
 
 function stringifyTokenCssVar(token: Token) {
   if (token.group.length === 0) {
-    return `var(--${DESIGN_SYSTEM_NAME}-${token.category}-${token.key.toString().replaceAll(".", "\\.")})`;
+    return `var(--${PREFIX}-${token.category}-${token.key.toString().replaceAll(".", "\\.")})`;
   }
 
-  return `var(--${DESIGN_SYSTEM_NAME}-${token.category}-${token.group.join("-")}-${token.key
+  return `var(--${PREFIX}-${token.category}-${token.group.join("-")}-${token.key
     .toString()
     .replaceAll(".", "\\.")})`;
 }

diff --git a/tools/figma-extractor/src/variable.ts b/tools/figma-extractor/src/variable.ts
@@ -13,29 +13,30 @@ const UNIT_MODE = "Mode 1"; // Value로 되어있는데 기본값은 그냥 Mode
 /**
  * @example carotene | seed-v3
  */
-const DESIGN_SYSTEM_NAME = "seed-v3";
+const SELECTOR = "seed";
+const PREFIX = "seed-v3";
 
 const lightModeTemplate = (css: string) => dedent`
 /* Light Mode */
-:root[data-${DESIGN_SYSTEM_NAME}][data-${DESIGN_SYSTEM_NAME}="light-only"][data-${DESIGN_SYSTEM_NAME}-scale-color="dark"],
-:root[data-${DESIGN_SYSTEM_NAME}][data-${DESIGN_SYSTEM_NAME}-scale-color="light"]:not([data-${DESIGN_SYSTEM_NAME}="dark-only"]),
-:root[data-${DESIGN_SYSTEM_NAME}]:not([data-${DESIGN_SYSTEM_NAME}="dark-only"]) [data-${DESIGN_SYSTEM_NAME}-scale-color="light"] {
+:root[data-${SELECTOR}][data-${SELECTOR}="light-only"][data-${SELECTOR}-scale-color="dark"],
+:root[data-${SELECTOR}][data-${SELECTOR}-scale-color="light"]:not([data-${SELECTOR}="dark-only"]),
+:root[data-${SELECTOR}]:not([data-${SELECTOR}="dark-only"]) [data-${SELECTOR}-scale-color="light"] {
   ${css}
 }
 `;
 
 const darkModeTemplate = (css: string) => dedent`
 /* Dark Mode */
-:root[data-${DESIGN_SYSTEM_NAME}][data-${DESIGN_SYSTEM_NAME}="dark-only"][data-${DESIGN_SYSTEM_NAME}-scale-color="light"],
-:root[data-${DESIGN_SYSTEM_NAME}][data-${DESIGN_SYSTEM_NAME}-scale-color="dark"]:not([data-${DESIGN_SYSTEM_NAME}="light-only"]),
-:root[data-${DESIGN_SYSTEM_NAME}]:not([data-${DESIGN_SYSTEM_NAME}="light-only"]) [data-${DESIGN_SYSTEM_NAME}-scale-color="dark"] {
+:root[data-${SELECTOR}][data-${SELECTOR}="dark-only"][data-${SELECTOR}-scale-color="light"],
+:root[data-${SELECTOR}][data-${SELECTOR}-scale-color="dark"]:not([data-${SELECTOR}="light-only"]),
+:root[data-${SELECTOR}]:not([data-${SELECTOR}="light-only"]) [data-${SELECTOR}-scale-color="dark"] {
   ${css}
 }
 `;
 
 const unitTemplate = (css: string) => dedent`
 /* Units, Static Colors */
-:root[data-${DESIGN_SYSTEM_NAME}] {
+:root[data-${SELECTOR}] {
   ${css}
 }
 `;
@@ -302,7 +303,7 @@ function generateColorCss() {
 function figmaColorVarToCssVar(name: string) {
   const [group, colorName] = name.split("/") as [string, string];
 
-  return `--${DESIGN_SYSTEM_NAME}-color-${group}-${colorName}`;
+  return `--${PREFIX}-color-${group}-${colorName}`;
 }
 
 function figmaColorVarToSpecVar(name: string) {
@@ -314,7 +315,7 @@ function figmaColorVarToSpecVar(name: string) {
 function figmaUnitVarToCssVar(name: string) {
   const [group, value] = name.split("/") as [string, string];
 
-  return `--${DESIGN_SYSTEM_NAME}-${group}-${value}`;
+  return `--${PREFIX}-${group}-${value}`;
 }
 
 function figmaColorVarToJsVar(name: string) {