@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.js
CHANGED
|
@@ -1734,9 +1734,9 @@ const defaultColorTokens = {
|
|
|
1734
1734
|
},
|
|
1735
1735
|
avatar: {
|
|
1736
1736
|
"*": {
|
|
1737
|
-
_blend: ["
|
|
1738
|
-
bg: ["
|
|
1739
|
-
fg: ["
|
|
1737
|
+
_blend: ["screen", "multiply"],
|
|
1738
|
+
bg: ["500", "400"],
|
|
1739
|
+
fg: ["white", "black"]
|
|
1740
1740
|
}
|
|
1741
1741
|
},
|
|
1742
1742
|
badge: {
|
|
@@ -1787,6 +1787,13 @@ const defaultColorTokens = {
|
|
|
1787
1787
|
accent: {
|
|
1788
1788
|
fg: ["100 70%", "900 70%"]
|
|
1789
1789
|
},
|
|
1790
|
+
avatar: {
|
|
1791
|
+
"*": {
|
|
1792
|
+
_blend: ["screen", "multiply"],
|
|
1793
|
+
bg: ["gray/500", "gray/400"],
|
|
1794
|
+
fg: ["white", "black"]
|
|
1795
|
+
}
|
|
1796
|
+
},
|
|
1790
1797
|
badge: {
|
|
1791
1798
|
"*": {
|
|
1792
1799
|
bg: ["gray/700", "gray/300"],
|
|
@@ -1796,9 +1803,13 @@ const defaultColorTokens = {
|
|
|
1796
1803
|
}
|
|
1797
1804
|
},
|
|
1798
1805
|
bg: ["300", "600"],
|
|
1806
|
+
code: {
|
|
1807
|
+
bg: ["950", "50"],
|
|
1808
|
+
fg: ["300", "600"]
|
|
1809
|
+
},
|
|
1799
1810
|
fg: ["300", "600"],
|
|
1800
1811
|
muted: {
|
|
1801
|
-
bg: ["
|
|
1812
|
+
bg: ["950", "50"],
|
|
1802
1813
|
fg: ["300", "600"]
|
|
1803
1814
|
},
|
|
1804
1815
|
kbd: {
|
|
@@ -1813,6 +1824,13 @@ const defaultColorTokens = {
|
|
|
1813
1824
|
},
|
|
1814
1825
|
default: {
|
|
1815
1826
|
"*": {
|
|
1827
|
+
avatar: {
|
|
1828
|
+
"*": {
|
|
1829
|
+
_blend: ["screen", "multiply"],
|
|
1830
|
+
bg: ["500", "400"],
|
|
1831
|
+
fg: ["white", "black"]
|
|
1832
|
+
}
|
|
1833
|
+
},
|
|
1816
1834
|
bg: ["800", "200"],
|
|
1817
1835
|
muted: {
|
|
1818
1836
|
bg: ["950", "50"],
|
|
@@ -1837,6 +1855,13 @@ const defaultColorTokens = {
|
|
|
1837
1855
|
accent: {
|
|
1838
1856
|
fg: ["purple/700 60%", "purple/300 70%"]
|
|
1839
1857
|
},
|
|
1858
|
+
avatar: {
|
|
1859
|
+
"*": {
|
|
1860
|
+
_blend: ["screen", "multiply"],
|
|
1861
|
+
bg: ["500", "400"],
|
|
1862
|
+
fg: ["white", "black"]
|
|
1863
|
+
}
|
|
1864
|
+
},
|
|
1840
1865
|
badge: {
|
|
1841
1866
|
"*": {
|
|
1842
1867
|
bg: ["100", "900"],
|
|
@@ -1887,6 +1912,13 @@ const defaultColorTokens = {
|
|
|
1887
1912
|
accent: {
|
|
1888
1913
|
fg: ["200", "800"]
|
|
1889
1914
|
},
|
|
1915
|
+
avatar: {
|
|
1916
|
+
"*": {
|
|
1917
|
+
_blend: ["screen", "multiply"],
|
|
1918
|
+
bg: ["gray/100", "gray/900"],
|
|
1919
|
+
fg: ["white", "black"]
|
|
1920
|
+
}
|
|
1921
|
+
},
|
|
1890
1922
|
badge: {
|
|
1891
1923
|
"*": {
|
|
1892
1924
|
_hue: "gray",
|
|
@@ -1904,7 +1936,7 @@ const defaultColorTokens = {
|
|
|
1904
1936
|
fg: ["400", "600"],
|
|
1905
1937
|
icon: ["300", "700"],
|
|
1906
1938
|
muted: {
|
|
1907
|
-
fg: ["
|
|
1939
|
+
fg: ["300", "700"]
|
|
1908
1940
|
},
|
|
1909
1941
|
kbd: {
|
|
1910
1942
|
bg: ["white", "black"],
|
|
@@ -1934,6 +1966,13 @@ const defaultColorTokens = {
|
|
|
1934
1966
|
accent: {
|
|
1935
1967
|
fg: ["purple/700 70%", "purple/300 70%"]
|
|
1936
1968
|
},
|
|
1969
|
+
avatar: {
|
|
1970
|
+
"*": {
|
|
1971
|
+
_blend: ["screen", "multiply"],
|
|
1972
|
+
bg: ["500", "400"],
|
|
1973
|
+
fg: ["white", "black"]
|
|
1974
|
+
}
|
|
1975
|
+
},
|
|
1937
1976
|
badge: {
|
|
1938
1977
|
"*": {
|
|
1939
1978
|
bg: ["100", "900"],
|
|
@@ -1986,6 +2025,13 @@ const defaultColorTokens = {
|
|
|
1986
2025
|
accent: {
|
|
1987
2026
|
fg: ["200", "800"]
|
|
1988
2027
|
},
|
|
2028
|
+
avatar: {
|
|
2029
|
+
"*": {
|
|
2030
|
+
_blend: ["screen", "multiply"],
|
|
2031
|
+
bg: ["gray/100", "gray/900"],
|
|
2032
|
+
fg: ["white", "black"]
|
|
2033
|
+
}
|
|
2034
|
+
},
|
|
1989
2035
|
badge: {
|
|
1990
2036
|
"*": {
|
|
1991
2037
|
_hue: "gray",
|
|
@@ -2037,8 +2083,9 @@ const defaultColorTokens = {
|
|
|
2037
2083
|
fg: ["800", "200"]
|
|
2038
2084
|
},
|
|
2039
2085
|
disabled: {
|
|
2040
|
-
fg: ["
|
|
2041
|
-
border: ["100", "900"]
|
|
2086
|
+
fg: ["400", "600"],
|
|
2087
|
+
border: ["100", "900"],
|
|
2088
|
+
placeholder: ["200", "800 50%"]
|
|
2042
2089
|
}
|
|
2043
2090
|
},
|
|
2044
2091
|
invalid: {
|
|
@@ -2055,6 +2102,13 @@ const defaultColorTokens = {
|
|
|
2055
2102
|
accent: {
|
|
2056
2103
|
fg: ["purple/700 70%", "purple/300 70%"]
|
|
2057
2104
|
},
|
|
2105
|
+
avatar: {
|
|
2106
|
+
"*": {
|
|
2107
|
+
_blend: ["screen", "multiply"],
|
|
2108
|
+
bg: ["500", "400"],
|
|
2109
|
+
fg: ["white", "black"]
|
|
2110
|
+
}
|
|
2111
|
+
},
|
|
2058
2112
|
badge: {
|
|
2059
2113
|
"*": {
|
|
2060
2114
|
bg: ["100", "900"],
|
|
@@ -2080,7 +2134,7 @@ const defaultColorTokens = {
|
|
|
2080
2134
|
fg: ["blue/700 70%", "blue/300 70%"]
|
|
2081
2135
|
},
|
|
2082
2136
|
muted: {
|
|
2083
|
-
bg: ["
|
|
2137
|
+
bg: ["50", "950"],
|
|
2084
2138
|
fg: ["700 75%", "300 75%"]
|
|
2085
2139
|
},
|
|
2086
2140
|
skeleton: {
|
|
@@ -2131,7 +2185,7 @@ const defaultColorTokens = {
|
|
|
2131
2185
|
fg: ["blue/200", "blue/600"]
|
|
2132
2186
|
},
|
|
2133
2187
|
muted: {
|
|
2134
|
-
bg: ["
|
|
2188
|
+
bg: ["500 10%", "400 10%"],
|
|
2135
2189
|
fg: ["100 70%", "900 70%"]
|
|
2136
2190
|
},
|
|
2137
2191
|
skeleton: {
|
|
@@ -2144,6 +2198,13 @@ const defaultColorTokens = {
|
|
|
2144
2198
|
accent: {
|
|
2145
2199
|
fg: ["200", "800"]
|
|
2146
2200
|
},
|
|
2201
|
+
avatar: {
|
|
2202
|
+
"*": {
|
|
2203
|
+
_blend: ["screen", "multiply"],
|
|
2204
|
+
bg: ["gray/100", "gray/900"],
|
|
2205
|
+
fg: ["white", "black"]
|
|
2206
|
+
}
|
|
2207
|
+
},
|
|
2147
2208
|
badge: {
|
|
2148
2209
|
"*": {
|
|
2149
2210
|
_hue: "gray",
|
|
@@ -2169,6 +2230,7 @@ const defaultColorTokens = {
|
|
|
2169
2230
|
fg: ["200", "800"]
|
|
2170
2231
|
},
|
|
2171
2232
|
muted: {
|
|
2233
|
+
bg: ["50 50%", "950 50%"],
|
|
2172
2234
|
fg: ["200", "800"]
|
|
2173
2235
|
}
|
|
2174
2236
|
}
|
|
@@ -3127,7 +3189,7 @@ function renderThemeColorState(value, options) {
|
|
|
3127
3189
|
accent: {
|
|
3128
3190
|
fg: renderColorValue(value.accent.fg, colorOptions)
|
|
3129
3191
|
},
|
|
3130
|
-
avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
|
|
3192
|
+
avatar: renderThemeColorAvatar(value.avatar, { baseBg: bg, colorPalette, blendMode }),
|
|
3131
3193
|
badge: renderThemeColorBadge(value.badge, { baseBg: bg, colorPalette, blendMode }),
|
|
3132
3194
|
bg,
|
|
3133
3195
|
border: renderColorValue(value.border, colorOptions),
|