@nexus-cross/tokens 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,395 @@
1
+ /**
2
+ * Company CSS — 순수 CSS 변수 (:root + .dark)
3
+ * Tailwind 없이 var(--*) 로 사용 가능
4
+ * 자동 생성: scripts/generate-css.js
5
+ * 생성일: 2026-03-26T09:42:26.124Z
6
+ */
7
+
8
+ :root {
9
+ --color-bg-default: #FFFFFF;
10
+ --color-bg-subtle: #F3F6F8;
11
+ --color-bg-strong: #ECF0F2;
12
+ --color-surface-default: #FFFFFF;
13
+ --color-surface-default-dim: #F3F6F8;
14
+ --color-surface-default-hover: #F3F6F8;
15
+ --color-surface-default-pressed: #ECF0F2;
16
+ --color-surface-default-disabled: #ECF0F2;
17
+ --color-surface-subtle: #F3F6F8;
18
+ --color-surface-subtle-hover: #ECF0F2;
19
+ --color-surface-strong: #ECF0F2;
20
+ --color-surface-inverted: #161A21;
21
+ --color-text-highlight: #000000;
22
+ --color-text-primary: #1E232E;
23
+ --color-text-primary-hover: #000000;
24
+ --color-text-primary-pressed: #000000;
25
+ --color-text-secondary: #7E8597;
26
+ --color-text-secondary-hover: #3B4153;
27
+ --color-text-secondary-pressed: #3B4153;
28
+ --color-text-tertiary: #7E8597;
29
+ --color-text-tertiary-hover: #62697A;
30
+ --color-text-tertiary-pressed: #62697A;
31
+ --color-text-muted: #A2AABA;
32
+ --color-text-inverted: #FFFFFF;
33
+ --color-icon-highlight: #000000;
34
+ --color-icon-primary: #1E232E;
35
+ --color-icon-primary-hover: #000000;
36
+ --color-icon-primary-pressed: #000000;
37
+ --color-icon-secondary: #7E8597;
38
+ --color-icon-secondary-hover: #3B4153;
39
+ --color-icon-secondary-pressed: #3B4153;
40
+ --color-icon-tertiary: #7E8597;
41
+ --color-icon-tertiary-hover: #62697A;
42
+ --color-icon-tertiary-pressed: #62697A;
43
+ --color-icon-muted: #A2AABA;
44
+ --color-icon-inverted: #FFFFFF;
45
+ --color-border-default: #ECF0F2;
46
+ --color-border-default-hover: #A2AABA;
47
+ --color-border-default-focus: #62697A;
48
+ --color-border-subtle: #F3F6F8;
49
+ --color-border-medium: #C6D0DA;
50
+ --color-border-strong: #000000;
51
+ --color-accent-primary: #09B498;
52
+ --color-accent-primary-hover: #07C6A6;
53
+ --color-accent-primary-pressed: #0F947E;
54
+ --color-accent-primary-disabled: #CDF4ED;
55
+ --color-accent-primary-focus: #09B498;
56
+ --color-accent-primary-intense: #0F947E;
57
+ --color-accent-primary-dim: #83DCC9;
58
+ --color-accent-on-primary: #FFFFFF;
59
+ --color-accent-secondary: #7346F3;
60
+ --color-accent-secondary-intense: #7346F3;
61
+ --color-accent-secondary-dim: #E9DBFB;
62
+ --color-accent-secondary-hover: #7D4FFF;
63
+ --color-accent-secondary-pressed: #9975FF;
64
+ --color-accent-secondary-disabled: #F4EBFF;
65
+ --color-accent-secondary-focus: #7D4FFF;
66
+ --color-accent-on-secondary: #FFFFFF;
67
+ --color-status-success: #00B784;
68
+ --color-status-success-hover: #00C890;
69
+ --color-status-success-pressed: #1B9674;
70
+ --color-status-success-disabled: #CDF4EA;
71
+ --color-status-success-intense: #1B9674;
72
+ --color-status-success-dim: #9FECD7;
73
+ --color-status-warning: #FF9D00;
74
+ --color-status-warning-hover: #FFAA00;
75
+ --color-status-warning-pressed: #F9C127;
76
+ --color-status-warning-disabled: #FFF2D2;
77
+ --color-status-warning-intense: #D9840C;
78
+ --color-status-warning-dim: #FFDB6E;
79
+ --color-status-danger: #DB0A2D;
80
+ --color-status-danger-hover: #E62848;
81
+ --color-status-danger-pressed: #AF2239;
82
+ --color-status-danger-disabled: #FDE8EB;
83
+ --color-status-danger-intense: #D20625;
84
+ --color-status-danger-dim: #FFBBC4;
85
+ --color-status-danger-focus: #E62848;
86
+ --color-status-info: #0095FF;
87
+ --color-status-info-hover: #20B1FF;
88
+ --color-status-info-pressed: #1087FF;
89
+ --color-status-info-disabled: #CCEFFF;
90
+ --color-status-info-intense: #1672D0;
91
+ --color-status-info-dim: #92DDFF;
92
+ --color-static-white: #FFFFFF;
93
+ --color-static-black: #000000;
94
+ --shadow-none: none;
95
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.12);
96
+ --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.12);
97
+ --shadow-lg: 0 2px 8px -1px rgb(0 0 0 / 0.12);
98
+ --shadow-xl: 0 4px 15px -3px rgb(0 0 0 / 0.12);
99
+ --shadow-2xl: 0 5px 25px -5px rgb(0 0 0 / 0.12);
100
+ --radius-corner-none: 0px;
101
+ --radius-corner-sm: 4px;
102
+ --radius-corner-md: 8px;
103
+ --radius-corner-lg: 12px;
104
+ --radius-corner-xl: 16px;
105
+ --radius-corner-2xl: 24px;
106
+ --radius-corner-full: 9999px;
107
+ --breakpoint-screen-xs: 320px;
108
+ --breakpoint-screen-sm: 640px;
109
+ --breakpoint-screen-md: 768px;
110
+ --breakpoint-screen-lg: 1024px;
111
+ --breakpoint-screen-xl: 1280px;
112
+ --breakpoint-screen-2xl: 1440px;
113
+ --text-text-xs: 0.75rem;
114
+ --text-text-xs--line-height: 1.5;
115
+ --text-text-sm: 0.875rem;
116
+ --text-text-sm--line-height: 1.5;
117
+ --text-text-base: 1rem;
118
+ --text-text-base--line-height: 1.5;
119
+ --text-text-lg: 1.125rem;
120
+ --text-text-lg--line-height: 1.5;
121
+ --text-text-xl: 1.25rem;
122
+ --text-text-xl--line-height: 1.5;
123
+ --text-text-medium-xs: 0.75rem;
124
+ --text-text-medium-xs--line-height: 1.5;
125
+ --text-text-medium-sm: 0.875rem;
126
+ --text-text-medium-sm--line-height: 1.5;
127
+ --text-text-medium-base: 1rem;
128
+ --text-text-medium-base--line-height: 1.5;
129
+ --text-text-medium-lg: 1.125rem;
130
+ --text-text-medium-lg--line-height: 1.5;
131
+ --text-text-medium-xl: 1.25rem;
132
+ --text-text-medium-xl--line-height: 1.5;
133
+ --text-text-semibold-xs: 0.75rem;
134
+ --text-text-semibold-xs--line-height: 1.5;
135
+ --text-text-semibold-sm: 0.875rem;
136
+ --text-text-semibold-sm--line-height: 1.5;
137
+ --text-text-semibold-base: 1rem;
138
+ --text-text-semibold-base--line-height: 1.5;
139
+ --text-text-semibold-lg: 1.125rem;
140
+ --text-text-semibold-lg--line-height: 1.5;
141
+ --text-text-semibold-xl: 1.25rem;
142
+ --text-text-semibold-xl--line-height: 1.5;
143
+ --text-heading-h7: 0.875rem;
144
+ --text-heading-h7--line-height: 1.25;
145
+ --text-heading-h6: 1rem;
146
+ --text-heading-h6--line-height: 1.25;
147
+ --text-heading-h5: 1.125rem;
148
+ --text-heading-h5--line-height: 1.25;
149
+ --text-heading-h4: 1.25rem;
150
+ --text-heading-h4--line-height: 1.25;
151
+ --text-heading-h3: 1.5rem;
152
+ --text-heading-h3--line-height: 1.25;
153
+ --text-heading-h2: 1.875rem;
154
+ --text-heading-h2--line-height: 1.25;
155
+ --text-heading-h1: 2.25rem;
156
+ --text-heading-h1--line-height: 1.25;
157
+ --text-display-sm: 2.25rem;
158
+ --text-display-sm--line-height: 1.25;
159
+ --text-display-md: 3rem;
160
+ --text-display-md--line-height: 1.25;
161
+ --text-display-lg: 3.75rem;
162
+ --text-display-lg--line-height: 1.25;
163
+ --text-label-sm: 0.75rem;
164
+ --text-label-sm--line-height: 1;
165
+ --text-label-md: 0.875rem;
166
+ --text-label-md--line-height: 1;
167
+ --text-label-lg: 1rem;
168
+ --text-label-lg--line-height: 1;
169
+ --text-label-semibold-sm: 0.75rem;
170
+ --text-label-semibold-sm--line-height: 1;
171
+ --text-label-semibold-md: 0.875rem;
172
+ --text-label-semibold-md--line-height: 1;
173
+ --text-label-semibold-lg: 1rem;
174
+ --text-label-semibold-lg--line-height: 1;
175
+ --ease-transition-instant: linear;
176
+ --ease-transition-fast: cubic-bezier(0, 0, 0.2, 1);
177
+ --ease-transition-normal: cubic-bezier(0, 0, 0.2, 1);
178
+ --ease-transition-slow: cubic-bezier(0, 0, 0.2, 1);
179
+ --ease-animation-enter: cubic-bezier(0, 0, 0.2, 1);
180
+ --ease-animation-exit: cubic-bezier(0.4, 0, 1, 1);
181
+ --ease-animation-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
182
+ --spacing-padding-none: 0;
183
+ --spacing-padding-2xs: 0.25rem;
184
+ --spacing-padding-xs: 0.5rem;
185
+ --spacing-padding-sm: 0.75rem;
186
+ --spacing-padding-md: 1rem;
187
+ --spacing-padding-lg: 1.5rem;
188
+ --spacing-padding-xl: 2rem;
189
+ --spacing-padding-2xl: 2.5rem;
190
+ --spacing-gap-none: 0;
191
+ --spacing-gap-xs: 0.25rem;
192
+ --spacing-gap-sm: 0.5rem;
193
+ --spacing-gap-md: 1rem;
194
+ --spacing-gap-lg: 1.5rem;
195
+ --spacing-gap-xl: 2rem;
196
+ --border-width-stroke-none: 0px;
197
+ --border-width-stroke-thin: 1px;
198
+ --border-width-stroke-default: 1px;
199
+ --border-width-stroke-heavy: 2px;
200
+ --opacity-overlay-dim: 0.5;
201
+ --opacity-overlay-light: 0.3;
202
+ --opacity-overlay-heavy: 0.7;
203
+ --opacity-disabled-element: 0.4;
204
+ --opacity-disabled-text: 0.5;
205
+ --opacity-hover-subtle: 0.05;
206
+ --opacity-hover-default: 0.1;
207
+ --opacity-pressed-subtle: 0.1;
208
+ --opacity-pressed-default: 0.2;
209
+ --size-icon-xs: 12px;
210
+ --size-icon-sm: 16px;
211
+ --size-icon-md: 20px;
212
+ --size-icon-lg: 24px;
213
+ --size-icon-xl: 32px;
214
+ --size-control-xs: 24px;
215
+ --size-control-sm: 32px;
216
+ --size-control-md: 40px;
217
+ --size-control-lg: 48px;
218
+ --size-touch-min: 44px;
219
+ --size-avatar-xs: 24px;
220
+ --size-avatar-sm: 32px;
221
+ --size-avatar-md: 40px;
222
+ --size-avatar-lg: 48px;
223
+ --size-avatar-xl: 64px;
224
+ --size-avatar-2xl: 96px;
225
+ --z-index-layer-base: 0;
226
+ --z-index-layer-dropdown: 10;
227
+ --z-index-layer-sticky: 20;
228
+ --z-index-layer-popover: 30;
229
+ --z-index-layer-modal: 40;
230
+ --z-index-layer-toast: 50;
231
+ --z-index-layer-tooltip: 100;
232
+ --duration-transition-instant: 0ms;
233
+ --duration-transition-fast: 150ms;
234
+ --duration-transition-normal: 200ms;
235
+ --duration-transition-slow: 300ms;
236
+ --duration-animation-enter: 200ms;
237
+ --duration-animation-exit: 150ms;
238
+ --duration-animation-bounce: 500ms;
239
+ --font-weight-text-xs: 400;
240
+ --letter-spacing-text-xs: -0.01em;
241
+ --font-weight-text-sm: 400;
242
+ --letter-spacing-text-sm: -0.01em;
243
+ --font-weight-text-base: 400;
244
+ --letter-spacing-text-base: -0.01em;
245
+ --font-weight-text-lg: 400;
246
+ --letter-spacing-text-lg: -0.01em;
247
+ --font-weight-text-xl: 400;
248
+ --letter-spacing-text-xl: -0.01em;
249
+ --font-weight-text-medium-xs: 500;
250
+ --letter-spacing-text-medium-xs: -0.01em;
251
+ --font-weight-text-medium-sm: 500;
252
+ --letter-spacing-text-medium-sm: -0.01em;
253
+ --font-weight-text-medium-base: 500;
254
+ --letter-spacing-text-medium-base: -0.01em;
255
+ --font-weight-text-medium-lg: 500;
256
+ --letter-spacing-text-medium-lg: -0.01em;
257
+ --font-weight-text-medium-xl: 500;
258
+ --letter-spacing-text-medium-xl: -0.01em;
259
+ --font-weight-text-semibold-xs: 600;
260
+ --letter-spacing-text-semibold-xs: -0.01em;
261
+ --font-weight-text-semibold-sm: 600;
262
+ --letter-spacing-text-semibold-sm: -0.01em;
263
+ --font-weight-text-semibold-base: 600;
264
+ --letter-spacing-text-semibold-base: -0.01em;
265
+ --font-weight-text-semibold-lg: 600;
266
+ --letter-spacing-text-semibold-lg: -0.01em;
267
+ --font-weight-text-semibold-xl: 600;
268
+ --letter-spacing-text-semibold-xl: -0.01em;
269
+ --font-weight-heading-h7: 600;
270
+ --letter-spacing-heading-h7: 0;
271
+ --font-weight-heading-h6: 600;
272
+ --letter-spacing-heading-h6: 0;
273
+ --font-weight-heading-h5: 600;
274
+ --letter-spacing-heading-h5: 0;
275
+ --font-weight-heading-h4: 600;
276
+ --letter-spacing-heading-h4: 0;
277
+ --font-weight-heading-h3: 600;
278
+ --letter-spacing-heading-h3: 0;
279
+ --font-weight-heading-h2: 700;
280
+ --letter-spacing-heading-h2: 0;
281
+ --font-weight-heading-h1: 700;
282
+ --letter-spacing-heading-h1: 0;
283
+ --font-weight-display-sm: 700;
284
+ --letter-spacing-display-sm: 0;
285
+ --font-weight-display-md: 700;
286
+ --letter-spacing-display-md: 0;
287
+ --font-weight-display-lg: 700;
288
+ --letter-spacing-display-lg: 0;
289
+ --font-weight-label-sm: 500;
290
+ --letter-spacing-label-sm: 0;
291
+ --font-weight-label-md: 500;
292
+ --letter-spacing-label-md: 0;
293
+ --font-weight-label-lg: 500;
294
+ --letter-spacing-label-lg: 0;
295
+ --font-weight-label-semibold-sm: 600;
296
+ --letter-spacing-label-semibold-sm: 0;
297
+ --font-weight-label-semibold-md: 600;
298
+ --letter-spacing-label-semibold-md: 0;
299
+ --font-weight-label-semibold-lg: 600;
300
+ --letter-spacing-label-semibold-lg: 0;
301
+ }
302
+
303
+ .dark {
304
+ --color-bg-default: #1E232E;
305
+ --color-bg-subtle: #161A21;
306
+ --color-bg-strong: #000000;
307
+ --color-surface-default: #1E232E;
308
+ --color-surface-default-dim: #161A21;
309
+ --color-surface-default-hover: #252B39;
310
+ --color-surface-default-pressed: #363B4C;
311
+ --color-surface-default-disabled: #363B4C;
312
+ --color-surface-subtle: #252B39;
313
+ --color-surface-subtle-hover: #363B4C;
314
+ --color-surface-strong: #363B4C;
315
+ --color-surface-inverted: #F3F6F8;
316
+ --color-text-highlight: #FFFFFF;
317
+ --color-text-primary: #ECF0F2;
318
+ --color-text-primary-hover: #FFFFFF;
319
+ --color-text-primary-pressed: #FFFFFF;
320
+ --color-text-secondary: #A2AABA;
321
+ --color-text-secondary-hover: #C6D0DA;
322
+ --color-text-secondary-pressed: #C6D0DA;
323
+ --color-text-tertiary: #7E8597;
324
+ --color-text-tertiary-hover: #A2AABA;
325
+ --color-text-tertiary-pressed: #A2AABA;
326
+ --color-text-muted: #62697A;
327
+ --color-text-inverted: #000000;
328
+ --color-icon-highlight: #FFFFFF;
329
+ --color-icon-primary: #ECF0F2;
330
+ --color-icon-primary-hover: #FFFFFF;
331
+ --color-icon-primary-pressed: #FFFFFF;
332
+ --color-icon-secondary: #A2AABA;
333
+ --color-icon-secondary-hover: #C6D0DA;
334
+ --color-icon-secondary-pressed: #C6D0DA;
335
+ --color-icon-tertiary: #7E8597;
336
+ --color-icon-tertiary-hover: #A2AABA;
337
+ --color-icon-tertiary-pressed: #A2AABA;
338
+ --color-icon-muted: #62697A;
339
+ --color-icon-inverted: #000000;
340
+ --color-border-default: #3B4153;
341
+ --color-border-default-hover: #62697A;
342
+ --color-border-default-focus: #A2AABA;
343
+ --color-border-subtle: #252B39;
344
+ --color-border-medium: #62697A;
345
+ --color-border-strong: #FFFFFF;
346
+ --color-accent-primary: #00D5AA;
347
+ --color-accent-primary-hover: #12DFB6;
348
+ --color-accent-primary-pressed: #07C6A6;
349
+ --color-accent-primary-disabled: #123F3C;
350
+ --color-accent-primary-focus: #07C6A6;
351
+ --color-accent-primary-intense: #12DFB6;
352
+ --color-accent-primary-dim: #0F947E;
353
+ --color-accent-on-primary: #000000;
354
+ --color-accent-secondary: #7D4FFF;
355
+ --color-accent-secondary-intense: #9975FF;
356
+ --color-accent-secondary-dim: #7346F3;
357
+ --color-accent-secondary-hover: #9975FF;
358
+ --color-accent-secondary-pressed: #7346F3;
359
+ --color-accent-secondary-disabled: #3A1D7C;
360
+ --color-accent-secondary-focus: #9975FF;
361
+ --color-accent-on-secondary: #FFFFFF;
362
+ --color-status-success: #02D69C;
363
+ --color-status-success-hover: #0BDFA5;
364
+ --color-status-success-pressed: #00C890;
365
+ --color-status-success-disabled: #0D4431;
366
+ --color-status-success-intense: #0BDFA5;
367
+ --color-status-success-dim: #1B9674;
368
+ --color-status-warning: #FFAA00;
369
+ --color-status-warning-hover: #FF9D00;
370
+ --color-status-warning-pressed: #F9C127;
371
+ --color-status-warning-disabled: #4A3F2B;
372
+ --color-status-warning-intense: #FFAA00;
373
+ --color-status-warning-dim: #9F701A;
374
+ --color-status-danger: #DB0A2D;
375
+ --color-status-danger-hover: #E62848;
376
+ --color-status-danger-pressed: #D20625;
377
+ --color-status-danger-disabled: #5B121E;
378
+ --color-status-danger-intense: #EC3C56;
379
+ --color-status-danger-dim: #AF2239;
380
+ --color-status-danger-focus: #AF2239;
381
+ --color-status-info: #0095FF;
382
+ --color-status-info-hover: #20B1FF;
383
+ --color-status-info-pressed: #1087FF;
384
+ --color-status-info-disabled: #143A67;
385
+ --color-status-info-intense: #20B1FF;
386
+ --color-status-info-dim: #1672D0;
387
+ --color-static-white: #FFFFFF;
388
+ --color-static-black: #000000;
389
+ --shadow-none: none;
390
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
391
+ --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
392
+ --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
393
+ --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
394
+ --shadow-2xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
395
+ }