@seed-design/css 1.0.5 → 1.0.6-alpha-20251021104301
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/all.css +13 -7
- package/all.min.css +1 -1
- package/package.json +1 -1
- package/recipes/avatar.css +6 -0
- package/recipes/switch-mark.css +6 -7
- package/recipes/switch.css +1 -0
- package/vars/component/switch-mark.d.ts +23 -7
- package/vars/component/switch-mark.mjs +23 -7
- package/vars/component/switch.d.ts +3 -1
- package/vars/component/switch.mjs +3 -1
package/all.css
CHANGED
|
@@ -2032,8 +2032,10 @@
|
|
|
2032
2032
|
mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
|
|
2033
2033
|
mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
|
|
2034
2034
|
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
2035
|
+
will-change: transform;
|
|
2035
2036
|
position: absolute;
|
|
2036
2037
|
inset: 0;
|
|
2038
|
+
transform: translateZ(0);
|
|
2037
2039
|
mask-repeat: no-repeat;
|
|
2038
2040
|
mask-composite: subtract;
|
|
2039
2041
|
}
|
|
@@ -2050,8 +2052,10 @@
|
|
|
2050
2052
|
mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
|
|
2051
2053
|
mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
|
|
2052
2054
|
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
2055
|
+
will-change: transform;
|
|
2053
2056
|
display: block;
|
|
2054
2057
|
overflow: hidden;
|
|
2058
|
+
transform: translateZ(0);
|
|
2055
2059
|
mask-repeat: no-repeat;
|
|
2056
2060
|
mask-composite: subtract;
|
|
2057
2061
|
}
|
|
@@ -2073,10 +2077,12 @@
|
|
|
2073
2077
|
mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
|
|
2074
2078
|
mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
|
|
2075
2079
|
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
|
|
2080
|
+
will-change: transform;
|
|
2076
2081
|
justify-content: center;
|
|
2077
2082
|
align-items: center;
|
|
2078
2083
|
display: flex;
|
|
2079
2084
|
overflow: hidden;
|
|
2085
|
+
transform: translateZ(0);
|
|
2080
2086
|
mask-repeat: no-repeat;
|
|
2081
2087
|
mask-composite: subtract;
|
|
2082
2088
|
}
|
|
@@ -5717,6 +5723,7 @@
|
|
|
5717
5723
|
.seed-switch__label {
|
|
5718
5724
|
font-weight: var(--seed-font-weight-medium);
|
|
5719
5725
|
color: var(--seed-color-fg-neutral);
|
|
5726
|
+
transition: opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
|
|
5720
5727
|
}
|
|
5721
5728
|
|
|
5722
5729
|
.seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
|
|
@@ -5764,7 +5771,7 @@
|
|
|
5764
5771
|
border-radius: var(--seed-radius-full);
|
|
5765
5772
|
background: var(--seed-color-palette-gray-600);
|
|
5766
5773
|
margin: var(--switch-mark-margin-top, 0) 0;
|
|
5767
|
-
transition: background-color
|
|
5774
|
+
transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
|
|
5768
5775
|
display: block;
|
|
5769
5776
|
position: relative;
|
|
5770
5777
|
}
|
|
@@ -5775,7 +5782,8 @@
|
|
|
5775
5782
|
|
|
5776
5783
|
.seed-switch-mark__thumb {
|
|
5777
5784
|
border-radius: var(--seed-radius-full);
|
|
5778
|
-
transition: transform
|
|
5785
|
+
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
|
|
5786
|
+
transform: scale(.8);
|
|
5779
5787
|
}
|
|
5780
5788
|
|
|
5781
5789
|
.seed-switch-mark__root--tone_neutral:is(:checked, [data-checked]) {
|
|
@@ -5814,7 +5822,7 @@
|
|
|
5814
5822
|
}
|
|
5815
5823
|
|
|
5816
5824
|
.seed-switch-mark__thumb--size_16:is(:checked, [data-checked]) {
|
|
5817
|
-
transform: translateX(10px);
|
|
5825
|
+
transform: scale(1)translateX(10px);
|
|
5818
5826
|
}
|
|
5819
5827
|
|
|
5820
5828
|
.seed-switch-mark__root--size_24 {
|
|
@@ -5826,11 +5834,10 @@
|
|
|
5826
5834
|
.seed-switch-mark__thumb--size_24 {
|
|
5827
5835
|
width: 20px;
|
|
5828
5836
|
height: 20px;
|
|
5829
|
-
box-shadow: 0 3px 8px #00000026, 0 1px 3px #0000000f;
|
|
5830
5837
|
}
|
|
5831
5838
|
|
|
5832
5839
|
.seed-switch-mark__thumb--size_24:is(:checked, [data-checked]) {
|
|
5833
|
-
transform: translateX(14px);
|
|
5840
|
+
transform: scale(1)translateX(14px);
|
|
5834
5841
|
}
|
|
5835
5842
|
|
|
5836
5843
|
.seed-switch-mark__root--size_32 {
|
|
@@ -5842,11 +5849,10 @@
|
|
|
5842
5849
|
.seed-switch-mark__thumb--size_32 {
|
|
5843
5850
|
width: 26px;
|
|
5844
5851
|
height: 26px;
|
|
5845
|
-
box-shadow: 0 3px 8px #00000026, 0 1px 3px #0000000f;
|
|
5846
5852
|
}
|
|
5847
5853
|
|
|
5848
5854
|
.seed-switch-mark__thumb--size_32:is(:checked, [data-checked]) {
|
|
5849
|
-
transform: translateX(20px);
|
|
5855
|
+
transform: scale(1)translateX(20px);
|
|
5850
5856
|
}
|
|
5851
5857
|
|
|
5852
5858
|
.seed-tabs__root {
|