@automattic/vip-design-system 0.28.0 → 0.28.1

package/build/system/Dialog/DialogButton.js

@@ -53,7 +53,7 @@ var DialogButton = function DialogButton(_ref) {
         flex: '1 1 auto',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        color: 'input.text',
+        color: 'input.text.default',
         textOverflow: 'ellipsis'
       },
       children: value

package/build/system/Form/InlineSelect.js

@@ -98,10 +98,10 @@ var InlineSelect = function InlineSelect(_ref) {
       sx: {
         '.select__control': {
           background: 'none',
-          color: 'input.text'
+          color: 'input.text.default'
         },
         '.select__single-value': {
-          color: 'input.text',
+          color: 'input.text.default',
           px: 1
         },
         '.react-select__option': {
@@ -117,7 +117,7 @@ var InlineSelect = function InlineSelect(_ref) {
           borderColor: 'input.border'
         },
         '.select__placeholder': {
-          color: 'input.placeholder'
+          color: 'input.text.placeholder'
         }
       }
     }, props))

package/build/system/Form/Input.js

@@ -26,6 +26,7 @@ var inputStyles = (0, _extends2["default"])({
   unset: 'all'
 }, _Input.baseControlStyle, {
   lineHeight: 'inherit',
+  height: '36px',
   px: 3,
   py: 2,
   fontSize: 2,

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

@@ -13,7 +13,7 @@ var baseControlBorderStyle = {
   borderColor: 'input.border.default'
 };
 exports.baseControlBorderStyle = baseControlBorderStyle;
-var inputBaseText = 'input.text';
+var inputBaseText = 'input.text.default';
 exports.inputBaseText = inputBaseText;
 var inputBaseBackground = 'input.background';
 exports.inputBaseBackground = inputBaseBackground;
@@ -40,7 +40,7 @@ var baseControlStyle = (0, _extends2["default"])({}, baseControlBorderStyle, {
     borderColor: 'input.border.disabled'
   },
   '&::placeholder': {
-    color: 'input.placeholder',
+    color: 'input.text.placeholder',
     opacity: 1
   }
 });

package/build/system/Form/Label.js

@@ -18,7 +18,7 @@ var _RequiredLabel = require("./RequiredLabel");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "children", "required"];
-var baseLabelColor = 'heading';
+var baseLabelColor = 'input.label.default';
 exports.baseLabelColor = baseLabelColor;
 var baseLabelStyle = {
   fontWeight: 500,

package/build/system/Form/SearchSelect.js

@@ -142,7 +142,7 @@ var SearchSelect = function SearchSelect(props) {
     sx: {
       '.select__control': {
         background: 'none',
-        color: 'input.text',
+        color: 'input.text.default',
         border: '1px solid',
         borderColor: 'input.border',
         margin: 0,
@@ -151,10 +151,10 @@ var SearchSelect = function SearchSelect(props) {
         fontSize: 2
       },
       '.select__placeholder': {
-        color: 'input.placeholder'
+        color: 'input.text.placeholder'
       },
       '.select__single-value': {
-        color: 'input.text',
+        color: 'input.text.default',
         px: 1
       },
       '.select__menu': {
@@ -162,7 +162,7 @@ var SearchSelect = function SearchSelect(props) {
         boxShadow: 'medium'
       },
       '.react-select__option': {
-        color: 'input.text',
+        color: 'input.text.default',
         paddingTop: 1,
         paddingBottom: 1,
         paddingLeft: 2,

package/build/system/Notice/Notice.js

@@ -26,6 +26,7 @@ var _excluded = ["children", "className", "headingVariant", "inline", "sx", "tit
 var colorSystemVariant = function colorSystemVariant(color) {
   return {
     warning: 'warning',
+    error: 'error',
     alert: 'error',
     success: 'success',
     info: 'info'

package/build/system/ResourceList/ResourceList.js

@@ -9,6 +9,8 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _react = require("react");
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -51,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       listStyleType: 'none',
       margin: 0,
       px: 0
@@ -85,6 +87,37 @@ var ResourceList = function ResourceList(_ref) {
     });
   };
 
+  var renderGoupedItems = function renderGoupedItems() {
+    return (0, _react.useMemo)(function () {
+      return Object.keys(groupedItems).map(function (groupName, index) {
+        return (0, _jsxRuntime.jsxs)(_.Box, {
+          sx: {
+            mb: 4
+          },
+          as: "li",
+          children: [(0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            as: "h4",
+            sx: {
+              mb: 3
+            },
+            children: groupName
+          }), (0, _jsxRuntime.jsx)(_.Box, {
+            as: "ul",
+            sx: {
+              listStyleType: 'none',
+              m: 0,
+              p: 0,
+              borderTop: '1px solid',
+              borderColor: 'border'
+            },
+            children: renderItemList(groupedItems[groupName])
+          })]
+        }, index);
+      });
+    }, [groupedItems]);
+  };
+
   return (0, _jsxRuntime.jsx)(_.Box, {
     as: "ul",
     sx: {
@@ -93,31 +126,7 @@ var ResourceList = function ResourceList(_ref) {
       p: 0
     },
     className: "vip-resource-list-component",
-    children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
-      return (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          mb: 4
-        },
-        children: [(0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          as: "h4",
-          sx: {
-            mb: 3
-          },
-          children: groupName
-        }), (0, _jsxRuntime.jsx)(_.Box, {
-          as: "ul",
-          sx: {
-            listStyleType: 'none',
-            m: 0,
-            p: 0,
-            borderTop: '1px solid',
-            borderColor: 'border'
-          },
-          children: renderItemList(groupedItems[groupName])
-        })]
-      }, index);
-    }) : renderItemList(items)
+    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
   });
 };
 

package/build/system/ResourceList/ResourceList.stories.js

@@ -129,6 +129,7 @@ var Grouped = function Grouped() {
                 children: "#443"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 fontSize: 1,
@@ -337,6 +338,7 @@ var Relative = function Relative() {
                 children: "Running"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 color: 'muted',

package/build/system/theme/generated/valet-theme.json

@@ -38,6 +38,23 @@
       "value": "#ffffff",
       "type": "color"
     },
+    "label": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "placeholder": {
+        "type": "color",
+        "value": "#767372",
+        "description": "Use for placeholder text in fields"
+      }
+    },
     "border": {
       "default": {
         "value": "#8f8c8b",
@@ -179,18 +196,19 @@
       "description": "Use for helper text",
       "value": "#6a6766"
     },
-    "placeholder": {
-      "type": "color",
-      "value": "#767372",
-      "description": "Use for placeholder text in fields"
-    },
     "disabled": {
       "type": "color",
       "value": "#9b9796"
     },
     "inverse": {
       "type": "color",
-      "value": "#fbfbfb"
+      "value": "#fbfbfb",
+      "description": "Use for primary text on an inverse layer"
+    },
+    "inverse-secondary": {
+      "value": "#b3afae",
+      "type": "color",
+      "description": "Use for secondary text on an inverse layer."
     },
     "accent": {
       "type": "color",
@@ -625,8 +643,8 @@
       "info": {
         "default": {
           "type": "color",
-          "description": "Use for text links",
-          "value": "#007586"
+          "value": "#006979",
+          "description": "Use for text links"
         },
         "hover": {
           "type": "color",

package/build/system/theme/index.js

@@ -109,10 +109,7 @@ var _default = {
     // icon
     icon: (0, _extends2["default"])({}, _getColor.ValetTheme.icon),
     // Form Controls
-    input: (0, _extends2["default"])({}, _getColor.ValetTheme.input, {
-      text: (0, _getColor.getColor)('text', 'secondary'),
-      placeholder: (0, _getColor.getColor)('text', 'secondary')
-    }),
+    input: (0, _extends2["default"])({}, _getColor.ValetTheme.input),
     optionRow: {
       hover: 'rgba(0,0,0,.02)',
       border: (0, _getColor.getColor)('border', '2'),
@@ -145,7 +142,7 @@ var _default = {
     },
     hover: 'rgba(0,0,0,.02)',
     darken: 'rgba(0,0,0,.05)',
-    placeholder: (0, _getColor.getColor)('text', 'placeholder'),
+    placeholder: (0, _getColor.getVariants)('input.text').placeholder,
     midnight: '#13191E',
     dialog: _colors.light.gray['0'],
     backgroundMuted: (0, _getColor.getColor)('layer', '1'),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.28.0",
+	"version": "0.28.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Dialog/DialogButton.js

@@ -38,7 +38,7 @@ const DialogButton = ( { label, variant = 'secondary', value, children, ...props
 					flex: '1 1 auto',
 					whiteSpace: 'nowrap',
 					overflow: 'hidden',
-					color: 'input.text',
+					color: 'input.text.default',
 					textOverflow: 'ellipsis',
 				} }
 			>

package/src/system/Form/InlineSelect.js

@@ -71,10 +71,10 @@ const InlineSelect = ( {
 				sx={ {
 					'.select__control': {
 						background: 'none',
-						color: 'input.text',
+						color: 'input.text.default',
 					},
 					'.select__single-value': {
-						color: 'input.text',
+						color: 'input.text.default',
 						px: 1,
 					},
 					'.react-select__option': {
@@ -90,7 +90,7 @@ const InlineSelect = ( {
 						borderColor: 'input.border',
 					},
 					'.select__placeholder': {
-						color: 'input.placeholder',
+						color: 'input.text.placeholder',
 					},
 				} }
 				{ ...props }

package/src/system/Form/Input.js

@@ -17,6 +17,7 @@ const inputStyles = {
 	unset: 'all',
 	...baseControlStyle,
 	lineHeight: 'inherit',
+	height: '36px',
 	px: 3,
 	py: 2,
 	fontSize: 2,

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

@@ -4,7 +4,7 @@ export const baseControlBorderStyle = {
 	borderColor: 'input.border.default',
 };
 
-export const inputBaseText = 'input.text';
+export const inputBaseText = 'input.text.default';
 export const inputBaseBackground = 'input.background';
 export const baseControlFocusStyle = {
 	'&:focus': theme => theme.outline,
@@ -26,7 +26,7 @@ export const baseControlStyle = {
 	},
 
 	'&::placeholder': {
-		color: 'input.placeholder',
+		color: 'input.text.placeholder',
 		opacity: 1,
 	},
 };

package/src/system/Form/Label.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { RequiredLabel } from './RequiredLabel';
 
-export const baseLabelColor = 'heading';
+export const baseLabelColor = 'input.label.default';
 export const baseLabelStyle = {
 	fontWeight: 500,
 	fontSize: 2,

package/src/system/Form/SearchSelect.js

@@ -89,7 +89,7 @@ const SearchSelect = props => (
 		sx={ {
 			'.select__control': {
 				background: 'none',
-				color: 'input.text',
+				color: 'input.text.default',
 				border: '1px solid',
 				borderColor: 'input.border',
 				margin: 0,
@@ -98,10 +98,10 @@ const SearchSelect = props => (
 				fontSize: 2,
 			},
 			'.select__placeholder': {
-				color: 'input.placeholder',
+				color: 'input.text.placeholder',
 			},
 			'.select__single-value': {
-				color: 'input.text',
+				color: 'input.text.default',
 				px: 1,
 			},
 			'.select__menu': {
@@ -109,7 +109,7 @@ const SearchSelect = props => (
 				boxShadow: 'medium',
 			},
 			'.react-select__option': {
-				color: 'input.text',
+				color: 'input.text.default',
 				paddingTop: 1,
 				paddingBottom: 1,
 				paddingLeft: 2,

package/src/system/Notice/Notice.js

@@ -14,7 +14,9 @@ import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
 import { Box, Flex, Heading, Card } from '../';
 
 const colorSystemVariant = color =>
-	( { warning: 'warning', alert: 'error', success: 'success', info: 'info' }[ color ] );
+	( { warning: 'warning', error: 'error', alert: 'error', success: 'success', info: 'info' }[
+		color
+	] );
 
 const NoticeIcon = ( { color, variant } ) => {
 	let Icon = MdWarning;

package/src/system/theme/generated/valet-theme.json

@@ -38,6 +38,23 @@
       "value": "#ffffff",
       "type": "color"
     },
+    "label": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "#13191e",
+        "type": "color"
+      },
+      "placeholder": {
+        "type": "color",
+        "value": "#767372",
+        "description": "Use for placeholder text in fields"
+      }
+    },
     "border": {
       "default": {
         "value": "#8f8c8b",
@@ -179,18 +196,19 @@
       "description": "Use for helper text",
       "value": "#6a6766"
     },
-    "placeholder": {
-      "type": "color",
-      "value": "#767372",
-      "description": "Use for placeholder text in fields"
-    },
     "disabled": {
       "type": "color",
       "value": "#9b9796"
     },
     "inverse": {
       "type": "color",
-      "value": "#fbfbfb"
+      "value": "#fbfbfb",
+      "description": "Use for primary text on an inverse layer"
+    },
+    "inverse-secondary": {
+      "value": "#b3afae",
+      "type": "color",
+      "description": "Use for secondary text on an inverse layer."
     },
     "accent": {
       "type": "color",
@@ -625,8 +643,8 @@
       "info": {
         "default": {
           "type": "color",
-          "description": "Use for text links",
-          "value": "#007586"
+          "value": "#006979",
+          "description": "Use for text links"
         },
         "hover": {
           "type": "color",

package/src/system/theme/index.js

@@ -122,8 +122,6 @@ export default {
 		// Form Controls
 		input: {
 			...ValetTheme.input,
-			text: getColor( 'text', 'secondary' ),
-			placeholder: getColor( 'text', 'secondary' ),
 		},
 
 		optionRow: {
@@ -160,7 +158,7 @@ export default {
 		},
 		hover: 'rgba(0,0,0,.02)',
 		darken: 'rgba(0,0,0,.05)',
-		placeholder: getColor( 'text', 'placeholder' ),
+		placeholder: getVariants( 'input.text' ).placeholder,
 		midnight: '#13191E',
 		dialog: light.gray[ '0' ],
 		backgroundMuted: getColor( 'layer', '1' ),