@navikt/ds-css 7.5.3 → 7.7.0

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

@@ -1,16 +1,6 @@
-/* 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);
-  --__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;
@@ -24,7 +14,7 @@
   flex-direction: column;
   gap: var(--ax-spacing-4);
   text-align: center;
-  padding: var(--__axc-dropzone-padding);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   border: 1px dashed var(--ax-border-default);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--__axc-dropzone-background);
@@ -104,7 +94,7 @@
 }
 
 .navds-dropzone__area-release {
-  top: var(--__axc-dropzone-padding);
+  top: var(--ax-spacing-4);
   display: grid;
   position: absolute;
   z-index: 1;
@@ -154,13 +144,21 @@
 }
 
 /* ----------------------------- 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);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
   border-radius: var(--ax-border-radius-xlarge);
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
   display: flex;
   gap: var(--ax-spacing-3);
   align-items: flex-start;
@@ -176,6 +174,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-progress.darkside.css

@@ -51,7 +51,7 @@
 .navds-form-progress__stepper {
   border: 1px solid var(--ax-border-subtle);
   border-radius: var(--ax-border-radius-large);
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   margin-top: var(--ax-spacing-1);
   background: var(--ax-bg-raised);
 }

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

@@ -31,7 +31,7 @@
 }
 
 .navds-form-summary__answers {
-  padding: var(--ax-spacing-5) var(--ax-spacing-6) var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   margin: 0;
 }
 
@@ -72,9 +72,10 @@
 
 .navds-form-summary__value .navds-form-summary__answers {
   margin-top: var(--ax-spacing-2);
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   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);

package/darkside/form/index.css

@@ -1,16 +1,14 @@
-@layer aksel.forms.base, aksel.forms.component;
-
-@import "./fieldset.darkside.css" layer(aksel.forms.base);
-@import "./file-upload.darkside.css" layer(aksel.forms.component);
-@import "./form.darkside.css" layer(aksel.forms.component);
-@import "./error-summary.darkside.css" layer(aksel.forms.component);
-@import "./confirmation-panel.darkside.css" layer(aksel.forms.component);
-@import "./radio-checkbox.darkside.css" layer(aksel.forms.component);
-@import "./select.darkside.css" layer(aksel.forms.component);
-@import "./switch.darkside.css" layer(aksel.forms.component);
-@import "./text-field.darkside.css" layer(aksel.forms.component);
-@import "./textarea.darkside.css" layer(aksel.forms.component);
-@import "./search.darkside.css" layer(aksel.forms.component);
-@import "./combobox.darkside.css" layer(aksel.forms.component);
-@import "./form-summary.darkside.css" layer(aksel.forms.component);
-@import "./form-progress.darkside.css" layer(aksel.forms.component);
+@import "./fieldset.darkside.css";
+@import "./file-upload.darkside.css";
+@import "./form.darkside.css";
+@import "./error-summary.darkside.css";
+@import "./confirmation-panel.darkside.css";
+@import "./radio-checkbox.darkside.css";
+@import "./select.darkside.css";
+@import "./switch.darkside.css";
+@import "./text-field.darkside.css";
+@import "./textarea.darkside.css";
+@import "./search.darkside.css";
+@import "./combobox.darkside.css";
+@import "./form-summary.darkside.css";
+@import "./form-progress.darkside.css";

package/darkside/form/search.darkside.css

@@ -1,19 +1,3 @@
-[data-theme="dark"] {
-  --__ac-search-button-border: var(--a-border-on-inverted);
-  --__ac-search-button-border-hover: var(--a-blue-200);
-  --__ac-search-clear-icon: var(--a-white);
-  --__ac-search-clear-icon-hover: var(--a-blue-200);
-  --__ac-search-error-border: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-search-button-border: initial;
-  --__ac-search-button-border-hover: initial;
-  --__ac-search-clear-icon: initial;
-  --__ac-search-clear-icon-hover: initial;
-  --__ac-search-error-border: initial;
-}
-
 .navds-search {
   display: flex;
   flex-direction: column;
@@ -25,204 +9,142 @@
   width: 100%;
 }
 
-.navds-search--with-size :where(.navds-search__wrapper-inner) {
-  width: inherit;
+.navds-search--with-size {
+  & .navds-search__wrapper-inner {
+    width: inherit;
+  }
+
+  & .navds-search__wrapper {
+    width: fit-content;
+  }
 }
 
 .navds-search__wrapper {
   display: inline-flex;
   align-items: center;
+  border-radius: var(--ax-border-radius-medium);
+
+  /* We have to outline the whole container to include the Search-buttons */
+  &:has(.navds-search__input:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 }
 
+/* ------------------------------ Search input ------------------------------ */
 .navds-search__input {
-  padding-right: var(--a-spacing-10);
-}
+  padding-right: var(--ax-spacing-10);
+
+  &:focus-visible {
+    outline: none;
+  }
 
-.navds-form-field--small .navds-search__input {
-  padding-right: var(--a-spacing-8);
+  &.navds-search__input--primary,
+  &.navds-search__input--secondary {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
 }
 
 .navds-search__input--simple {
-  padding-left: var(--a-spacing-11);
+  padding-left: var(--ax-spacing-10);
 }
 
-.navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--a-spacing-7);
-}
+/* ------------------------------ Search sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-search__input {
+    padding-right: var(--ax-spacing-7);
+  }
+
+  & .navds-search__input--simple {
+    padding-left: var(--ax-spacing-7);
+  }
+
+  & .navds-search__search-icon {
+    left: var(--ax-spacing-1);
+    font-size: 1.25rem;
+  }
 
-.navds-search__input:not(.navds-search__input--simple) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  & .navds-search__button-clear {
+    right: var(--ax-spacing-1);
+  }
 }
 
+/* ------------------------------- Search icon ------------------------------ */
 .navds-search__search-icon {
   position: absolute;
-  left: var(--a-spacing-3);
+  left: var(--ax-spacing-2);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   font-size: 1.5rem;
-}
 
-.navds-form-field--small .navds-search__search-icon {
-  left: var(--a-spacing-2);
-  font-size: 1rem;
+  .navds-search--disabled & {
+    opacity: 0.3;
+  }
 }
 
+/* --------------------------- Search Clear-button -------------------------- */
 .navds-search__button-clear {
   position: absolute;
-  right: 0.75rem;
-  border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
-  height: 32px;
-  width: 32px;
+  right: var(--ax-spacing-2);
   top: 50%;
   transform: translateY(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  padding: 0;
-}
-
-.navds-form-field--small .navds-search__button-clear {
-  right: 0.5rem;
-  height: 24px;
-  width: 24px;
-}
-
-.navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
-}
-
-.navds-search__button-clear:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-clear:focus {
-    outline: 2px solid transparent;
-    box-shadow: var(--a-shadow-focus);
-  }
 }
 
+/* ------------------------------ Search Button ----------------------------- */
 .navds-search__button-search {
   flex-shrink: 0;
-  min-width: 4rem;
-  min-height: 2rem;
   border-radius: 0;
-  border-top-right-radius: var(--a-border-radius-medium);
-  border-bottom-right-radius: var(--a-border-radius-medium);
-}
-
-.navds-form-field--small .navds-search__button-search svg {
-  font-size: 1rem;
-}
-
-.navds-form-field--small .navds-search__button-search {
-  min-width: 2.5rem;
+  border-top-right-radius: var(--ax-border-radius-medium);
+  border-bottom-right-radius: var(--ax-border-radius-medium);
 }
 
 .navds-search__button-search.navds-button--secondary {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
-}
-
-.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
-  box-shadow:
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
-  z-index: 1;
-}
-
-.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
-  z-index: auto;
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-    var(--a-shadow-focus);
-}
+  --__axc-button-border-width: 1px;
+  --__axc-button-border-color: var(--ax-border-default);
 
-.navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
-    var(--a-shadow-focus);
-}
-
-.navds-search__button-search.navds-button--secondary:focus-visible:active {
-  box-shadow:
-    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
-      var(--a-shadow-focus);
-  }
-
-  .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
-      var(--a-shadow-focus);
+  &:hover:not(:disabled) {
+    --__axc-button-border-color: var(--ax-border-accent-strong);
   }
 
-  .navds-search__button-search.navds-button--secondary:focus:active {
-    box-shadow:
-      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
-      var(--a-shadow-focus);
+  &:active:not(:disabled) {
+    --__axc-button-border-color: transparent;
   }
 }
 
-/* Error-handling */
-.navds-search--error .navds-search__input:not(:hover, :disabled) {
-  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+/* Special-case where we hover/focus input, and want the secondary-button to match input-border */
+.navds-search:not(.navds-search--error, .navds-search--disabled)
+  .navds-search__wrapper:has(.navds-search__input:is(:hover, :focus-visible))
+  .navds-search__button-search.navds-button--secondary:not(:hover, :active) {
+  --__axc-button-border-color: var(--ax-border-accent-strong);
 }
 
-.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
+/* --------------------------- Search Error-state --------------------------- */
+.navds-search--error .navds-search__input:not(:disabled) {
+  border-color: var(--ax-border-danger);
   box-shadow:
-    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-    var(--a-shadow-focus);
+    inset -2px 0 0 0 var(--ax-border-danger),
+    inset 0 0 0 1px var(--ax-border-danger);
+
+  &.navds-search__input--simple {
+    box-shadow: inset 0 0 0 1px var(--ax-border-danger);
+  }
 }
 
-/* Focus layering */
+/* -------------------------- Search Focus layering ------------------------- */
 .navds-search__input:focus-visible,
-.navds-search__button-clear,
 .navds-search__button-search:focus-visible {
   z-index: 1;
 }
 
-@supports not selector(:focus-visible) {
-  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
-      var(--a-shadow-focus);
-  }
-
-  .navds-search__input:focus,
-  .navds-search__button-search:focus {
-    z-index: 1;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-modal {
-    outline: 2px solid transparent;
-  }
+/* -------------------------- Search disabled state ------------------------- */
 
-  .navds-search__button-clear:hover {
-    color: highlight;
+/* We can't re-use disabled-state for form-fields since opacity multiplies on search-button */
+.navds-search--disabled {
+  .navds-search__input {
+    opacity: 0.3;
+    cursor: not-allowed;
   }
 }

package/darkside/form/select.darkside.css

@@ -1,48 +1,34 @@
 .navds-select__input {
   appearance: none;
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
-  color: var(--ac-select-text, var(--a-text-default));
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
+  color: var(--ax-text-default);
   width: 100%;
   box-sizing: border-box;
   min-height: 3rem;
   display: inline-block;
   position: relative;
-  padding: 0.5rem;
-  padding-right: 2rem;
-}
+  padding: var(--ax-spacing-2);
+  padding-right: var(--ax-spacing-10);
 
-@media (forced-colors: active) {
-  .navds-select__input.navds-select__input.navds-select__input {
-    background-color: ButtonFace;
-    border-color: ButtonText;
-    color: ButtonText;
-    forced-color-adjust: none;
-    box-shadow: none;
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+    cursor: pointer;
   }
 
-  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
-    outline: 2px solid highlight;
+  &:focus {
+    outline: 2px solid var(--ax-border-focus);
     outline-offset: 2px;
+    border-color: var(--ax-border-accent-strong);
   }
-}
 
-.navds-select__input:hover {
-  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
-  cursor: pointer;
-}
-
-.navds-select__input:focus-visible {
-  outline: none;
-  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-select__input:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+  @media (forced-colors: active) {
+    & {
+      background-color: ButtonFace;
+      border-color: ButtonText;
+      color: ButtonText;
+    }
   }
 }
 
@@ -50,66 +36,86 @@
   position: relative;
   display: flex;
   width: 100%;
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
 }
 
+/* ------------------------------- Select Icon ------------------------------ */
 .navds-select__chevron {
   position: absolute;
   font-size: 1.5rem;
-  right: var(--a-spacing-2);
+  right: var(--ax-spacing-2);
   pointer-events: none;
   align-self: center;
-  color: var(--ac-select-text, var(--a-text-default));
-}
+  color: var(--ax-text-default);
 
-@media (forced-colors: active) {
-  .navds-select__chevron {
-    color: ButtonText;
+  @media (forced-colors: active) {
+    & {
+      color: ButtonText;
+    }
   }
 }
 
-.navds-form-field--small .navds-select__input {
-  min-height: 2rem;
-  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
+/* ------------------------------ Select Sizing ----------------------------- */
+.navds-form-field--small {
+  & .navds-select__input {
+    min-height: 2rem;
+    padding-block: 0;
+  }
 }
 
-.navds-form-field--small .navds-select__chevron {
-  right: var(--a-spacing-1-alt);
-}
+/* --------------------------- Select Error-state --------------------------- */
+.navds-select--error {
+  > * select {
+    box-shadow: 0 0 0 1px var(--ax-border-danger);
+    border-color: var(--ax-border-danger);
+  }
 
-/**
-  Error handling
-*/
-.navds-select--error > * select:not(:hover, :focus, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
-  border-color: var(--ac-select-error-border, var(--a-surface-danger));
+  > * select:hover,
+  > * select:focus {
+    box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
+    border-color: var(--ax-border-danger-strong);
+  }
 }
 
-/**
-  Disabled
-*/
+/* ----------------------------- Select disabled ---------------------------- */
 .navds-select__input:disabled {
-  background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  background-color: var(--ax-bg-input);
+  border: 1px solid var(--ax-border-default);
   box-shadow: none;
   cursor: not-allowed;
 
   /* Chrome-fix */
   opacity: 1;
-  color: var(--a-text-default);
-}
+  color: var(--ax-text-default);
 
-/* Chrome-fix */
-.navds-select__input:disabled > option {
-  color: var(--a-text-default);
-}
+  & > option {
+    color: var(--ax-text-default);
+  }
 
-.navds-select--readonly .navds-select__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
+  @media (forced-colors: active) {
+    & + .navds-select__chevron {
+      color: GrayText;
+    }
+  }
 }
 
-.navds-select--readonly .navds-select__chevron {
-  color: var(--a-gray-500);
+/* ----------------------------- Select Readonly ---------------------------- */
+.navds-select--readonly {
+  & .navds-select__input {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+
+    @media (forced-colors: active) {
+      &:is(:hover, :focus) {
+        background-color: ButtonFace;
+        border-color: ButtonText;
+        color: ButtonText;
+      }
+    }
+  }
+
+  & .navds-select__chevron {
+    color: var(--ax-text-subtle);
+  }
 }