@navikt/ds-css 7.5.2 → 7.6.0

package/darkside/form/textarea.darkside.css

@@ -1,73 +1,54 @@
-[data-theme="dark"] {
-  --__ac-textarea-text: var(--a-text-on-inverted);
-  --__ac-textarea-bg: var(--a-transparent);
-  --__ac-textarea-border: var(--a-border-on-inverted);
-  --__ac-textarea-hover-border: var(--a-blue-200);
-  --__ac-textarea-placeholder: var(--a-gray-500);
-  --__ac-textarea-error-border: var(--a-red-300);
-  --__ac-textarea-counter-text: var(--a-gray-300);
-  --__ac-textarea-counter-error-text: var(--a-red-300);
-}
-
-[data-theme="light"] {
-  --__ac-textarea-text: initial;
-  --__ac-textarea-bg: initial;
-  --__ac-textarea-border: initial;
-  --__ac-textarea-hover-border: initial;
-  --__ac-textarea-placeholder: initial;
-  --__ac-textarea-error-border: initial;
-  --__ac-textarea-counter-text: initial;
-  --__ac-textarea-counter-error-text: initial;
-}
-
 .navds-textarea__input {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
-  height: var(--__ac-textarea-height);
+  height: var(--__axc-textarea-height);
   appearance: none;
-  padding: var(--a-spacing-2);
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  padding: var(--ax-spacing-2);
+  background-color: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
   resize: none;
   width: 100%;
   display: block;
-  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
-}
-
-.navds-textarea__input::placeholder {
-  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
-}
+  color: var(--ax-text-default);
 
-.navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
-}
+  &::placeholder {
+    color: var(--ax-text-subtle);
+  }
 
-.navds-textarea__input:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
-}
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-textarea__input:focus {
-    outline: 2px solid transparent;
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
     outline-offset: 2px;
-    box-shadow: var(--a-shadow-focus);
+    border-color: var(--ax-border-accent-strong);
   }
-}
 
-.navds-form-field--small .navds-textarea__input {
-  padding: var(--a-spacing-1-alt);
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  .navds-form-field--small & {
+    padding: var(--ax-spacing-1-alt);
+  }
+
+  .navds-textarea--readonly & {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+    cursor: default;
+  }
 }
 
 .navds-textarea__counter {
-  margin-top: -0.375rem;
-  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
+  margin-top: -0.25rem;
+  color: var(--ax-text-subtle);
 }
 
 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
+  color: var(--ax-text-danger);
 }
 
 .navds-textarea__sr-counter {
@@ -108,32 +89,9 @@
   scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }
 
-/**
-  Error handling
-*/
-.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
-  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
-  }
-}
-
-.navds-textarea__input:disabled {
-  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
-  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.navds-textarea--readonly .navds-textarea__input {
-  background-color: var(--a-surface-subtle);
-  border-color: var(--a-border-subtle);
-  cursor: default;
+.navds-textarea--error .navds-textarea__input:not(:disabled) {
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
+  border-color: var(--ax-border-danger);
 }
 
 @media (forced-colors: active) {

package/darkside/help-text.darkside.css

@@ -21,12 +21,6 @@
   max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info);
-  box-shadow:
-    0 0 1px 0 rgba(7 9 13/ 0.15),
-    0 1px 3px 0 rgba(7 9 13/ 0.1),
-    0 5px 12px 0 rgba(7 9 13/ 0.13),
-    0 0.5px 0 0 rgba(255 255 255/ 0) inset,
-    0 0 1px 0 rgba(255 255 255/ 0) inset;
 }
 
 .navds-help-text__icon--filled {

package/darkside/index.css

@@ -1,29 +1,35 @@
 @charset "UTF-8";
 
-@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.forms, aksel.layout, aksel.utilities;
+/* CSS is ordered by specificity, so that browsers without layers fall backs to good defaults */
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.layout, aksel.utilities;
 
-/* CSS foundations */
+/* ----------------------------- CSS foundations ---------------------------- */
 @import "./baseline/reset.darkside.css" layer(aksel.reset);
 @import "./baseline/print.darkside.css" layer(aksel.reset);
 @import "./baseline/fonts.darkside.css" layer(aksel.typography);
-@import "./baseline/theme.darkside.css" layer(aksel.theme);
 @import "./typography.darkside.css" layer(aksel.typography);
-@import "./baseline/utilities.darkside.css" layer(aksel.utilities);
 
-/* Test: Handles layers itself */
-@import "./form/index.css";
-@import "./primitives/index.css";
-
-/* Theming */
+/* --------------------------------- Theming -------------------------------- */
 @import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
+@import "./baseline/theme.darkside.css" layer(aksel.theme);
 
-/* Components */
+/* TODO: Remove this reference after stack is updated with darkside support */
 @import "../primitives/stack.css" layer(aksel.components);
-@import "./accordion.darkside.css" layer(aksel.components);
+
+/* ------------------------------- Components ------------------------------- */
 @import "./button.darkside.css" layer(aksel.components);
+@import "./chips.darkside.css" layer(aksel.components);
+
+/**
+  * `./form/index.css` edits the following components:
+  * - Button
+  * - Chips
+  * To avoid specificity conflicts, we import those components before form.
+*/
+@import "./form/index.css" layer(aksel.components);
+@import "./accordion.darkside.css" layer(aksel.components);
 @import "./alert.darkside.css" layer(aksel.components);
 @import "./chat.darkside.css" layer(aksel.components);
-@import "./chips.darkside.css" layer(aksel.components);
 @import "./copybutton.darkside.css" layer(aksel.components);
 @import "./dropdown.darkside.css" layer(aksel.components);
 @import "./action-menu.darkside.css" layer(aksel.components);
@@ -50,3 +56,9 @@
 @import "./table.darkside.css" layer(aksel.components);
 @import "./tabs.darkside.css" layer(aksel.components);
 @import "./list.darkside.css" layer(aksel.components);
+
+/* --------------------------------- Layout --------------------------------- */
+@import "./primitives/index.css" layer(aksel.layout);
+
+/* --------------------------------- Utility -------------------------------- */
+@import "./baseline/utilities.darkside.css" layer(aksel.utilities);

package/darkside/internalheader.darkside.css

@@ -1,10 +1,9 @@
 .navds-internalheader {
   display: flex;
   align-self: stretch;
-  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
+  background: var(--ax-bg-raised);
   min-height: 3rem;
-
-  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+  border-bottom: 1px solid var(--ax-border-subtleA);
 }
 
 @media (forced-colors: active) {
@@ -13,18 +12,6 @@
     border: solid 1px ButtonText;
     color: ButtonText;
   }
-
-  .navds-internalheader a:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-
-  .navds-internalheader .navds-internalheader__button:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
 }
 
 .navds-internalheader__title {
@@ -32,25 +19,34 @@
   overflow: visible;
   background: transparent;
   font: inherit;
-  font-weight: var(--a-font-weight-bold);
+  font-weight: var(--ax-font-weight-bold);
   line-height: normal;
   text-align: left;
-  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
-  border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  padding-block: 0;
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
+  border-right: 1px solid var(--ax-border-subtleA);
   display: flex;
   align-items: center;
   text-decoration: none;
   margin: 0;
-  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
-}
+  color: var(--ax-text-default);
 
-button.navds-internalheader__title {
-  cursor: pointer;
+  &:is(button) {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &:is(:hover, :active):not(button, a) {
+    background: initial;
+  }
 }
 
 .navds-internalheader__user {
-  padding: 0 var(--a-spacing-5);
-  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  padding: 0 var(--ax-spacing-5);
+  border-left: 1px solid var(--ax-border-subtleA);
   display: flex;
   align-items: center;
 }
@@ -58,7 +54,7 @@ button.navds-internalheader__title {
 .navds-internalheader__button {
   border: none;
   margin: 0;
-  padding: 0 var(--a-spacing-3);
+  padding: 0 var(--ax-spacing-3);
   overflow: visible;
   background: transparent;
   font: inherit;
@@ -68,38 +64,38 @@ button.navds-internalheader__title {
   display: flex;
   align-items: center;
   justify-self: center;
-  gap: var(--a-spacing-2);
-  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
-  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
-}
+  gap: var(--ax-spacing-2);
+  border-left: 1px solid var(--ax-border-subtleA);
+  color: var(--ax-text-default);
 
-a.navds-internalheader__title:hover,
-button.navds-internalheader__title:hover,
-.navds-internalheader__button:hover {
-  background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
+  &:hover {
+    background: var(--ax-bg-neutral-moderate-hover);
+  }
 }
 
-.navds-internalheader__title:focus-visible,
-.navds-internalheader__button:focus-visible {
-  box-shadow: var(--navds-internalheader-focus);
-  outline: none;
+@media (forced-colors: active) {
+  .navds-internalheader__button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    outline: 1px solid highlight;
+    isolation: isolate;
+  }
 }
 
-@supports not selector(:focus-visible) {
-  .navds-internalheader__title:focus,
-  .navds-internalheader__button:focus {
-    box-shadow: var(--navds-internalheader-focus);
-    outline: none;
+.navds-internalheader__title,
+.navds-internalheader__button {
+  &:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
   }
-}
 
-a.navds-internalheader__title:active,
-button.navds-internalheader__title:active,
-.navds-internalheader__button:active {
-  background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
+  &:active {
+    background: var(--ax-bg-neutral-moderate-pressed);
+  }
 }
 
 .navds-internalheader__user-button {
-  padding-left: var(--a-spacing-5);
-  gap: var(--a-spacing-4);
+  padding-left: var(--ax-spacing-5);
+  gap: var(--ax-spacing-4);
 }

package/darkside/modal.darkside.css

@@ -8,10 +8,7 @@
   background-color: var(--__axc-modal-bg);
   border: 1px solid var(--ax-border-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
-  box-shadow:
-    0 0 1px 0 rgb(0 0 0/ 0.08),
-    0 2px 5px 0 rgb(0 0 0/ 0.15),
-    0 10px 24px 0 rgb(0 0 0/ 0.18);
+  box-shadow: var(--ax-shadow-dialog);
   padding: 0;
   position: fixed;
   max-height: 100%;

package/darkside/popover.darkside.css

@@ -1,10 +1,7 @@
 .navds-popover {
   z-index: 1000;
   background: var(--ax-bg-raised);
-  box-shadow:
-    0 0 1px 0 rgba(7 9 13/ 0.02),
-    0 2px 5px 0 rgba(7 9 13/ 0.1),
-    0 5px 12px 0 rgba(7 9 13/ 0.12);
+  box-shadow: var(--ax-shadow-dialog);
   border: 1px solid var(--ax-border-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
 

package/darkside/primitives/index.css

@@ -1,36 +1,32 @@
-@layer aksel.layout.component, aksel.layout.base;
+@import "./base.darkside.css";
+@import "./box.darkside.css";
+@import "./bleed.darkside.css";
+@import "./page.darkside.css";
+@import "./hgrid.darkside.css";
+@import "./stack.darkside.css";
+@import "./responsive.darkside.css";
 
-@import "./base.darkside.css" layer(aksel.layout.base);
-@import "./box.darkside.css" layer(aksel.layout.component);
-@import "./bleed.darkside.css" layer(aksel.layout.component);
-@import "./page.darkside.css" layer(aksel.layout.component);
-@import "./hgrid.darkside.css" layer(aksel.layout.component);
-@import "./stack.darkside.css" layer(aksel.layout.component);
-@import "./responsive.darkside.css" layer(aksel.layout.component);
-
-/* Custom override to avoid having to edit react-syntax in Primtives */
-@layer aksel.layout {
-  :root {
-    --a-spacing-1-alt: var(--ax-spacing-1-alt);
-    --a-spacing-05: var(--ax-spacing-05);
-    --a-spacing-32: var(--ax-spacing-32);
-    --a-spacing-24: var(--ax-spacing-24);
-    --a-spacing-20: var(--ax-spacing-20);
-    --a-spacing-18: var(--ax-spacing-18);
-    --a-spacing-16: var(--ax-spacing-16);
-    --a-spacing-14: var(--ax-spacing-14);
-    --a-spacing-12: var(--ax-spacing-12);
-    --a-spacing-11: var(--ax-spacing-11);
-    --a-spacing-10: var(--ax-spacing-10);
-    --a-spacing-9: var(--ax-spacing-9);
-    --a-spacing-8: var(--ax-spacing-8);
-    --a-spacing-7: var(--ax-spacing-7);
-    --a-spacing-6: var(--ax-spacing-6);
-    --a-spacing-5: var(--ax-spacing-5);
-    --a-spacing-4: var(--ax-spacing-4);
-    --a-spacing-3: var(--ax-spacing-3);
-    --a-spacing-2: var(--ax-spacing-2);
-    --a-spacing-1: var(--ax-spacing-1);
-    --a-spacing-0: var(--ax-spacing-0);
-  }
+/* TODO: Custom override to avoid having to edit react-syntax in Primtives. Remove after fix */
+:root {
+  --a-spacing-1-alt: var(--ax-spacing-1-alt);
+  --a-spacing-05: var(--ax-spacing-05);
+  --a-spacing-32: var(--ax-spacing-32);
+  --a-spacing-24: var(--ax-spacing-24);
+  --a-spacing-20: var(--ax-spacing-20);
+  --a-spacing-18: var(--ax-spacing-18);
+  --a-spacing-16: var(--ax-spacing-16);
+  --a-spacing-14: var(--ax-spacing-14);
+  --a-spacing-12: var(--ax-spacing-12);
+  --a-spacing-11: var(--ax-spacing-11);
+  --a-spacing-10: var(--ax-spacing-10);
+  --a-spacing-9: var(--ax-spacing-9);
+  --a-spacing-8: var(--ax-spacing-8);
+  --a-spacing-7: var(--ax-spacing-7);
+  --a-spacing-6: var(--ax-spacing-6);
+  --a-spacing-5: var(--ax-spacing-5);
+  --a-spacing-4: var(--ax-spacing-4);
+  --a-spacing-3: var(--ax-spacing-3);
+  --a-spacing-2: var(--ax-spacing-2);
+  --a-spacing-1: var(--ax-spacing-1);
+  --a-spacing-0: var(--ax-spacing-0);
 }

package/darkside/read-more.darkside.css

@@ -1,3 +1,11 @@
+.navds-read-more {
+  --__axc-read-more-icon-size: 1.5rem;
+  --__axc-read-more-pi-start: 0px;
+  --__axc-read-more-pi-end: var(--ax-spacing-1);
+  --__axc-read-more-pb: var(--ax-spacing-1);
+}
+
+/* ----------------------------- ReadMore Button ---------------------------- */
 .navds-read-more__button {
   cursor: pointer;
   margin: 0;
@@ -5,87 +13,90 @@
   background: none;
   display: flex;
   align-items: flex-start;
-  gap: var(--a-spacing-05);
-  color: var(--ac-read-more-text, var(--a-text-action));
-  border-radius: var(--a-border-radius-small);
-  padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-05);
+  gap: var(--ax-spacing-1);
+  color: var(--ax-text-accent);
+  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
+  padding-block: var(--__axc-read-more-pb);
   text-align: start;
-}
-
-.navds-read-more--small .navds-read-more__button {
-  padding: var(--a-spacing-05) var(--a-spacing-1-alt) var(--a-spacing-05) var(--a-spacing-05);
-}
 
-@media (forced-colors: active) {
-  .navds-read-more__button {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
   }
 
-  .navds-read-more__button.navds-read-more__button:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  &[data-state="open"] .navds-read-more__expand-icon {
+    transform: rotateX(-180deg);
   }
 }
 
-.navds-read-more__button:hover {
-  background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
-  color: var(--ac-read-more-hover-text, var(--a-text-action-hover));
-}
+.navds-read-more:is([data-volume="low"], :not([data-volume])) {
+  & .navds-read-more__button {
+    border-radius: var(--ax-border-radius-medium);
 
-.navds-read-more__button:active {
-  background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
+    &:hover {
+      background-color: var(--ax-bg-neutral-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
+  }
 }
 
-.navds-read-more__button:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
+.navds-read-more[data-volume="high"] {
+  & .navds-read-more__button {
+    background-color: var(--ax-bg-accent-moderate);
+    border-radius: var(--ax-border-radius-full);
 
-@supports not selector(:focus-visible) {
-  .navds-read-more__button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+    &:hover {
+      background-color: var(--ax-bg-accent-moderate-hoverA);
+      color: var(--ax-text-accent-strong);
+    }
   }
-}
 
-.navds-read-more__content {
-  margin-top: var(--a-spacing-1);
-  border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
-  margin-left: 0.8125rem;
-  padding-left: 0.8125rem;
-  color: var(--a-text-default);
-}
+  &.navds-read-more--large {
+    --__axc-read-more-pi-start: var(--ax-spacing-3);
+    --__axc-read-more-pi-end: var(--ax-spacing-6);
+  }
 
-.navds-read-more--small .navds-read-more__content {
-  margin-left: 0.6875rem;
-  padding-left: 0.6875rem;
+  &.navds-read-more--small,
+  &.navds-read-more--medium {
+    --__axc-read-more-pi-start: var(--ax-spacing-2);
+    --__axc-read-more-pi-end: var(--ax-spacing-4);
+  }
 }
 
-.navds-read-more__content--closed {
-  display: none;
+/* ---------------------------- ReadMore Content ---------------------------- */
+.navds-read-more__content {
+  margin-top: var(--ax-spacing-2);
+  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  color: var(--ax-text-default);
+  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-spacing-1));
+
+  &[data-state="closed"] {
+    display: none;
+  }
 }
 
 .navds-read-more__expand-icon {
-  font-size: 1.5rem;
+  font-size: var(--__axc-read-more-icon-size);
   flex-shrink: 0;
+  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-read-more--small .navds-read-more__expand-icon {
-  font-size: 1.25rem;
+/* ----------------------------- ReadMore Sizes ----------------------------- */
+.navds-read-more--large {
+  --__axc-read-more-pb: var(--ax-spacing-3);
 }
 
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  position: relative;
-  top: 1px;
+.navds-read-more--small {
+  --__axc-read-more-icon-size: 1.25rem;
+  --__axc-read-more-pb: var(--ax-spacing-05);
 }
 
-.navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
-  transform: rotate(-180deg);
-}
-
-.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
-  top: -1px;
+/* ------------------------- ReadMore high-contrast ------------------------- */
+@media (forced-colors: active) {
+  .navds-read-more__button {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
 }