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

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 (13) hide show
  1. package/dist/TOKENS.md +126 -117
  2. package/dist/company-vars.css +16 -10
  3. package/dist/company.css +16 -10
  4. package/dist/index.d.mts +8 -0
  5. package/dist/index.d.ts +8 -0
  6. package/dist/index.js +98 -97
  7. package/dist/index.mjs +98 -97
  8. package/package.json +2 -2
  9. package/scripts/postinstall.js +1 -1
  10. package/scripts/setup-cursor-rules.cjs +5 -5
  11. package/src/data/color.json +81 -81
  12. package/src/data/space.json +2 -1
  13. package/src/data/typography.json +15 -15
package/dist/TOKENS.md CHANGED
@@ -1,11 +1,11 @@
1
1
  # @nexus-cross/tokens — Design Token Reference
2
2
 
3
- > AI 코딩 어시스턴트를 위한 NEXUS 디자인 토큰 레퍼런스.
4
- > Tailwind v4 유틸리티 클래스와 CSS 변수를 포함합니다.
3
+ > NEXUS design token reference for AI coding assistants.
4
+ > Includes Tailwind v4 utility classes and CSS variables.
5
5
 
6
- ## 설치 및 사용
6
+ ## Installation & Usage
7
7
 
8
- ### Tailwind v4 (권장)
8
+ ### Tailwind v4 (Recommended)
9
9
  ```css
10
10
  @import "tailwindcss";
11
11
  @import "@nexus-cross/tokens/company.css";
@@ -19,7 +19,7 @@ module.exports = {
19
19
  };
20
20
  ```
21
21
 
22
- ### 순수 CSS (Tailwind 없이)
22
+ ### Plain CSS (without Tailwind)
23
23
  ```css
24
24
  @import "@nexus-cross/tokens/css";
25
25
  ```
@@ -31,90 +31,90 @@ const { semantic } = getTheme("dark");
31
31
  // semantic.bg.default.base → "#1E232E"
32
32
  ```
33
33
 
34
- ## Color Tokens (@theme → Tailwind 클래스)
34
+ ## Color Tokens (@theme → Tailwind Classes)
35
35
 
36
36
  ### Background
37
37
 
38
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
38
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
39
39
  |---|---|---|---|---|
40
- | `bg-bg-default` | `--color-bg-default` | 기본 배경 | `#FFFFFF` | `#1E232E` |
41
- | `bg-bg-subtle` | `--color-bg-subtle` | 미묘한 배경 | `#F3F6F8` | `#161A21` |
42
- | `bg-bg-strong` | `--color-bg-strong` | 강조 배경 | `#ECF0F2` | `#000000` |
40
+ | `bg-bg-default` | `--color-bg-default` | Default background | `#FFFFFF` | `#1E232E` |
41
+ | `bg-bg-subtle` | `--color-bg-subtle` | Subtle background | `#F3F6F8` | `#161A21` |
42
+ | `bg-bg-strong` | `--color-bg-strong` | Strong background | `#EAEDEE` | `#000000` |
43
43
 
44
44
  ### Surface
45
45
 
46
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
46
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
47
47
  |---|---|---|---|---|
48
- | `bg-surface-default` | `--color-surface-default` | 기본 표면 | `#FFFFFF` | `#1E232E` |
49
- | `bg-surface-default-dim` | `--color-surface-default-dim` | 기본 표면 - 딤 | `#F3F6F8` | `#161A21` |
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` |
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` |
56
- | `bg-surface-inverted` | `--color-surface-inverted` | 반전 표면 | `#161A21` | `#F3F6F8` |
48
+ | `bg-surface-default` | `--color-surface-default` | Default surface | `#FFFFFF` | `#1E232E` |
49
+ | `bg-surface-default-dim` | `--color-surface-default-dim` | Default surface - dim | `#F3F6F8` | `#161A21` |
50
+ | `bg-surface-default-hover` | `--color-surface-default-hover` | Default surface - hover | `#F3F6F8` | `#252B39` |
51
+ | `bg-surface-default-pressed` | `--color-surface-default-pressed` | Default surface - pressed | `#EAEDEE` | `#363B4C` |
52
+ | `bg-surface-default-disabled` | `--color-surface-default-disabled` | Default surface - disabled | `#EAEDEE` | `#363B4C` |
53
+ | `bg-surface-subtle` | `--color-surface-subtle` | Subtle surface | `#F3F6F8` | `#252B39` |
54
+ | `bg-surface-subtle-hover` | `--color-surface-subtle-hover` | Subtle surface - hover | `#EAEDEE` | `#363B4C` |
55
+ | `bg-surface-strong` | `--color-surface-strong` | Strong surface | `#EAEDEE` | `#363B4C` |
56
+ | `bg-surface-inverted` | `--color-surface-inverted` | Inverted surface | `#161A21` | `#F3F6F8` |
57
57
 
58
58
  ### Text
59
59
 
60
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
60
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
61
61
  |---|---|---|---|---|
62
- | `text-text-highlight` | `--color-text-highlight` | 강조 텍스트 | `#000000` | `#FFFFFF` |
63
- | `text-text-primary` | `--color-text-primary` | 주요 텍스트 | `#1E232E` | `#ECF0F2` |
64
- | `text-text-primary-hover` | `--color-text-primary-hover` | 주요 텍스트 - 호버 | `#000000` | `#FFFFFF` |
65
- | `text-text-primary-pressed` | `--color-text-primary-pressed` | 주요 텍스트 - 프레스 | `#000000` | `#FFFFFF` |
66
- | `text-text-secondary` | `--color-text-secondary` | 보조 텍스트 | `#7E8597` | `#A2AABA` |
67
- | `text-text-secondary-hover` | `--color-text-secondary-hover` | 보조 텍스트 - 호버 | `#3B4153` | `#C6D0DA` |
68
- | `text-text-secondary-pressed` | `--color-text-secondary-pressed` | 보조 텍스트 - 프레스 | `#3B4153` | `#C6D0DA` |
69
- | `text-text-tertiary` | `--color-text-tertiary` | 3차 텍스트 | `#7E8597` | `#7E8597` |
70
- | `text-text-tertiary-hover` | `--color-text-tertiary-hover` | 3차 텍스트 - 호버 | `#62697A` | `#A2AABA` |
71
- | `text-text-tertiary-pressed` | `--color-text-tertiary-pressed` | 3차 텍스트 - 프레스 | `#62697A` | `#A2AABA` |
72
- | `text-text-muted` | `--color-text-muted` | 약한 텍스트 | `#A2AABA` | `#62697A` |
73
- | `text-text-inverted` | `--color-text-inverted` | 반전 텍스트 | `#FFFFFF` | `#000000` |
62
+ | `text-text-highlight` | `--color-text-highlight` | Highlight text | `#000000` | `#FFFFFF` |
63
+ | `text-text-primary` | `--color-text-primary` | Primary text | `#1E232E` | `#EAEDEE` |
64
+ | `text-text-primary-hover` | `--color-text-primary-hover` | Primary text - hover | `#000000` | `#FFFFFF` |
65
+ | `text-text-primary-pressed` | `--color-text-primary-pressed` | Primary text - pressed | `#000000` | `#FFFFFF` |
66
+ | `text-text-secondary` | `--color-text-secondary` | Secondary text | `#7E8597` | `#A2AABA` |
67
+ | `text-text-secondary-hover` | `--color-text-secondary-hover` | Secondary text - hover | `#3B4153` | `#C6D0DA` |
68
+ | `text-text-secondary-pressed` | `--color-text-secondary-pressed` | Secondary text - pressed | `#3B4153` | `#C6D0DA` |
69
+ | `text-text-tertiary` | `--color-text-tertiary` | Tertiary text | `#7E8597` | `#7E8597` |
70
+ | `text-text-tertiary-hover` | `--color-text-tertiary-hover` | Tertiary text - hover | `#62697A` | `#A2AABA` |
71
+ | `text-text-tertiary-pressed` | `--color-text-tertiary-pressed` | Tertiary text - pressed | `#62697A` | `#A2AABA` |
72
+ | `text-text-muted` | `--color-text-muted` | Muted text | `#A2AABA` | `#62697A` |
73
+ | `text-text-inverted` | `--color-text-inverted` | Inverted text | `#FFFFFF` | `#000000` |
74
74
 
75
75
  ### Icon
76
76
 
77
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
77
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
78
78
  |---|---|---|---|---|
79
- | `text-icon-highlight` | `--color-icon-highlight` | 강조 아이콘 | `#000000` | `#FFFFFF` |
80
- | `text-icon-primary` | `--color-icon-primary` | 주요 아이콘 | `#1E232E` | `#ECF0F2` |
81
- | `text-icon-primary-hover` | `--color-icon-primary-hover` | 주요 아이콘 - 호버 | `#000000` | `#FFFFFF` |
82
- | `text-icon-primary-pressed` | `--color-icon-primary-pressed` | 주요 아이콘 - 프레스 | `#000000` | `#FFFFFF` |
83
- | `text-icon-secondary` | `--color-icon-secondary` | 보조 아이콘 | `#7E8597` | `#A2AABA` |
84
- | `text-icon-secondary-hover` | `--color-icon-secondary-hover` | 보조 아이콘 - 호버 | `#3B4153` | `#C6D0DA` |
85
- | `text-icon-secondary-pressed` | `--color-icon-secondary-pressed` | 보조 아이콘 - 프레스 | `#3B4153` | `#C6D0DA` |
86
- | `text-icon-tertiary` | `--color-icon-tertiary` | 3차 아이콘 | `#7E8597` | `#7E8597` |
87
- | `text-icon-tertiary-hover` | `--color-icon-tertiary-hover` | 3차 아이콘 - 호버 | `#62697A` | `#A2AABA` |
88
- | `text-icon-tertiary-pressed` | `--color-icon-tertiary-pressed` | 3차 아이콘 - 프레스 | `#62697A` | `#A2AABA` |
89
- | `text-icon-muted` | `--color-icon-muted` | 약한 아이콘 | `#A2AABA` | `#62697A` |
90
- | `text-icon-inverted` | `--color-icon-inverted` | 반전 아이콘 | `#FFFFFF` | `#000000` |
79
+ | `text-icon-highlight` | `--color-icon-highlight` | Highlight icon | `#000000` | `#FFFFFF` |
80
+ | `text-icon-primary` | `--color-icon-primary` | Primary icon | `#1E232E` | `#EAEDEE` |
81
+ | `text-icon-primary-hover` | `--color-icon-primary-hover` | Primary icon - hover | `#000000` | `#FFFFFF` |
82
+ | `text-icon-primary-pressed` | `--color-icon-primary-pressed` | Primary icon - pressed | `#000000` | `#FFFFFF` |
83
+ | `text-icon-secondary` | `--color-icon-secondary` | Secondary icon | `#7E8597` | `#A2AABA` |
84
+ | `text-icon-secondary-hover` | `--color-icon-secondary-hover` | Secondary icon - hover | `#3B4153` | `#C6D0DA` |
85
+ | `text-icon-secondary-pressed` | `--color-icon-secondary-pressed` | Secondary icon - pressed | `#3B4153` | `#C6D0DA` |
86
+ | `text-icon-tertiary` | `--color-icon-tertiary` | Tertiary icon | `#7E8597` | `#7E8597` |
87
+ | `text-icon-tertiary-hover` | `--color-icon-tertiary-hover` | Tertiary icon - hover | `#62697A` | `#A2AABA` |
88
+ | `text-icon-tertiary-pressed` | `--color-icon-tertiary-pressed` | Tertiary icon - pressed | `#62697A` | `#A2AABA` |
89
+ | `text-icon-muted` | `--color-icon-muted` | Muted icon | `#A2AABA` | `#62697A` |
90
+ | `text-icon-inverted` | `--color-icon-inverted` | Inverted icon | `#FFFFFF` | `#000000` |
91
91
 
92
92
  ### Border
93
93
 
94
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
94
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
95
95
  |---|---|---|---|---|
96
- | `border-border-default` | `--color-border-default` | 기본 테두리 | `#ECF0F2` | `#3B4153` |
97
- | `border-border-default-hover` | `--color-border-default-hover` | 기본 테두리 - 호버 | `#A2AABA` | `#62697A` |
98
- | `border-border-default-focus` | `--color-border-default-focus` | 기본 테두리 - 포커스 | `#62697A` | `#A2AABA` |
99
- | `border-border-subtle` | `--color-border-subtle` | 약한 테두리 | `#F3F6F8` | `#252B39` |
100
- | `border-border-medium` | `--color-border-medium` | 중간 테두리 | `#C6D0DA` | `#62697A` |
101
- | `border-border-strong` | `--color-border-strong` | 강한 테두리 | `#000000` | `#FFFFFF` |
96
+ | `border-border-default` | `--color-border-default` | Default border | `#EAEDEE` | `#3B4153` |
97
+ | `border-border-default-hover` | `--color-border-default-hover` | Default border - hover | `#A2AABA` | `#62697A` |
98
+ | `border-border-default-focus` | `--color-border-default-focus` | Default border - focus | `#62697A` | `#A2AABA` |
99
+ | `border-border-subtle` | `--color-border-subtle` | Subtle border | `#F3F6F8` | `#252B39` |
100
+ | `border-border-medium` | `--color-border-medium` | Medium border | `#C6D0DA` | `#62697A` |
101
+ | `border-border-strong` | `--color-border-strong` | Strong border | `#000000` | `#FFFFFF` |
102
102
 
103
103
  ### Accent
104
104
 
105
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
105
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
106
106
  |---|---|---|---|---|
107
- | `bg-accent-primary` | `--color-accent-primary` | 주요 액센트 | `#09B498` | `#00D5AA` |
108
- | `bg-accent-primary-hover` | `--color-accent-primary-hover` | 주요 액센트 - 호버 | `#07C6A6` | `#12DFB6` |
109
- | `bg-accent-primary-pressed` | `--color-accent-primary-pressed` | 주요 액센트 - 프레스 | `#0F947E` | `#07C6A6` |
110
- | `bg-accent-primary-disabled` | `--color-accent-primary-disabled` | 주요 액센트 - 비활성 | `#CDF4ED` | `#123F3C` |
111
- | `bg-accent-primary-focus` | `--color-accent-primary-focus` | 주요 액센트 - 포커스 | `#09B498` | `#07C6A6` |
112
- | `bg-accent-primary-intense` | `--color-accent-primary-intense` | 주요 액센트 - 강조 | `#0F947E` | `#12DFB6` |
113
- | `bg-accent-primary-dim` | `--color-accent-primary-dim` | 주요 액센트 - 딤 | `#83DCC9` | `#0F947E` |
114
- | `bg-accent-on-primary` | `--color-accent-on-primary` | 액센트 배경 위 전경색 | `#FFFFFF` | `#000000` |
107
+ | `bg-accent-primary` | `--color-accent-primary` | Primary accent | `#09B498` | `#00D5AA` |
108
+ | `bg-accent-primary-hover` | `--color-accent-primary-hover` | Primary accent - hover | `#07C6A6` | `#12DFB6` |
109
+ | `bg-accent-primary-pressed` | `--color-accent-primary-pressed` | Primary accent - pressed | `#0F947E` | `#07C6A6` |
110
+ | `bg-accent-primary-disabled` | `--color-accent-primary-disabled` | Primary accent - disabled | `#CDF4ED` | `#123F3C` |
111
+ | `bg-accent-primary-focus` | `--color-accent-primary-focus` | Primary accent - focus | `#09B498` | `#07C6A6` |
112
+ | `bg-accent-primary-intense` | `--color-accent-primary-intense` | Primary accent - intense | `#0F947E` | `#12DFB6` |
113
+ | `bg-accent-primary-dim` | `--color-accent-primary-dim` | Primary accent - dim | `#83DCC9` | `#0F947E` |
114
+ | `bg-accent-on-primary` | `--color-accent-on-primary` | Foreground on accent | `#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` |
@@ -123,44 +123,51 @@ const { semantic } = getTheme("dark");
123
123
 
124
124
  ### Status
125
125
 
126
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
126
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
127
127
  |---|---|---|---|---|
128
- | `bg-status-success` | `--color-status-success` | 성공 | `#00B784` | `#02D69C` |
129
- | `bg-status-success-hover` | `--color-status-success-hover` | 성공 - 호버 | `#00C890` | `#0BDFA5` |
130
- | `bg-status-success-pressed` | `--color-status-success-pressed` | 성공 - 프레스 | `#1B9674` | `#00C890` |
131
- | `bg-status-success-disabled` | `--color-status-success-disabled` | 성공 - 비활성 | `#CDF4EA` | `#0D4431` |
132
- | `bg-status-success-intense` | `--color-status-success-intense` | 성공 - 강조 | `#1B9674` | `#0BDFA5` |
133
- | `bg-status-success-dim` | `--color-status-success-dim` | 성공 - 딤 | `#9FECD7` | `#1B9674` |
134
- | `bg-status-warning` | `--color-status-warning` | 경고 | `#FF9D00` | `#FFAA00` |
135
- | `bg-status-warning-hover` | `--color-status-warning-hover` | 경고 - 호버 | `#FFAA00` | `#FF9D00` |
136
- | `bg-status-warning-pressed` | `--color-status-warning-pressed` | 경고 - 프레스 | `#F9C127` | `#F9C127` |
137
- | `bg-status-warning-disabled` | `--color-status-warning-disabled` | 경고 - 비활성 | `#FFF2D2` | `#4A3F2B` |
138
- | `bg-status-warning-intense` | `--color-status-warning-intense` | 경고 - 강조 | `#D9840C` | `#FFAA00` |
139
- | `bg-status-warning-dim` | `--color-status-warning-dim` | 경고 - 딤 | `#FFDB6E` | `#9F701A` |
140
- | `bg-status-danger` | `--color-status-danger` | 위험/오류 | `#DB0A2D` | `#DB0A2D` |
141
- | `bg-status-danger-hover` | `--color-status-danger-hover` | 위험/오류 - 호버 | `#E62848` | `#E62848` |
142
- | `bg-status-danger-pressed` | `--color-status-danger-pressed` | 위험/오류 - 프레스 | `#AF2239` | `#D20625` |
143
- | `bg-status-danger-disabled` | `--color-status-danger-disabled` | 위험/오류 - 비활성 | `#FDE8EB` | `#5B121E` |
144
- | `bg-status-danger-intense` | `--color-status-danger-intense` | 위험/오류 - 강조 | `#D20625` | `#EC3C56` |
145
- | `bg-status-danger-dim` | `--color-status-danger-dim` | 위험/오류 - 딤 | `#FFBBC4` | `#AF2239` |
146
- | `bg-status-danger-focus` | `--color-status-danger-focus` | 위험/오류 - 포커스 | `#E62848` | `#AF2239` |
147
- | `bg-status-info` | `--color-status-info` | 정보 | `#0095FF` | `#0095FF` |
148
- | `bg-status-info-hover` | `--color-status-info-hover` | 정보 - 호버 | `#20B1FF` | `#20B1FF` |
149
- | `bg-status-info-pressed` | `--color-status-info-pressed` | 정보 - 프레스 | `#1087FF` | `#1087FF` |
150
- | `bg-status-info-disabled` | `--color-status-info-disabled` | 정보 - 비활성 | `#CCEFFF` | `#143A67` |
151
- | `bg-status-info-intense` | `--color-status-info-intense` | 정보 - 강조 | `#1672D0` | `#20B1FF` |
152
- | `bg-status-info-dim` | `--color-status-info-dim` | 정보 - 딤 | `#92DDFF` | `#1672D0` |
128
+ | `bg-status-success` | `--color-status-success` | Success | `#00B784` | `#02D69C` |
129
+ | `bg-status-success-hover` | `--color-status-success-hover` | Success - hover | `#00C890` | `#0BDFA5` |
130
+ | `bg-status-success-pressed` | `--color-status-success-pressed` | Success - pressed | `#1B9674` | `#00C890` |
131
+ | `bg-status-success-disabled` | `--color-status-success-disabled` | Success - disabled | `#CDF4EA` | `#0D4431` |
132
+ | `bg-status-success-intense` | `--color-status-success-intense` | Success - intense | `#1B9674` | `#0BDFA5` |
133
+ | `bg-status-success-dim` | `--color-status-success-dim` | Success - dim | `#9FECD7` | `#1B9674` |
134
+ | `bg-status-warning` | `--color-status-warning` | Warning | `#FF9D00` | `#FFAA00` |
135
+ | `bg-status-warning-hover` | `--color-status-warning-hover` | Warning - hover | `#FFAA00` | `#FF9D00` |
136
+ | `bg-status-warning-pressed` | `--color-status-warning-pressed` | Warning - pressed | `#F9C127` | `#F9C127` |
137
+ | `bg-status-warning-disabled` | `--color-status-warning-disabled` | Warning - disabled | `#FFF2D2` | `#4A3F2B` |
138
+ | `bg-status-warning-intense` | `--color-status-warning-intense` | Warning - intense | `#D9840C` | `#FFAA00` |
139
+ | `bg-status-warning-dim` | `--color-status-warning-dim` | Warning - dim | `#FFDB6E` | `#9F701A` |
140
+ | `bg-status-danger` | `--color-status-danger` | Danger | `#DB0A2D` | `#DB0A2D` |
141
+ | `bg-status-danger-hover` | `--color-status-danger-hover` | Danger - hover | `#E62848` | `#E62848` |
142
+ | `bg-status-danger-pressed` | `--color-status-danger-pressed` | Danger - pressed | `#AF2239` | `#D20625` |
143
+ | `bg-status-danger-disabled` | `--color-status-danger-disabled` | Danger - disabled | `#FDE8EB` | `#5B121E` |
144
+ | `bg-status-danger-intense` | `--color-status-danger-intense` | Danger - intense | `#D20625` | `#EC3C56` |
145
+ | `bg-status-danger-dim` | `--color-status-danger-dim` | Danger - dim | `#FFBBC4` | `#AF2239` |
146
+ | `bg-status-danger-focus` | `--color-status-danger-focus` | Danger - focus | `#E62848` | `#AF2239` |
147
+ | `bg-status-info` | `--color-status-info` | Info | `#0095FF` | `#0095FF` |
148
+ | `bg-status-info-hover` | `--color-status-info-hover` | Info - hover | `#20B1FF` | `#20B1FF` |
149
+ | `bg-status-info-pressed` | `--color-status-info-pressed` | Info - pressed | `#1087FF` | `#1087FF` |
150
+ | `bg-status-info-disabled` | `--color-status-info-disabled` | Info - disabled | `#CCEFFF` | `#143A67` |
151
+ | `bg-status-info-intense` | `--color-status-info-intense` | Info - intense | `#1672D0` | `#20B1FF` |
152
+ | `bg-status-info-dim` | `--color-status-info-dim` | Info - dim | `#92DDFF` | `#1672D0` |
153
+
154
+ ### Overlay
155
+
156
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
157
+ |---|---|---|---|---|
158
+ | `bg-overlay-dim` | `--color-overlay-dim` | | `#000000` | `#000000` |
159
+ | `bg-overlay-light` | `--color-overlay-light` | | `#000000` | `#000000` |
153
160
 
154
161
  ### Static
155
162
 
156
- | Tailwind Class | CSS Variable | 용도 | Light | Dark |
163
+ | Tailwind Class | CSS Variable | Purpose | Light | Dark |
157
164
  |---|---|---|---|---|
158
- | `bg-static-white` | `--color-static-white` | 모드 불변 화이트 | `#FFFFFF` | `#FFFFFF` |
159
- | `bg-static-black` | `--color-static-black` | 모드 불변 블랙 | `#000000` | `#000000` |
165
+ | `bg-static-white` | `--color-static-white` | Static white | `#FFFFFF` | `#FFFFFF` |
166
+ | `bg-static-black` | `--color-static-black` | Static black | `#000000` | `#000000` |
160
167
 
161
168
  ### Shadow
162
169
 
163
- | Tailwind Class | CSS Variable | 값 |
170
+ | Tailwind Class | CSS Variable | Value |
164
171
  |---|---|---|
165
172
  | `shadow-none` | `--shadow-none` | `none` |
166
173
  | `shadow-sm` | `--shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.12)` |
@@ -171,7 +178,7 @@ const { semantic } = getTheme("dark");
171
178
 
172
179
  ### Radius
173
180
 
174
- | Tailwind Class | CSS Variable | 값 |
181
+ | Tailwind Class | CSS Variable | Value |
175
182
  |---|---|---|
176
183
  | `rounded-corner-none` | `--radius-corner-none` | `0px` |
177
184
  | `rounded-corner-sm` | `--radius-corner-sm` | `4px` |
@@ -183,7 +190,7 @@ const { semantic } = getTheme("dark");
183
190
 
184
191
  ### Breakpoint
185
192
 
186
- | Tailwind Class | CSS Variable | 값 |
193
+ | Tailwind Class | CSS Variable | Value |
187
194
  |---|---|---|
188
195
  | `var(--breakpoint-screen-xs)` | `--breakpoint-screen-xs` | `320px` |
189
196
  | `var(--breakpoint-screen-sm)` | `--breakpoint-screen-sm` | `640px` |
@@ -194,7 +201,7 @@ const { semantic } = getTheme("dark");
194
201
 
195
202
  ### Typography
196
203
 
197
- | Tailwind Class | CSS Variable | 값 |
204
+ | Tailwind Class | CSS Variable | Value |
198
205
  |---|---|---|
199
206
  | `text-text-xs` | `--text-text-xs` | `0.75rem` |
200
207
  | `text-text-sm` | `--text-text-sm` | `0.875rem` |
@@ -230,7 +237,7 @@ const { semantic } = getTheme("dark");
230
237
 
231
238
  ### Easing
232
239
 
233
- | Tailwind Class | CSS Variable | 값 |
240
+ | Tailwind Class | CSS Variable | Value |
234
241
  |---|---|---|
235
242
  | `ease-transition-instant` | `--ease-transition-instant` | `linear` |
236
243
  | `ease-transition-fast` | `--ease-transition-fast` | `cubic-bezier(0, 0, 0.2, 1)` |
@@ -240,11 +247,11 @@ const { semantic } = getTheme("dark");
240
247
  | `ease-animation-exit` | `--ease-animation-exit` | `cubic-bezier(0.4, 0, 1, 1)` |
241
248
  | `ease-animation-bounce` | `--ease-animation-bounce` | `cubic-bezier(0.175, 0.885, 0.32, 1.275)` |
242
249
 
243
- ## Foundation Tokens (:root → var()로 사용)
250
+ ## Foundation Tokens (:root → use with var())
244
251
 
245
252
  ### Spacing
246
253
 
247
- | CSS Variable | 값 | 사용 예시 |
254
+ | CSS Variable | Value | Example |
248
255
  |---|---|---|
249
256
  | `--spacing-padding-none` | `0` | `spacing-padding: var(--spacing-padding-none)` |
250
257
  | `--spacing-padding-2xs` | `0.25rem` | `spacing-padding: var(--spacing-padding-2xs)` |
@@ -263,16 +270,18 @@ const { semantic } = getTheme("dark");
263
270
 
264
271
  ### Border Width
265
272
 
266
- | CSS Variable | 값 | 사용 예시 |
273
+ | CSS Variable | Value | Example |
267
274
  |---|---|---|
268
275
  | `--border-width-stroke-none` | `0px` | `border-width: var(--border-width-stroke-none)` |
276
+ | `--border-width-stroke-hairline` | `0.5px` | `border-width: var(--border-width-stroke-hairline)` |
269
277
  | `--border-width-stroke-thin` | `1px` | `border-width: var(--border-width-stroke-thin)` |
270
278
  | `--border-width-stroke-default` | `1px` | `border-width: var(--border-width-stroke-default)` |
279
+ | `--border-width-stroke-thick` | `1.5px` | `border-width: var(--border-width-stroke-thick)` |
271
280
  | `--border-width-stroke-heavy` | `2px` | `border-width: var(--border-width-stroke-heavy)` |
272
281
 
273
282
  ### Opacity
274
283
 
275
- | CSS Variable | 값 | 사용 예시 |
284
+ | CSS Variable | Value | Example |
276
285
  |---|---|---|
277
286
  | `--opacity-overlay-dim` | `0.5` | `opacity-overlay: var(--opacity-overlay-dim)` |
278
287
  | `--opacity-overlay-light` | `0.3` | `opacity-overlay: var(--opacity-overlay-light)` |
@@ -286,7 +295,7 @@ const { semantic } = getTheme("dark");
286
295
 
287
296
  ### Size
288
297
 
289
- | CSS Variable | 값 | 사용 예시 |
298
+ | CSS Variable | Value | Example |
290
299
  |---|---|---|
291
300
  | `--size-icon-xs` | `12px` | `size-icon: var(--size-icon-xs)` |
292
301
  | `--size-icon-sm` | `16px` | `size-icon: var(--size-icon-sm)` |
@@ -307,7 +316,7 @@ const { semantic } = getTheme("dark");
307
316
 
308
317
  ### Z-Index
309
318
 
310
- | CSS Variable | 값 | 사용 예시 |
319
+ | CSS Variable | Value | Example |
311
320
  |---|---|---|
312
321
  | `--z-index-layer-base` | `0` | `z-index: var(--z-index-layer-base)` |
313
322
  | `--z-index-layer-dropdown` | `10` | `z-index: var(--z-index-layer-dropdown)` |
@@ -319,7 +328,7 @@ const { semantic } = getTheme("dark");
319
328
 
320
329
  ### Duration
321
330
 
322
- | CSS Variable | 값 | 사용 예시 |
331
+ | CSS Variable | Value | Example |
323
332
  |---|---|---|
324
333
  | `--duration-transition-instant` | `0ms` | `duration-transition: var(--duration-transition-instant)` |
325
334
  | `--duration-transition-fast` | `150ms` | `duration-transition: var(--duration-transition-fast)` |
@@ -331,7 +340,7 @@ const { semantic } = getTheme("dark");
331
340
 
332
341
  ### Font Weight
333
342
 
334
- | CSS Variable | 값 | 사용 예시 |
343
+ | CSS Variable | Value | Example |
335
344
  |---|---|---|
336
345
  | `--font-weight-text-xs` | `400` | `font-weight: var(--font-weight-text-xs)` |
337
346
  | `--font-weight-text-sm` | `400` | `font-weight: var(--font-weight-text-sm)` |
@@ -367,7 +376,7 @@ const { semantic } = getTheme("dark");
367
376
 
368
377
  ### Letter Spacing
369
378
 
370
- | CSS Variable | 값 | 사용 예시 |
379
+ | CSS Variable | Value | Example |
371
380
  |---|---|---|
372
381
  | `--letter-spacing-text-xs` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-xs)` |
373
382
  | `--letter-spacing-text-sm` | `-0.01em` | `letter-spacing: var(--letter-spacing-text-sm)` |
@@ -401,15 +410,15 @@ const { semantic } = getTheme("dark");
401
410
  | `--letter-spacing-label-semibold-md` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-md)` |
402
411
  | `--letter-spacing-label-semibold-lg` | `0` | `letter-spacing: var(--letter-spacing-label-semibold-lg)` |
403
412
 
404
- ## 사용 가이드라인
405
-
406
- - **배경색**: `bg-bg-*` 또는 `bg-surface-*` 사용
407
- - **텍스트**: `text-text-*` 사용
408
- - **아이콘**: `text-icon-*` 사용
409
- - **테두리**: `border-border-*` 사용
410
- - **강조/CTA**: `bg-accent-*`, `text-accent-*` 사용
411
- - **상태 표시**: `text-status-*`, `bg-status-*` 사용
412
- - **다크모드**: `.dark` 클래스 토글로 CSS 자동 전환
413
- - **간격**: `p-[var(--spacing-padding-md)]`, `gap-[var(--spacing-gap-sm)]`
414
- - **크기**: `w-[var(--size-icon-md)]`, `h-[var(--size-control-lg)]`
413
+ ## Usage Guidelines
414
+
415
+ - **Background**: use `bg-bg-*` or `bg-surface-*`
416
+ - **Text**: use `text-text-*`
417
+ - **Icon**: use `text-icon-*`
418
+ - **Border**: use `border-border-*`
419
+ - **Accent/CTA**: use `bg-accent-*`, `text-accent-*`
420
+ - **Status**: use `text-status-*`, `bg-status-*`
421
+ - **Dark mode**: toggle via `.dark` class for automatic CSS switching
422
+ - **Spacing**: `p-[var(--spacing-padding-md)]`, `gap-[var(--spacing-gap-sm)]`
423
+ - **Size**: `w-[var(--size-icon-md)]`, `h-[var(--size-control-lg)]`
415
424
  - **z-index**: `z-[var(--z-index-layer-modal)]`
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-27T06:49:02.455Z
5
+ * 생성일: 2026-04-02T03:51:10.797Z
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;
@@ -89,6 +89,8 @@
89
89
  --color-status-info-disabled: #CCEFFF;
90
90
  --color-status-info-intense: #1672D0;
91
91
  --color-status-info-dim: #92DDFF;
92
+ --color-overlay-dim: #000000;
93
+ --color-overlay-light: #000000;
92
94
  --color-static-white: #FFFFFF;
93
95
  --color-static-black: #000000;
94
96
  --shadow-none: none;
@@ -194,8 +196,10 @@
194
196
  --spacing-gap-lg: 1.5rem;
195
197
  --spacing-gap-xl: 2rem;
196
198
  --border-width-stroke-none: 0px;
199
+ --border-width-stroke-hairline: 0.5px;
197
200
  --border-width-stroke-thin: 1px;
198
201
  --border-width-stroke-default: 1px;
202
+ --border-width-stroke-thick: 1.5px;
199
203
  --border-width-stroke-heavy: 2px;
200
204
  --opacity-overlay-dim: 0.5;
201
205
  --opacity-overlay-light: 0.3;
@@ -314,7 +318,7 @@
314
318
  --color-surface-strong: #363B4C;
315
319
  --color-surface-inverted: #F3F6F8;
316
320
  --color-text-highlight: #FFFFFF;
317
- --color-text-primary: #ECF0F2;
321
+ --color-text-primary: #EAEDEE;
318
322
  --color-text-primary-hover: #FFFFFF;
319
323
  --color-text-primary-pressed: #FFFFFF;
320
324
  --color-text-secondary: #A2AABA;
@@ -326,7 +330,7 @@
326
330
  --color-text-muted: #62697A;
327
331
  --color-text-inverted: #000000;
328
332
  --color-icon-highlight: #FFFFFF;
329
- --color-icon-primary: #ECF0F2;
333
+ --color-icon-primary: #EAEDEE;
330
334
  --color-icon-primary-hover: #FFFFFF;
331
335
  --color-icon-primary-pressed: #FFFFFF;
332
336
  --color-icon-secondary: #A2AABA;
@@ -384,6 +388,8 @@
384
388
  --color-status-info-disabled: #143A67;
385
389
  --color-status-info-intense: #20B1FF;
386
390
  --color-status-info-dim: #1672D0;
391
+ --color-overlay-dim: #000000;
392
+ --color-overlay-light: #000000;
387
393
  --color-static-white: #FFFFFF;
388
394
  --color-static-black: #000000;
389
395
  --shadow-none: none;
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-27T06:49:02.453Z
4
+ * 생성일: 2026-04-02T03:51:10.795Z
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;
@@ -91,6 +91,8 @@
91
91
  --color-status-info-disabled: #CCEFFF;
92
92
  --color-status-info-intense: #1672D0;
93
93
  --color-status-info-dim: #92DDFF;
94
+ --color-overlay-dim: #000000;
95
+ --color-overlay-light: #000000;
94
96
  --color-static-white: #FFFFFF;
95
97
  --color-static-black: #000000;
96
98
  --shadow-none: none;
@@ -199,8 +201,10 @@
199
201
  --spacing-gap-lg: 1.5rem;
200
202
  --spacing-gap-xl: 2rem;
201
203
  --border-width-stroke-none: 0px;
204
+ --border-width-stroke-hairline: 0.5px;
202
205
  --border-width-stroke-thin: 1px;
203
206
  --border-width-stroke-default: 1px;
207
+ --border-width-stroke-thick: 1.5px;
204
208
  --border-width-stroke-heavy: 2px;
205
209
  --opacity-overlay-dim: 0.5;
206
210
  --opacity-overlay-light: 0.3;
@@ -319,7 +323,7 @@
319
323
  --color-surface-strong: #363B4C;
320
324
  --color-surface-inverted: #F3F6F8;
321
325
  --color-text-highlight: #FFFFFF;
322
- --color-text-primary: #ECF0F2;
326
+ --color-text-primary: #EAEDEE;
323
327
  --color-text-primary-hover: #FFFFFF;
324
328
  --color-text-primary-pressed: #FFFFFF;
325
329
  --color-text-secondary: #A2AABA;
@@ -331,7 +335,7 @@
331
335
  --color-text-muted: #62697A;
332
336
  --color-text-inverted: #000000;
333
337
  --color-icon-highlight: #FFFFFF;
334
- --color-icon-primary: #ECF0F2;
338
+ --color-icon-primary: #EAEDEE;
335
339
  --color-icon-primary-hover: #FFFFFF;
336
340
  --color-icon-primary-pressed: #FFFFFF;
337
341
  --color-icon-secondary: #A2AABA;
@@ -389,6 +393,8 @@
389
393
  --color-status-info-disabled: #143A67;
390
394
  --color-status-info-intense: #20B1FF;
391
395
  --color-status-info-dim: #1672D0;
396
+ --color-overlay-dim: #000000;
397
+ --color-overlay-light: #000000;
392
398
  --color-static-white: #FFFFFF;
393
399
  --color-static-black: #000000;
394
400
  --shadow-none: none;
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;