@navikt/ds-css 7.21.1 → 7.23.0

package/dist/darkside/component/form.css

@@ -53,7 +53,7 @@
     width: 100%;
     padding: var(--ax-space-20);
     border: 1px dashed var(--ax-border-neutral);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     background-color: var(--__axc-dropzone-background);
     color: var(--ax-text-neutral);
     transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
@@ -64,17 +64,17 @@
   }
 
   .aksel-dropzone__area:hover:not([data-disabled="true"]) {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-dropzone__area:hover:not([data-disabled="true"]) > .aksel-dropzone__area-button {
-    background-color: var(--ax-bg-accent-moderate-hover);
-    box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+    background-color: var(--ax-bg-moderate-hover);
+    box-shadow: inset 0 0 0 2px var(--ax-bg-strong-hover);
   }
 
   .aksel-dropzone__area:active:not([data-disabled="true"]) > .aksel-dropzone__area-button {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
     box-shadow: none;
   }
 
@@ -89,13 +89,13 @@
   }
 
   .aksel-dropzone--dragging > .aksel-dropzone__area:after {
-    color: var(--ax-text-accent);
-    background-color: var(--ax-bg-accent-moderateA);
+    color: var(--ax-text-default);
+    background-color: var(--ax-bg-moderateA);
     content: "";
-    border: 1px dashed var(--ax-border-accent-strong);
+    border: 1px dashed var(--ax-border-strong);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
     margin: -1px;
     position: absolute;
@@ -115,7 +115,7 @@
     }
 
     100% {
-      background-color: var(--ax-bg-accent-moderateA);
+      background-color: var(--ax-bg-moderateA);
     }
   }
 
@@ -142,7 +142,7 @@
 
   .aksel-dropzone__area-release__icon {
     padding: var(--__axc-dropzone-icon-padding);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     background-color: var(--ax-bg-neutral-moderateA);
     transition: background-color .3s var(--__axc-dropzone-animation-ease-out), font-size .3s var(--__axc-dropzone-animation-ease-out);
     font-size: 1.5rem;
@@ -164,7 +164,7 @@
   }
 
   .aksel-dropzone--dragging .aksel-dropzone__area-release {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     top: 50%;
     transform: translateY(-50%);
   }
@@ -187,7 +187,7 @@
     background-color: var(--ax-bg-raised);
     border: 1px solid var(--ax-border-neutral-subtleA);
     outline-offset: -1px;
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     padding: var(--ax-space-20);
     gap: var(--ax-space-12);
     align-items: flex-start;
@@ -202,7 +202,7 @@
   .aksel-file-item__icon {
     background-color: var(--ax-bg-neutral-moderateA);
     color: var(--ax-text-neutral);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     min-width: 2.5rem;
     min-height: 2.5rem;
     margin-top: var(--ax-space-2);
@@ -287,7 +287,7 @@
     background-color: var(--ax-bg-default);
     padding: var(--ax-space-20);
     border: 4px solid var(--ax-border-danger);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     outline-offset: 3px;
   }
 
@@ -335,7 +335,7 @@
   .aksel-confirmation-panel__inner {
     gap: var(--ax-space-12);
     padding: var(--ax-space-16);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-default);
     background-color: var(--ax-bg-moderate);
     flex-direction: column;
@@ -356,8 +356,8 @@
       border-color: orange;
       border-left-style: solid;
       border-left-width: 8px;
-      border-start-start-radius: calc(var(--ax-border-radius-large)  - 1px);
-      border-end-start-radius: calc(var(--ax-border-radius-large)  - 1px);
+      border-start-start-radius: calc(var(--ax-radius-8)  - 1px);
+      border-end-start-radius: calc(var(--ax-radius-8)  - 1px);
       height: 100%;
       position: absolute;
       top: 0;
@@ -400,7 +400,7 @@
 
   .aksel-checkbox__label:before, .aksel-radio__label:before {
     content: "";
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     background-color: var(--ax-bg-input);
     border: 2px solid var(--ax-border-neutral);
     flex-shrink: 0;
@@ -409,7 +409,7 @@
   }
 
   .aksel-radio__label:before {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   .aksel-checkbox__content, .aksel-radio__content {
@@ -438,7 +438,7 @@
     content: "";
     width: 100%;
     height: calc(100% - var(--ax-space-24));
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
     pointer-events: none;
@@ -471,13 +471,13 @@
   }
 
   .aksel-checkbox__input:where(:checked, :indeterminate) + .aksel-checkbox__label:before {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    border-color: var(--ax-bg-accent-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
   }
 
   .aksel-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .aksel-checkbox__label:before {
-    border-color: var(--ax-bg-accent-strong-hover);
-    background-color: var(--ax-bg-accent-strong-hover);
+    border-color: var(--ax-bg-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
   }
 
   .aksel-checkbox__input:where(:not(:checked)) + .aksel-checkbox__label > .aksel-checkbox__icon {
@@ -509,35 +509,22 @@
 
   .aksel-radio__input:checked + .aksel-radio__label:before {
     background-color: var(--ax-bg-input);
-    border: 8px solid var(--ax-bg-accent-strong-pressed);
+    border: 8px solid var(--ax-bg-strong-pressed);
   }
 
   .aksel-radio--small > .aksel-radio__input:checked + .aksel-radio__label:before {
     border-width: 6px;
   }
 
-  .aksel-checkbox__input:hover:not(:disabled) + .aksel-checkbox__label, .aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label {
-    color: var(--ax-text-accent-subtle);
-  }
-
   .aksel-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label:before, .aksel-radio__input:hover:not(:disabled, :checked) + .aksel-radio__label:before {
-    border-color: var(--ax-border-accent-strong);
-    background-color: var(--ax-bg-accent-moderate-hoverA);
+    border-color: var(--ax-border-strong);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
 
   .aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate) + .aksel-checkbox__label:before, .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label:before {
     border-color: var(--ax-border-danger-strong);
   }
 
-  .aksel-checkbox--error > .aksel-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .aksel-checkbox__label:before, .aksel-radio--error > .aksel-radio__input:not(:disabled, :checked):hover + .aksel-radio__label:before {
-    background-color: var(--ax-bg-danger-moderate-hoverA);
-  }
-
-  .aksel-checkbox--error > .aksel-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .aksel-checkbox__label:before {
-    background-color: var(--ax-bg-danger-strong-pressed);
-    border-color: var(--ax-bg-danger-strong-pressed);
-  }
-
   .aksel-radio--error > .aksel-radio__input:checked + .aksel-radio__label:before {
     border-color: var(--ax-bg-danger-strong-pressed);
   }
@@ -558,10 +545,6 @@
     display: inline-flex;
   }
 
-  .aksel-checkbox--readonly > .aksel-checkbox__input:hover + .aksel-checkbox__label, .aksel-radio--readonly > .aksel-radio__input:hover + .aksel-radio__label {
-    color: var(--ax-text-neutral);
-  }
-
   .aksel-checkbox--readonly > .aksel-checkbox__input:not(:disabled) + .aksel-checkbox__label:before, .aksel-checkbox--readonly > .aksel-checkbox__input:hover .aksel-checkbox__label:before, .aksel-radio--readonly > .aksel-radio__input:not(:disabled, :checked) + .aksel-radio__label:before, .aksel-radio--readonly > .aksel-radio__input:hover:not(:checked, :focus) + .aksel-radio__label:before {
     background-color: var(--__axc-radio-checkbox-readonly-bg);
     border-color: var(--__axc-radio-checkbox-readonly-border);
@@ -642,7 +625,7 @@
   .aksel-select__input {
     appearance: none;
     background-color: var(--ax-bg-input);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-neutral);
     color: var(--ax-text-neutral);
     box-sizing: border-box;
@@ -655,14 +638,14 @@
   }
 
   .aksel-select__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
     cursor: pointer;
   }
 
   .aksel-select__input:focus {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   @media (forced-colors: active) {
@@ -797,7 +780,7 @@
     content: "";
     width: 100%;
     height: calc(100% - var(--__axc-switch-block-padding) * 2);
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
     pointer-events: none;
@@ -809,10 +792,6 @@
     height: calc(100% - var(--__axc-switch-block-padding) * 1);
   }
 
-  .aksel-switch__input:hover ~ .aksel-switch__label-wrapper, .aksel-switch__label-wrapper:hover {
-    color: var(--ax-text-accent-subtle);
-  }
-
   .aksel-switch__input:disabled:hover ~ .aksel-switch__label-wrapper {
     color: inherit;
   }
@@ -822,11 +801,11 @@
     width: 2.75rem;
     height: 1.5rem;
     top: var(--ax-space-12);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     border: 2px solid var(--ax-border-neutral);
     transition-property: background-color, border-color;
     transition-duration: .1s;
-    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    transition-timing-function: ease;
     position: absolute;
     left: 0;
   }
@@ -836,13 +815,17 @@
   }
 
   .aksel-switch__input:checked ~ .aksel-switch__track {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    border-color: var(--ax-bg-accent-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
+  }
+
+  .aksel-switch__input:hover ~ .aksel-switch__track {
+    background-color: var(--ax-bg-neutral-moderate-hover);
   }
 
   .aksel-switch__input:hover:checked ~ .aksel-switch__track {
-    background-color: var(--ax-bg-accent-strong-hover);
-    border-color: var(--ax-bg-accent-strong-hover);
+    background-color: var(--ax-bg-strong-hover);
+    border-color: var(--ax-bg-strong-hover);
   }
 
   .aksel-switch__input:disabled ~ .aksel-switch__track {
@@ -851,8 +834,8 @@
   }
 
   .aksel-switch__input:checked:disabled ~ .aksel-switch__track {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    border-color: var(--ax-bg-accent-strong-pressed);
+    background-color: var(--ax-bg-strong-pressed);
+    border-color: var(--ax-bg-strong-pressed);
   }
 
   .aksel-switch--standalone > .aksel-switch__input:focus ~ .aksel-switch__track {
@@ -862,7 +845,7 @@
 
   .aksel-switch__thumb {
     background-color: var(--ax-bg-neutral-strong);
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     justify-content: center;
     align-items: center;
     width: 1.125rem;
@@ -877,7 +860,7 @@
 
   .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     background-color: var(--ax-bg-raised);
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
     width: 1.25rem;
     height: 1.25rem;
     top: 0;
@@ -898,11 +881,11 @@
 
   @media (hover: hover) and (pointer: fine) {
     .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-      transform: translateX(.0625rem);
+      transform: translateX(.17rem);
     }
 
     .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
-      transform: translateX(1.19rem);
+      transform: translateX(1.1rem);
     }
   }
 
@@ -936,10 +919,6 @@
     cursor: default;
   }
 
-  .aksel-switch--readonly > .aksel-switch__input:hover ~ .aksel-switch__label-wrapper, .aksel-switch--readonly .aksel-switch__label-wrapper:hover {
-    color: var(--ax-text-neutral);
-  }
-
   .aksel-switch--readonly .aksel-switch__label {
     display: inline-flex;
   }
@@ -964,10 +943,6 @@
   }
 
   @media (forced-colors: active) {
-    .aksel-switch__input:hover ~ .aksel-switch__label-wrapper, .aksel-switch__label-wrapper:hover {
-      color: highlight;
-    }
-
     .aksel-switch__thumb, .aksel-switch--readonly .aksel-switch__thumb {
       background-color: fieldtext !important;
     }
@@ -1001,7 +976,7 @@
     appearance: none;
     padding: var(--ax-space-8);
     background: var(--ax-bg-input);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-neutral);
     width: 100%;
     min-height: 3rem;
@@ -1009,11 +984,11 @@
   }
 
   .aksel-text-field__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-text-field__input:focus-visible {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
@@ -1076,7 +1051,7 @@
     appearance: none;
     padding: var(--ax-space-8);
     background-color: var(--ax-bg-input);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     border: 1px solid var(--ax-border-neutral);
     resize: none;
     width: 100%;
@@ -1089,13 +1064,13 @@
   }
 
   .aksel-textarea__input:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-textarea__input:focus-visible {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-textarea__input:disabled {
@@ -1190,7 +1165,7 @@
   }
 
   .aksel-search__wrapper {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     align-items: center;
     display: inline-flex;
   }
@@ -1257,8 +1232,8 @@
 
   .aksel-search__button-search {
     border-radius: 0;
-    border-top-right-radius: var(--ax-border-radius-large);
-    border-bottom-right-radius: var(--ax-border-radius-large);
+    border-top-right-radius: var(--ax-radius-8);
+    border-bottom-right-radius: var(--ax-radius-8);
     flex-shrink: 0;
   }
 
@@ -1272,11 +1247,11 @@
   }
 
   .aksel-search__button-search.aksel-button--secondary:hover:not(:disabled) {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
+    --__axc-button-border-color: var(--ax-border-strong);
   }
 
   .aksel-search:not(.aksel-search--error, .aksel-search--disabled) .aksel-search__wrapper:has(.aksel-search__input:is(:hover, :focus-visible)) .aksel-search__button-search.aksel-button--secondary:not(:hover, :active) {
-    --__axc-button-border-color: var(--ax-border-accent-strong);
+    --__axc-button-border-color: var(--ax-border-strong);
   }
 
   .aksel-search--error .aksel-search__input:not(:disabled) {
@@ -1304,7 +1279,7 @@
     --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
     --__axc-combobox-border-width: 1px;
     --__axc-combobox-input-height: 2rem;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     flex-direction: column;
     width: 100%;
     display: flex;
@@ -1312,7 +1287,7 @@
   }
 
   .aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) .aksel-combobox__wrapper:hover {
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-form-field--small .aksel-combobox__wrapper {
@@ -1367,13 +1342,13 @@
 
   .aksel-combobox__wrapper-inner {
     border: 1px solid var(--ax-border-neutral);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
   }
 
   .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
-    border-color: var(--ax-border-accent-strong);
+    border-color: var(--ax-border-strong);
   }
 
   .aksel-combobox__wrapper-inner:has(.aksel-combobox__input:focus-visible).aksel-combobox__wrapper-inner--virtually-unfocused {
@@ -1419,7 +1394,7 @@
   }
 
   .aksel-combobox__selected-options > li {
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
     margin: auto 0;
   }
 
@@ -1502,11 +1477,11 @@
   }
 
   .aksel-combobox__button-toggle-list:hover {
-    color: var(--ax-text-accent-subtle);
+    color: var(--ax-text-subtle);
   }
 
   .aksel-combobox__button-toggle-list:hover:active {
-    color: var(--ax-text-accent);
+    color: var(--ax-text-default);
   }
 
   .aksel-combobox__list {
@@ -1516,7 +1491,7 @@
     right: 0;
     top: calc(100% + var(--ax-space-8));
     border: 1px solid var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     background-color: var(--ax-bg-raised);
     color: var(--ax-text-neutral);
     overscroll-behavior: contain;
@@ -1538,7 +1513,7 @@
   .aksel-combobox__list-item, .aksel-combobox__list-item--loading, .aksel-combobox__list-item--no-options, .aksel-combobox__list-item--new-option, .aksel-combobox__list-item--max-selected {
     padding-block: var(--__axc-combobox-list-item-padding-block);
     padding-inline: var(--__axc-combobox-list-item-padding-inline);
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
     margin-inline: var(--ax-space-8);
     margin-block: var(--ax-space-2);
     border: 0;
@@ -1608,7 +1583,7 @@
   }
 
   .aksel-combobox__list-item--selected {
-    background-color: var(--ax-bg-accent-moderate-pressedA);
+    background-color: var(--ax-bg-moderate-pressedA);
   }
 
   .aksel-combobox__list-item--selected p {
@@ -1616,8 +1591,8 @@
   }
 
   .aksel-combobox__list-item--new-option {
-    border-bottom: 1px solid var(--ax-border-accent-subtleA);
-    background: var(--ax-bg-accent-moderateA);
+    border-bottom: 1px solid var(--ax-border-subtleA);
+    background: var(--ax-bg-moderateA);
     cursor: pointer;
     margin: 0;
     border-radius: 0;
@@ -1636,13 +1611,13 @@
   }
 
   .aksel-combobox__list-item--new-option--focus {
-    border-radius: calc(var(--ax-border-radius-large)  - 1px) calc(var(--ax-border-radius-large)  - 1px) 0 0;
+    border-radius: calc(var(--ax-radius-8)  - 1px) calc(var(--ax-radius-8)  - 1px) 0 0;
     outline: 2px solid var(--ax-border-focus);
     outline-offset: -2px;
   }
 
   .aksel-combobox__list-item--new-option--focus:only-child {
-    border-radius: calc(var(--ax-border-radius-large)  - 1px);
+    border-radius: calc(var(--ax-radius-8)  - 1px);
   }
 
   @media (max-width: 479px) {
@@ -1727,7 +1702,7 @@
 
   .aksel-form-summary {
     border: 1px solid var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     background: var(--ax-bg-raised);
     overflow: hidden;
   }
@@ -1800,13 +1775,13 @@
   .aksel-form-summary__value .aksel-form-summary__answers {
     margin-top: var(--ax-space-8);
     padding: var(--ax-space-16);
-    background: var(--ax-bg-info-moderateA);
-    border-radius: var(--ax-border-radius-large);
-    border: 1px solid var(--ax-border-info-subtleA);
+    background: var(--ax-bg-moderateA);
+    border-radius: var(--ax-radius-8);
+    border: 1px solid var(--ax-border-subtleA);
   }
 
   .aksel-form-summary__value .aksel-form-summary__answers .aksel-form-summary__answer {
-    border-color: var(--ax-border-info-subtleA);
+    border-color: var(--ax-border-subtleA);
   }
 
   .aksel-form-progress__bar {
@@ -1828,7 +1803,7 @@
   .aksel-form-progress__collapsible {
     visibility: hidden;
     border: 1px solid var(--ax-border-neutral-subtleA);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     background: var(--ax-bg-raised);
     padding-inline: var(--ax-space-20);
     opacity: .001;