npm - genesys-spark-components - Versions diffs - 4.0.0-beta.26 → 4.0.0-beta.28 - Mend

genesys-spark-components 4.0.0-beta.26 → 4.0.0-beta.28

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

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.css CHANGED Viewed

@@ -1,67 +1,79 @@
 .gux-focus-ring-focused:focus {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-within:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-visible:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-within:focus-within {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-visible:focus-visible {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-focused:focus {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-within:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-visible:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-within:focus-within {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-visible:focus-visible {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 /* Font Definitions. */
@@ -146,42 +158,50 @@ h6 {
 /* Anchor */
 .gux-icon-anchor gux-icon {
-  padding-right: 2px;
+  padding-right: var(--gse-ui-links-inLine-padding);
 }
 a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
 }
 a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 table a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
   text-decoration: none;
 }
 table a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 table a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+table a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 table a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 /* Custom Styles */

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.css CHANGED Viewed

@@ -1,67 +1,79 @@
 .gux-focus-ring-focused:focus {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-within:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-visible:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-within:focus-within {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-visible:focus-visible {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-focused:focus {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-within:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-focused-visible:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 .gux-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-within:focus-within {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 .gux-focus-ring-small-focused-visible:focus-visible {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
+  outline-width: var(--gse-semantic-focusRing-small-border-width);
+  outline-style: var(--gse-semantic-focusRing-small-border-style);
+  outline-color: var(--gse-semantic-focusRing-small-border-color);
 }
 /* Font Definitions. */
@@ -146,42 +158,50 @@ h6 {
 /* Anchor */
 .gux-icon-anchor gux-icon {
-  padding-right: 2px;
+  padding-right: var(--gse-ui-links-inLine-padding);
 }
 a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
 }
 a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 table a {
-  color: #2a60c8;
+  color: var(--gse-ui-link-default-color);
   text-decoration: underline;
-  border-radius: 2px;
+  border-radius: var(--gse-ui-links-borderRadius);
   text-decoration: none;
 }
 table a:hover {
-  color: #2754ac;
+  color: var(--gse-ui-link-hover-color);
 }
 table a:active {
-  color: #23478f;
+  color: var(--gse-ui-link-active-color);
+}
+table a:visited {
+  color: var(--gse-ui-link-visited-color);
 }
 table a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline-width: var(--gse-semantic-focusRing-default-border-width);
+  outline-style: var(--gse-semantic-focusRing-default-border-style);
+  outline-color: var(--gse-semantic-focusRing-default-border-color);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
 /* Custom Styles */

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.css CHANGED Viewed

@@ -10,4 +10,4 @@
   cursor: pointer;
   cursor: default;
   background-color: #c8cfda;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class GuxListDivider {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list-divider.less"]
+      "$": ["gux-list-divider.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-list/gux-list-item/gux-list-item.css CHANGED Viewed

@@ -2,43 +2,55 @@
   width: 100%;
   outline: none;
 }
 :host([disabled]) {
   pointer-events: none;
 }
-:host([disabled='false']) {
+:host([disabled=false]) {
   pointer-events: auto;
 }
 ::slotted(gux-icon) {
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
+  width: var(--gse-ui-menu-option-startIcon-height);
+  height: var(--gse-ui-menu-option-startIcon-height);
+  margin-right: var(--gse-ui-menu-option-gap);
   vertical-align: middle;
 }
 button {
   all: unset;
+  font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-default-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-default-text-fontSize);
+  background-color: var(--gse-ui-menu-option-default-backgroundColor);
   box-sizing: border-box;
   width: 100%;
-  min-height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
+  min-height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   word-wrap: break-word;
   cursor: pointer;
   border: none;
   outline: none;
+  outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
 }
 button:focus-visible:not(:disabled) {
-  color: #fdfdfd;
-  background: #2a60c8;
+  outline: var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
 button:hover:not(:disabled) {
-  color: #fdfdfd;
-  background: #2754ac;
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
 }
 button:active:not(:disabled) {
-  color: #fdfdfd;
-  background: #23478f;
+  background: var(--gse-ui-menu-option-selected-backgroundColor);
+  font-family: var(--gse-ui-menu-option-label-active-text-fontFamily);
+  font-weight: var(--gse-ui-menu-option-label-active-text-fontWeight);
+  line-height: var(--gse-ui-menu-option-label-active-text-lineHeight);
+  font-size: var(--gse-ui-menu-option-label-active-text-fontSize);
 }
 button:disabled {
-  color: rgba(46, 57, 76, 0.5);
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
   cursor: default;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list-item/gux-list-item.js CHANGED Viewed

@@ -30,7 +30,7 @@ export class GuxListItem {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list-item.less"]
+      "$": ["gux-list-item.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-list/gux-list.css CHANGED Viewed

@@ -5,4 +5,4 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-}
+}

package/dist/collection/components/stable/gux-list/gux-list.js CHANGED Viewed

@@ -56,7 +56,7 @@ export class GuxList {
   static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-list.less"]
+      "$": ["gux-list.scss"]
     };
   }
   static get styleUrls() {