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

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.css

@@ -1,7 +1,101 @@
+.gux-focus-ring-focused:focus {
+  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-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-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-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-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-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-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-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-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-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-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-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);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-container.gux-beside {
   display: flex;
   flex-direction: row;
 }
+
 .gux-form-field-error {
   display: none;
   flex-direction: row;
@@ -9,10 +103,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  line-height: 20px;
-  color: #2e394c;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error.gux-show {
   display: flex;
@@ -21,30 +116,30 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  min-width: 16px;
-  min-height: 16px;
-  margin: 2px 4px 0 0;
-  color: #ea0b0b;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-helper-gap);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
+
 .gux-form-field-label.gux-required::after {
-  font-size: 12px;
-  color: #ea0b0b;
-  content: ' *';
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
 }
 .gux-form-field-label.gux-beside {
   position: relative;
   top: 8px;
   width: fit-content;
   min-width: 45px;
-  margin-right: 8px;
+  margin-right: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-label.gux-above {
-  margin-bottom: 8px;
+  padding: var(--gse-ui-formControl-label-padding);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -54,6 +149,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -61,11 +157,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #6b7585;
+  padding: var(--gse-ui-formControl-helper-padding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
 }
 .gux-form-field-help.gux-show {
   display: flex;
@@ -75,34 +171,36 @@
   align-self: none;
   order: 0;
 }
+
 :host {
   display: block;
-  color: #2e394c;
 }
+
 ::slotted(label) {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 16px;
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  color: var(--gse-ui-formControl-label-labelColor);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
 }
+
 ::slotted(input) {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
   width: 100%;
   overflow: hidden;
-  font-size: 12px;
-  color: #2e394c;
+  font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   text-overflow: ellipsis;
-  background-color: #f6f7f9;
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
   outline: none;
 }
 ::slotted(input)::placeholder {
-  color: #596373;
+  color: var(--gse-ui-formControl-input-placeholderColor);
   opacity: 1;
 }
+
 .gux-input-and-error-container {
   flex-grow: 1;
 }
@@ -123,37 +221,37 @@
   align-items: center;
   align-self: auto;
   justify-content: center;
+  gap: var(--gse-ui-formControl-input-gap);
   order: 0;
   width: 100%;
-  height: 32px;
-  padding: 4px 8px;
-  font-size: 12px;
-  line-height: 1.6667;
-  color: #2e394c;
-  background-color: #f6f7f9;
+  height: var(--gse-ui-formControl-input-textfield-height);
+  color: var(--gse-ui-formControl-input-populatedColor);
+  padding: var(--gse-ui-formControl-input-padding);
+  font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
+  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  font-size: var(--gse-ui-formControl-input-contentText-fontSize);
+  font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
-  border: 1px solid #6b7585;
-  border-radius: 4px;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
-  opacity: 0.5;
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
-.gux-input-and-error-container .gux-input .gux-input-container gux-icon[icon-name='search'] {
+.gux-input-and-error-container .gux-input .gux-input-container gux-icon[icon-name=search] {
   flex: 0 0 auto;
   align-self: auto;
   order: 0;
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-  color: #596373;
+  width: var(--gse-ui-formControl-input-inputIcon-size);
+  height: var(--gse-ui-formControl-input-inputIcon-size);
+  color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border-color: #2a60c8;
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
-  border-color: #ea0b0b;
-}
+  border-color: var(--gse-ui-formControl-input-error-border-color);
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.js

@@ -102,7 +102,7 @@ export class GuxFormFieldSearch {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-form-field-search.less"]
+      "$": ["gux-form-field-search.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.css

@@ -1,7 +1,62 @@
+.gux-focus-ring-focused:focus {
+  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-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-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-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-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-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);
+}
+
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+.gux-icon-anchor gux-icon {
+  padding-right: var(--gse-ui-links-inLine-padding);
+}
+
+/* Custom Styles */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-container.gux-beside {
   display: flex;
   flex-direction: row;
 }
+
 .gux-form-field-error {
   display: none;
   flex-direction: row;
@@ -9,10 +64,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  line-height: 20px;
-  color: #2e394c;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error.gux-show {
   display: flex;
@@ -21,30 +77,30 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  min-width: 16px;
-  min-height: 16px;
-  margin: 2px 4px 0 0;
-  color: #ea0b0b;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-helper-gap);
+  color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
 }
+
 .gux-form-field-label.gux-required::after {
-  font-size: 12px;
-  color: #ea0b0b;
-  content: ' *';
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
 }
 .gux-form-field-label.gux-beside {
   position: relative;
   top: 8px;
   width: fit-content;
   min-width: 45px;
-  margin-right: 8px;
+  margin-right: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-label.gux-above {
-  margin-bottom: 8px;
+  padding: var(--gse-ui-formControl-label-padding);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -54,6 +110,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -61,11 +118,11 @@
   align-content: stretch;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 4px 0;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-  color: #6b7585;
+  padding: var(--gse-ui-formControl-helper-padding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
 }
 .gux-form-field-help.gux-show {
   display: flex;
@@ -75,39 +132,39 @@
   align-self: none;
   order: 0;
 }
+
 :host {
   display: block;
-  color: #2e394c;
 }
+
 ::slotted(label) {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 12px;
-  line-height: 16px;
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  color: var(--gse-ui-formControl-label-labelColor);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
 }
+
 ::slotted(select) {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
   width: 100%;
-  height: 30px;
-  padding: 0 32px 0 12px;
-  margin: 0;
-  color: #2e394c;
+  margin-left: var(--gse-ui-formControl-input-gap);
+  color: var(--gse-ui-formControl-input-populatedColor);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  background-color: #f6f7f9;
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
   outline: none;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
 ::slotted(select)::placeholder {
-  color: #596373;
+  color: var(--gse-ui-formControl-input-placeholderColor);
   opacity: 1;
 }
+
 .gux-input-and-error-container {
   flex-grow: 1;
 }
@@ -120,55 +177,37 @@
   align-content: stretch;
   align-items: center;
   justify-content: center;
+  gap: var(--gse-ui-formControl-input-gap);
   width: 100%;
-  font-family: inherit;
-  font-size: 12px;
-  line-height: 1.6667;
-  color: #2e394c;
-  background-color: #f6f7f9;
+  height: var(--gse-ui-formControl-input-textfield-height);
+  font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
+  line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  font-size: var(--gse-ui-formControl-input-contentText-fontSize);
+  font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
+  color: var(--gse-ui-formControl-input-populatedColor);
+  background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
-  border: 1px solid #6b7585;
-  border-radius: 4px;
+  border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:hover gux-icon {
-  color: #2a60c8;
-}
-.gux-input-and-error-container .gux-input .gux-input-container select {
-  flex: 1 1 auto;
-  align-self: auto;
-  order: 0;
-  height: 32px;
-  padding: 0 32px 0 12px;
-  margin: 0;
-  color: #2e394c;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: #f6f7f9;
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+  color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
 }
 .gux-input-and-error-container .gux-input .gux-input-container gux-icon {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  margin: 8px;
+  width: var(--gse-ui-formControl-input-inputIcon-size);
+  height: var(--gse-ui-formControl-input-inputIcon-size);
+  margin-right: var(--gse-ui-formControl-input-gap);
   pointer-events: none;
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border-color: #2a60c8;
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
-  border-color: #ea0b0b;
-}
+  border-color: var(--gse-ui-formControl-input-error-border-color);
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.js

@@ -89,7 +89,7 @@ export class GuxFormFieldSelect {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-form-field-select.less"]
+      "$": ["gux-form-field-select.scss"]
     };
   }
   static get styleUrls() {