@navikt/ds-css 7.9.1 → 7.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-css
 
+## 7.10.0
+
+### Minor Changes
+
+- Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element. ([#3507](https://github.com/navikt/aksel/pull/3507))
+
+### Patch Changes
+
+- Button: Using `<Loader />` within `icon`-prop now supported. ([#3515](https://github.com/navikt/aksel/pull/3515))
+
+- Combobox: Always render `maxSelected` message when `isMultiSelect` is set. ([#3506](https://github.com/navikt/aksel/pull/3506))
+
+## 7.9.2
+
+### Patch Changes
+
+- Table: Removed border-bottom for HeaderCell used in ExpandableRow. ([#3503](https://github.com/navikt/aksel/pull/3503))
+
 ## 7.9.1
 
 ### Patch Changes

package/button.css

@@ -497,7 +497,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

package/darkside/accordion.darkside.css

@@ -4,8 +4,8 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: var(--ax-spacing-3);
-  padding: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
+  padding: var(--ax-space-12);
   text-align: left;
   cursor: pointer;
   border: none;
@@ -26,7 +26,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-hoverA);
-    color: var(--ax-text-accent-strong);
 
     &::before,
     &::after {
@@ -101,7 +100,7 @@
   height: 22px;
   align-self: center;
   background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
 }
 
 .navds-accordion__header-chevron {
@@ -119,7 +118,7 @@
 .navds-accordion__content {
   --__acx-accordion-content-line-width: 2px;
 
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+  padding-inline: var(--ax-space-24) var(--ax-space-12);
   display: none;
   overflow: hidden;
   padding-block: 0;
@@ -148,15 +147,15 @@
 }
 
 .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+  padding-inline: var(--ax-space-24) var(--ax-space-12);
 }
 
 .navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
   box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
-  padding-block: var(--ax-spacing-2);
+  padding-block: var(--ax-space-8);
 
   /* Aligns content with heading-section */
-  padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5);
+  padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
   @media (forced-colors: active) {
     border-left: 1px solid canvastext;
@@ -168,8 +167,8 @@
   opacity: 1;
   overflow: visible;
   max-height: fit-content;
-  padding-block: var(--ax-spacing-2);
-  padding-block-end: var(--ax-spacing-6);
+  padding-block: var(--ax-space-8);
+  padding-block-end: var(--ax-space-24);
   border-color: var(--ax-border-subtleA);
 }
 

package/darkside/action-menu.darkside.css

@@ -34,9 +34,9 @@
 }
 
 .navds-action-menu__content > .navds-action-menu__content-inner {
-  --__axc-action-menu-content-p: var(--ax-spacing-2);
-  --__axc-action-menu-item-pr: var(--ax-spacing-2);
-  --__axc-action-menu-item-pl: var(--ax-spacing-2);
+  --__axc-action-menu-content-p: var(--ax-space-8);
+  --__axc-action-menu-item-pr: var(--ax-space-8);
+  --__axc-action-menu-item-pl: var(--ax-space-8);
   --__axc-action-menu-item-height: 2rem;
 
   border-radius: var(--ax-border-radius-large);
@@ -57,7 +57,7 @@
 .navds-action-menu__item {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   min-height: var(--__axc-action-menu-item-height);
   cursor: default;
   border-radius: var(--ax-border-radius-medium);
@@ -87,14 +87,14 @@
 }
 
 .navds-action-menu__item--has-icon {
-  --__axc-action-menu-item-pl: var(--ax-spacing-6);
+  --__axc-action-menu-item-pl: var(--ax-space-24);
 }
 
 .navds-action-menu__sub-trigger {
-  --__axc-action-menu-item-pr: var(--ax-spacing-05);
+  --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
-    background-color: var(--ax-bg-neutral-moderate-pressed);
+    background-color: var(--ax-bg-moderate-pressed);
   }
 
   &:focus {
@@ -107,7 +107,7 @@
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger-strong);
+    color: var(--ax-text-danger);
   }
 }
 
@@ -115,12 +115,12 @@
 .navds-action-menu__marker {
   display: flex;
   align-items: center;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
 }
 
 .navds-action-menu__marker--right {
   margin-left: auto;
-  padding-left: var(--ax-spacing-4);
+  padding-left: var(--ax-space-16);
 }
 
 .navds-action-menu__marker--left {
@@ -138,10 +138,10 @@
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   color: var(--ax-text-default);
   border-radius: var(--ax-border-radius-small);
-  padding: 0 var(--ax-spacing-1);
+  padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
   line-height: 1;
@@ -167,7 +167,7 @@
 
 .navds-action-menu__divider {
   height: 1px;
-  margin-block: var(--ax-spacing-2);
+  margin-block: var(--ax-space-8);
   background-color: var(--ax-border-subtleA);
 }
 

package/darkside/alert.darkside.css

@@ -1,9 +1,9 @@
 .navds-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
   align-items: center;
 
   @media (forced-colors: active) {
@@ -25,8 +25,8 @@
 }
 
 .navds-alert--small {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
-  gap: var(--ax-spacing-2);
+  padding: var(--ax-space-12) var(--ax-space-16);
+  gap: var(--ax-space-8);
 
   > .navds-alert__icon {
     margin-block-start: 0;
@@ -94,22 +94,22 @@
 
 .navds-alert--close-button {
   > .navds-alert__wrapper {
-    margin-block-start: var(--ax-spacing-05);
+    margin-block-start: var(--ax-space-2);
   }
 
   > .navds-alert__icon {
-    margin-block-start: var(--ax-spacing-05);
+    margin-block-start: var(--ax-space-2);
   }
 
   &.navds-alert--small {
     align-items: flex-start;
 
     > .navds-alert__wrapper {
-      margin-block-start: var(--ax-spacing-1);
+      margin-block-start: var(--ax-space-4);
     }
 
     > .navds-alert__icon {
-      margin-block-start: var(--ax-spacing-1);
+      margin-block-start: var(--ax-space-4);
     }
   }
 }

package/darkside/button.darkside.css

@@ -4,7 +4,7 @@
   --__axc-button-border-color: transparent;
   --__axc-button-border-width: 2px;
 
-  padding: var(--ax-spacing-3) var(--ax-spacing-5);
+  padding: var(--ax-space-12) var(--ax-space-20);
   border-radius: var(--ax-border-radius-medium);
   display: inline-flex;
   cursor: pointer;
@@ -13,41 +13,43 @@
   background: none;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 .navds-button--small,
 .navds-button--xsmall {
   --__axc-button-icon-margin: -2px;
-  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--small {
-  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
+  gap: var(--ax-space-6);
 }
 
 .navds-button--xsmall {
-  padding: var(--ax-spacing-05) var(--ax-spacing-2);
-  gap: var(--ax-spacing-1);
+  padding: var(--ax-space-2) var(--ax-space-8);
+  gap: var(--ax-space-4);
+
+  --__axc-button-icon-size: 1.25rem;
 }
 
 .navds-button--icon-only {
-  padding: var(--ax-spacing-3);
+  padding: var(--ax-space-12);
 
   &.navds-button--small {
-    padding: var(--ax-spacing-1);
+    padding: var(--ax-space-4);
   }
 
   &.navds-button--xsmall {
-    padding: var(--ax-spacing-05);
+    padding: var(--ax-space-2);
   }
 }
 
@@ -109,19 +111,19 @@
  * .navds-button--primary-neutral *
  *************************/
 .navds-button--primary-neutral {
-  background-color: var(--ax-bg-neutral-strong);
-  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-strong);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 }
 
@@ -138,7 +140,6 @@
     --__axc-button-border-color: var(--ax-border-accent-strong);
 
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -160,7 +161,7 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-strong);
 
   background-color: transparent;
   color: var(--ax-text-default);
@@ -168,18 +169,18 @@
   &:hover {
     --__axc-button-border-color: var(--ax-border-strong);
 
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
     --__axc-button-border-color: transparent;
 
-    color: var(--ax-text-neutral-contrast);
-    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-neutral);
+    --__axc-button-border-color: var(--ax-border-strong);
 
     color: var(--ax-text-default);
     background-color: transparent;
@@ -195,7 +196,6 @@
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-accent-strong);
   }
 
   &:active {
@@ -217,12 +217,12 @@
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
   }
 
   &:is(:disabled, .navds-button--disabled) {
@@ -264,7 +264,7 @@
 }
 
 /* Loader overrides */
-.navds-button .navds-loader {
+.navds-button > .navds-loader {
   position: absolute;
 }
 

package/darkside/chat.darkside.css

@@ -1,7 +1,7 @@
 .navds-chat {
   display: flex;
   align-items: flex-end;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
   max-width: 40.75rem;
 }
 
@@ -50,37 +50,37 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
 }
 
 .navds-chat__bubble {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   width: fit-content;
   background-color: var(--ax-bg-raised);
   display: flex;
   flex-direction: column;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   border-radius: var(--ax-border-radius-xlarge);
   border-bottom-left-radius: var(--ax-border-radius-small);
   border: 1px solid var(--ax-border-subtleA);
 }
 
 .navds-chat--small .navds-chat__bubble {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */
 .navds-chat--info {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-info-raised);
+    background-color: var(--ax-bg-info-moderate);
   }
 }
 
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-neutral-raised);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 
@@ -88,7 +88,7 @@
 .navds-chat__top-text {
   color: var(--ax-text-default);
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   align-items: baseline;
   font-weight: normal;
   margin: 0;

package/darkside/chips.darkside.css

@@ -1,6 +1,6 @@
 .navds-chips {
   display: flex;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -20,9 +20,9 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: var(--ax-spacing-05);
+  gap: var(--ax-space-2);
   margin: 0;
-  padding: 0 var(--ax-spacing-3);
+  padding: 0 var(--ax-space-12);
   text-decoration: none;
   border-radius: var(--ax-border-radius-full);
   min-height: 2rem;
@@ -35,14 +35,14 @@
 
 .navds-chips--readonly {
   .navds-chips__chip {
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
   }
 }
 
 .navds-chips--small {
   .navds-chips__chip {
     min-height: 1.5rem;
-    padding: 0 var(--ax-spacing-2);
+    padding: 0 var(--ax-space-8);
   }
 
   .navds-chips__toggle-icon {
@@ -51,7 +51,7 @@
   }
 
   .navds-chips__toggle--with-checkmark {
-    padding-left: var(--ax-spacing-1);
+    padding-left: var(--ax-space-4);
   }
 
   .navds-chips__removable-icon {
@@ -64,7 +64,7 @@
   }
 
   .navds-chips--icon-right {
-    padding-right: var(--ax-spacing-05);
+    padding-right: var(--ax-space-2);
   }
 }
 
@@ -72,7 +72,7 @@
 .navds-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
-  color: var(--ax-text-default);
+  color: var(--ax-text-accent-strong);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
@@ -90,27 +90,27 @@
 }
 
 .navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
-  background-color: var(--ax-bg-neutral-moderate);
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+  background-color: var(--ax-bg-moderate);
   color: var(--ax-text-default);
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
+    background-color: var(--ax-bg-moderate-hover);
   }
 
   &[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-strong-hover);
+      background-color: var(--ax-bg-strong-hover);
     }
   }
 }
 
 .navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--ax-spacing-1-alt);
+  padding-left: var(--ax-space-6);
 }
 
 /* -------------------------- start old CSS --------------------------  */
@@ -130,11 +130,11 @@
 }
 
 .navds-chips__removable--neutral {
-  background: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 
   &:hover {
-    background: var(--ax-bg-neutral-strong-hover);
+    background: var(--ax-bg-strong-hover);
   }
 }
 
@@ -148,11 +148,11 @@
 }
 
 .navds-chips--icon-left {
-  padding-left: var(--ax-spacing-1-alt);
+  padding-left: var(--ax-space-6);
 }
 
 .navds-chips--icon-right {
-  padding-right: var(--ax-spacing-1-alt);
+  padding-right: var(--ax-space-6);
 }
 
 @media (forced-colors: active) {