@artsy/palette 41.0.0-canary.1423.31655.0 → 41.0.0-canary.1433.31866.0

package/dist/themes/Themes.story.js

@@ -32,7 +32,7 @@ var Theme = function Theme() {
     variant: "xxl",
     mb: 4
   }, "Theme"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Box, {
     as: "pre",
@@ -50,17 +50,17 @@ var Colors = function Colors() {
   }, "Color Palette"), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "sm"
   }, "The Artsy color palette has been updated to improve the accessibility. Each color has been adjusted to ensure sufficient contrast and has specific roles as to which colors can be used in conjunction with each other."), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "sm",
-    color: "black60"
+    color: "mono60"
   }, /*#__PURE__*/_react.default.createElement(_elements.GridColumns, null, /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 6
   }, "Color Value"), /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 6
   }, "Hex Value"))), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 6
   }), colors.map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
@@ -88,7 +88,7 @@ var Colors = function Colors() {
       alignItems: "center"
     }, /*#__PURE__*/_react.default.createElement(_elements.Text, {
       variant: "sm",
-      color: "black60"
+      color: "mono60"
     }, "color:\xA0"), /*#__PURE__*/_react.default.createElement(_elements.Text, {
       variant: "sm"
     }, value)));
@@ -105,7 +105,7 @@ var Spacing = function Spacing() {
     variant: "xxl",
     mb: 4
   }, "Spacing"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Join, {
     separator: /*#__PURE__*/_react.default.createElement(_elements.Spacer, {
@@ -122,7 +122,7 @@ var Spacing = function Spacing() {
     }, px, "px"), /*#__PURE__*/_react.default.createElement(_elements.Box, {
       width: px,
       height: 1,
-      bg: "black60"
+      bg: "mono60"
     }));
   })));
 };
@@ -133,7 +133,7 @@ var Grid = function Grid() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl"
   }, "Desktop"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.GridColumns, {
     my: 12,
@@ -143,12 +143,12 @@ var Grid = function Grid() {
     return /*#__PURE__*/_react.default.createElement(_elements.Column, {
       key: i,
       span: [1],
-      bg: "black10",
+      bg: "mono10",
       height: "100%"
     });
   })), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
     my: 12,
-    color: "black30"
+    color: "mono30"
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl"
   }, "Tablet"), /*#__PURE__*/_react.default.createElement(_elements.GridColumns, {
@@ -160,12 +160,12 @@ var Grid = function Grid() {
     return /*#__PURE__*/_react.default.createElement(_elements.Column, {
       key: i,
       span: [1],
-      bg: "black10",
+      bg: "mono10",
       height: "100%"
     });
   })), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
     my: 12,
-    color: "black30"
+    color: "mono30"
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl"
   }, "Mobile"), /*#__PURE__*/_react.default.createElement(_elements.GridColumns, {
@@ -178,7 +178,7 @@ var Grid = function Grid() {
     return /*#__PURE__*/_react.default.createElement(_elements.Column, {
       key: i,
       span: [1],
-      bg: "black10",
+      bg: "mono10",
       height: "100%"
     });
   })));
@@ -192,22 +192,22 @@ var Typography = function Typography() {
     variant: "xxl",
     mb: 4
   }, "Type Scale"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "sm",
-    color: "black60"
+    color: "mono60"
   }, /*#__PURE__*/_react.default.createElement(_elements.GridColumns, null, /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 6
   }, "Size"), /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 6
   }, "Details"))), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
     my: 4,
-    color: "black30"
+    color: "mono30"
   }), /*#__PURE__*/_react.default.createElement(_elements.Join, {
     separator: /*#__PURE__*/_react.default.createElement(_elements.Separator, {
       my: 4,
-      color: "black30"
+      color: "mono30"
     })
   }, treatments.map(function (name) {
     return /*#__PURE__*/_react.default.createElement(_elements.GridColumns, {
@@ -227,7 +227,7 @@ var Typography = function Typography() {
         variant: "sm"
       }, /*#__PURE__*/_react.default.createElement(_elements.Box, {
         as: "span",
-        color: "black60"
+        color: "mono60"
       }, key, ":"), " ", value);
     })));
   })));
@@ -239,10 +239,10 @@ var Buttons = function Buttons() {
     mb: 4
   }, "Buttons"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
     my: 12,
-    color: "black30"
+    color: "mono30"
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "sm",
-    color: "black60"
+    color: "mono60"
   }, /*#__PURE__*/_react.default.createElement(_elements.GridColumns, null, /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 2
   }, "Default"), /*#__PURE__*/_react.default.createElement(_elements.Column, {
@@ -255,7 +255,7 @@ var Buttons = function Buttons() {
     span: 2
   }, "Disabled"))), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
     my: 4,
-    color: "black30"
+    color: "mono30"
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "lg-display",
     my: 6
@@ -347,7 +347,7 @@ var Components = function Components() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl"
   }, "Components"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
@@ -377,7 +377,7 @@ var Components = function Components() {
     title: "Message Title",
     variant: "error"
   }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
@@ -413,14 +413,14 @@ var Components = function Components() {
     dismissable: true,
     variant: "brand"
   }, "This is placeholder text. Ut sodales nunc vitae est lacinia, nec tempus risus aliquam. Vestibulum sollicitudin eget tellus ac venenatis."), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
     my: 4
   }, "Pills"), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "sm",
-    color: "black60"
+    color: "mono60"
   }, /*#__PURE__*/_react.default.createElement(_elements.GridColumns, null, /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 3
   }, "Default"), /*#__PURE__*/_react.default.createElement(_elements.Column, {
@@ -430,7 +430,7 @@ var Components = function Components() {
   }, "Hover"), /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 3
   }, "Active"))), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 6
   }), /*#__PURE__*/_react.default.createElement(_elements.GridColumns, {
     gridRowGap: 6
@@ -458,7 +458,7 @@ var Components = function Components() {
       active: true
     }, "Active")));
   })), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
@@ -512,7 +512,7 @@ var Components = function Components() {
   }), /*#__PURE__*/_react.default.createElement(_elements.Tab, {
     name: "Default 05"
   })), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
@@ -558,7 +558,7 @@ var Components = function Components() {
   }), /*#__PURE__*/_react.default.createElement(_elements.Tab, {
     name: "Default 05"
   })), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
@@ -603,7 +603,7 @@ var Components = function Components() {
   }), /*#__PURE__*/_react.default.createElement(_elements.Step, {
     name: "Default 05"
   })), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
@@ -633,14 +633,14 @@ var Inputs = function Inputs() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl"
   }, "Inputs & Selections"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl",
     my: 6
   }, "Inputs"), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "sm",
-    color: "black60"
+    color: "mono60"
   }, /*#__PURE__*/_react.default.createElement(_elements.GridColumns, null, /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 2
   }, "Default"), /*#__PURE__*/_react.default.createElement(_elements.Column, {
@@ -655,7 +655,7 @@ var Inputs = function Inputs() {
     span: 2,
     wrap: true
   }, "Disabled"))), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 6
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     my: 6,
@@ -779,7 +779,7 @@ var Inputs = function Inputs() {
     my: 6
   }, "Selects"), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "sm",
-    color: "black60"
+    color: "mono60"
   }, /*#__PURE__*/_react.default.createElement(_elements.GridColumns, null, /*#__PURE__*/_react.default.createElement(_elements.Column, {
     span: 2
   }, "Default"), /*#__PURE__*/_react.default.createElement(_elements.Column, {
@@ -792,7 +792,7 @@ var Inputs = function Inputs() {
     span: 2,
     wrap: true
   }, "Disabled"))), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 6
   }), /*#__PURE__*/_react.default.createElement(_elements.Text, {
     my: 6,
@@ -927,7 +927,7 @@ var ContrastRatios = function ContrastRatios() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_elements.Text, {
     variant: "xxl"
   }, "Contrast Ratios"), /*#__PURE__*/_react.default.createElement(_elements.Separator, {
-    color: "black30",
+    color: "mono30",
     my: 12
   }), /*#__PURE__*/_react.default.createElement(_elements.GridColumns, null, [_Theme.THEME, _v3Dark.THEME_DARK].map(function (theme) {
     return /*#__PURE__*/_react.default.createElement(_elements.Column, {
@@ -964,13 +964,13 @@ var ContrastRatioSwatch = function ContrastRatioSwatch(_ref7) {
   var debouncedSetValue = (0, _react.useMemo)(function () {
     return (0, _esToolkit.debounce)(setValue, 500);
   }, []);
-  var numerator = contrastRatio(value, theme.colors.white100);
+  var numerator = contrastRatio(value, theme.colors.mono0);
   return /*#__PURE__*/_react.default.createElement(_elements.Stack, {
     key: value,
     gap: 1,
     flexDirection: "row",
     flex: 1,
-    bg: theme.colors.white100,
+    bg: theme.colors.mono0,
     color: value,
     alignItems: "center",
     justifyContent: "space-between",
@@ -1003,25 +1003,25 @@ var ContrastRatioSwatch = function ContrastRatioSwatch(_ref7) {
     gap: 0.5
   }, numerator > 4.5 ? /*#__PURE__*/_react.default.createElement(_CheckmarkFillIcon.default, {
     fill: "green100",
-    bg: "white100",
+    bg: "mono0",
     style: {
       borderRadius: "50%"
     }
   }) : /*#__PURE__*/_react.default.createElement(_CloseFillIcon.default, {
     fill: "red100",
-    bg: "white100",
+    bg: "mono0",
     style: {
       borderRadius: "50%"
     }
   }), numerator > 3 ? /*#__PURE__*/_react.default.createElement(_CheckmarkFillIcon.default, {
     fill: "green100",
-    bg: "white100",
+    bg: "mono0",
     style: {
       borderRadius: "50%"
     }
   }) : /*#__PURE__*/_react.default.createElement(_CloseFillIcon.default, {
     fill: "red100",
-    bg: "white100",
+    bg: "mono0",
     style: {
       borderRadius: "50%"
     }