@gbgr/tokens 0.0.1 → 0.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 (5) hide show
  1. package/README.md +1 -1
  2. package/dist/theme.dark.css +187 -137
  3. package/dist/theme.light.css +1 -1
  4. package/dist/tokens.base.css +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -55,6 +55,6 @@ const myColor: Tokens['color']['semantic']['brand']['primary']['value'] = '#ffbf
55
55
  ## 언제 사용하나요?
56
56
 
57
57
  - **JSON/TypeScript 타입이 필요한 경우**: 런타임에 토큰 값을 사용하거나 타입 체크가 필요할 때
58
- - **CSS 변수만 필요하고 Reset은 불필요한 경우**: 기존 프로젝트에 토큰만 추가하거나 자체 Reset을 사용하는 경우
58
+ - **CSS 변수만 필요한 경우**: 기존 프로젝트에 토큰만 추가하거나 자체 전역 스타일 체계를 사용하는 경우
59
59
  - **특정 테마 파일만 필요한 경우**: `theme.css`, `theme.light.css`, `theme.dark.css` 등 특정 파일만 import할 때
60
60
  - **다른 패키지에서 내부적으로 사용**: 컴포넌트 라이브러리 개발 시 내부적으로 토큰 값을 참조해야 할 때
package/dist/theme.dark.css CHANGED
@@ -1,148 +1,198 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Feb 2026 04:01:51 GMT
3
+ * Generated on Tue, 10 Feb 2026 21:26:53 GMT
4
4
  */
5
5
 
6
6
  :root[data-theme="dark"], [data-theme="dark"] {
7
- --color-global-grey-0: #ffffff;
8
- --color-global-grey-25: #f9f8f7;
9
- --color-global-grey-50: #efeeed;
10
- --color-global-grey-100: #e3e1df;
11
- --color-global-grey-200: #c6c5c3;
12
- --color-global-grey-300: #a8a7a4;
13
- --color-global-grey-500: #6a6966;
14
- --color-global-grey-600: #3c3b3a;
15
- --color-global-grey-700: #2c2c2c;
16
- --color-global-grey-800: #212121;
17
- --color-global-grey-900: #181817;
18
- --color-global-grey-950: #141413;
19
- --color-global-grey-1000: #000000;
20
- --color-global-yellow-50: #fff9e6;
21
- --color-global-yellow-100: #ffebb0;
22
- --color-global-yellow-200: #ffe28a;
23
- --color-global-yellow-300: #ffd454;
24
- --color-global-yellow-400: #ffcb31;
25
- --color-global-yellow-500: #ffbf00;
26
- --color-global-yellow-600: #e8ae00;
27
- --color-global-yellow-700: #d29a00;
28
- --color-global-yellow-800: #bd8700;
29
- --color-global-yellow-900: #a67100;
30
- --color-semantic-brand-primary: #ffbf00;
31
- --color-semantic-notification-success: #67b000;
32
- --color-semantic-notification-error: #ff351f;
33
- --color-component-button-base-bg-primary-default: #ffcb31;
34
- --color-component-button-base-bg-primary-hover: #ffbf00;
35
- --color-component-button-base-bg-primary-pressed: #e8ae00;
36
- --color-component-button-base-bg-primary-disabled: #ffebb0;
37
- --color-component-button-base-bg-sub-pressed: #ffe28a;
38
- --color-component-button-base-bg-sub-hover: #ffebb0;
39
- --color-component-button-base-bg-sub-default: #fff9e6;
40
- --color-component-button-base-bg-grey-disabled: #f9f8f7;
41
- --color-component-button-base-bg-grey-default: #f9f8f7;
42
- --color-component-button-base-bg-grey-hover: #efeeed;
43
- --color-component-button-base-bg-grey-pressed: #e3e1df;
44
- --color-component-button-base-icon-primary-default: #000000;
45
- --color-component-button-base-icon-primary-disabled: #ffffff;
46
- --color-component-button-base-icon-grey-disabled: #e3e1df;
47
- --color-component-button-base-icon-grey-default: #7e7e7b;
48
- --color-component-button-base-icon-sub-disabled: #efeeed;
49
- --color-component-button-base-icon-sub-default: #ffbf00;
50
- --color-component-button-base-icon-sub-pressed: #e8ae00;
51
- --color-component-button-base-text-primary-default: #000000;
52
- --color-component-button-base-text-primary-disabled: #ffffff;
53
- --color-component-button-base-text-grey-default: #6a6966;
54
- --color-component-button-base-text-grey-disabled: #e3e1df;
55
- --color-component-button-base-text-sub-disabled: #efeeed;
56
- --color-component-button-base-text-sub-default: #ffbf00;
57
- --color-component-button-base-text-sub-pressed: #e8ae00;
58
- --color-component-basic-dashboard-graph-gradation: #ffebb0;
59
- --color-component-basic-dashboard-score-line: #ffbf00;
60
- --color-component-basic-dashboard-score-border: #ffe28a;
61
- --color-component-basic-dashboard-score-surface: #ffffff;
62
- --color-component-basic-dashboard-score-dot-bg: #ffffff;
63
- --color-component-basic-dashboard-score-dot-border: #ffbf00;
64
- --color-component-basic-widget-handle: #c6c5c3;
65
- --color-surface-modal-bg: #ffffff;
66
- --color-surface-modal-container: #f9f8f7;
67
- --text-disabled: #e3e1df;
68
- --text-default: #181817;
69
- --border-depth1: #f9f8f7;
70
- --border-depth3: #e3e1df;
71
- --border-depth2: #efeeed;
72
- --border-depth0: #ffffff;
73
- --border-active: #ffbf00;
74
- --dim-default: #00000066;
7
+ --color-global-grey-0: #191917;
8
+ --color-global-grey-25: #131312;
9
+ --color-global-grey-50: #232323;
10
+ --color-global-grey-100: #2c2c2c;
11
+ --color-global-grey-200: #3c3b3a;
12
+ --color-global-grey-300: #6a6966;
13
+ --color-global-grey-500: #a8a7a4;
14
+ --color-global-grey-600: #c6c5c3;
15
+ --color-global-grey-700: #e3e1df;
16
+ --color-global-grey-800: #efeeed;
17
+ --color-global-grey-900: #f9f8f7;
18
+ --color-global-grey-950: #fcfcfc;
19
+ --color-global-grey-1000: #ffffff;
20
+ --color-global-yellow-50: #493704;
21
+ --color-global-yellow-100: #795706;
22
+ --color-global-yellow-200: #a57909;
23
+ --color-global-yellow-300: #cb980b;
24
+ --color-global-yellow-400: #e9b20c;
25
+ --color-global-yellow-500: #f5c73d;
26
+ --color-global-yellow-600: #f7d364;
27
+ --color-global-yellow-700: #f9da86;
28
+ --color-global-yellow-800: #fae19e;
29
+ --color-global-yellow-900: #fbe7bb;
30
+ --color-semantic-brand-primary: #e9b20c;
31
+ --color-semantic-point-olive-green: #839400;
32
+ --color-semantic-point-coral-red: #f15232;
33
+ --color-semantic-notification-success: #477d00;
34
+ --color-semantic-notification-error: #c92504;
35
+ --color-semantic-gradation-point-1: #ebb30a;
36
+ --color-semantic-gradation-point-2: #ffd133;
37
+ --color-semantic-gradation-point-3: #ffe88d;
38
+ --color-component-button-base-bg-primary-default: #e9b20c;
39
+ --color-component-button-base-bg-primary-hover: #f5c73d;
40
+ --color-component-button-base-bg-primary-pressed: #f7d364;
41
+ --color-component-button-base-bg-primary-disabled: rgba(73, 55, 4, 0.5);
42
+ --color-component-button-base-bg-sub-pressed: #a57909;
43
+ --color-component-button-base-bg-sub-hover: #795706;
44
+ --color-component-button-base-bg-sub-default: #493704;
45
+ --color-component-button-base-bg-grey-disabled: #232323;
46
+ --color-component-button-base-bg-grey-default: #232323;
47
+ --color-component-button-base-bg-grey-hover: #2c2c2c;
48
+ --color-component-button-base-bg-grey-pressed: #3c3b3a;
49
+ --color-component-button-base-icon-primary-default: #191917;
50
+ --color-component-button-base-icon-primary-disabled: #493704;
51
+ --color-component-button-base-icon-grey-disabled: #3c3b3a;
52
+ --color-component-button-base-icon-grey-default: #a8a7a4;
53
+ --color-component-button-base-icon-sub-disabled: #2c2c2c;
54
+ --color-component-button-base-icon-sub-default: #f5c73d;
55
+ --color-component-button-base-icon-sub-pressed: #f7d364;
56
+ --color-component-button-base-text-primary-default: #191917;
57
+ --color-component-button-base-text-primary-disabled: #493704;
58
+ --color-component-button-base-text-grey-default: #c6c5c3;
59
+ --color-component-button-base-text-grey-disabled: #3c3b3a;
60
+ --color-component-button-base-text-sub-disabled: #2c2c2c;
61
+ --color-component-button-base-text-sub-default: #f5c73d;
62
+ --color-component-button-base-text-sub-pressed: #f7d364;
63
+ --color-component-button-mode-change-bg: #232323;
64
+ --color-component-button-mode-change-thumb-on: #232323;
65
+ --color-component-button-mode-change-thumb-off: #e9b20c;
66
+ --color-component-button-mode-change-switch-on: #6a6966;
67
+ --color-component-button-mode-change-switch-off: #191917;
68
+ --color-component-button-toggle-switch-bg-primary: #131312;
69
+ --color-component-button-toggle-switch-bg-default: #232323;
70
+ --color-component-button-toggle-switch-selected-primary: #e9b20c;
71
+ --color-component-button-toggle-switch-selected-default: #2c2c2c;
72
+ --color-component-button-toggle-active-disabled: #a8a7a4;
73
+ --color-component-button-cam-activation-icon-disabled: #3c3b3a;
74
+ --color-component-button-cam-activation-icon-hover: #e3e1df;
75
+ --color-component-button-cam-activation-icon-default: #a8a7a4;
76
+ --color-component-button-cam-activation-bg-default: #2c2c2c;
77
+ --color-component-button-cam-activation-bg-hover: #131312;
78
+ --color-component-button-cam-activation-bg-disabled: #2c2c2c;
79
+ --color-component-basic-dashboard-graph-bg-line: #232323;
80
+ --color-component-basic-dashboard-graph-gradation: #493704;
81
+ --color-component-basic-dashboard-level-stepper-surface: rgba(160, 119, 13, 0.4);
82
+ --color-component-basic-dashboard-score-line: #ffffff;
83
+ --color-component-basic-dashboard-score-border: #2c2c2c;
84
+ --color-component-basic-dashboard-score-surface: #131312;
85
+ --color-component-basic-dashboard-score-dot-bg: #f5c73d;
86
+ --color-component-basic-dashboard-score-dot-border: #ffffff;
87
+ --color-component-basic-widget-handle: #6a6966;
88
+ --color-surface-modal-bg: #131312;
89
+ --color-surface-modal-container: #191917;
90
+ --color-surface-scroll-bar: #131312;
91
+ --color-surface-toast-bar: #fcfcfc;
92
+ --text-disabled: #2c2c2c;
93
+ --text-default: #e3e1df;
94
+ --border-depth1: #131312;
95
+ --border-depth3: #2c2c2c;
96
+ --border-depth2: #232323;
97
+ --border-depth0: #191917;
98
+ --border-active: #e9b20c;
99
+ --dim-default: #000000b3;
75
100
  }
76
101
 
77
102
  @media (prefers-color-scheme: dark) {
78
103
  :root:not([data-theme]) {
79
- --color-global-grey-0: #ffffff;
80
- --color-global-grey-25: #f9f8f7;
81
- --color-global-grey-50: #efeeed;
82
- --color-global-grey-100: #e3e1df;
83
- --color-global-grey-200: #c6c5c3;
84
- --color-global-grey-300: #a8a7a4;
85
- --color-global-grey-500: #6a6966;
86
- --color-global-grey-600: #3c3b3a;
87
- --color-global-grey-700: #2c2c2c;
88
- --color-global-grey-800: #212121;
89
- --color-global-grey-900: #181817;
90
- --color-global-grey-950: #141413;
91
- --color-global-grey-1000: #000000;
92
- --color-global-yellow-50: #fff9e6;
93
- --color-global-yellow-100: #ffebb0;
94
- --color-global-yellow-200: #ffe28a;
95
- --color-global-yellow-300: #ffd454;
96
- --color-global-yellow-400: #ffcb31;
97
- --color-global-yellow-500: #ffbf00;
98
- --color-global-yellow-600: #e8ae00;
99
- --color-global-yellow-700: #d29a00;
100
- --color-global-yellow-800: #bd8700;
101
- --color-global-yellow-900: #a67100;
102
- --color-semantic-brand-primary: #ffbf00;
103
- --color-semantic-notification-success: #67b000;
104
- --color-semantic-notification-error: #ff351f;
105
- --color-component-button-base-bg-primary-default: #ffcb31;
106
- --color-component-button-base-bg-primary-hover: #ffbf00;
107
- --color-component-button-base-bg-primary-pressed: #e8ae00;
108
- --color-component-button-base-bg-primary-disabled: #ffebb0;
109
- --color-component-button-base-bg-sub-pressed: #ffe28a;
110
- --color-component-button-base-bg-sub-hover: #ffebb0;
111
- --color-component-button-base-bg-sub-default: #fff9e6;
112
- --color-component-button-base-bg-grey-disabled: #f9f8f7;
113
- --color-component-button-base-bg-grey-default: #f9f8f7;
114
- --color-component-button-base-bg-grey-hover: #efeeed;
115
- --color-component-button-base-bg-grey-pressed: #e3e1df;
116
- --color-component-button-base-icon-primary-default: #000000;
117
- --color-component-button-base-icon-primary-disabled: #ffffff;
118
- --color-component-button-base-icon-grey-disabled: #e3e1df;
119
- --color-component-button-base-icon-grey-default: #7e7e7b;
120
- --color-component-button-base-icon-sub-disabled: #efeeed;
121
- --color-component-button-base-icon-sub-default: #ffbf00;
122
- --color-component-button-base-icon-sub-pressed: #e8ae00;
123
- --color-component-button-base-text-primary-default: #000000;
124
- --color-component-button-base-text-primary-disabled: #ffffff;
125
- --color-component-button-base-text-grey-default: #6a6966;
126
- --color-component-button-base-text-grey-disabled: #e3e1df;
127
- --color-component-button-base-text-sub-disabled: #efeeed;
128
- --color-component-button-base-text-sub-default: #ffbf00;
129
- --color-component-button-base-text-sub-pressed: #e8ae00;
130
- --color-component-basic-dashboard-graph-gradation: #ffebb0;
131
- --color-component-basic-dashboard-score-line: #ffbf00;
132
- --color-component-basic-dashboard-score-border: #ffe28a;
133
- --color-component-basic-dashboard-score-surface: #ffffff;
134
- --color-component-basic-dashboard-score-dot-bg: #ffffff;
135
- --color-component-basic-dashboard-score-dot-border: #ffbf00;
136
- --color-component-basic-widget-handle: #c6c5c3;
137
- --color-surface-modal-bg: #ffffff;
138
- --color-surface-modal-container: #f9f8f7;
139
- --text-disabled: #e3e1df;
140
- --text-default: #181817;
141
- --border-depth1: #f9f8f7;
142
- --border-depth3: #e3e1df;
143
- --border-depth2: #efeeed;
144
- --border-depth0: #ffffff;
145
- --border-active: #ffbf00;
146
- --dim-default: #00000066;
104
+ --color-global-grey-0: #191917;
105
+ --color-global-grey-25: #131312;
106
+ --color-global-grey-50: #232323;
107
+ --color-global-grey-100: #2c2c2c;
108
+ --color-global-grey-200: #3c3b3a;
109
+ --color-global-grey-300: #6a6966;
110
+ --color-global-grey-500: #a8a7a4;
111
+ --color-global-grey-600: #c6c5c3;
112
+ --color-global-grey-700: #e3e1df;
113
+ --color-global-grey-800: #efeeed;
114
+ --color-global-grey-900: #f9f8f7;
115
+ --color-global-grey-950: #fcfcfc;
116
+ --color-global-grey-1000: #ffffff;
117
+ --color-global-yellow-50: #493704;
118
+ --color-global-yellow-100: #795706;
119
+ --color-global-yellow-200: #a57909;
120
+ --color-global-yellow-300: #cb980b;
121
+ --color-global-yellow-400: #e9b20c;
122
+ --color-global-yellow-500: #f5c73d;
123
+ --color-global-yellow-600: #f7d364;
124
+ --color-global-yellow-700: #f9da86;
125
+ --color-global-yellow-800: #fae19e;
126
+ --color-global-yellow-900: #fbe7bb;
127
+ --color-semantic-brand-primary: #e9b20c;
128
+ --color-semantic-point-olive-green: #839400;
129
+ --color-semantic-point-coral-red: #f15232;
130
+ --color-semantic-notification-success: #477d00;
131
+ --color-semantic-notification-error: #c92504;
132
+ --color-semantic-gradation-point-1: #ebb30a;
133
+ --color-semantic-gradation-point-2: #ffd133;
134
+ --color-semantic-gradation-point-3: #ffe88d;
135
+ --color-component-button-base-bg-primary-default: #e9b20c;
136
+ --color-component-button-base-bg-primary-hover: #f5c73d;
137
+ --color-component-button-base-bg-primary-pressed: #f7d364;
138
+ --color-component-button-base-bg-primary-disabled: rgba(73, 55, 4, 0.5);
139
+ --color-component-button-base-bg-sub-pressed: #a57909;
140
+ --color-component-button-base-bg-sub-hover: #795706;
141
+ --color-component-button-base-bg-sub-default: #493704;
142
+ --color-component-button-base-bg-grey-disabled: #232323;
143
+ --color-component-button-base-bg-grey-default: #232323;
144
+ --color-component-button-base-bg-grey-hover: #2c2c2c;
145
+ --color-component-button-base-bg-grey-pressed: #3c3b3a;
146
+ --color-component-button-base-icon-primary-default: #191917;
147
+ --color-component-button-base-icon-primary-disabled: #493704;
148
+ --color-component-button-base-icon-grey-disabled: #3c3b3a;
149
+ --color-component-button-base-icon-grey-default: #a8a7a4;
150
+ --color-component-button-base-icon-sub-disabled: #2c2c2c;
151
+ --color-component-button-base-icon-sub-default: #f5c73d;
152
+ --color-component-button-base-icon-sub-pressed: #f7d364;
153
+ --color-component-button-base-text-primary-default: #191917;
154
+ --color-component-button-base-text-primary-disabled: #493704;
155
+ --color-component-button-base-text-grey-default: #c6c5c3;
156
+ --color-component-button-base-text-grey-disabled: #3c3b3a;
157
+ --color-component-button-base-text-sub-disabled: #2c2c2c;
158
+ --color-component-button-base-text-sub-default: #f5c73d;
159
+ --color-component-button-base-text-sub-pressed: #f7d364;
160
+ --color-component-button-mode-change-bg: #232323;
161
+ --color-component-button-mode-change-thumb-on: #232323;
162
+ --color-component-button-mode-change-thumb-off: #e9b20c;
163
+ --color-component-button-mode-change-switch-on: #6a6966;
164
+ --color-component-button-mode-change-switch-off: #191917;
165
+ --color-component-button-toggle-switch-bg-primary: #131312;
166
+ --color-component-button-toggle-switch-bg-default: #232323;
167
+ --color-component-button-toggle-switch-selected-primary: #e9b20c;
168
+ --color-component-button-toggle-switch-selected-default: #2c2c2c;
169
+ --color-component-button-toggle-active-disabled: #a8a7a4;
170
+ --color-component-button-cam-activation-icon-disabled: #3c3b3a;
171
+ --color-component-button-cam-activation-icon-hover: #e3e1df;
172
+ --color-component-button-cam-activation-icon-default: #a8a7a4;
173
+ --color-component-button-cam-activation-bg-default: #2c2c2c;
174
+ --color-component-button-cam-activation-bg-hover: #131312;
175
+ --color-component-button-cam-activation-bg-disabled: #2c2c2c;
176
+ --color-component-basic-dashboard-graph-bg-line: #232323;
177
+ --color-component-basic-dashboard-graph-gradation: #493704;
178
+ --color-component-basic-dashboard-level-stepper-surface: rgba(160, 119, 13, 0.4);
179
+ --color-component-basic-dashboard-score-line: #ffffff;
180
+ --color-component-basic-dashboard-score-border: #2c2c2c;
181
+ --color-component-basic-dashboard-score-surface: #131312;
182
+ --color-component-basic-dashboard-score-dot-bg: #f5c73d;
183
+ --color-component-basic-dashboard-score-dot-border: #ffffff;
184
+ --color-component-basic-widget-handle: #6a6966;
185
+ --color-surface-modal-bg: #131312;
186
+ --color-surface-modal-container: #191917;
187
+ --color-surface-scroll-bar: #131312;
188
+ --color-surface-toast-bar: #fcfcfc;
189
+ --text-disabled: #2c2c2c;
190
+ --text-default: #e3e1df;
191
+ --border-depth1: #131312;
192
+ --border-depth3: #2c2c2c;
193
+ --border-depth2: #232323;
194
+ --border-depth0: #191917;
195
+ --border-active: #e9b20c;
196
+ --dim-default: #000000b3;
147
197
  }
148
198
  }
package/dist/theme.light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Feb 2026 04:01:51 GMT
3
+ * Generated on Tue, 10 Feb 2026 21:26:53 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/tokens.base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 10 Feb 2026 04:01:51 GMT
3
+ * Generated on Tue, 10 Feb 2026 21:26:53 GMT
4
4
  */
5
5
 
6
6
  :root {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gbgr/tokens",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "main": "./dist/tokens.json",
5
5
  "types": "./dist/tokens.d.ts",
6
6
  "files": [