@navikt/ds-css 7.4.3 → 7.5.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 7.5.0
+
 ## 7.4.3
 
 ### Patch Changes

package/darkside/accordion.darkside.css

@@ -1,198 +1,182 @@
-.navds-accordion {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
-}
-
-/*************************
- * Header *
- *************************/
+/* ---------------------------- Accordion header ---------------------------- */
 .navds-accordion__header {
-  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-
   width: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-3);
-  margin: 0;
+  gap: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3);
   text-align: left;
-  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
   cursor: pointer;
   border: none;
   position: relative;
-  box-shadow: var(--__ac-accordion-header-shadow);
-  z-index: 1;
-}
+  border-radius: var(--ax-border-radius-large);
+  background: transparent;
+  color: var(--ax-text-accent);
 
-.navds-accordion__header:hover {
-  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
-  text-decoration: underline;
-  color: var(--ac-accordion-header-text-hover, inherit);
-}
+  > * {
+    font-weight: var(--ax-font-weight-regular);
+  }
 
-.navds-accordion--small .navds-accordion__header {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
-}
+  @media (forced-colors: active) {
+    border: 1px solid buttonborder;
+    background-color: canvas;
+    color: canvastext;
+  }
 
-.navds-accordion--medium .navds-accordion__header {
-  padding: var(--a-spacing-3);
-}
+  &:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+    color: var(--ax-text-accent-strong);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    > .navds-accordion__icon-wrapper {
+      background-color: var(--ax-bg-accent-strong-hover);
+      color: var(--ax-text-accent-contrast);
+    }
+
+    @media (forced-colors: active) {
+      background-color: canvas;
+      border: 1px solid highlight;
+      color: highlight;
+    }
+  }
 
-.navds-accordion--large .navds-accordion__header {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    z-index: 1;
 
-.navds-accordion__item:last-child > :where(.navds-accordion__header) {
-  box-shadow:
-    var(--__ac-accordion-header-shadow),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
 }
 
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+.navds-accordion--small .navds-accordion__header {
+  padding-block: var(--a-spacing-2);
 }
 
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+.navds-accordion__header::before,
+.navds-accordion__header::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--ax-border-subtleA);
 }
 
-.navds-accordion__item--open > :where(.navds-accordion__header) {
-  box-shadow: var(--__ac-accordion-header-shadow);
+.navds-accordion__item:last-child > .navds-accordion__content {
+  border-bottom: 1px solid transparent;
 }
 
-.navds-accordion__header:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 3px;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-large);
+.navds-accordion__header::after {
+  top: initial;
+  bottom: 0;
 }
 
-@supports not selector(:focus-visible) {
-  .navds-accordion__header:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-    border-radius: var(--a-border-radius-large);
-  }
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after,
+.navds-accordion__item:not(:last-child) > .navds-accordion__header::after {
+  display: none;
 }
 
-.navds-accordion__header-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible))
+  + .navds-accordion__item
+  > .navds-accordion__header::before {
+  display: none;
 }
 
-/*************************
- * Icon *
- *************************/
+/* ------------------------- Accordion chevron icon ------------------------- */
 .navds-accordion__icon-wrapper {
-  display: grid;
-  place-content: center;
-  border-radius: var(--a-border-radius-medium);
-  height: var(--a-spacing-6);
-  width: var(--a-spacing-6);
+  border-radius: var(--ax-border-radius-large);
+  width: 22px;
+  height: 22px;
   align-self: center;
-}
-
-.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
-  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
+  background-color: var(--ax-bg-accent-moderateA);
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-accordion__header-chevron {
-  border-radius: var(--a-border-radius-medium);
-  font-size: 1.5rem;
-  height: 1.75rem;
+  height: inherit;
+  width: inherit;
   flex-shrink: 0;
-  transition: transform 150ms ease-in-out;
-  align-self: center;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
-  transform: translateY(1px);
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron {
+  transform: rotateX(-180deg);
 }
 
-.navds-accordion__item--open
-  > :where(.navds-accordion__header)
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(0) rotate(-180deg);
-}
-
-.navds-accordion__item--open
-  > :where(.navds-accordion__header):hover
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(-1px) rotate(-180deg);
-}
-
-/*************************
- * Variant/Default *
- *************************/
-.navds-accordion__item--open {
-  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
-}
-
-/*************************
- * Variant/Neutral *
- *************************/
-.navds-accordion__item--open.navds-accordion__item--neutral {
-  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
-}
-
-/*************************
- * Content *
- *************************/
-
+/* ---------------------------- Accordion content --------------------------- */
 .navds-accordion__content {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
-  animation: fadeAccordionContent 250ms ease;
-}
-
-.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
-}
+  --__acx-accordion-content-line-width: 2px;
 
-.navds-accordion__content--closed {
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
   display: none;
+  overflow: hidden;
+  padding-block: 0;
+  max-height: 0;
+  border-color: transparent;
+  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
+  animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-accordion__item--no-animation :where(.navds-accordion__content) {
+.navds-accordion__item--no-animation {
   animation: none;
 }
 
-@keyframes fadeAccordionContent {
+@keyframes navds-accordion-content-animation {
   0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
+    opacity: 0.01;
   }
 
-  40% {
-    opacity: 0.7;
+  20% {
+    opacity: 0.01;
   }
 
   100% {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
-@media (forced-colors: active) {
-  .navds-accordion__header {
-    border: 1px solid buttonborder;
-    background-color: canvas;
-    color: canvastext;
+.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+}
+
+.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);
+
+  /* Aligns content with heading-section */
+  padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5);
+
+  @media (forced-colors: active) {
+    border-left: 1px solid canvastext;
   }
+}
 
-  .navds-accordion__header:hover {
-    background-color: canvas;
-    border: 1px solid highlight;
-    color: highlight;
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
+  display: block;
+  opacity: 1;
+  overflow: visible;
+  max-height: fit-content;
+  padding-block: var(--ax-spacing-2);
+  padding-block-end: var(--ax-spacing-6);
+  border-color: var(--ax-border-subtleA);
+}
+
+@starting-style {
+  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
+    padding-block: 0;
+    max-height: 0;
+    border-color: transparent;
   }
 }

package/darkside/action-menu.darkside.css

@@ -1,152 +1,137 @@
+/* --------------------------- ActionMenu content --------------------------- */
 .navds-action-menu__content {
   overflow: hidden;
-  box-shadow: var(--a-shadow-medium);
-  border-radius: var(--a-border-radius-large);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-subtleA);
+
+  /* TODO: Use token here when added */
+  box-shadow:
+    0 0 1px 0 rgb(7 9 13/ 0.02),
+    0 2px 5px 0 rgb(7 9 13/ 0.1),
+    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
+
+  &[data-state="open"] {
+    &[data-side="bottom"] {
+      @starting-style {
+        transform: translateY(-4px);
+      }
+    }
+
+    &[data-side="top"] {
+      @starting-style {
+        transform: translateY(4px);
+      }
+    }
+
+    &[data-side="right"] {
+      @starting-style {
+        transform: translateX(-4px);
+      }
+    }
+
+    &[data-side="left"] {
+      @starting-style {
+        transform: translateX(4px);
+      }
+    }
+  }
 }
 
-/* stylelint-disable csstools/value-no-unknown-custom-properties */
 .navds-action-menu__content > .navds-action-menu__content-inner {
-  --__ac-action-menu-content-p: var(--a-spacing-2);
-  --__ac-action-menu-item-pr: var(--a-spacing-3);
-  --__ac-action-menu-item-pl: var(--a-spacing-2);
-  --__ac-action-menu-item-height: 2rem;
+  --__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-item-height: 2rem;
 
-  border-radius: var(--a-border-radius-large);
-  background-color: var(--a-surface-default);
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
   min-width: 128px;
   max-width: min(95vw, 640px);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   transform-origin: var(--__ac-action-menu-content-transform-origin);
   animation-duration: 160ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  padding: var(--__ac-action-menu-content-p);
+  padding: var(--__axc-action-menu-content-p);
   overflow: auto;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   max-height: var(--__ac-action-menu-content-available-height);
 }
 
-.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
-  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
-  animation-name: aksel-action-from-top, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
-  animation-name: aksel-action-from-left, aksel-action-fade-in;
-}
-
-.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
-  animation-name: aksel-action-from-right, aksel-action-fade-in;
-}
-
-@keyframes aksel-action-from-bottom {
-  from {
-    transform: translateY(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-top {
-  from {
-    transform: translateY(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-left {
-  from {
-    transform: translateX(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-from-right {
-  from {
-    transform: translateX(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes aksel-action-fade-in {
-  from {
-    opacity: 0.01;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
+/* ----------------------------- ActionMenu Item ---------------------------- */
 .navds-action-menu__item {
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-2);
-  min-height: var(--__ac-action-menu-item-height);
+  gap: var(--ax-spacing-2);
+  min-height: var(--__axc-action-menu-item-height);
   cursor: default;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--ax-border-radius-medium);
   position: relative;
-  padding-left: var(--__ac-action-menu-item-pl);
-  padding-right: var(--__ac-action-menu-item-pr);
-  font-size: var(--a-font-size-medium);
-  scroll-margin-block: var(--__ac-action-menu-content-p);
+  padding-left: var(--__axc-action-menu-item-pl);
+  padding-right: var(--__axc-action-menu-item-pr);
+  font-size: var(--ax-font-size-medium);
+  scroll-margin-block: var(--__axc-action-menu-content-p);
   line-height: 1.5;
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
   text-decoration: none;
-}
 
-.navds-action-menu__item svg {
-  flex-shrink: 0;
+  & svg {
+    flex-shrink: 0;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
+  }
+
+  &[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
 .navds-action-menu__item--has-icon {
-  --__ac-action-menu-item-pl: var(--a-spacing-6);
+  --__axc-action-menu-item-pl: var(--ax-spacing-6);
 }
 
 .navds-action-menu__sub-trigger {
-  --__ac-action-menu-item-pr: var(--a-spacing-05);
-}
+  --__axc-action-menu-item-pr: var(--ax-spacing-05);
 
-.navds-action-menu__item:focus {
-  outline: none;
-  background-color: var(--a-surface-action-subtle-hover);
-  color: var(--a-text-default);
+  &[data-state="open"] {
+    background-color: var(--ax-bg-neutral-moderate-pressed);
+  }
+
+  &:focus {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
 }
 
 .navds-action-menu__item--danger {
-  color: var(--a-text-danger);
-}
+  color: var(--ax-text-danger);
 
-.navds-action-menu__item--danger:focus {
-  background-color: var(--a-surface-danger-subtle);
+  &:focus {
+    background-color: var(--ax-bg-danger-moderate-hoverA);
+    color: var(--ax-text-danger-strong);
+  }
 }
 
+/* ---------------------------- ActionMenu marker --------------------------- */
 .navds-action-menu__marker {
   display: flex;
   align-items: center;
-  gap: var(--a-spacing-1);
+  gap: var(--ax-spacing-1);
 }
 
 .navds-action-menu__marker--right {
   margin-left: auto;
-  padding-left: var(--a-spacing-4);
+  padding-left: var(--ax-spacing-4);
 }
 
 .navds-action-menu__marker--left {
   position: absolute;
   left: 0;
-  width: var(--__ac-action-menu-item-pl);
+  width: var(--__axc-action-menu-item-pl);
   display: inline-flex;
   justify-content: center;
 }
@@ -156,47 +141,42 @@
   flex-shrink: 0;
 }
 
+/* --------------------------- ActionMenu shortcut -------------------------- */
 .navds-action-menu__shortcut {
-  background-color: var(--a-surface-neutral-subtle);
-  color: var(--a-text-default);
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-1);
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-small);
+  padding: 0 var(--ax-spacing-1);
   min-width: 1.125rem;
   height: 1.125rem;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--a-font-size-small);
+  font-size: var(--ax-font-size-small);
 }
 
+/* ---------------------------- ActionMenu Grouping ---------------------------- */
 .navds-action-menu__label {
   display: flex;
   align-items: center;
-  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
-  padding-right: var(--__ac-action-menu-item-pr);
-  padding-left: var(--__ac-action-menu-item-pl);
-  color: var(--a-text-subtle);
-  border-radius: var(--a-border-radius-medium);
+  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);
+  border-radius: var(--ax-border-radius-medium);
   user-select: none;
   cursor: default;
-  font-size: var(--a-font-size-small);
+  font-size: var(--ax-font-size-small);
 }
 
 .navds-action-menu__divider {
   height: 1px;
-  margin-block: var(--a-spacing-2);
-  background-color: var(--a-border-divider);
+  margin-block: var(--ax-spacing-2);
+  background-color: var(--ax-border-subtleA);
 }
 
-.navds-action-menu__indicator {
-  display: grid;
-  place-content: center;
-}
-
-.navds-action-menu__indicator-icon {
-  font-size: 14px;
-}
+/* -------------------------- ActionMenu indicator -------------------------- */
 
 .navds-action-menu__indicator-icon--unchecked,
 .navds-action-menu__indicator-icon--checked,
@@ -204,24 +184,23 @@
   display: none;
 }
 
-.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
-  display: block;
-}
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
 
-.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
-  display: block;
-}
+  &[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+    display: block;
+  }
 
-.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
-  display: block;
-}
+  &[data-state="checked"] .navds-action-menu__indicator-icon--checked {
+    display: block;
+  }
 
-.navds-action-menu__item:where([aria-disabled="true"]) {
-  color: var(--a-text-subtle);
-  opacity: 0.5;
-  pointer-events: none;
+  &[data-state="indeterminate"] .navds-action-menu__indicator-icon--indeterminate {
+    display: block;
+  }
 }
 
-.navds-action-menu__sub-trigger:where([data-state="open"]) {
-  background-color: var(--a-surface-neutral-subtle);
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
 }