@idbrnd/design-system 2.2.0 → 2.3.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.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @idbrnd/design-system
2
2
 
3
- ![Version](https://img.shields.io/badge/version-2.2.0-4B5FE1?style=flat-square)
3
+ ![Version](https://img.shields.io/badge/version-2.3.0-4B5FE1?style=flat-square)
4
4
  ![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react&logoColor=white)
5
5
  ![Vite](https://img.shields.io/badge/Vite-7.3.0-646CFF?style=flat-square&logo=vite&logoColor=white)
6
6
  ![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=flat-square&logo=typescript&logoColor=white)
@@ -0,0 +1,355 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --1: 1px;
7
+ --2: 2px;
8
+ --4: 4px;
9
+ --6: 6px;
10
+ --8: 8px;
11
+ --12: 12px;
12
+ --16: 16px;
13
+ --20: 20px;
14
+ --24: 24px;
15
+ --32: 32px;
16
+ --40: 40px;
17
+ --44: 44px;
18
+ --48: 48px;
19
+ --64: 64px;
20
+ --128: 128px;
21
+ --999: 999px;
22
+ --main-5: rgb(247, 249, 255);
23
+ --main-5-rgb: 247, 249, 255;
24
+ --main-10: rgb(237, 241, 255);
25
+ --main-10-rgb: 237, 241, 255;
26
+ --main-15: rgb(212, 221, 255);
27
+ --main-15-rgb: 212, 221, 255;
28
+ --main-20: rgb(177, 194, 255);
29
+ --main-20-rgb: 177, 194, 255;
30
+ --main-30: rgb(141, 166, 255);
31
+ --main-30-rgb: 141, 166, 255;
32
+ --main-40: rgb(107, 139, 255);
33
+ --main-40-rgb: 107, 139, 255;
34
+ --main-50: rgb(74, 113, 255);
35
+ --main-50-rgb: 74, 113, 255;
36
+ --main-60: rgb(63, 96, 217);
37
+ --main-60-rgb: 63, 96, 217;
38
+ --main-70: rgb(53, 80, 181);
39
+ --main-70-rgb: 53, 80, 181;
40
+ --main-80: rgb(42, 64, 145);
41
+ --main-80-rgb: 42, 64, 145;
42
+ --main-90: rgb(33, 51, 115);
43
+ --main-90-rgb: 33, 51, 115;
44
+ --green-5: rgb(230, 250, 243);
45
+ --green-5-rgb: 230, 250, 243;
46
+ --green-10: rgb(194, 243, 227);
47
+ --green-10-rgb: 194, 243, 227;
48
+ --green-20: rgb(145, 233, 204);
49
+ --green-20-rgb: 145, 233, 204;
50
+ --green-30: rgb(94, 223, 181);
51
+ --green-30-rgb: 94, 223, 181;
52
+ --green-40: rgb(46, 213, 158);
53
+ --green-40-rgb: 46, 213, 158;
54
+ --green-50: rgb(0, 204, 137);
55
+ --green-50-rgb: 0, 204, 137;
56
+ --green-60: rgb(0, 173, 116);
57
+ --green-60-rgb: 0, 173, 116;
58
+ --green-70: rgb(0, 145, 97);
59
+ --green-70-rgb: 0, 145, 97;
60
+ --green-80: rgb(0, 116, 78);
61
+ --green-80-rgb: 0, 116, 78;
62
+ --green-90: rgb(0, 92, 62);
63
+ --green-90-rgb: 0, 92, 62;
64
+ --blue-5: rgb(235, 240, 255);
65
+ --blue-5-rgb: 235, 240, 255;
66
+ --blue-10: rgb(206, 218, 255);
67
+ --blue-10-rgb: 206, 218, 255;
68
+ --blue-20: rgb(167, 189, 255);
69
+ --blue-20-rgb: 167, 189, 255;
70
+ --blue-30: rgb(126, 159, 255);
71
+ --blue-30-rgb: 126, 159, 255;
72
+ --blue-40: rgb(88, 130, 255);
73
+ --blue-40-rgb: 88, 130, 255;
74
+ --blue-50: rgb(51, 102, 255);
75
+ --blue-50-rgb: 51, 102, 255;
76
+ --blue-60: rgb(43, 87, 217);
77
+ --blue-60-rgb: 43, 87, 217;
78
+ --blue-70: rgb(36, 72, 181);
79
+ --blue-70-rgb: 36, 72, 181;
80
+ --blue-80: rgb(29, 58, 145);
81
+ --blue-80-rgb: 29, 58, 145;
82
+ --blue-90: rgb(23, 46, 115);
83
+ --blue-90-rgb: 23, 46, 115;
84
+ --red-5: rgb(255, 235, 237);
85
+ --red-5-rgb: 255, 235, 237;
86
+ --red-10: rgb(255, 206, 212);
87
+ --red-10-rgb: 255, 206, 212;
88
+ --red-20: rgb(255, 167, 178);
89
+ --red-20-rgb: 255, 167, 178;
90
+ --red-30: rgb(255, 126, 142);
91
+ --red-30-rgb: 255, 126, 142;
92
+ --red-40: rgb(255, 88, 107);
93
+ --red-40-rgb: 255, 88, 107;
94
+ --red-50: rgb(255, 51, 75);
95
+ --red-50-rgb: 255, 51, 75;
96
+ --red-60: rgb(217, 43, 64);
97
+ --red-60-rgb: 217, 43, 64;
98
+ --red-70: rgb(181, 36, 53);
99
+ --red-70-rgb: 181, 36, 53;
100
+ --red-80: rgb(145, 29, 43);
101
+ --red-80-rgb: 145, 29, 43;
102
+ --red-90: rgb(115, 23, 34);
103
+ --red-90-rgb: 115, 23, 34;
104
+ --orange-5: rgb(255, 247, 230);
105
+ --orange-5-rgb: 255, 247, 230;
106
+ --orange-10: rgb(255, 235, 194);
107
+ --orange-10-rgb: 255, 235, 194;
108
+ --orange-20: rgb(255, 218, 145);
109
+ --orange-20-rgb: 255, 218, 145;
110
+ --orange-30: rgb(255, 201, 94);
111
+ --orange-30-rgb: 255, 201, 94;
112
+ --orange-40: rgb(255, 185, 46);
113
+ --orange-40-rgb: 255, 185, 46;
114
+ --orange-50: rgb(255, 170, 0);
115
+ --orange-50-rgb: 255, 170, 0;
116
+ --orange-60: rgb(217, 145, 0);
117
+ --orange-60-rgb: 217, 145, 0;
118
+ --orange-70: rgb(181, 121, 0);
119
+ --orange-70-rgb: 181, 121, 0;
120
+ --orange-80: rgb(145, 97, 0);
121
+ --orange-80-rgb: 145, 97, 0;
122
+ --orange-90: rgb(115, 76, 0);
123
+ --orange-90-rgb: 115, 76, 0;
124
+ --gray-5: rgb(247, 247, 248);
125
+ --gray-5-rgb: 247, 247, 248;
126
+ --gray-10: rgb(244, 244, 245);
127
+ --gray-10-rgb: 244, 244, 245;
128
+ --gray-15: rgb(234, 235, 236);
129
+ --gray-15-rgb: 234, 235, 236;
130
+ --gray-20: rgb(219, 220, 223);
131
+ --gray-20-rgb: 219, 220, 223;
132
+ --gray-30: rgb(194, 196, 200);
133
+ --gray-30-rgb: 194, 196, 200;
134
+ --gray-40: rgb(174, 176, 182);
135
+ --gray-40-rgb: 174, 176, 182;
136
+ --gray-50: rgb(152, 155, 162);
137
+ --gray-50-rgb: 152, 155, 162;
138
+ --gray-60: rgb(135, 138, 147);
139
+ --gray-60-rgb: 135, 138, 147;
140
+ --gray-70: rgb(112, 115, 124);
141
+ --gray-70-rgb: 112, 115, 124;
142
+ --gray-75: rgb(90, 92, 99);
143
+ --gray-75-rgb: 90, 92, 99;
144
+ --gray-80: rgb(70, 71, 76);
145
+ --gray-80-rgb: 70, 71, 76;
146
+ --gray-85: rgb(41, 42, 45);
147
+ --gray-85-rgb: 41, 42, 45;
148
+ --gray-90: rgb(23, 23, 25);
149
+ --gray-90-rgb: 23, 23, 25;
150
+ --gray-95: rgb(15, 15, 16);
151
+ --gray-95-rgb: 15, 15, 16;
152
+ --category-001: rgb(0, 169, 169);
153
+ --category-001-rgb: 0, 169, 169;
154
+ --category-002: rgb(0, 141, 207);
155
+ --category-002-rgb: 0, 141, 207;
156
+ --category-003: rgb(0, 153, 255);
157
+ --category-003-rgb: 0, 153, 255;
158
+ --category-004: rgb(0, 200, 214);
159
+ --category-004-rgb: 0, 200, 214;
160
+ --category-005: rgb(0, 214, 143);
161
+ --category-005-rgb: 0, 214, 143;
162
+ --category-006: rgb(143, 214, 0);
163
+ --category-006-rgb: 143, 214, 0;
164
+ --category-007: rgb(199, 224, 0);
165
+ --category-007-rgb: 199, 224, 0;
166
+ --category-008: rgb(255, 215, 0);
167
+ --category-008-rgb: 255, 215, 0;
168
+ --category-009: rgb(255, 176, 0);
169
+ --category-009-rgb: 255, 176, 0;
170
+ --category-010: rgb(255, 140, 64);
171
+ --category-010-rgb: 255, 140, 64;
172
+ --category-011: rgb(230, 57, 70);
173
+ --category-011-rgb: 230, 57, 70;
174
+ --category-012: rgb(217, 0, 255);
175
+ --category-012-rgb: 217, 0, 255;
176
+ --category-013: rgb(161, 79, 249);
177
+ --category-013-rgb: 161, 79, 249;
178
+ --category-014: rgb(201, 97, 255);
179
+ --category-014-rgb: 201, 97, 255;
180
+ --alpha-0: rgba(23, 23, 25, 0);
181
+ --alpha-15: rgba(41, 42, 45, 0.15);
182
+ --alpha-16: rgba(112, 115, 124, 0.16);
183
+ --alpha-24: rgba(112, 115, 124, 0.24);
184
+ --alpha-28: rgba(70, 71, 76, 0.28);
185
+ --alpha-50: rgba(41, 42, 45, 0.5);
186
+ --alpha-75: rgba(41, 42, 45, 0.75);
187
+ --alpha-black5: rgba(23, 23, 25, 0.05);
188
+ --alpha-black8: rgba(23, 23, 25, 0.08);
189
+ --alpha-black12: rgba(23, 23, 25, 0.12);
190
+ --alpha-white12: rgba(255, 255, 255, 0.12);
191
+ --alpha-white5: rgba(255, 255, 255, 0.05);
192
+ --alpha-white8: rgba(255, 255, 255, 0.08);
193
+ --alpha-75l: rgba(244, 244, 245, 0.75);
194
+ --white: rgb(255, 255, 255);
195
+ --white-rgb: 255, 255, 255;
196
+ --black: rgb(0, 0, 0);
197
+ --black-rgb: 0, 0, 0;
198
+ --default: Pretendard Variable;
199
+ --semibold600: 600;
200
+ --regular400: 400;
201
+ --light300: 300;
202
+ --130: 130%;
203
+ --140: 140%;
204
+ --150: 150%;
205
+ --160: 160%;
206
+ --0px: 0px;
207
+ --1px: 1px;
208
+ --inv-opacity88: 0.12;
209
+ --inv-opacity75: 0.25;
210
+ --inv-opacity50: 0.5;
211
+ --inv-opacity28: 0.72;
212
+ --inv-opacity24: 0.76;
213
+ --inv-opacity16: 0.84;
214
+ --inv-opacity15: 0.85;
215
+ --inv-opacity12: 0.88;
216
+ --inv-opacity10: 0.9;
217
+ --inv-opacity8: 0.92;
218
+ --inv-opacity5: 0.95;
219
+ --opacity0: 1;
220
+ --opacity88: 0.88;
221
+ --opacity75: 0.75;
222
+ --opacity50: 0.5;
223
+ --opacity28: 0.28;
224
+ --opacity24: 0.24;
225
+ --opacity16: 0.16;
226
+ --opacity15: 0.15;
227
+ --opacity12: 0.12;
228
+ --opacity10: 0.1;
229
+ --opacity8: 0.08;
230
+ --opacity5: 0.05;
231
+ --semantic-before-color: rgb(45, 55, 72);
232
+ --semantic-before-color-rgb: 45, 55, 72;
233
+ --semantic-before-dummy: #;
234
+ --component-tooltip-bg: rgb(17, 21, 31);
235
+ --component-tooltip-bg-rgb: 17, 21, 31;
236
+ --semantic-bg-default: var(--white);
237
+ --semantic-bg-light: var(--gray-5);
238
+ --semantic-bg-alternative: var(--alpha-75);
239
+ --semantic-text-strong: var(--black);
240
+ --semantic-text-default: var(--gray-90);
241
+ --semantic-text-alternative: var(--gray-80);
242
+ --semantic-text-sub: var(--gray-70);
243
+ --semantic-text-disable: var(--alpha-28);
244
+ --semantic-text-on-dark: var(--white);
245
+ --semantic-line-default: var(--alpha-24);
246
+ --semantic-line-neutral: var(--gray-15);
247
+ --semantic-line-alternative: var(--gray-10);
248
+ --semantic-line-disable: var(--alpha-16);
249
+ --semantic-content-positive-default: var(--green-50);
250
+ --semantic-content-positive-light: var(--green-20);
251
+ --semantic-content-positive-extra-light: var(--green-5);
252
+ --semantic-content-informative-default: var(--blue-50);
253
+ --semantic-content-informative-light: var(--blue-20);
254
+ --semantic-content-informative-extra-light: var(--blue-5);
255
+ --semantic-content-danger-default: var(--red-50);
256
+ --semantic-content-danger-light: var(--red-20);
257
+ --semantic-content-danger-extra-light: var(--red-5);
258
+ --semantic-content-warning-default: var(--orange-50);
259
+ --semantic-content-warning-light: var(--orange-20);
260
+ --semantic-content-warning-extra-light: var(--orange-5);
261
+ --semantic-primary-extra-light: var(--main-5);
262
+ --semantic-primary-light: var(--main-10);
263
+ --semantic-primary-line-light: var(--main-15);
264
+ --semantic-primary-line-default: var(--main-30);
265
+ --semantic-primary-default: var(--main-50);
266
+ --semantic-natural-white: var(--white);
267
+ --semantic-natural-extra-light: var(--gray-5);
268
+ --semantic-natural-light: var(--gray-10);
269
+ --semantic-natural-default: var(--gray-15);
270
+ --semantic-natural-strong: var(--gray-30);
271
+ --semantic-natural-heavy: var(--gray-70);
272
+ --semantic-natural-deep: var(--gray-90);
273
+ --semantic-badge-node-basic: var(--gray-15);
274
+ --semantic-badge-node-content-facility: var(--category-009);
275
+ --semantic-badge-node-content-facility-copy: var(--category-003);
276
+ --dim-default: var(--alpha-50);
277
+ --dim-light: var(--alpha-15);
278
+ --interaction-disable: var(--gray-10);
279
+ --interaction-hovered: var(--inv-opacity5);
280
+ --interaction-focused: var(--inv-opacity8);
281
+ --interaction-pressed: var(--inv-opacity12);
282
+ --interaction-default: var(--opacity0);
283
+ --shadow-level-1: 0 0 2px 0 var(--alpha-black5), 0 0 2px 0 var(--alpha-black5);
284
+ --shadow-level-2: 0 0 8px 0 var(--alpha-black8), 0 0 2px 0 var(--alpha-black5);
285
+ --shadow-level-3: 0 0 16px 0 var(--alpha-black12), 0 0 2px 0 var(--alpha-black8);
286
+ --shadow-level-4: 0 0 24px 0 var(--alpha-black12), 0 0 2px 0 var(--alpha-black8);
287
+ --radius-xxsmall: var(--2);
288
+ --radius-xsmall: var(--4);
289
+ --radius-small: var(--6);
290
+ --radius-medium: var(--8);
291
+ --radius-large: var(--12);
292
+ --radius-xlarge: var(--16);
293
+ --radius-xxlarge: var(--24);
294
+ --radius-max: var(--999); /** 온전한 원형의 형태일 때 사용합니다. */
295
+ --layout-spacing-1: var(--1);
296
+ --layout-spacing-2: var(--2);
297
+ --layout-spacing-4: var(--4);
298
+ --layout-spacing-6: var(--6);
299
+ --layout-spacing-8: var(--8);
300
+ --layout-spacing-12: var(--12);
301
+ --layout-spacing-16: var(--16);
302
+ --layout-spacing-24: var(--24);
303
+ --layout-spacing-32: var(--32);
304
+ --layout-spacing-40: var(--40);
305
+ --layout-spacing-44: var(--44);
306
+ --layout-spacing-48: var(--48);
307
+ --layout-spacing-64: var(--64);
308
+ --layout-spacing-128: var(--128);
309
+ --layout-scroll-bottom: var(--128);
310
+ --layout-margin: var(--24);
311
+ --layout-gutter: var(--20);
312
+ --text-display-1-semibold: var(--semibold600) 56px var(--default);
313
+ --text-display-2-semibold: var(--semibold600) 32px var(--default);
314
+ --text-title-1-semibold: var(--semibold600) 28px var(--default);
315
+ --text-title-2-semibold: var(--semibold600) 24px var(--default);
316
+ --text-heading-1-semibold: var(--semibold600) 20px var(--default);
317
+ --text-heading-2-semibold: var(--semibold600) 18px var(--default);
318
+ --text-heading-2-regular: var(--regular400) 18px var(--default);
319
+ --text-body-1-normal-semibold: var(--semibold600) 16px var(--default);
320
+ --text-body-1-normal-regular: var(--regular400) 16px var(--default);
321
+ --text-body-1-normal-light: var(--light300) 16px var(--default);
322
+ --text-body-1-reading-semibold: var(--semibold600) 16px/140% var(--default);
323
+ --text-body-1-reading-regular: var(--regular400) 16px/140% var(--default);
324
+ --text-body-1-reading-light: var(--light300) 16px/140% var(--default);
325
+ --text-body-2-normal-semibold: var(--semibold600) 14px var(--default);
326
+ --text-body-2-normal-regular: var(--regular400) 14px var(--default);
327
+ --text-body-2-normal-light: var(--light300) 14px var(--default);
328
+ --text-body-2-reading-semibold: var(--semibold600) 14px/140% var(--default);
329
+ --text-body-2-reading-regular: var(--regular400) 14px/140% var(--default);
330
+ --text-body-2-reading-light: var(--light300) 14px/140% var(--default);
331
+ --text-label-1-semibold: var(--semibold600) 13px var(--default);
332
+ --text-label-1-regular: var(--regular400) 13px var(--default);
333
+ --text-label-1-light: var(--light300) 13px var(--default);
334
+ --text-label-1-reading-semibold: var(--semibold600) 13px/140% var(--default);
335
+ --text-label-1-reading-regular: var(--regular400) 13px/140% var(--default);
336
+ --text-label-1-reading-light: var(--light300) 13px/140% var(--default);
337
+ --text-label-2-semibold: var(--semibold600) 12px var(--default);
338
+ --text-label-2-regular: var(--regular400) 12px var(--default);
339
+ --text-label-2-light: var(--light300) 11px var(--default);
340
+ --text-label-2-reading-semibold: var(--semibold600) 12px/140% var(--default);
341
+ --text-label-2-reading-regular: var(--regular400) 12px/140% var(--default);
342
+ --text-label-2-reading-light: var(--light300) 11px/140% var(--default);
343
+ --text-caption-1-semibold: var(--semibold600) 11px var(--default);
344
+ --text-caption-1-regular: var(--regular400) 11px var(--default);
345
+ --text-caption-1-light: var(--light300) 11px var(--default);
346
+ --text-caption-1-reading-semibold: var(--semibold600) 11px/140% var(--default);
347
+ --text-caption-1-reading-regular: var(--regular400) 11px/140% var(--default);
348
+ --text-caption-1-reading-light: var(--light300) 11px/140% var(--default);
349
+ --text-caption-2-semibold: var(--semibold600) 10px var(--default);
350
+ --text-caption-2-regular: var(--regular400) 10px var(--default);
351
+ --text-caption-2-light: var(--light300) 10px var(--default);
352
+ --text-caption-2-reading-semibold: var(--semibold600) 10px/140% var(--default);
353
+ --text-caption-2-reading-regular: var(--regular400) 10px/140% var(--default);
354
+ --text-caption-2-reading-light: var(--light300) 10px/140% var(--default);
355
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idbrnd/design-system",
3
- "version": "2.2.0",
3
+ "version": "2.3.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -11,7 +11,8 @@
11
11
  "import": "./dist/index.js",
12
12
  "default": "./dist/index.js"
13
13
  },
14
- "./style.css": "./dist/style.css"
14
+ "./style.css": "./dist/style.css",
15
+ "./tokens.css": "./dist/tokens.css"
15
16
  },
16
17
  "files": [
17
18
  "dist"
@@ -21,12 +22,13 @@
21
22
  ],
22
23
  "scripts": {
23
24
  "dev": "vite dev",
24
- "build": "npm run build:icons && npm run build:js && npm run build:types",
25
+ "build": "npm run build:icons && npm run build:js && npm run build:types && npm run build:tokens-css",
25
26
  "build:js": "vite build",
26
27
  "build:types": "tsc -p tsconfig.build.json",
27
28
  "typecheck": "tsc --noEmit",
28
29
  "prepack": "npm run build",
29
30
  "build:tokens": "node build.js",
31
+ "build:tokens-css": "node scripts/generate-tokens-css.mjs",
30
32
  "build:icons": "node scripts/generate-icons.mjs"
31
33
  },
32
34
  "keywords": [],