npm - @tet/tet-components - Versions diffs - 1.3.7-testing → 1.3.8-staging - Mend

@tet/tet-components 1.3.7-testing → 1.3.8-staging

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (419) hide show

package/dist/collection/components/advanced/cards/tet-compare-cards/tet-compare-cards.css CHANGED Viewed

@@ -351,16 +351,11 @@
 }
 :root {
-  --tet-link-color: var(--color-text-primary);
-  --tet-link-color-hover: var(--color-text-secondary);
-  --tet-link-color-active: var(--color-text-primary);
-  --tet-link-color-focus: var(--color-text-primary);
-  --tet-link-color-disabled: var(--color-text-disabled);
-  --tet-link-color-dark: var(--color-text-primary-dark);
-  --tet-link-color-hover-dark: var(--color-text-secondary-dark);
-  --tet-link-color-active-dark: var(--color-text-link-dark);
-  --tet-link-color-focus-dark: var(--color-text-link-dark);
-  --tet-link-color-disabled-dark: var(--color-text-disabled-dark);
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
 }
 .tet-link,
@@ -371,6 +366,14 @@
   line-height: 1.5rem;
   cursor: pointer;
 }
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   --icon-color: var(--tet-link-color);
@@ -393,15 +396,10 @@
 }
 .tet-link:focus-visible,
 .tet-link__arrow:focus-visible {
-  color: var(--tet-link-color-focus);
   outline: solid var(--tet-link-color-focus) 0.125rem;
   outline-offset: 0.375rem;
   border-radius: 0.125rem;
 }
-.tet-link:focus-visible tet-icon,
-.tet-link__arrow:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus);
-}
 .tet-link.disabled,
 .tet-link__arrow.disabled {
   color: var(--tet-link-color-disabled);
@@ -416,47 +414,6 @@
 .tet-link__arrow.disabled:focus-visible {
   outline: none;
 }
-.tet-link.dark,
-.tet-link__arrow.dark {
-  color: var(--tet-link-color-dark);
-}
-.tet-link.dark tet-icon,
-.tet-link__arrow.dark tet-icon {
-  --icon-color: var(--tet-link-color-dark);
-}
-.tet-link.dark:hover,
-.tet-link__arrow.dark:hover {
-  color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:hover tet-icon,
-.tet-link__arrow.dark:hover tet-icon {
-  --icon-color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:active,
-.tet-link__arrow.dark:active {
-  color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:active tet-icon,
-.tet-link__arrow.dark:active tet-icon {
-  --icon-color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:focus-visible,
-.tet-link__arrow.dark:focus-visible {
-  color: var(--tet-link-color-focus-dark);
-  outline-color: solid var(--tet-link-color-focus-dark);
-}
-.tet-link.dark:focus-visible tet-icon,
-.tet-link__arrow.dark:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus-dark);
-}
-.tet-link.dark.disabled,
-.tet-link__arrow.dark.disabled {
-  color: var(--tet-link-color-disabled-dark);
-}
-.tet-link.dark.disabled tet-icon,
-.tet-link__arrow.dark.disabled tet-icon {
-  --icon-color: var(--tet-link-color-disabled-dark);
-}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   padding-left: 0.25rem;

package/dist/collection/components/basic/buttons/tet-button/tet-button.js CHANGED Viewed

@@ -16,16 +16,17 @@ export class TetButton {
         this.accessibilityLabel = '';
     }
     render() {
-        return (h(Host, { key: '9b9ad704a86d7c4cd6dda6c468f5a7de8355516d' }, h("button", Object.assign({ key: '17594a840c67426fb9e2a402cad5e5c1898b8812', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
+        return (h(Host, { key: '7ae3e3d111e5c956fe53dc640199312aa6c50357' }, h("button", Object.assign({ key: 'b63da68559816f8cd54d391199f04879fe98b210', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
                 button: true,
                 [`button-${this.size}`]: true,
                 [`button--type-${this.type}`]: true,
                 [`button-${this.theme}-theme`]: true,
                 'icon-mode': this.iconMode
-            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {})), h("slot", { key: '0ae5d78af79744e1eb1fc10c5646dedbbc9d2f19' }))));
+            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {})), h("slot", { key: '2c9124c1ee5115499f5d2069d5b172a64a14f273' }))));
     }
     static get is() { return "tet-button"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["tet-button.scss"]

package/dist/collection/components/basic/buttons/tet-checkbox/tet-checkbox.css CHANGED Viewed

@@ -351,16 +351,11 @@
 }
 :root {
-  --tet-link-color: var(--color-text-primary);
-  --tet-link-color-hover: var(--color-text-secondary);
-  --tet-link-color-active: var(--color-text-primary);
-  --tet-link-color-focus: var(--color-text-primary);
-  --tet-link-color-disabled: var(--color-text-disabled);
-  --tet-link-color-dark: var(--color-text-primary-dark);
-  --tet-link-color-hover-dark: var(--color-text-secondary-dark);
-  --tet-link-color-active-dark: var(--color-text-link-dark);
-  --tet-link-color-focus-dark: var(--color-text-link-dark);
-  --tet-link-color-disabled-dark: var(--color-text-disabled-dark);
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
 }
 .tet-link,
@@ -371,6 +366,14 @@
   line-height: 1.5rem;
   cursor: pointer;
 }
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   --icon-color: var(--tet-link-color);
@@ -393,15 +396,10 @@
 }
 .tet-link:focus-visible,
 .tet-link__arrow:focus-visible {
-  color: var(--tet-link-color-focus);
   outline: solid var(--tet-link-color-focus) 0.125rem;
   outline-offset: 0.375rem;
   border-radius: 0.125rem;
 }
-.tet-link:focus-visible tet-icon,
-.tet-link__arrow:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus);
-}
 .tet-link.disabled,
 .tet-link__arrow.disabled {
   color: var(--tet-link-color-disabled);
@@ -416,47 +414,6 @@
 .tet-link__arrow.disabled:focus-visible {
   outline: none;
 }
-.tet-link.dark,
-.tet-link__arrow.dark {
-  color: var(--tet-link-color-dark);
-}
-.tet-link.dark tet-icon,
-.tet-link__arrow.dark tet-icon {
-  --icon-color: var(--tet-link-color-dark);
-}
-.tet-link.dark:hover,
-.tet-link__arrow.dark:hover {
-  color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:hover tet-icon,
-.tet-link__arrow.dark:hover tet-icon {
-  --icon-color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:active,
-.tet-link__arrow.dark:active {
-  color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:active tet-icon,
-.tet-link__arrow.dark:active tet-icon {
-  --icon-color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:focus-visible,
-.tet-link__arrow.dark:focus-visible {
-  color: var(--tet-link-color-focus-dark);
-  outline-color: solid var(--tet-link-color-focus-dark);
-}
-.tet-link.dark:focus-visible tet-icon,
-.tet-link__arrow.dark:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus-dark);
-}
-.tet-link.dark.disabled,
-.tet-link__arrow.dark.disabled {
-  color: var(--tet-link-color-disabled-dark);
-}
-.tet-link.dark.disabled tet-icon,
-.tet-link__arrow.dark.disabled tet-icon {
-  --icon-color: var(--tet-link-color-disabled-dark);
-}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   padding-left: 0.25rem;
@@ -486,6 +443,7 @@
   * @prop --checkbox-border-color: The border color of the checkbox.
   * @prop --checkbox-background-color: The background color of the checkbox.
   * @prop --checkbox-checked-background-color: The background color of the checkbox when checked.
+  * @prop --checkbox-pressed-background-color: The background color of the checkbox when pressed.
   * @prop --checkbox-icon-color: The icon color of the checkbox.
   * @prop --checkbox-text-color: The text color of the checkbox.
   * @prop --checkbox-text-size: The size of the label text.
@@ -496,7 +454,10 @@
   * @prop --checkbox-hover-border-color: The border color of the checkbox on hover.
   * @prop --checkbox-hover-background-color: The background color of the checkbox on hover.
-  * @prop --checkbox-focus-border-color: The border color of the checkbox on focus.
+  * @prop --checkbox-checked-hover-background-color: The background color of checked checkbox on hover.
+  * @prop --checkbox-checked-pressed-background-color: The background color of checked checkbox when pressed.
   * @prop --checkbox-focus-background-color: The background color of the checkbox on focus.
   * @prop --checkbox-focus-shadow-color: The shadow color of the checkbox on focus.
@@ -504,54 +465,61 @@
   * @prop --checkbox-disabled-background-color: The background color of the checkbox when disabled.
   * @prop --checkbox-disabled-checked-background-color: The background color of the checked checkbox when disabled.
   * @prop --checkbox-disabled-text-color: The border color of the checkbox when disabled.
   * @prop --checkbox-error-border-color: The border color of the checkbox on error.
   */
-  --checkbox-border-color: rgb(153, 160, 174);
-  --checkbox-background-color: rgb(255, 255, 255);
-  --checkbox-checked-background-color: rgb(10, 11, 13);
-  --checkbox-icon-color: rgb(255, 255, 255);
-  --checkbox-text-color: rgb(10, 11, 13);
+  --checkbox-border-color: var(--tc-border-secondary);
+  --checkbox-background-color: var(--tc-checkbox-default);
+  --checkbox-checked-background-color: var(--tc-checkbox-active-default);
+  --checkbox-pressed-background-color: var(--tc-checkbox-pressed);
+  --checkbox-icon-color: var(--tc-checkbox-default);
+  --checkbox-text-color: var(--tc-text-primary);
   --checkbox-text-size: 0.875rem;
   --checkbox-flex-direction: row;
   --checkbox-justify-content: normal;
   --checkbox-alignment: center;
   --checkbox-gap: 0.625rem;
-  --checkbox-hover-border-color: rgb(153, 160, 174);
-  --checkbox-hover-background-color: rgba(88, 99, 116, 0.08);
-  --checkbox-focus-border-color: rgb(10, 11, 13);
-  --checkbox-focus-background-color: var(--checkbox-background-color);
-  --checkbox-focus-shadow-color: rgba(88, 99, 116, 0.12);
-  --checkbox-disabled-border-color: rgb(192, 197, 206);
-  --checkbox-disabled-background-color: rgb(255, 255, 255);
-  --checkbox-disabled-checked-background-color: rgb(153, 160, 174);
-  --checkbox-disabled-text-color: rgb(153, 160, 174);
-  --checkbox-error-border-color: rgb(233, 69, 54);
+  --checkbox-hover-border-color: var(--tc-border-secondary);
+  --checkbox-hover-background-color: var(--tc-checkbox-hover);
+  --checkbox-checked-hover-background-color: var(--tc-checkbox-active-hover);
+  --checkbox-checked-pressed-background-color: var(--tc-checkbox-active-pressed);
+  --checkbox-focus-background-color: transparent;
+  --checkbox-focus-shadow-color: var(--tc-checkbox-active-focus);
+  --checkbox-disabled-border-color: var(--tc-border-quaternary);
+  --checkbox-disabled-background-color: var(--tc-checkbox-disabled);
+  --checkbox-disabled-checked-background-color: var(--tc-checkbox-active-disabled);
+  --checkbox-disabled-text-color: var(--tc-button-text-inverse-disabled);
+  --checkbox-error-border-color: var(--tc-alert-accent-error);
   display: block;
   position: relative;
 }
 .checkbox.dark, .checkbox.mint {
-  --checkbox-border-color: rgb(88, 99, 116);
-  --checkbox-background-color: rgb(10, 11, 13);
-  --checkbox-checked-background-color: rgb(255, 255, 255);
-  --checkbox-icon-color: rgb(10, 11, 13);
-  --checkbox-text-color: rgb(255, 255, 255);
-  --checkbox-hover-border-color: rgb(88, 99, 116);
-  --checkbox-hover-background-color: rgba(153, 160, 174, 0.12);
-  --checkbox-focus-border-color: rgb(255, 255, 255);
-  --checkbox-focus-background-color: var(--checkbox-background-color);
-  --checkbox-focus-shadow-color: rgba(153, 160, 174, 0.2);
-  --checkbox-disabled-border-color: rgb(67, 75, 86);
-  --checkbox-disabled-background-color: rgb(10, 11, 13);
-  --checkbox-disabled-checked-background-color: rgb(67, 75, 86);
-  --checkbox-disabled-text-color: rgb(67, 75, 86);
-  --checkbox-error-border-color: rgb(233, 69, 54);
+  --checkbox-border-color: var(--tc-border-secondary-dark);
+  --checkbox-background-color: var(--tc-checkbox-default-dark);
+  --checkbox-checked-background-color: var(--tc-checkbox-active-default-dark);
+  --checkbox-pressed-background-color: var(--tc-checkbox-pressed-dark);
+  --checkbox-icon-color: var(--tc-checkbox-default-dark);
+  --checkbox-text-color: var(--tc-text-primary-dark);
+  --checkbox-hover-border-color: var(--tc-border-secondary-dark);
+  --checkbox-hover-background-color: var(--tc-checkbox-hover-dark);
+  --checkbox-checked-hover-background-color: var(--tc-checkbox-active-hover-dark);
+  --checkbox-checked-pressed-background-color: var(--tc-checkbox-active-pressed-dark);
+  --checkbox-focus-background-color: transparent;
+  --checkbox-focus-shadow-color: var(--tc-checkbox-active-focus-dark);
+  --checkbox-disabled-border-color: var(--tc-border-quaternary-dark);
+  --checkbox-disabled-background-color: var(--tc-checkbox-disabled-dark);
+  --checkbox-disabled-checked-background-color: var(--tc-checkbox-active-disabled-dark);
+  --checkbox-disabled-text-color: var(--tc-button-text-inverse-disabled-dark);
+  --checkbox-error-border-color: var(--tc-alert-accent-error-dark);
 }
 .checkbox.mint {
   --checkbox-checked-background-color: rgb(31, 208, 214);
   --checkbox-hover-background-color: rgba(31, 208, 214, 0.16);
   --checkbox-focus-border-color: rgb(31, 208, 214);
   --checkbox-focus-shadow-color: rgba(31, 208, 214, 0.24);
+  --checkbox-checked-hover-background-color: var(--checkbox-checked-background-color);
+  --checkbox-checked-pressed-background-color: var(--checkbox-checked-background-color);
 }
 .checkbox__container {
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
@@ -571,6 +539,17 @@
 .checkbox__container:hover .checkbox__input--error {
   border-color: var(--checkbox-error-border-color);
 }
+.checkbox__container:active .checkbox__input {
+  background-color: var(--checkbox-pressed-background-color);
+}
+.checkbox__container:hover .checkbox__html-input:checked:not(:disabled) ~ .checkbox__input {
+  border-color: transparent;
+  background-color: var(--checkbox-checked-hover-background-color);
+}
+.checkbox__container:active .checkbox__html-input:checked:not(:disabled) ~ .checkbox__input {
+  border-color: transparent;
+  background-color: var(--checkbox-checked-pressed-background-color);
+}
 .checkbox__icon {
   --icon-color: var(--checkbox-icon-color);
   --icon-size: 100%;
@@ -585,12 +564,8 @@
 }
 .checkbox__html-input:focus ~ .checkbox__input {
   background-color: var(--checkbox-focus-background-color);
-  border-color: var(--checkbox-focus-border-color);
   box-shadow: 0 0 0 0.25rem var(--checkbox-focus-shadow-color);
 }
-.checkbox__html-input:focus ~ .checkbox__input--error {
-  border-color: var(--checkbox-error-border-color);
-}
 .checkbox__html-input:indeterminate ~ .checkbox__input, .checkbox__html-input:checked ~ .checkbox__input {
   border-color: var(--checkbox-checked-background-color);
   background-color: var(--checkbox-checked-background-color);
@@ -616,15 +591,13 @@
 }
 .checkbox__html-input[disabled] ~ .checkbox__input {
   border-color: var(--checkbox-disabled-border-color);
+  background-color: var(--checkbox-disabled-background-color);
 }
 .checkbox__html-input[disabled] ~ .checkbox__label {
   color: var(--checkbox-disabled-text-color);
 }
-.checkbox__html-input[disabled]:hover ~ .checkbox__input {
-  background-color: var(--checkbox-background-color);
-}
 .checkbox__html-input[disabled]:checked ~ .checkbox__input, .checkbox__html-input[disabled]:indeterminate ~ .checkbox__input {
-  border-color: var(--checkbox-disabled-checked-background-color);
+  border: none;
   background-color: var(--checkbox-disabled-checked-background-color);
 }
 .checkbox__input {

package/dist/collection/components/basic/buttons/tet-radio/tet-radio.css CHANGED Viewed

@@ -355,12 +355,16 @@
   * @prop --radio-border-color: The border color of the radio button.
   * @prop --radio-background-color: The background color of the radio button.
   * @prop --radio-checked-background-color: The background color of the radio button when checked.
+  * @prop --radio-pressed-background-color: The background color of the radio button when pressed.
   * @prop --radio-icon-color: The icon color of the radio button.
   * @prop --radio-text-color: The text color of the radio button.
   * @prop --radio-hover-border-color: The border color of the radio button on hover.
   * @prop --radio-hover-background-color: The background color of the radio button on hover.
+  * @prop --radio-checked-hover-background-color: The background color of checked radio button on hover.
+  * @prop --radio-checked-pressed-background-color: The background color of checked radio button when pressed.
   * @prop --radio-focus-border-color: The border color of the radio button on focus.
   * @prop --radio-focus-background-color: The background color of the radio button on focus.
   * @prop --radio-focus-shadow-color: The shadow color of the radio button on focus.
@@ -375,10 +379,13 @@
   --radio-border-color: rgb(153, 160, 174);
   --radio-background-color: rgb(255, 255, 255);
   --radio-checked-background-color: rgb(10, 11, 13);
+  --radio-pressed-background-color: var(--tc-radio-button-pressed);
   --radio-icon-color: rgb(255, 255, 255);
   --radio-text-color: rgb(10, 11, 13);
   --radio-hover-border-color: rgb(153, 160, 174);
   --radio-hover-background-color: rgba(88, 99, 116, 0.08);
+  --radio-checked-hover-background-color: var(--radio-checked-background-color);
+  --radio-checked-pressed-background-color: var(--radio-checked-background-color);
   --radio-focus-border-color: rgb(10, 11, 13);
   --radio-focus-background-color: var(--radio-background-color);
   --radio-focus-shadow-color: rgba(88, 99, 116, 0.12);
@@ -392,31 +399,51 @@
 }
 .radio-dark-theme, .radio-mint-theme {
-  --radio-border-color: rgb(88, 99, 116);
-  --radio-background-color: rgb(10, 11, 13);
-  --radio-checked-background-color: rgb(255, 255, 255);
-  --radio-icon-color: rgb(10, 11, 13);
-  --radio-text-color: rgb(255, 255, 255);
-  --radio-hover-border-color: rgb(88, 99, 116);
-  --radio-hover-background-color: rgba(153, 160, 174, 0.12);
-  --radio-focus-border-color: rgb(255, 255, 255);
-  --radio-focus-background-color: var(--radio-background-color);
-  --radio-focus-shadow-color: rgba(153, 160, 174, 0.2);
-  --radio-disabled-border-color: rgb(67, 75, 86);
-  --radio-disabled-background-color: rgb(10, 11, 13);
-  --radio-disabled-checked-background-color: rgb(67, 75, 86);
-  --radio-disabled-text-color: rgb(67, 75, 86);
+  --radio-border-color: var(--tc-border-secondary-dark);
+  --radio-background-color: var(--tc-radio-button-default-dark);
+  --radio-checked-background-color: var(--tc-radio-button-active-default-dark);
+  --radio-pressed-background-color: var(--tc-radio-button-pressed-dark);
+  --radio-icon-color: var(--tc-layer-primary-dark);
+  --radio-text-color: var(--tc-text-primary-dark);
+  --radio-hover-border-color: var(--tc-border-secondary-dark);
+  --radio-hover-background-color: var(--tc-radio-button-hover-dark);
+  --radio-checked-hover-background-color: var(--tc-radio-button-active-hover-dark);
+  --radio-checked-pressed-background-color: var(--tc-radio-button-active-pressed-dark);
+  --radio-focus-border-color: var(--tc-border-secondary-dark);
+  --radio-focus-background-color: var(--radio-background-color-dark);
+  --radio-focus-shadow-color: var(--tc-radio-button-active-focus-dark);
+  --radio-disabled-border-color: var(--tc-border-quaternary-dark);
+  --radio-disabled-background-color: var(--tc-radio-button-disabled-dark);
+  --radio-disabled-checked-background-color: var(--tc-radio-button-active-disabled-dark);
+  --radio-disabled-text-color: var(--tc-button-text-inverse-disabled-dark);
+  --radio-error-border-color: var(--tc-alert-accent-error-dark);
 }
 .radio-mint-theme {
   --radio-checked-background-color: rgb(31, 208, 214);
   --radio-hover-background-color: rgba(31, 208, 214, 0.16);
   --radio-focus-border-color: rgb(31, 208, 214);
   --radio-focus-shadow-color: rgba(31, 208, 214, 0.24);
+  --radio-checked-hover-background-color: var(--radio-checked-background-color);
+  --radio-checked-pressed-background-color: var(--radio-checked-background-color);
 }
 .radio-light-theme {
-  --radio-checked-background-color: var(--color-tc600);
-  --radio-focus-border-color: var(--color-tc600);
-  --radio-focus-shadow-color: var(--color-tc100);
+  --radio-border-color: var(--tc-border-secondary);
+  --radio-background-color: var(--tc-radio-button-default);
+  --radio-checked-background-color: var(--tc-radio-button-active-default);
+  --radio-icon-color: var(--tc-layer-primary);
+  --radio-text-color: var(--tc-text-primary);
+  --radio-hover-border-color: var(--tc-border-secondary);
+  --radio-hover-background-color: var(--tc-radio-button-hover);
+  --radio-checked-hover-background-color: var(--tc-radio-button-active-hover);
+  --radio-checked-pressed-background-color: var(--tc-radio-button-active-pressed);
+  --radio-focus-border-color: var(--tc-border-secondary);
+  --radio-focus-background-color: var(--radio-background-color);
+  --radio-focus-shadow-color: var(--tc-radio-button-active-focus);
+  --radio-disabled-border-color: var(--tc-border-quaternary);
+  --radio-disabled-background-color: var(--tc-radio-button-disabled);
+  --radio-disabled-checked-background-color: var(--tc-radio-button-active-disabled);
+  --radio-disabled-text-color: var(--tc-button-text-inverse-disabled);
+  --radio-error-border-color: var(--tc-alert-accent-error);
 }
 .radio__container {
   font: 400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;
@@ -431,6 +458,14 @@
   border-color: var(--radio-hover-border-color);
   background-color: var(--radio-hover-background-color);
 }
+.radio__container:hover .radio__html-input:checked:not(:disabled) ~ .radio__input {
+  border-color: transparent;
+  background-color: var(--radio-checked-hover-background-color);
+}
+.radio__container:active .radio__html-input:checked:not(:disabled) ~ .radio__input {
+  border-color: transparent;
+  background-color: var(--radio-checked-pressed-background-color);
+}
 .radio__icon {
   display: none;
   position: absolute;
@@ -446,6 +481,9 @@
   border-color: var(--radio-focus-border-color);
   box-shadow: 0 0 0 0.25rem var(--radio-focus-shadow-color);
 }
+.radio__html-input:active ~ .radio__input {
+  background-color: var(--radio-pressed-background-color);
+}
 .radio__html-input:checked ~ .radio__input {
   border-color: var(--radio-checked-background-color);
   background-color: var(--radio-checked-background-color);
@@ -459,13 +497,11 @@
 }
 .radio__html-input[disabled] ~ .radio__input {
   border-color: var(--radio-disabled-border-color);
+  background-color: var(--radio-disabled-background-color);
 }
 .radio__html-input[disabled] ~ .radio__label {
   color: var(--radio-disabled-text-color);
 }
-.radio__html-input[disabled]:hover ~ .radio__input {
-  background-color: var(--radio-background-color);
-}
 .radio__html-input[disabled]:checked ~ .radio__input {
   background-color: var(--radio-disabled-checked-background-color);
 }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.css CHANGED Viewed

@@ -370,24 +370,25 @@
     * @prop --tabs-headers-item-margin: The margin of the tabbable element.
     * @prop --tabs-headers-segmented-item-padding: The padding of the tabbable element in segmented state.
     * @prop --tabs-headers-segmented-item-margin: The margin of the tabbable element in segmented state.
+    * @prop --tabs-headers-square-base-rgb: The base color of the square-theme tabs header as comma-separated RGB values.
     */
-  --tabs-container-border-color: rgb(215, 219, 224);
+  --tabs-container-border-color: var(--tc-border-quaternary);
   --tabs-container-flex-wrap: nowrap;
-  --tabs-headers-text-color: rgb(10, 11, 13);
-  --tabs-headers-text-disabled-color: rgb(153, 160, 174);
-  --tabs-headers-active-border-color: rgb(10, 11, 13);
-  --tabs-headers-hover-border-color: rgb(192, 197, 206);
-  --tabs-headers-focus-border-color: rgb(153, 160, 174);
+  --tabs-headers-text-color: var(--tc-text-primary);
+  --tabs-headers-text-disabled-color: var(--tc-grey-50);
+  --tabs-headers-active-border-color: var(--tc-icon-primary);
+  --tabs-headers-hover-border-color: var(--tc-border-tertiary);
+  --tabs-headers-focus-border-color: var(--tc-border-secondary);
   --tabs-headers-segmended-item-font: 500 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
-  --tabs-headers-segmented-border-color: rgb(215, 219, 224);
-  --tabs-headers-segmented-background-color: rgb(235, 237, 239);
-  --tabs-headers-segmented-active-background-color: rgb(255, 255, 255);
-  --tabs-headers-segmented-active-box-shadow: 0 0 0.0625rem rgba(10, 11, 13, 0.08),
-    0 0.1875rem 0.25rem rgba(10, 11, 13, 0.12);
+  --tabs-headers-segmented-border-color: var(--tc-border-quaternary);
+  --tabs-headers-segmented-background-color: var(--tc-layer-tertiary);
+  --tabs-headers-segmented-active-background-color: var(--tc-layer-primary);
+  --tabs-headers-segmented-active-box-shadow: var(--tc-elevation-two);
   --tabs-headers-item-padding: 0.75rem 0.25rem;
   --tabs-headers-item-margin: 0 0.25rem;
   --tabs-headers-segmented-item-padding: 0.375rem 1.5rem;
   --tabs-headers-segmented-item-margin: 0.25rem 0;
+  --tabs-headers-square-base-rgb: 255, 255, 255;
   max-width: 100%;
 }
@@ -463,28 +464,17 @@
 .tabs.blue ::slotted(.active) {
   --tabs-headers-active-border-color: rgb(0, 96, 245);
 }
-.tabs.dark {
-  --tabs-container-border-color: rgba(88, 99, 116, 1);
-}
-.tabs.dark ::slotted(*) {
-  --tabs-headers-text-color: rgb(255, 255, 255);
-}
-.tabs.dark ::slotted(:hover),
-.tabs.dark ::slotted(:focus),
-.tabs.dark ::slotted(.active) {
-  color: rgb(255, 255, 255);
-}
-.tabs.dark ::slotted(:hover) {
-  --tabs-headers-hover-border-color: rgb(67, 75, 86);
-}
-.tabs.dark ::slotted(:focus) {
-  --tabs-headers-focus-border-color: rgb(67, 75, 86);
-}
-.tabs.dark ::slotted(.active) {
-  --tabs-headers-active-border-color: rgb(255, 255, 255);
-}
-.tabs.dark ::slotted(.disabled) {
-  --tabs-headers-text-disabled-color: rgb(67, 75, 86);
+.tabs.dark, .tabs--segmented.dark {
+  --tabs-container-border-color: var(--tc-border-quaternary-dark);
+  --tabs-headers-text-color: var(--tc-text-primary-dark);
+  --tabs-headers-text-disabled-color: var(--tc-grey-50-dark);
+  --tabs-headers-active-border-color: var(--tc-icon-primary-dark);
+  --tabs-headers-hover-border-color: var(--tc-border-tertiary-dark);
+  --tabs-headers-focus-border-color: var(--tc-border-secondary-dark);
+  --tabs-headers-segmented-border-color: var(--tc-border-quaternary-dark);
+  --tabs-headers-segmented-background-color: var(--tc-layer-tertiary-dark);
+  --tabs-headers-segmented-active-background-color: var(--tc-layer-primary-dark);
+  --tabs-headers-segmented-active-box-shadow: var(--tc-elevation-two-dark);
 }
 .tabs--segmented {
   display: flex;
@@ -497,22 +487,6 @@
 .tabs--segmented .web {
   padding: 0.25rem;
 }
-.tabs--segmented.dark {
-  --tabs-headers-text-color: rgb(255, 255, 255);
-  --tabs-headers-segmented-border-color: rgb(67, 75, 86);
-  --tabs-headers-segmented-background-color: rgb(22, 25, 29);
-  --tabs-headers-segmented-active-background-color: rgb(35, 40, 46);
-  --tabs-headers-segmented-active-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.2),
-    0 0.1875rem 0.25rem rgba(0, 0, 0, 0.3);
-}
-.tabs--segmented.dark ::slotted(:hover),
-.tabs--segmented.dark ::slotted(:focus),
-.tabs--segmented.dark ::slotted(.active) {
-  color: rgb(255, 255, 255);
-}
-.tabs--segmented.dark ::slotted(.disabled) {
-  color: var(--tabs-headers-text-disabled-color);
-}
 .tabs--segmented.dark-gray {
   --tabs-headers-text-color: rgb(255, 255, 255);
   --tabs-headers-segmented-border-color: rgb(67, 75, 86);
@@ -566,10 +540,10 @@
   line-height: 1.25rem;
 }
 .tabs--segmented.square {
+  --tabs-headers-segmented-background-color: rgba(var(--tabs-headers-square-base-rgb), 0.16);
+  --tabs-headers-segmented-border-color: transparent;
   height: 4.75rem;
   border-radius: 0.375rem;
-  --tabs-headers-segmented-background-color: rgba(255, 255, 255, 0.16);
-  --tabs-headers-segmented-border-color: transparent;
   padding: 0;
 }
 .tabs--segmented.square::before {
@@ -589,7 +563,7 @@
 }
 .tabs--segmented.square ::slotted(*)::after {
   content: "";
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(var(--tabs-headers-square-base-rgb), 0.2);
   position: absolute;
   top: 0.375rem;
   bottom: 0.375rem;
@@ -597,7 +571,7 @@
   width: 0.0625rem;
 }
 .tabs--segmented.square ::slotted(:hover) {
-  background-color: rgba(255, 255, 255, 0.24);
+  background-color: rgba(var(--tabs-headers-square-base-rgb), 0.24);
 }
 .tabs--segmented.square ::slotted(.active)::after,
 .tabs--segmented.square ::slotted(:last-child)::after {
@@ -605,7 +579,6 @@
 }
 .tabs--segmented.netflix {
   height: 2.75rem;
-  background-color: #ebedef;
 }
 .tabs--segmented.netflix ::slotted(*) {
   flex-direction: row-reverse;