@tet/tet-components 1.3.11-testing → 1.3.12-staging

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

@@ -415,22 +415,22 @@
 }
 .button:disabled {
   cursor: not-allowed;
+  backdrop-filter: blur(5px);
+}
+.button:not(:disabled) {
+  backdrop-filter: blur(7.5px);
 }
 .button--type-primary {
   --button-background: initial;
 }
 .button--type-primary.button-dark-theme {
-  --button-text-color: rgb(10, 11, 13);
-  --button-border-color: rgb(255, 255, 255);
-  --button-background: rgb(255, 255, 255);
+  --button-text-color: var(--tc-button-text-primary-dark);
+  --button-border-color: transparent;
+  --button-background: var(--tc-button-primary-background-default-dark);
 }
 .button--type-primary.button-dark-theme:hover:not(:disabled) {
-  --button-background: rgb(235, 237, 239);
-  --button-border-color: rgb(235, 237, 239);
-}
-.button--type-primary.button-dark-theme:focus:not(:disabled) {
-  --button-background: rgb(255, 255, 255);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(215, 219, 224, 0.7);
+  --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);
@@ -438,17 +438,36 @@
   outline-offset: 0.125rem;
   transition: outline 0s;
   --button-box-shadow: none;
-  --button-background: rgb(255, 255, 255);
-  --button-border-color: rgb(255, 255, 255);
 }
 .button--type-primary.button-dark-theme:active:not(:disabled) {
-  --button-background: rgb(192, 197, 206);
-  --button-border-color: rgb(192, 197, 206);
+  --button-background: var(--tc-button-primary-background-pressed-dark);
 }
 .button--type-primary.button-dark-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(67, 75, 86);
-  --button-background: rgb(67, 75, 86);
+  --button-text-color: var(--tc-button-text-disabled-dark);
+  --button-background: var(--tc-button-primary-background-disabled-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--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--type-primary.button-mint-theme {
   --button-text-color: rgb(10, 11, 13);
@@ -474,35 +493,48 @@
   --button-background: rgb(67, 75, 86);
 }
 .button--type-primary.button-light-theme {
-  --button-text-color: rgb(255, 255, 255);
-  --button-border-color: rgb(10, 11, 13);
-  --button-background: rgb(10, 11, 13);
+  --button-text-color: var(--tc-button-text-primary);
+  --button-border-color: transparent;
+  --button-background: var(--tc-button-primary-background-default);
 }
 .button--type-primary.button-light-theme:hover:not(:disabled) {
-  --button-background: rgb(67, 75, 86);
-  --button-border-color: rgb(67, 75, 86);
-}
-.button--type-primary.button-light-theme:focus:not(:disabled) {
-  --button-background: rgb(67, 75, 86);
-  --button-border-color: rgb(22, 25, 29);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(67, 75, 86, 0.6);
+  --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-background: rgb(10, 11, 13);
   --button-box-shadow: none;
-  --button-border-color: rgb(10, 11, 13);
 }
 .button--type-primary.button-light-theme:active:not(:disabled) {
-  --button-background: rgb(88, 99, 116);
-  --button-border-color: rgb(88, 99, 116);
+  --button-background: var(--tc-button-primary-background-pressed);
 }
 .button--type-primary.button-light-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(255, 255, 255);
-  --button-background: rgb(255, 255, 255);
+  --button-text-color: var(--tc-button-text-disabled);
+  --button-background: var(--tc-button-primary-background-disabled);
+}
+.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--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--type-primary.button-classic-theme {
   --button-text-color: rgb(255, 255, 255);
@@ -576,35 +608,48 @@
   --button-background: transparent;
 }
 .button--type-secondary.button-dark-theme {
-  --button-text-color: rgb(255, 255, 255);
-  --button-border-color: rgb(247, 247, 247);
+  --button-text-color: var(--tc-button-text-secondary-dark);
+  --button-border-color: var(--tc-border-primary-dark);
 }
 .button--type-secondary.button-dark-theme:hover:not(:disabled) {
-  --button-background: rgba(247, 247, 247, 0.1);
-  --button-border-color: rgb(235, 237, 239);
-}
-.button--type-secondary.button-dark-theme:focus:not(:disabled) {
-  --button-background: rgba(247, 247, 247, 0.1);
-  --button-border-color: rgb(153, 160, 174);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(192, 197, 206, 0.4);
+  --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-border-color: rgb(247, 247, 247);
-  --button-background: transparent;
   --button-box-shadow: none;
 }
 .button--type-secondary.button-dark-theme:active:not(:disabled) {
-  --button-background: rgba(247, 247, 247, 0.17);
-  --button-border-color: rgb(235, 237, 239);
+  --button-background: var(--tc-button-secondary-background-pressed-dark);
 }
 .button--type-secondary.button-dark-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(153, 160, 174);
-  --button-background: transparent;
+  --button-text-color: var(--tc-button-secondary-background-disabled-dark);
+  --button-border-color: var(--tc-button-secondary-background-disabled-dark);
+}
+.button--type-secondary.button-dark-inverse-theme {
+  --button-text-color: var(--tc-button-text-inverse-secondary-dark);
+  --button-border-color: var(--tc-border-inverse-primary-dark);
+}
+.button--type-secondary.button-dark-inverse-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-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-pressed-dark);
+}
+.button--type-secondary.button-dark-inverse-theme:disabled {
+  --button-text-color: var(--tc-button-secondary-background-disabled-dark);
+  --button-border-color: var(--tc-button-secondary-background-disabled-dark);
 }
 .button--type-secondary.button-mint-theme {
   --button-text-color: rgb(26, 213, 219);
@@ -632,36 +677,46 @@
   --button-background: transparent;
 }
 .button--type-secondary.button-light-theme {
-  --button-text-color: rgb(10, 11, 13);
-  --button-border-color: rgb(10, 11, 13);
+  --button-text-color: var(--tc-button-text-secondary);
+  --button-border-color: var(--tc-border-primary);
 }
 .button--type-secondary.button-light-theme:hover:not(:disabled) {
-  --button-text-color: rgb(67, 75, 86);
-  --button-border-color: rgb(67, 75, 86);
-  --button-background: rgba(215, 219, 224, 0.3);
-}
-.button--type-secondary.button-light-theme:focus:not(:disabled) {
-  --button-text-color: rgb(10, 11, 13);
-  --button-background: rgba(153, 160, 174, 0.6);
-  --button-box-shadow: 0 0 0 0.1875rem rgba(35, 40, 46, 0.45);
+  --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-text-color: rgb(10, 11, 13);
-  --button-border-color: rgb(10, 11, 13);
-  --button-background: transparent;
   --button-box-shadow: none;
 }
 .button--type-secondary.button-light-theme:active:not(:disabled) {
-  --button-text-color: rgb(10, 11, 13);
-  --button-background: rgba(215, 219, 224, 0.6);
+  --button-background: var(--tc-button-secondary-background-pressed);
 }
 .button--type-secondary.button-light-theme:disabled {
-  --button-text-color: rgb(153, 160, 174);
-  --button-border-color: rgb(153, 160, 174);
-  --button-background: transparent;
+  --button-text-color: var(--tc-button-secondary-background-disabled);
+  --button-border-color: var(--tc-button-secondary-background-disabled);
+}
+.button--type-secondary.button-light-inverse-theme {
+  --button-text-color: var(--tc-button-text-inverse-secondary);
+  --button-border-color: var(--tc-border-inverse-primary);
+}
+.button--type-secondary.button-light-inverse-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-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-pressed);
+}
+.button--type-secondary.button-light-inverse-theme:disabled {
+  --button-text-color: var(--tc-button-secondary-background-disabled);
+  --button-border-color: var(--tc-button-secondary-background-disabled);
 }
 .button--type-secondary.button-classic-theme {
   --button-text-color: rgb(0, 96, 245);
@@ -707,9 +762,7 @@
   outline: 0.125rem solid var(--tc-blue-40-dark);
   outline-offset: 0.125rem;
   transition: outline 0s;
-  --button-background: rgba(215, 219, 224, 0.01);
   --button-box-shadow: none;
-  --button-border-color: transparent;
 }
 .button--type-ghost.button-dark-theme:active:not(:disabled) {
   --button-border-color: transparent;
@@ -761,8 +814,6 @@
   outline-offset: 0.125rem;
   transition: outline 0s;
   --button-box-shadow: none;
-  --button-border-color: transparent;
-  --button-background: transparent;
 }
 .button--type-ghost.button-light-theme:active:not(:disabled) {
   --button-text-color: rgb(35, 40, 46);
@@ -862,7 +913,6 @@
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: 0.125rem;
   transition: outline 0s;
-  --button-text-color: rgb(10, 11, 13);
 }
 .button--type-link.button-light-theme:active:not(:disabled) {
   --button-text-color: rgb(35, 40, 46);

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

@@ -16,13 +16,13 @@ export class TetButton {
         this.accessibilityLabel = '';
     }
     render() {
-        return (h(Host, { key: 'f71f529743204b2169a31efc61206b28ca9d2cd0' }, h("button", Object.assign({ key: '24f375077b77f27f830e1bab004f68a8c1308308', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
+        return (h(Host, { key: '0f2d8bfa4fca62ab1e95cefbb4fb3b5536bc4873' }, h("button", Object.assign({ key: '1f6a89232680ed608947c8081064c1adb8f823ea', 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: 'deb3366201871cc033a7ab681d637126a10f195c' }))));
+            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {})), h("slot", { key: '78dead44b0b104b5b1747713c79078f007986c8d' }))));
     }
     static get is() { return "tet-button"; }
     static get encapsulation() { return "shadow"; }
@@ -102,7 +102,7 @@ export class TetButton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonTheme",
-                    "resolved": "\"classic\" | \"dark\" | \"light\" | \"mint\" | \"netflix\" | \"yellow\"",
+                    "resolved": "\"classic\" | \"dark\" | \"dark-inverse\" | \"light\" | \"light-inverse\" | \"mint\" | \"netflix\" | \"yellow\"",
                     "references": {
                         "ButtonTheme": {
                             "location": "local",
@@ -151,7 +151,7 @@ export class TetButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines whether the button should assume \"icon\" mode - round circe with just the icon in the middle."
+                    "text": "Determines whether the button should assume \"icon\" mode - round circle with just the icon in the middle."
                 },
                 "attribute": "icon-mode",
                 "reflect": false,

package/dist/collection/components/basic/buttons/tet-switch/test/tet-switch.spec.js

@@ -12,7 +12,7 @@ describe('tet-switch', () => {
            <div class="light switch">
              <label class="switch__container" htmlfor="tet-switch" part="switch-container">
                <input class="switch__html-input" id="tet-switch" type="checkbox">
-               <span class="switch__input">
+               <span class="light switch__input">
                  <span class="switch__state"></span>
                </span>
                <span class="switch__label">

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

@@ -366,6 +366,8 @@
   * @prop --switch-focus-checked-shadow: The shadow color of the switch on focus when checked.
   * @prop --switch-hover-background-color: The background color of the switch on hover.
   * @prop --switch-hover-checked-background-color: The text color of the switch on hover.
+  * @prop --switch-pressed-background-color: The background color of the switch when clicked.
+  * @prop --switch-pressed-checked-background-color: The text color of the switch when clicked.
 
   * @prop --switch-disabled-background-color: The background color of the switch when disabled.
   * @prop --switch-disabled-checked-background-color: The background color of the switch when disabled and checked.
@@ -373,56 +375,66 @@
   * @prop --switch-disabled-checked-knob-color: The knob color of the switch when disabled and checked.
   * @prop --switch-disabled-text-color: The text color of the switch when disabled.
   */
-  --switch-text-color: rgb(10, 11, 13);
+  --switch-text-color: var(--tc-text-primary);
   --switch-justify-content: normal;
   --switch-flex-direction: row;
   --switch-gap: 0.625rem;
-  --switch-background-color: rgb(235, 237, 239);
-  --switch-checked-background-color: rgb(0, 96, 245);
-  --switch-knob-color: rgb(255, 255, 255);
-  --switch-checked-knob-color: rgb(255, 255, 255);
+  --switch-background-color: var(--tc-toggle-button-default);
+  --switch-checked-background-color: var(--tc-toggle-button-active-default);
+  --switch-knob-color: var(--tc-toggle-button-ellipse-default);
+  --switch-checked-knob-color: var(--tc-toggle-button-ellipse-default);
   --switch-focus-background-color: var(--switch-background-color);
-  --switch-focus-shadow: 0 0 0 0.5rem rgba(88, 99, 116, 0.12), 0 0 0 0.5rem rgba(255, 255, 255, 0.3),
-  0 0.0625rem 0.0625rem rgba(10, 11, 13, 0.16), 0 0.1875rem 0.5rem rgba(10, 11, 13, 0.15);
-  --switch-focus-checked-shadow: 0 0 0 0.5rem rgba(0, 96, 245, 0.12), 0 0 0 0.5rem rgba(255, 255, 255, 0.4),
-  0 0.25rem 0.25rem rgba(10, 11, 13, 0.25), 0 0.0625rem 0.0625rem rgba(10, 11, 13, 0.16);
-  --switch-hover-background-color: rgba(88, 99, 116, 0.08);
-  --switch-hover-checked-background-color: rgb(0, 95, 204);
-  --switch-disabled-background-color: rgb(235, 237, 239);
-  --switch-disabled-checked-background-color: rgba(0, 96, 245, 0.16);
-  --switch-disabled-knob-color: rgb(247, 247, 247);
-  --switch-disabled-checked-knob-color: rgb(247, 247, 247);
-  --switch-disabled-text-color: rgb(153, 160, 174);
+  --switch-focus-shadow: var(--tc-toggle-button-hover-shadow-centre), var(--tc-toggle-button-hover-shadow-raised);
+  --switch-focus-checked-shadow: var(--switch-focus-shadow);
+  --switch-hover-background-color: var(--tc-toggle-button-hover);
+  --switch-hover-checked-background-color: var(--tc-toggle-button-active-hover);
+  --switch-pressed-background-color: var(--switch-background-color);
+  --switch-pressed-checked-background-color: var(--switch-checked-background-color);
+  --switch-disabled-background-color: var(--tc-toggle-button-disabled);
+  --switch-disabled-checked-background-color: var(--tc-toggle-button-active-disabled);
+  --switch-disabled-knob-color: var(--tc-toggle-button-ellipse-disabled);
+  --switch-disabled-checked-knob-color: var(--tc-toggle-button-ellipse-disabled);
+  --switch-disabled-text-color: var(--tc-button-text-inverse-disabled);
   display: block;
   position: relative;
 }
 
-.switch.dark, .switch.mint {
+.switch.dark {
+  --switch-background-color: var(--tc-toggle-button-default-dark);
+  --switch-checked-background-color: var(--tc-toggle-button-active-default-dark);
+  --switch-knob-color: var(--tc-toggle-button-ellipse-default-dark);
+  --switch-checked-knob-color: var(--tc-toggle-button-ellipse-default-dark);
+  --switch-text-color: var(--tc-text-primary-dark);
+  --switch-hover-background-color: var(--tc-toggle-button-hover-dark);
+  --switch-hover-checked-background-color: var(--tc-toggle-button-active-hover-dark);
+  --switch-pressed-background-color: var(--switch-background-color);
+  --switch-pressed-checked-background-color: var(--switch-checked-background-color);
+  --switch-focus-background-color: var(--switch-background-color-dark);
+  --switch-focus-shadow: var(--tc-toggle-button-hover-shadow-centre-dark), var(--tc-toggle-button-hover-shadow-raised-dark);
+  --switch-focus-checked-shadow: var(--switch-focus-shadow);
+  --switch-disabled-background-color: var(--tc-toggle-button-disabled-dark);
+  --switch-disabled-checked-background-color: var(--tc-toggle-button-active-disabled-dark);
+  --switch-disabled-knob-color: var(--tc-toggle-button-ellipse-disabled-dark);
+  --switch-disabled-checked-knob-color: var(--tc-toggle-button-ellipse-disabled-dark);
+  --switch-disabled-text-color: var(--tc-button-text-inverse-disabled-dark);
+}
+.switch.mint {
   --switch-background-color: rgb(67, 75, 86);
-  --switch-checked-background-color: rgb(255, 255, 255);
+  --switch-checked-background-color: rgb(31, 208, 214);
   --switch-knob-color: rgb(255, 255, 255);
   --switch-checked-knob-color: rgb(10, 11, 13);
   --switch-text-color: rgb(255, 255, 255);
   --switch-hover-background-color: rgba(255, 255, 255, 0.3);
-  --switch-hover-checked-background-color: rgb(215, 219, 224);
+  --switch-hover-checked-background-color: rgb(24, 165, 170);
   --switch-focus-background-color: var(--switch-background-color);
   --switch-focus-shadow: 0 0 0 0.5rem rgba(153, 160, 174, 0.2), 0 0 0 0.5rem rgba(255, 255, 255, 0.24),
   0 0.0625rem 0.0625rem rgba(10, 11, 13, 0.16), 0 0.1875rem 0.5rem rgba(10, 11, 13, 0.15);
   --switch-focus-checked-shadow: var(--switch-focus-shadow);
   --switch-disabled-background-color: rgb(35, 40, 46);
-  --switch-disabled-checked-background-color: rgb(153, 160, 174);
-  --switch-disabled-knob-color: rgb(67, 75, 86);
-  --switch-disabled-checked-knob-color: rgb(67, 75, 86);
-  --switch-disabled-text-color: rgb(67, 75, 86);
-}
-.switch.mint {
-  --switch-checked-background-color: rgb(31, 208, 214);
-  --switch-focus-checked-shadow: 0 0 0 0.5rem rgba(26, 213, 219, 0.24),
-  0 0 0 0.5rem rgba(255, 255, 255, 0.32), 0 0.0625rem 0.0625rem rgba(10, 11, 13, 0.16),
-  0 0.1875rem 0.5rem rgba(10, 11, 13, 0.15);
-  --switch-hover-checked-background-color: rgb(24, 165, 170);
   --switch-disabled-checked-background-color: rgba(31, 208, 214, 0.32);
+  --switch-disabled-knob-color: rgb(67, 75, 86);
   --switch-disabled-checked-knob-color: rgb(10, 11, 13);
+  --switch-disabled-text-color: rgb(67, 75, 86);
 }
 .switch__container {
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
@@ -443,7 +455,7 @@
   right: 0;
   border-radius: 5.5rem;
   transition: background-color 0.15s ease;
-  background-color: transparent;
+  background-color: var(--switch-background-color);
 }
 .switch__html-input {
   opacity: 0;
@@ -453,15 +465,27 @@
 .switch__html-input:hover ~ .switch__input .switch__state {
   background-color: var(--switch-hover-background-color);
 }
+.switch__html-input:active ~ .switch__input .switch__state {
+  background-color: var(--switch-pressed-background-color);
+}
 .switch__html-input:focus ~ .switch__input::after {
   box-shadow: var(--switch-focus-shadow);
 }
-.switch__html-input:focus-visible ~ .switch__input {
+.switch__html-input:focus-visible ~ .switch__input.light {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.0625rem;
+  transition: outline 0s;
+}
+.switch__html-input:focus-visible ~ .switch__input.dark {
   outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.0625rem;
   transition: outline 0s;
 }
-.switch__html-input:checked ~ .switch__input {
+.switch__html-input:focus-visible ~ .switch__input::after {
+  --switch-focus-shadow: none;
+}
+.switch__html-input:checked ~ .switch__input .switch__state {
   background-color: var(--switch-checked-background-color);
 }
 .switch__html-input:checked ~ .switch__input::after {
@@ -471,13 +495,14 @@
 .switch__html-input:checked:hover ~ .switch__input .switch__state {
   background-color: var(--switch-hover-checked-background-color);
 }
+.switch__html-input:checked:active ~ .switch__input .switch__state {
+  background-color: var(--switch-pressed-checked-background-color);
+}
 .switch__html-input:checked:focus ~ .switch__input::after {
   box-shadow: var(--switch-focus-checked-shadow);
 }
-.switch__html-input:checked:focus-visible ~ .switch__input {
-  outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
-  transition: outline 0s;
+.switch__html-input:checked:focus-visible ~ .switch__input::after {
+  --switch-focus-checked-shadow: none;
 }
 .switch__html-input[disabled] ~ .switch__label,
 .switch__html-input[disabled] ~ .switch__input {
@@ -506,8 +531,6 @@
   height: 1.5rem;
   min-height: 1.5rem;
   border-radius: 5.5rem;
-  background-color: var(--switch-background-color);
-  transition: background-color 0.15s ease;
 }
 .switch__input::after {
   content: "";

package/dist/collection/components/basic/buttons/tet-switch/tet-switch.js

@@ -35,7 +35,7 @@ export class TetSwitch {
     }
     render() {
         const { label, name, theme, disabled, checked, accessibilityLabel } = this;
-        return (h(Host, { key: '54f2e341920d6bcd99533b723eee03a6f35927e5' }, h("div", { key: '3dc73c69e65bbef9c57406933933e5b377d16fa7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '449c3812e489af508a057966eef8ceab18233089', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", Object.assign({ key: 'a526a2071de462760e14b0399fed18e5137cfea9', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange() }, (accessibilityLabel ? { "aria-label": accessibilityLabel } : {}))), h("span", { key: '6072b9f08ad0ca968afe0882c1691d059221c19a', class: "switch__input" }, h("span", { key: 'ed0e4755fbe648cb6d0c6561e84d57b0998ab701', class: "switch__state" })), label
+        return (h(Host, { key: '54f2e341920d6bcd99533b723eee03a6f35927e5' }, h("div", { key: '3dc73c69e65bbef9c57406933933e5b377d16fa7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '449c3812e489af508a057966eef8ceab18233089', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", Object.assign({ key: 'a526a2071de462760e14b0399fed18e5137cfea9', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange() }, (accessibilityLabel ? { "aria-label": accessibilityLabel } : {}))), h("span", { key: '3ed6173e93a1a823103379115d7bcf04235ce141', class: { "switch__input": true, [this.theme]: true } }, h("span", { key: 'f715fb0a5bd2dcfac29be4799a843d2ae0cdbda9', class: "switch__state" })), label
             ? h("span", { class: "switch__label", innerHTML: label })
             : h("span", { class: "switch__label" }, h("slot", null))))));
     }

package/dist/collection/components/simple/inputs/tet-dropdown/tet-dropdown.css

@@ -355,35 +355,41 @@
   --focus-border-radius: 0.875rem;
   --option-padding: 0.5rem 0.75rem;
   --button-padding: 0.625rem 0.75rem;
-  --options-box-shadow: 0 0.0625rem 0.125rem rgba(rgb(10, 11, 13), 0.05),
-    0 0.3125rem 0.6875rem rgba(rgb(10, 11, 13), 0.12);
   --text-size: 0.875rem;
-  --text-color: rgb(10, 11, 13);
-  --border-color: rgb(153, 160, 174);
+  --text-color: var(--tc-text-primary);
+  --border-color: var(--tc-border-secondary);
   --hover-text-color: var(--text-color);
   --hover-border-color: var(--border-color);
-  --option-text-color: rgb(255, 255, 255);
-  --option-accent-color: rgb(10, 11, 13);
-  --button-background-color: rgb(255, 255, 255);
-  --dropdown-background-color: rgb(255, 255, 255);
-  --hover-button-background-color: rgba(88, 99, 116, 0.08);
-  --focus-button-background-color: rgba(88, 99, 116, 0.16);
+  --disabled-border-color: var(--tc-border-quaternary);
+  --disabled-text-color: var(--tc-button-text-inverse-disabled);
+  --disabled-icon-color: var(--tc-button-icon-inverse-disabled);
+  --disabled-label-text-color: var(--tc-text-secondary);
+  --option-text-color: var(--tc-button-text-primary);
+  --option-accent-color: var(--tc-button-text-secondary);
+  --button-background-color: var(--tc-layer-primary);
+  --dropdown-background-color: var(--tc-layer-primary);
+  --hover-button-background-color: var(--tc-button-primary-background-inverse-hover);
+  --focus-button-background-color: var(--tc-button-primary-background-inverse-pressed);
   --keyboard-focus-outline-color: var(--tc-blue-40);
   display: block;
   position: relative;
 }
 
 .dropdown.dark, .dropdown.mint {
-  --text-color: rgb(255, 255, 255);
-  --border-color: rgb(88, 99, 116);
+  --text-color: var(--tc-text-primary-dark);
+  --border-color: var(--tc-border-secondary-dark);
   --hover-text-color: var(--text-color);
   --hover-border-color: var(--border-color);
-  --option-text-color: rgb(10, 11, 13);
-  --option-accent-color: rgb(255, 255, 255);
-  --button-background-color: rgb(10, 11, 13);
-  --dropdown-background-color: rgb(22, 25, 29);
-  --hover-button-background-color: rgba(153, 160, 174, 0.12);
-  --focus-button-background-color: rgba(153, 160, 174, 0.28);
+  --disabled-border-color: var(--tc-border-quaternary-dark);
+  --disabled-text-color: var(--tc-button-text-inverse-disabled-dark);
+  --disabled-icon-color: var(--tc-button-icon-inverse-disabled-dark);
+  --disabled-label-text-color: var(--tc-text-secondary-dark);
+  --option-text-color: var(--text-color);
+  --option-accent-color: var(--text-color);
+  --button-background-color:var(--tc-layer-primary-dark);
+  --dropdown-background-color: var(--tc-layer-primary-dark);
+  --hover-button-background-color: var(--tc-button-primary-background-inverse-hover-dark);
+  --focus-button-background-color: var(--tc-button-primary-background-inverse-pressed-dark);
   --keyboard-focus-outline-color: var(--tc-blue-40-dark);
 }
 .dropdown.mint {
@@ -406,17 +412,17 @@
 }
 .dropdown__wrapper.disabled .dropdown__button {
   cursor: not-allowed;
-  background-color: rgb(247, 247, 247);
-  border-color: rgb(215, 219, 224);
+  background-color: var(--hover-button-background-color);
+  border-color: var(--disabled-border-color);
 }
 .dropdown__wrapper.disabled .dropdown__button__selected, .dropdown__wrapper.disabled .dropdown__button__labelright {
-  color: rgb(153, 160, 174) !important;
+  color: var(--disabled-text-color) !important;
 }
 .dropdown__wrapper.disabled .dropdown__button .dropdown__icon {
-  --icon-color: var(--color-grey-50);
+  --icon-color: var(--disabled-icon-color);
 }
 .dropdown__wrapper.disabled .dropdown__label {
-  color: rgb(153, 160, 174);
+  color: var(--disabled-label-text-color);
 }
 .dropdown__icon {
   --icon-color: var(--option-accent-color);
@@ -450,6 +456,9 @@
   outline-color: var(--keyboard-focus-outline-color);
   background-color: var(--button-background-color);
 }
+.dropdown__button:active {
+  background-color: var(--focus-button-background-color);
+}
 .dropdown__button__selected {
   padding-right: 0.75rem;
   text-overflow: ellipsis;
@@ -523,10 +532,10 @@
 }
 .dropdown__option__flex--subtext-container span {
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
-  color: rgb(67, 75, 86);
+  color: var(--text-color);
 }
 .dropdown__option--selected-background {
-  background: rgb(235, 237, 239);
+  background: var(--hover-button-background-color);
 }
 .dropdown__option .dropdown__icon {
   position: absolute;
@@ -556,7 +565,6 @@
   border-top: none;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   background-color: var(--dropdown-background-color);
-  box-shadow: var(--options-box-shadow);
 }
 .dropdown--open .dropdown__options-wrapper, .dropdown--open .dropdown__options {
   display: flex;