@nexus-cross/tokens 1.0.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 (10) hide show
  1. package/dist/TOKENS.md +125 -116
  2. package/dist/company-vars.css +7 -1
  3. package/dist/company.css +7 -1
  4. package/dist/index.js +94 -94
  5. package/dist/index.mjs +94 -94
  6. package/package.json +2 -2
  7. package/scripts/postinstall.js +1 -1
  8. package/scripts/setup-cursor-rules.cjs +5 -5
  9. package/src/data/color.json +79 -79
  10. 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,87 +31,87 @@ 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` | 강조 배경 | `#EAEDEE` | `#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` | 기본 표면 - 프레스 | `#EAEDEE` | `#363B4C` |
52
- | `bg-surface-default-disabled` | `--color-surface-default-disabled` | 기본 표면 - 비활성 | `#EAEDEE` | `#363B4C` |
53
- | `bg-surface-subtle` | `--color-surface-subtle` | 미묘한 표면 | `#F3F6F8` | `#252B39` |
54
- | `bg-surface-subtle-hover` | `--color-surface-subtle-hover` | 미묘한 표면 - 호버 | `#EAEDEE` | `#363B4C` |
55
- | `bg-surface-strong` | `--color-surface-strong` | 강조 표면 | `#EAEDEE` | `#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` | `#EAEDEE` |
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` | `#EAEDEE` |
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` | 기본 테두리 | `#EAEDEE` | `#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
117
  | `bg-accent-secondary-dim` | `--color-accent-secondary-dim` | | `#E0CDF8` | `#7346F3` |
@@ -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,7 +2,7 @@
2
2
  * Company CSS — 순수 CSS 변수 (:root + .dark)
3
3
  * Tailwind 없이 var(--*) 로 사용 가능
4
4
  * 자동 생성: scripts/generate-css.js
5
- * 생성일: 2026-04-01T08:12:46.886Z
5
+ * 생성일: 2026-04-02T03:51:10.797Z
6
6
  */
7
7
 
8
8
  :root {
@@ -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;
@@ -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-04-01T08:12:46.884Z
4
+ * 생성일: 2026-04-02T03:51:10.795Z
5
5
  *
6
6
  * @theme: Tailwind 유틸리티 클래스 자동 생성
7
7
  * :root: 순수 CSS 변수 (var()로 직접 사용)
@@ -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;
@@ -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;