@automattic/vip-design-system 0.28.1 → 0.28.3

package/{src/system/theme/generated/valet-theme.json → build/system/theme/generated/valet-theme-light.json}

@@ -4,6 +4,11 @@
       "type": "color",
       "description": "Use as main application background",
       "value": "#fbfbfb"
+    },
+    "overlay": {
+      "value": "#000000b3",
+      "type": "color",
+      "description": "Use for modal UI overlay"
     }
   },
   "layer": {
@@ -690,14 +695,6 @@
       "type": "color"
     }
   },
-  "overlay": {
-    "type": "color",
-    "value": "#767372"
-  },
-  "interactive": {
-    "type": "color",
-    "value": "#a66915"
-  },
   "tag": {
     "gray": {
       "background": {
@@ -898,6 +895,48 @@
       }
     }
   },
+  "toolbar": {
+    "background": {
+      "value": "#13191e",
+      "type": "color",
+      "description": "The background color for the top toolbar"
+    },
+    "text": {
+      "default": {
+        "value": "#ebe9e8",
+        "type": "color",
+        "description": "Default text color for the top toolbar's contents"
+      },
+      "hover": {
+        "value": "#ebe9e8",
+        "type": "color"
+      }
+    },
+    "brand": {
+      "value": "#ffffff",
+      "type": "color",
+      "description": "Use for the logo"
+    }
+  },
+  "logs": {
+    "text": {
+      "primary": {
+        "value": "#ebe9e8",
+        "type": "color",
+        "description": "Use for monotype output in an invere layer."
+      },
+      "secondary": {
+        "value": "#b3afae",
+        "type": "color",
+        "description": "Use for timestamp or secondary monotype output in an inverse layer."
+      }
+    },
+    "background": {
+      "value": "#13191e",
+      "type": "color",
+      "description": "Use for the pseudo terminal window background color."
+    }
+  },
   "rem": {
     "value": 16,
     "type": "other",

package/build/system/theme/getColor.js

@@ -3,61 +3,64 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.getVariants = exports.getColor = exports.ValetTheme = void 0;
+exports["default"] = void 0;
 
 var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _valetTheme = _interopRequireDefault(require("./generated/valet-theme.json"));
-
 /**
  * Internal dependencies
  */
-var getColor = function getColor(color, variant) {
-  if (variant === void 0) {
-    variant = 'default';
-  }
-
-  if (!_valetTheme["default"][color]) {
-    return '#000000';
-  }
-
-  return _valetTheme["default"][color][variant].value;
-};
-
-exports.getColor = getColor;
-
-var resolvePath = function resolvePath(object, path, defaultValue) {
-  return path.split('.').reduce(function (acc, property) {
-    return acc ? acc[property] : defaultValue;
-  }, object);
-};
-
-var getVariants = function getVariants(color) {
-  var property = resolvePath(_valetTheme["default"], color, {});
-  return Object.keys(property).reduce(function (variants, variant) {
-    var _extends2;
-
-    return (0, _extends4["default"])({}, variants, (_extends2 = {}, _extends2[variant] = property[variant].value, _extends2));
-  }, {});
-};
-
-exports.getVariants = getVariants;
-
-var traverse = function traverse(root) {
-  if (root.hasOwnProperty('value') && root.hasOwnProperty('type')) {
-    return root.value;
-  }
-
-  return Object.entries(root).reduce(function (acc, _ref) {
-    var _extends3;
-
-    var key = _ref[0],
-        value = _ref[1];
-    return (0, _extends4["default"])({}, acc, (_extends3 = {}, _extends3[key] = traverse(value), _extends3));
-  }, {});
-}; // Valet Theme Productive Theme
+// Valet Theme Productive Theme
 // https://www.figma.com/file/sILtW5Cs2tAnPWrSOEVyER/Productive-Color?node-id=1%3A17&t=4kHdpoprxntk5Ilw-0
+var _default = function _default(theme) {
+  var getColor = function getColor(color, variant) {
+    if (variant === void 0) {
+      variant = 'default';
+    }
+
+    if (!theme[color]) {
+      return '#000000';
+    }
+
+    return theme[color][variant].value;
+  };
+
+  var resolvePath = function resolvePath(object, path, defaultValue) {
+    return path.split('.').reduce(function (acc, property) {
+      return acc ? acc[property] : defaultValue;
+    }, object);
+  };
+
+  var getVariants = function getVariants(color) {
+    var property = resolvePath(theme, color, {});
+    return Object.keys(property).reduce(function (variants, variant) {
+      var _extends2;
+
+      return (0, _extends4["default"])({}, variants, (_extends2 = {}, _extends2[variant] = property[variant].value, _extends2));
+    }, {});
+  };
+
+  var traverse = function traverse(root) {
+    if (root.hasOwnProperty('value') && root.hasOwnProperty('type')) {
+      return root.value;
+    }
+
+    return Object.entries(root).reduce(function (acc, _ref) {
+      var _extends3;
+
+      var key = _ref[0],
+          value = _ref[1];
+      return (0, _extends4["default"])({}, acc, (_extends3 = {}, _extends3[key] = traverse(value), _extends3));
+    }, {});
+  };
+
+  return {
+    ValetTheme: traverse(theme),
+    getColor: getColor,
+    getVariants: getVariants,
+    traverse: traverse,
+    resolvePath: resolvePath
+  };
+};
 
-
-var ValetTheme = traverse(_valetTheme["default"]);
-exports.ValetTheme = ValetTheme;
+exports["default"] = _default;

package/build/system/theme/index.js

@@ -7,64 +7,38 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _getColor = require("./getColor");
+var _getColor = _interopRequireDefault(require("./getColor"));
 
-var _colors = require("./colors");
+var _valetThemeLight = _interopRequireDefault(require("./generated/valet-theme-light.json"));
+
+var _valetThemeDark = _interopRequireDefault(require("./generated/valet-theme-dark.json"));
+
+var _colors = _interopRequireDefault(require("./colors"));
+
+var _textStyles = require("./textStyles");
 
 /**
  * Internal dependencies
  */
-var textStyles = {
-  h1: {
-    fontSize: 5,
-    marginBottom: 3,
-    letterSpacing: '-.02em',
-    fontWeight: 'body',
-    fontFamily: 'serif',
-    color: 'heading'
-  },
-  h2: {
-    fontSize: 4,
-    marginBottom: 2,
-    letterSpacing: '-.005em',
-    fontWeight: 400,
-    color: 'heading'
-  },
-  h3: {
-    fontSize: 3,
-    marginBottom: 3,
-    letterSpacing: '-.005em',
-    lineHeight: 1.4,
-    fontWeight: 'heading',
-    color: 'heading'
-  },
-  h4: {
-    fontSize: 2,
-    marginBottom: 1,
-    lineHeight: 1.5,
-    fontWeight: 'heading',
-    color: 'heading'
-  },
-  h5: {
-    fontSize: 1,
-    marginBottom: 1,
-    lineHeight: 1.5,
-    fontWeight: 'heading',
-    color: 'heading'
-  },
-  caps: {
-    fontSize: 1,
-    marginBottom: 2,
-    color: 'muted',
-    fontWeight: 'bold',
-    letterSpacing: '.05em'
-  }
-};
+// Light
+var _ThemeBuilder = (0, _getColor["default"])(_valetThemeLight["default"]),
+    getColor = _ThemeBuilder.getColor,
+    getVariants = _ThemeBuilder.getVariants,
+    ValetTheme = _ThemeBuilder.ValetTheme;
+
+var light = (0, _colors["default"])(ValetTheme); // Dark
+
+var _ThemeBuilder2 = (0, _getColor["default"])(_valetThemeDark["default"]),
+    getColorDark = _ThemeBuilder2.getColor,
+    getVariantsDark = _ThemeBuilder2.getVariants,
+    ValetThemeDark = _ThemeBuilder2.ValetTheme;
+
+var dark = (0, _colors["default"])(ValetThemeDark);
 var outline = {
   outlineStyle: 'solid',
-  outlineColor: (0, _getColor.getColor)('focus', 'inset'),
+  outlineColor: getColor('focus', 'inset'),
   outlineWidth: '1px',
-  boxShadow: "0 0 0 1px " + (0, _getColor.getColor)('focus', 'inset') + ", 0 0 0 3px " + (0, _getColor.getColor)('focus')
+  boxShadow: "0 0 0 1px " + getColor('focus', 'inset') + ", 0 0 0 3px " + getColor('focus')
 };
 var fonts = {
   body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -72,118 +46,120 @@ var fonts = {
   monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
   serif: 'recoletaregular, Georgia, serif'
 };
-var _default = {
-  outline: outline,
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fonts: fonts,
-  fontSizes: [10, 12, 14, 19, 32, 40, 56, 64, 96],
-  fontWeights: {
-    body: 400,
-    heading: 500,
-    bold: 600
-  },
-  lineHeights: {
-    body: 1.6,
-    heading: 1.125
-  },
-  sizes: {
-    sidebar: 260
-  },
-  radii: [0, 4, 8],
-  config: {
-    useColorSchemeMediaQuery: false
-  },
-  initialColorModeName: 'light',
-  colors: (0, _extends2["default"])({
+
+var getComponentColors = function getComponentColors(theme, gColor, gVariants) {
+  return {
     // Valet Theme Colors
     // This has to be in the plural because we already have a flag: text
-    texts: (0, _extends2["default"])({}, _getColor.ValetTheme.text, {
+    texts: (0, _extends2["default"])({}, theme.text, {
       disabled: '#716e6e'
     }),
-    button: (0, _extends2["default"])({}, _getColor.ValetTheme.button),
-    tag: (0, _extends2["default"])({}, _getColor.ValetTheme.tag),
+    button: (0, _extends2["default"])({}, theme.button),
+    tag: (0, _extends2["default"])({}, theme.tag),
     // Notice
-    notice: (0, _extends2["default"])({}, _getColor.ValetTheme.support),
+    notice: (0, _extends2["default"])({}, theme.support),
     // layer
-    layer: (0, _extends2["default"])({}, _getColor.ValetTheme.layer),
+    layer: (0, _extends2["default"])({}, theme.layer),
     // icon
-    icon: (0, _extends2["default"])({}, _getColor.ValetTheme.icon),
+    icon: (0, _extends2["default"])({}, theme.icon),
     // Form Controls
-    input: (0, _extends2["default"])({}, _getColor.ValetTheme.input),
+    input: (0, _extends2["default"])({}, theme.input),
+    // Toolbar Controls
+    toolbar: (0, _extends2["default"])({}, theme.toolbar),
+    // Accordion
+    accordion: {
+      content: {
+        background: gColor('layer', '2'),
+        text: gColor('text', 'secondary')
+      },
+      trigger: {
+        text: gColor('text', 'primary')
+      },
+      background: {
+        open: gColor('layer', '3'),
+        closed: 'transparent',
+        hover: gColor('layer', '3')
+      }
+    },
     optionRow: {
       hover: 'rgba(0,0,0,.02)',
-      border: (0, _getColor.getColor)('border', '2'),
-      text: (0, _getColor.getColor)('text', 'secondary'),
-      textAccent: (0, _getColor.getColor)('link', 'default'),
-      icon: (0, _getColor.getColor)('icon', 'primary'),
-      iconBackground: (0, _getColor.getColor)('layer', 'accent')
+      border: gColor('border', '1'),
+      text: gColor('text', 'secondary'),
+      textAccent: gColor('link', 'default'),
+      icon: gColor('icon', 'primary'),
+      iconBackground: gColor('layer', 'accent')
     },
     table: {
-      border: (0, _getColor.getColor)('border', '2'),
-      heading: (0, _getColor.getColor)('text', 'primary'),
-      text: (0, _getColor.getColor)('text', 'secondary')
+      border: gColor('border', '2'),
+      heading: gColor('text', 'primary'),
+      text: gColor('text', 'secondary')
     },
     // Common Tokens
-    text: (0, _getColor.getColor)('text', 'secondary'),
-    heading: (0, _getColor.getColor)('text', 'primary'),
-    background: (0, _getColor.getColor)('layer', '2'),
-    backgroundSecondary: (0, _getColor.getColor)('layer', '1'),
-    primary: (0, _getColor.getColor)('link', 'default'),
-    secondary: _colors.light.gray['70'],
-    muted: (0, _getColor.getColor)('text', 'helper'),
-    border: (0, _getColor.getColor)('border', '1'),
+    text: gColor('text', 'secondary'),
+    heading: gColor('text', 'primary'),
+    background: gColor('layer', '2'),
+    backgroundSecondary: gColor('layer', '1'),
+    primary: gColor('link', 'default'),
+    secondary: light.gray['70'],
+    muted: gColor('text', 'helper'),
+    border: gColor('border', '1'),
     borders: {
-      1: (0, _getColor.getColor)('border', '1'),
-      2: (0, _getColor.getColor)('border', '2'),
-      3: (0, _getColor.getColor)('border', '3'),
-      4: (0, _getColor.getColor)('border', '4'),
-      inverse: (0, _getColor.getColor)('border', 'inverse'),
-      accent: (0, _getColor.getColor)('border', 'accent')
+      1: gColor('border', '1'),
+      2: gColor('border', '2'),
+      3: gColor('border', '3'),
+      4: gColor('border', '4'),
+      inverse: gColor('border', 'inverse'),
+      accent: gColor('border', 'accent')
     },
     hover: 'rgba(0,0,0,.02)',
     darken: 'rgba(0,0,0,.05)',
-    placeholder: (0, _getColor.getVariants)('input.text').placeholder,
+    placeholder: gVariants('input.text').placeholder,
     midnight: '#13191E',
-    dialog: _colors.light.gray['0'],
-    backgroundMuted: (0, _getColor.getColor)('layer', '1'),
+    dialog: light.gray['0'],
+    backgroundMuted: gColor('layer', '1'),
     // Variant colors
-    success: _getColor.ValetTheme.support.link.success["default"],
-    error: _getColor.ValetTheme.support.link.error["default"],
-    warning: _getColor.ValetTheme.support.link.warning["default"],
-    info: _getColor.ValetTheme.support.link.info["default"],
+    success: theme.support.link.success["default"],
+    error: theme.support.link.error["default"],
+    warning: theme.support.link.warning["default"],
+    info: theme.support.link.info["default"],
     // Card
     card: '#fff',
     // Link
-    link: (0, _getColor.getColor)('link', 'default'),
+    link: gColor('link', 'default'),
     links: {
-      "default": (0, _getColor.getColor)('link', 'default'),
-      hover: (0, _getColor.getColor)('link', 'hover'),
-      active: (0, _getColor.getColor)('link', 'active'),
-      visited: (0, _getColor.getColor)('link', 'visited')
+      "default": gColor('link', 'default'),
+      hover: gColor('link', 'hover'),
+      active: gColor('link', 'active'),
+      visited: gColor('link', 'visited')
     }
-  }, _colors.light, {
+  };
+};
+
+var _default = {
+  outline: outline,
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fonts: fonts,
+  fontSizes: [10, 12, 14, 19, 32, 40, 56, 64, 96],
+  fontWeights: {
+    body: 400,
+    heading: 500,
+    bold: 600
+  },
+  lineHeights: {
+    body: 1.6,
+    heading: 1.125
+  },
+  sizes: {
+    sidebar: 260
+  },
+  radii: [0, 4, 8],
+  config: {
+    useColorSchemeMediaQuery: false
+  },
+  initialColorModeName: 'light',
+  colors: (0, _extends2["default"])({}, getComponentColors(ValetTheme, getColor, getVariants), light, {
     modes: {
-      // Dark Mode not fully supported yet
-      dark: (0, _extends2["default"])({
-        text: _colors.dark.grey['90'],
-        heading: _colors.dark.grey['100'],
-        background: _colors.dark.grey['5'],
-        backgroundSecondary: _colors.dark.grey['10'],
-        primary: _colors.light.brand['70'],
-        secondary: '#30c',
-        muted: _colors.dark.grey['90'],
-        link: _colors.dark.brand['90'],
-        card: _colors.dark.grey['20'],
-        placeholder: _colors.dark.grey['70'],
-        border: _colors.dark.grey['30'],
-        hover: 'rgba(255,255,255,.02)',
-        midnight: _colors.dark.grey['90'],
-        success: _colors.dark.green['90'],
-        error: _colors.dark.red['90'],
-        warning: _colors.dark.yellow['90'],
-        dialog: _colors.dark.grey['40'],
-        backgroundMuted: _colors.dark.grey['10']
-      }, _colors.dark)
+      dark: (0, _extends2["default"])({}, getComponentColors(ValetThemeDark, getColorDark, getVariantsDark), dark)
     }
   }),
   shadows: {
@@ -193,15 +169,8 @@ var _default = {
     high: // eslint-disable-next-line max-len
     '0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07)'
   },
-  accordion: {
-    background: {
-      open: (0, _getColor.getVariants)('color.gold')['7'],
-      closed: 'transparent',
-      hover: (0, _getColor.getVariants)('color.gold')['7']
-    }
-  },
   tag: {
-    gold: (0, _getColor.getVariants)('tag.gold')
+    gold: getVariants('tag.gold')
   },
   cards: {
     primary: {
@@ -333,7 +302,7 @@ var _default = {
       }
     }
   },
-  text: textStyles,
+  text: _textStyles.textStyles,
   dialog: {
     modal: {
       position: 'fixed',
@@ -373,7 +342,7 @@ var _default = {
       fontWeight: 'body',
       fontSize: 2,
       color: 'text',
-      backgroundColor: (0, _getColor.getColor)('background', 'primary'),
+      backgroundColor: getColor('background', 'primary'),
       '-webkit-font-smoothing': 'antialiased',
       '-moz-osx-font-smoothing': 'grayscale',
       a: {
@@ -392,7 +361,7 @@ var _default = {
       p: {
         color: 'text'
       }
-    }, textStyles)
+    }, _textStyles.textStyles)
   }
 };
 exports["default"] = _default;

package/build/system/theme/textStyles.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+exports.textStyles = void 0;
+var textStyles = {
+  h1: {
+    fontSize: 5,
+    marginBottom: 3,
+    letterSpacing: '-.02em',
+    fontWeight: 'body',
+    fontFamily: 'serif',
+    color: 'heading'
+  },
+  h2: {
+    fontSize: 4,
+    marginBottom: 2,
+    letterSpacing: '-.005em',
+    fontWeight: 400,
+    color: 'heading'
+  },
+  h3: {
+    fontSize: 3,
+    marginBottom: 3,
+    letterSpacing: '-.005em',
+    lineHeight: 1.4,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  h4: {
+    fontSize: 2,
+    marginBottom: 1,
+    lineHeight: 1.5,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  h5: {
+    fontSize: 1,
+    marginBottom: 1,
+    lineHeight: 1.5,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  caps: {
+    fontSize: 1,
+    marginBottom: 2,
+    color: 'muted',
+    fontWeight: 'bold',
+    letterSpacing: '.05em'
+  }
+};
+exports.textStyles = textStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.28.1",
+	"version": "0.28.3",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -11,8 +11,12 @@
 		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
 		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
-		"theme-builder-copy": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme.json build/system/theme/generated/valet-theme.json",
-		"theme-update": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme.json valet-core,wpvip-productive-color",
+		"theme-builder-copy": "npm run theme-builder-copy-light && npm run theme-builder-copy-dark",
+		"theme-builder-copy-light": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-light.json build/system/theme/generated/valet-theme-light.json",
+		"theme-builder-copy-dark": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-dark.json build/system/theme/generated/valet-theme-dark.json",
+		"theme-update": "npm run theme-update-light && npm run theme-update-dark",
+		"theme-update-light": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-light.json valet-core,wpvip-productive-color",
+		"theme-update-dark": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-dark.json valet-core,wpvip-productive-color-dark",
 		"lint": "eslint . --fix --max-warnings 0",
 		"storybook": "start-storybook -p 6006",
 		"dev": "npm run storybook",

package/src/system/Accordion/Accordion.js

@@ -81,15 +81,15 @@ export const Trigger = React.forwardRef(
 					fontWeight: 600,
 
 					'&[data-state="closed"]': {
-						backgroundColor: ( { accordion } ) => accordion.background.closed,
+						backgroundColor: 'accordion.background.closed',
 					},
 					'&[data-state="open"]': {
-						backgroundColor: ( { accordion } ) => accordion.background.open,
+						backgroundColor: 'accordion.background.open',
 						borderBottom: '1px solid',
 						borderBottomColor: 'borders.2',
 						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
-					'&:hover': { backgroundColor: ( { accordion } ) => accordion.background.hover },
+					'&:hover': { backgroundColor: 'accordion.background.hover' },
 					...sx,
 				} }
 				{ ...props }
@@ -122,7 +122,9 @@ Trigger.propTypes = {
 export const TriggerWithIcon = React.forwardRef( ( { children, icon, ...props }, forwardedRef ) => (
 	<Trigger { ...props } ref={ forwardedRef }>
 		<span sx={ { color: 'icon.primary', fontSize: 3 } }>{ icon }</span>
-		<div sx={ { color: 'heading', flexGrow: 1, textAlign: 'left', ml: 3 } }>{ children }</div>
+		<div sx={ { color: 'accordion.trigger.text', flexGrow: 1, textAlign: 'left', ml: 3 } }>
+			{ children }
+		</div>
 	</Trigger>
 ) );
 
@@ -137,8 +139,8 @@ export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forw
 	return (
 		<AccordionPrimitive.Content
 			sx={ {
-				backgroundColor: 'transparent',
-				color: 'text',
+				backgroundColor: 'accordion.content.background',
+				color: 'accordion.content.text',
 				fontSize: 2,
 				overflow: 'hidden',
 				px: 3,

package/src/system/Badge/Badge.stories.jsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Badge } from '..';
+import { Badge, Link } from '..';
 
 export default {
 	title: 'Badge',
@@ -11,7 +11,7 @@ export default {
 const Template = props => <Badge { ...props } sx={ { m: 2 } } />;
 const TemplateLink = props => (
 	<Template { ...props } sx={ { m: 2 } }>
-		<a href="http://google.com">Google.com</a>
+		<Link href="http://google.com">Google.com</Link>
 	</Template>
 );