Fix style specificity conflicts

.changeset/eight-ads-bake.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Increased the specificity of nested component styles.

packages/circuit-ui/components/AspectRatio/AspectRatio.module.css

@@ -7,7 +7,7 @@
   overflow: hidden;
 }
 
-.child {
+.base .child {
   position: absolute;
   top: 0;
   right: 0;

packages/circuit-ui/components/Button/Button.module.css

@@ -193,15 +193,15 @@
   margin-right: var(--cui-spacings-byte);
 }
 
-.spinner {
+.base .spinner {
   position: absolute;
   visibility: hidden;
   opacity: 0;
   transition: opacity var(--cui-transitions-default),
     visibility var(--cui-transitions-default);
 }
 
-[aria-busy="true"] .spinner {
+.base[aria-busy="true"] .spinner {
   visibility: inherit;
   opacity: 1;
 }

packages/circuit-ui/components/CalendarTag/__snapshots__/CalendarTag.spec.tsx.snap

@@ -4,10 +4,10 @@ exports[`CalendarTag > should render with default styles 1`] = `
 <div>
   <div>
     <div
-      class="_container_5b7d65"
+      class="_base_5b7d65"
     >
       <button
-        class="_base_5b7d65 _focus-visible_73b4bb"
+        class="_content_5b7d65 _focus-visible_73b4bb"
         type="button"
       >
         Dates

packages/circuit-ui/components/CalendarTagTwoStep/__snapshots__/CalendarTagTwoStep.spec.tsx.snap

@@ -4,10 +4,10 @@ exports[`CalendarTagTwoStep > should render with default styles 1`] = `
 <div>
   <div>
     <div
-      class="_container_5b7d65"
+      class="_base_5b7d65"
     >
       <button
-        class="_base_5b7d65 _focus-visible_73b4bb"
+        class="_content_5b7d65 _focus-visible_73b4bb"
         type="button"
       >
         Dates

packages/circuit-ui/components/Header/Header.module.css

@@ -15,7 +15,7 @@
   }
 }
 
-.title {
+.base .title {
   margin-left: var(--cui-spacings-mega);
   font-size: var(--cui-typography-headline-four-font-size);
   font-weight: var(--cui-font-weight-bold);

packages/circuit-ui/components/ImageInput/ImageInput.module.css

@@ -1,4 +1,4 @@
-.wrapper {
+.base {
   position: relative;
   display: inline-block;
   text-align: center;
@@ -7,7 +7,6 @@
 .input:focus + label > *:last-child {
   outline: 0;
   box-shadow: 0 0 0 4px var(--cui-border-focus);
-
 }
 
 .input:focus + label > *:last-child::-moz-focus-inner {
@@ -18,11 +17,11 @@
   box-shadow: none;
 }
 
-.label {
+.base .label {
   cursor: pointer;
 }
 
-.label::before {
+.base .label::before {
   position: absolute;
   top: 0;
   left: 0%;
@@ -36,16 +35,16 @@
   transition: opacity var(--cui-transitions-default);
 }
 
-.label > *:last-child {
+.base .label > *:last-child {
   transition: box-shadow var(--cui-transitions-default);
 }
 
 @supports (-webkit-filter: brightness(1)) or (filter: brightness(1)) {
-  .label{
+  .base .label {
     transition: filter var(--cui-transitions-default);
   }
 
-  .label::before {
+  .base .label::before {
     content: none;
   }
 }
@@ -72,7 +71,8 @@
 
 @supports (-webkit-filter: brightness(1)) or (filter: brightness(1)) {
   .label.loading {
-    filter: brightness(0.6);}
+    filter: brightness(0.6);
+  }
 }
 
 .label:not(.loading):hover::before {
@@ -109,8 +109,9 @@
 }
 
 @supports (-webkit-filter: brightness(1)) or (filter: brightness(1)) {
-  .label.dragging{
-    filter: brightness(0.9);}
+  .label.dragging {
+    filter: brightness(0.9);
+  }
 }
 
 [data-disabled="true"] .label {
@@ -122,22 +123,22 @@
   border-color: var(--cui-border-danger-hovered);
 }
 
-.label:active  > button {
+.label:active > button {
   background-color: var(--cui-bg-danger-pressed);
   border-color: var(--cui-border-danger-pressed);
 }
 
-.button {
+.base .button {
   position: absolute;
   right: calc(-1 * var(--cui-spacings-bit));
   bottom: calc(-1 * var(--cui-spacings-bit));
 }
 
-.button.add {
+.base .button.add {
   pointer-events: none;
 }
 
-.spinner {
+.base .spinner {
   position: absolute;
   top: calc(50% - 16px);
   left: calc(50% - 16px);
@@ -151,7 +152,7 @@
     visibility var(--cui-transitions-default);
 }
 
-.spinner.loading {
+.base .spinner.loading {
   visibility: inherit;
   opacity: 1;
 }

packages/circuit-ui/components/ImageInput/ImageInput.tsx

@@ -229,7 +229,7 @@ export const ImageInput = ({
 
   return (
     <FieldWrapper className={className} style={style} disabled={disabled}>
-      <div onPaste={handlePaste} className={classes.wrapper}>
+      <div onPaste={handlePaste} className={classes.base}>
         <input
           className={clsx(classes.input, utilityClasses.hideVisually)}
           ref={inputRef}

packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css

@@ -28,33 +28,35 @@
   padding-right: var(--cui-spacings-byte);
 }
 
-.headline {
+/* Child elements */
+
+.base .headline {
   margin-bottom: var(--cui-spacings-byte);
   font-size: var(--cui-typography-headline-four-font-size);
   line-height: var(--cui-typography-headline-four-line-height);
 }
 
 @media (min-width: 768px) {
-  .headline {
+  .base .headline {
     font-size: var(--cui-typography-headline-three-font-size);
     line-height: var(--cui-typography-headline-three-line-height);
   }
 }
 
-.body {
+.base .body {
   margin-bottom: var(--cui-spacings-byte);
   font-size: var(--cui-typography-body-two-font-size);
   line-height: var(--cui-typography-body-two-line-height);
 }
 
 @media (min-width: 768px) {
-  .body {
+  .base .body {
     font-size: var(--cui-typography-body-one-font-size);
     line-height: var(--cui-typography-body-one-line-height);
   }
 }
 
-.image {
+.base .image {
   width: var(--notification-image-width);
   min-width: 0;
   height: auto;
@@ -63,24 +65,24 @@
   object-position: var(--notification-image-align);
 }
 
-.button {
+.base .button {
   padding-top: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));
   padding-bottom: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));
 }
 
 @media (min-width: 768px) {
-  .kilo {
+  .base .button.kilo {
     padding-top: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));
     padding-bottom: calc(var(--cui-spacings-bit) - var(--cui-border-width-kilo));
   }
 
-  .giga {
+  .base .button.giga {
     padding-top: calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo));
     padding-bottom: calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo));
   }
 }
 
-.close {
+.base .close {
   position: absolute;
   top: var(--cui-spacings-byte);
   right: var(--cui-spacings-byte);

packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx

@@ -100,12 +100,13 @@ export type NotificationBannerProps = BaseProps & CloseProps;
 function NotificationImage({
   align = 'center',
   width = 200,
+  className,
   ...props
 }: NotificationImageProps) {
   return (
     <Image
       {...props}
-      className={classes.image}
+      className={clsx(classes.image, className)}
       style={{
         '--notification-image-align': align,
         '--notification-image-width': `${width}px`,

packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.module.css

@@ -5,27 +5,27 @@
   max-width: 420px;
 }
 
-.image {
+.base .image {
   max-width: 280px;
   height: 160px;
   object-fit: contain;
 }
 
-.image svg {
+.base .image svg {
   width: 100%;
   height: 100%;
 }
 
-.headline {
+.base .headline {
   margin-top: var(--cui-spacings-giga);
   margin-bottom: var(--cui-spacings-byte);
   text-align: center;
 }
 
-.body {
+.base .body {
   text-align: center;
 }
 
-.buttons {
+.base .buttons {
   margin-top: var(--cui-spacings-giga);
 }

packages/circuit-ui/components/NotificationInline/NotificationInline.module.css

@@ -64,24 +64,24 @@
   padding-left: var(--cui-spacings-mega);
 }
 
-.button {
+.base .button {
   margin-top: var(--cui-spacings-byte);
   font-weight: bold;
   color: var(--cui-fg-normal);
   text-decoration-line: underline;
 }
 
-.button:hover {
+.base .button:hover {
   color: var(--cui-fg-normal-hovered);
 }
 
-.button:active,
-.button[aria-expanded='true'],
-.button[aria-pressed='true'] {
+.base .button:active,
+.base .button[aria-expanded="true"],
+.base .button[aria-pressed="true"] {
   color: var(--cui-fg-normal-pressed);
 }
 
-.close {
+.base .close {
   flex-grow: 0;
   flex-shrink: 0;
   align-self: flex-start;

packages/circuit-ui/components/NotificationModal/NotificationModal.module.css

@@ -51,43 +51,43 @@
   }
 }
 
-.close {
+.base .close {
   position: absolute;
   top: var(--cui-spacings-byte);
   right: var(--cui-spacings-byte);
 }
 
 @media (min-width: 480px) {
-  .close {
+  .base .close {
     top: var(--cui-spacings-mega);
     right: var(--cui-spacings-mega);
   }
 }
 
-.image {
+.base .image {
   max-width: 232px;
   height: 120px;
   object-fit: contain;
   margin: 0 auto var(--cui-spacings-giga);
 }
 
-.image svg {
+.base .image svg {
   width: 100%;
   height: 100%;
 }
 
 /* Prevent the headline from being overlapped by the close button */
-.headline {
+.base .headline {
   max-width: 80%;
   margin-right: auto;
   margin-bottom: var(--cui-spacings-byte);
   margin-left: auto;
 }
 
-.image + .headline {
+.base .image + .headline {
   max-width: 100%;
 }
 
-.buttons {
+.base .buttons {
   margin-top: var(--cui-spacings-giga);
 }

packages/circuit-ui/components/NotificationToast/NotificationToast.module.css

@@ -65,7 +65,7 @@
   padding-left: var(--cui-spacings-mega);
 }
 
-.close {
+.base .close {
   flex-grow: 0;
   flex-shrink: 0;
   align-self: flex-start;