@automattic/vip-design-system 2.0.0 → 2.2.0

package/build/system/Avatar/Avatar.d.ts

@@ -5,7 +5,6 @@
 import { Argument } from 'classnames';
 import { ImageProps, ThemeUIStyleObject } from 'theme-ui';
 export interface AvatarProps {
-    isVIP?: boolean;
     size?: number;
     src?: string;
     name?: string;

package/build/system/Avatar/Avatar.js

@@ -7,7 +7,7 @@ var _react = require("react");
 var _themeUi = require("theme-ui");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["isVIP", "name", "size", "src", "className", "sx"];
+var _excluded = ["name", "size", "src", "className", "sx"];
 /**
  * External dependencies
  */
@@ -18,9 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref$isVIP = _ref.isVIP,
-    isVIP = _ref$isVIP === void 0 ? false : _ref$isVIP,
-    name = _ref.name,
+  var name = _ref.name,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
     src = _ref.src,
@@ -31,21 +29,15 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
     sx: _extends({
       borderRadius: '100%',
-      height: size + 2,
-      // +2 to compensate padding on both sides
-      width: size + 2,
-      // +2 to compensate padding on both sides
-      borderWidth: '2px',
-      borderStyle: 'solid',
-      borderColor: isVIP || isVIP === undefined ? 'primary' : 'transparent',
+      height: size,
+      width: size,
       overflow: 'hidden',
-      backgroundColor: 'primary',
+      border: 'none',
+      backgroundColor: 'icon.primary',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      color: 'white',
-      padding: '1px',
-      // this should probably be replaced with a token
+      color: 'inverse',
       textAlign: 'center'
     }, sx),
     className: (0, _classnames["default"])('vip-avatar-component', className),
@@ -63,10 +55,10 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     }) : (0, _jsxRuntime.jsx)(_.Text, {
       as: "span",
       sx: {
-        color: 'white',
+        color: 'icon.inverse',
         mb: 0,
         fontWeight: 'bold',
-        fontSize: 0,
+        fontSize: 2,
         textTransform: 'uppercase'
       },
       children: name ? name.charAt(0) : null

package/build/system/Avatar/Avatar.stories.d.ts

@@ -13,4 +13,5 @@ declare const _default: {
 };
 export default _default;
 type Story = StoryObj<typeof Avatar>;
-export declare const Default: Story;
+export declare const Default: () => import("react").JSX.Element;
+export declare const WithName: Story;

package/build/system/Avatar/Avatar.stories.js

@@ -1,8 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithName = exports.Default = void 0;
 var _ = require("..");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * External dependencies
  */
@@ -13,4 +14,20 @@ var _default = exports["default"] = {
   title: 'Avatar',
   component: _.Avatar
 };
-var Default = exports.Default = {};
+var COMMON_SIZES = [128, 64, 48, 32, 24, 16];
+var Default = exports.Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: COMMON_SIZES.map(function (size) {
+      return (0, _jsxRuntime.jsx)(_.Avatar, {
+        size: size,
+        src: "https://i.pravatar.cc/100"
+      }, size);
+    })
+  });
+};
+var WithName = exports.WithName = {
+  args: {
+    name: 'Kitty',
+    size: 30
+  }
+};

package/build/system/Form/Checkbox/Checkbox.d.ts

@@ -3,7 +3,7 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 export interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
     disabled?: boolean;
-    variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+    variant?: 'primary' | 'success' | 'brand' | 'disabled';
 }
 declare const Checkbox: ({ disabled, onCheckedChange, variant, ...props }: CheckboxProps) => import("react").JSX.Element;
 export { Checkbox };

package/build/system/Form/Checkbox/Checkbox.js

@@ -39,9 +39,6 @@ var Checkbox = exports.Checkbox = function Checkbox(_ref3) {
     variant = 'disabled';
   }
   return (0, _jsxRuntime.jsx)(StyledCheckbox, _extends({
-    sx: {
-      opacity: disabled ? 0.4 : 1
-    },
     onCheckedChange: disabled ? undefined : onCheckedChange,
     "aria-disabled": disabled,
     variant: variant

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

@@ -33,7 +33,7 @@ var Default = exports.Default = function Default() {
     checked2 = _useState2[0],
     setChecked2 = _useState2[1];
   return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [['primary', 'success', 'error', 'warning', 'info'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Tell me your ", variant, " prefereces"]
@@ -49,10 +49,6 @@ var Default = exports.Default = function Default() {
             onCheckedChange: setChecked
           }), (0, _jsxRuntime.jsx)(_Label.Label, {
             clickable: true,
-            sx: {
-              m: 0,
-              ml: 2
-            },
             htmlFor: "check1-" + variant,
             id: "label-check1-" + variant,
             children: "This option"
@@ -69,10 +65,6 @@ var Default = exports.Default = function Default() {
             onCheckedChange: setChecked2
           }), (0, _jsxRuntime.jsx)(_Label.Label, {
             clickable: true,
-            sx: {
-              m: 0,
-              ml: 2
-            },
             htmlFor: "check2-" + variant,
             id: "label-check2-" + variant,
             children: "This option too"
@@ -95,10 +87,6 @@ var Default = exports.Default = function Default() {
           onCheckedChange: setChecked
         }), (0, _jsxRuntime.jsx)(_Label.Label, {
           clickable: true,
-          sx: {
-            m: 0,
-            ml: 2
-          },
           htmlFor: "check1-disabled",
           id: "label-check1-disabled",
           children: "This option"
@@ -115,10 +103,6 @@ var Default = exports.Default = function Default() {
           onCheckedChange: setChecked2
         }), (0, _jsxRuntime.jsx)(_Label.Label, {
           clickable: true,
-          sx: {
-            m: 0,
-            ml: 2
-          },
           htmlFor: "check2-disabled",
           id: "label-check2-disabled",
           children: "This option too"
@@ -136,7 +120,7 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
     }
   }, [checkRef]);
   return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [['primary', 'success', 'error', 'warning', 'info'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Indeterminate state ", variant]
@@ -150,10 +134,6 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
             "aria-labelledby": "label-check1-" + variant,
             checked: 'indeterminate'
           }), (0, _jsxRuntime.jsx)(_Label.Label, {
-            sx: {
-              m: 0,
-              ml: 2
-            },
             htmlFor: "check1-" + variant,
             id: "label-check1-" + variant,
             children: "This option"
@@ -173,10 +153,6 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
           "aria-labelledby": "label-check1-disabled",
           checked: 'indeterminate'
         }), (0, _jsxRuntime.jsx)(_Label.Label, {
-          sx: {
-            m: 0,
-            ml: 2
-          },
           htmlFor: "check1-disabled",
           id: "label-check1-disabled",
           children: "This option"

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

@@ -7,6 +7,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 // The output willl be 16px because of the 1px border.
 var CHECKBOX_SIZE = 14;
 var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
+  var variantColor = variant === 'disabled' ? 'input.background.disabled' : variant;
   return _extends({
     all: 'unset',
     position: 'relative',
@@ -14,7 +15,7 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
   }, _Input.baseControlBorderStyle, _Input.baseControlFocusStyle, {
     width: CHECKBOX_SIZE,
     height: CHECKBOX_SIZE,
-    borderRadius: 1,
+    borderRadius: 0,
     display: 'flex',
     justifyContent: 'center',
     '&[aria-disabled="true"]': {
@@ -22,30 +23,40 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
       cursor: 'not-allowed',
       pointerEvents: 'none'
     },
-    '&[data-state=checked]': {
-      backgroundColor: variant,
-      color: variant,
-      borderColor: variant
+    '&[data-state=checked], &[data-state=indeterminate]': {
+      backgroundColor: variantColor,
+      color: variantColor,
+      borderColor: variantColor
+    },
+    '& ~ label': {
+      fontWeight: 'regular',
+      color: _Input.inputBaseText,
+      m: 0,
+      ml: 2
     },
     svg: {
       position: 'absolute',
+      fill: 'currentColor',
       top: 0,
       left: 0
     }
   });
 };
 var checkboxIndicatorStyle = exports.checkboxIndicatorStyle = function checkboxIndicatorStyle(variant) {
+  var backgroundColor = variant === 'disabled' ? 'icon.inverse-disabled' : 'icon.inverse';
   return {
     width: 14,
     height: 14,
-    backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='white'/%3E%3C/svg%3E\")",
+    backgroundColor: backgroundColor,
+    maskImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='currentcolor'/%3E%3C/svg%3E\")",
     '&[data-state=indeterminate]': {
-      marginTop: '6px',
-      backgroundImage: 'none',
-      backgroundColor: variant,
+      maskImage: 'none',
+      backgroundColor: backgroundColor,
       position: 'absolute',
-      width: 10,
-      height: 2
+      top: '50%',
+      width: 8,
+      height: 2,
+      marginTop: '-1px'
     }
   };
 };

package/build/system/Form/Radio/Radio.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { RadioOptionOptionProps } from './RadioOption';
 export declare const VIP_RADIO = "vip-radio-component";
 export type RadioProps = {
-    variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+    variant?: 'primary' | 'success' | 'brand' | 'disabled';
     disabled?: boolean | undefined;
     defaultValue?: string | number;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, option?: RadioOptionOptionProps) => void;

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

@@ -32,7 +32,7 @@ var Default = exports.Default = function Default() {
     setChecked(_extends({}, checked, (_extends2 = {}, _extends2[radioName] = value, _extends2)));
   };
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [['primary', 'success', 'error', 'warning', 'info'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_2.Box, {
         children: [(0, _jsxRuntime.jsx)(_2.Heading, {
           as: "h2",
@@ -64,7 +64,7 @@ var Default = exports.Default = function Default() {
         sx: {
           textTransform: 'capitalize'
         },
-        children: "Disabled"
+        children: "disabled"
       }), (0, _jsxRuntime.jsx)(_Radio.Radio, {
         disabled: true,
         name: "the_option_",
@@ -169,7 +169,7 @@ var AcessibleExamples = exports.AcessibleExamples = function AcessibleExamples()
           fontSize: 2,
           fontWeight: 'bold'
         },
-        children: "All Disabled options"
+        children: "All disabled options"
       }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
         sx: {
           alignItems: 'center'

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

@@ -2,13 +2,16 @@
 
 exports.__esModule = true;
 exports.labelStyle = exports.itemStyle = exports.inputStyle = void 0;
-var _ScreenReaderText = require("../../ScreenReaderText/ScreenReaderText");
 var _Input = require("../Input.styles");
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 // The output willl be 18px because of the 1px border.
 var RADIO_SIZE = 16;
 var inputStyle = exports.inputStyle = function inputStyle(variant) {
-  return _extends({}, _ScreenReaderText.screenReaderTextClass, {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    clipPath: 'inset(50%)',
     width: RADIO_SIZE,
     height: RADIO_SIZE,
     '&:focus ~ label:before': {
@@ -16,7 +19,7 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
       content: '""',
       border: '1px solid',
       borderColor: _Input.baseControlBorderStyle.borderColor,
-      left: -5
+      left: 0
     },
     '&:checked ~ label::after': {
       borderColor: variant,
@@ -26,22 +29,20 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
       backgroundColor: variant,
       borderColor: variant
     }
-  });
+  };
 };
 var labelStyle = exports.labelStyle = function labelStyle(variant) {
   return {
+    display: 'flex',
     cursor: 'pointer',
     position: 'relative',
-    marginLeft: 5,
     marginBottom: 0,
     userSelect: 'none',
     color: _Input.inputBaseText,
-    lineHeight: 'body',
+    fontWeight: 'regular',
+    lineHeight: 'normal',
     '&:before, &:after': {
       borderRadius: '100%',
-      position: 'absolute',
-      top: 1,
-      left: -5,
       transition: 'all .3s ease-out',
       width: RADIO_SIZE,
       height: RADIO_SIZE
@@ -49,9 +50,13 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
     '&::before': {
       content: '""',
       border: '1px solid',
-      borderColor: _Input.baseControlBorderStyle.borderColor
+      borderColor: _Input.baseControlBorderStyle.borderColor,
+      marginRight: 2
     },
     '&::after': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
       content: '""',
       backgroundColor: variant,
       backgroundSize: '100%',
@@ -66,5 +71,6 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
 var itemStyle = exports.itemStyle = {
   display: 'flex',
   alignItems: 'center',
-  my: 2
+  my: 2,
+  position: 'relative'
 };

package/build/system/Form/RadioBoxGroup.js

@@ -38,6 +38,7 @@ const RadioOption = ( {
 				backgroundColor: 'input.radio-box.background.default',
 				cursor: 'pointer',
 				borderRadius: 2,
+				minWidth: 220,
 				textAlign: 'left',
 				border: '1px solid',
 				borderColor: 'input.radio-box.border.default',

package/build/system/Toolbar/Toolbar.stories.js

@@ -82,7 +82,6 @@ var VIPDashboardLike = exports.VIPDashboardLike = {
           children: [(0, _jsxRuntime.jsx)(_.Toolbar.Separator, {}), (0, _jsxRuntime.jsxs)("a", {
             href: "/",
             children: [(0, _jsxRuntime.jsx)(_system.Avatar, {
-              isVIP: true,
               name: "John Doe",
               src: "https://i.pravatar.cc/80"
             }), (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {

package/build/system/theme/colors.js

@@ -6,6 +6,5 @@
 
 export default theme => ( {
 	...theme.color,
-	brand: theme.color.gold,
 	grey: theme.color.gray,
 } );

package/package.json

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

package/src/system/Avatar/Avatar.stories.tsx

@@ -16,4 +16,18 @@ export default {
 
 type Story = StoryObj< typeof Avatar >;
 
-export const Default: Story = {};
+const COMMON_SIZES = [ 128, 64, 48, 32, 24, 16 ];
+
+export const Default = () => (
+	<>
+		{ COMMON_SIZES.map( size => (
+			<Avatar key={ size } size={ size } src="https://i.pravatar.cc/100" />
+		) ) }
+	</>
+);
+export const WithName: Story = {
+	args: {
+		name: 'Kitty',
+		size: 30,
+	},
+};

package/src/system/Avatar/Avatar.tsx

@@ -11,7 +11,6 @@ import { Image, ImageProps, ThemeUIStyleObject } from 'theme-ui';
 import { Box, Text } from '..';
 
 export interface AvatarProps {
-	isVIP?: boolean;
 	size?: number;
 	src?: string;
 	name?: string;
@@ -23,24 +22,21 @@ type AvatarImageProps = AvatarProps & ImageProps;
 
 export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 	(
-		{ isVIP = false, name, size = 32, src, className, sx = {}, ...props }: AvatarImageProps,
+		{ name, size = 32, src, className, sx = {}, ...props }: AvatarImageProps,
 		ref: Ref< HTMLElement >
 	) => (
 		<Box
 			sx={ {
 				borderRadius: '100%',
-				height: size + 2, // +2 to compensate padding on both sides
-				width: size + 2, // +2 to compensate padding on both sides
-				borderWidth: '2px',
-				borderStyle: 'solid',
-				borderColor: isVIP || isVIP === undefined ? 'primary' : 'transparent',
+				height: size,
+				width: size,
 				overflow: 'hidden',
-				backgroundColor: 'primary',
+				border: 'none',
+				backgroundColor: 'icon.primary',
 				display: 'inline-flex',
 				alignItems: 'center',
 				justifyContent: 'center',
-				color: 'white',
-				padding: '1px', // this should probably be replaced with a token
+				color: 'inverse',
 				textAlign: 'center',
 				...sx,
 			} }
@@ -63,10 +59,10 @@ export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 				<Text
 					as="span"
 					sx={ {
-						color: 'white',
+						color: 'icon.inverse',
 						mb: 0,
 						fontWeight: 'bold',
-						fontSize: 0,
+						fontSize: 2,
 						textTransform: 'uppercase',
 					} }
 				>

package/src/system/Form/Checkbox/Checkbox.stories.tsx

@@ -61,9 +61,7 @@ export const Default = () => {
 
 	return (
 		<Form.Root>
-			{ (
-				[ 'primary', 'success', 'error', 'warning', 'info' ] as CheckboxProps[ 'variant' ][]
-			 ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Tell me your { variant } prefereces</Form.Legend>
 
@@ -75,12 +73,7 @@ export const Default = () => {
 							aria-labelledby={ `label-check1-${ variant }` }
 							onCheckedChange={ setChecked }
 						/>
-						<Label
-							clickable
-							sx={ { m: 0, ml: 2 } }
-							htmlFor={ `check1-${ variant }` }
-							id={ `label-check1-${ variant }` }
-						>
+						<Label clickable htmlFor={ `check1-${ variant }` } id={ `label-check1-${ variant }` }>
 							This option
 						</Label>
 					</Flex>
@@ -93,12 +86,7 @@ export const Default = () => {
 							aria-labelledby={ `label-check2-${ variant }` }
 							onCheckedChange={ setChecked2 }
 						/>
-						<Label
-							clickable
-							sx={ { m: 0, ml: 2 } }
-							htmlFor={ `check2-${ variant }` }
-							id={ `label-check2-${ variant }` }
-						>
+						<Label clickable htmlFor={ `check2-${ variant }` } id={ `label-check2-${ variant }` }>
 							This option too
 						</Label>
 					</Flex>
@@ -117,12 +105,7 @@ export const Default = () => {
 						aria-labelledby={ `label-check1-disabled` }
 						onCheckedChange={ setChecked }
 					/>
-					<Label
-						clickable
-						sx={ { m: 0, ml: 2 } }
-						htmlFor={ `check1-disabled` }
-						id={ `label-check1-disabled` }
-					>
+					<Label clickable htmlFor={ `check1-disabled` } id={ `label-check1-disabled` }>
 						This option
 					</Label>
 				</Flex>
@@ -135,12 +118,7 @@ export const Default = () => {
 						aria-labelledby={ `label-check2-disabled` }
 						onCheckedChange={ setChecked2 }
 					/>
-					<Label
-						clickable
-						sx={ { m: 0, ml: 2 } }
-						htmlFor={ `check2-disabled` }
-						id={ `label-check2-disabled` }
-					>
+					<Label clickable htmlFor={ `check2-disabled` } id={ `label-check2-disabled` }>
 						This option too
 					</Label>
 				</Flex>
@@ -161,9 +139,7 @@ export const Indeterminate = () => {
 
 	return (
 		<Form.Root>
-			{ (
-				[ 'primary', 'success', 'error', 'warning', 'info' ] as CheckboxProps[ 'variant' ][]
-			 ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Indeterminate state { variant }</Form.Legend>
 
@@ -174,11 +150,8 @@ export const Indeterminate = () => {
 							aria-labelledby={ `label-check1-${ variant }` }
 							checked={ 'indeterminate' }
 						/>
-						<Label
-							sx={ { m: 0, ml: 2 } }
-							htmlFor={ `check1-${ variant }` }
-							id={ `label-check1-${ variant }` }
-						>
+
+						<Label htmlFor={ `check1-${ variant }` } id={ `label-check1-${ variant }` }>
 							This option
 						</Label>
 					</Flex>
@@ -195,11 +168,7 @@ export const Indeterminate = () => {
 						aria-labelledby={ `label-check1-disabled` }
 						checked={ 'indeterminate' }
 					/>
-					<Label
-						sx={ { m: 0, ml: 2 } }
-						htmlFor={ `check1-disabled` }
-						id={ `label-check1-disabled` }
-					>
+					<Label htmlFor={ `check1-disabled` } id={ `label-check1-disabled` }>
 						This option
 					</Label>
 				</Flex>

package/src/system/Form/Checkbox/Checkbox.tsx

@@ -7,7 +7,7 @@ import { RadioOptionProps } from '../Radio/RadioOption';
 
 export interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
 	disabled?: boolean;
-	variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+	variant?: 'primary' | 'success' | 'brand' | 'disabled';
 }
 
 const StyledCheckbox = ( { variant = 'primary', ...rest }: CheckboxProps ) => (
@@ -34,9 +34,6 @@ const Checkbox = ( {
 
 	return (
 		<StyledCheckbox
-			sx={ {
-				opacity: disabled ? 0.4 : 1,
-			} }
 			onCheckedChange={ disabled ? undefined : onCheckedChange }
 			aria-disabled={ disabled }
 			variant={ variant }

package/src/system/Form/Checkbox/styles.ts

@@ -4,50 +4,68 @@ import {
 	baseControlBorderStyle,
 	baseControlFocusStyle,
 	inputBaseBackground,
+	inputBaseText,
 } from '../Input.styles';
 
 // The output willl be 16px because of the 1px border.
 const CHECKBOX_SIZE = 14;
 
-export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	all: 'unset',
-	position: 'relative',
-	backgroundColor: inputBaseBackground,
-	...baseControlBorderStyle,
-	...baseControlFocusStyle,
-	width: CHECKBOX_SIZE,
-	height: CHECKBOX_SIZE,
-	borderRadius: 1,
-	display: 'flex',
-	justifyContent: 'center',
-	'&[aria-disabled="true"]': {
-		opacity: 0.7,
-		cursor: 'not-allowed',
-		pointerEvents: 'none',
-	},
-	'&[data-state=checked]': {
-		backgroundColor: variant,
-		color: variant,
-		borderColor: variant,
-	},
-	svg: {
-		position: 'absolute',
-		top: 0,
-		left: 0,
-	},
-} );
+export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => {
+	const variantColor = variant === 'disabled' ? 'input.background.disabled' : variant;
 
-export const checkboxIndicatorStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	width: 14,
-	height: 14,
-	backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='white'/%3E%3C/svg%3E")`,
+	return {
+		all: 'unset',
+		position: 'relative',
+		backgroundColor: inputBaseBackground,
+		...baseControlBorderStyle,
+		...baseControlFocusStyle,
+		width: CHECKBOX_SIZE,
+		height: CHECKBOX_SIZE,
+		borderRadius: 0,
+		display: 'flex',
+		justifyContent: 'center',
+		'&[aria-disabled="true"]': {
+			opacity: 0.7,
+			cursor: 'not-allowed',
+			pointerEvents: 'none',
+		},
+		'&[data-state=checked], &[data-state=indeterminate]': {
+			backgroundColor: variantColor,
+			color: variantColor,
+			borderColor: variantColor,
+		},
+		'& ~ label': {
+			fontWeight: 'regular',
+			color: inputBaseText,
+			m: 0,
+			ml: 2,
+		},
+		svg: {
+			position: 'absolute',
+			fill: 'currentColor',
+			top: 0,
+			left: 0,
+		},
+	};
+};
 
-	'&[data-state=indeterminate]': {
-		marginTop: '6px',
-		backgroundImage: 'none',
-		backgroundColor: variant,
-		position: 'absolute',
-		width: 10,
-		height: 2,
-	},
-} );
+export const checkboxIndicatorStyle = ( variant: string ): ThemeUIStyleObject => {
+	const backgroundColor = variant === 'disabled' ? 'icon.inverse-disabled' : 'icon.inverse';
+
+	return {
+		width: 14,
+		height: 14,
+		backgroundColor,
+		maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='currentcolor'/%3E%3C/svg%3E")`,
+
+		'&[data-state=indeterminate]': {
+			maskImage: 'none',
+			backgroundColor,
+			position: 'absolute',
+			top: '50%',
+			width: 8,
+			height: 2,
+			marginTop: '-1px',
+		},
+	};
+};

package/src/system/Form/Radio/Radio.stories.tsx

@@ -62,39 +62,35 @@ export const Default = () => {
 
 	return (
 		<>
-			{ ( [ 'primary', 'success', 'error', 'warning', 'info' ] as RadioProps[ 'variant' ][] ).map(
-				variant => (
-					<Box key={ variant }>
-						<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
-							{ variant }
-						</Heading>
-
-						<Radio
-							variant={ variant }
-							onChange={ ( _, option ) =>
-								toggleChecked( `the_option_${ variant }`, option?.value )
-							}
-							name={ `the_option_${ variant }` }
-							defaultValue={ checked?.[ `the_option_${ variant }` ] || `${ variant }-option-a` }
-							options={ [
-								{
-									id: `${ variant }-option-a`,
-									value: `${ variant }-option-a`,
-									label: `I am the ${ variant } option A`,
-								},
-								{
-									id: `${ variant }-option-b`,
-									value: `${ variant }-option-b`,
-									label: `I am the ${ variant } option B`,
-								},
-							] }
-						/>
-					</Box>
-				)
-			) }
+			{ ( [ 'primary', 'brand' ] as RadioProps[ 'variant' ][] ).map( variant => (
+				<Box key={ variant }>
+					<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
+						{ variant }
+					</Heading>
+
+					<Radio
+						variant={ variant }
+						onChange={ ( _, option ) => toggleChecked( `the_option_${ variant }`, option?.value ) }
+						name={ `the_option_${ variant }` }
+						defaultValue={ checked?.[ `the_option_${ variant }` ] || `${ variant }-option-a` }
+						options={ [
+							{
+								id: `${ variant }-option-a`,
+								value: `${ variant }-option-a`,
+								label: `I am the ${ variant } option A`,
+							},
+							{
+								id: `${ variant }-option-b`,
+								value: `${ variant }-option-b`,
+								label: `I am the ${ variant } option B`,
+							},
+						] }
+					/>
+				</Box>
+			) ) }
 			<Box>
 				<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
-					Disabled
+					disabled
 				</Heading>
 
 				<Radio
@@ -197,7 +193,7 @@ export const AcessibleExamples = () => {
 
 			<Form.Fieldset>
 				<Form.Legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>
-					All Disabled options
+					All disabled options
 				</Form.Legend>
 
 				<Flex sx={ { alignItems: 'center' } }>

package/src/system/Form/Radio/Radio.tsx

@@ -8,7 +8,7 @@ import { RadioOption, RadioOptionOptionProps } from './RadioOption';
 export const VIP_RADIO = 'vip-radio-component';
 
 export type RadioProps = {
-	variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+	variant?: 'primary' | 'success' | 'brand' | 'disabled';
 	disabled?: boolean | undefined;
 	defaultValue?: string | number;
 	onChange?: ( e: React.ChangeEvent< HTMLInputElement >, option?: RadioOptionOptionProps ) => void;

package/src/system/Form/Radio/styles.ts

@@ -1,13 +1,16 @@
 import { ThemeUIStyleObject } from 'theme-ui';
 
-import { screenReaderTextClass } from '../../ScreenReaderText/ScreenReaderText';
 import { baseControlBorderStyle, inputBaseText } from '../Input.styles';
 
 // The output willl be 18px because of the 1px border.
 const RADIO_SIZE = 16;
 
 export const inputStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	...screenReaderTextClass,
+	position: 'absolute',
+	top: 0,
+	left: 0,
+	clip: 'rect(1px, 1px, 1px, 1px)',
+	clipPath: 'inset(50%)',
 	width: RADIO_SIZE,
 	height: RADIO_SIZE,
 	'&:focus ~ label:before': {
@@ -15,7 +18,7 @@ export const inputStyle = ( variant: string ): ThemeUIStyleObject => ( {
 		content: '""',
 		border: '1px solid',
 		borderColor: baseControlBorderStyle.borderColor,
-		left: -5,
+		left: 0,
 	},
 	'&:checked ~ label::after': {
 		borderColor: variant,
@@ -28,18 +31,16 @@ export const inputStyle = ( variant: string ): ThemeUIStyleObject => ( {
 } );
 
 export const labelStyle = ( variant: string ): ThemeUIStyleObject => ( {
+	display: 'flex',
 	cursor: 'pointer',
 	position: 'relative',
-	marginLeft: 5,
 	marginBottom: 0,
 	userSelect: 'none',
 	color: inputBaseText,
-	lineHeight: 'body',
+	fontWeight: 'regular',
+	lineHeight: 'normal',
 	'&:before, &:after': {
 		borderRadius: '100%',
-		position: 'absolute',
-		top: 1,
-		left: -5,
 		transition: 'all .3s ease-out',
 		width: RADIO_SIZE,
 		height: RADIO_SIZE,
@@ -48,8 +49,12 @@ export const labelStyle = ( variant: string ): ThemeUIStyleObject => ( {
 		content: '""',
 		border: '1px solid',
 		borderColor: baseControlBorderStyle.borderColor,
+		marginRight: 2,
 	},
 	'&::after': {
+		position: 'absolute',
+		top: 0,
+		left: 0,
 		content: '""',
 		backgroundColor: variant,
 		backgroundSize: '100%',
@@ -65,4 +70,5 @@ export const itemStyle: ThemeUIStyleObject = {
 	display: 'flex',
 	alignItems: 'center',
 	my: 2,
+	position: 'relative',
 };

package/src/system/Form/RadioBoxGroup.js

@@ -38,6 +38,7 @@ const RadioOption = ( {
 				backgroundColor: 'input.radio-box.background.default',
 				cursor: 'pointer',
 				borderRadius: 2,
+				minWidth: 220,
 				textAlign: 'left',
 				border: '1px solid',
 				borderColor: 'input.radio-box.border.default',

package/src/system/Toolbar/Toolbar.stories.tsx

@@ -94,7 +94,7 @@ export const VIPDashboardLike: Story = {
 					<Toolbar.Separator />
 
 					<a href="/">
-						<Avatar isVIP name="John Doe" src="https://i.pravatar.cc/80" />
+						<Avatar name="John Doe" src="https://i.pravatar.cc/80" />
 						<ScreenReaderText>John Doe</ScreenReaderText>
 					</a>
 				</Toolbar.UtilNav>

package/src/system/theme/colors.js

@@ -6,6 +6,5 @@
 
 export default theme => ( {
 	...theme.color,
-	brand: theme.color.gold,
 	grey: theme.color.gray,
 } );

package/tokens/utilities/colors/package-lock.json

@@ -1506,9 +1506,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -4658,9 +4658,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "peer": true
     },
     "font-atlas": {