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

package/dist/cjs/{usage-fcdc9156.js → usage-5e9eafc4.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const name = "genesys-spark-components";
-const version = "4.0.0-beta.26";
+const version = "4.0.0-beta.28";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

package/dist/collection/collection-manifest.json

@@ -14,31 +14,24 @@
     "./components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js",
     "./components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js",
     "./components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js",
-    "./components/beta/gux-pagination-beta/gux-pagination-beta.js",
-    "./components/beta/gux-pagination-beta/gux-pagination-buttons-beta/gux-pagination-buttons-beta.js",
-    "./components/beta/gux-pagination-beta/gux-pagination-buttons-beta/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js",
-    "./components/beta/gux-pagination-beta/gux-pagination-item-counts-beta/gux-pagination-item-counts-beta.js",
-    "./components/beta/gux-pagination-beta/gux-pagination-items-per-page-beta/gux-pagination-items-per-page-beta.js",
     "./components/beta/gux-phone-input/gux-phone-input.js",
     "./components/beta/gux-phone-input/components/gux-region-icon/gux-region-icon.js",
     "./components/beta/gux-screen-reader/gux-screen-reader.js",
-    "./components/beta/gux-tab-panel-beta/gux-tab-panel-beta.js",
-    "./components/beta/gux-tag/gux-tag.js",
     "./components/beta/gux-time/gux-time.js",
     "./components/beta/gux-time-zone-picker/gux-time-zone-picker.js",
     "./components/legacy/gux-action-toast-legacy/gux-action-toast.js",
+    "./components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.js",
+    "./components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js",
     "./components/legacy/gux-disclosure-button-legacy/gux-disclosure-button.js",
     "./components/legacy/gux-notification-toast-legacy/gux-notification-toast.js",
     "./components/legacy/gux-pagination-legacy/gux-pagination.js",
-    "./components/legacy/gux-pagination-legacy/gux-pagination-buttons/gux-pagination-buttons.js",
-    "./components/legacy/gux-pagination-legacy/gux-pagination-item-counts/gux-pagination-item-counts.js",
-    "./components/legacy/gux-pagination-legacy/gux-pagination-items-per-page/gux-pagination-items-per-page.js",
+    "./components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons.js",
+    "./components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts.js",
+    "./components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page.js",
     "./components/legacy/gux-simple-toast-legacy/gux-simple-toast.js",
     "./components/stable/gux-accordion/gux-accordion.js",
     "./components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js",
     "./components/stable/gux-action-button/gux-action-button.js",
-    "./components/stable/gux-advanced-dropdown/gux-advanced-dropdown.js",
-    "./components/stable/gux-advanced-dropdown/dropdown-option/gux-dropdown-option.js",
     "./components/stable/gux-alert/gux-inline-alert.js",
     "./components/stable/gux-badge/gux-badge.js",
     "./components/stable/gux-blank-state/gux-blank-state.js",
@@ -83,6 +76,11 @@
     "./components/stable/gux-loading-message/gux-loading-message.js",
     "./components/stable/gux-modal/gux-modal.js",
     "./components/stable/gux-page-loading-spinner/gux-page-loading-spinner.js",
+    "./components/stable/gux-pagination/gux-pagination.js",
+    "./components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.js",
+    "./components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-ellipsis-button/gux-pagination-ellipsis-button.js",
+    "./components/stable/gux-pagination/gux-pagination-item-counts/gux-pagination-item-counts.js",
+    "./components/stable/gux-pagination/gux-pagination-items-per-page/gux-pagination-items-per-page.js",
     "./components/stable/gux-pagination-cursor/gux-pagination-cursor.js",
     "./components/stable/gux-popover/gux-popover.js",
     "./components/stable/gux-popover-list/gux-popover-list.js",
@@ -112,6 +110,7 @@
     "./components/stable/gux-tabs-advanced/gux-tab-advanced/gux-tab-advanced.js",
     "./components/stable/gux-tabs-advanced/gux-tab-advanced-list/gux-tab-advanced-list.js",
     "./components/stable/gux-tabs-advanced/gux-tab-advanced-panel/gux-tab-advanced-panel.js",
+    "./components/stable/gux-tag/gux-tag.js",
     "./components/stable/gux-text-highlight/gux-text-highlight.js",
     "./components/stable/gux-time-picker/gux-time-picker.js",
     "./components/stable/gux-toast/gux-toast.js",

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.css

@@ -1,34 +1,40 @@
 .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. */
@@ -113,42 +119,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-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/dropdown-option/gux-dropdown-option.css

@@ -23,7 +23,7 @@ gux-dropdown-option[disabled] {
   cursor: default;
   opacity: 0.5;
 }
-gux-dropdown-option[disabled='false'] {
+gux-dropdown-option[disabled=false] {
   pointer-events: auto;
   cursor: pointer;
   opacity: 1;
@@ -32,8 +32,7 @@ gux-dropdown-option:not(:disabled)[selected] {
   color: #2e394c;
   background: #deeaff;
 }
-gux-dropdown-option:not(:disabled):hover,
-gux-dropdown-option:not(:disabled):focus-visible {
+gux-dropdown-option:not(:disabled):hover, gux-dropdown-option:not(:disabled):focus-visible {
   color: #fdfdfd;
   background: #2a60c8;
-}
+}

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/dropdown-option/gux-dropdown-option.js

@@ -79,7 +79,7 @@ export class GuxDropdownOption {
   static get is() { return "gux-dropdown-option"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-dropdown-option.less"]
+      "$": ["gux-dropdown-option.scss"]
     };
   }
   static get styleUrls() {

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.css

@@ -0,0 +1,253 @@
+.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);
+}
+
+/* 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: var(--gse-ui-links-inLine-padding);
+}
+
+a {
+  color: var(--gse-ui-link-default-color);
+  text-decoration: underline;
+  border-radius: var(--gse-ui-links-borderRadius);
+}
+a:hover {
+  color: var(--gse-ui-link-hover-color);
+}
+a:active {
+  color: var(--gse-ui-link-active-color);
+}
+a:visited {
+  color: var(--gse-ui-link-visited-color);
+}
+a: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);
+}
+
+table a {
+  color: var(--gse-ui-link-default-color);
+  text-decoration: underline;
+  border-radius: var(--gse-ui-links-borderRadius);
+  text-decoration: none;
+}
+table a:hover {
+  color: var(--gse-ui-link-hover-color);
+}
+table a:active {
+  color: var(--gse-ui-link-active-color);
+}
+table a:visited {
+  color: var(--gse-ui-link-visited-color);
+}
+table a: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);
+}
+
+/* Custom Styles */
+:host {
+  color: #2e394c;
+}
+
+gux-popup {
+  display: block;
+  margin: 4px 0;
+}
+gux-popup .gux-select-field {
+  position: relative;
+  width: 100%;
+  height: 32px;
+}
+gux-popup .gux-select-field a.gux-select-input {
+  position: absolute;
+  inset: 0;
+  padding: 6px 24px 6px 12px;
+  overflow: hidden;
+  color: #2e394c;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: #f6f7f9;
+  background-image: none;
+  border: 1px solid #6b7585;
+  border-radius: 4px;
+  box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
+}
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder,
+gux-popup .gux-select-field a.gux-select-input .gux-select-value {
+  line-height: 20px;
+}
+gux-popup .gux-select-field a.gux-select-input .gux-select-placeholder {
+  color: #596373;
+}
+gux-popup .gux-select-field a.gux-select-input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(117, 168, 255, 0.5);
+}
+gux-popup .gux-select-field .gux-icon-wrapper {
+  position: absolute;
+  top: 1px;
+  right: 8px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+gux-popup .gux-select-field .gux-icon-wrapper gux-icon {
+  width: 16px;
+  height: 16px;
+  color: #596373;
+}
+gux-popup .gux-select-field:hover .gux-icon-wrapper gux-icon {
+  color: #2e394c;
+}
+gux-popup .gux-advanced-dropdown-menu {
+  width: 100%;
+  background: #fdfdfd;
+  border: 1px solid #b4bccb;
+  border-radius: 4px;
+  box-shadow: 0 0 2px 0 rgba(32, 41, 55, 0.24);
+}
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search {
+  margin: 8px 16px;
+}
+gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-cancel-button, gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-search-results-button, gux-popup .gux-advanced-dropdown-menu .gux-dropdown-menu-container gux-form-field-search input::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+gux-popup .gux-dropdown-options {
+  padding: 8px 0;
+  margin: 0;
+  overflow-y: auto;
+  color: #2e394c;
+  background: #fdfdfd;
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+gux-popup::part(gux-popup-container) {
+  width: inherit;
+}

package/dist/collection/components/{stable/gux-advanced-dropdown → legacy/gux-advanced-dropdown-legacy}/gux-advanced-dropdown.js

@@ -18,7 +18,7 @@ import advancedDropDownResources from './i18n/en.json';
 /**
  * @slot - collection of gux-dropdown-option elements
  */
-export class GuxAdvancedDropdown {
+export class GuxAdvancedDropdownLegacy {
   constructor() {
     this.disabled = false;
     this.placeholder = undefined;
@@ -195,11 +195,11 @@ export class GuxAdvancedDropdown {
       this.inputBox.focus();
     }
   }
-  static get is() { return "gux-advanced-dropdown"; }
+  static get is() { return "gux-advanced-dropdown-legacy"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-advanced-dropdown.less"]
+      "$": ["gux-advanced-dropdown.scss"]
     };
   }
   static get styleUrls() {
@@ -393,4 +393,4 @@ export class GuxAdvancedDropdown {
 }
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxAdvancedDropdown.prototype, "onClickOutside", null);
+], GuxAdvancedDropdownLegacy.prototype, "onClickOutside", null);

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-toast.css

@@ -1,34 +1,40 @@
 .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. */
@@ -113,42 +119,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 */