@navikt/ds-css 7.21.1 → 7.23.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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
+
+- Darkside: Components now use new `radius`-tokens, replacing `border-radius`-tokens. ([#3784](https://github.com/navikt/aksel/pull/3784))
+
 ## 7.21.1
 
 ### Patch Changes

package/darkside/accordion.darkside.css

@@ -10,9 +10,9 @@
   cursor: pointer;
   border: none;
   position: relative;
-  border-radius: var(--ax-border-radius-large);
+  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) {
@@ -91,12 +91,12 @@
 
 /* ------------------------- Accordion chevron icon ------------------------- */
 .aksel-accordion__icon-wrapper {
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-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

@@ -1,7 +1,7 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .aksel-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   border: 1px solid var(--ax-border-neutral-subtleA);
   box-shadow: var(--ax-shadow-dialog);
   transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
@@ -39,7 +39,7 @@
   --__axc-action-menu-item-pl: var(--ax-space-8);
   --__axc-action-menu-item-height: 2rem;
 
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
@@ -60,7 +60,7 @@
   gap: var(--ax-space-8);
   min-height: var(--__axc-action-menu-item-height);
   cursor: default;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);
@@ -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);
   }
 }
 
@@ -140,7 +140,7 @@
 .aksel-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
-  border-radius: var(--ax-border-radius-small);
+  border-radius: var(--ax-radius-2);
   padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
@@ -159,7 +159,7 @@
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
   color: var(--ax-text-neutral-subtle);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   user-select: none;
   cursor: default;
   font-size: var(--ax-font-size-small);

package/darkside/alert.darkside.css

@@ -1,10 +1,16 @@
 .aksel-alert {
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   border: 1px solid;
   padding: var(--ax-space-20);
   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-icon);
-  }
-}
-
-.aksel-alert--success {
-  border-color: var(--ax-border-success);
-  background-color: var(--ax-bg-success-moderate);
-
-  > .aksel-alert__icon {
-    color: var(--ax-text-success-icon);
-  }
-}
-
-.aksel-alert--warning {
-  border-color: var(--ax-border-warning);
-  background-color: var(--ax-bg-warning-moderate);
-
-  > .aksel-alert__icon {
-    color: var(--ax-text-warning-icon);
-  }
-}
-
-.aksel-alert--error {
-  border-color: var(--ax-border-danger);
-  background-color: var(--ax-bg-danger-moderate);
-
-  > .aksel-alert__icon {
-    color: var(--ax-text-danger-icon);
-  }
-}
-
 /* ----------------------------- Alert fullwidth ---------------------------- */
 .aksel-alert--full-width {
   border-radius: 0;

package/darkside/button.darkside.css

@@ -5,7 +5,7 @@
   --__axc-button-border-width: 2px;
 
   padding: var(--ax-space-12) var(--ax-space-20);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   display: inline-flex;
   cursor: pointer;
   text-decoration: none;
@@ -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 {
@@ -13,17 +31,15 @@
   }
 
   & .aksel-chat__bubble {
-    border-radius: var(--ax-border-radius-xlarge);
-    border-bottom-right-radius: var(--ax-border-radius-small);
+    border-radius: var(--ax-radius-12);
+    border-bottom-right-radius: var(--ax-radius-2);
   }
 }
 
 /* ------------------------------- Chat avatar ------------------------------ */
 .aksel-chat__avatar {
   align-items: center;
-  background-color: var(--ax-bg-raised);
-  border-radius: var(--ax-border-radius-full);
-  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-radius-full);
   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-border-radius-xlarge);
-  border-bottom-left-radius: var(--ax-border-radius-small);
-  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-radius-12);
+  border-bottom-left-radius: var(--ax-radius-2);
 }
 
 .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

@@ -24,7 +24,7 @@
   margin: 0;
   padding: 0 var(--ax-space-12);
   text-decoration: none;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   min-height: 2rem;
 
   &:focus-visible {
@@ -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);
   }
 }
 
@@ -148,7 +114,7 @@
   font-size: 1.25rem;
   display: grid;
   place-items: center;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
 }
 
 .aksel-chips--icon-left {