@automattic/vip-design-system 0.28.0 → 0.28.2

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": {
@@ -38,6 +43,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 +201,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 +648,8 @@
       "info": {
         "default": {
           "type": "color",
-          "description": "Use for text links",
-          "value": "#007586"
+          "value": "#006979",
+          "description": "Use for text links"
         },
         "hover": {
           "type": "color",
@@ -672,14 +695,6 @@
       "type": "color"
     }
   },
-  "overlay": {
-    "type": "color",
-    "value": "#767372"
-  },
-  "interactive": {
-    "type": "color",
-    "value": "#a66915"
-  },
   "tag": {
     "gray": {
       "background": {
@@ -880,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/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/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,121 +46,118 @@ 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, {
-      text: (0, _getColor.getColor)('text', 'secondary'),
-      placeholder: (0, _getColor.getColor)('text', 'secondary')
-    }),
+    input: (0, _extends2["default"])({}, theme.input),
+    // 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.getColor)('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: {
@@ -196,15 +167,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: {
@@ -336,7 +300,7 @@ var _default = {
       }
     }
   },
-  text: textStyles,
+  text: _textStyles.textStyles,
   dialog: {
     modal: {
       position: 'fixed',
@@ -376,7 +340,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: {
@@ -395,7 +359,7 @@ var _default = {
       p: {
         color: 'text'
       }
-    }, textStyles)
+    }, _textStyles.textStyles)
   }
 };
 exports["default"] = _default;