@tet/tet-components 1.4.22-testing → 1.4.23-production

package/dist/collection/components/basic/buttons/tet-button/tet-button.css

@@ -350,16 +350,12 @@
 
 :host {
   /**
-  * @prop --button-text-decoration: The text decoration of the button.
-  * @prop --button-background: The background color of the button.
-  * @prop --button-text-color: The text color of the button.
-  * @prop --button-border-color: The border color of the button.
   * @prop --button-border: The border of the button.
   * @prop --button-width: The width of the button.
-  * @prop --button-box-shadow: The box shadow of the button.
   * @prop --button-font-size: The font size of the button.
   * @prop --button-font-weight: The font weight of the button.
   * @prop --button-padding: The padding of the button.
+  * @prop --button-icon-mode-padding: The padding of the button when in icon mode.
   * @prop --button-icon-size: Specifies the size of the button icon when the icon is set using the iconName prop.
   * @prop --button-content-gap: The gap between the icon and the button text.
   */
@@ -375,11 +371,11 @@
   --button-icon-size: 1.25rem;
   --button-content-gap: 0.5rem;
   --button-font-size-small: 0.875rem;
-  --button-padding-small: 0.5rem 1.125rem;
+  --button-padding-small: 0.375rem 0.875rem;
   --button-font-size-medium: 1rem;
-  --button-padding-medium: 0.625rem 1.25rem;
+  --button-padding-medium: 0.5rem 1rem;
   --button-font-size-large: 1rem;
-  --button-padding-large: 0.75rem 1.5rem;
+  --button-padding-large: 0.625rem 1.25rem;
   --button-font-size: var(--button-font-size-large);
   --button-padding: var(--button-padding-large);
   display: inline-block;
@@ -387,6 +383,34 @@
 }
 
 .button {
+  --button-icon-mode-padding-internal: 0.75rem;
+  --button-text-color-current: var(--button-text-color);
+  --button-border-color-current: var(--button-border-color);
+  --button-background-current: var(--button-background);
+  --button-box-shadow-current: var(--button-box-shadow);
+  --button-text-decoration-current: var(--button-text-decoration);
+  --button-icon-color-current: var(--button-icon-color, var(--button-text-color-current));
+  --button-text-color-hover: var(--button-text-color);
+  --button-border-color-hover: var(--button-border-color);
+  --button-background-hover: var(--button-background);
+  --button-box-shadow-hover: var(--button-box-shadow);
+  --button-text-decoration-hover: var(--button-text-decoration);
+  --button-text-color-focus: var(--button-text-color);
+  --button-border-color-focus: var(--button-border-color);
+  --button-background-focus: var(--button-background);
+  --button-box-shadow-focus: var(--button-box-shadow);
+  --button-text-decoration-focus: var(--button-text-decoration);
+  --button-text-color-active: var(--button-text-color-hover);
+  --button-border-color-active: var(--button-border-color-hover);
+  --button-background-active: var(--button-background-hover);
+  --button-box-shadow-active: var(--button-box-shadow-hover);
+  --button-text-decoration-active: var(--button-text-decoration-hover);
+  --button-text-color-disabled: var(--button-text-color);
+  --button-border-color-disabled: var(--button-border-color);
+  --button-background-disabled: var(--button-background);
+  --button-box-shadow-disabled: var(--button-box-shadow);
+  --button-text-decoration-disabled: var(--button-text-decoration);
+  --button-icon-color-disabled: var(--button-icon-color, var(--button-text-color-disabled));
   display: flex;
   justify-content: center;
   flex-direction: row;
@@ -398,580 +422,379 @@
   transition: all 0.2s ease-in-out;
   font-family: var(--font-family-content);
   font-weight: var(--button-font-weight);
-  color: var(--button-text-color);
+  color: var(--button-text-color-current);
   border: var(--button-border);
-  background-color: var(--button-background);
-  border-color: var(--button-border-color);
-  box-shadow: var(--button-box-shadow);
-  text-decoration: var(--button-text-decoration);
+  background-color: var(--button-background-current);
+  border-color: var(--button-border-color-current);
+  box-shadow: var(--button-box-shadow-current);
+  text-decoration: var(--button-text-decoration-current);
   font-size: var(--button-font-size);
   padding: var(--button-padding);
 }
-.button-small {
+.button--small {
   --button-font-size: var(--button-font-size-small);
   --button-padding: var(--button-padding-small);
+  --button-icon-mode-padding-internal: 0.375rem;
 }
-.button-medium {
+.button--medium {
   --button-font-size: var(--button-font-size-medium);
   --button-padding: var(--button-padding-medium);
+  --button-icon-mode-padding-internal: 0.625rem;
 }
 .button__content {
   display: flex;
   align-items: center;
   gap: var(--button-content-gap);
 }
-.button:disabled {
-  cursor: not-allowed;
-  backdrop-filter: blur(5px);
+.button:hover:not(:disabled) {
+  backdrop-filter: blur(7.5px);
+  --button-text-color-current: var(--button-text-color-hover);
+  --button-border-color-current: var(--button-border-color-hover);
+  --button-background-current: var(--button-background-hover);
+  --button-box-shadow-current: var(--button-box-shadow-hover);
+  --button-text-decoration-current: var(--button-text-decoration-hover);
+}
+.button:where(.button--type-ghost, .button--type-link, .button--classic-theme, .button--mint-theme):focus:not(:disabled) {
+  --button-text-color-current: var(--button-text-color-focus);
+  --button-border-color-current: var(--button-border-color-focus);
+  --button-background-current: var(--button-background-focus);
+  --button-box-shadow-current: var(--button-box-shadow-focus);
+  --button-text-decoration-current: var(--button-text-decoration-focus);
+}
+.button:focus-visible:not(:disabled) {
+  --button-box-shadow-current: none;
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
 }
-.button:not(:disabled) {
+.button:is(.button--dark-theme, .button--dark-inverse-theme):focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
+.button:active:not(:disabled) {
   backdrop-filter: blur(7.5px);
+  --button-text-color-current: var(--button-text-color-active);
+  --button-border-color-current: var(--button-border-color-active);
+  --button-background-current: var(--button-background-active);
+  --button-box-shadow-current: var(--button-box-shadow-active);
+  --button-text-decoration-current: var(--button-text-decoration-active);
 }
-.button.with-icon tet-icon {
-  --icon-color: var(--button-icon-color);
+.button:disabled {
+  cursor: not-allowed;
+  backdrop-filter: blur(5px);
+  --button-text-color-current: var(--button-text-color-disabled);
+  --button-border-color-current: var(--button-border-color-disabled);
+  --button-background-current: var(--button-background-disabled);
+  --button-box-shadow-current: var(--button-box-shadow-disabled);
+  --button-text-decoration-current: var(--button-text-decoration-disabled);
+  --button-icon-color-current: var(--button-icon-color-disabled);
+}
+.button--with-icon tet-icon {
+  pointer-events: none;
+  --icon-color: var(--button-icon-color-current);
   --icon-size: var(--button-icon-size);
   --icon-container-display: flex;
 }
 .button--type-primary {
   --button-background: initial;
+  --button-border-color: transparent;
+  --button-icon-color-disabled: var(--button-text-color-disabled);
 }
-.button--type-primary.button-dark-theme {
+.button--type-primary.button--dark-theme {
   --button-text-color: var(--tc-button-text-primary-dark);
-  --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-default-dark);
   --button-icon-color: var(--tc-button-icon-primary-dark);
-}
-.button--type-primary.button-dark-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-hover-dark);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre-dark), var(--tc-button-hover-shadow-raised-dark);
-}
-.button--type-primary.button-dark-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-primary.button-dark-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-pressed-dark);
-}
-.button--type-primary.button-dark-theme:disabled {
-  --button-text-color: var(--tc-button-text-disabled-dark);
-  --button-background: var(--tc-button-primary-background-disabled-dark);
-  --button-icon-color: var(--tc-button-icon-disabled-dark);
-}
-.button--type-primary.button-dark-inverse-theme {
+  --button-background-hover: var(--tc-button-primary-background-hover-dark);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised-dark), var(--tc-button-hover-shadow-centre-dark);
+  --button-background-active: var(--tc-button-primary-background-pressed-dark);
+  --button-text-color-disabled: var(--tc-button-text-disabled-dark);
+  --button-background-disabled: var(--tc-button-primary-background-disabled-dark);
+  --button-icon-color-disabled: var(--tc-button-icon-disabled-dark);
+}
+.button--type-primary.button--dark-theme.button--color-theme-yellow, .button--type-primary.button--dark-theme.button--color-theme-adaptive-yellow {
+  --button-text-color: var(--tc-button-text-black-permanent-dark);
+  --button-background: var(--tc-button-primary-yellow-background-default-dark);
+  --button-icon-color: var(--tc-button-icon-black-permanent-dark);
+  --button-background-hover: var(--tc-button-primary-yellow-background-hover-dark);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised-dark), var(--tc-button-hover-shadow-centre-dark);
+  --button-background-active: var(--tc-button-primary-yellow-background-pressed-dark);
+}
+.button--type-primary.button--dark-theme.button--custom-color {
+  --button-text-color: var(--tc-button-text-white-permanent-dark);
+  --button-icon-color: var(--tc-button-icon-white-permanent-dark);
+}
+.button--type-primary.button--dark-theme.button--custom-color-content-dark {
+  --button-text-color: var(--tc-button-text-black-permanent-dark);
+  --button-icon-color: var(--tc-button-icon-black-permanent-dark);
+}
+.button--type-primary.button--dark-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-primary-dark);
-  --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-inverse-default-dark);
   --button-icon-color: var(--tc-button-icon-inverse-primary-dark);
-}
-.button--type-primary.button-dark-inverse-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-inverse-hover-dark);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre-dark), var(--tc-button-hover-shadow-raised-dark);
-}
-.button--type-primary.button-dark-inverse-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-primary.button-dark-inverse-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-inverse-pressed-dark);
-}
-.button--type-primary.button-dark-inverse-theme:disabled {
-  --button-text-color: var(--tc-button-text-inverse-disabled-dark);
-  --button-background: var(--tc-button-primary-background-inverse-disabled-dark);
-  --button-icon-color: var(--tc-button-icon-inverse-disabled-dark);
-}
-.button--type-primary.button-mint-theme {
+  --button-background-hover: var(--tc-button-primary-background-inverse-hover-dark);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised), var(--tc-button-hover-shadow-centre);
+  --button-background-active: var(--tc-button-primary-background-inverse-pressed-dark);
+  --button-text-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+  --button-background-disabled: var(--tc-button-primary-background-inverse-disabled-dark);
+  --button-icon-color-disabled: var(--tc-button-icon-inverse-disabled-dark);
+}
+.button--type-primary.button--dark-inverse-theme.button--color-theme-adaptive-yellow {
+  --button-text-color: var(--tc-button-text-black-permanent-dark);
+  --button-background: var(--tc-button-primary-yellow-background-default-dark);
+  --button-icon-color: var(--tc-button-icon-black-permanent-dark);
+  --button-background-hover: var(--tc-button-primary-yellow-background-hover-dark);
+  --button-background-active: var(--tc-button-primary-yellow-background-pressed-dark);
+}
+.button--type-primary.button--mint-theme {
   --button-text-color: rgb(10, 11, 13);
-  --button-border-color: rgb(26, 213, 219);
   --button-background: rgb(26, 213, 219);
-}
-.button--type-primary.button-mint-theme:hover:not(:disabled) {
-  --button-background: rgb(153, 245, 255);
-  --button-border-color: rgb(153, 245, 255);
-}
-.button--type-primary.button-mint-theme:focus:not(:disabled) {
-  --button-background: rgb(153, 245, 255);
-  --button-border-color: rgb(26, 213, 219);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(31, 208, 214, 0.32);
-}
-.button--type-primary.button-mint-theme:active:not(:disabled) {
-  --button-background: rgb(24, 165, 170);
-  --button-border-color: rgb(24, 165, 170);
-}
-.button--type-primary.button-mint-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(67, 75, 86);
-  --button-background: rgb(67, 75, 86);
-}
-.button--type-primary.button-light-theme {
+  --button-border-color-hover: rgb(153, 245, 255);
+  --button-background-hover: rgb(153, 245, 255);
+  --button-border-color-focus: rgb(26, 213, 219);
+  --button-background-focus: rgb(153, 245, 255);
+  --button-box-shadow-focus: 0 0 0 0.1875rem rgba(31, 208, 214, 0.32);
+  --button-border-color-active: rgb(24, 165, 170);
+  --button-background-active: rgb(24, 165, 170);
+  --button-text-color-disabled: rgb(153, 160, 174);
+  --button-border-color-disabled: rgb(67, 75, 86);
+  --button-background-disabled: rgb(67, 75, 86);
+}
+.button--type-primary.button--light-theme {
   --button-text-color: var(--tc-button-text-primary);
-  --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-default);
   --button-icon-color: var(--tc-button-icon-primary);
-}
-.button--type-primary.button-light-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-hover);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre), var(--tc-button-hover-shadow-raised);
-}
-.button--type-primary.button-light-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-primary.button-light-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-pressed);
-}
-.button--type-primary.button-light-theme:disabled {
-  --button-text-color: var(--tc-button-text-disabled);
-  --button-background: var(--tc-button-primary-background-disabled);
-  --button-icon-color: var(--tc-button-icon-disabled);
-}
-.button--type-primary.button-light-inverse-theme {
+  --button-background-hover: var(--tc-button-primary-background-hover);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised), var(--tc-button-hover-shadow-centre);
+  --button-background-active: var(--tc-button-primary-background-pressed);
+  --button-text-color-disabled: var(--tc-button-text-disabled);
+  --button-background-disabled: var(--tc-button-primary-background-disabled);
+  --button-icon-color-disabled: var(--tc-button-icon-disabled);
+}
+.button--type-primary.button--light-theme.button--color-theme-yellow {
+  --button-text-color: var(--tc-button-text-black-permanent);
+  --button-background: var(--tc-button-primary-yellow-background-default);
+  --button-icon-color: var(--tc-button-icon-black-permanent);
+  --button-background-hover: var(--tc-button-primary-yellow-background-hover);
+  --button-background-active: var(--tc-button-primary-yellow-background-pressed);
+}
+.button--type-primary.button--light-theme.button--custom-color {
+  --button-text-color: var(--tc-button-text-white-permanent);
+  --button-icon-color: var(--tc-button-icon-white-permanent);
+}
+.button--type-primary.button--light-theme.button--custom-color-content-dark {
+  --button-text-color: var(--tc-button-text-black-permanent);
+  --button-icon-color: var(--tc-button-icon-black-permanent);
+}
+.button--type-primary.button--light-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-primary);
-  --button-border-color: transparent;
   --button-background: var(--tc-button-primary-background-inverse-default);
   --button-icon-color: var(--tc-button-icon-inverse-primary);
-}
-.button--type-primary.button-light-inverse-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-inverse-hover);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre), var(--tc-button-hover-shadow-raised);
-}
-.button--type-primary.button-light-inverse-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-primary.button-light-inverse-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-primary-background-inverse-pressed);
-}
-.button--type-primary.button-light-inverse-theme:disabled {
-  --button-text-color: var(--tc-button-text-inverse-disabled);
-  --button-background: var(--tc-button-primary-background-inverse-disabled);
-  --button-icon-color: var(--tc-button-icon-inverse-disabled);
-}
-.button--type-primary.button-classic-theme {
+  --button-background-hover: var(--tc-button-primary-background-inverse-hover);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised-dark), var(--tc-button-hover-shadow-centre-dark);
+  --button-background-active: var(--tc-button-primary-background-inverse-pressed);
+  --button-text-color-disabled: var(--tc-button-text-inverse-disabled);
+  --button-background-disabled: var(--tc-button-primary-background-inverse-disabled);
+  --button-icon-color-disabled: var(--tc-button-icon-inverse-disabled);
+}
+.button--type-primary.button--classic-theme {
   --button-text-color: rgb(255, 255, 255);
   --button-background: rgb(0, 96, 245);
-}
-.button--type-primary.button-classic-theme:hover:not(:disabled) {
-  --button-background: rgb(52, 132, 244);
-  --button-border-color: rgb(52, 132, 244);
-}
-.button--type-primary.button-classic-theme:focus:not(:disabled) {
-  --button-background: rgb(52, 132, 244);
-  --button-border-color: rgb(8, 53, 104);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(52, 132, 244, 0.45);
-}
-.button--type-primary.button-classic-theme:active:not(:disabled) {
-  --button-background: rgb(8, 53, 104);
-  --button-border-color: rgb(8, 53, 104);
-}
-.button--type-primary.button-classic-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(255, 255, 255);
-  --button-background: rgb(255, 255, 255);
-}
-.button--type-primary.button-netflix-theme {
-  --button-text-color: rgb(255, 255, 255);
-  --button-background: rgb(229, 9, 20);
-  --button-border-color: transparent;
-}
-.button--type-primary.button-netflix-theme:hover:not(:disabled) {
-  --button-background: rgb(182, 7, 18);
-  --button-border-color: rgb(182, 7, 18);
-}
-.button--type-primary.button-netflix-theme:focus:not(:disabled) {
-  --button-background: rgb(229, 9, 20);
-  --button-border-color: rgb(67, 75, 86);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(215, 219, 224, 0.7);
-}
-.button--type-primary.button-netflix-theme:active:not(:disabled) {
-  --button-background: rgb(132, 5, 13);
-  --button-border-color: rgb(132, 5, 13);
-}
-.button--type-primary.button-netflix-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(255, 255, 255);
-  --button-background: rgb(255, 255, 255);
-}
-.button--type-primary.button-yellow-theme {
-  --button-text-color: rgb(10, 11, 13);
-  --button-background: rgb(255, 209, 38);
-  --button-border-color: transparent;
-}
-.button--type-primary.button-yellow-theme:hover:not(:disabled) {
-  --button-background: rgb(204, 161, 0);
-  --button-border-color: rgb(204, 161, 0);
-}
-.button--type-primary.button-yellow-theme:focus:not(:disabled) {
-  --button-background: rgb(255, 209, 38);
-  --button-border-color: rgb(67, 75, 86);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(215, 219, 224, 0.7);
-}
-.button--type-primary.button-yellow-theme:active:not(:disabled) {
-  --button-background: rgb(229, 181, 0);
-  --button-border-color: rgb(229, 181, 0);
-}
-.button--type-primary.button-yellow-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(255, 255, 255);
-  --button-background: rgb(255, 255, 255);
+  --button-background-hover: rgb(52, 132, 244);
+  --button-border-color-hover: rgb(52, 132, 244);
+  --button-background-focus: rgb(52, 132, 244);
+  --button-border-color-focus: rgb(8, 53, 104);
+  --button-box-shadow-focus: 0 0 0 0.1875rem rgba(52, 132, 244, 0.45);
+  --button-background-active: rgb(8, 53, 104);
+  --button-border-color-active: rgb(8, 53, 104);
+  --button-text-color-disabled: rgb(153, 160, 174);
+  --button-border-color-disabled: rgb(255, 255, 255);
+  --button-background-disabled: rgb(255, 255, 255);
+}
+.button--type-primary.button--custom-color {
+  --button-background: var(--button-custom-color);
+  --button-background-hover: color-mix(in srgb, var(--button-custom-color) 92%, rgb(0, 0, 0) 8%);
+  --button-background-active: color-mix(in srgb, var(--button-custom-color) 84%, rgb(0, 0, 0) 16%);
 }
 .button--type-secondary {
   --button-background: transparent;
+  --button-icon-color-disabled: var(--button-text-color-disabled);
 }
-.button--type-secondary.button-dark-theme {
+.button--type-secondary.button--dark-theme {
   --button-text-color: var(--tc-button-text-secondary-dark);
   --button-border-color: var(--tc-button-border-secondary-dark);
   --button-icon-color: var(--tc-button-icon-inverse-primary-dark);
-}
-.button--type-secondary.button-dark-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-hover-dark);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre-dark), var(--tc-button-hover-shadow-raised-dark);
-}
-.button--type-secondary.button-dark-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-secondary.button-dark-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-pressed-dark);
-}
-.button--type-secondary.button-dark-theme:disabled {
-  --button-text-color: var(--tc-button-text-secondary-disabled-dark);
-  --button-border-color: var(--tc-button-border-disabled-dark);
-  --button-icon-color: var(--tc-button-icon-secondary-disabled-dark);
-}
-.button--type-secondary.button-dark-inverse-theme {
+  --button-background-hover: var(--tc-button-secondary-background-hover-dark);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised-dark), var(--tc-button-hover-shadow-centre-dark);
+  --button-background-active: var(--tc-button-secondary-background-pressed-dark);
+  --button-text-color-disabled: var(--tc-button-text-secondary-disabled-dark);
+  --button-border-color-disabled: var(--tc-button-border-disabled-dark);
+  --button-icon-color-disabled: var(--tc-button-icon-secondary-disabled-dark);
+}
+.button--type-secondary.button--dark-theme.button--color-theme-adaptive-yellow {
+  --button-text-color: var(--tc-button-text-secondary-adaptive-yellow-dark);
+  --button-border-color: var(--tc-button-border-adaptive-yellow-secondary-dark);
+  --button-icon-color: var(--tc-button-icon-secondary-adaptive-yellow-dark);
+  --button-background-hover: var(--tc-button-secondary-adaptive-yellow-background-hover-dark);
+  --button-background-active: var(--tc-button-secondary-adaptive-yellow-background-pressed-dark);
+}
+.button--type-secondary.button--dark-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-secondary-dark);
   --button-border-color: var(--tc-button-border-inverse-secondary-dark);
   --button-icon-color: var(--tc-button-icon-inverse-secondary-dark);
-}
-.button--type-secondary.button-dark-inverse-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-inverse-hover-dark);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre-dark), var(--tc-button-hover-shadow-raised-dark);
-}
-.button--type-secondary.button-dark-inverse-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-secondary.button-dark-inverse-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-inverse-pressed-dark);
-}
-.button--type-secondary.button-dark-inverse-theme:disabled {
-  --button-text-color: var(--tc-button-text-inverse-secondary-disabled-dark);
-  --button-border-color: var(--tc-button-border-inverse-disabled-dark);
-  --button-icon-color: var(--tc-button-icon-inverse-secondary-disabled-dark);
-}
-.button--type-secondary.button-mint-theme {
+  --button-background-hover: var(--tc-button-secondary-background-inverse-hover-dark);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised), var(--tc-button-hover-shadow-centre);
+  --button-background-active: var(--tc-button-secondary-background-inverse-pressed-dark);
+  --button-text-color-disabled: var(--tc-button-text-inverse-secondary-disabled-dark);
+  --button-border-color-disabled: var(--tc-button-border-inverse-disabled-dark);
+  --button-icon-color-disabled: var(--tc-button-icon-inverse-secondary-disabled-dark);
+}
+.button--type-secondary.button--mint-theme {
   --button-text-color: rgb(26, 213, 219);
   --button-border-color: rgb(26, 213, 219);
-}
-.button--type-secondary.button-mint-theme:hover:not(:disabled) {
-  --button-text-color: rgb(255, 255, 255);
-  --button-border-color: rgb(153, 245, 255);
-  --button-background: rgba(26, 213, 219, 0.08);
-}
-.button--type-secondary.button-mint-theme:focus:not(:disabled) {
-  --button-text-color: rgb(255, 255, 255);
-  --button-border-color: rgb(26, 213, 219);
-  --button-background: rgba(26, 213, 219, 0.24);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(31, 208, 214, 0.32);
-}
-.button--type-secondary.button-mint-theme:active:not(:disabled) {
-  --button-text-color: rgb(255, 255, 255);
-  --button-border-color: rgb(26, 213, 219);
-  --button-background: rgba(26, 213, 219, 0.32);
-}
-.button--type-secondary.button-mint-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(153, 160, 174);
-  --button-background: transparent;
-}
-.button--type-secondary.button-light-theme {
+  --button-text-color-hover: rgb(255, 255, 255);
+  --button-border-color-hover: rgb(153, 245, 255);
+  --button-background-hover: rgba(26, 213, 219, 0.08);
+  --button-text-color-focus: rgb(255, 255, 255);
+  --button-border-color-focus: rgb(26, 213, 219);
+  --button-background-focus: rgba(26, 213, 219, 0.24);
+  --button-box-shadow-focus: 0 0 0 0.1875rem rgba(31, 208, 214, 0.32);
+  --button-text-color-active: rgb(255, 255, 255);
+  --button-border-color-active: rgb(26, 213, 219);
+  --button-background-active: rgba(26, 213, 219, 0.32);
+  --button-text-color-disabled: rgb(153, 160, 174);
+  --button-border-color-disabled: rgb(153, 160, 174);
+}
+.button--type-secondary.button--light-theme {
   --button-text-color: var(--tc-button-text-secondary);
   --button-border-color: var(--tc-button-border-secondary);
   --button-icon-color: var(--tc-button-icon-inverse-primary);
-}
-.button--type-secondary.button-light-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-hover);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre), var(--tc-button-hover-shadow-raised);
-}
-.button--type-secondary.button-light-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-secondary.button-light-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-pressed);
-}
-.button--type-secondary.button-light-theme:disabled {
-  --button-text-color: var(--tc-button-text-secondary-disabled);
-  --button-border-color: var(--tc-button-border-disabled);
-  --button-icon-color: var(--tc-button-icon-secondary-disabled);
-}
-.button--type-secondary.button-light-inverse-theme {
+  --button-background-hover: var(--tc-button-secondary-background-hover);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised), var(--tc-button-hover-shadow-centre);
+  --button-background-active: var(--tc-button-secondary-background-pressed);
+  --button-text-color-disabled: var(--tc-button-text-secondary-disabled);
+  --button-border-color-disabled: var(--tc-button-border-disabled);
+  --button-icon-color-disabled: var(--tc-button-icon-secondary-disabled);
+}
+.button--type-secondary.button--light-inverse-theme {
   --button-text-color: var(--tc-button-text-inverse-secondary);
   --button-border-color: var(--tc-button-border-inverse-secondary);
   --button-icon-color: var(--tc-button-icon-inverse-secondary);
-}
-.button--type-secondary.button-light-inverse-theme:hover:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-inverse-hover);
-  --button-box-shadow: var(--tc-button-hover-shadow-centre), var(--tc-button-hover-shadow-raised);
-}
-.button--type-secondary.button-light-inverse-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-secondary.button-light-inverse-theme:active:not(:disabled) {
-  --button-background: var(--tc-button-secondary-background-inverse-pressed);
-}
-.button--type-secondary.button-light-inverse-theme:disabled {
-  --button-text-color: var(--tc-button-text-inverse-secondary-disabled);
-  --button-border-color: var(--tc-button-border-inverse-disabled);
-  --button-icon-color: var(--tc-button-icon-inverse-secondary-disabled);
-}
-.button--type-secondary.button-classic-theme {
+  --button-background-hover: var(--tc-button-secondary-background-inverse-hover);
+  --button-box-shadow-hover: var(--tc-button-hover-shadow-raised-dark), var(--tc-button-hover-shadow-centre-dark);
+  --button-background-active: var(--tc-button-secondary-background-inverse-pressed);
+  --button-text-color-disabled: var(--tc-button-text-inverse-secondary-disabled);
+  --button-border-color-disabled: var(--tc-button-border-inverse-disabled);
+  --button-icon-color-disabled: var(--tc-button-icon-inverse-secondary-disabled);
+}
+.button--type-secondary.button--classic-theme {
   --button-text-color: rgb(0, 96, 245);
   --button-border-color: rgb(0, 96, 245);
-}
-.button--type-secondary.button-classic-theme:hover:not(:disabled) {
-  --button-text-color: rgb(8, 53, 104);
-  --button-background: rgba(0, 96, 245, 0.08);
-}
-.button--type-secondary.button-classic-theme:focus:not(:disabled) {
-  --button-text-color: rgb(8, 53, 104);
-  --button-background: rgba(0, 96, 245, 0.12);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(113, 172, 244, 0.5);
-}
-.button--type-secondary.button-classic-theme:active:not(:disabled) {
-  --button-text-color: rgb(8, 53, 104);
-  --button-background: rgba(0, 96, 245, 0.16);
-}
-.button--type-secondary.button-classic-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(153, 160, 174);
-  --button-background: transparent;
+  --button-text-color-hover: rgb(8, 53, 104);
+  --button-background-hover: rgba(0, 96, 245, 0.08);
+  --button-text-color-focus: rgb(8, 53, 104);
+  --button-background-focus: rgba(0, 96, 245, 0.12);
+  --button-box-shadow-focus: 0 0 0 0.1875rem rgba(113, 172, 244, 0.5);
+  --button-text-color-active: rgb(8, 53, 104);
+  --button-background-active: rgba(0, 96, 245, 0.16);
+  --button-text-color-disabled: rgb(153, 160, 174);
+  --button-border-color-disabled: rgb(153, 160, 174);
+}
+.button--type-secondary.button--custom-color {
+  --button-border-color: var(--button-custom-color);
+  --button-text-color: var(--button-custom-color);
+  --button-icon-color: var(--button-custom-color);
+  --button-background-hover: color-mix(in srgb, var(--button-custom-color) 12%, transparent);
+  --button-background-active: color-mix(in srgb, var(--button-custom-color) 24%, transparent);
 }
 .button--type-ghost {
   --button-border-color: transparent;
   --button-background: transparent;
+  --button-border-color-active: transparent;
+  --button-border-color-disabled: transparent;
+  --button-background-disabled: transparent;
+  --button-icon-color-disabled: var(--button-text-color-disabled);
 }
-.button--type-ghost.button-dark-theme {
+.button--type-ghost.button--dark-theme {
   --button-text-color: rgb(255, 255, 255);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-dark-theme:hover:not(:disabled) {
-  --button-text-color: rgb(215, 219, 224);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-dark-theme:focus:not(:disabled) {
-  --button-background: rgba(215, 219, 224, 0.01);
-  --button-border-color: rgb(192, 197, 206);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(215, 219, 224, 0.35);
-}
-.button--type-ghost.button-dark-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-ghost.button-dark-theme:active:not(:disabled) {
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-dark-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: transparent;
-  --button-background: transparent;
+  --button-text-color-hover: rgb(215, 219, 224);
+  --button-border-color-focus: rgb(192, 197, 206);
+  --button-background-focus: rgba(215, 219, 224, 0.01);
+  --button-box-shadow-focus: 0 0 0 0.1875rem rgba(215, 219, 224, 0.35);
+  --button-text-color-disabled: rgb(153, 160, 174);
 }
-.button--type-ghost.button-mint-theme {
+.button--type-ghost.button--mint-theme {
   --button-text-color: rgb(26, 213, 219);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-mint-theme:hover:not(:disabled) {
-  --button-text-color: rgb(153, 245, 255);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-mint-theme:focus:not(:disabled) {
-  --button-text-color: rgb(153, 245, 255);
-  --button-border-color: rgb(153, 245, 255);
-  --button-background: rgba(153, 245, 255, 0.01);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(153, 245, 255, 0.3);
-}
-.button--type-ghost.button-mint-theme:active:not(:disabled) {
-  --button-text-color: rgb(24, 165, 170);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-mint-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: transparent;
-  --button-background: transparent;
-}
-.button--type-ghost.button-light-theme {
+  --button-text-color-hover: rgb(153, 245, 255);
+  --button-text-color-focus: rgb(153, 245, 255);
+  --button-border-color-focus: rgb(153, 245, 255);
+  --button-background-focus: rgba(153, 245, 255, 0.01);
+  --button-box-shadow-focus: 0 0 0 0.1875rem rgba(153, 245, 255, 0.3);
+  --button-text-color-active: rgb(24, 165, 170);
+  --button-text-color-disabled: rgb(153, 160, 174);
+}
+.button--type-ghost.button--light-theme {
   --button-text-color: rgb(10, 11, 13);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-light-theme:hover:not(:disabled) {
-  --button-text-color: rgb(88, 99, 116);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-light-theme:focus:not(:disabled), .button--type-ghost.button-light-theme:focus-visible:not(:disabled) {
-  --button-text-color: rgb(10, 11, 13);
-  --button-border-color: rgb(153, 160, 174);
-  --button-background: rgba(153, 160, 174, 0.01);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(153, 160, 174, 0.3);
-}
-.button--type-ghost.button-light-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-box-shadow: none;
-}
-.button--type-ghost.button-light-theme:active:not(:disabled) {
-  --button-text-color: rgb(35, 40, 46);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-light-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: transparent;
-  --button-background: transparent;
-}
-.button--type-ghost.button-classic-theme {
+  --button-text-color-hover: rgb(88, 99, 116);
+  --button-text-color-focus: rgb(10, 11, 13);
+  --button-border-color-focus: rgb(153, 160, 174);
+  --button-background-focus: rgba(153, 160, 174, 0.01);
+  --button-box-shadow-focus: 0 0 0 0.1875rem rgba(153, 160, 174, 0.3);
+  --button-text-color-active: rgb(35, 40, 46);
+  --button-text-color-disabled: rgb(153, 160, 174);
+}
+.button--type-ghost.button--classic-theme {
   --button-text-color: rgb(0, 96, 245);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-classic-theme:hover:not(:disabled) {
-  --button-text-color: rgb(52, 132, 244);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-classic-theme:focus:not(:disabled) {
-  --button-text-color: rgb(52, 132, 244);
-  --button-border-color: rgb(52, 132, 244);
-  --button-background: rgba(52, 132, 244, 0.01);
-}
-.button--type-ghost.button-classic-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-}
-.button--type-ghost.button-classic-theme:active:not(:disabled) {
-  --button-text-color: rgb(8, 53, 104);
-  --button-border-color: transparent;
-}
-.button--type-ghost.button-classic-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: transparent;
-  --button-background: transparent;
+  --button-text-color-hover: rgb(52, 132, 244);
+  --button-text-color-focus: rgb(52, 132, 244);
+  --button-border-color-focus: rgb(52, 132, 244);
+  --button-background-focus: rgba(52, 132, 244, 0.01);
+  --button-text-color-active: rgb(8, 53, 104);
+  --button-text-color-disabled: rgb(153, 160, 174);
 }
 .button--type-link {
   text-align: left;
   --button-border-color: transparent;
   --button-background: transparent;
+  --button-text-decoration-hover: underline;
+  --button-text-decoration-focus: underline;
+  --button-text-decoration-active: underline;
+  --button-icon-color-disabled: var(--button-text-color-disabled);
 }
 .button--type-link:focus-visible:not(:disabled), .button--type-link:focus:not(:disabled) {
   border-radius: 0.625rem;
 }
-.button--type-link.button-dark-theme {
+.button--type-link.button--dark-theme {
   --button-text-color: rgb(247, 247, 247);
+  --button-text-color-hover: rgb(215, 219, 224);
+  --button-text-color-focus: rgb(215, 219, 224);
+  --button-text-color-active: rgb(247, 247, 247);
+  --button-text-color-disabled: rgb(153, 160, 174);
 }
-.button--type-link.button-dark-theme:hover:not(:disabled) {
-  --button-text-color: rgb(215, 219, 224);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-dark-theme:focus:not(:disabled) {
-  --button-text-color: rgb(215, 219, 224);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-dark-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline: 0.125rem solid var(--tc-blue-40-dark);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-  --button-text-color: rgb(247, 247, 247);
-}
-.button--type-link.button-dark-theme:active:not(:disabled) {
-  --button-text-color: rgb(247, 247, 247);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-dark-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-}
-.button--type-link.button-mint-theme {
+.button--type-link.button--mint-theme {
   --button-text-color: rgb(26, 213, 219);
+  --button-text-color-hover: rgb(153, 245, 255);
+  --button-text-color-focus: rgb(153, 245, 255);
+  --button-text-color-active: rgb(26, 213, 219);
+  --button-text-color-disabled: rgb(153, 160, 174);
 }
-.button--type-link.button-mint-theme:hover:not(:disabled) {
-  --button-text-color: rgb(153, 245, 255);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-mint-theme:focus:not(:disabled) {
-  --button-text-color: rgb(153, 245, 255);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-mint-theme:active:not(:disabled) {
-  --button-text-color: rgb(26, 213, 219);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-mint-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-}
-.button--type-link.button-light-theme {
+.button--type-link.button--light-theme {
   --button-text-color: rgb(10, 11, 13);
+  --button-text-color-hover: rgb(88, 99, 116);
+  --button-text-color-focus: rgb(88, 99, 116);
+  --button-text-color-active: rgb(35, 40, 46);
+  --button-text-color-disabled: rgb(153, 160, 174);
 }
-.button--type-link.button-light-theme:hover:not(:disabled) {
-  --button-text-color: rgb(88, 99, 116);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-light-theme:focus:not(:disabled) {
-  --button-text-color: rgb(88, 99, 116);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-light-theme:focus-visible:not(:disabled) {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
-}
-.button--type-link.button-light-theme:active:not(:disabled) {
-  --button-text-color: rgb(35, 40, 46);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-light-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-}
-.button--type-link.button-classic-theme {
-  --button-text-color: rgb(0, 96, 245);
-}
-.button--type-link.button-classic-theme:hover:not(:disabled) {
-  --button-text-color: rgb(52, 132, 244);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-classic-theme:focus:not(:disabled) {
-  --button-text-color: rgb(52, 132, 244);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-classic-theme:active:not(:disabled) {
+.button--type-link.button--classic-theme {
   --button-text-color: rgb(0, 96, 245);
-  --button-text-decoration: underline;
-}
-.button--type-link.button-classic-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
+  --button-text-color-hover: rgb(52, 132, 244);
+  --button-text-color-focus: rgb(52, 132, 244);
+  --button-text-color-active: rgb(0, 96, 245);
+  --button-text-color-disabled: rgb(153, 160, 174);
 }
-.button.icon-mode {
+.button--icon-mode {
+  padding: var(--button-icon-mode-padding, var(--button-icon-mode-padding-internal));
   aspect-ratio: 1;
   border-radius: 50%;
 }