@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.
- package/dist/_chunks-cjs/_visual-editing.js +98 -64
- package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
- package/dist/_chunks-cjs/buildCommand.js +1 -1
- package/dist/_chunks-cjs/buildCommand.js.map +1 -1
- package/dist/_chunks-es/_visual-editing.mjs +99 -65
- package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
- package/dist/_visual-editing.d.mts +4 -1
- package/dist/_visual-editing.d.ts +4 -1
- package/dist/cli.js +1 -1
- package/dist/css.d.mts +145 -893
- package/dist/css.d.ts +145 -893
- package/dist/css.js +182 -191
- package/dist/css.js.map +1 -1
- package/dist/css.mjs +182 -191
- package/dist/css.mjs.map +1 -1
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +12 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +12 -14
- package/dist/index.mjs.map +1 -1
- package/dist/sanity-palette.css +1 -9
- package/dist/sanity-theme.css +1 -1
- package/dist/system.css +114 -109
- package/dist/theme.d.mts +1 -43
- package/dist/theme.d.ts +1 -43
- package/dist/theme.js +291 -102
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +272 -85
- package/dist/theme.mjs.map +1 -1
- package/package.json +1 -1
- package/src/cli/buildCommand.ts +2 -2
- package/src/css/_comp.ts +1 -0
- package/src/css/aspects/flex/flexJustify.style.ts +3 -3
- package/src/css/aspects/grid/types.ts +2 -2
- package/src/css/aspects/textOverflow/textOverflow.ts +2 -2
- package/src/css/compile/compilePalette.ts +8 -41
- package/src/css/compile/compileTheme_v3.ts +0 -18
- package/src/css/index.ts +2 -2
- package/src/css/primitives/_selectable/_contants.ts +1 -1
- package/src/css/primitives/box/box.ts +3 -0
- package/src/css/primitives/button/_constants.ts +1 -1
- package/src/css/primitives/button/button.style.ts +12 -13
- package/src/css/primitives/card/_constants.ts +2 -2
- package/src/css/primitives/card/card.ts +1 -1
- package/src/css/primitives/stack/index.ts +1 -0
- package/src/css/primitives/stack/stack.style.ts +9 -0
- package/src/css/primitives/stack/stack.ts +6 -0
- package/src/css/system.style.ts +2 -0
- package/src/theme/defaults/config.ts +2 -2
- package/src/theme/defaults/fonts.ts +4 -4
- package/src/theme/palette/constants.ts +1 -3
- package/src/theme/palette/types.ts +0 -12
- package/src/theme/v3/buildTheme_v3.ts +1 -2
- package/src/theme/v3/defaults.ts +12 -31
- package/src/theme/v3/types.ts +0 -3
- package/src/ui/StyleTags.tsx +1 -1
- package/src/ui/primitives/box/box.tsx +6 -0
- package/src/ui/primitives/button/button.tsx +12 -11
- package/src/ui/primitives/card/card.tsx +5 -2
- package/src/ui/primitives/heading/heading.tsx +1 -1
- package/src/ui/primitives/select/select.tsx +3 -3
- package/src/ui/primitives/stack/stack.tsx +10 -5
- package/src/ui/primitives/text/text.tsx +1 -1
- package/dist/_chunks-cjs/v3_v2.js +0 -251
- package/dist/_chunks-cjs/v3_v2.js.map +0 -1
- package/dist/_chunks-es/v3_v2.mjs +0 -252
- 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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
12067
|
-
--color-bg: var(--color-tinted-default-bg-
|
|
12068
|
-
--color-border: var(--color-tinted-default-border-
|
|
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)
|
|
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-
|
|
12074
|
-
--color-bg: var(--color-tinted-default-bg-
|
|
12075
|
-
--color-border: var(--color-tinted-default-border-
|
|
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-
|
|
12080
|
-
--color-bg: var(--color-tinted-default-bg-
|
|
12081
|
-
--color-border: var(--color-tinted-default-border-
|
|
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-
|
|
12087
|
-
--color-bg: var(--color-tinted-default-bg-
|
|
12088
|
-
--color-border: var(--color-tinted-default-border-
|
|
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-
|
|
12094
|
-
--color-bg: var(--color-default-tinted-bg-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
12174
|
-
--color-border: var(--color-tinted-neutral-border-
|
|
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)
|
|
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-
|
|
12181
|
-
--color-border: var(--color-tinted-neutral-border-
|
|
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-
|
|
12187
|
-
--color-border: var(--color-tinted-neutral-border-
|
|
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-
|
|
12194
|
-
--color-border: var(--color-tinted-neutral-border-
|
|
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-
|
|
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-
|
|
12280
|
-
--color-border: var(--color-tinted-primary-border-
|
|
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)
|
|
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-
|
|
12287
|
-
--color-border: var(--color-tinted-primary-border-
|
|
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-
|
|
12293
|
-
--color-border: var(--color-tinted-primary-border-
|
|
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-
|
|
12300
|
-
--color-border: var(--color-tinted-primary-border-
|
|
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-
|
|
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-
|
|
12386
|
-
--color-border: var(--color-tinted-suggest-border-
|
|
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)
|
|
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-
|
|
12393
|
-
--color-border: var(--color-tinted-suggest-border-
|
|
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-
|
|
12399
|
-
--color-border: var(--color-tinted-suggest-border-
|
|
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-
|
|
12406
|
-
--color-border: var(--color-tinted-suggest-border-
|
|
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-
|
|
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-
|
|
12492
|
-
--color-border: var(--color-tinted-positive-border-
|
|
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)
|
|
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-
|
|
12499
|
-
--color-border: var(--color-tinted-positive-border-
|
|
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-
|
|
12505
|
-
--color-border: var(--color-tinted-positive-border-
|
|
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-
|
|
12512
|
-
--color-border: var(--color-tinted-positive-border-
|
|
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-
|
|
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-
|
|
12598
|
-
--color-border: var(--color-tinted-caution-border-
|
|
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)
|
|
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-
|
|
12605
|
-
--color-border: var(--color-tinted-caution-border-
|
|
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-
|
|
12611
|
-
--color-border: var(--color-tinted-caution-border-
|
|
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-
|
|
12618
|
-
--color-border: var(--color-tinted-caution-border-
|
|
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-
|
|
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-
|
|
12704
|
-
--color-border: var(--color-tinted-critical-border-
|
|
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)
|
|
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-
|
|
12711
|
-
--color-border: var(--color-tinted-critical-border-
|
|
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-
|
|
12717
|
-
--color-border: var(--color-tinted-critical-border-
|
|
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-
|
|
12724
|
-
--color-border: var(--color-tinted-critical-border-
|
|
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-
|
|
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-
|
|
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-
|
|
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 {
|