q2-tecton-elements 1.34.0 → 1.35.1

package/dist/collection/components/q2-btn/styles.css

@@ -220,18 +220,18 @@ button:disabled {
   font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
 }
 :host([color=primary]) button, :host([intent=workflow-primary]) button {
-  --comp-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg));
+  --comp-background: var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));
   --comp-hover-background: var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));
-  --comp-color: var(--tct-btn-primary-font-color, var(--app-white, #ffffff));
+  --comp-font-color: var(--tct-btn-primary-font-color, var(--app-white, #ffffff));
   --comp-box-shadow: var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-focus-box-shadow: var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-active-background: var(--tct-btn-primary-active-background, #0063a0);
   --comp-hover-outer-ring-color: var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));
-  --comp-hover-inner-ring-color: var(--tct-btn-primary-hover-inner-ring-color, var(--comp-color));
+  --comp-hover-inner-ring-color: var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));
-  --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-color));
+  --comp-focus-visible-inner-ring-color: var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
   border-radius: var(--tct-btn-primary-border-radius, var(--comp-border-radius));
   text-transform: var(--tct-btn-primary-text-transform, var(--comp-text-transform));
@@ -243,7 +243,7 @@ button:disabled {
   outline-width: var(--tct-btn-primary-outline-width, var(--comp-outline-width));
   outline-color: var(--tct-btn-primary-outline-color, var(--comp-outline-color));
   background: var(--tct-btn-primary-background, var(--comp-background));
-  color: var(--tct-btn-primary-color, var(--comp-color));
+  color: var(--tct-btn-primary-font-color, var(--comp-font-color));
   font-weight: var(--tct-btn-primary-font-weight, var(--comp-font-weight));
   text-decoration: var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
@@ -256,7 +256,7 @@ button:disabled {
   outline-width: var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -269,7 +269,7 @@ button:disabled {
   outline-width: var(--tct-btn-primary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-primary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-primary-focus-color, var(--comp-focus-color, var(--comp-color)));
+  color: var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-primary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-box-shadow);
@@ -282,7 +282,7 @@ button:disabled {
   outline-width: var(--tct-btn-primary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-primary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
-  color: var(--tct-btn-primary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));
+  color: var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-primary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
@@ -295,7 +295,7 @@ button:disabled {
   outline-width: var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -308,7 +308,7 @@ button:disabled {
   outline-width: var(--tct-btn-primary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-primary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-primary-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-primary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -321,7 +321,7 @@ button:disabled {
   outline-width: var(--tct-btn-primary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-primary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-primary-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-primary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -334,21 +334,21 @@ button:disabled {
   outline-width: var(--tct-btn-primary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-primary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));
-  color: var(--tct-btn-primary-disabled-color, var(--comp-disabled-color, var(--comp-color)));
+  color: var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-primary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([color=primary]) button ::slotted(q2-icon), :host([intent=workflow-primary]) button ::slotted(q2-icon) {
-  color: var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-color, red)));
+  --t-text: var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentColor)));
 }
 :host([color=secondary]) button, :host([intent=workflow-secondary]) button {
   --comp-background: var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));
-  --comp-hover-background: var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg));
-  --comp-color: var(--tct-btn-secondary-font-color);
+  --comp-hover-background: var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));
+  --comp-hover-font-color: var(--app-white, #ffffff);
   --comp-box-shadow: var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-focus-box-shadow: var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-hover-outer-ring-color: var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-color));
+  --comp-hover-outer-ring-color: var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));
   --comp-hover-inner-ring-color: var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
@@ -365,7 +365,7 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-outline-width, var(--comp-outline-width));
   outline-color: var(--tct-btn-secondary-outline-color, var(--comp-outline-color));
   background: var(--tct-btn-secondary-background, var(--comp-background));
-  color: var(--tct-btn-secondary-color, var(--comp-color));
+  color: var(--tct-btn-secondary-font-color, var(--comp-font-color));
   font-weight: var(--tct-btn-secondary-font-weight, var(--comp-font-weight));
   text-decoration: var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
@@ -378,7 +378,7 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -391,7 +391,7 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-secondary-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-focus-color, var(--comp-focus-color, var(--comp-color)));
+  color: var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-secondary-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-box-shadow);
@@ -404,7 +404,7 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-secondary-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));
+  color: var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-secondary-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
@@ -417,7 +417,7 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -430,7 +430,7 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-secondary-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-secondary-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -443,7 +443,7 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-secondary-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-secondary-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -456,25 +456,25 @@ button:disabled {
   outline-width: var(--tct-btn-secondary-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-secondary-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));
-  color: var(--tct-btn-secondary-disabled-color, var(--comp-disabled-color, var(--comp-color)));
+  color: var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-secondary-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([color=secondary]) button ::slotted(q2-icon), :host([intent=workflow-secondary]) button ::slotted(q2-icon) {
-  color: var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-color, red)));
+  --t-text: var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentColor)));
 }
 :host([intent=workflow-destroy]) button {
   --comp-background: var(--tct-btn-destroy-background, var(--const-stoplight-alert, #c30000));
-  --comp-color: var(--tct-btn-destroy-font-color, var(--app-white));
+  --comp-font-color: var(--tct-btn-destroy-font-color, var(--app-white));
   --comp-box-shadow: var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-focus-box-shadow: var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-hover-outer-ring-color: var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));
-  --comp-hover-inner-ring-color: var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-color));
+  --comp-hover-inner-ring-color: var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
   --comp-focus-visible-outer-ring-color: var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));
-  --comp-focus-visible-inner-ring-color: var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-color));
+  --comp-focus-visible-inner-ring-color: var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));
   --comp-focus-visible-box-shadow: 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color);
   border-radius: var(--tct-btn-destroy-border-radius, var(--comp-border-radius));
   text-transform: var(--tct-btn-destroy-text-transform, var(--comp-text-transform));
@@ -486,7 +486,7 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-outline-width, var(--comp-outline-width));
   outline-color: var(--tct-btn-destroy-outline-color, var(--comp-outline-color));
   background: var(--tct-btn-destroy-background, var(--comp-background));
-  color: var(--tct-btn-destroy-color, var(--comp-color));
+  color: var(--tct-btn-destroy-font-color, var(--comp-font-color));
   font-weight: var(--tct-btn-destroy-font-weight, var(--comp-font-weight));
   text-decoration: var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
@@ -499,7 +499,7 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -512,7 +512,7 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-destroy-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-focus-color, var(--comp-focus-color, var(--comp-color)));
+  color: var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-destroy-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-box-shadow);
@@ -525,7 +525,7 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-destroy-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));
+  color: var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-destroy-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
@@ -538,7 +538,7 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -551,7 +551,7 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-destroy-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-destroy-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -564,7 +564,7 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-destroy-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-destroy-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -577,24 +577,24 @@ button:disabled {
   outline-width: var(--tct-btn-destroy-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-destroy-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));
-  color: var(--tct-btn-destroy-disabled-color, var(--comp-disabled-color, var(--comp-color)));
+  color: var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-destroy-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([intent=workflow-destroy]) button ::slotted(q2-icon) {
-  color: var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-color, red)));
+  --t-text: var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentColor)));
 }
 :host([intent=workflow-escape]) button {
   --comp-background: var(--tct-btn-escape-background, var(--app-white, #ffffff));
-  --comp-color: var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));
+  --comp-font-color: var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-box-shadow: var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-hover-box-shadow: var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-focus-box-shadow: var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-hover-background: var(--tct-btn-escape-hover-background, var(--comp-background-alternative));
   --comp-active-background: var(--tct-btn-escape-active-background, var(--comp-background-alternative));
   --comp-focus-background: var(--tct-btn-escape-focus-background, var(--comp-background-alternative));
-  --comp-hover-outer-ring-color: var(--tct-btn-escape-hover-outer-ring-color, var(--comp-color));
+  --comp-hover-outer-ring-color: var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));
   --comp-hover-inner-ring-color: var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
@@ -611,7 +611,7 @@ button:disabled {
   outline-width: var(--tct-btn-escape-outline-width, var(--comp-outline-width));
   outline-color: var(--tct-btn-escape-outline-color, var(--comp-outline-color));
   background: var(--tct-btn-escape-background, var(--comp-background));
-  color: var(--tct-btn-escape-color, var(--comp-color));
+  color: var(--tct-btn-escape-font-color, var(--comp-font-color));
   font-weight: var(--tct-btn-escape-font-weight, var(--comp-font-weight));
   text-decoration: var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
@@ -624,7 +624,7 @@ button:disabled {
   outline-width: var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -637,7 +637,7 @@ button:disabled {
   outline-width: var(--tct-btn-escape-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-escape-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-escape-focus-color, var(--comp-focus-color, var(--comp-color)));
+  color: var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-escape-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-box-shadow);
@@ -650,7 +650,7 @@ button:disabled {
   outline-width: var(--tct-btn-escape-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-escape-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
-  color: var(--tct-btn-escape-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));
+  color: var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-escape-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
@@ -663,7 +663,7 @@ button:disabled {
   outline-width: var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -676,7 +676,7 @@ button:disabled {
   outline-width: var(--tct-btn-escape-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-escape-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-escape-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-escape-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -689,7 +689,7 @@ button:disabled {
   outline-width: var(--tct-btn-escape-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-escape-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-escape-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-escape-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -702,23 +702,23 @@ button:disabled {
   outline-width: var(--tct-btn-escape-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-escape-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));
-  color: var(--tct-btn-escape-disabled-color, var(--comp-disabled-color, var(--comp-color)));
+  color: var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-escape-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([intent=workflow-escape]) button ::slotted(q2-icon) {
-  color: var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-color, red)));
+  --t-text: var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentColor)));
 }
 :host([intent=neutral]) button {
   --comp-background: var(--tct-btn-neutral-background, var(--app-white, #ffffff));
-  --comp-color: var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));
+  --comp-font-color: var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-box-shadow: var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-focus-box-shadow: var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));
   --comp-border-width: 1px;
   --comp-border-style: solid;
-  --comp-border-color: var(--comp-color);
-  --comp-hover-outer-ring-color: var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-color));
+  --comp-border-color: var(--comp-font-color);
+  --comp-hover-outer-ring-color: var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));
   --comp-hover-inner-ring-color: var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
@@ -735,7 +735,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-outline-width, var(--comp-outline-width));
   outline-color: var(--tct-btn-neutral-outline-color, var(--comp-outline-color));
   background: var(--tct-btn-neutral-background, var(--comp-background));
-  color: var(--tct-btn-neutral-color, var(--comp-color));
+  color: var(--tct-btn-neutral-font-color, var(--comp-font-color));
   font-weight: var(--tct-btn-neutral-font-weight, var(--comp-font-weight));
   text-decoration: var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
@@ -748,7 +748,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -761,7 +761,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-focus-color, var(--comp-focus-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-box-shadow);
@@ -774,7 +774,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
@@ -787,7 +787,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -800,7 +800,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -813,7 +813,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -826,21 +826,21 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-disabled-color, var(--comp-disabled-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([intent=neutral]) button ::slotted(q2-icon) {
-  color: var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-color, red)));
+  --t-text: var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentColor)));
 }
 :host([intent=neutral-text]) button {
   --comp-background: var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));
-  --comp-color: var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg)));
+  --comp-font-color: var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));
   --comp-box-shadow: var(--tct-btn-neutral-text-box-shadow);
   --comp-hover-text-decoration: underline;
   --comp-focus-background: var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));
-  --comp-hover-outer-ring-color: var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-color));
+  --comp-hover-outer-ring-color: var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));
   --comp-hover-inner-ring-color: var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));
   --comp-hover-box-shadow: 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color);
   --comp-active-box-shadow: var(--comp-box-shadow);
@@ -857,7 +857,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-outline-width, var(--comp-outline-width));
   outline-color: var(--tct-btn-neutral-text-outline-color, var(--comp-outline-color));
   background: var(--tct-btn-neutral-text-background, var(--comp-background));
-  color: var(--tct-btn-neutral-text-color, var(--comp-color));
+  color: var(--tct-btn-neutral-text-font-color, var(--comp-font-color));
   font-weight: var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));
   text-decoration: var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));
   box-shadow: var(--comp-box-shadow);
@@ -870,7 +870,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -883,7 +883,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-focus-outline-width, var(--comp-focus-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-text-focus-outline-color, var(--comp-focus-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-focus-color, var(--comp-focus-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-text-focus-font-weight, var(--comp-focus-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-box-shadow);
@@ -896,7 +896,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-focus-visible-outline-width, var(--comp-focus-visible-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-text-focus-visible-outline-color, var(--comp-focus-visible-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-focus-visible-color, var(--comp-focus-visible-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-text-focus-visible-font-weight, var(--comp-focus-visible-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-focus-visible-box-shadow);
@@ -909,7 +909,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -922,7 +922,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-hover-outline-width, var(--comp-hover-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-text-hover-outline-color, var(--comp-hover-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-hover-color, var(--comp-hover-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-text-hover-font-weight, var(--comp-hover-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-hover-box-shadow);
@@ -935,7 +935,7 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-active-outline-width, var(--comp-active-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-text-active-outline-color, var(--comp-active-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-active-color, var(--comp-active-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-text-active-font-weight, var(--comp-active-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-active-box-shadow);
@@ -948,13 +948,13 @@ button:disabled {
   outline-width: var(--tct-btn-neutral-text-disabled-outline-width, var(--comp-disabled-outline-width, var(--comp-outline-width)));
   outline-color: var(--tct-btn-neutral-text-disabled-outline-color, var(--comp-disabled-outline-color, var(--comp-outline-color)));
   background: var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));
-  color: var(--tct-btn-neutral-text-disabled-color, var(--comp-disabled-color, var(--comp-color)));
+  color: var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));
   font-weight: var(--tct-btn-neutral-text-disabled-font-weight, var(--comp-disabled-font-weight, var(--comp-font-weight)));
   text-decoration: var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));
   box-shadow: var(--comp-disabled-box-shadow);
 }
 :host([intent=neutral-text]) button ::slotted(q2-icon) {
-  color: var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-color, red)));
+  --t-text: var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentColor)));
 }
 :host([color=primary][loading]) button, :host([intent=workflow-primary][loading]) button {
   --comp-background: var(--tct-btn-primary-loading-background, #0063a0);

package/dist/collection/components/q2-calendar/helpers.js

@@ -148,8 +148,8 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     const monthName = getMonths()[inputDate.getMonth()];
     if (input.length === 10) {
       isValid = true;
-      messageType = 'success';
-      message = `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`;
+      messageType = null;
+      message = null;
     }
     isAvailable = validDays.includes(inputDate.getDay());
     const isoString = formatDateISO(inputDate);
@@ -185,9 +185,15 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     calendarPosition,
   };
 }
-function buildInputDate(input, assume) {
+export function buildInputDate(input, assume) {
   const now = new Date();
-  const [month, day, year] = input.split('/');
+  /* tslint:disable:prefer-const */
+  let [month, day, year] = input.split('/');
+  /* tslint:enable:prefer-const */
+  if (month === '0')
+    month = '01';
+  if (day === '0')
+    day = '01';
   if (input.length === 10) {
     return new Date(input);
   }
@@ -196,9 +202,6 @@ function buildInputDate(input, assume) {
     const fourDigitYear = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
     return new Date(`${month}/${twoDigitDay}/${fourDigitYear}`);
   }
-  else if (month && day && Number(day) === 0) {
-    return new Date(''); // invalid date: 09/0/2021
-  }
   else if (month) {
     return new Date(`${month}/01/${now.getFullYear()}`);
   }