feat(Button): Removed inverted color (#1828)

digdir · Apr 15, 2024 · 01ad9c5 · 01ad9c5
1 parent a4b90d5
commit 01ad9c5
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 114 deletions.
diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -134,12 +134,6 @@
       background-color: var(--fds-semantic-surface-danger-hover);
     }
 
-    .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-      background-color: var(--fds-semantic-surface-on_inverted-hover);
-    }
-
     .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
       --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
@@ -168,10 +162,6 @@
       background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
 
-    .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
-
     .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
       --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
@@ -195,12 +185,6 @@
 
       background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
   }
 
   /* Primary button colors */
@@ -220,12 +204,6 @@
     background-color: var(--fds-semantic-surface-danger-default);
   }
 
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-default);
-  }
-
   .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
     background-color: var(--fds-semantic-surface-action-first-active);
   }
@@ -242,12 +220,6 @@
     background-color: var(--fds-semantic-surface-danger-active);
   }
 
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-active);
-  }
-
   /* Secondary button colors */
   .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
     --fc-button-color: var(--fds-semantic-text-action-first-default);
@@ -277,13 +249,6 @@
     background-color: var(--fds-semantic-surface-danger-no_fill);
   }
 
-  .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    border: 1px solid var(--fds-semantic-border-on_inverted-default);
-    background-color: transparent;
-  }
-
   .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
     --fc-button-color: var(--fds-semantic-text-action-first-active);
 
@@ -312,12 +277,6 @@
     background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
 
-  .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
-
   /* Tertiary button colors */
   .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
     --fc-button-color: var(--fds-semantic-text-action-first-default);
@@ -335,12 +294,6 @@
     --fc-button-color: var(--fds-semantic-text-danger-default);
   }
 
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: transparent;
-  }
-
   .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
     --fc-button-color: var(--fds-semantic-text-action-first-active);
 
@@ -364,12 +317,6 @@
 
     background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
 }
 
 @layer fds.paragraph {

diff --git a/packages/react/src/components/Button/Button.module.css b/packages/react/src/components/Button/Button.module.css
@@ -107,12 +107,6 @@
       background-color: var(--fds-semantic-surface-danger-hover);
     }
 
-    .primary:where(.inverted):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-      background-color: var(--fds-semantic-surface-on_inverted-hover);
-    }
-
     .secondary:where(.first):not([aria-disabled='true'], :disabled):hover {
       --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
@@ -141,10 +135,6 @@
       background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
 
-    .secondary:where(.inverted):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
-
     .tertiary:where(.first):not([aria-disabled='true'], :disabled):hover {
       --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
@@ -168,12 +158,6 @@
 
       background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
-
-    .tertiary:where(.inverted):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
   }
 
   /* Primary button colors */
@@ -193,12 +177,6 @@
     background-color: var(--fds-semantic-surface-danger-default);
   }
 
-  .primary:where(.inverted) {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-default);
-  }
-
   .primary:where(.first):not([aria-disabled='true'], :disabled):active {
     background-color: var(--fds-semantic-surface-action-first-active);
   }
@@ -215,12 +193,6 @@
     background-color: var(--fds-semantic-surface-danger-active);
   }
 
-  .primary:where(.inverted):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-active);
-  }
-
   /* Secondary button colors */
   .secondary:where(.first) {
     --fc-button-color: var(--fds-semantic-text-action-first-default);
@@ -250,13 +222,6 @@
     background-color: var(--fds-semantic-surface-danger-no_fill);
   }
 
-  .secondary:where(.inverted) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    border: 1px solid var(--fds-semantic-border-on_inverted-default);
-    background-color: transparent;
-  }
-
   .secondary:where(.first):not([aria-disabled='true'], :disabled):active {
     --fc-button-color: var(--fds-semantic-text-action-first-active);
 
@@ -285,12 +250,6 @@
     background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
 
-  .secondary:where(.inverted):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
-
   /* Tertiary button colors */
   .tertiary:where(.first) {
     --fc-button-color: var(--fds-semantic-text-action-first-default);
@@ -308,12 +267,6 @@
     --fc-button-color: var(--fds-semantic-text-danger-default);
   }
 
-  .tertiary:where(.inverted) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: transparent;
-  }
-
   .tertiary:where(.first):not([aria-disabled='true'], :disabled):active {
     --fc-button-color: var(--fds-semantic-text-action-first-active);
 
@@ -337,10 +290,4 @@
 
     background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
-
-  .tertiary:where(.inverted):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
 }
diff --git a/packages/react/src/components/Button/Button.test.tsx b/packages/react/src/components/Button/Button.test.tsx
@@ -6,13 +6,7 @@ import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
 const sizes: ButtonProps['size'][] = ['small', 'medium', 'large'];
-const colors: ButtonProps['color'][] = [
-  'first',
-  'second',
-  'success',
-  'danger',
-  'inverted',
-];
+const colors: ButtonProps['color'][] = ['first', 'second', 'success', 'danger'];
 const variants: ButtonProps['variant'][] = ['primary', 'secondary', 'tertiary'];
 
 const user = userEvent.setup();

diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -12,7 +12,7 @@ export type ButtonProps = {
   /** Specify which variant to use */
   variant?: 'primary' | 'secondary' | 'tertiary';
   /** Specify which color palette to use */
-  color?: 'first' | 'second' | 'success' | 'danger' | 'inverted';
+  color?: 'first' | 'second' | 'success' | 'danger';
   /** Size */
   size?: 'small' | 'medium' | 'large';
   /** If `Button` should fill full width of its container */