@nexus-cross/tokens 1.0.1-beta.1 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/TOKENS.md +9 -9
  2. package/dist/company-vars.css +10 -10
  3. package/dist/company.css +10 -10
  4. package/dist/index.d.mts +8 -0
  5. package/dist/index.d.ts +8 -0
  6. package/dist/index.js +4 -3
  7. package/dist/index.mjs +4 -3
  8. package/package.json +1 -1
  9. package/src/data/color.json +2 -2
  10. package/src/data/space.json +2 -1
  11. package/README.md +0 -197
package/dist/TOKENS.md CHANGED
@@ -39,7 +39,7 @@ const { semantic } = getTheme("dark");
39
39
  |---|---|---|---|---|
40
40
  | `bg-bg-default` | `--color-bg-default` | 기본 배경 | `#FFFFFF` | `#1E232E` |
41
41
  | `bg-bg-subtle` | `--color-bg-subtle` | 미묘한 배경 | `#F3F6F8` | `#161A21` |
42
- | `bg-bg-strong` | `--color-bg-strong` | 강조 배경 | `#ECF0F2` | `#000000` |
42
+ | `bg-bg-strong` | `--color-bg-strong` | 강조 배경 | `#EAEDEE` | `#000000` |
43
43
 
44
44
  ### Surface
45
45
 
@@ -48,11 +48,11 @@ const { semantic } = getTheme("dark");
48
48
  | `bg-surface-default` | `--color-surface-default` | 기본 표면 | `#FFFFFF` | `#1E232E` |
49
49
  | `bg-surface-default-dim` | `--color-surface-default-dim` | 기본 표면 - 딤 | `#F3F6F8` | `#161A21` |
50
50
  | `bg-surface-default-hover` | `--color-surface-default-hover` | 기본 표면 - 호버 | `#F3F6F8` | `#252B39` |
51
- | `bg-surface-default-pressed` | `--color-surface-default-pressed` | 기본 표면 - 프레스 | `#ECF0F2` | `#363B4C` |
52
- | `bg-surface-default-disabled` | `--color-surface-default-disabled` | 기본 표면 - 비활성 | `#ECF0F2` | `#363B4C` |
51
+ | `bg-surface-default-pressed` | `--color-surface-default-pressed` | 기본 표면 - 프레스 | `#EAEDEE` | `#363B4C` |
52
+ | `bg-surface-default-disabled` | `--color-surface-default-disabled` | 기본 표면 - 비활성 | `#EAEDEE` | `#363B4C` |
53
53
  | `bg-surface-subtle` | `--color-surface-subtle` | 미묘한 표면 | `#F3F6F8` | `#252B39` |
54
- | `bg-surface-subtle-hover` | `--color-surface-subtle-hover` | 미묘한 표면 - 호버 | `#ECF0F2` | `#363B4C` |
55
- | `bg-surface-strong` | `--color-surface-strong` | 강조 표면 | `#ECF0F2` | `#363B4C` |
54
+ | `bg-surface-subtle-hover` | `--color-surface-subtle-hover` | 미묘한 표면 - 호버 | `#EAEDEE` | `#363B4C` |
55
+ | `bg-surface-strong` | `--color-surface-strong` | 강조 표면 | `#EAEDEE` | `#363B4C` |
56
56
  | `bg-surface-inverted` | `--color-surface-inverted` | 반전 표면 | `#161A21` | `#F3F6F8` |
57
57
 
58
58
  ### Text
@@ -60,7 +60,7 @@ const { semantic } = getTheme("dark");
60
60
  | Tailwind Class | CSS Variable | 용도 | Light | Dark |
61
61
  |---|---|---|---|---|
62
62
  | `text-text-highlight` | `--color-text-highlight` | 강조 텍스트 | `#000000` | `#FFFFFF` |
63
- | `text-text-primary` | `--color-text-primary` | 주요 텍스트 | `#1E232E` | `#ECF0F2` |
63
+ | `text-text-primary` | `--color-text-primary` | 주요 텍스트 | `#1E232E` | `#EAEDEE` |
64
64
  | `text-text-primary-hover` | `--color-text-primary-hover` | 주요 텍스트 - 호버 | `#000000` | `#FFFFFF` |
65
65
  | `text-text-primary-pressed` | `--color-text-primary-pressed` | 주요 텍스트 - 프레스 | `#000000` | `#FFFFFF` |
66
66
  | `text-text-secondary` | `--color-text-secondary` | 보조 텍스트 | `#7E8597` | `#A2AABA` |
@@ -77,7 +77,7 @@ const { semantic } = getTheme("dark");
77
77
  | Tailwind Class | CSS Variable | 용도 | Light | Dark |
78
78
  |---|---|---|---|---|
79
79
  | `text-icon-highlight` | `--color-icon-highlight` | 강조 아이콘 | `#000000` | `#FFFFFF` |
80
- | `text-icon-primary` | `--color-icon-primary` | 주요 아이콘 | `#1E232E` | `#ECF0F2` |
80
+ | `text-icon-primary` | `--color-icon-primary` | 주요 아이콘 | `#1E232E` | `#EAEDEE` |
81
81
  | `text-icon-primary-hover` | `--color-icon-primary-hover` | 주요 아이콘 - 호버 | `#000000` | `#FFFFFF` |
82
82
  | `text-icon-primary-pressed` | `--color-icon-primary-pressed` | 주요 아이콘 - 프레스 | `#000000` | `#FFFFFF` |
83
83
  | `text-icon-secondary` | `--color-icon-secondary` | 보조 아이콘 | `#7E8597` | `#A2AABA` |
@@ -93,7 +93,7 @@ const { semantic } = getTheme("dark");
93
93
 
94
94
  | Tailwind Class | CSS Variable | 용도 | Light | Dark |
95
95
  |---|---|---|---|---|
96
- | `border-border-default` | `--color-border-default` | 기본 테두리 | `#ECF0F2` | `#3B4153` |
96
+ | `border-border-default` | `--color-border-default` | 기본 테두리 | `#EAEDEE` | `#3B4153` |
97
97
  | `border-border-default-hover` | `--color-border-default-hover` | 기본 테두리 - 호버 | `#A2AABA` | `#62697A` |
98
98
  | `border-border-default-focus` | `--color-border-default-focus` | 기본 테두리 - 포커스 | `#62697A` | `#A2AABA` |
99
99
  | `border-border-subtle` | `--color-border-subtle` | 약한 테두리 | `#F3F6F8` | `#252B39` |
@@ -114,7 +114,7 @@ const { semantic } = getTheme("dark");
114
114
  | `bg-accent-on-primary` | `--color-accent-on-primary` | 액센트 배경 위 전경색 | `#FFFFFF` | `#000000` |
115
115
  | `bg-accent-secondary` | `--color-accent-secondary` | | `#7346F3` | `#7D4FFF` |
116
116
  | `bg-accent-secondary-intense` | `--color-accent-secondary-intense` | | `#7346F3` | `#9975FF` |
117
- | `bg-accent-secondary-dim` | `--color-accent-secondary-dim` | | `#E9DBFB` | `#7346F3` |
117
+ | `bg-accent-secondary-dim` | `--color-accent-secondary-dim` | | `#E0CDF8` | `#7346F3` |
118
118
  | `bg-accent-secondary-hover` | `--color-accent-secondary-hover` | | `#7D4FFF` | `#9975FF` |
119
119
  | `bg-accent-secondary-pressed` | `--color-accent-secondary-pressed` | | `#9975FF` | `#7346F3` |
120
120
  | `bg-accent-secondary-disabled` | `--color-accent-secondary-disabled` | | `#F4EBFF` | `#3A1D7C` |
package/dist/company-vars.css CHANGED
@@ -2,21 +2,21 @@
2
2
  * Company CSS — 순수 CSS 변수 (:root + .dark)
3
3
  * Tailwind 없이 var(--*) 로 사용 가능
4
4
  * 자동 생성: scripts/generate-css.js
5
- * 생성일: 2026-03-27T03:12:58.561Z
5
+ * 생성일: 2026-04-01T08:12:46.886Z
6
6
  */
7
7
 
8
8
  :root {
9
9
  --color-bg-default: #FFFFFF;
10
10
  --color-bg-subtle: #F3F6F8;
11
- --color-bg-strong: #ECF0F2;
11
+ --color-bg-strong: #EAEDEE;
12
12
  --color-surface-default: #FFFFFF;
13
13
  --color-surface-default-dim: #F3F6F8;
14
14
  --color-surface-default-hover: #F3F6F8;
15
- --color-surface-default-pressed: #ECF0F2;
16
- --color-surface-default-disabled: #ECF0F2;
15
+ --color-surface-default-pressed: #EAEDEE;
16
+ --color-surface-default-disabled: #EAEDEE;
17
17
  --color-surface-subtle: #F3F6F8;
18
- --color-surface-subtle-hover: #ECF0F2;
19
- --color-surface-strong: #ECF0F2;
18
+ --color-surface-subtle-hover: #EAEDEE;
19
+ --color-surface-strong: #EAEDEE;
20
20
  --color-surface-inverted: #161A21;
21
21
  --color-text-highlight: #000000;
22
22
  --color-text-primary: #1E232E;
@@ -42,7 +42,7 @@
42
42
  --color-icon-tertiary-pressed: #62697A;
43
43
  --color-icon-muted: #A2AABA;
44
44
  --color-icon-inverted: #FFFFFF;
45
- --color-border-default: #ECF0F2;
45
+ --color-border-default: #EAEDEE;
46
46
  --color-border-default-hover: #A2AABA;
47
47
  --color-border-default-focus: #62697A;
48
48
  --color-border-subtle: #F3F6F8;
@@ -58,7 +58,7 @@
58
58
  --color-accent-on-primary: #FFFFFF;
59
59
  --color-accent-secondary: #7346F3;
60
60
  --color-accent-secondary-intense: #7346F3;
61
- --color-accent-secondary-dim: #E9DBFB;
61
+ --color-accent-secondary-dim: #E0CDF8;
62
62
  --color-accent-secondary-hover: #7D4FFF;
63
63
  --color-accent-secondary-pressed: #9975FF;
64
64
  --color-accent-secondary-disabled: #F4EBFF;
@@ -314,7 +314,7 @@
314
314
  --color-surface-strong: #363B4C;
315
315
  --color-surface-inverted: #F3F6F8;
316
316
  --color-text-highlight: #FFFFFF;
317
- --color-text-primary: #ECF0F2;
317
+ --color-text-primary: #EAEDEE;
318
318
  --color-text-primary-hover: #FFFFFF;
319
319
  --color-text-primary-pressed: #FFFFFF;
320
320
  --color-text-secondary: #A2AABA;
@@ -326,7 +326,7 @@
326
326
  --color-text-muted: #62697A;
327
327
  --color-text-inverted: #000000;
328
328
  --color-icon-highlight: #FFFFFF;
329
- --color-icon-primary: #ECF0F2;
329
+ --color-icon-primary: #EAEDEE;
330
330
  --color-icon-primary-hover: #FFFFFF;
331
331
  --color-icon-primary-pressed: #FFFFFF;
332
332
  --color-icon-secondary: #A2AABA;
package/dist/company.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Company CSS — Tailwind v4 (@theme + .dark)
3
3
  * 자동 생성: scripts/generate-css.js
4
- * 생성일: 2026-03-27T03:12:58.559Z
4
+ * 생성일: 2026-04-01T08:12:46.884Z
5
5
  *
6
6
  * @theme: Tailwind 유틸리티 클래스 자동 생성
7
7
  * :root: 순수 CSS 변수 (var()로 직접 사용)
@@ -10,15 +10,15 @@
10
10
  @theme {
11
11
  --color-bg-default: #FFFFFF;
12
12
  --color-bg-subtle: #F3F6F8;
13
- --color-bg-strong: #ECF0F2;
13
+ --color-bg-strong: #EAEDEE;
14
14
  --color-surface-default: #FFFFFF;
15
15
  --color-surface-default-dim: #F3F6F8;
16
16
  --color-surface-default-hover: #F3F6F8;
17
- --color-surface-default-pressed: #ECF0F2;
18
- --color-surface-default-disabled: #ECF0F2;
17
+ --color-surface-default-pressed: #EAEDEE;
18
+ --color-surface-default-disabled: #EAEDEE;
19
19
  --color-surface-subtle: #F3F6F8;
20
- --color-surface-subtle-hover: #ECF0F2;
21
- --color-surface-strong: #ECF0F2;
20
+ --color-surface-subtle-hover: #EAEDEE;
21
+ --color-surface-strong: #EAEDEE;
22
22
  --color-surface-inverted: #161A21;
23
23
  --color-text-highlight: #000000;
24
24
  --color-text-primary: #1E232E;
@@ -44,7 +44,7 @@
44
44
  --color-icon-tertiary-pressed: #62697A;
45
45
  --color-icon-muted: #A2AABA;
46
46
  --color-icon-inverted: #FFFFFF;
47
- --color-border-default: #ECF0F2;
47
+ --color-border-default: #EAEDEE;
48
48
  --color-border-default-hover: #A2AABA;
49
49
  --color-border-default-focus: #62697A;
50
50
  --color-border-subtle: #F3F6F8;
@@ -60,7 +60,7 @@
60
60
  --color-accent-on-primary: #FFFFFF;
61
61
  --color-accent-secondary: #7346F3;
62
62
  --color-accent-secondary-intense: #7346F3;
63
- --color-accent-secondary-dim: #E9DBFB;
63
+ --color-accent-secondary-dim: #E0CDF8;
64
64
  --color-accent-secondary-hover: #7D4FFF;
65
65
  --color-accent-secondary-pressed: #9975FF;
66
66
  --color-accent-secondary-disabled: #F4EBFF;
@@ -319,7 +319,7 @@
319
319
  --color-surface-strong: #363B4C;
320
320
  --color-surface-inverted: #F3F6F8;
321
321
  --color-text-highlight: #FFFFFF;
322
- --color-text-primary: #ECF0F2;
322
+ --color-text-primary: #EAEDEE;
323
323
  --color-text-primary-hover: #FFFFFF;
324
324
  --color-text-primary-pressed: #FFFFFF;
325
325
  --color-text-secondary: #A2AABA;
@@ -331,7 +331,7 @@
331
331
  --color-text-muted: #62697A;
332
332
  --color-text-inverted: #000000;
333
333
  --color-icon-highlight: #FFFFFF;
334
- --color-icon-primary: #ECF0F2;
334
+ --color-icon-primary: #EAEDEE;
335
335
  --color-icon-primary-hover: #FFFFFF;
336
336
  --color-icon-primary-pressed: #FFFFFF;
337
337
  --color-icon-secondary: #A2AABA;
package/dist/index.d.mts CHANGED
@@ -1608,6 +1608,7 @@ declare const rawSpaceData: {
1608
1608
  "56": string;
1609
1609
  "64": string;
1610
1610
  px: string;
1611
+ "1.5": string;
1611
1612
  };
1612
1613
  semantic: {
1613
1614
  padding: {
@@ -3763,6 +3764,7 @@ declare const allCategoryData: {
3763
3764
  "56": string;
3764
3765
  "64": string;
3765
3766
  px: string;
3767
+ "1.5": string;
3766
3768
  };
3767
3769
  semantic: {
3768
3770
  padding: {
@@ -4385,6 +4387,10 @@ interface AccentPrimaryState extends InteractiveState {
4385
4387
  intense: string;
4386
4388
  dim: string;
4387
4389
  }
4390
+ interface AccentSecondaryState extends InteractiveState {
4391
+ intense: string;
4392
+ dim: string;
4393
+ }
4388
4394
  interface StatusState extends BaseState {
4389
4395
  hover: string;
4390
4396
  pressed: string;
@@ -4437,7 +4443,9 @@ interface Semantic {
4437
4443
  };
4438
4444
  accent: {
4439
4445
  primary: AccentPrimaryState;
4446
+ secondary: AccentSecondaryState;
4440
4447
  'on-primary': string;
4448
+ 'on-secondary': string;
4441
4449
  };
4442
4450
  status: {
4443
4451
  success: StatusState;
package/dist/index.d.ts CHANGED
@@ -1608,6 +1608,7 @@ declare const rawSpaceData: {
1608
1608
  "56": string;
1609
1609
  "64": string;
1610
1610
  px: string;
1611
+ "1.5": string;
1611
1612
  };
1612
1613
  semantic: {
1613
1614
  padding: {
@@ -3763,6 +3764,7 @@ declare const allCategoryData: {
3763
3764
  "56": string;
3764
3765
  "64": string;
3765
3766
  px: string;
3767
+ "1.5": string;
3766
3768
  };
3767
3769
  semantic: {
3768
3770
  padding: {
@@ -4385,6 +4387,10 @@ interface AccentPrimaryState extends InteractiveState {
4385
4387
  intense: string;
4386
4388
  dim: string;
4387
4389
  }
4390
+ interface AccentSecondaryState extends InteractiveState {
4391
+ intense: string;
4392
+ dim: string;
4393
+ }
4388
4394
  interface StatusState extends BaseState {
4389
4395
  hover: string;
4390
4396
  pressed: string;
@@ -4437,7 +4443,9 @@ interface Semantic {
4437
4443
  };
4438
4444
  accent: {
4439
4445
  primary: AccentPrimaryState;
4446
+ secondary: AccentSecondaryState;
4440
4447
  'on-primary': string;
4448
+ 'on-secondary': string;
4441
4449
  };
4442
4450
  status: {
4443
4451
  success: StatusState;
package/dist/index.js CHANGED
@@ -62,7 +62,7 @@ var color_default = {
62
62
  "600": "#7E8597",
63
63
  "700": "#A2AABA",
64
64
  "800": "#C6D0DA",
65
- "900": "#ECF0F2",
65
+ "900": "#EAEDEE",
66
66
  "950": "#F3F6F8"
67
67
  },
68
68
  brand: {
@@ -139,7 +139,7 @@ var color_default = {
139
139
  "500": "#9975FF",
140
140
  "600": "#B296FF",
141
141
  "700": "#D4BAF4",
142
- "800": "#E9DBFB",
142
+ "800": "#E0CDF8",
143
143
  "900": "#F4EBFF",
144
144
  "950": "#F9F5FF"
145
145
  },
@@ -1657,7 +1657,8 @@ var space_default = {
1657
1657
  "48": "12rem",
1658
1658
  "56": "14rem",
1659
1659
  "64": "16rem",
1660
- px: "1px"
1660
+ px: "1px",
1661
+ "1.5": "0.375rem"
1661
1662
  },
1662
1663
  semantic: {
1663
1664
  padding: {
package/dist/index.mjs CHANGED
@@ -11,7 +11,7 @@ var color_default = {
11
11
  "600": "#7E8597",
12
12
  "700": "#A2AABA",
13
13
  "800": "#C6D0DA",
14
- "900": "#ECF0F2",
14
+ "900": "#EAEDEE",
15
15
  "950": "#F3F6F8"
16
16
  },
17
17
  brand: {
@@ -88,7 +88,7 @@ var color_default = {
88
88
  "500": "#9975FF",
89
89
  "600": "#B296FF",
90
90
  "700": "#D4BAF4",
91
- "800": "#E9DBFB",
91
+ "800": "#E0CDF8",
92
92
  "900": "#F4EBFF",
93
93
  "950": "#F9F5FF"
94
94
  },
@@ -1606,7 +1606,8 @@ var space_default = {
1606
1606
  "48": "12rem",
1607
1607
  "56": "14rem",
1608
1608
  "64": "16rem",
1609
- px: "1px"
1609
+ px: "1px",
1610
+ "1.5": "0.375rem"
1610
1611
  },
1611
1612
  semantic: {
1612
1613
  padding: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexus-cross/tokens",
3
- "version": "1.0.1-beta.1",
3
+ "version": "1.0.1",
4
4
  "description": "TO-NEXUS Design Tokens - 디자인 시스템 토큰 라이브러리",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/data/color.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "600": "#7E8597",
11
11
  "700": "#A2AABA",
12
12
  "800": "#C6D0DA",
13
- "900": "#ECF0F2",
13
+ "900": "#EAEDEE",
14
14
  "950": "#F3F6F8"
15
15
  },
16
16
  "brand": {
@@ -87,7 +87,7 @@
87
87
  "500": "#9975FF",
88
88
  "600": "#B296FF",
89
89
  "700": "#D4BAF4",
90
- "800": "#E9DBFB",
90
+ "800": "#E0CDF8",
91
91
  "900": "#F4EBFF",
92
92
  "950": "#F9F5FF"
93
93
  },
package/src/data/space.json CHANGED
@@ -18,7 +18,8 @@
18
18
  "48": "12rem",
19
19
  "56": "14rem",
20
20
  "64": "16rem",
21
- "px": "1px"
21
+ "px": "1px",
22
+ "1.5": "0.375rem"
22
23
  },
23
24
  "semantic": {
24
25
  "padding": {
package/README.md DELETED
@@ -1,197 +0,0 @@
1
- # @nexus-cross/tokens
2
-
3
- NEXUS 디자인 토큰 라이브러리 - 색상, 타이포그래피, 간격 등 디자인 토큰을 TypeScript/JavaScript로 제공합니다.
4
-
5
- ## 설치
6
-
7
- ```bash
8
- npm install @nexus-cross/tokens
9
- # or
10
- yarn add @nexus-cross/tokens
11
- # or
12
- pnpm add @nexus-cross/tokens
13
- ```
14
-
15
- ## 사용법
16
-
17
- ### 기본 사용 (getTheme)
18
-
19
- ```typescript
20
- import { getTheme, typography, spacing } from '@nexus-cross/tokens';
21
-
22
- // 테마 선택
23
- function App({ isDark }: { isDark: boolean }) {
24
- const { semantic, palette } = getTheme(isDark ? 'dark' : 'light');
25
-
26
- return (
27
- <div style={{
28
- backgroundColor: semantic.bg.default.base,
29
- color: semantic.text.primary.base,
30
- padding: spacing.md,
31
- }}>
32
- <h1 style={{
33
- fontSize: typography.heading.large.fontSize,
34
- color: semantic.accent.primary.base,
35
- }}>
36
- Hello NEXUS
37
- </h1>
38
- </div>
39
- );
40
- }
41
- ```
42
-
43
- ### Palette vs Semantic
44
-
45
- ```typescript
46
- // ❌ 나쁜 예: palette를 직접 사용 (UI 의미가 불명확)
47
- <div style={{ color: palette.neutral[900] }}>텍스트</div>
48
-
49
- // ✅ 좋은 예: semantic 색상 사용 (의미 기반, 테마 자동 적용)
50
- <div style={{ color: semantic.text.primary.base }}>텍스트</div>
51
- ```
52
-
53
- ### React Context를 이용한 테마 적용
54
-
55
- ```typescript
56
- import { createContext, useContext, useState, useEffect } from 'react';
57
- import { getTheme, type ColorMode, type Theme } from '@nexus-cross/tokens';
58
-
59
- const ThemeContext = createContext<{ theme: Theme; mode: ColorMode } | null>(null);
60
-
61
- export function ThemeProvider({ children }) {
62
- const [mode, setMode] = useState<ColorMode>('dark');
63
- const theme = getTheme(mode);
64
-
65
- return (
66
- <ThemeContext.Provider value={{ theme, mode, setMode }}>
67
- {children}
68
- </ThemeContext.Provider>
69
- );
70
- }
71
-
72
- export const useTheme = () => {
73
- const ctx = useContext(ThemeContext);
74
- if (!ctx) throw new Error('useTheme must be within ThemeProvider');
75
- return ctx;
76
- };
77
-
78
- // 사용
79
- function Button() {
80
- const { theme } = useTheme();
81
- return (
82
- <button style={{
83
- backgroundColor: theme.semantic.accent.primary.base,
84
- color: theme.semantic.accent['on-primary'],
85
- }}>
86
- 클릭
87
- </button>
88
- );
89
- }
90
- ```
91
-
92
- ## 구조
93
-
94
- ```
95
- @nexus-cross/tokens
96
- ├── data/ # SSOT JSON 데이터
97
- │ └── color.json # Semantic Mode-Aware 구조
98
- ├── palette # 테마 독립적 기본 색상 팔레트 (단일 값)
99
- │ ├── neutral # Gray scale
100
- │ ├── brand # 브랜드 색상
101
- │ ├── green # 상태 색상
102
- │ ├── red
103
- │ ├── yellow
104
- │ └── blue
105
- ├── themes # 테마별 semantic 색상
106
- │ ├── light # 라이트 테마 (createSemantic(palette, 'light'))
107
- │ └── dark # 다크 테마 (createSemantic(palette, 'dark'))
108
- ├── typography # 타이포그래피
109
- ├── spacing # 간격
110
- ├── shadows # 그림자
111
- └── breakpoints # 반응형 브레이크포인트
112
- ```
113
-
114
- ### Semantic Mode-Aware 구조
115
-
116
- **Primitive**는 순수 색상값만 가집니다 (mode 무관):
117
- ```typescript
118
- palette.brand[500] // #22C55E (항상 동일)
119
- palette.neutral[50] // #FAFAFA (항상 동일)
120
- ```
121
-
122
- **Semantic**에서 mode별로 다른 primitive를 참조합니다:
123
- ```typescript
124
- // color.json 구조
125
- {
126
- "semantic": {
127
- "text": {
128
- "primary": {
129
- "base": {
130
- "light": { "source": "neutral.950" }, // → #09090B
131
- "dark": { "source": "neutral.50" } // → #FAFAFA
132
- }
133
- }
134
- }
135
- }
136
- }
137
-
138
- // 사용 시
139
- const lightTheme = getTheme('light');
140
- lightTheme.semantic.text.primary.base // #09090B (어두운 색)
141
-
142
- const darkTheme = getTheme('dark');
143
- darkTheme.semantic.text.primary.base // #FAFAFA (밝은 색)
144
- ```
145
-
146
- ## API
147
-
148
- ### getTheme(mode: 'light' | 'dark')
149
-
150
- 지정된 mode의 테마를 반환합니다.
151
-
152
- ```typescript
153
- const { mode, palette, semantic } = getTheme('dark');
154
- ```
155
-
156
- ### palette
157
-
158
- 테마 독립적인 순수 색상값입니다.
159
-
160
- ```typescript
161
- import { palette } from '@nexus-cross/tokens';
162
-
163
- palette.neutral[500] // #71717A
164
- palette.brand[500] // #22C55E
165
- ```
166
-
167
- ### light, dark (Pre-built)
168
-
169
- 편의를 위한 미리 생성된 semantic 토큰입니다.
170
-
171
- ```typescript
172
- import { light, dark } from '@nexus-cross/tokens';
173
-
174
- // getTheme('light').semantic과 동일
175
- light.text.primary.base
176
- ```
177
-
178
- ## 개발
179
-
180
- ```bash
181
- # 빌드
182
- npm run build
183
-
184
- # 개발 모드 (watch)
185
- npm run dev
186
-
187
- # 타입 체크
188
- npm run type-check
189
- ```
190
-
191
- ## 문서
192
-
193
- 디자인 토큰의 상세 스펙은 [`../../docs/tokens/`](../../docs/tokens/) 디렉토리를 참고하세요.
194
-
195
- ## 라이선스
196
-
197
- ISC