From 1caa113b07d5493bed4b9383188cb7a3132c7092 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor.baer@sumup.com>
Date: Mon, 6 Mar 2023 18:01:44 +0100
Subject: [PATCH 1/2] Remove border from primary button variant

---
 .../components/Button/Button.stories.tsx      |  1 +
 .../circuit-ui/components/Button/Button.tsx   | 16 ++++----
 .../__snapshots__/ButtonGroup.spec.tsx.snap   | 32 +++++++--------
 .../__snapshots__/ImageInput.spec.tsx.snap    | 40 +++++++++----------
 .../NotificationBanner.spec.tsx.snap          | 16 ++++----
 .../NotificationFullscreen.spec.tsx.snap      | 24 +++++------
 .../NotificationModal.spec.tsx.snap           | 24 +++++------
 .../__snapshots__/Pagination.spec.tsx.snap    |  8 ++--
 .../__snapshots__/PageList.spec.tsx.snap      |  8 ++--
 .../Tag/__snapshots__/Tag.spec.tsx.snap       |  8 ++--
 10 files changed, 89 insertions(+), 88 deletions(-)

diff --git a/packages/circuit-ui/components/Button/Button.stories.tsx b/packages/circuit-ui/components/Button/Button.stories.tsx
index 0afdd410c2..cc5822732b 100644
--- a/packages/circuit-ui/components/Button/Button.stories.tsx
+++ b/packages/circuit-ui/components/Button/Button.stories.tsx
@@ -38,6 +38,7 @@ export const Base = (args: ButtonProps) => <Button {...args} />;
 Base.args = {
   onClick: () => alert('Hello'),
   children: 'Say hello',
+  disabled: false,
 };
 
 export const Variants = (args: ButtonProps) => (
diff --git a/packages/circuit-ui/components/Button/Button.tsx b/packages/circuit-ui/components/Button/Button.tsx
index a9f3b05481..655b6efad7 100644
--- a/packages/circuit-ui/components/Button/Button.tsx
+++ b/packages/circuit-ui/components/Button/Button.tsx
@@ -196,12 +196,12 @@ const primaryStyles = ({
   if (destructive) {
     return css`
       background-color: var(--cui-bg-danger-strong);
-      border-color: var(--cui-border-danger);
+      border-color: transparent;
       color: var(--cui-fg-on-strong);
 
       &:hover {
         background-color: var(--cui-bg-danger-strong-hovered);
-        border-color: var(--cui-border-danger-hovered);
+        border-color: transparent;
         color: var(--cui-fg-on-strong-hovered);
       }
 
@@ -209,14 +209,14 @@ const primaryStyles = ({
       &[aria-expanded='true'],
       &[aria-pressed='true'] {
         background-color: var(--cui-bg-danger-strong-pressed);
-        border-color: var(--cui-border-danger-pressed);
+        border-color: transparent;
         color: var(--cui-fg-on-strong-pressed);
       }
 
       &:disabled,
       &[disabled] {
         background-color: var(--cui-bg-danger-strong-disabled);
-        border-color: var(--cui-border-danger-disabled);
+        border-color: transparent;
         color: var(--cui-fg-on-strong-disabled);
       }
     `;
@@ -224,12 +224,12 @@ const primaryStyles = ({
 
   return css`
     background-color: var(--cui-bg-accent-strong);
-    border-color: var(--cui-border-accent);
+    border-color: transparent;
     color: var(--cui-fg-on-strong);
 
     &:hover {
       background-color: var(--cui-bg-accent-strong-hovered);
-      border-color: var(--cui-border-accent-hovered);
+      border-color: transparent;
       color: var(--cui-fg-on-strong-hovered);
     }
 
@@ -237,14 +237,14 @@ const primaryStyles = ({
     &[aria-expanded='true'],
     &[aria-pressed='true'] {
       background-color: var(--cui-bg-accent-strong-pressed);
-      border-color: var(--cui-border-accent-pressed);
+      border-color: transparent;
       color: var(--cui-fg-on-strong-pressed);
     }
 
     &:disabled,
     &[disabled] {
       background-color: var(--cui-bg-accent-strong-disabled);
-      border-color: var(--cui-border-accent-disabled);
+      border-color: transparent;
       color: var(--cui-fg-on-strong-disabled);
     }
   `;
diff --git a/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap b/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
index cd7f43b349..11c54d8821 100644
--- a/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
+++ b/packages/circuit-ui/components/ButtonGroup/__snapshots__/ButtonGroup.spec.tsx.snap
@@ -69,7 +69,7 @@ exports[`ButtonGroup should render aligned to the center 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -96,7 +96,7 @@ exports[`ButtonGroup should render aligned to the center 1`] = `
 
 .circuit-1:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -104,14 +104,14 @@ exports[`ButtonGroup should render aligned to the center 1`] = `
 .circuit-1[aria-expanded='true'],
 .circuit-1[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-1:disabled,
 .circuit-1[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -404,7 +404,7 @@ exports[`ButtonGroup should render aligned to the left 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -431,7 +431,7 @@ exports[`ButtonGroup should render aligned to the left 1`] = `
 
 .circuit-1:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -439,14 +439,14 @@ exports[`ButtonGroup should render aligned to the left 1`] = `
 .circuit-1[aria-expanded='true'],
 .circuit-1[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-1:disabled,
 .circuit-1[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -739,7 +739,7 @@ exports[`ButtonGroup should render aligned to the right 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -766,7 +766,7 @@ exports[`ButtonGroup should render aligned to the right 1`] = `
 
 .circuit-1:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -774,14 +774,14 @@ exports[`ButtonGroup should render aligned to the right 1`] = `
 .circuit-1[aria-expanded='true'],
 .circuit-1[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-1:disabled,
 .circuit-1[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -1074,7 +1074,7 @@ exports[`ButtonGroup should render with default styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -1101,7 +1101,7 @@ exports[`ButtonGroup should render with default styles 1`] = `
 
 .circuit-1:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -1109,14 +1109,14 @@ exports[`ButtonGroup should render with default styles 1`] = `
 .circuit-1[aria-expanded='true'],
 .circuit-1[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-1:disabled,
 .circuit-1[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
index 6c49ca43b6..9ccde0981b 100644
--- a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
+++ b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
@@ -177,7 +177,7 @@ exports[`ImageInput Styles should render with a custom component 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-danger-strong);
-  border-color: var(--cui-border-danger);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -208,7 +208,7 @@ exports[`ImageInput Styles should render with a custom component 1`] = `
 
 .circuit-5:hover {
   background-color: var(--cui-bg-danger-strong-hovered);
-  border-color: var(--cui-border-danger-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -216,14 +216,14 @@ exports[`ImageInput Styles should render with a custom component 1`] = `
 .circuit-5[aria-expanded='true'],
 .circuit-5[aria-pressed='true'] {
   background-color: var(--cui-bg-danger-strong-pressed);
-  border-color: var(--cui-border-danger-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-5:disabled,
 .circuit-5[disabled] {
   background-color: var(--cui-bg-danger-strong-disabled);
-  border-color: var(--cui-border-danger-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -591,7 +591,7 @@ exports[`ImageInput Styles should render with a giga button 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -624,7 +624,7 @@ exports[`ImageInput Styles should render with a giga button 1`] = `
 
 .circuit-6:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -632,14 +632,14 @@ exports[`ImageInput Styles should render with a giga button 1`] = `
 .circuit-6[aria-expanded='true'],
 .circuit-6[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-6:disabled,
 .circuit-6[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -1004,7 +1004,7 @@ exports[`ImageInput Styles should render with an existing image 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-danger-strong);
-  border-color: var(--cui-border-danger);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -1035,7 +1035,7 @@ exports[`ImageInput Styles should render with an existing image 1`] = `
 
 .circuit-6:hover {
   background-color: var(--cui-bg-danger-strong-hovered);
-  border-color: var(--cui-border-danger-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -1043,14 +1043,14 @@ exports[`ImageInput Styles should render with an existing image 1`] = `
 .circuit-6[aria-expanded='true'],
 .circuit-6[aria-pressed='true'] {
   background-color: var(--cui-bg-danger-strong-pressed);
-  border-color: var(--cui-border-danger-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-6:disabled,
 .circuit-6[disabled] {
   background-color: var(--cui-bg-danger-strong-disabled);
-  border-color: var(--cui-border-danger-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -1418,7 +1418,7 @@ exports[`ImageInput Styles should render with default styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -1450,7 +1450,7 @@ exports[`ImageInput Styles should render with default styles 1`] = `
 
 .circuit-6:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -1458,14 +1458,14 @@ exports[`ImageInput Styles should render with default styles 1`] = `
 .circuit-6[aria-expanded='true'],
 .circuit-6[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-6:disabled,
 .circuit-6[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -1853,7 +1853,7 @@ exports[`ImageInput Styles should render with invalid styles and an error messag
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -1885,7 +1885,7 @@ exports[`ImageInput Styles should render with invalid styles and an error messag
 
 .circuit-6:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -1893,14 +1893,14 @@ exports[`ImageInput Styles should render with invalid styles and an error messag
 .circuit-6[aria-expanded='true'],
 .circuit-6[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-6:disabled,
 .circuit-6[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
diff --git a/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap b/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap
index fd146f08e5..52b67947b5 100644
--- a/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap
+++ b/packages/circuit-ui/components/NotificationBanner/__snapshots__/NotificationBanner.spec.tsx.snap
@@ -112,7 +112,7 @@ exports[`NotificationBanner styles should render a promotional banner 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -141,7 +141,7 @@ exports[`NotificationBanner styles should render a promotional banner 1`] = `
 
 .circuit-4:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -149,14 +149,14 @@ exports[`NotificationBanner styles should render a promotional banner 1`] = `
 .circuit-4[aria-expanded='true'],
 .circuit-4[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-4:disabled,
 .circuit-4[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -385,7 +385,7 @@ exports[`NotificationBanner styles should render with default styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -414,7 +414,7 @@ exports[`NotificationBanner styles should render with default styles 1`] = `
 
 .circuit-4:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -422,14 +422,14 @@ exports[`NotificationBanner styles should render with default styles 1`] = `
 .circuit-4[aria-expanded='true'],
 .circuit-4[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-4:disabled,
 .circuit-4[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
diff --git a/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap b/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap
index a9d68bdb16..8f35593fea 100644
--- a/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap
+++ b/packages/circuit-ui/components/NotificationFullscreen/__snapshots__/NotificationFullscreen.spec.tsx.snap
@@ -107,7 +107,7 @@ exports[`NotificationFullscreen styles should render with an svg component as th
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -134,7 +134,7 @@ exports[`NotificationFullscreen styles should render with an svg component as th
 
 .circuit-5:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -142,14 +142,14 @@ exports[`NotificationFullscreen styles should render with an svg component as th
 .circuit-5[aria-expanded='true'],
 .circuit-5[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-5:disabled,
 .circuit-5[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -365,7 +365,7 @@ exports[`NotificationFullscreen styles should render with body text 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -392,7 +392,7 @@ exports[`NotificationFullscreen styles should render with body text 1`] = `
 
 .circuit-5:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -400,14 +400,14 @@ exports[`NotificationFullscreen styles should render with body text 1`] = `
 .circuit-5[aria-expanded='true'],
 .circuit-5[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-5:disabled,
 .circuit-5[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -608,7 +608,7 @@ exports[`NotificationFullscreen styles should render with default styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -635,7 +635,7 @@ exports[`NotificationFullscreen styles should render with default styles 1`] = `
 
 .circuit-4:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -643,14 +643,14 @@ exports[`NotificationFullscreen styles should render with default styles 1`] = `
 .circuit-4[aria-expanded='true'],
 .circuit-4[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-4:disabled,
 .circuit-4[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
diff --git a/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap b/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap
index 3403b7899e..5840408f44 100644
--- a/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap
+++ b/packages/circuit-ui/components/NotificationModal/__snapshots__/NotificationModal.spec.tsx.snap
@@ -276,7 +276,7 @@ exports[`NotificationModal styles should render with an SVG 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -303,7 +303,7 @@ exports[`NotificationModal styles should render with an SVG 1`] = `
 
 .circuit-12:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -311,14 +311,14 @@ exports[`NotificationModal styles should render with an SVG 1`] = `
 .circuit-12[aria-expanded='true'],
 .circuit-12[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-12:disabled,
 .circuit-12[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -867,7 +867,7 @@ exports[`NotificationModal styles should render with default styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -894,7 +894,7 @@ exports[`NotificationModal styles should render with default styles 1`] = `
 
 .circuit-11:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -902,14 +902,14 @@ exports[`NotificationModal styles should render with default styles 1`] = `
 .circuit-11[aria-expanded='true'],
 .circuit-11[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-11:disabled,
 .circuit-11[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
@@ -1434,7 +1434,7 @@ exports[`NotificationModal styles should render without an image 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -1461,7 +1461,7 @@ exports[`NotificationModal styles should render without an image 1`] = `
 
 .circuit-10:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -1469,14 +1469,14 @@ exports[`NotificationModal styles should render without an image 1`] = `
 .circuit-10[aria-expanded='true'],
 .circuit-10[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-10:disabled,
 .circuit-10[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
diff --git a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
index a75c73b9e8..92dfc2bd21 100644
--- a/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
+++ b/packages/circuit-ui/components/Pagination/__snapshots__/Pagination.spec.tsx.snap
@@ -197,7 +197,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(4px - 1px) calc(16px - 1px);
   position: relative;
@@ -227,7 +227,7 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
 
 .circuit-7:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -235,14 +235,14 @@ exports[`Pagination with 2 to 5 pages should render with default styles 1`] = `
 .circuit-7[aria-expanded='true'],
 .circuit-7[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-7:disabled,
 .circuit-7[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
diff --git a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap
index 33a0463708..af1878bf2b 100644
--- a/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap
+++ b/packages/circuit-ui/components/Pagination/components/PageList/__snapshots__/PageList.spec.tsx.snap
@@ -54,7 +54,7 @@ exports[`PageList styles should render with default styles 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(4px - 1px) calc(16px - 1px);
   position: relative;
@@ -84,7 +84,7 @@ exports[`PageList styles should render with default styles 1`] = `
 
 .circuit-1:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -92,14 +92,14 @@ exports[`PageList styles should render with default styles 1`] = `
 .circuit-1[aria-expanded='true'],
 .circuit-1[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-1:disabled,
 .circuit-1[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 
diff --git a/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap b/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
index 08f8cefa67..12395a00a6 100644
--- a/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
+++ b/packages/circuit-ui/components/Tag/__snapshots__/Tag.spec.tsx.snap
@@ -177,7 +177,7 @@ exports[`Tag when is selected should change the close icon color 1`] = `
   -webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
   background-color: var(--cui-bg-accent-strong);
-  border-color: var(--cui-border-accent);
+  border-color: transparent;
   color: var(--cui-fg-on-strong);
   padding: calc(12px - 1px) calc(24px - 1px);
   position: relative;
@@ -215,7 +215,7 @@ exports[`Tag when is selected should change the close icon color 1`] = `
 
 .circuit-2:hover {
   background-color: var(--cui-bg-accent-strong-hovered);
-  border-color: var(--cui-border-accent-hovered);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-hovered);
 }
 
@@ -223,14 +223,14 @@ exports[`Tag when is selected should change the close icon color 1`] = `
 .circuit-2[aria-expanded='true'],
 .circuit-2[aria-pressed='true'] {
   background-color: var(--cui-bg-accent-strong-pressed);
-  border-color: var(--cui-border-accent-pressed);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-pressed);
 }
 
 .circuit-2:disabled,
 .circuit-2[disabled] {
   background-color: var(--cui-bg-accent-strong-disabled);
-  border-color: var(--cui-border-accent-disabled);
+  border-color: transparent;
   color: var(--cui-fg-on-strong-disabled);
 }
 

From 46d0881e93aca86cb524ef7d7ec9b14351999d6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor.baer@sumup.com>
Date: Mon, 6 Mar 2023 18:02:39 +0100
Subject: [PATCH 2/2] Add changeset

---
 .changeset/wet-insects-punch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wet-insects-punch.md

diff --git a/.changeset/wet-insects-punch.md b/.changeset/wet-insects-punch.md
new file mode 100644
index 0000000000..dc231f9dca
--- /dev/null
+++ b/.changeset/wet-insects-punch.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Removed the border from the Button's `primary` variant.