@navikt/ds-css 7.5.2 → 7.6.0

package/darkside/form/combobox.darkside.css

@@ -1,121 +1,157 @@
 .navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.5rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
-  --__ac-combobox-border-width: 1px;
-  --__ac-combobox-input-height: 2rem;
+  --__axc-combobox-icon-size: 1.5rem;
+  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
+  --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
+  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+  --__axc-combobox-border-width: 1px;
+  --__axc-combobox-input-height: 2rem;
 
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
+  border-radius: var(--ax-border-radius-medium);
+}
+
+.navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
+  & .navds-combobox__wrapper:hover {
+    border-color: var(--ax-border-focus);
+  }
 }
 
 .navds-form-field--small .navds-combobox__wrapper {
-  --__ac-combobox-icon-size: 1.25rem;
-  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
-  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
-  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
-  --__ac-combobox-input-height: 1.5rem;
+  --__axc-combobox-icon-size: 1.25rem;
+  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
+  --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
+  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+  --__axc-combobox-input-height: 1.5rem;
 }
 
 .navds-combobox--disabled {
   opacity: 0.3;
-}
 
-.navds-combobox--disabled .navds-combobox__wrapper *:hover {
-  cursor: not-allowed;
-}
+  & .navds-combobox__wrapper {
+    & *:hover {
+      cursor: not-allowed;
+    }
+  }
 
-.navds-combobox--disabled .navds-text-field__input {
-  border: 1px solid var(--a-border-default);
-}
+  & .navds-combobox__selected-options {
+    pointer-events: none;
+  }
 
-.navds-combobox--disabled .navds-combobox__selected-options {
-  pointer-events: none;
+  & .navds-combobox--readonly {
+    pointer-events: none;
+  }
 }
 
 .navds-combobox--readonly {
   pointer-events: none;
-}
 
-.navds-combobox--readonly .navds-combobox__button-toggle-list {
-  color: var(--a-gray-500);
-}
+  & .navds-combobox__selected-options {
+    & .navds-chips__chip {
+      background-color: var(--ax-bg-neutral-moderateA);
+    }
+  }
+
+  & .navds-combobox__button-toggle-list {
+    color: var(--ax-bg-neutral-moderate);
+  }
+
+  & .navds-combobox__wrapper {
+    border-color: var(--ax-border-subtle);
+    overflow: clip;
+  }
 
-.navds-combobox--readonly .navds-text-field__input,
-.navds-combobox--readonly .navds-combobox__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
+  & .navds-text-field__input,
+  & .navds-combobox__input {
+    background-color: var(--ax-bg-neutral-moderate);
+  }
 }
 
 .navds-combobox__button-clear svg,
 .navds-combobox__button-toggle-list svg,
 .navds-combobox__list svg {
-  width: var(--__ac-combobox-icon-size);
-  height: var(--__ac-combobox-icon-size);
+  width: var(--__axc-combobox-icon-size);
+  height: var(--__axc-combobox-icon-size);
 }
 
-.navds-combobox__wrapper-inner.navds-text-field__input {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
-  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
-}
+.navds-combobox__wrapper-inner {
+  border: 1px solid var(--ax-border-default);
+  border-radius: var(--ax-border-radius-medium);
 
-.navds-combobox__wrapper-inner > :first-child {
-  flex: 2;
-}
+  &:has(.navds-combobox__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    border-color: var(--ax-border-focus);
+  }
 
-.navds-combobox__wrapper-inner > :last-child {
-  display: flex;
-  flex-flow: row nowrap;
-}
+  &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+    outline: none;
+    border-color: var(--ax-border-default);
+  }
 
-.navds-combobox__wrapper-inner:hover {
-  cursor: text;
-}
+  &.navds-text-field__input {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding-block: calc(var(--__axc-combobox-wrapper-inner-padding) - var(--__axc-combobox-border-width));
+    padding-inline: var(--__axc-combobox-wrapper-inner-padding);
+  }
 
-.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
-  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
-  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+  & > :first-child {
+    flex: 2;
+  }
+
+  & > :last-child {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &:hover {
+    cursor: text;
+  }
 }
 
-.navds-combobox--error
-  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
-    var(--a-shadow-focus);
+.navds-combobox--error {
+  & .navds-combobox__wrapper-inner {
+    border-color: var(--ax-border-danger);
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+
+    &:has(.navds-combobox__input:focus-visible) {
+      border-color: var(--ax-border-danger);
+    }
+  }
 }
 
 .navds-combobox__selected-options {
-  gap: var(--__ac-combobox-wrapper-inner-padding);
+  gap: 0;
   align-items: center;
-}
 
-.navds-combobox__selected-options > li {
-  margin: auto 0;
-  border-radius: var(--a-border-radius-full);
-}
+  & > li {
+    margin: auto 0;
+    border-radius: var(--ax-border-radius-full);
+  }
 
-.navds-combobox__selected-options > li:last-of-type {
-  display: flex;
-  flex: 1;
+  & > li:last-of-type {
+    display: flex;
+    flex: 1;
+  }
+
+  &[data-type="multiple"] {
+    gap: var(--__axc-combobox-wrapper-inner-padding);
+  }
 }
 
 .navds-combobox__selected-options--no-bg {
   font-family: inherit;
-  font-size: var(--a-font-size-large);
-  font-weight: var(--a-font-weight-regular);
+  font-size: var(--ax-font-size-large);
+  font-weight: var(--ax-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--a-font-line-height-large);
+  line-height: var(--ax-font-line-height-large);
   margin: 0;
   padding-left: 0.25rem;
 }
@@ -129,68 +165,47 @@
   border: none;
   padding: 0;
   margin: 0;
-  margin-left: var(--a-spacing-1);
   min-width: 10ch;
   width: 100%;
-  height: var(--__ac-combobox-input-height);
-}
+  height: var(--__axc-combobox-input-height);
+  background: var(--ax-bg-input);
 
-.navds-combobox__input--hide-caret {
-  caret-color: transparent;
-}
-
-.navds-combobox__input:focus-visible {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
-  box-shadow: var(--a-shadow-focus);
-  outline: 3px solid transparent;
-  outline-offset: 2px;
-}
-
-.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
-  box-shadow: none;
-  outline: none;
-}
-
-@supports not selector(:focus-visible) {
-  .navds-combobox__input:focus {
-    outline: none;
+  &:focus-visible {
+    outline: 0;
     border: none;
-    box-shadow: none;
   }
 
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
+  .navds-combobox__selected-options > li:only-child > & {
+    margin-left: var(--ax-spacing-1);
   }
+}
 
-  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
-  }
+.navds-combobox__input--hide-caret {
+  caret-color: transparent;
 }
 
-@supports not selector(:has) {
-  .navds-combobox--focused .navds-combobox__wrapper-inner {
-    box-shadow: var(--a-shadow-focus);
-    outline: 3px solid transparent;
-    outline-offset: 2px;
+@supports not selector(:focus-visible) {
+  .navds-combobox__input {
+    &:focus {
+      outline: none;
+      border: none;
+    }
   }
 
-  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
-    box-shadow: none;
-    outline: none;
+  .navds-combobox__wrapper-inner {
+    &:has(.navds-combobox__input:focus) {
+      outline: none;
+    }
+
+    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+      outline: none;
+    }
   }
 }
 
 .navds-combobox__button-clear {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-subtle);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -206,8 +221,8 @@
 }
 
 .navds-combobox__button-toggle-list {
-  border-radius: var(--a-border-radius-medium);
-  color: var(--a-text-default);
+  border-radius: var(--ax-border-radius-medium);
+  color: var(--ax-text-default);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -218,31 +233,14 @@
   padding: 0;
 }
 
-.navds-combobox__button-clear:active:hover,
-.navds-combobox__button-toggle-list:active:hover {
-  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
-}
-
-.navds-combobox__button-clear:hover,
-.navds-combobox__button-toggle-list:hover {
-  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
-}
-
-.navds-combobox__button-toggle-list:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--a-surface-default) inset,
-    var(--a-shadow-focus);
-  box-shadow: var(--a-shadow-focus);
-  outline: none;
-}
+.navds-combobox__button-clear,
+.navds-combobox__button-toggle-list {
+  &:hover {
+    color: var(--ax-text-accent);
 
-@supports not selector(:focus-visible) {
-  .navds-combobox__button-toggle-list:focus {
-    box-shadow:
-      0 0 0 1px var(--a-surface-default) inset,
-      var(--a-shadow-focus);
-    box-shadow: var(--a-shadow-focus);
-    outline: none;
+    &:active {
+      color: var(--ax-text-accent-strong);
+    }
   }
 }
 
@@ -250,34 +248,30 @@
 
 .navds-combobox__list {
   max-height: 290px;
-  overflow-y: auto;
+  overflow: clip;
   position: absolute;
   left: 0;
   right: 0;
-  z-index: var(--a-z-index-popover);
-  top: calc(100% + var(--a-spacing-2));
-  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
+  z-index: 10;
+  top: calc(100% + var(--ax-spacing-2));
+  border: 1px solid var(--ax-border-subtleA);
   display: flex;
   flex-direction: column;
-  box-shadow: var(--a-shadow-small);
-  border-radius: var(--a-border-radius-medium);
-  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
-  color: var(--ac-combobox-list-text, var(--a-text-default));
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-default);
   overscroll-behavior: contain;
+  box-shadow: var(--ax-shadow-dialog);
+
+  & .navds-combobox__list-options {
+    overflow-y: auto;
+  }
 }
 
 .navds-combobox__list--closed {
   display: none;
 }
 
-.navds-combobox__list_non-selectables {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
 .navds-combobox__list-item,
 .navds-combobox__list-item--loading,
 .navds-combobox__list-item--no-options,
@@ -285,28 +279,32 @@
 .navds-combobox__list-item--max-selected {
   align-items: center;
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  padding-block: var(--__ac-combobox-list-item-padding-block);
-  padding-inline: var(--__ac-combobox-list-item-padding-inline);
-  width: 100%;
-  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+  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: 0;
+  margin-inline: var(--ax-spacing-2);
+  margin-block: var(--ax-spacing-1);
+  scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
+}
+
+.navds-combobox__list-item--no-options {
+  margin: 0;
 }
 
 .navds-combobox__list-item--loading {
   justify-content: center;
-  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+  margin: 0;
 }
 
 .navds-combobox__list-item--max-selected {
-  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
-  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
-  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
-  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
-}
-
-.navds-combobox__list_non-selectables:hover {
-  cursor: default;
+  background-color: var(--ax-bg-neutral-moderateA);
+  margin: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--ax-border-neutral-subtle);
+  padding-block: var(--ax-spacing-2);
+  line-height: var(--ax-font-line-height-large);
 }
 
 /* ul-list and selectable li-items */
@@ -314,70 +312,82 @@
 .navds-combobox__list-options {
   list-style: none;
   margin: 0;
-  padding: 0;
-  width: 100%;
   display: inherit;
   flex-direction: inherit;
   gap: inherit;
   background-color: inherit;
-  align-items: flex-start;
+  align-items: stretch;
+  padding: 0;
+  padding-block: var(--ax-spacing-1);
 }
 
-.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover
-  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
-  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
+.navds-combobox__list-item--focus {
   cursor: pointer;
-  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
-  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: 2px;
 }
 
-.navds-combobox__list-item[data-no-focus="true"] {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
+.navds-combobox__list-item {
+  user-select: none;
 
-.navds-combobox__list-item--selected {
-  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
-}
+  &[data-no-focus="true"] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  & mark {
+    background-color: transparent;
+    font-weight: var(--ax-font-weight-bold);
+  }
 
-.navds-combobox__list-item--selected p {
-  font-weight: var(--a-font-weight-bold);
+  & svg {
+    color: var(--ax-text-accent);
+  }
 }
 
-.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
-  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
-  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
+.navds-combobox__list-item--selected {
+  background-color: var(--ax-bg-accent-moderate-pressedA);
+
+  & p {
+    font-weight: var(--ax-font-weight-bold);
+  }
 }
 
 .navds-combobox__list-item--new-option {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle);
+  border-bottom: 1px solid var(--ax-border-accent-subtleA);
+  border-radius: 0;
+  background: var(--ax-bg-accent-moderateA);
   cursor: pointer;
   justify-content: flex-start;
   gap: 0.25rem;
-}
+  margin: 0;
+  margin-block: calc(var(--ax-spacing-1) * -1);
+  padding-block: var(--ax-spacing-4);
+
+  & svg {
+    color: var(--ax-text-default);
+  }
 
-.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
-  border-bottom: 1px solid var(--a-border-divider);
-  background: var(--a-surface-neutral-subtle-hover);
+  &:only-child {
+    border: none;
+  }
 }
 
 .navds-combobox__list-item--new-option--focus {
-  box-shadow:
-    var(--a-shadow-focus) inset,
-    var(--a-border-action) 0 0 0 5px inset;
-  border-radius: calc(var(--a-border-radius-medium) - 1px);
-}
+  border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;
+
+  /* TODO: new option should get a wrapper div later to
+* style it properly with a nice rounded border radius
+* */
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: -2px;
 
-.navds-combobox__list-item mark {
-  background-color: transparent;
-  font-weight: bold;
+  &:only-child {
+    border-radius: calc(var(--ax-border-radius-large) - 1px);
+  }
 }
 
 /* Mobile */
-
 @media (max-width: 479px) {
   .navds-combobox__button-toggle-list {
     right: 0.5rem;
@@ -390,7 +400,7 @@
   }
 
   .navds-combobox__selected-options {
-    gap: var(--a-spacing-1);
+    gap: var(--ax-spacing-1);
   }
 }
 
@@ -416,12 +426,16 @@
   }
 
   .navds-combobox__list-item--selected {
-    background-color: selecteditem;
+    background-color: highlight;
     color: selecteditemtext;
-  }
 
-  .navds-combobox__list-item--selected > * {
-    forced-color-adjust: none;
+    & * {
+      color: black;
+    }
+
+    & > * {
+      forced-color-adjust: none;
+    }
   }
 
   .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
@@ -436,6 +450,30 @@
 
   .navds-combobox__list-item--new-option--focus {
     outline: 2px solid highlight;
-    outline-offset: -3px;
+    outline-offset: 0;
+  }
+
+  .navds-combobox--disabled {
+    opacity: 1;
+
+    & * {
+      border-color: graytext;
+      color: graytext;
+      opacity: 1;
+    }
+  }
+
+  .navds-combobox__list-item--new-option {
+    svg {
+      color: canvastext;
+    }
+
+    &:hover {
+      color: highlight;
+
+      svg {
+        color: highlight;
+      }
+    }
   }
 }

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

@@ -1,12 +1,3 @@
-/* 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 -------------------------- */
 .navds-dropzone__area {
   --__axc-dropzone-background: var(--ax-bg-input);
@@ -154,6 +145,14 @@
 }
 
 /* ----------------------------- FileUpload Item ---------------------------- */
+.navds-file-upload :is(ul, li),
+ul:has(> li.navds-file-item),
+li.navds-file-item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .navds-file-item__inner {
   background-color: var(--ax-bg-raised);
   border: 1px solid var(--ax-border-subtleA);
@@ -176,6 +175,7 @@
   border-radius: var(--ax-border-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
+  margin-top: var(--ax-spacing-05);
   display: grid;
   place-content: center;
   transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);

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

@@ -75,6 +75,7 @@
   padding: var(--ax-spacing-4);
   background: var(--ax-bg-info-moderateA);
   border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info-subtleA);
 
   & .navds-form-summary__answer {
     border-color: var(--ax-border-info-subtleA);