@scania/tegel 0.0.71-beta → 1.0.0

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

@@ -1,248 +1,200 @@
 :root,
-.sdds-mode-light {
-  --sdds-btn-primary-background: var(--sdds-blue-600);
-  --sdds-btn-primary-color: var(--sdds-white);
-  --sdds-btn-primary-border-color: transparent;
-  --sdds-btn-primary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-primary-color-hover: var(--sdds-white);
-  --sdds-btn-primary-border-color-hover: transparent;
-  --sdds-btn-primary-background-active: var(--sdds-blue-700);
-  --sdds-btn-primary-color-active: var(--sdds-white);
-  --sdds-btn-primary-border-color-active: var(--sdds-blue-700);
-  --sdds-btn-primary-background-focus: var(--sdds-blue-400);
-  --sdds-btn-primary-color-focus: var(--sdds-white);
-  --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-50);
-  --sdds-btn-primary-background-disabled-secondary: var(--sdds-white);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
-  --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
-  --sdds-btn-primary-border-color-disabled: transparent;
+.tds-mode-light {
+  --tds-btn-primary-background: var(--tds-blue-600);
+  --tds-btn-primary-color: var(--tds-white);
+  --tds-btn-primary-border-color: transparent;
+  --tds-btn-primary-background-hover: var(--tds-blue-500);
+  --tds-btn-primary-color-hover: var(--tds-white);
+  --tds-btn-primary-border-color-hover: transparent;
+  --tds-btn-primary-background-active: var(--tds-blue-700);
+  --tds-btn-primary-color-active: var(--tds-white);
+  --tds-btn-primary-border-color-active: var(--tds-blue-700);
+  --tds-btn-primary-background-focus: var(--tds-blue-400);
+  --tds-btn-primary-color-focus: var(--tds-white);
+  --tds-btn-primary-border-color-focus: var(--tds-blue-600);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-600);
+  --tds-btn-primary-background-disabled-primary: var(--tds-grey-50);
+  --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-disabled: var(--tds-grey-400);
+  --tds-btn-primary-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-primary-color: var(--sdds-grey-50);
-  --sdds-btn-secondary-background: transparent;
-  --sdds-btn-secondary-color: var(--sdds-black);
-  --sdds-btn-secondary-border-color: rgb(0 0 0 / 48%);
-  --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-color-hover: var(--sdds-white);
-  --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-background-active: transparent;
-  --sdds-btn-secondary-color-active: var(--sdds-black);
-  --sdds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
-  --sdds-btn-secondary-background-focus: transparent;
-  --sdds-btn-secondary-color-focus: var(--sdds-black);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
-  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-background-disabled: transparent;
-  --sdds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
-  --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
+  --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: rgb(0 0 0 / 48%);
+  --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-blue-500);
+  --tds-btn-secondary-background-active: transparent;
+  --tds-btn-secondary-color-active: var(--tds-black);
+  --tds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
+  --tds-btn-secondary-background-focus: transparent;
+  --tds-btn-secondary-color-focus: var(--tds-black);
+  --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-background-disabled: transparent;
+  --tds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
+  --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-black);
+  --tds-btn-icon-secondary-fill-active: var(--tds-black);
   /* ICON */
-  --sdds-btn-icon-secondary-fill: var(--sdds-black);
-  --sdds-btn-icon-secondary-color: var(--sdds-black);
+  --tds-btn-icon-secondary-fill: var(--tds-black);
+  --tds-btn-icon-secondary-color: var(--tds-black);
   /* ICON HOVER */
-  --sdds-btn-icon-secondary-fill-hover: var(--sdds-grey-50);
-  --sdds-btn-icon-secondary-color-hover: var(--sdds-grey-50);
-  --sdds-btn-ghost-background: transparent;
-  --sdds-btn-ghost-color: var(--sdds-black);
-  --sdds-btn-ghost-border-color: transparent;
-  --sdds-btn-ghost-background-hover: transparent;
-  --sdds-btn-ghost-color-hover: var(--sdds-black);
-  --sdds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
-  --sdds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
-  --sdds-btn-ghost-background-active: transparent;
-  --sdds-btn-ghost-color-active: var(--sdds-black);
-  --sdds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
-  --sdds-btn-ghost-background-focus: transparent;
-  --sdds-btn-ghost-color-focus: var(--sdds-black);
-  --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-background-disabled: transparent;
-  --sdds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-ghost-border-color-disabled: transparent;
+  --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-fill-active: var(--tds-black);
+  --tds-btn-icon-secondary-color-active: var(--tds-black);
+  --tds-btn-ghost-background: transparent;
+  --tds-btn-ghost-color: var(--tds-black);
+  --tds-btn-ghost-border-color: transparent;
+  --tds-btn-ghost-background-hover: transparent;
+  --tds-btn-ghost-color-hover: var(--tds-black);
+  --tds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
+  --tds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
+  --tds-btn-ghost-background-active: transparent;
+  --tds-btn-ghost-color-active: var(--tds-black);
+  --tds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
+  --tds-btn-ghost-background-focus: transparent;
+  --tds-btn-ghost-color-focus: var(--tds-black);
+  --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-background-disabled: transparent;
+  --tds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
+  --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-ghost-fill: var(--sdds-black);
-  --sdds-btn-icon-ghost-color: var(--sdds-black);
-  --sdds-btn-danger-background: var(--sdds-negative);
-  --sdds-btn-danger-color: var(--sdds-white);
-  --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-600);
-  --sdds-btn-danger-color-hover: var(--sdds-white);
-  --sdds-btn-danger-border-color-hover: transparent;
-  --sdds-btn-danger-background-active: var(--sdds-red-700);
-  --sdds-btn-danger-color-active: var(--sdds-white);
-  --sdds-btn-danger-border-color-active: var(--sdds-red-700);
-  --sdds-btn-danger-background-focus: var(--sdds-red-400);
-  --sdds-btn-danger-color-focus: var(--sdds-white);
-  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
-  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-50);
-  --sdds-btn-danger-background-disabled-secondary: var(--sdds-white);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
-  --sdds-btn-danger-border-color-disabled: transparent;
+  --tds-btn-icon-ghost-fill: var(--tds-black);
+  --tds-btn-icon-ghost-color: var(--tds-black);
+  --tds-btn-danger-background: var(--tds-negative);
+  --tds-btn-danger-color: var(--tds-white);
+  --tds-btn-danger-border-color: transparent;
+  --tds-btn-danger-background-hover: var(--tds-red-600);
+  --tds-btn-danger-color-hover: var(--tds-white);
+  --tds-btn-danger-border-color-hover: transparent;
+  --tds-btn-danger-background-active: var(--tds-red-700);
+  --tds-btn-danger-color-active: var(--tds-white);
+  --tds-btn-danger-border-color-active: var(--tds-red-700);
+  --tds-btn-danger-background-focus: var(--tds-red-400);
+  --tds-btn-danger-color-focus: var(--tds-white);
+  --tds-btn-danger-border-color-focus: var(--tds-red-400);
+  --tds-btn-danger-outline-color-focus: var(--tds-red-700);
+  --tds-btn-danger-background-disabled-primary: var(--tds-grey-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: rgb(0 0 0 / 38%);
+  --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-danger-fill: var(--sdds-white);
-  --sdds-btn-icon-danger-color: var(--sdds-white);
+  --tds-btn-icon-danger-fill: var(--tds-white);
+  --tds-btn-icon-danger-color: var(--tds-white);
 }
-:root .sdds-mode-variant-primary,
-.sdds-mode-light .sdds-mode-variant-primary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+: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 .sdds-mode-variant-secondary,
-.sdds-mode-light .sdds-mode-variant-secondary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
+: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);
 }
 
-.sdds-mode-dark {
-  --sdds-btn-primary-background: var(--sdds-blue-400);
-  --sdds-btn-primary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-primary-background-active: var(--sdds-blue-300);
-  --sdds-btn-primary-background-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-border-color-focus: var(--sdds-blue-400);
-  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-400);
-  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-900);
-  --sdds-btn-primary-background-disabled-secondary: var(--sdds-grey-868);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
-  --sdds-btn-primary-color-disabled: var(--sdds-grey-600);
+.tds-mode-dark {
+  --tds-btn-primary-background: var(--tds-blue-400);
+  --tds-btn-primary-background-hover: var(--tds-blue-500);
+  --tds-btn-primary-background-active: var(--tds-blue-300);
+  --tds-btn-primary-background-focus: var(--tds-blue-600);
+  --tds-btn-primary-border-color-focus: var(--tds-blue-400);
+  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
+  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-868);
+  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
+  --tds-btn-primary-color-disabled: var(--tds-grey-600);
   /* ICON */
-  --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-primary-color: var(--sdds-grey-50);
-  --sdds-btn-secondary-background: transparent;
-  --sdds-btn-secondary-color: var(--sdds-white);
-  --sdds-btn-secondary-border-color: var(--sdds-white);
-  --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-color-hover: var(--sdds-white);
-  --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
-  --sdds-btn-secondary-background-active: transparent;
-  --sdds-btn-secondary-color-active: var(--sdds-white);
-  --sdds-btn-secondary-border-color-active: var(--sdds-white);
-  --sdds-btn-secondary-background-focus: transparent;
-  --sdds-btn-secondary-color-focus: var(--sdds-white);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
-  --sdds-btn-secondary-outline-color: var(--sdds-white);
-  --sdds-btn-secondary-background-disabled: transparent;
-  --sdds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
-  --sdds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
-  --sdds-btn-icon-secondary-color-focus: var(--sdds-white);
-  --sdds-btn-icon-secondary-fill-focus: var(--sdds-white);
+  --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(--tds-white);
+  --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-blue-500);
+  --tds-btn-secondary-background-active: transparent;
+  --tds-btn-secondary-color-active: var(--tds-white);
+  --tds-btn-secondary-border-color-active: var(--tds-white);
+  --tds-btn-secondary-background-focus: transparent;
+  --tds-btn-secondary-color-focus: var(--tds-white);
+  --tds-btn-secondary-border-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
+  --tds-btn-secondary-outline-color: var(--tds-white);
+  --tds-btn-secondary-background-disabled: transparent;
+  --tds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-icon-secondary-color-focus: var(--tds-white);
+  --tds-btn-icon-secondary-fill-focus: var(--tds-white);
   /* ICON */
-  --sdds-btn-icon-secondary-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-secondary-color: var(--sdds-grey-50);
-  --sdds-btn-ghost-background: transparent;
-  --sdds-btn-ghost-color: var(--sdds-white);
-  --sdds-btn-ghost-border-color: transparent;
-  --sdds-btn-ghost-background-hover: transparent;
-  --sdds-btn-ghost-color-hover: var(--sdds-white);
-  --sdds-btn-ghost-border-color-hover: rgb(255 255 255 / 41%);
-  --sdds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
-  --sdds-btn-ghost-background-active: transparent;
-  --sdds-btn-ghost-color-active: var(--sdds-white);
-  --sdds-btn-ghost-border-color-active: rgb(255 255 255 / 87%);
-  --sdds-btn-ghost-background-focus: transparent;
-  --sdds-btn-ghost-color-focus: var(--sdds-white);
-  --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
-  --sdds-btn-ghost-background-disabled: transparent;
-  --sdds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
-  --sdds-btn-ghost-border-color-disabled: transparent;
+  --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: rgb(255 255 255 / 41%);
+  --tds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
+  --tds-btn-ghost-background-active: transparent;
+  --tds-btn-ghost-color-active: var(--tds-white);
+  --tds-btn-ghost-border-color-active: rgb(255 255 255 / 87%);
+  --tds-btn-ghost-background-focus: transparent;
+  --tds-btn-ghost-color-focus: var(--tds-white);
+  --tds-btn-ghost-border-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
+  --tds-btn-ghost-background-disabled: transparent;
+  --tds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
+  --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-ghost-fill: var(--sdds-grey-50);
-  --sdds-btn-icon-ghost-color: var(--sdds-grey-50);
-  --sdds-btn-danger-background: var(--sdds-negative);
-  --sdds-btn-danger-color: var(--sdds-white);
-  --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-600);
-  --sdds-btn-danger-color-hover: var(--sdds-white);
-  --sdds-btn-danger-border-color-hover: transparent;
-  --sdds-btn-danger-background-active: var(--sdds-red-700);
-  --sdds-btn-danger-color-active: var(--sdds-white);
-  --sdds-btn-danger-border-color-active: transparent;
-  --sdds-btn-danger-background-focus: var(--sdds-red-400);
-  --sdds-btn-danger-color-focus: var(--sdds-white);
-  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
-  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-900);
-  --sdds-btn-danger-background-disabled-secondary: var(--sdds-grey-868);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
-  --sdds-btn-danger-border-color-disabled: transparent;
+  --tds-btn-icon-ghost-fill: var(--tds-grey-50);
+  --tds-btn-icon-ghost-color: var(--tds-grey-50);
+  --tds-btn-danger-background: var(--tds-negative);
+  --tds-btn-danger-color: var(--tds-white);
+  --tds-btn-danger-border-color: transparent;
+  --tds-btn-danger-background-hover: var(--tds-red-600);
+  --tds-btn-danger-color-hover: var(--tds-white);
+  --tds-btn-danger-border-color-hover: transparent;
+  --tds-btn-danger-background-active: var(--tds-red-700);
+  --tds-btn-danger-color-active: var(--tds-white);
+  --tds-btn-danger-border-color-active: transparent;
+  --tds-btn-danger-background-focus: var(--tds-red-400);
+  --tds-btn-danger-color-focus: var(--tds-white);
+  --tds-btn-danger-border-color-focus: var(--tds-red-400);
+  --tds-btn-danger-outline-color-focus: var(--tds-red-700);
+  --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
+  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-868);
+  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
+  --tds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
+  --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-danger-fill: var(--sdds-white);
-  --sdds-btn-icon-danger-color: var(--sdds-white);
-}
-.sdds-mode-dark .sdds-mode-variant-primary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
-}
-.sdds-mode-dark .sdds-mode-variant-secondary {
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
-}
-
-.sdds-on-white-bg {
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);
-}
-
-.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon {
-  position: relative;
-}
-.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1;
-  position: absolute;
-  right: 0;
-}
-.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1.25;
-}
-
-.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon {
-  position: relative;
+  --tds-btn-icon-danger-fill: var(--tds-white);
+  --tds-btn-icon-danger-color: var(--tds-white);
 }
-.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1;
-  position: absolute;
-  right: 0;
+.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);
 }
-.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1.25;
+.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);
 }
 
-.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon {
-  position: relative;
-}
-.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
-  font-size: 16px;
-  line-height: 1;
-  position: absolute;
-  right: 0;
-}
-.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before {
-  font-size: 16px;
-  line-height: 1.25;
-}
-
-.sdds-btn.sdds-btn-primary .sdds-btn-icon {
-  fill: var(--sdds-btn-primary-icon-fill);
-  color: var(--sdds-btn-primary-icon-color);
-  font-size: 16px;
-}
-
-.sdds-btn {
+button {
   box-sizing: border-box;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   display: inline-flex;
   align-items: center;
   border-radius: 4px;
@@ -252,388 +204,357 @@
   text-decoration: none;
   cursor: pointer;
   height: 56px;
-  padding: var(--sdds-spacing-element-20);
+  padding: var(--tds-spacing-element-20);
   border: 1px solid;
 }
-.sdds-btn * {
+button * {
   box-sizing: border-box;
 }
-.sdds-btn:disabled, .sdds-btn.disabled {
+button:disabled, button.disabled {
   cursor: unset;
 }
-.sdds-btn:focus {
+button:focus {
   outline: none;
 }
-.sdds-btn:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+button:focus-visible {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn span.sdds-btn-text + .sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-16);
-  width: 20px;
-  height: 20px;
-  line-height: 0;
-}
-.sdds-btn.sdds-btn-xs {
-  padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);
+button.xs {
+  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
   height: 24px;
   font-size: 12px;
   border-radius: 2px;
 }
-.sdds-btn.sdds-btn-xs:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+button.xs:focus-visible {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-sm {
-  padding: var(--sdds-spacing-element-12);
+button.sm {
+  padding: var(--tds-spacing-element-12);
   height: 40px;
 }
-.sdds-btn.sdds-btn-sm.sdds-btn-only-icon {
+button.sm.icon {
+  padding: 10px var(--tds-spacing-element-12);
+}
+button.sm.only-icon {
   padding: 11px;
 }
-.sdds-btn.sdds-btn-sm:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+button.sm:focus-visible {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-sm span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: var(--sdds-spacing-element-24);
-  width: 16px;
-  height: 16px;
-}
-.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: var(--sdds-spacing-element-12);
-}
-.sdds-btn.sdds-btn-md {
-  padding: var(--sdds-spacing-element-16);
+button.md {
+  padding: var(--tds-spacing-element-16);
   height: 48px;
 }
-.sdds-btn.sdds-btn-md.sdds-btn-only-icon {
+button.md.icon {
+  padding: 14px var(--tds-spacing-element-16);
+}
+button.md.only-icon {
   padding: 13px;
 }
-.sdds-btn.sdds-btn-md:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+button.md:focus-visible {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-md span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: var(--sdds-spacing-element-20);
-}
-.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-16);
-}
-.sdds-btn.sdds-btn-lg {
-  padding: var(--sdds-spacing-element-20);
+button.lg {
+  padding: var(--tds-spacing-element-20);
   height: 56px;
 }
-.sdds-btn.sdds-btn-lg.sdds-btn-only-icon {
+button.lg.icon {
+  padding: 18px var(--tds-spacing-element-20);
+}
+button.lg.only-icon {
   padding: 17px;
 }
-.sdds-btn.sdds-btn-lg:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
+button.lg:focus-visible {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-lg span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: 28px;
-}
-.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-16);
-}
-.sdds-btn.sdds-btn-fullbleed {
+button.fullbleed {
   width: inherit;
   display: flex;
   justify-content: center;
 }
-.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon, .sdds-btn.sdds-btn-fullbleed.sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-8);
-}
-.sdds-btn span.sdds-btn-text {
-  align-self: baseline;
-}
-.sdds-btn.sdds-btn-primary {
-  background: var(--sdds-btn-primary-background);
-  border-color: var(--sdds-btn-primary-border-color);
-  color: var(--sdds-btn-primary-color);
-  outline-color: var(--sdds-btn-primary-outline-color);
-}
-.sdds-btn.sdds-btn-primary .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-primary-fill);
-  color: var(--sdds-btn-icon-primary-fill);
-  fill: var(--sdds-btn-icon-primary-color);
-  color: var(--sdds-btn-icon-primary-color);
+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);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-primary:hover {
-  background: var(--sdds-btn-primary-background-hover);
-  border-color: var(--sdds-btn-primary-border-color-hover);
-  color: var(--sdds-btn-primary-color-hover);
-  outline-color: var(--sdds-btn-primary-outline-color-hover);
-}
-.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-primary-fill-hover);
-  color: var(--sdds-btn-icon-primary-fill-hover);
-  fill: var(--sdds-btn-icon-primary-color-hover);
-  color: var(--sdds-btn-icon-primary-color-hover);
-}
-.sdds-btn.sdds-btn-primary:focus-visible {
-  background: var(--sdds-btn-primary-background-focus);
-  border-color: var(--sdds-btn-primary-border-color-focus);
-  color: var(--sdds-btn-primary-color-focus);
-  outline-color: var(--sdds-btn-primary-outline-color-focus);
-}
-.sdds-btn.sdds-btn-primary:focus-visible .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-primary-fill-focus);
-  color: var(--sdds-btn-icon-primary-fill-focus);
-  fill: var(--sdds-btn-icon-primary-color-focus);
-  color: var(--sdds-btn-icon-primary-color-focus);
-}
-.sdds-btn.sdds-btn-primary:active, .sdds-btn.sdds-btn-primary.active {
-  background: var(--sdds-btn-primary-background-active);
-  border-color: var(--sdds-btn-primary-border-color-active);
-  color: var(--sdds-btn-primary-color-active);
-  outline-color: var(--sdds-btn-primary-outline-color-active);
-}
-.sdds-btn.sdds-btn-primary.disabled, .sdds-btn.sdds-btn-primary:disabled {
+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 {
   cursor: not-allowed;
-  background: var(--sdds-btn-primary-background-disabled);
+  background: var(--tds-btn-primary-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-primary-border-color-disabled);
+  border-color: var(--tds-btn-primary-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-primary-color-disabled);
+  color: var(--tds-btn-primary-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-primary-outline-color-disabled);
-}
-.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-secondary {
-  background: var(--sdds-btn-secondary-background);
-  border-color: var(--sdds-btn-secondary-border-color);
-  color: var(--sdds-btn-secondary-color);
-  outline-color: var(--sdds-btn-secondary-outline-color);
-}
-.sdds-btn.sdds-btn-secondary .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-secondary-fill);
-  color: var(--sdds-btn-icon-secondary-fill);
-  fill: var(--sdds-btn-icon-secondary-color);
-  color: var(--sdds-btn-icon-secondary-color);
+  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);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-secondary:hover {
-  background: var(--sdds-btn-secondary-background-hover);
-  border-color: var(--sdds-btn-secondary-border-color-hover);
-  color: var(--sdds-btn-secondary-color-hover);
-  outline-color: var(--sdds-btn-secondary-outline-color-hover);
-}
-.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-secondary-fill-hover);
-  color: var(--sdds-btn-icon-secondary-fill-hover);
-  fill: var(--sdds-btn-icon-secondary-color-hover);
-  color: var(--sdds-btn-icon-secondary-color-hover);
-}
-.sdds-btn.sdds-btn-secondary:focus-visible {
-  background: var(--sdds-btn-secondary-background-focus);
-  border-color: var(--sdds-btn-secondary-border-color-focus);
-  color: var(--sdds-btn-secondary-color-focus);
-  outline-color: var(--sdds-btn-secondary-outline-color-focus);
-}
-.sdds-btn.sdds-btn-secondary:focus-visible .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-secondary-fill-focus);
-  color: var(--sdds-btn-icon-secondary-fill-focus);
-  fill: var(--sdds-btn-icon-secondary-color-focus);
-  color: var(--sdds-btn-icon-secondary-color-focus);
-}
-.sdds-btn.sdds-btn-secondary:active, .sdds-btn.sdds-btn-secondary.active {
-  background: var(--sdds-btn-secondary-background-active);
-  border-color: var(--sdds-btn-secondary-border-color-active);
-  color: var(--sdds-btn-secondary-color-active);
-  outline-color: var(--sdds-btn-secondary-outline-color-active);
-}
-.sdds-btn.sdds-btn-secondary.disabled, .sdds-btn.sdds-btn-secondary:disabled {
+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 {
   cursor: not-allowed;
-  background: var(--sdds-btn-secondary-background-disabled);
+  background: var(--tds-btn-secondary-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-secondary-border-color-disabled);
+  border-color: var(--tds-btn-secondary-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-secondary-color-disabled);
+  color: var(--tds-btn-secondary-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-secondary-outline-color-disabled);
-}
-.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: rgba(0, 0, 0, 0.38);
-}
-.sdds-btn.sdds-btn-ghost {
-  background: var(--sdds-btn-ghost-background);
-  border-color: var(--sdds-btn-ghost-border-color);
-  color: var(--sdds-btn-ghost-color);
-  outline-color: var(--sdds-btn-ghost-outline-color);
-}
-.sdds-btn.sdds-btn-ghost .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-ghost-fill);
-  color: var(--sdds-btn-icon-ghost-fill);
-  fill: var(--sdds-btn-icon-ghost-color);
-  color: var(--sdds-btn-icon-ghost-color);
+  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);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-ghost:hover {
-  background: var(--sdds-btn-ghost-background-hover);
-  border-color: var(--sdds-btn-ghost-border-color-hover);
-  color: var(--sdds-btn-ghost-color-hover);
-  outline-color: var(--sdds-btn-ghost-outline-color-hover);
-}
-.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-ghost-fill-hover);
-  color: var(--sdds-btn-icon-ghost-fill-hover);
-  fill: var(--sdds-btn-icon-ghost-color-hover);
-  color: var(--sdds-btn-icon-ghost-color-hover);
-}
-.sdds-btn.sdds-btn-ghost:focus-visible {
-  background: var(--sdds-btn-ghost-background-focus);
-  border-color: var(--sdds-btn-ghost-border-color-focus);
-  color: var(--sdds-btn-ghost-color-focus);
-  outline-color: var(--sdds-btn-ghost-outline-color-focus);
-}
-.sdds-btn.sdds-btn-ghost:focus-visible .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-ghost-fill-focus);
-  color: var(--sdds-btn-icon-ghost-fill-focus);
-  fill: var(--sdds-btn-icon-ghost-color-focus);
-  color: var(--sdds-btn-icon-ghost-color-focus);
-}
-.sdds-btn.sdds-btn-ghost:active, .sdds-btn.sdds-btn-ghost.active {
-  background: var(--sdds-btn-ghost-background-active);
-  border-color: var(--sdds-btn-ghost-border-color-active);
-  color: var(--sdds-btn-ghost-color-active);
-  outline-color: var(--sdds-btn-ghost-outline-color-active);
-}
-.sdds-btn.sdds-btn-ghost.disabled, .sdds-btn.sdds-btn-ghost:disabled {
+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 {
   cursor: not-allowed;
-  background: var(--sdds-btn-ghost-background-disabled);
+  background: var(--tds-btn-ghost-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-ghost-border-color-disabled);
+  border-color: var(--tds-btn-ghost-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-ghost-color-disabled);
+  color: var(--tds-btn-ghost-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-ghost-outline-color-disabled);
-}
-.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: rgba(0, 0, 0, 0.38);
-}
-.sdds-btn.sdds-btn-danger {
-  background: var(--sdds-btn-danger-background);
-  border-color: var(--sdds-btn-danger-border-color);
-  color: var(--sdds-btn-danger-color);
-  outline-color: var(--sdds-btn-danger-outline-color);
-}
-.sdds-btn.sdds-btn-danger .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-danger-fill);
-  color: var(--sdds-btn-icon-danger-fill);
-  fill: var(--sdds-btn-icon-danger-color);
-  color: var(--sdds-btn-icon-danger-color);
+  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);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-danger:hover {
-  background: var(--sdds-btn-danger-background-hover);
-  border-color: var(--sdds-btn-danger-border-color-hover);
-  color: var(--sdds-btn-danger-color-hover);
-  outline-color: var(--sdds-btn-danger-outline-color-hover);
-}
-.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-danger-fill-hover);
-  color: var(--sdds-btn-icon-danger-fill-hover);
-  fill: var(--sdds-btn-icon-danger-color-hover);
-  color: var(--sdds-btn-icon-danger-color-hover);
-}
-.sdds-btn.sdds-btn-danger:focus-visible {
-  background: var(--sdds-btn-danger-background-focus);
-  border-color: var(--sdds-btn-danger-border-color-focus);
-  color: var(--sdds-btn-danger-color-focus);
-  outline-color: var(--sdds-btn-danger-outline-color-focus);
-}
-.sdds-btn.sdds-btn-danger:focus-visible .sdds-btn-icon {
-  fill: var(--sdds-btn-icon-danger-fill-focus);
-  color: var(--sdds-btn-icon-danger-fill-focus);
-  fill: var(--sdds-btn-icon-danger-color-focus);
-  color: var(--sdds-btn-icon-danger-color-focus);
-}
-.sdds-btn.sdds-btn-danger:active, .sdds-btn.sdds-btn-danger.active {
-  background: var(--sdds-btn-danger-background-active);
-  border-color: var(--sdds-btn-danger-border-color-active);
-  color: var(--sdds-btn-danger-color-active);
-  outline-color: var(--sdds-btn-danger-outline-color-active);
-}
-.sdds-btn.sdds-btn-danger.disabled, .sdds-btn.sdds-btn-danger:disabled {
+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 {
   cursor: not-allowed;
-  background: var(--sdds-btn-danger-background-disabled);
+  background: var(--tds-btn-danger-background-disabled);
   cursor: not-allowed;
-  border-color: var(--sdds-btn-danger-border-color-disabled);
+  border-color: var(--tds-btn-danger-border-color-disabled);
   cursor: not-allowed;
-  color: var(--sdds-btn-danger-color-disabled);
+  color: var(--tds-btn-danger-color-disabled);
   cursor: not-allowed;
-  outline-color: var(--sdds-btn-danger-outline-color-disabled);
-}
-.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-
-i.sdds-btn-icon[slot=icon] {
-  line-height: 1;
+  outline-color: var(--tds-btn-danger-outline-color-disabled);
 }
 
-:host(sdds-button) {
+:host(tds-button) {
   display: inline-flex;
   align-items: center;
 }
-:host(sdds-button) ::slotted([slot=icon]) {
-  width: var(--sdds-spacing-element-20);
-  height: var(--sdds-spacing-element-20);
+:host(tds-button) ::slotted([slot=icon]) {
+  width: var(--tds-spacing-element-20);
+  height: var(--tds-spacing-element-20);
 }
-:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]) {
-  width: var(--sdds-spacing-element-16);
-  height: var(--sdds-spacing-element-16);
+:host(tds-button) .sm ::slotted([slot=icon]) {
+  width: var(--tds-spacing-element-16);
+  height: var(--tds-spacing-element-16);
 }
 
-:host(sdds-button[fullbleed]) {
-  width: 100%;
-  justify-content: center;
+:host(tds-button[disabled=true]) {
+  pointer-events: none;
 }
-
-:host(sdds-button[only-icon]) .sdds-btn-sm {
-  padding: 11px;
+:host(tds-button[disabled=true]) ::slotted([slot=icon]) {
+  pointer-events: none;
 }
-:host(sdds-button[only-icon]) .sdds-btn-md {
-  padding: 13px;
-}
-:host(sdds-button[only-icon]) .sdds-btn-lg {
-  padding: 17px;
+
+:host(tds-button[fullbleed]) {
+  width: 100%;
+  justify-content: center;
 }
 
-:host(sdds-button:not([only-icon])) {
+tds-button :not(.only-icon) {
   display: inline-flex;
   align-items: center;
 }
-:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-24);
-  width: var(--sdds-spacing-element-16);
-  height: var(--sdds-spacing-element-16);
-}
-:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-12);
-}
-:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-20);
-  width: var(--sdds-spacing-element-20);
-  height: var(--sdds-spacing-element-20);
-}
-:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-16);
+tds-button :not(.only-icon).sm ::slotted([slot=icon]) {
+  margin-left: var(--tds-spacing-element-12);
+  width: var(--tds-spacing-element-16);
+  height: var(--tds-spacing-element-16);
 }
-:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]) {
-  margin-left: 28px;
-  width: var(--sdds-spacing-element-20);
-  height: var(--sdds-spacing-element-20);
+tds-button :not(.only-icon).md ::slotted([slot=icon]) {
+  margin-left: var(--tds-spacing-element-16);
+  width: var(--tds-spacing-element-20);
+  height: var(--tds-spacing-element-20);
 }
-:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-16);
+tds-button :not(.only-icon).lg ::slotted([slot=icon]) {
+  margin-left: var(--tds-spacing-element-20);
+  width: var(--tds-spacing-element-20);
+  height: var(--tds-spacing-element-20);
 }