From 2c773527c40fd47d3e60375196a45fee242fbdd5 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 30 Jan 2024 13:36:20 +0100
Subject: [PATCH 1/3] fix(Button): :bug: Found a use-case where passed
 classNames did not override

---
 .../src/components/Button/Button.module.css   | 108 +++++++++---------
 .../src/components/Button/Button.stories.tsx  |   4 +-
 2 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/packages/react/src/components/Button/Button.module.css b/packages/react/src/components/Button/Button.module.css
index 15c5d230cc..795f800d9c 100644
--- a/packages/react/src/components/Button/Button.module.css
+++ b/packages/react/src/components/Button/Button.module.css
@@ -25,7 +25,7 @@
   overflow: visible;
 }
 
-.button.small::before {
+.small::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -34,7 +34,7 @@
   content: '';
 }
 
-.button.small::after {
+.small::after {
   position: absolute;
   top: -5px;
   left: 0;
@@ -55,7 +55,7 @@
   width: var(--fc-button-icon-size);
 }
 
-.button.small {
+.small {
   --fc-button-padding: 0 var(--fds-spacing-3);
   --fc-button-icon-size: var(--fds-sizing-4);
 
@@ -65,7 +65,7 @@
   min-height: var(--fds-sizing-8);
 }
 
-.button.medium {
+.medium {
   --fc-button-padding: 0 var(--fds-spacing-4);
   --fc-button-icon-size: var(--fds-sizing-6);
 
@@ -75,7 +75,7 @@
   min-height: var(--fds-sizing-10);
 }
 
-.button.large {
+.large {
   --fc-button-padding: 0 var(--fds-spacing-5);
   --fc-button-icon-size: var(--fds-sizing-8);
 
@@ -85,100 +85,100 @@
   min-height: var(--fds-sizing-12);
 }
 
-.button.fullWidth {
+.fullWidth {
   width: 100%;
 }
 
-.button.secondary,
-.button.tertiary {
+.secondary,
+.tertiary {
   background-color: transparent;
 }
 
-.button.onlyIcon {
+.onlyIcon {
   --fc-button-padding: 0;
 }
 
 /* Only use hover for non-touch devices to prevent sticky-hovering */
 @media (hover: hover) and (pointer: fine) {
-  .button.primary.first:not([aria-disabled='true'], :disabled):hover {
+  .primary.first:not([aria-disabled='true'], :disabled):hover {
     background: var(--fds-semantic-surface-action-first-hover);
   }
 
-  .button.primary.second:not([aria-disabled='true'], :disabled):hover {
+  .primary.second:not([aria-disabled='true'], :disabled):hover {
     background: var(--fds-semantic-surface-action-second-hover);
   }
 
-  .button.primary.success:not([aria-disabled='true'], :disabled):hover {
+  .primary.success:not([aria-disabled='true'], :disabled):hover {
     background: var(--fds-semantic-surface-success-hover);
   }
 
-  .button.primary.danger:not([aria-disabled='true'], :disabled):hover {
+  .primary.danger:not([aria-disabled='true'], :disabled):hover {
     background: var(--fds-semantic-surface-danger-hover);
   }
 
-  .button.primary.inverted:not([aria-disabled='true'], :disabled):hover {
+  .primary.inverted:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-neutral-default);
 
     background: var(--fds-semantic-surface-on_inverted-hover);
   }
 
-  .button.secondary.first:not([aria-disabled='true'], :disabled):hover {
+  .secondary.first:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
     border-color: var(--fds-semantic-border-action-first-hover);
     background: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .button.secondary.second:not([aria-disabled='true'], :disabled):hover {
+  .secondary.second:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-second-hover);
 
     border-color: var(--fds-semantic-border-action-second-hover);
     background: var(--fds-semantic-surface-action-second-no_fill-hover);
   }
 
-  .button.secondary.success:not([aria-disabled='true'], :disabled):hover {
+  .secondary.success:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-success-hover);
 
     border-color: var(--fds-semantic-border-success-hover);
     background: var(--fds-semantic-surface-success-no_fill-hover);
   }
 
-  .button.secondary.danger:not([aria-disabled='true'], :disabled):hover {
+  .secondary.danger:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-danger-hover);
 
     border-color: var(--fds-semantic-border-danger-hover);
     background: var(--fds-semantic-surface-danger-no_fill-hover);
   }
 
-  .button.secondary.inverted:not([aria-disabled='true'], :disabled):hover {
+  .secondary.inverted:not([aria-disabled='true'], :disabled):hover {
     background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
   }
 
-  .button.tertiary.first:not([aria-disabled='true'], :disabled):hover {
+  .tertiary.first:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
     background: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .button.tertiary.second:not([aria-disabled='true'], :disabled):hover {
+  .tertiary.second:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-second-hover);
 
     background: var(--fds-semantic-surface-action-second-no_fill-hover);
   }
 
-  .button.tertiary.success:not([aria-disabled='true'], :disabled):hover {
+  .tertiary.success:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-success-hover);
 
     background: var(--fds-semantic-surface-success-no_fill-hover);
   }
 
-  .button.tertiary.danger:not([aria-disabled='true'], :disabled):hover {
+  .tertiary.danger:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-danger-hover);
 
     background: var(--fds-semantic-surface-danger-no_fill-hover);
   }
 
-  .button.tertiary.inverted:not([aria-disabled='true'], :disabled):hover {
+  .tertiary.inverted:not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
     background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
@@ -186,168 +186,168 @@
 }
 
 /* Primary button colors */
-.button.primary.first {
+.primary.first {
   background: var(--fds-semantic-surface-action-first-default);
 }
 
-.button.primary.first:not([aria-disabled='true'], :disabled):active {
+.primary.first:not([aria-disabled='true'], :disabled):active {
   background: var(--fds-semantic-surface-action-first-active);
 }
 
-.button.primary.second {
+.primary.second {
   background: var(--fds-semantic-surface-action-second-default);
 }
 
-.button.primary.second:not([aria-disabled='true'], :disabled):active {
+.primary.second:not([aria-disabled='true'], :disabled):active {
   background: var(--fds-semantic-surface-action-second-active);
 }
 
-.button.primary.success {
+.primary.success {
   background: var(--fds-semantic-surface-success-default);
 }
 
-.button.primary.success:not([aria-disabled='true'], :disabled):active {
+.primary.success:not([aria-disabled='true'], :disabled):active {
   background: var(--fds-semantic-surface-success-active);
 }
 
-.button.primary.danger {
+.primary.danger {
   background: var(--fds-semantic-surface-danger-default);
 }
 
-.button.primary.danger:not([aria-disabled='true'], :disabled):active {
+.primary.danger:not([aria-disabled='true'], :disabled):active {
   background: var(--fds-semantic-surface-danger-active);
 }
 
-.button.primary.inverted {
+.primary.inverted {
   --fc-button-color: var(--fds-semantic-text-neutral-default);
 
   background: var(--fds-semantic-surface-on_inverted-default);
 }
 
-.button.primary.inverted:not([aria-disabled='true'], :disabled):active {
+.primary.inverted:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-neutral-default);
 
   background: var(--fds-semantic-surface-on_inverted-active);
 }
 
 /* Secondary button colors */
-.button.secondary.first {
+.secondary.first {
   --fc-button-color: var(--fds-semantic-text-action-first-default);
 
   border-color: var(--fds-semantic-border-action-first-default);
   background: var(--fds-semantic-surface-action-first-no_fill);
 }
 
-.button.secondary.first:not([aria-disabled='true'], :disabled):active {
+.secondary.first:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-action-first-active);
 
   border-color: var(--fds-semantic-border-action-first-active);
   background: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.button.secondary.second {
+.secondary.second {
   --fc-button-color: var(--fds-semantic-text-action-second-default);
 
   border-color: var(--fds-semantic-border-action-second-default);
   background: var(--fds-semantic-surface-action-second-no_fill);
 }
 
-.button.secondary.second:not([aria-disabled='true'], :disabled):active {
+.secondary.second:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-action-second-active);
 
   border-color: var(--fds-semantic-border-action-second-active);
   background: var(--fds-semantic-surface-action-second-no_fill-active);
 }
 
-.button.secondary.success {
+.secondary.success {
   --fc-button-color: var(--fds-semantic-text-success-default);
 
   border-color: var(--fds-semantic-border-success-default);
   background: var(--fds-semantic-surface-success-no_fill);
 }
 
-.button.secondary.success:not([aria-disabled='true'], :disabled):active {
+.secondary.success:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-success-active);
 
   border-color: var(--fds-semantic-border-success-active);
   background: var(--fds-semantic-surface-success-no_fill-active);
 }
 
-.button.secondary.danger {
+.secondary.danger {
   --fc-button-color: var(--fds-semantic-text-danger-default);
 
   border-color: var(--fds-semantic-border-danger-default);
   background: var(--fds-semantic-surface-danger-no_fill);
 }
 
-.button.secondary.danger:not([aria-disabled='true'], :disabled):active {
+.secondary.danger:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-danger-active);
 
   border-color: var(--fds-semantic-border-danger-active);
   background: var(--fds-semantic-surface-danger-no_fill-active);
 }
 
-.button.secondary.inverted {
+.secondary.inverted {
   --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
   border: 1px solid var(--fds-semantic-border-on_inverted-default);
   background: transparent;
 }
 
-.button.secondary.inverted:not([aria-disabled='true'], :disabled):active {
+.secondary.inverted:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
   background: var(--fds-semantic-surface-on_inverted-no_fill-active);
 }
 
 /* Tertiary button colors */
-.button.tertiary.first {
+.tertiary.first {
   --fc-button-color: var(--fds-semantic-text-action-first-default);
 }
 
-.button.tertiary.first:not([aria-disabled='true'], :disabled):active {
+.tertiary.first:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-action-first-active);
 
   background: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.button.tertiary.second {
+.tertiary.second {
   --fc-button-color: var(--fds-semantic-text-action-second-default);
 }
 
-.button.tertiary.second:not([aria-disabled='true'], :disabled):active {
+.tertiary.second:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-action-second-active);
 
   background: var(--fds-semantic-surface-action-second-no_fill-active);
 }
 
-.button.tertiary.success {
+.tertiary.success {
   --fc-button-color: var(--fds-semantic-text-success-default);
 }
 
-.button.tertiary.success:not([aria-disabled='true'], :disabled):active {
+.tertiary.success:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-success-active);
 
   background: var(--fds-semantic-surface-success-no_fill-active);
 }
 
-.button.tertiary.danger {
+.tertiary.danger {
   --fc-button-color: var(--fds-semantic-text-danger-default);
 }
 
-.button.tertiary.danger:not([aria-disabled='true'], :disabled):active {
+.tertiary.danger:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-danger-active);
 
   background: var(--fds-semantic-surface-danger-no_fill-active);
 }
 
-.button.tertiary.inverted {
+.tertiary.inverted {
   --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
   background: transparent;
 }
 
-.button.tertiary.inverted:not([aria-disabled='true'], :disabled):active {
+.tertiary.inverted:not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
   background: var(--fds-semantic-surface-on_inverted-no_fill-active);
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 1e8abf521f..094d31039e 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -160,7 +160,9 @@ export const WithIcon: StoryFn<typeof Button> = () => (
       color='second'
       variant='tertiary'
       aria-label='Tertiary med ikon'
-    ></Button>
+    >
+      {icon}
+    </Button>
     <Button
       icon={true}
       color='success'

From 9b2ae176466bbb68a866d74b16ed5a010bf38faa Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 31 Jan 2024 15:01:11 +0100
Subject: [PATCH 2/3] changed to less severity selectors

---
 .../src/components/Button/Button.module.css   | 228 +++++++++---------
 .../src/components/Button/Button.stories.tsx  |   3 +
 2 files changed, 117 insertions(+), 114 deletions(-)

diff --git a/packages/react/src/components/Button/Button.module.css b/packages/react/src/components/Button/Button.module.css
index 795f800d9c..d2a2ad6a84 100644
--- a/packages/react/src/components/Button/Button.module.css
+++ b/packages/react/src/components/Button/Button.module.css
@@ -100,255 +100,255 @@
 
 /* Only use hover for non-touch devices to prevent sticky-hovering */
 @media (hover: hover) and (pointer: fine) {
-  .primary.first:not([aria-disabled='true'], :disabled):hover {
-    background: var(--fds-semantic-surface-action-first-hover);
+  .primary:where(.first):not([aria-disabled='true'], :disabled):hover {
+    background-color: var(--fds-semantic-surface-action-first-hover);
   }
 
-  .primary.second:not([aria-disabled='true'], :disabled):hover {
-    background: var(--fds-semantic-surface-action-second-hover);
+  .primary:where(.second):not([aria-disabled='true'], :disabled):hover {
+    background-color: var(--fds-semantic-surface-action-second-hover);
   }
 
-  .primary.success:not([aria-disabled='true'], :disabled):hover {
-    background: var(--fds-semantic-surface-success-hover);
+  .primary:where(.success):not([aria-disabled='true'], :disabled):hover {
+    background-color: var(--fds-semantic-surface-success-hover);
   }
 
-  .primary.danger:not([aria-disabled='true'], :disabled):hover {
-    background: var(--fds-semantic-surface-danger-hover);
+  .primary:where(.danger):not([aria-disabled='true'], :disabled):hover {
+    background-color: var(--fds-semantic-surface-danger-hover);
   }
 
-  .primary.inverted:not([aria-disabled='true'], :disabled):hover {
+  .primary:where(.inverted):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-neutral-default);
 
-    background: var(--fds-semantic-surface-on_inverted-hover);
+    background-color: var(--fds-semantic-surface-on_inverted-hover);
   }
 
-  .secondary.first:not([aria-disabled='true'], :disabled):hover {
+  .secondary:where(.first):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
     border-color: var(--fds-semantic-border-action-first-hover);
-    background: var(--fds-semantic-surface-action-first-no_fill-hover);
+    background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .secondary.second:not([aria-disabled='true'], :disabled):hover {
+  .secondary:where(.second):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-second-hover);
 
     border-color: var(--fds-semantic-border-action-second-hover);
-    background: var(--fds-semantic-surface-action-second-no_fill-hover);
+    background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
   }
 
-  .secondary.success:not([aria-disabled='true'], :disabled):hover {
+  .secondary:where(.success):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-success-hover);
 
     border-color: var(--fds-semantic-border-success-hover);
-    background: var(--fds-semantic-surface-success-no_fill-hover);
+    background-color: var(--fds-semantic-surface-success-no_fill-hover);
   }
 
-  .secondary.danger:not([aria-disabled='true'], :disabled):hover {
+  .secondary:where(.danger):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-danger-hover);
 
     border-color: var(--fds-semantic-border-danger-hover);
-    background: var(--fds-semantic-surface-danger-no_fill-hover);
+    background-color: var(--fds-semantic-surface-danger-no_fill-hover);
   }
 
-  .secondary.inverted:not([aria-disabled='true'], :disabled):hover {
-    background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
+  .secondary:where(.inverted):not([aria-disabled='true'], :disabled):hover {
+    background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
   }
 
-  .tertiary.first:not([aria-disabled='true'], :disabled):hover {
+  .tertiary:where(.first):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
-    background: var(--fds-semantic-surface-action-first-no_fill-hover);
+    background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .tertiary.second:not([aria-disabled='true'], :disabled):hover {
+  .tertiary:where(.second):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-action-second-hover);
 
-    background: var(--fds-semantic-surface-action-second-no_fill-hover);
+    background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
   }
 
-  .tertiary.success:not([aria-disabled='true'], :disabled):hover {
+  .tertiary:where(.success):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-success-hover);
 
-    background: var(--fds-semantic-surface-success-no_fill-hover);
+    background-color: var(--fds-semantic-surface-success-no_fill-hover);
   }
 
-  .tertiary.danger:not([aria-disabled='true'], :disabled):hover {
+  .tertiary:where(.danger):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-danger-hover);
 
-    background: var(--fds-semantic-surface-danger-no_fill-hover);
+    background-color: var(--fds-semantic-surface-danger-no_fill-hover);
   }
 
-  .tertiary.inverted:not([aria-disabled='true'], :disabled):hover {
+  .tertiary:where(.inverted):not([aria-disabled='true'], :disabled):hover {
     --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
-    background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
+    background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
   }
 }
 
 /* Primary button colors */
-.primary.first {
-  background: var(--fds-semantic-surface-action-first-default);
+.primary:where(.first) {
+  background-color: var(--fds-semantic-surface-action-first-default);
 }
 
-.primary.first:not([aria-disabled='true'], :disabled):active {
-  background: var(--fds-semantic-surface-action-first-active);
+.primary:where(.second) {
+  background-color: var(--fds-semantic-surface-action-second-default);
 }
 
-.primary.second {
-  background: var(--fds-semantic-surface-action-second-default);
+.primary:where(.success) {
+  background-color: var(--fds-semantic-surface-success-default);
 }
 
-.primary.second:not([aria-disabled='true'], :disabled):active {
-  background: var(--fds-semantic-surface-action-second-active);
+.primary:where(.danger) {
+  background-color: var(--fds-semantic-surface-danger-default);
 }
 
-.primary.success {
-  background: var(--fds-semantic-surface-success-default);
-}
+.primary:where(.inverted) {
+  --fc-button-color: var(--fds-semantic-text-neutral-default);
 
-.primary.success:not([aria-disabled='true'], :disabled):active {
-  background: var(--fds-semantic-surface-success-active);
+  background-color: var(--fds-semantic-surface-on_inverted-default);
 }
 
-.primary.danger {
-  background: var(--fds-semantic-surface-danger-default);
+.primary:where(.first):not([aria-disabled='true'], :disabled):active {
+  background-color: var(--fds-semantic-surface-action-first-active);
 }
 
-.primary.danger:not([aria-disabled='true'], :disabled):active {
-  background: var(--fds-semantic-surface-danger-active);
+.primary:where(.second):not([aria-disabled='true'], :disabled):active {
+  background-color: var(--fds-semantic-surface-action-second-active);
 }
 
-.primary.inverted {
-  --fc-button-color: var(--fds-semantic-text-neutral-default);
+.primary:where(.success):not([aria-disabled='true'], :disabled):active {
+  background-color: var(--fds-semantic-surface-success-active);
+}
 
-  background: var(--fds-semantic-surface-on_inverted-default);
+.primary:where(.danger):not([aria-disabled='true'], :disabled):active {
+  background-color: var(--fds-semantic-surface-danger-active);
 }
 
-.primary.inverted:not([aria-disabled='true'], :disabled):active {
+.primary:where(.inverted):not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-neutral-default);
 
-  background: var(--fds-semantic-surface-on_inverted-active);
+  background-color: var(--fds-semantic-surface-on_inverted-active);
 }
 
 /* Secondary button colors */
-.secondary.first {
+.secondary:where(.first) {
   --fc-button-color: var(--fds-semantic-text-action-first-default);
 
   border-color: var(--fds-semantic-border-action-first-default);
-  background: var(--fds-semantic-surface-action-first-no_fill);
+  background-color: var(--fds-semantic-surface-action-first-no_fill);
 }
 
-.secondary.first:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-action-first-active);
+.secondary:where(.second) {
+  --fc-button-color: var(--fds-semantic-text-action-second-default);
 
-  border-color: var(--fds-semantic-border-action-first-active);
-  background: var(--fds-semantic-surface-action-first-no_fill-active);
+  border-color: var(--fds-semantic-border-action-second-default);
+  background-color: var(--fds-semantic-surface-action-second-no_fill);
 }
 
-.secondary.second {
-  --fc-button-color: var(--fds-semantic-text-action-second-default);
+.secondary:where(.success) {
+  --fc-button-color: var(--fds-semantic-text-success-default);
 
-  border-color: var(--fds-semantic-border-action-second-default);
-  background: var(--fds-semantic-surface-action-second-no_fill);
+  border-color: var(--fds-semantic-border-success-default);
+  background-color: var(--fds-semantic-surface-success-no_fill);
 }
 
-.secondary.second:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-action-second-active);
+.secondary:where(.danger) {
+  --fc-button-color: var(--fds-semantic-text-danger-default);
 
-  border-color: var(--fds-semantic-border-action-second-active);
-  background: var(--fds-semantic-surface-action-second-no_fill-active);
+  border-color: var(--fds-semantic-border-danger-default);
+  background-color: var(--fds-semantic-surface-danger-no_fill);
 }
 
-.secondary.success {
-  --fc-button-color: var(--fds-semantic-text-success-default);
+.secondary:where(.inverted) {
+  --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
-  border-color: var(--fds-semantic-border-success-default);
-  background: var(--fds-semantic-surface-success-no_fill);
+  border: 1px solid var(--fds-semantic-border-on_inverted-default);
+  background-color: transparent;
 }
 
-.secondary.success:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-success-active);
+.secondary:where(.first):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-action-first-active);
 
-  border-color: var(--fds-semantic-border-success-active);
-  background: var(--fds-semantic-surface-success-no_fill-active);
+  border-color: var(--fds-semantic-border-action-first-active);
+  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.secondary.danger {
-  --fc-button-color: var(--fds-semantic-text-danger-default);
+.secondary:where(.second):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-action-second-active);
 
-  border-color: var(--fds-semantic-border-danger-default);
-  background: var(--fds-semantic-surface-danger-no_fill);
+  border-color: var(--fds-semantic-border-action-second-active);
+  background-color: var(--fds-semantic-surface-action-second-no_fill-active);
 }
 
-.secondary.danger:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-danger-active);
+.secondary:where(.success):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-success-active);
 
-  border-color: var(--fds-semantic-border-danger-active);
-  background: var(--fds-semantic-surface-danger-no_fill-active);
+  border-color: var(--fds-semantic-border-success-active);
+  background-color: var(--fds-semantic-surface-success-no_fill-active);
 }
 
-.secondary.inverted {
-  --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
+.secondary:where(.danger):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-danger-active);
 
-  border: 1px solid var(--fds-semantic-border-on_inverted-default);
-  background: transparent;
+  border-color: var(--fds-semantic-border-danger-active);
+  background-color: var(--fds-semantic-surface-danger-no_fill-active);
 }
 
-.secondary.inverted:not([aria-disabled='true'], :disabled):active {
+.secondary:where(.inverted):not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
-  background: var(--fds-semantic-surface-on_inverted-no_fill-active);
+  background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
 }
 
 /* Tertiary button colors */
-.tertiary.first {
+.tertiary:where(.first) {
   --fc-button-color: var(--fds-semantic-text-action-first-default);
 }
 
-.tertiary.first:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-  background: var(--fds-semantic-surface-action-first-no_fill-active);
-}
-
-.tertiary.second {
+.tertiary:where(.second) {
   --fc-button-color: var(--fds-semantic-text-action-second-default);
 }
 
-.tertiary.second:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-action-second-active);
+.tertiary:where(.success) {
+  --fc-button-color: var(--fds-semantic-text-success-default);
+}
 
-  background: var(--fds-semantic-surface-action-second-no_fill-active);
+.tertiary:where(.danger) {
+  --fc-button-color: var(--fds-semantic-text-danger-default);
 }
 
-.tertiary.success {
-  --fc-button-color: var(--fds-semantic-text-success-default);
+.tertiary:where(.inverted) {
+  --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
+
+  background-color: transparent;
 }
 
-.tertiary.success:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-success-active);
+.tertiary:where(.first):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-action-first-active);
 
-  background: var(--fds-semantic-surface-success-no_fill-active);
+  background-color: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.tertiary.danger {
-  --fc-button-color: var(--fds-semantic-text-danger-default);
+.tertiary:where(.second):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-action-second-active);
+
+  background-color: var(--fds-semantic-surface-action-second-no_fill-active);
 }
 
-.tertiary.danger:not([aria-disabled='true'], :disabled):active {
-  --fc-button-color: var(--fds-semantic-text-danger-active);
+.tertiary:where(.success):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-success-active);
 
-  background: var(--fds-semantic-surface-danger-no_fill-active);
+  background-color: var(--fds-semantic-surface-success-no_fill-active);
 }
 
-.tertiary.inverted {
-  --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
+.tertiary:where(.danger):not([aria-disabled='true'], :disabled):active {
+  --fc-button-color: var(--fds-semantic-text-danger-active);
 
-  background: transparent;
+  background-color: var(--fds-semantic-surface-danger-no_fill-active);
 }
 
-.tertiary.inverted:not([aria-disabled='true'], :disabled):active {
+.tertiary:where(.inverted):not([aria-disabled='true'], :disabled):active {
   --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
 
-  background: var(--fds-semantic-surface-on_inverted-no_fill-active);
+  background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
 }
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 094d31039e..06a00d31d5 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -6,6 +6,8 @@ import * as akselIcons from '@navikt/aksel-icons';
 import { Stack } from '../../../../../docs-components';
 import { Spinner } from '../Spinner';
 
+import classes from './test.module.css';
+
 import { Button } from './';
 
 type Story = StoryObj<typeof Button>;
@@ -37,6 +39,7 @@ export const Preview: Story = {
     size: 'medium',
     icon: false,
     fullWidth: false,
+    className: classes.test,
   },
 };
 

From 00a12dfe228d6e6245823b7e2022c0f35e7218f4 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 31 Jan 2024 15:04:28 +0100
Subject: [PATCH 3/3] remove test code

---
 packages/react/src/components/Button/Button.stories.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
index 06a00d31d5..094d31039e 100644
--- a/packages/react/src/components/Button/Button.stories.tsx
+++ b/packages/react/src/components/Button/Button.stories.tsx
@@ -6,8 +6,6 @@ import * as akselIcons from '@navikt/aksel-icons';
 import { Stack } from '../../../../../docs-components';
 import { Spinner } from '../Spinner';
 
-import classes from './test.module.css';
-
 import { Button } from './';
 
 type Story = StoryObj<typeof Button>;
@@ -39,7 +37,6 @@ export const Preview: Story = {
     size: 'medium',
     icon: false,
     fullWidth: false,
-    className: classes.test,
   },
 };