[v12] [Web] Update theme in v12

web/packages/design/src/Alert/Alert.jsx

@@ -36,7 +36,7 @@ const kind = props => {
       };
     case 'warning':
       return {
-        background: theme.colors.warning,
+        background: theme.colors.warning.main,
         color: theme.colors.text.contrast,
       };
     case 'success':

web/packages/design/src/Alert/Alert.test.js

@@ -35,10 +35,10 @@ describe('design/Alert', () => {
     });
   });
 
-  test('"kind" warning renders bg == theme.colors.warning', () => {
+  test('"kind" warning renders bg == theme.colors.warning.main', () => {
     const { container } = render(<Warning />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.warning,
+      background: theme.colors.warning.main,
     });
   });
 

web/packages/design/src/Button/Button.test.js

@@ -25,14 +25,14 @@ describe('design/Button', () => {
     const { container } = render(<Button />);
     expect(container.firstChild.nodeName).toBe('BUTTON');
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.brand.main,
+      background: theme.colors.brand,
     });
   });
 
-  test('"kind" primary renders bg == theme.colors.brand.main', () => {
+  test('"kind" primary renders bg == theme.colors.brand', () => {
     const { container } = render(<ButtonPrimary />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.brand.main,
+      background: theme.colors.brand,
     });
   });
 

web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js

@@ -26,7 +26,7 @@ describe('design/ButtonOutlined', () => {
     expect(container.firstChild.nodeName).toBe('BUTTON');
     expect(container.firstChild).toHaveStyle('font-size: 12px');
     expect(container.firstChild).toHaveStyle({
-      'border-color': theme.colors.text.primary,
+      'border-color': theme.colors.text.main,
     });
   });
 
@@ -48,7 +48,7 @@ describe('design/ButtonOutlined', () => {
   it('respects "kind" primary prop', () => {
     const { container } = render(<ButtonOutlined kind="primary" />);
     expect(container.firstChild).toHaveStyle({
-      'border-color': theme.colors.brand.main,
+      'border-color': theme.colors.brand,
     });
   });
 });

web/packages/design/src/CardError/__snapshots__/CardError.story.test.js.snap

@@ -32,7 +32,7 @@ exports[`rendering of Error Cards 1`] = `
   margin-bottom: 40px;
   padding: 32px;
   width: 540px;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   box-shadow: 0 4px 16px rgba(0,0,0,0.24);
   border-radius: 8px;

web/packages/design/src/Checkbox/Checkbox.tsx

@@ -34,7 +34,7 @@ export const CheckboxWrapper = styled(Flex)`
 
 export const CheckboxInput = styled.input`
   margin-right: 10px;
-  accent-color: ${props => props.theme.colors.brand.main};
+  accent-color: ${props => props.theme.colors.brand};
 
   &:hover {
     cursor: pointer;

web/packages/design/src/DataTable/InputSearch/InputSearch.tsx

@@ -83,16 +83,16 @@ const StyledInput = styled.input`
 
 function fromTheme(props) {
   return {
-    color: props.theme.colors.text.primary,
+    color: props.theme.colors.text.main,
     background: props.theme.colors.levels.sunkenSecondary,
 
     '&: hover, &:focus, &:active': {
       background: props.theme.colors.levels.surfaceSecondary,
       boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, .24)',
-      color: props.theme.colors.text.primary,
+      color: props.theme.colors.text.main,
     },
     '&::placeholder': {
-      color: props.theme.colors.text.placeholder,
+      color: props.theme.colors.text.muted,
       fontSize: props.theme.fontSizes[1],
     },
   };

web/packages/design/src/DataTable/Table.tsx

@@ -331,7 +331,7 @@ const EmptyIndicator = ({
         <Text
           typography="paragraph"
           m="4"
-          color="text.primary"
+          color="text.main"
           style={{
             display: 'flex',
             alignItems: 'center',

web/packages/design/src/Dialog/Dialog.jsx

@@ -62,7 +62,7 @@ const DialogBox = styled.div`
   padding: 32px;
   padding-top: 24px;
   background: ${props => props.theme.colors.levels.surfaceSecondary};
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
   display: flex;

web/packages/design/src/Dialog/DialogTitle.jsx

@@ -19,5 +19,5 @@ import React from 'react';
 import Text from './../Text';
 
 export default function DialogTitle(props) {
-  return <Text typography="h3" color="text.primary" caps {...props} />;
+  return <Text typography="h3" color="text.main" caps {...props} />;
 }

web/packages/design/src/Label/Label.jsx

@@ -25,13 +25,13 @@ const kind = ({ kind, theme }) => {
   if (kind === 'secondary') {
     return {
       backgroundColor: theme.colors.levels.sunkenSecondary,
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
     };
   }
 
   if (kind === 'warning') {
     return {
-      backgroundColor: theme.colors.warning,
+      backgroundColor: theme.colors.warning.main,
       color: theme.colors.text.contrast,
     };
   }
@@ -52,7 +52,7 @@ const kind = ({ kind, theme }) => {
 
   // default is primary
   return {
-    backgroundColor: theme.colors.brand.main,
+    backgroundColor: theme.colors.brand,
     color: theme.colors.text.contrast,
   };
 };

web/packages/design/src/Label/Label.test.js

@@ -22,9 +22,9 @@ import Label, { Primary, Secondary, Warning, Danger } from './Label';
 
 describe('design/Label', () => {
   const colors = [
-    theme.colors.brand.main,
+    theme.colors.brand,
     theme.colors.levels.sunkenSecondary,
-    theme.colors.warning,
+    theme.colors.warning.main,
     theme.colors.danger,
   ];
 

web/packages/design/src/LabelState/LabelState.jsx

@@ -23,17 +23,17 @@ import { fade } from 'design/theme/utils/colorManipulator';
 const kinds = ({ theme, kind, shadow }) => {
   // default is primary
   const styles = {
-    background: theme.colors.brand.main,
+    background: theme.colors.brand,
     color: theme.colors.text.contrast,
   };
 
   if (kind === 'secondary') {
     styles.background = theme.colors.levels.sunkenSecondary;
-    styles.color = theme.colors.text.primary;
+    styles.color = theme.colors.text.main;
   }
 
   if (kind === 'warning') {
-    styles.background = theme.colors.warning;
+    styles.background = theme.colors.warning.main;
     styles.color = theme.colors.text.contrast;
   }
 

web/packages/design/src/LabelState/LabelState.test.js

@@ -26,9 +26,9 @@ import LabelState, {
 } from './LabelState';
 
 const colors = {
-  primary: theme.colors.brand.main,
+  primary: theme.colors.brand,
   info: theme.colors.levels.sunkenSecondary,
-  warning: theme.colors.warning,
+  warning: theme.colors.warning.main,
   danger: theme.colors.danger,
   success: theme.colors.success,
 };

web/packages/design/src/RadioGroup/RadioGroup.tsx

@@ -92,7 +92,7 @@ function Radio(props: RadioProps) {
         autoFocus={props.autoFocus}
         css={`
           margin: 0 ${props => props.theme.space[2]}px 0 0;
-          accent-color: ${props => props.theme.colors.brand.accent};
+          accent-color: ${props => props.theme.colors.brandAccent};
           cursor: inherit;
         `}
         type="radio"

web/packages/design/src/SideNav/SideNavItem.jsx

@@ -23,11 +23,11 @@ import Flex from './../Flex';
 const fromTheme = ({ theme = defaultTheme }) => {
   return {
     background: theme.colors.levels.surface,
-    color: theme.colors.text.secondary,
+    color: theme.colors.text.slightlyMuted,
     fontSize: theme.fontSizes[1],
     fontWeight: theme.bold,
     '&:active, &.active': {
-      borderLeftColor: theme.colors.brand.accent,
+      borderLeftColor: theme.colors.brandAccent,
       background: theme.colors.levels.elevated,
       color: theme.colors.text.contrast,
     },
@@ -57,7 +57,7 @@ SideNavItem.defaultProps = {
   pl: 9,
   pr: 5,
   bg: 'levels.surfaceSecondary',
-  color: 'text.primary',
+  color: 'text.main',
   theme: defaultTheme,
 };
 

web/packages/design/src/SlideTabs/SlideTabs.tsx

@@ -100,7 +100,7 @@ const TabInput = styled.input`
 `;
 
 const TabSlider = styled.div`
-  background-color: ${({ theme }) => theme.colors.brand.main};
+  background-color: ${({ theme }) => theme.colors.brand};
   border-radius: ${props => (props.appearance === 'square' ? '8px' : '60px')};
   box-shadow: 0px 2px 6px rgba(12, 12, 14, 0.1);
   height: ${props => (props.size === 'xlarge' ? '56px' : '40px')};

web/packages/design/src/TopNav/TopNavItem.jsx

@@ -51,7 +51,7 @@ const TopNavItem = styled.button`
   }
 
   &.active:after {
-    background-color: ${props => props.theme.colors.brand.accent};
+    background-color: ${props => props.theme.colors.brandAccent};
     content: '';
     position: absolute;
     bottom: 0;