@navikt/ds-css 7.10.0 → 7.12.0

package/darkside/copybutton.darkside.css

@@ -1,108 +1,4 @@
-.navds-copybutton {
-  --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-20) var(--ax-space-12) var(--ax-space-16);
-
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  border-radius: var(--ax-border-radius-medium);
-  padding: var(--__axc-copybutton-padding);
-  display: grid;
-  place-content: center;
-  background-color: transparent;
-  transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-space-12);
-  }
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-12) var(--ax-space-20);
-  }
-
-  &:hover {
-    background-color: var(--ax-bg-moderate-hoverA);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: var(--ax-opacity-disabled);
-  }
-
-  &:disabled:hover {
-    background-color: transparent;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-copybutton {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
-
-    &:disabled {
-      opacity: 1;
-      border-color: GrayText;
-    }
-  }
-}
-
-/* -------------------------- CopyButton small size ------------------------- */
-.navds-copybutton--small {
-  min-height: 2rem;
-  min-width: 2rem;
-
-  --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-12) var(--ax-space-4) var(--ax-space-8);
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-8) var(--ax-space-4) var(--ax-space-12);
-  }
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-space-4);
-  }
-
-  & > .navds-copybutton__content {
-    gap: var(--ax-space-4);
-  }
-}
-
-/* ------------------------- CopyButton xsmall size ------------------------- */
-.navds-copybutton--xsmall {
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-
-  --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-8) var(--ax-space-2) var(--ax-space-4);
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-4) var(--ax-space-2) var(--ax-space-8);
-  }
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-space-2);
-  }
-
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
-  & > .navds-copybutton__content {
-    gap: var(--ax-space-2);
-  }
-}
-
-/* ----------------------------- CopyButton Icon ---------------------------- */
-.navds-copybutton__icon {
-  font-size: 1.5rem;
-  display: flex;
-}
-
-.navds-copybutton--active .navds-copybutton__icon {
+.navds-copybutton[data-active="true"] .navds-copybutton__icon {
   animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }
 
@@ -123,32 +19,3 @@
     transform: translateY(0);
   }
 }
-
-/* ---------------------------- CopyButton Action --------------------------- */
-.navds-copybutton--action {
-  color: var(--ax-text-accent);
-
-  &.navds-copybutton--active {
-    color: var(--ax-text-success);
-  }
-
-  &:disabled {
-    color: var(--ax-text-accent);
-  }
-}
-
-/* --------------------------- CopyButton Neutral --------------------------- */
-.navds-copybutton--neutral {
-  color: var(--ax-text-subtle);
-
-  &:disabled {
-    color: var(--ax-text-subtle);
-  }
-}
-
-.navds-copybutton__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ax-space-6);
-}

package/darkside/date.darkside.css

@@ -3,14 +3,14 @@
 
   .rdp-day_range_middle {
     &.rdp-day_disabled {
-      color: var(--ax-text-default);
-      background: var(--ax-bg-moderateA);
+      color: var(--ax-text-neutral);
+      background: var(--ax-bg-neutral-moderateA);
     }
 
     &.rdp-day_selected {
-      background-color: var(--ax-bg-accent-moderateA);
+      background-color: var(--ax-bg-accent-moderate-pressedA);
       box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
-      color: var(--ax-text-default);
+      color: var(--ax-text-neutral);
     }
   }
 
@@ -35,21 +35,19 @@
     width: 2.5rem;
     height: 2.5rem;
     text-align: center;
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .rdp-day_range_start {
-    border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium)
-      var(--ax-border-radius-xlarge);
+    border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%;
   }
 
   .rdp-day_range_end:not(.rdp-day_range_start) {
-    border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge)
-      var(--ax-border-radius-medium);
+    border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large);
   }
 
   .rdp-day_range_start.rdp-day_range_end {
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-border-radius-large);
   }
 
   .navds-date__field {
@@ -69,8 +67,8 @@
   .rdp-day_disabled {
     cursor: not-allowed;
     text-decoration: line-through;
-    background-color: var(--ax-bg-moderateA);
-    color: var(--ax-text-subtle);
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
@@ -86,7 +84,7 @@
       width: 6px;
       height: 6px;
       display: block;
-      background-color: var(--ax-text-accent);
+      background-color: var(--ax-text-accent-subtle);
       border-radius: var(--ax-border-radius-full);
       content: "";
       position: absolute;
@@ -128,7 +126,7 @@
 .navds-date__caption-button {
   width: 2rem;
   height: 2rem;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -142,7 +140,7 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   cursor: pointer;
 }
 
@@ -159,8 +157,8 @@
   .rdp-cell > button.rdp-day,
   button.navds-date__month-button {
     &:focus-visible {
-      outline: 2px solid var(--ax-border-focus);
-      outline-offset: 1px;
+      outline: 3px solid var(--ax-border-focus);
+      outline-offset: 3px;
     }
 
     &:active:not(:disabled) {
@@ -185,14 +183,14 @@
   right: 0.0625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: inline-flex;
   cursor: pointer;
   margin: 0;
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--ax-border-radius-medium) - 1px);
+  border-radius: calc(var(--ax-border-radius-large) - 1px);
   padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;
@@ -239,11 +237,7 @@
 
 .navds-date__weeknumber-number {
   font-size: 0.875rem;
-  color: var(--ax-text-subtle);
-
-  .navds-date__weeknumber:active & {
-    color: var(--ax-text-contrast);
-  }
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-date__week-wrapper {

package/darkside/expansioncard.darkside.css

@@ -1,23 +1,23 @@
 .navds-expansioncard {
   --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
-  --__axc-expansioncard-padding-block: var(--ax-space-16);
+  --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   height: fit-content;
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
 
   &:has(.navds-expansioncard__header:hover) {
-    box-shadow: 0 0 0 1px var(--ax-border-strong);
-    border-color: var(--ax-border-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
+    border-color: var(--ax-border-neutral-strong);
   }
 }
 
 /* ------------------------ ExpansionCard Small-size ------------------------ */
 .navds-expansioncard--small {
   --__axc-expansioncard-padding-inline: var(--ax-space-16);
-  --__axc-expansioncard-padding-block: var(--ax-space-12);
+  --__axc-expansioncard-padding-block: var(--ax-space-16);
 
   & > .navds-expansioncard__header .navds-expansioncard__title--small {
     margin-top: var(--ax-space-2);
@@ -45,7 +45,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-hover);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &[data-open="true"] {
@@ -55,7 +55,7 @@
     /* Divider between header and content */
     &::after {
       content: "";
-      background-color: var(--ax-border-subtle);
+      background-color: var(--ax-border-neutral-subtleA);
       bottom: 0;
       left: var(--__axc-expansioncard-padding-inline);
       height: 1px;
@@ -98,15 +98,7 @@
   align-self: flex-start;
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
-  }
-
-  @supports not selector(:focus-visible) {
-    &:focus {
-      outline: 2px solid var(--ax-border-focus);
-      outline-offset: 2px;
-    }
+    outline: 3px solid var(--ax-border-focus);
   }
 
   /* Makes the whole header clickable */
@@ -122,7 +114,7 @@
 }
 
 .navds-expansioncard__header:hover > .navds-expansioncard__header-button {
-  background-color: var(--ax-bg-moderate-hoverA);
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
 }
 
 .navds-expansioncard__header-chevron {

package/darkside/form/combobox.darkside.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   width: 100%;
   position: relative;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 }
 
 .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
@@ -32,7 +32,7 @@
 
   & .navds-combobox__wrapper {
     &:hover {
-      border-color: var(--ax-border-default);
+      border-color: var(--ax-border-neutral);
     }
 
     & *:hover {
@@ -54,22 +54,22 @@
 
   & .navds-combobox__selected-options {
     & .navds-chips__chip {
-      background-color: var(--ax-bg-moderateA);
+      background-color: var(--ax-bg-neutral-moderateA);
     }
   }
 
   & .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-moderate);
+    color: var(--ax-bg-neutral-moderate);
   }
 
   & .navds-combobox__wrapper {
-    border-color: var(--ax-border-subtle);
+    border-color: var(--ax-border-neutral-subtle);
     overflow: clip;
   }
 
   & .navds-text-field__input,
   & .navds-combobox__input {
-    background-color: var(--ax-bg-moderate);
+    background-color: var(--ax-bg-neutral-moderate);
   }
 }
 
@@ -80,8 +80,8 @@
 }
 
 .navds-combobox__wrapper-inner {
-  border: 1px solid var(--ax-border-default);
-  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-neutral);
+  border-radius: var(--ax-border-radius-large);
 
   &:has(.navds-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
@@ -91,7 +91,7 @@
 
   &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
     outline: none;
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   &.navds-text-field__input {
@@ -119,7 +119,7 @@
   }
 
   .navds-combobox--disabled &:hover {
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 }
 
@@ -215,8 +215,7 @@
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--ax-border-radius-medium);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -227,10 +226,10 @@
   padding: 0;
 
   &:hover {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
 
     &:active {
-      color: var(--ax-text-accent-strong);
+      color: var(--ax-text-accent);
     }
   }
 }
@@ -245,12 +244,12 @@
   right: 0;
   z-index: 10;
   top: calc(100% + var(--ax-space-8));
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   flex-direction: column;
   border-radius: var(--ax-border-radius-large);
   background-color: var(--ax-bg-raised);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   overscroll-behavior: contain;
   box-shadow: var(--ax-shadow-dialog);
 
@@ -273,7 +272,7 @@
   justify-content: space-between;
   padding-block: var(--__axc-combobox-list-item-padding-block);
   padding-inline: var(--__axc-combobox-list-item-padding-inline);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
   border: 0;
   margin-inline: var(--ax-space-8);
   margin-block: var(--ax-space-2);
@@ -290,10 +289,10 @@
 }
 
 .navds-combobox__list-item--max-selected {
-  background-color: var(--ax-bg-moderateA);
+  background-color: var(--ax-bg-neutral-moderateA);
   margin: 0;
   border-radius: 0;
-  border-bottom: 1px solid var(--ax-border-subtle);
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
   padding-block: var(--ax-space-8);
   line-height: var(--ax-font-line-height-large);
 }
@@ -328,11 +327,11 @@
   & mark {
     background-color: transparent;
     font-weight: var(--ax-font-weight-bold);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   & svg {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 }
 
@@ -355,7 +354,7 @@
   margin-block-start: calc(var(--ax-space-4) * -1);
 
   & svg {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   &:only-child {

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

@@ -3,17 +3,17 @@
   padding: var(--ax-space-16) var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
-  outline-offset: 2px;
+  outline-offset: 3px;
 
   &:focus-visible,
   &:has(.navds-error-summary__heading:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 
 @supports not selector(:focus-visible) {
   .navds-error-summary:focus {
-    outline: 2px solid var(--ax-border-focus);
+    outline: 3px solid var(--ax-border-focus);
   }
 }
 

package/darkside/form/fieldset.darkside.css

@@ -10,7 +10,7 @@
 }
 
 .navds-fieldset__description {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {

package/darkside/form/file-upload.darkside.css

@@ -15,10 +15,10 @@
   gap: var(--ax-space-16);
   text-align: center;
   padding: var(--ax-space-16) var(--ax-space-20);
-  border: 1px dashed var(--ax-border-default);
+  border: 1px dashed var(--ax-border-neutral);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
 
@@ -26,19 +26,23 @@
     border-color: var(--ax-border-accent-strong);
 
     & > .navds-dropzone__area-button {
-      color: var(--ax-text-accent-strong);
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
-  &:active .navds-dropzone__area-button {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-    box-shadow: none;
+  &:active:not([data-disabled="true"]) {
+    & > .navds-dropzone__area-button {
+      background-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-accent-contrast);
+      box-shadow: none;
+    }
   }
 
   &[data-disabled="true"] {
+    --__axc-dropzone-background: var(--ax-bg-neutral-soft);
+
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
@@ -49,7 +53,7 @@
   }
 
   & > .navds-dropzone__area::after {
-    color: var(--ax-text-accent-strong);
+    color: var(--ax-text-accent);
     background-color: var(--ax-bg-accent-moderateA);
     content: "";
     inset: 0;
@@ -108,7 +112,7 @@
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
   border-radius: var(--ax-border-radius-full);
-  background-color: var(--ax-bg-moderateA);
+  background-color: var(--ax-bg-neutral-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
     font-size 300ms var(--__axc-dropzone-animation-ease-out);
@@ -130,13 +134,13 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent-subtle);
   top: 50%;
   transform: translateY(-50%);
 }
 
 .navds-dropzone__area-disabled {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -154,7 +158,7 @@ li.navds-file-item {
 
 .navds-file-item__inner {
   background-color: var(--ax-bg-raised);
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
@@ -169,8 +173,8 @@ li.navds-file-item {
 }
 
 .navds-file-item__icon {
-  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-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
@@ -198,7 +202,6 @@ li.navds-file-item {
 }
 
 .navds-file-item__error {
-  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -206,20 +209,8 @@ li.navds-file-item {
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  & .navds-file-item__error {
+  .navds-file-item--error & {
     grid-template-rows: 1fr;
     padding-top: var(--ax-space-4);
   }
 }
-
-.navds-file-item__error-content {
-  min-height: 0;
-  display: flex;
-  gap: var(--ax-space-4);
-
-  & > svg {
-    flex-shrink: 0;
-    height: 1rem;
-    margin-top: 0.1rem;
-  }
-}

package/darkside/form/form-progress.darkside.css

@@ -21,37 +21,35 @@
 
 .navds-form-progress__collapsible {
   display: grid;
-  grid-template-rows: 0fr;
+  visibility: hidden;
   overflow: hidden;
-  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
+  padding-inline: var(--ax-space-20);
+  padding-block: 0;
+  opacity: 0.001;
+  transition-duration: 1s;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: margin-top, opacity, visibility, padding-block-start, grid-template-rows;
+  grid-template-rows: 0fr;
+
+  /* border-block leaves 2px of space when closes, so offset 2px with margin */
+  margin-top: -2px;
 
   &[hidden] {
-    display: grid !important;
+    display: grid;
   }
 
   &[data-state="open"] {
+    margin-top: var(--ax-space-4);
     grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--ax-space-16);
+    opacity: 1;
   }
 }
 
 .navds-form-progress__collapsible-content {
   min-height: 0;
-  opacity: 0.01;
-  visibility: hidden;
-  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
-  transition-duration: 250ms;
-  transition-property: opacity, visibility;
-}
-
-.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
-  visibility: visible;
-  opacity: 1;
-}
-
-.navds-form-progress__stepper {
-  border: 1px solid var(--ax-border-subtle);
-  border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-space-16) var(--ax-space-20);
-  margin-top: var(--ax-space-4);
-  background: var(--ax-bg-raised);
 }