@sanity/ui 3.0.0-static.16 → 3.0.0-static.18

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 (98) hide show
  1. package/README.md +2 -4
  2. package/bin/{ui.js → sanity-ui.cjs} +1 -1
  3. package/dist/_chunks-cjs/{_visual-editing.js → _visual-editing.cjs} +6 -6
  4. package/dist/_chunks-cjs/_visual-editing.cjs.map +1 -0
  5. package/dist/_chunks-cjs/{buildCommand.js → buildCommand.cjs} +26 -10
  6. package/dist/_chunks-cjs/buildCommand.cjs.map +1 -0
  7. package/dist/_chunks-cjs/{refractor.js → refractor.cjs} +1 -1
  8. package/dist/_chunks-cjs/refractor.cjs.map +1 -0
  9. package/dist/_chunks-es/{_visual-editing.mjs → _visual-editing.js} +7 -7
  10. package/dist/_chunks-es/_visual-editing.js.map +1 -0
  11. package/dist/_chunks-es/{refractor.mjs → refractor.js} +1 -1
  12. package/dist/_chunks-es/refractor.js.map +1 -0
  13. package/dist/_visual-editing.cjs +30 -0
  14. package/dist/_visual-editing.cjs.map +1 -0
  15. package/dist/_visual-editing.js +29 -29
  16. package/dist/_visual-editing.js.map +1 -1
  17. package/dist/{cli.js → cli.cjs} +4 -4
  18. package/dist/cli.cjs.map +1 -0
  19. package/dist/{css.mjs → css.cjs} +491 -499
  20. package/dist/css.cjs.map +1 -0
  21. package/dist/{css.d.mts → css.d.cts} +26 -26
  22. package/dist/css.d.ts +26 -26
  23. package/dist/css.js +491 -497
  24. package/dist/css.js.map +1 -1
  25. package/dist/{index.mjs → index.cjs} +368 -367
  26. package/dist/{index.mjs.map → index.cjs.map} +1 -1
  27. package/dist/{index.d.mts → index.d.cts} +3 -2
  28. package/dist/index.d.ts +3 -2
  29. package/dist/index.js +366 -367
  30. package/dist/index.js.map +1 -1
  31. package/dist/{theme.mjs → theme.cjs} +219 -196
  32. package/dist/theme.cjs.map +1 -0
  33. package/dist/{theme.d.mts → theme.d.cts} +2 -0
  34. package/dist/theme.d.ts +2 -0
  35. package/dist/theme.js +218 -195
  36. package/dist/theme.js.map +1 -1
  37. package/dist/{sanity-palette.css → ui-palette.css} +1 -1
  38. package/dist/ui-palette.min.css +1 -0
  39. package/dist/{system.css → ui-system.css} +258 -140
  40. package/dist/ui-system.min.css +1 -0
  41. package/dist/{sanity-theme.css → ui-theme.css} +199 -199
  42. package/dist/ui-theme.min.css +1 -0
  43. package/dist/ui.css +29152 -0
  44. package/dist/ui.min.css +1 -0
  45. package/package.json +20 -20
  46. package/src/cli/buildCommand.ts +55 -20
  47. package/src/cli/index.ts +1 -1
  48. package/src/core/StyleTags.tsx +4 -4
  49. package/src/core/components/autocomplete/__workshop__/async.tsx +2 -2
  50. package/src/core/components/autocomplete/__workshop__/custom.tsx +2 -2
  51. package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +3 -3
  52. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +2 -18
  53. package/src/core/hooks/useMediaIndex/useMediaIndex.ts +9 -9
  54. package/src/core/primitives/button/__workshop__/custom.tsx +18 -41
  55. package/src/core/primitives/button/button.tsx +3 -1
  56. package/src/core/primitives/card/__workshop__/asButton.tsx +0 -9
  57. package/src/core/primitives/card/__workshop__/interactive.tsx +0 -1
  58. package/src/core/primitives/card/__workshop__/props.tsx +0 -3
  59. package/src/core/primitives/card/__workshop__/selected.tsx +6 -37
  60. package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +1 -1
  61. package/src/core/primitives/heading/__workshop__/plain.tsx +1 -8
  62. package/src/core/primitives/label/__workshop__/plain.tsx +1 -9
  63. package/src/core/primitives/text/__workshop__/example.tsx +1 -9
  64. package/src/css/{compilePalette.ts → _compilePalette.ts} +2 -2
  65. package/src/css/{compileSystem.ts → _compileSystem.ts} +1 -1
  66. package/src/css/{compileTheme.ts → _compileTheme.ts} +3 -3
  67. package/src/css/{compileTheme_v3.ts → _compileTheme_v3.ts} +7 -1
  68. package/src/css/_system.style.ts +1 -0
  69. package/src/css/constants.ts +1 -0
  70. package/src/css/index.ts +3 -3
  71. package/src/css/primitives/button/button.style.ts +23 -9
  72. package/src/css/primitives/button/button.ts +1 -12
  73. package/src/css/primitives/button/types.ts +1 -6
  74. package/src/css/primitives/card/card.style.ts +12 -21
  75. package/src/css/primitives/kbd/kbd.style.ts +3 -6
  76. package/src/css/types.ts +32 -27
  77. package/src/theme/v3/color/buildColor_v3.ts +53 -25
  78. package/src/theme/v3/color/card.ts +0 -42
  79. package/src/theme/v3/color/renderColor.test.ts +1 -0
  80. package/src/theme/v3/color/renderColor.ts +9 -2
  81. package/src/theme/v3/color/token.ts +1 -0
  82. package/src/theme/v3/defaultTokens.ts +7 -2
  83. package/dist/_chunks-cjs/_visual-editing.js.map +0 -1
  84. package/dist/_chunks-cjs/buildCommand.js.map +0 -1
  85. package/dist/_chunks-cjs/refractor.js.map +0 -1
  86. package/dist/_chunks-es/_visual-editing.mjs.map +0 -1
  87. package/dist/_chunks-es/refractor.mjs.map +0 -1
  88. package/dist/_visual-editing.mjs +0 -30
  89. package/dist/_visual-editing.mjs.map +0 -1
  90. package/dist/cli.js.map +0 -1
  91. package/dist/css.mjs.map +0 -1
  92. package/dist/sanity-palette.min.css +0 -1
  93. package/dist/sanity-theme.min.css +0 -1
  94. package/dist/system.min.css +0 -1
  95. package/dist/theme.mjs.map +0 -1
  96. package/src/css/primitives/button/_constants.ts +0 -17
  97. /package/dist/{_visual-editing.d.mts → _visual-editing.d.cts} +0 -0
  98. /package/dist/{cli.d.ts → cli.d.cts} +0 -0
package/dist/{system.css → ui-system.css} RENAMED
@@ -12460,40 +12460,48 @@
12460
12460
  opacity: 0.8;
12461
12461
  }
12462
12462
 
12463
- .s-button.s-solid.s-default {
12463
+ .s-button[data-mode='default'][data-tone='default'] {
12464
12464
  --color-bg: var(--color-solid-default-bg-0);
12465
12465
  --color-border: var(--color-solid-default-border-1);
12466
+ --color-code-bg: var(--color-solid-default-bg-1);
12467
+ --color-code-fg: var(--color-solid-default-fg-4);
12466
12468
  --color-fg: var(--color-solid-default-fg-0);
12467
12469
  --color-muted-bg: var(--color-solid-default-bg-1);
12468
12470
  --color-muted-fg: var(--color-solid-default-fg-4);
12469
12471
  --button-box-shadow: none;
12470
12472
  }
12471
12473
 
12472
- .s-button.s-solid.s-default:not([data-disabled]):hover {
12474
+ .s-button[data-mode='default'][data-tone='default']:not([data-disabled]):hover {
12473
12475
  --color-bg: var(--color-solid-default-bg-1);
12474
12476
  --color-border: var(--color-solid-default-border-2);
12477
+ --color-code-bg: var(--color-solid-default-bg-2);
12478
+ --color-code-fg: var(--color-solid-default-fg-4);
12475
12479
  --color-fg: var(--color-solid-default-fg-0);
12476
12480
  --color-muted-bg: var(--color-solid-default-bg-2);
12477
12481
  --color-muted-fg: var(--color-solid-default-fg-4);
12478
12482
  }
12479
12483
 
12480
- .s-button.s-solid.s-default:not([data-disabled]):active {
12484
+ .s-button[data-mode='default'][data-tone='default']:not([data-disabled]):active {
12481
12485
  --color-bg: var(--color-solid-default-bg-2);
12482
12486
  --color-border: var(--color-solid-default-border-3);
12487
+ --color-code-bg: var(--color-solid-default-bg-3);
12488
+ --color-code-fg: var(--color-solid-default-fg-4);
12483
12489
  --color-fg: var(--color-solid-default-fg-0);
12484
12490
  --color-muted-bg: var(--color-solid-default-bg-3);
12485
12491
  --color-muted-fg: var(--color-solid-default-fg-4);
12486
12492
  }
12487
12493
 
12488
- .s-button.s-solid.s-default:not([data-disabled])[data-selected] {
12494
+ .s-button[data-mode='default'][data-tone='default']:not([data-disabled])[data-selected] {
12489
12495
  --color-bg: var(--color-solid-default-bg-2);
12490
12496
  --color-border: var(--color-solid-default-border-3);
12497
+ --color-code-bg: var(--color-solid-default-bg-3);
12498
+ --color-code-fg: var(--color-solid-default-fg-4);
12491
12499
  --color-fg: var(--color-solid-default-fg-0);
12492
12500
  --color-muted-bg: var(--color-solid-default-bg-3);
12493
12501
  --color-muted-fg: var(--color-solid-default-fg-4);
12494
12502
  }
12495
12503
 
12496
- .s-button.s-solid.s-default[data-disabled] {
12504
+ .s-button[data-mode='default'][data-tone='default'][data-disabled] {
12497
12505
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12498
12506
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12499
12507
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12512,42 +12520,50 @@
12512
12520
  --color-muted-fg: var(--color-tinted-default-border-4);
12513
12521
  }
12514
12522
 
12515
- .s-button.s-ghost.s-default {
12523
+ .s-button[data-mode='ghost'][data-tone='default'] {
12516
12524
  --color-bg: var(--color-tinted-default-bg-1);
12517
- --color-border: var(--color-tinted-default-border-0);
12525
+ --color-border: var(--color-tinted-default-border-1);
12518
12526
  --color-fg: var(--color-tinted-default-fg-2);
12527
+ --color-code-bg: var(--color-tinted-default-bg-2);
12528
+ --color-code-fg: var(--color-tinted-default-fg-4);
12519
12529
  --color-muted-bg: var(--color-tinted-default-bg-2);
12520
12530
  --color-muted-fg: var(--color-tinted-default-fg-4);
12521
12531
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12522
12532
  }
12523
12533
 
12524
- .s-button.s-ghost.s-default:not([data-disabled]):hover {
12534
+ .s-button[data-mode='ghost'][data-tone='default']:not([data-disabled]):hover {
12525
12535
  --color-bg: var(--color-tinted-default-bg-2);
12526
- --color-border: var(--color-tinted-default-border-1);
12536
+ --color-border: var(--color-tinted-default-border-2);
12537
+ --color-code-bg: var(--color-tinted-default-bg-3);
12538
+ --color-code-fg: var(--color-tinted-default-fg-3);
12527
12539
  --color-fg: var(--color-tinted-default-fg-1);
12528
12540
  --color-muted-bg: var(--color-tinted-default-bg-3);
12529
12541
  --color-muted-fg: var(--color-tinted-default-fg-3);
12530
12542
  }
12531
12543
 
12532
- .s-button.s-ghost.s-default:not([data-disabled]):active {
12544
+ .s-button[data-mode='ghost'][data-tone='default']:not([data-disabled]):active {
12533
12545
  --color-bg: var(--color-tinted-default-bg-3);
12534
- --color-border: var(--color-tinted-default-border-2);
12546
+ --color-border: var(--color-tinted-default-border-3);
12547
+ --color-code-bg: var(--color-tinted-default-bg-4);
12548
+ --color-code-fg: var(--color-tinted-default-fg-3);
12535
12549
  --color-fg: var(--color-tinted-default-fg-1);
12536
12550
  --color-muted-bg: var(--color-tinted-default-bg-4);
12537
12551
  --color-muted-fg: var(--color-tinted-default-fg-3);
12538
12552
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12539
12553
  }
12540
12554
 
12541
- .s-button.s-ghost.s-default:not([data-disabled])[data-selected] {
12555
+ .s-button[data-mode='ghost'][data-tone='default']:not([data-disabled])[data-selected] {
12542
12556
  --color-bg: var(--color-tinted-default-bg-3);
12543
- --color-border: var(--color-tinted-default-border-2);
12557
+ --color-border: var(--color-tinted-default-border-3);
12558
+ --color-code-bg: var(--color-tinted-default-bg-4);
12559
+ --color-code-fg: var(--color-tinted-default-fg-3);
12544
12560
  --color-fg: var(--color-tinted-default-fg-1);
12545
12561
  --color-muted-bg: var(--color-tinted-default-bg-4);
12546
12562
  --color-muted-fg: var(--color-tinted-default-fg-3);
12547
12563
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12548
12564
  }
12549
12565
 
12550
- .s-button.s-ghost.s-default[data-disabled] {
12566
+ .s-button[data-mode='ghost'][data-tone='default'][data-disabled] {
12551
12567
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12552
12568
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12553
12569
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12566,7 +12582,7 @@
12566
12582
  --color-muted-fg: var(--color-tinted-default-border-3);
12567
12583
  }
12568
12584
 
12569
- .s-button.s-tinted.s-default {
12585
+ .s-button[data-mode='bleed'][data-tone='default'] {
12570
12586
  box-shadow: none;
12571
12587
  --color-bg: var(--color-tinted-default-bg-0);
12572
12588
  --color-border: var(--color-tinted-default-border-1);
@@ -12576,7 +12592,7 @@
12576
12592
  --button-box-shadow: none;
12577
12593
  }
12578
12594
 
12579
- .s-button.s-tinted.s-default:not([data-disabled]):hover {
12595
+ .s-button[data-mode='bleed'][data-tone='default']:not([data-disabled]):hover {
12580
12596
  --color-bg: var(--color-tinted-default-bg-1);
12581
12597
  --color-border: var(--color-tinted-default-border-2);
12582
12598
  --color-fg: var(--color-tinted-default-fg-1);
@@ -12584,7 +12600,7 @@
12584
12600
  --color-muted-fg: var(--color-tinted-default-fg-3);
12585
12601
  }
12586
12602
 
12587
- .s-button.s-tinted.s-default:not([data-disabled]):active {
12603
+ .s-button[data-mode='bleed'][data-tone='default']:not([data-disabled]):active {
12588
12604
  --color-bg: var(--color-tinted-default-bg-2);
12589
12605
  --color-border: var(--color-tinted-default-border-3);
12590
12606
  --color-fg: var(--color-tinted-default-fg-1);
@@ -12592,7 +12608,7 @@
12592
12608
  --color-muted-fg: var(--color-tinted-default-fg-3);
12593
12609
  }
12594
12610
 
12595
- .s-button.s-tinted.s-default:not([data-disabled])[data-selected] {
12611
+ .s-button[data-mode='bleed'][data-tone='default']:not([data-disabled])[data-selected] {
12596
12612
  --color-bg: var(--color-tinted-default-bg-2);
12597
12613
  --color-border: var(--color-tinted-default-border-3);
12598
12614
  --color-fg: var(--color-tinted-default-fg-1);
@@ -12600,7 +12616,7 @@
12600
12616
  --color-muted-fg: var(--color-tinted-default-fg-3);
12601
12617
  }
12602
12618
 
12603
- .s-button.s-tinted.s-default[data-disabled] {
12619
+ .s-button[data-mode='bleed'][data-tone='default'][data-disabled] {
12604
12620
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12605
12621
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12606
12622
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12619,40 +12635,48 @@
12619
12635
  --color-muted-fg: var(--color-tinted-default-border-3);
12620
12636
  }
12621
12637
 
12622
- .s-button.s-solid.s-neutral {
12638
+ .s-button[data-mode='default'][data-tone='neutral'] {
12623
12639
  --color-bg: var(--color-solid-neutral-bg-0);
12624
12640
  --color-border: var(--color-solid-neutral-border-1);
12641
+ --color-code-bg: var(--color-solid-neutral-bg-1);
12642
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12625
12643
  --color-fg: var(--color-solid-neutral-fg-0);
12626
12644
  --color-muted-bg: var(--color-solid-neutral-bg-1);
12627
12645
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12628
12646
  --button-box-shadow: none;
12629
12647
  }
12630
12648
 
12631
- .s-button.s-solid.s-neutral:not([data-disabled]):hover {
12649
+ .s-button[data-mode='default'][data-tone='neutral']:not([data-disabled]):hover {
12632
12650
  --color-bg: var(--color-solid-neutral-bg-1);
12633
12651
  --color-border: var(--color-solid-neutral-border-2);
12652
+ --color-code-bg: var(--color-solid-neutral-bg-2);
12653
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12634
12654
  --color-fg: var(--color-solid-neutral-fg-0);
12635
12655
  --color-muted-bg: var(--color-solid-neutral-bg-2);
12636
12656
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12637
12657
  }
12638
12658
 
12639
- .s-button.s-solid.s-neutral:not([data-disabled]):active {
12659
+ .s-button[data-mode='default'][data-tone='neutral']:not([data-disabled]):active {
12640
12660
  --color-bg: var(--color-solid-neutral-bg-2);
12641
12661
  --color-border: var(--color-solid-neutral-border-3);
12662
+ --color-code-bg: var(--color-solid-neutral-bg-3);
12663
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12642
12664
  --color-fg: var(--color-solid-neutral-fg-0);
12643
12665
  --color-muted-bg: var(--color-solid-neutral-bg-3);
12644
12666
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12645
12667
  }
12646
12668
 
12647
- .s-button.s-solid.s-neutral:not([data-disabled])[data-selected] {
12669
+ .s-button[data-mode='default'][data-tone='neutral']:not([data-disabled])[data-selected] {
12648
12670
  --color-bg: var(--color-solid-neutral-bg-2);
12649
12671
  --color-border: var(--color-solid-neutral-border-3);
12672
+ --color-code-bg: var(--color-solid-neutral-bg-3);
12673
+ --color-code-fg: var(--color-solid-neutral-fg-4);
12650
12674
  --color-fg: var(--color-solid-neutral-fg-0);
12651
12675
  --color-muted-bg: var(--color-solid-neutral-bg-3);
12652
12676
  --color-muted-fg: var(--color-solid-neutral-fg-4);
12653
12677
  }
12654
12678
 
12655
- .s-button.s-solid.s-neutral[data-disabled] {
12679
+ .s-button[data-mode='default'][data-tone='neutral'][data-disabled] {
12656
12680
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12657
12681
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12658
12682
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12671,42 +12695,50 @@
12671
12695
  --color-muted-fg: var(--color-tinted-default-border-4);
12672
12696
  }
12673
12697
 
12674
- .s-button.s-ghost.s-neutral {
12698
+ .s-button[data-mode='ghost'][data-tone='neutral'] {
12675
12699
  --color-bg: var(--color-tinted-neutral-bg-1);
12676
- --color-border: var(--color-tinted-neutral-border-0);
12700
+ --color-border: var(--color-tinted-neutral-border-1);
12677
12701
  --color-fg: var(--color-tinted-neutral-fg-2);
12702
+ --color-code-bg: var(--color-tinted-neutral-bg-2);
12703
+ --color-code-fg: var(--color-tinted-neutral-fg-4);
12678
12704
  --color-muted-bg: var(--color-tinted-neutral-bg-2);
12679
12705
  --color-muted-fg: var(--color-tinted-neutral-fg-4);
12680
12706
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12681
12707
  }
12682
12708
 
12683
- .s-button.s-ghost.s-neutral:not([data-disabled]):hover {
12709
+ .s-button[data-mode='ghost'][data-tone='neutral']:not([data-disabled]):hover {
12684
12710
  --color-bg: var(--color-tinted-neutral-bg-2);
12685
- --color-border: var(--color-tinted-neutral-border-1);
12711
+ --color-border: var(--color-tinted-neutral-border-2);
12712
+ --color-code-bg: var(--color-tinted-neutral-bg-3);
12713
+ --color-code-fg: var(--color-tinted-neutral-fg-3);
12686
12714
  --color-fg: var(--color-tinted-neutral-fg-1);
12687
12715
  --color-muted-bg: var(--color-tinted-neutral-bg-3);
12688
12716
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12689
12717
  }
12690
12718
 
12691
- .s-button.s-ghost.s-neutral:not([data-disabled]):active {
12719
+ .s-button[data-mode='ghost'][data-tone='neutral']:not([data-disabled]):active {
12692
12720
  --color-bg: var(--color-tinted-neutral-bg-3);
12693
- --color-border: var(--color-tinted-neutral-border-2);
12721
+ --color-border: var(--color-tinted-neutral-border-3);
12722
+ --color-code-bg: var(--color-tinted-neutral-bg-4);
12723
+ --color-code-fg: var(--color-tinted-neutral-fg-3);
12694
12724
  --color-fg: var(--color-tinted-neutral-fg-1);
12695
12725
  --color-muted-bg: var(--color-tinted-neutral-bg-4);
12696
12726
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12697
12727
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12698
12728
  }
12699
12729
 
12700
- .s-button.s-ghost.s-neutral:not([data-disabled])[data-selected] {
12730
+ .s-button[data-mode='ghost'][data-tone='neutral']:not([data-disabled])[data-selected] {
12701
12731
  --color-bg: var(--color-tinted-neutral-bg-3);
12702
- --color-border: var(--color-tinted-neutral-border-2);
12732
+ --color-border: var(--color-tinted-neutral-border-3);
12733
+ --color-code-bg: var(--color-tinted-neutral-bg-4);
12734
+ --color-code-fg: var(--color-tinted-neutral-fg-3);
12703
12735
  --color-fg: var(--color-tinted-neutral-fg-1);
12704
12736
  --color-muted-bg: var(--color-tinted-neutral-bg-4);
12705
12737
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12706
12738
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12707
12739
  }
12708
12740
 
12709
- .s-button.s-ghost.s-neutral[data-disabled] {
12741
+ .s-button[data-mode='ghost'][data-tone='neutral'][data-disabled] {
12710
12742
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12711
12743
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12712
12744
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12725,7 +12757,7 @@
12725
12757
  --color-muted-fg: var(--color-tinted-default-border-3);
12726
12758
  }
12727
12759
 
12728
- .s-button.s-tinted.s-neutral {
12760
+ .s-button[data-mode='bleed'][data-tone='neutral'] {
12729
12761
  box-shadow: none;
12730
12762
  --color-bg: var(--color-tinted-neutral-bg-0);
12731
12763
  --color-border: var(--color-tinted-neutral-border-1);
@@ -12735,7 +12767,7 @@
12735
12767
  --button-box-shadow: none;
12736
12768
  }
12737
12769
 
12738
- .s-button.s-tinted.s-neutral:not([data-disabled]):hover {
12770
+ .s-button[data-mode='bleed'][data-tone='neutral']:not([data-disabled]):hover {
12739
12771
  --color-bg: var(--color-tinted-neutral-bg-1);
12740
12772
  --color-border: var(--color-tinted-neutral-border-2);
12741
12773
  --color-fg: var(--color-tinted-neutral-fg-1);
@@ -12743,7 +12775,7 @@
12743
12775
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12744
12776
  }
12745
12777
 
12746
- .s-button.s-tinted.s-neutral:not([data-disabled]):active {
12778
+ .s-button[data-mode='bleed'][data-tone='neutral']:not([data-disabled]):active {
12747
12779
  --color-bg: var(--color-tinted-neutral-bg-2);
12748
12780
  --color-border: var(--color-tinted-neutral-border-3);
12749
12781
  --color-fg: var(--color-tinted-neutral-fg-1);
@@ -12751,7 +12783,7 @@
12751
12783
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12752
12784
  }
12753
12785
 
12754
- .s-button.s-tinted.s-neutral:not([data-disabled])[data-selected] {
12786
+ .s-button[data-mode='bleed'][data-tone='neutral']:not([data-disabled])[data-selected] {
12755
12787
  --color-bg: var(--color-tinted-neutral-bg-2);
12756
12788
  --color-border: var(--color-tinted-neutral-border-3);
12757
12789
  --color-fg: var(--color-tinted-neutral-fg-1);
@@ -12759,7 +12791,7 @@
12759
12791
  --color-muted-fg: var(--color-tinted-neutral-fg-3);
12760
12792
  }
12761
12793
 
12762
- .s-button.s-tinted.s-neutral[data-disabled] {
12794
+ .s-button[data-mode='bleed'][data-tone='neutral'][data-disabled] {
12763
12795
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12764
12796
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12765
12797
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12778,40 +12810,48 @@
12778
12810
  --color-muted-fg: var(--color-tinted-default-border-3);
12779
12811
  }
12780
12812
 
12781
- .s-button.s-solid.s-accent {
12813
+ .s-button[data-mode='default'][data-tone='primary'] {
12782
12814
  --color-bg: var(--color-solid-primary-bg-0);
12783
12815
  --color-border: var(--color-solid-primary-border-1);
12816
+ --color-code-bg: var(--color-solid-primary-bg-1);
12817
+ --color-code-fg: var(--color-solid-primary-fg-4);
12784
12818
  --color-fg: var(--color-solid-primary-fg-0);
12785
12819
  --color-muted-bg: var(--color-solid-primary-bg-1);
12786
12820
  --color-muted-fg: var(--color-solid-primary-fg-4);
12787
12821
  --button-box-shadow: none;
12788
12822
  }
12789
12823
 
12790
- .s-button.s-solid.s-accent:not([data-disabled]):hover {
12824
+ .s-button[data-mode='default'][data-tone='primary']:not([data-disabled]):hover {
12791
12825
  --color-bg: var(--color-solid-primary-bg-1);
12792
12826
  --color-border: var(--color-solid-primary-border-2);
12827
+ --color-code-bg: var(--color-solid-primary-bg-2);
12828
+ --color-code-fg: var(--color-solid-primary-fg-4);
12793
12829
  --color-fg: var(--color-solid-primary-fg-0);
12794
12830
  --color-muted-bg: var(--color-solid-primary-bg-2);
12795
12831
  --color-muted-fg: var(--color-solid-primary-fg-4);
12796
12832
  }
12797
12833
 
12798
- .s-button.s-solid.s-accent:not([data-disabled]):active {
12834
+ .s-button[data-mode='default'][data-tone='primary']:not([data-disabled]):active {
12799
12835
  --color-bg: var(--color-solid-primary-bg-2);
12800
12836
  --color-border: var(--color-solid-primary-border-3);
12837
+ --color-code-bg: var(--color-solid-primary-bg-3);
12838
+ --color-code-fg: var(--color-solid-primary-fg-4);
12801
12839
  --color-fg: var(--color-solid-primary-fg-0);
12802
12840
  --color-muted-bg: var(--color-solid-primary-bg-3);
12803
12841
  --color-muted-fg: var(--color-solid-primary-fg-4);
12804
12842
  }
12805
12843
 
12806
- .s-button.s-solid.s-accent:not([data-disabled])[data-selected] {
12844
+ .s-button[data-mode='default'][data-tone='primary']:not([data-disabled])[data-selected] {
12807
12845
  --color-bg: var(--color-solid-primary-bg-2);
12808
12846
  --color-border: var(--color-solid-primary-border-3);
12847
+ --color-code-bg: var(--color-solid-primary-bg-3);
12848
+ --color-code-fg: var(--color-solid-primary-fg-4);
12809
12849
  --color-fg: var(--color-solid-primary-fg-0);
12810
12850
  --color-muted-bg: var(--color-solid-primary-bg-3);
12811
12851
  --color-muted-fg: var(--color-solid-primary-fg-4);
12812
12852
  }
12813
12853
 
12814
- .s-button.s-solid.s-accent[data-disabled] {
12854
+ .s-button[data-mode='default'][data-tone='primary'][data-disabled] {
12815
12855
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12816
12856
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12817
12857
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12830,42 +12870,50 @@
12830
12870
  --color-muted-fg: var(--color-tinted-default-border-4);
12831
12871
  }
12832
12872
 
12833
- .s-button.s-ghost.s-accent {
12873
+ .s-button[data-mode='ghost'][data-tone='primary'] {
12834
12874
  --color-bg: var(--color-tinted-primary-bg-1);
12835
- --color-border: var(--color-tinted-primary-border-0);
12875
+ --color-border: var(--color-tinted-primary-border-1);
12836
12876
  --color-fg: var(--color-tinted-primary-fg-2);
12877
+ --color-code-bg: var(--color-tinted-primary-bg-2);
12878
+ --color-code-fg: var(--color-tinted-primary-fg-4);
12837
12879
  --color-muted-bg: var(--color-tinted-primary-bg-2);
12838
12880
  --color-muted-fg: var(--color-tinted-primary-fg-4);
12839
12881
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12840
12882
  }
12841
12883
 
12842
- .s-button.s-ghost.s-accent:not([data-disabled]):hover {
12884
+ .s-button[data-mode='ghost'][data-tone='primary']:not([data-disabled]):hover {
12843
12885
  --color-bg: var(--color-tinted-primary-bg-2);
12844
- --color-border: var(--color-tinted-primary-border-1);
12886
+ --color-border: var(--color-tinted-primary-border-2);
12887
+ --color-code-bg: var(--color-tinted-primary-bg-3);
12888
+ --color-code-fg: var(--color-tinted-primary-fg-3);
12845
12889
  --color-fg: var(--color-tinted-primary-fg-1);
12846
12890
  --color-muted-bg: var(--color-tinted-primary-bg-3);
12847
12891
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12848
12892
  }
12849
12893
 
12850
- .s-button.s-ghost.s-accent:not([data-disabled]):active {
12894
+ .s-button[data-mode='ghost'][data-tone='primary']:not([data-disabled]):active {
12851
12895
  --color-bg: var(--color-tinted-primary-bg-3);
12852
- --color-border: var(--color-tinted-primary-border-2);
12896
+ --color-border: var(--color-tinted-primary-border-3);
12897
+ --color-code-bg: var(--color-tinted-primary-bg-4);
12898
+ --color-code-fg: var(--color-tinted-primary-fg-3);
12853
12899
  --color-fg: var(--color-tinted-primary-fg-1);
12854
12900
  --color-muted-bg: var(--color-tinted-primary-bg-4);
12855
12901
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12856
12902
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12857
12903
  }
12858
12904
 
12859
- .s-button.s-ghost.s-accent:not([data-disabled])[data-selected] {
12905
+ .s-button[data-mode='ghost'][data-tone='primary']:not([data-disabled])[data-selected] {
12860
12906
  --color-bg: var(--color-tinted-primary-bg-3);
12861
- --color-border: var(--color-tinted-primary-border-2);
12907
+ --color-border: var(--color-tinted-primary-border-3);
12908
+ --color-code-bg: var(--color-tinted-primary-bg-4);
12909
+ --color-code-fg: var(--color-tinted-primary-fg-3);
12862
12910
  --color-fg: var(--color-tinted-primary-fg-1);
12863
12911
  --color-muted-bg: var(--color-tinted-primary-bg-4);
12864
12912
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12865
12913
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12866
12914
  }
12867
12915
 
12868
- .s-button.s-ghost.s-accent[data-disabled] {
12916
+ .s-button[data-mode='ghost'][data-tone='primary'][data-disabled] {
12869
12917
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12870
12918
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12871
12919
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12884,7 +12932,7 @@
12884
12932
  --color-muted-fg: var(--color-tinted-default-border-3);
12885
12933
  }
12886
12934
 
12887
- .s-button.s-tinted.s-accent {
12935
+ .s-button[data-mode='bleed'][data-tone='primary'] {
12888
12936
  box-shadow: none;
12889
12937
  --color-bg: var(--color-tinted-primary-bg-0);
12890
12938
  --color-border: var(--color-tinted-primary-border-1);
@@ -12894,7 +12942,7 @@
12894
12942
  --button-box-shadow: none;
12895
12943
  }
12896
12944
 
12897
- .s-button.s-tinted.s-accent:not([data-disabled]):hover {
12945
+ .s-button[data-mode='bleed'][data-tone='primary']:not([data-disabled]):hover {
12898
12946
  --color-bg: var(--color-tinted-primary-bg-1);
12899
12947
  --color-border: var(--color-tinted-primary-border-2);
12900
12948
  --color-fg: var(--color-tinted-primary-fg-1);
@@ -12902,7 +12950,7 @@
12902
12950
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12903
12951
  }
12904
12952
 
12905
- .s-button.s-tinted.s-accent:not([data-disabled]):active {
12953
+ .s-button[data-mode='bleed'][data-tone='primary']:not([data-disabled]):active {
12906
12954
  --color-bg: var(--color-tinted-primary-bg-2);
12907
12955
  --color-border: var(--color-tinted-primary-border-3);
12908
12956
  --color-fg: var(--color-tinted-primary-fg-1);
@@ -12910,7 +12958,7 @@
12910
12958
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12911
12959
  }
12912
12960
 
12913
- .s-button.s-tinted.s-accent:not([data-disabled])[data-selected] {
12961
+ .s-button[data-mode='bleed'][data-tone='primary']:not([data-disabled])[data-selected] {
12914
12962
  --color-bg: var(--color-tinted-primary-bg-2);
12915
12963
  --color-border: var(--color-tinted-primary-border-3);
12916
12964
  --color-fg: var(--color-tinted-primary-fg-1);
@@ -12918,7 +12966,7 @@
12918
12966
  --color-muted-fg: var(--color-tinted-primary-fg-3);
12919
12967
  }
12920
12968
 
12921
- .s-button.s-tinted.s-accent[data-disabled] {
12969
+ .s-button[data-mode='bleed'][data-tone='primary'][data-disabled] {
12922
12970
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
12923
12971
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
12924
12972
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -12937,40 +12985,48 @@
12937
12985
  --color-muted-fg: var(--color-tinted-default-border-3);
12938
12986
  }
12939
12987
 
12940
- .s-button.s-solid.s-suggest {
12988
+ .s-button[data-mode='default'][data-tone='suggest'] {
12941
12989
  --color-bg: var(--color-solid-suggest-bg-0);
12942
12990
  --color-border: var(--color-solid-suggest-border-1);
12991
+ --color-code-bg: var(--color-solid-suggest-bg-1);
12992
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12943
12993
  --color-fg: var(--color-solid-suggest-fg-0);
12944
12994
  --color-muted-bg: var(--color-solid-suggest-bg-1);
12945
12995
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12946
12996
  --button-box-shadow: none;
12947
12997
  }
12948
12998
 
12949
- .s-button.s-solid.s-suggest:not([data-disabled]):hover {
12999
+ .s-button[data-mode='default'][data-tone='suggest']:not([data-disabled]):hover {
12950
13000
  --color-bg: var(--color-solid-suggest-bg-1);
12951
13001
  --color-border: var(--color-solid-suggest-border-2);
13002
+ --color-code-bg: var(--color-solid-suggest-bg-2);
13003
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12952
13004
  --color-fg: var(--color-solid-suggest-fg-0);
12953
13005
  --color-muted-bg: var(--color-solid-suggest-bg-2);
12954
13006
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12955
13007
  }
12956
13008
 
12957
- .s-button.s-solid.s-suggest:not([data-disabled]):active {
13009
+ .s-button[data-mode='default'][data-tone='suggest']:not([data-disabled]):active {
12958
13010
  --color-bg: var(--color-solid-suggest-bg-2);
12959
13011
  --color-border: var(--color-solid-suggest-border-3);
13012
+ --color-code-bg: var(--color-solid-suggest-bg-3);
13013
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12960
13014
  --color-fg: var(--color-solid-suggest-fg-0);
12961
13015
  --color-muted-bg: var(--color-solid-suggest-bg-3);
12962
13016
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12963
13017
  }
12964
13018
 
12965
- .s-button.s-solid.s-suggest:not([data-disabled])[data-selected] {
13019
+ .s-button[data-mode='default'][data-tone='suggest']:not([data-disabled])[data-selected] {
12966
13020
  --color-bg: var(--color-solid-suggest-bg-2);
12967
13021
  --color-border: var(--color-solid-suggest-border-3);
13022
+ --color-code-bg: var(--color-solid-suggest-bg-3);
13023
+ --color-code-fg: var(--color-solid-suggest-fg-4);
12968
13024
  --color-fg: var(--color-solid-suggest-fg-0);
12969
13025
  --color-muted-bg: var(--color-solid-suggest-bg-3);
12970
13026
  --color-muted-fg: var(--color-solid-suggest-fg-4);
12971
13027
  }
12972
13028
 
12973
- .s-button.s-solid.s-suggest[data-disabled] {
13029
+ .s-button[data-mode='default'][data-tone='suggest'][data-disabled] {
12974
13030
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
12975
13031
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
12976
13032
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -12989,42 +13045,50 @@
12989
13045
  --color-muted-fg: var(--color-tinted-default-border-4);
12990
13046
  }
12991
13047
 
12992
- .s-button.s-ghost.s-suggest {
13048
+ .s-button[data-mode='ghost'][data-tone='suggest'] {
12993
13049
  --color-bg: var(--color-tinted-suggest-bg-1);
12994
- --color-border: var(--color-tinted-suggest-border-0);
13050
+ --color-border: var(--color-tinted-suggest-border-1);
12995
13051
  --color-fg: var(--color-tinted-suggest-fg-2);
13052
+ --color-code-bg: var(--color-tinted-suggest-bg-2);
13053
+ --color-code-fg: var(--color-tinted-suggest-fg-4);
12996
13054
  --color-muted-bg: var(--color-tinted-suggest-bg-2);
12997
13055
  --color-muted-fg: var(--color-tinted-suggest-fg-4);
12998
13056
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12999
13057
  }
13000
13058
 
13001
- .s-button.s-ghost.s-suggest:not([data-disabled]):hover {
13059
+ .s-button[data-mode='ghost'][data-tone='suggest']:not([data-disabled]):hover {
13002
13060
  --color-bg: var(--color-tinted-suggest-bg-2);
13003
- --color-border: var(--color-tinted-suggest-border-1);
13061
+ --color-border: var(--color-tinted-suggest-border-2);
13062
+ --color-code-bg: var(--color-tinted-suggest-bg-3);
13063
+ --color-code-fg: var(--color-tinted-suggest-fg-3);
13004
13064
  --color-fg: var(--color-tinted-suggest-fg-1);
13005
13065
  --color-muted-bg: var(--color-tinted-suggest-bg-3);
13006
13066
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
13007
13067
  }
13008
13068
 
13009
- .s-button.s-ghost.s-suggest:not([data-disabled]):active {
13069
+ .s-button[data-mode='ghost'][data-tone='suggest']:not([data-disabled]):active {
13010
13070
  --color-bg: var(--color-tinted-suggest-bg-3);
13011
- --color-border: var(--color-tinted-suggest-border-2);
13071
+ --color-border: var(--color-tinted-suggest-border-3);
13072
+ --color-code-bg: var(--color-tinted-suggest-bg-4);
13073
+ --color-code-fg: var(--color-tinted-suggest-fg-3);
13012
13074
  --color-fg: var(--color-tinted-suggest-fg-1);
13013
13075
  --color-muted-bg: var(--color-tinted-suggest-bg-4);
13014
13076
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
13015
13077
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13016
13078
  }
13017
13079
 
13018
- .s-button.s-ghost.s-suggest:not([data-disabled])[data-selected] {
13080
+ .s-button[data-mode='ghost'][data-tone='suggest']:not([data-disabled])[data-selected] {
13019
13081
  --color-bg: var(--color-tinted-suggest-bg-3);
13020
- --color-border: var(--color-tinted-suggest-border-2);
13082
+ --color-border: var(--color-tinted-suggest-border-3);
13083
+ --color-code-bg: var(--color-tinted-suggest-bg-4);
13084
+ --color-code-fg: var(--color-tinted-suggest-fg-3);
13021
13085
  --color-fg: var(--color-tinted-suggest-fg-1);
13022
13086
  --color-muted-bg: var(--color-tinted-suggest-bg-4);
13023
13087
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
13024
13088
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13025
13089
  }
13026
13090
 
13027
- .s-button.s-ghost.s-suggest[data-disabled] {
13091
+ .s-button[data-mode='ghost'][data-tone='suggest'][data-disabled] {
13028
13092
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13029
13093
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13030
13094
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13043,7 +13107,7 @@
13043
13107
  --color-muted-fg: var(--color-tinted-default-border-3);
13044
13108
  }
13045
13109
 
13046
- .s-button.s-tinted.s-suggest {
13110
+ .s-button[data-mode='bleed'][data-tone='suggest'] {
13047
13111
  box-shadow: none;
13048
13112
  --color-bg: var(--color-tinted-suggest-bg-0);
13049
13113
  --color-border: var(--color-tinted-suggest-border-1);
@@ -13053,7 +13117,7 @@
13053
13117
  --button-box-shadow: none;
13054
13118
  }
13055
13119
 
13056
- .s-button.s-tinted.s-suggest:not([data-disabled]):hover {
13120
+ .s-button[data-mode='bleed'][data-tone='suggest']:not([data-disabled]):hover {
13057
13121
  --color-bg: var(--color-tinted-suggest-bg-1);
13058
13122
  --color-border: var(--color-tinted-suggest-border-2);
13059
13123
  --color-fg: var(--color-tinted-suggest-fg-1);
@@ -13061,7 +13125,7 @@
13061
13125
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
13062
13126
  }
13063
13127
 
13064
- .s-button.s-tinted.s-suggest:not([data-disabled]):active {
13128
+ .s-button[data-mode='bleed'][data-tone='suggest']:not([data-disabled]):active {
13065
13129
  --color-bg: var(--color-tinted-suggest-bg-2);
13066
13130
  --color-border: var(--color-tinted-suggest-border-3);
13067
13131
  --color-fg: var(--color-tinted-suggest-fg-1);
@@ -13069,7 +13133,7 @@
13069
13133
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
13070
13134
  }
13071
13135
 
13072
- .s-button.s-tinted.s-suggest:not([data-disabled])[data-selected] {
13136
+ .s-button[data-mode='bleed'][data-tone='suggest']:not([data-disabled])[data-selected] {
13073
13137
  --color-bg: var(--color-tinted-suggest-bg-2);
13074
13138
  --color-border: var(--color-tinted-suggest-border-3);
13075
13139
  --color-fg: var(--color-tinted-suggest-fg-1);
@@ -13077,7 +13141,7 @@
13077
13141
  --color-muted-fg: var(--color-tinted-suggest-fg-3);
13078
13142
  }
13079
13143
 
13080
- .s-button.s-tinted.s-suggest[data-disabled] {
13144
+ .s-button[data-mode='bleed'][data-tone='suggest'][data-disabled] {
13081
13145
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13082
13146
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13083
13147
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13096,40 +13160,48 @@
13096
13160
  --color-muted-fg: var(--color-tinted-default-border-3);
13097
13161
  }
13098
13162
 
13099
- .s-button.s-solid.s-positive {
13163
+ .s-button[data-mode='default'][data-tone='positive'] {
13100
13164
  --color-bg: var(--color-solid-positive-bg-0);
13101
13165
  --color-border: var(--color-solid-positive-border-1);
13166
+ --color-code-bg: var(--color-solid-positive-bg-1);
13167
+ --color-code-fg: var(--color-solid-positive-fg-4);
13102
13168
  --color-fg: var(--color-solid-positive-fg-0);
13103
13169
  --color-muted-bg: var(--color-solid-positive-bg-1);
13104
13170
  --color-muted-fg: var(--color-solid-positive-fg-4);
13105
13171
  --button-box-shadow: none;
13106
13172
  }
13107
13173
 
13108
- .s-button.s-solid.s-positive:not([data-disabled]):hover {
13174
+ .s-button[data-mode='default'][data-tone='positive']:not([data-disabled]):hover {
13109
13175
  --color-bg: var(--color-solid-positive-bg-1);
13110
13176
  --color-border: var(--color-solid-positive-border-2);
13177
+ --color-code-bg: var(--color-solid-positive-bg-2);
13178
+ --color-code-fg: var(--color-solid-positive-fg-4);
13111
13179
  --color-fg: var(--color-solid-positive-fg-0);
13112
13180
  --color-muted-bg: var(--color-solid-positive-bg-2);
13113
13181
  --color-muted-fg: var(--color-solid-positive-fg-4);
13114
13182
  }
13115
13183
 
13116
- .s-button.s-solid.s-positive:not([data-disabled]):active {
13184
+ .s-button[data-mode='default'][data-tone='positive']:not([data-disabled]):active {
13117
13185
  --color-bg: var(--color-solid-positive-bg-2);
13118
13186
  --color-border: var(--color-solid-positive-border-3);
13187
+ --color-code-bg: var(--color-solid-positive-bg-3);
13188
+ --color-code-fg: var(--color-solid-positive-fg-4);
13119
13189
  --color-fg: var(--color-solid-positive-fg-0);
13120
13190
  --color-muted-bg: var(--color-solid-positive-bg-3);
13121
13191
  --color-muted-fg: var(--color-solid-positive-fg-4);
13122
13192
  }
13123
13193
 
13124
- .s-button.s-solid.s-positive:not([data-disabled])[data-selected] {
13194
+ .s-button[data-mode='default'][data-tone='positive']:not([data-disabled])[data-selected] {
13125
13195
  --color-bg: var(--color-solid-positive-bg-2);
13126
13196
  --color-border: var(--color-solid-positive-border-3);
13197
+ --color-code-bg: var(--color-solid-positive-bg-3);
13198
+ --color-code-fg: var(--color-solid-positive-fg-4);
13127
13199
  --color-fg: var(--color-solid-positive-fg-0);
13128
13200
  --color-muted-bg: var(--color-solid-positive-bg-3);
13129
13201
  --color-muted-fg: var(--color-solid-positive-fg-4);
13130
13202
  }
13131
13203
 
13132
- .s-button.s-solid.s-positive[data-disabled] {
13204
+ .s-button[data-mode='default'][data-tone='positive'][data-disabled] {
13133
13205
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13134
13206
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13135
13207
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -13148,42 +13220,50 @@
13148
13220
  --color-muted-fg: var(--color-tinted-default-border-4);
13149
13221
  }
13150
13222
 
13151
- .s-button.s-ghost.s-positive {
13223
+ .s-button[data-mode='ghost'][data-tone='positive'] {
13152
13224
  --color-bg: var(--color-tinted-positive-bg-1);
13153
- --color-border: var(--color-tinted-positive-border-0);
13225
+ --color-border: var(--color-tinted-positive-border-1);
13154
13226
  --color-fg: var(--color-tinted-positive-fg-2);
13227
+ --color-code-bg: var(--color-tinted-positive-bg-2);
13228
+ --color-code-fg: var(--color-tinted-positive-fg-4);
13155
13229
  --color-muted-bg: var(--color-tinted-positive-bg-2);
13156
13230
  --color-muted-fg: var(--color-tinted-positive-fg-4);
13157
13231
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13158
13232
  }
13159
13233
 
13160
- .s-button.s-ghost.s-positive:not([data-disabled]):hover {
13234
+ .s-button[data-mode='ghost'][data-tone='positive']:not([data-disabled]):hover {
13161
13235
  --color-bg: var(--color-tinted-positive-bg-2);
13162
- --color-border: var(--color-tinted-positive-border-1);
13236
+ --color-border: var(--color-tinted-positive-border-2);
13237
+ --color-code-bg: var(--color-tinted-positive-bg-3);
13238
+ --color-code-fg: var(--color-tinted-positive-fg-3);
13163
13239
  --color-fg: var(--color-tinted-positive-fg-1);
13164
13240
  --color-muted-bg: var(--color-tinted-positive-bg-3);
13165
13241
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13166
13242
  }
13167
13243
 
13168
- .s-button.s-ghost.s-positive:not([data-disabled]):active {
13244
+ .s-button[data-mode='ghost'][data-tone='positive']:not([data-disabled]):active {
13169
13245
  --color-bg: var(--color-tinted-positive-bg-3);
13170
- --color-border: var(--color-tinted-positive-border-2);
13246
+ --color-border: var(--color-tinted-positive-border-3);
13247
+ --color-code-bg: var(--color-tinted-positive-bg-4);
13248
+ --color-code-fg: var(--color-tinted-positive-fg-3);
13171
13249
  --color-fg: var(--color-tinted-positive-fg-1);
13172
13250
  --color-muted-bg: var(--color-tinted-positive-bg-4);
13173
13251
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13174
13252
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13175
13253
  }
13176
13254
 
13177
- .s-button.s-ghost.s-positive:not([data-disabled])[data-selected] {
13255
+ .s-button[data-mode='ghost'][data-tone='positive']:not([data-disabled])[data-selected] {
13178
13256
  --color-bg: var(--color-tinted-positive-bg-3);
13179
- --color-border: var(--color-tinted-positive-border-2);
13257
+ --color-border: var(--color-tinted-positive-border-3);
13258
+ --color-code-bg: var(--color-tinted-positive-bg-4);
13259
+ --color-code-fg: var(--color-tinted-positive-fg-3);
13180
13260
  --color-fg: var(--color-tinted-positive-fg-1);
13181
13261
  --color-muted-bg: var(--color-tinted-positive-bg-4);
13182
13262
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13183
13263
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13184
13264
  }
13185
13265
 
13186
- .s-button.s-ghost.s-positive[data-disabled] {
13266
+ .s-button[data-mode='ghost'][data-tone='positive'][data-disabled] {
13187
13267
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13188
13268
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13189
13269
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13202,7 +13282,7 @@
13202
13282
  --color-muted-fg: var(--color-tinted-default-border-3);
13203
13283
  }
13204
13284
 
13205
- .s-button.s-tinted.s-positive {
13285
+ .s-button[data-mode='bleed'][data-tone='positive'] {
13206
13286
  box-shadow: none;
13207
13287
  --color-bg: var(--color-tinted-positive-bg-0);
13208
13288
  --color-border: var(--color-tinted-positive-border-1);
@@ -13212,7 +13292,7 @@
13212
13292
  --button-box-shadow: none;
13213
13293
  }
13214
13294
 
13215
- .s-button.s-tinted.s-positive:not([data-disabled]):hover {
13295
+ .s-button[data-mode='bleed'][data-tone='positive']:not([data-disabled]):hover {
13216
13296
  --color-bg: var(--color-tinted-positive-bg-1);
13217
13297
  --color-border: var(--color-tinted-positive-border-2);
13218
13298
  --color-fg: var(--color-tinted-positive-fg-1);
@@ -13220,7 +13300,7 @@
13220
13300
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13221
13301
  }
13222
13302
 
13223
- .s-button.s-tinted.s-positive:not([data-disabled]):active {
13303
+ .s-button[data-mode='bleed'][data-tone='positive']:not([data-disabled]):active {
13224
13304
  --color-bg: var(--color-tinted-positive-bg-2);
13225
13305
  --color-border: var(--color-tinted-positive-border-3);
13226
13306
  --color-fg: var(--color-tinted-positive-fg-1);
@@ -13228,7 +13308,7 @@
13228
13308
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13229
13309
  }
13230
13310
 
13231
- .s-button.s-tinted.s-positive:not([data-disabled])[data-selected] {
13311
+ .s-button[data-mode='bleed'][data-tone='positive']:not([data-disabled])[data-selected] {
13232
13312
  --color-bg: var(--color-tinted-positive-bg-2);
13233
13313
  --color-border: var(--color-tinted-positive-border-3);
13234
13314
  --color-fg: var(--color-tinted-positive-fg-1);
@@ -13236,7 +13316,7 @@
13236
13316
  --color-muted-fg: var(--color-tinted-positive-fg-3);
13237
13317
  }
13238
13318
 
13239
- .s-button.s-tinted.s-positive[data-disabled] {
13319
+ .s-button[data-mode='bleed'][data-tone='positive'][data-disabled] {
13240
13320
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13241
13321
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13242
13322
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13255,40 +13335,48 @@
13255
13335
  --color-muted-fg: var(--color-tinted-default-border-3);
13256
13336
  }
13257
13337
 
13258
- .s-button.s-solid.s-caution {
13338
+ .s-button[data-mode='default'][data-tone='caution'] {
13259
13339
  --color-bg: var(--color-solid-caution-bg-0);
13260
13340
  --color-border: var(--color-solid-caution-border-1);
13341
+ --color-code-bg: var(--color-solid-caution-bg-1);
13342
+ --color-code-fg: var(--color-solid-caution-fg-4);
13261
13343
  --color-fg: var(--color-solid-caution-fg-0);
13262
13344
  --color-muted-bg: var(--color-solid-caution-bg-1);
13263
13345
  --color-muted-fg: var(--color-solid-caution-fg-4);
13264
13346
  --button-box-shadow: none;
13265
13347
  }
13266
13348
 
13267
- .s-button.s-solid.s-caution:not([data-disabled]):hover {
13349
+ .s-button[data-mode='default'][data-tone='caution']:not([data-disabled]):hover {
13268
13350
  --color-bg: var(--color-solid-caution-bg-1);
13269
13351
  --color-border: var(--color-solid-caution-border-2);
13352
+ --color-code-bg: var(--color-solid-caution-bg-2);
13353
+ --color-code-fg: var(--color-solid-caution-fg-4);
13270
13354
  --color-fg: var(--color-solid-caution-fg-0);
13271
13355
  --color-muted-bg: var(--color-solid-caution-bg-2);
13272
13356
  --color-muted-fg: var(--color-solid-caution-fg-4);
13273
13357
  }
13274
13358
 
13275
- .s-button.s-solid.s-caution:not([data-disabled]):active {
13359
+ .s-button[data-mode='default'][data-tone='caution']:not([data-disabled]):active {
13276
13360
  --color-bg: var(--color-solid-caution-bg-2);
13277
13361
  --color-border: var(--color-solid-caution-border-3);
13362
+ --color-code-bg: var(--color-solid-caution-bg-3);
13363
+ --color-code-fg: var(--color-solid-caution-fg-4);
13278
13364
  --color-fg: var(--color-solid-caution-fg-0);
13279
13365
  --color-muted-bg: var(--color-solid-caution-bg-3);
13280
13366
  --color-muted-fg: var(--color-solid-caution-fg-4);
13281
13367
  }
13282
13368
 
13283
- .s-button.s-solid.s-caution:not([data-disabled])[data-selected] {
13369
+ .s-button[data-mode='default'][data-tone='caution']:not([data-disabled])[data-selected] {
13284
13370
  --color-bg: var(--color-solid-caution-bg-2);
13285
13371
  --color-border: var(--color-solid-caution-border-3);
13372
+ --color-code-bg: var(--color-solid-caution-bg-3);
13373
+ --color-code-fg: var(--color-solid-caution-fg-4);
13286
13374
  --color-fg: var(--color-solid-caution-fg-0);
13287
13375
  --color-muted-bg: var(--color-solid-caution-bg-3);
13288
13376
  --color-muted-fg: var(--color-solid-caution-fg-4);
13289
13377
  }
13290
13378
 
13291
- .s-button.s-solid.s-caution[data-disabled] {
13379
+ .s-button[data-mode='default'][data-tone='caution'][data-disabled] {
13292
13380
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13293
13381
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13294
13382
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -13307,42 +13395,50 @@
13307
13395
  --color-muted-fg: var(--color-tinted-default-border-4);
13308
13396
  }
13309
13397
 
13310
- .s-button.s-ghost.s-caution {
13398
+ .s-button[data-mode='ghost'][data-tone='caution'] {
13311
13399
  --color-bg: var(--color-tinted-caution-bg-1);
13312
- --color-border: var(--color-tinted-caution-border-0);
13400
+ --color-border: var(--color-tinted-caution-border-1);
13313
13401
  --color-fg: var(--color-tinted-caution-fg-2);
13402
+ --color-code-bg: var(--color-tinted-caution-bg-2);
13403
+ --color-code-fg: var(--color-tinted-caution-fg-4);
13314
13404
  --color-muted-bg: var(--color-tinted-caution-bg-2);
13315
13405
  --color-muted-fg: var(--color-tinted-caution-fg-4);
13316
13406
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13317
13407
  }
13318
13408
 
13319
- .s-button.s-ghost.s-caution:not([data-disabled]):hover {
13409
+ .s-button[data-mode='ghost'][data-tone='caution']:not([data-disabled]):hover {
13320
13410
  --color-bg: var(--color-tinted-caution-bg-2);
13321
- --color-border: var(--color-tinted-caution-border-1);
13411
+ --color-border: var(--color-tinted-caution-border-2);
13412
+ --color-code-bg: var(--color-tinted-caution-bg-3);
13413
+ --color-code-fg: var(--color-tinted-caution-fg-3);
13322
13414
  --color-fg: var(--color-tinted-caution-fg-1);
13323
13415
  --color-muted-bg: var(--color-tinted-caution-bg-3);
13324
13416
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13325
13417
  }
13326
13418
 
13327
- .s-button.s-ghost.s-caution:not([data-disabled]):active {
13419
+ .s-button[data-mode='ghost'][data-tone='caution']:not([data-disabled]):active {
13328
13420
  --color-bg: var(--color-tinted-caution-bg-3);
13329
- --color-border: var(--color-tinted-caution-border-2);
13421
+ --color-border: var(--color-tinted-caution-border-3);
13422
+ --color-code-bg: var(--color-tinted-caution-bg-4);
13423
+ --color-code-fg: var(--color-tinted-caution-fg-3);
13330
13424
  --color-fg: var(--color-tinted-caution-fg-1);
13331
13425
  --color-muted-bg: var(--color-tinted-caution-bg-4);
13332
13426
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13333
13427
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13334
13428
  }
13335
13429
 
13336
- .s-button.s-ghost.s-caution:not([data-disabled])[data-selected] {
13430
+ .s-button[data-mode='ghost'][data-tone='caution']:not([data-disabled])[data-selected] {
13337
13431
  --color-bg: var(--color-tinted-caution-bg-3);
13338
- --color-border: var(--color-tinted-caution-border-2);
13432
+ --color-border: var(--color-tinted-caution-border-3);
13433
+ --color-code-bg: var(--color-tinted-caution-bg-4);
13434
+ --color-code-fg: var(--color-tinted-caution-fg-3);
13339
13435
  --color-fg: var(--color-tinted-caution-fg-1);
13340
13436
  --color-muted-bg: var(--color-tinted-caution-bg-4);
13341
13437
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13342
13438
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13343
13439
  }
13344
13440
 
13345
- .s-button.s-ghost.s-caution[data-disabled] {
13441
+ .s-button[data-mode='ghost'][data-tone='caution'][data-disabled] {
13346
13442
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13347
13443
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13348
13444
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13361,7 +13457,7 @@
13361
13457
  --color-muted-fg: var(--color-tinted-default-border-3);
13362
13458
  }
13363
13459
 
13364
- .s-button.s-tinted.s-caution {
13460
+ .s-button[data-mode='bleed'][data-tone='caution'] {
13365
13461
  box-shadow: none;
13366
13462
  --color-bg: var(--color-tinted-caution-bg-0);
13367
13463
  --color-border: var(--color-tinted-caution-border-1);
@@ -13371,7 +13467,7 @@
13371
13467
  --button-box-shadow: none;
13372
13468
  }
13373
13469
 
13374
- .s-button.s-tinted.s-caution:not([data-disabled]):hover {
13470
+ .s-button[data-mode='bleed'][data-tone='caution']:not([data-disabled]):hover {
13375
13471
  --color-bg: var(--color-tinted-caution-bg-1);
13376
13472
  --color-border: var(--color-tinted-caution-border-2);
13377
13473
  --color-fg: var(--color-tinted-caution-fg-1);
@@ -13379,7 +13475,7 @@
13379
13475
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13380
13476
  }
13381
13477
 
13382
- .s-button.s-tinted.s-caution:not([data-disabled]):active {
13478
+ .s-button[data-mode='bleed'][data-tone='caution']:not([data-disabled]):active {
13383
13479
  --color-bg: var(--color-tinted-caution-bg-2);
13384
13480
  --color-border: var(--color-tinted-caution-border-3);
13385
13481
  --color-fg: var(--color-tinted-caution-fg-1);
@@ -13387,7 +13483,7 @@
13387
13483
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13388
13484
  }
13389
13485
 
13390
- .s-button.s-tinted.s-caution:not([data-disabled])[data-selected] {
13486
+ .s-button[data-mode='bleed'][data-tone='caution']:not([data-disabled])[data-selected] {
13391
13487
  --color-bg: var(--color-tinted-caution-bg-2);
13392
13488
  --color-border: var(--color-tinted-caution-border-3);
13393
13489
  --color-fg: var(--color-tinted-caution-fg-1);
@@ -13395,7 +13491,7 @@
13395
13491
  --color-muted-fg: var(--color-tinted-caution-fg-3);
13396
13492
  }
13397
13493
 
13398
- .s-button.s-tinted.s-caution[data-disabled] {
13494
+ .s-button[data-mode='bleed'][data-tone='caution'][data-disabled] {
13399
13495
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13400
13496
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13401
13497
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13414,40 +13510,48 @@
13414
13510
  --color-muted-fg: var(--color-tinted-default-border-3);
13415
13511
  }
13416
13512
 
13417
- .s-button.s-solid.s-critical {
13513
+ .s-button[data-mode='default'][data-tone='critical'] {
13418
13514
  --color-bg: var(--color-solid-critical-bg-0);
13419
13515
  --color-border: var(--color-solid-critical-border-1);
13516
+ --color-code-bg: var(--color-solid-critical-bg-1);
13517
+ --color-code-fg: var(--color-solid-critical-fg-4);
13420
13518
  --color-fg: var(--color-solid-critical-fg-0);
13421
13519
  --color-muted-bg: var(--color-solid-critical-bg-1);
13422
13520
  --color-muted-fg: var(--color-solid-critical-fg-4);
13423
13521
  --button-box-shadow: none;
13424
13522
  }
13425
13523
 
13426
- .s-button.s-solid.s-critical:not([data-disabled]):hover {
13524
+ .s-button[data-mode='default'][data-tone='critical']:not([data-disabled]):hover {
13427
13525
  --color-bg: var(--color-solid-critical-bg-1);
13428
13526
  --color-border: var(--color-solid-critical-border-2);
13527
+ --color-code-bg: var(--color-solid-critical-bg-2);
13528
+ --color-code-fg: var(--color-solid-critical-fg-4);
13429
13529
  --color-fg: var(--color-solid-critical-fg-0);
13430
13530
  --color-muted-bg: var(--color-solid-critical-bg-2);
13431
13531
  --color-muted-fg: var(--color-solid-critical-fg-4);
13432
13532
  }
13433
13533
 
13434
- .s-button.s-solid.s-critical:not([data-disabled]):active {
13534
+ .s-button[data-mode='default'][data-tone='critical']:not([data-disabled]):active {
13435
13535
  --color-bg: var(--color-solid-critical-bg-2);
13436
13536
  --color-border: var(--color-solid-critical-border-3);
13537
+ --color-code-bg: var(--color-solid-critical-bg-3);
13538
+ --color-code-fg: var(--color-solid-critical-fg-4);
13437
13539
  --color-fg: var(--color-solid-critical-fg-0);
13438
13540
  --color-muted-bg: var(--color-solid-critical-bg-3);
13439
13541
  --color-muted-fg: var(--color-solid-critical-fg-4);
13440
13542
  }
13441
13543
 
13442
- .s-button.s-solid.s-critical:not([data-disabled])[data-selected] {
13544
+ .s-button[data-mode='default'][data-tone='critical']:not([data-disabled])[data-selected] {
13443
13545
  --color-bg: var(--color-solid-critical-bg-2);
13444
13546
  --color-border: var(--color-solid-critical-border-3);
13547
+ --color-code-bg: var(--color-solid-critical-bg-3);
13548
+ --color-code-fg: var(--color-solid-critical-fg-4);
13445
13549
  --color-fg: var(--color-solid-critical-fg-0);
13446
13550
  --color-muted-bg: var(--color-solid-critical-bg-3);
13447
13551
  --color-muted-fg: var(--color-solid-critical-fg-4);
13448
13552
  }
13449
13553
 
13450
- .s-button.s-solid.s-critical[data-disabled] {
13554
+ .s-button[data-mode='default'][data-tone='critical'][data-disabled] {
13451
13555
  --color-avatar-gray-bg: var(--color-tinted-default-bg-3);
13452
13556
  --color-avatar-blue-bg: var(--color-tinted-default-bg-3);
13453
13557
  --color-avatar-purple-bg: var(--color-tinted-default-bg-3);
@@ -13466,42 +13570,50 @@
13466
13570
  --color-muted-fg: var(--color-tinted-default-border-4);
13467
13571
  }
13468
13572
 
13469
- .s-button.s-ghost.s-critical {
13573
+ .s-button[data-mode='ghost'][data-tone='critical'] {
13470
13574
  --color-bg: var(--color-tinted-critical-bg-1);
13471
- --color-border: var(--color-tinted-critical-border-0);
13575
+ --color-border: var(--color-tinted-critical-border-1);
13472
13576
  --color-fg: var(--color-tinted-critical-fg-2);
13577
+ --color-code-bg: var(--color-tinted-critical-bg-2);
13578
+ --color-code-fg: var(--color-tinted-critical-fg-4);
13473
13579
  --color-muted-bg: var(--color-tinted-critical-bg-2);
13474
13580
  --color-muted-fg: var(--color-tinted-critical-fg-4);
13475
13581
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13476
13582
  }
13477
13583
 
13478
- .s-button.s-ghost.s-critical:not([data-disabled]):hover {
13584
+ .s-button[data-mode='ghost'][data-tone='critical']:not([data-disabled]):hover {
13479
13585
  --color-bg: var(--color-tinted-critical-bg-2);
13480
- --color-border: var(--color-tinted-critical-border-1);
13586
+ --color-border: var(--color-tinted-critical-border-2);
13587
+ --color-code-bg: var(--color-tinted-critical-bg-3);
13588
+ --color-code-fg: var(--color-tinted-critical-fg-3);
13481
13589
  --color-fg: var(--color-tinted-critical-fg-1);
13482
13590
  --color-muted-bg: var(--color-tinted-critical-bg-3);
13483
13591
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13484
13592
  }
13485
13593
 
13486
- .s-button.s-ghost.s-critical:not([data-disabled]):active {
13594
+ .s-button[data-mode='ghost'][data-tone='critical']:not([data-disabled]):active {
13487
13595
  --color-bg: var(--color-tinted-critical-bg-3);
13488
- --color-border: var(--color-tinted-critical-border-2);
13596
+ --color-border: var(--color-tinted-critical-border-3);
13597
+ --color-code-bg: var(--color-tinted-critical-bg-4);
13598
+ --color-code-fg: var(--color-tinted-critical-fg-3);
13489
13599
  --color-fg: var(--color-tinted-critical-fg-1);
13490
13600
  --color-muted-bg: var(--color-tinted-critical-bg-4);
13491
13601
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13492
13602
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13493
13603
  }
13494
13604
 
13495
- .s-button.s-ghost.s-critical:not([data-disabled])[data-selected] {
13605
+ .s-button[data-mode='ghost'][data-tone='critical']:not([data-disabled])[data-selected] {
13496
13606
  --color-bg: var(--color-tinted-critical-bg-3);
13497
- --color-border: var(--color-tinted-critical-border-2);
13607
+ --color-border: var(--color-tinted-critical-border-3);
13608
+ --color-code-bg: var(--color-tinted-critical-bg-4);
13609
+ --color-code-fg: var(--color-tinted-critical-fg-3);
13498
13610
  --color-fg: var(--color-tinted-critical-fg-1);
13499
13611
  --color-muted-bg: var(--color-tinted-critical-bg-4);
13500
13612
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13501
13613
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
13502
13614
  }
13503
13615
 
13504
- .s-button.s-ghost.s-critical[data-disabled] {
13616
+ .s-button[data-mode='ghost'][data-tone='critical'][data-disabled] {
13505
13617
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13506
13618
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13507
13619
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13520,7 +13632,7 @@
13520
13632
  --color-muted-fg: var(--color-tinted-default-border-3);
13521
13633
  }
13522
13634
 
13523
- .s-button.s-tinted.s-critical {
13635
+ .s-button[data-mode='bleed'][data-tone='critical'] {
13524
13636
  box-shadow: none;
13525
13637
  --color-bg: var(--color-tinted-critical-bg-0);
13526
13638
  --color-border: var(--color-tinted-critical-border-1);
@@ -13530,7 +13642,7 @@
13530
13642
  --button-box-shadow: none;
13531
13643
  }
13532
13644
 
13533
- .s-button.s-tinted.s-critical:not([data-disabled]):hover {
13645
+ .s-button[data-mode='bleed'][data-tone='critical']:not([data-disabled]):hover {
13534
13646
  --color-bg: var(--color-tinted-critical-bg-1);
13535
13647
  --color-border: var(--color-tinted-critical-border-2);
13536
13648
  --color-fg: var(--color-tinted-critical-fg-1);
@@ -13538,7 +13650,7 @@
13538
13650
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13539
13651
  }
13540
13652
 
13541
- .s-button.s-tinted.s-critical:not([data-disabled]):active {
13653
+ .s-button[data-mode='bleed'][data-tone='critical']:not([data-disabled]):active {
13542
13654
  --color-bg: var(--color-tinted-critical-bg-2);
13543
13655
  --color-border: var(--color-tinted-critical-border-3);
13544
13656
  --color-fg: var(--color-tinted-critical-fg-1);
@@ -13546,7 +13658,7 @@
13546
13658
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13547
13659
  }
13548
13660
 
13549
- .s-button.s-tinted.s-critical:not([data-disabled])[data-selected] {
13661
+ .s-button[data-mode='bleed'][data-tone='critical']:not([data-disabled])[data-selected] {
13550
13662
  --color-bg: var(--color-tinted-critical-bg-2);
13551
13663
  --color-border: var(--color-tinted-critical-border-3);
13552
13664
  --color-fg: var(--color-tinted-critical-fg-1);
@@ -13554,7 +13666,7 @@
13554
13666
  --color-muted-fg: var(--color-tinted-critical-fg-3);
13555
13667
  }
13556
13668
 
13557
- .s-button.s-tinted.s-critical[data-disabled] {
13669
+ .s-button[data-mode='bleed'][data-tone='critical'][data-disabled] {
13558
13670
  --color-avatar-gray-bg: var(--color-tinted-default-bg-2);
13559
13671
  --color-avatar-blue-bg: var(--color-tinted-default-bg-2);
13560
13672
  --color-avatar-purple-bg: var(--color-tinted-default-bg-2);
@@ -13607,6 +13719,12 @@
13607
13719
  white-space: inherit;
13608
13720
  }
13609
13721
 
13722
+ .s-card[data-checkered] {
13723
+ background-size: var(--space-3) var(--space-3);
13724
+ background-position: top left;
13725
+ background-image: repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-muted-bg) 0% 50%);
13726
+ }
13727
+
13610
13728
  a.s-card:not([data-disabled]):hover,
13611
13729
  button.s-card:not([data-disabled]):hover {
13612
13730
  --color-bg: var(--color-tinted-default-bg-1);
@@ -13654,11 +13772,11 @@
13654
13772
 
13655
13773
  a.s-card[data-disabled],
13656
13774
  button.s-card[data-disabled] {
13657
- --color-bg: var(--color-tinted-default-bg-2);
13658
- --color-border: var(--color-tinted-default-border-4);
13659
- --color-fg: var(--color-tinted-default-fg-0);
13660
- --color-muted-bg: var(--color-tinted-default-bg-3);
13661
- --color-muted-fg: var(--color-tinted-default-fg-4);
13775
+ --color-bg: var(--color-tinted-default-bg-0);
13776
+ --color-border: var(--color-tinted-default-border-1);
13777
+ --color-fg: var(--color-tinted-default-border-3);
13778
+ --color-muted-bg: var(--color-tinted-default-bg-1);
13779
+ --color-muted-fg: var(--color-tinted-default-border-1);
13662
13780
  }
13663
13781
 
13664
13782
  .s-card.s-light {
@@ -20627,8 +20745,8 @@
20627
20745
  }
20628
20746
 
20629
20747
  .s-kbd {
20630
- box-shadow: inset 0 0 0 0.5px var(--color-tinted-default-border-3);
20631
- background: var(--color-muted-bg);
20748
+ box-shadow: inset 0 0 0 0.5px var(--color-border);
20749
+ background-color: var(--color-muted-bg);
20632
20750
  font: inherit;
20633
20751
  vertical-align: top;
20634
20752
  }