@sanity/ui 3.0.0-static.10 → 3.0.0-static.11

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 (71) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +160 -207
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-es/_visual-editing.mjs +161 -208
  4. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  5. package/dist/_visual-editing.d.mts +1 -3
  6. package/dist/_visual-editing.d.ts +1 -3
  7. package/dist/cli.js +1 -1
  8. package/dist/css.d.mts +115 -2
  9. package/dist/css.d.ts +115 -2
  10. package/dist/css.js +539 -402
  11. package/dist/css.js.map +1 -1
  12. package/dist/css.mjs +541 -404
  13. package/dist/css.mjs.map +1 -1
  14. package/dist/index.d.mts +4 -4
  15. package/dist/index.d.ts +4 -4
  16. package/dist/index.js +50 -17
  17. package/dist/index.js.map +1 -1
  18. package/dist/index.mjs +45 -12
  19. package/dist/index.mjs.map +1 -1
  20. package/dist/sanity-theme.css +1 -1
  21. package/dist/system.css +418 -182
  22. package/dist/theme.js +10 -11
  23. package/dist/theme.js.map +1 -1
  24. package/dist/theme.mjs +10 -11
  25. package/dist/theme.mjs.map +1 -1
  26. package/package.json +1 -1
  27. package/src/css/_resp.ts +0 -1
  28. package/src/css/aspects/font/font.style.ts +7 -66
  29. package/src/css/aspects/shadow/shadow.style.ts +16 -41
  30. package/src/css/compile/compilePalette.ts +4 -3
  31. package/src/css/compile/compileSystem.ts +0 -3
  32. package/src/css/compile/compileTheme_v3.ts +233 -219
  33. package/src/css/components/skeleton/skeleton.style.ts +8 -4
  34. package/src/css/constants.ts +9 -0
  35. package/src/css/index.ts +1 -0
  36. package/src/css/primitives/_arrow/_arrow.style.ts +6 -8
  37. package/src/css/primitives/_arrow/_arrow.ts +4 -0
  38. package/src/css/primitives/_selectable/_selectable.style.ts +23 -23
  39. package/src/css/primitives/button/button.style.ts +48 -15
  40. package/src/css/primitives/card/card.style.ts +1 -1
  41. package/src/css/primitives/token/token.style.ts +37 -36
  42. package/src/css/responsiveRules.ts +12 -19
  43. package/src/css/types.ts +106 -3
  44. package/src/css/varNames.ts +101 -4
  45. package/src/css/vars.ts +52 -16
  46. package/src/theme/v3/buildTheme_v3.ts +1 -1
  47. package/src/theme/v3/{defaults.ts → defaultTokens.ts} +1 -2
  48. package/src/theme/v3/index.ts +1 -1
  49. package/src/theme/v3/resolveTokens.ts +9 -9
  50. package/src/ui/RootClassNames.tsx +41 -0
  51. package/src/ui/_compat/helpers.ts +72 -0
  52. package/src/ui/_compat/index.ts +2 -6
  53. package/src/ui/_compat/studioTheme.ts +7 -0
  54. package/src/ui/_compat/types.ts +0 -83
  55. package/src/ui/index.ts +1 -0
  56. package/src/ui/primitives/button/button.tsx +5 -6
  57. package/src/ui/primitives/popover/popover.tsx +25 -7
  58. package/src/ui/primitives/popover/popoverCard.tsx +46 -45
  59. package/src/ui/primitives/tooltip/tooltip.tsx +9 -2
  60. package/src/ui/primitives/tooltip/tooltipCard.tsx +1 -1
  61. package/src/ui/utils/arrow/arrow.tsx +3 -11
  62. package/src/ui/utils/elementQuery/elementQuery.tsx +10 -8
  63. package/src/ui/utils/virtualList/virtualList.tsx +37 -32
  64. package/src/css/components/breadcrumbs/rules.ts +0 -25
  65. package/src/css/components/dialog/rules.ts +0 -78
  66. package/src/css/components/skeleton/rules.ts +0 -113
  67. package/src/css/components/toast/rules.ts +0 -18
  68. package/src/css/components/tree/rules.ts +0 -168
  69. package/src/css/primitives/popover/rules.ts +0 -5
  70. package/src/css/primitives/spinner/rules.ts +0 -21
  71. package/src/css/primitives/token/rules.ts +0 -45
package/dist/system.css CHANGED
@@ -1621,23 +1621,23 @@
1621
1621
  }
1622
1622
 
1623
1623
  .s-shadow-1 {
1624
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
1624
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
1625
1625
  }
1626
1626
 
1627
1627
  .s-shadow-2 {
1628
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
1628
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
1629
1629
  }
1630
1630
 
1631
1631
  .s-shadow-3 {
1632
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
1632
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
1633
1633
  }
1634
1634
 
1635
1635
  .s-shadow-4 {
1636
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
1636
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
1637
1637
  }
1638
1638
 
1639
1639
  .s-shadow-5 {
1640
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
1640
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
1641
1641
  }
1642
1642
 
1643
1643
  .s-text-overflow-ellipsis {
@@ -3235,23 +3235,23 @@
3235
3235
  }
3236
3236
 
3237
3237
  .s-1\:shadow-1 {
3238
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
3238
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
3239
3239
  }
3240
3240
 
3241
3241
  .s-1\:shadow-2 {
3242
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
3242
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
3243
3243
  }
3244
3244
 
3245
3245
  .s-1\:shadow-3 {
3246
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
3246
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
3247
3247
  }
3248
3248
 
3249
3249
  .s-1\:shadow-4 {
3250
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
3250
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
3251
3251
  }
3252
3252
 
3253
3253
  .s-1\:shadow-5 {
3254
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
3254
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
3255
3255
  }
3256
3256
 
3257
3257
  .s-1\:w-fill {
@@ -4835,23 +4835,23 @@
4835
4835
  }
4836
4836
 
4837
4837
  .s-2\:shadow-1 {
4838
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
4838
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
4839
4839
  }
4840
4840
 
4841
4841
  .s-2\:shadow-2 {
4842
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
4842
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
4843
4843
  }
4844
4844
 
4845
4845
  .s-2\:shadow-3 {
4846
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
4846
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
4847
4847
  }
4848
4848
 
4849
4849
  .s-2\:shadow-4 {
4850
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
4850
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
4851
4851
  }
4852
4852
 
4853
4853
  .s-2\:shadow-5 {
4854
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
4854
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
4855
4855
  }
4856
4856
 
4857
4857
  .s-2\:w-fill {
@@ -6435,23 +6435,23 @@
6435
6435
  }
6436
6436
 
6437
6437
  .s-3\:shadow-1 {
6438
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
6438
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
6439
6439
  }
6440
6440
 
6441
6441
  .s-3\:shadow-2 {
6442
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
6442
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
6443
6443
  }
6444
6444
 
6445
6445
  .s-3\:shadow-3 {
6446
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
6446
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
6447
6447
  }
6448
6448
 
6449
6449
  .s-3\:shadow-4 {
6450
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
6450
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
6451
6451
  }
6452
6452
 
6453
6453
  .s-3\:shadow-5 {
6454
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
6454
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
6455
6455
  }
6456
6456
 
6457
6457
  .s-3\:w-fill {
@@ -8035,23 +8035,23 @@
8035
8035
  }
8036
8036
 
8037
8037
  .s-4\:shadow-1 {
8038
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
8038
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
8039
8039
  }
8040
8040
 
8041
8041
  .s-4\:shadow-2 {
8042
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
8042
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
8043
8043
  }
8044
8044
 
8045
8045
  .s-4\:shadow-3 {
8046
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
8046
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
8047
8047
  }
8048
8048
 
8049
8049
  .s-4\:shadow-4 {
8050
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
8050
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
8051
8051
  }
8052
8052
 
8053
8053
  .s-4\:shadow-5 {
8054
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
8054
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
8055
8055
  }
8056
8056
 
8057
8057
  .s-4\:w-fill {
@@ -9635,23 +9635,23 @@
9635
9635
  }
9636
9636
 
9637
9637
  .s-5\:shadow-1 {
9638
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
9638
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
9639
9639
  }
9640
9640
 
9641
9641
  .s-5\:shadow-2 {
9642
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
9642
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
9643
9643
  }
9644
9644
 
9645
9645
  .s-5\:shadow-3 {
9646
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
9646
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
9647
9647
  }
9648
9648
 
9649
9649
  .s-5\:shadow-4 {
9650
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
9650
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
9651
9651
  }
9652
9652
 
9653
9653
  .s-5\:shadow-5 {
9654
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
9654
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
9655
9655
  }
9656
9656
 
9657
9657
  .s-5\:w-fill {
@@ -11235,23 +11235,23 @@
11235
11235
  }
11236
11236
 
11237
11237
  .s-6\:shadow-1 {
11238
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
11238
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-1-umbra) var(--color-shadow-umbra), var(--shadow-1-penumbra) var(--color-shadow-penumbra), var(--shadow-1-ambient) var(--color-shadow-ambient);
11239
11239
  }
11240
11240
 
11241
11241
  .s-6\:shadow-2 {
11242
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
11242
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-2-umbra) var(--color-shadow-umbra), var(--shadow-2-penumbra) var(--color-shadow-penumbra), var(--shadow-2-ambient) var(--color-shadow-ambient);
11243
11243
  }
11244
11244
 
11245
11245
  .s-6\:shadow-3 {
11246
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
11246
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-3-umbra) var(--color-shadow-umbra), var(--shadow-3-penumbra) var(--color-shadow-penumbra), var(--shadow-3-ambient) var(--color-shadow-ambient);
11247
11247
  }
11248
11248
 
11249
11249
  .s-6\:shadow-4 {
11250
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
11250
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-4-umbra) var(--color-shadow-umbra), var(--shadow-4-penumbra) var(--color-shadow-penumbra), var(--shadow-4-ambient) var(--color-shadow-ambient);
11251
11251
  }
11252
11252
 
11253
11253
  .s-6\:shadow-5 {
11254
- box-shadow: var(--shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
11254
+ box-shadow: 0 0 0 var(--card-shadow-outline) var(--color-shadow-outline), var(--shadow-5-umbra) var(--color-shadow-umbra), var(--shadow-5-penumbra) var(--color-shadow-penumbra), var(--shadow-5-ambient) var(--color-shadow-ambient);
11255
11255
  }
11256
11256
 
11257
11257
  .s-6\:w-fill {
@@ -11395,8 +11395,13 @@
11395
11395
  transform: rotate(180deg);
11396
11396
  }
11397
11397
 
11398
+ .s-arrow-stroke-mask {
11399
+ y: undefined;
11400
+ }
11401
+
11398
11402
  .s-arrow-stroke {
11399
11403
  stroke: var(--color-shadow-outline);
11404
+ stroke-width: calc(var(--card-shadow-outline) * 2);
11400
11405
  }
11401
11406
 
11402
11407
  .s-arrow-shape {
@@ -12229,11 +12234,22 @@
12229
12234
  }
12230
12235
 
12231
12236
  .s-button.s-solid.s-default[data-disabled] {
12232
- --color-bg: var(--color-default-tinted-bg-1);
12233
- --color-border: var(--color-default-tinted-border-0);
12234
- --color-fg: var(--color-default-tinted-fg-2);
12235
- --color-muted-bg: var(--color-default-tinted-bg-2);
12236
- --color-muted-fg: var(--color-default-tinted-fg-1);
12237
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12238
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12239
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
12240
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-3);
12241
+ --color-avatar-red-bg: var(--color-tinted-default-bg-3);
12242
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-3);
12243
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-3);
12244
+ --color-avatar-green-bg: var(--color-tinted-default-bg-3);
12245
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-3);
12246
+ --color-bg: var(--color-tinted-default-bg-1);
12247
+ --color-border: var(--color-tinted-default-border-1);
12248
+ --color-code-bg: var(--color-tinted-default-bg-2);
12249
+ --color-code-fg: var(--color-tinted-default-border-4);
12250
+ --color-fg: var(--color-tinted-default-border-4);
12251
+ --color-muted-bg: var(--color-tinted-default-bg-2);
12252
+ --color-muted-fg: var(--color-tinted-default-border-4);
12237
12253
  }
12238
12254
 
12239
12255
  .s-button.s-ghost.s-default {
@@ -12272,11 +12288,22 @@
12272
12288
  }
12273
12289
 
12274
12290
  .s-button.s-ghost.s-default[data-disabled] {
12275
- --color-bg: var(--color-default-tinted-bg-1);
12276
- --color-border: var(--color-default-tinted-border-0);
12277
- --color-fg: var(--color-default-tinted-fg-2);
12278
- --color-muted-bg: var(--color-default-tinted-bg-2);
12279
- --color-muted-fg: var(--color-default-tinted-fg-1);
12291
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12292
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12293
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12294
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12295
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12296
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12297
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12298
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12299
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12300
+ --color-bg: var(--color-tinted-default-bg-0);
12301
+ --color-border: var(--color-tinted-default-border-0);
12302
+ --color-code-bg: var(--color-tinted-default-bg-1);
12303
+ --color-code-fg: var(--color-tinted-default-border-3);
12304
+ --color-fg: var(--color-tinted-default-border-4);
12305
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12306
+ --color-muted-fg: var(--color-tinted-default-border-3);
12280
12307
  }
12281
12308
 
12282
12309
  .s-button.s-tinted.s-default {
@@ -12314,11 +12341,22 @@
12314
12341
  }
12315
12342
 
12316
12343
  .s-button.s-tinted.s-default[data-disabled] {
12317
- --color-bg: var(--color-default-tinted-bg-0);
12318
- --color-border: var(--color-default-tinted-border-0);
12319
- --color-fg: var(--color-default-tinted-fg-2);
12320
- --color-muted-bg: var(--color-default-tinted-bg-1);
12321
- --color-muted-fg: var(--color-default-tinted-fg-1);
12344
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12345
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12346
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12347
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12348
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12349
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12350
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12351
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12352
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12353
+ --color-bg: var(--color-tinted-default-bg-0);
12354
+ --color-border: var(--color-tinted-default-border-0);
12355
+ --color-code-bg: var(--color-tinted-default-bg-1);
12356
+ --color-code-fg: var(--color-tinted-default-border-3);
12357
+ --color-fg: var(--color-tinted-default-border-4);
12358
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12359
+ --color-muted-fg: var(--color-tinted-default-border-3);
12322
12360
  }
12323
12361
 
12324
12362
  .s-button.s-solid.s-neutral {
@@ -12355,11 +12393,22 @@
12355
12393
  }
12356
12394
 
12357
12395
  .s-button.s-solid.s-neutral[data-disabled] {
12358
- --color-bg: var(--color-default-tinted-bg-1);
12359
- --color-border: var(--color-default-tinted-border-0);
12360
- --color-fg: var(--color-default-tinted-fg-2);
12361
- --color-muted-bg: var(--color-default-tinted-bg-2);
12362
- --color-muted-fg: var(--color-default-tinted-fg-1);
12396
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12397
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12398
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
12399
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-3);
12400
+ --color-avatar-red-bg: var(--color-tinted-default-bg-3);
12401
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-3);
12402
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-3);
12403
+ --color-avatar-green-bg: var(--color-tinted-default-bg-3);
12404
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-3);
12405
+ --color-bg: var(--color-tinted-default-bg-1);
12406
+ --color-border: var(--color-tinted-default-border-1);
12407
+ --color-code-bg: var(--color-tinted-default-bg-2);
12408
+ --color-code-fg: var(--color-tinted-default-border-4);
12409
+ --color-fg: var(--color-tinted-default-border-4);
12410
+ --color-muted-bg: var(--color-tinted-default-bg-2);
12411
+ --color-muted-fg: var(--color-tinted-default-border-4);
12363
12412
  }
12364
12413
 
12365
12414
  .s-button.s-ghost.s-neutral {
@@ -12398,11 +12447,22 @@
12398
12447
  }
12399
12448
 
12400
12449
  .s-button.s-ghost.s-neutral[data-disabled] {
12401
- --color-bg: var(--color-default-tinted-bg-1);
12402
- --color-border: var(--color-default-tinted-border-0);
12403
- --color-fg: var(--color-default-tinted-fg-2);
12404
- --color-muted-bg: var(--color-default-tinted-bg-2);
12405
- --color-muted-fg: var(--color-default-tinted-fg-1);
12450
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12451
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12452
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12453
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12454
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12455
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12456
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12457
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12458
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12459
+ --color-bg: var(--color-tinted-default-bg-0);
12460
+ --color-border: var(--color-tinted-default-border-0);
12461
+ --color-code-bg: var(--color-tinted-default-bg-1);
12462
+ --color-code-fg: var(--color-tinted-default-border-3);
12463
+ --color-fg: var(--color-tinted-default-border-4);
12464
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12465
+ --color-muted-fg: var(--color-tinted-default-border-3);
12406
12466
  }
12407
12467
 
12408
12468
  .s-button.s-tinted.s-neutral {
@@ -12440,11 +12500,22 @@
12440
12500
  }
12441
12501
 
12442
12502
  .s-button.s-tinted.s-neutral[data-disabled] {
12443
- --color-bg: var(--color-default-tinted-bg-0);
12444
- --color-border: var(--color-default-tinted-border-0);
12445
- --color-fg: var(--color-default-tinted-fg-2);
12446
- --color-muted-bg: var(--color-default-tinted-bg-1);
12447
- --color-muted-fg: var(--color-default-tinted-fg-1);
12503
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12504
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12505
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12506
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12507
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12508
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12509
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12510
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12511
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12512
+ --color-bg: var(--color-tinted-default-bg-0);
12513
+ --color-border: var(--color-tinted-default-border-0);
12514
+ --color-code-bg: var(--color-tinted-default-bg-1);
12515
+ --color-code-fg: var(--color-tinted-default-border-3);
12516
+ --color-fg: var(--color-tinted-default-border-4);
12517
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12518
+ --color-muted-fg: var(--color-tinted-default-border-3);
12448
12519
  }
12449
12520
 
12450
12521
  .s-button.s-solid.s-accent {
@@ -12481,11 +12552,22 @@
12481
12552
  }
12482
12553
 
12483
12554
  .s-button.s-solid.s-accent[data-disabled] {
12484
- --color-bg: var(--color-default-tinted-bg-1);
12485
- --color-border: var(--color-default-tinted-border-0);
12486
- --color-fg: var(--color-default-tinted-fg-2);
12487
- --color-muted-bg: var(--color-default-tinted-bg-2);
12488
- --color-muted-fg: var(--color-default-tinted-fg-1);
12555
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12556
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12557
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
12558
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-3);
12559
+ --color-avatar-red-bg: var(--color-tinted-default-bg-3);
12560
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-3);
12561
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-3);
12562
+ --color-avatar-green-bg: var(--color-tinted-default-bg-3);
12563
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-3);
12564
+ --color-bg: var(--color-tinted-default-bg-1);
12565
+ --color-border: var(--color-tinted-default-border-1);
12566
+ --color-code-bg: var(--color-tinted-default-bg-2);
12567
+ --color-code-fg: var(--color-tinted-default-border-4);
12568
+ --color-fg: var(--color-tinted-default-border-4);
12569
+ --color-muted-bg: var(--color-tinted-default-bg-2);
12570
+ --color-muted-fg: var(--color-tinted-default-border-4);
12489
12571
  }
12490
12572
 
12491
12573
  .s-button.s-ghost.s-accent {
@@ -12524,11 +12606,22 @@
12524
12606
  }
12525
12607
 
12526
12608
  .s-button.s-ghost.s-accent[data-disabled] {
12527
- --color-bg: var(--color-default-tinted-bg-1);
12528
- --color-border: var(--color-default-tinted-border-0);
12529
- --color-fg: var(--color-default-tinted-fg-2);
12530
- --color-muted-bg: var(--color-default-tinted-bg-2);
12531
- --color-muted-fg: var(--color-default-tinted-fg-1);
12609
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12610
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12611
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12612
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12613
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12614
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12615
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12616
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12617
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12618
+ --color-bg: var(--color-tinted-default-bg-0);
12619
+ --color-border: var(--color-tinted-default-border-0);
12620
+ --color-code-bg: var(--color-tinted-default-bg-1);
12621
+ --color-code-fg: var(--color-tinted-default-border-3);
12622
+ --color-fg: var(--color-tinted-default-border-4);
12623
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12624
+ --color-muted-fg: var(--color-tinted-default-border-3);
12532
12625
  }
12533
12626
 
12534
12627
  .s-button.s-tinted.s-accent {
@@ -12566,11 +12659,22 @@
12566
12659
  }
12567
12660
 
12568
12661
  .s-button.s-tinted.s-accent[data-disabled] {
12569
- --color-bg: var(--color-default-tinted-bg-0);
12570
- --color-border: var(--color-default-tinted-border-0);
12571
- --color-fg: var(--color-default-tinted-fg-2);
12572
- --color-muted-bg: var(--color-default-tinted-bg-1);
12573
- --color-muted-fg: var(--color-default-tinted-fg-1);
12662
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12663
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12664
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12665
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12666
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12667
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12668
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12669
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12670
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12671
+ --color-bg: var(--color-tinted-default-bg-0);
12672
+ --color-border: var(--color-tinted-default-border-0);
12673
+ --color-code-bg: var(--color-tinted-default-bg-1);
12674
+ --color-code-fg: var(--color-tinted-default-border-3);
12675
+ --color-fg: var(--color-tinted-default-border-4);
12676
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12677
+ --color-muted-fg: var(--color-tinted-default-border-3);
12574
12678
  }
12575
12679
 
12576
12680
  .s-button.s-solid.s-suggest {
@@ -12607,11 +12711,22 @@
12607
12711
  }
12608
12712
 
12609
12713
  .s-button.s-solid.s-suggest[data-disabled] {
12610
- --color-bg: var(--color-default-tinted-bg-1);
12611
- --color-border: var(--color-default-tinted-border-0);
12612
- --color-fg: var(--color-default-tinted-fg-2);
12613
- --color-muted-bg: var(--color-default-tinted-bg-2);
12614
- --color-muted-fg: var(--color-default-tinted-fg-1);
12714
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12715
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12716
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
12717
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-3);
12718
+ --color-avatar-red-bg: var(--color-tinted-default-bg-3);
12719
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-3);
12720
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-3);
12721
+ --color-avatar-green-bg: var(--color-tinted-default-bg-3);
12722
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-3);
12723
+ --color-bg: var(--color-tinted-default-bg-1);
12724
+ --color-border: var(--color-tinted-default-border-1);
12725
+ --color-code-bg: var(--color-tinted-default-bg-2);
12726
+ --color-code-fg: var(--color-tinted-default-border-4);
12727
+ --color-fg: var(--color-tinted-default-border-4);
12728
+ --color-muted-bg: var(--color-tinted-default-bg-2);
12729
+ --color-muted-fg: var(--color-tinted-default-border-4);
12615
12730
  }
12616
12731
 
12617
12732
  .s-button.s-ghost.s-suggest {
@@ -12650,11 +12765,22 @@
12650
12765
  }
12651
12766
 
12652
12767
  .s-button.s-ghost.s-suggest[data-disabled] {
12653
- --color-bg: var(--color-default-tinted-bg-1);
12654
- --color-border: var(--color-default-tinted-border-0);
12655
- --color-fg: var(--color-default-tinted-fg-2);
12656
- --color-muted-bg: var(--color-default-tinted-bg-2);
12657
- --color-muted-fg: var(--color-default-tinted-fg-1);
12768
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12769
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12770
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12771
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12772
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12773
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12774
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12775
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12776
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12777
+ --color-bg: var(--color-tinted-default-bg-0);
12778
+ --color-border: var(--color-tinted-default-border-0);
12779
+ --color-code-bg: var(--color-tinted-default-bg-1);
12780
+ --color-code-fg: var(--color-tinted-default-border-3);
12781
+ --color-fg: var(--color-tinted-default-border-4);
12782
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12783
+ --color-muted-fg: var(--color-tinted-default-border-3);
12658
12784
  }
12659
12785
 
12660
12786
  .s-button.s-tinted.s-suggest {
@@ -12692,11 +12818,22 @@
12692
12818
  }
12693
12819
 
12694
12820
  .s-button.s-tinted.s-suggest[data-disabled] {
12695
- --color-bg: var(--color-default-tinted-bg-0);
12696
- --color-border: var(--color-default-tinted-border-0);
12697
- --color-fg: var(--color-default-tinted-fg-2);
12698
- --color-muted-bg: var(--color-default-tinted-bg-1);
12699
- --color-muted-fg: var(--color-default-tinted-fg-1);
12821
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12822
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12823
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12824
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12825
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12826
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12827
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12828
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12829
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12830
+ --color-bg: var(--color-tinted-default-bg-0);
12831
+ --color-border: var(--color-tinted-default-border-0);
12832
+ --color-code-bg: var(--color-tinted-default-bg-1);
12833
+ --color-code-fg: var(--color-tinted-default-border-3);
12834
+ --color-fg: var(--color-tinted-default-border-4);
12835
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12836
+ --color-muted-fg: var(--color-tinted-default-border-3);
12700
12837
  }
12701
12838
 
12702
12839
  .s-button.s-solid.s-positive {
@@ -12733,11 +12870,22 @@
12733
12870
  }
12734
12871
 
12735
12872
  .s-button.s-solid.s-positive[data-disabled] {
12736
- --color-bg: var(--color-default-tinted-bg-1);
12737
- --color-border: var(--color-default-tinted-border-0);
12738
- --color-fg: var(--color-default-tinted-fg-2);
12739
- --color-muted-bg: var(--color-default-tinted-bg-2);
12740
- --color-muted-fg: var(--color-default-tinted-fg-1);
12873
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12874
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12875
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
12876
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-3);
12877
+ --color-avatar-red-bg: var(--color-tinted-default-bg-3);
12878
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-3);
12879
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-3);
12880
+ --color-avatar-green-bg: var(--color-tinted-default-bg-3);
12881
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-3);
12882
+ --color-bg: var(--color-tinted-default-bg-1);
12883
+ --color-border: var(--color-tinted-default-border-1);
12884
+ --color-code-bg: var(--color-tinted-default-bg-2);
12885
+ --color-code-fg: var(--color-tinted-default-border-4);
12886
+ --color-fg: var(--color-tinted-default-border-4);
12887
+ --color-muted-bg: var(--color-tinted-default-bg-2);
12888
+ --color-muted-fg: var(--color-tinted-default-border-4);
12741
12889
  }
12742
12890
 
12743
12891
  .s-button.s-ghost.s-positive {
@@ -12776,11 +12924,22 @@
12776
12924
  }
12777
12925
 
12778
12926
  .s-button.s-ghost.s-positive[data-disabled] {
12779
- --color-bg: var(--color-default-tinted-bg-1);
12780
- --color-border: var(--color-default-tinted-border-0);
12781
- --color-fg: var(--color-default-tinted-fg-2);
12782
- --color-muted-bg: var(--color-default-tinted-bg-2);
12783
- --color-muted-fg: var(--color-default-tinted-fg-1);
12927
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12928
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12929
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12930
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12931
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12932
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12933
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12934
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12935
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12936
+ --color-bg: var(--color-tinted-default-bg-0);
12937
+ --color-border: var(--color-tinted-default-border-0);
12938
+ --color-code-bg: var(--color-tinted-default-bg-1);
12939
+ --color-code-fg: var(--color-tinted-default-border-3);
12940
+ --color-fg: var(--color-tinted-default-border-4);
12941
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12942
+ --color-muted-fg: var(--color-tinted-default-border-3);
12784
12943
  }
12785
12944
 
12786
12945
  .s-button.s-tinted.s-positive {
@@ -12818,11 +12977,22 @@
12818
12977
  }
12819
12978
 
12820
12979
  .s-button.s-tinted.s-positive[data-disabled] {
12821
- --color-bg: var(--color-default-tinted-bg-0);
12822
- --color-border: var(--color-default-tinted-border-0);
12823
- --color-fg: var(--color-default-tinted-fg-2);
12824
- --color-muted-bg: var(--color-default-tinted-bg-1);
12825
- --color-muted-fg: var(--color-default-tinted-fg-1);
12980
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12981
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12982
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
12983
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
12984
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
12985
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
12986
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
12987
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
12988
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
12989
+ --color-bg: var(--color-tinted-default-bg-0);
12990
+ --color-border: var(--color-tinted-default-border-0);
12991
+ --color-code-bg: var(--color-tinted-default-bg-1);
12992
+ --color-code-fg: var(--color-tinted-default-border-3);
12993
+ --color-fg: var(--color-tinted-default-border-4);
12994
+ --color-muted-bg: var(--color-tinted-default-bg-1);
12995
+ --color-muted-fg: var(--color-tinted-default-border-3);
12826
12996
  }
12827
12997
 
12828
12998
  .s-button.s-solid.s-caution {
@@ -12859,11 +13029,22 @@
12859
13029
  }
12860
13030
 
12861
13031
  .s-button.s-solid.s-caution[data-disabled] {
12862
- --color-bg: var(--color-default-tinted-bg-1);
12863
- --color-border: var(--color-default-tinted-border-0);
12864
- --color-fg: var(--color-default-tinted-fg-2);
12865
- --color-muted-bg: var(--color-default-tinted-bg-2);
12866
- --color-muted-fg: var(--color-default-tinted-fg-1);
13032
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13033
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13034
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
13035
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-3);
13036
+ --color-avatar-red-bg: var(--color-tinted-default-bg-3);
13037
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-3);
13038
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-3);
13039
+ --color-avatar-green-bg: var(--color-tinted-default-bg-3);
13040
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-3);
13041
+ --color-bg: var(--color-tinted-default-bg-1);
13042
+ --color-border: var(--color-tinted-default-border-1);
13043
+ --color-code-bg: var(--color-tinted-default-bg-2);
13044
+ --color-code-fg: var(--color-tinted-default-border-4);
13045
+ --color-fg: var(--color-tinted-default-border-4);
13046
+ --color-muted-bg: var(--color-tinted-default-bg-2);
13047
+ --color-muted-fg: var(--color-tinted-default-border-4);
12867
13048
  }
12868
13049
 
12869
13050
  .s-button.s-ghost.s-caution {
@@ -12902,11 +13083,22 @@
12902
13083
  }
12903
13084
 
12904
13085
  .s-button.s-ghost.s-caution[data-disabled] {
12905
- --color-bg: var(--color-default-tinted-bg-1);
12906
- --color-border: var(--color-default-tinted-border-0);
12907
- --color-fg: var(--color-default-tinted-fg-2);
12908
- --color-muted-bg: var(--color-default-tinted-bg-2);
12909
- --color-muted-fg: var(--color-default-tinted-fg-1);
13086
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13087
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13088
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
13089
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
13090
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
13091
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
13092
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
13093
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
13094
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
13095
+ --color-bg: var(--color-tinted-default-bg-0);
13096
+ --color-border: var(--color-tinted-default-border-0);
13097
+ --color-code-bg: var(--color-tinted-default-bg-1);
13098
+ --color-code-fg: var(--color-tinted-default-border-3);
13099
+ --color-fg: var(--color-tinted-default-border-4);
13100
+ --color-muted-bg: var(--color-tinted-default-bg-1);
13101
+ --color-muted-fg: var(--color-tinted-default-border-3);
12910
13102
  }
12911
13103
 
12912
13104
  .s-button.s-tinted.s-caution {
@@ -12944,11 +13136,22 @@
12944
13136
  }
12945
13137
 
12946
13138
  .s-button.s-tinted.s-caution[data-disabled] {
12947
- --color-bg: var(--color-default-tinted-bg-0);
12948
- --color-border: var(--color-default-tinted-border-0);
12949
- --color-fg: var(--color-default-tinted-fg-2);
12950
- --color-muted-bg: var(--color-default-tinted-bg-1);
12951
- --color-muted-fg: var(--color-default-tinted-fg-1);
13139
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13140
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13141
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
13142
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
13143
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
13144
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
13145
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
13146
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
13147
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
13148
+ --color-bg: var(--color-tinted-default-bg-0);
13149
+ --color-border: var(--color-tinted-default-border-0);
13150
+ --color-code-bg: var(--color-tinted-default-bg-1);
13151
+ --color-code-fg: var(--color-tinted-default-border-3);
13152
+ --color-fg: var(--color-tinted-default-border-4);
13153
+ --color-muted-bg: var(--color-tinted-default-bg-1);
13154
+ --color-muted-fg: var(--color-tinted-default-border-3);
12952
13155
  }
12953
13156
 
12954
13157
  .s-button.s-solid.s-critical {
@@ -12985,11 +13188,22 @@
12985
13188
  }
12986
13189
 
12987
13190
  .s-button.s-solid.s-critical[data-disabled] {
12988
- --color-bg: var(--color-default-tinted-bg-1);
12989
- --color-border: var(--color-default-tinted-border-0);
12990
- --color-fg: var(--color-default-tinted-fg-2);
12991
- --color-muted-bg: var(--color-default-tinted-bg-2);
12992
- --color-muted-fg: var(--color-default-tinted-fg-1);
13191
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13192
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13193
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
13194
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-3);
13195
+ --color-avatar-red-bg: var(--color-tinted-default-bg-3);
13196
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-3);
13197
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-3);
13198
+ --color-avatar-green-bg: var(--color-tinted-default-bg-3);
13199
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-3);
13200
+ --color-bg: var(--color-tinted-default-bg-1);
13201
+ --color-border: var(--color-tinted-default-border-1);
13202
+ --color-code-bg: var(--color-tinted-default-bg-2);
13203
+ --color-code-fg: var(--color-tinted-default-border-4);
13204
+ --color-fg: var(--color-tinted-default-border-4);
13205
+ --color-muted-bg: var(--color-tinted-default-bg-2);
13206
+ --color-muted-fg: var(--color-tinted-default-border-4);
12993
13207
  }
12994
13208
 
12995
13209
  .s-button.s-ghost.s-critical {
@@ -13028,11 +13242,22 @@
13028
13242
  }
13029
13243
 
13030
13244
  .s-button.s-ghost.s-critical[data-disabled] {
13031
- --color-bg: var(--color-default-tinted-bg-1);
13032
- --color-border: var(--color-default-tinted-border-0);
13033
- --color-fg: var(--color-default-tinted-fg-2);
13034
- --color-muted-bg: var(--color-default-tinted-bg-2);
13035
- --color-muted-fg: var(--color-default-tinted-fg-1);
13245
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13246
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13247
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
13248
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
13249
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
13250
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
13251
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
13252
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
13253
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
13254
+ --color-bg: var(--color-tinted-default-bg-0);
13255
+ --color-border: var(--color-tinted-default-border-0);
13256
+ --color-code-bg: var(--color-tinted-default-bg-1);
13257
+ --color-code-fg: var(--color-tinted-default-border-3);
13258
+ --color-fg: var(--color-tinted-default-border-4);
13259
+ --color-muted-bg: var(--color-tinted-default-bg-1);
13260
+ --color-muted-fg: var(--color-tinted-default-border-3);
13036
13261
  }
13037
13262
 
13038
13263
  .s-button.s-tinted.s-critical {
@@ -13070,11 +13295,22 @@
13070
13295
  }
13071
13296
 
13072
13297
  .s-button.s-tinted.s-critical[data-disabled] {
13073
- --color-bg: var(--color-default-tinted-bg-0);
13074
- --color-border: var(--color-default-tinted-border-0);
13075
- --color-fg: var(--color-default-tinted-fg-2);
13076
- --color-muted-bg: var(--color-default-tinted-bg-1);
13077
- --color-muted-fg: var(--color-default-tinted-fg-1);
13298
+ --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13299
+ --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13300
+ --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
13301
+ --color-avatar-magenta-bg: var(--color-tinted-default-bg-2);
13302
+ --color-avatar-red-bg: var(--color-tinted-default-bg-2);
13303
+ --color-avatar-orange-bg: var(--color-tinted-default-bg-2);
13304
+ --color-avatar-yellow-bg: var(--color-tinted-default-bg-2);
13305
+ --color-avatar-green-bg: var(--color-tinted-default-bg-2);
13306
+ --color-avatar-cyan-bg: var(--color-tinted-default-bg-2);
13307
+ --color-bg: var(--color-tinted-default-bg-0);
13308
+ --color-border: var(--color-tinted-default-border-0);
13309
+ --color-code-bg: var(--color-tinted-default-bg-1);
13310
+ --color-code-fg: var(--color-tinted-default-border-3);
13311
+ --color-fg: var(--color-tinted-default-border-4);
13312
+ --color-muted-bg: var(--color-tinted-default-bg-1);
13313
+ --color-muted-fg: var(--color-tinted-default-border-3);
13078
13314
  }
13079
13315
 
13080
13316
  .s-card {
@@ -13151,7 +13387,7 @@ a.s-card:not([data-disabled])[data-selected], button.s-card:not([data-disabled])
13151
13387
  --color-muted-fg: var(--color-solid-primary-fg-3);
13152
13388
  }
13153
13389
 
13154
- a.s-card[data-disabled]), button.s-card[data-disabled] {
13390
+ a.s-card[data-disabled], button.s-card[data-disabled] {
13155
13391
  --color-bg: var(--color-tinted-default-bg-2);
13156
13392
  --color-border: var(--color-tinted-default-border-4);
13157
13393
  --color-fg: var(--color-tinted-default-fg-0);
@@ -20510,115 +20746,115 @@ input:checked + .s-switch-presentation {
20510
20746
  }
20511
20747
 
20512
20748
  .token.atrule {
20513
- color: var(--color-token-atrule);
20749
+ color: var(--color-code-token-atrule);
20514
20750
  }
20515
20751
 
20516
20752
  .token.attr-name {
20517
- color: var(--color-token-attr-name);
20753
+ color: var(--color-code-token-attr-name);
20518
20754
  }
20519
20755
 
20520
20756
  .token.attr-value {
20521
- color: var(--color-token-attr-value);
20757
+ color: var(--color-code-token-attr-value);
20522
20758
  }
20523
20759
 
20524
20760
  .token.attribute {
20525
- color: var(--color-token-attribute);
20761
+ color: var(--color-code-token-attribute);
20526
20762
  }
20527
20763
 
20528
20764
  .token.boolean {
20529
- color: var(--color-token-boolean);
20765
+ color: var(--color-code-token-boolean);
20530
20766
  }
20531
20767
 
20532
20768
  .token.builtin {
20533
- color: var(--color-token-builtin);
20769
+ color: var(--color-code-token-builtin);
20534
20770
  }
20535
20771
 
20536
20772
  .token.cdata {
20537
- color: var(--color-token-cdata);
20773
+ color: var(--color-code-token-cdata);
20538
20774
  }
20539
20775
 
20540
20776
  .token.char {
20541
- color: var(--color-token-char);
20777
+ color: var(--color-code-token-char);
20542
20778
  }
20543
20779
 
20544
20780
  .token.class {
20545
- color: var(--color-token-class);
20781
+ color: var(--color-code-token-class);
20546
20782
  }
20547
20783
 
20548
20784
  .token.class-name {
20549
- color: var(--color-token-class-name);
20785
+ color: var(--color-code-token-class-name);
20550
20786
  }
20551
20787
 
20552
20788
  .token.comment {
20553
- color: var(--color-token-comment);
20789
+ color: var(--color-code-token-comment);
20554
20790
  }
20555
20791
 
20556
20792
  .token.constant {
20557
- color: var(--color-token-constant);
20793
+ color: var(--color-code-token-constant);
20558
20794
  }
20559
20795
 
20560
20796
  .token.deleted {
20561
- color: var(--color-token-deleted);
20797
+ color: var(--color-code-token-deleted);
20562
20798
  }
20563
20799
 
20564
20800
  .token.doctype {
20565
- color: var(--color-token-doctype);
20801
+ color: var(--color-code-token-doctype);
20566
20802
  }
20567
20803
 
20568
20804
  .token.entity {
20569
- color: var(--color-token-entity);
20805
+ color: var(--color-code-token-entity);
20570
20806
  }
20571
20807
 
20572
20808
  .token.function {
20573
- color: var(--color-token-function);
20809
+ color: var(--color-code-token-function);
20574
20810
  }
20575
20811
 
20576
20812
  .token.hexcode {
20577
- color: var(--color-token-hexcode);
20813
+ color: var(--color-code-token-hexcode);
20578
20814
  }
20579
20815
 
20580
20816
  .token.id {
20581
- color: var(--color-token-id);
20817
+ color: var(--color-code-token-id);
20582
20818
  }
20583
20819
 
20584
20820
  .token.important {
20585
- color: var(--color-token-important);
20821
+ color: var(--color-code-token-important);
20586
20822
  }
20587
20823
 
20588
20824
  .token.inserted {
20589
- color: var(--color-token-inserted);
20825
+ color: var(--color-code-token-inserted);
20590
20826
  }
20591
20827
 
20592
20828
  .token.keyword {
20593
- color: var(--color-token-keyword);
20829
+ color: var(--color-code-token-keyword);
20594
20830
  }
20595
20831
 
20596
20832
  .token.number {
20597
- color: var(--color-token-number);
20833
+ color: var(--color-code-token-number);
20598
20834
  }
20599
20835
 
20600
20836
  .token.operator {
20601
- color: var(--color-token-operator);
20837
+ color: var(--color-code-token-operator);
20602
20838
  }
20603
20839
 
20604
20840
  .token.prolog {
20605
- color: var(--color-token-prolog);
20841
+ color: var(--color-code-token-prolog);
20606
20842
  }
20607
20843
 
20608
20844
  .token.property {
20609
- color: var(--color-token-property);
20845
+ color: var(--color-code-token-property);
20610
20846
  }
20611
20847
 
20612
20848
  .token.pseudo-class {
20613
- color: var(--color-token-pseudo-class);
20849
+ color: var(--color-code-token-pseudo-class);
20614
20850
  }
20615
20851
 
20616
20852
  .token.pseudo-element {
20617
- color: var(--color-token-pseudo-element);
20853
+ color: var(--color-code-token-pseudo-element);
20618
20854
  }
20619
20855
 
20620
20856
  .token.punctuation {
20621
- color: var(--color-token-punctuation);
20857
+ color: var(--color-code-token-punctuation);
20622
20858
  }
20623
20859
 
20624
20860
  .token.attr-value .token:not(.attr-equals).punctuation {
@@ -20626,35 +20862,35 @@ input:checked + .s-switch-presentation {
20626
20862
  }
20627
20863
 
20628
20864
  .token.regex {
20629
- color: var(--color-token-regex);
20865
+ color: var(--color-code-token-regex);
20630
20866
  }
20631
20867
 
20632
20868
  .token.selector {
20633
- color: var(--color-token-selector);
20869
+ color: var(--color-code-token-selector);
20634
20870
  }
20635
20871
 
20636
20872
  .token.string {
20637
- color: var(--color-token-string);
20873
+ color: var(--color-code-token-string);
20638
20874
  }
20639
20875
 
20640
20876
  .token.symbol {
20641
- color: var(--color-token-symbol);
20877
+ color: var(--color-code-token-symbol);
20642
20878
  }
20643
20879
 
20644
20880
  .token.tag {
20645
- color: var(--color-token-tag);
20881
+ color: var(--color-code-token-tag);
20646
20882
  }
20647
20883
 
20648
20884
  .token.unit {
20649
- color: var(--color-token-unit);
20885
+ color: var(--color-code-token-unit);
20650
20886
  }
20651
20887
 
20652
20888
  .token.url {
20653
- color: var(--color-token-url);
20889
+ color: var(--color-code-token-url);
20654
20890
  }
20655
20891
 
20656
20892
  .token.variable {
20657
- color: var(--color-token-variable);
20893
+ color: var(--color-code-token-variable);
20658
20894
  }
20659
20895
 
20660
20896
  .s-tooltip {
@@ -22137,11 +22373,11 @@ input:checked + .s-switch-presentation {
22137
22373
  }
22138
22374
 
22139
22375
  .s-selectable:not([data-disabled]):focus {
22140
- --color-bg: var(--color-solid-bg-0);
22141
- --color-border: var(--color-solid-border-1);
22142
- --color-fg: var(--color-solid-fg-1);
22143
- --color-muted-bg: var(--color-solid-bg-1);
22144
- --color-muted-fg: var(--color-solid-fg-3);
22376
+ --color-bg: var(--color-solid-primary-bg-0);
22377
+ --color-border: var(--color-solid-primary-border-1);
22378
+ --color-fg: var(--color-solid-primary-fg-0);
22379
+ --color-muted-bg: var(--color-solid-primary-bg-1);
22380
+ --color-muted-fg: var(--color-solid-primary-fg-3);
22145
22381
  }
22146
22382
 
22147
22383
  .s-selectable[data-disabled] {