@sanity/ui 0.37.16 → 0.37.19

package/lib/sanity-ui.module.js

@@ -1975,18 +1975,20 @@ var color = createColorTheme({
         name = _ref.name;
 
     if (name === 'default') {
-      var _skeletonFrom = dark ? hues.gray[900].hex : hues.gray[100].hex;
+      var _tints = hues.gray;
+
+      var _skeletonFrom = dark ? _tints[900].hex : _tints[100].hex;
 
       return {
         fg: dark ? white$1.hex : black$1.hex,
         bg: dark ? black$1.hex : white$1.hex,
-        border: hues.gray[dark ? 800 : 200].hex,
+        border: _tints[dark ? 800 : 200].hex,
         focusRing: hues.blue[dark ? 500 : 500].hex,
         shadow: {
-          outline: rgba(hues.gray[500].hex, 0.4),
-          umbra: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.2),
-          penumbra: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.14),
-          ambient: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.12)
+          outline: rgba(_tints[500].hex, 0.4),
+          umbra: dark ? rgba(_tints[950].hex, 0.4) : rgba(_tints[500].hex, 0.2),
+          penumbra: dark ? rgba(_tints[950].hex, 0.28) : rgba(_tints[500].hex, 0.14),
+          ambient: dark ? rgba(_tints[950].hex, 0.24) : rgba(_tints[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom,
@@ -1996,18 +1998,18 @@ var color = createColorTheme({
     }
 
     if (name === 'transparent') {
-      var _tints = tones["default"];
-      var _skeletonFrom2 = _tints[dark ? 800 : 200].hex;
+      var _tints2 = tones["default"];
+      var _skeletonFrom2 = _tints2[dark ? 800 : 200].hex;
       return {
-        fg: _tints[dark ? 100 : 900].hex,
-        bg: _tints[dark ? 950 : 50].hex,
-        border: _tints[dark ? 800 : 300].hex,
+        fg: _tints2[dark ? 100 : 900].hex,
+        bg: _tints2[dark ? 950 : 50].hex,
+        border: _tints2[dark ? 800 : 300].hex,
         focusRing: hues.blue[500].hex,
         shadow: {
-          outline: rgba(_tints[500].hex, dark ? 0.2 : 0.4),
-          umbra: rgba(dark ? black$1.hex : _tints[500].hex, 0.2),
-          penumbra: rgba(dark ? black$1.hex : _tints[500].hex, 0.14),
-          ambient: rgba(dark ? black$1.hex : _tints[500].hex, 0.12)
+          outline: rgba(_tints2[500].hex, 0.4),
+          umbra: dark ? rgba(_tints2[900].hex, 0.4) : rgba(_tints2[500].hex, 0.2),
+          penumbra: dark ? rgba(_tints2[900].hex, 0.28) : rgba(_tints2[500].hex, 0.14),
+          ambient: dark ? rgba(_tints2[900].hex, 0.24) : rgba(_tints2[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom2,
@@ -2024,10 +2026,10 @@ var color = createColorTheme({
       border: tints[dark ? 800 : 200].hex,
       focusRing: tints[500].hex,
       shadow: {
-        outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
-        umbra: rgba(dark ? black$1.hex : tints[500].hex, 0.2),
-        penumbra: rgba(dark ? black$1.hex : tints[500].hex, 0.14),
-        ambient: rgba(dark ? black$1.hex : tints[500].hex, 0.12)
+        outline: rgba(tints[500].hex, 0.4),
+        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
+        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
+        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12)
       },
       skeleton: {
         from: skeletonFrom,
@@ -6578,6 +6580,7 @@ var TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef) {
     "data-ui": "TextArea"
   }, /*#__PURE__*/React.createElement(InputRoot$1, null, /*#__PURE__*/React.createElement(Input$1, _extends({
     "data-as": "textarea",
+    "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone
   }, restProps, {
     "$fontSize": useArrayProp(fontSize),
@@ -6593,6 +6596,7 @@ var TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef) {
     "$radius": useArrayProp(radius),
     "$scheme": rootTheme.scheme,
     "$tone": rootTheme.tone,
+    "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone
   })));
 });
@@ -7732,7 +7736,7 @@ function dialogStyle(_ref) {
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: color.shadow.penumbra
+    background: color.shadow.umbra
   };
 }
 function responsiveDialogPositionStyle(props) {