@automattic/vip-design-system 0.13.0 → 0.14.0

package/.storybook/decorators/withColorMode.jsx

@@ -4,7 +4,7 @@ import { useColorMode } from 'theme-ui';
 
 // These need to be updated to import VIP design tokens;
 const lightBackground = '#ffffff';
-const darkBackground = '#333333';
+const darkBackground = '#1C1C1B';
 
 export const backgrounds = {
 	default: 'Light',
@@ -21,7 +21,7 @@ export const backgrounds = {
 };
 
 function ThemeChanger( { background } ) {
-	const [colorMode, setColorMode] = useColorMode();
+	const [ colorMode, setColorMode ] = useColorMode();
 	const newColorMode = darkBackground === background ? 'dark' : 'default';
 
 	useEffect( () => {
@@ -29,7 +29,7 @@ function ThemeChanger( { background } ) {
 	}, [ newColorMode ] );
 
 	return null;
-};
+}
 
 export default makeDecorator( {
 	name: 'withColorMode',
@@ -37,9 +37,9 @@ export default makeDecorator( {
 	wrapper: ( storyFn, context ) => {
 		return (
 			<>
-				<ThemeChanger background={context.globals?.backgrounds?.value} />
-				{storyFn()}
+				<ThemeChanger background={ context.globals?.backgrounds?.value } />
+				{ storyFn() }
 			</>
 		);
-	}
+	},
 } );

package/build/system/Button/Button.js

@@ -30,8 +30,14 @@ var Button = function Button(_ref) {
       justifyContent: 'center',
       height: '36px',
       py: 0,
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
       '&:disabled': {
-        opacity: 0.5,
+        opacity: 0.7,
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }

package/build/system/Form/Toggle.js

@@ -47,6 +47,15 @@ var Toggle = function Toggle(_ref) {
       backgroundPosition: 'right 2px top 2px',
       backgroundImage: "url(\n\t\t\t\t'data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z\" fill=\"white\"/></svg>')",
       WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
+      '&[disabled]': {
+        opacity: 0.7
+      },
       '&[data-state="checked"]': {
         backgroundColor: variant,
         backgroundPosition: 'left 2px top 2px',

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

@@ -42,6 +42,10 @@ var Default = function Default(args) {
       checked: args.checked,
       defaultChecked: false,
       "aria-label": "Feature flag 2"
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
+      "aria-label": "Feature Disabled",
+      disabled: true,
+      defaultChecked: false
     })]
   });
 };

package/build/system/Link/Link.js

@@ -33,6 +33,12 @@ var Link = function Link(_ref) {
       },
       '&:hover, &:focus': {
         color: 'heading'
+      },
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
       }
     }, sx)
   }));

package/build/system/NewDialog/DialogClose.js

@@ -58,10 +58,11 @@ var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, for
           outlineColor: 'primary',
           outlineWidth: '2px'
         },
-        '&:focus': {
-          outlineStyle: 'solid',
-          outlineColor: 'primary',
-          outlineWidth: '2px'
+        '&:focus': function focus(theme) {
+          return theme.outline;
+        },
+        '&:focus-visible': function focusVisible(theme) {
+          return theme.outline;
         }
       },
       children: (0, _jsxRuntime.jsx)(_io.IoClose, {

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.13.0",
+	"version": "0.14.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

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',
 			},

package/src/system/Form/Toggle.js

@@ -34,6 +34,11 @@ export const Toggle = ( {
 				'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z" fill="white"/></svg>')`,
 			WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
 
+			'&:focus': theme => theme.outline,
+			'&:focus-visible': theme => theme.outline,
+			'&[disabled]': {
+				opacity: 0.7,
+			},
 			'&[data-state="checked"]': {
 				backgroundColor: variant,
 				backgroundPosition: 'left 2px top 2px',

package/src/system/Form/Toggle.stories.jsx

@@ -33,6 +33,11 @@ const Default = args => (
 		<br />
 
 		<Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />
+
+		<br />
+		<br />
+
+		<Toggle aria-label="Feature Disabled" disabled defaultChecked={ false } />
 	</form>
 );
 

package/src/system/Link/Link.js

@@ -20,6 +20,8 @@ const Link = ( { active = false, sx, ...props } ) => (
 			'&:hover, &:focus': {
 				color: 'heading',
 			},
+			'&:focus': theme => theme.outline,
+			'&:focus-visible': theme => theme.outline,
 			...sx,
 		} }
 	/>

package/src/system/NewDialog/DialogClose.js

@@ -34,7 +34,8 @@ export const DialogClose = React.forwardRef( ( props, forwardedRef ) => (
 					outlineColor: 'primary',
 					outlineWidth: '2px',
 				},
-				'&:focus': { outlineStyle: 'solid', outlineColor: 'primary', outlineWidth: '2px' },
+				'&:focus': theme => theme.outline,
+				'&:focus-visible': theme => theme.outline,
 			} }
 		>
 			<IoClose aria-hidden="true" />

package/src/system/theme/getColor.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+
+import Valet from '../../../tokens/valet-color.json';
+
+const ThemeColors = Valet[ 'productive-color-wpvip' ];
+const CoreColors = Valet[ 'valet-core' ];
+
+export const getColor = ( color, variant = 'default' ) => {
+	if ( ! ThemeColors[ color ] ) {
+		return '#000000';
+	}
+
+	const colorValue = ThemeColors[ color ][ variant ].value;
+
+	if ( colorValue.startsWith( '{' ) ) {
+		const [ name, number ] = colorValue.replace( /[{}]/g, '' ).split( '.' );
+
+		// Some colors are flat, there is no sub values.
+		if ( CoreColors[ name ][ number ] ) {
+			return CoreColors[ name ][ number ].value;
+		}
+
+		return CoreColors[ name ].value;
+	}
+
+	return colorValue;
+};

package/src/system/theme/index.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { light, dark } from './colors';
+import { getColor } from './getColor';
 
 const textStyles = {
 	h1: {
@@ -51,7 +52,15 @@ const textStyles = {
 	},
 };
 
+const outline = {
+	outlineStyle: 'solid',
+	outlineColor: '#ffffff',
+	outlineWidth: '1px',
+	boxShadow: `0 0 0 1px #fff, 0 0 0 3px ${ getColor( 'focus' ) }`,
+};
+
 export default {
+	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',
@@ -78,8 +87,8 @@ export default {
 	},
 	initialColorModeName: 'light',
 	colors: {
-		text: light.grey[ '90' ],
-		heading: light.grey[ '100' ],
+		text: getColor( 'text', 'secondary' ),
+		heading: getColor( 'text', 'primary' ),
 		background: '#fdfdfd',
 		backgroundSecondary: light.grey[ '10' ],
 		primary: light.brand[ '70' ],