Fix color inconsistencies in components (#1614)

sumup-oss · Jun 14, 2022 · 2ac245b · 2ac245b · vercel · Jun 14, 2022
1 parent df21962
commit 2ac245b
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/few-birds-marry.md b/.changeset/few-birds-marry.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Replaced `colors.n900` with `colors.bodyColor` when used as a text color for consistency.
diff --git a/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.js b/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.js
@@ -28,7 +28,7 @@ import calendarInheritStyles from './CalendarImportedStyles';
 const dayDefault = (theme) => css`
   .CalendarDay__default {
     border: 1px solid ${theme.colors.n300};
-    color: ${theme.colors.n900};
+    color: ${theme.colors.bodyColor};
     background: ${theme.colors.white};
     vertical-align: middle;
 
@@ -131,7 +131,7 @@ const dateRangePickerInput = (theme) => css`
   }
 
   .DateInput_input {
-    color: ${theme.colors.n900};
+    color: ${theme.colors.bodyColor};
     ${typography('one')(theme)};
     font-weight: 200;
     background-color: inherit;
@@ -210,7 +210,7 @@ const closeButton = (theme) => css`
 
 const calendarCaption = (theme) => css`
   .CalendarMonth_caption {
-    color: ${theme.colors.n900};
+    color: ${theme.colors.bodyColor};
     font-size: 18px;
     text-align: center;
     padding-top: 22px;
@@ -221,7 +221,7 @@ const calendarCaption = (theme) => css`
 
 const calendarWeekHeader = (theme) => css`
   .DayPicker_weekHeader {
-    color: ${theme.colors.n900};
+    color: ${theme.colors.bodyColor};
     position: absolute;
     top: 67px;
     z-index: 2;

diff --git a/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.js b/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.js
@@ -39,7 +39,7 @@ const buttonBase = ({ theme, primary }) => css`
   ${typography('two')(theme)};
   margin-left: ${theme.spacings.kilo}};
   cursor: pointer;
-  color: ${primary ? theme.colors.b500 : theme.colors.n900};
+  color: ${primary ? theme.colors.p500 : theme.colors.bodyColor};
 `;
 
 const InfoButton = styled('span')(buttonBase);

diff --git a/packages/circuit-ui/components/Select/Select.tsx b/packages/circuit-ui/components/Select/Select.tsx
@@ -119,7 +119,7 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
 }
 
 const containerBaseStyles = ({ theme }: StyleProps) => css`
-  color: ${theme.colors.n900};
+  color: ${theme.colors.bodyColor};
   display: block;
   position: relative;
 `;
@@ -187,7 +187,7 @@ const selectBaseStyles = ({ theme }: StyleProps) => css`
   border: 0;
   border-radius: ${theme.borderRadius.byte};
   box-shadow: none;
-  color: ${theme.colors.n900};
+  color: ${theme.colors.bodyColor};
   margin: 0;
   padding-top: ${theme.spacings.kilo};
   padding-right: ${theme.spacings.exa};

diff --git a/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx b/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx
@@ -127,7 +127,7 @@ const sortableStyles = ({ theme, sortable }: StyleProps & ThElProps) =>
     &:focus-within,
     &:hover {
       background-color: ${theme.colors.n100};
-      color: ${theme.colors.b500};
+      color: ${theme.colors.p500};
 
       & > button {
         opacity: 1;

diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.js b/packages/circuit-ui/components/Tabs/components/Tab/Tab.js
@@ -49,7 +49,7 @@ const selectedTabStyles = ({ theme, selected }) =>
   selected &&
   css`
     position: relative;
-    color: ${theme.colors.n900};
+    color: ${theme.colors.bodyColor};
 
     &::after {
       content: ' ';

diff --git a/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx b/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx
@@ -50,7 +50,7 @@ const warningStyles = ({
 }: StyleProps & ValidationHintProps) =>
   hasWarning &&
   css`
-    color: ${theme.colors.n900};
+    color: ${theme.colors.bodyColor};
   `;
 
 const invalidStyles = ({ theme, invalid }: StyleProps & ValidationHintProps) =>