@navikt/ds-css 7.14.3 → 7.16.0

package/darkside/primitives/bleed.darkside.css

@@ -1,4 +1,4 @@
-.navds-bleed {
+.aksel-bleed {
   --__axc-bleed-margin-inline-xs: initial;
   --__axc-bleed-margin-inline-sm: var(--__axc-bleed-margin-inline-xs);
   --__axc-bleed-margin-inline-md: var(--__axc-bleed-margin-inline-sm);
@@ -20,7 +20,7 @@
   margin-block: var(--__axc-bleed-margin-block);
 }
 
-.navds-bleed--padding {
+.aksel-bleed--padding {
   --__axc-bleed-padding-inline-xs: initial;
   --__axc-bleed-padding-inline-sm: var(--__axc-bleed-padding-inline-xs);
   --__axc-bleed-padding-inline-md: var(--__axc-bleed-padding-inline-sm);
@@ -43,60 +43,60 @@
 }
 
 @media (min-width: 480px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-sm);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-sm);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-sm);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-md);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-md);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-md);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-lg);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-lg);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-lg);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-xl);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-xl);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-xl);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-bleed {
+  .aksel-bleed {
     --__axc-bleed-margin-inline: var(--__axc-bleed-margin-inline-2xl);
     --__axc-bleed-margin-block: var(--__axc-bleed-margin-block-2xl);
   }
 
-  .navds-bleed--padding {
+  .aksel-bleed--padding {
     --__axc-bleed-padding-inline: var(--__axc-bleed-padding-inline-2xl);
     --__axc-bleed-padding-block: var(--__axc-bleed-padding-block-2xl);
   }

package/darkside/primitives/box.darkside.css

@@ -1,23 +1,23 @@
-.navds-box-bg {
+.aksel-box-bg {
   --__axc-box-background: initial;
 
   background-color: var(--__axc-box-background);
 }
 
-.navds-box-border-color {
+.aksel-box-border-color {
   --__axc-box-border-color: initial;
 
   border-color: var(--__axc-box-border-color);
 }
 
-.navds-box-border-width {
+.aksel-box-border-width {
   --__axc-box-border-width: initial;
 
   border-style: solid;
   border-width: var(--__axc-box-border-width, 0);
 }
 
-.navds-box-border-radius {
+.aksel-box-border-radius {
   --__axc-box-border-radius-xs: initial;
   --__axc-box-border-radius-sm: var(--__axc-box-border-radius-xs);
   --__axc-box-border-radius-md: var(--__axc-box-border-radius-sm);
@@ -29,38 +29,38 @@
   border-radius: var(--__axc-box-border-radius);
 }
 
-.navds-box-shadow {
+.aksel-box-shadow {
   --__axc-box-shadow: initial;
 
   box-shadow: var(--__axc-box-shadow);
 }
 
 @media (min-width: 480px) {
-  .navds-box-border-radius {
+  .aksel-box-border-radius {
     --__axc-box-border-radius: var(--__axc-box-border-radius-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-box-border-radius {
+  .aksel-box-border-radius {
     --__axc-box-border-radius: var(--__axc-box-border-radius-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-box-border-radius {
+  .aksel-box-border-radius {
     --__axc-box-border-radius: var(--__axc-box-border-radius-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-box-border-radius {
+  .aksel-box-border-radius {
     --__axc-box-border-radius: var(--__axc-box-border-radius-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-box-border-radius {
+  .aksel-box-border-radius {
     --__axc-box-border-radius: var(--__axc-box-border-radius-2xl);
   }
 }

package/darkside/primitives/hgrid.darkside.css

@@ -1,4 +1,4 @@
-.navds-hgrid {
+.aksel-hgrid {
   --__axc-hgrid-columns-xs: initial;
   --__axc-hgrid-columns-sm: var(--__axc-hgrid-columns-xs);
   --__axc-hgrid-columns-md: var(--__axc-hgrid-columns-sm);
@@ -11,7 +11,7 @@
   grid-template-columns: var(--__axc-hgrid-columns);
 }
 
-.navds-hgrid-gap {
+.aksel-hgrid-gap {
   --__axc-hgrid-gap-xs: initial;
   --__axc-hgrid-gap-sm: var(--__axc-hgrid-gap-xs);
   --__axc-hgrid-gap-md: var(--__axc-hgrid-gap-sm);
@@ -23,58 +23,58 @@
   gap: var(--__axc-hgrid-gap);
 }
 
-.navds-hgrid-align {
+.aksel-hgrid-align {
   --__axc-hgrid-align: initial;
 
   align-items: var(--__axc-hgrid-align);
 }
 
 @media (min-width: 480px) {
-  .navds-hgrid {
+  .aksel-hgrid {
     --__axc-hgrid-columns: var(--__axc-hgrid-columns-sm);
   }
 
-  .navds-hgrid-gap {
+  .aksel-hgrid-gap {
     --__axc-hgrid-gap: var(--__axc-hgrid-gap-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-hgrid {
+  .aksel-hgrid {
     --__axc-hgrid-columns: var(--__axc-hgrid-columns-md);
   }
 
-  .navds-hgrid-gap {
+  .aksel-hgrid-gap {
     --__axc-hgrid-gap: var(--__axc-hgrid-gap-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-hgrid {
+  .aksel-hgrid {
     --__axc-hgrid-columns: var(--__axc-hgrid-columns-lg);
   }
 
-  .navds-hgrid-gap {
+  .aksel-hgrid-gap {
     --__axc-hgrid-gap: var(--__axc-hgrid-gap-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-hgrid {
+  .aksel-hgrid {
     --__axc-hgrid-columns: var(--__axc-hgrid-columns-xl);
   }
 
-  .navds-hgrid-gap {
+  .aksel-hgrid-gap {
     --__axc-hgrid-gap: var(--__axc-hgrid-gap-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-hgrid {
+  .aksel-hgrid {
     --__axc-hgrid-columns: var(--__axc-hgrid-columns-2xl);
   }
 
-  .navds-hgrid-gap {
+  .aksel-hgrid-gap {
     --__axc-hgrid-gap: var(--__axc-hgrid-gap-2xl);
   }
 }

package/darkside/primitives/page.darkside.css

@@ -1,4 +1,4 @@
-.navds-page {
+.aksel-page {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -6,7 +6,7 @@
 }
 
 /* Page.Block */
-.navds-pageblock {
+.aksel-pageblock {
   /* stylelint-disable-next-line length-zero-no-unit */
   --__axc-page-padding-inline: 0px;
 
@@ -14,47 +14,47 @@
   width: 100%;
 }
 
-.navds-page__content--grow {
+.aksel-page__content--grow {
   flex-grow: 1;
 }
 
-.navds-page__content--fullheight {
+.aksel-page__content--fullheight {
   min-height: 100vh;
   min-height: 100lvh;
 }
 
-.navds-page__content--padding {
+.aksel-page__content--padding {
   padding-block-end: var(--ax-space-64);
 }
 
-.navds-pageblock--text {
+.aksel-pageblock--text {
   max-width: calc(576px + var(--__axc-page-padding-inline) + var(--__axc-page-padding-inline));
 }
 
-.navds-pageblock--md {
+.aksel-pageblock--md {
   max-width: 768px;
 }
 
-.navds-pageblock--lg {
+.aksel-pageblock--lg {
   max-width: 1024px;
 }
 
-.navds-pageblock--xl {
+.aksel-pageblock--xl {
   max-width: 1280px;
 }
 
-.navds-pageblock--2xl {
+.aksel-pageblock--2xl {
   max-width: 1440px;
 }
 
-.navds-pageblock--gutters {
+.aksel-pageblock--gutters {
   --__axc-page-padding-inline: var(--ax-space-16);
 
   padding-inline: var(--__axc-page-padding-inline);
 }
 
 @media (min-width: 1024px) {
-  .navds-pageblock--gutters {
+  .aksel-pageblock--gutters {
     --__axc-page-padding-inline: var(--ax-space-48);
   }
 }

package/darkside/primitives/responsive.darkside.css

@@ -1,59 +1,59 @@
 @media (min-width: 480px) {
-  .navds-responsive__below--sm {
+  .aksel-responsive__below--sm {
     display: none !important;
   }
 }
 
 @media (max-width: 479px) {
-  .navds-responsive__above--sm {
+  .aksel-responsive__above--sm {
     display: none !important;
   }
 }
 
 @media (min-width: 768px) {
-  .navds-responsive__below--md {
+  .aksel-responsive__below--md {
     display: none !important;
   }
 }
 
 @media (max-width: 767px) {
-  .navds-responsive__above--md {
+  .aksel-responsive__above--md {
     display: none !important;
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-responsive__below--lg {
+  .aksel-responsive__below--lg {
     display: none !important;
   }
 }
 
 @media (max-width: 1023px) {
-  .navds-responsive__above--lg {
+  .aksel-responsive__above--lg {
     display: none !important;
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-responsive__below--xl {
+  .aksel-responsive__below--xl {
     display: none !important;
   }
 }
 
 @media (max-width: 1279px) {
-  .navds-responsive__above--xl {
+  .aksel-responsive__above--xl {
     display: none !important;
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-responsive__below--2xl {
+  .aksel-responsive__below--2xl {
     display: none !important;
   }
 }
 
 @media (max-width: 1439px) {
-  .navds-responsive__above--2xl {
+  .aksel-responsive__above--2xl {
     display: none !important;
   }
 }

package/darkside/primitives/stack.darkside.css

@@ -1,8 +1,8 @@
-.navds-stack {
+.aksel-stack {
   display: flex;
 }
 
-.navds-stack-gap {
+.aksel-stack-gap {
   --__axc-stack-gap-xs: initial;
   --__axc-stack-gap-sm: var(--__axc-stack-gap-xs);
   --__axc-stack-gap-md: var(--__axc-stack-gap-sm);
@@ -14,7 +14,7 @@
   gap: var(--__axc-stack-gap);
 }
 
-.navds-stack-align {
+.aksel-stack-align {
   --__axc-stack-align-xs: initial;
   --__axc-stack-align-sm: var(--__axc-stack-align-xs);
   --__axc-stack-align-md: var(--__axc-stack-align-sm);
@@ -26,7 +26,7 @@
   align-items: var(--__axc-stack-align);
 }
 
-.navds-stack-justify {
+.aksel-stack-justify {
   --__axc-stack-justify-xs: initial;
   --__axc-stack-justify-sm: var(--__axc-stack-justify-xs);
   --__axc-stack-justify-md: var(--__axc-stack-justify-sm);
@@ -38,7 +38,7 @@
   justify-content: var(--__axc-stack-justify);
 }
 
-.navds-stack-direction {
+.aksel-stack-direction {
   --__axc-stack-direction-xs: initial;
   --__axc-stack-direction-sm: var(--__axc-stack-direction-xs);
   --__axc-stack-direction-md: var(--__axc-stack-direction-sm);
@@ -50,106 +50,106 @@
   flex-direction: var(--__axc-stack-direction);
 }
 
-.navds-stack-wrap {
+.aksel-stack-wrap {
   flex-wrap: wrap;
 }
 
-.navds-stack__spacer {
+.aksel-stack__spacer {
   flex: 1;
   place-content: stretch stretch;
 }
 
-.navds-stack > .navds-stack__spacer {
+.aksel-stack > .aksel-stack__spacer {
   margin-block-start: calc(var(--__axc-stack-gap) * -1);
   margin-inline-start: calc(var(--__axc-stack-gap) * -1);
 }
 
 @media (min-width: 480px) {
-  .navds-stack-gap {
+  .aksel-stack-gap {
     --__axc-stack-gap: var(--__axc-stack-gap-sm);
   }
 
-  .navds-stack-align {
+  .aksel-stack-align {
     --__axc-stack-align: var(--__axc-stack-align-sm);
   }
 
-  .navds-stack-justify {
+  .aksel-stack-justify {
     --__axc-stack-justify: var(--__axc-stack-justify-sm);
   }
 
-  .navds-stack-direction {
+  .aksel-stack-direction {
     --__axc-stack-direction: var(--__axc-stack-direction-sm);
   }
 }
 
 @media (min-width: 768px) {
-  .navds-stack-gap {
+  .aksel-stack-gap {
     --__axc-stack-gap: var(--__axc-stack-gap-md);
   }
 
-  .navds-stack-align {
+  .aksel-stack-align {
     --__axc-stack-align: var(--__axc-stack-align-md);
   }
 
-  .navds-stack-justify {
+  .aksel-stack-justify {
     --__axc-stack-justify: var(--__axc-stack-justify-md);
   }
 
-  .navds-stack-direction {
+  .aksel-stack-direction {
     --__axc-stack-direction: var(--__axc-stack-direction-md);
   }
 }
 
 @media (min-width: 1024px) {
-  .navds-stack-gap {
+  .aksel-stack-gap {
     --__axc-stack-gap: var(--__axc-stack-gap-lg);
   }
 
-  .navds-stack-align {
+  .aksel-stack-align {
     --__axc-stack-align: var(--__axc-stack-align-lg);
   }
 
-  .navds-stack-justify {
+  .aksel-stack-justify {
     --__axc-stack-justify: var(--__axc-stack-justify-lg);
   }
 
-  .navds-stack-direction {
+  .aksel-stack-direction {
     --__axc-stack-direction: var(--__axc-stack-direction-lg);
   }
 }
 
 @media (min-width: 1280px) {
-  .navds-stack-gap {
+  .aksel-stack-gap {
     --__axc-stack-gap: var(--__axc-stack-gap-xl);
   }
 
-  .navds-stack-align {
+  .aksel-stack-align {
     --__axc-stack-align: var(--__axc-stack-align-xl);
   }
 
-  .navds-stack-justify {
+  .aksel-stack-justify {
     --__axc-stack-justify: var(--__axc-stack-justify-xl);
   }
 
-  .navds-stack-direction {
+  .aksel-stack-direction {
     --__axc-stack-direction: var(--__axc-stack-direction-xl);
   }
 }
 
 @media (min-width: 1440px) {
-  .navds-stack-gap {
+  .aksel-stack-gap {
     --__axc-stack-gap: var(--__axc-stack-gap-2xl);
   }
 
-  .navds-stack-align {
+  .aksel-stack-align {
     --__axc-stack-align: var(--__axc-stack-align-2xl);
   }
 
-  .navds-stack-justify {
+  .aksel-stack-justify {
     --__axc-stack-justify: var(--__axc-stack-justify-2xl);
   }
 
-  .navds-stack-direction {
+  .aksel-stack-direction {
     --__axc-stack-direction: var(--__axc-stack-direction-2xl);
   }
 }

package/darkside/progress-bar.darkside.css

@@ -1,4 +1,4 @@
-.navds-progress-bar {
+.aksel-progress-bar {
   background: var(--ax-bg-neutral-moderateA);
   position: relative;
   border-radius: var(--ax-border-radius-full);
@@ -6,22 +6,22 @@
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
 }
 
-.navds-progress-bar--small {
+.aksel-progress-bar--small {
   height: 0.75rem;
   min-width: 0.75rem;
 }
 
-.navds-progress-bar--medium {
+.aksel-progress-bar--medium {
   height: 1rem;
   min-width: 1rem;
 }
 
-.navds-progress-bar--large {
+.aksel-progress-bar--large {
   height: 1.5rem;
   min-width: 1.5rem;
 }
 
-.navds-progress-bar__foreground {
+.aksel-progress-bar__foreground {
   /* TODO:  rename --__ac- in ProgressBar.tsx after darkside update */
   --__ac-progress-bar-translate: initial;
 
@@ -37,10 +37,10 @@
   transition: transform 0.2s ease;
 }
 
-.navds-progress-bar__foreground--indeterminate {
+.aksel-progress-bar__foreground--indeterminate {
   --__ac-progress-bar-simulated: initial;
 
-  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
+  animation-name: aksel-progress-bar-indeterminate-grow, aksel-progress-bar-indeterminate;
   animation-timing-function: ease-in-out, ease-in-out;
   animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
   animation-fill-mode: forwards, none;
@@ -48,8 +48,8 @@
   animation-delay: 0s, var(--__ac-progress-bar-simulated);
 }
 
-/* navds-progress-bar-indeterminate wave animation */
-@keyframes navds-progress-bar-indeterminate {
+/* aksel-progress-bar-indeterminate wave animation */
+@keyframes aksel-progress-bar-indeterminate {
   0% {
     left: -50%;
     width: 50%;
@@ -70,7 +70,7 @@
   }
 }
 
-@keyframes navds-progress-bar-indeterminate-grow {
+@keyframes aksel-progress-bar-indeterminate-grow {
   0% {
     transform: translateX(-100%);
   }
@@ -97,11 +97,11 @@
 }
 
 @media (forced-colors: active) {
-  .navds-progress-bar__foreground {
+  .aksel-progress-bar__foreground {
     background: Highlight;
   }
 
-  .navds-progress-bar {
+  .aksel-progress-bar {
     outline: 1px solid transparent;
     outline-offset: -1px;
   }