@liner-fe/design-token 2.3.4 → 2.3.6

package/lib/scripts/create-css/constants/PATH.d.ts

@@ -0,0 +1,3 @@
+export declare const PATH: {
+    SRC_GENERATED: string;
+};

package/lib/scripts/create-css/constants/breakpoint/index.d.ts

@@ -0,0 +1,9 @@
+export declare const breakpoint: {
+    readonly 'lp-pri-breakpoint-xs': "0px";
+    readonly 'lp-pri-breakpoint-s': "600px";
+    readonly 'lp-pri-breakpoint-m': "1024px";
+    readonly 'lp-pri-breakpoint-l': "1366px";
+    readonly 'lp-pri-breakpoint-xl': "1536px";
+    readonly 'lp-pri-breakpoint-xxl': "1920px";
+    readonly 'lp-pri-breakpoint-xxxl': "2560px";
+};

package/lib/scripts/create-css/constants/color/index.d.ts

@@ -0,0 +1,8 @@
+import { IColor } from './types';
+export declare const color: IColor;
+export declare const alphas: readonly [80, 72, 64, 56, 50, 48, 44, 40, 36, 32, 28, 24, 20, 16, 12, 8, 6, 4, 1, 0];
+export type alphaPrimitiveKeys = 'lp-pri-achromatic-white' | 'lp-pri-gray-cool-dark' | 'lp-pri-gray-cool-light' | 'lp-pri-brand-original' | 'lp-pri-achromatic-black';
+export declare const alphaPrimitive: {
+    name: alphaPrimitiveKeys;
+    value: string;
+}[];

package/lib/scripts/create-css/constants/color/types.d.ts

@@ -0,0 +1,132 @@
+import { alphas, alphaPrimitiveKeys } from '.';
+import { SystemKeys } from '../../../../types/color';
+export interface IPrimitive {
+    'lp-pri-achromatic-white': '#ffffff';
+    'lp-pri-achromatic-black': '#000000';
+    'lp-pri-gray-cool-980': '#F9F9FA';
+    'lp-pri-gray-cool-970': '#F6F6F7';
+    'lp-pri-gray-cool-940': '#EDEEF0';
+    'lp-pri-gray-cool-920': '#E9E9EB';
+    'lp-pri-gray-cool-900': '#E3E3E6';
+    'lp-pri-gray-cool-850': '#D7D7D9';
+    'lp-pri-gray-cool-750': '#BEBFC2';
+    'lp-pri-gray-cool-600': '#939499';
+    'lp-pri-gray-cool-450': '#6D6D70';
+    'lp-pri-gray-cool-350': '#58595C';
+    'lp-pri-gray-cool-300': '#4A4A4D';
+    'lp-pri-gray-cool-250': '#3B3B3D';
+    'lp-pri-gray-cool-200': '#313133';
+    'lp-pri-gray-cool-100': '#1E1E1F';
+    'lp-pri-brand-original-950': '#FAFBFF';
+    'lp-pri-brand-original-900': '#F4F5FF';
+    'lp-pri-brand-original-800': '#D9DEFF';
+    'lp-pri-brand-original-700': '#B7C1FF';
+    'lp-pri-brand-original-600': '#6B7FFF';
+    'lp-pri-brand-original-500': '#4058FF';
+    'lp-pri-brand-original-400': '#273FD9';
+    'lp-pri-brand-original-200': '#152AB3';
+    'lp-pri-brand-original-100': '#071780';
+    'lp-pri-brand-original-50': '#041166';
+    'lp-pri-brand-variation-950': '#FAFBFF';
+    'lp-pri-brand-variation-900': '#F4F7FF';
+    'lp-pri-brand-variation-800': '#D9E4FF';
+    'lp-pri-brand-variation-700': '#B7CDFF';
+    'lp-pri-brand-variation-600': '#759EFF';
+    'lp-pri-brand-variation-500': '#5487FF';
+    'lp-pri-brand-variation-400': '#4E70BF';
+    'lp-pri-brand-variation-200': '#4A6299';
+    'lp-pri-brand-variation-100': '#384666';
+    'lp-pri-brand-variation-50': '#2C364D';
+    'lp-pri-rainbow-red-950': '#FFF5F5';
+    'lp-pri-rainbow-red-900': '#FFE7E7';
+    'lp-pri-rainbow-red-800': '#FFC3C3';
+    'lp-pri-rainbow-red-700': '#FF9090';
+    'lp-pri-rainbow-red-600': '#FF6060';
+    'lp-pri-rainbow-red-500': '#FF3333';
+    'lp-pri-rainbow-red-400': '#DB2323';
+    'lp-pri-rainbow-red-300': '#B81616';
+    'lp-pri-rainbow-red-200': '#710808';
+    'lp-pri-rainbow-red-100': '#410404';
+    'lp-pri-rainbow-orange-950': '#FFFBF4';
+    'lp-pri-rainbow-orange-900': '#FFF4E3';
+    'lp-pri-rainbow-orange-800': '#FFE1B4';
+    'lp-pri-rainbow-orange-700': '#FFC875';
+    'lp-pri-rainbow-orange-600': '#FFB039';
+    'lp-pri-rainbow-orange-500': '#FF9900';
+    'lp-pri-rainbow-orange-400': '#DB8503';
+    'lp-pri-rainbow-orange-300': '#B87005';
+    'lp-pri-rainbow-orange-200': '#714605';
+    'lp-pri-rainbow-orange-100': '#412803';
+    'lp-pri-rainbow-yellow-950': '#FFFDF4';
+    'lp-pri-rainbow-yellow-900': '#FFF9E3';
+    'lp-pri-rainbow-yellow-800': '#FFF0B4';
+    'lp-pri-rainbow-yellow-700': '#FFE375';
+    'lp-pri-rainbow-yellow-600': '#FFD739';
+    'lp-pri-rainbow-yellow-500': '#FFCC00';
+    'lp-pri-rainbow-yellow-400': '#DBB003';
+    'lp-pri-rainbow-yellow-300': '#B89405';
+    'lp-pri-rainbow-yellow-200': '#715B05';
+    'lp-pri-rainbow-yellow-100': '#413503';
+    'lp-pri-rainbow-green-950': '#F5FEF7';
+    'lp-pri-rainbow-green-900': '#E6FCEA';
+    'lp-pri-rainbow-green-800': '#BFF5C8';
+    'lp-pri-rainbow-green-700': '#8CEC9C';
+    'lp-pri-rainbow-green-600': '#5DDF73';
+    'lp-pri-rainbow-green-500': '#30BF48';
+    'lp-pri-rainbow-green-400': '#20A536';
+    'lp-pri-rainbow-green-300': '#148B28';
+    'lp-pri-rainbow-green-200': '#075714';
+    'lp-pri-rainbow-green-100': '#03350B';
+    'lp-pri-rainbow-mint-950': '#F3FEFE';
+    'lp-pri-rainbow-mint-900': '#AFF7F7';
+    'lp-pri-rainbow-mint-800': '#6EF0F0';
+    'lp-pri-rainbow-mint-700': '#33E6E6';
+    'lp-pri-rainbow-mint-600': '#00CCCC';
+    'lp-pri-rainbow-mint-500': '#02B0B0';
+    'lp-pri-rainbow-mint-400': '#02B0B0';
+    'lp-pri-rainbow-mint-300': '#049494';
+    'lp-pri-rainbow-mint-200': '#045C5C';
+    'lp-pri-rainbow-mint-100': '#033737';
+    'lp-pri-rainbow-cyan-950': '#F6FBFF';
+    'lp-pri-rainbow-cyan-900': '#E8F6FF';
+    'lp-pri-rainbow-cyan-800': '#C6E8FF';
+    'lp-pri-rainbow-cyan-700': '#97D5FF';
+    'lp-pri-rainbow-cyan-600': '#6AC4FF';
+    'lp-pri-rainbow-cyan-500': '#40B3FF';
+    'lp-pri-rainbow-cyan-400': '#2B95DB';
+    'lp-pri-rainbow-cyan-300': '#1A79B8';
+    'lp-pri-rainbow-cyan-200': '#094771';
+    'lp-pri-rainbow-cyan-100': '#042941';
+    'lp-pri-rainbow-purple-950': '#FCF6FF';
+    'lp-pri-rainbow-purple-900': '#F7EAFE';
+    'lp-pri-rainbow-purple-800': '#EBCAFB';
+    'lp-pri-rainbow-purple-700': '#DAA0F7';
+    'lp-pri-rainbow-purple-600': '#C978F2';
+    'lp-pri-rainbow-purple-500': '#B450E6';
+    'lp-pri-rainbow-purple-400': '#9535C6';
+    'lp-pri-rainbow-purple-300': '#7920A6';
+    'lp-pri-rainbow-purple-200': '#480A67';
+    'lp-pri-rainbow-purple-100': '#29043C';
+    'lp-pri-rainbow-pink-950': '#FFF5F8';
+    'lp-pri-rainbow-pink-900': '#FFE7EF';
+    'lp-pri-rainbow-pink-800': '#FFC3D7';
+    'lp-pri-rainbow-pink-700': '#FF90B5';
+    'lp-pri-rainbow-pink-600': '#FF6095';
+    'lp-pri-rainbow-pink-500': '#FF3377';
+    'lp-pri-rainbow-pink-400': '#DB2360';
+    'lp-pri-rainbow-pink-300': '#B8164C';
+    'lp-pri-rainbow-pink-200': '#71082B';
+    'lp-pri-rainbow-pink-100': '#120107';
+}
+export interface IPrimitiveWithAlpha extends Partial<Record<AlphasKey, string>>, IPrimitive {
+}
+type ISystem = Record<SystemKeys, keyof IPrimitiveWithAlpha>;
+export interface IColor {
+    primitive: IPrimitiveWithAlpha;
+    system: {
+        dark: Partial<ISystem>;
+        light: Partial<ISystem>;
+    };
+}
+export type AlphasKey = `${alphaPrimitiveKeys}-alpha-${(typeof alphas)[number]}`;
+export {};

package/lib/scripts/create-css/constants/gap/index.d.ts

@@ -0,0 +1,16 @@
+export declare const gap: {
+    readonly 'lp-sys-gap-positive-50': "2px";
+    readonly 'lp-sys-gap-positive-100': "4px";
+    readonly 'lp-sys-gap-positive-150': "6px";
+    readonly 'lp-sys-gap-positive-200': "8px";
+    readonly 'lp-sys-gap-positive-300': "12px";
+    readonly 'lp-sys-gap-positive-400': "16px";
+    readonly 'lp-sys-gap-positive-500': "20px";
+    readonly 'lp-sys-gap-positive-600': "24px";
+    readonly 'lp-sys-gap-positive-700': "32px";
+    readonly 'lp-sys-gap-positive-800': "40px";
+    readonly 'lp-sys-gap-positive-900': "48px";
+    readonly 'lp-sys-gap-negative-700': "-2px";
+    readonly 'lp-sys-gap-negative-800': "-4px";
+    readonly 'lp-sys-gap-negative-900': "-6px";
+};

package/lib/scripts/create-css/constants/icon/index.d.ts

@@ -0,0 +1,7 @@
+export declare const iconSize: {
+    readonly 'lp-sys-icon-size-xs': "16px";
+    readonly 'lp-sys-icon-size-s': "20px";
+    readonly 'lp-sys-icon-size-m': "24px";
+    readonly 'lp-sys-icon-size-l': "32px";
+    readonly 'lp-sys-icon-size-xl': "40px";
+};

package/lib/scripts/create-css/constants/index.d.ts

@@ -0,0 +1,10 @@
+export * from './color';
+export * from './gap';
+export * from './icon';
+export * from './opacity';
+export * from './padding';
+export * from './radius';
+export * from './shadow';
+export * from './size';
+export * from './typography';
+export * from './breakpoint';

package/lib/scripts/create-css/constants/opacity/index.d.ts

@@ -0,0 +1,21 @@
+export declare const opacity: {
+    readonly 'lp-pri-opacity-80': "80%";
+    readonly 'lp-pri-opacity-72': "72%";
+    readonly 'lp-pri-opacity-64': "64%";
+    readonly 'lp-pri-opacity-56': "56%";
+    readonly 'lp-pri-opacity-50': "50%";
+    readonly 'lp-pri-opacity-48': "48%";
+    readonly 'lp-pri-opacity-44': "44%";
+    readonly 'lp-pri-opacity-40': "40%";
+    readonly 'lp-pri-opacity-36': "36%";
+    readonly 'lp-pri-opacity-32': "32%";
+    readonly 'lp-pri-opacity-28': "28%";
+    readonly 'lp-pri-opacity-24': "24%";
+    readonly 'lp-pri-opacity-20': "20%";
+    readonly 'lp-pri-opacity-16': "16%";
+    readonly 'lp-pri-opacity-12': "12%";
+    readonly 'lp-pri-opacity-8': "8%";
+    readonly 'lp-pri-opacity-4': "4%";
+    readonly 'lp-pri-opacity-1': "1%";
+    readonly 'lp-pri-opacity-0': "0%";
+};

package/lib/scripts/create-css/constants/padding/index.d.ts

@@ -0,0 +1,23 @@
+export declare const padding: {
+    readonly 'lp-sys-padding-component-50': "2px";
+    readonly 'lp-sys-padding-component-100': "4px";
+    readonly 'lp-sys-padding-component-150': "6px";
+    readonly 'lp-sys-padding-component-200': "8px";
+    readonly 'lp-sys-padding-component-300': "12px";
+    readonly 'lp-sys-padding-component-400': "16px";
+    readonly 'lp-sys-padding-component-500': "20px";
+    readonly 'lp-sys-padding-component-600': "24px";
+    readonly 'lp-sys-padding-component-700': "32px";
+    readonly 'lp-sys-padding-component-800': "40px";
+    readonly 'lp-sys-padding-component-900': "48px";
+    readonly 'lp-sys-padding-section-50': "20px";
+    readonly 'lp-sys-padding-section-100': "24px";
+    readonly 'lp-sys-padding-section-200': "32px";
+    readonly 'lp-sys-padding-section-300': "40px";
+    readonly 'lp-sys-padding-section-400': "48px";
+    readonly 'lp-sys-padding-section-500': "56px";
+    readonly 'lp-sys-padding-section-600': "64px";
+    readonly 'lp-sys-padding-section-700': "80px";
+    readonly 'lp-sys-padding-section-800': "100px";
+    readonly 'lp-sys-padding-section-900': "120px";
+};

package/lib/scripts/create-css/constants/primitiveRoot.d.ts

@@ -0,0 +1 @@
+export declare const primitiveRoot: string;

package/lib/scripts/create-css/constants/radius/index.d.ts

@@ -0,0 +1,2 @@
+import { IRadius } from './type';
+export declare const radius: IRadius;

package/lib/scripts/create-css/constants/radius/type.d.ts

@@ -0,0 +1,10 @@
+import { ISize } from '../size/type';
+export interface IRadius {
+    'lp-sys-radius-xxs': (typeof ISize)['lp-pri-size-2'];
+    'lp-sys-radius-xs': (typeof ISize)['lp-pri-size-4'];
+    'lp-sys-radius-s': (typeof ISize)['lp-pri-size-6'];
+    'lp-sys-radius-m': (typeof ISize)['lp-pri-size-8'];
+    'lp-sys-radius-l': (typeof ISize)['lp-pri-size-10'];
+    'lp-sys-radius-xl': (typeof ISize)['lp-pri-size-12'];
+    'lp-sys-radius-xxl': (typeof ISize)['lp-pri-size-200'];
+}

package/lib/scripts/create-css/constants/rootScheme.d.ts

@@ -0,0 +1,4 @@
+export declare const languageJapanese: string;
+export declare const languageEnglish: string;
+export declare const themeDark: string;
+export declare const themeLight: string;

package/lib/scripts/create-css/constants/shadow/index.d.ts

@@ -0,0 +1,2 @@
+export declare const SHADOW_KEYS: readonly ["lp-sys-shadow-normal", "lp-sys-shadow-strong", "lp-sys-shadow-heavy"];
+export declare const shadow: Record<(typeof SHADOW_KEYS)[number], [string, string]>;

package/lib/scripts/create-css/constants/size/index.d.ts

@@ -0,0 +1,2 @@
+import { ISize } from './type';
+export declare const size: Record<keyof typeof ISize, (typeof ISize)[keyof typeof ISize]>;

package/lib/scripts/create-css/constants/size/type.d.ts

@@ -0,0 +1,31 @@
+export declare const ISize: {
+    readonly 'lp-pri-size-minus6': "-6px";
+    readonly 'lp-pri-size-minus4': "-4px";
+    readonly 'lp-pri-size-minus2': "-2px";
+    readonly 'lp-pri-size-0': "0px";
+    readonly 'lp-pri-size-1': "1px";
+    readonly 'lp-pri-size-2': "2px";
+    readonly 'lp-pri-size-3': "3px";
+    readonly 'lp-pri-size-4': "4px";
+    readonly 'lp-pri-size-6': "6px";
+    readonly 'lp-pri-size-8': "8px";
+    readonly 'lp-pri-size-10': "10px";
+    readonly 'lp-pri-size-12': "12px";
+    readonly 'lp-pri-size-14': "14px";
+    readonly 'lp-pri-size-16': "16px";
+    readonly 'lp-pri-size-18': "18px";
+    readonly 'lp-pri-size-20': "20px";
+    readonly 'lp-pri-size-24': "24px";
+    readonly 'lp-pri-size-32': "32px";
+    readonly 'lp-pri-size-40': "40px";
+    readonly 'lp-pri-size-48': "48px";
+    readonly 'lp-pri-size-56': "56px";
+    readonly 'lp-pri-size-64': "64px";
+    readonly 'lp-pri-size-80': "80px";
+    readonly 'lp-pri-size-100': "100px";
+    readonly 'lp-pri-size-120': "120px";
+    readonly 'lp-pri-size-140': "140px";
+    readonly 'lp-pri-size-160': "160px";
+    readonly 'lp-pri-size-180': "180px";
+    readonly 'lp-pri-size-200': "200px";
+};

package/lib/scripts/create-css/constants/typography/types.d.ts

@@ -15,3 +15,4 @@ export type TypographyCaptionPrefix = 'caption';
 export type TypographyCaption = '1-normal-bold' | '2-normal-bold' | '3-normal-bold' | '1-normal-medium' | '2-normal-medium' | '3-normal-medium' | '1-normal-regular' | '2-normal-regular' | '3-normal-regular';
 export type TypographyCaptionType = `${TypographyCaptionPrefix}${TypographyCaption}`;
 export type TypographyKeys = `${TypographyPrefix}-${TypographyTitleType | TypographyDisplayType | TypographyHeadingType | TypographyParagraphType | TypographyCaptionType}`;
+export type TypographyType = TypographyDisplayPrefix | TypographyCaptionPrefix | TypographyParagraphPrefix | TypographyHeadingPrefix | TypographyTitlePrefix;

package/lib/scripts/create-css/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/scripts/create-css/utils/convertFontFamily.d.ts

@@ -0,0 +1,2 @@
+import { FontFamily } from '../constants/typography';
+export declare const convertFontFamily: (value: FontFamily) => "\"Pretendard JP Variable\"" | "\"Merriweather\", serif" | "\"Pretendard Variable\"";

package/lib/scripts/create-css/utils/convertObjectToCSSVariables.d.ts

@@ -0,0 +1 @@
+export declare const convertObjectToCSSVariables: (obj: Record<string, string | number>) => string;

package/lib/scripts/create-css/utils/createFile.d.ts

@@ -0,0 +1,2 @@
+import { NoParamCallback, PathOrFileDescriptor } from 'fs';
+export declare const createFile: (path: PathOrFileDescriptor, data: string | NodeJS.ArrayBufferView, callback?: NoParamCallback) => void;

package/lib/scripts/create-css/utils/fileToString.d.ts

@@ -0,0 +1 @@
+export declare const fileToString: (url: string) => Promise<string>;

package/lib/scripts/create-css/utils/generateTokenMap.d.ts

@@ -0,0 +1 @@
+export declare const generateTokenMap: (tokens: Record<string, any>[]) => Record<string, any>;

package/lib/scripts/create-css/utils/hexToRGBA.d.ts

@@ -0,0 +1 @@
+export declare const hexToRgba: (hex: string, alpha: number) => string;

package/lib/scripts/create-css/utils/makeDir.d.ts

@@ -0,0 +1 @@
+export declare const makeDir: (path: string) => void;

package/lib/scripts/create-css/utils/removeTokenPrefix.d.ts

@@ -0,0 +1 @@
+export declare const removeObjectPrefix: <T extends Record<string, any>>(target: T, prefixes: string[]) => Record<string, any>;

package/lib/scripts/create-css/utils/replaceValuesWithKeys.d.ts

@@ -0,0 +1 @@
+export declare const replaceValuesWithKeys: <T extends Record<string, any>>(obj: T) => Record<string, any>;

package/lib/style/index.d.ts

@@ -0,0 +1 @@
+import './global.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/design-token",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "packageManager": "yarn@3.6.0",
   "devDependencies": {
     "@types/react": "^18.2.48",
@@ -11,29 +11,29 @@
     "typescript": "^5.1.3"
   },
   "dependencies": {
-    "recoil": "^0.5.2"
+    "esbuild": "^0.24.0",
+    "recoil": "^0.5.2",
+    "tsc-alias": "^1.8.10"
   },
   "peerDependencies": {
     "react": "*"
   },
   "scripts": {
-    "build": "yarn create-css && nanobundle build",
+    "build": "yarn create-css && node build.mjs && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build:package": "yarn build",
     "prepack": "yarn build",
     "create-css": "ts-node ./src/scripts/create-css/index.ts"
   },
   "publishConfig": {
     "access": "public",
-    "main": "./lib/index.mjs"
+    "main": "./lib/index.js"
   },
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
-      "import": "./lib/index.mjs",
-      "require": "./lib/index.cjs"
+      "import": "./lib/index.js"
     },
-    "./global.css": "./global.css",
-    "./globalStorybook.css": "./globalStorybook.css",
+    "./index.css": "./lib/index.css",
     "./package.json": "./package.json"
   },
   "maintainers": [
@@ -42,7 +42,7 @@
       "email": "eliot@linercorp.com"
     }
   ],
-  "main": "./lib/index.cjs",
+  "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "files": [
     "lib",

package/src/index.ts

@@ -1,11 +1,11 @@
 export * from './hooks/useDarkTheme';
 export * from './hooks/useLanguage';
-export * from './components/Head';
 export * from './generated/vars';
 export * from './generated/classNames';
 export * from './helpers/getTypoStyle';
 export * from './helpers/setDarkModeScript';
 export * from './components/ThemeProvider';
-
-// 수정 필요
+export * from './scripts/create-css/constants/typography/types';
+export * from './scripts/create-css/constants/breakpoint/index';
 export * from './types/color';
+export * from './style/index';

package/src/scripts/create-css/constants/font/font.css

@@ -4,7 +4,7 @@
   font-weight: 45 920;
   font-style: normal;
   font-display: swap;
-  src: url('./src/fonts/PretendardVariable.woff2') format('woff2-variations');
+  src: url('../assets/PretendardVariable.woff2') format('woff2-variations');
 }
 
 /* Pretendard JP */
@@ -13,7 +13,7 @@
   font-weight: 45 920;
   font-style: normal;
   font-display: swap;
-  src: url('./src/fonts/PretendardJPVariable.woff2') format('woff2-variations');
+  src: url('../assets/PretendardJPVariable.woff2') format('woff2-variations');
 }
 
 /* Merryweather */
@@ -21,34 +21,26 @@
   font-family: 'Merriweather';
   font-weight: 900;
   font-display: swap;
-  src:
-    local('Merriweather Black'),
-    url('./src/fonts/Merriweather-Black.ttf') format('woff2');
+  src: local('Merriweather Black'), url('../assets/Merriweather-Black.ttf') format('woff2');
 }
 
 @font-face {
   font-family: 'Merriweather';
   font-weight: 700;
   font-display: swap;
-  src:
-    local('Merriweather Bold'),
-    url('./src/fonts/Merriweather-Bold.ttf') format('woff2');
+  src: local('Merriweather Bold'), url('../assets/Merriweather-Bold.ttf') format('woff2');
 }
 
 @font-face {
   font-family: 'Merriweather';
   font-weight: 400;
   font-display: swap;
-  src:
-    local('Merriweather Regular'),
-    url('./src/fonts/Merriweather-Regular.ttf') format('woff2');
+  src: local('Merriweather Regular'), url('../assets/Merriweather-Regular.ttf') format('woff2');
 }
 
 @font-face {
   font-family: 'Merriweather';
   font-weight: 300;
   font-display: swap;
-  src:
-    local('Merriweather Light'),
-    url('./src/fonts/Merriweather-Light.ttf') format('woff2');
+  src: local('Merriweather Light'), url('../assets/Merriweather-Light.ttf') format('woff2');
 }

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

@@ -7,3 +7,4 @@ export * from './radius';
 export * from './shadow';
 export * from './size';
 export * from './typography';
+export * from './breakpoint';

package/src/scripts/create-css/constants/rootScheme.ts

@@ -48,18 +48,10 @@ Object.entries(shadow).map(([key, value]) => {
 });
 
 export const themeDark = `
-:root[color-theme='dark'] {
-    ${convertObjectToCSSVariables(systemDarkColor)}
-
-    ${convertObjectToCSSVariables(systemDarkShadow)}
-}
-
-`;
-
-export const themeDarkStorybook = `
+:root[color-theme='dark'],
 :root[class='dark'] {
     ${convertObjectToCSSVariables(systemDarkColor)}
-    
+
     ${convertObjectToCSSVariables(systemDarkShadow)}
 }
 
@@ -79,19 +71,11 @@ Object.entries(shadow).map(([key, value]) => {
 
 export const themeLight = `
 
-:root[color-theme='light'] {
-    ${convertObjectToCSSVariables(systemLightColor)}
-
-
-    ${convertObjectToCSSVariables(systemLightShadow)}
-}
-    `;
-
-export const themeLightStorybook = `
-
+:root[color-theme='light'],
 :root[class='light'] {
     ${convertObjectToCSSVariables(systemLightColor)}
 
+
     ${convertObjectToCSSVariables(systemLightShadow)}
 }
     `;

package/src/scripts/create-css/constants/typography/types.ts

@@ -79,3 +79,10 @@ export type TypographyKeys = `${TypographyPrefix}-${
   | TypographyHeadingType
   | TypographyParagraphType
   | TypographyCaptionType}`;
+
+export type TypographyType =
+  | TypographyDisplayPrefix
+  | TypographyCaptionPrefix
+  | TypographyParagraphPrefix
+  | TypographyHeadingPrefix
+  | TypographyTitlePrefix;

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

@@ -1,12 +1,6 @@
 import { color } from './constants/color';
 import { primitiveRoot } from './constants/primitiveRoot';
-import {
-  languageEnglish,
-  themeDark,
-  themeDarkStorybook,
-  themeLight,
-  themeLightStorybook,
-} from './constants/rootScheme';
+import { languageEnglish, themeDark, themeLight } from './constants/rootScheme';
 import { PATH } from './constants/PATH';
 import { makeDir } from './utils/makeDir';
 import { replaceValuesWithKeys } from './utils/replaceValuesWithKeys';
@@ -14,18 +8,15 @@ import { createFile } from './utils/createFile';
 import { generateTokenMap } from './utils/generateTokenMap';
 import { gap, iconSize, opacity, padding, radius, shadow, size, typographyClassName } from './constants';
 import { breakpoint } from './constants/breakpoint';
+import { fileToString } from './utils/fileToString';
 
 const tokens = [{ radius }, { opacity }, { padding }, { size }, { gap }, { shadow }, { iconSize }, { breakpoint }];
 
 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);
+    const fontCss = await fileToString('../constants/font/font.css');
+    const cssFile = [fontCss, primitiveRoot, themeDark, themeLight, languageEnglish].join('\n');
+    createFile('./src/style/global.css', cssFile);
 
     makeDir(PATH.SRC_GENERATED);