@tac-ui/tokens 1.0.3 → 1.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 (14) hide show
  1. package/dist/{chunk-5ATTRKGS.mjs → chunk-I2PXRTYK.mjs} +52 -45
  2. package/dist/index.d.mts +75 -48
  3. package/dist/index.d.ts +75 -48
  4. package/dist/index.js +52 -45
  5. package/dist/index.mjs +1 -1
  6. package/dist/{motion-CkV7gMnS.d.mts → motion-BRcQTpE0.d.mts} +1 -1
  7. package/dist/{motion-CkV7gMnS.d.ts → motion-BRcQTpE0.d.ts} +1 -1
  8. package/dist/native/index.d.mts +1 -1
  9. package/dist/native/index.d.ts +1 -1
  10. package/dist/native/index.js +46 -45
  11. package/dist/native/index.mjs +2 -2
  12. package/dist/web/css-variables.js +39 -37
  13. package/dist/web/css-variables.mjs +2 -1
  14. package/package.json +2 -2
package/dist/{chunk-5ATTRKGS.mjs → chunk-I2PXRTYK.mjs} RENAMED
@@ -47,17 +47,17 @@ var semanticTokens = {
47
47
  glassBorder: "rgba(24, 24, 27, 0.04)",
48
48
  glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
49
49
  glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
50
- accentGlow: "none",
50
+ accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
51
51
  // ── Gradients ──
52
- gradientBrand: "none",
53
- gradientBrandHover: "none",
54
- gradientSubtle: "none",
55
- gradientAccent: "none",
56
- gradientAccentVivid: "none",
57
- gradientGlow: "none",
58
- gradientMesh: "none",
59
- gradientSurface: "none",
60
- gradientGlowShadow: "none",
52
+ gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
53
+ gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
54
+ gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
55
+ gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
56
+ gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
57
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
58
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)",
59
+ gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
60
+ gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
61
61
  // ── Shadow ──
62
62
  shadowColor: "rgba(24, 24, 27, 0.05)",
63
63
  // ── Status ──
@@ -157,20 +157,20 @@ var semanticTokens = {
157
157
  gray900: "#FAFAFA",
158
158
  // ── Glass & Effects ──
159
159
  glassBg: "rgba(9, 9, 11, 0.85)",
160
- glassBorder: "rgba(250, 250, 250, 0.1)",
161
- glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
162
- glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
163
- accentGlow: "none",
160
+ glassBorder: "rgba(255, 255, 255, 0.08)",
161
+ glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
162
+ glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
163
+ accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
164
164
  // ── Gradients ──
165
- gradientBrand: "none",
166
- gradientBrandHover: "none",
167
- gradientSubtle: "none",
168
- gradientAccent: "none",
169
- gradientAccentVivid: "none",
170
- gradientGlow: "none",
171
- gradientMesh: "none",
172
- gradientSurface: "none",
173
- gradientGlowShadow: "none",
165
+ gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
166
+ gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
167
+ gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
168
+ gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
169
+ gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
170
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
171
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)",
172
+ gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
173
+ gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
174
174
  // ── Shadow ──
175
175
  shadowColor: "rgba(0, 0, 0, 0.9)",
176
176
  // ── Status ──
@@ -212,15 +212,15 @@ var semanticTokens = {
212
212
  btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
213
213
  btnDestructiveSurface: "#EF4444",
214
214
  btnDestructiveHover: "#F87171",
215
- inputBg: "#27272A",
216
- inputBorderRest: "#3F3F46",
217
- inputBorderHover: "#52525B",
215
+ inputBg: "rgba(255, 255, 255, 0.04)",
216
+ inputBorderRest: "rgba(255, 255, 255, 0.1)",
217
+ inputBorderHover: "rgba(255, 255, 255, 0.16)",
218
218
  inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
219
219
  inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
220
220
  inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
221
- dropdownBg: "#18181B",
222
- dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
223
- dropdownItemHover: "#27272A",
221
+ dropdownBg: "rgba(24, 24, 27, 0.95)",
222
+ dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)",
223
+ dropdownItemHover: "rgba(255, 255, 255, 0.06)",
224
224
  cardAccentBorder: "#3F3F46",
225
225
  cardAccentGlow: "none",
226
226
  cardAccentHoverBorder: "#52525B",
@@ -237,7 +237,7 @@ var component = {
237
237
  },
238
238
  input: {
239
239
  sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
240
- md: { height: 44, paddingX: 16, fontSize: 15, borderRadius: 12, iconSize: 18, iconPadding: 42 },
240
+ md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
241
241
  lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
242
242
  },
243
243
  card: {
@@ -372,27 +372,34 @@ var typography = {
372
372
  fontFamily: {
373
373
  primary: "Pretendard",
374
374
  secondary: "Pretendard",
375
- display: "Pretendard"
375
+ display: "Pretendard",
376
+ mono: "SF Mono"
376
377
  },
377
378
  display: {
378
- lg: { size: 56, weight: 700, lineHeight: 1.12, letterSpacing: -0.03 },
379
- md: { size: 48, weight: 700, lineHeight: 1.12, letterSpacing: -0.025 },
380
- sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
379
+ lg: { size: 56, weight: 700, lineHeight: 1.08, letterSpacing: -0.035 },
380
+ md: { size: 48, weight: 700, lineHeight: 1.08, letterSpacing: -0.03 },
381
+ sm: { size: 40, weight: 600, lineHeight: 1.1, letterSpacing: -0.025 }
381
382
  },
382
383
  heading: {
383
- h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
384
- h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
384
+ h1: { size: 34, weight: 700, lineHeight: 1.15, letterSpacing: -0.025 },
385
+ h2: { size: 28, weight: 600, lineHeight: 1.2, letterSpacing: -0.02 },
385
386
  h3: { size: 22, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
386
387
  h4: { size: 20, weight: 600, lineHeight: 1.3, letterSpacing: -0.01 },
387
388
  h5: { size: 17, weight: 600, lineHeight: 1.35, letterSpacing: -5e-3 },
388
389
  h6: { size: 15, weight: 600, lineHeight: 1.4, letterSpacing: 0 }
389
390
  },
390
391
  body: {
391
- lg: { size: 17, weight: 400, lineHeight: 1.4, letterSpacing: -0.02 },
392
- md: { size: 15, weight: 400, lineHeight: 1.4, letterSpacing: -0.01 },
393
- sm: { size: 13, weight: 400, lineHeight: 1.4, letterSpacing: 0 }
392
+ lg: { size: 17, weight: 400, lineHeight: 1.5, letterSpacing: -0.01 },
393
+ md: { size: 15, weight: 400, lineHeight: 1.5, letterSpacing: -5e-3 },
394
+ sm: { size: 13, weight: 400, lineHeight: 1.45, letterSpacing: 0 }
395
+ },
396
+ label: {
397
+ lg: { size: 15, weight: 500, lineHeight: 1.4, letterSpacing: -5e-3 },
398
+ md: { size: 13, weight: 500, lineHeight: 1.4, letterSpacing: 0 },
399
+ sm: { size: 12, weight: 500, lineHeight: 1.4, letterSpacing: 5e-3 }
394
400
  },
395
401
  caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
402
+ overline: { size: 11, weight: 600, lineHeight: 1.4, letterSpacing: 0.06 },
396
403
  fontWeight: {
397
404
  light: "300",
398
405
  regular: "400",
@@ -457,12 +464,12 @@ var elevation = {
457
464
  glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
458
465
  },
459
466
  dark: {
460
- sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
461
- m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
462
- lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
463
- xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
464
- glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)",
465
- glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)"
467
+ sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
468
+ m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)",
469
+ lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)",
470
+ xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)",
471
+ glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)",
472
+ glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)"
466
473
  }
467
474
  };
468
475
  var elevationLight = elevation.light;
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-CkV7gMnS.mjs';
1
+ export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-BRcQTpE0.mjs';
2
2
 
3
3
  /**
4
4
  * Primitive color tokens — Tac UI raw palette.
@@ -102,16 +102,16 @@ declare const semanticTokens: {
102
102
  readonly glassBorder: "rgba(24, 24, 27, 0.04)";
103
103
  readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)";
104
104
  readonly glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)";
105
- readonly accentGlow: "none";
106
- readonly gradientBrand: "none";
107
- readonly gradientBrandHover: "none";
108
- readonly gradientSubtle: "none";
109
- readonly gradientAccent: "none";
110
- readonly gradientAccentVivid: "none";
111
- readonly gradientGlow: "none";
112
- readonly gradientMesh: "none";
113
- readonly gradientSurface: "none";
114
- readonly gradientGlowShadow: "none";
105
+ readonly accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)";
106
+ readonly gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)";
107
+ readonly gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)";
108
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)";
109
+ readonly gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)";
110
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)";
111
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)";
112
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)";
113
+ readonly gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)";
114
+ readonly gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)";
115
115
  readonly shadowColor: "rgba(24, 24, 27, 0.05)";
116
116
  readonly success: "#166534";
117
117
  readonly successBg: "#DCFCE7";
@@ -200,19 +200,19 @@ declare const semanticTokens: {
200
200
  readonly gray800: "#E4E4E7";
201
201
  readonly gray900: "#FAFAFA";
202
202
  readonly glassBg: "rgba(9, 9, 11, 0.85)";
203
- readonly glassBorder: "rgba(250, 250, 250, 0.1)";
204
- readonly glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)";
205
- readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)";
206
- readonly accentGlow: "none";
207
- readonly gradientBrand: "none";
208
- readonly gradientBrandHover: "none";
209
- readonly gradientSubtle: "none";
210
- readonly gradientAccent: "none";
211
- readonly gradientAccentVivid: "none";
212
- readonly gradientGlow: "none";
213
- readonly gradientMesh: "none";
214
- readonly gradientSurface: "none";
215
- readonly gradientGlowShadow: "none";
203
+ readonly glassBorder: "rgba(255, 255, 255, 0.08)";
204
+ readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
205
+ readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)";
206
+ readonly accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)";
207
+ readonly gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)";
208
+ readonly gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)";
209
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)";
210
+ readonly gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)";
211
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)";
212
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)";
213
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)";
214
+ readonly gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)";
215
+ readonly gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)";
216
216
  readonly shadowColor: "rgba(0, 0, 0, 0.9)";
217
217
  readonly success: "#4ADE80";
218
218
  readonly successBg: "rgba(74, 222, 128, 0.15)";
@@ -250,15 +250,15 @@ declare const semanticTokens: {
250
250
  readonly btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)";
251
251
  readonly btnDestructiveSurface: "#EF4444";
252
252
  readonly btnDestructiveHover: "#F87171";
253
- readonly inputBg: "#27272A";
254
- readonly inputBorderRest: "#3F3F46";
255
- readonly inputBorderHover: "#52525B";
253
+ readonly inputBg: "rgba(255, 255, 255, 0.04)";
254
+ readonly inputBorderRest: "rgba(255, 255, 255, 0.1)";
255
+ readonly inputBorderHover: "rgba(255, 255, 255, 0.16)";
256
256
  readonly inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)";
257
257
  readonly inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)";
258
258
  readonly inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)";
259
- readonly dropdownBg: "#18181B";
260
- readonly dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)";
261
- readonly dropdownItemHover: "#27272A";
259
+ readonly dropdownBg: "rgba(24, 24, 27, 0.95)";
260
+ readonly dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)";
261
+ readonly dropdownItemHover: "rgba(255, 255, 255, 0.06)";
262
262
  readonly cardAccentBorder: "#3F3F46";
263
263
  readonly cardAccentGlow: "none";
264
264
  readonly cardAccentHoverBorder: "#52525B";
@@ -271,38 +271,39 @@ declare const typography: {
271
271
  readonly primary: "Pretendard";
272
272
  readonly secondary: "Pretendard";
273
273
  readonly display: "Pretendard";
274
+ readonly mono: "SF Mono";
274
275
  };
275
276
  readonly display: {
276
277
  readonly lg: {
277
278
  readonly size: 56;
278
279
  readonly weight: 700;
279
- readonly lineHeight: 1.12;
280
- readonly letterSpacing: -0.03;
280
+ readonly lineHeight: 1.08;
281
+ readonly letterSpacing: -0.035;
281
282
  };
282
283
  readonly md: {
283
284
  readonly size: 48;
284
285
  readonly weight: 700;
285
- readonly lineHeight: 1.12;
286
- readonly letterSpacing: -0.025;
286
+ readonly lineHeight: 1.08;
287
+ readonly letterSpacing: -0.03;
287
288
  };
288
289
  readonly sm: {
289
290
  readonly size: 40;
290
291
  readonly weight: 600;
291
- readonly lineHeight: 1.15;
292
- readonly letterSpacing: -0.02;
292
+ readonly lineHeight: 1.1;
293
+ readonly letterSpacing: -0.025;
293
294
  };
294
295
  };
295
296
  readonly heading: {
296
297
  readonly h1: {
297
298
  readonly size: 34;
298
299
  readonly weight: 700;
299
- readonly lineHeight: 1.2;
300
+ readonly lineHeight: 1.15;
300
301
  readonly letterSpacing: -0.025;
301
302
  };
302
303
  readonly h2: {
303
304
  readonly size: 28;
304
305
  readonly weight: 600;
305
- readonly lineHeight: 1.22;
306
+ readonly lineHeight: 1.2;
306
307
  readonly letterSpacing: -0.02;
307
308
  };
308
309
  readonly h3: {
@@ -334,21 +335,41 @@ declare const typography: {
334
335
  readonly lg: {
335
336
  readonly size: 17;
336
337
  readonly weight: 400;
337
- readonly lineHeight: 1.4;
338
- readonly letterSpacing: -0.02;
338
+ readonly lineHeight: 1.5;
339
+ readonly letterSpacing: -0.01;
339
340
  };
340
341
  readonly md: {
341
342
  readonly size: 15;
342
343
  readonly weight: 400;
343
- readonly lineHeight: 1.4;
344
- readonly letterSpacing: -0.01;
344
+ readonly lineHeight: 1.5;
345
+ readonly letterSpacing: -0.005;
345
346
  };
346
347
  readonly sm: {
347
348
  readonly size: 13;
348
349
  readonly weight: 400;
350
+ readonly lineHeight: 1.45;
351
+ readonly letterSpacing: 0;
352
+ };
353
+ };
354
+ readonly label: {
355
+ readonly lg: {
356
+ readonly size: 15;
357
+ readonly weight: 500;
358
+ readonly lineHeight: 1.4;
359
+ readonly letterSpacing: -0.005;
360
+ };
361
+ readonly md: {
362
+ readonly size: 13;
363
+ readonly weight: 500;
349
364
  readonly lineHeight: 1.4;
350
365
  readonly letterSpacing: 0;
351
366
  };
367
+ readonly sm: {
368
+ readonly size: 12;
369
+ readonly weight: 500;
370
+ readonly lineHeight: 1.4;
371
+ readonly letterSpacing: 0.005;
372
+ };
352
373
  };
353
374
  readonly caption: {
354
375
  readonly size: 12;
@@ -356,6 +377,12 @@ declare const typography: {
356
377
  readonly lineHeight: 1.4;
357
378
  readonly letterSpacing: 0.01;
358
379
  };
380
+ readonly overline: {
381
+ readonly size: 11;
382
+ readonly weight: 600;
383
+ readonly lineHeight: 1.4;
384
+ readonly letterSpacing: 0.06;
385
+ };
359
386
  readonly fontWeight: {
360
387
  readonly light: "300";
361
388
  readonly regular: "400";
@@ -418,12 +445,12 @@ declare const elevation: {
418
445
  readonly glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)";
419
446
  };
420
447
  readonly dark: {
421
- readonly sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)";
422
- readonly m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)";
423
- readonly lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)";
424
- readonly xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)";
425
- readonly glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)";
426
- readonly glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)";
448
+ readonly sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)";
449
+ readonly m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)";
450
+ readonly lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)";
451
+ readonly xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)";
452
+ readonly glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)";
453
+ readonly glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)";
427
454
  };
428
455
  };
429
456
  /** @deprecated Use elevation.light instead */
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-CkV7gMnS.js';
1
+ export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-BRcQTpE0.js';
2
2
 
3
3
  /**
4
4
  * Primitive color tokens — Tac UI raw palette.
@@ -102,16 +102,16 @@ declare const semanticTokens: {
102
102
  readonly glassBorder: "rgba(24, 24, 27, 0.04)";
103
103
  readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)";
104
104
  readonly glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)";
105
- readonly accentGlow: "none";
106
- readonly gradientBrand: "none";
107
- readonly gradientBrandHover: "none";
108
- readonly gradientSubtle: "none";
109
- readonly gradientAccent: "none";
110
- readonly gradientAccentVivid: "none";
111
- readonly gradientGlow: "none";
112
- readonly gradientMesh: "none";
113
- readonly gradientSurface: "none";
114
- readonly gradientGlowShadow: "none";
105
+ readonly accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)";
106
+ readonly gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)";
107
+ readonly gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)";
108
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)";
109
+ readonly gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)";
110
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)";
111
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)";
112
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)";
113
+ readonly gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)";
114
+ readonly gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)";
115
115
  readonly shadowColor: "rgba(24, 24, 27, 0.05)";
116
116
  readonly success: "#166534";
117
117
  readonly successBg: "#DCFCE7";
@@ -200,19 +200,19 @@ declare const semanticTokens: {
200
200
  readonly gray800: "#E4E4E7";
201
201
  readonly gray900: "#FAFAFA";
202
202
  readonly glassBg: "rgba(9, 9, 11, 0.85)";
203
- readonly glassBorder: "rgba(250, 250, 250, 0.1)";
204
- readonly glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)";
205
- readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)";
206
- readonly accentGlow: "none";
207
- readonly gradientBrand: "none";
208
- readonly gradientBrandHover: "none";
209
- readonly gradientSubtle: "none";
210
- readonly gradientAccent: "none";
211
- readonly gradientAccentVivid: "none";
212
- readonly gradientGlow: "none";
213
- readonly gradientMesh: "none";
214
- readonly gradientSurface: "none";
215
- readonly gradientGlowShadow: "none";
203
+ readonly glassBorder: "rgba(255, 255, 255, 0.08)";
204
+ readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
205
+ readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)";
206
+ readonly accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)";
207
+ readonly gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)";
208
+ readonly gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)";
209
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)";
210
+ readonly gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)";
211
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)";
212
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)";
213
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)";
214
+ readonly gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)";
215
+ readonly gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)";
216
216
  readonly shadowColor: "rgba(0, 0, 0, 0.9)";
217
217
  readonly success: "#4ADE80";
218
218
  readonly successBg: "rgba(74, 222, 128, 0.15)";
@@ -250,15 +250,15 @@ declare const semanticTokens: {
250
250
  readonly btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)";
251
251
  readonly btnDestructiveSurface: "#EF4444";
252
252
  readonly btnDestructiveHover: "#F87171";
253
- readonly inputBg: "#27272A";
254
- readonly inputBorderRest: "#3F3F46";
255
- readonly inputBorderHover: "#52525B";
253
+ readonly inputBg: "rgba(255, 255, 255, 0.04)";
254
+ readonly inputBorderRest: "rgba(255, 255, 255, 0.1)";
255
+ readonly inputBorderHover: "rgba(255, 255, 255, 0.16)";
256
256
  readonly inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)";
257
257
  readonly inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)";
258
258
  readonly inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)";
259
- readonly dropdownBg: "#18181B";
260
- readonly dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)";
261
- readonly dropdownItemHover: "#27272A";
259
+ readonly dropdownBg: "rgba(24, 24, 27, 0.95)";
260
+ readonly dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)";
261
+ readonly dropdownItemHover: "rgba(255, 255, 255, 0.06)";
262
262
  readonly cardAccentBorder: "#3F3F46";
263
263
  readonly cardAccentGlow: "none";
264
264
  readonly cardAccentHoverBorder: "#52525B";
@@ -271,38 +271,39 @@ declare const typography: {
271
271
  readonly primary: "Pretendard";
272
272
  readonly secondary: "Pretendard";
273
273
  readonly display: "Pretendard";
274
+ readonly mono: "SF Mono";
274
275
  };
275
276
  readonly display: {
276
277
  readonly lg: {
277
278
  readonly size: 56;
278
279
  readonly weight: 700;
279
- readonly lineHeight: 1.12;
280
- readonly letterSpacing: -0.03;
280
+ readonly lineHeight: 1.08;
281
+ readonly letterSpacing: -0.035;
281
282
  };
282
283
  readonly md: {
283
284
  readonly size: 48;
284
285
  readonly weight: 700;
285
- readonly lineHeight: 1.12;
286
- readonly letterSpacing: -0.025;
286
+ readonly lineHeight: 1.08;
287
+ readonly letterSpacing: -0.03;
287
288
  };
288
289
  readonly sm: {
289
290
  readonly size: 40;
290
291
  readonly weight: 600;
291
- readonly lineHeight: 1.15;
292
- readonly letterSpacing: -0.02;
292
+ readonly lineHeight: 1.1;
293
+ readonly letterSpacing: -0.025;
293
294
  };
294
295
  };
295
296
  readonly heading: {
296
297
  readonly h1: {
297
298
  readonly size: 34;
298
299
  readonly weight: 700;
299
- readonly lineHeight: 1.2;
300
+ readonly lineHeight: 1.15;
300
301
  readonly letterSpacing: -0.025;
301
302
  };
302
303
  readonly h2: {
303
304
  readonly size: 28;
304
305
  readonly weight: 600;
305
- readonly lineHeight: 1.22;
306
+ readonly lineHeight: 1.2;
306
307
  readonly letterSpacing: -0.02;
307
308
  };
308
309
  readonly h3: {
@@ -334,21 +335,41 @@ declare const typography: {
334
335
  readonly lg: {
335
336
  readonly size: 17;
336
337
  readonly weight: 400;
337
- readonly lineHeight: 1.4;
338
- readonly letterSpacing: -0.02;
338
+ readonly lineHeight: 1.5;
339
+ readonly letterSpacing: -0.01;
339
340
  };
340
341
  readonly md: {
341
342
  readonly size: 15;
342
343
  readonly weight: 400;
343
- readonly lineHeight: 1.4;
344
- readonly letterSpacing: -0.01;
344
+ readonly lineHeight: 1.5;
345
+ readonly letterSpacing: -0.005;
345
346
  };
346
347
  readonly sm: {
347
348
  readonly size: 13;
348
349
  readonly weight: 400;
350
+ readonly lineHeight: 1.45;
351
+ readonly letterSpacing: 0;
352
+ };
353
+ };
354
+ readonly label: {
355
+ readonly lg: {
356
+ readonly size: 15;
357
+ readonly weight: 500;
358
+ readonly lineHeight: 1.4;
359
+ readonly letterSpacing: -0.005;
360
+ };
361
+ readonly md: {
362
+ readonly size: 13;
363
+ readonly weight: 500;
349
364
  readonly lineHeight: 1.4;
350
365
  readonly letterSpacing: 0;
351
366
  };
367
+ readonly sm: {
368
+ readonly size: 12;
369
+ readonly weight: 500;
370
+ readonly lineHeight: 1.4;
371
+ readonly letterSpacing: 0.005;
372
+ };
352
373
  };
353
374
  readonly caption: {
354
375
  readonly size: 12;
@@ -356,6 +377,12 @@ declare const typography: {
356
377
  readonly lineHeight: 1.4;
357
378
  readonly letterSpacing: 0.01;
358
379
  };
380
+ readonly overline: {
381
+ readonly size: 11;
382
+ readonly weight: 600;
383
+ readonly lineHeight: 1.4;
384
+ readonly letterSpacing: 0.06;
385
+ };
359
386
  readonly fontWeight: {
360
387
  readonly light: "300";
361
388
  readonly regular: "400";
@@ -418,12 +445,12 @@ declare const elevation: {
418
445
  readonly glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)";
419
446
  };
420
447
  readonly dark: {
421
- readonly sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)";
422
- readonly m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)";
423
- readonly lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)";
424
- readonly xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)";
425
- readonly glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)";
426
- readonly glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)";
448
+ readonly sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)";
449
+ readonly m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)";
450
+ readonly lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)";
451
+ readonly xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)";
452
+ readonly glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)";
453
+ readonly glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)";
427
454
  };
428
455
  };
429
456
  /** @deprecated Use elevation.light instead */
package/dist/index.js CHANGED
@@ -107,17 +107,17 @@ var semanticTokens = {
107
107
  glassBorder: "rgba(24, 24, 27, 0.04)",
108
108
  glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
109
109
  glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
110
- accentGlow: "none",
110
+ accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
111
111
  // ── Gradients ──
112
- gradientBrand: "none",
113
- gradientBrandHover: "none",
114
- gradientSubtle: "none",
115
- gradientAccent: "none",
116
- gradientAccentVivid: "none",
117
- gradientGlow: "none",
118
- gradientMesh: "none",
119
- gradientSurface: "none",
120
- gradientGlowShadow: "none",
112
+ gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
113
+ gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
114
+ gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
115
+ gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
116
+ gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
117
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
118
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)",
119
+ gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
120
+ gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
121
121
  // ── Shadow ──
122
122
  shadowColor: "rgba(24, 24, 27, 0.05)",
123
123
  // ── Status ──
@@ -217,20 +217,20 @@ var semanticTokens = {
217
217
  gray900: "#FAFAFA",
218
218
  // ── Glass & Effects ──
219
219
  glassBg: "rgba(9, 9, 11, 0.85)",
220
- glassBorder: "rgba(250, 250, 250, 0.1)",
221
- glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
222
- glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
223
- accentGlow: "none",
220
+ glassBorder: "rgba(255, 255, 255, 0.08)",
221
+ glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
222
+ glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
223
+ accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
224
224
  // ── Gradients ──
225
- gradientBrand: "none",
226
- gradientBrandHover: "none",
227
- gradientSubtle: "none",
228
- gradientAccent: "none",
229
- gradientAccentVivid: "none",
230
- gradientGlow: "none",
231
- gradientMesh: "none",
232
- gradientSurface: "none",
233
- gradientGlowShadow: "none",
225
+ gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
226
+ gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
227
+ gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
228
+ gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
229
+ gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
230
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
231
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)",
232
+ gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
233
+ gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
234
234
  // ── Shadow ──
235
235
  shadowColor: "rgba(0, 0, 0, 0.9)",
236
236
  // ── Status ──
@@ -272,15 +272,15 @@ var semanticTokens = {
272
272
  btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
273
273
  btnDestructiveSurface: "#EF4444",
274
274
  btnDestructiveHover: "#F87171",
275
- inputBg: "#27272A",
276
- inputBorderRest: "#3F3F46",
277
- inputBorderHover: "#52525B",
275
+ inputBg: "rgba(255, 255, 255, 0.04)",
276
+ inputBorderRest: "rgba(255, 255, 255, 0.1)",
277
+ inputBorderHover: "rgba(255, 255, 255, 0.16)",
278
278
  inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
279
279
  inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
280
280
  inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
281
- dropdownBg: "#18181B",
282
- dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
283
- dropdownItemHover: "#27272A",
281
+ dropdownBg: "rgba(24, 24, 27, 0.95)",
282
+ dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)",
283
+ dropdownItemHover: "rgba(255, 255, 255, 0.06)",
284
284
  cardAccentBorder: "#3F3F46",
285
285
  cardAccentGlow: "none",
286
286
  cardAccentHoverBorder: "#52525B",
@@ -297,7 +297,7 @@ var component = {
297
297
  },
298
298
  input: {
299
299
  sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
300
- md: { height: 44, paddingX: 16, fontSize: 15, borderRadius: 12, iconSize: 18, iconPadding: 42 },
300
+ md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
301
301
  lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
302
302
  },
303
303
  card: {
@@ -432,27 +432,34 @@ var typography = {
432
432
  fontFamily: {
433
433
  primary: "Pretendard",
434
434
  secondary: "Pretendard",
435
- display: "Pretendard"
435
+ display: "Pretendard",
436
+ mono: "SF Mono"
436
437
  },
437
438
  display: {
438
- lg: { size: 56, weight: 700, lineHeight: 1.12, letterSpacing: -0.03 },
439
- md: { size: 48, weight: 700, lineHeight: 1.12, letterSpacing: -0.025 },
440
- sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
439
+ lg: { size: 56, weight: 700, lineHeight: 1.08, letterSpacing: -0.035 },
440
+ md: { size: 48, weight: 700, lineHeight: 1.08, letterSpacing: -0.03 },
441
+ sm: { size: 40, weight: 600, lineHeight: 1.1, letterSpacing: -0.025 }
441
442
  },
442
443
  heading: {
443
- h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
444
- h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
444
+ h1: { size: 34, weight: 700, lineHeight: 1.15, letterSpacing: -0.025 },
445
+ h2: { size: 28, weight: 600, lineHeight: 1.2, letterSpacing: -0.02 },
445
446
  h3: { size: 22, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
446
447
  h4: { size: 20, weight: 600, lineHeight: 1.3, letterSpacing: -0.01 },
447
448
  h5: { size: 17, weight: 600, lineHeight: 1.35, letterSpacing: -5e-3 },
448
449
  h6: { size: 15, weight: 600, lineHeight: 1.4, letterSpacing: 0 }
449
450
  },
450
451
  body: {
451
- lg: { size: 17, weight: 400, lineHeight: 1.4, letterSpacing: -0.02 },
452
- md: { size: 15, weight: 400, lineHeight: 1.4, letterSpacing: -0.01 },
453
- sm: { size: 13, weight: 400, lineHeight: 1.4, letterSpacing: 0 }
452
+ lg: { size: 17, weight: 400, lineHeight: 1.5, letterSpacing: -0.01 },
453
+ md: { size: 15, weight: 400, lineHeight: 1.5, letterSpacing: -5e-3 },
454
+ sm: { size: 13, weight: 400, lineHeight: 1.45, letterSpacing: 0 }
455
+ },
456
+ label: {
457
+ lg: { size: 15, weight: 500, lineHeight: 1.4, letterSpacing: -5e-3 },
458
+ md: { size: 13, weight: 500, lineHeight: 1.4, letterSpacing: 0 },
459
+ sm: { size: 12, weight: 500, lineHeight: 1.4, letterSpacing: 5e-3 }
454
460
  },
455
461
  caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
462
+ overline: { size: 11, weight: 600, lineHeight: 1.4, letterSpacing: 0.06 },
456
463
  fontWeight: {
457
464
  light: "300",
458
465
  regular: "400",
@@ -517,12 +524,12 @@ var elevation = {
517
524
  glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
518
525
  },
519
526
  dark: {
520
- sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
521
- m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
522
- lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
523
- xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
524
- glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)",
525
- glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)"
527
+ sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
528
+ m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)",
529
+ lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)",
530
+ xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)",
531
+ glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)",
532
+ glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)"
526
533
  }
527
534
  };
528
535
  var elevationLight = elevation.light;
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  export { ms, px, rem, unitless } from './chunk-GLCF64BD.mjs';
2
- export { breakpoints, chart, component, containers, elevation, elevationLight, grid, motion, radius, semanticTokens, spacing, springConfigs, tacSpring, typography, zIndex } from './chunk-5ATTRKGS.mjs';
2
+ export { breakpoints, chart, component, containers, elevation, elevationLight, grid, motion, radius, semanticTokens, spacing, springConfigs, tacSpring, typography, zIndex } from './chunk-I2PXRTYK.mjs';
3
3
 
4
4
  // src/primitive.ts
5
5
  var primitiveColors = {
package/dist/{motion-CkV7gMnS.d.mts → motion-BRcQTpE0.d.mts} RENAMED
@@ -41,7 +41,7 @@ declare const component: {
41
41
  readonly md: {
42
42
  readonly height: 44;
43
43
  readonly paddingX: 16;
44
- readonly fontSize: 15;
44
+ readonly fontSize: 16;
45
45
  readonly borderRadius: 12;
46
46
  readonly iconSize: 18;
47
47
  readonly iconPadding: 42;
package/dist/{motion-CkV7gMnS.d.ts → motion-BRcQTpE0.d.ts} RENAMED
@@ -41,7 +41,7 @@ declare const component: {
41
41
  readonly md: {
42
42
  readonly height: 44;
43
43
  readonly paddingX: 16;
44
- readonly fontSize: 15;
44
+ readonly fontSize: 16;
45
45
  readonly borderRadius: 12;
46
46
  readonly iconSize: 18;
47
47
  readonly iconPadding: 42;
package/dist/native/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ThemeMode, TacTheme } from '@tac-ui/shared';
2
- export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-CkV7gMnS.mjs';
2
+ export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-BRcQTpE0.mjs';
3
3
 
4
4
  /**
5
5
  * Native shadow objects for React Native (shadow style + elevation).
package/dist/native/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ThemeMode, TacTheme } from '@tac-ui/shared';
2
- export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-CkV7gMnS.js';
2
+ export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-BRcQTpE0.js';
3
3
 
4
4
  /**
5
5
  * Native shadow objects for React Native (shadow style + elevation).
package/dist/native/index.js CHANGED
@@ -49,17 +49,17 @@ var semanticTokens = {
49
49
  glassBorder: "rgba(24, 24, 27, 0.04)",
50
50
  glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
51
51
  glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
52
- accentGlow: "none",
52
+ accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
53
53
  // ── Gradients ──
54
- gradientBrand: "none",
55
- gradientBrandHover: "none",
56
- gradientSubtle: "none",
57
- gradientAccent: "none",
58
- gradientAccentVivid: "none",
59
- gradientGlow: "none",
60
- gradientMesh: "none",
61
- gradientSurface: "none",
62
- gradientGlowShadow: "none",
54
+ gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
55
+ gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
56
+ gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
57
+ gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
58
+ gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
59
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
60
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)",
61
+ gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
62
+ gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
63
63
  // ── Shadow ──
64
64
  shadowColor: "rgba(24, 24, 27, 0.05)",
65
65
  // ── Status ──
@@ -159,20 +159,20 @@ var semanticTokens = {
159
159
  gray900: "#FAFAFA",
160
160
  // ── Glass & Effects ──
161
161
  glassBg: "rgba(9, 9, 11, 0.85)",
162
- glassBorder: "rgba(250, 250, 250, 0.1)",
163
- glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
164
- glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
165
- accentGlow: "none",
162
+ glassBorder: "rgba(255, 255, 255, 0.08)",
163
+ glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
164
+ glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
165
+ accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
166
166
  // ── Gradients ──
167
- gradientBrand: "none",
168
- gradientBrandHover: "none",
169
- gradientSubtle: "none",
170
- gradientAccent: "none",
171
- gradientAccentVivid: "none",
172
- gradientGlow: "none",
173
- gradientMesh: "none",
174
- gradientSurface: "none",
175
- gradientGlowShadow: "none",
167
+ gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
168
+ gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
169
+ gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
170
+ gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
171
+ gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
172
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
173
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)",
174
+ gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
175
+ gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
176
176
  // ── Shadow ──
177
177
  shadowColor: "rgba(0, 0, 0, 0.9)",
178
178
  // ── Status ──
@@ -214,15 +214,15 @@ var semanticTokens = {
214
214
  btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
215
215
  btnDestructiveSurface: "#EF4444",
216
216
  btnDestructiveHover: "#F87171",
217
- inputBg: "#27272A",
218
- inputBorderRest: "#3F3F46",
219
- inputBorderHover: "#52525B",
217
+ inputBg: "rgba(255, 255, 255, 0.04)",
218
+ inputBorderRest: "rgba(255, 255, 255, 0.1)",
219
+ inputBorderHover: "rgba(255, 255, 255, 0.16)",
220
220
  inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
221
221
  inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
222
222
  inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
223
- dropdownBg: "#18181B",
224
- dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
225
- dropdownItemHover: "#27272A",
223
+ dropdownBg: "rgba(24, 24, 27, 0.95)",
224
+ dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)",
225
+ dropdownItemHover: "rgba(255, 255, 255, 0.06)",
226
226
  cardAccentBorder: "#3F3F46",
227
227
  cardAccentGlow: "none",
228
228
  cardAccentHoverBorder: "#52525B",
@@ -235,25 +235,26 @@ var typography = {
235
235
  fontFamily: {
236
236
  primary: "Pretendard",
237
237
  secondary: "Pretendard",
238
- display: "Pretendard"
238
+ display: "Pretendard",
239
+ mono: "SF Mono"
239
240
  },
240
241
  display: {
241
- lg: { size: 56, weight: 700, lineHeight: 1.12, letterSpacing: -0.03 },
242
- md: { size: 48, weight: 700, lineHeight: 1.12, letterSpacing: -0.025 },
243
- sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
242
+ lg: { size: 56, weight: 700, lineHeight: 1.08, letterSpacing: -0.035 },
243
+ md: { size: 48, weight: 700, lineHeight: 1.08, letterSpacing: -0.03 },
244
+ sm: { size: 40, weight: 600, lineHeight: 1.1, letterSpacing: -0.025 }
244
245
  },
245
246
  heading: {
246
- h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
247
- h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
247
+ h1: { size: 34, weight: 700, lineHeight: 1.15, letterSpacing: -0.025 },
248
+ h2: { size: 28, weight: 600, lineHeight: 1.2, letterSpacing: -0.02 },
248
249
  h3: { size: 22, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
249
250
  h4: { size: 20, weight: 600, lineHeight: 1.3, letterSpacing: -0.01 },
250
251
  h5: { size: 17, weight: 600, lineHeight: 1.35, letterSpacing: -5e-3 },
251
252
  h6: { size: 15, weight: 600, lineHeight: 1.4, letterSpacing: 0 }
252
253
  },
253
254
  body: {
254
- lg: { size: 17, weight: 400, lineHeight: 1.4, letterSpacing: -0.02 },
255
- md: { size: 15, weight: 400, lineHeight: 1.4, letterSpacing: -0.01 },
256
- sm: { size: 13, weight: 400, lineHeight: 1.4, letterSpacing: 0 }
255
+ lg: { size: 17, weight: 400, lineHeight: 1.5, letterSpacing: -0.01 },
256
+ md: { size: 15, weight: 400, lineHeight: 1.5, letterSpacing: -5e-3 },
257
+ sm: { size: 13, weight: 400, lineHeight: 1.45, letterSpacing: 0 }
257
258
  },
258
259
  caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
259
260
  fontWeight: {
@@ -298,12 +299,12 @@ var elevation = {
298
299
  glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
299
300
  },
300
301
  dark: {
301
- sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
302
- m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
303
- lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
304
- xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
305
- glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)",
306
- glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)"
302
+ sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
303
+ m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)",
304
+ lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)",
305
+ xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)",
306
+ glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)",
307
+ glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)"
307
308
  }
308
309
  };
309
310
  elevation.light;
@@ -636,7 +637,7 @@ var component = {
636
637
  },
637
638
  input: {
638
639
  sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
639
- md: { height: 44, paddingX: 16, fontSize: 15, borderRadius: 12, iconSize: 18, iconPadding: 42 },
640
+ md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
640
641
  lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
641
642
  },
642
643
  card: {
package/dist/native/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { semanticTokens, chart, motion, elevation, radius, spacing, typography } from '../chunk-5ATTRKGS.mjs';
2
- export { component as componentTokens, motion as motionTokens, springConfigs, tacSpring } from '../chunk-5ATTRKGS.mjs';
1
+ import { semanticTokens, chart, motion, elevation, radius, spacing, typography } from '../chunk-I2PXRTYK.mjs';
2
+ export { component as componentTokens, motion as motionTokens, springConfigs, tacSpring } from '../chunk-I2PXRTYK.mjs';
3
3
 
4
4
  // src/native/shadows.ts
5
5
  var nativeShadows = {
package/dist/web/css-variables.js CHANGED
@@ -49,17 +49,17 @@ var semanticTokens = {
49
49
  glassBorder: "rgba(24, 24, 27, 0.04)",
50
50
  glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
51
51
  glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
52
- accentGlow: "none",
52
+ accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
53
53
  // ── Gradients ──
54
- gradientBrand: "none",
55
- gradientBrandHover: "none",
56
- gradientSubtle: "none",
57
- gradientAccent: "none",
58
- gradientAccentVivid: "none",
59
- gradientGlow: "none",
60
- gradientMesh: "none",
61
- gradientSurface: "none",
62
- gradientGlowShadow: "none",
54
+ gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
55
+ gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
56
+ gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
57
+ gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
58
+ gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
59
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
60
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)",
61
+ gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
62
+ gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
63
63
  // ── Shadow ──
64
64
  shadowColor: "rgba(24, 24, 27, 0.05)",
65
65
  // ── Status ──
@@ -159,20 +159,20 @@ var semanticTokens = {
159
159
  gray900: "#FAFAFA",
160
160
  // ── Glass & Effects ──
161
161
  glassBg: "rgba(9, 9, 11, 0.85)",
162
- glassBorder: "rgba(250, 250, 250, 0.1)",
163
- glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
164
- glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
165
- accentGlow: "none",
162
+ glassBorder: "rgba(255, 255, 255, 0.08)",
163
+ glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
164
+ glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
165
+ accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
166
166
  // ── Gradients ──
167
- gradientBrand: "none",
168
- gradientBrandHover: "none",
169
- gradientSubtle: "none",
170
- gradientAccent: "none",
171
- gradientAccentVivid: "none",
172
- gradientGlow: "none",
173
- gradientMesh: "none",
174
- gradientSurface: "none",
175
- gradientGlowShadow: "none",
167
+ gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
168
+ gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
169
+ gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
170
+ gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
171
+ gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
172
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
173
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)",
174
+ gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
175
+ gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
176
176
  // ── Shadow ──
177
177
  shadowColor: "rgba(0, 0, 0, 0.9)",
178
178
  // ── Status ──
@@ -214,15 +214,15 @@ var semanticTokens = {
214
214
  btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
215
215
  btnDestructiveSurface: "#EF4444",
216
216
  btnDestructiveHover: "#F87171",
217
- inputBg: "#27272A",
218
- inputBorderRest: "#3F3F46",
219
- inputBorderHover: "#52525B",
217
+ inputBg: "rgba(255, 255, 255, 0.04)",
218
+ inputBorderRest: "rgba(255, 255, 255, 0.1)",
219
+ inputBorderHover: "rgba(255, 255, 255, 0.16)",
220
220
  inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
221
221
  inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
222
222
  inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
223
- dropdownBg: "#18181B",
224
- dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
225
- dropdownItemHover: "#27272A",
223
+ dropdownBg: "rgba(24, 24, 27, 0.95)",
224
+ dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)",
225
+ dropdownItemHover: "rgba(255, 255, 255, 0.06)",
226
226
  cardAccentBorder: "#3F3F46",
227
227
  cardAccentGlow: "none",
228
228
  cardAccentHoverBorder: "#52525B",
@@ -319,12 +319,12 @@ var elevation = {
319
319
  glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
320
320
  },
321
321
  dark: {
322
- sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
323
- m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
324
- lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
325
- xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
326
- glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)",
327
- glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)"
322
+ sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
323
+ m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)",
324
+ lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)",
325
+ xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)",
326
+ glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)",
327
+ glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)"
328
328
  }
329
329
  };
330
330
  var zIndex = {
@@ -454,7 +454,8 @@ var typography = {
454
454
  fontFamily: {
455
455
  primary: "Pretendard",
456
456
  secondary: "Pretendard",
457
- display: "Pretendard"
457
+ display: "Pretendard",
458
+ mono: "SF Mono"
458
459
  }};
459
460
 
460
461
  // src/component.ts
@@ -466,7 +467,7 @@ var component = {
466
467
  },
467
468
  input: {
468
469
  sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
469
- md: { height: 44, paddingX: 16, fontSize: 15, borderRadius: 12, iconSize: 18, iconPadding: 42 },
470
+ md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
470
471
  lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
471
472
  },
472
473
  card: {
@@ -605,6 +606,7 @@ function generateCSSVariables(mode) {
605
606
  "--font-primary": `'${typography.fontFamily.primary}', -apple-system, BlinkMacSystemFont, system-ui, sans-serif`,
606
607
  "--font-secondary": `'${typography.fontFamily.secondary}', sans-serif`,
607
608
  "--font-display": `'${typography.fontFamily.display}', '${typography.fontFamily.primary}', sans-serif`,
609
+ "--font-mono": `'${typography.fontFamily.mono}', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`,
608
610
  // Colors
609
611
  "--background": colors.background,
610
612
  "--background-subtle": colors.backgroundSubtle,
package/dist/web/css-variables.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { px, rem, unitless, ms } from '../chunk-GLCF64BD.mjs';
2
- import { semanticTokens, chart, elevation, motion, typography, component, zIndex, radius, spacing } from '../chunk-5ATTRKGS.mjs';
2
+ import { semanticTokens, chart, elevation, motion, typography, component, zIndex, radius, spacing } from '../chunk-I2PXRTYK.mjs';
3
3
 
4
4
  // src/web/css-variables.ts
5
5
  function generateCSSVariables(mode) {
@@ -11,6 +11,7 @@ function generateCSSVariables(mode) {
11
11
  "--font-primary": `'${typography.fontFamily.primary}', -apple-system, BlinkMacSystemFont, system-ui, sans-serif`,
12
12
  "--font-secondary": `'${typography.fontFamily.secondary}', sans-serif`,
13
13
  "--font-display": `'${typography.fontFamily.display}', '${typography.fontFamily.primary}', sans-serif`,
14
+ "--font-mono": `'${typography.fontFamily.mono}', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`,
14
15
  // Colors
15
16
  "--background": colors.background,
16
17
  "--background-subtle": colors.backgroundSubtle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tac-ui/tokens",
3
- "version": "1.0.3",
3
+ "version": "1.1.0",
4
4
  "description": "Design tokens for Tac UI",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
@@ -32,7 +32,7 @@
32
32
  "access": "public"
33
33
  },
34
34
  "dependencies": {
35
- "@tac-ui/shared": "^1.0.3"
35
+ "@tac-ui/shared": "^1.1.0"
36
36
  },
37
37
  "devDependencies": {
38
38
  "tsup": "^8.3.0",