gravitational · rudream · May 4, 2023 · Mar 30, 2023
diff --git a/web/packages/design/src/Alert/Alert.jsx b/web/packages/design/src/Alert/Alert.jsx
@@ -27,27 +27,27 @@ const kind = props => {
     case 'danger':
       return {
         background: theme.colors.danger,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     case 'info':
       return {
         background: theme.colors.info,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     case 'warning':
       return {
         background: theme.colors.warning,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     case 'success':
       return {
         background: theme.colors.success,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     default:
       return {
         background: theme.colors.danger,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
   }
 };

diff --git a/web/packages/design/src/Button/Button.jsx b/web/packages/design/src/Button/Button.jsx
@@ -58,10 +58,10 @@ const themedStyles = props => {
   const { kind } = props;
 
   const style = {
-    color: colors.text.primary,
+    color: colors.buttons.text,
     '&:disabled': {
-      background: kind === 'text' ? 'none' : colors.action.disabledBackground,
-      color: colors.action.disabled,
+      background: kind === 'text' ? 'none' : colors.buttons.bgDisabled,
+      color: colors.buttons.textDisabled,
     },
   };
 
@@ -81,19 +81,19 @@ export const kinds = props => {
   switch (kind) {
     case 'secondary':
       return {
-        background: theme.colors.primary.light,
+        background: theme.colors.buttons.secondary.default,
         '&:hover, &:focus': {
-          background: theme.colors.primary.lighter,
+          background: theme.colors.buttons.secondary.hover,
         },
       };
     case 'border':
       return {
-        background: theme.colors.primary.lighter,
-        border: '1px solid ' + theme.colors.primary.main,
+        background: theme.colors.buttons.border.default,
+        border: '1px solid ' + theme.colors.buttons.border.border,
         opacity: '.87',
         '&:hover, &:focus': {
-          background: theme.colors.primary.lighter,
-          border: '1px solid ' + theme.colors.action.hover,
+          background: theme.colors.buttons.border.hover,
+          border: '1px solid ' + theme.colors.buttons.border.borderHover,
           opacity: 1,
         },
         '&:active': {
@@ -102,9 +102,9 @@ export const kinds = props => {
       };
     case 'warning':
       return {
-        background: theme.colors.error.dark,
+        background: theme.colors.buttons.warning.default,
         '&:hover, &:focus': {
-          background: theme.colors.error.main,
+          background: theme.colors.buttons.warning.hover,
         },
       };
     case 'text':
@@ -119,12 +119,12 @@ export const kinds = props => {
     case 'primary':
     default:
       return {
-        background: theme.colors.secondary.main,
+        background: theme.colors.buttons.primary.default,
         '&:hover, &:focus': {
-          background: theme.colors.secondary.light,
+          background: theme.colors.buttons.primary.hover,
         },
         '&:active': {
-          background: theme.colors.secondary.dark,
+          background: theme.colors.buttons.primary.active,
         },
       };
   }

diff --git a/web/packages/design/src/Button/Button.test.js b/web/packages/design/src/Button/Button.test.js
@@ -25,21 +25,21 @@ describe('design/Button', () => {
     const { container } = render(<Button />);
     expect(container.firstChild.nodeName).toBe('BUTTON');
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.secondary.main,
+      background: theme.colors.brand.main,
     });
   });
 
-  test('"kind" primary renders bg == theme.colors.secondary.main', () => {
+  test('"kind" primary renders bg == theme.colors.brand.main', () => {
     const { container } = render(<ButtonPrimary />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.secondary.main,
+      background: theme.colors.brand.main,
     });
   });
 
-  test('"kind" secondary renders bg == theme.colors.primary.light', () => {
+  test('"kind" secondary renders bg == theme.colors.levels.surface', () => {
     const { container } = render(<ButtonSecondary />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.primary.light,
+      background: theme.colors.levels.surface,
     });
   });
 

diff --git a/web/packages/design/src/ButtonLink/ButtonLink.jsx b/web/packages/design/src/ButtonLink/ButtonLink.jsx
@@ -46,7 +46,7 @@ const StyledButtonLink = styled.a`
 
   &:hover,
   &:focus {
-    background: ${({ theme }) => theme.colors.primary.light};
+    background: ${({ theme }) => theme.colors.levels.surface};
   }
 `;
 

diff --git a/web/packages/design/src/ButtonOutlined/ButtonOutlined.jsx b/web/packages/design/src/ButtonOutlined/ButtonOutlined.jsx
@@ -57,7 +57,7 @@ const size = props => {
 const themedStyles = props => {
   const { colors } = props.theme;
   const style = {
-    color: colors.secondary.contrastText,
+    color: colors.text.contrast,
     '&:disabled': {
       background: colors.action.disabledBackground,
       color: colors.action.disabled,
@@ -79,22 +79,22 @@ const kinds = props => {
   switch (kind) {
     case 'primary':
       return {
-        borderColor: theme.colors.secondary.main,
-        color: theme.colors.secondary.light,
+        borderColor: theme.colors.buttons.outlinedPrimary.border,
+        color: theme.colors.buttons.outlinedPrimary.text,
         '&:hover, &:focus': {
-          borderColor: theme.colors.secondary.light,
+          borderColor: theme.colors.buttons.outlinedPrimary.borderHover,
         },
         '&:active': {
-          borderColor: theme.colors.secondary.dark,
+          borderColor: theme.colors.buttons.outlinedPrimary.borderActive,
         },
       };
     default:
       return {
-        borderColor: theme.colors.text.primary,
-        color: theme.colors.text.primary,
+        borderColor: theme.colors.buttons.outlinedDefault.border,
+        color: theme.colors.buttons.outlinedDefault.text,
         '&:hover, &:focus': {
-          borderColor: theme.colors.light,
-          color: theme.colors.light,
+          borderColor: theme.colors.buttons.outlinedDefault.borderHover,
+          color: theme.colors.buttons.outlinedDefault.textHover,
         },
       };
   }

diff --git a/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js b/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js
@@ -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.secondary.main,
+      'border-color': theme.colors.brand.main,
     });
   });
 });
diff --git a/web/packages/design/src/Card/Card.jsx b/web/packages/design/src/Card/Card.jsx
@@ -26,7 +26,7 @@ const Card = styled(Box)`
 
 Card.defaultProps = {
   theme: theme,
-  bg: 'primary.light',
+  bg: 'levels.surface',
 };
 
 Card.displayName = 'Card';

diff --git a/web/packages/design/src/CardError/CardError.jsx b/web/packages/design/src/CardError/CardError.jsx
@@ -23,7 +23,7 @@ import { Text, Alert, Card } from 'design';
 export default function CardError(props) {
   return (
     <Card
-      color="text.onLight"
+      color="text.primaryInverse"
       bg="light"
       width="540px"
       mx="auto"

diff --git a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.js.snap b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.js.snap
@@ -51,7 +51,7 @@ exports[`rendering of Error Cards 1`] = `
 
 <div
   class="c0"
-  color="text.onLight"
+  color="text.primaryInverse"
   width="540px"
 >
   <div

diff --git a/web/packages/design/src/Checkbox/Checkbox.tsx b/web/packages/design/src/Checkbox/Checkbox.tsx
@@ -23,7 +23,7 @@ export const CheckboxWrapper = styled(Flex)`
   margin-bottom: 4px;
   width: 300px;
   align-items: center;
-  border: 1px solid ${props => props.theme.colors.primary.light};
+  border: 1px solid ${props => props.theme.colors.levels.surface};
   border-radius: 8px;
 
   &.disabled {
@@ -34,7 +34,7 @@ export const CheckboxWrapper = styled(Flex)`
 
 export const CheckboxInput = styled.input`
   margin-right: 10px;
-  accent-color: ${props => props.theme.colors.secondary.main};
+  accent-color: ${props => props.theme.colors.brand.main};
 
   &:hover {
     cursor: pointer;

diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
@@ -52,7 +52,7 @@ const ChildWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${props => props.theme.colors.primary.lighter};
+  background: ${props => props.theme.colors.levels.elevated};
   border-radius: 200px;
 `;
 
@@ -63,7 +63,7 @@ const Wrapper = styled.div`
   width: 100%;
   border-radius: 200px;
   height: 32px;
-  background: ${props => props.theme.colors.primary.dark};
+  background: ${props => props.theme.colors.levels.sunkenSecondary};
 `;
 
 const StyledInput = styled.input`
@@ -84,10 +84,10 @@ const StyledInput = styled.input`
 function fromTheme(props) {
   return {
     color: props.theme.colors.text.primary,
-    background: props.theme.colors.primary.dark,
+    background: props.theme.colors.levels.sunkenSecondary,
 
     '&: hover, &:focus, &:active': {
-      background: props.theme.colors.primary.main,
+      background: props.theme.colors.levels.surfaceSecondary,
       boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, .24)',
       color: props.theme.colors.text.primary,
     },

diff --git a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
@@ -76,7 +76,7 @@ export function PageIndicatorText({
   return (
     <Text
       typography="body2"
-      color="primary.contrastText"
+      color="text.contrast"
       mr={1}
       style={{ whiteSpace: 'nowrap', textTransform: 'uppercase' }}
     >

diff --git a/web/packages/design/src/DataTable/StyledTable.tsx b/web/packages/design/src/DataTable/StyledTable.tsx
@@ -23,7 +23,7 @@ import Icon from '../Icon';
 
 export const StyledTable = styled.table(
   props => `
-  background: ${props.theme.colors.primary.light};
+  background: ${props.theme.colors.levels.surface};
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
   border-collapse: collapse;
   border-spacing: 0;
@@ -52,8 +52,8 @@ export const StyledTable = styled.table(
   }
 
   & > thead > tr > th {
-    background: ${props.theme.colors.primary.dark};
-    color: ${props.theme.colors.primary.contrastText};
+    background: ${props.theme.colors.levels.sunkenSecondary};
+    color: ${props.theme.colors.text.contrast};
     cursor: pointer;
     font-size: 10px;
     font-weight: 400;
@@ -77,11 +77,11 @@ export const StyledTable = styled.table(
   }
 
   tbody tr {
-    border-bottom: 1px solid ${props.theme.colors.primary.main};
+    border-bottom: 1px solid ${props.theme.colors.levels.surfaceSecondary};
   }
 
   tbody tr:hover {
-    background-color: ${darken(props.theme.colors.primary.lighter, 0.14)};
+    background-color: ${darken(props.theme.colors.levels.elevated, 0.14)};
   }
 
   `,
@@ -96,13 +96,13 @@ export const StyledPanel = styled.nav`
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
   ${borderRadius}
 `;
 
 export const StyledEmptyIndicator = styled.div(
   props => `
-  background: ${props.theme.colors.primary.main};
+  background: ${props.theme.colors.levels.surfaceSecondary};
   border-radius: 4px;
   box-sizing: border-box;
   margin: 48px auto;

diff --git a/web/packages/design/src/Dialog/Dialog.jsx b/web/packages/design/src/Dialog/Dialog.jsx
@@ -61,7 +61,7 @@ const ModalBox = styled.div`
 const DialogBox = styled.div`
   padding: 32px;
   padding-top: 24px;
-  background: ${props => props.theme.colors.primary.main};
+  background: ${props => props.theme.colors.levels.surfaceSecondary};
   color: ${props => props.theme.colors.text.primary};
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);

diff --git a/web/packages/design/src/Input/Input.jsx b/web/packages/design/src/Input/Input.jsx
@@ -70,7 +70,7 @@ Input.propTypes = {
 
 Input.defaultProps = {
   bg: 'light',
-  color: 'text.onLight',
+  color: 'text.primaryInverse',
 };
 
 export default Input;
diff --git a/web/packages/design/src/Label/Label.jsx b/web/packages/design/src/Label/Label.jsx
@@ -24,36 +24,36 @@ import { space } from 'design/system';
 const kind = ({ kind, theme }) => {
   if (kind === 'secondary') {
     return {
-      backgroundColor: theme.colors.primary.dark,
+      backgroundColor: theme.colors.levels.sunkenSecondary,
       color: theme.colors.text.primary,
     };
   }
 
   if (kind === 'warning') {
     return {
       backgroundColor: theme.colors.warning,
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     };
   }
 
   if (kind === 'danger') {
     return {
       backgroundColor: theme.colors.danger,
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     };
   }
 
   if (kind === 'success') {
     return {
       backgroundColor: theme.colors.success,
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     };
   }
 
   // default is primary
   return {
-    backgroundColor: theme.colors.secondary.main,
-    color: theme.colors.text.secondary.contrastText,
+    backgroundColor: theme.colors.brand.main,
+    color: theme.colors.text.contrast,
   };
 };
 

diff --git a/web/packages/design/src/Label/Label.test.js b/web/packages/design/src/Label/Label.test.js
@@ -22,8 +22,8 @@ import Label, { Primary, Secondary, Warning, Danger } from './Label';
 
 describe('design/Label', () => {
   const colors = [
-    theme.colors.secondary.main,
-    theme.colors.primary.dark,
+    theme.colors.brand.main,
+    theme.colors.levels.sunkenSecondary,
     theme.colors.warning,
     theme.colors.danger,
   ];