@navikt/ds-css 7.15.0 → 7.16.0

package/darkside/button.darkside.css

@@ -1,4 +1,4 @@
-.navds-button {
+.aksel-button {
   --__axc-button-icon-size: 1.5rem;
   --__axc-button-icon-margin: -4px;
   --__axc-button-border-color: transparent;
@@ -22,44 +22,44 @@
   }
 }
 
-.navds-button--small,
-.navds-button--xsmall {
+.aksel-button--small,
+.aksel-button--xsmall {
   --__axc-button-icon-margin: -2px;
 }
 
-.navds-button--small {
+.aksel-button--small {
   padding: var(--ax-space-4) var(--ax-space-12);
   min-height: 2rem;
   min-width: 2rem;
   gap: var(--ax-space-6);
 }
 
-.navds-button--xsmall {
+.aksel-button--xsmall {
   padding: var(--ax-space-2) var(--ax-space-8);
   gap: var(--ax-space-4);
 
   --__axc-button-icon-size: 1.25rem;
 }
 
-.navds-button--icon-only {
+.aksel-button--icon-only {
   padding: var(--ax-space-12);
 
-  &.navds-button--small {
+  &.aksel-button--small {
     padding: var(--ax-space-4);
   }
 
-  &.navds-button--xsmall {
+  &.aksel-button--xsmall {
     padding: var(--ax-space-2);
   }
 }
 
 @supports not selector(:focus-visible) {
-  .navds-button:focus {
+  .aksel-button:focus {
     outline: 3px solid var(--ax-border-focus);
   }
 }
 
-.navds-button__icon {
+.aksel-button__icon {
   font-size: var(--__axc-button-icon-size);
   display: flex;
 
@@ -71,15 +71,15 @@
     margin-right: var(--__axc-button-icon-margin);
   }
 
-  .navds-button--icon-only & {
+  .aksel-button--icon-only & {
     margin: 0;
   }
 }
 
 /*************************
- * .navds-button--primary *
+ * .aksel-button--primary *
  *************************/
-.navds-button--primary {
+.aksel-button--primary {
   background-color: var(--ax-bg-accent-strong);
   color: var(--ax-text-accent-contrast);
 
@@ -91,7 +91,7 @@
     background-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-accent-strong);
   }
 
@@ -108,9 +108,9 @@
 }
 
 /*************************
- * .navds-button--primary-neutral *
+ * .aksel-button--primary-neutral *
  *************************/
-.navds-button--primary-neutral {
+.aksel-button--primary-neutral {
   background-color: var(--ax-bg-neutral-strong);
   color: var(--ax-text-neutral-contrast);
 
@@ -122,15 +122,15 @@
     background-color: var(--ax-bg-neutral-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-neutral-strong);
   }
 }
 
 /**************************
-* .navds-button--secondary *
+* .aksel-button--secondary *
  **************************/
-.navds-button--secondary {
+.aksel-button--secondary {
   --__axc-button-border-color: var(--ax-border-accent);
 
   background-color: transparent;
@@ -146,7 +146,7 @@
     background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     --__axc-button-border-color: var(--ax-border-accent);
 
     background-color: transparent;
@@ -155,9 +155,9 @@
 }
 
 /**************************
-* .navds-button--secondary-neutral *
+* .aksel-button--secondary-neutral *
  **************************/
-.navds-button--secondary-neutral {
+.aksel-button--secondary-neutral {
   --__axc-button-border-color: var(--ax-border-neutral);
 
   background-color: transparent;
@@ -173,7 +173,7 @@
     background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     --__axc-button-border-color: var(--ax-border-neutral);
 
     color: var(--ax-text-neutral);
@@ -182,9 +182,9 @@
 }
 
 /****************************
- * .navds-button--tertiary *
+ * .aksel-button--tertiary *
  ****************************/
-.navds-button--tertiary {
+.aksel-button--tertiary {
   background-color: transparent;
   color: var(--ax-text-accent-subtle);
 
@@ -196,16 +196,16 @@
     background-color: var(--ax-bg-accent-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     color: var(--ax-text-accent-subtle);
     background-color: transparent;
   }
 }
 
 /****************************
- * .navds-button--tertiary-neutral *
+ * .aksel-button--tertiary-neutral *
  ****************************/
-.navds-button--tertiary-neutral {
+.aksel-button--tertiary-neutral {
   background-color: transparent;
   color: var(--ax-text-neutral);
 
@@ -217,16 +217,16 @@
     background-color: var(--ax-bg-neutral-moderate-pressedA);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     color: var(--ax-text-neutral);
     background-color: transparent;
   }
 }
 
 /*************************
- * .navds-button--danger *
+ * .aksel-button--danger *
  *************************/
-.navds-button--danger {
+.aksel-button--danger {
   background-color: var(--ax-bg-danger-strong);
   color: var(--ax-text-danger-contrast);
 
@@ -238,70 +238,70 @@
     background-color: var(--ax-bg-danger-strong-pressed);
   }
 
-  &:is(:disabled, .navds-button--disabled) {
+  &:is(:disabled, .aksel-button--disabled) {
     background-color: var(--ax-bg-danger-strong);
   }
 }
 
 /**************************
- * .navds-button:disabled *
+ * .aksel-button:disabled *
  **************************/
 
-.navds-button:where(:disabled, .navds-button--disabled) {
+.aksel-button:where(:disabled, .aksel-button--disabled) {
   cursor: not-allowed;
 }
 
-.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+.aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
   opacity: var(--ax-opacity-disabled);
 }
 
 /* Loader overrides */
-.navds-button > .navds-loader {
+.aksel-button > .aksel-loader {
   position: absolute;
 }
 
-.navds-button .navds-loader .navds-loader__foreground {
+.aksel-button .aksel-loader .aksel-loader__foreground {
   stroke: currentColor;
 }
 
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
+.aksel-button--primary .aksel-loader .aksel-loader__background,
+.aksel-button--danger .aksel-loader .aksel-loader__background {
   stroke: rgb(255 255 255 / 0.3);
 }
 
-.navds-button--loading > :not(.navds-loader) {
+.aksel-button--loading > :not(.aksel-loader) {
   visibility: hidden;
 }
 
 @media (forced-colors: active) {
-  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
     opacity: 1;
     color: GrayText;
   }
 
-  .navds-button {
+  .aksel-button {
     border: 1px solid transparent;
     color: ButtonText;
     background-color: ButtonFace;
   }
 
-  .navds-button:not(:disabled):hover {
+  .aksel-button:not(:disabled):hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
     box-shadow: none;
   }
 
-  .navds-button:not(:disabled):hover span {
+  .aksel-button:not(:disabled):hover span {
     forced-color-adjust: none;
   }
 
-  .navds-button .navds-loader .navds-loader__foreground {
+  .aksel-button .aksel-loader .aksel-loader__foreground {
     stroke: canvas;
   }
 
-  .navds-button--primary .navds-loader .navds-loader__background,
-  .navds-button--danger .navds-loader .navds-loader__background {
+  .aksel-button--primary .aksel-loader .aksel-loader__background,
+  .aksel-button--danger .aksel-loader .aksel-loader__background {
     stroke: canvastext;
   }
 }

package/darkside/chat.darkside.css

@@ -1,25 +1,25 @@
-.navds-chat {
+.aksel-chat {
   display: flex;
   align-items: flex-end;
   gap: var(--ax-space-12);
   max-width: 40.75rem;
 }
 
-.navds-chat--right {
+.aksel-chat--right {
   flex-direction: row-reverse;
 
-  & .navds-chat__bubble-wrapper {
+  & .aksel-chat__bubble-wrapper {
     align-items: flex-end;
   }
 
-  & .navds-chat__bubble {
+  & .aksel-chat__bubble {
     border-radius: var(--ax-border-radius-xlarge);
     border-bottom-right-radius: var(--ax-border-radius-small);
   }
 }
 
 /* ------------------------------- Chat avatar ------------------------------ */
-.navds-chat__avatar {
+.aksel-chat__avatar {
   align-items: center;
   background-color: var(--ax-bg-raised);
   border-radius: var(--ax-border-radius-full);
@@ -44,7 +44,7 @@
 }
 
 /* ------------------------------- Chat bubble ------------------------------ */
-.navds-chat__bubble-wrapper {
+.aksel-chat__bubble-wrapper {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -53,7 +53,7 @@
   gap: var(--ax-space-12);
 }
 
-.navds-chat__bubble {
+.aksel-chat__bubble {
   padding: var(--ax-space-16) var(--ax-space-20);
   width: fit-content;
   background-color: var(--ax-bg-raised);
@@ -65,27 +65,27 @@
   border: 1px solid var(--ax-border-neutral-subtleA);
 }
 
-.navds-chat--small .navds-chat__bubble {
+.aksel-chat--small .aksel-chat__bubble {
   padding: var(--ax-space-12) var(--ax-space-16);
 }
 
 /* -------------------------- Chat bubble variants -------------------------- */
-.navds-chat--info {
-  & .navds-chat__bubble,
-  & .navds-chat__avatar {
+.aksel-chat--info {
+  & .aksel-chat__bubble,
+  & .aksel-chat__avatar {
     background-color: var(--ax-bg-info-moderate);
   }
 }
 
-.navds-chat--neutral {
-  & .navds-chat__bubble,
-  & .navds-chat__avatar {
+.aksel-chat--neutral {
+  & .aksel-chat__bubble,
+  & .aksel-chat__avatar {
     background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
 /* ------------------------------ Chat top text ----------------------------- */
-.navds-chat__top-text {
+.aksel-chat__top-text {
   color: var(--ax-text-neutral);
   display: flex;
   gap: var(--ax-space-8);
@@ -94,22 +94,22 @@
   margin: 0;
 }
 
-.navds-chat--right .navds-chat__top-text {
+.aksel-chat--right .aksel-chat__top-text {
   align-self: flex-end;
 }
 
-.navds-chat--top-text-left .navds-chat__top-text {
+.aksel-chat--top-text-left .aksel-chat__top-text {
   align-self: flex-start;
 }
 
-.navds-chat--top-text-right .navds-chat__top-text {
+.aksel-chat--top-text-right .aksel-chat__top-text {
   align-self: flex-end;
 }
 
-.navds-chat--left .navds-chat__top-text--right {
+.aksel-chat--left .aksel-chat__top-text--right {
   align-self: flex-end;
 }
 
-.navds-chat--right .navds-chat__top-text--left {
+.aksel-chat--right .aksel-chat__top-text--left {
   align-self: flex-start;
 }

package/darkside/chips.darkside.css

@@ -1,4 +1,4 @@
-.navds-chips {
+.aksel-chips {
   display: flex;
   gap: var(--ax-space-8);
   margin: 0;
@@ -7,14 +7,14 @@
   flex-wrap: wrap;
 }
 
-.navds-chips li {
+.aksel-chips li {
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
 }
 
-.navds-chips__chip {
+.aksel-chips__chip {
   all: unset;
   display: flex;
   cursor: pointer;
@@ -33,43 +33,43 @@
   }
 }
 
-.navds-chips--readonly {
-  .navds-chips__chip {
+.aksel-chips--readonly {
+  .aksel-chips__chip {
     background-color: var(--ax-bg-neutral-moderateA);
   }
 }
 
-.navds-chips--small {
-  .navds-chips__chip {
+.aksel-chips--small {
+  .aksel-chips__chip {
     min-height: 1.5rem;
     padding: 0 var(--ax-space-8);
   }
 
-  .navds-chips__toggle-icon {
+  .aksel-chips__toggle-icon {
     width: 1rem;
     height: 1rem;
   }
 
-  .navds-chips__toggle--with-checkmark {
+  .aksel-chips__toggle--with-checkmark {
     padding-left: var(--ax-space-4);
   }
 
-  .navds-chips__removable-icon {
+  .aksel-chips__removable-icon {
     width: 1.25rem;
     height: 1.25rem;
   }
 
-  .navds-chips__removable-icon > svg {
+  .aksel-chips__removable-icon > svg {
     width: 1rem;
   }
 
-  .navds-chips--icon-right {
+  .aksel-chips--icon-right {
     padding-right: var(--ax-space-2);
   }
 }
 
 /* ------------------------------ Chips Toggle ------------------------------ */
-.navds-chips__toggle--action {
+.aksel-chips__toggle--action {
   box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
   background-color: var(--ax-bg-accent-moderate);
   color: var(--ax-text-accent);
@@ -89,7 +89,7 @@
   }
 }
 
-.navds-chips__toggle--neutral {
+.aksel-chips__toggle--neutral {
   box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
   background-color: var(--ax-bg-neutral-moderate);
   color: var(--ax-text-neutral);
@@ -109,18 +109,18 @@
   }
 }
 
-.navds-chips--medium .navds-chips__toggle--with-checkmark {
+.aksel-chips--medium .aksel-chips__toggle--with-checkmark {
   padding-left: var(--ax-space-6);
 }
 
 /* -------------------------- start old CSS --------------------------  */
 
 /* ----------------------------- Chips removable ---------------------------- */
-.navds-chips__removable {
+.aksel-chips__removable {
   gap: 0;
 }
 
-.navds-chips__removable--action {
+.aksel-chips__removable--action {
   background: var(--ax-bg-accent-strong-pressed);
   color: var(--ax-text-accent-contrast);
 
@@ -129,7 +129,7 @@
   }
 }
 
-.navds-chips__removable--neutral {
+.aksel-chips__removable--neutral {
   background: var(--ax-bg-neutral-strong-pressed);
   color: var(--ax-text-neutral-contrast);
 
@@ -138,7 +138,7 @@
   }
 }
 
-.navds-chips__removable-icon {
+.aksel-chips__removable-icon {
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.25rem;
@@ -147,16 +147,16 @@
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-chips--icon-left {
+.aksel-chips--icon-left {
   padding-left: var(--ax-space-6);
 }
 
-.navds-chips--icon-right {
+.aksel-chips--icon-right {
   padding-right: var(--ax-space-6);
 }
 
 @media (forced-colors: active) {
-  .navds-chips__chip {
+  .aksel-chips__chip {
     border: 1px solid transparent;
 
     &:hover {
@@ -165,11 +165,11 @@
     }
   }
 
-  .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
+  .aksel-chips__chip:where([data-pressed="true"], :active, :hover) > span {
     forced-color-adjust: none;
   }
 
-  .navds-chips__toggle[data-pressed="true"] {
+  .aksel-chips__toggle[data-pressed="true"] {
     background-color: selecteditem;
     color: selecteditemtext;
     border: 1px solid selecteditem;

package/darkside/copybutton.darkside.css

@@ -1,4 +1,4 @@
-.navds-copybutton[data-active="true"] .navds-copybutton__icon {
+.aksel-copybutton[data-active="true"] .aksel-copybutton__icon {
   animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
 }