@automattic/vip-design-system 0.7.0 → 0.9.0

package/src/system/Wizard/WizardStep.js

@@ -11,20 +11,20 @@ import PropTypes from 'prop-types';
  */
 import { Card, Heading, Text } from '..';
 
-const WizardStep = ({ title, subTitle, complete = false, children, active }) => {
+const WizardStep = ( { title, subTitle, complete = false, children, active } ) => {
 	let borderLeftColor = 'border';
 
-	if (complete) {
-		borderLeftColor = 'green.60';
-	} else if (active) {
+	if ( complete ) {
+		borderLeftColor = 'success';
+	} else if ( active ) {
 		borderLeftColor = 'primary';
 	}
 
 	let color = 'muted';
 
-	if (complete) {
-		color = 'green.60';
-	} else if (active) {
+	if ( complete ) {
+		color = 'success';
+	} else if ( active ) {
 		color = 'heading';
 	}
 
@@ -37,7 +37,7 @@ const WizardStep = ({ title, subTitle, complete = false, children, active }) =>
 				backgroundColor: active ? 'card' : 'transparent',
 				borderRadius: 0,
 				borderBottom: active ? 'none' : '1px solid',
-				'&:first-child': {
+				'&:first-of-type': {
 					borderTopWidth: active ? 'none' : '1px',
 					borderTopStyle: active ? 'none' : 'solid',
 				},
@@ -65,8 +65,8 @@ const WizardStep = ({ title, subTitle, complete = false, children, active }) =>
 };
 
 WizardStep.propTypes = {
-	title: PropTypes.string,
-	subTitle: PropTypes.string,
+	title: PropTypes.node,
+	subTitle: PropTypes.node,
 	complete: PropTypes.bool,
 	active: PropTypes.bool,
 	children: PropTypes.node.isRequired,

package/src/system/Wizard/WizardStepHorizontal.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
  */
 import { Heading } from '..';
 
-const WizardStepHorizontal = ({ title, active }) => {
+const WizardStepHorizontal = ( { title, active } ) => {
 	return (
 		<Heading
 			variant="h4"
@@ -29,8 +29,8 @@ const WizardStepHorizontal = ({ title, active }) => {
 };
 
 WizardStepHorizontal.propTypes = {
-	title: PropTypes.string,
-	subTitle: PropTypes.string,
+	title: PropTypes.node,
+	subTitle: PropTypes.node,
 	active: PropTypes.bool,
 };
 

package/src/system/index.js

@@ -8,18 +8,39 @@ import { Box } from './Box';
 import { Button } from './Button';
 import { Card } from './Card';
 import { Code } from './Code';
-import { Dialog, DialogButton, DialogDivider, DialogMenu, DialogMenuItem, DialogTrigger, DialogContent } from './Dialog';
+import {
+	Dialog,
+	DialogButton,
+	DialogDivider,
+	DialogMenu,
+	DialogMenuItem,
+	DialogTrigger,
+	DialogContent,
+} from './Dialog';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { Flex } from './Flex';
-import { Input, Label, Toggle, ToggleRow, Validation, Radio, Select, Textarea, Checkbox } from './Form';
+import {
+	Input,
+	Label,
+	Toggle,
+	ToggleRow,
+	ToggleGroup,
+	Validation,
+	Radio,
+	RadioBoxGroup,
+	Select,
+	Textarea,
+	Checkbox,
+} from './Form';
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
 import { Notice } from './Notice';
 import { Progress } from './Progress';
 import { Spinner } from './Spinner';
+import { ResourceList, ResourceItem } from './ResourceList';
 import { Tooltip } from './Tooltip';
-import { Timeline } from './Timeline';
+import { Time } from './Time';
 import { Notification } from './Notification';
 import { OptionRow } from './OptionRow';
 import { Table, TableRow } from './Table';
@@ -60,14 +81,18 @@ export {
 	Link,
 	Select,
 	Radio,
+	RadioBoxGroup,
+	ResourceList,
+	ResourceItem,
 	Textarea,
 	Progress,
 	Text,
 	Tabs,
 	Toggle,
 	ToggleRow,
+	ToggleGroup,
 	TabItem,
-	Timeline,
+	Time,
 	Validation,
 	Wizard,
 	WizardStep,

package/src/system/theme/colors.js

@@ -80,100 +80,222 @@
 
 // export default huesObject;
 
-export const colors = {
+export const light = {
 	black: 'rgba(19, 25, 30, 1)',
 	brand: {
-		0: 'rgba(252, 250, 250, 1)',
-		3: 'rgba(245, 242, 241, 1)',
-		7: 'rgba(238, 234, 229, 1)',
-		10: 'rgba(234, 227, 218, 1)',
-		15: 'rgba(227, 208, 184, 1)',
-		20: 'rgba(223, 195, 158, 1)',
-		25: 'rgba(220, 180, 128, 1)',
-		30: 'rgba(216, 164, 95, 1)',
-		35: 'rgba(205, 155, 86, 1)',
-		40: 'rgba(191, 142, 76, 1)',
-		45: 'rgba(179, 131, 67, 1)',
-		50: 'rgba(165, 119, 59, 1)',
-		55: 'rgba(151, 106, 49, 1)',
-		60: 'rgba(136, 93, 38, 1)',
-		65: 'rgba(123, 82, 28, 1)',
-		70: 'rgba(110, 71, 16, 1)',
-		75: 'rgba(94, 57, 4, 1)',
-		80: 'rgba(82, 45, 0, 1)',
-		85: 'rgba(67, 34, 0, 1)',
-		90: 'rgba(53, 22, 1, 1)',
-		95: 'rgba(38, 8, 0, 1)',
-		100: 'rgba(30, 0, 0, 1)',
+		0: '#FEFDFB',
+		3: '#FDF9F5',
+		7: '#FAF3EA',
+		10: '#F7EBDC',
+		20: '#F2DFC8',
+		30: '#EBD1AF',
+		40: '#E0BD8F',
+		50: '#D8A45F',
+		60: '#B96B03',
+		70: '#B96B03',
+		80: '#AB6200',
+		90: '#915300',
+		100: '#2B1C08',
 	},
 	grey: {
-		0: 'rgba(250, 250, 250, 1)',
-		5: 'rgba(238, 238, 238, 1)',
-		10: 'rgba(225, 225, 225, 1)',
-		15: 'rgba(213, 213, 213, 1)',
-		20: 'rgba(201, 201, 201, 1)',
-		25: 'rgba(189, 189, 189, 1)',
-		30: 'rgba(176, 176, 176, 1)',
-		35: 'rgba(164, 164, 164, 1)',
-		40: 'rgba(152, 152, 152, 1)',
-		45: 'rgba(140, 140, 140, 1)',
-		50: 'rgba(128, 128, 128, 1)',
-		55: 'rgba(115, 115, 115, 1)',
-		60: 'rgba(103, 103, 103, 1)',
-		65: 'rgba(91, 91, 91, 1)',
-		70: 'rgba(79, 79, 79, 1)',
-		75: 'rgba(66, 66, 66, 1)',
-		80: 'rgba(54, 54, 54, 1)',
-		85: 'rgba(42, 42, 42, 1)',
-		90: 'rgba(30, 30, 30, 1)',
-		95: 'rgba(17, 17, 17, 1)',
-		100: 'rgba(5, 5, 5, 1)',
+		0: '#FDFDFC',
+		5: '#F9F9F8',
+		10: '#F3F3F2',
+		20: '#EEEEEC',
+		30: '#EAE8E7',
+		40: '#E4E2E1',
+		50: '#DCDAD8',
+		60: '#C9C6C2',
+		70: '#918F8D',
+		80: '#706F6C',
+		90: '#4E4D4B',
+		100: '#1C1A19',
+	},
+	blue: {
+		0: '#FAFEFE',
+		5: '#F3FCFD',
+		10: '#E9F9FB',
+		20: '#DAF5F8',
+		30: '#C3EEF3',
+		40: '#A9E3EA',
+		50: '#82D5DE',
+		60: '#41C4D2',
+		70: '#009FB1',
+		80: '#0090A0',
+		90: '#007A87',
+		100: '#002B2F',
 	},
 	green: {
-		0: 'rgba(245, 251, 247, 1)',
-		5: 'rgba(225, 243, 231, 1)',
-		10: 'rgba(198, 234, 208, 1)',
-		15: 'rgba(170, 225, 183, 1)',
-		20: 'rgba(137, 218, 160, 1)',
-		25: 'rgba(109, 209, 139, 1)',
-		30: 'rgba(77, 198, 121, 1)',
-		35: 'rgba(64, 186, 111, 1)',
-		40: 'rgba(48, 172, 99, 1)',
-		45: 'rgba(29, 161, 88, 1)',
-		50: 'rgba(1, 148, 77, 1)',
-		55: 'rgba(0, 136, 64, 1)',
-		60: 'rgba(0, 121, 52, 1)',
-		65: 'rgba(0, 109, 41, 1)',
-		70: 'rgba(0, 97, 30, 1)',
-		75: 'rgba(0, 81, 15, 1)',
-		80: 'rgba(0, 69, 2, 1)',
-		85: 'rgba(0, 55, 0, 1)',
-		90: 'rgba(1, 44, 0, 1)',
-		95: 'rgba(1, 27, 0, 1)',
-		100: 'rgba(1, 8, 0, 1)',
+		0: '#FBFEFC',
+		5: '#F2FCF7',
+		10: '#E9F9F1',
+		20: '#DDF2E8',
+		30: '#CBEADB',
+		40: '#B3DEC9',
+		50: '#91CDB0',
+		60: '#5BB98C',
+		70: '#30A46C',
+		80: '#299762',
+		90: '#18794B',
+		100: '#153224',
+	},
+	pink: {
+		0: 'rgba(255, 248, 246, 1)',
+		5: 'rgba(255, 232, 230, 1)',
+		10: 'rgba(255, 214, 210, 1)',
+		15: 'rgba(255, 197, 193, 1)',
+		20: 'rgba(251, 183, 180, 1)',
+		25: 'rgba(239, 171, 168, 1)',
+		30: 'rgba(226, 158, 157, 1)',
+		35: 'rgba(212, 146, 148, 1)',
+		40: 'rgba(202, 133, 136, 1)',
+		45: 'rgba(188, 122, 126, 1)',
+		50: 'rgba(176, 109, 116, 1)',
+		55: 'rgba(163, 95, 106, 1)',
+		60: 'rgba(149, 83, 93, 1)',
+		65: 'rgba(137, 71, 85, 1)',
+		70: 'rgba(124, 57, 74, 1)',
+		75: 'rgba(109, 41, 62, 1)',
+		80: 'rgba(95, 30, 52, 1)',
+		85: 'rgba(83, 14, 43, 1)',
+		90: 'rgba(69, 0, 31, 1)',
+		95: 'rgba(53, 0, 18, 1)',
+		100: 'rgba(46, 0, 3, 1)',
+	},
+	salmon: {
+		0: 'rgba(254, 248, 248, 1)',
+		5: 'rgba(254, 233, 228, 1)',
+		10: 'rgba(254, 214, 206, 1)',
+		15: 'rgba(254, 195, 177, 1)',
+		20: 'rgba(255, 178, 150, 1)',
+		25: 'rgba(255, 163, 120, 1)',
+		30: 'rgba(249, 148, 94, 1)',
+		35: 'rgba(237, 137, 85, 1)',
+		40: 'rgba(224, 123, 77, 1)',
+		45: 'rgba(210, 113, 70, 1)',
+		50: 'rgba(197, 101, 63, 1)',
+		55: 'rgba(181, 86, 56, 1)',
+		60: 'rgba(167, 73, 48, 1)',
+		65: 'rgba(153, 60, 43, 1)',
+		70: 'rgba(137, 47, 38, 1)',
+		75: 'rgba(124, 30, 30, 1)',
+		80: 'rgba(108, 15, 23, 1)',
+		85: 'rgba(94, 0, 16, 1)',
+		90: 'rgba(78, 0, 0, 1)',
+		95: 'rgba(62, 0, 1, 1)',
+		100: 'rgba(52, 0, 2, 1)',
+	},
+	orange: {
+		0: 'rgba(255, 249, 241, 1)',
+		5: 'rgba(255, 233, 219, 1)',
+		10: 'rgba(255, 215, 189, 1)',
+		15: 'rgba(255, 195, 159, 1)',
+		20: 'rgba(255, 178, 126, 1)',
+		25: 'rgba(254, 159, 95, 1)',
+		30: 'rgba(255, 139, 64, 1)',
+		35: 'rgba(255, 123, 40, 1)',
+		40: 'rgba(244, 110, 21, 1)',
+		45: 'rgba(231, 98, 5, 1)',
+		50: 'rgba(215, 80, 1, 1)',
+		55: 'rgba(197, 73, 0, 1)',
+		60: 'rgba(180, 60, 0, 1)',
+		65: 'rgba(165, 49, 0, 1)',
+		70: 'rgba(148, 38, 1, 1)',
+		75: 'rgba(129, 23, 1, 1)',
+		80: 'rgba(111, 8, 1, 1)',
+		85: 'rgba(95, 0, 0, 1)',
+		90: 'rgba(78, 0, 0, 1)',
+		95: 'rgba(60, 0, 0, 1)',
+		100: 'rgba(50, 0, 3, 1)',
+	},
+	yellow: {
+		0: '#FEFDFB',
+		5: '#FFF9EF',
+		10: '#FFF2DE',
+		20: '#FFEAC8',
+		30: '#FFE0B0',
+		40: '#FFD28B',
+		50: '#F2BB62',
+		60: '#EA9F28',
+		70: '#FFB031',
+		80: '#FBA318',
+		90: '#9C6000',
+		100: '#412800',
+	},
+	red: {
+		0: '#FFFCFC',
+		5: '#FFF8F7',
+		10: '#FFF0EF',
+		20: '#FFE6E4',
+		30: '#FED7D4',
+		40: '#FDC5C1',
+		50: '#F8ACA7',
+		60: '#F08D86',
+		70: '#F04539',
+		80: '#E63B2F',
+		90: '#D42B1E',
+		100: '#361513',
+	},
+};
+
+export const dark = {
+	black: 'rgba(19, 25, 30, 1)',
+	brand: {
+		0: '#1A160F',
+		3: '#231809',
+		7: '#301F08',
+		10: '#301F08',
+		20: '#3A2406',
+		30: '#432804',
+		40: '#502E01',
+		50: '#603700',
+		60: '#774400',
+		70: '#B96B03',
+		80: '#C37A19',
+		90: '#CA8529',
+		100: '#FAF2E7',
+	},
+	grey: {
+		0: '#161615',
+		5: '#1C1C1B',
+		10: '#242221',
+		20: '#282827',
+		30: '#2F2D2C',
+		40: '#353431',
+		50: '#3F3D3B',
+		60: '#524F4C',
+		70: '#726F6A',
+		80: '#807D78',
+		90: '#A29F9B',
+		100: '#EDEDEC',
 	},
 	blue: {
-		0: 'rgba(250, 251, 255, 1)',
-		5: 'rgba(229, 240, 246, 1)',
-		10: 'rgba(205, 230, 235, 1)',
-		15: 'rgba(178, 221, 230, 1)',
-		20: 'rgba(148, 212, 222, 1)',
-		25: 'rgba(119, 202, 216, 1)',
-		30: 'rgba(84, 192, 205, 1)',
-		35: 'rgba(48, 181, 196, 1)',
-		40: 'rgba(25, 168, 184, 1)',
-		45: 'rgba(0, 155, 173, 1)',
-		50: 'rgba(1, 144, 160, 1)',
-		55: 'rgba(0, 130, 146, 1)',
-		60: 'rgba(0, 117, 134, 1)',
-		65: 'rgba(0, 105, 121, 1)',
-		70: 'rgba(0, 91, 109, 1)',
-		75: 'rgba(0, 77, 95, 1)',
-		80: 'rgba(0, 66, 82, 1)',
-		85: 'rgba(0, 51, 68, 1)',
-		90: 'rgba(1, 40, 57, 1)',
-		95: 'rgba(0, 28, 42, 1)',
-		100: 'rgba(0, 10, 35, 1)',
+		0: '#0B1A1C',
+		5: '#062124',
+		10: '#032D31',
+		20: '#00353B',
+		30: '#003C42',
+		40: '#00444C',
+		50: '#005059',
+		60: '#00636E',
+		70: '#009FB1',
+		80: '#09BDD2',
+		90: '#2AC5D7',
+		100: '#E6F9FB',
+	},
+	green: {
+		0: '#0D1913',
+		5: '#0C1F16',
+		10: '#0F291D',
+		20: '#113122',
+		30: '#133927',
+		40: '#16442E',
+		50: '#1B5439',
+		60: '#236E4A',
+		70: '#30A46C',
+		80: '#3CB179',
+		90: '#4CC389',
+		100: '#E4FAF0',
 	},
 	pink: {
 		0: 'rgba(255, 248, 246, 1)',
@@ -245,51 +367,33 @@ export const colors = {
 		100: 'rgba(50, 0, 3, 1)',
 	},
 	yellow: {
-		0: 'rgba(255, 249, 241, 1)',
-		5: 'rgba(255, 233, 209, 1)',
-		10: 'rgba(255, 216, 165, 1)',
-		15: 'rgba(255, 200, 118, 1)',
-		20: 'rgba(255, 184, 74, 1)',
-		25: 'rgba(255, 169, 32, 1)',
-		30: 'rgba(240, 157, 1, 1)',
-		35: 'rgba(226, 145, 1, 1)',
-		40: 'rgba(211, 133, 0, 1)',
-		45: 'rgba(198, 122, 0, 1)',
-		50: 'rgba(184, 110, 1, 1)',
-		55: 'rgba(169, 97, 0, 1)',
-		60: 'rgba(152, 86, 0, 1)',
-		65: 'rgba(137, 75, 0, 1)',
-		70: 'rgba(123, 63, 1, 1)',
-		75: 'rgba(104, 51, 1, 1)',
-		80: 'rgba(89, 40, 0, 1)',
-		85: 'rgba(73, 29, 0, 1)',
-		90: 'rgba(59, 18, 0, 1)',
-		95: 'rgba(43, 4, 0, 1)',
-		100: 'rgba(35, 0, 0, 1)',
+		0: '#1F1300',
+		5: '#261700',
+		10: '#301E00',
+		20: '#3B2400',
+		30: '#462B00',
+		40: '#553400',
+		50: '#674003',
+		60: '#804F00',
+		70: '#FFB031',
+		80: '#FFC568',
+		90: '#F69E12',
+		100: '#FFF2DE',
 	},
 	red: {
-		0: 'rgba(255, 246, 249, 1)',
-		5: 'rgba(255, 231, 229, 1)',
-		10: 'rgba(255, 213, 206, 1)',
-		15: 'rgba(255, 195, 185, 1)',
-		20: 'rgba(255, 176, 161, 1)',
-		25: 'rgba(254, 157, 140, 1)',
-		30: 'rgba(255, 136, 114, 1)',
-		35: 'rgba(255, 116, 95, 1)',
-		40: 'rgba(255, 95, 77, 1)',
-		45: 'rgba(248, 77, 60, 1)',
-		50: 'rgba(231, 65, 53, 1)',
-		55: 'rgba(211, 55, 43, 1)',
-		60: 'rgba(191, 42, 35, 1)',
-		65: 'rgba(173, 34, 31, 1)',
-		70: 'rgba(154, 26, 25, 1)',
-		75: 'rgba(132, 11, 16, 1)',
-		80: 'rgba(113, 2, 8, 1)',
-		85: 'rgba(94, 0, 0, 1)',
-		90: 'rgba(74, 0, 1, 1)',
-		95: 'rgba(56, 0, 1, 1)',
-		100: 'rgba(46, 0, 2, 1)',
+		0: '#1E1313',
+		5: '#2B1311',
+		10: '#3C1714',
+		20: '#491915',
+		30: '#561B17',
+		40: '#681E19',
+		50: '#832019',
+		60: '#AC241A',
+		70: '#F04539',
+		80: '#F6574B',
+		90: '#FA6459',
+		100: '#FFEEED',
 	},
 };
 
-export default colors;
+export default light;