@godxjp/ui 29.0.0 → 30.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/agent/START-HERE.md +1 -1
  2. package/agent/index.json +2 -2
  3. package/agent/llms.txt +3 -3
  4. package/agent/tokens.json +135 -135
  5. package/dist/components/data-display/badge.js +1 -1
  6. package/dist/components/data-display/table.js +1 -1
  7. package/dist/components/general/button.js +2 -2
  8. package/dist/components/navigation/tabs.js +1 -1
  9. package/dist/contracts/measurement.json +1 -1
  10. package/dist/styles/alert-layout.css +5 -5
  11. package/dist/styles/badge-layout.css +1 -1
  12. package/dist/styles/card-layout.css +10 -8
  13. package/dist/styles/chart-layout.css +5 -2
  14. package/dist/styles/control.css +64 -48
  15. package/dist/styles/data-display-layout.css +49 -40
  16. package/dist/styles/data-entry-layout.css +12 -12
  17. package/dist/styles/dialog-layout.css +11 -11
  18. package/dist/styles/focus-ring.css +2 -2
  19. package/dist/styles/layout.css +11 -10
  20. package/dist/styles/logo-layout.css +2 -2
  21. package/dist/styles/motion.css +1 -1
  22. package/dist/styles/navigation-layout.css +27 -15
  23. package/dist/styles/shell-layout.css +30 -87
  24. package/dist/styles/table-layout.css +11 -8
  25. package/dist/styles/toggle.css +1 -1
  26. package/dist/tokens/components/banner.css +1 -1
  27. package/dist/tokens/components/card.css +4 -4
  28. package/dist/tokens/components/chart.css +1 -1
  29. package/dist/tokens/components/chat-bubble.css +1 -1
  30. package/dist/tokens/components/control.css +13 -12
  31. package/dist/tokens/components/data-display.css +11 -11
  32. package/dist/tokens/components/data-entry.css +1 -1
  33. package/dist/tokens/components/descriptions.css +1 -1
  34. package/dist/tokens/components/draggable-panel.css +1 -1
  35. package/dist/tokens/components/feedback.css +1 -1
  36. package/dist/tokens/components/legal-document.css +1 -1
  37. package/dist/tokens/components/logo.css +1 -1
  38. package/dist/tokens/components/mega-menu.css +1 -1
  39. package/dist/tokens/components/navigation.css +6 -6
  40. package/dist/tokens/components/segmented.css +3 -3
  41. package/dist/tokens/components/separator.css +1 -1
  42. package/dist/tokens/components/shell.css +5 -5
  43. package/dist/tokens/components/table.css +4 -4
  44. package/dist/tokens/components/thought-chain.css +1 -1
  45. package/dist/tokens/components/toggle.css +1 -1
  46. package/dist/tokens/components/upload.css +2 -2
  47. package/dist/tokens/foundation.css +2 -2
  48. package/docs/i18n/messages/en.json +4 -0
  49. package/docs/i18n/messages/ja.json +4 -0
  50. package/docs/i18n/messages/vi.json +4 -0
  51. package/docs/themes/index.ts +19 -0
  52. package/docs/themes/neubrutalism.css +475 -0
  53. package/package.json +2 -2
@@ -48,6 +48,10 @@
48
48
  scrollbar-width: thin;
49
49
  }
50
50
 
51
+ [data-slot="tabs-trigger"] {
52
+ border-width: var(--stroke-hairline);
53
+ }
54
+
51
55
  [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
52
56
  content: "";
53
57
  position: absolute;
@@ -224,23 +228,27 @@
224
228
 
225
229
  [data-slot="tabs"][data-variant="card"] [data-slot="tabs-list"],
226
230
  [data-slot="tabs"][data-variant="editable-card"] [data-slot="tabs-list"] {
227
- box-shadow: inset 0 calc(-1 * var(--tabs-card-rail-border-width)) 0 hsl(var(--border));
231
+ box-shadow: inset 0 calc(-1 * var(--tabs-card-rail-border-width, var(--stroke-hairline))) 0
232
+ hsl(var(--border));
228
233
  }
229
234
 
230
235
  [data-slot="tabs"][data-variant="card"][data-placement="bottom"] [data-slot="tabs-list"],
231
236
  [data-slot="tabs"][data-variant="editable-card"][data-placement="bottom"]
232
237
  [data-slot="tabs-list"] {
233
- box-shadow: inset 0 var(--tabs-card-rail-border-width) 0 hsl(var(--border));
238
+ box-shadow: inset 0 var(--tabs-card-rail-border-width, var(--stroke-hairline)) 0
239
+ hsl(var(--border));
234
240
  }
235
241
 
236
242
  [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
237
243
  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"] [data-slot="tabs-list"] {
238
- box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
244
+ box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width, var(--stroke-hairline))) 0 0
245
+ hsl(var(--border));
239
246
  }
240
247
 
241
248
  [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
242
249
  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"] [data-slot="tabs-list"] {
243
- box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
250
+ box-shadow: inset var(--tabs-card-rail-border-width, var(--stroke-hairline)) 0 0
251
+ hsl(var(--border));
244
252
  }
245
253
 
246
254
  [dir="rtl"]
@@ -249,14 +257,16 @@
249
257
  [dir="rtl"]
250
258
  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
251
259
  [data-slot="tabs-list"] {
252
- box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
260
+ box-shadow: inset var(--tabs-card-rail-border-width, var(--stroke-hairline)) 0 0
261
+ hsl(var(--border));
253
262
  }
254
263
 
255
264
  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
256
265
  [dir="rtl"]
257
266
  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
258
267
  [data-slot="tabs-list"] {
259
- box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
268
+ box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width, var(--stroke-hairline))) 0 0
269
+ hsl(var(--border));
260
270
  }
261
271
 
262
272
  [data-slot="tabs"][data-bodied="true"] {
@@ -380,7 +390,7 @@
380
390
 
381
391
  @media (forced-colors: active) {
382
392
  [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
383
- outline: var(--tabs-count-forced-outline-width) solid currentColor;
393
+ outline: var(--tabs-count-forced-outline-width, var(--stroke-hairline)) solid currentColor;
384
394
  }
385
395
  }
386
396
 
@@ -440,7 +450,7 @@
440
450
  block-size: var(--tabs-add-size);
441
451
  align-items: center;
442
452
  justify-content: center;
443
- border: var(--tabs-card-rail-border-width) solid hsl(var(--border));
453
+ border: var(--tabs-card-rail-border-width, var(--stroke-hairline)) solid hsl(var(--border));
444
454
  border-radius: var(--tabs-add-radius, calc(var(--radius) / var(--radius-ratio)));
445
455
  background: hsl(
446
456
  var(--tabs-card-background, var(--muted)) / var(--tabs-card-background-alpha, 100%)
@@ -686,7 +696,7 @@
686
696
  z-index: var(--overlay-z-index);
687
697
  min-width: var(--menu-content-min-width);
688
698
  border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
689
- border: 1px solid hsl(var(--border));
699
+ border: var(--stroke-hairline) solid hsl(var(--border));
690
700
 
691
701
  background: var(
692
702
  --dropdown-content-background,
@@ -836,7 +846,8 @@
836
846
  }
837
847
 
838
848
  .ui-steps-dot[data-status="process"] {
839
- box-shadow: 0 0 0 var(--steps-dot-process-ring-width) hsl(var(--primary) / 0.2);
849
+ box-shadow: 0 0 0 var(--steps-dot-process-ring-width, var(--stroke-xl))
850
+ hsl(var(--primary) / 0.2);
840
851
  }
841
852
 
842
853
  .ui-steps-dot[data-status="error"] {
@@ -849,7 +860,7 @@
849
860
 
850
861
  .ui-steps-marker {
851
862
  border-radius: var(--radius-pill);
852
- border: var(--steps-marker-border-width) solid transparent;
863
+ border: var(--steps-marker-border-width, var(--stroke-md)) solid transparent;
853
864
  font-size: var(--steps-marker-font-size);
854
865
  font-weight: var(--font-weight-medium);
855
866
  }
@@ -1003,7 +1014,7 @@
1003
1014
  align-items: center;
1004
1015
  justify-content: center;
1005
1016
  border-radius: var(--radius-pill);
1006
- padding: var(--steps-progress-ring-width);
1017
+ padding: var(--steps-progress-ring-width, var(--stroke-md));
1007
1018
  background: conic-gradient(
1008
1019
  hsl(var(--primary)) calc(var(--steps-progress-ratio, 0) * 360deg),
1009
1020
  hsl(var(--steps-progress-track-color, var(--muted))) 0
@@ -1243,7 +1254,7 @@
1243
1254
 
1244
1255
  .ui-conversations-separator[data-dashed="true"] {
1245
1256
  height: 0;
1246
- border-block-start: var(--separator-rule-size) dashed
1257
+ border-block-start: var(--separator-rule-size, var(--stroke-hairline)) dashed
1247
1258
  hsl(var(--separator-rule-color, var(--border)));
1248
1259
  background: transparent;
1249
1260
  }
@@ -1454,7 +1465,8 @@
1454
1465
  translate: var(--mega-menu-panel-translate-x, 0) var(--mega-menu-panel-translate-y, 0);
1455
1466
  max-block-size: var(--mega-menu-panel-max-height);
1456
1467
  overflow-y: auto;
1457
- border: var(--mega-menu-panel-border-width) solid var(--mega-menu-panel-border-color);
1468
+ border: var(--mega-menu-panel-border-width, var(--stroke-hairline)) solid
1469
+ var(--mega-menu-panel-border-color);
1458
1470
  border-radius: var(--mega-menu-panel-radius, calc(var(--radius) / var(--radius-ratio)));
1459
1471
  background: var(--mega-menu-panel-background);
1460
1472
  color: var(--mega-menu-panel-foreground);
@@ -1598,7 +1610,7 @@
1598
1610
  .ui-mega-menu-panel-footer {
1599
1611
  margin-block-start: var(--mega-menu-panel-footer-gap);
1600
1612
  padding-block-start: var(--mega-menu-panel-footer-gap);
1601
- border-block-start: var(--mega-menu-panel-border-width) solid
1613
+ border-block-start: var(--mega-menu-panel-border-width, var(--stroke-hairline)) solid
1602
1614
  var(--mega-menu-panel-footer-border-color);
1603
1615
  }
1604
1616
 
@@ -150,7 +150,7 @@
150
150
 
151
151
  overflow: clip;
152
152
  overflow-clip-margin: var(--focus-ring-clip-margin);
153
- border-inline-end: 1px solid hsl(var(--border));
153
+ border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
154
154
 
155
155
  background: var(
156
156
  --sidebar-surface-background,
@@ -174,7 +174,7 @@
174
174
  align-items: center;
175
175
  overflow: clip;
176
176
  overflow-clip-margin: var(--focus-ring-clip-margin);
177
- border-inline-end: 1px solid hsl(var(--border));
177
+ border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
178
178
  background: var(--app-shell-nav-rail-background, hsl(var(--muted)));
179
179
  color: hsl(var(--foreground));
180
180
  padding-block: var(--app-shell-nav-rail-inset);
@@ -204,7 +204,7 @@
204
204
  }
205
205
 
206
206
  .app-nav-rail[data-edge="end"] {
207
- border-inline-start: 1px solid hsl(var(--border));
207
+ border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
208
208
  border-inline-end: 0;
209
209
  }
210
210
 
@@ -222,11 +222,11 @@
222
222
  }
223
223
 
224
224
  .app-nav-rail[data-edge="top"] {
225
- border-block-end: 1px solid hsl(var(--border));
225
+ border-block-end: var(--stroke-hairline) solid hsl(var(--border));
226
226
  }
227
227
 
228
228
  .app-nav-rail[data-edge="bottom"] {
229
- border-block-start: 1px solid hsl(var(--border));
229
+ border-block-start: var(--stroke-hairline) solid hsl(var(--border));
230
230
  }
231
231
 
232
232
  .app-root:not([data-topbar-span="full"]):is(
@@ -258,7 +258,7 @@
258
258
  align-items: center;
259
259
  gap: var(--app-shell-bar-gap);
260
260
  padding-inline: var(--app-shell-bar-inset);
261
- border-bottom: 1px solid hsl(var(--border));
261
+ border-bottom: var(--stroke-hairline) solid hsl(var(--border));
262
262
 
263
263
  background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
264
264
 
@@ -290,7 +290,7 @@
290
290
 
291
291
  .app-footer {
292
292
  grid-area: footer;
293
- border-top: 1px solid hsl(var(--border));
293
+ border-top: var(--stroke-hairline) solid hsl(var(--border));
294
294
  background: hsl(var(--background));
295
295
  }
296
296
 
@@ -610,7 +610,7 @@
610
610
  --separator-label-line-height: var(--auth-shell-divider-label-line-height);
611
611
  --separator-label-font-weight: var(--font-weight-normal);
612
612
  --separator-rule-color: var(--auth-shell-divider-rule-color);
613
- --separator-label-color: var(--auth-shell-divider-label-color);
613
+ --separator-label-color: var(--auth-shell-divider-label-color, var(--muted-foreground));
614
614
  }
615
615
 
616
616
  @media (max-width: 30rem) {
@@ -658,7 +658,7 @@
658
658
  align-items: center;
659
659
  gap: var(--space-3);
660
660
  padding-inline: var(--centered-shell-bar-padding-x);
661
- border-bottom: 1px solid hsl(var(--border));
661
+ border-bottom: var(--stroke-hairline) solid hsl(var(--border));
662
662
  background: hsl(var(--card) / var(--card-alpha, 100%));
663
663
 
664
664
  background-image: var(--topbar-gradient);
@@ -699,7 +699,7 @@
699
699
 
700
700
  .ui-centered-shell-footer {
701
701
  padding: var(--centered-shell-footer-padding);
702
- border-top: 1px solid hsl(var(--border));
702
+ border-top: var(--stroke-hairline) solid hsl(var(--border));
703
703
  text-align: center;
704
704
  color: hsl(var(--muted-foreground));
705
705
  }
@@ -723,7 +723,7 @@
723
723
  block-size: var(--app-shell-bar-height);
724
724
  min-inline-size: 0;
725
725
  align-items: center;
726
- border-block-end: 1px solid hsl(var(--border));
726
+ border-block-end: var(--stroke-hairline) solid hsl(var(--border));
727
727
  padding-inline: var(--space-3);
728
728
  }
729
729
 
@@ -834,7 +834,7 @@
834
834
  min-height: 0;
835
835
  flex: 0 0 auto;
836
836
  flex-direction: column;
837
- border-inline-end: 1px solid hsl(var(--border));
837
+ border-inline-end: var(--stroke-hairline) solid hsl(var(--border));
838
838
  inline-size: var(--app-shell-nav-rail-width);
839
839
  overflow-y: auto;
840
840
  overscroll-behavior: contain;
@@ -855,7 +855,7 @@
855
855
  }
856
856
 
857
857
  .app-breadcrumb {
858
- border-bottom: 1px solid hsl(var(--border));
858
+ border-bottom: var(--stroke-hairline) solid hsl(var(--border));
859
859
 
860
860
  padding: var(--space-2) var(--space-page-active-x);
861
861
  color: hsl(var(--muted-foreground));
@@ -1157,7 +1157,7 @@
1157
1157
  }
1158
1158
 
1159
1159
  .ui-org-switcher-meta {
1160
- color: hsl(var(--org-switcher-meta-foreground));
1160
+ color: hsl(var(--org-switcher-meta-foreground, var(--muted-foreground)));
1161
1161
  font-size: var(--sidebar-user-role-font-size);
1162
1162
  }
1163
1163
 
@@ -1211,7 +1211,7 @@
1211
1211
 
1212
1212
  .ui-org-switcher-command .ui-command-input-wrapper {
1213
1213
 
1214
- border: 1px solid hsl(var(--input) / var(--input-alpha, 100%));
1214
+ border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
1215
1215
  border-radius: var(--control-radius);
1216
1216
 
1217
1217
  margin-block: var(--org-switcher-search-space-block);
@@ -1362,13 +1362,13 @@
1362
1362
  .ui-app-launcher-launchpad .ui-app-launcher-tile:hover,
1363
1363
  .ui-app-launcher-launchpad .ui-app-launcher-tile[aria-current="page"] {
1364
1364
  background: var(--app-launcher-launchpad-tile-hover-background);
1365
- color: hsl(var(--app-launcher-tile-color));
1365
+ color: hsl(var(--app-launcher-tile-color, var(--foreground)));
1366
1366
  }
1367
1367
 
1368
1368
  .ui-app-launcher-launchpad .ui-app-launcher-mark {
1369
1369
  width: var(--app-launcher-launchpad-mark-size);
1370
1370
  height: var(--app-launcher-launchpad-mark-size);
1371
- border: 1px solid var(--app-launcher-launchpad-mark-border-color);
1371
+ border: var(--stroke-hairline) solid var(--app-launcher-launchpad-mark-border-color);
1372
1372
  border-radius: var(--app-launcher-launchpad-mark-radius, var(--radius));
1373
1373
  background: var(--app-launcher-launchpad-mark-background);
1374
1374
  box-shadow: var(--app-launcher-launchpad-mark-shadow);
@@ -1446,7 +1446,7 @@
1446
1446
  gap: var(--app-launcher-tile-gap);
1447
1447
  padding: var(--app-launcher-tile-padding);
1448
1448
  border-radius: var(--app-launcher-tile-radius, var(--radius));
1449
- color: hsl(var(--app-launcher-tile-color));
1449
+ color: hsl(var(--app-launcher-tile-color, var(--foreground)));
1450
1450
  text-align: center;
1451
1451
  text-decoration: none;
1452
1452
  transition:
@@ -1499,7 +1499,7 @@
1499
1499
 
1500
1500
  .ui-app-launcher-group-label {
1501
1501
  padding-inline: var(--app-launcher-tile-padding);
1502
- color: hsl(var(--app-launcher-group-label-color));
1502
+ color: hsl(var(--app-launcher-group-label-color, var(--muted-foreground)));
1503
1503
  font-size: var(--app-launcher-group-label-font-size);
1504
1504
  font-weight: var(--font-weight-medium);
1505
1505
  }
@@ -1533,7 +1533,7 @@
1533
1533
  gap: var(--space-2);
1534
1534
  padding-inline: var(--space-4);
1535
1535
  border: 0;
1536
- border-bottom: 1px solid hsl(var(--border));
1536
+ border-bottom: var(--stroke-hairline) solid hsl(var(--border));
1537
1537
  background: transparent;
1538
1538
  color: inherit;
1539
1539
  font-family: inherit;
@@ -1757,7 +1757,7 @@
1757
1757
 
1758
1758
  .sb-footer {
1759
1759
  margin-top: auto;
1760
- border-top: 1px solid hsl(var(--border));
1760
+ border-top: var(--stroke-hairline) solid hsl(var(--border));
1761
1761
  padding: var(--space-2);
1762
1762
  }
1763
1763
 
@@ -1780,7 +1780,7 @@
1780
1780
  gap: 2px;
1781
1781
  margin: 2px 0 var(--space-1) calc(var(--space-2) + 0.6875rem);
1782
1782
  padding-inline-start: var(--space-3);
1783
- border-inline-start: 1px solid hsl(var(--border));
1783
+ border-inline-start: var(--stroke-hairline) solid hsl(var(--border));
1784
1784
  }
1785
1785
 
1786
1786
  .sb-nav-item--sub {
@@ -1916,7 +1916,7 @@
1916
1916
  width: 0.5625rem;
1917
1917
  height: 0.5625rem;
1918
1918
  border-radius: var(--radius-pill);
1919
- border: 1.5px solid hsl(var(--card) / var(--card-alpha, 100%));
1919
+ border: var(--stroke-sm) solid hsl(var(--card) / var(--card-alpha, 100%));
1920
1920
  background: hsl(var(--success));
1921
1921
  }
1922
1922
 
@@ -2096,7 +2096,7 @@
2096
2096
  border: 0;
2097
2097
  border-radius: var(--topbar-item-radius);
2098
2098
  background: transparent;
2099
- color: hsl(var(--topbar-item-color));
2099
+ color: hsl(var(--topbar-item-color, var(--muted-foreground)));
2100
2100
  cursor: pointer;
2101
2101
 
2102
2102
  font: inherit;
@@ -2183,62 +2183,6 @@
2183
2183
  }
2184
2184
  }
2185
2185
 
2186
- .tb-chip {
2187
- display: inline-flex;
2188
- max-width: 15rem;
2189
- min-width: 0;
2190
- height: var(--control-height-sm);
2191
- align-items: center;
2192
- gap: var(--space-1);
2193
- padding-inline: var(--space-2);
2194
- border: 1px solid transparent;
2195
- border-radius: var(--radius);
2196
- background: transparent;
2197
- color: hsl(var(--foreground));
2198
- cursor: pointer;
2199
- font: inherit;
2200
- font-size: var(--font-size-base);
2201
- }
2202
-
2203
- .tb-chip:hover,
2204
- .tb-chip[data-open="true"] {
2205
- border-color: hsl(var(--border));
2206
- background: hsl(var(--accent));
2207
- }
2208
-
2209
- .tb-chip-empty {
2210
- border-color: hsl(var(--border));
2211
- border-style: dashed;
2212
- color: hsl(var(--muted-foreground));
2213
- }
2214
-
2215
- .tb-chip-static,
2216
- .tb-chip-static:hover {
2217
- border-color: transparent;
2218
- background: transparent;
2219
- cursor: default;
2220
- }
2221
-
2222
- .tb-chip-label {
2223
- min-width: 0;
2224
- overflow: hidden;
2225
- font-weight: 500;
2226
-
2227
- line-height: 1.5;
2228
- text-overflow: ellipsis;
2229
- white-space: nowrap;
2230
- }
2231
-
2232
- .tb-chip-caret,
2233
- .tb-chip-sep {
2234
- color: hsl(var(--muted-foreground));
2235
- }
2236
-
2237
- .tb-chip-caret svg {
2238
- width: var(--topbar-caret-icon-size);
2239
- height: var(--topbar-caret-icon-size);
2240
- }
2241
-
2242
2186
  .tb-search {
2243
2187
  display: flex;
2244
2188
 
@@ -2251,7 +2195,7 @@
2251
2195
  align-items: center;
2252
2196
  gap: var(--space-2);
2253
2197
  padding-inline: var(--space-2);
2254
- border: 1px solid hsl(var(--input) / var(--input-alpha, 100%));
2198
+ border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
2255
2199
  border-radius: var(--radius);
2256
2200
  background: hsl(var(--background));
2257
2201
  color: hsl(var(--muted-foreground));
@@ -2275,8 +2219,8 @@
2275
2219
  align-items: center;
2276
2220
  margin-inline-start: auto;
2277
2221
  padding: 1px 5px;
2278
- border: 1px solid hsl(var(--border));
2279
- border-bottom-width: 2px;
2222
+ border: var(--stroke-hairline) solid hsl(var(--border));
2223
+ border-bottom-width: var(--stroke-md);
2280
2224
  border-radius: 4px;
2281
2225
  background: hsl(var(--secondary));
2282
2226
  color: hsl(var(--muted-foreground));
@@ -2327,7 +2271,6 @@
2327
2271
  padding-inline: var(--topbar-item-padding-inline-compact);
2328
2272
  }
2329
2273
 
2330
- .tb-chip-sep,
2331
2274
  .tb-search .kbd,
2332
2275
 
2333
2276
  .tb-search .tb-search-label {
@@ -2488,7 +2431,7 @@
2488
2431
  align-items: center;
2489
2432
  gap: var(--mobile-shell-region-gap);
2490
2433
  padding-inline: var(--mobile-shell-padding-inline);
2491
- border-block-end: 1px solid hsl(var(--border));
2434
+ border-block-end: var(--stroke-hairline) solid hsl(var(--border));
2492
2435
  background: hsl(var(--card) / var(--card-alpha, 100%));
2493
2436
  background-image: var(--topbar-gradient);
2494
2437
  }
@@ -2531,7 +2474,7 @@
2531
2474
  gap: var(--mobile-shell-region-gap);
2532
2475
  padding-block: var(--mobile-shell-actions-padding-block);
2533
2476
  padding-inline: var(--mobile-shell-padding-inline);
2534
- border-block-start: 1px solid hsl(var(--border));
2477
+ border-block-start: var(--stroke-hairline) solid hsl(var(--border));
2535
2478
  background: hsl(var(--card) / var(--card-alpha, 100%));
2536
2479
  }
2537
2480
 
@@ -2544,7 +2487,7 @@
2544
2487
  flex: 0 0 auto;
2545
2488
  padding-block-end: var(--mobile-shell-safe-inset-block-end);
2546
2489
  padding-inline: var(--mobile-shell-safe-inset-inline);
2547
- border-block-start: 1px solid hsl(var(--border));
2490
+ border-block-start: var(--stroke-hairline) solid hsl(var(--border));
2548
2491
  background: hsl(var(--card) / var(--card-alpha, 100%));
2549
2492
  }
2550
2493
 
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .ui-table-row {
11
- border-block-end-width: var(--table-row-border-width);
11
+ border-block-end-width: var(--table-row-border-width, var(--stroke-hairline));
12
12
  }
13
13
 
14
14
  [data-slot="table-body"] .ui-table-row:last-child {
@@ -97,9 +97,11 @@
97
97
  }
98
98
 
99
99
  .ui-table-row[data-tone] > [data-slot="table-cell"]:first-child {
100
- border-inline-start: var(--table-row-tone-rail-width) solid hsl(var(--table-row-tone-color));
100
+ border-inline-start: var(--table-row-tone-rail-width, var(--stroke-2xl)) solid
101
+ hsl(var(--table-row-tone-color));
101
102
  padding-inline-start: calc(
102
- var(--table-cell-space-x, var(--space-section-active)) - var(--table-row-tone-rail-width)
103
+ var(--table-cell-space-x, var(--space-section-active)) -
104
+ var(--table-row-tone-rail-width, var(--stroke-2xl))
103
105
  );
104
106
  }
105
107
 
@@ -271,7 +273,7 @@
271
273
 
272
274
  min-inline-size: min-content;
273
275
 
274
- border: 1px solid var(--table-border-color, hsl(var(--border)));
276
+ border: var(--stroke-hairline) solid var(--table-border-color, hsl(var(--border)));
275
277
  border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
276
278
 
277
279
  background-color: var(
@@ -303,7 +305,7 @@
303
305
  }
304
306
 
305
307
  [data-slot="card-content"][data-flush] .ui-data-table-toolbar {
306
- border-bottom: 1px solid hsl(var(--card-border, var(--border)));
308
+ border-bottom: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
307
309
  padding: var(--card-space-header-y) var(--card-space-inset);
308
310
  }
309
311
 
@@ -507,7 +509,8 @@
507
509
  }
508
510
 
509
511
  .ui-data-table-summary > tr > [data-slot="table-cell"] {
510
- border-block-start: var(--table-summary-border-width) solid hsl(var(--border));
512
+ border-block-start: var(--table-summary-border-width, var(--stroke-hairline)) solid
513
+ hsl(var(--border));
511
514
  }
512
515
 
513
516
  .ui-data-table-filter-trigger[data-filtered] {
@@ -525,11 +528,11 @@
525
528
  }
526
529
 
527
530
  .ui-table-bordered {
528
- border: 1px solid var(--table-border-color, hsl(var(--border)));
531
+ border: var(--stroke-hairline) solid var(--table-border-color, hsl(var(--border)));
529
532
  }
530
533
 
531
534
  .ui-table-bordered :is([data-slot="table-head"], [data-slot="table-cell"]):not(:last-child) {
532
- border-inline-end: 1px solid var(--table-border-color, hsl(var(--border)));
535
+ border-inline-end: var(--stroke-hairline) solid var(--table-border-color, hsl(var(--border)));
533
536
  }
534
537
 
535
538
  [data-slot="card-content"][data-flush]
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  .ui-toggle[data-state="on"] .ui-toggle-count {
45
- outline: var(--toggle-count-forced-outline-width) solid currentColor;
45
+ outline: var(--toggle-count-forced-outline-width, var(--stroke-hairline)) solid currentColor;
46
46
  }
47
47
  }
48
48
  }
@@ -4,7 +4,7 @@
4
4
 
5
5
  --banner-radius: 0;
6
6
 
7
- --banner-border-width: 1px;
7
+ --banner-border-width: initial;
8
8
 
9
9
  --banner-space-inset-block: var(--space-3);
10
10
  --banner-space-inset-inline: var(--space-page-active-x, var(--space-6));
@@ -45,13 +45,13 @@
45
45
 
46
46
  --card-backdrop-blur-size: initial;
47
47
 
48
- --card-accent-rail-width: var(--stroke-2xl);
48
+ --card-accent-rail-width: initial;
49
49
 
50
- --card-accent-perimeter-width: var(--stroke-hairline);
51
- --card-accent-perimeter-ring-width: var(--stroke-hairline);
50
+ --card-accent-perimeter-width: initial;
51
+ --card-accent-perimeter-ring-width: initial;
52
52
 
53
53
  --card-featured-border-color: initial;
54
- --card-featured-ring-width: var(--stroke-hairline);
54
+ --card-featured-ring-width: initial;
55
55
  --stat-card-label-font-size: var(
56
56
  --font-size-xs,
57
57
  calc(var(--font-size-base) / var(--font-size-ratio))
@@ -14,7 +14,7 @@
14
14
 
15
15
  --chart-trend-bar-max-width: 1.5rem;
16
16
 
17
- --chart-trend-bar-min-height: var(--stroke-md);
17
+ --chart-trend-bar-min-height: initial;
18
18
 
19
19
  --chart-trend-bar-background: initial;
20
20
 
@@ -22,7 +22,7 @@
22
22
  --chat-bubble-list-jump-inset: var(--space-3);
23
23
 
24
24
  --chat-bubble-typing-caret-color: initial;
25
- --chat-bubble-typing-caret-width: var(--stroke-md);
25
+ --chat-bubble-typing-caret-width: initial;
26
26
 
27
27
  --chat-bubble-typing-caret-height: 1em;
28
28
 
@@ -34,7 +34,7 @@
34
34
  --button-backdrop-blur-size: initial;
35
35
 
36
36
  --control-font-size: var(--font-size-base);
37
- --control-border-width: var(--stroke-hairline);
37
+ --control-border-width: initial;
38
38
  --control-shadow: var(--shadow-xs);
39
39
  --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
40
40
  --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
@@ -50,7 +50,7 @@
50
50
  --control-variant-filled-hover-background-alpha: initial;
51
51
 
52
52
  --control-count-font-size: var(--font-size-sm, var(--font-size-base));
53
- --control-count-color: var(--muted-foreground);
53
+ --control-count-color: initial;
54
54
 
55
55
  --control-count-exceeded-color: initial;
56
56
  --control-count-space-inline: var(--space-1);
@@ -58,7 +58,7 @@
58
58
  --textarea-count-inset-inline-end: var(--space-2);
59
59
 
60
60
  --input-addon-background: var(--muted);
61
- --input-addon-color: var(--muted-foreground);
61
+ --input-addon-color: initial;
62
62
  --input-addon-padding-inline: var(--control-padding-x);
63
63
 
64
64
  --switch-content-font-size: var(
@@ -72,7 +72,7 @@
72
72
  --font-size-xs,
73
73
  calc(var(--font-size-base) / var(--font-size-ratio))
74
74
  );
75
- --slider-mark-color: var(--muted-foreground);
75
+ --slider-mark-color: initial;
76
76
  --slider-mark-space-block-start: var(--space-2);
77
77
  --slider-dot-size: var(--slider-track-height);
78
78
  --slider-dot-background: var(--background);
@@ -89,7 +89,7 @@
89
89
  --slider-tooltip-offset-block: var(--space-2);
90
90
 
91
91
  --choice-button-background: var(--background);
92
- --choice-button-color: var(--foreground);
92
+ --choice-button-color: initial;
93
93
  --choice-button-border-color: var(--input);
94
94
 
95
95
  --choice-button-selected-color: initial;
@@ -98,10 +98,10 @@
98
98
  --choice-button-solid-background: initial;
99
99
  --choice-button-solid-color: initial;
100
100
 
101
- --toggle-focus-ring-width: var(--stroke-lg);
101
+ --toggle-focus-ring-width: initial;
102
102
  --toggle-focus-ring-alpha: 1;
103
103
 
104
- --control-focus-ring-width: var(--stroke-hairline);
104
+ --control-focus-ring-width: initial;
105
105
 
106
106
  --rating-focus-ring-offset: 2px;
107
107
 
@@ -109,7 +109,7 @@
109
109
  --rating-star-empty-color: initial;
110
110
  --rating-star-empty-alpha: 0.45;
111
111
 
112
- --checkbox-border-width: var(--stroke-hairline);
112
+ --checkbox-border-width: initial;
113
113
  --checkbox-size: calc(1rem * var(--scaling));
114
114
  --checkbox-size-compact: 0.875rem;
115
115
  --checkbox-size-comfortable: 1.125rem;
@@ -167,7 +167,7 @@
167
167
 
168
168
  --command-list-split-padding: 0;
169
169
  --command-list-split-inset: 0px;
170
- --command-item-divider-width: var(--stroke-hairline);
170
+ --command-item-divider-width: initial;
171
171
  --command-item-divider-color: initial;
172
172
  --command-palette-width: 35rem;
173
173
  --command-palette-inset-top: calc(var(--space-6) * 4);
@@ -239,7 +239,8 @@
239
239
  --textarea-autogrow-max-height-rows: 8;
240
240
 
241
241
  --textarea-autogrow-box-inset: calc(
242
- (var(--control-multiline-padding-block) + var(--control-border-width)) * 2
242
+ (var(--control-multiline-padding-block) + var(--control-border-width, var(--stroke-hairline))) *
243
+ 2
243
244
  );
244
245
 
245
246
  --control-composite-field-space-gap: var(--space-2);
@@ -351,7 +352,7 @@
351
352
  --calendar-chevron-size: var(--icon-size-md);
352
353
  --calendar-footer-space-gap: var(--space-2);
353
354
  --calendar-footer-space-block-start: var(--space-2);
354
- --calendar-footer-border-width: var(--stroke-hairline);
355
+ --calendar-footer-border-width: initial;
355
356
 
356
357
  --calendar-bordered-weekday-padding-block: var(--space-1);
357
358
 
@@ -406,7 +407,7 @@
406
407
  --button-space-block: var(--space-2);
407
408
 
408
409
  --otp-caret-block-size: 1rem;
409
- --otp-caret-inline-size: var(--stroke-hairline);
410
+ --otp-caret-inline-size: initial;
410
411
  --otp-separator-icon-size: var(--icon-size-md);
411
412
 
412
413
  --button-count-min-width: var(--space-4);