Merge branch 'main' into tokens/remove-inverted-tokens

.storybook/main.ts

@@ -32,6 +32,7 @@ const config: StorybookConfig = {
       },
     },
     getAbsolutePath('@storybook/addon-mdx-gfm'),
+    '@chromatic-com/storybook'
   ],
   staticDirs: ['../assets'],
   framework: getAbsolutePath('@storybook/react-vite'),

package.json

@@ -38,18 +38,19 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "^1",
     "@next/eslint-plugin-next": "^14.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/addon-mdx-gfm": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/theming": "^8.0.6",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-mdx-gfm": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -92,7 +93,7 @@
     "rollup": "^4.12.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.0.6",
+    "storybook": "^8.0.8",
     "storybook-css-modules": "^1.0.8",
     "stylelint": "^16.0.2",
     "stylelint-config-css-modules": "^4.4.0",

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 {
@@ -1018,7 +965,7 @@
   .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
-    border-top: 1px solid var(--fds-semantic-border-on_inverted-default);
+    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
   }
 
   @media (hover: hover) and (pointer: fine) {

packages/react/src/components/Accordion/Accordion.module.css

@@ -105,7 +105,7 @@
   .first .item:not(:first-child) .accordionButton,
   .second .item:not(:first-child) .accordionButton,
   .third .item:not(:first-child) .accordionButton {
-    border-top: 1px solid var(--fds-semantic-border-on_inverted-default);
+    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
   }
 
   @media (hover: hover) and (pointer: fine) {

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);
-  }
 }

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();

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 */