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-form-field/components/gux-form-field-text-like/gux-form-field-text-like.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-form-field/components/gux-form-field-textarea/gux-form-field-textarea.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-list/gux-list-item/gux-list-item.css CHANGED Viewed

@@ -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-loading-message/gux-loading-message.css CHANGED Viewed

@@ -1,162 +1,46 @@
-.gux-focus-ring-focused:focus {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-.gux-focus-ring-focused-within:focus-within {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-.gux-focus-ring-focused-visible:focus-visible {
-  outline: 3px solid #aac9ff;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 1px #fdfdfd;
-}
-.gux-focus-ring-small-focused:focus {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-}
-.gux-focus-ring-small-focused-within:focus-within {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-}
-.gux-focus-ring-small-focused-visible:focus-visible {
-  outline: 2px solid #aac9ff;
-  outline-offset: 0;
-}
-/* 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;
-}
-/* Custom Styles */
+/**
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-large-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-large-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-large-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-large-width : TODO https://inindca.atlassian.net/browse/COMUI-2264
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-medium-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-medium-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-medium-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-medium-width
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-small-header-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-small-header-fontSize
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontFamily
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontWeight
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-lineHeight
+  * @prop --gse-progressAndLoading-loadingState-small-subheader-fontSize
+  * @prop --gse-progressAndLoading-loadingState-small-width
+  * @prop --gse-progressAndLoading-large-gap
+  * @prop --gse-progressAndLoading-large-gapText
+  * @prop --gse-progressAndLoading-pageLoading-gap
+  * @prop --gse-progressAndLoading-medium-gap
+  * @prop --gse-progressAndLoading-medium-gapText
+  * @prop --gse-progressAndLoading-small-gap
+  * @prop --gse-progressAndLoading-small-gapText
+  * @prop --gse-ui-progressAndLoading-textColor
+  */
 :host {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  container-type: inline-size;
 }
 .gux-container {
@@ -164,44 +48,55 @@ table a:focus-visible {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-}
-.gux-container slot[name=primary-message] {
-  color: #364154;
+  color: var(--gse-ui-progressAndLoading-textColor);
   text-align: center;
 }
-.gux-container slot[name=additional-guidance] {
-  color: #596373;
-  text-align: center;
-}
-.gux-container.gux-small, .gux-container.gux-medium {
-  padding: 8px 0 4px;
-}
-.gux-container.gux-small slot[name=primary-message], .gux-container.gux-medium slot[name=primary-message] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 20px;
-}
-.gux-container.gux-small slot[name=additional-guidance], .gux-container.gux-medium slot[name=additional-guidance] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 16px;
-}
-.gux-container.gux-large {
-  padding: 16px 0 4px;
-}
-.gux-container.gux-large slot[name=primary-message] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-weight: 300;
-  font-size: 24px;
-  line-height: 32px;
-}
-.gux-container.gux-large slot[name=additional-guidance] {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
+@container (width > 400px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-large-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-large-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-large-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-large-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-large-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-large-subheader-fontSize);
+  }
+}
+@container (width > 200px) and (width <=400px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-medium-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-medium-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-medium-subheader-fontSize);
+  }
+}
+@container (width <=200px) {
+  .gux-container .gux-primary-message {
+    margin-top: var(--gse-ui-progressAndLoading-small-gap);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-small-header-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-header-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-small-header-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-header-fontSize);
+  }
+  .gux-container .gux-additional-guidance {
+    margin-top: var(--gse-ui-progressAndLoading-small-gapText);
+    font-family: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontFamily);
+    font-weight: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontWeight);
+    line-height: var(--gse-ui-progressAndLoading-loadingState-small-subheader-lineHeight);
+    font-size: var(--gse-ui-progressAndLoading-loadingState-small-subheader-fontSize);
+  }
 }