@navikt/ds-css 7.5.0 → 7.5.2

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

@@ -1,78 +1,84 @@
-/**
-* Makes it easier for user to use FileItem in semantic lists
-*/
-.navds-file-upload :is(ul, li) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+/* Makes it easier for user to use FileItem in semantic lists */
+.navds-file-upload {
+  & :is(ul, li) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
 }
 
-/**
- * FileUpload.Dropzone
- */
-
+/* --------------------------- FileUpload Dropzone -------------------------- */
 .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-subtle);
-  --__ac-dropzone-text-color: var(--a-text-default);
-  --__ac-dropzone-padding: var(--a-spacing-6);
-  --__ac-dropzone-icon-padding: var(--a-spacing-2);
-  --__ac-dropzone-animation-length-long: 0.6s;
-  --__ac-dropzone-animation-length-short: 250ms;
-  --__ac-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
-  --__ac-dropzone-animation-over-under: cubic-bezier(0.3, 1.4, 0.3, 1);
+  --__axc-dropzone-background: var(--ax-bg-input);
+  --__axc-dropzone-padding: var(--ax-spacing-6);
+  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__axc-dropzone-animation-length-long: 400ms;
+  --__axc-dropzone-animation-length-short: 250ms;
+  --__axc-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
+  --__axc-dropzone-animation-over-under: cubic-bezier(0.3, 1, 0.3, 1);
 
   position: relative;
   width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--a-spacing-4);
+  gap: var(--ax-spacing-4);
   text-align: center;
-  padding: var(--__ac-dropzone-padding);
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--__ac-dropzone-background);
-  color: var(--__ac-dropzone-text-color);
-  transition: background-color var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+  padding: var(--__axc-dropzone-padding);
+  border: 1px dashed var(--ax-border-default);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--__axc-dropzone-background);
+  color: var(--ax-text-default);
+  transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
   cursor: pointer;
-}
 
-.navds-dropzone__area:hover {
-  box-shadow: inset 0 2px 4px 1px rgb(11 11 11/ 0.05);
-  outline-color: var(--a-border-default);
-}
+  &:hover:not([data-disabled="true"]) {
+    border-color: var(--ax-border-accent-strong);
 
-.navds-dropzone--disabled > .navds-dropzone__area:hover {
-  outline-color: var(--a-border-subtle);
-  box-shadow: initial;
-  cursor: default;
-}
+    & > .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;
+  }
 
-.navds-dropzone--dragging > .navds-dropzone__area {
-  --__ac-dropzone-background: var(--a-surface-action-subtle-hover);
+  &[data-disabled="true"] {
+    cursor: default;
+  }
 }
 
-.navds-dropzone--dragging > .navds-dropzone__area::after {
-  outline: 1px dashed var(--a-border-subtle);
-  outline-offset: -1px;
-  color: var(--a-text-action-selected);
-  background-color: var(--a-surface-hover);
-  content: "";
-  inset: 0;
-  position: absolute;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-  box-shadow: inset 0 2px 7px 3px rgb(11 11 11/ 0.1);
-  border-radius: var(--a-border-radius-large);
-  animation: akselDropzoneDragoverAnimation var(--__ac-dropzone-animation-length-short) var(--__ac-dropzone-animation-ease-out);
+.navds-dropzone--dragging {
+  & > .navds-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+  }
+
+  & > .navds-dropzone__area::after {
+    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderateA);
+    content: "";
+    inset: 0;
+    margin: -1px;
+    border: 1px dashed var(--ax-border-accent-strong);
+    position: absolute;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border-radius: var(--ax-border-radius-xlarge);
+    animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
+      var(--__axc-dropzone-animation-ease-out);
+  }
 }
 
 @keyframes akselDropzoneDragoverAnimation {
   0% {
     -webkit-backdrop-filter: blur(0);
     backdrop-filter: blur(0);
-    background-color: var(--a-surface-transparent);
+    background-color: transparent;
   }
 
   70% {
@@ -81,54 +87,41 @@
   }
 
   100% {
-    background-color: var(--a-surface-hover);
+    background-color: var(--ax-bg-accent-moderateA);
   }
 }
 
 .navds-dropzone__area-icon {
   display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
+  padding: var(--__axc-dropzone-icon-padding);
   visibility: hidden;
 }
 
-.navds-dropzone--error:where(:not(.navds-dropzone--dragging)) > .navds-dropzone__area {
-  outline-color: var(--a-surface-danger);
-  outline-width: 2px;
-}
-
-.navds-dropzone__area:hover > .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
-  background-color: var(
-    --ac-button-secondary-hover-bg,
-    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
-  );
-}
-
-.navds-dropzone__area:active .navds-dropzone__area-button {
-  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
-  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
-  box-shadow: none;
+.navds-dropzone--error > .navds-dropzone__area {
+  border-color: transparent;
+  outline: 2px solid var(--ax-border-danger);
+  outline-offset: -1px;
 }
 
 .navds-dropzone__area-release {
-  top: var(--__ac-dropzone-padding);
+  top: var(--__axc-dropzone-padding);
   display: grid;
   position: absolute;
   z-index: 1;
   pointer-events: none;
   transition:
-    top var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under),
-    transform var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+    top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under),
+    transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
 }
 
 .navds-dropzone__area-release__icon {
   display: grid;
-  padding: var(--__ac-dropzone-icon-padding);
-  border-radius: var(--a-border-radius-full);
-  background-color: var(--a-surface-neutral-subtle);
+  padding: var(--__axc-dropzone-icon-padding);
+  border-radius: var(--ax-border-radius-full);
+  background-color: var(--ax-bg-neutral-moderateA);
   transition:
-    background-color 300ms var(--__ac-dropzone-animation-ease-out),
-    font-size 300ms var(--__ac-dropzone-animation-ease-out);
+    background-color 300ms var(--__axc-dropzone-animation-ease-out),
+    font-size 300ms var(--__axc-dropzone-animation-ease-out);
   font-size: 1.5rem;
 }
 
@@ -142,52 +135,55 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
-  transition: visibility var(--__ac-dropzone-animation-length-long) var(--__ac-dropzone-animation-over-under);
+  transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
   visibility: visible;
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--a-text-action-selected);
+  color: var(--ax-text-accent-strong);
   top: 50%;
   transform: translateY(-50%);
 }
 
 .navds-dropzone__area-disabled {
-  color: var(--a-text-subtle);
+  color: var(--ax-text-subtle);
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
-/**
- * FileUpload.Item
- */
-
+/* ----------------------------- FileUpload Item ---------------------------- */
 .navds-file-item__inner {
-  outline: 1px solid var(--a-border-subtle);
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-3);
+  border-radius: var(--ax-border-radius-xlarge);
+  padding: var(--ax-spacing-3);
   display: flex;
-  gap: var(--a-spacing-3);
+  gap: var(--ax-spacing-3);
   align-items: flex-start;
 }
 
 .navds-file-item--error > .navds-file-item__inner {
-  outline: 2px solid var(--a-surface-danger);
+  outline: 2px solid var(--ax-border-danger);
 }
 
 .navds-file-item__icon {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-icon-default);
-  border-radius: var(--a-border-radius-full);
-  min-height: 3rem;
-  min-width: 3rem;
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-full);
+  min-height: 2.5rem;
+  min-width: 2.5rem;
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+
+  & > svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
 }
 
 .navds-file-item__icon--loading {
@@ -203,28 +199,28 @@
 }
 
 .navds-file-item__error {
-  color: var(--a-text-danger);
+  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
   transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
   overflow: hidden;
   grid-template-rows: 0fr;
-}
-
-.navds-file-item--error .navds-file-item__error {
-  grid-template-rows: 1fr;
-  padding-top: var(--a-spacing-1);
-}
 
-.navds-file-item__error-content > svg {
-  flex-shrink: 0;
-  height: 1rem;
-  margin-top: 0.1rem;
+  & .navds-file-item__error {
+    grid-template-rows: 1fr;
+    padding-top: var(--ax-spacing-1);
+  }
 }
 
 .navds-file-item__error-content {
   min-height: 0;
   display: flex;
-  gap: var(--a-spacing-1);
+  gap: var(--ax-spacing-1);
+
+  & > svg {
+    flex-shrink: 0;
+    height: 1rem;
+    margin-top: 0.1rem;
+  }
 }

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

@@ -1,52 +1,57 @@
 .navds-form-progress__bar {
-  margin-bottom: var(--a-spacing-2);
+  margin-bottom: var(--ax-spacing-2);
 }
 
-.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
-.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
-  display: none;
-}
-
-.navds-form-progress__button:hover svg {
-  transform: translateY(1px);
-}
+.navds-form-progress__button {
+  &:focus-visible {
+    z-index: 1;
+  }
 
-.navds-form-progress__button[data-state="open"] svg {
-  transform: rotate(-180deg);
+  &[data-state="open"] {
+    & svg {
+      transform: rotate(-180deg);
+    }
+  }
 }
 
-.navds-form-progress__button[data-state="open"]:hover svg {
-  transform: translateY(-1px) rotate(-180deg);
+.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
+.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+  display: none;
 }
 
 .navds-form-progress__collapsible {
   display: grid;
   grid-template-rows: 0fr;
   overflow: hidden;
-  transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
-}
+  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
 
-.navds-form-progress__collapsible[hidden] {
-  display: grid;
-}
+  &[hidden] {
+    display: grid !important;
+  }
 
-.navds-form-progress__collapsible[data-state="open"] {
-  grid-template-rows: 1fr;
+  &[data-state="open"] {
+    grid-template-rows: 1fr;
+  }
 }
 
 .navds-form-progress__collapsible-content {
   min-height: 0;
-  transition: visibility 0.3s;
+  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: 2px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-2) var(--a-spacing-4);
-  margin-top: var(--a-spacing-1);
+  border: 1px solid var(--ax-border-subtle);
+  border-radius: var(--ax-border-radius-large);
+  padding: var(--ax-spacing-4);
+  margin-top: var(--ax-spacing-1);
+  background: var(--ax-bg-raised);
 }

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

@@ -1,54 +1,54 @@
 .navds-form-summary {
   overflow: hidden;
-  border: 1px solid var(--a-border-subtle);
-  border-radius: var(--a-border-radius-large);
-  background: var(--a-surface-default);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
 }
 
 .navds-form-summary__header {
-  background-color: var(--a-surface-subtle);
-  padding: var(--a-spacing-4) var(--a-spacing-6);
+  background: var(--ax-bg-neutral-moderateA);
+  padding: var(--ax-spacing-4) var(--ax-spacing-6);
   display: flex;
   justify-content: space-between;
-  gap: 0 var(--a-spacing-2);
+  gap: 0 var(--ax-spacing-3);
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__header {
-    padding: var(--a-spacing-3) var(--a-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
     flex-direction: column;
   }
 }
 
 .navds-form-summary__edit {
   flex-shrink: 0;
-  margin-top: var(--a-spacing-1);
+  margin-top: var(--ax-spacing-1);
   align-self: flex-start;
 }
 
 .navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--a-border-subtle);
+  border-top: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-form-summary__answers {
-  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
+  padding: var(--ax-spacing-5) var(--ax-spacing-6) var(--ax-spacing-6);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--a-spacing-4);
+    padding: var(--ax-spacing-4);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
-  margin-bottom: var(--a-spacing-4);
-  padding-bottom: var(--a-spacing-4);
-  border-bottom: 1px solid var(--a-border-divider);
+  margin-bottom: var(--ax-spacing-4);
+  padding-bottom: var(--ax-spacing-4);
+  border-bottom: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer) {
-  padding-bottom: var(--a-spacing-6);
+  padding-bottom: var(--ax-spacing-6);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -57,22 +57,26 @@
 
 @media (max-width: 479px) {
   .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--a-spacing-3);
-    padding-bottom: var(--a-spacing-3);
+    margin-bottom: var(--ax-spacing-3);
+    padding-bottom: var(--ax-spacing-3);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--a-spacing-5);
+    padding-bottom: var(--ax-spacing-5);
   }
 }
 
 .navds-form-summary__value:first-of-type {
-  margin-top: var(--a-spacing-1);
+  margin-top: var(--ax-spacing-1);
 }
 
-.navds-form-summary__value :where(.navds-form-summary__answers) {
-  margin-top: var(--a-spacing-2);
-  padding: var(--a-spacing-4);
-  background: var(--a-surface-selected);
-  border-radius: var(--a-border-radius-large);
+.navds-form-summary__value .navds-form-summary__answers {
+  margin-top: var(--ax-spacing-2);
+  padding: var(--ax-spacing-4);
+  background: var(--ax-bg-info-moderateA);
+  border-radius: var(--ax-border-radius-large);
+
+  & .navds-form-summary__answer {
+    border-color: var(--ax-border-info-subtleA);
+  }
 }

package/darkside/form/form.darkside.css

@@ -1,27 +1,19 @@
-[data-theme="dark"] {
-  --__ac-form-description: var(--a-text-on-inverted);
-}
-
-[data-theme="light"] {
-  --__ac-form-description: initial;
-}
-
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
 .navds-form-field__description {
   margin-top: -0.375rem;
-  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
+  color: var(--ax-text-subtle);
 }
 
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message,
 .navds-file-item .navds-error-message {
   display: flex;
-  gap: var(--a-spacing-2);
+  gap: var(--ax-spacing-2);
 }
 
 .navds-form-field .navds-error-message::before,
@@ -40,7 +32,7 @@
 }
 
 .navds-form-field__subdescription {
-  color: var(--ac-form-subdescription, var(--a-text-subtle));
+  color: var(--ax-text-subtle);
 }
 
 .navds-form-field--readonly > :where(.navds-form-field__label) {
@@ -48,8 +40,8 @@
 }
 
 .navds-form-field__readonly-icon {
-  margin-top: var(--a-spacing-05);
-  margin-right: var(--a-spacing-2);
+  margin-top: var(--ax-spacing-05);
+  margin-right: var(--ax-spacing-2);
   flex-shrink: 0;
   align-self: flex-start;
 }