@automattic/vip-design-system 0.14.2 → 0.17.0

package/src/system/theme/getColor.js

@@ -2,28 +2,12 @@
  * Internal dependencies
  */
 
-import Valet from '../../../tokens/valet-color.json';
-
-const ThemeColors = Valet[ 'productive-color-wpvip' ];
-const CoreColors = Valet[ 'valet-core' ];
+import Valet from './generated/valet-theme.json';
 
 export const getColor = ( color, variant = 'default' ) => {
-	if ( ! ThemeColors[ color ] ) {
+	if ( ! Valet[ 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;
+	return Valet[ color ][ variant ].value;
 };

package/src/system/theme/index.js

@@ -56,7 +56,7 @@ const outline = {
 	outlineStyle: 'solid',
 	outlineColor: '#ffffff',
 	outlineWidth: '1px',
-	boxShadow: `0 0 0 1px #fff, 0 0 0 3px ${ getColor( 'focus' ) }`,
+	boxShadow: `0 0 0 1px ${ getColor( 'focus', 'inset' ) }, 0 0 0 3px ${ getColor( 'focus' ) }`,
 };
 
 export default {