Use new semantic color names (info, confirm, notify and alert) (#1431)

* update design token colors * updates of the colors in circuit ui * update snapshots * add TODO for Badge and Body component * add shouldForwardProp to ValidationHint * deprecate old colors * :add changeset * Apply suggestions from code review Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>
sumup-oss · Feb 15, 2022 · 3f9585a · 3f9585a · vercel · Feb 15, 2022
1 parent 251d5ed
commit 3f9585a
Show file tree

Hide file tree

Showing 21 changed files with 79 additions and 61 deletions.
diff --git a/.changeset/seven-books-tan.md b/.changeset/seven-books-tan.md
@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': minor
+---
+
+Added new `info`, `confirm`, `alert`, and `notify` colors and deprecated the `success`, `warning`, and `danger` colors.
diff --git a/.changeset/wicked-timers-bake.md b/.changeset/wicked-timers-bake.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Replaced the `success`, `warning`, and `danger` colors with the new `confirm`, `notify`, and `alert` colors.
diff --git a/packages/circuit-ui/components/Badge/Badge.tsx b/packages/circuit-ui/components/Badge/Badge.tsx
@@ -33,6 +33,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   ref?: Ref<HTMLDivElement>;
 }
 
+// TODO: Will rename variants to match the new color names scheme in the next major version
 const COLOR_MAP = {
   success: {
     text: 'white',

diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx
@@ -22,6 +22,7 @@ import { deprecate } from '../../util/logger';
 import { AsPropType } from '../../types/prop-types';
 
 type Size = 'one' | 'two';
+// TODO: Will rename variants to match the new color names scheme in the next major version
 type Variant = 'highlight' | 'quote' | 'success' | 'error' | 'subtle';
 
 export interface BodyProps extends HTMLAttributes<HTMLParagraphElement> {
@@ -77,12 +78,12 @@ const variantStyles = ({ theme, variant }: BodyProps & StyleProps) => {
     }
     case 'success': {
       return css`
-        color: ${theme.colors.success};
+        color: ${theme.colors.confirm};
       `;
     }
     case 'error': {
       return css`
-        color: ${theme.colors.danger};
+        color: ${theme.colors.alert};
       `;
     }
     case 'subtle': {

diff --git a/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx b/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx
@@ -63,12 +63,12 @@ const variantStyles = ({ theme, variant }: BodyLargeProps & StyleProps) => {
     }
     case 'success': {
       return css`
-        color: ${theme.colors.success};
+        color: ${theme.colors.confirm};
       `;
     }
     case 'error': {
       return css`
-        color: ${theme.colors.danger};
+        color: ${theme.colors.alert};
       `;
     }
     case 'subtle': {

diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
@@ -108,7 +108,7 @@ const COLOR_MAP = {
     active: 'p900',
   },
   destructive: {
-    default: 'danger',
+    default: 'alert',
     hover: 'r700',
     active: 'r900',
   },
@@ -122,8 +122,8 @@ const SECONDARY_COLOR_MAP = {
     active: 'n800',
   },
   destructive: {
-    text: 'danger',
-    default: 'danger',
+    text: 'alert',
+    default: 'alert',
     hover: 'r700',
     active: 'r900',
   },

diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx
@@ -180,7 +180,7 @@ const inputInvalidStyles = ({ theme, invalid }: StyleProps & InputElProps) =>
   invalid &&
   css`
     & + label::before {
-      border-color: ${theme.colors.danger};
+      border-color: ${theme.colors.alert};
       background-color: ${theme.colors.r100};
     }
 
@@ -190,8 +190,8 @@ const inputInvalidStyles = ({ theme, invalid }: StyleProps & InputElProps) =>
     }
 
     &:checked + label::before {
-      border-color: ${theme.colors.danger};
-      background-color: ${theme.colors.danger};
+      border-color: ${theme.colors.alert};
+      background-color: ${theme.colors.alert};
     }
   `;
 

diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
@@ -148,7 +148,7 @@ const invalidLabelStyles = ({
   invalid &&
   css`
     > *:last-child {
-      box-shadow: 0 0 0 2px ${theme.colors.danger};
+      box-shadow: 0 0 0 2px ${theme.colors.alert};
     }
     &:hover > *:last-child {
       box-shadow: 0 0 0 2px ${theme.colors.r700};

diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
@@ -1510,7 +1510,6 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
   >
     <div
       class="circuit-13"
-      color="danger"
     >
       <svg
         fill="none"

diff --git a/packages/circuit-ui/components/InlineMessage/InlineMessage.tsx b/packages/circuit-ui/components/InlineMessage/InlineMessage.tsx
@@ -61,13 +61,13 @@ const createLeftBorderStyles =
   (variantName: Variant) =>
   ({ theme, size = 'giga', variant }: StyleProps & InlineMessageProps) => {
     const colors = {
-      danger: theme.colors.danger,
-      success: theme.colors.success,
-      warning: theme.colors.warning,
+      danger: theme.colors.alert,
+      success: theme.colors.confirm,
+      warning: theme.colors.notify,
     } as const;
 
     const textColors = {
-      danger: theme.colors.danger,
+      danger: theme.colors.alert,
       success: theme.colors.black,
       warning: theme.colors.black,
     } as const;

diff --git a/packages/circuit-ui/components/Input/Input.tsx b/packages/circuit-ui/components/Input/Input.tsx
@@ -184,7 +184,7 @@ const inputWarningStyles = ({
   hasWarning &&
   css`
     &:not(:focus)::placeholder {
-      color: ${theme.colors.warning};
+      color: ${theme.colors.notify};
     }
   `;
 
@@ -197,7 +197,7 @@ const inputInvalidStyles = ({
   invalid &&
   css`
     &:not(:focus)::placeholder {
-      color: ${theme.colors.danger};
+      color: ${theme.colors.alert};
       opacity: 0.5;
     }
   `;

diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx
@@ -89,14 +89,6 @@ export type BaseProps = HTMLAttributes<HTMLDivElement> & {
 
 export type NotificationInlineProps = BaseProps & CloseProps;
 
-// TODO: update the design token colors to be info/confirm/alert/notify, then remove this mapping
-const colorMap = {
-  info: 'p500',
-  confirm: 'success',
-  alert: 'danger',
-  notify: 'warning',
-} as const;
-
 const iconMap = {
   info: Info,
   confirm: Confirm,
@@ -128,7 +120,7 @@ const contentWrapperStyles = ({
   background-color: ${theme.colors.bodyBg};
   padding: ${theme.spacings.kilo} ${theme.spacings.mega};
   border-radius: ${theme.borderRadius.byte};
-  border: ${theme.borderWidth.mega} solid ${theme.colors[colorMap[variant]]};
+  border: ${theme.borderWidth.mega} solid ${theme.colors[variant]};
 `;
 
 const ContentWrapper = styled('div')<ContentWrapperProps>(contentWrapperStyles);
@@ -171,7 +163,7 @@ const IconWrapper = styled.div(
       flex-grow: 0;
       flex-shrink: 0;
       line-height: 0;
-      color: ${theme.colors[colorMap[variant]]};
+      color: ${theme.colors[variant]};
     `,
   // Adds a black background behind the SVG icon to color just the exclamation mark black.
   ({ theme, variant }: StyleProps & { variant: Variant }) =>

diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx
@@ -65,14 +65,6 @@ export type NotificationToastProps = HTMLAttributes<HTMLDivElement> &
     iconLabel?: string;
   };
 
-// TODO: update the design token colors to be info/confirm/alert/notify, then remove this mapping
-const colorMap = {
-  info: 'p500',
-  confirm: 'success',
-  alert: 'danger',
-  notify: 'warning',
-} as const;
-
 const iconMap = {
   info: Info,
   confirm: Confirm,
@@ -90,7 +82,7 @@ const toastWrapperStyles = ({
 }: NotificationToastWrapperProps & StyleProps) => css`
   background-color: ${theme.colors.bodyBg};
   border-radius: ${theme.borderRadius.byte};
-  border: ${theme.borderWidth.mega} solid ${theme.colors[colorMap[variant]]};
+  border: ${theme.borderWidth.mega} solid ${theme.colors[variant]};
   overflow: hidden;
   will-change: height;
   transition: opacity ${TRANSITION_DURATION}ms ease-in-out,
@@ -128,7 +120,7 @@ const IconWrapper = styled.div(
       flex-grow: 0;
       flex-shrink: 0;
       line-height: 0;
-      color: ${theme.colors[colorMap[variant]]};
+      color: ${theme.colors[variant]};
     `,
   // Adds a black background behind the SVG icon to color just the exclamation mark black.
   ({ theme, variant }: StyleProps & { variant: Variant }) =>

diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.tsx b/packages/circuit-ui/components/RadioButton/RadioButton.tsx
@@ -104,12 +104,12 @@ const labelInvalidStyles = ({ theme, invalid }: StyleProps & LabelElProps) =>
   invalid &&
   css`
     &:not(:focus)::before {
-      border-color: ${theme.colors.danger};
+      border-color: ${theme.colors.alert};
       background-color: ${theme.colors.r100};
     }
 
     &:not(:focus)::after {
-      background-color: ${theme.colors.danger};
+      background-color: ${theme.colors.alert};
     }
   `;
 
@@ -180,7 +180,7 @@ const inputInvalidStyles = ({ theme, invalid }: StyleProps & InputElProps) =>
     }
 
     &:checked + label::before {
-      border-color: ${theme.colors.danger};
+      border-color: ${theme.colors.alert};
     }
   `;
 

diff --git a/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx b/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx
@@ -16,11 +16,12 @@
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 import { Confirm, NotifyCircle, Alert } from '@sumup/icons';
+import isPropValid from '@emotion/is-prop-valid';
 
 import styled, { StyleProps } from '../../styles/styled';
 import { typography } from '../../styles/style-mixins';
 
-type Color = 'danger' | 'warning' | 'success';
+type Color = 'alert' | 'notify' | 'confirm';
 
 export interface ValidationHintProps extends HTMLAttributes<HTMLSpanElement> {
   validationHint?: string;
@@ -40,7 +41,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
 const validStyles = ({ theme, showValid }: StyleProps & ValidationHintProps) =>
   showValid &&
   css`
-    color: ${theme.colors.success};
+    color: ${theme.colors.confirm};
   `;
 
 const warningStyles = ({
@@ -55,7 +56,7 @@ const warningStyles = ({
 const invalidStyles = ({ theme, invalid }: StyleProps & ValidationHintProps) =>
   invalid &&
   css`
-    color: ${theme.colors.danger};
+    color: ${theme.colors.alert};
   `;
 
 const Wrapper = styled('span')<ValidationHintProps>(
@@ -66,7 +67,9 @@ const Wrapper = styled('span')<ValidationHintProps>(
   warningStyles,
 );
 
-const IconWrapper = styled.div(
+const IconWrapper = styled('div', {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+})(
   ({ theme, color }: StyleProps & { color: Color }) =>
     css`
       display: inline-block;
@@ -78,7 +81,7 @@ const IconWrapper = styled.div(
       color: ${theme.colors[color]};
     `,
   ({ theme, color }: StyleProps & { color: Color }) =>
-    color === 'warning' &&
+    color === 'notify' &&
     css`
       &::before {
         content: '';
@@ -105,21 +108,21 @@ const getIcon = (state: ValidationHintProps) => {
     }
     case state.invalid: {
       return (
-        <IconWrapper color="danger">
+        <IconWrapper color="alert">
           <Alert role="presentation" size="16" />
         </IconWrapper>
       );
     }
     case state.hasWarning: {
       return (
-        <IconWrapper color="warning">
+        <IconWrapper color="notify">
           <NotifyCircle role="presentation" size="16" />
         </IconWrapper>
       );
     }
     case state.showValid: {
       return (
-        <IconWrapper color="success">
+        <IconWrapper color="confirm">
           <Confirm role="presentation" size="16" />
         </IconWrapper>
       );

diff --git a/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap b/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap
@@ -45,7 +45,6 @@ exports[`ValidationHint styles should render with invalid styles 1`] = `
 >
   <div
     class="circuit-1"
-    color="danger"
   >
     <svg
       fill="none"
@@ -92,7 +91,6 @@ exports[`ValidationHint styles should render with valid styles 1`] = `
 >
   <div
     class="circuit-1"
-    color="success"
   >
     <svg
       fill="none"
@@ -156,7 +154,6 @@ exports[`ValidationHint styles should render with warning styles 1`] = `
 >
   <div
     class="circuit-1"
-    color="warning"
   >
     <svg
       fill="none"

diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts
@@ -357,19 +357,19 @@ export const inputOutline = (
   switch (true) {
     case options.invalid: {
       colors = {
-        default: theme.colors.danger,
+        default: theme.colors.alert,
         hover: theme.colors.r700,
-        focus: theme.colors.danger,
-        active: theme.colors.danger,
+        focus: theme.colors.alert,
+        active: theme.colors.alert,
       };
       break;
     }
     case options.hasWarning: {
       colors = {
-        default: theme.colors.warning,
+        default: theme.colors.notify,
         hover: theme.colors.y700,
-        focus: theme.colors.warning,
-        active: theme.colors.warning,
+        focus: theme.colors.notify,
+        active: theme.colors.notify,
       };
       break;
     }
@@ -421,9 +421,7 @@ export const listItem = (
     padding: ${theme.spacings.kilo} ${theme.spacings.tera}
       ${theme.spacings.kilo} ${theme.spacings.mega};
     border: 0;
-    color: ${options.destructive
-      ? theme.colors.danger
-      : theme.colors.bodyColor};
+    color: ${options.destructive ? theme.colors.alert : theme.colors.bodyColor};
     text-decoration: none;
     position: relative;