@navikt/ds-css 7.5.0 → 7.5.2

package/darkside/link.darkside.css

@@ -1,79 +1,63 @@
 .navds-link {
-  color: var(--ac-link-text, var(--a-text-action));
-  text-decoration: underline;
+  color: var(--ax-text-accent);
   display: inline-flex;
   align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-link.navds-link--inline-text {
-  display: inline;
-}
-
-.navds-link.navds-link--inline-text > svg {
-  /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
-  margin: 0.1em 0.1em -0.1em;
-  transform: translateY(0.05em);
-  display: inline;
-  vertical-align: baseline;
-}
-
-.navds-link:hover {
-  text-decoration: none;
-}
+  gap: var(--ax-spacing-1);
+  text-decoration: underline;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
 
-.navds-link.navds-link--remove-underline {
-  text-decoration: none;
-}
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.111em;
+  }
 
-.navds-link.navds-link--remove-underline:hover {
-  text-decoration: underline;
-}
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 
-.navds-alert .navds-link,
-.navds-confirmation-panel .navds-link {
-  color: var(--a-text-default);
-}
+  &.navds-link--inline-text {
+    display: inline;
 
-.navds-link:focus-visible {
-  outline: 2px solid transparent;
-  color: var(--ac-link-focus-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
-}
+    & > svg {
+      /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
+      margin: 0.1em 0.1em -0.1em;
+      transform: translateY(0.05em);
+      display: inline;
+      vertical-align: baseline;
+    }
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-link:focus {
-    outline: 2px solid transparent;
-    color: var(--ac-link-focus-text, var(--a-text-on-action));
+  &.navds-link--remove-underline {
     text-decoration: none;
-    background-color: var(--ac-link-focus-bg, var(--a-border-focus));
-    box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
-}
 
-.navds-link:active {
-  outline: 2px solid transparent;
-  color: var(--ac-link-active-text, var(--a-text-on-action));
-  text-decoration: none;
-  background-color: var(--ac-link-active-bg, var(--a-border-focus));
-  box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
+  & svg {
+    color: inherit;
+    flex-shrink: 0;
+  }
 }
 
-.navds-link svg {
-  color: inherit;
-  flex-shrink: 0;
+.navds-alert,
+.navds-confirmation-panel {
+  & .navds-link {
+    color: var(--ax-text-default);
+  }
 }
 
 .navds-link--action {
-  color: var(--ac-link-action-text, var(--a-text-action));
+  color: var(--ax-text-accent);
 }
 
 .navds-link--neutral {
-  color: var(--ac-link-neutral-text, var(--a-text-default));
+  color: var(--ax-text-default);
 }
 
 .navds-link--subtle {
-  color: var(--ac-link-subtle-text, var(--a-text-subtle));
+  color: var(--ax-text-subtle);
 }

package/darkside/list.darkside.css

@@ -1,25 +1,45 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
-  margin-block: var(--a-spacing-4);
+  margin-block: var(--ax-spacing-4);
 }
 
 .navds-list--small ul,
 .navds-list--small ol {
-  margin-block: var(--a-spacing-3);
+  margin-block: var(--ax-spacing-3);
 }
 
-.navds-list .navds-list :where(ul, ol) {
-  margin-block: var(--a-spacing-2) 0;
-}
+.navds-list {
+  & .navds-list :where(ul, ol) {
+    margin-block: var(--ax-spacing-2) 0;
+  }
 
-.navds-list ol {
-  list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
-  padding-left: 1.7rem;
-}
+  & ol {
+    list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+    padding-left: 1.7rem;
+
+    & > .navds-list__item {
+      padding-left: 0.3rem;
+    }
 
-.navds-list ol > .navds-list__item {
-  padding-left: 0.3rem;
+    & li::marker {
+      font-weight: var(--ax-font-weight-bold);
+    }
+  }
+
+  & ul {
+    & > .navds-list__item {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: var(--ax-spacing-2);
+    }
+
+    & > li > .navds-list__item-marker {
+      display: flex;
+      align-items: center;
+      height: var(--ax-font-line-height-xlarge);
+    }
+  }
 }
 
 /* SAFARI HACK START */
@@ -41,45 +61,26 @@ _:future,
 /* stylelint-enable selector-type-no-unknown */
 
 .navds-list__item {
-  margin-block-end: var(--a-spacing-2);
-}
+  margin-block-end: var(--ax-spacing-2);
 
-.navds-list__item:last-child {
-  margin-block-end: 0;
-}
-
-.navds-list ul > .navds-list__item {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--a-spacing-2);
-}
-
-.navds-list ol li::marker {
-  font-weight: var(--a-font-weight-bold);
-  color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
+  &:last-child {
+    margin-block-end: 0;
+  }
 }
 
 .navds-list__item-marker {
   width: 1.5rem;
 }
 
-.navds-list ul > li > .navds-list__item-marker {
-  display: flex;
-  align-items: center;
-  height: var(--a-font-line-height-xlarge);
-}
-
 .navds-list--small ul > li > .navds-list__item-marker {
-  height: var(--a-font-line-height-large);
+  height: var(--ax-font-line-height-large);
 }
 
 .navds-list__item-marker--bullet {
   padding-left: 0.8rem;
-  color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }
 
 .navds-list__item-marker--icon {
   font-size: 1.5rem;
   justify-content: center;
-  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
 }

package/darkside/loader.darkside.css

@@ -5,88 +5,102 @@
   animation: loader-rotate 1.8s linear infinite;
   stroke-width: 6;
 
-  --ac-loader-background-stroke-width: 5.9;
-}
+  --__axc-loader-stroke-width: 5.9;
 
-.navds-loader__foreground {
-  animation: loader-dasharray 1.8s ease-in-out infinite;
-  stroke-dasharray: 80px, 200px;
-  stroke-dashoffset: 0;
-  stroke: var(--ac-loader-stroke, var(--a-border-default));
-}
+  &.navds-loader--3xlarge {
+    width: 5.5rem;
+    stroke-width: 5;
 
-.navds-loader__background {
-  stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
-  stroke-width: var(--ac-loader-background-stroke-width);
-}
+    --__axc-loader-stroke-width: 4.8;
+  }
 
-.navds-loader--neutral .navds-loader__foreground {
-  stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
-}
+  &.navds-loader--2xlarge {
+    width: 4rem;
+    stroke-width: 6;
 
-.navds-loader--interaction .navds-loader__foreground {
-  stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
-}
+    --__axc-loader-stroke-width: 5.8;
+  }
 
-.navds-loader--inverted .navds-loader__foreground {
-  stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
-}
+  &.navds-loader--xlarge {
+    width: 2.5rem;
+    stroke-width: 6;
 
-.navds-loader--inverted .navds-loader__background {
-  stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
-}
+    --__axc-loader-stroke-width: 5.8;
+  }
 
-.navds-loader--transparent .navds-loader__background {
-  stroke: var(--a-surface-transparent);
-}
+  &.navds-loader--large {
+    width: 2rem;
+    stroke-width: 7;
 
-.navds-loader--3xlarge {
-  width: 5.5rem;
-  stroke-width: 5;
+    --__axc-loader-stroke-width: 6.8;
+  }
 
-  --ac-loader-background-stroke-width: 4.8;
-}
+  &.navds-loader--medium {
+    width: 1.5rem;
+    stroke-width: 7;
 
-.navds-loader--2xlarge {
-  width: 4rem;
-  stroke-width: 6;
+    --__axc-loader-stroke-width: 6.8;
+  }
 
-  --ac-loader-background-stroke-width: 5.8;
-}
+  &.navds-loader--small {
+    width: 1.25rem;
+    stroke-width: 8;
 
-.navds-loader--xlarge {
-  width: 2.5rem;
-  stroke-width: 6;
+    --__axc-loader-stroke-width: 7.8;
+  }
 
-  --ac-loader-background-stroke-width: 5.8;
-}
+  &.navds-loader--xsmall {
+    width: 1rem;
+    stroke-width: 8;
 
-.navds-loader--large {
-  width: 2rem;
-  stroke-width: 7;
+    --__axc-loader-stroke-width: 7.8;
+  }
+}
 
-  --ac-loader-background-stroke-width: 6.8;
+.navds-loader__foreground {
+  animation: loader-dasharray 1.5s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--ax-border-strong);
+  stroke-linecap: round;
+  stroke-width: var(--__axc-loader-stroke-width);
 }
 
-.navds-loader--medium {
-  width: 1.5rem;
-  stroke-width: 7;
+.navds-loader__background {
+  stroke: var(--ax-border-neutral-subtleA);
+  stroke-width: var(--__axc-loader-stroke-width);
+}
 
-  --ac-loader-background-stroke-width: 6.8;
+.navds-loader--neutral {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-strong);
+  }
 }
 
-.navds-loader--small {
-  width: 1.25rem;
-  stroke-width: 8;
+.navds-loader--interaction {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-accent-strong);
+  }
 
-  --ac-loader-background-stroke-width: 7.8;
+  & .navds-loader__background {
+    stroke: var(--ax-border-accent-subtleA);
+  }
 }
 
-.navds-loader--xsmall {
-  width: 1rem;
-  stroke-width: 8;
+.navds-loader--inverted {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-subtle);
+  }
 
-  --ac-loader-background-stroke-width: 7.8;
+  & .navds-loader__background {
+    stroke: var(--ax-border-strong);
+  }
+}
+
+.navds-loader--transparent {
+  & .navds-loader__background {
+    stroke: transparent;
+  }
 }
 
 @keyframes loader-rotate {

package/darkside/modal.darkside.css

@@ -3,23 +3,26 @@
 }
 
 .navds-modal {
-  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
-
-  background-color: var(--__ac-modal-bg);
-  border: none;
-  border-radius: var(--a-border-radius-large);
-  box-shadow: var(--a-shadow-xlarge);
+  --__axc-modal-bg: var(--ax-bg-raised);
+
+  background-color: var(--__axc-modal-bg);
+  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  box-shadow:
+    0 0 1px 0 rgb(0 0 0/ 0.08),
+    0 2px 5px 0 rgb(0 0 0/ 0.15),
+    0 10px 24px 0 rgb(0 0 0/ 0.18);
   padding: 0;
   position: fixed;
   max-height: 100%;
   max-width: 100%;
-  color: var(--a-text-default);
-}
+  color: var(--ax-text-default);
 
-.navds-modal[open] {
-  display: flex;
-  flex-direction: column;
-  animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  &[open] {
+    display: flex;
+    flex-direction: column;
+    animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  }
 }
 
 .navds-modal--polyfilled {
@@ -32,14 +35,14 @@
   width: fit-content;
   height: fit-content;
   margin: auto;
-}
 
-.navds-modal--polyfilled .navds-modal--polyfilled {
-  overflow: auto;
-}
+  &:not([open]) {
+    display: none; /* from polyfill */
+  }
 
-.navds-modal--polyfilled:not([open]) {
-  display: none; /* from polyfill */
+  & .navds-modal--polyfilled {
+    overflow: auto;
+  }
 }
 
 ._dialog_overlay {
@@ -52,12 +55,24 @@
   left: 0;
 }
 
-.navds-modal--small {
-  width: var(--ac-modal-width-small, 450px);
+.navds-modal--medium {
+  width: 700px;
 }
 
-.navds-modal--medium {
-  width: var(--ac-modal-width-medium, 700px);
+.navds-modal--small {
+  width: 450px;
+
+  & .navds-modal__header {
+    padding: var(--ax-spacing-4) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__body {
+    padding: var(--ax-spacing-2) var(--ax-spacing-4) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__footer {
+    padding: var(--ax-spacing-4);
+  }
 }
 
 @media (min-width: 480px) {
@@ -83,16 +98,16 @@
 
 .navds-modal::backdrop {
   /*
-   * Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
-   * But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
-   * We can add ::backdrop to tokens.css when we remove the polyfill.
+   * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
+   * TODO: Consider adding `::backdrop` to global token definitions.
+   * TODO: Check that overlay-color is correct after the new colors is set in stone.
    */
-  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  background: #0214317d;
   animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
 }
 
 .navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
-  background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
+  background: #0214317d;
 
   /* From polyfill: */
   position: fixed;
@@ -104,37 +119,35 @@
 }
 
 .navds-modal__button {
-  margin-left: var(--a-spacing-4);
+  margin-left: var(--ax-spacing-4);
   float: right;
 }
 
 .navds-modal__header {
-  padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
+  padding: var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-4) var(--ax-spacing-6);
 }
 
-.navds-modal--small .navds-modal__header {
-  padding: var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
-}
-
-.navds-modal__header-icon svg {
-  display: inline;
-  vertical-align: -0.25rem;
-  margin-right: var(--a-spacing-1);
+.navds-modal__header-icon {
+  & svg {
+    display: inline;
+    vertical-align: -0.25rem;
+    margin-right: var(--ax-spacing-1);
+  }
 }
 
 .navds-modal__label {
-  font-weight: 600;
-  color: var(--a-text-subtle);
+  font-weight: var(--ax-font-weight-bold);
+  color: var(--ax-text-subtle);
 }
 
 .navds-modal__body {
-  padding: var(--a-spacing-6);
+  padding: var(--ax-spacing-6);
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
   background:
-    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
-    linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
+    linear-gradient(var(--__axc-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom,
     radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
     radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
   background-size:
@@ -146,23 +159,15 @@
   background-repeat: no-repeat;
 }
 
-.navds-modal--small .navds-modal__body {
-  padding: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4);
-}
-
 .navds-modal__header + .navds-modal__body {
-  padding-top: var(--a-spacing-0);
+  padding-top: var(--ax-spacing-0);
 }
 
 .navds-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
-  gap: var(--a-spacing-4);
-  padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
-}
-
-.navds-modal--small .navds-modal__footer {
-  padding: var(--a-spacing-4);
+  gap: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-6);
 }
 
 .navds-modal__footer :nth-of-type(2) {
@@ -180,7 +185,7 @@
 @keyframes akselModalFadeIn {
   0% {
     opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
-    transform: translate3d(0, calc(5% + 4px), 0);
+    transform: translate3d(0, calc(2% + 4px), 0);
   }
 
   50% {

package/darkside/pagination.darkside.css

@@ -7,65 +7,33 @@
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
+
+  & li {
+    list-style: none;
+    display: flex;
+  }
 }
 
 .navds-pagination__ellipsis {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--a-spacing-12);
+  width: 3rem;
   cursor: default;
 }
 
 .navds-pagination--small .navds-pagination__ellipsis {
-  width: var(--a-spacing-8);
+  width: 2rem;
 }
 
 .navds-pagination--xsmall .navds-pagination__ellipsis {
-  width: var(--a-spacing-6);
-}
-
-.navds-pagination__item {
-  color: var(--ac-pagination-text, var(--a-text-default));
-}
-
-.navds-pagination--medium .navds-pagination__item {
-  border-radius: var(--a-border-radius-medium);
-}
-
-.navds-pagination__item[aria-current="true"] {
-  background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
-  color: var(--ac-pagination-selected-text, var(--a-text-on-action));
-}
-
-.navds-pagination__item[aria-current="true"]:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-pagination__item[aria-current="true"]:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
-  }
-}
-
-.navds-pagination__prev-next {
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-1);
-}
-
-.navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-inline: var(--a-spacing-1-alt);
+  width: 1.5rem;
 }
 
-.navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
-  padding-left: var(--a-spacing-05);
-  padding-right: var(--a-spacing-05);
+.navds-pagination__item[data-selected="true"] {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
 }
 
 .navds-pagination--invisible {