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

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

@@ -1,187 +1,90 @@
 .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. */
-/* From: https://google-webfonts-helper.herokuapp.com */
-/* roboto-300 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 300;
-  src: url("./fonts/roboto-v20-latin-300.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Light"), local("Roboto-Light"), url("./fonts/roboto-v20-latin-300.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-300.woff2") format("woff2"), url("./fonts/roboto-v20-latin-300.woff") format("woff"), url("./fonts/roboto-v20-latin-300.ttf") format("truetype"), url("./fonts/roboto-v20-latin-300.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-regular - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-regular.eot"); /* IE9 Compat Modes */
-  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-regular.woff") format("woff"), url("./fonts/roboto-v20-latin-regular.ttf") format("truetype"), url("./fonts/roboto-v20-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-italic - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: italic;
-  font-weight: 400;
-  src: url("./fonts/roboto-v20-latin-italic.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Italic"), local("Roboto-Italic"), url("./fonts/roboto-v20-latin-italic.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-italic.woff2") format("woff2"), url("./fonts/roboto-v20-latin-italic.woff") format("woff"), url("./fonts/roboto-v20-latin-italic.ttf") format("truetype"), url("./fonts/roboto-v20-latin-italic.svg#Roboto") format("svg"); /* Legacy iOS */
-}
-/* roboto-700 - latin */
-@font-face {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 700;
-  src: url("./fonts/roboto-v20-latin-700.eot"); /* IE9 Compat Modes */
-  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("./fonts/roboto-v20-latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-700.woff") format("woff"), url("./fonts/roboto-v20-latin-700.ttf") format("truetype"), url("./fonts/roboto-v20-latin-700.svg#Roboto") format("svg"); /* Legacy iOS */
-}
 /*
  * Typography styles and mixins.
  */
 /* Helpers */
 /* Base typography */
-body {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-}
-
 /* Headings */
-h1 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-}
-
-h2 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 18px;
-  line-height: 24px;
-}
-
-h3 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-h4,
-h5,
-h6 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-
 /* Anchor */
 .gux-icon-anchor gux-icon {
-  padding-right: 2px;
-}
-
-a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-}
-a:hover {
-  color: #2754ac;
-}
-a:active {
-  color: #23478f;
-}
-a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-
-table a {
-  color: #2a60c8;
-  text-decoration: underline;
-  border-radius: 2px;
-  text-decoration: none;
-}
-table a:hover {
-  color: #2754ac;
-}
-table a:active {
-  color: #23478f;
-}
-table a:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  padding-right: var(--gse-ui-links-inLine-padding);
 }
 
 /* Custom Styles */

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

@@ -83,7 +83,7 @@
   order: 0;
 }
 ::slotted(label) {
-  font-family: Roboto, sans-serif;
+  font-family: sans-serif;
   font-weight: 400;
   font-weight: 700;
   font-size: 12px;

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

@@ -34,6 +34,7 @@ button {
   cursor: pointer;
   border: none;
   outline: none;
+  outline-offset: calc(var(--gse-ui-menu-option-focus-border-width) * -1);
 }
 button:focus-visible:not(:disabled) {
   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);

package/dist/collection/components/stable/gux-listbox/gux-listbox.css

@@ -28,17 +28,10 @@
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;
-  height: 32px;
+  height: var(--gse-ui-menu-option-height);
   font-family: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);
   font-weight: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);
   line-height: var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);
   font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
   color: var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor);
-}
-.gux-message-container .gux-no-matches .gux-no-matches-header {
-  font-family: var(--gse-ui-dropdown-menu-emptyState-header-text-fontFamily);
-  font-weight: var(--gse-ui-dropdown-menu-emptyState-header-text-fontWeight);
-  line-height: var(--gse-ui-dropdown-menu-emptyState-header-text-lineHeight);
-  font-size: var(--gse-ui-dropdown-menu-emptyState-header-text-fontSize);
-  color: var(--gse-ui-dropdown-menu-emptyState-header-foregroundColor);
 }

package/dist/collection/components/stable/gux-listbox/gux-listbox.js

@@ -144,10 +144,7 @@ export class GuxListbox {
   }
   renderAllListboxOptionsFiltered() {
     return [
-      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || [
-        h("div", { class: "gux-no-matches-header" }, this.i18n('noMatchesHeader')),
-        h("div", null, this.i18n('noMatchesMessage'))
-      ])),
+      h("div", { class: "gux-message-container" }, h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
       this.renderHiddenSlot()
     ];
   }

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.css

@@ -1,41 +1,48 @@
-gux-create-option {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
+:host {
+  min-height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  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);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
   box-sizing: border-box;
   display: flex;
-  min-height: 32px;
-  padding: 6px 12px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
   word-wrap: break-word;
   cursor: pointer;
 }
-gux-create-option.gux-disabled {
+:host:host(.gux-disabled) {
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
 }
-gux-create-option.gux-active,
-gux-create-option.gux-hovered:not([disabled]) {
-  color: #fdfdfd;
-  background: #2a60c8;
+:host:host(.gux-active) {
+  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);
 }
-gux-create-option.gux-filtered {
+:host:host(.gux-hovered:not([disabled])) {
+  background: var(--gse-ui-menu-option-hover-backgroundColor);
+}
+:host:host(.gux-filtered) {
   display: none;
 }
-gux-create-option gux-icon {
-  width: 16px;
-  height: 100%;
-  padding-right: 10px;
+:host gux-icon {
+  width: var(--gse-ui-menu-option-startIcon-width);
+  height: var(--gse-ui-menu-option-startIcon-height);
+  padding-right: var(--gse-ui-menu-option-gap);
 }
-gux-create-option .gux-option {
+:host .gux-option {
   display: inline-flex;
 }
-gux-create-option .gux-screenreader {
+:host .gux-screenreader {
   position: absolute;
   top: auto;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

package/dist/collection/components/stable/gux-listbox-multi/gux-create-option/gux-create-option.js

@@ -40,9 +40,10 @@ export class GuxCreateOption {
     })), this.renderCustomOptionInstructions())));
   }
   static get is() { return "gux-create-option"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-create-option.less"]
+      "$": ["gux-create-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.css

@@ -2,20 +2,21 @@
   box-sizing: border-box;
   display: block;
   max-height: 20rem;
-  padding: 8px 0;
-  margin: 0;
+  padding: var(--gse-ui-menu-padding);
   overflow-y: auto;
-  color: #2e394c;
-  background: #fdfdfd;
-  border: 1px solid #b4bccb;
-  border-radius: 4px;
+  background: var(--gse-ui-menu-backgroundColor);
+  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  border-radius: var(--gse-ui-menu-borderRadius);
   outline: none;
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
+  scrollbar-color: var(--gse-ui-menu-scrollbar-foregroundColor);
 }
+
 :host(:focus-visible) {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
+  outline: var(--gse-semantic-focusRing-width) solid var(--gse-semantic-color-focus);
+  outline-offset: var(--gse-semantic-focusRing-offset);
 }
+
 .gux-message-container {
   display: flex;
   flex-direction: column;
@@ -26,7 +27,10 @@
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;
-  height: 32px;
-  padding: 8px 16px;
-  color: #2e394c;
-}
+  height: var(--gse-ui-menu-option-height);
+  font-family: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);
+  font-weight: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);
+  line-height: var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);
+  font-size: var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);
+  color: var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor);
+}

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.js

@@ -1,10 +1,10 @@
 import { h, Host } from '@stencil/core';
 import { actOnActiveOption, clearActiveOptions, goToOption, hasPreviousOption, hasNextOption, onClickedOption, setFirstOptionActive, setInitialActiveOption, setLastOptionActive, setNextOptionActive, setPreviousOptionActive } from '../gux-listbox/gux-listbox.service';
 import { buildI18nForComponent } from '../../../i18n';
-import { whenEventIsFrom } from '../../../utils/dom/when-event-is-from';
-import simulateNativeEvent from '../../../utils/dom/simulate-native-event';
+import { whenEventIsFrom } from '@utils/dom/when-event-is-from';
+import simulateNativeEvent from '@utils/dom/simulate-native-event';
 import { trackComponent } from '@utils/tracking/usage';
-import { afterNextRender } from '../../../utils/dom/after-next-render';
+import { afterNextRender } from '@utils/dom/after-next-render';
 import translationResources from './i18n/en.json';
 /**
  * @slot - collection of gux-option-multi elements
@@ -118,9 +118,9 @@ export class GuxListboxMulti {
     let hasExactMatch = false;
     this.hasExactMatch = false;
     this.listboxOptions.forEach(listboxOption => {
-      var _a, _b, _c;
-      if (((_c = (_b = (_a = listboxOption
-        .querySelector('[gux-slot-container]')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === null || _c === void 0 ? void 0 : _c.trim()) == this.textInput.toLowerCase().trim()) {
+      var _a, _b;
+      if (((_b = (_a = listboxOption.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) ==
+        this.textInput.toLowerCase().trim()) {
         hasExactMatch = true;
         this.hasExactMatch = true;
       }
@@ -223,7 +223,7 @@ export class GuxListboxMulti {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-listbox-multi.less"]
+      "$": ["gux-listbox-multi.scss"]
     };
   }
   static get styleUrls() {
@@ -313,7 +313,7 @@ export class GuxListboxMulti {
           "references": {
             "GuxFilterTypes": {
               "location": "import",
-              "path": "../../stable/gux-dropdown/gux-dropdown.types"
+              "path": "../gux-dropdown/gux-dropdown.types"
             }
           }
         },

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.css

@@ -1,53 +1,67 @@
-gux-option-multi {
+:host {
   box-sizing: border-box;
   display: flex;
-  min-height: 32px;
-  padding: 6px 12px;
-  color: #2e394c;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: center;
+  min-height: var(--gse-ui-menu-option-height);
+  padding: var(--gse-ui-menu-option-padding);
+  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);
+  color: var(--gse-ui-menu-option-label-foregroundColor);
+  gap: var(--gse-ui-menu-option-gap);
   word-wrap: break-word;
   cursor: pointer;
 }
-gux-option-multi .gux-checkbox-container::before {
+:host .gux-checkbox-container {
   position: relative;
-  top: 2px;
   display: inline-block;
-  width: 13px;
-  height: 13px;
-  margin-right: 7px;
-  content: '';
-  background-color: white;
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='%23596373' /%3E%3C/svg%3E");
-  border-radius: 30%;
-}
-gux-option-multi.gux-disabled {
+  width: var(--gse-ui-menu-option-startIcon-width);
+  height: var(--gse-ui-menu-option-startIcon-height);
+  content: "";
+}
+:host .gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-unchecked-default-foregroundColor);
+}
+:host:host(.gux-disabled) {
+  opacity: var(--gse-ui-menu-option-disabled-opacity);
   pointer-events: none;
   cursor: default;
-  opacity: 0.5;
 }
-gux-option-multi.gux-selected .gux-checkbox-container::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E");
+:host:host(.gux-selected) {
+  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);
+  background-color: var(--gse-ui-menu-option-selected-backgroundColor);
+}
+:host:host(.gux-selected) .gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-checked-default-foregroundColor);
 }
-gux-option-multi.gux-active,
-gux-option-multi.gux-hovered:not([disabled]) {
-  color: #fdfdfd;
-  background: #2a60c8;
+:host:host(.gux-active) {
+  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);
 }
-gux-option-multi.gux-active.gux-selected .gux-checkbox-container::before,
-gux-option-multi.gux-hovered:not([disabled]).gux-selected .gux-checkbox-container::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E");
+:host:host(.gux-hovered:not([disabled])) {
+  background-color: var(--gse-ui-menu-option-hover-backgroundColor);
 }
-gux-option-multi.gux-active:not(.gux-selected) .gux-checkbox-container::before,
-gux-option-multi.gux-hovered:not([disabled]):not(.gux-selected) .gux-checkbox-container::before {
-  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='none' /%3E%3C/svg%3E");
+:host:host(.gux-hovered:not([disabled])):host(.gux-selected) .gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-checked-hover-foregroundColor);
 }
-gux-option-multi.gux-filtered {
+:host:host(.gux-hovered:not([disabled])):host(:not(.gux-selected)) .gux-checkbox-container > path {
+  fill: var(--gse-ui-menu-option-checkbox-unchecked-hover-foregroundColor);
+}
+:host:host(.gux-filtered) {
   display: none;
 }
-gux-option-multi .gux-screenreader {
+:host .gux-screenreader {
   position: absolute;
   top: auto;
   left: -10000px;
   width: 1px;
   height: 1px;
   overflow: hidden;
-}
+}

package/dist/collection/components/stable/gux-listbox-multi/gux-option-multi/gux-option-multi.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { randomHTMLId } from '../../../../utils/dom/random-html-id';
+import { randomHTMLId } from '@utils/dom/random-html-id';
 import { buildI18nForComponent } from '../../../../i18n';
 import translationResources from './i18n/en.json';
 /**
@@ -42,6 +42,12 @@ export class GuxOptionMulti {
       this.internalselectcustomoption.emit(this.value);
     }
   }
+  // SVGs must be in DOM for tokenization to work
+  renderSVGCheckbox() {
+    return this.selected
+      ? (h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z" })))
+      : (h("svg", { class: "gux-checkbox-container", xmlns: "http://www.w3.org/2000/svg", viewBox: "1 1 13 13" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z" })));
+  }
   renderCustomOptionInstructions() {
     if (this.custom) {
       return (h("span", { class: "gux-screenreader" }, this.i18n('removeCustomElementInstructions')));
@@ -54,12 +60,13 @@ export class GuxOptionMulti {
         'gux-filtered': this.filtered,
         'gux-hovered': this.hovered,
         'gux-selected': this.selected
-      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, h("span", { class: "gux-checkbox-container" }), h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, h("slot", null)), this.renderCustomOptionInstructions()));
+      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, this.renderSVGCheckbox(), h("gux-truncate", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, h("slot", null)), this.renderCustomOptionInstructions()));
   }
   static get is() { return "gux-option-multi"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-option-multi.less"]
+      "$": ["gux-option-multi.scss"]
     };
   }
   static get styleUrls() {