@automattic/vip-design-system 0.27.11 → 0.27.12

package/.storybook/decorators/withColorMode.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import { makeDecorator } from '@storybook/addons';
 import { useColorMode } from 'theme-ui';
+import { getColor } from '../../src/system/theme/getColor';
 
 // These need to be updated to import VIP design tokens;
-const lightBackground = '#ffffff';
+const lightBackground = getColor( 'background', 'primary' );
 const darkBackground = '#1C1C1B';
 
 export const backgrounds = {

package/build/system/Accordion/Accordion.js

@@ -60,7 +60,7 @@ var Item = function Item(_ref) {
       overflow: 'hidden',
       borderWidth: '0 1px 1px 1px',
       borderStyle: 'solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       '&:first-of-type': {
         borderTopWidth: '1px',
         borderTopLeftRadius: 4,
@@ -111,7 +111,6 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         justifyContent: 'space-between',
         fontSize: 1,
         fontWeight: 600,
-        textTransform: 'uppercase',
         '&[data-state="closed"]': {
           backgroundColor: function backgroundColor(_ref3) {
             var accordion = _ref3.accordion;
@@ -123,17 +122,15 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
             var accordion = _ref4.accordion;
             return accordion.background.open;
           },
-          borderBottom: function borderBottom(_ref5) {
-            var colors = _ref5.colors;
-            return "1px solid " + colors.border;
-          },
+          borderBottom: '1px solid',
+          borderBottomColor: 'borders.2',
           '.vip-accordion-trigger-indicator': {
             transform: 'rotate(270deg)'
           }
         },
         '&:hover': {
-          backgroundColor: function backgroundColor(_ref6) {
-            var accordion = _ref6.accordion;
+          backgroundColor: function backgroundColor(_ref5) {
+            var accordion = _ref5.accordion;
             return accordion.background.hover;
           }
         }
@@ -144,7 +141,7 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         className: "vip-accordion-trigger-indicator",
         sx: {
           fontSize: 3,
-          color: 'text',
+          color: 'icon.primary',
           transform: 'rotate(90deg)',
           transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)'
         },
@@ -162,15 +159,15 @@ Trigger.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
-  var children = _ref7.children,
-      icon = _ref7.icon,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded3);
+var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref6, forwardedRef) {
+  var children = _ref6.children,
+      icon = _ref6.icon,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref6, _excluded3);
   return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: [(0, _jsxRuntime.jsx)("span", {
       sx: {
-        color: 'text',
+        color: 'icon.primary',
         fontSize: 3
       },
       children: icon
@@ -193,11 +190,11 @@ TriggerWithIcon.propTypes = {
   icon: _propTypes["default"].node.isRequired
 };
 
-var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forwardedRef) {
-  var children = _ref8.children,
-      _ref8$sx = _ref8.sx,
-      sx = _ref8$sx === void 0 ? {} : _ref8$sx,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref8, _excluded4);
+var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
+  var children = _ref7.children,
+      _ref7$sx = _ref7.sx,
+      sx = _ref7$sx === void 0 ? {} : _ref7$sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded4);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       backgroundColor: 'transparent',
@@ -226,12 +223,12 @@ Content.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref9, forwardRef) {
-  var _ref9$sx = _ref9.sx,
-      sx = _ref9$sx === void 0 ? {} : _ref9$sx,
-      children = _ref9.children,
-      className = _ref9.className,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref9, _excluded5);
+var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forwardRef) {
+  var _ref8$sx = _ref8.sx,
+      sx = _ref8$sx === void 0 ? {} : _ref8$sx,
+      children = _ref8.children,
+      className = _ref8.className,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref8, _excluded5);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, (0, _extends2["default"])({
     className: (0, _classnames["default"])('vip-accordion-component', className),
     collapsible: true,

package/build/system/Badge/Badge.js

@@ -33,14 +33,26 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
     sx: (0, _extends2["default"])({
       fontSize: 0,
       padding: 0,
-      bg: variant + ".20",
-      color: variant + ".100",
+      bg: "tag." + variant + ".background",
+      color: "tag." + variant + ".text",
       py: 1,
       verticalAlign: 'middle',
       px: 2,
       display: 'inline-block',
       borderRadius: 1,
-      fontWeight: 'heading'
+      fontWeight: 'heading',
+      '&:hover, &:focus': {
+        backgroundColor: "tag." + variant + ".hover"
+      },
+      a: {
+        color: "tag." + variant + ".text",
+        '&:hover, &:focus, &:active': {
+          textDecoration: 'none'
+        },
+        '&:active': {
+          color: variant + ".active"
+        }
+      }
     }, sx),
     className: (0, _classnames["default"])('vip-badge-component', className),
     ref: forwardRef

package/build/system/Badge/Badge.stories.js

@@ -1,7 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithLinks = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _ = require("..");
 
@@ -16,10 +20,80 @@ var _default = {
 };
 exports["default"] = _default;
 
+var Template = function Template(props) {
+  return (0, _jsxRuntime.jsx)(_.Badge, (0, _extends2["default"])({}, props, {
+    sx: {
+      m: 2
+    }
+  }));
+};
+
+var TemplateLink = function TemplateLink(props) {
+  return (0, _jsxRuntime.jsx)(Template, (0, _extends2["default"])({}, props, {
+    sx: {
+      m: 2
+    },
+    children: (0, _jsxRuntime.jsx)("a", {
+      href: "http://google.com",
+      children: "Google.com"
+    })
+  }));
+};
+
 var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Badge, {
-    children: "Badge"
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(Template, {
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "red",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "yellow",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "green",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "gray",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "orange",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "gold",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "pink",
+      children: "Badge"
+    }), (0, _jsxRuntime.jsx)(Template, {
+      variant: "salmon",
+      children: "Badge"
+    })]
+  });
+};
+
+exports.Default = Default;
+
+var WithLinks = function WithLinks() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(TemplateLink, {}), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "red"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "yellow"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "green"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "gray"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "orange"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "gold"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "pink"
+    }), (0, _jsxRuntime.jsx)(TemplateLink, {
+      variant: "salmon"
+    })]
   });
 };
 
-exports.Default = Default;
+exports.WithLinks = WithLinks;

package/build/system/Button/Button.stories.js

@@ -7,6 +7,12 @@ exports["default"] = exports.WithOnClick = exports.Link = exports.Default = void
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
+var _bi = require("react-icons/bi");
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -22,41 +28,82 @@ var _default = {
   title: 'Button',
   component: _.Button,
   argTypes: {
-    children: {
-      table: {
-        type: {
-          summary: 'node'
-        }
-      },
+    children: {},
+    disabled: {
       control: {
-        type: 'text'
-      },
-      type: {
-        required: true
+        type: 'boolean'
       }
     },
     variant: {
-      table: {
-        type: {
-          summary: 'string'
-        },
-        defaultValue: {
-          summary: 'primary'
-        }
-      },
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'text']
-      }
+      type: 'select',
+      options: ['primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display']
     }
   }
 };
 exports["default"] = _default;
 
 var Template = function Template(args) {
-  return (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({}, args, {
-    children: "Submit"
-  }));
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({}, args, {
+      children: "Primary"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "secondary",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Secondary"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "tertiary",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Tertiary"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "ghost",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Ghost"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "display",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Display"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "danger",
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Danger"
+    })), (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({
+      variant: "text",
+      sx: {
+        ml: 2
+      },
+      as: "a",
+      href: "https://google/com"
+    }, args, {
+      children: "Button link"
+    })), (0, _jsxRuntime.jsxs)(_.Button, (0, _extends2["default"])({
+      variant: "icon",
+      sx: {
+        ml: 2
+      },
+      type: "button"
+    }, args, {
+      children: [(0, _jsxRuntime.jsx)(_bi.BiCalendarHeart, {
+        size: 24
+      }), (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: "domain.com"
+      })]
+    }))]
+  });
 };
 
 var Default = Template.bind({});

package/build/system/Code/Code.js

@@ -40,8 +40,8 @@ var Code = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
     sx: {
       fontSize: 1,
       display: 'block',
-      bg: 'grey.90',
-      color: 'grey.10',
+      bg: 'layer.inverse',
+      color: 'texts.inverse',
       borderRadius: 1,
       py: 2,
       px: 3,
@@ -72,18 +72,17 @@ var Code = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
     children: [codeDom, (0, _jsxRuntime.jsx)("button", {
       "aria-label": "Copy code",
       sx: {
-        bg: 'grey.10',
+        bg: 'notice.background.warning',
         borderTopRightRadius: 1,
         borderWidth: 0,
-        color: 'muted',
-        opacity: 0.8,
+        color: 'notice.text.warning',
         paddingBottom: 1,
         paddingLeft: 2,
         paddingRight: 2,
         paddingTop: 1,
         position: 'absolute',
         right: 0,
-        top: '-1px',
+        top: 0,
         '&:hover': {
           opacity: 1,
           cursor: 'pointer'

package/build/system/Dialog/DialogButton.js

@@ -41,7 +41,7 @@ var DialogButton = function DialogButton(_ref) {
       as: "span",
       sx: {
         mb: 0,
-        color: 'muted',
+        color: 'heading',
         mr: 2,
         flex: '0 0 auto'
       },
@@ -53,7 +53,7 @@ var DialogButton = function DialogButton(_ref) {
         flex: '1 1 auto',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        color: 'heading',
+        color: 'input.text',
         textOverflow: 'ellipsis'
       },
       children: value

package/build/system/Form/Checkbox.js

@@ -15,6 +15,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
 
+var _Input = require("./Input.styles");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["disabled"];
@@ -25,36 +27,31 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledCheckbox = function StyledCheckbox(props) {
   return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Root, (0, _extends2["default"])({
-    sx: {
+    sx: (0, _extends2["default"])({
       all: 'unset',
-      backgroundColor: 'grey.10',
+      backgroundColor: _Input.inputBaseBackground
+    }, _Input.baseControlBorderStyle, _Input.baseControlFocusStyle, {
       width: 16,
       height: 16,
       borderRadius: 1,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      '&:hover': {
-        backgroundColor: 'grey.20'
-      },
-      '&:focus': {
-        boxShadow: '0 0 0 2px black'
-      },
       '&[data-state=checked]': {
-        backgroundColor: 'primary',
-        color: 'brand.0'
+        backgroundColor: 'link',
+        color: 'link'
       },
       svg: {
         display: 'block'
       }
-    }
+    })
   }, props));
 };
 
 var StyledIndicator = function StyledIndicator(props) {
   return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Indicator, (0, _extends2["default"])({
     sx: {
-      color: 'brand.0'
+      color: 'white'
     }
   }, props));
 };
@@ -64,8 +61,7 @@ var Checkbox = function Checkbox(_ref) {
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(StyledCheckbox, (0, _extends2["default"])({
     sx: {
-      opacity: disabled ? 0.4 : 1,
-      border: 'none'
+      opacity: disabled ? 0.4 : 1
     },
     disabled: disabled
   }, props, {

package/build/system/Form/Checkbox.stories.js

@@ -38,8 +38,8 @@ var Default = function Default() {
       setChecked2 = _useState2[1];
 
   return (0, _jsxRuntime.jsx)(_.Form.Root, {
-    children: (0, _jsxRuntime.jsxs)("fieldset", {
-      children: [(0, _jsxRuntime.jsx)("legend", {
+    children: (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
+      children: [(0, _jsxRuntime.jsx)(_.Form.Legend, {
         children: "Tell me your prefereces"
       }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
         sx: {

package/build/system/Form/InlineSelect.js

@@ -98,23 +98,26 @@ var InlineSelect = function InlineSelect(_ref) {
       sx: {
         '.select__control': {
           background: 'none',
-          color: 'heading'
+          color: 'input.text'
         },
         '.select__single-value': {
-          color: 'heading',
+          color: 'input.text',
           px: 1
         },
         '.react-select__option': {
-          bg: 'grey.10',
+          bg: 'input.background',
           '&:hover': {
-            bg: 'grey.10'
+            bg: 'input.background'
           }
         },
         '.select__option--is-focused': {
-          bg: 'grey.10'
+          bg: 'input.background'
         },
         '.select__menu': {
-          borderColor: 'border'
+          borderColor: 'input.border'
+        },
+        '.select__placeholder': {
+          color: 'input.placeholder'
         }
       }
     }, props))

package/build/system/Form/Input.js

@@ -5,10 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.Input = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,37 +17,21 @@ var _ = require("../");
 
 var _themeUi = require("theme-ui");
 
+var _Input = require("./Input.styles");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "label", "forLabel", "hasError", "required", "sx", "errorMessage"];
-var inputStyles = {
-  unset: 'all',
-  border: '1px solid',
-  borderColor: 'border',
-  backgroundColor: 'card',
-  borderRadius: 1,
+var inputStyles = (0, _extends2["default"])({
+  unset: 'all'
+}, _Input.baseControlStyle, {
   lineHeight: 'inherit',
   px: 3,
   py: 2,
   fontSize: 2,
   mb: 2,
-  color: 'text',
-  display: 'block',
-  width: '100%',
-  '&:focus': function focus(theme) {
-    return theme.outline;
-  },
-  '&:focus-visible': function focusVisible(theme) {
-    return theme.outline;
-  },
-  '&:disabled': {
-    bg: 'backgroundSecondary'
-  },
-  '&::placeholder': {
-    color: 'placeholder',
-    opacity: 1
-  }
-};
+  variant: 'inputs.default'
+});
 
 var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,

package/build/system/Form/Input.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.inputBaseText = exports.inputBaseBackground = exports.baseControlStyle = exports.baseControlFocusStyle = exports.baseControlBorderStyle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var baseControlBorderStyle = {
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'input.border.default'
+};
+exports.baseControlBorderStyle = baseControlBorderStyle;
+var inputBaseText = 'input.text';
+exports.inputBaseText = inputBaseText;
+var inputBaseBackground = 'input.background';
+exports.inputBaseBackground = inputBaseBackground;
+var baseControlFocusStyle = {
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  },
+  '&:focus-within': function focusWithin(theme) {
+    return theme.outline;
+  }
+};
+exports.baseControlFocusStyle = baseControlFocusStyle;
+var baseControlStyle = (0, _extends2["default"])({}, baseControlBorderStyle, {
+  backgroundColor: inputBaseBackground,
+  color: inputBaseText,
+  borderRadius: 1,
+  display: 'block',
+  width: '100%'
+}, baseControlFocusStyle, {
+  '&:disabled': {
+    borderColor: 'input.border.disabled'
+  },
+  '&::placeholder': {
+    color: 'input.placeholder',
+    opacity: 1
+  }
+});
+exports.baseControlStyle = baseControlStyle;

package/build/system/Form/Label.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Label = void 0;
+exports.baseLabelStyle = exports.baseLabelColor = exports.Label = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -18,6 +18,15 @@ var _RequiredLabel = require("./RequiredLabel");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "children", "required"];
+var baseLabelColor = 'heading';
+exports.baseLabelColor = baseLabelColor;
+var baseLabelStyle = {
+  fontWeight: 500,
+  fontSize: 2,
+  lineHeight: 1.5,
+  color: baseLabelColor
+};
+exports.baseLabelStyle = baseLabelStyle;
 
 var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
@@ -25,13 +34,9 @@ var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
       required = _ref.required,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)("label", (0, _extends2["default"])({
-    sx: (0, _extends2["default"])({
-      fontWeight: 500,
-      fontSize: 2,
-      lineHeight: 1.5,
+    sx: (0, _extends2["default"])({}, baseLabelStyle, {
       display: 'block',
-      mb: 2,
-      color: 'muted'
+      mb: 2
     }, sx),
     ref: forwardRef
   }, rest, {