@navikt/ds-css 7.15.0 → 7.16.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 7.16.0
+
+### Minor Changes
+
+- Darkside: All classNames are now starts with `.aksel` instead of `.navds`. ([#3586](https://github.com/navikt/aksel/pull/3586))
+
 ## 7.15.0
 
 ## 7.14.3

package/darkside/accordion.darkside.css

@@ -1,5 +1,5 @@
 /* ---------------------------- Accordion header ---------------------------- */
-.navds-accordion__header {
+.aksel-accordion__header {
   width: 100%;
   display: flex;
   justify-content: flex-start;
@@ -32,7 +32,7 @@
       display: none;
     }
 
-    > .navds-accordion__icon-wrapper {
+    > .aksel-accordion__icon-wrapper {
       background-color: var(--ax-bg-accent-strong-hover);
       color: var(--ax-text-accent-contrast);
     }
@@ -56,12 +56,12 @@
   }
 }
 
-.navds-accordion--small .navds-accordion__header {
+.aksel-accordion--small .aksel-accordion__header {
   padding-block: var(--ax-space-8);
 }
 
-.navds-accordion__header::before,
-.navds-accordion__header::after {
+.aksel-accordion__header::before,
+.aksel-accordion__header::after {
   content: "";
   display: block;
   position: absolute;
@@ -73,24 +73,24 @@
   background-color: var(--ax-border-neutral-subtleA);
 }
 
-.navds-accordion__header::after {
+.aksel-accordion__header::after {
   top: initial;
   bottom: 0;
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after,
-.navds-accordion__item:not(:last-child) > .navds-accordion__header::after {
+.aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header::after,
+.aksel-accordion__item:not(:last-child) > .aksel-accordion__header::after {
   display: none;
 }
 
-.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible))
-  + .navds-accordion__item
-  > .navds-accordion__header::before {
+.aksel-accordion__item[data-expanded="false"]:has(.aksel-accordion__header:where(:hover, :focus-visible))
+  + .aksel-accordion__item
+  > .aksel-accordion__header::before {
   display: none;
 }
 
 /* ------------------------- Accordion chevron icon ------------------------- */
-.navds-accordion__icon-wrapper {
+.aksel-accordion__icon-wrapper {
   border-radius: var(--ax-border-radius-large);
   width: 22px;
   height: 22px;
@@ -99,20 +99,20 @@
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-accordion__header-chevron {
+.aksel-accordion__header-chevron {
   height: inherit;
   width: inherit;
   flex-shrink: 0;
   transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron {
+.aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header .aksel-accordion__header-chevron {
   transform: rotateX(-180deg);
 }
 
 /* ---------------------------- Accordion content --------------------------- */
 
-.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+.aksel-accordion--indent > .aksel-accordion__item .aksel-accordion__content-inner {
   padding-block: var(--ax-space-8);
   padding-inline: calc(var(--ax-space-20) + 2px) var(--ax-space-20);
 
@@ -121,12 +121,12 @@
   }
 }
 
-.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
+.aksel-accordion--indent > .aksel-accordion__item > .aksel-accordion__content {
   box-shadow: -2px 0 0 0 var(--ax-border-neutral-subtleA);
 }
 
-.navds-accordion__item {
-  & > .navds-accordion__content {
+.aksel-accordion__item {
+  & > .aksel-accordion__content {
     display: grid;
     grid-template-rows: 0fr;
     visibility: hidden;
@@ -139,14 +139,14 @@
     border-color: transparent;
     opacity: 0;
 
-    & .navds-accordion__content-inner {
+    & .aksel-accordion__content-inner {
       min-height: 0;
       padding-block: 0;
     }
   }
 
   &[data-expanded="true"] {
-    & > .navds-accordion__content {
+    & > .aksel-accordion__content {
       grid-template-rows: 1fr;
       visibility: visible;
       margin-block: var(--ax-space-8);
@@ -154,7 +154,7 @@
       border-color: var(--ax-border-neutral-subtleA);
       opacity: 1;
 
-      & .navds-accordion__content-inner {
+      & .aksel-accordion__content-inner {
         min-height: fit-content;
       }
     }
@@ -167,8 +167,8 @@
 
 /* ---------------- Accordion No Animation (defaultOpen) ---------------- */
 
-.navds-accordion__item--no-animation {
-  & > .navds-accordion__content {
+.aksel-accordion__item--no-animation {
+  & > .aksel-accordion__content {
     transition: none;
   }
 }

package/darkside/action-menu.darkside.css

@@ -1,5 +1,5 @@
 /* --------------------------- ActionMenu content --------------------------- */
-.navds-action-menu__content {
+.aksel-action-menu__content {
   overflow: hidden;
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid var(--ax-border-neutral-subtleA);
@@ -33,7 +33,7 @@
   }
 }
 
-.navds-action-menu__content > .navds-action-menu__content-inner {
+.aksel-action-menu__content > .aksel-action-menu__content-inner {
   --__axc-action-menu-content-p: var(--ax-space-8);
   --__axc-action-menu-item-pr: var(--ax-space-8);
   --__axc-action-menu-item-pl: var(--ax-space-8);
@@ -54,7 +54,7 @@
 }
 
 /* ----------------------------- ActionMenu Item ---------------------------- */
-.navds-action-menu__item {
+.aksel-action-menu__item {
   display: flex;
   align-items: center;
   gap: var(--ax-space-8);
@@ -86,11 +86,11 @@
   }
 }
 
-.navds-action-menu__item--has-icon {
+.aksel-action-menu__item--has-icon {
   --__axc-action-menu-item-pl: var(--ax-space-24);
 }
 
-.navds-action-menu__sub-trigger {
+.aksel-action-menu__sub-trigger {
   --__axc-action-menu-item-pr: var(--ax-space-2);
 
   &[data-state="open"] {
@@ -102,7 +102,7 @@
   }
 }
 
-.navds-action-menu__item--danger {
+.aksel-action-menu__item--danger {
   color: var(--ax-text-danger-subtle);
 
   &:focus {
@@ -112,18 +112,18 @@
 }
 
 /* ---------------------------- ActionMenu marker --------------------------- */
-.navds-action-menu__marker {
+.aksel-action-menu__marker {
   display: flex;
   align-items: center;
   gap: var(--ax-space-4);
 }
 
-.navds-action-menu__marker--right {
+.aksel-action-menu__marker--right {
   margin-left: auto;
   padding-left: var(--ax-space-16);
 }
 
-.navds-action-menu__marker--left {
+.aksel-action-menu__marker--left {
   position: absolute;
   left: 0;
   width: var(--__axc-action-menu-item-pl);
@@ -131,13 +131,13 @@
   justify-content: center;
 }
 
-.navds-action-menu__marker-icon svg {
+.aksel-action-menu__marker-icon svg {
   font-size: 18px;
   flex-shrink: 0;
 }
 
 /* --------------------------- ActionMenu shortcut -------------------------- */
-.navds-action-menu__shortcut {
+.aksel-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
   border-radius: var(--ax-border-radius-small);
@@ -152,7 +152,7 @@
 }
 
 /* ---------------------------- ActionMenu Grouping ---------------------------- */
-.navds-action-menu__label {
+.aksel-action-menu__label {
   display: flex;
   align-items: center;
   min-height: calc(var(--__axc-action-menu-item-height) - 6px);
@@ -165,7 +165,7 @@
   font-size: var(--ax-font-size-small);
 }
 
-.navds-action-menu__divider {
+.aksel-action-menu__divider {
   height: 1px;
   margin-block: var(--ax-space-8);
   background-color: var(--ax-border-neutral-subtleA);
@@ -173,29 +173,29 @@
 
 /* -------------------------- ActionMenu indicator -------------------------- */
 
-.navds-action-menu__indicator-icon--unchecked,
-.navds-action-menu__indicator-icon--checked,
-.navds-action-menu__indicator-icon--indeterminate {
+.aksel-action-menu__indicator-icon--unchecked,
+.aksel-action-menu__indicator-icon--checked,
+.aksel-action-menu__indicator-icon--indeterminate {
   display: none;
 }
 
-.navds-action-menu__indicator {
+.aksel-action-menu__indicator {
   display: grid;
   place-content: center;
 
-  &[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+  &[data-state="unchecked"] .aksel-action-menu__indicator-icon--unchecked {
     display: block;
   }
 
-  &[data-state="checked"] .navds-action-menu__indicator-icon--checked {
+  &[data-state="checked"] .aksel-action-menu__indicator-icon--checked {
     display: block;
   }
 
-  &[data-state="indeterminate"] .navds-action-menu__indicator-icon--indeterminate {
+  &[data-state="indeterminate"] .aksel-action-menu__indicator-icon--indeterminate {
     display: block;
   }
 }
 
-.navds-action-menu__indicator-icon {
+.aksel-action-menu__indicator-icon {
   font-size: 14px;
 }

package/darkside/alert.darkside.css

@@ -1,4 +1,4 @@
-.navds-alert {
+.aksel-alert {
   border-radius: var(--ax-border-radius-xlarge);
   border: 1px solid;
   padding: var(--ax-space-16) var(--ax-space-20);
@@ -13,78 +13,78 @@
   }
 }
 
-.navds-alert__wrapper--maxwidth {
+.aksel-alert__wrapper--maxwidth {
   max-width: 43.5rem;
 }
 
-.navds-alert__icon {
+.aksel-alert__icon {
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
   height: var(--ax-font-line-height-xlarge);
 }
 
-.navds-alert--small {
+.aksel-alert--small {
   padding: var(--ax-space-12) var(--ax-space-16);
   gap: var(--ax-space-8);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     margin-block-start: 0;
     height: var(--ax-font-line-height-large);
   }
 }
 
 /* ----------------------------- Alert variants ----------------------------- */
-.navds-alert--info {
+.aksel-alert--info {
   border-color: var(--ax-border-info);
   background-color: var(--ax-bg-info-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-info-icon);
   }
 }
 
-.navds-alert--success {
+.aksel-alert--success {
   border-color: var(--ax-border-success);
   background-color: var(--ax-bg-success-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-success-icon);
   }
 }
 
-.navds-alert--warning {
+.aksel-alert--warning {
   border-color: var(--ax-border-warning);
   background-color: var(--ax-bg-warning-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-warning-icon);
   }
 }
 
-.navds-alert--error {
+.aksel-alert--error {
   border-color: var(--ax-border-danger);
   background-color: var(--ax-bg-danger-moderate);
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     color: var(--ax-text-danger-icon);
   }
 }
 
 /* ----------------------------- Alert fullwidth ---------------------------- */
-.navds-alert--full-width {
+.aksel-alert--full-width {
   border-radius: 0;
 }
 
 /* ------------------------------ Alert inline ------------------------------ */
-.navds-alert--inline {
+.aksel-alert--inline {
   background-color: transparent;
   border: none;
   padding: 0;
 }
 
 /* ------------------------- Alert with close button ------------------------ */
-.navds-alert__button-wrapper {
+.aksel-alert__button-wrapper {
   align-self: flex-start;
   flex: 1;
   display: flex;
@@ -92,23 +92,23 @@
   justify-content: flex-end;
 }
 
-.navds-alert--close-button {
-  > .navds-alert__wrapper {
+.aksel-alert--close-button {
+  > .aksel-alert__wrapper {
     margin-block-start: var(--ax-space-2);
   }
 
-  > .navds-alert__icon {
+  > .aksel-alert__icon {
     margin-block-start: var(--ax-space-2);
   }
 
-  &.navds-alert--small {
+  &.aksel-alert--small {
     align-items: flex-start;
 
-    > .navds-alert__wrapper {
+    > .aksel-alert__wrapper {
       margin-block-start: var(--ax-space-4);
     }
 
-    > .navds-alert__icon {
+    > .aksel-alert__icon {
       margin-block-start: var(--ax-space-4);
     }
   }

package/darkside/baseline/baseline.darkside.css

@@ -14,7 +14,7 @@ body,
 
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
+  *:not(.aksel-loader *, .aksel-loader, .aksel-progress-bar *, .aksel-progress-bar),
   ::before,
   ::after {
     animation-delay: -1ms !important;
@@ -39,7 +39,7 @@ body,
  */
 
 .sr-only,
-.navds-sr-only {
+.aksel-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
@@ -62,8 +62,8 @@ body,
 
 .sr-only.focusable:active,
 .sr-only.focusable:focus,
-.navds-sr-only.focusable:active,
-.navds-sr-only.focusable:focus {
+.aksel-sr-only.focusable:active,
+.aksel-sr-only.focusable:focus {
   clip: auto;
   clip-path: none;
   height: auto;