@automattic/vip-design-system 0.12.0 → 0.14.1

package/build/system/NewDialog/DialogOverlay.test.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reactDialog = require("@radix-ui/react-dialog");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _DialogOverlay = require("./DialogOverlay");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+var Wrapper = function Wrapper(props) {
+  return (0, _jsxRuntime.jsx)(_reactDialog.Dialog, (0, _extends2["default"])({
+    open: true
+  }, props));
+};
+
+describe('<DialogOverlay />', function () {
+  it('renders the DialogOverlay component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {})
+            })), container = _render.container; // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 4;
+            return (0, _jestAxe.axe)(container);
+
+          case 4:
+            _context.t1 = _context.sent;
+            _context.next = 7;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewDialog/DialogTitle.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.DialogTitle = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var DialogTitle = function DialogTitle(_ref) {
+  var title = _ref.title,
+      _ref$hidden = _ref.hidden,
+      hidden = _ref$hidden === void 0 ? false : _ref$hidden;
+  var titleNode = title;
+
+  if (hidden) {
+    titleNode = (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+      children: titleNode
+    });
+  }
+
+  return (0, _jsxRuntime.jsx)(DialogPrimitive.Title, {
+    children: titleNode
+  });
+};
+
+exports.DialogTitle = DialogTitle;
+DialogTitle.propTypes = {
+  title: _propTypes["default"].string,
+  hidden: _propTypes["default"].bool
+};

package/build/system/NewDialog/DialogTitle.test.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _reactDialog = require("@radix-ui/react-dialog");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _DialogTitle = require("./DialogTitle");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+// If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
+var Wrapper = function Wrapper(props) {
+  return (0, _jsxRuntime.jsx)(_reactDialog.Dialog, (0, _extends2["default"])({
+    open: true
+  }, props));
+};
+
+var defaultProps = {
+  title: 'This is a DialogTitle'
+};
+
+var getTitle = function getTitle() {
+  return _react.screen.getByRole('heading');
+};
+
+describe('<DialogTitle />', function () {
+  it('renders the DialogTitle component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, (0, _extends2["default"])({}, defaultProps))
+            })), container = _render.container;
+            expect(getTitle()).toHaveTextContent(defaultProps.title); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders text visually hidden for a11y purposes', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(Wrapper, {
+              children: (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, (0, _extends2["default"])({}, defaultProps, {
+                hidden: true
+              }))
+            })), container = _render2.container; // Small check to make sure we are hiding with the css class
+
+            expect(container.innerHTML).toContain('screen-reader-text');
+            expect(getTitle()).toHaveTextContent(defaultProps.title);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/NewDialog/NewDialog.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.NewDialog = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var DialogPrimitive = _interopRequireWildcard(require("@radix-ui/react-dialog"));
+
+var _DialogOverlay = require("./DialogOverlay");
+
+var _DialogClose = require("./DialogClose");
+
+var _DialogTitle = require("./DialogTitle");
+
+var _DialogDescription = require("./DialogDescription");
+
+var _DialogContent = require("./DialogContent");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var NewDialog = function NewDialog(_ref) {
+  var _ref$trigger = _ref.trigger,
+      trigger = _ref$trigger === void 0 ? null : _ref$trigger,
+      description = _ref.description,
+      title = _ref.title,
+      _ref$content = _ref.content,
+      content = _ref$content === void 0 ? null : _ref$content,
+      _ref$showHeading = _ref.showHeading,
+      showHeading = _ref$showHeading === void 0 ? true : _ref$showHeading,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      extraStyles = _ref.style,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      _ref$allowPinchZoom = _ref.allowPinchZoom,
+      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
+      _ref$onOpenAutoFocus = _ref.onOpenAutoFocus,
+      onOpenAutoFocus = _ref$onOpenAutoFocus === void 0 ? null : _ref$onOpenAutoFocus,
+      _ref$onCloseAutoFocus = _ref.onCloseAutoFocus,
+      onCloseAutoFocus = _ref$onCloseAutoFocus === void 0 ? null : _ref$onCloseAutoFocus,
+      _ref$onEscapeKeyDown = _ref.onEscapeKeyDown,
+      onEscapeKeyDown = _ref$onEscapeKeyDown === void 0 ? null : _ref$onEscapeKeyDown,
+      _ref$onPointerDownOut = _ref.onPointerDownOutside,
+      onPointerDownOutside = _ref$onPointerDownOut === void 0 ? null : _ref$onPointerDownOut,
+      _ref$onInteractOutsid = _ref.onInteractOutside,
+      onInteractOutside = _ref$onInteractOutsid === void 0 ? null : _ref$onInteractOutsid;
+
+  if (disabled) {
+    return;
+  }
+
+  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
+    defaultOpen: defaultOpen,
+    allowPinchZoom: allowPinchZoom,
+    children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
+      asChild: true,
+      children: trigger
+    }), (0, _jsxRuntime.jsxs)(DialogPrimitive.Portal, {
+      children: [(0, _jsxRuntime.jsx)(_DialogOverlay.DialogOverlay, {}), (0, _jsxRuntime.jsxs)(DialogPrimitive.Content, {
+        className: "vip-dialog-component",
+        sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles),
+        onOpenAutoFocus: onOpenAutoFocus,
+        onCloseAutoFocus: onCloseAutoFocus,
+        onEscapeKeyDown: onEscapeKeyDown,
+        onPointerDownOutside: onPointerDownOutside,
+        onInteractOutside: onInteractOutside,
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogClose, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+          title: title,
+          hidden: !showHeading
+        }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
+          description: description,
+          hidden: !showHeading
+        }), (0, _jsxRuntime.jsx)("div", {
+          role: "document",
+          children: content
+        })]
+      })]
+    })]
+  });
+};
+
+exports.NewDialog = NewDialog;
+NewDialog.propTypes = {
+  trigger: _propTypes["default"].node.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  description: _propTypes["default"].string.isRequired,
+  content: _propTypes["default"].node,
+  showHeading: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  style: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].func]),
+  // Radix DialogPrimitive.Root properties
+  // https://www.radix-ui.com/docs/primitives/components/dialog#root
+  defaultOpen: _propTypes["default"].bool,
+  allowPinchZoom: _propTypes["default"].bool,
+  // Radix DialogPrimitive.Content properties
+  // https://www.radix-ui.com/docs/primitives/components/dialog#content
+  onOpenAutoFocus: _propTypes["default"].func,
+  onCloseAutoFocus: _propTypes["default"].func,
+  onEscapeKeyDown: _propTypes["default"].func,
+  onPointerDownOutside: _propTypes["default"].func,
+  onInteractOutside: _propTypes["default"].func
+};

package/build/system/NewDialog/NewDialog.stories.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.AutoOpen = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _system = require("../../system");
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
+var _NewDialog = require("./NewDialog");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'NewDialog',
+  component: _NewDialog.NewDialog
+};
+exports["default"] = _default;
+var defaultProps = {
+  title: 'User settings',
+  description: 'Use this form to manage your settings'
+};
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Regular Dialog where the title and description are built-in and the content is provided by the user."
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      })
+    }))]
+  });
+};
+
+exports.Default = Default;
+
+var AutoOpen = function AutoOpen() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Auto Opens when rendered. Press escape to close it."
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      defaultOpen: true,
+      trigger: (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "hey"
+      })
+    }))]
+  });
+};
+
+exports.AutoOpen = AutoOpen;
+
+var HiddenHeadings = function HiddenHeadings() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Title and description are hidden, but still announced using a screen reader. Activate VoiceOver or any similar screen reader to listen to: Custom dialog title, Description of the dialog content."
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      title: "Custom dialog title",
+      showHeading: false,
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "My Custom Content"
+        }), (0, _jsxRuntime.jsxs)("form", {
+          children: [(0, _jsxRuntime.jsx)(_system.Label, {
+            htmlFor: "username",
+            children: "User name"
+          }), (0, _jsxRuntime.jsx)(_system.Input, {
+            type: "text",
+            name: "username",
+            id: "username"
+          }), (0, _jsxRuntime.jsx)(_system.Button, {
+            type: "submit",
+            children: "Submit"
+          })]
+        }), (0, _jsxRuntime.jsx)("h3", {
+          children: "Continue here"
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "This is an example."
+        })]
+      })
+    }))]
+  });
+};
+
+exports.HiddenHeadings = HiddenHeadings;
+
+var CustomStyling = function CustomStyling() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_system.Text, {
+      sx: {
+        fontSize: 3,
+        mb: 3
+      },
+      children: "Custom Styling on Dialog Content"
+    }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
+      defaultOpen: true,
+      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
+        children: "Trigger Dialog"
+      }),
+      title: "Custom dialog title",
+      style: {
+        background: function background(theme) {
+          return "" + theme.colors.primary;
+        },
+        padding: 5,
+        borderRadius: 20,
+        h2: {
+          fontSize: 4,
+          color: function color(theme) {
+            return "" + theme.colors.text;
+          }
+        },
+        h3: {
+          fontSize: 3,
+          color: function color(theme) {
+            return "" + theme.colors.heading;
+          }
+        },
+        p: {
+          color: 'white'
+        },
+        'button[type="button"]:focus': {
+          outlineColor: 'white',
+          color: 'white'
+        }
+      },
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "This is Read because it is Custom"
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "This Dialog is styled using the `sx` property."
+        })]
+      })
+    }))]
+  });
+};
+
+exports.CustomStyling = CustomStyling;

package/build/system/NewDialog/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _NewDialog = require("./NewDialog");
+
+exports.NewDialog = _NewDialog.NewDialog;

package/build/system/Notice/Notice.js

@@ -42,10 +42,10 @@ var NoticeIcon = function NoticeIcon(_ref) {
 
   return (0, _jsxRuntime.jsx)(Icon, {
     sx: {
-      marginRight: 2,
       color: color,
       flex: '0 0 auto'
-    }
+    },
+    size: 21
   });
 };
 
@@ -106,12 +106,12 @@ var Notice = function Notice(_ref2) {
           alignItems: 'center'
         },
         children: (0, _jsxRuntime.jsx)(NoticeIcon, {
-          color: color + ".100",
+          color: color + ".200",
           variant: variant
         })
       }), (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {
-          ml: 23
+          ml: 3
         },
         children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
           variant: "h4",

package/build/system/index.js

@@ -42,6 +42,10 @@ exports.DialogMenuItem = _Dialog.DialogMenuItem;
 exports.DialogTrigger = _Dialog.DialogTrigger;
 exports.DialogContent = _Dialog.DialogContent;
 
+var _NewDialog = require("./NewDialog");
+
+exports.NewDialog = _NewDialog.NewDialog;
+
 var _ConfirmationDialog = require("./ConfirmationDialog");
 
 exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;

package/build/system/theme/getColor.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getColor = void 0;
+
+var _valetColor = _interopRequireDefault(require("../../../tokens/valet-color.json"));
+
+/**
+ * Internal dependencies
+ */
+var ThemeColors = _valetColor["default"]['productive-color-wpvip'];
+var CoreColors = _valetColor["default"]['valet-core'];
+
+var getColor = function getColor(color, variant) {
+  if (variant === void 0) {
+    variant = 'default';
+  }
+
+  if (!ThemeColors[color]) {
+    return '#000000';
+  }
+
+  var colorValue = ThemeColors[color][variant].value;
+
+  if (colorValue.startsWith('{')) {
+    var _colorValue$replace$s = colorValue.replace(/[{}]/g, '').split('.'),
+        name = _colorValue$replace$s[0],
+        number = _colorValue$replace$s[1]; // Some colors are flat, there is no sub values.
+
+
+    if (CoreColors[name][number]) {
+      return CoreColors[name][number].value;
+    }
+
+    return CoreColors[name].value;
+  }
+
+  return colorValue;
+};
+
+exports.getColor = getColor;

package/build/system/theme/index.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _colors = require("./colors");
 
+var _getColor = require("./getColor");
+
 /**
  * Internal dependencies
  */
@@ -59,7 +61,14 @@ var textStyles = {
     letterSpacing: '.05em'
   }
 };
+var outline = {
+  outlineStyle: 'solid',
+  outlineColor: '#ffffff',
+  outlineWidth: '1px',
+  boxShadow: "0 0 0 1px #fff, 0 0 0 3px " + (0, _getColor.getColor)('focus')
+};
 var _default = {
+  outline: outline,
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
     body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -86,8 +95,8 @@ var _default = {
   },
   initialColorModeName: 'light',
   colors: (0, _extends2["default"])({
-    text: _colors.light.grey['90'],
-    heading: _colors.light.grey['100'],
+    text: (0, _getColor.getColor)('text', 'secondary'),
+    heading: (0, _getColor.getColor)('text', 'primary'),
     background: '#fdfdfd',
     backgroundSecondary: _colors.light.grey['10'],
     primary: _colors.light.brand['70'],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.12.0",
+	"version": "0.14.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -17,10 +17,12 @@
 		"watch": "npm run build -- --watch"
 	},
 	"dependencies": {
-		"@radix-ui/react-checkbox": "^0.1.0",
-		"@radix-ui/react-radio-group": "^0.1.0",
+		"@radix-ui/react-checkbox": "^0.1.5",
+		"@radix-ui/react-dialog": "^0.1.7",
+		"@radix-ui/react-radio-group": "^0.1.5",
 		"@radix-ui/react-switch": "^0.1.5",
-		"@radix-ui/react-tooltip": "^0.1.0",
+		"@radix-ui/react-tooltip": "^0.1.7",
+		"@radix-ui/react-visually-hidden": "^0.1.4",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",

package/src/system/Button/Button.js

@@ -16,8 +16,10 @@ const Button = ( { sx, ...props } ) => (
 			justifyContent: 'center',
 			height: '36px',
 			py: 0,
+			'&:focus': theme => theme.outline,
+			'&:focus-visible': theme => theme.outline,
 			'&:disabled': {
-				opacity: 0.5,
+				opacity: 0.7,
 				cursor: 'not-allowed',
 				pointerEvents: 'all',
 			},