fix(themes): rename text related color variables

'text' remamed to 'materialText', 'inputText' renamed to 'canvasText' BREAKING CHANGE: 'text' remamed to 'materialText', 'inputText' renamed to 'canvasText
react95-io · May 12, 2020 · a8993ef · a8993ef
1 parent 2b0662b
commit a8993ef
Show file tree

Hide file tree

Showing 22 changed files with 336 additions and 326 deletions.
diff --git a/src/components/Button/Button.spec.js b/src/components/Button/Button.spec.js
@@ -43,17 +43,17 @@ describe('<Button />', () => {
       <Button {...defaultProps} disabled />
     );
     const button = getByRole('button');
-    const disabledTextShadow = `1px 1px ${theme.textDisabledShadow}`;
+    const disabledTextShadow = `1px 1px ${theme.materialTextDisabledShadow}`;
 
-    expect(button).toHaveStyleRule('color', theme.textDisabled);
+    expect(button).toHaveStyleRule('color', theme.materialTextDisabled);
     expect(button).toHaveStyleRule('text-shadow', disabledTextShadow);
 
     rerender(<Button {...defaultProps} variant='menu' />);
-    expect(button).toHaveStyleRule('color', theme.textDisabled);
+    expect(button).toHaveStyleRule('color', theme.materialTextDisabled);
     expect(button).toHaveStyleRule('text-shadow', disabledTextShadow);
 
     rerender(<Button {...defaultProps} variant='flat' />);
-    expect(button).toHaveStyleRule('color', theme.textDisabled);
+    expect(button).toHaveStyleRule('color', theme.materialTextDisabled);
     expect(button).toHaveStyleRule('text-shadow', disabledTextShadow);
   });
 

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -86,10 +86,12 @@ const CheckmarkIcon = styled.span.attrs(() => ({
     ${({ variant, theme, isDisabled }) =>
       variant === 'menu'
         ? css`
-            border-color: ${isDisabled ? theme.textDisabled : theme.text};
+            border-color: ${isDisabled
+              ? theme.materialTextDisabled
+              : theme.materialText};
             filter: drop-shadow(
               1px 1px 0px
-                ${isDisabled ? theme.textDisabledShadow : 'transparent'}
+                ${isDisabled ? theme.materialTextDisabledShadow : 'transparent'}
             );
           `
         : css`
@@ -102,7 +104,7 @@ const CheckmarkIcon = styled.span.attrs(() => ({
       !isDisabled &&
       variant === 'menu' &&
       css`
-        border-color: ${theme.textInvert};
+        border-color: ${theme.materialTextInvert};
       `};
   }
 `;
@@ -140,11 +142,12 @@ const IndeterminateIcon = styled.span.attrs(() => ({
       css`
         ${StyledListItem}:hover & {
           ${createHatchedBackground({
-            mainColor: theme.textInvert
+            mainColor: theme.materialTextInvert
           })}
         }
         filter: drop-shadow(
-          1px 1px 0px ${isDisabled ? theme.textDisabledShadow : 'transparent'}
+          1px 1px 0px
+            ${isDisabled ? theme.materialTextDisabledShadow : 'transparent'}
         );
       `};
   }

diff --git a/src/components/ColorInput/ColorInput.js b/src/components/ColorInput/ColorInput.js
@@ -45,13 +45,13 @@ const ColorPreview = styled.div`
   ${({ isDisabled }) =>
     isDisabled
       ? css`
-          border: 2px solid ${({ theme }) => theme.textDisabled};
+          border: 2px solid ${({ theme }) => theme.materialTextDisabled};
           filter: drop-shadow(
-            1px 1px 0px ${({ theme }) => theme.textDisabledShadow}
+            1px 1px 0px ${({ theme }) => theme.materialTextDisabledShadow}
           );
         `
       : css`
-          border: 2px solid ${({ theme }) => theme.text};
+          border: 2px solid ${({ theme }) => theme.materialText};
         `}
   ${StyledColorInput}:focus:not(:active) + &:after {
     content: '';
@@ -76,13 +76,13 @@ const ChevronIcon = styled.span`
   ${({ isDisabled }) =>
     isDisabled
       ? css`
-          border-top: 6px solid ${({ theme }) => theme.textDisabled};
+          border-top: 6px solid ${({ theme }) => theme.materialTextDisabled};
           filter: drop-shadow(
-            1px 1px 0px ${({ theme }) => theme.textDisabledShadow}
+            1px 1px 0px ${({ theme }) => theme.materialTextDisabledShadow}
           );
         `
       : css`
-          border-top: 6px solid ${({ theme }) => theme.text};
+          border-top: 6px solid ${({ theme }) => theme.materialText};
         `}
   &:after {
     content: '';

diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js
@@ -41,7 +41,8 @@ const DateItemContent = styled.span`
 
   background: ${({ active, theme }) =>
     active ? theme.hoverBackground : 'transparent'};
-  color: ${({ active, theme }) => (active ? theme.textInvert : 'initial')};
+  color: ${({ active, theme }) =>
+    active ? theme.canvasTextInvert : theme.canvasText};
 
   &:hover {
     border: 2px dashed

diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js
@@ -12,7 +12,7 @@ const StyledFieldset = styled.fieldset`
   padding: 16px;
   margin-top: 8px;
   font-size: 1rem;
-  color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.materialText};
   ${({ variant }) =>
     variant !== 'flat' &&
     css`

diff --git a/src/components/Fieldset/Fieldset.spec.js b/src/components/Fieldset/Fieldset.spec.js
@@ -43,10 +43,10 @@ describe('<Fieldset />', () => {
 
       expect(fieldset).toHaveAttribute('aria-disabled', 'true');
 
-      expect(fieldset).toHaveStyleRule('color', theme.textDisabled);
+      expect(fieldset).toHaveStyleRule('color', theme.materialTextDisabled);
       expect(fieldset).toHaveStyleRule(
         'text-shadow',
-        `1px 1px ${theme.textDisabledShadow}`
+        `1px 1px ${theme.materialTextDisabledShadow}`
       );
     });
   });

diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js
@@ -20,14 +20,14 @@ export const StyledListItem = styled.li`
     props.square ? 'space-around' : 'space-between'};
   text-align: center;
   line-height: ${props => blockSizes[props.size]};
-  color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.materialText};
   pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
 
   &:hover {
     ${({ theme, isDisabled }) =>
       !isDisabled &&
       `
-        color: ${theme.textInvert};
+        color: ${theme.materialTextInvert};
         background: ${theme.hoverBackground};
       `}
 

diff --git a/src/components/ListItem/ListItem.spec.js b/src/components/ListItem/ListItem.spec.js
@@ -54,10 +54,10 @@ describe('<ListItem />', () => {
       const { container } = renderWithTheme(<ListItem disabled />);
       const listItem = container.firstChild;
       expect(listItem).toHaveStyleRule('pointer-events', 'none');
-      expect(listItem).toHaveStyleRule('color', theme.textDisabled);
+      expect(listItem).toHaveStyleRule('color', theme.materialTextDisabled);
       expect(listItem).toHaveStyleRule(
         'text-shadow',
-        `1px 1px ${theme.textDisabledShadow}`
+        `1px 1px ${theme.materialTextDisabledShadow}`
       );
     });
   });

diff --git a/src/components/NumberField/NumberField.js b/src/components/NumberField/NumberField.js
@@ -62,22 +62,24 @@ const StyledButtonIcon = styled.span`
       ? css`
           border-left: 4px solid transparent;
           border-right: 4px solid transparent;
-          border-bottom: 4px solid ${({ theme }) => theme.text};
+          border-bottom: 4px solid ${({ theme }) => theme.materialText};
         `
       : css`
           border-left: 4px solid transparent;
           border-right: 4px solid transparent;
-          border-top: 4px solid ${({ theme }) => theme.text};
+          border-top: 4px solid ${({ theme }) => theme.materialText};
         `}
   ${StyledButton}:disabled & {
-    filter: drop-shadow(1px 1px 0px ${({ theme }) => theme.textDisabledShadow});
+    filter: drop-shadow(
+      1px 1px 0px ${({ theme }) => theme.materialTextDisabledShadow}
+    );
     ${({ invert }) =>
       invert
         ? css`
-            border-bottom-color: ${({ theme }) => theme.textDisabled};
+            border-bottom-color: ${({ theme }) => theme.materialTextDisabled};
           `
         : css`
-            border-top-color: ${({ theme }) => theme.textDisabled};
+            border-top-color: ${({ theme }) => theme.materialTextDisabled};
           `}
   }
 `;

diff --git a/src/components/Progress/Progress.js b/src/components/Progress/Progress.js
@@ -28,7 +28,7 @@ const WhiteBar = styled.div`
   color: #000;
   margin-left: 2px;
   margin-top: -2px;
-  color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.materialText};
 `;
 
 const BlueBar = styled.div`
@@ -41,7 +41,7 @@ const BlueBar = styled.div`
 
   line-height: ${blockSizes.md};
 
-  color: ${({ theme }) => theme.textInvert};
+  color: ${({ theme }) => theme.materialTextInvert};
   background: ${({ theme }) => theme.progress};
   clip-path: polygon(
     0 0,

diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
@@ -81,9 +81,12 @@ const Icon = styled.span.attrs(() => ({
   ${({ variant, theme, isDisabled }) =>
     variant === 'menu'
       ? css`
-          background: ${isDisabled ? theme.textDisabled : theme.text};
+          background: ${isDisabled
+            ? theme.materialTextDisabled
+            : theme.materialText};
           filter: drop-shadow(
-            1px 1px 0px ${isDisabled ? theme.textDisabledShadow : 'transparent'}
+            1px 1px 0px
+              ${isDisabled ? theme.materialTextDisabledShadow : 'transparent'}
           );
         `
       : css`
@@ -94,7 +97,7 @@ const Icon = styled.span.attrs(() => ({
       !isDisabled &&
       variant === 'menu' &&
       css`
-        background: ${theme.textInvert};
+        background: ${theme.materialTextInvert};
       `};
   }
 `;

diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
   background: teal;
   #cutout {
     background: ${({ theme }) => theme.canvas};
-    color: ${({ theme }) => theme.text};
+    color: ${({ theme }) => theme.materialText};
     padding: 1rem;
     width: 300px;
     & > p {

diff --git a/src/components/Select/Select.styles.js b/src/components/Select/Select.styles.js
@@ -20,7 +20,7 @@ const sharedInputContentStyles = css`
 
 const sharedHoverStyles = css`
   background: ${({ theme }) => theme.hoverBackground};
-  color: ${({ theme }) => theme.inputTextInvert};
+  color: ${({ theme }) => theme.canvasTextInvert};
 `;
 export const StyledInner = styled.div`
   display: flex;
@@ -51,7 +51,7 @@ const sharedWrapperStyles = css`
   height: ${blockSizes.md};
   display: inline-block;
   color: ${({ theme, isDisabled }) =>
-    isDisabled ? createDisabledTextStyles() : theme.inputText};
+    isDisabled ? createDisabledTextStyles() : theme.canvasText};
   font-size: 1rem;
   cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};
 `;
@@ -145,12 +145,13 @@ export const StyledDropdownIcon = styled.span`
   border-right: 6px solid transparent;
   display: inline-block;
   border-top: 6px solid
-    ${({ theme, isDisabled }) => (isDisabled ? theme.textDisabled : theme.text)};
+    ${({ theme, isDisabled }) =>
+      isDisabled ? theme.materialTextDisabled : theme.materialText};
   ${({ theme, isDisabled }) =>
     isDisabled &&
     `
-    filter: drop-shadow(1px 1px 0px ${theme.textDisabledShadow});
-    border-top-color: ${theme.textDisabled};
+    filter: drop-shadow(1px 1px 0px ${theme.materialTextDisabledShadow});
+    border-top-color: ${theme.materialTextDisabled};
     `}
   ${StyledDropdownButton}:active & {
     margin-top: 2px;
@@ -197,7 +198,7 @@ export const StyledDropdownMenuItem = styled.li`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${({ theme }) => theme.inputText};
+  color: ${({ theme }) => theme.canvasText};
   &:hover,
   &:focus {
     ${sharedHoverStyles}

diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
@@ -87,7 +87,7 @@ const Wrapper = styled.div`
   ${({ isFocused, theme }) =>
     isFocused &&
     `
-        outline: 2px dotted ${theme.text};
+        outline: 2px dotted ${theme.materialText};
         `}
       }
 
@@ -201,23 +201,23 @@ const Tick = styled.span`
           bottom: 0px;
           transform: translateY(1px);
           width: ${tickHeight}px;
-          border-bottom: 2px solid ${({ theme }) => theme.text};
+          border-bottom: 2px solid ${({ theme }) => theme.materialText};
         `
       : css`
           bottom: ${-tickHeight}px;
           height: ${tickHeight}px;
           transform: translateX(-1px);
-          border-left: 1px solid ${({ theme }) => theme.text};
-          border-right: 1px solid ${({ theme }) => theme.text};
+          border-left: 1px solid ${({ theme }) => theme.materialText};
+          border-right: 1px solid ${({ theme }) => theme.materialText};
         `}
 
-        color:  ${({ theme }) => theme.text};
+        color:  ${({ theme }) => theme.materialText};
   ${({ isDisabled, theme }) =>
     isDisabled &&
     css`
       ${createDisabledTextStyles()}
-      box-shadow: 1px 1px 0px ${theme.textDisabledShadow};
-      border-color: ${theme.textDisabled};
+      box-shadow: 1px 1px 0px ${theme.materialTextDisabledShadow};
+      border-color: ${theme.materialTextDisabled};
     `}
 `;
 const Mark = styled.div`

diff --git a/src/components/SwitchBase/SwitchBase.js b/src/components/SwitchBase/SwitchBase.js
@@ -26,7 +26,7 @@ export const StyledLabel = styled.label`
   -ms-user-select: none;
   user-select: none;
   font-size: 1rem;
-  color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.materialText};
   ${props => props.isDisabled && createDisabledTextStyles()}
 
   ${StyledListItem} & {
@@ -37,7 +37,7 @@ export const StyledLabel = styled.label`
     ${({ theme, isDisabled }) =>
       !isDisabled &&
       css`
-        color: ${theme.textInvert};
+        color: ${theme.materialTextInvert};
       `};
   }
 `;

diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js
@@ -21,7 +21,7 @@ const StyledTab = styled.button`
   border-top-right-radius: 5px;
   margin: 0 0 -2px 0;
   cursor: default;
-  color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.materialText};
   user-select: none;
   font-family: inherit;
   &:focus:after,

diff --git a/src/components/TableHeadCell/TableHeadCell.js b/src/components/TableHeadCell/TableHeadCell.js
@@ -45,10 +45,10 @@ user-select: none;
     `}
 
 
-  color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.materialText};
   ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
   &:hover {
-    color: ${({ theme }) => theme.text};
+    color: ${({ theme }) => theme.materialText};
     ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
   }
 

diff --git a/src/components/TableRow/TableRow.js b/src/components/TableRow/TableRow.js
@@ -12,10 +12,10 @@ const StyledTr = styled.tr`
   vertical-align: middle;
   outline: none;
 
-  color: ${({ theme }) => theme.text};
+  color: ${({ theme }) => theme.canvasText};
   &:hover {
     background: ${({ theme }) => theme.hoverBackground};
-    color: ${({ theme }) => theme.textInvert};
+    color: ${({ theme }) => theme.canvasTextInvert};
   }
 `;
 

diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js
@@ -40,7 +40,7 @@ const sharedInputStyles = css`
   font-size: 1rem;
   min-height: 27px;
   font-family: inherit;
-  color: ${({ theme }) => theme.inputText};
+  color: ${({ theme }) => theme.canvasText};
   ${({ disabled, variant }) =>
     variant !== 'flat' && disabled && createDisabledTextStyles()}
 `;

diff --git a/src/components/Window/Window.stories.js b/src/components/Window/Window.stories.js
@@ -28,7 +28,7 @@ const Wrapper = styled.div`
     &:after {
       content: '';
       position: absolute;
-      background: ${({ theme }) => theme.text};
+      background: ${({ theme }) => theme.materialText};
     }
     &:before {
       height: 100%;