genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.31

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

@@ -1,3 +1,26 @@
+/*
+@prop --gse-ui-radioButton-icon-default-unselectedForegroundColor
+@prop --gse-ui-radioButton-icon-default-selectedForegroundColor
+@prop --gse-ui-radioButton-icon-hover-foregroundColor
+@prop --gse-ui-radioButton-icon-active-foregroundColor
+@prop --gse-ui-radioButton-icon-error-foregroundColor
+@prop --gse-ui-radioButton-icon-height
+@prop --gse-ui-radioButton-icon-width
+@prop --gse-ui-radioButton-label-foregroundColor
+@prop --gse-ui-radioButton-label-text-fontFamily
+@prop --gse-ui-radioButton-label-text-fontWeight
+@prop --gse-ui-radioButton-label-text-lineHeight
+@prop --gse-ui-radioButton-gap
+@prop --gse-ui-radioButton-helper-padding
+@prop --gse-ui-radioButton-helper-gap
+@prop --gse-ui-radioButton-disabled-opacity
+@prop --gse-ui-radioButton-focus-border-color
+@prop --gse-ui-radioButton-focus-border-width
+@prop --gse-ui-radioButton-focus-border-style
+@prop --gse-ui-radioButton-focus-borderRadius
+@prop --gse-ui-radioButton-focus-offset
+*/
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-error {
   display: none;
   flex-direction: row;
@@ -5,10 +28,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;
@@ -17,16 +41,17 @@
   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-help {
   display: none;
   flex-direction: row;
@@ -34,11 +59,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;
@@ -48,30 +73,46 @@
   align-self: none;
   order: 0;
 }
+
 :host {
   display: block;
-  color: #2e394c;
 }
+
 :host(.gux-disabled) {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--gse-ui-radioButton-disabled-opacity);
 }
 :host(.gux-disabled) ::slotted(label) {
   cursor: not-allowed;
 }
+
+:host(.gux-input-error) ::slotted(input[type=radio]:not(:checked))::before {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill='%23E22245'/%3E%3C/svg%3E");
+}
+:host(.gux-input-error) ::slotted(input[type=radio]:checked)::before {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' fill='%23E22245'/%3E%3C/svg%3E");
+}
+:host(.gux-input-error) .gux-form-field-error {
+  color: var(--gse-ui-radioButton-icon-error-foregroundColor);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+}
+
 .gux-input-label {
   display: flex;
   flex-direction: row;
+  padding-top: 4px;
 }
 .gux-input-label .gux-label {
   display: flex;
   flex-direction: column;
+  line-height: var(--gse-ui-radioButton-label-text-lineHeight);
 }
-::slotted(input[type='radio']) {
+
+::slotted(input[type=radio]) {
   display: inline-grid;
-  width: 16px;
-  height: 16px;
-  margin: 4px;
+  width: var(--gse-ui-radioButton-icon-width);
+  height: var(--gse-ui-radioButton-icon-height);
+  margin: 1px var(--gse-ui-radioButton-helper-gap) 0px 0px;
   text-align: center;
   vertical-align: middle;
   -webkit-appearance: none;
@@ -79,33 +120,48 @@
   cursor: pointer;
   border: 0;
   outline: none;
+  color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
 }
-::slotted(input[type='radio'])::before {
-  grid-area: 1;
-  content: '';
+
+::slotted(input[type=radio])::before {
+  grid-area: 1/1;
+  content: "";
   border-radius: 50%;
 }
-::slotted(input[type='radio']:focus-visible)::before {
-  outline: 3px solid #aac9ff;
+
+::slotted(input[type=radio]:focus-visible) {
+  border-radius: var(--gse-ui-radioButton-focus-borderRadius);
+  outline: var(--gse-ui-radioButton-focus-border-width) var(--gse-ui-radioButton-focus-border-style) var(--gse-ui-radioButton-focus-border-color);
   outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
 }
-::slotted(input[type='radio']:not(:checked))::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.062C5.239 3.062 3 5.273 3 8s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill-rule='evenodd' clip-rule='evenodd' fill='%2377828f'/%3E%3C/svg%3E");
+
+::slotted(input[type=radio]:not(:checked))::before {
+  background-image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' fill='%23767C8D'/%3E%3C/svg%3E";
 }
-::slotted(input[type='radio']:not(:checked):not(:disabled):hover)::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.062C5.239 3.062 3 5.273 3 8s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill-rule='evenodd' clip-rule='evenodd' fill='%232a60c8'/%3E%3C/svg%3E");
+
+::slotted(input[type=radio]:not(:checked):not(:disabled):hover)::before {
+  background-image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' fill='%233742A2'/%3E%3C/svg%3E";
 }
-::slotted(input[type='radio']:checked)::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.026 5.262a2.8 2.8 0 1 0 .001 5.601 2.8 2.8 0 0 0-.001-5.601zm0-2.2c-2.761 0-5 2.211-5 4.938s2.239 4.938 5 4.938c2.762 0 5-2.211 5-4.938s-2.238-4.938-5-4.938zm0 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z' fill='%232a60c8'/%3E%3C/svg%3E");
+
+::slotted(input[type=radio]:checked:not(:disabled):hover)::before {
+  background-image: "data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' fill='%233742A2'/%3E%3C/svg%3E";
 }
-::slotted(input[type='radio']:disabled)::before {
+
+::slotted(input[type=radio]:checked)::before {
+  background-image: "data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' fill='%234856CB'/%3E%3C/svg%3E";
+}
+
+::slotted(input[type=radio]:disabled)::before {
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: var(--gse-ui-radioButton-disabled-opacity);
 }
+
 ::slotted(label) {
   display: inline-block;
-  font-size: 12px;
-  line-height: 24px;
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  line-height: var(--gse-ui-radioButton-label-text-lineHeight);
   vertical-align: middle;
-}
+  font-weight: var(--gse-ui-radioButton-label-text-fontWeight);
+  color: var(--gse-ui-radioButton-label-foregroundColor);
+  font-family: var(--gse-ui-radioButton-label-text-fontFamily);
+}

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

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

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

@@ -1,10 +1,82 @@
-.gux-form-field-container {
-  margin: var(--gux-form-field-container-margin-top, 16px) 0 var(--gux-form-field-container-margin-bottom, 16px) 0;
+/* Tokens
+@prop $gse-ui-slider-handle-width
+@prop $gse-ui-slider-handle-height
+@prop $gse-ui-slider-handle-default-backgroundColor
+@prop $gse-ui-slider-handle-hover-backgroundColor
+@prop $gse-ui-slider-handle-active-backgroundColor
+@prop $gse-ui-slider-handle-disabled-backgroundColor
+@prop $gse-ui-slider-handle-borderRadius
+@prop $gse-ui-slider-disabled-opacity
+@prop $gse-ui-slider-label-text-fontFamily
+@prop $gse-ui-slider-label-text-fontWeight
+@prop $gse-ui-slider-label-text-lineHeight
+@prop $gse-ui-slider-label-text-fontSize
+@prop $gse-ui-slider-label-foregroundColor
+@prop $gse-ui-slider-bar-selected-backgroundColor
+@prop $gse-ui-slider-bar-default-backgroundColor
+@prop $gse-ui-slider-bar-height
+@prop $gse-ui-slider-gap
+@prop $gse-ui-slider-focusRing-borderRadius
+**/
+.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;
@@ -12,10 +84,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;
@@ -24,30 +97,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;
@@ -57,6 +130,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -64,11 +138,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;
@@ -78,26 +152,30 @@
   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[type='range']) {
+
+::slotted(input[type=range]) {
   position: absolute;
   width: 100%;
-  height: 2px;
-  margin: 6px 0;
-  margin-top: calc(-1 * (12px / 2 + 2px));
+  width: 100%;
+  height: var(--gse-ui-slider-bar-height);
+  margin: calc(var(--gse-ui-slider-handle-width) / 2) 0;
+  margin-top: calc(-1 * (var(--gse-ui-slider-handle-width) / 2 + var(--gse-ui-slider-bar-height)));
   -webkit-appearance: none;
   background: transparent;
 }
+
 .gux-input-and-error-container {
   flex-grow: 1;
 }
@@ -109,10 +187,10 @@
   align-items: center;
   justify-content: flex-start;
   height: 32px;
-  font-size: 12px;
+  font-size: var(--gse-ui-slider-label-text-fontSize);
 }
 .gux-input-and-error-container .gux-range-input-container.gux-disabled {
-  opacity: 0.5;
+  opacity: var(--gse-ui-slider-disabled-opacity);
 }
 .gux-input-and-error-container .gux-range-input-container .gux-range {
   position: relative;
@@ -120,28 +198,29 @@
   align-self: center;
   order: 0;
 }
-.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip,
-.gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip {
+.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip, .gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip {
   visibility: visible;
 }
 .gux-input-and-error-container .gux-range-input-container .gux-range .gux-track {
   width: 100%;
-  height: 2px;
+  height: var(--gse-ui-slider-bar-height);
   margin: 6px 0;
-  background-color: #8a97ad;
+  background: var(--gse-ui-slider-bar-default-backgroundColor);
 }
 .gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress {
-  height: 2px;
-  background-color: #2a60c8;
+  height: var(--gse-ui-slider-bar-height);
+  background-color: var(--gse-ui-slider-bar-selected-backgroundColor);
 }
 .gux-input-and-error-container .gux-range-input-container .gux-display {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  height: 32px;
-  margin: 0 0 0 16px;
-  line-height: 32px;
+  margin: 0 0 0 var(--gux-spacing-medium);
+  line-height: var(--gse-ui-slider-label-text-lineHeight);
+  font-weight: var(--gse-ui-slider-label-text-fontWeight);
   text-align: right;
+  font-family: var(--gse-ui-slider-label-text-fontFamily);
+  font-size: var(--gse-ui-slider-label-text-fontSize);
 }
 .gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden {
   display: none;
@@ -157,10 +236,10 @@
   display: none;
 }
 .gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 16px;
+  font-family: var(--gse-core-fontFamily-body), sans-serif;
+  font-weight: var(--gse-core-fontWeight-regular);
+  font-size: var(--gse-core-fontSize-xs);
+  line-height: var(--gse-core-lineHeight-xs);
   position: absolute;
   z-index: var(--gux-zindex-tooltip, 1);
   display: flex;
@@ -170,29 +249,28 @@
   height: 32px;
   margin-left: -20px;
   visibility: hidden;
-  background-color: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(32, 41, 55, 0.24);
+  background-color: var(--gse-ui-tooltip-light-backgroundColor);
+  border: var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);
+  border-radius: var(--gse-ui-tooltip-borderRadius);
+  box-shadow: var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);
 }
-.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::after,
-.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::before {
+.gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::after, .gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::before {
   position: absolute;
   top: 100%;
   left: 50%;
   width: 0;
   height: 0;
   pointer-events: none;
-  content: ' ';
+  content: " ";
   border: solid transparent;
 }
 .gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::after {
   margin-left: -4px;
   border-width: 4px;
-  border-top-color: #fdfdfd;
+  border-top-color: var(--gse-ui-tooltip-light-backgroundColor);
 }
 .gux-input-and-error-container .gux-range-tooltip-container .gux-range-tooltip::before {
   margin-left: -6px;
   border-width: 6px;
-  border-top-color: #b4bccb;
-}
+  border-top-color: var(--gse-ui-tooltip-light-backgroundColor);
+}

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

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