@navikt/ds-css 7.40.0 → 8.0.0

package/dist/component/button.css

@@ -1,549 +1,236 @@
-[data-theme="dark"] {
-  --__ac-button-primary-text: var(--a-gray-900);
-  --__ac-button-primary-bg: var(--a-blue-200);
-  --__ac-button-primary-focus-border: var(--a-gray-900);
-  --__ac-button-primary-hover-bg: var(--a-blue-300);
-  --__ac-button-primary-active-bg: var(--a-blue-400);
-  --__ac-button-secondary-text: var(--a-white);
-  --__ac-button-secondary-hover-text: var(--a-white);
-  --__ac-button-secondary-active-text: var(--a-white);
-  --__ac-button-secondary-active-focus-border: var(--a-gray-900);
-  --__ac-button-secondary-bg: var(--a-gray-900);
-  --__ac-button-secondary-border: var(--a-blue-200);
-  --__ac-button-secondary-hover-bg: var(--a-gray-800);
-  --__ac-button-secondary-focus-border: var(--a-blue-200);
-  --__ac-button-secondary-active-bg: var(--a-gray-700);
-}
-
-[data-theme="light"] {
-  --__ac-button-primary-text: initial;
-  --__ac-button-primary-bg: initial;
-  --__ac-button-primary-focus-border: initial;
-  --__ac-button-primary-hover-bg: initial;
-  --__ac-button-primary-active-bg: initial;
-  --__ac-button-secondary-text: initial;
-  --__ac-button-secondary-hover-text: initial;
-  --__ac-button-secondary-active-text: initial;
-  --__ac-button-secondary-active-focus-border: initial;
-  --__ac-button-secondary-bg: initial;
-  --__ac-button-secondary-border: initial;
-  --__ac-button-secondary-hover-bg: initial;
-  --__ac-button-secondary-focus-border: initial;
-  --__ac-button-secondary-active-bg: initial;
-}
-
-.navds-button {
-  --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
-
-  display: inline-flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
-  padding: var(--ac-button-padding, var(--__ac-button-padding));
-  align-items: center;
-  justify-content: center;
-  gap: var(--a-spacing-2);
-}
-
-.navds-button--small {
-  --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
-
-  padding: var(--ac-button-padding-small, var(--__ac-button-padding));
-  min-height: 2rem;
-  min-width: 2rem;
-}
-
-.navds-button--xsmall {
-  --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
-
-  padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
-  gap: var(--a-spacing-1);
-}
-
-.navds-button--icon-only {
-  --__ac-button-padding: var(--a-spacing-3);
-
-  padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
-}
-
-.navds-button--small.navds-button--icon-only {
-  --__ac-button-padding: var(--a-spacing-1);
-
-  padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
-}
-
-.navds-button--xsmall.navds-button--icon-only {
-  --__ac-button-padding: var(--a-spacing-05);
-
-  padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
-}
-
-.navds-button:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--a-shadow-focus);
-}
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader;
 
-@supports not selector(:focus-visible) {
-  .navds-button:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
+@layer aksel.components.core.button {
+  .aksel-button {
+    --__axc-button-icon-size: 1.5rem;
+    --__axc-button-icon-margin: -4px;
+    --__axc-button-border-color: transparent;
+    --__axc-button-border-width: 2px;
+    padding: var(--ax-space-12) var(--ax-space-20);
+    border-radius: var(--ax-radius-8);
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ax-space-8);
+    box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
+    background: none;
+    border: none;
+    text-decoration: none;
+    display: inline-flex;
   }
-}
-
-.navds-button__icon {
-  --ac-button-icon-margin: -4px;
-
-  font-size: 1.5rem;
-  display: flex;
-}
-
-.navds-button__icon:first-child {
-  margin-left: var(--ac-button-icon-margin);
-}
-
-.navds-button__icon:last-child {
-  margin-right: var(--ac-button-icon-margin);
-}
-
-.navds-button--icon-only .navds-button__icon {
-  margin: 0;
-}
-
-:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
-  --ac-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
-}
-
-/*************************
- * .navds-button--primary *
- *************************/
-
-.navds-button--primary {
-  background-color: var(--ac-button-primary-bg, var(--__ac-button-primary-bg, var(--a-surface-action)));
-  color: var(--ac-button-primary-text, var(--__ac-button-primary-text, var(--a-text-on-action)));
-}
 
-@media (forced-colors: active) {
-  .navds-button.navds-button--primary {
-    background-color: highlight;
-    color: highlighttext;
+  .aksel-button:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
   }
 
-  .navds-button.navds-button--primary span {
-    forced-color-adjust: none;
+  .aksel-button[data-variant="primary"] {
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
-}
-
-.navds-button--primary:hover {
-  background-color: var(--ac-button-primary-hover-bg, var(--__ac-button-primary-hover-bg, var(--a-surface-action-hover)));
-}
-
-.navds-button--primary:active {
-  background-color: var(--ac-button-primary-active-bg, var(--__ac-button-primary-active-bg, var(--a-surface-action-active)));
-}
 
-.navds-button--primary:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow:
-    inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
-    var(--a-shadow-focus);
-}
-
-@media (forced-colors: active) {
-  .navds-button--primary:focus-visible {
-    box-shadow: none;
+  .aksel-button[data-variant="primary"]:hover {
+    background-color: var(--ax-bg-strong-hover);
   }
-}
 
-@supports not selector(:focus-visible) {
-  .navds-button--primary:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="primary"]:active {
+    background-color: var(--ax-bg-strong-pressed);
   }
-}
-
-.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
-}
-
-/*************************
- * .navds-button--primary-neutral *
- *************************/
-
-.navds-button--primary-neutral {
-  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
-  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
-}
-
-.navds-button--primary-neutral:hover {
-  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
-}
-
-.navds-button--primary-neutral:active {
-  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
-}
-
-.navds-button--primary-neutral:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
-    var(--a-shadow-focus);
-}
 
-@supports not selector(:focus-visible) {
-  .navds-button--primary-neutral:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="primary"]:is(:disabled, .aksel-button--disabled) {
+    background-color: var(--ax-bg-strong);
   }
-}
-
-.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
-.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
-}
-
-/**************************
-* .navds-button--secondary *
- **************************/
 
-.navds-button--secondary {
-  color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
-  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
-}
-
-.navds-button--secondary:hover {
-  color: var(--ac-button-secondary-hover-text, var(--__ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle)));
-  background-color: var(
-    --ac-button-secondary-hover-bg,
-    var(--__ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover))
-  );
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-hover-border, var(--a-border-action-hover));
-}
-
-.navds-button--secondary:focus-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--secondary:focus {
-    box-shadow:
-      inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="secondary"] {
+    --__axc-button-border-color: var(--ax-border-default);
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
   }
-}
 
-.navds-button--secondary:active {
-  color: var(--ac-button-secondary-active-text, var(--__ac-button-secondary-active-text, var(--a-text-on-action)));
-  background-color: var(--ac-button-secondary-active-bg, var(--__ac-button-secondary-active-bg, var(--a-surface-action-active)));
-  box-shadow: none;
-}
-
-.navds-button--secondary:focus-visible:active {
-  box-shadow:
-    inset 0 0 0 1px
-      var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--secondary:focus:active {
-    box-shadow:
-      inset 0 0 0 1px
-        var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="secondary"][data-color="neutral"] {
+    color: var(--ax-text-default);
   }
-}
-
-.navds-button--secondary:where(:disabled, .navds-button--disabled),
-.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ac-button-secondary-text, var(--__ac-button-secondary-text, var(--a-text-action)));
-  background-color: var(--ac-button-secondary-bg, var(--__ac-button-secondary-bg, var(--a-surface-transparent)));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--__ac-button-secondary-border, var(--a-border-action)));
-}
 
-/**************************
-* .navds-button--secondary-neutral *
- **************************/
-
-.navds-button--secondary-neutral {
-  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
-}
-
-.navds-button--secondary-neutral:hover {
-  background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-button--secondary-neutral:focus-visible {
-  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-  box-shadow:
-    inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--secondary-neutral:focus {
-    color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-    box-shadow:
-      inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="secondary"]:hover {
+    --__axc-button-border-color: var(--ax-border-strong);
+    background-color: var(--ax-bg-moderate-hoverA);
   }
-}
-
-.navds-button--secondary-neutral:active {
-  color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
-  background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
-  box-shadow: none;
-}
 
-.navds-button--secondary-neutral:focus-visible:active {
-  box-shadow:
-    inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
-    var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-button--secondary-neutral:focus:active {
-    box-shadow:
-      inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="secondary"]:active {
+    background-color: var(--ax-bg-moderate-pressedA);
   }
-}
-
-.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
-.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
-  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
-  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
-}
-
-/****************************
- * .navds-button--tertiary *
- ****************************/
-
-.navds-button--tertiary {
-  color: var(--ac-button-tertiary-text, var(--a-text-action));
-  background-color: var(--ac-button-tertiary-bg, var(--a-surface-transparent));
-}
-
-.navds-button--tertiary:hover {
-  color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
-  background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-button--tertiary:focus-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
-    var(--a-shadow-focus);
-}
 
-@supports not selector(:focus-visible) {
-  .navds-button--tertiary:focus {
-    box-shadow:
-      inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled) {
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
   }
-}
 
-.navds-button--tertiary:active {
-  color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
-  background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
-}
+  .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
 
-.navds-button--tertiary:active:hover {
-  background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
-}
+  .aksel-button[data-variant="tertiary"] {
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
+  }
 
-.navds-button--tertiary:focus-visible:active {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
+  .aksel-button[data-variant="tertiary"][data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-button--tertiary:focus:active {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
+  .aksel-button[data-variant="tertiary"]:hover {
+    background-color: var(--ax-bg-moderate-hoverA);
   }
-}
 
-.navds-button--tertiary:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ac-button-tertiary-text, var(--a-text-action));
-  background: none;
-  box-shadow: none;
-}
+  .aksel-button[data-variant="tertiary"]:active {
+    background-color: var(--ax-bg-moderate-pressedA);
+  }
 
-/****************************
- * .navds-button--tertiary-neutral *
- ****************************/
+  .aksel-button[data-variant="tertiary"][data-pressed="true"] {
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+  }
 
-.navds-button--tertiary-neutral {
-  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
-}
+  .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled) {
+    color: var(--ax-text-subtle);
+    background-color: rgba(0, 0, 0, 0);
+  }
 
-.navds-button--tertiary-neutral:hover {
-  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
-  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-}
+  .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
+    color: var(--ax-text-default);
+  }
 
-.navds-button--tertiary-neutral:focus-visible {
-  box-shadow:
-    inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
-    var(--a-shadow-focus);
-}
+  .aksel-button--small, .aksel-button--xsmall {
+    --__axc-button-icon-margin: -2px;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-button--tertiary-neutral:focus {
-    box-shadow:
-      inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
-      var(--a-shadow-focus);
+  .aksel-button--small {
+    padding: var(--ax-space-4) var(--ax-space-12);
+    gap: var(--ax-space-6);
+    min-width: 2rem;
+    min-height: 2rem;
   }
-}
 
-.navds-button--tertiary-neutral:active {
-  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
-  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
-}
+  .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--tertiary-neutral:active:hover {
-  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
-}
+  @supports not selector(:focus-visible) {
+    .aksel-button:focus {
+      outline: 3px solid var(--ax-border-focus);
+    }
+  }
 
-.navds-button--tertiary-neutral:focus-visible:active {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
+  .aksel-button__icon {
+    font-size: var(--__axc-button-icon-size);
+    display: flex;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-button--tertiary-neutral:focus:active {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
+  .aksel-button__icon:first-child {
+    margin-left: var(--__axc-button-icon-margin);
   }
-}
 
-.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
-.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
-  background: none;
-  box-shadow: none;
-}
+  .aksel-button__icon:last-child {
+    margin-right: var(--__axc-button-icon-margin);
+  }
 
-/*************************
- * .navds-button--danger *
- *************************/
+  .aksel-button--icon-only .aksel-button__icon {
+    margin: 0;
+  }
 
-.navds-button--danger {
-  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
-  color: var(--ac-button-danger-text, var(--a-text-on-danger));
-}
+  .aksel-button--icon-only {
+    padding: var(--ax-space-12);
+  }
 
-.navds-button--danger:hover {
-  background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
-}
+  .aksel-button--icon-only.aksel-button--small {
+    padding: var(--ax-space-4);
+  }
 
-.navds-button--danger:active {
-  background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
-}
+  .aksel-button--icon-only.aksel-button--xsmall {
+    padding: var(--ax-space-2);
+  }
 
-.navds-button--danger:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    var(--a-shadow-focus);
-}
+  .aksel-button:where(:disabled, .aksel-button--disabled) {
+    cursor: not-allowed;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-button--danger:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      var(--a-shadow-focus);
+  .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
+    opacity: var(--ax-opacity-disabled);
   }
-}
 
-.navds-button--danger:active:where(:disabled, .navds-button--disabled),
-.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
-  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
-}
+  .aksel-button > .aksel-loader {
+    position: absolute;
+  }
 
-/**************************
- * .navds-button:disabled *
- **************************/
+  .aksel-button .aksel-loader .aksel-loader__foreground {
+    stroke: currentColor;
+  }
 
-.navds-button:where(:disabled, .navds-button--disabled) {
-  cursor: not-allowed;
-}
+  .aksel-button[data-variant="primary"] .aksel-loader .aksel-loader__background {
+    stroke: rgba(255, 255, 255, .3);
+  }
 
-.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
-  opacity: 0.3;
-}
+  .aksel-button--loading > :not(.aksel-loader) {
+    visibility: hidden;
+  }
 
-/* Loader overrides */
+  @media (forced-colors: active) {
+    .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
+      opacity: 1;
+      color: graytext;
+    }
 
-.navds-button > .navds-loader {
-  position: absolute;
-}
+    .aksel-button {
+      color: buttontext;
+      background-color: buttonface;
+      border: 1px solid rgba(0, 0, 0, 0);
+    }
 
-.navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--ac-button-loader-stroke, currentColor);
-}
+    .aksel-button[data-variant="primary"]:not(:disabled) {
+      color: highlighttext;
+      background-color: highlight;
+    }
 
-.navds-button--primary .navds-loader .navds-loader__background,
-.navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
-}
+    .aksel-button[data-variant="primary"]:not(:disabled) span {
+      forced-color-adjust: none;
+    }
 
-.navds-button--loading > :not(.navds-loader) {
-  visibility: hidden;
-}
+    .aksel-button[data-variant="primary"]:not(:disabled):where(a) {
+      color: highlighttext;
+      background-color: linktext;
+    }
 
-@media (forced-colors: active) {
-  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
-    opacity: 1;
-    color: GrayText;
-  }
+    .aksel-button[data-variant="primary"]:not(:disabled):where(a) span {
+      forced-color-adjust: none;
+    }
 
-  .navds-button {
-    border: 1px solid transparent;
-    color: ButtonText;
-    background-color: ButtonFace;
-  }
+    .aksel-button[data-variant="primary"]:not(:disabled):hover {
+      color: highlight;
+      background-color: highlighttext;
+      border-color: highlight;
+    }
 
-  .navds-button:hover {
-    background-color: highlighttext;
-    border-color: highlight;
-    color: highlight;
-    box-shadow: none;
-  }
+    .aksel-button:hover:not(:disabled), .aksel-button[data-variant="primary"]:where(a):hover:not(:disabled) {
+      color: highlight;
+      box-shadow: none;
+      background-color: highlighttext;
+      border-color: highlight;
+    }
 
-  .navds-button:hover span {
-    forced-color-adjust: none;
-  }
+    .aksel-button:not(:disabled):hover span {
+      forced-color-adjust: none;
+    }
 
-  .navds-button .navds-loader .navds-loader__foreground {
-    stroke: canvas;
-  }
+    .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 {
-    stroke: canvastext;
+    .aksel-button[data-variant="primary"] .aksel-loader .aksel-loader__background {
+      stroke: canvastext;
+    }
   }
 }
+
+@layer aksel.components.form, aksel.components.modules, aksel.layout;