@nurihaus/web-design-system 1.4.47 → 2.0.1

package/dist/styles/token/colors.d.ts

@@ -1,4 +1,109 @@
 export declare const colors: {
+    readonly transparent: "transparent";
+    readonly black: "#000000";
+    readonly white: "#FFFFFF";
+    readonly 'grey-scale-50': "#FAFAFA";
+    readonly 'grey-scale-100': "#F4F4F5";
+    readonly 'grey-scale-200': "#E4E4E7";
+    readonly 'grey-scale-300': "#D4D4D8";
+    readonly 'grey-scale-400': "#A1A1AA";
+    readonly 'grey-scale-500': "#71717A";
+    readonly 'grey-scale-600': "#52525B";
+    readonly 'grey-scale-700': "#3F3F46";
+    readonly 'grey-scale-800': "#27272A";
+    readonly 'grey-scale-900': "#18181B";
+    readonly 'purple-50': "#F4EFFA";
+    readonly 'purple-100': "#E9E0F5";
+    readonly 'purple-200': "#DDD1F0";
+    readonly 'purple-300': "#C3B4DD";
+    readonly 'purple-400': "#A894C7";
+    readonly 'purple-500': "#957EB4";
+    readonly 'purple-600': "#6F56A3";
+    readonly 'purple-700': "#4C277C";
+    readonly 'purple-800': "#4C1D88";
+    readonly 'purple-900': "#391D5D";
+    readonly 'accent-red-50': "#FFF5F6";
+    readonly 'accent-red-100': "#FFE8E9";
+    readonly 'accent-red-200': "#FBCFD2";
+    readonly 'accent-red-300': "#F39AA0";
+    readonly 'accent-red-400': "#E86F77";
+    readonly 'accent-red-500': "#DF535C";
+    readonly 'accent-red-600': "#C94751";
+    readonly 'accent-red-700': "#B02E4C";
+    readonly 'accent-red-800': "#8F243A";
+    readonly 'accent-red-900': "#6E1A2C";
+    readonly 'accent-pink-50': "#FFF1F6";
+    readonly 'accent-pink-100': "#FFE4EE";
+    readonly 'accent-pink-200': "#FECFE3";
+    readonly 'accent-pink-300': "#FDA4CC";
+    readonly 'accent-pink-400': "#F472B6";
+    readonly 'accent-pink-500': "#EC6FAE";
+    readonly 'accent-pink-600': "#D95D9A";
+    readonly 'accent-pink-700': "#B94A7E";
+    readonly 'accent-pink-800': "#93385F";
+    readonly 'accent-pink-900': "#6E2644";
+    readonly 'accent-magenta-50': "#FEF0FF";
+    readonly 'accent-magenta-100': "#FEF0FF";
+    readonly 'accent-magenta-200': "#F8C6FF";
+    readonly 'accent-magenta-300': "#F29BFF";
+    readonly 'accent-magenta-400': "#EC5CEF";
+    readonly 'accent-magenta-500': "#E13BE7";
+    readonly 'accent-magenta-600': "#C82FCC";
+    readonly 'accent-magenta-700': "#A923A8";
+    readonly 'accent-magenta-800': "#831C83";
+    readonly 'accent-magenta-900': "#5E145E";
+    readonly 'accent-blue-50': "#F1F4FF";
+    readonly 'accent-blue-100': "#E3E8FF";
+    readonly 'accent-blue-200': "#C7D2FE";
+    readonly 'accent-blue-300': "#A5B4FC";
+    readonly 'accent-blue-400': "#818CF8";
+    readonly 'accent-blue-500': "#2563EB";
+    readonly 'accent-blue-600': "#1F52C9";
+    readonly 'accent-blue-700': "#1E40AF";
+    readonly 'accent-blue-800': "#1C348A";
+    readonly 'accent-blue-900': "#162763";
+    readonly 'accent-mint-50': "#ECFEFD";
+    readonly 'accent-mint-100': "#D1FAF7";
+    readonly 'accent-mint-200': "#A7F3EE";
+    readonly 'accent-mint-300': "#6EE7E0";
+    readonly 'accent-mint-400': "#2DD4CB";
+    readonly 'accent-mint-500': "#01ECE1";
+    readonly 'accent-mint-600': "#0BC5BC";
+    readonly 'accent-mint-700': "#0F9F99";
+    readonly 'accent-mint-800': "#117D78";
+    readonly 'accent-mint-900': "#135C58";
+    readonly 'accent-green-50': "#ECFDF3";
+    readonly 'accent-green-100': "#D1FAE1";
+    readonly 'accent-green-200': "#A7F3C8";
+    readonly 'accent-green-300': "#6EE7A3";
+    readonly 'accent-green-400': "#41E176";
+    readonly 'accent-green-500': "#22C55E";
+    readonly 'accent-green-600': "#16A34A";
+    readonly 'accent-green-700': "#289A3A";
+    readonly 'accent-green-800': "#166534";
+    readonly 'accent-green-900': "#14532D";
+    readonly 'accent-yellow-50': "#FFFBEB";
+    readonly 'accent-yellow-100': "#FEF3C7";
+    readonly 'accent-yellow-200': "#FDE68A";
+    readonly 'accent-yellow-300': "#FCD34D";
+    readonly 'accent-yellow-400': "#FBBF24";
+    readonly 'accent-yellow-500': "#FFB800";
+    readonly 'accent-yellow-600': "#E0A106";
+    readonly 'accent-yellow-700': "#B58105";
+    readonly 'accent-yellow-800': "#8A6404";
+    readonly 'accent-yellow-900': "#5F4703";
+    readonly 'accent-orange-50': "#FFF7ED";
+    readonly 'accent-orange-100': "#FFEDD5";
+    readonly 'accent-orange-200': "#FED7AA";
+    readonly 'accent-orange-300': "#FDBA74";
+    readonly 'accent-orange-400': "#FB923C";
+    readonly 'accent-orange-500': "#F97316";
+    readonly 'accent-orange-600': "#EA580C";
+    readonly 'accent-orange-700': "#C2410C";
+    readonly 'accent-orange-800': "#9A3412";
+    readonly 'accent-orange-900': "#7C2D12";
+};
+export declare const legacyColors: {
     readonly transparent: "transparent";
     readonly black: "#000000";
     readonly white: "#ffffff";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "1.4.47",
+  "version": "2.0.1",
   "description": "nurilounge-admin-design-system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,6 +17,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "update-tokens": "bash scripts/update-tokens.sh",
     "clean": "rm -rf dist",
     "build": "npm run clean && webpack",
     "start": "webpack serve",
@@ -67,7 +68,7 @@
     "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
-    "@nurihaus/design-tokens": "^0.2.4",
+    "@nurihaus/design-tokens": "latest",
     "@svgr/webpack": "^8.1.0",
     "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",

package/styles/AGENTS.md

@@ -0,0 +1,41 @@
+<!-- Parent: ../AGENTS.md -->
+<!-- Generated: 2026-03-11 | Updated: 2026-03-11 -->
+
+# styles
+
+## Purpose
+전역 CSS 및 디자인 토큰 정의. `index.css`가 모든 스타일의 진입점이며, 토큰과 유틸리티 클래스, 컴포넌트 스타일을 순서대로 import한다.
+
+## Key Files
+
+| File | Description |
+|------|-------------|
+| `index.css` | 전체 스타일 진입점 — 토큰 → 리셋 → 유틸리티 → 컴포넌트 순서로 import |
+| `reset.css` | 브라우저 기본 스타일 초기화 |
+| `display.css` | display 유틸리티 클래스 |
+| `position.css` | position 유틸리티 클래스 |
+| `flex-direction.css` | flex-direction 유틸리티 클래스 |
+| `align-items.css` | align-items 유틸리티 클래스 |
+| `justify-content.css` | justify-content 유틸리티 클래스 |
+| `overflow.css` | overflow 유틸리티 클래스 |
+
+## Subdirectories
+
+| Directory | Purpose |
+|-----------|---------|
+| `token/` | 디자인 토큰 — 색상, 폰트, 반경, 커서, 스페이싱 (see `token/AGENTS.md`) |
+
+## For AI Agents
+
+### Working In This Directory
+- 새 컴포넌트 스타일 추가 시 `index.css`의 `/* Component styles */` 섹션에 `@import` 추가
+- import 순서: 토큰 → 리셋 → 유틸 → 컴포넌트 (현재 순서 유지)
+- 색상 값 직접 삽입 금지 — 반드시 `var(--color-xxx)` 사용
+
+### Common Patterns
+```css
+/* index.css에 컴포넌트 스타일 추가 */
+@import '../components/{name}/{name}-style.css';
+```
+
+<!-- MANUAL: -->

package/styles/token/AGENTS.md

@@ -0,0 +1,27 @@
+<!-- Parent: ../AGENTS.md -->
+<!-- Generated: 2026-03-11 | Updated: 2026-03-11 -->
+
+# token
+
+## Purpose
+디자인 토큰 정의. CSS 변수와 TypeScript 상수로 색상, 폰트, 반경, 스페이싱, 커서를 관리. `scripts/update-tokens.sh`로 `@nurihaus/design-tokens`에서 자동 업데이트됨.
+
+## Key Files
+
+| File | Description |
+|------|-------------|
+| `color.css` | 색상 CSS 변수 (`--color-xxx`) 정의 |
+| `colors.ts` | 색상 TypeScript 상수 — `getMergedProps`의 css type prop에서 사용 |
+| `font.css` | 폰트 관련 CSS 변수 |
+| `radius.css` | border-radius CSS 변수 |
+| `space.css` | 간격(spacing) CSS 변수 |
+| `cursor.css` | cursor CSS 변수 |
+
+## For AI Agents
+
+### Working In This Directory
+- **직접 수정 금지** — `yarn update-tokens` (`scripts/update-tokens.sh`) 으로만 업데이트
+- 수동으로 수정해도 다음 토큰 업데이트 시 덮어씌워짐
+- 새 색상 변수가 필요하면 `@nurihaus/design-tokens` 패키지에 먼저 추가
+
+<!-- MANUAL: -->

package/styles/token/color.css

@@ -1,115 +1,115 @@
 .nuri-theme {
-  --color-primary-black: #000000;
-  --color-primary-white: #ffffff;
-  --color-primary-gray-fa: #fafafa;
-  --color-primary-gray-f4: #f4f4f5;
-  --color-primary-gray-e4: #e4e4e7;
-  --color-primary-gray-d4: #d4d4d8;
-  --color-primary-gray-a1: #a1a1aa;
-  --color-primary-gray-71: #71717a;
-  --color-primary-gray-52: #52525b;
-  --color-primary-gray-3f: #3f3f46;
-  --color-primary-gray-27: #27272a;
-  --color-primary-gray-18: #18181b;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-grey-scale-50: #fafafa;
+  --color-grey-scale-100: #f4f4f5;
+  --color-grey-scale-200: #e4e4e7;
+  --color-grey-scale-300: #d4d4d8;
+  --color-grey-scale-400: #a1a1aa;
+  --color-grey-scale-500: #71717a;
+  --color-grey-scale-600: #52525b;
+  --color-grey-scale-700: #3f3f46;
+  --color-grey-scale-800: #27272a;
+  --color-grey-scale-900: #18181b;
 
-  --color-point-purple-f4: #f4effa;
-  --color-point-purple-e9: #e9e0f5;
-  --color-point-purple-dd: #ddd1f0;
-  --color-point-purple-c3: #c3b4dd;
-  --color-point-purple-a8: #a894c7;
-  --color-point-purple-95: #957eb4;
-  --color-point-purple-6f: #6f56a3;
-  --color-point-purple-4c: #4c277c;
-  --color-point-purple-41: #4c1d88;
-  --color-point-purple-39: #391d5d;
+  --color-purple-50: #f4effa;
+  --color-purple-100: #e9e0f5;
+  --color-purple-200: #ddd1f0;
+  --color-purple-300: #c3b4dd;
+  --color-purple-400: #a894c7;
+  --color-purple-500: #957eb4;
+  --color-purple-600: #6f56a3;
+  --color-purple-700: #4c277c;
+  --color-purple-800: #4c1d88;
+  --color-purple-900: #391d5d;
 
-  --color-accent-red-ff: #fff5f6;
-  --color-accent-red-ffe: #ffe8e9;
-  --color-accent-red-fb: #fbcfd2;
-  --color-accent-red-f3: #f39aa0;
-  --color-accent-red-e8: #e86f77;
-  --color-accent-red-df: #df535c;
-  --color-accent-red-c9: #c94751;
-  --color-accent-red-b0: #b02e4c;
-  --color-accent-red-8f: #8f243a;
-  --color-accent-red-6e: #6e1a2c;
+  --color-accent-red-50: #fff5f6;
+  --color-accent-red-100: #ffe8e9;
+  --color-accent-red-200: #fbcfd2;
+  --color-accent-red-300: #f39aa0;
+  --color-accent-red-400: #e86f77;
+  --color-accent-red-500: #df535c;
+  --color-accent-red-600: #c94751;
+  --color-accent-red-700: #b02e4c;
+  --color-accent-red-800: #8f243a;
+  --color-accent-red-900: #6e1a2c;
 
-  --color-accent-pink-ff: #fff1f6;
-  --color-accent-pink-ffe: #ffe4ee;
-  --color-accent-pink-fe: #fecfe3;
-  --color-accent-pink-fd: #fda4cc;
-  --color-accent-pink-f4: #f472b6;
-  --color-accent-pink-ec: #ec6fae;
-  --color-accent-pink-d9: #d95d9a;
-  --color-accent-pink-b9: #b94a7e;
-  --color-accent-pink-93: #93385f;
-  --color-accent-pink-6e: #6e2644;
+  --color-accent-pink-50: #fff1f6;
+  --color-accent-pink-100: #ffe4ee;
+  --color-accent-pink-200: #fecfe3;
+  --color-accent-pink-300: #fda4cc;
+  --color-accent-pink-400: #f472b6;
+  --color-accent-pink-500: #ec6fae;
+  --color-accent-pink-600: #d95d9a;
+  --color-accent-pink-700: #b94a7e;
+  --color-accent-pink-800: #93385f;
+  --color-accent-pink-900: #6e2644;
 
-  --color-accent-magenta-fe: #fef0ff;
-  --color-accent-magenta-fc: #fce4ff;
-  --color-accent-magenta-f8: #f8c6ff;
-  --color-accent-magenta-f2: #f29bff;
-  --color-accent-magenta-ec: #ec5cef;
-  --color-accent-magenta-e1: #e13be7;
-  --color-accent-magenta-c8: #c82fcc;
-  --color-accent-magenta-a9: #a923a8;
-  --color-accent-magenta-83: #831c83;
-  --color-accent-magenta-5e: #5e145e;
+  --color-accent-magenta-50: #fef0ff;
+  --color-accent-magenta-100: #fce4ff;
+  --color-accent-magenta-200: #f8c6ff;
+  --color-accent-magenta-300: #f29bff;
+  --color-accent-magenta-400: #ec5cef;
+  --color-accent-magenta-500: #e13be7;
+  --color-accent-magenta-600: #c82fcc;
+  --color-accent-magenta-700: #a923a8;
+  --color-accent-magenta-800: #831c83;
+  --color-accent-magenta-900: #5e145e;
 
-  --color-accent-blue-f1: #f1f4ff;
-  --color-accent-blue-e3: #e3e8ff;
-  --color-accent-blue-c7: #c7d2fe;
-  --color-accent-blue-a5: #a5b4fc;
-  --color-accent-blue-81: #818cf8;
-  --color-accent-blue-25: #2563eb;
-  --color-accent-blue-1f: #1f52c9;
-  --color-accent-blue-1e: #1e40af;
-  --color-accent-blue-1c: #1c348a;
-  --color-accent-blue-16: #162763;
+  --color-accent-blue-50: #f1f4ff;
+  --color-accent-blue-100: #e3e8ff;
+  --color-accent-blue-200: #c7d2fe;
+  --color-accent-blue-300: #a5b4fc;
+  --color-accent-blue-400: #818cf8;
+  --color-accent-blue-500: #2563eb;
+  --color-accent-blue-600: #1f52c9;
+  --color-accent-blue-700: #1e40af;
+  --color-accent-blue-800: #1c348a;
+  --color-accent-blue-900: #162763;
 
-  --color-accent-mint-ec: #ecfefd;
-  --color-accent-mint-d1: #d1faf7;
-  --color-accent-mint-a7: #a7f3ee;
-  --color-accent-mint-6e: #6ee7e0;
-  --color-accent-mint-2d: #2dd4cb;
-  --color-accent-mint-01: #01ece1;
-  --color-accent-mint-0b: #0bc5bc;
-  --color-accent-mint-0f: #0f9f99;
-  --color-accent-mint-11: #117d78;
-  --color-accent-mint-13: #135c58;
+  --color-accent-mint-50: #ecfefd;
+  --color-accent-mint-100: #d1faf7;
+  --color-accent-mint-200: #a7f3ee;
+  --color-accent-mint-300: #6ee7e0;
+  --color-accent-mint-400: #2dd4cb;
+  --color-accent-mint-500: #01ece1;
+  --color-accent-mint-600: #0bc5bc;
+  --color-accent-mint-700: #0f9f99;
+  --color-accent-mint-800: #117d78;
+  --color-accent-mint-900: #135c58;
 
-  --color-accent-green-ec: #ecfdf3;
-  --color-accent-green-d1: #d1fae1;
-  --color-accent-green-a7: #a7f3c8;
-  --color-accent-green-6e: #6ee7a3;
-  --color-accent-green-41: #41e176;
-  --color-accent-green-22: #22c55e;
-  --color-accent-green-16: #16a34a;
-  --color-accent-green-28: #289a3a;
-  --color-accent-green-166: #166534;
-  --color-accent-green-14: #14532d;
+  --color-accent-green-50: #ecfdf3;
+  --color-accent-green-100: #d1fae1;
+  --color-accent-green-200: #a7f3c8;
+  --color-accent-green-300: #6ee7a3;
+  --color-accent-green-400: #41e176;
+  --color-accent-green-500: #22c55e;
+  --color-accent-green-600: #16a34a;
+  --color-accent-green-700: #289a3a;
+  --color-accent-green-800: #166534;
+  --color-accent-green-900: #14532d;
 
-  --color-accent-yellow-ff: #fffbeb;
-  --color-accent-yellow-fe: #fef3c7;
-  --color-accent-yellow-fd: #fde68a;
-  --color-accent-yellow-fc: #fcd34d;
-  --color-accent-yellow-fb: #fbbf24;
-  --color-accent-yellow-ffb: #ffb800;
-  --color-accent-yellow-e0: #e0a106;
-  --color-accent-yellow-b5: #b58105;
-  --color-accent-yellow-8a: #8a6404;
-  --color-accent-yellow-5f: #5f4703;
+  --color-accent-yellow-50: #fffbeb;
+  --color-accent-yellow-100: #fef3c7;
+  --color-accent-yellow-200: #fde68a;
+  --color-accent-yellow-300: #fcd34d;
+  --color-accent-yellow-400: #fbbf24;
+  --color-accent-yellow-500: #ffb800;
+  --color-accent-yellow-600: #e0a106;
+  --color-accent-yellow-700: #b58105;
+  --color-accent-yellow-800: #8a6404;
+  --color-accent-yellow-900: #5f4703;
 
-  --color-accent-orange-ff: #fff7ed;
-  --color-accent-orange-ffe: #ffedd5;
-  --color-accent-orange-fe: #fed7aa;
-  --color-accent-orange-fd: #fdba74;
-  --color-accent-orange-fb: #fb923c;
-  --color-accent-orange-f9: #f97316;
-  --color-accent-orange-ea: #ea580c;
-  --color-accent-orange-c2: #c2410c;
-  --color-accent-orange-9a: #9a3412;
-  --color-accent-orange-7c: #7c2d12;
+  --color-accent-orange-50: #fff7ed;
+  --color-accent-orange-100: #ffedd5;
+  --color-accent-orange-200: #fed7aa;
+  --color-accent-orange-300: #fdba74;
+  --color-accent-orange-400: #fb923c;
+  --color-accent-orange-500: #f97316;
+  --color-accent-orange-600: #ea580c;
+  --color-accent-orange-700: #c2410c;
+  --color-accent-orange-800: #9a3412;
+  --color-accent-orange-900: #7c2d12;
 
   --color-etc-skeleton-e4: #0f0f17;
   --color-etc-skeleton-f7: #f7f7f8;

package/styles/token/colors.ts

@@ -1,4 +1,110 @@
 export const colors = {
+  transparent: 'transparent',
+  black: '#000000',
+  white: '#FFFFFF',
+  'grey-scale-50': '#FAFAFA',
+  'grey-scale-100': '#F4F4F5',
+  'grey-scale-200': '#E4E4E7',
+  'grey-scale-300': '#D4D4D8',
+  'grey-scale-400': '#A1A1AA',
+  'grey-scale-500': '#71717A',
+  'grey-scale-600': '#52525B',
+  'grey-scale-700': '#3F3F46',
+  'grey-scale-800': '#27272A',
+  'grey-scale-900': '#18181B',
+  'purple-50': '#F4EFFA',
+  'purple-100': '#E9E0F5',
+  'purple-200': '#DDD1F0',
+  'purple-300': '#C3B4DD',
+  'purple-400': '#A894C7',
+  'purple-500': '#957EB4',
+  'purple-600': '#6F56A3',
+  'purple-700': '#4C277C',
+  'purple-800': '#4C1D88',
+  'purple-900': '#391D5D',
+  'accent-red-50': '#FFF5F6',
+  'accent-red-100': '#FFE8E9',
+  'accent-red-200': '#FBCFD2',
+  'accent-red-300': '#F39AA0',
+  'accent-red-400': '#E86F77',
+  'accent-red-500': '#DF535C',
+  'accent-red-600': '#C94751',
+  'accent-red-700': '#B02E4C',
+  'accent-red-800': '#8F243A',
+  'accent-red-900': '#6E1A2C',
+  'accent-pink-50': '#FFF1F6',
+  'accent-pink-100': '#FFE4EE',
+  'accent-pink-200': '#FECFE3',
+  'accent-pink-300': '#FDA4CC',
+  'accent-pink-400': '#F472B6',
+  'accent-pink-500': '#EC6FAE',
+  'accent-pink-600': '#D95D9A',
+  'accent-pink-700': '#B94A7E',
+  'accent-pink-800': '#93385F',
+  'accent-pink-900': '#6E2644',
+  'accent-magenta-50': '#FEF0FF',
+  'accent-magenta-100': '#FEF0FF',
+  'accent-magenta-200': '#F8C6FF',
+  'accent-magenta-300': '#F29BFF',
+  'accent-magenta-400': '#EC5CEF',
+  'accent-magenta-500': '#E13BE7',
+  'accent-magenta-600': '#C82FCC',
+  'accent-magenta-700': '#A923A8',
+  'accent-magenta-800': '#831C83',
+  'accent-magenta-900': '#5E145E',
+  'accent-blue-50': '#F1F4FF',
+  'accent-blue-100': '#E3E8FF',
+  'accent-blue-200': '#C7D2FE',
+  'accent-blue-300': '#A5B4FC',
+  'accent-blue-400': '#818CF8',
+  'accent-blue-500': '#2563EB',
+  'accent-blue-600': '#1F52C9',
+  'accent-blue-700': '#1E40AF',
+  'accent-blue-800': '#1C348A',
+  'accent-blue-900': '#162763',
+  'accent-mint-50': '#ECFEFD',
+  'accent-mint-100': '#D1FAF7',
+  'accent-mint-200': '#A7F3EE',
+  'accent-mint-300': '#6EE7E0',
+  'accent-mint-400': '#2DD4CB',
+  'accent-mint-500': '#01ECE1',
+  'accent-mint-600': '#0BC5BC',
+  'accent-mint-700': '#0F9F99',
+  'accent-mint-800': '#117D78',
+  'accent-mint-900': '#135C58',
+  'accent-green-50': '#ECFDF3',
+  'accent-green-100': '#D1FAE1',
+  'accent-green-200': '#A7F3C8',
+  'accent-green-300': '#6EE7A3',
+  'accent-green-400': '#41E176',
+  'accent-green-500': '#22C55E',
+  'accent-green-600': '#16A34A',
+  'accent-green-700': '#289A3A',
+  'accent-green-800': '#166534',
+  'accent-green-900': '#14532D',
+  'accent-yellow-50': '#FFFBEB',
+  'accent-yellow-100': '#FEF3C7',
+  'accent-yellow-200': '#FDE68A',
+  'accent-yellow-300': '#FCD34D',
+  'accent-yellow-400': '#FBBF24',
+  'accent-yellow-500': '#FFB800',
+  'accent-yellow-600': '#E0A106',
+  'accent-yellow-700': '#B58105',
+  'accent-yellow-800': '#8A6404',
+  'accent-yellow-900': '#5F4703',
+  'accent-orange-50': '#FFF7ED',
+  'accent-orange-100': '#FFEDD5',
+  'accent-orange-200': '#FED7AA',
+  'accent-orange-300': '#FDBA74',
+  'accent-orange-400': '#FB923C',
+  'accent-orange-500': '#F97316',
+  'accent-orange-600': '#EA580C',
+  'accent-orange-700': '#C2410C',
+  'accent-orange-800': '#9A3412',
+  'accent-orange-900': '#7C2D12',
+} as const;
+
+export const legacyColors = {
   transparent: 'transparent',
   black: '#000000',
   white: '#ffffff',
@@ -102,4 +208,4 @@ export const colors = {
   accentOrangeC2: '#c2410c',
   accentOrange9a: '#9a3412',
   accentOrange7c: '#7c2d12',
-} as const;
+} as const;

package/styles/token/font.css

@@ -52,5 +52,5 @@
 }
 
 .nuri-placeholder {
-  color: var(--color-primary-gray-a1);
+  color: var(--color-grey-scale-400);
 }

package/styles/token/radius.css

@@ -2,5 +2,5 @@
   /* 디자인 시스템의 변동 가능성으로 인해 크기순이 아닌 생성순으로 정렬합니다. */
   --radius-1: 6px;
   --radius-2: 4px;
-  --radius-3: 40px;
+  --radius-3: 9999px;
 }