@navikt/ds-css 7.22.0 → 7.23.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @navikt/ds-css
 
+## 7.23.0
+
+### Minor Changes
+
+- Darkside: Renamed 'data-color-role' dynamic theme attribute to 'data-color'. ([#3849](https://github.com/navikt/aksel/pull/3849))
+
+- Darkside: Using attribute 'data-color' with one of the built-in colors from 'AkselColorRole' now allows re-coloring most components. ([#3849](https://github.com/navikt/aksel/pull/3849))
+
+- Darkside: All components has been updated to use 'data-color' attribute for coloring. As a side-effect, most component CSS is either updated or refactored. ([#3849](https://github.com/navikt/aksel/pull/3849))
+
+### Patch Changes
+
+- Tag: Outline-variant now uses bg-moderate, replacing bg-moderateA. ([#3865](https://github.com/navikt/aksel/pull/3865))
+
+- Darkside: Fix icon size in small Tabs ([#3850](https://github.com/navikt/aksel/pull/3850))
+
+- List: Fix issue with incorrect padding in Safari ([#3850](https://github.com/navikt/aksel/pull/3850))
+
 ## 7.22.0
 
 ### Minor Changes

package/darkside/accordion.darkside.css

@@ -12,7 +12,7 @@
   position: relative;
   border-radius: var(--ax-radius-8);
   background: transparent;
-  color: var(--ax-text-accent-subtle);
+  color: var(--ax-text-subtle);
 
   > * {
     font-weight: var(--ax-font-weight-regular);
@@ -25,7 +25,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
 
     &::before,
     &::after {
@@ -33,8 +33,8 @@
     }
 
     > .aksel-accordion__icon-wrapper {
-      background-color: var(--ax-bg-accent-strong-hover);
-      color: var(--ax-text-accent-contrast);
+      background-color: var(--ax-bg-strong-hover);
+      color: var(--ax-text-contrast);
     }
 
     @media (forced-colors: active) {
@@ -95,8 +95,8 @@
   width: 22px;
   height: 22px;
   align-self: center;
-  background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent-subtle);
+  background-color: var(--ax-bg-moderateA);
+  color: var(--ax-text-subtle);
 }
 
 .aksel-accordion__header-chevron {

package/darkside/action-menu.darkside.css

@@ -76,7 +76,7 @@
 
   &:focus {
     outline: none;
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
     color: var(--ax-text-neutral);
   }
 
@@ -98,7 +98,7 @@
   }
 
   &:focus {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 }
 

package/darkside/alert.darkside.css

@@ -5,6 +5,12 @@
   display: flex;
   gap: var(--ax-space-12);
   align-items: center;
+  border-color: var(--ax-border-default);
+  background-color: var(--ax-bg-moderate);
+
+  & > .aksel-alert__icon {
+    color: var(--ax-text-decoration);
+  }
 
   @media (forced-colors: active) {
     border: 1px solid canvastext;
@@ -34,43 +40,6 @@
   }
 }
 
-/* ----------------------------- Alert variants ----------------------------- */
-.aksel-alert--info {
-  border-color: var(--ax-border-info);
-  background-color: var(--ax-bg-info-moderate);
-
-  > .aksel-alert__icon {
-    color: var(--ax-text-info-decoration);
-  }
-}
-
-.aksel-alert--success {
-  border-color: var(--ax-border-success);
-  background-color: var(--ax-bg-success-moderate);
-
-  > .aksel-alert__icon {
-    color: var(--ax-text-success-decoration);
-  }
-}
-
-.aksel-alert--warning {
-  border-color: var(--ax-border-warning);
-  background-color: var(--ax-bg-warning-moderate);
-
-  > .aksel-alert__icon {
-    color: var(--ax-text-warning-decoration);
-  }
-}
-
-.aksel-alert--error {
-  border-color: var(--ax-border-danger);
-  background-color: var(--ax-bg-danger-moderate);
-
-  > .aksel-alert__icon {
-    color: var(--ax-text-danger-decoration);
-  }
-}
-
 /* ----------------------------- Alert fullwidth ---------------------------- */
 .aksel-alert--full-width {
   border-radius: 0;

package/darkside/button.darkside.css

@@ -20,6 +20,84 @@
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
+
+  &[data-variant="primary"] {
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
+
+    &:hover {
+      background-color: var(--ax-bg-strong-hover);
+    }
+
+    &:active {
+      background-color: var(--ax-bg-strong-pressed);
+    }
+
+    &:is(:disabled, .aksel-button--disabled) {
+      background-color: var(--ax-bg-strong);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    --__axc-button-border-color: var(--ax-border-default);
+
+    background-color: transparent;
+    color: var(--ax-text-subtle);
+
+    &[data-color="neutral"] {
+      color: var(--ax-text-default);
+    }
+
+    &:hover {
+      --__axc-button-border-color: var(--ax-border-strong);
+
+      background-color: var(--ax-bg-moderate-hoverA);
+    }
+
+    &:active {
+      background-color: var(--ax-bg-moderate-pressedA);
+    }
+
+    &:is(:disabled, .aksel-button--disabled) {
+      color: var(--ax-text-subtle);
+      background-color: transparent;
+
+      &[data-color="neutral"] {
+        color: var(--ax-text-default);
+      }
+    }
+  }
+
+  &[data-variant="tertiary"] {
+    background-color: transparent;
+    color: var(--ax-text-subtle);
+
+    &[data-color="neutral"] {
+      color: var(--ax-text-default);
+    }
+
+    &:hover {
+      background-color: var(--ax-bg-moderate-hoverA);
+    }
+
+    &:active {
+      background-color: var(--ax-bg-moderate-pressedA);
+    }
+
+    &[data-pressed="true"] {
+      background-color: var(--ax-bg-strong-pressed);
+      color: var(--ax-text-contrast);
+    }
+
+    &:is(:disabled, .aksel-button--disabled) {
+      color: var(--ax-text-subtle);
+      background-color: transparent;
+
+      &[data-color="neutral"] {
+        color: var(--ax-text-default);
+      }
+    }
+  }
 }
 
 .aksel-button--small,
@@ -41,18 +119,6 @@
   --__axc-button-icon-size: 1.25rem;
 }
 
-.aksel-button--icon-only {
-  padding: var(--ax-space-12);
-
-  &.aksel-button--small {
-    padding: var(--ax-space-4);
-  }
-
-  &.aksel-button--xsmall {
-    padding: var(--ax-space-2);
-  }
-}
-
 @supports not selector(:focus-visible) {
   .aksel-button:focus {
     outline: 3px solid var(--ax-border-focus);
@@ -76,170 +142,15 @@
   }
 }
 
-/*************************
- * .aksel-button--primary *
- *************************/
-.aksel-button--primary {
-  background-color: var(--ax-bg-accent-strong);
-  color: var(--ax-text-accent-contrast);
-
-  &:hover {
-    background-color: var(--ax-bg-accent-strong-hover);
-  }
-
-  &:active {
-    background-color: var(--ax-bg-accent-strong-pressed);
-  }
-
-  &:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-accent-strong);
-  }
-
-  @media (forced-colors: active) {
-    &:not(:disabled) {
-      background-color: highlight;
-      color: highlighttext;
-    }
-
-    & span {
-      forced-color-adjust: none;
-    }
-  }
-}
-
-/*************************
- * .aksel-button--primary-neutral *
- *************************/
-.aksel-button--primary-neutral {
-  background-color: var(--ax-bg-neutral-strong);
-  color: var(--ax-text-neutral-contrast);
-
-  &:hover {
-    background-color: var(--ax-bg-neutral-strong-hover);
-  }
-
-  &:active {
-    background-color: var(--ax-bg-neutral-strong-pressed);
-  }
-
-  &:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-neutral-strong);
-  }
-}
-
-/**************************
-* .aksel-button--secondary *
- **************************/
-.aksel-button--secondary {
-  --__axc-button-border-color: var(--ax-border-accent);
-
-  background-color: transparent;
-  color: var(--ax-text-accent-subtle);
-
-  &:hover {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
-
-    background-color: var(--ax-bg-accent-moderate-hoverA);
-  }
-
-  &:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
-  }
-
-  &:is(:disabled, .aksel-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-accent);
-
-    background-color: transparent;
-    color: var(--ax-text-accent-subtle);
-  }
-}
-
-/**************************
-* .aksel-button--secondary-neutral *
- **************************/
-.aksel-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-neutral);
-
-  background-color: transparent;
-  color: var(--ax-text-neutral);
-
-  &:hover {
-    --__axc-button-border-color: var(--ax-border-neutral-strong);
-
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
-  }
-
-  &:active {
-    background-color: var(--ax-bg-neutral-moderate-pressedA);
-  }
-
-  &:is(:disabled, .aksel-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-neutral);
-
-    color: var(--ax-text-neutral);
-    background-color: transparent;
-  }
-}
-
-/****************************
- * .aksel-button--tertiary *
- ****************************/
-.aksel-button--tertiary {
-  background-color: transparent;
-  color: var(--ax-text-accent-subtle);
-
-  &:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
-  }
-
-  &:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
-  }
-
-  &:is(:disabled, .aksel-button--disabled) {
-    color: var(--ax-text-accent-subtle);
-    background-color: transparent;
-  }
-}
-
-/****************************
- * .aksel-button--tertiary-neutral *
- ****************************/
-.aksel-button--tertiary-neutral {
-  background-color: transparent;
-  color: var(--ax-text-neutral);
-
-  &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
-  }
-
-  &:active {
-    background-color: var(--ax-bg-neutral-moderate-pressedA);
-  }
-
-  &:is(:disabled, .aksel-button--disabled) {
-    color: var(--ax-text-neutral);
-    background-color: transparent;
-  }
-}
-
-/*************************
- * .aksel-button--danger *
- *************************/
-.aksel-button--danger {
-  background-color: var(--ax-bg-danger-strong);
-  color: var(--ax-text-danger-contrast);
-
-  &:hover {
-    background-color: var(--ax-bg-danger-strong-hover);
-  }
+.aksel-button--icon-only {
+  padding: var(--ax-space-12);
 
-  &:active {
-    background-color: var(--ax-bg-danger-strong-pressed);
+  &.aksel-button--small {
+    padding: var(--ax-space-4);
   }
 
-  &:is(:disabled, .aksel-button--disabled) {
-    background-color: var(--ax-bg-danger-strong);
+  &.aksel-button--xsmall {
+    padding: var(--ax-space-2);
   }
 }
 

package/darkside/chat.darkside.css

@@ -3,6 +3,24 @@
   align-items: flex-end;
   gap: var(--ax-space-12);
   max-width: 40.75rem;
+
+  & .aksel-chat__bubble,
+  & .aksel-chat__avatar {
+    background-color: var(--ax-bg-moderateA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
+
+  &[data-variant="subtle"] .aksel-chat__bubble,
+  &[data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-softA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
+
+  &[data-color="neutral"][data-variant="subtle"] .aksel-chat__bubble,
+  &[data-color="neutral"][data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-neutral-subtleA);
+  }
 }
 
 .aksel-chat--right {
@@ -21,9 +39,7 @@
 /* ------------------------------- Chat avatar ------------------------------ */
 .aksel-chat__avatar {
   align-items: center;
-  background-color: var(--ax-bg-raised);
   border-radius: var(--ax-radius-full);
-  border: 1px solid var(--ax-border-neutral-subtleA);
   color: var(--ax-text-neutral);
   display: flex;
   flex-shrink: 0;
@@ -56,34 +72,17 @@
 .aksel-chat__bubble {
   padding: var(--ax-space-20);
   width: fit-content;
-  background-color: var(--ax-bg-raised);
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-8);
   border-radius: var(--ax-radius-12);
   border-bottom-left-radius: var(--ax-radius-2);
-  border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .aksel-chat--small .aksel-chat__bubble {
   padding: var(--ax-space-16);
 }
 
-/* -------------------------- Chat bubble variants -------------------------- */
-.aksel-chat--info {
-  & .aksel-chat__bubble,
-  & .aksel-chat__avatar {
-    background-color: var(--ax-bg-info-moderate);
-  }
-}
-
-.aksel-chat--neutral {
-  & .aksel-chat__bubble,
-  & .aksel-chat__avatar {
-    background-color: var(--ax-bg-neutral-moderateA);
-  }
-}
-
 /* ------------------------------ Chat top text ----------------------------- */
 .aksel-chat__top-text {
   color: var(--ax-text-neutral);

package/darkside/chips.darkside.css

@@ -69,46 +69,24 @@
 }
 
 /* ------------------------------ Chips Toggle ------------------------------ */
-.aksel-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-accent);
+.aksel-chips__toggle {
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+  background-color: var(--ax-bg-moderate);
+  color: var(--ax-text-default);
   transition: box-shadow 200ms cubic-bezier(0.15, 1, 0.3, 1);
 
   &:hover {
-    background-color: var(--ax-bg-accent-moderate-hover);
-    box-shadow: inset 0 0 0 1px var(--ax-border-accent);
+    background-color: var(--ax-bg-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-default);
   }
 
   &[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
 
     &:hover {
-      background-color: var(--ax-bg-accent-strong-hover);
-    }
-  }
-}
-
-.aksel-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
-  background-color: var(--ax-bg-neutral-moderate);
-  color: var(--ax-text-neutral);
-  transition: box-shadow 200ms cubic-bezier(0.15, 1, 0.3, 1);
-
-  &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
-    box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
-  }
-
-  &[data-pressed="true"] {
-    box-shadow: none;
-    background-color: var(--ax-bg-neutral-strong-pressed);
-    color: var(--ax-text-neutral-contrast);
-
-    &:hover {
-      background-color: var(--ax-bg-neutral-strong-hover);
+      background-color: var(--ax-bg-strong-hover);
     }
   }
 }
@@ -122,23 +100,11 @@
 /* ----------------------------- Chips removable ---------------------------- */
 .aksel-chips__removable {
   gap: 0;
-}
-
-.aksel-chips__removable--action {
-  background: var(--ax-bg-accent-strong-pressed);
-  color: var(--ax-text-accent-contrast);
-
-  &:hover {
-    background: var(--ax-bg-accent-strong-hover);
-  }
-}
-
-.aksel-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);
   }
 }
 

package/darkside/date.darkside.css

@@ -8,8 +8,8 @@
     }
 
     &.rdp-day_selected {
-      background-color: var(--ax-bg-accent-moderate-pressedA);
-      box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+      background-color: var(--ax-bg-moderate-pressedA);
+      box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
       color: var(--ax-text-neutral);
     }
   }
@@ -59,8 +59,8 @@
 
   .rdp-day_selected,
   .aksel-monthpicker__month--selected {
-    color: var(--ax-text-accent-contrast);
-    background: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-contrast);
+    background: var(--ax-bg-strong-pressed);
     cursor: pointer;
   }
 
@@ -73,7 +73,7 @@
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
   .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
-    background: var(--ax-bg-accent-moderate-hoverA);
+    background: var(--ax-bg-moderate-hoverA);
     cursor: pointer;
   }
 
@@ -84,7 +84,7 @@
       width: 6px;
       height: 6px;
       display: block;
-      background-color: var(--ax-text-accent-subtle);
+      background-color: var(--ax-text-subtle);
       border-radius: var(--ax-radius-full);
       content: "";
       position: absolute;
@@ -96,7 +96,7 @@
     &.rdp-day_selected:not(.rdp-day_range_middle),
     &:active {
       &::before {
-        background-color: var(--ax-text-accent-contrast);
+        background-color: var(--ax-text-contrast);
       }
     }
   }
@@ -162,8 +162,8 @@
     }
 
     &:active:not(:disabled) {
-      color: var(--ax-text-accent-contrast);
-      background-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-contrast);
+      background-color: var(--ax-bg-strong-pressed);
     }
   }
 }

package/darkside/dropdown.darkside.css

@@ -50,11 +50,11 @@
   color: var(--ax-text-neutral);
 
   &:hover {
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   &:focus-visible {

package/darkside/expansioncard.darkside.css

@@ -4,13 +4,17 @@
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
   border-radius: var(--ax-radius-12);
-  background-color: var(--ax-bg-raised);
+  background-color: var(--ax-bg-softA);
   height: fit-content;
-  border: 1px solid var(--ax-border-neutral);
+  border: 1px solid var(--ax-border-default);
+
+  &[data-color="neutral"] {
+    background-color: var(--ax-bg-raised);
+  }
 
   &:has(.aksel-expansioncard__header:hover) {
-    box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
-    border-color: var(--ax-border-neutral-strong);
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
   }
 }
 
@@ -45,7 +49,7 @@
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hoverA);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   &[data-open="true"] {
@@ -55,7 +59,7 @@
     /* Divider between header and content */
     &::after {
       content: "";
-      background-color: var(--ax-border-neutral-subtleA);
+      background-color: var(--ax-border-subtleA);
       bottom: 0;
       left: var(--__axc-expansioncard-padding-inline);
       height: 1px;
@@ -117,7 +121,7 @@
 }
 
 .aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
-  background-color: var(--ax-bg-neutral-moderate-hoverA);
+  background-color: var(--ax-bg-moderate-hoverA);
 }
 
 .aksel-expansioncard__header-chevron {