@gbgr/tokens 0.0.0

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/LICENSE +21 -0
  2. package/README.md +60 -0
  3. package/dist/index.css +4 -0
  4. package/dist/sd.input.json +688 -0
  5. package/dist/theme.css +3 -0
  6. package/dist/theme.dark.css +75 -0
  7. package/dist/theme.light.css +85 -0
  8. package/dist/tokens.base.css +73 -0
  9. package/dist/tokens.d.ts +265 -0
  10. package/dist/tokens.json +688 -0
  11. package/package.json +28 -0
package/dist/theme.dark.css ADDED
@@ -0,0 +1,75 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 Feb 2026 18:00:10 GMT
4
+ */
5
+
6
+ :root[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;
75
+ }
package/dist/theme.light.css ADDED
@@ -0,0 +1,85 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 Feb 2026 18:00:10 GMT
4
+ */
5
+
6
+ :root {
7
+ --color-semantic-brand-primary: #ffbf00;
8
+ --color-semantic-point-olive-green: #a1b100;
9
+ --color-semantic-point-coral-red: #ff6647;
10
+ --color-semantic-notification-success: #67b000;
11
+ --color-semantic-notification-error: #ff351f;
12
+ --color-semantic-gradation-point-1: #ffbf00;
13
+ --color-semantic-gradation-point-2: #ffc500;
14
+ --color-semantic-gradation-point-3: #ffefaf;
15
+ --color-component-button-base-bg-primary-default: #ffcb31;
16
+ --color-component-button-base-bg-primary-hover: #ffbf00;
17
+ --color-component-button-base-bg-primary-pressed: #e8ae00;
18
+ --color-component-button-base-bg-primary-disabled: #ffebb0;
19
+ --color-component-button-base-bg-sub-pressed: #ffe28a;
20
+ --color-component-button-base-bg-sub-hover: #ffebb0;
21
+ --color-component-button-base-bg-sub-default: #fff9e6;
22
+ --color-component-button-base-bg-grey-disabled: #f9f8f7;
23
+ --color-component-button-base-bg-grey-default: #f9f8f7;
24
+ --color-component-button-base-bg-grey-hover: #efeeed;
25
+ --color-component-button-base-bg-grey-pressed: #e3e1df;
26
+ --color-component-button-base-icon-primary-default: #000000;
27
+ --color-component-button-base-icon-primary-disabled: #ffffff;
28
+ --color-component-button-base-icon-grey-disabled: #e3e1df;
29
+ --color-component-button-base-icon-grey-default: #7e7e7b;
30
+ --color-component-button-base-icon-sub-disabled: #efeeed;
31
+ --color-component-button-base-icon-sub-default: #ffbf00;
32
+ --color-component-button-base-icon-sub-pressed: #e8ae00;
33
+ --color-component-button-base-text-primary-default: #000000;
34
+ --color-component-button-base-text-primary-disabled: #ffffff;
35
+ --color-component-button-base-text-grey-default: #6a6966;
36
+ --color-component-button-base-text-grey-disabled: #e3e1df;
37
+ --color-component-button-base-text-sub-disabled: #efeeed;
38
+ --color-component-button-base-text-sub-default: #ffbf00;
39
+ --color-component-button-base-text-sub-pressed: #e8ae00;
40
+ --color-component-button-mode-change-bg: #f9f8f7;
41
+ --color-component-button-mode-change-thumb-on: #ffcb31;
42
+ --color-component-button-mode-change-thumb-off: #f9f8f7;
43
+ --color-component-button-mode-change-switch-on: #000000;
44
+ --color-component-button-mode-change-switch-off: #a8a7a4;
45
+ --color-component-button-toggle-switch-bg-primary: #f9f8f7;
46
+ --color-component-button-toggle-switch-bg-default: #ffffff;
47
+ --color-component-button-toggle-switch-selected-primary: #ffbf00;
48
+ --color-component-button-toggle-switch-selected-default: #a8a7a4;
49
+ --color-component-button-toggle-default: #ffffff;
50
+ --color-component-button-toggle-active-disabled: #ffffff;
51
+ --color-component-button-cam-activation-icon-disabled: #efeeed;
52
+ --color-component-button-cam-activation-icon-hover: #3c3b3a;
53
+ --color-component-button-cam-activation-icon-default: #7e7e7b;
54
+ --color-component-button-cam-activation-bg-default: #f9f8f7;
55
+ --color-component-button-cam-activation-bg-hover: #ffffff;
56
+ --color-component-button-cam-activation-bg-disabled: #f9f8f7;
57
+ --color-component-basic-dashboard-graph-bg-line: #efeeed;
58
+ --color-component-basic-dashboard-graph-gradation: #ffebb0;
59
+ --color-component-basic-dashboard-level-stepper-surface: #ffcb31;
60
+ --color-component-basic-dashboard-score-line: #ffbf00;
61
+ --color-component-basic-dashboard-score-border: #ffe28a;
62
+ --color-component-basic-dashboard-score-surface: #ffffff;
63
+ --color-component-basic-dashboard-score-dot-bg: #ffffff;
64
+ --color-component-basic-dashboard-score-dot-border: #ffbf00;
65
+ --color-component-basic-widget-handle: #c6c5c3;
66
+ --color-component-basic-loading-bar-dot: #ffffff;
67
+ --color-surface-modal-bg: #ffffff;
68
+ --color-surface-modal-container: #f9f8f7;
69
+ --color-surface-scroll-bar: #e3e1df;
70
+ --color-surface-toast-bar: #6a6966;
71
+ --text-primary: #ffffff;
72
+ --text-disabled: #e3e1df;
73
+ --text-default: #181817;
74
+ --border-depth1: #f9f8f7;
75
+ --border-depth3: #e3e1df;
76
+ --border-depth2: #efeeed;
77
+ --border-depth0: #ffffff;
78
+ --border-active: #ffbf00;
79
+ --dim-default: #00000066;
80
+ --error: #ff3232;
81
+ --success: #00bf29;
82
+ --background: #f6f9fb;
83
+ --paragraph-spacing-0: 0;
84
+ --paragraph-indent-0: 0;
85
+ }
package/dist/tokens.base.css ADDED
@@ -0,0 +1,73 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 09 Feb 2026 18:00:10 GMT
4
+ */
5
+
6
+ :root {
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-400: #7e7e7b;
14
+ --color-global-grey-500: #6a6966;
15
+ --color-global-grey-600: #3c3b3a;
16
+ --color-global-grey-700: #2c2c2c;
17
+ --color-global-grey-800: #212121;
18
+ --color-global-grey-900: #181817;
19
+ --color-global-grey-950: #141413;
20
+ --color-global-grey-1000: #000000;
21
+ --color-global-yellow-50: #fff9e6;
22
+ --color-global-yellow-100: #ffebb0;
23
+ --color-global-yellow-200: #ffe28a;
24
+ --color-global-yellow-300: #ffd454;
25
+ --color-global-yellow-400: #ffcb31;
26
+ --color-global-yellow-500: #ffbf00;
27
+ --color-global-yellow-600: #e8ae00;
28
+ --color-global-yellow-700: #d29a00;
29
+ --color-global-yellow-800: #bd8700;
30
+ --color-global-yellow-900: #a67100;
31
+ --radius-xs: 4px;
32
+ --radius-sm: 8px;
33
+ --radius-md: 12px;
34
+ --radius-lg: 16px;
35
+ --radius-xl: 20px;
36
+ --radius-2xl: 24px;
37
+ --radius-full: 999px;
38
+ --radius-3xl: 32px;
39
+ --radius-4xl: 36px;
40
+ --radius-5xl: 44px;
41
+ --spacing-1: 4px;
42
+ --spacing-2: 8px;
43
+ --spacing-3: 12px;
44
+ --spacing-4: 16px;
45
+ --spacing-5: 24px;
46
+ --spacing-6: 32px;
47
+ --spacing-7: 40px;
48
+ --spacing-8: 48px;
49
+ --spacing-9: 56px;
50
+ --spacing-10: 64px;
51
+ --spacing-11: 72px;
52
+ --spacing-12: 80px;
53
+ --spacing-13: 88px;
54
+ --spacing-14: 96px;
55
+ --spacing-15: 104px;
56
+ --device-mode-desktop: 1920px;
57
+ --device-mode-laptop: 1440px;
58
+ --device-mode-minimum: 1280px;
59
+ --font-families-pretendard: Pretendard;
60
+ --font-weights-pretendard-0: 700;
61
+ --font-weights-pretendard-1: 600;
62
+ --font-weights-pretendard-2: 500;
63
+ --font-weights-pretendard-3: 400;
64
+ --font-size-0: 10px;
65
+ --font-size-1: 12px;
66
+ --font-size-2: 14px;
67
+ --font-size-3: 16px;
68
+ --font-size-4: 18px;
69
+ --font-size-5: 20px;
70
+ --font-size-6: 22px;
71
+ --font-size-7: 24px;
72
+ --font-size-8: 32px;
73
+ }
package/dist/tokens.d.ts ADDED
@@ -0,0 +1,265 @@
1
+ export type TokenLeaf<TValue = string | number, TType extends string = string> = {
2
+ value: TValue;
3
+ type: TType;
4
+ [key: string]: unknown;
5
+ };
6
+
7
+ export type Tokens = {
8
+ color: {
9
+ global: {
10
+ grey: {
11
+ "0": TokenLeaf<string, "color">;
12
+ "25": TokenLeaf<string, "color">;
13
+ "50": TokenLeaf<string, "color">;
14
+ "100": TokenLeaf<string, "color">;
15
+ "200": TokenLeaf<string, "color">;
16
+ "300": TokenLeaf<string, "color">;
17
+ "400": TokenLeaf<string, "color">;
18
+ "500": TokenLeaf<string, "color">;
19
+ "600": TokenLeaf<string, "color">;
20
+ "700": TokenLeaf<string, "color">;
21
+ "800": TokenLeaf<string, "color">;
22
+ "900": TokenLeaf<string, "color">;
23
+ "950": TokenLeaf<string, "color">;
24
+ "1000": TokenLeaf<string, "color">;
25
+ };
26
+ yellow: {
27
+ "50": TokenLeaf<string, "color">;
28
+ "100": TokenLeaf<string, "color">;
29
+ "200": TokenLeaf<string, "color">;
30
+ "300": TokenLeaf<string, "color">;
31
+ "400": TokenLeaf<string, "color">;
32
+ "500": TokenLeaf<string, "color">;
33
+ "600": TokenLeaf<string, "color">;
34
+ "700": TokenLeaf<string, "color">;
35
+ "800": TokenLeaf<string, "color">;
36
+ "900": TokenLeaf<string, "color">;
37
+ };
38
+ };
39
+ semantic: {
40
+ brand: {
41
+ primary: TokenLeaf<string, "color">;
42
+ };
43
+ point: {
44
+ "olive green": TokenLeaf<string, "color">;
45
+ "coral red": TokenLeaf<string, "color">;
46
+ };
47
+ notification: {
48
+ success: TokenLeaf<string, "color">;
49
+ error: TokenLeaf<string, "color">;
50
+ };
51
+ gradation: {
52
+ "Point 1": TokenLeaf<string, "color">;
53
+ "Point 2": TokenLeaf<string, "color">;
54
+ "Point 3": TokenLeaf<string, "color">;
55
+ };
56
+ };
57
+ component: {
58
+ button: {
59
+ base: {
60
+ bg: {
61
+ primary: {
62
+ default: TokenLeaf<string, "color">;
63
+ hover: TokenLeaf<string, "color">;
64
+ pressed: TokenLeaf<string, "color">;
65
+ disabled: TokenLeaf<string, "color">;
66
+ };
67
+ sub: {
68
+ pressed: TokenLeaf<string, "color">;
69
+ hover: TokenLeaf<string, "color">;
70
+ default: TokenLeaf<string, "color">;
71
+ };
72
+ grey: {
73
+ disabled: TokenLeaf<string, "color">;
74
+ default: TokenLeaf<string, "color">;
75
+ hover: TokenLeaf<string, "color">;
76
+ pressed: TokenLeaf<string, "color">;
77
+ };
78
+ };
79
+ icon: {
80
+ primary: {
81
+ default: TokenLeaf<string, "color">;
82
+ disabled: TokenLeaf<string, "color">;
83
+ };
84
+ grey: {
85
+ disabled: TokenLeaf<string, "color">;
86
+ default: TokenLeaf<string, "color">;
87
+ };
88
+ sub: {
89
+ disabled: TokenLeaf<string, "color">;
90
+ default: TokenLeaf<string, "color">;
91
+ pressed: TokenLeaf<string, "color">;
92
+ };
93
+ };
94
+ text: {
95
+ primary: {
96
+ default: TokenLeaf<string, "color">;
97
+ disabled: TokenLeaf<string, "color">;
98
+ };
99
+ grey: {
100
+ default: TokenLeaf<string, "color">;
101
+ disabled: TokenLeaf<string, "color">;
102
+ };
103
+ sub: {
104
+ disabled: TokenLeaf<string, "color">;
105
+ default: TokenLeaf<string, "color">;
106
+ pressed: TokenLeaf<string, "color">;
107
+ };
108
+ };
109
+ };
110
+ "mode change": {
111
+ bg: TokenLeaf<string, "color">;
112
+ thumb: {
113
+ on: TokenLeaf<string, "color">;
114
+ off: TokenLeaf<string, "color">;
115
+ };
116
+ switch: {
117
+ on: TokenLeaf<string, "color">;
118
+ off: TokenLeaf<string, "color">;
119
+ };
120
+ };
121
+ "toggle switch": {
122
+ bg: {
123
+ primary: TokenLeaf<string, "color">;
124
+ default: TokenLeaf<string, "color">;
125
+ };
126
+ selected: {
127
+ primary: TokenLeaf<string, "color">;
128
+ default: TokenLeaf<string, "color">;
129
+ };
130
+ };
131
+ toggle: {
132
+ default: TokenLeaf<string, "color">;
133
+ active_disabled: TokenLeaf<string, "color">;
134
+ };
135
+ "cam activation": {
136
+ icon: {
137
+ disabled: TokenLeaf<string, "color">;
138
+ hover: TokenLeaf<string, "color">;
139
+ default: TokenLeaf<string, "color">;
140
+ };
141
+ bg: {
142
+ default: TokenLeaf<string, "color">;
143
+ hover: TokenLeaf<string, "color">;
144
+ disabled: TokenLeaf<string, "color">;
145
+ };
146
+ };
147
+ };
148
+ basic: {
149
+ dashboard: {
150
+ graph: {
151
+ bg_line: TokenLeaf<string, "color">;
152
+ gradation: TokenLeaf<string, "color">;
153
+ };
154
+ "level stepper": {
155
+ surface: TokenLeaf<string, "color">;
156
+ };
157
+ score: {
158
+ line: TokenLeaf<string, "color">;
159
+ border: TokenLeaf<string, "color">;
160
+ surface: TokenLeaf<string, "color">;
161
+ dot: {
162
+ bg: TokenLeaf<string, "color">;
163
+ border: TokenLeaf<string, "color">;
164
+ };
165
+ };
166
+ };
167
+ widget: {
168
+ handle: TokenLeaf<string, "color">;
169
+ };
170
+ "loading bar": {
171
+ dot: TokenLeaf<string, "color">;
172
+ };
173
+ };
174
+ };
175
+ surface: {
176
+ modal: {
177
+ bg: TokenLeaf<string, "color">;
178
+ container: TokenLeaf<string, "color">;
179
+ };
180
+ "scroll bar": TokenLeaf<string, "color">;
181
+ "toast bar": TokenLeaf<string, "color">;
182
+ };
183
+ };
184
+ text: {
185
+ primary: TokenLeaf<string, "color">;
186
+ disabled: TokenLeaf<string, "color">;
187
+ default: TokenLeaf<string, "color">;
188
+ };
189
+ border: {
190
+ depth1: TokenLeaf<string, "color">;
191
+ depth3: TokenLeaf<string, "color">;
192
+ depth2: TokenLeaf<string, "color">;
193
+ depth0: TokenLeaf<string, "color">;
194
+ active: TokenLeaf<string, "color">;
195
+ };
196
+ dim: {
197
+ default: TokenLeaf<string, "color">;
198
+ };
199
+ radius: {
200
+ xs: TokenLeaf<number, "number">;
201
+ sm: TokenLeaf<number, "number">;
202
+ md: TokenLeaf<number, "number">;
203
+ lg: TokenLeaf<number, "number">;
204
+ xl: TokenLeaf<number, "number">;
205
+ "2xl": TokenLeaf<number, "number">;
206
+ full: TokenLeaf<number, "number">;
207
+ "3xl": TokenLeaf<number, "number">;
208
+ "4xl": TokenLeaf<number, "number">;
209
+ "5xl": TokenLeaf<number, "number">;
210
+ };
211
+ spacing: {
212
+ "1": TokenLeaf<number, "number">;
213
+ "2": TokenLeaf<number, "number">;
214
+ "3": TokenLeaf<number, "number">;
215
+ "4": TokenLeaf<number, "number">;
216
+ "5": TokenLeaf<number, "number">;
217
+ "6": TokenLeaf<number, "number">;
218
+ "7": TokenLeaf<number, "number">;
219
+ "8": TokenLeaf<number, "number">;
220
+ "9": TokenLeaf<number, "number">;
221
+ "10": TokenLeaf<number, "number">;
222
+ "11": TokenLeaf<number, "number">;
223
+ "12": TokenLeaf<number, "number">;
224
+ "13": TokenLeaf<number, "number">;
225
+ "14": TokenLeaf<number, "number">;
226
+ "15": TokenLeaf<number, "number">;
227
+ };
228
+ "device mode": {
229
+ Desktop: TokenLeaf<number, "number">;
230
+ Laptop: TokenLeaf<number, "number">;
231
+ Minimum: TokenLeaf<number, "number">;
232
+ };
233
+ error: TokenLeaf<string, "color">;
234
+ success: TokenLeaf<string, "color">;
235
+ background: TokenLeaf<string, "color">;
236
+ fontFamilies: {
237
+ pretendard: TokenLeaf<string, "text">;
238
+ };
239
+ fontWeights: {
240
+ "pretendard-0": TokenLeaf<string, "text">;
241
+ "pretendard-1": TokenLeaf<string, "text">;
242
+ "pretendard-2": TokenLeaf<string, "text">;
243
+ "pretendard-3": TokenLeaf<string, "text">;
244
+ };
245
+ fontSize: {
246
+ "0": TokenLeaf<number, "number">;
247
+ "1": TokenLeaf<number, "number">;
248
+ "2": TokenLeaf<number, "number">;
249
+ "3": TokenLeaf<number, "number">;
250
+ "4": TokenLeaf<number, "number">;
251
+ "5": TokenLeaf<number, "number">;
252
+ "6": TokenLeaf<number, "number">;
253
+ "7": TokenLeaf<number, "number">;
254
+ "8": TokenLeaf<number, "number">;
255
+ };
256
+ paragraphSpacing: {
257
+ "0": TokenLeaf<number, "number">;
258
+ };
259
+ paragraphIndent: {
260
+ "0": TokenLeaf<number, "number">;
261
+ };
262
+ };
263
+
264
+ declare const tokens: Tokens;
265
+ export default tokens;