@navikt/ds-css 7.10.0 → 7.12.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @navikt/ds-css
 
+## 7.12.0
+
+## 7.11.0
+
+### Patch Changes
+
+- ExpansionCard: Removed dynamic padding on button-element. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
+- Modal: Defaults to `margin: auto` for tailwind 4 support. ([#3532](https://github.com/navikt/aksel/pull/3532))
+
 ## 7.10.0
 
 ### Minor Changes

package/config/tests/bundle.test.ts

@@ -6,6 +6,7 @@ import { describe, expect, test } from "vitest";
  * Darkside config might have some new files added. We can skip these when checking for equality.
  */
 const newFiles = ["theme"];
+const deprecatedFiles = ["linkpanel"];
 
 describe("Check that old and new (darkside) bundle matches", () => {
   test("Darkside includes the same files as old bundle", () => {
@@ -27,6 +28,9 @@ describe("Check that old and new (darkside) bundle matches", () => {
 
     // Compare file names
     oldFiles.forEach((file) => {
+      if (deprecatedFiles.find((oldFile) => file.includes(oldFile))) {
+        return;
+      }
       expect(darksideFiles).toContain(file);
     });
 
@@ -39,8 +43,9 @@ describe("Check that old and new (darkside) bundle matches", () => {
 
     /**
      * Check that darkside has the same amount of files as old bundle
-     * (minus the new files * 2 since .min.css is also included)
      */
-    expect(darksideFiles.length - newFiles.length * 2).toBe(oldFiles.length);
+    expect(
+      darksideFiles.length - newFiles.length * 2 + deprecatedFiles.length * 2,
+    ).toBe(oldFiles.length);
   });
 });

package/darkside/accordion.darkside.css

@@ -12,7 +12,7 @@
   position: relative;
   border-radius: var(--ax-border-radius-large);
   background: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   > * {
     font-weight: var(--ax-font-weight-regular);
@@ -25,7 +25,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-accent-hoverA);
+    background-color: var(--ax-bg-accent-moderate-hoverA);
 
     &::before,
     &::after {
@@ -45,8 +45,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     z-index: 1;
 
     &::before,
@@ -57,7 +57,7 @@
 }
 
 .navds-accordion--small .navds-accordion__header {
-  padding-block: var(--a-spacing-2);
+  padding-block: var(--ax-space-8);
 }
 
 .navds-accordion__header::before,
@@ -70,11 +70,7 @@
   right: 0;
   width: 100%;
   height: 1px;
-  background-color: var(--ax-border-subtleA);
-}
-
-.navds-accordion__item:last-child > .navds-accordion__content {
-  border-bottom: 1px solid transparent;
+  background-color: var(--ax-border-neutral-subtleA);
 }
 
 .navds-accordion__header::after {
@@ -100,7 +96,7 @@
   height: 22px;
   align-self: center;
   background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-accordion__header-chevron {
@@ -115,67 +111,64 @@
 }
 
 /* ---------------------------- Accordion content --------------------------- */
-.navds-accordion__content {
-  --__acx-accordion-content-line-width: 2px;
-
-  padding-inline: var(--ax-space-24) var(--ax-space-12);
-  display: none;
-  overflow: hidden;
-  padding-block: 0;
-  max-height: 0;
-  border-color: transparent;
-  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
-  animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.navds-accordion__item--no-animation {
-  animation: none;
-}
 
-@keyframes navds-accordion-content-animation {
-  0% {
-    opacity: 0.01;
-  }
-
-  20% {
-    opacity: 0.01;
-  }
+.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+  padding-block: var(--ax-space-8);
+  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
-  100% {
-    opacity: 1;
+  @media (forced-colors: active) {
+    border-left: 1px solid canvastext;
   }
 }
 
 .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
-  padding-inline: var(--ax-space-24) var(--ax-space-12);
-}
+  box-shadow: -2px 0 0 0 var(--ax-border-neutral-subtleA);
+}
+
+.navds-accordion__item {
+  & > .navds-accordion__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    overflow: hidden;
+    margin-inline: var(--ax-space-24) var(--ax-space-12);
+    margin-block: 0;
+    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    transition-duration: 250ms;
+    transition-property: visibility, opacity, grid-template-rows, margin, min-height;
+    border-color: transparent;
+    opacity: 0;
 
-.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
-  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
-  padding-block: var(--ax-space-8);
+    & .navds-accordion__content-inner {
+      min-height: 0;
+      padding-block: 0;
+    }
+  }
 
-  /* Aligns content with heading-section */
-  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
+  &[data-expanded="true"] {
+    & > .navds-accordion__content {
+      grid-template-rows: 1fr;
+      visibility: visible;
+      margin-block: var(--ax-space-8);
+      margin-block-end: var(--ax-space-24);
+      border-color: var(--ax-border-neutral-subtleA);
+      opacity: 1;
+
+      & .navds-accordion__content-inner {
+        min-height: fit-content;
+      }
+    }
 
-  @media (forced-colors: active) {
-    border-left: 1px solid canvastext;
+    &:last-child {
+      border-bottom: 1px solid var(--ax-border-neutral-subtleA);
+    }
   }
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
-  display: block;
-  opacity: 1;
-  overflow: visible;
-  max-height: fit-content;
-  padding-block: var(--ax-space-8);
-  padding-block-end: var(--ax-space-24);
-  border-color: var(--ax-border-subtleA);
-}
+/* ---------------- Accordion No Animation (defaultOpen) ---------------- */
 
-@starting-style {
-  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
-    padding-block: 0;
-    max-height: 0;
-    border-color: transparent;
+.navds-accordion__item--no-animation {
+  & > .navds-accordion__content {
+    transition: none;
   }
 }

package/darkside/action-menu.darkside.css

@@ -1,8 +1,8 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-large);
-  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
 
@@ -39,7 +39,7 @@
   --__axc-action-menu-item-pl: var(--ax-space-8);
   --__axc-action-menu-item-height: 2rem;
 
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
@@ -60,14 +60,14 @@
   gap: var(--ax-space-8);
   min-height: var(--__axc-action-menu-item-height);
   cursor: default;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);
   font-size: var(--ax-font-size-medium);
   scroll-margin-block: var(--__axc-action-menu-content-p);
   line-height: 1.5;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   text-decoration: none;
 
   & svg {
@@ -77,7 +77,7 @@
   &:focus {
     outline: none;
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   &[aria-disabled="true"] {
@@ -94,7 +94,7 @@
   --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
-    background-color: var(--ax-bg-moderate-pressed);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:focus {
@@ -103,11 +103,11 @@
 }
 
 .navds-action-menu__item--danger {
-  color: var(--ax-text-danger);
+  color: var(--ax-text-danger-subtle);
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger);
+    color: var(--ax-text-danger-subtle);
   }
 }
 
@@ -138,8 +138,8 @@
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--ax-bg-moderateA);
-  color: var(--ax-text-default);
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-small);
   padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
@@ -158,7 +158,7 @@
   min-height: calc(var(--__axc-action-menu-item-height) - 6px);
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   border-radius: var(--ax-border-radius-medium);
   user-select: none;
   cursor: default;
@@ -168,7 +168,7 @@
 .navds-action-menu__divider {
   height: 1px;
   margin-block: var(--ax-space-8);
-  background-color: var(--ax-border-subtleA);
+  background-color: var(--ax-border-neutral-subtleA);
 }
 
 /* -------------------------- ActionMenu indicator -------------------------- */

package/darkside/baseline/baseline.darkside.css

@@ -8,7 +8,8 @@ body,
 
 /* ---------------------------- Inline utilities ---------------------------- */
 [hidden] {
-  display: none !important;
+  /* CSS-layers reverses "!important" ordering, so we can't set this to important if we want to override it later. */
+  display: none;
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

package/darkside/baseline/fonts.darkside.css

@@ -2,7 +2,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -12,7 +12,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -22,7 +22,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -33,7 +33,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -44,7 +44,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
@@ -54,7 +54,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
@@ -64,7 +64,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -75,7 +75,7 @@
 @font-face {
   font-family: "Source Sans 3";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -88,7 +88,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -99,7 +99,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: italic;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
@@ -110,7 +110,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
@@ -121,7 +121,7 @@
 @font-face {
   font-family: "Source Sans Pro";
   font-style: normal;
-  font-weight: 400 600;
+  font-weight: 400 650;
   font-display: swap;
   src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,

package/darkside/button.darkside.css

@@ -5,7 +5,7 @@
   --__axc-button-border-width: 2px;
 
   padding: var(--ax-space-12) var(--ax-space-20);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   display: inline-flex;
   cursor: pointer;
   text-decoration: none;
@@ -55,7 +55,7 @@
 
 @supports not selector(:focus-visible) {
   .navds-button:focus {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
@@ -111,19 +111,19 @@
  * .navds-button--primary-neutral *
  *************************/
 .navds-button--primary-neutral {
-  background-color: var(--ax-bg-strong);
-  color: var(--ax-text-contrast);
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
 
   &:hover {
-    background-color: var(--ax-bg-strong-hover);
+    background-color: var(--ax-bg-neutral-strong-hover);
   }
 
   &:active {
-    background-color: var(--ax-bg-strong-pressed);
+    background-color: var(--ax-bg-neutral-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    background-color: var(--ax-bg-strong);
+    background-color: var(--ax-bg-neutral-strong);
   }
 }
 
@@ -134,7 +134,7 @@
   --__axc-button-border-color: var(--ax-border-accent);
 
   background-color: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   &:hover {
     --__axc-button-border-color: var(--ax-border-accent-strong);
@@ -143,17 +143,14 @@
   }
 
   &:active {
-    --__axc-button-border-color: transparent;
-
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
     --__axc-button-border-color: var(--ax-border-accent);
 
     background-color: transparent;
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
   }
 }
 
@@ -161,28 +158,25 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-strong);
+  --__axc-button-border-color: var(--ax-border-neutral);
 
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    --__axc-button-border-color: var(--ax-border-strong);
+    --__axc-button-border-color: var(--ax-border-neutral-strong);
 
-    background-color: var(--ax-bg-moderate-hoverA);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:active {
-    --__axc-button-border-color: transparent;
-
-    color: var(--ax-text-contrast);
-    background-color: var(--ax-bg-strong-pressed);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-strong);
+    --__axc-button-border-color: var(--ax-border-neutral);
 
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }
@@ -192,19 +186,18 @@
  ****************************/
 .navds-button--tertiary {
   background-color: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     background-color: transparent;
   }
 }
@@ -214,19 +207,18 @@
  ****************************/
 .navds-button--tertiary-neutral {
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    background-color: var(--ax-bg-moderate-hoverA);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-strong-pressed);
-    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }

package/darkside/chat.darkside.css

@@ -23,8 +23,8 @@
   align-items: center;
   background-color: var(--ax-bg-raised);
   border-radius: var(--ax-border-radius-full);
-  border: 1px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -62,7 +62,7 @@
   gap: var(--ax-space-8);
   border-radius: var(--ax-border-radius-xlarge);
   border-bottom-left-radius: var(--ax-border-radius-small);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-chat--small .navds-chat__bubble {
@@ -80,13 +80,13 @@
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-moderateA);
+    background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
 /* ------------------------------ Chat top text ----------------------------- */
 .navds-chat__top-text {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: flex;
   gap: var(--ax-space-8);
   align-items: baseline;

package/darkside/chips.darkside.css

@@ -28,14 +28,14 @@
   min-height: 2rem;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 .navds-chips--readonly {
   .navds-chips__chip {
-    background-color: var(--ax-bg-moderateA);
+    background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
@@ -72,7 +72,7 @@
 .navds-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
@@ -90,21 +90,21 @@
 }
 
 .navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
-  background-color: var(--ax-bg-moderate);
-  color: var(--ax-text-default);
+  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-neutral-moderate);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    background-color: var(--ax-bg-moderate-hover);
+    background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
   &[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-strong-pressed);
-    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
 
     &:hover {
-      background-color: var(--ax-bg-strong-hover);
+      background-color: var(--ax-bg-neutral-strong-hover);
     }
   }
 }
@@ -130,11 +130,11 @@
 }
 
 .navds-chips__removable--neutral {
-  background: var(--ax-bg-strong-pressed);
-  color: var(--ax-text-contrast);
+  background: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
 
   &:hover {
-    background: var(--ax-bg-strong-hover);
+    background: var(--ax-bg-neutral-strong-hover);
   }
 }