@liner-fe/design-token 2.3.0 → 2.3.2

package/src/scripts/create-css/index.ts

@@ -7,24 +7,22 @@ import {
   themeLight,
   themeLightStorybook,
 } from './constants/rootScheme';
-import { radius } from './constants/radius';
-import { iconSize } from './constants/icon';
-import { opacity } from './constants/opacity';
-import { padding } from './constants/padding';
-import { size } from './constants/size';
-import { gap } from './constants/gap';
 import { PATH } from './constants/PATH';
 import { makeDir } from './utils/makeDir';
 import { replaceValuesWithKeys } from './utils/replaceValuesWithKeys';
-import { shadow } from './constants/shadow';
-import { typographyClassName } from './constants/typography';
 import { createFile } from './utils/createFile';
+import { generateTokenMap } from './utils/generateTokenMap';
+import { gap, iconSize, opacity, padding, radius, shadow, size, typographyClassName } from './constants';
 
-const cssFile = [primitiveRoot, themeDark, themeLight, languageEnglish].join('\n');
-const cssFileStorybook = [primitiveRoot, themeDarkStorybook, themeLightStorybook, languageEnglish].join('\n');
+const tokens = [{ radius }, { opacity }, { padding }, { size }, { gap }, { shadow }, { iconSize }];
 
-const start = () => {
+const start = async () => {
   try {
+    // TODO: 폰트 파일을 번들링하는 번들러 로더 설정이 필요해 작업 후 반영 예정
+    // const fontCss = await fileToString('../constants/font/font.css');
+    const cssFile = [primitiveRoot, themeDark, themeLight, languageEnglish].join('\n');
+    const cssFileStorybook = [primitiveRoot, themeDarkStorybook, themeLightStorybook, languageEnglish].join('\n');
+
     createFile('./global.css', cssFile);
     createFile('./globalStorybook.css', cssFileStorybook);
 
@@ -34,13 +32,7 @@ const start = () => {
       `${PATH.SRC_GENERATED}/vars.ts`,
       `export const vars = ${JSON.stringify({
         ...replaceValuesWithKeys({ color: color.system.light }),
-        ...replaceValuesWithKeys({ radius }),
-        ...replaceValuesWithKeys({ opacity }),
-        ...replaceValuesWithKeys({ padding }),
-        ...replaceValuesWithKeys({ size }),
-        ...replaceValuesWithKeys({ gap }),
-        ...replaceValuesWithKeys({ shadow }),
-        ...replaceValuesWithKeys({ iconSize }),
+        ...generateTokenMap(tokens),
       })}`
     );
 

package/src/scripts/create-css/utils/convertFontFamily.ts

@@ -1,9 +1,7 @@
 import { FontFamily } from '../constants/typography';
 
 export const convertFontFamily = (value: FontFamily) => {
-  if (value === 'lp-pri-font-family-poppins') {
-    return '"Poppins", sans-serif';
-  } else if (value === 'lp-pri-font-family-variables-pretendard-jp') {
+  if (value === 'lp-pri-font-family-variables-pretendard-jp') {
     return '"Pretendard JP Variable"';
   } else if (value === 'lp-pri-font-family-merriweather') {
     return '"Merriweather", serif';

package/src/scripts/create-css/utils/fileToString.ts

@@ -0,0 +1,9 @@
+import fs from 'fs';
+import path from 'path';
+
+export const fileToString = async (url: string) => {
+  const filePath = path.join(__dirname, url);
+  const result = await fs.readFileSync(filePath, 'utf8');
+
+  return result;
+};

package/src/scripts/create-css/utils/generateTokenMap.ts

@@ -0,0 +1,14 @@
+import { removeObjectPrefix } from './removeTokenPrefix';
+import { replaceValuesWithKeys } from './replaceValuesWithKeys';
+
+const tokenPrefixes = ['lp-sys-', 'lp-pri-'];
+const tokenTypes = ['radius-', 'opacity-', 'padding-', 'size-', 'gap-', 'shadow-', 'icon-size-'];
+const prefixCandidates = tokenPrefixes.map(prefix => tokenTypes.map(type => `${prefix}${type}`)).flat();
+
+export const generateTokenMap = (tokens: Record<string, any>[]) => {
+  const tokenMaps = tokens.map(tokenMap => replaceValuesWithKeys(tokenMap));
+  const prefixRefinedTokenMaps = tokenMaps.map(token => removeObjectPrefix(token, prefixCandidates));
+  const tokenMap = prefixRefinedTokenMaps.reduce((acc, cur) => ({ ...acc, ...cur }), {});
+
+  return tokenMap;
+};

package/src/scripts/create-css/utils/removeTokenPrefix.ts

@@ -0,0 +1,16 @@
+export const removeObjectPrefix = <T extends Record<string, any>>(target: T, prefixes: string[]) => {
+  const result: Record<string, any> = {};
+
+  for (const key in target) {
+    const value = target[key];
+
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+      result[key] = removeObjectPrefix(value, prefixes);
+    } else {
+      const prefix = prefixes.find(p => key.startsWith(p)) as string;
+      result[key.replace(prefix, '')] = target[key];
+    }
+  }
+
+  return result;
+};

package/src/types/color.ts

@@ -71,6 +71,8 @@ export type SystemKeys =
   | 'function-container-negative'
   | 'function-container-negative-hover'
   | 'function-container-caution'
+  | 'function-container-highlight'
+  | 'function-container-selection'
   | 'function-label-positive'
   | 'function-label-negative'
   | 'function-label-caution'