@navikt/ds-css 7.9.0 → 7.9.2

package/darkside/form/search.darkside.css

@@ -33,7 +33,7 @@
 
 /* ------------------------------ Search input ------------------------------ */
 .navds-search__input {
-  padding-right: var(--ax-spacing-10);
+  padding-right: var(--ax-space-40);
 
   &:focus-visible {
     outline: none;
@@ -48,33 +48,33 @@
 }
 
 .navds-search__input--simple {
-  padding-left: var(--ax-spacing-10);
+  padding-left: var(--ax-space-40);
 }
 
 /* ------------------------------ Search sizing ----------------------------- */
 .navds-form-field--small {
   & .navds-search__input {
-    padding-right: var(--ax-spacing-7);
+    padding-right: var(--ax-space-28);
   }
 
   & .navds-search__input--simple {
-    padding-left: var(--ax-spacing-7);
+    padding-left: var(--ax-space-28);
   }
 
   & .navds-search__search-icon {
-    left: var(--ax-spacing-1);
+    left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
   & .navds-search__button-clear {
-    right: var(--ax-spacing-1);
+    right: var(--ax-space-4);
   }
 }
 
 /* ------------------------------- Search icon ------------------------------ */
 .navds-search__search-icon {
   position: absolute;
-  left: var(--ax-spacing-2);
+  left: var(--ax-space-8);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
@@ -88,7 +88,7 @@
 /* --------------------------- Search Clear-button -------------------------- */
 .navds-search__button-clear {
   position: absolute;
-  right: var(--ax-spacing-2);
+  right: var(--ax-space-8);
   top: 50%;
   transform: translateY(-50%);
 }

package/darkside/form/select.darkside.css

@@ -9,8 +9,8 @@
   min-height: 3rem;
   display: inline-block;
   position: relative;
-  padding: var(--ax-spacing-2);
-  padding-right: var(--ax-spacing-10);
+  padding: var(--ax-space-8);
+  padding-right: var(--ax-space-40);
 
   &:hover {
     border-color: var(--ax-border-accent-strong);
@@ -43,7 +43,7 @@
 .navds-select__chevron {
   position: absolute;
   font-size: 1.5rem;
-  right: var(--ax-spacing-2);
+  right: var(--ax-space-8);
   pointer-events: none;
   align-self: center;
   color: var(--ax-text-default);
@@ -102,8 +102,8 @@
 /* ----------------------------- Select Readonly ---------------------------- */
 .navds-select--readonly {
   & .navds-select__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
 
     @media (forced-colors: active) {

package/darkside/form/switch.darkside.css

@@ -41,11 +41,11 @@
   }
 
   .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;
+    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 0 calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem;
   }
 
   .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;
+    padding: calc(var(--ax-space-8) - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8) - var(--ax-space-2)) 0;
   }
 }
 
@@ -68,7 +68,7 @@
   height: 1.5rem;
   background-color: var(--ax-bg-input);
   position: absolute;
-  top: var(--ax-spacing-3);
+  top: var(--ax-space-12);
   left: 0;
   border-radius: var(--ax-border-radius-full);
   border: 2px solid var(--ax-border-default);
@@ -77,7 +77,7 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   .navds-switch--small > & {
-    top: var(--ax-spacing-1);
+    top: var(--ax-space-4);
   }
 
   .navds-switch__input:checked ~ & {
@@ -108,7 +108,7 @@
 
 /* ------------------------------ Switch Thumb ------------------------------ */
 .navds-switch__thumb {
-  background-color: var(--ax-bg-neutral-strong);
+  background-color: var(--ax-bg-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
   height: 1.125rem;
@@ -183,8 +183,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-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
   }
 
   & > .navds-switch__label-wrapper,
@@ -202,12 +202,12 @@
   }
 
   & .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 
   & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {

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

@@ -1,6 +1,6 @@
 .navds-text-field__input {
   appearance: none;
-  padding: var(--ax-spacing-2);
+  padding: var(--ax-space-8);
   background: var(--ax-bg-input);
   border-radius: var(--ax-border-radius-medium);
   border: 1px solid var(--ax-border-default);
@@ -25,7 +25,7 @@
   }
 
   &::placeholder {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-subtle);
   }
 
   &[size] {
@@ -34,7 +34,7 @@
 }
 
 .navds-form-field--small .navds-text-field__input {
-  padding: 0 var(--ax-spacing-2);
+  padding: 0 var(--ax-space-8);
   min-height: 2rem;
 }
 
@@ -44,8 +44,8 @@
 }
 
 .navds-text-field--readonly .navds-text-field__input {
-  background-color: var(--ax-bg-neutral-moderate);
-  border-color: var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-moderate);
+  border-color: var(--ax-border-subtleA);
   cursor: default;
 }
 

package/darkside/form/textarea.darkside.css

@@ -2,7 +2,7 @@
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--__axc-textarea-height);
   appearance: none;
-  padding: var(--ax-spacing-2);
+  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);
@@ -32,12 +32,12 @@
   }
 
   .navds-form-field--small & {
-    padding: var(--ax-spacing-1-alt);
+    padding: var(--ax-space-6);
   }
 
   .navds-textarea--readonly & {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }

package/darkside/guide-panel.darkside.css

@@ -51,23 +51,23 @@
   position: relative;
 
   .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
-    margin-top: var(--ax-spacing-5);
+    margin-top: var(--ax-space-20);
   }
 
   .navds-guide-panel[data-poster="false"] > & {
-    margin-left: var(--ax-spacing-5);
+    margin-left: var(--ax-space-20);
   }
 
   @media (min-width: 480px) {
     .navds-guide-panel[data-responsive="true"] > & {
       margin-top: 0;
-      margin-left: var(--ax-spacing-5);
+      margin-left: var(--ax-space-20);
     }
   }
 }
 
 .navds-guide-panel__content-inner {
-  padding: var(--ax-spacing-3) var(--ax-spacing-4);
+  padding: var(--ax-space-12) var(--ax-space-16);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   position: relative;
@@ -79,7 +79,7 @@
 
   @media (min-width: 480px) {
     & {
-      padding: var(--ax-spacing-4) var(--ax-spacing-5);
+      padding: var(--ax-space-16) var(--ax-space-20);
     }
 
     .navds-guide-panel[data-responsive="true"] & {
@@ -94,20 +94,20 @@
 
   .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
     left: 50%;
-    top: calc(var(--ax-spacing-4) * -1 - 2px);
+    top: calc(var(--ax-space-16) * -1 - 2px);
     transform: translateX(-48%);
   }
 
   .navds-guide-panel[data-poster="false"] & {
     top: calc(var(--__axc-guide-panel-guide-size) / 2);
-    left: calc(var(--ax-spacing-5) * -1 - 2px);
+    left: calc(var(--ax-space-20) * -1 - 2px);
     transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
   @media (min-width: 480px) {
     .navds-guide-panel[data-responsive="true"] & {
       top: calc(var(--__axc-guide-panel-guide-size) / 2);
-      left: calc(var(--ax-spacing-5) * -1 - 2px);
+      left: calc(var(--ax-space-20) * -1 - 2px);
       transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
     }
   }

package/darkside/help-text.darkside.css

@@ -9,7 +9,7 @@
   align-items: center;
   color: var(--ax-bg-accent-strong);
   font-size: 1.25rem;
-  padding: calc(var(--ax-spacing-1) / 2);
+  padding: calc(var(--ax-space-4) / 2);
 }
 
 .navds-help-text__icon {
@@ -18,7 +18,7 @@
 
 .navds-help-text__popover.navds-popover {
   background-color: var(--ax-bg-info-moderate);
-  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
+  max-width: min(65ch, calc(100vw - var(--ax-space-24)));
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info);
 }

package/darkside/internalheader.darkside.css

@@ -23,7 +23,7 @@
   line-height: normal;
   text-align: left;
   padding-block: 0;
-  padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
+  padding-inline: var(--ax-space-24) var(--ax-space-20);
   border-right: 1px solid var(--ax-border-subtleA);
   display: flex;
   align-items: center;
@@ -36,7 +36,7 @@
   }
 
   &:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-moderate-hover);
   }
 
   &:is(:hover, :active):not(button, a) {
@@ -45,7 +45,7 @@
 }
 
 .navds-internalheader__user {
-  padding: 0 var(--ax-spacing-5);
+  padding: 0 var(--ax-space-20);
   border-left: 1px solid var(--ax-border-subtleA);
   display: flex;
   align-items: center;
@@ -54,7 +54,7 @@
 .navds-internalheader__button {
   border: none;
   margin: 0;
-  padding: 0 var(--ax-spacing-3);
+  padding: 0 var(--ax-space-12);
   overflow: visible;
   background: transparent;
   font: inherit;
@@ -64,12 +64,12 @@
   display: flex;
   align-items: center;
   justify-self: center;
-  gap: var(--ax-spacing-2);
+  gap: var(--ax-space-8);
   border-left: 1px solid var(--ax-border-subtleA);
   color: var(--ax-text-default);
 
   &:hover {
-    background: var(--ax-bg-neutral-moderate-hover);
+    background: var(--ax-bg-moderate-hover);
   }
 }
 
@@ -91,11 +91,11 @@
   }
 
   &:active {
-    background: var(--ax-bg-neutral-moderate-pressed);
+    background: var(--ax-bg-moderate-pressed);
   }
 }
 
 .navds-internalheader__user-button {
-  padding-left: var(--ax-spacing-5);
-  gap: var(--ax-spacing-4);
+  padding-left: var(--ax-space-20);
+  gap: var(--ax-space-16);
 }

package/darkside/link.darkside.css

@@ -2,7 +2,7 @@
   color: var(--ax-text-accent);
   display: inline-flex;
   align-items: center;
-  gap: var(--ax-spacing-05);
+  gap: var(--ax-space-2);
   text-decoration: underline;
   text-underline-offset: 0.1em;
   text-decoration-thickness: 0.05em;

package/darkside/list.darkside.css

@@ -1,17 +1,17 @@
 .navds-list ul,
 .navds-list ol {
   padding: 0;
-  margin-block: var(--ax-spacing-4);
+  margin-block: var(--ax-space-16);
 }
 
 .navds-list--small ul,
 .navds-list--small ol {
-  margin-block: var(--ax-spacing-3);
+  margin-block: var(--ax-space-12);
 }
 
 .navds-list {
   & .navds-list :where(ul, ol) {
-    margin-block: var(--ax-spacing-2) 0;
+    margin-block: var(--ax-space-8) 0;
   }
 
   & ol {
@@ -31,7 +31,7 @@
     & > .navds-list__item {
       display: grid;
       grid-template-columns: auto 1fr;
-      gap: var(--ax-spacing-2);
+      gap: var(--ax-space-8);
     }
 
     & > li > .navds-list__item-marker {
@@ -61,7 +61,7 @@ _:future,
 /* stylelint-enable selector-type-no-unknown */
 
 .navds-list__item {
-  margin-block-end: var(--ax-spacing-2);
+  margin-block-end: var(--ax-space-8);
 
   &:last-child {
     margin-block-end: 0;

package/darkside/loader.darkside.css

@@ -67,7 +67,7 @@
 }
 
 .navds-loader__background {
-  stroke: var(--ax-border-neutral-subtleA);
+  stroke: var(--ax-border-subtleA);
   stroke-width: var(--__axc-loader-stroke-width);
 }
 

package/darkside/modal.darkside.css

@@ -60,15 +60,15 @@
   width: 450px;
 
   & .navds-modal__header {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .navds-modal__body {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   & .navds-modal__footer {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 }
 
@@ -116,19 +116,19 @@
 }
 
 .navds-modal__button {
-  margin-left: var(--ax-spacing-4);
+  margin-left: var(--ax-space-16);
   float: right;
 }
 
 .navds-modal__header {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-modal__header-icon {
   & svg {
     display: inline;
     vertical-align: -0.25rem;
-    margin-right: var(--ax-spacing-1);
+    margin-right: var(--ax-space-4);
   }
 }
 
@@ -138,7 +138,7 @@
 }
 
 .navds-modal__body {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
@@ -157,14 +157,14 @@
 }
 
 .navds-modal__header + .navds-modal__body {
-  padding-top: var(--ax-spacing-0);
+  padding-top: var(--ax-space-0);
 }
 
 .navds-modal__footer {
   display: flex;
   flex-flow: row-reverse wrap;
-  gap: var(--ax-spacing-4);
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  gap: var(--ax-space-16);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-modal__footer :nth-of-type(2) {

package/darkside/pagination.darkside.css

@@ -7,7 +7,7 @@
   padding: 0;
   list-style: none;
   display: flex;
-  gap: var(--ax-spacing-3);
+  gap: var(--ax-space-12);
 
   & li {
     list-style: none;
@@ -32,8 +32,8 @@
 }
 
 .navds-pagination__item[data-selected="true"] {
-  background-color: var(--ax-bg-neutral-strong-pressed);
-  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-strong-pressed);
+  color: var(--ax-text-contrast);
 }
 
 .navds-pagination--invisible {

package/darkside/popover.darkside.css

@@ -6,11 +6,11 @@
   border-radius: var(--ax-border-radius-xlarge);
 
   /* Creates a small gutter between screen-edges on smaller devices */
-  max-width: calc(100vw - var(--ax-spacing-6));
+  max-width: calc(100vw - var(--ax-space-24));
 }
 
 .navds-popover__content {
-  padding: var(--ax-spacing-4) var(--ax-spacing-5);
+  padding: var(--ax-space-16) var(--ax-space-20);
 }
 
 .navds-popover--hidden {

package/darkside/primitives/page.darkside.css

@@ -24,7 +24,7 @@
 }
 
 .navds-page__content--padding {
-  padding-block-end: var(--ax-spacing-16);
+  padding-block-end: var(--ax-space-64);
 }
 
 .navds-pageblock--text {

package/darkside/progress-bar.darkside.css

@@ -1,9 +1,9 @@
 .navds-progress-bar {
-  background: var(--ax-bg-neutral-moderateA);
+  background: var(--ax-bg-moderateA);
   position: relative;
   border-radius: var(--ax-border-radius-full);
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+  box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
 }
 
 .navds-progress-bar--small {

package/darkside/read-more.darkside.css

@@ -1,8 +1,8 @@
 .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);
+  --__axc-read-more-pi-end: var(--ax-space-4);
+  --__axc-read-more-pb: var(--ax-space-4);
 }
 
 /* ----------------------------- ReadMore Button ---------------------------- */
@@ -13,7 +13,7 @@
   background: none;
   display: flex;
   align-items: flex-start;
-  gap: var(--ax-spacing-1);
+  gap: var(--ax-space-4);
   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);
@@ -34,7 +34,7 @@
     border-radius: var(--ax-border-radius-medium);
 
     &:hover {
-      background-color: var(--ax-bg-neutral-hoverA);
+      background-color: var(--ax-bg-hoverA);
       color: var(--ax-text-accent-strong);
     }
   }
@@ -52,24 +52,24 @@
   }
 
   &.navds-read-more--large {
-    --__axc-read-more-pi-start: var(--ax-spacing-3);
-    --__axc-read-more-pi-end: var(--ax-spacing-6);
+    --__axc-read-more-pi-start: var(--ax-space-12);
+    --__axc-read-more-pi-end: var(--ax-space-24);
   }
 
   &.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);
+    --__axc-read-more-pi-start: var(--ax-space-8);
+    --__axc-read-more-pi-end: var(--ax-space-16);
   }
 }
 
 /* ---------------------------- ReadMore Content ---------------------------- */
 .navds-read-more__content {
-  margin-top: var(--ax-spacing-2);
-  border-left: 2px solid var(--ax-border-neutral-subtleA);
+  margin-top: var(--ax-space-8);
+  border-left: 2px solid var(--ax-border-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));
+  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
 
   &[data-state="closed"] {
     display: none;
@@ -84,12 +84,12 @@
 
 /* ----------------------------- ReadMore Sizes ----------------------------- */
 .navds-read-more--large {
-  --__axc-read-more-pb: var(--ax-spacing-3);
+  --__axc-read-more-pb: var(--ax-space-12);
 }
 
 .navds-read-more--small {
   --__axc-read-more-icon-size: 1.25rem;
-  --__axc-read-more-pb: var(--ax-spacing-05);
+  --__axc-read-more-pb: var(--ax-space-2);
 }
 
 /* ------------------------- ReadMore high-contrast ------------------------- */

package/darkside/skeleton.darkside.css

@@ -1,5 +1,5 @@
 .navds-skeleton {
-  background-color: var(--ax-bg-neutral-moderateA);
+  background-color: var(--ax-bg-moderateA);
   height: 1.3em;
   animation: akselSkeletonAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   pointer-events: none;