@navikt/ds-css 7.10.0 → 7.12.0

package/darkside/form/form-summary.darkside.css

@@ -1,13 +1,13 @@
 .navds-form-summary {
   overflow: hidden;
-  border: 1px solid var(--ax-border-subtleA);
+  border: 1px solid var(--ax-border-neutral-subtleA);
   border-radius: var(--ax-border-radius-xlarge);
   background: var(--ax-bg-raised);
 }
 
 .navds-form-summary__header {
-  background: var(--ax-bg-moderateA);
-  padding: var(--ax-space-16) var(--ax-space-24);
+  background: var(--ax-bg-neutral-moderateA);
+  padding: var(--ax-space-20) var(--ax-space-20) var(--ax-space-16) var(--ax-space-20);
   display: flex;
   justify-content: space-between;
   gap: 0 var(--ax-space-12);
@@ -15,7 +15,7 @@
 
 @media (max-width: 479px) {
   .navds-form-summary__header {
-    padding: var(--ax-space-12) var(--ax-space-16);
+    padding: var(--ax-space-16) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
     flex-direction: column;
   }
 }
@@ -27,24 +27,24 @@
 }
 
 .navds-form-summary > .navds-form-summary__answers {
-  border-top: 1px solid var(--ax-border-subtleA);
+  border-top: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-form-summary__answers {
-  padding: var(--ax-space-16) var(--ax-space-20);
+  padding: var(--ax-space-16) var(--ax-space-20) var(--ax-space-20) var(--ax-space-20);
   margin: 0;
 }
 
 @media (max-width: 479px) {
   .navds-form-summary__answers {
-    padding: var(--ax-space-16);
+    padding: var(--ax-space-12) var(--ax-space-16) var(--ax-space-16) var(--ax-space-16);
   }
 }
 
 .navds-form-summary__answer:not(:last-child) {
   margin-bottom: var(--ax-space-16);
   padding-bottom: var(--ax-space-16);
-  border-bottom: 1px solid var(--ax-border-subtleA);
+  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
 }
 
 .navds-form-summary__answer:has(.navds-form-summary__answer) {

package/darkside/form/form.darkside.css

@@ -6,7 +6,7 @@
 
 .navds-form-field__description {
   margin-top: -0.375rem;
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--disabled {
@@ -19,7 +19,7 @@
 }
 
 .navds-form-field__subdescription {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-form-field--readonly > :where(.navds-form-field__label) {

package/darkside/form/radio-checkbox.darkside.css

@@ -23,8 +23,8 @@
   display: flex;
   gap: var(--ax-space-8);
 
-  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
-  --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-border: var(--ax-border-neutral-subtle);
 }
 
 .navds-checkbox__label::before,
@@ -35,7 +35,7 @@
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid var(--ax-border-default);
+  border: 2px solid var(--ax-border-neutral);
 }
 
 .navds-radio__label::before {
@@ -68,26 +68,42 @@
   height: 1.25rem;
 }
 
-.navds-checkbox__input:focus + .navds-checkbox__label::before,
-.navds-radio__input:focus + .navds-radio__label::before {
-  outline: 2px solid var(--ax-border-focus);
-  outline-offset: 2px;
-}
-
-.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+.navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio__input:focus + .navds-radio__label::after {
   content: "";
   position: absolute;
-  top: 50%;
-  transform: translate(var(--ax-space-6), -50%);
-  background-color: var(--ax-bg-default);
+  width: 100%;
+  height: calc(100% - var(--ax-space-24));
+  border-radius: var(--ax-border-radius-medium);
+  outline: 3px solid var(--ax-border-focus);
+  outline-offset: 3px;
+  pointer-events: none;
+}
+
+.navds-checkbox--small > .navds-checkbox__input:focus + .navds-checkbox__label::after,
+.navds-radio--small > .navds-radio__input:focus + .navds-radio__label::after {
+  height: calc(100% - var(--ax-space-12));
+}
+
+.navds-checkbox__icon-indeterminate {
+  display: none;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  display: block;
   width: 0.75rem;
   height: 0.25rem;
+  background-color: var(--ax-bg-default);
   border-radius: 1px;
-  flex-shrink: 0;
+  position: absolute;
+  transform: translate(var(--ax-space-6), -50%);
+  top: 50%;
+  pointer-events: none;
 }
 
-.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  transform: translate(0.25rem, -50%);
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  transform: translate(var(--ax-space-4), -50%);
+  height: 0.1875rem;
 }
 
 .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
@@ -140,8 +156,8 @@
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
-.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--ax-text-accent);
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label {
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
@@ -193,7 +209,7 @@
 
 .navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
 .navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
@@ -210,19 +226,19 @@
 }
 
 .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
-  background-color: var(--ax-bg-strong);
+  background-color: var(--ax-bg-neutral-strong);
   border-width: 0;
   box-shadow:
-    inset 0 0 0 2px var(--ax-border-subtle),
-    inset 0 0 0 8px var(--ax-bg-moderate);
+    inset 0 0 0 2px var(--ax-border-neutral-subtle),
+    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
 }
 
-.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
-  background-color: var(--ax-text-subtle);
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
+  background-color: var(--ax-text-neutral-subtle);
 }
 
 @media (forced-colors: active) {
@@ -246,7 +262,7 @@
     color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
-  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 
@@ -264,7 +280,10 @@
     background-color: var(--__axc-radio-checkbox-high-contrast-bg);
   }
 
-  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  .navds-checkbox--readonly
+    > .navds-checkbox__input:indeterminate
+    + .navds-checkbox__label
+    > .navds-checkbox__icon-indeterminate {
     background-color: var(--__axc-radio-checkbox-high-contrast-text);
   }
 

package/darkside/form/search.darkside.css

@@ -22,12 +22,12 @@
 .navds-search__wrapper {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-border-radius-large);
 
   /* We have to outline the whole container to include the Search-buttons */
   &:has(.navds-search__input:focus-visible) {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
@@ -97,13 +97,13 @@
 .navds-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
-  border-top-right-radius: var(--ax-border-radius-medium);
-  border-bottom-right-radius: var(--ax-border-radius-medium);
+  border-top-right-radius: var(--ax-border-radius-large);
+  border-bottom-right-radius: var(--ax-border-radius-large);
 }
 
 .navds-search__button-search.navds-button--secondary {
   --__axc-button-border-width: 1px;
-  --__axc-button-border-color: var(--ax-border-default);
+  --__axc-button-border-color: var(--ax-border-neutral);
 
   &:not(:hover, :active) {
     background-color: var(--ax-bg-input);
@@ -112,10 +112,6 @@
   &:hover:not(:disabled) {
     --__axc-button-border-color: var(--ax-border-accent-strong);
   }
-
-  &:active:not(:disabled) {
-    --__axc-button-border-color: transparent;
-  }
 }
 
 /* Special-case where we hover/focus input, and want the secondary-button to match input-border */

package/darkside/form/select.darkside.css

@@ -1,9 +1,9 @@
 .navds-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
-  border: 1px solid var(--ax-border-default);
-  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
+  color: var(--ax-text-neutral);
   width: 100%;
   box-sizing: border-box;
   min-height: 3rem;
@@ -18,8 +18,8 @@
   }
 
   &:focus {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
@@ -36,7 +36,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 /* ------------------------------- Select Icon ------------------------------ */
@@ -46,7 +46,7 @@
   right: var(--ax-space-8);
   pointer-events: none;
   align-self: center;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   @media (forced-colors: active) {
     & {
@@ -80,16 +80,16 @@
 /* ----------------------------- Select disabled ---------------------------- */
 .navds-select__input:disabled {
   background-color: var(--ax-bg-input);
-  border: 1px solid var(--ax-border-default);
+  border: 1px solid var(--ax-border-neutral);
   box-shadow: none;
   cursor: not-allowed;
 
   /* Chrome-fix */
   opacity: 1;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   & > option {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   @media (forced-colors: active) {
@@ -102,8 +102,8 @@
 /* ----------------------------- Select Readonly ---------------------------- */
 .navds-select--readonly {
   & .navds-select__input {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
 
     @media (forced-colors: active) {
@@ -116,6 +116,6 @@
   }
 
   & .navds-select__chevron {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 }

package/darkside/form/switch.darkside.css

@@ -27,35 +27,50 @@
 /* -------------------------- Switch content/label -------------------------- */
 .navds-switch__label-wrapper {
   cursor: pointer;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 }
 
 .navds-switch__content {
+  --__axc-switch-block-padding: 0.75rem;
+
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.75rem 0 0.75rem 3.25rem;
+  gap: var(--ax-space-2);
+  padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
   .navds-switch--right & {
-    padding: 0.75rem 3.25rem 0.75rem 0;
+    padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
   .navds-switch--small & {
-    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 0 calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem;
+    --__axc-switch-block-padding: 0.375rem;
   }
 
-  .navds-switch--right.navds-switch--small & {
-    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8) - var(--ax-space-2)) 0;
+  &.navds-switch--with-description {
+    padding-bottom: 0;
   }
-}
 
-.navds-switch--with-description {
-  padding-bottom: 0;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: calc(100% - var(--__axc-switch-block-padding) * 2);
+    border-radius: var(--ax-border-radius-medium);
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    pointer-events: none;
+  }
+
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &.navds-switch--with-description::after {
+    height: calc(100% - var(--__axc-switch-block-padding) * 1);
+  }
 }
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--ax-text-accent);
+  color: var(--ax-text-accent-subtle);
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -71,7 +86,7 @@
   top: var(--ax-space-12);
   left: 0;
   border-radius: var(--ax-border-radius-full);
-  border: 2px solid var(--ax-border-default);
+  border: 2px solid var(--ax-border-neutral);
   transition-property: background-color, border-color;
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -92,7 +107,7 @@
 
   .navds-switch__input:disabled ~ & {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
   }
 
   .navds-switch__input:checked:disabled ~ & {
@@ -100,15 +115,15 @@
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:focus-visible ~ & {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ax-bg-strong);
+  background-color: var(--ax-bg-neutral-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
   height: 1.125rem;
@@ -124,7 +139,7 @@
   .navds-switch__input:checked ~ .navds-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
-    color: var(--ax-text-accent);
+    color: var(--ax-text-accent-subtle);
     width: 1.25rem;
     height: 1.25rem;
     left: 0;
@@ -183,8 +198,8 @@
   & > .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-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
   }
 
   & > .navds-switch__label-wrapper,
@@ -194,7 +209,7 @@
 
   & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
   & .navds-switch__label-wrapper:hover {
-    color: var(--ax-text-default);
+    color: var(--ax-text-neutral);
   }
 
   & .navds-switch__label {
@@ -202,12 +217,12 @@
   }
 
   & .navds-switch__thumb {
-    background-color: var(--ax-bg-strong);
+    background-color: var(--ax-bg-neutral-strong);
   }
 
   & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-strong);
-    color: var(--ax-text-contrast);
+    background-color: var(--ax-bg-neutral-strong);
+    color: var(--ax-text-neutral-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -238,9 +253,9 @@
     color: field;
   }
 
-  .navds-switch__input:focus-visible ~ .navds-switch__track {
-    outline: 2px solid highlight;
-    outline-offset: 2px;
+  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content::after,
+  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 3px solid highlight;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) {
@@ -248,7 +263,7 @@
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
-    background-color: graytext;
+    background-color: graytext !important;
   }
 
   .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {

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

@@ -2,11 +2,11 @@
   appearance: none;
   padding: var(--ax-space-8);
   background: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
-  border: 1px solid var(--ax-border-default);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
   min-height: 3rem;
   width: 100%;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &:hover {
     border-color: var(--ax-border-accent-strong);
@@ -14,18 +14,18 @@
 
   &:focus-visible {
     border-color: var(--ax-border-accent-strong);
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
   &:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   &[size] {
@@ -44,8 +44,8 @@
 }
 
 .navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--ax-bg-moderate);
-  border-color: var(--ax-border-subtleA);
+  background-color: var(--ax-bg-neutral-moderate);
+  border-color: var(--ax-border-neutral-subtleA);
   cursor: default;
 }
 

package/darkside/form/textarea.darkside.css

@@ -4,15 +4,15 @@
   appearance: none;
   padding: var(--ax-space-8);
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-medium);
-  border: 1px solid var(--ax-border-default);
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-neutral);
   resize: none;
   width: 100%;
   display: block;
-  color: var(--ax-text-default);
+  color: var(--ax-text-neutral);
 
   &::placeholder {
-    color: var(--ax-text-subtle);
+    color: var(--ax-text-neutral-subtle);
   }
 
   &:hover {
@@ -20,14 +20,14 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ax-border-focus);
-    outline-offset: 2px;
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
     border-color: var(--ax-border-accent-strong);
   }
 
   &:disabled {
     background-color: var(--ax-bg-input);
-    border-color: var(--ax-border-default);
+    border-color: var(--ax-border-neutral);
     cursor: not-allowed;
   }
 
@@ -36,19 +36,19 @@
   }
 
   .navds-textarea--readonly & {
-    background-color: var(--ax-bg-moderate);
-    border-color: var(--ax-border-subtleA);
+    background-color: var(--ax-bg-neutral-moderate);
+    border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
 
 .navds-textarea__counter {
   margin-top: -0.25rem;
-  color: var(--ax-text-subtle);
+  color: var(--ax-text-neutral-subtle);
 }
 
 .navds-textarea__counter--error {
-  color: var(--ax-text-danger);
+  color: var(--ax-text-danger-subtle);
 }
 
 .navds-textarea__sr-counter {

package/darkside/guide-panel.darkside.css

@@ -1,5 +1,5 @@
 .navds-guide-panel {
-  --__axc-guide-panel-guide-size: 3.75rem;
+  --__axc-guide-panel-guide-size: 5rem;
 
   position: relative;
   display: flex;
@@ -16,8 +16,12 @@
     align-items: flex-start;
   }
 
+  &[data-poster="false"][data-responsive="false"] {
+    --__axc-guide-panel-guide-size: 3.75rem;
+  }
+
   @media (min-width: 480px) {
-    & {
+    &[data-poster="false"][data-responsive="false"] {
       --__axc-guide-panel-guide-size: 5rem;
     }
 

package/darkside/help-text.darkside.css

@@ -7,7 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--ax-bg-accent-strong);
+  color: var(--ax-bg-info-strong);
   font-size: 1.25rem;
   padding: calc(var(--ax-space-4) / 2);
 }
@@ -33,11 +33,11 @@
 
 .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
   display: inherit;
-  color: var(--ax-bg-accent-strong-hover);
+  color: var(--ax-bg-info-strong-hover);
 }
 
 .navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
-  color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-bg-info-strong-pressed);
 }
 
 @media (forced-colors: active) {

package/darkside/index.css

@@ -45,7 +45,6 @@
 @import "./tooltip.darkside.css" layer(aksel.components);
 @import "./toggle-group.darkside.css" layer(aksel.components);
 @import "./panel.darkside.css" layer(aksel.components);
-@import "./link-panel.darkside.css" layer(aksel.components);
 @import "./read-more.darkside.css" layer(aksel.components);
 @import "./progress-bar.darkside.css" layer(aksel.components);
 @import "./skeleton.darkside.css" layer(aksel.components);