@navikt/ds-css 7.5.0 → 7.5.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 7.5.2
+
+### Patch Changes
+
+- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+
+## 7.5.1
+
 ## 7.5.0
 
 ## 7.4.3

package/darkside/button.darkside.css

@@ -35,13 +35,13 @@
 }
 
 .navds-button:focus-visible {
-  outline: 4px solid var(--ax-border-focus);
+  outline: 2px solid var(--ax-border-focus);
   outline-offset: 2px;
 }
 
 @supports not selector(:focus-visible) {
   .navds-button:focus {
-    outline: 4px solid var(--ax-border-focus);
+    outline: 2px solid var(--ax-border-focus);
   }
 }
 
@@ -137,7 +137,7 @@
 
 .navds-button--secondary:hover {
   background-color: var(--ax-bg-accent-moderate-hoverA);
-  color: var(--ax-bg-accent-strong-hover);
+  color: var(--ax-text-accent-strong);
   box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
 }
 
@@ -159,12 +159,13 @@
 
 .navds-button--secondary-neutral {
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
 }
 
 .navds-button--secondary-neutral:hover {
   background-color: var(--ax-bg-neutral-moderate-hoverA);
+  color: var(--ax-text-neutral-strong);
 }
 
 .navds-button--secondary-neutral:active {
@@ -191,7 +192,7 @@
 
 .navds-button--tertiary:hover {
   background-color: var(--ax-bg-accent-hoverA);
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-button--tertiary:active {
@@ -217,11 +218,12 @@
  ****************************/
 
 .navds-button--tertiary-neutral {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-button--tertiary-neutral:hover {
   background-color: var(--ax-bg-neutral-hoverA);
+  color: var(--ax-text-neutral-strong);
 }
 
 .navds-button--tertiary-neutral:active {

package/darkside/copybutton.darkside.css

@@ -21,7 +21,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:focus-visible {

package/darkside/expansioncard.darkside.css

@@ -1,114 +1,93 @@
 .navds-expansioncard {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
-  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
-  --__ac-expansioncard-border-width: 1px;
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
-
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-6);
+
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
   height: fit-content;
-}
+  border: 1px solid var(--ax-border-default);
 
-.navds-expansioncard--open {
-  --__ac-expansioncard-border-color: var(
-    --ac-expansioncard-border-open-color,
-    var(--ac-expansioncard-border-color, var(--a-border-default))
-  );
+  &:has(.navds-expansioncard__header:hover) {
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
+  }
 }
 
-.navds-expansioncard:hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
-}
+/* ------------------------ ExpansionCard Small-size ------------------------ */
+.navds-expansioncard--small {
+  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+
+  & > .navds-expansioncard__header .navds-expansioncard__title--small {
+    margin-top: var(--ax-spacing-05);
+  }
+
+  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+    margin-top: 0;
+  }
+
+  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
+    min-height: 2rem;
+    min-width: 2rem;
+  }
 
-:where(.navds-expansioncard.navds-expansioncard--open):hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+  & .navds-expansioncard__content {
+    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+  }
 }
 
-/*************************
- * Header *
- *************************/
+/* -------------------------- ExpansionCard Header -------------------------- */
 .navds-expansioncard__header {
   width: 100%;
   display: flex;
-  gap: var(--a-spacing-4);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  gap: var(--ax-spacing-4);
+  padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+  border-radius: var(--__axc-expansioncard-border-radius);
+  background-color: transparent;
   position: relative;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
   justify-content: space-between;
-}
-
-.navds-expansioncard--small {
-  --__ac-expansioncard-padding-block: var(--a-spacing-3);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
-}
 
-.navds-expansioncard__header:hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-bottom: none;
-  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 -1px 0 0 var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
-  content: "";
-  background-color: var(--a-border-divider);
-  bottom: 0;
-  left: var(--__ac-expansioncard-padding-inline);
-  height: 1px;
-  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
-  position: absolute;
-  opacity: 1;
-  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
+  &:hover {
+    background-color: var(--ax-bg-neutral-raised-hover);
+  }
 
-.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
-  opacity: 0;
+  &[data-open="true"] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    /* Divider between header and content */
+    &::after {
+      content: "";
+      background-color: var(--ax-border-subtle);
+      bottom: 0;
+      left: var(--__axc-expansioncard-padding-inline);
+      height: 1px;
+      width: calc(100% - 2 * var(--__axc-expansioncard-padding-inline));
+      position: absolute;
+      opacity: 1;
+    }
+
+    &:hover::after {
+      opacity: 0;
+    }
+  }
 }
 
-/*************************
- * Header/Typography *
- *************************/
-
+/* --------------------- ExpansionCard Header typography -------------------- */
 .navds-expansioncard__title--small {
   margin-top: 0.625rem;
 }
 
 .navds-expansioncard__title--medium {
-  margin-top: var(--a-spacing-2);
+  margin-top: var(--ax-spacing-2);
 }
 
 .navds-expansioncard__title--large {
-  margin-top: var(--a-spacing-1);
-}
-
-.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
-  margin-top: var(--a-spacing-05);
-}
-
-.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
-  margin-top: 0;
+  margin-top: var(--ax-spacing-1);
 }
 
-/*************************
- * Header/Button *
- *************************/
+/* ----------------------- ExpansionCard Header Button ---------------------- */
 .navds-expansioncard__header-button {
   display: grid;
   place-content: center;
@@ -116,120 +95,89 @@
   margin: 0;
   background: transparent;
   border: none;
-  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  border-radius: var(--ax-border-radius-large);
   min-height: 3rem;
   min-width: 3rem;
   font-size: 1.5rem;
   align-self: flex-start;
-}
 
-.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
-  min-height: 2rem;
-  min-width: 2rem;
-}
-
-:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
-  background-color: var(--a-surface-hover);
-}
-
-.navds-expansioncard__header-chevron {
-  transition: transform 150ms ease-in-out;
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(0) rotate(180deg);
-}
-
-.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(1px);
-}
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 
-.navds-expansioncard__header-button:focus-visible {
-  outline: 3px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
+  @supports not selector(:focus-visible) {
+    &:focus {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 2px;
+    }
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-expansioncard__header-button:focus {
-    outline: 3px solid transparent;
-    box-shadow: var(--a-shadow-focus);
+  /* Makes the whole header clickable */
+  &::after {
+    inset: 0;
+    z-index: 1;
+    position: absolute;
+    content: "";
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
   }
 }
 
-.navds-expansioncard--open
-  > :where(.navds-expansioncard__header)
-  > :where(.navds-expansioncard__header-button):hover
-  :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(-1px) rotate(180deg);
+.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
-.navds-expansioncard__header-button::after {
-  inset: 0;
-  z-index: 1;
-  position: absolute;
-  content: "";
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
+.navds-expansioncard__header-chevron {
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-/*************************
- * Content *
- *************************/
-.navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-5);
-
-  border-end-end-radius: var(--__ac-expansioncard-border-radius);
-  border-end-start-radius: var(--__ac-expansioncard-border-radius);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
-    var(--__ac-expansioncard-padding-inline);
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-top: none;
+.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+  transform: rotateX(-180deg);
 }
 
-.navds-expansioncard--small .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
+/* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
+.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+  transition-duration: 400ms;
 }
 
-.navds-expansioncard__content--closed {
-  display: none;
-}
+/* -------------------------- ExpansionCard Content ------------------------- */
+.navds-expansioncard__content {
+  --__axc-expansioncard-padding-block: var(--ax-spacing-5);
 
-:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 1px 0 0 var(--__ac-expansioncard-border-color);
+  border-end-end-radius: var(--__axc-expansioncard-border-radius);
+  border-end-start-radius: var(--__axc-expansioncard-border-radius);
+  padding-inline: var(--__axc-expansioncard-padding-inline);
+  padding-block: 0;
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: visibility, padding-block, grid-template-rows;
+  overflow: hidden;
+
+  &[data-open="true"] {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+
+    & .navds-expansioncard__content-inner {
+      opacity: 1;
+    }
+  }
 }
 
 .navds-expansioncard__content-inner {
-  animation: fadeExpansionCard 250ms ease;
-}
-
-.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
-  animation: none;
-}
-
-@keyframes fadeExpansionCard {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
-  }
-
-  40% {
-    opacity: 0.7;
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-@media (forced-colors: active) {
-  .navds-expansioncard:hover {
-    --__ac-expansioncard-border-color: highlight;
-
-    outline: 1px solid highlight;
+/* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
+.navds-expansioncard--no-animation {
+  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+    transition: none;
   }
 }

package/darkside/form/error-summary.darkside.css

@@ -1,55 +1,49 @@
 .navds-error-summary {
-  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
-  padding: var(--a-spacing-5);
-  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
-  border-radius: var(--a-border-radius-large);
+  background-color: var(--ax-bg-default);
+  padding: var(--ax-spacing-5);
+  border: 4px solid var(--ax-border-danger);
+  border-radius: var(--ax-border-radius-xlarge);
+  outline-offset: 2px;
+
+  &:focus-visible,
+  &:has(.navds-error-summary__heading:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+  }
 }
 
-.navds-error-summary--small {
-  padding: var(--a-spacing-3);
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    outline: 2px solid var(--ax-border-focus);
+  }
 }
 
-.navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-6);
-}
+.navds-error-summary--small {
+  padding: var(--ax-spacing-3);
 
-.navds-error-summary--small .navds-error-summary__heading {
-  scroll-margin-top: var(--a-spacing-4);
-}
+  & .navds-error-summary__heading {
+    scroll-margin-top: var(--ax-spacing-4);
+  }
 
-.navds-error-summary__heading:focus {
-  outline: none;
+  & > .navds-error-summary__list {
+    margin: var(--ax-spacing-2) 0;
+    gap: var(--ax-spacing-2);
+    padding-left: var(--ax-spacing-5);
+  }
 }
 
-.navds-error-summary:focus-visible,
-.navds-error-summary:has(.navds-error-summary__heading:focus-visible) {
-  box-shadow:
-    0 0 0 1px var(--a-border-on-inverted),
-    0 0 0 4px var(--a-border-focus);
-}
+.navds-error-summary__heading {
+  scroll-margin-top: var(--ax-spacing-6);
 
-@supports not selector(:focus-visible) {
-  .navds-error-summary:focus {
-    box-shadow: var(--a-shadow-focus);
+  &:focus {
     outline: none;
   }
 }
 
 .navds-error-summary__list {
-  margin: var(--a-spacing-3) 0;
+  margin: var(--ax-spacing-3) 0;
   display: flex;
   flex-direction: column;
-  gap: var(--a-spacing-3);
-  padding-left: var(--a-spacing-6);
+  gap: var(--ax-spacing-3);
+  padding-left: var(--ax-spacing-6);
   list-style: inherit;
 }
-
-.navds-error-summary__list > * {
-  color: var(--ac-error-summary-list-dot, var(--a-text-action));
-}
-
-.navds-error-summary--small > .navds-error-summary__list {
-  margin: var(--a-spacing-2) 0;
-  gap: var(--a-spacing-2);
-  padding-left: var(--a-spacing-5);
-}

package/darkside/form/fieldset.darkside.css

@@ -1,11 +1,3 @@
-[data-theme="dark"] {
-  --__ac-form-description: var(--a-text-on-inverted);
-}
-
-[data-theme="light"] {
-  --__ac-form-description: initial;
-}
-
 .navds-fieldset {
   margin: 0;
   padding: 0;
@@ -14,11 +6,11 @@
 }
 
 .navds-fieldset > :not(:first-child, :empty) {
-  margin-top: var(--a-spacing-2);
+  margin-top: var(--ax-spacing-2);
 }
 
 .navds-fieldset__description {
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
+  color: var(--ax-text-subtle);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {