@sanity/ui 3.0.0-static.3 → 3.0.0-static.5

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 (68) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +98 -64
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-cjs/buildCommand.js +1 -1
  4. package/dist/_chunks-cjs/buildCommand.js.map +1 -1
  5. package/dist/_chunks-es/_visual-editing.mjs +99 -65
  6. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  7. package/dist/_visual-editing.d.mts +4 -1
  8. package/dist/_visual-editing.d.ts +4 -1
  9. package/dist/cli.js +1 -1
  10. package/dist/css.d.mts +145 -893
  11. package/dist/css.d.ts +145 -893
  12. package/dist/css.js +182 -191
  13. package/dist/css.js.map +1 -1
  14. package/dist/css.mjs +182 -191
  15. package/dist/css.mjs.map +1 -1
  16. package/dist/index.d.mts +4 -1
  17. package/dist/index.d.ts +4 -1
  18. package/dist/index.js +12 -14
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.mjs +12 -14
  21. package/dist/index.mjs.map +1 -1
  22. package/dist/sanity-palette.css +1 -9
  23. package/dist/sanity-theme.css +1 -1
  24. package/dist/system.css +114 -109
  25. package/dist/theme.d.mts +1 -43
  26. package/dist/theme.d.ts +1 -43
  27. package/dist/theme.js +291 -102
  28. package/dist/theme.js.map +1 -1
  29. package/dist/theme.mjs +272 -85
  30. package/dist/theme.mjs.map +1 -1
  31. package/package.json +1 -1
  32. package/src/cli/buildCommand.ts +2 -2
  33. package/src/css/_comp.ts +1 -0
  34. package/src/css/aspects/flex/flexJustify.style.ts +3 -3
  35. package/src/css/aspects/grid/types.ts +2 -2
  36. package/src/css/aspects/textOverflow/textOverflow.ts +2 -2
  37. package/src/css/compile/compilePalette.ts +8 -41
  38. package/src/css/compile/compileTheme_v3.ts +0 -18
  39. package/src/css/index.ts +2 -2
  40. package/src/css/primitives/_selectable/_contants.ts +1 -1
  41. package/src/css/primitives/box/box.ts +3 -0
  42. package/src/css/primitives/button/_constants.ts +1 -1
  43. package/src/css/primitives/button/button.style.ts +12 -13
  44. package/src/css/primitives/card/_constants.ts +2 -2
  45. package/src/css/primitives/card/card.ts +1 -1
  46. package/src/css/primitives/stack/index.ts +1 -0
  47. package/src/css/primitives/stack/stack.style.ts +9 -0
  48. package/src/css/primitives/stack/stack.ts +6 -0
  49. package/src/css/system.style.ts +2 -0
  50. package/src/theme/defaults/config.ts +2 -2
  51. package/src/theme/defaults/fonts.ts +4 -4
  52. package/src/theme/palette/constants.ts +1 -3
  53. package/src/theme/palette/types.ts +0 -12
  54. package/src/theme/v3/buildTheme_v3.ts +1 -2
  55. package/src/theme/v3/defaults.ts +12 -31
  56. package/src/theme/v3/types.ts +0 -3
  57. package/src/ui/StyleTags.tsx +1 -1
  58. package/src/ui/primitives/box/box.tsx +6 -0
  59. package/src/ui/primitives/button/button.tsx +12 -11
  60. package/src/ui/primitives/card/card.tsx +5 -2
  61. package/src/ui/primitives/heading/heading.tsx +1 -1
  62. package/src/ui/primitives/select/select.tsx +3 -3
  63. package/src/ui/primitives/stack/stack.tsx +10 -5
  64. package/src/ui/primitives/text/text.tsx +1 -1
  65. package/dist/_chunks-cjs/v3_v2.js +0 -251
  66. package/dist/_chunks-cjs/v3_v2.js.map +0 -1
  67. package/dist/_chunks-es/v3_v2.mjs +0 -252
  68. package/dist/_chunks-es/v3_v2.mjs.map +0 -1
package/dist/system.css CHANGED
@@ -185,15 +185,15 @@
185
185
  justify-content: center;
186
186
  }
187
187
 
188
- .s-flex-justify-between {
188
+ .s-flex-justify-space-between {
189
189
  justify-content: space-between;
190
190
  }
191
191
 
192
- .s-flex-justify-around {
192
+ .s-flex-justify-space-around {
193
193
  justify-content: space-around;
194
194
  }
195
195
 
196
- .s-flex-justify-evenly {
196
+ .s-flex-justify-space-evenly {
197
197
  justify-content: space-evenly;
198
198
  }
199
199
 
@@ -1787,15 +1787,15 @@
1787
1787
  justify-content: center;
1788
1788
  }
1789
1789
 
1790
- .s-1\:flex-justify-between {
1790
+ .s-1\:flex-justify-space-between {
1791
1791
  justify-content: space-between;
1792
1792
  }
1793
1793
 
1794
- .s-1\:flex-justify-around {
1794
+ .s-1\:flex-justify-space-around {
1795
1795
  justify-content: space-around;
1796
1796
  }
1797
1797
 
1798
- .s-1\:flex-justify-evenly {
1798
+ .s-1\:flex-justify-space-evenly {
1799
1799
  justify-content: space-evenly;
1800
1800
  }
1801
1801
 
@@ -3363,15 +3363,15 @@
3363
3363
  justify-content: center;
3364
3364
  }
3365
3365
 
3366
- .s-2\:flex-justify-between {
3366
+ .s-2\:flex-justify-space-between {
3367
3367
  justify-content: space-between;
3368
3368
  }
3369
3369
 
3370
- .s-2\:flex-justify-around {
3370
+ .s-2\:flex-justify-space-around {
3371
3371
  justify-content: space-around;
3372
3372
  }
3373
3373
 
3374
- .s-2\:flex-justify-evenly {
3374
+ .s-2\:flex-justify-space-evenly {
3375
3375
  justify-content: space-evenly;
3376
3376
  }
3377
3377
 
@@ -4939,15 +4939,15 @@
4939
4939
  justify-content: center;
4940
4940
  }
4941
4941
 
4942
- .s-3\:flex-justify-between {
4942
+ .s-3\:flex-justify-space-between {
4943
4943
  justify-content: space-between;
4944
4944
  }
4945
4945
 
4946
- .s-3\:flex-justify-around {
4946
+ .s-3\:flex-justify-space-around {
4947
4947
  justify-content: space-around;
4948
4948
  }
4949
4949
 
4950
- .s-3\:flex-justify-evenly {
4950
+ .s-3\:flex-justify-space-evenly {
4951
4951
  justify-content: space-evenly;
4952
4952
  }
4953
4953
 
@@ -6515,15 +6515,15 @@
6515
6515
  justify-content: center;
6516
6516
  }
6517
6517
 
6518
- .s-4\:flex-justify-between {
6518
+ .s-4\:flex-justify-space-between {
6519
6519
  justify-content: space-between;
6520
6520
  }
6521
6521
 
6522
- .s-4\:flex-justify-around {
6522
+ .s-4\:flex-justify-space-around {
6523
6523
  justify-content: space-around;
6524
6524
  }
6525
6525
 
6526
- .s-4\:flex-justify-evenly {
6526
+ .s-4\:flex-justify-space-evenly {
6527
6527
  justify-content: space-evenly;
6528
6528
  }
6529
6529
 
@@ -8091,15 +8091,15 @@
8091
8091
  justify-content: center;
8092
8092
  }
8093
8093
 
8094
- .s-5\:flex-justify-between {
8094
+ .s-5\:flex-justify-space-between {
8095
8095
  justify-content: space-between;
8096
8096
  }
8097
8097
 
8098
- .s-5\:flex-justify-around {
8098
+ .s-5\:flex-justify-space-around {
8099
8099
  justify-content: space-around;
8100
8100
  }
8101
8101
 
8102
- .s-5\:flex-justify-evenly {
8102
+ .s-5\:flex-justify-space-evenly {
8103
8103
  justify-content: space-evenly;
8104
8104
  }
8105
8105
 
@@ -9667,15 +9667,15 @@
9667
9667
  justify-content: center;
9668
9668
  }
9669
9669
 
9670
- .s-6\:flex-justify-between {
9670
+ .s-6\:flex-justify-space-between {
9671
9671
  justify-content: space-between;
9672
9672
  }
9673
9673
 
9674
- .s-6\:flex-justify-around {
9674
+ .s-6\:flex-justify-space-around {
9675
9675
  justify-content: space-around;
9676
9676
  }
9677
9677
 
9678
- .s-6\:flex-justify-evenly {
9678
+ .s-6\:flex-justify-space-evenly {
9679
9679
  justify-content: space-evenly;
9680
9680
  }
9681
9681
 
@@ -11497,7 +11497,7 @@
11497
11497
  text-decoration: none;
11498
11498
  }
11499
11499
 
11500
- .s-selectable.s-surface {
11500
+ .s-selectable.s-default {
11501
11501
  --color-tinted-bg-0: var(--color-tinted-default-bg-0);
11502
11502
  --color-tinted-bg-1: var(--color-tinted-default-bg-1);
11503
11503
  --color-tinted-bg-2: var(--color-tinted-default-bg-2);
@@ -11999,6 +11999,7 @@
11999
11999
  background-color: var(--color-bg);
12000
12000
  color: var(--color-fg);
12001
12001
  box-shadow: var(--button-box-shadow);
12002
+ align-items: center;
12002
12003
  }
12003
12004
 
12004
12005
  .s-button::-moz-focus-inner {
@@ -12027,7 +12028,7 @@
12027
12028
  opacity: 0.8;
12028
12029
  }
12029
12030
 
12030
- .s-button.s-solid.s-surface {
12031
+ .s-button.s-solid.s-default {
12031
12032
  --color-bg: var(--color-solid-default-bg-0);
12032
12033
  --color-border: var(--color-solid-default-border-1);
12033
12034
  --color-fg: var(--color-solid-default-fg-0);
@@ -12035,68 +12036,68 @@
12035
12036
  --button-box-shadow: none;
12036
12037
  }
12037
12038
 
12038
- .s-button.s-solid.s-surface:not([data-disabled]):hover {
12039
+ .s-button.s-solid.s-default:not([data-disabled]):hover {
12039
12040
  --color-bg: var(--color-solid-default-bg-1);
12040
12041
  --color-border: var(--color-solid-default-border-2);
12041
12042
  --color-fg: var(--color-solid-default-fg-0);
12042
12043
  --color-muted-fg: var(--color-solid-default-fg-4);
12043
12044
  }
12044
12045
 
12045
- .s-button.s-solid.s-surface:not([data-disabled]):active {
12046
+ .s-button.s-solid.s-default:not([data-disabled]):active {
12046
12047
  --color-bg: var(--color-solid-default-bg-2);
12047
12048
  --color-border: var(--color-solid-default-border-3);
12048
12049
  --color-fg: var(--color-solid-default-fg-0);
12049
12050
  --color-muted-fg: var(--color-solid-default-fg-4);
12050
12051
  }
12051
12052
 
12052
- .s-button.s-solid.s-surface:not([data-disabled])[data-selected] {
12053
+ .s-button.s-solid.s-default:not([data-disabled])[data-selected] {
12053
12054
  --color-bg: var(--color-solid-default-bg-2);
12054
12055
  --color-border: var(--color-solid-default-border-3);
12055
12056
  --color-fg: var(--color-solid-default-fg-0);
12056
12057
  --color-muted-fg: var(--color-solid-default-fg-4);
12057
12058
  }
12058
12059
 
12059
- .s-button.s-solid.s-surface[data-disabled] {
12060
+ .s-button.s-solid.s-default[data-disabled] {
12060
12061
  --color-bg: var(--color-default-tinted-bg-1);
12061
12062
  --color-border: var(--color-default-tinted-border-0);
12062
12063
  --color-fg: var(--color-default-tinted-fg-2);
12063
12064
  --color-muted-fg: var(--color-default-tinted-fg-1);
12064
12065
  }
12065
12066
 
12066
- .s-button.s-ghost.s-surface {
12067
- --color-bg: var(--color-tinted-default-bg-0);
12068
- --color-border: var(--color-tinted-default-border-1);
12067
+ .s-button.s-ghost.s-default {
12068
+ --color-bg: var(--color-tinted-default-bg-1);
12069
+ --color-border: var(--color-tinted-default-border-0);
12069
12070
  --color-fg: var(--color-tinted-default-fg-2);
12070
- --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
12071
+ --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12071
12072
  }
12072
12073
 
12073
- .s-button.s-ghost.s-surface:not([data-disabled]):hover {
12074
- --color-bg: var(--color-tinted-default-bg-1);
12075
- --color-border: var(--color-tinted-default-border-2);
12074
+ .s-button.s-ghost.s-default:not([data-disabled]):hover {
12075
+ --color-bg: var(--color-tinted-default-bg-2);
12076
+ --color-border: var(--color-tinted-default-border-1);
12076
12077
  --color-fg: var(--color-tinted-default-fg-1);
12077
12078
  }
12078
12079
 
12079
- .s-button.s-ghost.s-surface:not([data-disabled]):active {
12080
- --color-bg: var(--color-tinted-default-bg-2);
12081
- --color-border: var(--color-tinted-default-border-3);
12080
+ .s-button.s-ghost.s-default:not([data-disabled]):active {
12081
+ --color-bg: var(--color-tinted-default-bg-3);
12082
+ --color-border: var(--color-tinted-default-border-2);
12082
12083
  --color-fg: var(--color-tinted-default-fg-1);
12083
12084
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12084
12085
  }
12085
12086
 
12086
- .s-button.s-ghost.s-surface:not([data-disabled])[data-selected] {
12087
- --color-bg: var(--color-tinted-default-bg-2);
12088
- --color-border: var(--color-tinted-default-border-3);
12087
+ .s-button.s-ghost.s-default:not([data-disabled])[data-selected] {
12088
+ --color-bg: var(--color-tinted-default-bg-3);
12089
+ --color-border: var(--color-tinted-default-border-2);
12089
12090
  --color-fg: var(--color-tinted-default-fg-1);
12090
12091
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12091
12092
  }
12092
12093
 
12093
- .s-button.s-ghost.s-surface[data-disabled] {
12094
- --color-bg: var(--color-default-tinted-bg-0);
12094
+ .s-button.s-ghost.s-default[data-disabled] {
12095
+ --color-bg: var(--color-default-tinted-bg-1);
12095
12096
  --color-border: var(--color-default-tinted-border-0);
12096
12097
  --color-fg: var(--color-default-tinted-fg-2);
12097
12098
  }
12098
12099
 
12099
- .s-button.s-tinted.s-surface {
12100
+ .s-button.s-tinted.s-default {
12100
12101
  box-shadow: none;
12101
12102
  --color-bg: var(--color-tinted-default-bg-0);
12102
12103
  --color-border: var(--color-tinted-default-border-1);
@@ -12105,28 +12106,28 @@
12105
12106
  --button-box-shadow: none;
12106
12107
  }
12107
12108
 
12108
- .s-button.s-tinted.s-surface:not([data-disabled]):hover {
12109
+ .s-button.s-tinted.s-default:not([data-disabled]):hover {
12109
12110
  --color-bg: var(--color-tinted-default-bg-1);
12110
12111
  --color-border: var(--color-tinted-default-border-2);
12111
12112
  --color-fg: var(--color-tinted-default-fg-1);
12112
12113
  --color-muted-fg: var(--color-tinted-default-fg-3);
12113
12114
  }
12114
12115
 
12115
- .s-button.s-tinted.s-surface:not([data-disabled]):active {
12116
+ .s-button.s-tinted.s-default:not([data-disabled]):active {
12116
12117
  --color-bg: var(--color-tinted-default-bg-2);
12117
12118
  --color-border: var(--color-tinted-default-border-3);
12118
12119
  --color-fg: var(--color-tinted-default-fg-1);
12119
12120
  --color-muted-fg: var(--color-tinted-default-fg-3);
12120
12121
  }
12121
12122
 
12122
- .s-button.s-tinted.s-surface:not([data-disabled])[data-selected] {
12123
+ .s-button.s-tinted.s-default:not([data-disabled])[data-selected] {
12123
12124
  --color-bg: var(--color-tinted-default-bg-2);
12124
12125
  --color-border: var(--color-tinted-default-border-3);
12125
12126
  --color-fg: var(--color-tinted-default-fg-1);
12126
12127
  --color-muted-fg: var(--color-tinted-default-fg-3);
12127
12128
  }
12128
12129
 
12129
- .s-button.s-tinted.s-surface[data-disabled] {
12130
+ .s-button.s-tinted.s-default[data-disabled] {
12130
12131
  --color-bg: var(--color-default-tinted-bg-0);
12131
12132
  --color-border: var(--color-default-tinted-border-0);
12132
12133
  --color-fg: var(--color-default-tinted-fg-2);
@@ -12170,34 +12171,34 @@
12170
12171
  }
12171
12172
 
12172
12173
  .s-button.s-ghost.s-neutral {
12173
- --color-bg: var(--color-tinted-neutral-bg-0);
12174
- --color-border: var(--color-tinted-neutral-border-1);
12174
+ --color-bg: var(--color-tinted-neutral-bg-1);
12175
+ --color-border: var(--color-tinted-neutral-border-0);
12175
12176
  --color-fg: var(--color-tinted-neutral-fg-2);
12176
- --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
12177
+ --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12177
12178
  }
12178
12179
 
12179
12180
  .s-button.s-ghost.s-neutral:not([data-disabled]):hover {
12180
- --color-bg: var(--color-tinted-neutral-bg-1);
12181
- --color-border: var(--color-tinted-neutral-border-2);
12181
+ --color-bg: var(--color-tinted-neutral-bg-2);
12182
+ --color-border: var(--color-tinted-neutral-border-1);
12182
12183
  --color-fg: var(--color-tinted-neutral-fg-1);
12183
12184
  }
12184
12185
 
12185
12186
  .s-button.s-ghost.s-neutral:not([data-disabled]):active {
12186
- --color-bg: var(--color-tinted-neutral-bg-2);
12187
- --color-border: var(--color-tinted-neutral-border-3);
12187
+ --color-bg: var(--color-tinted-neutral-bg-3);
12188
+ --color-border: var(--color-tinted-neutral-border-2);
12188
12189
  --color-fg: var(--color-tinted-neutral-fg-1);
12189
12190
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12190
12191
  }
12191
12192
 
12192
12193
  .s-button.s-ghost.s-neutral:not([data-disabled])[data-selected] {
12193
- --color-bg: var(--color-tinted-neutral-bg-2);
12194
- --color-border: var(--color-tinted-neutral-border-3);
12194
+ --color-bg: var(--color-tinted-neutral-bg-3);
12195
+ --color-border: var(--color-tinted-neutral-border-2);
12195
12196
  --color-fg: var(--color-tinted-neutral-fg-1);
12196
12197
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12197
12198
  }
12198
12199
 
12199
12200
  .s-button.s-ghost.s-neutral[data-disabled] {
12200
- --color-bg: var(--color-default-tinted-bg-0);
12201
+ --color-bg: var(--color-default-tinted-bg-1);
12201
12202
  --color-border: var(--color-default-tinted-border-0);
12202
12203
  --color-fg: var(--color-default-tinted-fg-2);
12203
12204
  }
@@ -12276,34 +12277,34 @@
12276
12277
  }
12277
12278
 
12278
12279
  .s-button.s-ghost.s-accent {
12279
- --color-bg: var(--color-tinted-primary-bg-0);
12280
- --color-border: var(--color-tinted-primary-border-1);
12280
+ --color-bg: var(--color-tinted-primary-bg-1);
12281
+ --color-border: var(--color-tinted-primary-border-0);
12281
12282
  --color-fg: var(--color-tinted-primary-fg-2);
12282
- --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
12283
+ --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12283
12284
  }
12284
12285
 
12285
12286
  .s-button.s-ghost.s-accent:not([data-disabled]):hover {
12286
- --color-bg: var(--color-tinted-primary-bg-1);
12287
- --color-border: var(--color-tinted-primary-border-2);
12287
+ --color-bg: var(--color-tinted-primary-bg-2);
12288
+ --color-border: var(--color-tinted-primary-border-1);
12288
12289
  --color-fg: var(--color-tinted-primary-fg-1);
12289
12290
  }
12290
12291
 
12291
12292
  .s-button.s-ghost.s-accent:not([data-disabled]):active {
12292
- --color-bg: var(--color-tinted-primary-bg-2);
12293
- --color-border: var(--color-tinted-primary-border-3);
12293
+ --color-bg: var(--color-tinted-primary-bg-3);
12294
+ --color-border: var(--color-tinted-primary-border-2);
12294
12295
  --color-fg: var(--color-tinted-primary-fg-1);
12295
12296
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12296
12297
  }
12297
12298
 
12298
12299
  .s-button.s-ghost.s-accent:not([data-disabled])[data-selected] {
12299
- --color-bg: var(--color-tinted-primary-bg-2);
12300
- --color-border: var(--color-tinted-primary-border-3);
12300
+ --color-bg: var(--color-tinted-primary-bg-3);
12301
+ --color-border: var(--color-tinted-primary-border-2);
12301
12302
  --color-fg: var(--color-tinted-primary-fg-1);
12302
12303
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12303
12304
  }
12304
12305
 
12305
12306
  .s-button.s-ghost.s-accent[data-disabled] {
12306
- --color-bg: var(--color-default-tinted-bg-0);
12307
+ --color-bg: var(--color-default-tinted-bg-1);
12307
12308
  --color-border: var(--color-default-tinted-border-0);
12308
12309
  --color-fg: var(--color-default-tinted-fg-2);
12309
12310
  }
@@ -12382,34 +12383,34 @@
12382
12383
  }
12383
12384
 
12384
12385
  .s-button.s-ghost.s-suggest {
12385
- --color-bg: var(--color-tinted-suggest-bg-0);
12386
- --color-border: var(--color-tinted-suggest-border-1);
12386
+ --color-bg: var(--color-tinted-suggest-bg-1);
12387
+ --color-border: var(--color-tinted-suggest-border-0);
12387
12388
  --color-fg: var(--color-tinted-suggest-fg-2);
12388
- --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
12389
+ --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12389
12390
  }
12390
12391
 
12391
12392
  .s-button.s-ghost.s-suggest:not([data-disabled]):hover {
12392
- --color-bg: var(--color-tinted-suggest-bg-1);
12393
- --color-border: var(--color-tinted-suggest-border-2);
12393
+ --color-bg: var(--color-tinted-suggest-bg-2);
12394
+ --color-border: var(--color-tinted-suggest-border-1);
12394
12395
  --color-fg: var(--color-tinted-suggest-fg-1);
12395
12396
  }
12396
12397
 
12397
12398
  .s-button.s-ghost.s-suggest:not([data-disabled]):active {
12398
- --color-bg: var(--color-tinted-suggest-bg-2);
12399
- --color-border: var(--color-tinted-suggest-border-3);
12399
+ --color-bg: var(--color-tinted-suggest-bg-3);
12400
+ --color-border: var(--color-tinted-suggest-border-2);
12400
12401
  --color-fg: var(--color-tinted-suggest-fg-1);
12401
12402
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12402
12403
  }
12403
12404
 
12404
12405
  .s-button.s-ghost.s-suggest:not([data-disabled])[data-selected] {
12405
- --color-bg: var(--color-tinted-suggest-bg-2);
12406
- --color-border: var(--color-tinted-suggest-border-3);
12406
+ --color-bg: var(--color-tinted-suggest-bg-3);
12407
+ --color-border: var(--color-tinted-suggest-border-2);
12407
12408
  --color-fg: var(--color-tinted-suggest-fg-1);
12408
12409
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12409
12410
  }
12410
12411
 
12411
12412
  .s-button.s-ghost.s-suggest[data-disabled] {
12412
- --color-bg: var(--color-default-tinted-bg-0);
12413
+ --color-bg: var(--color-default-tinted-bg-1);
12413
12414
  --color-border: var(--color-default-tinted-border-0);
12414
12415
  --color-fg: var(--color-default-tinted-fg-2);
12415
12416
  }
@@ -12488,34 +12489,34 @@
12488
12489
  }
12489
12490
 
12490
12491
  .s-button.s-ghost.s-positive {
12491
- --color-bg: var(--color-tinted-positive-bg-0);
12492
- --color-border: var(--color-tinted-positive-border-1);
12492
+ --color-bg: var(--color-tinted-positive-bg-1);
12493
+ --color-border: var(--color-tinted-positive-border-0);
12493
12494
  --color-fg: var(--color-tinted-positive-fg-2);
12494
- --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
12495
+ --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12495
12496
  }
12496
12497
 
12497
12498
  .s-button.s-ghost.s-positive:not([data-disabled]):hover {
12498
- --color-bg: var(--color-tinted-positive-bg-1);
12499
- --color-border: var(--color-tinted-positive-border-2);
12499
+ --color-bg: var(--color-tinted-positive-bg-2);
12500
+ --color-border: var(--color-tinted-positive-border-1);
12500
12501
  --color-fg: var(--color-tinted-positive-fg-1);
12501
12502
  }
12502
12503
 
12503
12504
  .s-button.s-ghost.s-positive:not([data-disabled]):active {
12504
- --color-bg: var(--color-tinted-positive-bg-2);
12505
- --color-border: var(--color-tinted-positive-border-3);
12505
+ --color-bg: var(--color-tinted-positive-bg-3);
12506
+ --color-border: var(--color-tinted-positive-border-2);
12506
12507
  --color-fg: var(--color-tinted-positive-fg-1);
12507
12508
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12508
12509
  }
12509
12510
 
12510
12511
  .s-button.s-ghost.s-positive:not([data-disabled])[data-selected] {
12511
- --color-bg: var(--color-tinted-positive-bg-2);
12512
- --color-border: var(--color-tinted-positive-border-3);
12512
+ --color-bg: var(--color-tinted-positive-bg-3);
12513
+ --color-border: var(--color-tinted-positive-border-2);
12513
12514
  --color-fg: var(--color-tinted-positive-fg-1);
12514
12515
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12515
12516
  }
12516
12517
 
12517
12518
  .s-button.s-ghost.s-positive[data-disabled] {
12518
- --color-bg: var(--color-default-tinted-bg-0);
12519
+ --color-bg: var(--color-default-tinted-bg-1);
12519
12520
  --color-border: var(--color-default-tinted-border-0);
12520
12521
  --color-fg: var(--color-default-tinted-fg-2);
12521
12522
  }
@@ -12594,34 +12595,34 @@
12594
12595
  }
12595
12596
 
12596
12597
  .s-button.s-ghost.s-caution {
12597
- --color-bg: var(--color-tinted-caution-bg-0);
12598
- --color-border: var(--color-tinted-caution-border-1);
12598
+ --color-bg: var(--color-tinted-caution-bg-1);
12599
+ --color-border: var(--color-tinted-caution-border-0);
12599
12600
  --color-fg: var(--color-tinted-caution-fg-2);
12600
- --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
12601
+ --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12601
12602
  }
12602
12603
 
12603
12604
  .s-button.s-ghost.s-caution:not([data-disabled]):hover {
12604
- --color-bg: var(--color-tinted-caution-bg-1);
12605
- --color-border: var(--color-tinted-caution-border-2);
12605
+ --color-bg: var(--color-tinted-caution-bg-2);
12606
+ --color-border: var(--color-tinted-caution-border-1);
12606
12607
  --color-fg: var(--color-tinted-caution-fg-1);
12607
12608
  }
12608
12609
 
12609
12610
  .s-button.s-ghost.s-caution:not([data-disabled]):active {
12610
- --color-bg: var(--color-tinted-caution-bg-2);
12611
- --color-border: var(--color-tinted-caution-border-3);
12611
+ --color-bg: var(--color-tinted-caution-bg-3);
12612
+ --color-border: var(--color-tinted-caution-border-2);
12612
12613
  --color-fg: var(--color-tinted-caution-fg-1);
12613
12614
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12614
12615
  }
12615
12616
 
12616
12617
  .s-button.s-ghost.s-caution:not([data-disabled])[data-selected] {
12617
- --color-bg: var(--color-tinted-caution-bg-2);
12618
- --color-border: var(--color-tinted-caution-border-3);
12618
+ --color-bg: var(--color-tinted-caution-bg-3);
12619
+ --color-border: var(--color-tinted-caution-border-2);
12619
12620
  --color-fg: var(--color-tinted-caution-fg-1);
12620
12621
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12621
12622
  }
12622
12623
 
12623
12624
  .s-button.s-ghost.s-caution[data-disabled] {
12624
- --color-bg: var(--color-default-tinted-bg-0);
12625
+ --color-bg: var(--color-default-tinted-bg-1);
12625
12626
  --color-border: var(--color-default-tinted-border-0);
12626
12627
  --color-fg: var(--color-default-tinted-fg-2);
12627
12628
  }
@@ -12700,34 +12701,34 @@
12700
12701
  }
12701
12702
 
12702
12703
  .s-button.s-ghost.s-critical {
12703
- --color-bg: var(--color-tinted-critical-bg-0);
12704
- --color-border: var(--color-tinted-critical-border-1);
12704
+ --color-bg: var(--color-tinted-critical-bg-1);
12705
+ --color-border: var(--color-tinted-critical-border-0);
12705
12706
  --color-fg: var(--color-tinted-critical-fg-2);
12706
- --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border),inset 0 -1.5px 0 0.5px var(--color-shadow-umbra);
12707
+ --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12707
12708
  }
12708
12709
 
12709
12710
  .s-button.s-ghost.s-critical:not([data-disabled]):hover {
12710
- --color-bg: var(--color-tinted-critical-bg-1);
12711
- --color-border: var(--color-tinted-critical-border-2);
12711
+ --color-bg: var(--color-tinted-critical-bg-2);
12712
+ --color-border: var(--color-tinted-critical-border-1);
12712
12713
  --color-fg: var(--color-tinted-critical-fg-1);
12713
12714
  }
12714
12715
 
12715
12716
  .s-button.s-ghost.s-critical:not([data-disabled]):active {
12716
- --color-bg: var(--color-tinted-critical-bg-2);
12717
- --color-border: var(--color-tinted-critical-border-3);
12717
+ --color-bg: var(--color-tinted-critical-bg-3);
12718
+ --color-border: var(--color-tinted-critical-border-2);
12718
12719
  --color-fg: var(--color-tinted-critical-fg-1);
12719
12720
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12720
12721
  }
12721
12722
 
12722
12723
  .s-button.s-ghost.s-critical:not([data-disabled])[data-selected] {
12723
- --color-bg: var(--color-tinted-critical-bg-2);
12724
- --color-border: var(--color-tinted-critical-border-3);
12724
+ --color-bg: var(--color-tinted-critical-bg-3);
12725
+ --color-border: var(--color-tinted-critical-border-2);
12725
12726
  --color-fg: var(--color-tinted-critical-fg-1);
12726
12727
  --button-box-shadow: inset 0 0 0 var(--button-border-width) var(--color-border);
12727
12728
  }
12728
12729
 
12729
12730
  .s-button.s-ghost.s-critical[data-disabled] {
12730
- --color-bg: var(--color-default-tinted-bg-0);
12731
+ --color-bg: var(--color-default-tinted-bg-1);
12731
12732
  --color-border: var(--color-default-tinted-border-0);
12732
12733
  --color-fg: var(--color-default-tinted-fg-2);
12733
12734
  }
@@ -17129,7 +17130,7 @@
17129
17130
  --color-critical-tinted-critical-fg-4: var(--color-dark-critical-tinted-critical-fg-4);
17130
17131
  }
17131
17132
 
17132
- .s-card.s-canvas {
17133
+ .s-card.s-transparent {
17133
17134
  --color-accent-fg: var(--color-transparent-accent-fg);
17134
17135
  --color-avatar-gray-bg: var(--color-transparent-avatar-gray-bg);
17135
17136
  --color-avatar-gray-fg: var(--color-transparent-avatar-gray-fg);
@@ -17423,7 +17424,7 @@
17423
17424
  --card-hairline-hard-color: var(--color-tinted-default-border-2);
17424
17425
  }
17425
17426
 
17426
- .s-card.s-surface {
17427
+ .s-card.s-default {
17427
17428
  --color-accent-fg: var(--color-default-accent-fg);
17428
17429
  --color-avatar-gray-bg: var(--color-default-avatar-gray-bg);
17429
17430
  --color-avatar-gray-fg: var(--color-default-avatar-gray-fg);
@@ -19910,6 +19911,10 @@
19910
19911
  animation: spinner-rotate 500ms linear infinite;
19911
19912
  }
19912
19913
 
19914
+ .s-stack {
19915
+ grid-template-columns: minmax(0, 1fr);
19916
+ }
19917
+
19913
19918
  .s-switch-element {
19914
19919
  position: absolute;
19915
19920
  top: 0;
package/dist/theme.d.mts CHANGED
@@ -280,8 +280,6 @@ export declare type CSSObject = StyledObject<any>
280
280
 
281
281
  declare type CSSVariableKey = `--${string}`
282
282
 
283
- export declare const defaultPalette: PaletteConfig
284
-
285
283
  export declare const defaultTokens: PartialTokens<Tokens>
286
284
 
287
285
  /** @public */
@@ -423,24 +421,6 @@ export declare function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB
423
421
  */
424
422
  export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
425
423
 
426
- export declare type PaletteConfig = {
427
- chroma: {
428
- min: number
429
- max: number
430
- }
431
- luminosity: {
432
- min: number
433
- max: number
434
- }
435
- hues: Record<
436
- Hue,
437
- {
438
- h: number
439
- c: number
440
- }
441
- >
442
- }
443
-
444
424
  /**
445
425
  * @internal
446
426
  */
@@ -746,7 +726,6 @@ export declare type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
746
726
  */
747
727
  export declare interface Theme_v3 {
748
728
  _version: 3
749
- _palette: PaletteConfig
750
729
  _tokens: Tokens
751
730
  avatar: ThemeAvatar_v2
752
731
  button: {
@@ -1780,7 +1759,6 @@ export declare interface ThemeLayer {
1780
1759
  /** @public */
1781
1760
  export declare interface ThemeOptions {
1782
1761
  v2?: ThemeConfig
1783
- palette?: PaletteConfig
1784
1762
  tokens?: PartialTokens<Tokens>
1785
1763
  }
1786
1764
 
@@ -1807,27 +1785,7 @@ export declare interface ThemeStyles {
1807
1785
 
1808
1786
  export declare type Tint = (typeof TINTS)[number]
1809
1787
 
1810
- export declare const TINTS: readonly [
1811
- 50,
1812
- 100,
1813
- 150,
1814
- 200,
1815
- 250,
1816
- 300,
1817
- 350,
1818
- 400,
1819
- 450,
1820
- 500,
1821
- 550,
1822
- 600,
1823
- 650,
1824
- 700,
1825
- 750,
1826
- 800,
1827
- 850,
1828
- 900,
1829
- 950,
1830
- ]
1788
+ export declare const TINTS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
1831
1789
 
1832
1790
  /** @internal */
1833
1791
  export declare interface TokenBaseKeyNode {