npm - q2-tecton-elements - Versions diffs - 1.15.0 → 1.15.1-alpha.0 - Mend

q2-tecton-elements 1.15.0 → 1.15.1-alpha.0

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 (190) hide show

package/dist/collection/components/q2-pill/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -82,6 +82,7 @@ button {
   --compt-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
   --comp-btn-padding: var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));
   --comp-btn-color: var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));
+  --comp-active-btn-color: var(--comp-btn-background);
   --comp-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));
   --comp-active-btn-border-color: var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));
   --comp-hover-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));
@@ -96,24 +97,24 @@ button {
 }
 :host([theme=primary]) .btn-wrapper {
   --comp-active-btn-background: var(--t-primary-l5, #61c4ff);
-  --comp-btn-color: var(--t-primary-text, #ffffff);
+  --comp-active-btn-color: var(--t-primary-text, #ffffff);
   --comp-active-btn-border-color: var(--t-primary-l5, #61c4ff);
   --comp-hover-active-btn-background: var(--t-primary-l3, #21acff);
   --comp-hover-active-btn-border-color: var(--t-primary-l3, #21acff);
 }
 :host([theme=secondary]) .btn-wrapper {
-  --comp-active-btn-background: var(--t-secondary-l5, #61c4ff);
-  --comp-btn-color: var(--t-secondary-text, #000000);
-  --comp-active-btn-border-color: var(--t-secondary-l5, #61c4ff);
-  --comp-hover-active-btn-background: var(--t-secondary-l3, #21acff);
-  --comp-hover-active-btn-border-color: var(--t-secondary-l3, #21acff);
+  --comp-active-btn-background: var(--t-secondary-l5, #d9e1e6);
+  --comp-active-btn-color: var(--t-secondary-text, #141414);
+  --comp-active-btn-border-color: var(--t-secondary-l5, #d9e1e6);
+  --comp-hover-active-btn-background: var(--t-secondary-l3, #c9d5db);
+  --comp-hover-active-btn-border-color: var(--t-secondary-l3, #c9d5db);
 }
 :host([theme=tertiary]) .btn-wrapper {
-  --comp-active-btn-background: var(--t-tertiary-l5, #61c4ff);
-  --comp-btn-color: var(--t-tertiary-text, #000000);
-  --comp-active-btn-border-color: var(--t-tertiary-l5, #61c4ff);
-  --comp-hover-active-btn-background: var(--t-tertiary-l3, #21acff);
-  --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #21acff);
+  --comp-active-btn-background: var(--t-tertiary-l5, #f4fafe);
+  --comp-active-btn-color: var(--t-tertiary-text, #141414);
+  --comp-active-btn-border-color: var(--t-tertiary-l5, #f4fafe);
+  --comp-hover-active-btn-background: var(--t-tertiary-l3, #eff8fd);
+  --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #eff8fd);
 }
 q2-option-list {
@@ -167,9 +168,7 @@ q2-option-list {
   background: var(--comp-hover-btn-background);
 }
 :host(:not(:empty)) .btn-primary, .has-icon .btn-primary {
-  padding-right: calc(
-            var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-size-1x, 5px))) + var(--comp-close-size)
-        );
+  padding-right: calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size));
 }
 .has-options .btn-primary {
   text-overflow: ellipsis;
@@ -180,6 +179,7 @@ q2-option-list {
 :host([active]) .btn-primary {
   background: var(--comp-active-btn-background);
   border-color: var(--comp-active-btn-border-color);
+  color: var(--comp-active-btn-color);
 }
 :host([active]) .btn-primary:focus, :host([active]) .btn-primary:hover {
   background: var(--comp-hover-active-btn-background);
@@ -202,8 +202,9 @@ q2-option-list {
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
-  stroke: var(--comp-btn-color);
-  --tct-icon-stroke-primary: var(--comp-btn-color);
+}
+:host([active]) .btn-close {
+  color: var(--comp-active-btn-color);
 }
 :host(:not(:empty)) .btn-close, .has-icon .btn-close {
   opacity: 1;

package/dist/collection/components/q2-radio/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -80,7 +80,7 @@ button {
   margin-right: 1rem;
   display: grid;
   grid-template-columns: 18px 1fr;
-  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
+  gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 .radio-container svg {
   border-radius: 50%;

package/dist/collection/components/q2-radio-group/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -65,7 +65,7 @@ button {
 }
 :host {
-  margin-top: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 fieldset {
@@ -92,7 +92,7 @@ fieldset {
 }
 .optional-tag {
-  margin-left: var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  margin-left: var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));
   color: var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
   font-size: var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));
   font-weight: var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));

package/dist/collection/components/q2-section/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -79,17 +79,17 @@ button {
   background-color: var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));
   color: var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));
   border-radius: var(--tct-section-border-radius, var(--t-section-border-radius, 3px));
-  margin: var(--tct-scale-3, var(--app-scale-3, 15px));
+  margin: var(--tct-scale-3, var(--app-scale-3x, 15px));
 }
 @media screen and (max-width: 767px) {
   :host {
-    margin: var(--tct-scale-3, var(--app-scale-3, 15px)) 0;
+    margin: var(--tct-scale-3, var(--app-scale-3x, 15px)) 0;
   }
 }
 .q2-section-wrapper {
   display: block;
-  padding: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;
 }
 .q2-section-wrapper:hover {
@@ -97,7 +97,7 @@ button {
 }
 .q2-section-header {
-  padding: 0 var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: 0 var(--tct-scale-3, var(--app-scale-3x, 15px));
   display: flex;
 }
@@ -137,7 +137,7 @@ button {
 }
 .q2-section-content {
-  padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-3, var(--app-scale-3x, 15px));
 }
 .q2-section-content:focus {