feat: Change color names primary, secondary, tertiary to `fir…

…st`, `second`, `third` (#887)

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

@@ -6,19 +6,19 @@
   --fdsc-accordion-header-padding-bottom: var(--fds-spacing-4);
   --fdsc-accordion-header-padding-left: var(--fds-spacing-5);
   --fdsc-accordion-header-bg-neutral: var(--fds-semantic-surface-neutral-default);
-  --fdsc-accordion-header-bg-neutral-active: var(--fds-semantic-surface-action-primary-no_fill-hover);
+  --fdsc-accordion-header-bg-neutral-active: var(--fds-semantic-surface-action-first-no_fill-hover);
   --fdsc-accordion-header-bg-subtle: var(--fds-semantic-surface-neutral-subtle);
   --fdsc-accordion-header-bg-subtle-hover: var(--fds-semantic-surface-neutral-subtle-hover);
-  --fdsc-accordion-header-bg-primary: var(--fds-semantic-surface-primary-light);
-  --fdsc-accordion-header-bg-primary-hover: var(--fds-semantic-surface-primary-light-hover);
-  --fdsc-accordion-header-bg-secondary: var(--fds-semantic-surface-secondary-light);
-  --fdsc-accordion-header-bg-secondary-hover: var(--fds-semantic-surface-secondary-light-hover);
-  --fdsc-accordion-header-bg-tertiary: var(--fds-semantic-surface-tertiary-light);
-  --fdsc-accordion-header-bg-tertiary-hover: var(--fds-semantic-surface-tertiary-light-hover);
+  --fdsc-accordion-header-bg-primary: var(--fds-semantic-surface-first-light);
+  --fdsc-accordion-header-bg-primary-hover: var(--fds-semantic-surface-first-light-hover);
+  --fdsc-accordion-header-bg-secondary: var(--fds-semantic-surface-second-light);
+  --fdsc-accordion-header-bg-secondary-hover: var(--fds-semantic-surface-second-light-hover);
+  --fdsc-accordion-header-bg-tertiary: var(--fds-semantic-surface-third-light);
+  --fdsc-accordion-header-bg-tertiary-hover: var(--fds-semantic-surface-third-light-hover);
   --fdsc-accordion-header-border: var(--fds-semantic-border-neutral-subtle);
   --fdsc-accordion-header-border-inverted: var(--fds-semantic-border-on_inverted-default);
   --fdsc-accordion-header-shadow-focus: 2px 2px 3px var(--fds-semantic-border-neutral-subtle);
-  --fdsc-accordion-header-color-hover: var(--fds-semantic-text-action-primary-default);
+  --fdsc-accordion-header-color-hover: var(--fds-semantic-text-action-first-default);
   --fdsc-accordion-content-border: var(--fds-semantic-border-neutral-subtle);
   --fdsc-accordion-content-border-open: var(--fds-semantic-border-neutral-strong);
 }
@@ -87,28 +87,28 @@
   background: var(--fdsc-accordion-header-bg-subtle);
 }
 
-.accordion.primary,
-.accordion.primary > .item > .header > button {
+.accordion.first,
+.accordion.first > .item > .header > button {
   background: var(--fdsc-accordion-header-bg-primary);
 }
 
-.accordion.secondary,
-.accordion.secondary > .item > .header > button {
+.accordion.second,
+.accordion.second > .item > .header > button {
   background: var(--fdsc-accordion-header-bg-secondary);
 }
 
-.accordion.tertiary,
-.accordion.tertiary > .item > .header > button {
+.accordion.third,
+.accordion.third > .item > .header > button {
   background: var(--fdsc-accordion-header-bg-tertiary);
 }
 
 .accordion.border > .item:first-child > .header > button {
   border-top: 0;
 }
 
-.accordion.primary > .item:not(:first-child) > .header > button,
-.accordion.secondary > .item:not(:first-child) > .header > button,
-.accordion.tertiary > .item:not(:first-child) > .header > button {
+.accordion.first > .item:not(:first-child) > .header > button,
+.accordion.second > .item:not(:first-child) > .header > button,
+.accordion.third > .item:not(:first-child) > .header > button {
   border-top: 1px solid var(--fdsc-accordion-header-border-inverted);
 }
 
@@ -117,15 +117,15 @@
     background: var(--fdsc-accordion-header-bg-subtle-hover);
   }
 
-  .accordion.primary > .item > .header > button:hover {
+  .accordion.first > .item > .header > button:hover {
     background: var(--fdsc-accordion-header-bg-primary-hover);
   }
 
-  .accordion.secondary > .item > .header > button:hover {
+  .accordion.second > .item > .header > button:hover {
     background: var(--fdsc-accordion-header-bg-secondary-hover);
   }
 
-  .accordion.tertiary > .item > .header > button:hover {
+  .accordion.third > .item > .header > button:hover {
     background: var(--fdsc-accordion-header-bg-tertiary-hover);
   }
 }
@@ -135,9 +135,9 @@
   background-color: var(--fdsc-accordion-header-bg-neutral-active);
 }
 
-.accordion.primary > .item.open > .header > button,
-.accordion.secondary > .item.open > .header > button,
-.accordion.tertiary > .item.open > .header > button {
+.accordion.first > .item.open > .header > button,
+.accordion.second > .item.open > .header > button,
+.accordion.third > .item.open > .header > button {
   background-color: rgba(0 0 0 / 0.03);
 }
 

packages/react/src/components/Accordion/Accordion.stories.tsx

@@ -54,7 +54,7 @@ export const AccordionBorder: StoryFn<typeof Accordion> = () => (
 export const AccordionColor: StoryFn<typeof Accordion> = () => (
   <Accordion
     border
-    color='secondary'
+    color='second'
   >
     <Accordion.Item>
       <Accordion.Header level={3}>

packages/react/src/components/Accordion/Accordion.tsx

@@ -6,7 +6,7 @@ import classes from './Accordion.module.css';
 
 export type AccordionProps = {
   /** Accordion background color */
-  color?: 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'subtle';
+  color?: 'first' | 'second' | 'third' | 'neutral' | 'subtle';
   /** Show border */
   border?: boolean;
   /** Instances of `Accordion.Item` */

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

@@ -2,7 +2,7 @@
   --fdsc-border-radius: var(--fds-border_radius-interactive);
   --fdsc-button-size: var(--fds-component-mode-height-small);
   --fdsc-button-padding: var(--fds-spacing-1) var(--fds-spacing-2);
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-on_action);
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-on_action);
   --fdsc-icon-size: var(--fds-sizing-4);
 
   display: flex;
@@ -113,11 +113,11 @@
 
 /* Only use hover for non-touch devices to prevent sticky-hovering */
 @media (hover: hover) and (pointer: fine) {
-  .button.filled.primary:not([aria-disabled='true'], :disabled):hover {
-    background: var(--fds-semantic-surface-action-primary-hover);
+  .button.filled.first:not([aria-disabled='true'], :disabled):hover {
+    background: var(--fds-semantic-surface-action-first-hover);
   }
 
-  .button.filled.secondary:not([aria-disabled='true'], :disabled):hover {
+  .button.filled.second:not([aria-disabled='true'], :disabled):hover {
     /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
     background: #1a466d;
   }
@@ -136,15 +136,15 @@
     background: var(--fds-semantic-surface-on_inverted-hover);
   }
 
-  .button.outline.primary:not([aria-disabled='true'], :disabled):hover {
-    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-hover);
+  .button.outline.first:not([aria-disabled='true'], :disabled):hover {
+    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-hover);
 
-    border-color: var(--fds-semantic-border-action-primary-hover);
-    background: var(--fds-semantic-surface-action-primary-no_fill-hover);
+    border-color: var(--fds-semantic-border-action-first-hover);
+    background: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .button.outline.secondary:not([aria-disabled='true'], :disabled):hover {
-    border-color: var(--fds-semantic-border-action-secondary-hover);
+  .button.outline.second:not([aria-disabled='true'], :disabled):hover {
+    border-color: var(--fds-semantic-border-action-second-hover);
 
     /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
     background: #e5eaef;
@@ -168,13 +168,13 @@
     background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
   }
 
-  .button.quiet.primary:not([aria-disabled='true'], :disabled):hover {
-    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-hover);
+  .button.quiet.first:not([aria-disabled='true'], :disabled):hover {
+    --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-hover);
 
-    background: var(--fds-semantic-surface-action-primary-no_fill-hover);
+    background: var(--fds-semantic-surface-action-first-no_fill-hover);
   }
 
-  .button.quiet.secondary:not([aria-disabled='true'], :disabled):hover {
+  .button.quiet.second:not([aria-disabled='true'], :disabled):hover {
     /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
     background: #e5eaef;
   }
@@ -199,19 +199,19 @@
 }
 
 /* Filled button colors */
-.button.filled.primary {
-  background: var(--fds-semantic-surface-action-primary-default);
+.button.filled.first {
+  background: var(--fds-semantic-surface-action-first-default);
 }
 
-.button.filled.primary:not([aria-disabled='true'], :disabled):active {
-  background: var(--fds-semantic-surface-action-primary-active);
+.button.filled.first:not([aria-disabled='true'], :disabled):active {
+  background: var(--fds-semantic-surface-action-first-active);
 }
 
-.button.filled.secondary {
-  background: var(--fds-semantic-surface-action-secondary-default);
+.button.filled.second {
+  background: var(--fds-semantic-surface-action-second-default);
 }
 
-.button.filled.secondary:not([aria-disabled='true'], :disabled):active {
+.button.filled.second:not([aria-disabled='true'], :disabled):active {
   /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
   background: #335a7d;
 }
@@ -245,31 +245,31 @@
 }
 
 /* Outline button colors */
-.button.outline.primary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-default);
+.button.outline.first {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-default);
 
-  border-color: var(--fds-semantic-border-action-primary-default);
-  background: var(--fds-semantic-surface-action-primary-no_fill);
+  border-color: var(--fds-semantic-border-action-first-default);
+  background: var(--fds-semantic-surface-action-first-no_fill);
 }
 
-.button.outline.primary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-active);
+.button.outline.first:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-active);
 
-  border-color: var(--fds-semantic-border-action-primary-active);
-  background: var(--fds-semantic-surface-action-primary-no_fill-active);
+  border-color: var(--fds-semantic-border-action-first-active);
+  background: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.button.outline.secondary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-default);
+.button.outline.second {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-default);
 
-  border-color: var(--fds-semantic-border-action-secondary-default);
-  background: var(--fds-semantic-surface-action-secondary-no_fill);
+  border-color: var(--fds-semantic-border-action-second-default);
+  background: var(--fds-semantic-surface-action-second-no_fill);
 }
 
-.button.outline.secondary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-active);
+.button.outline.second:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-active);
 
-  border-color: var(--fds-semantic-border-action-secondary-active);
+  border-color: var(--fds-semantic-border-action-second-active);
 
   /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
   background: #ccd6df;
@@ -317,22 +317,22 @@
 }
 
 /* Quiet button colors */
-.button.quiet.primary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-default);
+.button.quiet.first {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-default);
 }
 
-.button.quiet.primary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-active);
+.button.quiet.first:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-first-active);
 
-  background: var(--fds-semantic-surface-action-primary-no_fill-active);
+  background: var(--fds-semantic-surface-action-first-no_fill-active);
 }
 
-.button.quiet.secondary {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-default);
+.button.quiet.second {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-default);
 }
 
-.button.quiet.secondary:not([aria-disabled='true'], :disabled):active {
-  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-secondary-active);
+.button.quiet.second:not([aria-disabled='true'], :disabled):active {
+  --fdsc-font-and-icon-color: var(--fds-semantic-text-action-second-active);
 
   /* Hard coded color due to rgba issue, https://github.com/digdir/designsystem/issues/604 */
   background: #ccd6df;

packages/react/src/components/Button/Button.test.tsx

@@ -8,8 +8,8 @@ import { Button } from './Button';
 
 const sizes: ButtonProps['size'][] = ['small', 'medium', 'large'];
 const colors: ButtonProps['color'][] = [
-  'primary',
-  'secondary',
+  'first',
+  'second',
   'success',
   'danger',
   'inverted',
@@ -19,12 +19,12 @@ const variants: ButtonProps['variant'][] = ['filled', 'outline', 'quiet'];
 const user = userEvent.setup();
 
 describe('Button', () => {
-  it('should render a button with primary classname when no variant is specified', () => {
+  it('should render a button with first classname when no variant is specified', () => {
     render();
     const button = screen.getByRole('button');
 
-    expect(button.classList).toContain('primary');
-    expect(button.classList).not.toContain('secondary');
+    expect(button.classList).toContain('first');
+    expect(button.classList).not.toContain('second');
     expect(button.classList).not.toContain('submit');
     expect(button.classList).not.toContain('cancel');
   });

packages/react/src/components/Button/Button.tsx

@@ -11,7 +11,7 @@ export type ButtonProps = {
   /** Specify which variant to use */
   variant?: 'filled' | 'outline' | 'quiet';
   /** Specify which color palette to use */
-  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'inverted';
+  color?: 'first' | 'second' | 'success' | 'danger' | 'inverted';
   /** Size */
   size?: 'small' | 'medium' | 'large';
   /** If `Button` should fill full width of its container */
@@ -31,7 +31,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
-      color = 'primary',
+      color = 'first',
       variant = 'filled',
       size = 'medium',
       fullWidth = false,

packages/react/src/components/Chip/Removable/Removable.module.css

@@ -1,5 +1,5 @@
 .removable {
-  --fdsc-removable-background: var(--fds-semantic-surface-action-primary-active);
+  --fdsc-removable-background: var(--fds-semantic-surface-action-first-active);
   --fdsc-removable-text-color: var(--fds-semantic-text-neutral-on_inverted);
   --fdsc-removable-chip-size: var(--fds-sizing-7);
   --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
@@ -33,7 +33,7 @@
   --fdsc-removable-background: linear-gradient(
     to left,
     var(--fds-semantic-surface-danger-default) var(--fdsc-removable-chip-xmark-wrapper-width),
-    var(--fds-semantic-surface-action-primary-active) var(--fdsc-removable-chip-xmark-wrapper-width)
+    var(--fds-semantic-surface-action-first-active) var(--fdsc-removable-chip-xmark-wrapper-width)
   );
   --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
 }

packages/react/src/components/Chip/_ChipBase/ChipBase.module.css

@@ -1,9 +1,9 @@
 .chipButton {
   --fdsc-chip-height: var(--fds-sizing-7);
   --fdsc-chip-padding: var(--fds-spacing-3);
-  --fdsc-chip-background: var(--fds-semantic-surface-action-primary-subtle);
+  --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle);
   --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
-  --fdsc-chip-border: var(--fds-semantic-border-action-primary-subtle);
+  --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle);
   --fdsc-chip-border-radius: var(--fds-border_radius-full);
 
   background: var(--fdsc-chip-background);
@@ -19,24 +19,24 @@
 /* Only use hover for non-touch devices to prevent sticky-hovering */
 @media (hover: hover) and (pointer: fine) {
   .chipButton:hover {
-    --fdsc-chip-background: var(--fds-semantic-surface-action-primary-subtle-hover);
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle-hover);
     --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
-    --fdsc-chip-border: var(--fds-semantic-border-action-primary-subtle-hover);
+    --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle-hover);
 
     cursor: pointer;
   }
 
   .chipButton:is([aria-pressed='true']):hover {
-    --fdsc-chip-background: var(--fds-semantic-surface-action-primary-no_fill-active);
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-no_fill-active);
     --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
   }
 }
 
 .chipButton:is([aria-pressed='true']),
 .chipButton:active {
-  --fdsc-chip-background: var(--fds-semantic-surface-action-primary-active);
+  --fdsc-chip-background: var(--fds-semantic-surface-action-first-active);
   --fdsc-chip-text-color: var(--fds-semantic-text-neutral-on_inverted);
-  --fdsc-chip-border: var(--fds-semantic-surface-action-primary-active);
+  --fdsc-chip-border: var(--fds-semantic-surface-action-first-active);
 }
 
 .chipButton .label {