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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (306) hide show

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

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

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

@@ -1,3 +1,42 @@
+.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);
+}
 :host {
   display: inline-block;
   pointer-events: none;
@@ -58,9 +97,10 @@ button:active:enabled {
   background-color: var(--gse-ui-button-secondary-active-backgroundColor);
 }
 button:focus-visible:enabled {
-  outline: 3px solid #7b88f7;
-  outline-offset: 1px;
-  border-radius: 3px;
+  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);
 }
 button.gux-primary {
   color: var(--gse-ui-button-primary-default-foregroundColor);

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

@@ -19,7 +19,6 @@ import { getGuxButtonMultiAccent } from './gux-button-multi.types';
  */
 export class GuxButtonMulti {
   constructor() {
-    this.text = undefined;
     this.disabled = false;
     this.accent = 'secondary';
     this.isOpen = false;
@@ -104,7 +103,7 @@ export class GuxButtonMulti {
     trackComponent(this.root, { variant: this.accent });
   }
   render() {
-    return (h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { name: "title" }, this.text), h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null)))));
+    return (h("gux-popup", { expanded: this.isOpen }, h("div", { slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { name: "title" }), h("gux-icon", { decorative: true, "icon-name": "chevron-small-down" })))), h("div", { class: "gux-list-container", slot: "popup" }, h("gux-list", { onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", null)))));
   }
   static get is() { return "gux-button-multi"; }
   static get encapsulation() { return "shadow"; }
@@ -120,23 +119,6 @@ export class GuxButtonMulti {
   }
   static get properties() {
     return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The component text."
-        },
-        "attribute": "text",
-        "reflect": false
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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

@@ -1,3 +1,42 @@
+.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);
+}
 :host {
   display: inline-block;
   pointer-events: none;
@@ -41,9 +80,10 @@
 ::slotted(input[type=button]:focus-visible:enabled),
 ::slotted(input[type=submit]:focus-visible:enabled),
 ::slotted(button:focus-visible:enabled) {
-  outline: 3px solid #7b88f7;
-  outline-offset: 1px;
-  border-radius: 3px;
+  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);
 }
 ::slotted(input[type=button]:hover:enabled),

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

@@ -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 */
@@ -200,8 +214,9 @@ table a:focus-visible {
   cursor: grabbing !important;
 }
 .gux-container .gux-reorder:hover, .gux-container .gux-reorder: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-container .gux-reorder:hover gux-icon, .gux-container .gux-reorder:focus-visible gux-icon {
   color: #2a60c8;

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

@@ -19,36 +19,42 @@
 @prop $gse-ui-slider-focusRing-borderRadius
 **/
 .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. */
@@ -133,42 +139,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 */