@navikt/ds-css 7.6.0 → 7.8.0

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

@@ -1,6 +1,6 @@
 .navds-error-summary {
   background-color: var(--ax-bg-default);
-  padding: var(--ax-spacing-5);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   border: 4px solid var(--ax-border-danger);
   border-radius: var(--ax-border-radius-xlarge);
   outline-offset: 2px;
@@ -18,7 +18,7 @@
 }
 
 .navds-error-summary--small {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
 
   & .navds-error-summary__heading {
     scroll-margin-top: var(--ax-spacing-4);

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

@@ -1,7 +1,6 @@
 /* --------------------------- 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;
@@ -15,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);
@@ -95,7 +94,7 @@
 }
 
 .navds-dropzone__area-release {
-  top: var(--__axc-dropzone-padding);
+  top: var(--ax-spacing-4);
   display: grid;
   position: absolute;
   z-index: 1;
@@ -159,7 +158,7 @@ li.navds-file-item {
   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;

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,7 +72,7 @@
 
 .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);

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,146 @@
   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:not(.navds-search__input--simple) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  & .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__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;
-}
+  --__axc-button-border-width: 1px;
+  --__axc-button-border-color: var(--ax-border-default);
 
-.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);
-}
-
-.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);
+  &:not(:hover, :active) {
+    background-color: var(--ax-bg-input);
   }
 
-  .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/text-field.darkside.css

@@ -25,7 +25,7 @@
   }
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral);
   }
 
   &[size] {

package/darkside/guide-panel.darkside.css

@@ -1,20 +1,41 @@
 .navds-guide-panel {
-  --__ac-guide-panel-guide-size: 4rem;
+  --__axc-guide-panel-guide-size: 3.75rem;
 
   position: relative;
-  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+  display: flex;
+  width: fit-content;
+
+  &[data-poster="true"],
+  &[data-responsive="true"] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &[data-poster="false"] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  @media (min-width: 480px) {
+    & {
+      --__axc-guide-panel-guide-size: 5rem;
+    }
+
+    &[data-responsive="true"] {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
 }
 
 .navds-guide {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-full);
+  box-sizing: border-box;
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  position: absolute;
-  width: var(--__ac-guide-panel-guide-size);
-  height: var(--__ac-guide-panel-guide-size);
-  left: 50%;
-  transform: translate(-50%, -50%);
+  width: var(--__axc-guide-panel-guide-size);
+  height: var(--__axc-guide-panel-guide-size);
+  flex-shrink: 0;
 }
 
 .navds-guide svg,
@@ -24,73 +45,70 @@
 }
 
 .navds-guide-panel__content {
-  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
-  border-radius: var(--a-border-radius-large);
-  padding: var(--a-spacing-4);
-  padding-top: var(--a-spacing-12);
-}
+  background-color: var(--ax-bg-raised);
+  border: 2px solid var(--ax-border-info);
+  border-radius: var(--ax-border-radius-xlarge);
+  position: relative;
 
-@media (min-width: 480px) {
-  .navds-guide-panel {
-    --__ac-guide-panel-guide-size: 6.25rem;
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
+    margin-top: var(--ax-spacing-5);
   }
 
-  .navds-guide-panel__content {
-    padding: var(--a-spacing-8);
-    padding-top: 4.25rem;
+  .navds-guide-panel[data-poster="false"] > & {
+    margin-left: var(--ax-spacing-5);
   }
-}
 
-/* not-poster */
-
-.navds-guide-panel--not-poster {
-  padding-top: 0;
-  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
-}
-
-.navds-guide-panel--not-poster .navds-guide {
-  left: 0;
-  top: var(--a-spacing-5);
-  transform: none;
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] > & {
+      margin-top: 0;
+      margin-left: var(--ax-spacing-5);
+    }
+  }
 }
 
-.navds-guide-panel--not-poster .navds-guide-panel__content {
-  padding: var(--a-spacing-4);
-  padding-left: var(--a-spacing-10);
-  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
-}
+.navds-guide-panel__content-inner {
+  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
+  position: relative;
+  height: 100%;
 
-@media (min-width: 480px) {
-  .navds-guide-panel--not-poster {
-    --__ac-guide-panel-guide-size: 5rem;
+  .navds-guide-panel[data-poster="false"] & {
+    min-height: var(--__axc-guide-panel-guide-size);
   }
 
-  .navds-guide-panel--not-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
+  @media (min-width: 480px) {
+    & {
+      padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    }
+
+    .navds-guide-panel[data-responsive="true"] & {
+      min-height: var(--__axc-guide-panel-guide-size);
+    }
   }
 }
 
-/* responsive-poster (on desktop) */
-
-@media (min-width: 480px) {
-  .navds-guide-panel--responsive-poster {
-    --__ac-guide-panel-guide-size: 5rem;
+.navds-guide-panel__tail {
+  position: absolute;
+  z-index: 0;
 
-    padding-top: 0;
-    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
+    left: 50%;
+    top: calc(var(--ax-spacing-4) * -1 - 2px);
+    transform: translateX(-48%);
   }
 
-  .navds-guide-panel--responsive-poster .navds-guide {
-    left: 0;
-    top: var(--a-spacing-5);
-    transform: none;
+  .navds-guide-panel[data-poster="false"] & {
+    top: calc(var(--__axc-guide-panel-guide-size) / 2);
+    left: calc(var(--ax-spacing-5) * -1 - 2px);
+    transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
-  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
-    padding: var(--a-spacing-6);
-    padding-left: var(--a-spacing-14);
-    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  @media (min-width: 480px) {
+    .navds-guide-panel[data-responsive="true"] & {
+      top: calc(var(--__axc-guide-panel-guide-size) / 2);
+      left: calc(var(--ax-spacing-5) * -1 - 2px);
+      transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
+    }
   }
 }

package/darkside/index.css

@@ -13,9 +13,6 @@
 @import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
 @import "./baseline/theme.darkside.css" layer(aksel.theme);
 
-/* TODO: Remove this reference after stack is updated with darkside support */
-@import "../primitives/stack.css" layer(aksel.components);
-
 /* ------------------------------- Components ------------------------------- */
 @import "./button.darkside.css" layer(aksel.components);
 @import "./chips.darkside.css" layer(aksel.components);
@@ -31,6 +28,7 @@
 @import "./alert.darkside.css" layer(aksel.components);
 @import "./chat.darkside.css" layer(aksel.components);
 @import "./copybutton.darkside.css" layer(aksel.components);
+@import "./date.darkside.css" layer(aksel.components);
 @import "./dropdown.darkside.css" layer(aksel.components);
 @import "./action-menu.darkside.css" layer(aksel.components);
 @import "./expansioncard.darkside.css" layer(aksel.components);
@@ -42,7 +40,6 @@
 @import "./modal.darkside.css" layer(aksel.components);
 @import "./pagination.darkside.css" layer(aksel.components);
 @import "./popover.darkside.css" layer(aksel.components);
-@import "./date.darkside.css" layer(aksel.components);
 @import "./tag.darkside.css" layer(aksel.components);
 @import "./timeline.darkside.css" layer(aksel.components);
 @import "./tooltip.darkside.css" layer(aksel.components);

package/darkside/modal.darkside.css

@@ -60,15 +60,15 @@
   width: 450px;
 
   & .navds-modal__header {
-    padding: var(--ax-spacing-4) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
   }
 
   & .navds-modal__body {
-    padding: var(--ax-spacing-2) var(--ax-spacing-4) var(--ax-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
   }
 
   & .navds-modal__footer {
-    padding: var(--ax-spacing-4);
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
   }
 }
 
@@ -121,7 +121,7 @@
 }
 
 .navds-modal__header {
-  padding: var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-4) var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
 }
 
 .navds-modal__header-icon {
@@ -138,7 +138,7 @@
 }
 
 .navds-modal__body {
-  padding: var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
@@ -164,7 +164,7 @@
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--ax-spacing-4);
-  padding: var(--ax-spacing-4) var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-6);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
 }
 
 .navds-modal__footer :nth-of-type(2) {

package/darkside/popover.darkside.css

@@ -10,7 +10,7 @@
 }
 
 .navds-popover__content {
-  padding: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-5);
 }
 
 .navds-popover--hidden {