Tweak the updated Button styles (#2551)

sumup-oss · Jul 9, 2024 · d2115fb · d2115fb
1 parent 0e76c53
commit d2115fb
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 109 deletions.
diff --git a/.changeset/eight-taxis-itch.md b/.changeset/eight-taxis-itch.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Always use the secondary Button variant for the second button in a ButtonGroup. Previously, it switched to the tertiary variant in narrow spaces.
diff --git a/.changeset/eighty-snakes-complain.md b/.changeset/eighty-snakes-complain.md
@@ -0,0 +1,9 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Tweaked the Button's updated design to improve its usability.
+
+- Normalized the border-radius to 8px for all sizes.
+- Removed the horizontal padding of the tertiary variant and improved the color contrast its underline.
+- Updated the disabled styles to distinguish the button variants.
diff --git a/.changeset/hot-mayflies-jump.md b/.changeset/hot-mayflies-jump.md
@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': minor
+---
+
+Updated the `bg-normal-disabled`, `bg-subtle-hovered`, `bg-subtle-pressed`, `bg-highlight-disabled`, `bg-accent-hovered`,`bg-accent-pressed`, `bg-accent-strong-hovered`, `bg-accent-strong-pressed`, `bg-danger-hovered`, `bg-danger-pressed`, `bg-danger-disabled`, `bg-danger-strong-hovered`, `bg-danger-strong-pressed`, `fg-subtle-hovered`, `fg-danger-hovered`, `fg-danger-disabled`, `border-normal`, `border-subtle-hovered`, `border-danger`, `border-danger-hovered`, and `border-danger-disabled` color tokens.
diff --git a/packages/circuit-ui/components/Button/Button.module.css b/packages/circuit-ui/components/Button/Button.module.css
@@ -13,3 +13,9 @@
   padding: calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo))
     calc(var(--cui-spacings-giga) - var(--cui-border-width-kilo));
 }
+
+.tertiary.s,
+.tertiary.m {
+  padding-right: 0;
+  padding-left: 0;
+}
diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
@@ -66,7 +66,7 @@ export const Button: ForwardRefExoticComponent<
   PropsWithoutRef<ButtonProps> & RefAttributes<any>
 > = createButtonComponent<ButtonProps>(
   'Button',
-  ({ className, size: legacySize = 'm', stretch, ...props }) => {
+  ({ className, size: legacySize = 'm', stretch, variant, ...props }) => {
     const size = legacyButtonSizeMap[legacySize] || legacySize;
 
     if (
@@ -92,7 +92,13 @@ export const Button: ForwardRefExoticComponent<
     }
 
     return {
-      className: clsx(className, classes[size], stretch && classes.stretch),
+      className: clsx(
+        className,
+        classes[size],
+        stretch && classes.stretch,
+        variant === 'tertiary' && classes.tertiary,
+      ),
+      variant,
       size,
       ...props,
     };

diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css
@@ -52,7 +52,7 @@
   display: block;
   width: var(--loader-diameter);
   height: var(--loader-diameter);
-  background-color: var(--cui-fg-normal);
+  background-color: currentColor;
   border-radius: var(--cui-border-radius-circle);
   animation-duration: 720ms; /* 80ms + 4 * 160ms */
   animation-play-state: paused;
@@ -167,7 +167,7 @@
 
   font-size: var(--cui-typography-body-two-font-size);
   line-height: var(--cui-typography-body-two-line-height);
-  border-radius: 10px;
+  border-radius: var(--cui-border-radius-byte);
 }
 
 .m {
@@ -179,7 +179,7 @@
 
   font-size: var(--cui-typography-body-one-font-size);
   line-height: var(--cui-typography-body-one-line-height);
-  border-radius: var(--cui-border-radius-kilo);
+  border-radius: var(--cui-border-radius-byte);
 }
 
 /* Variants */
@@ -217,6 +217,22 @@
   background-color: var(--cui-bg-danger-strong-pressed);
 }
 
+.primary:disabled,
+.primary[disabled],
+.primary[aria-disabled="true"] {
+  color: var(--cui-fg-normal-disabled);
+  background-color: var(--cui-bg-highlight-disabled);
+  border-color: transparent;
+}
+
+.primary.destructive:disabled,
+.primary.destructive[disabled],
+.primary.destructive[aria-disabled="true"] {
+  color: var(--cui-fg-danger-disabled);
+  background-color: var(--cui-bg-danger-disabled);
+  border-color: transparent;
+}
+
 .secondary {
   color: var(--cui-fg-normal);
   background-color: var(--cui-bg-normal);
@@ -225,15 +241,15 @@
 
 .secondary:hover {
   color: var(--cui-fg-normal-hovered);
-  background-color: var(--cui-bg-normal-hovered);
+  background-color: var(--cui-bg-subtle-hovered);
   border-color: var(--cui-border-normal-hovered);
 }
 
 .secondary:active,
 .secondary[aria-expanded="true"],
 .secondary[aria-pressed="true"] {
   color: var(--cui-fg-normal-pressed);
-  background-color: var(--cui-bg-normal-pressed);
+  background-color: var(--cui-bg-subtle-pressed);
   border-color: var(--cui-border-normal-pressed);
 }
 
@@ -255,6 +271,22 @@
   border-color: var(--cui-border-danger-pressed);
 }
 
+.secondary:disabled,
+.secondary[disabled],
+.secondary[aria-disabled="true"] {
+  color: var(--cui-fg-normal-disabled);
+  background-color: var(--cui-bg-normal);
+  border-color: var(--cui-border-normal-disabled);
+}
+
+.secondary.destructive:disabled,
+.secondary.destructive[disabled],
+.secondary.destructive[aria-disabled="true"] {
+  color: var(--cui-fg-danger-disabled);
+  background-color: var(--cui-bg-normal);
+  border-color: var(--cui-border-normal-disabled);
+}
+
 .tertiary {
   color: var(--cui-fg-accent);
   background-color: transparent;
@@ -263,61 +295,60 @@
 
 .tertiary:hover {
   color: var(--cui-fg-accent-hovered);
-  background-color: var(--cui-bg-accent-hovered);
+  background-color: transparent;
   border-color: transparent;
 }
 
 .tertiary:active,
 .tertiary[aria-expanded="true"],
 .tertiary[aria-pressed="true"] {
   color: var(--cui-fg-accent-pressed);
-  background-color: var(--cui-bg-accent-pressed);
+  background-color: transparent;
   border-color: transparent;
 }
 
-.tertiary:focus-visible {
-  background-color: var(--cui-bg-accent-hovered);
-}
-
 .tertiary.destructive {
   color: var(--cui-fg-danger);
 }
 
 .tertiary.destructive:hover {
   color: var(--cui-fg-danger-hovered);
-  background-color: var(--cui-bg-danger-hovered);
+  background-color: transparent;
 }
 
 .tertiary.destructive:active,
 .tertiary.destructive[aria-expanded="true"],
 .tertiary.destructive[aria-pressed="true"] {
   color: var(--cui-fg-danger-pressed);
-  background-color: var(--cui-bg-danger-pressed);
-}
-
-.tertiary.destructive:focus-visible {
-  background-color: var(--cui-bg-danger-hovered);
+  background-color: transparent;
 }
 
 .tertiary .label {
-  text-decoration: underline dashed var(--cui-border-normal);
-  text-underline-offset: 0.25em;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-position: under;
   transition: text-decoration-color var(--cui-transitions-default);
 }
 
-.tertiary:focus-visible .label {
-  text-decoration-color: transparent;
+@supports (text-underline-offset: 0.25em) {
+  .tertiary .label {
+    text-underline-position: auto;
+    text-underline-offset: 0.25em;
+  }
+}
+
+.tertiary:disabled,
+.tertiary[disabled],
+.tertiary[aria-disabled="true"] {
+  color: var(--cui-fg-normal-disabled);
+  background-color: transparent;
+  border-color: transparent;
 }
 
-.tertiary:hover .label,
-.tertiary:active .label,
-.tertiary[aria-expanded="true"] .label,
-.tertiary[aria-pressed="true"] .label,
-.tertiary[aria-busy="true"] .label,
-.tertiary:disabled .label,
-.tertiary[disabled] .label,
-.tertiary[aria-disabled="true"] .label {
-  text-decoration-color: transparent;
+.tertiary.destructive:disabled,
+.tertiary.destructive[disabled],
+.tertiary.destructive[aria-disabled="true"] {
+  color: var(--cui-fg-danger-disabled);
 }
 
 /* ButtonGroup */
@@ -327,59 +358,11 @@
   }
 }
 
-@container cui-button-group (width > 370px) {
-  /* Keep in sync with the .secondary class above */
-  .tertiary {
-    color: var(--cui-fg-normal);
-    background-color: var(--cui-bg-normal);
-    border-color: var(--cui-border-normal);
-  }
-
-  .tertiary:hover {
-    color: var(--cui-fg-normal-hovered);
-    background-color: var(--cui-bg-normal-hovered);
-    border-color: var(--cui-border-normal-hovered);
-  }
-
-  .tertiary:active,
-  .tertiary[aria-expanded="true"],
-  .tertiary[aria-pressed="true"] {
-    color: var(--cui-fg-normal-pressed);
-    background-color: var(--cui-bg-normal-pressed);
-    border-color: var(--cui-border-normal-pressed);
-  }
-
-  .tertiary.destructive {
-    color: var(--cui-fg-danger);
-  }
-
-  .tertiary.destructive:hover {
-    color: var(--cui-fg-danger-hovered);
-    background-color: var(--cui-bg-danger-hovered);
-    border-color: var(--cui-border-danger-hovered);
-  }
-
-  .tertiary.destructive:active,
-  .tertiary.destructive[aria-expanded="true"],
-  .tertiary.destructive[aria-pressed="true"] {
-    color: var(--cui-fg-danger-pressed);
-    background-color: var(--cui-bg-danger-pressed);
-    border-color: var(--cui-border-danger-pressed);
-  }
-
-  .tertiary .label {
-    text-decoration: none;
-  }
-}
-
 /* Disabled */
 .base:disabled,
 .base[disabled],
 .base[aria-disabled="true"] {
-  color: var(--cui-fg-normal-disabled);
   cursor: not-allowed;
-  background-color: var(--cui-bg-highlight-disabled);
-  border-color: transparent;
 }
 
 .base:disabled .content,

diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.tsx
@@ -83,7 +83,7 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
               {...actions.secondary}
               size={size || actions.secondary.size}
               className={clsx(styles.secondary, actions.secondary.className)}
-              variant="tertiary"
+              variant="secondary"
             />
           )}
         </div>