@kimkihwan/cytur-design-system 0.2.4 → 0.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.
Files changed (8) hide show
  1. package/dist/index.js +83 -65
  2. package/dist/types/lib.d.ts +1 -1
  3. package/dist/types/tokens/csc.d.ts +30 -14
  4. package/dist/types/tokens/{mg.d.ts → default.d.ts} +30 -14
  5. package/dist/types/tokens/index.d.ts +120 -56
  6. package/dist/types/tokens/rm.d.ts +30 -14
  7. package/dist/types/tokens/tokens.d.ts +32 -16
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -80,13 +80,13 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
80
80
  active: d("checkbox-checked-bg-active"),
81
81
  disabled: d("checkbox-checked-bg-disabled")
82
82
  },
83
- borderFocus: d("checkbox-checked-border-focus")
83
+ border: { focus: d("checkbox-checked-border-focus") }
84
84
  },
85
85
  icon: {
86
86
  default: d("checkbox-icon-default"),
87
87
  disabled: d("checkbox-icon-disabled")
88
88
  },
89
- shadowFocus: d("checkbox-shadow-focus")
89
+ shadow: { focus: d("checkbox-shadow-focus") }
90
90
  },
91
91
  radio: {
92
92
  bg: {
@@ -113,8 +113,8 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
113
113
  active: d("radio-dot-active"),
114
114
  disabled: d("radio-dot-disabled")
115
115
  },
116
- borderFocus: d("radio-border-focus"),
117
- shadowFocus: d("radio-shadow-focus")
116
+ border: { focus: d("radio-border-focus") },
117
+ shadow: { focus: d("radio-shadow-focus") }
118
118
  },
119
119
  input: {
120
120
  bg: {
@@ -138,21 +138,27 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
138
138
  disabled: d("input-text-disabled")
139
139
  },
140
140
  icon: d("input-icon"),
141
- shadowFocus: d("input-shadow-focus")
141
+ shadow: { focus: d("input-shadow-focus") }
142
142
  },
143
143
  color: {
144
144
  white: "#FFFFFF",
145
145
  black: "#000000",
146
146
  primary: d("color-primary"),
147
- text: d("color-text"),
148
- textSecondary: d("color-text-secondary"),
149
- textTertiary: d("color-text-tertiary"),
150
- textMuted: d("color-text-muted"),
151
- border: d("color-border"),
152
- borderLight: d("color-border-light"),
153
- bg: d("color-bg"),
154
- bgSubtle: d("color-bg-subtle"),
155
- bgMuted: d("color-bg-muted"),
147
+ text: {
148
+ default: d("color-text"),
149
+ secondary: d("color-text-secondary"),
150
+ tertiary: d("color-text-tertiary"),
151
+ muted: d("color-text-muted")
152
+ },
153
+ border: {
154
+ default: d("color-border"),
155
+ light: d("color-border-light")
156
+ },
157
+ bg: {
158
+ default: d("color-bg"),
159
+ subtle: d("color-bg-subtle"),
160
+ muted: d("color-bg-muted")
161
+ },
156
162
  focus: d("color-focus"),
157
163
  success: d("color-success"),
158
164
  warning: d("color-warning"),
@@ -236,13 +242,13 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
236
242
  active: p("checkbox-checked-bg-active"),
237
243
  disabled: p("checkbox-checked-bg-disabled")
238
244
  },
239
- borderFocus: p("checkbox-checked-border-focus")
245
+ border: { focus: p("checkbox-checked-border-focus") }
240
246
  },
241
247
  icon: {
242
248
  default: p("checkbox-icon-default"),
243
249
  disabled: p("checkbox-icon-disabled")
244
250
  },
245
- shadowFocus: p("checkbox-shadow-focus")
251
+ shadow: { focus: p("checkbox-shadow-focus") }
246
252
  },
247
253
  radio: {
248
254
  bg: {
@@ -269,8 +275,8 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
269
275
  active: p("radio-dot-active"),
270
276
  disabled: p("radio-dot-disabled")
271
277
  },
272
- borderFocus: p("radio-border-focus"),
273
- shadowFocus: p("radio-shadow-focus")
278
+ border: { focus: p("radio-border-focus") },
279
+ shadow: { focus: p("radio-shadow-focus") }
274
280
  },
275
281
  input: {
276
282
  bg: {
@@ -294,21 +300,27 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
294
300
  disabled: p("input-text-disabled")
295
301
  },
296
302
  icon: p("input-icon"),
297
- shadowFocus: p("input-shadow-focus")
303
+ shadow: { focus: p("input-shadow-focus") }
298
304
  },
299
305
  color: {
300
306
  white: "#FFFFFF",
301
307
  black: "#000000",
302
308
  primary: p("color-primary"),
303
- text: p("color-text"),
304
- textSecondary: p("color-text-secondary"),
305
- textTertiary: p("color-text-tertiary"),
306
- textMuted: p("color-text-muted"),
307
- border: p("color-border"),
308
- borderLight: p("color-border-light"),
309
- bg: p("color-bg"),
310
- bgSubtle: p("color-bg-subtle"),
311
- bgMuted: p("color-bg-muted"),
309
+ text: {
310
+ default: p("color-text"),
311
+ secondary: p("color-text-secondary"),
312
+ tertiary: p("color-text-tertiary"),
313
+ muted: p("color-text-muted")
314
+ },
315
+ border: {
316
+ default: p("color-border"),
317
+ light: p("color-border-light")
318
+ },
319
+ bg: {
320
+ default: p("color-bg"),
321
+ subtle: p("color-bg-subtle"),
322
+ muted: p("color-bg-muted")
323
+ },
312
324
  focus: p("color-focus"),
313
325
  success: p("color-success"),
314
326
  warning: p("color-warning"),
@@ -392,13 +404,13 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
392
404
  active: h("checkbox-checked-bg-active"),
393
405
  disabled: h("checkbox-checked-bg-disabled")
394
406
  },
395
- borderFocus: h("checkbox-checked-border-focus")
407
+ border: { focus: h("checkbox-checked-border-focus") }
396
408
  },
397
409
  icon: {
398
410
  default: h("checkbox-icon-default"),
399
411
  disabled: h("checkbox-icon-disabled")
400
412
  },
401
- shadowFocus: h("checkbox-shadow-focus")
413
+ shadow: { focus: h("checkbox-shadow-focus") }
402
414
  },
403
415
  radio: {
404
416
  bg: {
@@ -425,8 +437,8 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
425
437
  active: h("radio-dot-active"),
426
438
  disabled: h("radio-dot-disabled")
427
439
  },
428
- borderFocus: h("radio-border-focus"),
429
- shadowFocus: h("radio-shadow-focus")
440
+ border: { focus: h("radio-border-focus") },
441
+ shadow: { focus: h("radio-shadow-focus") }
430
442
  },
431
443
  input: {
432
444
  bg: {
@@ -450,21 +462,27 @@ var u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d
450
462
  disabled: h("input-text-disabled")
451
463
  },
452
464
  icon: h("input-icon"),
453
- shadowFocus: h("input-shadow-focus")
465
+ shadow: { focus: h("input-shadow-focus") }
454
466
  },
455
467
  color: {
456
468
  white: "#FFFFFF",
457
469
  black: "#000000",
458
470
  primary: h("color-primary"),
459
- text: h("color-text"),
460
- textSecondary: h("color-text-secondary"),
461
- textTertiary: h("color-text-tertiary"),
462
- textMuted: h("color-text-muted"),
463
- border: h("color-border"),
464
- borderLight: h("color-border-light"),
465
- bg: h("color-bg"),
466
- bgSubtle: h("color-bg-subtle"),
467
- bgMuted: h("color-bg-muted"),
471
+ text: {
472
+ default: h("color-text"),
473
+ secondary: h("color-text-secondary"),
474
+ tertiary: h("color-text-tertiary"),
475
+ muted: h("color-text-muted")
476
+ },
477
+ border: {
478
+ default: h("color-border"),
479
+ light: h("color-border-light")
480
+ },
481
+ bg: {
482
+ default: h("color-bg"),
483
+ subtle: h("color-bg-subtle"),
484
+ muted: h("color-bg-muted")
485
+ },
468
486
  focus: h("color-focus"),
469
487
  success: h("color-success"),
470
488
  warning: h("color-warning"),
@@ -1684,7 +1702,7 @@ var jt = r(({ inputSize: t = "md", label: n, error: r, warning: i, hint: a, left
1684
1702
  "&:hover:not(:disabled):not(:read-only)": { borderColor: r ? b.border.error : i ? b.border.warning : b.border.hover },
1685
1703
  "&:focus:not(:read-only)": {
1686
1704
  borderColor: r ? b.border.error : i ? b.border.warning : b.border.focus,
1687
- boxShadow: r || i ? "none" : b.shadowFocus
1705
+ boxShadow: r || i ? "none" : b.shadow.focus
1688
1706
  },
1689
1707
  "&:disabled": {
1690
1708
  background: b.bg.disabled,
@@ -1713,7 +1731,7 @@ var jt = r(({ inputSize: t = "md", label: n, error: r, warning: i, hint: a, left
1713
1731
  css: e({
1714
1732
  fontSize: "12px",
1715
1733
  lineHeight: "18px",
1716
- color: r ? b.border.error : i ? b.border.warning : x.textTertiary
1734
+ color: r ? b.border.error : i ? b.border.warning : x.text.tertiary
1717
1735
  }),
1718
1736
  children: r || i || a
1719
1737
  })
@@ -1765,7 +1783,7 @@ var Mt = r(({ textareaSize: t = "md", label: n, error: r, warning: i, hint: a, f
1765
1783
  "&:hover:not(:disabled):not(:read-only)": { borderColor: r ? b.border.error : i ? b.border.warning : b.border.hover },
1766
1784
  "&:focus:not(:read-only)": {
1767
1785
  borderColor: r ? b.border.error : i ? b.border.warning : b.border.focus,
1768
- boxShadow: r || i ? "none" : b.shadowFocus
1786
+ boxShadow: r || i ? "none" : b.shadow.focus
1769
1787
  },
1770
1788
  "&:disabled": {
1771
1789
  background: b.bg.disabled,
@@ -1780,7 +1798,7 @@ var Mt = r(({ textareaSize: t = "md", label: n, error: r, warning: i, hint: a, f
1780
1798
  css: e({
1781
1799
  fontSize: "12px",
1782
1800
  lineHeight: "18px",
1783
- color: r ? b.border.error : i ? b.border.warning : x.textTertiary
1801
+ color: r ? b.border.error : i ? b.border.warning : x.text.tertiary
1784
1802
  }),
1785
1803
  children: r || i || a
1786
1804
  })
@@ -1856,7 +1874,7 @@ var Nt = () => /* @__PURE__ */ Q("svg", {
1856
1874
  "&:hover:not(:disabled)": { borderColor: u ? b.border.error : b.border.hover },
1857
1875
  ...h && !u ? {
1858
1876
  borderColor: b.border.focus,
1859
- boxShadow: b.shadowFocus
1877
+ boxShadow: b.shadow.focus
1860
1878
  } : {},
1861
1879
  "&:disabled": { color: b.text.disabled }
1862
1880
  }),
@@ -1871,7 +1889,7 @@ var Nt = () => /* @__PURE__ */ Q("svg", {
1871
1889
  css: e({
1872
1890
  display: "flex",
1873
1891
  flexShrink: 0,
1874
- color: x.textMuted,
1892
+ color: x.text.muted,
1875
1893
  transform: h ? "rotate(180deg)" : "none",
1876
1894
  transition: "transform 150ms"
1877
1895
  }),
@@ -1900,10 +1918,10 @@ var Nt = () => /* @__PURE__ */ Q("svg", {
1900
1918
  padding: `8px ${v.paddingX}`,
1901
1919
  fontSize: v.font,
1902
1920
  cursor: "pointer",
1903
- color: t.value === o ? b.text.default : x.textSecondary,
1921
+ color: t.value === o ? b.text.default : x.text.secondary,
1904
1922
  fontWeight: t.value === o ? S.weight.medium : S.weight.regular,
1905
- background: t.value === o ? x.bgMuted : "transparent",
1906
- "&:hover": { background: x.bgMuted }
1923
+ background: t.value === o ? x.bg.muted : "transparent",
1924
+ "&:hover": { background: x.bg.muted }
1907
1925
  }),
1908
1926
  children: t.label
1909
1927
  }, t.value))
@@ -1913,7 +1931,7 @@ var Nt = () => /* @__PURE__ */ Q("svg", {
1913
1931
  css: e({
1914
1932
  fontSize: "12px",
1915
1933
  lineHeight: "18px",
1916
- color: u ? b.border.error : x.textTertiary
1934
+ color: u ? b.border.error : x.text.tertiary
1917
1935
  }),
1918
1936
  children: u || d
1919
1937
  })
@@ -1969,7 +1987,7 @@ var Ft = r(({ inputSize: t = "md", buttonVariant: n = "primary", buttonLabel: r
1969
1987
  "&:hover:not(:disabled)": { borderColor: s ? b.border.error : b.border.hover },
1970
1988
  "&:focus": {
1971
1989
  borderColor: s ? b.border.error : b.border.focus,
1972
- boxShadow: s ? "none" : b.shadowFocus,
1990
+ boxShadow: s ? "none" : b.shadow.focus,
1973
1991
  zIndex: 1
1974
1992
  },
1975
1993
  "&:disabled": {
@@ -2128,9 +2146,9 @@ var It = ({ size: e }) => {
2128
2146
  cursor: i ? "not-allowed" : "pointer",
2129
2147
  margin: 0,
2130
2148
  "&:focus-visible ~ span": {
2131
- outline: `2px solid ${v.checked.borderFocus}`,
2149
+ outline: `2px solid ${v.checked.border.focus}`,
2132
2150
  outlineOffset: "2px",
2133
- boxShadow: v.shadowFocus
2151
+ boxShadow: v.shadow.focus
2134
2152
  }
2135
2153
  }),
2136
2154
  ...d
@@ -2220,9 +2238,9 @@ var Gt = e({
2220
2238
  cursor: r ? "not-allowed" : "pointer",
2221
2239
  margin: 0,
2222
2240
  "&:focus-visible ~ span": {
2223
- outline: `2px solid ${y.borderFocus}`,
2241
+ outline: `2px solid ${y.border.focus}`,
2224
2242
  outlineOffset: "2px",
2225
- boxShadow: y.shadowFocus
2243
+ boxShadow: y.shadow.focus
2226
2244
  }
2227
2245
  }),
2228
2246
  ...s
@@ -2259,9 +2277,9 @@ var Qt = ({ name: t, value: n, defaultValue: r, onChange: i, options: a, radioSi
2259
2277
  }, e.value))
2260
2278
  }), $t = {
2261
2279
  default: {
2262
- bg: x.bgMuted,
2263
- text: x.textSecondary,
2264
- dot: x.textMuted
2280
+ bg: x.bg.muted,
2281
+ text: x.text.secondary,
2282
+ dot: x.text.muted
2265
2283
  },
2266
2284
  primary: {
2267
2285
  bg: "#EBF4FF",
@@ -2326,9 +2344,9 @@ var Qt = ({ name: t, value: n, defaultValue: r, onChange: i, options: a, radioSi
2326
2344
  lg: "24px"
2327
2345
  }, rn = ({ title: t, subtitle: n, children: r, padding: i = "md", bordered: a = !0, hoverable: o = !1 }) => /* @__PURE__ */ $("div", {
2328
2346
  css: e({
2329
- background: x.bg,
2347
+ background: x.bg.default,
2330
2348
  borderRadius: C.lg,
2331
- border: a ? `1px solid ${x.border}` : "none",
2349
+ border: a ? `1px solid ${x.border.default}` : "none",
2332
2350
  boxShadow: w.sm,
2333
2351
  fontFamily: S.family,
2334
2352
  overflow: "hidden",
@@ -2344,20 +2362,20 @@ var Qt = ({ name: t, value: n, defaultValue: r, onChange: i, options: a, radioSi
2344
2362
  children: [(t || n) && /* @__PURE__ */ $("div", {
2345
2363
  css: e({
2346
2364
  padding: "16px",
2347
- borderBottom: `1px solid ${x.borderLight}`
2365
+ borderBottom: `1px solid ${x.border.light}`
2348
2366
  }),
2349
2367
  children: [t && /* @__PURE__ */ Q("div", {
2350
2368
  css: e({
2351
2369
  fontSize: S.size.md,
2352
2370
  fontWeight: S.weight.semibold,
2353
- color: x.text,
2371
+ color: x.text.default,
2354
2372
  lineHeight: S.lineHeight.sm
2355
2373
  }),
2356
2374
  children: t
2357
2375
  }), n && /* @__PURE__ */ Q("div", {
2358
2376
  css: e({
2359
2377
  fontSize: S.size.sm,
2360
- color: x.textTertiary,
2378
+ color: x.text.tertiary,
2361
2379
  marginTop: "2px",
2362
2380
  lineHeight: S.lineHeight.xs
2363
2381
  }),
package/dist/types/lib.d.ts CHANGED
@@ -9,7 +9,7 @@ export { Badge, type BadgeProps, type BadgeVariant, type BadgeSize } from './com
9
9
  export { Card, type CardProps } from './components/card/Card';
10
10
  export { tokens } from './tokens';
11
11
  export { color, font, radius, shadow } from './tokens/tokens';
12
- export { mg } from './tokens/mg';
12
+ export { mg } from './tokens/default';
13
13
  export { rm } from './tokens/rm';
14
14
  export { csc } from './tokens/csc';
15
15
  export type { ProjectTokens } from './tokens/tokens';
package/dist/types/tokens/csc.d.ts CHANGED
@@ -75,13 +75,17 @@ export declare const csc: {
75
75
  readonly active: string;
76
76
  readonly disabled: string;
77
77
  };
78
- readonly borderFocus: string;
78
+ readonly border: {
79
+ readonly focus: string;
80
+ };
79
81
  };
80
82
  readonly icon: {
81
83
  readonly default: string;
82
84
  readonly disabled: string;
83
85
  };
84
- readonly shadowFocus: string;
86
+ readonly shadow: {
87
+ readonly focus: string;
88
+ };
85
89
  };
86
90
  readonly radio: {
87
91
  readonly bg: {
@@ -112,8 +116,12 @@ export declare const csc: {
112
116
  readonly active: string;
113
117
  readonly disabled: string;
114
118
  };
115
- readonly borderFocus: string;
116
- readonly shadowFocus: string;
119
+ readonly border: {
120
+ readonly focus: string;
121
+ };
122
+ readonly shadow: {
123
+ readonly focus: string;
124
+ };
117
125
  };
118
126
  readonly input: {
119
127
  readonly bg: {
@@ -137,21 +145,29 @@ export declare const csc: {
137
145
  readonly disabled: string;
138
146
  };
139
147
  readonly icon: string;
140
- readonly shadowFocus: string;
148
+ readonly shadow: {
149
+ readonly focus: string;
150
+ };
141
151
  };
142
152
  readonly color: {
143
153
  readonly white: "#FFFFFF";
144
154
  readonly black: "#000000";
145
155
  readonly primary: string;
146
- readonly text: string;
147
- readonly textSecondary: string;
148
- readonly textTertiary: string;
149
- readonly textMuted: string;
150
- readonly border: string;
151
- readonly borderLight: string;
152
- readonly bg: string;
153
- readonly bgSubtle: string;
154
- readonly bgMuted: string;
156
+ readonly text: {
157
+ readonly default: string;
158
+ readonly secondary: string;
159
+ readonly tertiary: string;
160
+ readonly muted: string;
161
+ };
162
+ readonly border: {
163
+ readonly default: string;
164
+ readonly light: string;
165
+ };
166
+ readonly bg: {
167
+ readonly default: string;
168
+ readonly subtle: string;
169
+ readonly muted: string;
170
+ };
155
171
  readonly focus: string;
156
172
  readonly success: string;
157
173
  readonly warning: string;
package/dist/types/tokens/{mg.d.ts → default.d.ts} RENAMED
@@ -75,13 +75,17 @@ export declare const mg: {
75
75
  readonly active: string;
76
76
  readonly disabled: string;
77
77
  };
78
- readonly borderFocus: string;
78
+ readonly border: {
79
+ readonly focus: string;
80
+ };
79
81
  };
80
82
  readonly icon: {
81
83
  readonly default: string;
82
84
  readonly disabled: string;
83
85
  };
84
- readonly shadowFocus: string;
86
+ readonly shadow: {
87
+ readonly focus: string;
88
+ };
85
89
  };
86
90
  readonly radio: {
87
91
  readonly bg: {
@@ -112,8 +116,12 @@ export declare const mg: {
112
116
  readonly active: string;
113
117
  readonly disabled: string;
114
118
  };
115
- readonly borderFocus: string;
116
- readonly shadowFocus: string;
119
+ readonly border: {
120
+ readonly focus: string;
121
+ };
122
+ readonly shadow: {
123
+ readonly focus: string;
124
+ };
117
125
  };
118
126
  readonly input: {
119
127
  readonly bg: {
@@ -137,21 +145,29 @@ export declare const mg: {
137
145
  readonly disabled: string;
138
146
  };
139
147
  readonly icon: string;
140
- readonly shadowFocus: string;
148
+ readonly shadow: {
149
+ readonly focus: string;
150
+ };
141
151
  };
142
152
  readonly color: {
143
153
  readonly white: "#FFFFFF";
144
154
  readonly black: "#000000";
145
155
  readonly primary: string;
146
- readonly text: string;
147
- readonly textSecondary: string;
148
- readonly textTertiary: string;
149
- readonly textMuted: string;
150
- readonly border: string;
151
- readonly borderLight: string;
152
- readonly bg: string;
153
- readonly bgSubtle: string;
154
- readonly bgMuted: string;
156
+ readonly text: {
157
+ readonly default: string;
158
+ readonly secondary: string;
159
+ readonly tertiary: string;
160
+ readonly muted: string;
161
+ };
162
+ readonly border: {
163
+ readonly default: string;
164
+ readonly light: string;
165
+ };
166
+ readonly bg: {
167
+ readonly default: string;
168
+ readonly subtle: string;
169
+ readonly muted: string;
170
+ };
155
171
  readonly focus: string;
156
172
  readonly success: string;
157
173
  readonly warning: string;
package/dist/types/tokens/index.d.ts CHANGED
@@ -75,13 +75,17 @@ export declare const tokens: {
75
75
  readonly active: string;
76
76
  readonly disabled: string;
77
77
  };
78
- readonly borderFocus: string;
78
+ readonly border: {
79
+ readonly focus: string;
80
+ };
79
81
  };
80
82
  readonly icon: {
81
83
  readonly default: string;
82
84
  readonly disabled: string;
83
85
  };
84
- readonly shadowFocus: string;
86
+ readonly shadow: {
87
+ readonly focus: string;
88
+ };
85
89
  };
86
90
  readonly radio: {
87
91
  readonly bg: {
@@ -112,8 +116,12 @@ export declare const tokens: {
112
116
  readonly active: string;
113
117
  readonly disabled: string;
114
118
  };
115
- readonly borderFocus: string;
116
- readonly shadowFocus: string;
119
+ readonly border: {
120
+ readonly focus: string;
121
+ };
122
+ readonly shadow: {
123
+ readonly focus: string;
124
+ };
117
125
  };
118
126
  readonly input: {
119
127
  readonly bg: {
@@ -137,21 +145,29 @@ export declare const tokens: {
137
145
  readonly disabled: string;
138
146
  };
139
147
  readonly icon: string;
140
- readonly shadowFocus: string;
148
+ readonly shadow: {
149
+ readonly focus: string;
150
+ };
141
151
  };
142
152
  readonly color: {
143
153
  readonly white: "#FFFFFF";
144
154
  readonly black: "#000000";
145
155
  readonly primary: string;
146
- readonly text: string;
147
- readonly textSecondary: string;
148
- readonly textTertiary: string;
149
- readonly textMuted: string;
150
- readonly border: string;
151
- readonly borderLight: string;
152
- readonly bg: string;
153
- readonly bgSubtle: string;
154
- readonly bgMuted: string;
156
+ readonly text: {
157
+ readonly default: string;
158
+ readonly secondary: string;
159
+ readonly tertiary: string;
160
+ readonly muted: string;
161
+ };
162
+ readonly border: {
163
+ readonly default: string;
164
+ readonly light: string;
165
+ };
166
+ readonly bg: {
167
+ readonly default: string;
168
+ readonly subtle: string;
169
+ readonly muted: string;
170
+ };
155
171
  readonly focus: string;
156
172
  readonly success: string;
157
173
  readonly warning: string;
@@ -364,13 +380,17 @@ export declare const tokens: {
364
380
  readonly active: string;
365
381
  readonly disabled: string;
366
382
  };
367
- readonly borderFocus: string;
383
+ readonly border: {
384
+ readonly focus: string;
385
+ };
368
386
  };
369
387
  readonly icon: {
370
388
  readonly default: string;
371
389
  readonly disabled: string;
372
390
  };
373
- readonly shadowFocus: string;
391
+ readonly shadow: {
392
+ readonly focus: string;
393
+ };
374
394
  };
375
395
  readonly radio: {
376
396
  readonly bg: {
@@ -401,8 +421,12 @@ export declare const tokens: {
401
421
  readonly active: string;
402
422
  readonly disabled: string;
403
423
  };
404
- readonly borderFocus: string;
405
- readonly shadowFocus: string;
424
+ readonly border: {
425
+ readonly focus: string;
426
+ };
427
+ readonly shadow: {
428
+ readonly focus: string;
429
+ };
406
430
  };
407
431
  readonly input: {
408
432
  readonly bg: {
@@ -426,21 +450,29 @@ export declare const tokens: {
426
450
  readonly disabled: string;
427
451
  };
428
452
  readonly icon: string;
429
- readonly shadowFocus: string;
453
+ readonly shadow: {
454
+ readonly focus: string;
455
+ };
430
456
  };
431
457
  readonly color: {
432
458
  readonly white: "#FFFFFF";
433
459
  readonly black: "#000000";
434
460
  readonly primary: string;
435
- readonly text: string;
436
- readonly textSecondary: string;
437
- readonly textTertiary: string;
438
- readonly textMuted: string;
439
- readonly border: string;
440
- readonly borderLight: string;
441
- readonly bg: string;
442
- readonly bgSubtle: string;
443
- readonly bgMuted: string;
461
+ readonly text: {
462
+ readonly default: string;
463
+ readonly secondary: string;
464
+ readonly tertiary: string;
465
+ readonly muted: string;
466
+ };
467
+ readonly border: {
468
+ readonly default: string;
469
+ readonly light: string;
470
+ };
471
+ readonly bg: {
472
+ readonly default: string;
473
+ readonly subtle: string;
474
+ readonly muted: string;
475
+ };
444
476
  readonly focus: string;
445
477
  readonly success: string;
446
478
  readonly warning: string;
@@ -525,13 +557,17 @@ export declare const tokens: {
525
557
  readonly active: string;
526
558
  readonly disabled: string;
527
559
  };
528
- readonly borderFocus: string;
560
+ readonly border: {
561
+ readonly focus: string;
562
+ };
529
563
  };
530
564
  readonly icon: {
531
565
  readonly default: string;
532
566
  readonly disabled: string;
533
567
  };
534
- readonly shadowFocus: string;
568
+ readonly shadow: {
569
+ readonly focus: string;
570
+ };
535
571
  };
536
572
  readonly radio: {
537
573
  readonly bg: {
@@ -562,8 +598,12 @@ export declare const tokens: {
562
598
  readonly active: string;
563
599
  readonly disabled: string;
564
600
  };
565
- readonly borderFocus: string;
566
- readonly shadowFocus: string;
601
+ readonly border: {
602
+ readonly focus: string;
603
+ };
604
+ readonly shadow: {
605
+ readonly focus: string;
606
+ };
567
607
  };
568
608
  readonly input: {
569
609
  readonly bg: {
@@ -587,21 +627,29 @@ export declare const tokens: {
587
627
  readonly disabled: string;
588
628
  };
589
629
  readonly icon: string;
590
- readonly shadowFocus: string;
630
+ readonly shadow: {
631
+ readonly focus: string;
632
+ };
591
633
  };
592
634
  readonly color: {
593
635
  readonly white: "#FFFFFF";
594
636
  readonly black: "#000000";
595
637
  readonly primary: string;
596
- readonly text: string;
597
- readonly textSecondary: string;
598
- readonly textTertiary: string;
599
- readonly textMuted: string;
600
- readonly border: string;
601
- readonly borderLight: string;
602
- readonly bg: string;
603
- readonly bgSubtle: string;
604
- readonly bgMuted: string;
638
+ readonly text: {
639
+ readonly default: string;
640
+ readonly secondary: string;
641
+ readonly tertiary: string;
642
+ readonly muted: string;
643
+ };
644
+ readonly border: {
645
+ readonly default: string;
646
+ readonly light: string;
647
+ };
648
+ readonly bg: {
649
+ readonly default: string;
650
+ readonly subtle: string;
651
+ readonly muted: string;
652
+ };
605
653
  readonly focus: string;
606
654
  readonly success: string;
607
655
  readonly warning: string;
@@ -686,13 +734,17 @@ export declare const tokens: {
686
734
  readonly active: string;
687
735
  readonly disabled: string;
688
736
  };
689
- readonly borderFocus: string;
737
+ readonly border: {
738
+ readonly focus: string;
739
+ };
690
740
  };
691
741
  readonly icon: {
692
742
  readonly default: string;
693
743
  readonly disabled: string;
694
744
  };
695
- readonly shadowFocus: string;
745
+ readonly shadow: {
746
+ readonly focus: string;
747
+ };
696
748
  };
697
749
  readonly radio: {
698
750
  readonly bg: {
@@ -723,8 +775,12 @@ export declare const tokens: {
723
775
  readonly active: string;
724
776
  readonly disabled: string;
725
777
  };
726
- readonly borderFocus: string;
727
- readonly shadowFocus: string;
778
+ readonly border: {
779
+ readonly focus: string;
780
+ };
781
+ readonly shadow: {
782
+ readonly focus: string;
783
+ };
728
784
  };
729
785
  readonly input: {
730
786
  readonly bg: {
@@ -748,21 +804,29 @@ export declare const tokens: {
748
804
  readonly disabled: string;
749
805
  };
750
806
  readonly icon: string;
751
- readonly shadowFocus: string;
807
+ readonly shadow: {
808
+ readonly focus: string;
809
+ };
752
810
  };
753
811
  readonly color: {
754
812
  readonly white: "#FFFFFF";
755
813
  readonly black: "#000000";
756
814
  readonly primary: string;
757
- readonly text: string;
758
- readonly textSecondary: string;
759
- readonly textTertiary: string;
760
- readonly textMuted: string;
761
- readonly border: string;
762
- readonly borderLight: string;
763
- readonly bg: string;
764
- readonly bgSubtle: string;
765
- readonly bgMuted: string;
815
+ readonly text: {
816
+ readonly default: string;
817
+ readonly secondary: string;
818
+ readonly tertiary: string;
819
+ readonly muted: string;
820
+ };
821
+ readonly border: {
822
+ readonly default: string;
823
+ readonly light: string;
824
+ };
825
+ readonly bg: {
826
+ readonly default: string;
827
+ readonly subtle: string;
828
+ readonly muted: string;
829
+ };
766
830
  readonly focus: string;
767
831
  readonly success: string;
768
832
  readonly warning: string;
package/dist/types/tokens/rm.d.ts CHANGED
@@ -75,13 +75,17 @@ export declare const rm: {
75
75
  readonly active: string;
76
76
  readonly disabled: string;
77
77
  };
78
- readonly borderFocus: string;
78
+ readonly border: {
79
+ readonly focus: string;
80
+ };
79
81
  };
80
82
  readonly icon: {
81
83
  readonly default: string;
82
84
  readonly disabled: string;
83
85
  };
84
- readonly shadowFocus: string;
86
+ readonly shadow: {
87
+ readonly focus: string;
88
+ };
85
89
  };
86
90
  readonly radio: {
87
91
  readonly bg: {
@@ -112,8 +116,12 @@ export declare const rm: {
112
116
  readonly active: string;
113
117
  readonly disabled: string;
114
118
  };
115
- readonly borderFocus: string;
116
- readonly shadowFocus: string;
119
+ readonly border: {
120
+ readonly focus: string;
121
+ };
122
+ readonly shadow: {
123
+ readonly focus: string;
124
+ };
117
125
  };
118
126
  readonly input: {
119
127
  readonly bg: {
@@ -137,21 +145,29 @@ export declare const rm: {
137
145
  readonly disabled: string;
138
146
  };
139
147
  readonly icon: string;
140
- readonly shadowFocus: string;
148
+ readonly shadow: {
149
+ readonly focus: string;
150
+ };
141
151
  };
142
152
  readonly color: {
143
153
  readonly white: "#FFFFFF";
144
154
  readonly black: "#000000";
145
155
  readonly primary: string;
146
- readonly text: string;
147
- readonly textSecondary: string;
148
- readonly textTertiary: string;
149
- readonly textMuted: string;
150
- readonly border: string;
151
- readonly borderLight: string;
152
- readonly bg: string;
153
- readonly bgSubtle: string;
154
- readonly bgMuted: string;
156
+ readonly text: {
157
+ readonly default: string;
158
+ readonly secondary: string;
159
+ readonly tertiary: string;
160
+ readonly muted: string;
161
+ };
162
+ readonly border: {
163
+ readonly default: string;
164
+ readonly light: string;
165
+ };
166
+ readonly bg: {
167
+ readonly default: string;
168
+ readonly subtle: string;
169
+ readonly muted: string;
170
+ };
155
171
  readonly focus: string;
156
172
  readonly success: string;
157
173
  readonly warning: string;
package/dist/types/tokens/tokens.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- export { mg } from './mg';
1
+ export { mg } from './default';
2
2
  export { rm } from './rm';
3
3
  export { csc } from './csc';
4
- export type ProjectTokens = typeof import('./mg')['mg'];
4
+ export type ProjectTokens = typeof import('./default')['mg'];
5
5
  export declare const button: {
6
6
  readonly primary: {
7
7
  readonly bg: {
@@ -78,13 +78,17 @@ export declare const checkbox: {
78
78
  readonly active: string;
79
79
  readonly disabled: string;
80
80
  };
81
- readonly borderFocus: string;
81
+ readonly border: {
82
+ readonly focus: string;
83
+ };
82
84
  };
83
85
  readonly icon: {
84
86
  readonly default: string;
85
87
  readonly disabled: string;
86
88
  };
87
- readonly shadowFocus: string;
89
+ readonly shadow: {
90
+ readonly focus: string;
91
+ };
88
92
  };
89
93
  export declare const radio: {
90
94
  readonly bg: {
@@ -115,8 +119,12 @@ export declare const radio: {
115
119
  readonly active: string;
116
120
  readonly disabled: string;
117
121
  };
118
- readonly borderFocus: string;
119
- readonly shadowFocus: string;
122
+ readonly border: {
123
+ readonly focus: string;
124
+ };
125
+ readonly shadow: {
126
+ readonly focus: string;
127
+ };
120
128
  };
121
129
  export declare const input: {
122
130
  readonly bg: {
@@ -140,21 +148,29 @@ export declare const input: {
140
148
  readonly disabled: string;
141
149
  };
142
150
  readonly icon: string;
143
- readonly shadowFocus: string;
151
+ readonly shadow: {
152
+ readonly focus: string;
153
+ };
144
154
  };
145
155
  export declare const color: {
146
156
  readonly white: "#FFFFFF";
147
157
  readonly black: "#000000";
148
158
  readonly primary: string;
149
- readonly text: string;
150
- readonly textSecondary: string;
151
- readonly textTertiary: string;
152
- readonly textMuted: string;
153
- readonly border: string;
154
- readonly borderLight: string;
155
- readonly bg: string;
156
- readonly bgSubtle: string;
157
- readonly bgMuted: string;
159
+ readonly text: {
160
+ readonly default: string;
161
+ readonly secondary: string;
162
+ readonly tertiary: string;
163
+ readonly muted: string;
164
+ };
165
+ readonly border: {
166
+ readonly default: string;
167
+ readonly light: string;
168
+ };
169
+ readonly bg: {
170
+ readonly default: string;
171
+ readonly subtle: string;
172
+ readonly muted: string;
173
+ };
158
174
  readonly focus: string;
159
175
  readonly success: string;
160
176
  readonly warning: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kimkihwan/cytur-design-system",
3
- "version": "0.2.4",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",