@navikt/ds-css 7.5.3 → 7.7.0

package/darkside/form/switch.darkside.css

@@ -4,16 +4,11 @@
   width: fit-content;
 }
 
-.navds-switch--right {
-  width: auto;
-}
-
 .navds-switch--small {
-  position: relative;
   min-height: 2rem;
 }
 
-/* Input */
+/* ------------------------------ Switch Input ------------------------------ */
 .navds-switch__input {
   cursor: pointer;
   position: absolute;
@@ -22,17 +17,17 @@
   height: 3rem;
   opacity: 0;
   top: 0;
-}
 
-.navds-switch--small > .navds-switch__input {
-  height: 2rem;
-  top: 0;
+  .navds-switch--small > & {
+    height: 2rem;
+    top: 0;
+  }
 }
 
-/* Label */
+/* -------------------------- Switch content/label -------------------------- */
 .navds-switch__label-wrapper {
   cursor: pointer;
-  color: var(--a-text-default);
+  color: var(--ax-text-default);
 }
 
 .navds-switch__content {
@@ -40,134 +35,135 @@
   flex-direction: column;
   gap: 0.125rem;
   padding: 0.75rem 0 0.75rem 3.25rem;
-}
 
-.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: 0.75rem 3.25rem 0.75rem 0;
-}
+  .navds-switch--right & {
+    padding: 0.75rem 3.25rem 0.75rem 0;
+  }
 
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
-}
+  .navds-switch--small & {
+    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem;
+  }
 
-.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+  .navds-switch--right.navds-switch--small & {
+    padding: calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2) - var(--ax-spacing-05)) 0;
+  }
 }
 
-.navds-switch--with-description,
-.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
+.navds-switch--with-description {
   padding-bottom: 0;
 }
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ac-switch-action, var(--a-surface-action-selected));
+  color: var(--ax-text-accent-strong);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
   color: inherit;
 }
 
-/* Track */
+/* ------------------------------ Switch Track ------------------------------ */
 .navds-switch__track {
   width: 2.75rem;
   height: 1.5rem;
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  background-color: var(--ax-bg-input);
   position: absolute;
-  top: var(--a-spacing-3);
+  top: var(--ax-spacing-3);
   left: 0;
-  border-radius: var(--a-border-radius-full);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.navds-switch--small > .navds-switch__track {
-  top: var(--a-spacing-1);
-}
-
-.navds-switch--right > .navds-switch__input,
-.navds-switch--right > .navds-switch__track {
-  right: 0;
-  left: auto;
-}
-
-.navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
-}
-
-.navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
-}
+  border-radius: var(--ax-border-radius-full);
+  border: 2px solid var(--ax-border-default);
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  .navds-switch--small > & {
+    top: var(--ax-spacing-1);
+  }
 
-.navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
-}
+  .navds-switch__input:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
 
-.navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
-}
+  .navds-switch__input:hover:checked ~ & {
+    background-color: var(--ax-bg-accent-strong-hover);
+    border-color: var(--ax-bg-accent-strong-hover);
+  }
 
-.navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
-}
+  .navds-switch__input:disabled ~ & {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+  }
 
-.navds-switch__input:focus-visible ~ .navds-switch__track {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
+  .navds-switch__input:checked:disabled ~ & {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    border-color: var(--ax-bg-accent-strong-pressed);
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-switch__input:focus ~ .navds-switch__track {
-    outline: 2px solid transparent;
-    box-shadow:
-      0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
+  .navds-switch__input:focus-visible ~ & {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
   }
 }
 
-/* Thumb */
+/* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
-  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
-  border-radius: var(--a-border-radius-full);
-  width: 1.25rem;
-  height: 1.25rem;
+  background-color: var(--ax-bg-neutral-strong);
+  border-radius: var(--ax-border-radius-full);
+  width: 1.125rem;
+  height: 1.125rem;
   position: absolute;
   transform: translateX(0);
-  left: var(--a-spacing-05);
-  top: var(--a-spacing-05);
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
+  left: 0.0625rem;
+  top: 0.0625rem;
+
+  .navds-switch__input:checked ~ .navds-switch__track > & {
+    background-color: var(--ax-bg-raised);
+    transform: translateX(1.25rem);
+    color: var(--ax-text-accent-strong);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0;
+    top: 0;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > & > .navds-switch__checkmark {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
-.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
-  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+.navds-switch__checkmark {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0.125rem);
+  .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.0625rem);
   }
 
-  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.125rem);
+  .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.19rem);
   }
 }
 
-.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(0);
-}
+.navds-switch--right {
+  width: auto;
 
-.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
-  transform: translateX(1.25rem);
+  & .navds-switch__input,
+  & .navds-switch__track {
+    right: 0;
+    left: auto;
+  }
 }
 
-/* Disabled */
+/* -------------------------- Switch Disabled-state ------------------------- */
 .navds-switch__input:disabled {
   appearance: none;
 }
@@ -181,47 +177,51 @@
   cursor: not-allowed;
 }
 
-/* Readonly */
-.navds-switch--readonly > .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
-.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
-  background-color: var(--a-surface-neutral-moderate);
-}
-
-.navds-switch--readonly > .navds-switch__label-wrapper,
-.navds-switch--readonly > .navds-switch__input {
-  cursor: default;
-}
+/* -------------------------- Switch Readonly state ------------------------- */
+.navds-switch--readonly {
+  & > .navds-switch__track,
+  & > .navds-switch__input:hover ~ .navds-switch__track,
+  & > .navds-switch__input:checked ~ .navds-switch__track,
+  & > .navds-switch__input:checked:hover ~ .navds-switch__track {
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
+  }
 
-.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch--readonly .navds-switch__label-wrapper:hover {
-  color: var(--a-text-default);
-}
+  & > .navds-switch__label-wrapper,
+  & > .navds-switch__input {
+    cursor: default;
+  }
 
-.navds-switch--readonly .navds-switch__label {
-  display: inline-flex;
-}
+  & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  & .navds-switch__label-wrapper:hover {
+    color: var(--ax-text-default);
+  }
 
-.navds-switch--readonly .navds-switch__thumb {
-  background-color: var(--a-surface-subtle);
-  box-shadow: 0 0 0 2px var(--a-border-default);
-}
+  & .navds-switch__label {
+    display: inline-flex;
+  }
 
-.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-  color: var(--a-icon-subtle);
-}
+  & .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(0);
+  & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
   }
 
-  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
-    transform: translateX(1.25rem);
+  @media (hover: hover) and (pointer: fine) {
+    & > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(0);
+    }
+
+    & > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+      transform: translateX(1.25rem);
+    }
   }
 }
 
+/* ------------------------ Switch Forced colors mode ----------------------- */
 @media (forced-colors: active) {
   .navds-switch__input:hover ~ .navds-switch__label-wrapper,
   .navds-switch__label-wrapper:hover {
@@ -230,7 +230,7 @@
 
   .navds-switch__thumb,
   .navds-switch--readonly .navds-switch__thumb {
-    background-color: fieldtext;
+    background-color: fieldtext !important;
   }
 
   .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
@@ -238,13 +238,6 @@
     color: field;
   }
 
-  .navds-switch__track {
-    width: calc(2.75rem + 4px);
-    height: calc(1.5rem + 4px);
-    top: var(--a-spacing-3);
-    border: 2px solid fieldtext;
-  }
-
   .navds-switch__input:focus-visible ~ .navds-switch__track {
     outline: 2px solid highlight;
     outline-offset: 2px;
@@ -259,7 +252,7 @@
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
-    border-color: graytext;
+    border-color: graytext !important;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,

package/darkside/form/text-field.darkside.css

@@ -25,7 +25,7 @@
   }
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral);
   }
 
   &[size] {
@@ -38,7 +38,7 @@
   min-height: 2rem;
 }
 
-.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+.navds-text-field--error .navds-text-field__input:not(:disabled) {
   border-color: var(--ax-border-danger);
   box-shadow: 0 0 0 1px var(--ax-border-danger);
 }

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,30 +1,34 @@
 @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 */
-@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 "./date.darkside.css" layer(aksel.components);
 @import "./dropdown.darkside.css" layer(aksel.components);
 @import "./action-menu.darkside.css" layer(aksel.components);
 @import "./expansioncard.darkside.css" layer(aksel.components);
@@ -36,7 +40,6 @@
 @import "./modal.darkside.css" layer(aksel.components);
 @import "./pagination.darkside.css" layer(aksel.components);
 @import "./popover.darkside.css" layer(aksel.components);
-@import "./date.darkside.css" layer(aksel.components);
 @import "./tag.darkside.css" layer(aksel.components);
 @import "./timeline.darkside.css" layer(aksel.components);
 @import "./tooltip.darkside.css" layer(aksel.components);
@@ -50,3 +53,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);