gravitational · roraback · Apr 26, 2023 · Apr 24, 2023
diff --git a/e b/e
diff --git a/web/packages/design/src/Button/Button.jsx b/web/packages/design/src/Button/Button.jsx
@@ -96,7 +96,6 @@ export const kinds = props => {
         border: '1px solid ' + theme.colors.buttons.border.border,
         '&:hover, &:focus': {
           background: theme.colors.buttons.border.hover,
-          border: '1px solid ' + theme.colors.buttons.border.borderHover,
         },
         '&:active': {
           background: theme.colors.buttons.border.active,

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.primary"
+      color="text.main"
       bg="levels.elevated"
       width="540px"
       mx="auto"

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

diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
@@ -111,21 +111,21 @@ const StyledInput = styled.input`
 
 function fromTheme(props) {
   return {
-    color: props.theme.colors.text.primary,
+    color: props.theme.colors.text.main,
     background:
       props.theme.name === 'dark'
         ? props.theme.colors.levels.sunken
         : props.theme.colors.levels.deep,
 
     '&:hover, &:focus, &:active': {
-      color: props.theme.colors.text.primary,
+      color: props.theme.colors.text.main,
       background:
         props.theme.name === 'dark'
           ? props.theme.colors.spotBackground[0]
           : props.theme.colors.levels.sunken,
     },
     '&::placeholder': {
-      color: props.theme.colors.text.placeholder,
+      color: props.theme.colors.text.muted,
       fontSize: props.theme.fontSizes[1],
     },
   };

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="text.primary"
+      color="text.main"
       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
@@ -51,7 +51,7 @@ export const StyledTable = styled.table(
 
   & > thead > tr > th {
     background: ${props.theme.colors.spotBackground[0]};
-    color: ${props.theme.colors.text.primary};
+    color: ${props.theme.colors.text.main};
     cursor: pointer;
     font-size: 10px;
     font-weight: 400;
@@ -70,7 +70,7 @@ export const StyledTable = styled.table(
   }
 
   & > tbody > tr > td {
-    color: ${props.theme.colors.text.primary};
+    color: ${props.theme.colors.text.main};
     line-height: 16px;
   }
 

diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
@@ -337,7 +337,7 @@ const EmptyIndicator = ({
         <Text
           typography="paragraph"
           m="4"
-          color="text.primary"
+          color="text.main"
           style={{
             display: 'flex',
             alignItems: 'center',

diff --git a/web/packages/design/src/Dialog/Dialog.jsx b/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.surface};
-  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;

diff --git a/web/packages/design/src/Dialog/DialogTitle.jsx b/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} />;
 }
diff --git a/web/packages/design/src/Icon/Icon.jsx b/web/packages/design/src/Icon/Icon.jsx
@@ -22,7 +22,7 @@ import '../assets/icomoon/style.css';
 const Icon = styled.span`
   display: inline-block;
   transition: color 0.3s;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   ${space} ${width} ${color} ${fontSize} ${lineHeight};
 `;
 

diff --git a/web/packages/design/src/Input/Input.jsx b/web/packages/design/src/Input/Input.jsx
@@ -34,7 +34,7 @@ function error({ hasError, theme }) {
 
 const Input = styled.input`
   appearance: none;
-  border: 1px solid ${props => props.theme.colors.text.placeholder};
+  border: 1px solid ${props => props.theme.colors.text.muted};
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -44,20 +44,20 @@ const Input = styled.input`
   outline: none;
   width: 100%;
   background: ${props => props.theme.colors.levels.surface};
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
 
   &:hover,
   &:focus,
   &:active {
-    border: 1px solid ${props => props.theme.colors.text.secondary};
+    border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
   }
 
   ::-ms-clear {
     display: none;
   }
 
   ::placeholder {
-    color: ${props => props.theme.colors.text.placeholder};
+    color: ${props => props.theme.colors.text.muted};
   }
 
   :read-only {

diff --git a/web/packages/design/src/Label/Label.jsx b/web/packages/design/src/Label/Label.jsx
@@ -25,7 +25,7 @@ const kind = ({ kind, theme }) => {
   if (kind === 'secondary') {
     return {
       backgroundColor: theme.colors.spotBackground[0],
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
       fontWeight: 400,
     };
   }

diff --git a/web/packages/design/src/LabelInput/LabelInput.jsx b/web/packages/design/src/LabelInput/LabelInput.jsx
@@ -23,7 +23,7 @@ const LabelInput = styled.label`
   color: ${props =>
     props.hasError
       ? props.theme.colors.error.main
-      : props.theme.colors.text.primary};
+      : props.theme.colors.text.main};
   display: block;
   font-size: 11px;
   font-weight: 500;

diff --git a/web/packages/design/src/LabelState/LabelState.jsx b/web/packages/design/src/LabelState/LabelState.jsx
@@ -29,7 +29,7 @@ const kinds = ({ theme, kind, shadow }) => {
 
   if (kind === 'secondary') {
     styles.background = theme.colors.spotBackground[0];
-    styles.color = theme.colors.text.primary;
+    styles.color = theme.colors.text.main;
   }
 
   if (kind === 'warning') {

diff --git a/web/packages/design/src/Menu/MenuItem.jsx b/web/packages/design/src/Menu/MenuItem.jsx
@@ -35,7 +35,7 @@ const fromTheme = props => {
     fontWeight: values.theme.regular,
 
     '&:hover, &:focus': {
-      color: values.theme.colors.text.primary,
+      color: values.theme.colors.text.main,
       background: values.theme.colors.spotBackground[0],
     },
     '&:active': {
@@ -55,7 +55,7 @@ const MenuItem = styled.div`
   overflow: hidden;
   text-decoration: none;
   white-space: nowrap;
-  color: ${props => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.slightlyMuted};
 
   &:hover,
   &:focus {

diff --git a/web/packages/design/src/Menu/MenuItemIcon.jsx b/web/packages/design/src/Menu/MenuItemIcon.jsx
@@ -21,7 +21,7 @@ import Icon from './../Icon';
 const MenuItemIcon = styled(Icon)`
   &:hover,
   &:focus {
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
   }
 `;
 

diff --git a/web/packages/design/src/SVGIcon/SVGIcon.tsx b/web/packages/design/src/SVGIcon/SVGIcon.tsx
@@ -33,7 +33,7 @@ export function SVGIcon({
       xmlns="http://www.w3.org/2000/svg"
       width={width || size}
       height={height || size}
-      fill={fill || theme.colors.text.primary}
+      fill={fill || theme.colors.text.main}
     >
       {children}
     </svg>

diff --git a/web/packages/design/src/SideNav/SideNavItem.jsx b/web/packages/design/src/SideNav/SideNavItem.jsx
@@ -22,17 +22,17 @@ import Flex from './../Flex';
 const fromTheme = ({ theme }) => {
   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,
       background: theme.colors.levels.elevated,
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
     },
     '&:hover, &:focus': {
       background: theme.colors.levels.elevated,
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
     },
   };
 };
@@ -56,7 +56,7 @@ SideNavItem.defaultProps = {
   pl: 9,
   pr: 5,
   bg: 'levels.surfaceSecondary',
-  color: 'text.primary',
+  color: 'text.main',
 };
 
 export default SideNavItem;
diff --git a/web/packages/design/src/SlideTabs/SlideTabs.tsx b/web/packages/design/src/SlideTabs/SlideTabs.tsx
@@ -121,7 +121,7 @@ const TabNav = styled.nav`
   display: flex;
   height: ${props => (props.size === 'xlarge' ? '80px' : '47px')};
   justify-content: space-around;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   .selected {
     color: ${props => props.theme.colors.text.primaryInverse};
     transition: color 0.2s ease-in 0s;

diff --git a/web/packages/design/src/StepSlider/StepSlider.story.tsx b/web/packages/design/src/StepSlider/StepSlider.story.tsx
@@ -28,7 +28,7 @@ const singleFlow = { default: [Body1, Body2] };
 export const SingleStaticFlow = () => {
   return (
     <Card bg="levels.surface" my="5" mx="auto" width={464}>
-      <Text typography="h3" pt={5} textAlign="center" color="text.primary">
+      <Text typography="h3" pt={5} textAlign="center" color="text.main">
         Static Title
       </Text>
       <StepSlider<typeof singleFlow>
@@ -76,7 +76,7 @@ export const MultiCardFlow = () => {
 function MainStep1({ next, refCallback, changeFlow }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-primary1">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         First Step
       </Text>
       <Text mb={3}>
@@ -111,7 +111,7 @@ function MainStep1({ next, refCallback, changeFlow }: ViewProps) {
 function MainStep2({ next, prev, refCallback }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-primary2">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         Second Step
       </Text>
       <Text mb={3}>
@@ -164,7 +164,7 @@ function MainStep2({ next, prev, refCallback }: ViewProps) {
 function OtherStep1({ changeFlow, next: onNext, refCallback }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-secondary1">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         Some Other Flow Title
       </Text>
       <Text mb={3}>
@@ -201,7 +201,7 @@ function OtherStep1({ changeFlow, next: onNext, refCallback }: ViewProps) {
 function FinalStep({ prev, refCallback }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-final">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         Done Step
       </Text>
       <Text mb={3}>

diff --git a/web/packages/design/src/ThemeProvider/globals.js b/web/packages/design/src/ThemeProvider/globals.js
@@ -27,7 +27,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     background-color: ${props => props.theme.colors.levels.sunken};
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
     padding: 0;
   }
 

diff --git a/web/packages/design/src/theme/darkTheme.ts b/web/packages/design/src/theme/darkTheme.ts
@@ -58,20 +58,20 @@ const colors = {
 
   text: {
     // The most important text.
-    primary: '#FFFFFF',
-    // Secondary text.
-    secondary: 'rgba(255, 255, 255, 0.56)',
-    // Placeholder text for forms.
-    placeholder: 'rgba(255, 255, 255, 0.24)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(255, 255, 255, 0.18)',
+    main: '#FFFFFF',
+    // Slightly muted text.
+    slightlyMuted: 'rgba(255, 255, 255, 0.72)',
+    // Muted text. Also used as placeholder text in forms.
+    muted: 'rgba(255, 255, 255, 0.54)',
+    // Disabled text.
+    disabled: 'rgba(255, 255, 255, 0.36)',
     // For text on  a background that is on a color opposite to the theme. For dark theme,
     // this would mean text that is on a light background.
     primaryInverse: '#000000',
   },
 
   buttons: {
-    text: 'rgba(255,255,255,0.87)',
+    text: '#FFFFFF',
     textDisabled: 'rgba(255, 255, 255, 0.3)',
     bgDisabled: 'rgba(255, 255, 255, 0.12)',
 

diff --git a/web/packages/design/src/theme/lightTheme.ts b/web/packages/design/src/theme/lightTheme.ts
@@ -54,13 +54,13 @@ const colors = {
 
   text: {
     // The most important text.
-    primary: '#000000',
-    // Secondary text.
-    secondary: 'rgba(0,0,0,0.56)',
-    // Placeholder text for forms.
-    placeholder: 'rgba(0,0,0,0.24)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0,0,0,0.18)',
+    main: '#000000',
+    // Slightly muted text.
+    slightlyMuted: 'rgba(0,0,0,0.72)',
+    // Muted text. Also used as placeholder text in forms.
+    muted: 'rgba(0,0,0,0.54)',
+    // Disabled text.
+    disabled: 'rgba(0,0,0,0.36)',
     // For text on  a background that is on a color opposite to the theme. For dark theme,
     // this would mean text that is on a light background.
     primaryInverse: '#FFFFFF',