@navikt/ds-css 7.11.0 → 7.12.0

package/darkside/guide-panel.darkside.css

@@ -1,5 +1,5 @@
 .navds-guide-panel {
-  --__axc-guide-panel-guide-size: 3.75rem;
+  --__axc-guide-panel-guide-size: 5rem;
 
   position: relative;
   display: flex;
@@ -16,8 +16,12 @@
     align-items: flex-start;
   }
 
+  &[data-poster="false"][data-responsive="false"] {
+    --__axc-guide-panel-guide-size: 3.75rem;
+  }
+
   @media (min-width: 480px) {
-    & {
+    &[data-poster="false"][data-responsive="false"] {
       --__axc-guide-panel-guide-size: 5rem;
     }
 

package/darkside/help-text.darkside.css

@@ -7,7 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--ax-bg-accent-strong);
+  color: var(--ax-bg-info-strong);
   font-size: 1.25rem;
   padding: calc(var(--ax-space-4) / 2);
 }
@@ -33,11 +33,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
-  color: var(--ax-bg-accent-strong-hover);
+  color: var(--ax-bg-info-strong-hover);
 }
 
 .navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
-  color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-bg-info-strong-pressed);
 }
 
 @media (forced-colors: active) {

package/darkside/internalheader.darkside.css

@@ -3,7 +3,7 @@
   align-self: stretch;
   background: var(--ax-bg-raised);
   min-height: 3rem;
-  border-bottom: 1px solid var(--ax-border-subtleA);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 @media (forced-colors: active) {
@@ -24,19 +24,19 @@
   text-align: left;
   padding-block: 0;
   padding-inline: var(--ax-space-24) var(--ax-space-20);
-  border-right: 1px solid var(--ax-border-subtleA);
+  border-right: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
   text-decoration: none;
   margin: 0;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:is(button) {
     cursor: pointer;
   }
 
   &:hover {
-    background: var(--ax-bg-moderate-hover);
+    background: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:is(:hover, :active):not(button, a) {
@@ -46,7 +46,7 @@
 
 .navds-internalheader__user {
   padding: 0 var(--ax-space-20);
-  border-left: 1px solid var(--ax-border-subtleA);
+  border-left: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
 }
@@ -65,11 +65,11 @@
   align-items: center;
   justify-self: center;
   gap: var(--ax-space-8);
-  border-left: 1px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border-left: 1px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    background: var(--ax-bg-moderate-hover);
+    background: var(--ax-bg-neutral-moderate-hoverA);
   }
 }
 
@@ -91,7 +91,7 @@
   }
 
   &:active {
-    background: var(--ax-bg-moderate-pressed);
+    background: var(--ax-bg-neutral-moderate-pressedA);
   }
 }
 

package/darkside/link.darkside.css

@@ -1,5 +1,5 @@
 .navds-link {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   display: inline-flex;
   align-items: center;
   gap: var(--ax-space-2);
@@ -47,18 +47,18 @@
 .navds-alert:not(.navds-alert--inline),
 .navds-confirmation-panel {
   & .navds-link {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 }
 
 .navds-link--action {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-link--neutral {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-link--subtle {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }

package/darkside/list.darkside.css

@@ -1,12 +1,7 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
-  margin-block: var(--ax-space-16);
-}
-
-.navds-list--small ul,
-.navds-list--small ol {
-  margin-block: var(--ax-space-12);
+  margin: 0;
 }
 
 .navds-list {

package/darkside/loader.darkside.css

@@ -61,19 +61,19 @@
   animation: loader-dasharray 1.5s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
-  stroke: var(--ax-border-strong);
+  stroke: var(--ax-border-neutral-strong);
   stroke-linecap: round;
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
 .navds-loader__background {
-  stroke: var(--ax-border-subtleA);
+  stroke: var(--ax-border-neutral-subtleA);
   stroke-width: var(--__axc-loader-stroke-width);
 }
 
 .navds-loader--neutral {
   & .navds-loader__foreground {
-    stroke: var(--ax-border-strong);
+    stroke: var(--ax-border-neutral-strong);
   }
 }
 
@@ -89,11 +89,11 @@
 
 .navds-loader--inverted {
   & .navds-loader__foreground {
-    stroke: var(--ax-border-subtle);
+    stroke: var(--ax-border-neutral-subtle);
   }
 
   & .navds-loader__background {
-    stroke: var(--ax-border-strong);
+    stroke: var(--ax-border-neutral-strong);
   }
 }
 

package/darkside/modal.darkside.css

@@ -6,14 +6,14 @@
   --__axc-modal-bg: var(--ax-bg-raised);
 
   background-color: var(--__axc-modal-bg);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   box-shadow: var(--ax-shadow-dialog);
   padding: 0;
   position: fixed;
   max-height: 100%;
   max-width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   margin: auto;
 
   &[open] {
@@ -135,7 +135,7 @@
 
 .navds-modal__label {
   font-weight: var(--ax-font-weight-bold);
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-modal__body {

package/darkside/pagination.darkside.css

@@ -32,8 +32,8 @@
 }
 
 .navds-pagination__item[data-selected="true"] {
-  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);
 }
 
 .navds-pagination--invisible {

package/darkside/popover.darkside.css

@@ -2,7 +2,7 @@
   z-index: 1000;
   background: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
 
   /* Creates a small gutter between screen-edges on smaller devices */
@@ -10,7 +10,13 @@
 }
 
 .navds-popover__content {
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16);
+}
+
+@media (min-width: 480px) {
+  .navds-popover__content {
+    padding: var(--ax-space-20);
+  }
 }
 
 .navds-popover--hidden {

package/darkside/primitives/page.darkside.css

@@ -48,13 +48,13 @@
 }
 
 .navds-pageblock--gutters {
-  --__axc-page-padding-inline: var(--a-spacing-4);
+  --__axc-page-padding-inline: var(--ax-space-16);
 
   padding-inline: var(--__axc-page-padding-inline);
 }
 
 @media (min-width: 1024px) {
   .navds-pageblock--gutters {
-    --__axc-page-padding-inline: var(--a-spacing-12);
+    --__axc-page-padding-inline: var(--ax-space-48);
   }
 }

package/darkside/progress-bar.darkside.css

@@ -1,9 +1,9 @@
 .navds-progress-bar {
-  background: var(--ax-bg-moderateA);
+  background: var(--ax-bg-neutral-moderateA);
   position: relative;
   border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
 }
 
 .navds-progress-bar--small {

package/darkside/read-more.darkside.css

@@ -14,7 +14,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--ax-space-4);
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
   padding-block: var(--__axc-read-more-pb);
   text-align: start;
@@ -34,8 +34,7 @@
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
-      background-color: var(--ax-bg-hoverA);
-      color: var(--ax-text-accent-strong);
+      background-color: var(--ax-bg-neutral-moderate-hoverA);
     }
   }
 }
@@ -47,7 +46,7 @@
 
     &:hover {
       background-color: var(--ax-bg-accent-moderate-hoverA);
-      color: var(--ax-text-accent-strong);
+      color: var(--ax-text-accent);
     }
   }
 
@@ -66,8 +65,8 @@
 /* ---------------------------- ReadMore Content ---------------------------- */
 .navds-read-more__content {
   margin-top: var(--ax-space-8);
-  border-left: 2px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
   margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
   padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
 

package/darkside/skeleton.darkside.css

@@ -1,5 +1,5 @@
 .navds-skeleton {
-  background-color: var(--ax-bg-moderateA);
+  background-color: var(--ax-bg-neutral-moderateA);
   height: 1.3em;
   animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   pointer-events: none;

package/darkside/stepper.darkside.css

@@ -3,7 +3,7 @@
   --__axc-stepper-border-width: 2px;
   --__axc-stepper-line-length: 1rem;
 
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   font-weight: var(--ax-font-weight-bold);
   line-height: 1;
   list-style: none;
@@ -30,14 +30,14 @@
   grid-column: 1;
 
   .navds-stepper__item--non-interactive & {
-    background-color: var(--ax-border-strong);
+    background-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* Line before non-interactive step */
 .navds-stepper__item:has(+ .navds-stepper__item > .navds-stepper__step[data-interactive="false"]) {
   .navds-stepper__line--2 {
-    background-color: var(--ax-border-strong);
+    background-color: var(--ax-border-neutral-strong);
   }
 }
 
@@ -108,7 +108,7 @@
 }
 
 .navds-stepper__step[data-interactive="true"] {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   border-radius: var(--ax-border-radius-medium);
   text-decoration: none;
 
@@ -125,20 +125,13 @@
     }
   }
 
-  &:hover {
-    & .navds-stepper__circle {
-      color: var(--ax-text-accent-strong);
-    }
-  }
-
   & .navds-stepper__circle {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     border-color: var(--ax-border-accent-strong);
   }
 
   &[data-active="true"] {
     & .navds-stepper__content {
-      color: var(--ax-text-accent-strong);
       text-decoration: none;
     }
 
@@ -160,23 +153,18 @@
 }
 
 .navds-stepper__step[data-interactive="false"] {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral-subtle);
   cursor: default;
 
   & .navds-stepper__circle {
-    color: var(--ax-text-default);
-    border-color: var(--ax-border-strong);
+    border-color: var(--ax-border-neutral-strong);
   }
 
   &[data-active="true"] {
-    & .navds-stepper__content {
-      color: var(--ax-text-subtle);
-    }
-
     & .navds-stepper__circle {
-      color: var(--ax-text-contrast);
-      background-color: var(--ax-bg-strong-pressed);
-      border-color: var(--ax-bg-strong-pressed);
+      color: var(--ax-text-neutral-contrast);
+      background-color: var(--ax-bg-neutral-strong-pressed);
+      border-color: var(--ax-bg-neutral-strong-pressed);
     }
   }
 }

package/darkside/table.darkside.css

@@ -12,12 +12,12 @@
   display: table-row-group;
 
   & .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
-    background-color: var(--ax-bg-hoverA);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
     transition: background-color 70ms cubic-bezier(0.2, 0, 0, 1);
   }
 
   & .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
-    background-color: var(--ax-bg-accent-hoverA);
+    background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 }
 
@@ -26,28 +26,36 @@
 }
 
 .navds-table__row--selected {
-  background-color: var(--ax-bg-accent-soft);
+  background-color: var(--ax-bg-accent-softA);
+
+  & + .navds-table__expanded-row {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .navds-table--zebra-stripes {
   & .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
-    background-color: var(--ax-bg-soft);
+    background-color: var(--ax-bg-neutral-softA);
   }
 
   & .navds-table__body :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
     background-color: transparent;
   }
-}
 
-.navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
-  background-color: var(--ax-bg-soft);
+  & .navds-table__body .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-neutral-softA);
+  }
+
+  & .navds-table__row--selected + .navds-table__expanded-row:nth-child(4n) {
+    background-color: var(--ax-bg-accent-softA);
+  }
 }
 
 .navds-table__header-cell,
 .navds-table__data-cell {
   display: table-cell;
   padding: var(--ax-space-12) var(--ax-space-8);
-  border-bottom: 1px solid var(--ax-border-default);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
   text-align: left;
 }
 
@@ -66,11 +74,6 @@
   text-align: center;
 }
 
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
-:where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
-  border-color: var(--ax-border-strong);
-}
-
 :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
   border-bottom-color: transparent;
 }
@@ -85,6 +88,7 @@
   padding: var(--ax-space-4) var(--ax-space-8);
 }
 
+/* TODO: Look to handle "inline"-checkbox better than custom CSS-overrides in the future. */
 .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
   top: -0.75rem;
 }
@@ -97,6 +101,11 @@
   padding: 0;
 }
 
+.navds-table .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-table .navds-radio__input:focus + .navds-radio__label::after {
+  height: 100%;
+}
+
 .navds-table__header-cell[aria-sort] {
   padding: 0;
 }
@@ -104,14 +113,14 @@
 .navds-table__sort-button {
   appearance: none;
   background: none;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
   border: none;
   cursor: pointer;
   margin: 0;
   padding: var(--ax-space-16) var(--ax-space-12);
   width: 100%;
   display: flex;
-  gap: var(--ax-space-8);
+  gap: var(--ax-space-4);
   align-items: center;
   line-height: inherit;
   font-weight: inherit;
@@ -122,7 +131,7 @@
 }
 
 .navds-table__sort-button:hover {
-  background-color: var(--ax-bg-hoverA);
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
 .navds-table__sort-button:focus-visible {
@@ -132,8 +141,8 @@
 
 .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
 .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
-  background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-accent-strong);
+  background-color: var(--ax-bg-accent-moderate-pressedA);
+  color: var(--ax-text-accent);
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -145,7 +154,7 @@
 }
 
 .navds-table__sort-button svg {
-  font-size: 1rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 
@@ -203,7 +212,15 @@
 .navds-table__toggle-expand-button:hover,
 .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
 .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
-  background-color: var(--ax-bg-hoverA);
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+}
+
+& .navds-table__toggle-expand-button:hover,
+& .navds-table__toggle-expand-cell:hover > .navds-table__toggle-expand-button,
+& .navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
+  .navds-table__row--selected & {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 }
 
 .navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
@@ -225,7 +242,7 @@
 /* -------------------------- Table ExpandableRow -------------------------- */
 .navds-table__expanded-row-collapse:not([style*="height: 0px;"]),
 .navds-table__expanded-row-collapse[style*="transition:"] {
-  border-bottom: 1px solid var(--ax-border-default);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-table__expanded-row-content {

package/darkside/tabs.darkside.css

@@ -1,5 +1,5 @@
 .navds-tabs__tablist-wrapper {
-  box-shadow: inset 0 -1px var(--ax-border-subtle);
+  box-shadow: inset 0 -1px var(--ax-border-neutral-subtleA);
   width: 100%;
   display: flex;
 }
@@ -49,11 +49,11 @@
   align-items: center;
   background: none;
   border: none;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   cursor: pointer;
 
   --__axc-tabs-line-width: 0;
-  --__axc-tabs-line-color: var(--ax-border-subtle);
+  --__axc-tabs-line-color: var(--ax-border-neutral-subtleA);
 
   box-shadow: inset 0 var(--__axc-tabs-line-width) var(--__axc-tabs-line-color);
   transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);

package/darkside/tag.darkside.css

@@ -25,7 +25,7 @@
   --__axc-tag-border: var(--ax-border-info);
   --__axc-tag-bg: var(--ax-bg-info-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-info-strong);
-  --__axc-tag-text: var(--ax-text-info-strong);
+  --__axc-tag-text: var(--ax-text-info);
   --__axc-tag-text-strong: var(--ax-text-info-contrast);
 }
 
@@ -33,7 +33,7 @@
   --__axc-tag-border: var(--ax-border-success);
   --__axc-tag-bg: var(--ax-bg-success-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-success-strong);
-  --__axc-tag-text: var(--ax-text-success-strong);
+  --__axc-tag-text: var(--ax-text-success);
   --__axc-tag-text-strong: var(--ax-text-success-contrast);
 }
 
@@ -41,7 +41,7 @@
   --__axc-tag-border: var(--ax-border-warning);
   --__axc-tag-bg: var(--ax-bg-warning-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-warning-strong);
-  --__axc-tag-text: var(--ax-text-warning-strong);
+  --__axc-tag-text: var(--ax-text-warning);
   --__axc-tag-text-strong: var(--ax-text-warning-contrast);
 }
 
@@ -49,34 +49,34 @@
   --__axc-tag-border: var(--ax-border-danger);
   --__axc-tag-bg: var(--ax-bg-danger-moderateA);
   --__axc-tag-bg-strong: var(--ax-bg-danger-strong);
-  --__axc-tag-text: var(--ax-text-danger-strong);
+  --__axc-tag-text: var(--ax-text-danger);
   --__axc-tag-text-strong: var(--ax-text-danger-contrast);
 }
 
 .navds-tag--neutral {
-  --__axc-tag-border: var(--ax-border-default);
-  --__axc-tag-bg: var(--ax-bg-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-strong);
-  --__axc-tag-text: var(--ax-text-default);
-  --__axc-tag-text-strong: var(--ax-text-contrast);
+  --__axc-tag-border: var(--ax-border-neutral);
+  --__axc-tag-bg: var(--ax-bg-neutral-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-neutral-strong);
+  --__axc-tag-text: var(--ax-text-neutral);
+  --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
 }
 
-.navds-tag--meta-1,
+.navds-tag--meta-purple,
 .navds-tag--alt1 {
-  --__axc-tag-border: var(--ax-border-meta-1);
-  --__axc-tag-bg: var(--ax-bg-meta-1-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-1-strong);
-  --__axc-tag-text: var(--ax-text-meta-1-strong);
-  --__axc-tag-text-strong: var(--ax-text-meta-1-contrast);
+  --__axc-tag-border: var(--ax-border-meta-purple);
+  --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
+  --__axc-tag-text: var(--ax-text-meta-purple);
+  --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
 }
 
-.navds-tag--meta-2,
+.navds-tag--meta-lime,
 .navds-tag--alt2 {
-  --__axc-tag-border: var(--ax-border-meta-2);
-  --__axc-tag-bg: var(--ax-bg-meta-2-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-2-strong);
-  --__axc-tag-text: var(--ax-text-meta-2-strong);
-  --__axc-tag-text-strong: var(--ax-text-meta-2-contrast);
+  --__axc-tag-border: var(--ax-border-meta-lime);
+  --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
+  --__axc-tag-text: var(--ax-text-meta-lime);
+  --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
 }
 
 .navds-tag--small {

package/darkside/theme.darkside.css

@@ -1,5 +1,5 @@
 .navds-theme {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &[data-background="true"] {
     background-color: var(--ax-bg-default);