@scania/tegel 1.34.0-multibrand-beta.6 → 1.35.0

package/dist/collection/components/button/button.css

@@ -1,17 +1,203 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
+:root,
+.tds-mode-light {
+  --tds-btn-primary-background: var(--background-clickable-primary-primary);
+  --tds-btn-primary-background-hover: var(--background-clickable-primary-primary-hover);
+  --tds-btn-primary-background-active: var(--background-clickable-primary-pressed);
+  --tds-btn-primary-background-focus: var(--background-clickable-primary-focus);
+  --tds-btn-primary-background-disabled-primary: var(--background-clickable-primary-disabled);
+  --tds-btn-primary-background-disabled-secondary: var(--tds-white);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
+  --tds-btn-primary-color: var(--tds-white);
+  --tds-btn-primary-color-hover: var(--tds-white);
+  --tds-btn-primary-color-active: var(--tds-white);
+  --tds-btn-primary-color-focus: var(--tds-white);
+  --tds-btn-primary-color-disabled: var(--tds-grey-250);
+  --tds-btn-primary-border-color: transparent;
+  --tds-btn-primary-border-color-hover: transparent;
+  --tds-btn-primary-border-color-active: var(--tds-blue-700);
+  --tds-btn-primary-border-color-focus: var(--tds-blue-700);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-primary-border-color-disabled: transparent;
+  /* ICON */
+  --tds-btn-icon-primary-fill: var(--tds-grey-50);
+  --tds-btn-icon-primary-color: var(--tds-grey-50);
+  --tds-btn-secondary-background: transparent;
+  --tds-btn-secondary-color: var(--tds-black);
+  --tds-btn-secondary-border-color: var(--tds-grey-350);
+  --tds-btn-secondary-background-hover: var(--tds-blue-700);
+  --tds-btn-secondary-color-hover: var(--tds-white);
+  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
+  --tds-btn-secondary-background-active: transparent;
+  --tds-btn-secondary-color-active: var(--tds-black);
+  --tds-btn-secondary-border-color-active: var(--tds-grey-650);
+  --tds-btn-secondary-background-focus: var(--tds-blue-700);
+  --tds-btn-secondary-color-focus: var(--tds-white);
+  --tds-btn-secondary-border-color-focus: var(--tds-white);
+  --tds-btn-secondary-outline-color: var(--tds-black-38);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-background-disabled: transparent;
+  --tds-btn-secondary-color-disabled: var(--tds-grey-250);
+  --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
+  --tds-btn-icon-secondary-color-focus: var(--tds-black);
+  --tds-btn-icon-secondary-fill-focus: var(--tds-black);
+  --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
+  /* ICON */
+  --tds-btn-icon-secondary-fill: var(--tds-grey-958);
+  --tds-btn-icon-secondary-color: var(--tds-grey-958);
+  /* ICON HOVER */
+  --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
+  --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
+  /* ICON HOVER */
+  --tds-btn-icon-secondary-color-active: var(--tds-grey-958);
+  --tds-btn-ghost-background: transparent;
+  --tds-btn-ghost-color: var(--tds-grey-950);
+  --tds-btn-ghost-border-color: transparent;
+  --tds-btn-ghost-background-hover: transparent;
+  --tds-btn-ghost-color-hover: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
+  --tds-btn-ghost-outline-color-hover: var(--tds-black-48);
+  --tds-btn-ghost-background-active: transparent;
+  --tds-btn-ghost-color-active: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-active: var(--tds-grey-650);
+  --tds-btn-ghost-background-focus: transparent;
+  --tds-btn-ghost-color-focus: var(--tds-grey-950);
+  --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
+  --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-ghost-background-disabled: transparent;
+  --tds-btn-ghost-color-disabled: var(--tds-black-38);
+  --tds-btn-ghost-border-color-disabled: transparent;
+  /* ICON */
+  --tds-btn-icon-ghost-fill: var(--tds-grey-958);
+  --tds-btn-icon-ghost-color: var(--tds-grey-958);
+  --tds-btn-danger-background: var(--scania-extended-red-400);
+  --tds-btn-danger-color: var(--tds-white);
+  --tds-btn-danger-border-color: transparent;
+  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
+  --tds-btn-danger-color-hover: var(--tds-white);
+  --tds-btn-danger-border-color-hover: transparent;
+  --tds-btn-danger-background-active: var(--scania-extended-red-600);
+  --tds-btn-danger-color-active: var(--tds-white);
+  --tds-btn-danger-border-color-active: var(--tds-red-700);
+  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
+  --tds-btn-danger-color-focus: var(--tds-white);
+  --tds-btn-danger-border-color-focus: var(--tds-red-500);
+  --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-danger-background-disabled-primary: var(--scania-neutral-solid-50);
+  --tds-btn-danger-background-disabled-secondary: var(--tds-white);
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-danger-color-disabled: var(--tds-black-38);
+  --tds-btn-danger-border-color-disabled: transparent;
+  /* ICON */
+  --tds-btn-icon-danger-fill: var(--tds-grey-50);
+  --tds-btn-icon-danger-color: var(--tds-grey-50);
+}
+:root .tds-mode-variant-primary,
+.tds-mode-light .tds-mode-variant-primary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
+}
+:root .tds-mode-variant-secondary,
+.tds-mode-light .tds-mode-variant-secondary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
+}
+
+.tds-mode-dark {
+  --tds-btn-primary-background: var(--scania-blue-400);
+  --tds-btn-primary-background-hover: var(--scania-blue-500);
+  --tds-btn-primary-background-active: var(--scania-blue-600);
+  --tds-btn-primary-background-focus: var(--scania-blue-500);
+  --tds-btn-primary-border-color-focus: var(--tds-white);
+  --tds-btn-primary-border-color: transparent;
+  --tds-btn-primary-border-color-hover: var(--tds-white);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
+  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-850);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
+  --tds-btn-primary-color-disabled: var(--scania-neutral-transparent-inverse-500);
+  /* ICON */
+  --tds-btn-icon-primary-fill: var(--tds-grey-50);
+  --tds-btn-icon-primary-color: var(--tds-grey-50);
+  --tds-btn-secondary-background: transparent;
+  --tds-btn-secondary-color: var(--tds-white);
+  --tds-btn-secondary-border-color: var(--scania-neutral-transparent-inverse-400);
+  --tds-btn-secondary-background-hover: var(--tds-blue-500);
+  --tds-btn-secondary-color-hover: var(--tds-white);
+  --tds-btn-secondary-border-color-hover: var(--tds-white);
+  --tds-btn-secondary-background-active: var(--scania-blue-600);
+  --tds-btn-secondary-color-active: var(--tds-white);
+  --tds-btn-secondary-border-color-active: var(--tds-grey-200);
+  --tds-btn-secondary-background-focus: var(--scania-blue-500);
+  --tds-btn-secondary-color-focus: var(--tds-white);
+  --tds-btn-secondary-border-color-focus: var(--tds-white);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-secondary-outline-color: var(--tds-white);
+  --tds-btn-secondary-background-disabled: transparent;
+  --tds-btn-secondary-color-disabled: var(--tds-grey-500);
+  --tds-btn-secondary-border-color-disabled: var(--tds-grey-500);
+  --tds-btn-icon-secondary-color-focus: var(--tds-white);
+  --tds-btn-icon-secondary-fill-focus: var(--tds-white);
+  /* ICON */
+  --tds-btn-icon-secondary-fill: var(--tds-grey-50);
+  --tds-btn-icon-secondary-color: var(--tds-grey-50);
+  --tds-btn-ghost-background: transparent;
+  --tds-btn-ghost-color: var(--tds-white);
+  --tds-btn-ghost-border-color: transparent;
+  --tds-btn-ghost-background-hover: transparent;
+  --tds-btn-ghost-color-hover: var(--tds-white);
+  --tds-btn-ghost-border-color-hover: var(--tds-white);
+  --tds-btn-ghost-outline-color-hover: var(--tds-white-48);
+  --tds-btn-ghost-background-active: transparent;
+  --tds-btn-ghost-color-active: var(--tds-white);
+  --tds-btn-ghost-border-color-active: var(--tds-grey-200);
+  --tds-btn-ghost-background-focus: transparent;
+  --tds-btn-ghost-color-focus: var(--tds-white);
+  --tds-btn-ghost-border-color-focus: var(--tds-white);
+  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-background-disabled: transparent;
+  --tds-btn-ghost-color-disabled: var(--tds-grey-500);
+  --tds-btn-ghost-border-color-disabled: transparent;
+  /* ICON */
+  --tds-btn-icon-ghost-fill: var(--tds-grey-50);
+  --tds-btn-icon-ghost-color: var(--tds-grey-50);
+  --tds-btn-danger-background: var(--scania-extended-red-400);
+  --tds-btn-danger-color: var(--tds-white);
+  --tds-btn-danger-border-color: transparent;
+  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
+  --tds-btn-danger-color-hover: var(--tds-white);
+  --tds-btn-danger-border-color-hover: transparent;
+  --tds-btn-danger-background-active: var(--scania-extended-red-600);
+  --tds-btn-danger-color-active: var(--tds-white);
+  --tds-btn-danger-border-color-active: transparent;
+  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
+  --tds-btn-danger-color-focus: var(--tds-white);
+  --tds-btn-danger-border-color-focus: var(--tds-white);
+  --tds-btn-danger-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
+  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-850);
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-danger-color-disabled: var(--tds-grey-500);
+  --tds-btn-danger-border-color-disabled: transparent;
+  /* ICON */
+  --tds-btn-icon-danger-fill: var(--tds-white);
+  --tds-btn-icon-danger-color: var(--tds-white);
+}
+.tds-mode-dark .tds-mode-variant-primary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
+}
+.tds-mode-dark .tds-mode-variant-secondary {
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
+}
+
 button {
   box-sizing: border-box;
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   display: inline-flex;
   align-items: center;
-  border-radius: var(--button-radius);
+  border-radius: 4px;
   border: none;
   box-shadow: none;
   position: relative;
@@ -27,481 +213,17 @@ button * {
 button:focus {
   outline: 1px solid var(--scania-blue-400);
 }
-button.primary {
-  background: var(--button-primary-background);
-  border-color: var(--button-primary-border-color);
-  color: var(--button-primary-color);
-  outline-color: var(--button-primary-outline-color);
-}
-button.primary.icon {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button.primary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.primary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button.secondary {
-  background: var(--button-secondary-background);
-  border-color: var(--button-secondary-border-color);
-  color: var(--button-secondary-color);
-  outline-color: var(--button-secondary-outline-color);
-}
-button.secondary.icon {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button.secondary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.secondary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button.ghost {
-  background: var(--button-ghost-background);
-  border-color: var(--button-ghost-border-color);
-  color: var(--button-ghost-color);
-  outline-color: var(--button-ghost-outline-color);
-}
-button.ghost.icon {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button.ghost.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.ghost:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button.danger {
-  background: var(--button-danger-background);
-  border-color: var(--button-danger-border-color);
-  color: var(--button-danger-color);
-  outline-color: var(--button-danger-outline-color);
-}
-button.danger.icon {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button.danger.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.danger:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button:hover.primary {
-  background: var(--button-primary-background-hover);
-  border-color: var(--button-primary-border-color-hover);
-  color: var(--button-primary-color-hover);
-  outline-color: var(--button-primary-outline-color-hover);
-}
-button:hover.primary.icon {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button:hover.primary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:hover.primary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button:hover.secondary {
-  background: var(--button-secondary-background-hover);
-  border-color: var(--button-secondary-border-color-hover);
-  color: var(--button-secondary-color-hover);
-  outline-color: var(--button-secondary-outline-color-hover);
-}
-button:hover.secondary.icon {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button:hover.secondary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:hover.secondary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button:hover.ghost {
-  background: var(--button-ghost-background-hover);
-  border-color: var(--button-ghost-border-color-hover);
-  color: var(--button-ghost-color-hover);
-  outline-color: var(--button-ghost-outline-color-hover);
-}
-button:hover.ghost.icon {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button:hover.ghost.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:hover.ghost:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button:hover.danger {
-  background: var(--button-danger-background-hover);
-  border-color: var(--button-danger-border-color-hover);
-  color: var(--button-danger-color-hover);
-  outline-color: var(--button-danger-outline-color-hover);
-}
-button:hover.danger.icon {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button:hover.danger.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:hover.danger:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
 button:focus-visible {
-  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
-  outline-offset: calc(var(--button-outline-width) * -1);
-}
-button:focus-visible.primary {
-  background: var(--button-primary-background-focus);
-  border-color: var(--button-primary-border-color-focus);
-  color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
-}
-button:focus-visible.primary.icon {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button:focus-visible.primary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:focus-visible.primary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button:focus-visible.secondary {
-  background: var(--button-secondary-background-focus);
-  border-color: var(--button-secondary-border-color-focus);
-  color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
-}
-button:focus-visible.secondary.icon {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button:focus-visible.secondary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:focus-visible.secondary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button:focus-visible.ghost {
-  background: var(--button-ghost-background-focus);
-  border-color: var(--button-ghost-border-color-focus);
-  color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
-}
-button:focus-visible.ghost.icon {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button:focus-visible.ghost.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:focus-visible.ghost:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button:focus-visible.danger {
-  background: var(--button-danger-background-focus);
-  border-color: var(--button-danger-border-color-focus);
-  color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
-}
-button:focus-visible.danger.icon {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button:focus-visible.danger.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:focus-visible.danger:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button:focus-visible.primary {
-  background: var(--button-primary-background-focus);
-  border-color: var(--button-primary-border-color-focus);
-  color: var(--button-primary-color-focus);
-  outline-color: var(--button-primary-outline-color-focus);
-}
-button:focus-visible.primary ::slotted([slot=icon]) {
-  fill: var(--button-icon-primary-fill-focus);
-  color: var(--button-icon-primary-fill-focus);
-  fill: var(--button-icon-primary-color-focus);
-  color: var(--button-icon-primary-color-focus);
-}
-button:focus-visible.secondary {
-  background: var(--button-secondary-background-focus);
-  border-color: var(--button-secondary-border-color-focus);
-  color: var(--button-secondary-color-focus);
-  outline-color: var(--button-secondary-outline-color-focus);
-}
-button:focus-visible.secondary ::slotted([slot=icon]) {
-  fill: var(--button-icon-secondary-fill-focus);
-  color: var(--button-icon-secondary-fill-focus);
-  fill: var(--button-icon-secondary-color-focus);
-  color: var(--button-icon-secondary-color-focus);
-}
-button:focus-visible.ghost {
-  background: var(--button-ghost-background-focus);
-  border-color: var(--button-ghost-border-color-focus);
-  color: var(--button-ghost-color-focus);
-  outline-color: var(--button-ghost-outline-color-focus);
-}
-button:focus-visible.ghost ::slotted([slot=icon]) {
-  fill: var(--button-icon-ghost-fill-focus);
-  color: var(--button-icon-ghost-fill-focus);
-  fill: var(--button-icon-ghost-color-focus);
-  color: var(--button-icon-ghost-color-focus);
-}
-button:focus-visible.danger {
-  background: var(--button-danger-background-focus);
-  border-color: var(--button-danger-border-color-focus);
-  color: var(--button-danger-color-focus);
-  outline-color: var(--button-danger-outline-color-focus);
-}
-button:focus-visible.danger ::slotted([slot=icon]) {
-  fill: var(--button-icon-danger-fill-focus);
-  color: var(--button-icon-danger-fill-focus);
-  fill: var(--button-icon-danger-color-focus);
-  color: var(--button-icon-danger-color-focus);
-}
-button:active.primary, button.active.primary {
-  background: var(--button-primary-background-active);
-  border-color: var(--button-primary-border-color-active);
-  color: var(--button-primary-color-active);
-  outline-color: var(--button-primary-outline-color-active);
-}
-button:active.primary.icon, button.active.primary.icon {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button:active.primary.icon.disabled, button.active.primary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:active.primary:not(.disabled) ::slotted([slot=icon]), button.active.primary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button:active.secondary, button.active.secondary {
-  background: var(--button-secondary-background-active);
-  border-color: var(--button-secondary-border-color-active);
-  color: var(--button-secondary-color-active);
-  outline-color: var(--button-secondary-outline-color-active);
-}
-button:active.secondary.icon, button.active.secondary.icon {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button:active.secondary.icon.disabled, button.active.secondary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:active.secondary:not(.disabled) ::slotted([slot=icon]), button.active.secondary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button:active.ghost, button.active.ghost {
-  background: var(--button-ghost-background-active);
-  border-color: var(--button-ghost-border-color-active);
-  color: var(--button-ghost-color-active);
-  outline-color: var(--button-ghost-outline-color-active);
-}
-button:active.ghost.icon, button.active.ghost.icon {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button:active.ghost.icon.disabled, button.active.ghost.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:active.ghost:not(.disabled) ::slotted([slot=icon]), button.active.ghost:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button:active.danger, button.active.danger {
-  background: var(--button-danger-background-active);
-  border-color: var(--button-danger-border-color-active);
-  color: var(--button-danger-color-active);
-  outline-color: var(--button-danger-outline-color-active);
-}
-button:active.danger.icon, button.active.danger.icon {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button:active.danger.icon.disabled, button.active.danger.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button:active.danger:not(.disabled) ::slotted([slot=icon]), button.active.danger:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button.disabled.primary, button:disabled.primary {
-  background: var(--button-primary-background-disabled);
-  border-color: var(--button-primary-border-color-disabled);
-  color: var(--button-primary-color-disabled);
-  outline-color: var(--button-primary-outline-color-disabled);
-}
-button.disabled.primary.icon, button:disabled.primary.icon {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button.disabled.primary.icon.disabled, button:disabled.primary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.disabled.primary:not(.disabled) ::slotted([slot=icon]), button:disabled.primary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-primary-fill);
-  color: var(--button-icon-primary-fill);
-  fill: var(--button-icon-primary-color);
-  color: var(--button-icon-primary-color);
-}
-button.disabled.secondary, button:disabled.secondary {
-  background: var(--button-secondary-background-disabled);
-  border-color: var(--button-secondary-border-color-disabled);
-  color: var(--button-secondary-color-disabled);
-  outline-color: var(--button-secondary-outline-color-disabled);
-}
-button.disabled.secondary.icon, button:disabled.secondary.icon {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button.disabled.secondary.icon.disabled, button:disabled.secondary.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.disabled.secondary:not(.disabled) ::slotted([slot=icon]), button:disabled.secondary:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-secondary-fill);
-  color: var(--button-icon-secondary-fill);
-  fill: var(--button-icon-secondary-color);
-  color: var(--button-icon-secondary-color);
-}
-button.disabled.ghost, button:disabled.ghost {
-  background: var(--button-ghost-background-disabled);
-  border-color: var(--button-ghost-border-color-disabled);
-  color: var(--button-ghost-color-disabled);
-  outline-color: var(--button-ghost-outline-color-disabled);
-}
-button.disabled.ghost.icon, button:disabled.ghost.icon {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button.disabled.ghost.icon.disabled, button:disabled.ghost.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.disabled.ghost:not(.disabled) ::slotted([slot=icon]), button:disabled.ghost:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-ghost-fill);
-  color: var(--button-icon-ghost-fill);
-  fill: var(--button-icon-ghost-color);
-  color: var(--button-icon-ghost-color);
-}
-button.disabled.danger, button:disabled.danger {
-  background: var(--button-danger-background-disabled);
-  border-color: var(--button-danger-border-color-disabled);
-  color: var(--button-danger-color-disabled);
-  outline-color: var(--button-danger-outline-color-disabled);
-}
-button.disabled.danger.icon, button:disabled.danger.icon {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
-}
-button.disabled.danger.icon.disabled, button:disabled.danger.icon.disabled {
-  color: var(--button-icon-secondary-color-disabled);
-}
-button.disabled.danger:not(.disabled) ::slotted([slot=icon]), button:disabled.danger:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--button-icon-danger-fill);
-  color: var(--button-icon-danger-fill);
-  fill: var(--button-icon-danger-color);
-  color: var(--button-icon-danger-color);
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
 }
 button.xs {
   padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
   height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
 }
 button.sm {
   padding: var(--tds-spacing-element-12);
@@ -541,11 +263,235 @@ button.fullbleed {
 button.animation-fade {
   transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
 }
+button.primary {
+  background: var(--tds-btn-primary-background);
+  border-color: var(--tds-btn-primary-border-color);
+  color: var(--tds-btn-primary-color);
+  outline-color: var(--tds-btn-primary-outline-color);
+}
+button.primary.icon {
+  fill: var(--tds-btn-icon-primary-fill);
+  color: var(--tds-btn-icon-primary-fill);
+  fill: var(--tds-btn-icon-primary-color);
+  color: var(--tds-btn-icon-primary-color);
+}
+button.primary:hover {
+  background: var(--tds-btn-primary-background-hover);
+  border-color: var(--tds-btn-primary-border-color-hover);
+  color: var(--tds-btn-primary-color-hover);
+  outline-color: var(--tds-btn-primary-outline-color-hover);
+}
+button.primary:hover:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-primary-fill-hover);
+  color: var(--tds-btn-icon-primary-fill-hover);
+  fill: var(--tds-btn-icon-primary-color-hover);
+  color: var(--tds-btn-icon-primary-color-hover);
+}
+button.primary:focus-visible {
+  background: var(--tds-btn-primary-background-focus);
+  border-color: var(--tds-btn-primary-border-color-focus);
+  color: var(--tds-btn-primary-color-focus);
+  outline-color: var(--tds-btn-primary-outline-color-focus);
+}
+button.primary:focus-visible ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-primary-fill-focus);
+  color: var(--tds-btn-icon-primary-fill-focus);
+  fill: var(--tds-btn-icon-primary-color-focus);
+  color: var(--tds-btn-icon-primary-color-focus);
+}
+button.primary:active, button.primary.active {
+  background: var(--tds-btn-primary-background-active);
+  border-color: var(--tds-btn-primary-border-color-active);
+  color: var(--tds-btn-primary-color-active);
+  outline-color: var(--tds-btn-primary-outline-color-active);
+}
+button.primary:active:not(.disabled) ::slotted([slot=icon]), button.primary.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-primary-fill-active);
+  color: var(--tds-btn-icon-primary-fill-active);
+  fill: var(--tds-btn-icon-primary-color-active);
+  color: var(--tds-btn-icon-primary-color-active);
+}
+button.primary.disabled, button.primary:disabled {
+  background: var(--tds-btn-primary-background-disabled);
+  border-color: var(--tds-btn-primary-border-color-disabled);
+  color: var(--tds-btn-primary-color-disabled);
+  outline-color: var(--tds-btn-primary-outline-color-disabled);
+}
+button.secondary {
+  background: var(--tds-btn-secondary-background);
+  border-color: var(--tds-btn-secondary-border-color);
+  color: var(--tds-btn-secondary-color);
+  outline-color: var(--tds-btn-secondary-outline-color);
+}
+button.secondary.icon {
+  fill: var(--tds-btn-icon-secondary-fill);
+  color: var(--tds-btn-icon-secondary-fill);
+  fill: var(--tds-btn-icon-secondary-color);
+  color: var(--tds-btn-icon-secondary-color);
+}
+button.secondary:hover {
+  background: var(--tds-btn-secondary-background-hover);
+  border-color: var(--tds-btn-secondary-border-color-hover);
+  color: var(--tds-btn-secondary-color-hover);
+  outline-color: var(--tds-btn-secondary-outline-color-hover);
+}
+button.secondary:hover:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-secondary-fill-hover);
+  color: var(--tds-btn-icon-secondary-fill-hover);
+  fill: var(--tds-btn-icon-secondary-color-hover);
+  color: var(--tds-btn-icon-secondary-color-hover);
+}
+button.secondary:focus-visible {
+  background: var(--tds-btn-secondary-background-focus);
+  border-color: var(--tds-btn-secondary-border-color-focus);
+  color: var(--tds-btn-secondary-color-focus);
+  outline-color: var(--tds-btn-secondary-outline-color-focus);
+}
+button.secondary:focus-visible ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-secondary-fill-focus);
+  color: var(--tds-btn-icon-secondary-fill-focus);
+  fill: var(--tds-btn-icon-secondary-color-focus);
+  color: var(--tds-btn-icon-secondary-color-focus);
+}
+button.secondary:active, button.secondary.active {
+  background: var(--tds-btn-secondary-background-active);
+  border-color: var(--tds-btn-secondary-border-color-active);
+  color: var(--tds-btn-secondary-color-active);
+  outline-color: var(--tds-btn-secondary-outline-color-active);
+}
+button.secondary:active:not(.disabled) ::slotted([slot=icon]), button.secondary.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-secondary-fill-active);
+  color: var(--tds-btn-icon-secondary-fill-active);
+  fill: var(--tds-btn-icon-secondary-color-active);
+  color: var(--tds-btn-icon-secondary-color-active);
+}
+button.secondary.disabled, button.secondary:disabled {
+  background: var(--tds-btn-secondary-background-disabled);
+  border-color: var(--tds-btn-secondary-border-color-disabled);
+  color: var(--tds-btn-secondary-color-disabled);
+  outline-color: var(--tds-btn-secondary-outline-color-disabled);
+}
+button.ghost {
+  background: var(--tds-btn-ghost-background);
+  border-color: var(--tds-btn-ghost-border-color);
+  color: var(--tds-btn-ghost-color);
+  outline-color: var(--tds-btn-ghost-outline-color);
+}
+button.ghost.icon {
+  fill: var(--tds-btn-icon-ghost-fill);
+  color: var(--tds-btn-icon-ghost-fill);
+  fill: var(--tds-btn-icon-ghost-color);
+  color: var(--tds-btn-icon-ghost-color);
+}
+button.ghost:hover {
+  background: var(--tds-btn-ghost-background-hover);
+  border-color: var(--tds-btn-ghost-border-color-hover);
+  color: var(--tds-btn-ghost-color-hover);
+  outline-color: var(--tds-btn-ghost-outline-color-hover);
+}
+button.ghost:hover:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-ghost-fill-hover);
+  color: var(--tds-btn-icon-ghost-fill-hover);
+  fill: var(--tds-btn-icon-ghost-color-hover);
+  color: var(--tds-btn-icon-ghost-color-hover);
+}
+button.ghost:focus-visible {
+  background: var(--tds-btn-ghost-background-focus);
+  border-color: var(--tds-btn-ghost-border-color-focus);
+  color: var(--tds-btn-ghost-color-focus);
+  outline-color: var(--tds-btn-ghost-outline-color-focus);
+}
+button.ghost:focus-visible ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-ghost-fill-focus);
+  color: var(--tds-btn-icon-ghost-fill-focus);
+  fill: var(--tds-btn-icon-ghost-color-focus);
+  color: var(--tds-btn-icon-ghost-color-focus);
+}
+button.ghost:active, button.ghost.active {
+  background: var(--tds-btn-ghost-background-active);
+  border-color: var(--tds-btn-ghost-border-color-active);
+  color: var(--tds-btn-ghost-color-active);
+  outline-color: var(--tds-btn-ghost-outline-color-active);
+}
+button.ghost:active:not(.disabled) ::slotted([slot=icon]), button.ghost.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-ghost-fill-active);
+  color: var(--tds-btn-icon-ghost-fill-active);
+  fill: var(--tds-btn-icon-ghost-color-active);
+  color: var(--tds-btn-icon-ghost-color-active);
+}
+button.ghost.disabled, button.ghost:disabled {
+  background: var(--tds-btn-ghost-background-disabled);
+  border-color: var(--tds-btn-ghost-border-color-disabled);
+  color: var(--tds-btn-ghost-color-disabled);
+  outline-color: var(--tds-btn-ghost-outline-color-disabled);
+}
+button.danger {
+  background: var(--tds-btn-danger-background);
+  border-color: var(--tds-btn-danger-border-color);
+  color: var(--tds-btn-danger-color);
+  outline-color: var(--tds-btn-danger-outline-color);
+}
+button.danger.icon {
+  fill: var(--tds-btn-icon-danger-fill);
+  color: var(--tds-btn-icon-danger-fill);
+  fill: var(--tds-btn-icon-danger-color);
+  color: var(--tds-btn-icon-danger-color);
+}
+button.danger:hover {
+  background: var(--tds-btn-danger-background-hover);
+  border-color: var(--tds-btn-danger-border-color-hover);
+  color: var(--tds-btn-danger-color-hover);
+  outline-color: var(--tds-btn-danger-outline-color-hover);
+}
+button.danger:hover:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-danger-fill-hover);
+  color: var(--tds-btn-icon-danger-fill-hover);
+  fill: var(--tds-btn-icon-danger-color-hover);
+  color: var(--tds-btn-icon-danger-color-hover);
+}
+button.danger:focus-visible {
+  background: var(--tds-btn-danger-background-focus);
+  border-color: var(--tds-btn-danger-border-color-focus);
+  color: var(--tds-btn-danger-color-focus);
+  outline-color: var(--tds-btn-danger-outline-color-focus);
+}
+button.danger:focus-visible ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-danger-fill-focus);
+  color: var(--tds-btn-icon-danger-fill-focus);
+  fill: var(--tds-btn-icon-danger-color-focus);
+  color: var(--tds-btn-icon-danger-color-focus);
+}
+button.danger:active, button.danger.active {
+  background: var(--tds-btn-danger-background-active);
+  border-color: var(--tds-btn-danger-border-color-active);
+  color: var(--tds-btn-danger-color-active);
+  outline-color: var(--tds-btn-danger-outline-color-active);
+}
+button.danger:active:not(.disabled) ::slotted([slot=icon]), button.danger.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-danger-fill-active);
+  color: var(--tds-btn-icon-danger-fill-active);
+  fill: var(--tds-btn-icon-danger-color-active);
+  color: var(--tds-btn-icon-danger-color-active);
+}
+button.danger.disabled, button.danger:disabled {
+  background: var(--tds-btn-danger-background-disabled);
+  border-color: var(--tds-btn-danger-border-color-disabled);
+  color: var(--tds-btn-danger-color-disabled);
+  outline-color: var(--tds-btn-danger-outline-color-disabled);
+}
 
 :host(tds-button) {
   display: inline-flex;
   align-items: center;
 }
+:host(tds-button) ::slotted([slot=icon]) {
+  width: var(--tds-spacing-element-20);
+  height: var(--tds-spacing-element-20);
+}
+:host(tds-button) .sm ::slotted([slot=icon]) {
+  width: var(--tds-spacing-element-16);
+  height: var(--tds-spacing-element-16);
+}
 
 :host(.disabled:active) {
   pointer-events: none;