@navikt/ds-css 7.11.0 → 7.12.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @navikt/ds-css
 
+## 7.12.1
+
+## 7.12.0
+
 ## 7.11.0
 
 ### Patch Changes

package/darkside/accordion.darkside.css

@@ -12,7 +12,7 @@
   position: relative;
   border-radius: var(--ax-border-radius-large);
   background: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   > * {
     font-weight: var(--ax-font-weight-regular);
@@ -25,7 +25,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-accent-hoverA);
+    background-color: var(--ax-bg-accent-moderate-hoverA);
 
     &::before,
     &::after {
@@ -70,7 +70,7 @@
   right: 0;
   width: 100%;
   height: 1px;
-  background-color: var(--ax-border-subtleA);
+  background-color: var(--ax-border-neutral-subtleA);
 }
 
 .navds-accordion__header::after {
@@ -96,7 +96,7 @@
   height: 22px;
   align-self: center;
   background-color: var(--ax-bg-accent-moderateA);
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-accordion__header-chevron {
@@ -122,7 +122,7 @@
 }
 
 .navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
-  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
+  box-shadow: -2px 0 0 0 var(--ax-border-neutral-subtleA);
 }
 
 .navds-accordion__item {
@@ -151,7 +151,7 @@
       visibility: visible;
       margin-block: var(--ax-space-8);
       margin-block-end: var(--ax-space-24);
-      border-color: var(--ax-border-subtleA);
+      border-color: var(--ax-border-neutral-subtleA);
       opacity: 1;
 
       & .navds-accordion__content-inner {
@@ -160,7 +160,7 @@
     }
 
     &:last-child {
-      border-bottom: 1px solid var(--ax-border-subtleA);
+      border-bottom: 1px solid var(--ax-border-neutral-subtleA);
     }
   }
 }

package/darkside/action-menu.darkside.css

@@ -2,7 +2,7 @@
 .navds-action-menu__content {
   overflow: hidden;
   border-radius: var(--ax-border-radius-xlarge);
-  border: 1px solid var(--ax-border-subtleA);
+  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;
 
@@ -67,7 +67,7 @@
   font-size: var(--ax-font-size-medium);
   scroll-margin-block: var(--__axc-action-menu-content-p);
   line-height: 1.5;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   text-decoration: none;
 
   & svg {
@@ -77,7 +77,7 @@
   &:focus {
     outline: none;
     background-color: var(--ax-bg-accent-moderate-hoverA);
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   &[aria-disabled="true"] {
@@ -94,7 +94,7 @@
   --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
-    background-color: var(--ax-bg-moderate-pressed);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:focus {
@@ -103,11 +103,11 @@
 }
 
 .navds-action-menu__item--danger {
-  color: var(--ax-text-danger);
+  color: var(--ax-text-danger-subtle);
 
   &:focus {
     background-color: var(--ax-bg-danger-moderate-hoverA);
-    color: var(--ax-text-danger);
+    color: var(--ax-text-danger-subtle);
   }
 }
 
@@ -138,8 +138,8 @@
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--ax-bg-moderateA);
-  color: var(--ax-text-default);
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-small);
   padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
@@ -158,7 +158,7 @@
   min-height: calc(var(--__axc-action-menu-item-height) - 6px);
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
   border-radius: var(--ax-border-radius-medium);
   user-select: none;
   cursor: default;
@@ -168,7 +168,7 @@
 .navds-action-menu__divider {
   height: 1px;
   margin-block: var(--ax-space-8);
-  background-color: var(--ax-border-subtleA);
+  background-color: var(--ax-border-neutral-subtleA);
 }
 
 /* -------------------------- ActionMenu indicator -------------------------- */

package/darkside/baseline/baseline.darkside.css

@@ -8,7 +8,8 @@ body,
 
 /* ---------------------------- Inline utilities ---------------------------- */
 [hidden] {
-  display: none !important;
+  /* CSS-layers reverses "!important" ordering, so we can't set this to important if we want to override it later. */
+  display: none;
 }
 
 /* https://web.dev/prefers-reduced-motion/ */

package/darkside/button.darkside.css

@@ -111,19 +111,19 @@
  * .navds-button--primary-neutral *
  *************************/
 .navds-button--primary-neutral {
-  background-color: var(--ax-bg-strong);
-  color: var(--ax-text-contrast);
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
 
   &:hover {
-    background-color: var(--ax-bg-strong-hover);
+    background-color: var(--ax-bg-neutral-strong-hover);
   }
 
   &:active {
-    background-color: var(--ax-bg-strong-pressed);
+    background-color: var(--ax-bg-neutral-strong-pressed);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    background-color: var(--ax-bg-strong);
+    background-color: var(--ax-bg-neutral-strong);
   }
 }
 
@@ -134,7 +134,7 @@
   --__axc-button-border-color: var(--ax-border-accent);
 
   background-color: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   &:hover {
     --__axc-button-border-color: var(--ax-border-accent-strong);
@@ -143,17 +143,14 @@
   }
 
   &:active {
-    --__axc-button-border-color: transparent;
-
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
     --__axc-button-border-color: var(--ax-border-accent);
 
     background-color: transparent;
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
   }
 }
 
@@ -161,28 +158,25 @@
 * .navds-button--secondary-neutral *
  **************************/
 .navds-button--secondary-neutral {
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-neutral);
 
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    --__axc-button-border-color: var(--ax-border-strong);
+    --__axc-button-border-color: var(--ax-border-neutral-strong);
 
-    background-color: var(--ax-bg-moderate-hoverA);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:active {
-    --__axc-button-border-color: transparent;
-
-    color: var(--ax-text-contrast);
-    background-color: var(--ax-bg-strong-pressed);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    --__axc-button-border-color: var(--ax-border-default);
+    --__axc-button-border-color: var(--ax-border-neutral);
 
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }
@@ -192,19 +186,18 @@
  ****************************/
 .navds-button--tertiary {
   background-color: transparent;
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     background-color: transparent;
   }
 }
@@ -214,19 +207,18 @@
  ****************************/
 .navds-button--tertiary-neutral {
   background-color: transparent;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    background-color: var(--ax-bg-moderate-hoverA);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:active {
-    background-color: var(--ax-bg-strong-pressed);
-    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
   &:is(:disabled, .navds-button--disabled) {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }

package/darkside/chat.darkside.css

@@ -23,8 +23,8 @@
   align-items: center;
   background-color: var(--ax-bg-raised);
   border-radius: var(--ax-border-radius-full);
-  border: 1px solid var(--ax-border-subtleA);
-  color: var(--ax-text-default);
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-neutral);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -62,7 +62,7 @@
   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);
+  border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-chat--small .navds-chat__bubble {
@@ -80,13 +80,13 @@
 .navds-chat--neutral {
   & .navds-chat__bubble,
   & .navds-chat__avatar {
-    background-color: var(--ax-bg-moderateA);
+    background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
 /* ------------------------------ Chat top text ----------------------------- */
 .navds-chat__top-text {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: flex;
   gap: var(--ax-space-8);
   align-items: baseline;

package/darkside/chips.darkside.css

@@ -35,7 +35,7 @@
 
 .navds-chips--readonly {
   .navds-chips__chip {
-    background-color: var(--ax-bg-moderateA);
+    background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
@@ -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-accent-strong);
+  color: var(--ax-text-accent);
 
   &:hover {
     background-color: var(--ax-bg-accent-moderate-hover);
@@ -90,21 +90,21 @@
 }
 
 .navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
-  background-color: var(--ax-bg-moderate);
-  color: var(--ax-text-default);
+  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-neutral-moderate);
+  color: var(--ax-text-neutral);
 
   &:hover {
-    background-color: var(--ax-bg-moderate-hover);
+    background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
   &[data-pressed="true"] {
     box-shadow: none;
-    background-color: var(--ax-bg-strong-pressed);
-    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
 
     &:hover {
-      background-color: var(--ax-bg-strong-hover);
+      background-color: var(--ax-bg-neutral-strong-hover);
     }
   }
 }
@@ -130,11 +130,11 @@
 }
 
 .navds-chips__removable--neutral {
-  background: var(--ax-bg-strong-pressed);
-  color: var(--ax-text-contrast);
+  background: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
 
   &:hover {
-    background: var(--ax-bg-strong-hover);
+    background: var(--ax-bg-neutral-strong-hover);
   }
 }
 

package/darkside/copybutton.darkside.css

@@ -1,108 +1,4 @@
-.navds-copybutton {
-  --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-20) var(--ax-space-12) var(--ax-space-16);
-
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  border-radius: var(--ax-border-radius-large);
-  padding: var(--__axc-copybutton-padding);
-  display: grid;
-  place-content: center;
-  background-color: transparent;
-  transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-space-12);
-  }
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-12) var(--ax-space-20);
-  }
-
-  &:hover {
-    background-color: var(--ax-bg-moderate-hoverA);
-  }
-
-  &:focus-visible {
-    outline: 3px solid var(--ax-border-focus);
-    outline-offset: 3px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: var(--ax-opacity-disabled);
-  }
-
-  &:disabled:hover {
-    background-color: transparent;
-  }
-}
-
-@media (forced-colors: active) {
-  .navds-copybutton {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
-
-    &:disabled {
-      opacity: 1;
-      border-color: GrayText;
-    }
-  }
-}
-
-/* -------------------------- CopyButton small size ------------------------- */
-.navds-copybutton--small {
-  min-height: 2rem;
-  min-width: 2rem;
-
-  --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-12) var(--ax-space-4) var(--ax-space-8);
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-space-4) var(--ax-space-8) var(--ax-space-4) var(--ax-space-12);
-  }
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-space-4);
-  }
-
-  & > .navds-copybutton__content {
-    gap: var(--ax-space-4);
-  }
-}
-
-/* ------------------------- CopyButton xsmall size ------------------------- */
-.navds-copybutton--xsmall {
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-
-  --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-8) var(--ax-space-2) var(--ax-space-4);
-
-  &.navds-copybutton--icon-right {
-    --__axc-copybutton-padding: var(--ax-space-2) var(--ax-space-4) var(--ax-space-2) var(--ax-space-8);
-  }
-
-  &.navds-copybutton--icon-only {
-    --__axc-copybutton-padding: var(--ax-space-2);
-  }
-
-  & .navds-copybutton__icon {
-    font-size: 1.25rem;
-  }
-
-  & > .navds-copybutton__content {
-    gap: var(--ax-space-2);
-  }
-}
-
-/* ----------------------------- CopyButton Icon ---------------------------- */
-.navds-copybutton__icon {
-  font-size: 1.5rem;
-  display: flex;
-}
-
-.navds-copybutton--active .navds-copybutton__icon {
+.navds-copybutton[data-active="true"] .navds-copybutton__icon {
   animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }
 
@@ -123,32 +19,3 @@
     transform: translateY(0);
   }
 }
-
-/* ---------------------------- CopyButton Action --------------------------- */
-.navds-copybutton--action {
-  color: var(--ax-text-accent);
-
-  &.navds-copybutton--active {
-    color: var(--ax-text-success);
-  }
-
-  &:disabled {
-    color: var(--ax-text-accent);
-  }
-}
-
-/* --------------------------- CopyButton Neutral --------------------------- */
-.navds-copybutton--neutral {
-  color: var(--ax-text-subtle);
-
-  &:disabled {
-    color: var(--ax-text-subtle);
-  }
-}
-
-.navds-copybutton__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ax-space-6);
-}

package/darkside/date.darkside.css

@@ -3,14 +3,14 @@
 
   .rdp-day_range_middle {
     &.rdp-day_disabled {
-      color: var(--ax-text-default);
-      background: var(--ax-bg-moderateA);
+      color: var(--ax-text-neutral);
+      background: var(--ax-bg-neutral-moderateA);
     }
 
     &.rdp-day_selected {
-      background-color: var(--ax-bg-accent-moderateA);
+      background-color: var(--ax-bg-accent-moderate-pressedA);
       box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
-      color: var(--ax-text-default);
+      color: var(--ax-text-neutral);
     }
   }
 
@@ -67,8 +67,8 @@
   .rdp-day_disabled {
     cursor: not-allowed;
     text-decoration: line-through;
-    background-color: var(--ax-bg-moderateA);
-    color: var(--ax-text-subtle);
+    background-color: var(--ax-bg-neutral-moderateA);
+    color: var(--ax-text-neutral-subtle);
   }
 
   .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
@@ -84,7 +84,7 @@
       width: 6px;
       height: 6px;
       display: block;
-      background-color: var(--ax-text-accent);
+      background-color: var(--ax-text-accent-subtle);
       border-radius: var(--ax-border-radius-full);
       content: "";
       position: absolute;
@@ -126,7 +126,7 @@
 .navds-date__caption-button {
   width: 2rem;
   height: 2rem;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -183,7 +183,7 @@
   right: 0.0625rem;
   top: 50%;
   transform: translateY(-50%);
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
   display: inline-flex;
   cursor: pointer;
   margin: 0;
@@ -237,11 +237,7 @@
 
 .navds-date__weeknumber-number {
   font-size: 0.875rem;
-  color: var(--ax-text-subtle);
-
-  .navds-date__weeknumber:active & {
-    color: var(--ax-text-contrast);
-  }
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-date__week-wrapper {

package/darkside/expansioncard.darkside.css

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