@sanity/ui 2.1.4 → 2.1.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/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/theme.esm.js +72 -10
- package/dist/theme.esm.js.map +1 -1
- package/dist/theme.js +72 -10
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +72 -10
- package/dist/theme.mjs.map +1 -1
- package/package.json +15 -15
- package/src/core/primitives/avatar/__workshop__/index.ts +10 -0
- package/src/core/primitives/avatar/__workshop__/withinButton.tsx +62 -0
- package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +69 -0
- package/src/core/theme/__workshop__/debug/story.tsx +256 -51
- package/src/theme/build/renderColorTheme.ts +1 -1
- package/src/theme/defaults/colorTokens.ts +70 -8
package/dist/theme.mjs
CHANGED
|
@@ -1732,9 +1732,9 @@ const defaultColorTokens = {
|
|
|
1732
1732
|
},
|
|
1733
1733
|
avatar: {
|
|
1734
1734
|
"*": {
|
|
1735
|
-
_blend: ["
|
|
1736
|
-
bg: ["
|
|
1737
|
-
fg: ["
|
|
1735
|
+
_blend: ["screen", "multiply"],
|
|
1736
|
+
bg: ["500", "400"],
|
|
1737
|
+
fg: ["white", "black"]
|
|
1738
1738
|
}
|
|
1739
1739
|
},
|
|
1740
1740
|
badge: {
|
|
@@ -1785,6 +1785,13 @@ const defaultColorTokens = {
|
|
|
1785
1785
|
accent: {
|
|
1786
1786
|
fg: ["100 70%", "900 70%"]
|
|
1787
1787
|
},
|
|
1788
|
+
avatar: {
|
|
1789
|
+
"*": {
|
|
1790
|
+
_blend: ["screen", "multiply"],
|
|
1791
|
+
bg: ["gray/500", "gray/400"],
|
|
1792
|
+
fg: ["white", "black"]
|
|
1793
|
+
}
|
|
1794
|
+
},
|
|
1788
1795
|
badge: {
|
|
1789
1796
|
"*": {
|
|
1790
1797
|
bg: ["gray/700", "gray/300"],
|
|
@@ -1794,9 +1801,13 @@ const defaultColorTokens = {
|
|
|
1794
1801
|
}
|
|
1795
1802
|
},
|
|
1796
1803
|
bg: ["300", "600"],
|
|
1804
|
+
code: {
|
|
1805
|
+
bg: ["950", "50"],
|
|
1806
|
+
fg: ["300", "600"]
|
|
1807
|
+
},
|
|
1797
1808
|
fg: ["300", "600"],
|
|
1798
1809
|
muted: {
|
|
1799
|
-
bg: ["
|
|
1810
|
+
bg: ["950", "50"],
|
|
1800
1811
|
fg: ["300", "600"]
|
|
1801
1812
|
},
|
|
1802
1813
|
kbd: {
|
|
@@ -1811,6 +1822,13 @@ const defaultColorTokens = {
|
|
|
1811
1822
|
},
|
|
1812
1823
|
default: {
|
|
1813
1824
|
"*": {
|
|
1825
|
+
avatar: {
|
|
1826
|
+
"*": {
|
|
1827
|
+
_blend: ["screen", "multiply"],
|
|
1828
|
+
bg: ["500", "400"],
|
|
1829
|
+
fg: ["white", "black"]
|
|
1830
|
+
}
|
|
1831
|
+
},
|
|
1814
1832
|
bg: ["800", "200"],
|
|
1815
1833
|
muted: {
|
|
1816
1834
|
bg: ["950", "50"],
|
|
@@ -1835,6 +1853,13 @@ const defaultColorTokens = {
|
|
|
1835
1853
|
accent: {
|
|
1836
1854
|
fg: ["purple/700 60%", "purple/300 70%"]
|
|
1837
1855
|
},
|
|
1856
|
+
avatar: {
|
|
1857
|
+
"*": {
|
|
1858
|
+
_blend: ["screen", "multiply"],
|
|
1859
|
+
bg: ["500", "400"],
|
|
1860
|
+
fg: ["white", "black"]
|
|
1861
|
+
}
|
|
1862
|
+
},
|
|
1838
1863
|
badge: {
|
|
1839
1864
|
"*": {
|
|
1840
1865
|
bg: ["100", "900"],
|
|
@@ -1885,6 +1910,13 @@ const defaultColorTokens = {
|
|
|
1885
1910
|
accent: {
|
|
1886
1911
|
fg: ["200", "800"]
|
|
1887
1912
|
},
|
|
1913
|
+
avatar: {
|
|
1914
|
+
"*": {
|
|
1915
|
+
_blend: ["screen", "multiply"],
|
|
1916
|
+
bg: ["gray/100", "gray/900"],
|
|
1917
|
+
fg: ["white", "black"]
|
|
1918
|
+
}
|
|
1919
|
+
},
|
|
1888
1920
|
badge: {
|
|
1889
1921
|
"*": {
|
|
1890
1922
|
_hue: "gray",
|
|
@@ -1902,7 +1934,7 @@ const defaultColorTokens = {
|
|
|
1902
1934
|
fg: ["400", "600"],
|
|
1903
1935
|
icon: ["300", "700"],
|
|
1904
1936
|
muted: {
|
|
1905
|
-
fg: ["
|
|
1937
|
+
fg: ["300", "700"]
|
|
1906
1938
|
},
|
|
1907
1939
|
kbd: {
|
|
1908
1940
|
bg: ["white", "black"],
|
|
@@ -1932,6 +1964,13 @@ const defaultColorTokens = {
|
|
|
1932
1964
|
accent: {
|
|
1933
1965
|
fg: ["purple/700 70%", "purple/300 70%"]
|
|
1934
1966
|
},
|
|
1967
|
+
avatar: {
|
|
1968
|
+
"*": {
|
|
1969
|
+
_blend: ["screen", "multiply"],
|
|
1970
|
+
bg: ["500", "400"],
|
|
1971
|
+
fg: ["white", "black"]
|
|
1972
|
+
}
|
|
1973
|
+
},
|
|
1935
1974
|
badge: {
|
|
1936
1975
|
"*": {
|
|
1937
1976
|
bg: ["100", "900"],
|
|
@@ -1984,6 +2023,13 @@ const defaultColorTokens = {
|
|
|
1984
2023
|
accent: {
|
|
1985
2024
|
fg: ["200", "800"]
|
|
1986
2025
|
},
|
|
2026
|
+
avatar: {
|
|
2027
|
+
"*": {
|
|
2028
|
+
_blend: ["screen", "multiply"],
|
|
2029
|
+
bg: ["gray/100", "gray/900"],
|
|
2030
|
+
fg: ["white", "black"]
|
|
2031
|
+
}
|
|
2032
|
+
},
|
|
1987
2033
|
badge: {
|
|
1988
2034
|
"*": {
|
|
1989
2035
|
_hue: "gray",
|
|
@@ -2035,8 +2081,9 @@ const defaultColorTokens = {
|
|
|
2035
2081
|
fg: ["800", "200"]
|
|
2036
2082
|
},
|
|
2037
2083
|
disabled: {
|
|
2038
|
-
fg: ["
|
|
2039
|
-
border: ["100", "900"]
|
|
2084
|
+
fg: ["400", "600"],
|
|
2085
|
+
border: ["100", "900"],
|
|
2086
|
+
placeholder: ["200", "800 50%"]
|
|
2040
2087
|
}
|
|
2041
2088
|
},
|
|
2042
2089
|
invalid: {
|
|
@@ -2053,6 +2100,13 @@ const defaultColorTokens = {
|
|
|
2053
2100
|
accent: {
|
|
2054
2101
|
fg: ["purple/700 70%", "purple/300 70%"]
|
|
2055
2102
|
},
|
|
2103
|
+
avatar: {
|
|
2104
|
+
"*": {
|
|
2105
|
+
_blend: ["screen", "multiply"],
|
|
2106
|
+
bg: ["500", "400"],
|
|
2107
|
+
fg: ["white", "black"]
|
|
2108
|
+
}
|
|
2109
|
+
},
|
|
2056
2110
|
badge: {
|
|
2057
2111
|
"*": {
|
|
2058
2112
|
bg: ["100", "900"],
|
|
@@ -2078,7 +2132,7 @@ const defaultColorTokens = {
|
|
|
2078
2132
|
fg: ["blue/700 70%", "blue/300 70%"]
|
|
2079
2133
|
},
|
|
2080
2134
|
muted: {
|
|
2081
|
-
bg: ["
|
|
2135
|
+
bg: ["50", "950"],
|
|
2082
2136
|
fg: ["700 75%", "300 75%"]
|
|
2083
2137
|
},
|
|
2084
2138
|
skeleton: {
|
|
@@ -2129,7 +2183,7 @@ const defaultColorTokens = {
|
|
|
2129
2183
|
fg: ["blue/200", "blue/600"]
|
|
2130
2184
|
},
|
|
2131
2185
|
muted: {
|
|
2132
|
-
bg: ["
|
|
2186
|
+
bg: ["500 10%", "400 10%"],
|
|
2133
2187
|
fg: ["100 70%", "900 70%"]
|
|
2134
2188
|
},
|
|
2135
2189
|
skeleton: {
|
|
@@ -2142,6 +2196,13 @@ const defaultColorTokens = {
|
|
|
2142
2196
|
accent: {
|
|
2143
2197
|
fg: ["200", "800"]
|
|
2144
2198
|
},
|
|
2199
|
+
avatar: {
|
|
2200
|
+
"*": {
|
|
2201
|
+
_blend: ["screen", "multiply"],
|
|
2202
|
+
bg: ["gray/100", "gray/900"],
|
|
2203
|
+
fg: ["white", "black"]
|
|
2204
|
+
}
|
|
2205
|
+
},
|
|
2145
2206
|
badge: {
|
|
2146
2207
|
"*": {
|
|
2147
2208
|
_hue: "gray",
|
|
@@ -2167,6 +2228,7 @@ const defaultColorTokens = {
|
|
|
2167
2228
|
fg: ["200", "800"]
|
|
2168
2229
|
},
|
|
2169
2230
|
muted: {
|
|
2231
|
+
bg: ["50 50%", "950 50%"],
|
|
2170
2232
|
fg: ["200", "800"]
|
|
2171
2233
|
}
|
|
2172
2234
|
}
|
|
@@ -3125,7 +3187,7 @@ function renderThemeColorState(value, options) {
|
|
|
3125
3187
|
accent: {
|
|
3126
3188
|
fg: renderColorValue(value.accent.fg, colorOptions)
|
|
3127
3189
|
},
|
|
3128
|
-
avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
|
|
3190
|
+
avatar: renderThemeColorAvatar(value.avatar, { baseBg: bg, colorPalette, blendMode }),
|
|
3129
3191
|
badge: renderThemeColorBadge(value.badge, { baseBg: bg, colorPalette, blendMode }),
|
|
3130
3192
|
bg,
|
|
3131
3193
|
border: renderColorValue(value.border, colorOptions),
|