@designbasekorea/theme 0.1.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 (16) hide show
  1. package/dist/css/theme.css +388 -0
  2. package/dist/css/theme.css.map +1 -0
  3. package/dist/css/tokens/tokens.css +385 -0
  4. package/dist/index.d.ts +50 -0
  5. package/dist/index.d.ts.map +1 -0
  6. package/dist/index.esm.js +176 -0
  7. package/dist/index.js +187 -0
  8. package/dist/index.umd.js +193 -0
  9. package/dist/stories/ThemeTokens.stories.d.ts +6 -0
  10. package/dist/stories/ThemeTokens.stories.d.ts.map +1 -0
  11. package/package.json +48 -0
  12. package/scss/_reset.scss +245 -0
  13. package/scss/_semantic.scss +629 -0
  14. package/scss/_utilities.scss +919 -0
  15. package/scss/_variables.scss +330 -0
  16. package/scss/index.scss +12 -0
package/dist/css/tokens/tokens.css ADDED
@@ -0,0 +1,385 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 08 Sep 2025 07:22:42 GMT
4
+ */
5
+
6
+
7
+ :root {
8
+ --z-index-foundation-toast: 1030;
9
+ --z-index-foundation-tooltip: 1020;
10
+ --z-index-foundation-popover: 1010;
11
+ --z-index-foundation-modal: 1000;
12
+ --z-index-foundation-auto: auto;
13
+ --z-index-foundation-50: 50;
14
+ --z-index-foundation-40: 40;
15
+ --z-index-foundation-30: 30;
16
+ --z-index-foundation-20: 20;
17
+ --z-index-foundation-10: 10;
18
+ --z-index-foundation-0: 0;
19
+ --typography-foundation-line-height-loose: 2;
20
+ --typography-foundation-line-height-relaxed: 1.625;
21
+ --typography-foundation-line-height-normal: 1.5;
22
+ --typography-foundation-line-height-snug: 1.375;
23
+ --typography-foundation-line-height-tight: 1.25;
24
+ --typography-foundation-line-height-none: 1;
25
+ --typography-foundation-font-weight-extrabold: 800;
26
+ --typography-foundation-font-weight-bold: 700;
27
+ --typography-foundation-font-weight-semibold: 600;
28
+ --typography-foundation-font-weight-medium: 500;
29
+ --typography-foundation-font-weight-normal: 400;
30
+ --typography-foundation-font-weight-light: 300;
31
+ --typography-foundation-font-size-6xl: 60;
32
+ --typography-foundation-font-size-5xl: 48;
33
+ --typography-foundation-font-size-4xl: 36;
34
+ --typography-foundation-font-size-3xl: 30;
35
+ --typography-foundation-font-size-2xl: 24;
36
+ --typography-foundation-font-size-xl: 20;
37
+ --typography-foundation-font-size-lg: 18;
38
+ --typography-foundation-font-size-base: 16;
39
+ --typography-foundation-font-size-sm: 14;
40
+ --typography-foundation-font-size-xs: 12;
41
+ --typography-foundation-font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
42
+ --typography-foundation-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
43
+ --spacing-semantic-size-2xl: 5rem;
44
+ --spacing-foundation-96: 384;
45
+ --spacing-foundation-80: 320;
46
+ --spacing-foundation-72: 288;
47
+ --spacing-foundation-64: 256;
48
+ --spacing-foundation-60: 240;
49
+ --spacing-foundation-56: 224;
50
+ --spacing-foundation-52: 208;
51
+ --spacing-foundation-48: 192;
52
+ --spacing-foundation-44: 176;
53
+ --spacing-foundation-40: 160;
54
+ --spacing-foundation-36: 144;
55
+ --spacing-foundation-32: 128;
56
+ --spacing-foundation-28: 112;
57
+ --spacing-foundation-24: 96;
58
+ --spacing-foundation-20: 80;
59
+ --spacing-foundation-16: 64;
60
+ --spacing-foundation-14: 56;
61
+ --spacing-foundation-12: 48;
62
+ --spacing-foundation-11: 44;
63
+ --spacing-foundation-10: 40;
64
+ --spacing-foundation-9: 36;
65
+ --spacing-foundation-8: 32;
66
+ --spacing-foundation-7: 28;
67
+ --spacing-foundation-6: 24;
68
+ --spacing-foundation-5: 20;
69
+ --spacing-foundation-4: 16;
70
+ --spacing-foundation-3: 12;
71
+ --spacing-foundation-2: 8;
72
+ --spacing-foundation-1: 4;
73
+ --spacing-foundation-0: 0;
74
+ --opacity-foundation-100: 1;
75
+ --opacity-foundation-95: 0.95;
76
+ --opacity-foundation-90: 0.9;
77
+ --opacity-foundation-80: 0.8;
78
+ --opacity-foundation-75: 0.75;
79
+ --opacity-foundation-70: 0.7;
80
+ --opacity-foundation-60: 0.6;
81
+ --opacity-foundation-50: 0.5;
82
+ --opacity-foundation-40: 0.4;
83
+ --opacity-foundation-30: 0.3;
84
+ --opacity-foundation-25: 0.25;
85
+ --opacity-foundation-20: 0.2;
86
+ --opacity-foundation-10: 0.1;
87
+ --opacity-foundation-5: 0.05;
88
+ --opacity-foundation-0: 0;
89
+ --shadow-foundation-inner: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
90
+ --shadow-foundation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
91
+ --shadow-foundation-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
92
+ --shadow-foundation-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
93
+ --shadow-foundation-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
94
+ --shadow-foundation-base: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
95
+ --shadow-foundation-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
96
+ --shadow-foundation-none: 0px 0px 0px 0px rgba(0,0,0,0.2);
97
+ --color-semantic-component-action-secondary-bg: rgba(0, 0, 0, 0);
98
+ --color-foundation-black: #000000;
99
+ --color-foundation-white: #ffffff;
100
+ --color-foundation-purple-900: #49169c;
101
+ --color-foundation-purple-800: #5818bf;
102
+ --color-foundation-purple-700: #6a1ee3;
103
+ --color-foundation-purple-600: #7830f7;
104
+ --color-foundation-purple-500: #8a58ff;
105
+ --color-foundation-purple-400: #a385ff;
106
+ --color-foundation-purple-300: #c2b1ff;
107
+ --color-foundation-purple-200: #dbd4ff;
108
+ --color-foundation-purple-100: #ece8ff;
109
+ --color-foundation-purple-50: #f5f2ff;
110
+ --color-foundation-teal-900: #134e48;
111
+ --color-foundation-teal-800: #115e56;
112
+ --color-foundation-teal-700: #0f766b;
113
+ --color-foundation-teal-600: #0d9485;
114
+ --color-foundation-teal-500: #14b8a6;
115
+ --color-foundation-teal-400: #2dd4c2;
116
+ --color-foundation-teal-300: #5eeadb;
117
+ --color-foundation-teal-200: #99f6ec;
118
+ --color-foundation-teal-100: #ccfbf6;
119
+ --color-foundation-teal-50: #f0fdfc;
120
+ --color-foundation-green-900: #14532b;
121
+ --color-foundation-green-800: #166533;
122
+ --color-foundation-green-700: #15803c;
123
+ --color-foundation-green-600: #16a34a;
124
+ --color-foundation-green-500: #22c55e;
125
+ --color-foundation-green-400: #4ade80;
126
+ --color-foundation-green-300: #86efad;
127
+ --color-foundation-green-200: #bbf7d1;
128
+ --color-foundation-green-100: #dcfce8;
129
+ --color-foundation-green-50: #f0fdf5;
130
+ --color-foundation-yellow-900: #74470f;
131
+ --color-foundation-yellow-800: #89570a;
132
+ --color-foundation-yellow-700: #a67102;
133
+ --color-foundation-yellow-600: #d1b400;
134
+ --color-foundation-yellow-500: #ffd600;
135
+ --color-foundation-yellow-400: #ffe50d;
136
+ --color-foundation-yellow-300: #fff441;
137
+ --color-foundation-yellow-200: #fffd86;
138
+ --color-foundation-yellow-100: #feffc1;
139
+ --color-foundation-yellow-50: #ffffe7;
140
+ --color-foundation-orange-900: #82270c;
141
+ --color-foundation-orange-800: #82270c;
142
+ --color-foundation-orange-700: #cc3802;
143
+ --color-foundation-orange-600: #ff5100;
144
+ --color-foundation-orange-500: #ff6b0a;
145
+ --color-foundation-orange-400: #ff8c32;
146
+ --color-foundation-orange-300: #ffb66d;
147
+ --color-foundation-orange-200: #ffd5a5;
148
+ --color-foundation-orange-100: #ffecd3;
149
+ --color-foundation-orange-50: #fff7ec;
150
+ --color-foundation-red-900: #7f1d1d;
151
+ --color-foundation-red-800: #991b1b;
152
+ --color-foundation-red-700: #b91c1c;
153
+ --color-foundation-red-600: #dc2626;
154
+ --color-foundation-red-500: #ef4444;
155
+ --color-foundation-red-400: #f87171;
156
+ --color-foundation-red-300: #fca5a5;
157
+ --color-foundation-red-200: #fecaca;
158
+ --color-foundation-red-100: #fee2e2;
159
+ --color-foundation-red-50: #fef2f2;
160
+ --color-foundation-blue-900: #0d4b9b;
161
+ --color-foundation-blue-800: #0855c5;
162
+ --color-foundation-blue-700: #006fff;
163
+ --color-foundation-blue-600: #0683ff;
164
+ --color-foundation-blue-500: #1ea2ff;
165
+ --color-foundation-blue-400: #48c3ff;
166
+ --color-foundation-blue-300: #83d9ff;
167
+ --color-foundation-blue-200: #b5e7ff;
168
+ --color-foundation-blue-100: #d6f0ff;
169
+ --color-foundation-blue-50: #edf9ff;
170
+ --color-foundation-neutral-white: #ffffff;
171
+ --color-foundation-neutral-1100: #000000;
172
+ --color-foundation-neutral-1000: #17191a;
173
+ --color-foundation-neutral-900: #2f3133;
174
+ --color-foundation-neutral-800: #464a4d;
175
+ --color-foundation-neutral-700: #5e6366;
176
+ --color-foundation-neutral-600: #757b80;
177
+ --color-foundation-neutral-500: #8c9499;
178
+ --color-foundation-neutral-400: #a4adb2;
179
+ --color-foundation-neutral-300: #bbc5cc;
180
+ --color-foundation-neutral-200: #e8eef2;
181
+ --color-foundation-neutral-100: #f2f8fc;
182
+ --color-foundation-neutral-50: #f8fafc;
183
+ --color-foundation-neutral-0: #ffffff;
184
+ --border-radius-foundation-full: 9999;
185
+ --border-radius-foundation-3xl: 24;
186
+ --border-radius-foundation-2xl: 16;
187
+ --border-radius-foundation-xl: 12;
188
+ --border-radius-foundation-lg: 8;
189
+ --border-radius-foundation-md: 6;
190
+ --border-radius-foundation-base: 4;
191
+ --border-radius-foundation-sm: 2;
192
+ --border-radius-foundation-none: 0;
193
+ --spacing-semantic-size-xl: var(--spacing-foundation-10);
194
+ --spacing-semantic-size-lg: var(--spacing-foundation-8);
195
+ --spacing-semantic-size-md: var(--spacing-foundation-6);
196
+ --spacing-semantic-size-sm: var(--spacing-foundation-5);
197
+ --spacing-semantic-size-xs: var(--spacing-foundation-4);
198
+ --spacing-semantic-gap-xl: var(--spacing-foundation-6);
199
+ --spacing-semantic-gap-l: var(--spacing-foundation-4);
200
+ --spacing-semantic-gap-m: var(--spacing-foundation-3);
201
+ --spacing-semantic-gap-s: var(--spacing-foundation-2);
202
+ --spacing-semantic-gap-xs: var(--spacing-foundation-1);
203
+ --spacing-semantic-padding-xl: var(--spacing-foundation-8);
204
+ --spacing-semantic-padding-l: var(--spacing-foundation-6);
205
+ --spacing-semantic-padding-m: var(--spacing-foundation-4);
206
+ --spacing-semantic-padding-s: var(--spacing-foundation-3);
207
+ --spacing-semantic-padding-xs: var(--spacing-foundation-2);
208
+ --spacing-semantic-padding-xxs: var(--spacing-foundation-1);
209
+ --spacing-semantic-margin-xxl: var(--spacing-foundation-8);
210
+ --spacing-semantic-margin-xl: var(--spacing-foundation-6);
211
+ --spacing-semantic-margin-l: var(--spacing-foundation-4);
212
+ --spacing-semantic-margin-m: var(--spacing-foundation-3);
213
+ --spacing-semantic-margin-s: var(--spacing-foundation-2);
214
+ --spacing-semantic-margin-xs: var(--spacing-foundation-1);
215
+ --opacity-semantic-focus: var(--opacity-foundation-90);
216
+ --opacity-semantic-hover: var(--opacity-foundation-80);
217
+ --opacity-semantic-overlay-dark: var(--opacity-foundation-75);
218
+ --opacity-semantic-overlay-medium: var(--opacity-foundation-50);
219
+ --opacity-semantic-overlay-light: var(--opacity-foundation-25);
220
+ --opacity-semantic-disabled: var(--opacity-foundation-50);
221
+ --shadow-semantic-tooltip-default: var(--shadow-foundation-sm);
222
+ --shadow-semantic-dropdown-default: var(--shadow-foundation-md);
223
+ --shadow-semantic-modal-content: var(--shadow-foundation-2xl);
224
+ --shadow-semantic-modal-overlay: var(--shadow-foundation-xl);
225
+ --shadow-semantic-card-elevated: var(--shadow-foundation-lg);
226
+ --shadow-semantic-card-hover: var(--shadow-foundation-md);
227
+ --shadow-semantic-card-default: var(--shadow-foundation-base);
228
+ --shadow-semantic-button-active: var(--shadow-foundation-inner);
229
+ --shadow-semantic-button-hover: var(--shadow-foundation-sm);
230
+ --shadow-semantic-button-default: var(--shadow-foundation-none);
231
+ --color-semantic-component-action-danger-icon-disabled: var(--color-foundation-neutral-500);
232
+ --color-semantic-component-action-danger-icon-selected: var(--color-foundation-neutral-white);
233
+ --color-semantic-component-action-danger-icon: var(--color-foundation-neutral-white);
234
+ --color-semantic-component-action-danger-text-disabled: var(--color-foundation-neutral-500);
235
+ --color-semantic-component-action-danger-text-selected: var(--color-foundation-neutral-white);
236
+ --color-semantic-component-action-danger-text-hover: var(--color-foundation-neutral-white);
237
+ --color-semantic-component-action-danger-text: var(--color-foundation-neutral-white);
238
+ --color-semantic-component-action-danger-border-disabled: var(--color-foundation-neutral-300);
239
+ --color-semantic-component-action-danger-border-selected: var(--color-foundation-red-600);
240
+ --color-semantic-component-action-danger-border-active: var(--color-foundation-red-800);
241
+ --color-semantic-component-action-danger-border-hover: var(--color-foundation-red-700);
242
+ --color-semantic-component-action-danger-border: var(--color-foundation-red-600);
243
+ --color-semantic-component-action-danger-bg-disabled: var(--color-foundation-neutral-300);
244
+ --color-semantic-component-action-danger-bg-selected: var(--color-foundation-red-600);
245
+ --color-semantic-component-action-danger-bg-active: var(--color-foundation-red-800);
246
+ --color-semantic-component-action-danger-bg-hover: var(--color-foundation-red-700);
247
+ --color-semantic-component-action-danger-bg: var(--color-foundation-red-600);
248
+ --color-semantic-component-action-secondary-icon-disabled: var(--color-foundation-neutral-400);
249
+ --color-semantic-component-action-secondary-icon-selected: var(--color-foundation-neutral-800);
250
+ --color-semantic-component-action-secondary-icon: var(--color-foundation-neutral-600);
251
+ --color-semantic-component-action-secondary-text-disabled: var(--color-foundation-neutral-400);
252
+ --color-semantic-component-action-secondary-text-selected: var(--color-foundation-neutral-900);
253
+ --color-semantic-component-action-secondary-text-hover: var(--color-foundation-neutral-900);
254
+ --color-semantic-component-action-secondary-text: var(--color-foundation-neutral-700);
255
+ --color-semantic-component-action-secondary-border-disabled: var(--color-foundation-neutral-200);
256
+ --color-semantic-component-action-secondary-border-selected: var(--color-foundation-neutral-400);
257
+ --color-semantic-component-action-secondary-border-active: var(--color-foundation-neutral-500);
258
+ --color-semantic-component-action-secondary-border-hover: var(--color-foundation-neutral-400);
259
+ --color-semantic-component-action-secondary-border: var(--color-foundation-neutral-300);
260
+ --color-semantic-component-action-secondary-bg-disabled: var(--color-foundation-neutral-50);
261
+ --color-semantic-component-action-secondary-bg-selected: var(--color-foundation-neutral-200);
262
+ --color-semantic-component-action-secondary-bg-active: var(--color-foundation-neutral-200);
263
+ --color-semantic-component-action-secondary-bg-hover: var(--color-foundation-neutral-100);
264
+ --color-semantic-component-action-primary-icon-disabled: var(--color-foundation-neutral-500);
265
+ --color-semantic-component-action-primary-icon-selected: var(--color-foundation-neutral-white);
266
+ --color-semantic-component-action-primary-icon: var(--color-foundation-neutral-white);
267
+ --color-semantic-component-action-primary-text-disabled: var(--color-foundation-neutral-500);
268
+ --color-semantic-component-action-primary-text-selected: var(--color-foundation-neutral-white);
269
+ --color-semantic-component-action-primary-text-hover: var(--color-foundation-neutral-white);
270
+ --color-semantic-component-action-primary-text: var(--color-foundation-neutral-white);
271
+ --color-semantic-component-action-primary-border-disabled: var(--color-foundation-neutral-300);
272
+ --color-semantic-component-action-primary-border-selected: var(--color-foundation-blue-600);
273
+ --color-semantic-component-action-primary-border-active: var(--color-foundation-blue-800);
274
+ --color-semantic-component-action-primary-border-hover: var(--color-foundation-blue-700);
275
+ --color-semantic-component-action-primary-border: var(--color-foundation-blue-600);
276
+ --color-semantic-component-action-primary-bg-disabled: var(--color-foundation-neutral-300);
277
+ --color-semantic-component-action-primary-bg-selected: var(--color-foundation-blue-600);
278
+ --color-semantic-component-action-primary-bg-active: var(--color-foundation-blue-800);
279
+ --color-semantic-component-action-primary-bg-hover: var(--color-foundation-blue-700);
280
+ --color-semantic-component-action-primary-bg: var(--color-foundation-blue-600);
281
+ --color-semantic-component-action-interactive-icon-disabled: var(--color-foundation-neutral-400);
282
+ --color-semantic-component-action-interactive-icon-selected: var(--color-foundation-neutral-white);
283
+ --color-semantic-component-action-interactive-icon: var(--color-foundation-neutral-600);
284
+ --color-semantic-component-action-interactive-text-disabled: var(--color-foundation-neutral-400);
285
+ --color-semantic-component-action-interactive-text-selected: var(--color-foundation-neutral-white);
286
+ --color-semantic-component-action-interactive-text-hover: var(--color-foundation-neutral-900);
287
+ --color-semantic-component-action-interactive-text: var(--color-foundation-neutral-900);
288
+ --color-semantic-component-action-interactive-border-disabled: var(--color-foundation-neutral-200);
289
+ --color-semantic-component-action-interactive-border-selected: var(--color-foundation-blue-600);
290
+ --color-semantic-component-action-interactive-border-active: var(--color-foundation-neutral-500);
291
+ --color-semantic-component-action-interactive-border-hover: var(--color-foundation-neutral-400);
292
+ --color-semantic-component-action-interactive-border: var(--color-foundation-neutral-300);
293
+ --color-semantic-component-action-interactive-bg-disabled: var(--color-foundation-neutral-100);
294
+ --color-semantic-component-action-interactive-bg-selected: var(--color-foundation-blue-600);
295
+ --color-semantic-component-action-interactive-bg-active: var(--color-foundation-neutral-100);
296
+ --color-semantic-component-action-interactive-bg-hover: var(--color-foundation-neutral-50);
297
+ --color-semantic-component-action-interactive-bg: var(--color-foundation-neutral-white);
298
+ --border-radius-semantic-action-pill: var(--border-radius-foundation-full);
299
+ --border-radius-semantic-action-lg: var(--border-radius-foundation-md);
300
+ --border-radius-semantic-action-md: var(--border-radius-foundation-sm);
301
+ --border-radius-semantic-action-sm: var(--border-radius-foundation-sm);
302
+ --border-radius-semantic-checkbox-lg: var(--border-radius-foundation-md);
303
+ --border-radius-semantic-checkbox-md: var(--border-radius-foundation-sm);
304
+ --border-radius-semantic-checkbox-sm: var(--border-radius-foundation-sm);
305
+ --border-radius-semantic-modal-lg: var(--border-radius-foundation-xl);
306
+ --border-radius-semantic-modal-md: var(--border-radius-foundation-lg);
307
+ --border-radius-semantic-modal-sm: var(--border-radius-foundation-md);
308
+ --border-radius-semantic-card-lg: var(--border-radius-foundation-lg);
309
+ --border-radius-semantic-card-md: var(--border-radius-foundation-md);
310
+ --border-radius-semantic-card-sm: var(--border-radius-foundation-base);
311
+ --border-radius-semantic-input-lg: var(--border-radius-foundation-md);
312
+ --border-radius-semantic-input-md: var(--border-radius-foundation-base);
313
+ --border-radius-semantic-input-sm: var(--border-radius-foundation-sm);
314
+ --border-radius-semantic-button-pill: var(--border-radius-foundation-full);
315
+ --border-radius-semantic-button-lg: var(--border-radius-foundation-md);
316
+ --border-radius-semantic-button-md: var(--border-radius-foundation-base);
317
+ --border-radius-semantic-button-sm: var(--border-radius-foundation-sm);
318
+ }
319
+
320
+ [data-theme="dark"] {
321
+ --color-semantic-component-button-secondary-bg: rgba(0, 0, 0, 0);
322
+ --color-semantic-background-overlay: rgba(0, 0, 0, 0.7);
323
+ --color-semantic-component-input-placeholder: var(--color-foundation-neutral-500);
324
+ --color-semantic-component-input-text: var(--color-foundation-neutral-100);
325
+ --color-semantic-component-input-border-error: var(--color-foundation-red-500);
326
+ --color-semantic-component-input-border-focus: var(--color-foundation-blue-500);
327
+ --color-semantic-component-input-border-hover: var(--color-foundation-neutral-500);
328
+ --color-semantic-component-input-border: var(--color-foundation-neutral-600);
329
+ --color-semantic-component-input-bg-disabled: var(--color-foundation-neutral-900);
330
+ --color-semantic-component-input-bg: var(--color-foundation-neutral-800);
331
+ --color-semantic-component-button-danger-text: var(--color-foundation-neutral-white);
332
+ --color-semantic-component-button-danger-bg-active: var(--color-foundation-red-700);
333
+ --color-semantic-component-button-danger-bg-hover: var(--color-foundation-red-500);
334
+ --color-semantic-component-button-danger-bg: var(--color-foundation-red-600);
335
+ --color-semantic-component-button-tertiary-text-hover: var(--color-foundation-neutral-100);
336
+ --color-semantic-component-button-tertiary-text: var(--color-foundation-neutral-200);
337
+ --color-semantic-component-button-tertiary-border-hover: var(--color-foundation-neutral-500);
338
+ --color-semantic-component-button-tertiary-border: var(--color-foundation-neutral-600);
339
+ --color-semantic-component-button-tertiary-bg-active: var(--color-foundation-neutral-600);
340
+ --color-semantic-component-button-tertiary-bg-hover: var(--color-foundation-neutral-700);
341
+ --color-semantic-component-button-tertiary-bg: var(--color-foundation-neutral-800);
342
+ --color-semantic-component-button-secondary-text-hover: var(--color-foundation-neutral-100);
343
+ --color-semantic-component-button-secondary-text: var(--color-foundation-neutral-300);
344
+ --color-semantic-component-button-secondary-border-hover: var(--color-foundation-neutral-500);
345
+ --color-semantic-component-button-secondary-border: var(--color-foundation-neutral-600);
346
+ --color-semantic-component-button-secondary-bg-active: var(--color-foundation-neutral-700);
347
+ --color-semantic-component-button-secondary-bg-hover: var(--color-foundation-neutral-800);
348
+ --color-semantic-component-button-primary-text-disabled: var(--color-foundation-neutral-500);
349
+ --color-semantic-component-button-primary-text: var(--color-foundation-neutral-white);
350
+ --color-semantic-component-button-primary-bg-disabled: var(--color-foundation-neutral-700);
351
+ --color-semantic-component-button-primary-bg-active: var(--color-foundation-blue-800);
352
+ --color-semantic-component-button-primary-bg-hover: var(--color-foundation-blue-600);
353
+ --color-semantic-component-button-primary-bg: var(--color-foundation-blue-700);
354
+ --color-semantic-component-icon-inverse: var(--color-foundation-neutral-900);
355
+ --color-semantic-component-icon-muted: var(--color-foundation-neutral-500);
356
+ --color-semantic-component-icon-info: var(--color-foundation-blue-400);
357
+ --color-semantic-component-icon-danger: var(--color-foundation-red-400);
358
+ --color-semantic-component-icon-warning: var(--color-foundation-yellow-400);
359
+ --color-semantic-component-icon-success: var(--color-foundation-green-400);
360
+ --color-semantic-component-icon-secondary: var(--color-foundation-neutral-300);
361
+ --color-semantic-component-icon-primary: var(--color-foundation-neutral-white);
362
+ --color-semantic-border-focus: var(--color-foundation-blue-500);
363
+ --color-semantic-border-muted: var(--color-foundation-neutral-800);
364
+ --color-semantic-border-secondary: var(--color-foundation-neutral-600);
365
+ --color-semantic-border-primary: var(--color-foundation-neutral-700);
366
+ --color-semantic-background-inverse: var(--color-foundation-neutral-white);
367
+ --color-semantic-background-tertiary: var(--color-foundation-neutral-700);
368
+ --color-semantic-background-secondary: var(--color-foundation-neutral-800);
369
+ --color-semantic-background-primary: var(--color-foundation-neutral-900);
370
+ --color-semantic-text-link-hover: var(--color-foundation-blue-300);
371
+ --color-semantic-text-link: var(--color-foundation-blue-400);
372
+ --color-semantic-text-inverse: var(--color-foundation-neutral-900);
373
+ --color-semantic-text-disabled: var(--color-foundation-neutral-600);
374
+ --color-semantic-text-muted: var(--color-foundation-neutral-400);
375
+ --color-semantic-text-secondary: var(--color-foundation-neutral-300);
376
+ --color-semantic-text-primary: var(--color-foundation-neutral-100);
377
+ --color-semantic-info-background: var(--color-foundation-blue-900);
378
+ --color-semantic-info-foreground: var(--color-foundation-blue-400);
379
+ --color-semantic-error-background: var(--color-foundation-red-900);
380
+ --color-semantic-error-foreground: var(--color-foundation-red-400);
381
+ --color-semantic-warning-background: var(--color-foundation-yellow-900);
382
+ --color-semantic-warning-foreground: var(--color-foundation-yellow-400);
383
+ --color-semantic-success-background: var(--color-foundation-green-900);
384
+ --color-semantic-success-foreground: var(--color-foundation-green-400);
385
+ }
package/dist/index.d.ts ADDED
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Designbase Theme 메인 엔트리 포인트
3
+ *
4
+ * 목적: 테마 관련 TypeScript 유틸리티와 타입 정의 제공
5
+ * 기능: CSS 변수 헬퍼, 테마 전환, 유틸리티 함수
6
+ * 사용법: import { setTheme, getTheme } from '@designbase/theme'
7
+ */
8
+ export type Theme = 'light' | 'dark';
9
+ /**
10
+ * 현재 활성 테마 가져오기
11
+ */
12
+ export declare function getTheme(): Theme;
13
+ /**
14
+ * 테마 설정
15
+ */
16
+ export declare function setTheme(theme: Theme): void;
17
+ /**
18
+ * 저장된 테마 불러오기
19
+ */
20
+ export declare function loadSavedTheme(): Theme;
21
+ /**
22
+ * 테마 자동 초기화
23
+ */
24
+ export declare function initializeTheme(): void;
25
+ /**
26
+ * CSS 변수 값 가져오기
27
+ */
28
+ export declare function getCSSVariable(variableName: string): string;
29
+ /**
30
+ * CSS 변수 설정
31
+ */
32
+ export declare function setCSSVariable(variableName: string, value: string): void;
33
+ /**
34
+ * 테마 토글
35
+ */
36
+ export declare function toggleTheme(): Theme;
37
+ /**
38
+ * 테마 변경 감지 훅 (React 등에서 사용)
39
+ */
40
+ export declare function createThemeWatcher(callback: (theme: Theme) => void): () => void;
41
+ /**
42
+ * 토큰 CSS 파일들을 동적으로 로드
43
+ * @param basePath 토큰 CSS 파일의 기본 경로 (기본값: @designbase/tokens/dist/css)
44
+ */
45
+ export declare function loadTokens(basePath?: string): Promise<void>;
46
+ /**
47
+ * 토큰 CSS가 로드되었는지 확인
48
+ */
49
+ export declare function areTokensLoaded(): boolean;
50
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC;;GAEG;AACH,wBAAgB,QAAQ,IAAI,KAAK,CAahC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAc3C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,KAAK,CAoBtC;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAGtC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAO3D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAMxE;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,KAAK,CAKnC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,MAAM,IAAI,CAwB/E;AAYD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,QAAQ,GAAE,MAAsC,GAAG,OAAO,CAAC,IAAI,CAAC,CAmC1F;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,OAAO,CAOzC"}
package/dist/index.esm.js ADDED
@@ -0,0 +1,176 @@
1
+ /**
2
+ * Designbase Theme 메인 엔트리 포인트
3
+ *
4
+ * 목적: 테마 관련 TypeScript 유틸리티와 타입 정의 제공
5
+ * 기능: CSS 변수 헬퍼, 테마 전환, 유틸리티 함수
6
+ * 사용법: import { setTheme, getTheme } from '@designbase/theme'
7
+ */
8
+ /**
9
+ * 현재 활성 테마 가져오기
10
+ */
11
+ function getTheme() {
12
+ if (typeof document === 'undefined') {
13
+ return 'light';
14
+ }
15
+ const element = document.documentElement;
16
+ const themeAttr = element.getAttribute('data-theme');
17
+ if (themeAttr === 'dark') {
18
+ return themeAttr;
19
+ }
20
+ return 'light';
21
+ }
22
+ /**
23
+ * 테마 설정
24
+ */
25
+ function setTheme(theme) {
26
+ if (typeof document === 'undefined') {
27
+ return;
28
+ }
29
+ document.documentElement.setAttribute('data-theme', theme);
30
+ // 로컬 스토리지에 저장
31
+ try {
32
+ localStorage.setItem('designbase-theme', theme);
33
+ }
34
+ catch (error) {
35
+ // 로컬 스토리지를 사용할 수 없는 환경
36
+ console.warn('Cannot save theme preference to localStorage');
37
+ }
38
+ }
39
+ /**
40
+ * 저장된 테마 불러오기
41
+ */
42
+ function loadSavedTheme() {
43
+ if (typeof document === 'undefined') {
44
+ return 'light';
45
+ }
46
+ try {
47
+ const savedTheme = localStorage.getItem('designbase-theme');
48
+ if (savedTheme && ['light', 'dark'].includes(savedTheme)) {
49
+ return savedTheme;
50
+ }
51
+ }
52
+ catch (error) {
53
+ // 로컬 스토리지를 사용할 수 없는 환경
54
+ }
55
+ // 시스템 다크 모드 확인
56
+ if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
57
+ return 'dark';
58
+ }
59
+ return 'light';
60
+ }
61
+ /**
62
+ * 테마 자동 초기화
63
+ */
64
+ function initializeTheme() {
65
+ const savedTheme = loadSavedTheme();
66
+ setTheme(savedTheme);
67
+ }
68
+ /**
69
+ * CSS 변수 값 가져오기
70
+ */
71
+ function getCSSVariable(variableName) {
72
+ if (typeof document === 'undefined') {
73
+ return '';
74
+ }
75
+ const computedStyle = getComputedStyle(document.documentElement);
76
+ return computedStyle.getPropertyValue(`--${variableName}`).trim();
77
+ }
78
+ /**
79
+ * CSS 변수 설정
80
+ */
81
+ function setCSSVariable(variableName, value) {
82
+ if (typeof document === 'undefined') {
83
+ return;
84
+ }
85
+ document.documentElement.style.setProperty(`--${variableName}`, value);
86
+ }
87
+ /**
88
+ * 테마 토글
89
+ */
90
+ function toggleTheme() {
91
+ const currentTheme = getTheme();
92
+ const newTheme = currentTheme === 'light' ? 'dark' : 'light';
93
+ setTheme(newTheme);
94
+ return newTheme;
95
+ }
96
+ /**
97
+ * 테마 변경 감지 훅 (React 등에서 사용)
98
+ */
99
+ function createThemeWatcher(callback) {
100
+ if (typeof document === 'undefined') {
101
+ return () => { };
102
+ }
103
+ const observer = new MutationObserver((mutations) => {
104
+ mutations.forEach((mutation) => {
105
+ if (mutation.type === 'attributes' &&
106
+ mutation.attributeName === 'data-theme') {
107
+ const newTheme = getTheme();
108
+ callback(newTheme);
109
+ }
110
+ });
111
+ });
112
+ observer.observe(document.documentElement, {
113
+ attributes: true,
114
+ attributeFilter: ['data-theme'],
115
+ });
116
+ // cleanup 함수 반환
117
+ return () => observer.disconnect();
118
+ }
119
+ // 브라우저 환경에서 자동 초기화
120
+ if (typeof document !== 'undefined') {
121
+ // DOM이 로드된 후 실행
122
+ if (document.readyState === 'loading') {
123
+ document.addEventListener('DOMContentLoaded', initializeTheme);
124
+ }
125
+ else {
126
+ initializeTheme();
127
+ }
128
+ }
129
+ /**
130
+ * 토큰 CSS 파일들을 동적으로 로드
131
+ * @param basePath 토큰 CSS 파일의 기본 경로 (기본값: @designbase/tokens/dist/css)
132
+ */
133
+ function loadTokens(basePath = '@designbase/tokens/dist/css') {
134
+ return new Promise((resolve) => {
135
+ if (typeof document === 'undefined') {
136
+ resolve();
137
+ return;
138
+ }
139
+ // 1) 테마 CSS가 이미 토큰을 병합 포함하는지 빠른 확인
140
+ const themeLink = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
141
+ .find((l) => typeof l.getAttribute === 'function' && /theme\.css$/.test(l.getAttribute('href') || ''));
142
+ if (themeLink) {
143
+ // theme.css 상단에 토큰이 병합되어 배포되는 경우 추가 로드 불필요
144
+ resolve();
145
+ return;
146
+ }
147
+ // 2) 병합되어 있지 않다면 단일 tokens.css 만 로드 (dark는 data-theme="dark"로 오버라이드됨)
148
+ const href = `${basePath}/tokens.css`;
149
+ const existingLink = document.querySelector(`link[href="${href}"]`);
150
+ if (existingLink) {
151
+ resolve();
152
+ return;
153
+ }
154
+ const link = document.createElement('link');
155
+ link.rel = 'stylesheet';
156
+ link.href = href;
157
+ link.onload = () => resolve();
158
+ link.onerror = () => {
159
+ console.warn(`Failed to load token CSS: ${href}`);
160
+ resolve();
161
+ };
162
+ document.head.appendChild(link);
163
+ });
164
+ }
165
+ /**
166
+ * 토큰 CSS가 로드되었는지 확인
167
+ */
168
+ function areTokensLoaded() {
169
+ if (typeof document === 'undefined') {
170
+ return false;
171
+ }
172
+ const tokenLinks = document.querySelectorAll('link[href*="tokens"]');
173
+ return tokenLinks.length > 0;
174
+ }
175
+
176
+ export { areTokensLoaded, createThemeWatcher, getCSSVariable, getTheme, initializeTheme, loadSavedTheme, loadTokens, setCSSVariable, setTheme, toggleTheme };