@navikt/ds-css 7.6.0 → 7.7.0

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,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/text-field.darkside.css

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

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 {