@empathyco/x-components 3.0.0-alpha.271 → 3.0.0-alpha.273

package/design-system/deprecated-full-theme.css

@@ -20,28 +20,6 @@
     --x-size-border-radius-bottom-left-button-card
   );
 }
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
-
-.x-button--ghost.x-button,
-.x-button--ghost .x-button {
-  --x-color-background-button-default: var(--x-color-background-button-ghost);
-  --x-color-border-button-default: var(--x-color-border-button-ghost);
-  --x-color-text-button-default: var(--x-color-text-button-ghost);
-}
-
-.x-button--ghost.x-button--ghost-start.x-button,
-.x-button--ghost.x-button--ghost-start .x-button {
-  --x-size-padding-left-button-default: 0;
-}
-
-.x-button--ghost.x-button--ghost-end.x-button,
-.x-button--ghost.x-button--ghost-end .x-button {
-  --x-size-padding-right-button-default: 0;
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -127,6 +105,28 @@
     margin-right: var(--x-size-gap-button-default);
   }
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
+
+.x-button--ghost.x-button,
+.x-button--ghost .x-button {
+  --x-color-background-button-default: var(--x-color-background-button-ghost);
+  --x-color-border-button-default: var(--x-color-border-button-ghost);
+  --x-color-text-button-default: var(--x-color-text-button-ghost);
+}
+
+.x-button--ghost.x-button--ghost-start.x-button,
+.x-button--ghost.x-button--ghost-start .x-button {
+  --x-size-padding-left-button-default: 0;
+}
+
+.x-button--ghost.x-button--ghost-end.x-button,
+.x-button--ghost.x-button--ghost-end .x-button {
+  --x-size-padding-right-button-default: 0;
+}
 :root {
   --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -236,4 +236,634 @@
   --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
+}
+:root {
+  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
+  --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
+  --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
+  --x-size-border-width-suggestion-group-default: 0;
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
+  --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  padding-left: var(--x-size-padding-left-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  padding-right: var(--x-size-padding-left-suggestion-group-default);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  padding-right: var(--x-size-padding-right-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  padding-left: var(--x-size-padding-right-suggestion-group-default);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  border-left-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  border-right-width: var(--x-size-border-width-left-suggestion-group-default);
+}
+
+[dir="ltr"] .x-suggestion-group {
+  border-right-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
+[dir="rtl"] .x-suggestion-group {
+  border-left-width: var(--x-size-border-width-right-suggestion-group-default);
+}
+
+.x-suggestion-group {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  background-color: var(--x-color-background-suggestion-group-default);
+  color: var(--x-color-text-suggestion-group-default);
+  border-color: var(--x-color-border-suggestion-group-default);
+  font-family: var(--x-font-family-suggestion-group-default);
+  font-size: var(--x-size-font-suggestion-group-default);
+  line-height: var(--x-size-line-height-suggestion-group-default);
+  font-weight: var(--x-number-font-weight-suggestion-group-default);
+  cursor: pointer;
+  padding-top: var(--x-size-padding-top-suggestion-group-default);
+  padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
+  gap: var(--x-size-gap-suggestion-group-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-group-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion-group {
+    gap: 0;
+  }
+  .x-suggestion-group > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-group-default);
+  }
+}
+.x-suggestion-group .x-suggestion {
+  padding: 0;
+  flex: 1 1 auto;
+  border: none;
+}
+.x-suggestion-group .x-button {
+  --x-color-background-button-default: transparent;
+  --x-color-border-button-default: transparent;
+  --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
+  --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
+  --x-size-padding-right-button-default: 0;
+  --x-size-padding-left-button-default: 0;
+  border: none;
+}
+:root {
+  --x-string-align-items-suggestion-default: center;
+  --x-color-text-suggestion-default: var(--x-color-text-default);
+  --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
+  --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
+  --x-color-background-suggestion-default: transparent;
+  --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
+  --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
+  --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
+  --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
+  --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
+  --x-size-padding-top-suggestion-default: var(--x-size-base-01);
+  --x-size-padding-right-suggestion-default: 0;
+  --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
+  --x-size-padding-left-suggestion-default: 0;
+  --x-size-gap-suggestion-default: var(--x-size-base-03);
+  --x-size-border-width-suggestion-default: 0;
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
+  --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
+  --x-font-family-suggestion-default: var(--x-font-family-text);
+  --x-size-font-suggestion-default: var(--x-size-font-text);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
+  --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-matching-part-default: var(
+    --x-size-line-height-suggestion-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-matching: var(
+    --x-number-font-weight-suggestion-default
+  );
+  --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-filter-default: var(
+      --x-number-font-weight-suggestion-default
+  );
+  --x-text-transform-suggestion-filter-default: none;
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
+  --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
+  --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
+  --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
+  --x-size-line-height-suggestion-matching-part-default-curated: var(
+                  --x-size-line-height-suggestion-matching-part-default
+  );
+  --x-number-font-weight-suggestion-matching-part-default-curated: var(
+                  --x-number-font-weight-suggestion-matching-part-default
+  );
+  --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default-matching-curated: var(
+                  --x-size-line-height-suggestion-default-matching
+  );
+  --x-number-font-weight-suggestion-default-matching-curated: var(
+                  --x-number-font-weight-suggestion-default-matching
+  );
+}
+
+[dir="ltr"] .x-suggestion {
+  text-align: left;
+}
+
+[dir="rtl"] .x-suggestion {
+  text-align: right;
+}
+
+[dir="ltr"] .x-suggestion {
+  padding-left: var(--x-size-padding-left-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  padding-right: var(--x-size-padding-left-suggestion-default);
+}
+
+[dir="ltr"] .x-suggestion {
+  padding-right: var(--x-size-padding-right-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  padding-left: var(--x-size-padding-right-suggestion-default);
+}
+
+[dir="ltr"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-left-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-left-suggestion-default);
+}
+
+[dir="ltr"] .x-suggestion {
+  border-right-width: var(--x-size-border-width-right-suggestion-default);
+}
+
+[dir="rtl"] .x-suggestion {
+  border-left-width: var(--x-size-border-width-right-suggestion-default);
+}
+
+.x-suggestion {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  align-items: var(--x-string-align-items-suggestion-default);
+  background-color: var(--x-color-background-suggestion-default);
+  color: var(--x-color-text-suggestion-default);
+  border-color: var(--x-color-border-suggestion-default);
+  font-family: var(--x-font-family-suggestion-default);
+  font-size: var(--x-size-font-suggestion-default);
+  line-height: var(--x-size-line-height-suggestion-default);
+  font-weight: var(--x-number-font-weight-suggestion-default);
+  cursor: pointer;
+  padding-top: var(--x-size-padding-top-suggestion-default);
+  padding-bottom: var(--x-size-padding-bottom-suggestion-default);
+  gap: var(--x-size-gap-suggestion-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-suggestion-default);
+  border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
+  border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-suggestion {
+    gap: 0;
+  }
+  .x-suggestion > *:not(:last-child) {
+    margin-right: var(--x-size-gap-suggestion-default);
+  }
+}
+.x-suggestion__matching-part,
+.x-suggestion .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default);
+  font-size: var(--x-size-font-suggestion-matching-part-default);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
+  color: var(--x-color-text-suggestion-matching-part-default);
+}
+.x-suggestion__filter {
+  font-family: var(--x-font-family-suggestion-filter-default);
+  font-size: var(--x-size-font-suggestion-filter-default);
+  line-height: var(--x-size-line-height-suggestion-filter-default);
+  font-weight: var(--x-number-font-weight-suggestion-filter-default);
+  text-transform: var(--x-text-transform-suggestion-filter-default);
+  color: var(--x-color-text-suggestion-filter-default);
+}
+.x-suggestion--matching {
+  --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
+  --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
+  --x-number-font-weight-suggestion-default: var(
+    --x-number-font-weight-suggestion-default-matching
+  );
+  --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
+}
+.x-suggestion > .x-identifier-result {
+  flex: none;
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated {
+  background-color: var(--x-color-background-suggestion-default-curated);
+  color: var(--x-color-text-suggestion-default-curated);
+  border-color: var(--x-color-border-suggestion-default-curated);
+  font-family: var(--x-font-family-suggestion-default-curated);
+  font-size: var(--x-size-font-suggestion-default-curated);
+  line-height: var(--x-size-line-height-suggestion-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
+.x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
+  font-family: var(--x-font-family-suggestion-matching-part-default-curated);
+  font-size: var(--x-size-font-suggestion-matching-part-default-curated);
+  line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
+  font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
+  color: var(--x-color-text-suggestion-matching-part-default-curated);
+}
+.x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
+  --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
+  --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
+  --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
+  --x-number-font-weight-suggestion-default-curated: var(
+                  --x-number-font-weight-suggestion-default-matching-curated
+  );
+  --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
+}
+.x-text--accent {
+  --x-color-text-default: var(--x-color-text-accent);
+}
+:root {
+  --x-color-text-accent: var(--x-color-base-accent);
+}
+.x-text--bold.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
+}
+.x-text--bold.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
+}
+:root {
+  --x-color-text-default: var(--x-color-base-neutral-10);
+  --x-font-family-text: var(--x-font-family-base);
+  --x-size-font-text: var(--x-size-font-base-s);
+  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-text: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-text: none;
+  --x-font-family-title1: var(--x-font-family-base);
+  --x-size-font-title1: var(--x-size-font-base-xl);
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title1: var(--x-size-line-height-base-l);
+  --x-string-text-decoration-title1: none;
+  --x-font-family-title2: var(--x-font-family-base);
+  --x-size-font-title2: var(--x-size-font-base-l);
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title2: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title2: none;
+  --x-font-family-title3: var(--x-font-family-base);
+  --x-size-font-title3: var(--x-size-font-base-m);
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title3: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title3: none;
+  --x-font-family-small: var(--x-font-family-base);
+  --x-size-font-small: var(--x-size-font-base-xs);
+  --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-small: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-small: none;
+}
+
+.x,
+.x-text {
+  font-family: var(--x-font-family-text);
+  font-size: var(--x-size-font-text);
+  font-weight: var(--x-number-font-weight-text);
+  line-height: var(--x-size-line-height-text);
+  -webkit-text-decoration: var(--x-string-text-decoration);
+          text-decoration: var(--x-string-text-decoration);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-title1 {
+  font-family: var(--x-font-family-title1);
+  font-size: var(--x-size-font-title1);
+  font-weight: var(--x-number-font-weight-title1);
+  line-height: var(--x-size-line-height-title1);
+  -webkit-text-decoration: var(--x-string-text-decoration-title1);
+          text-decoration: var(--x-string-text-decoration-title1);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-title2 {
+  font-family: var(--x-font-family-title2);
+  font-size: var(--x-size-font-title2);
+  font-weight: var(--x-number-font-weight-title2);
+  line-height: var(--x-size-line-height-title2);
+  -webkit-text-decoration: var(--x-string-text-decoration-title2);
+          text-decoration: var(--x-string-text-decoration-title2);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-title3 {
+  font-family: var(--x-font-family-title3);
+  font-size: var(--x-size-font-title3);
+  font-weight: var(--x-number-font-weight-title3);
+  line-height: var(--x-size-line-height-title3);
+  -webkit-text-decoration: var(--x-string-text-decoration-title3);
+          text-decoration: var(--x-string-text-decoration-title3);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-small {
+  font-family: var(--x-font-family-small);
+  font-size: var(--x-size-font-small);
+  font-weight: var(--x-number-font-weight-small);
+  line-height: var(--x-size-line-height-small);
+  -webkit-text-decoration: var(--x-string-text-decoration-small);
+          text-decoration: var(--x-string-text-decoration-small);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.x-text--light.x-text {
+  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title1 {
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title2 {
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-title3 {
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
+}
+.x-text--light.x-small {
+  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
+}
+.x-text--secondary {
+  --x-color-text-default: var(--x-color-text-secondary);
+}
+:root {
+  --x-color-text-secondary: var(--x-color-base-neutral-35);
+}
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
+}
+.x-font-color--lead {
+  color: var(--x-color-base-lead) !important;
+}
+
+.x-font-color--auxiliary {
+  color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-font-color--neutral-10 {
+  color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-font-color--neutral-35 {
+  color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-font-color--neutral-70 {
+  color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-font-color--neutral-95 {
+  color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-font-color--neutral-100 {
+  color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important;
+}
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important;
+}
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important;
+}
+
+.x-font-color--transparent {
+  color: var(--x-color-base-transparent) !important;
+}
+.x-font-size--01 {
+  font-size: var(--x-size-base-01) !important;
+  line-height: 1.5;
+}
+.x-font-size--02 {
+  font-size: var(--x-size-base-02) !important;
+  line-height: 1.5;
+}
+.x-font-size--03 {
+  font-size: var(--x-size-base-03) !important;
+  line-height: 1.5;
+}
+.x-font-size--04 {
+  font-size: var(--x-size-base-04) !important;
+  line-height: 1.5;
+}
+.x-font-size--05 {
+  font-size: var(--x-size-base-05) !important;
+  line-height: 1.5;
+}
+.x-font-size--06 {
+  font-size: var(--x-size-base-06) !important;
+  line-height: 1.5;
+}
+.x-font-size--07 {
+  font-size: var(--x-size-base-07) !important;
+  line-height: 1.5;
+}
+.x-font-size--08 {
+  font-size: var(--x-size-base-08) !important;
+  line-height: 1.5;
+}
+.x-font-size--09 {
+  font-size: var(--x-size-base-09) !important;
+  line-height: 1.5;
+}
+.x-font-size--10 {
+  font-size: var(--x-size-base-10) !important;
+  line-height: 1.5;
+}
+.x-font-size--11 {
+  font-size: var(--x-size-base-11) !important;
+  line-height: 1.5;
+}
+.x-font-size--12 {
+  font-size: var(--x-size-base-12) !important;
+  line-height: 1.5;
+}
+.x-font-size--13 {
+  font-size: var(--x-size-base-13) !important;
+  line-height: 1.5;
+}
+.x-font-size--14 {
+  font-size: var(--x-size-base-14) !important;
+  line-height: 1.5;
+}
+.x-font-size--15 {
+  font-size: var(--x-size-base-15) !important;
+  line-height: 1.5;
+}
+.x-font-size--16 {
+  font-size: var(--x-size-base-16) !important;
+  line-height: 1.5;
+}
+.x-font-size--17 {
+  font-size: var(--x-size-base-17) !important;
+  line-height: 1.5;
+}
+.x-font-size--18 {
+  font-size: var(--x-size-base-18) !important;
+  line-height: 1.5;
+}
+.x-font-size--19 {
+  font-size: var(--x-size-base-19) !important;
+  line-height: 1.5;
+}
+.x-font-size--20 {
+  font-size: var(--x-size-base-20) !important;
+  line-height: 1.5;
+}
+.x-font-weight--light {
+  font-weight: var(--x-number-font-weight-base-light) !important;
+}
+.x-font-weight--regular {
+  font-weight: var(--x-number-font-weight-base-regular) !important;
+}
+.x-font-weight--bold {
+  font-weight: var(--x-number-font-weight-base-bold) !important;
+}
+.x-line-height--none {
+  line-height: 1 !important;
+}
+
+.x-line-height--tight {
+  line-height: 1.25 !important;
+}
+
+.x-line-height--snug {
+  line-height: 1.375 !important;
+}
+
+.x-line-height--normal {
+  line-height: 1.5 !important;
+}
+
+.x-line-height--relaxed {
+  line-height: 1.625 !important;
+}
+
+.x-line-height--loose {
+  line-height: 2 !important;
+}
+.x-underline {
+  text-decoration-line: underline;
+}
+
+.x-overline {
+  text-decoration-line: overline;
+}
+
+.x-line-through {
+  text-decoration-line: line-through;
+}
+
+.x-no-underline {
+  text-decoration-line: none;
+}
+.x-uppercase {
+  text-transform: uppercase;
+}
+
+.x-lowercase {
+  text-transform: lowercase;
+}
+
+.x-capitalize {
+  text-transform: capitalize;
+}
+
+.x-normal-case {
+  text-transform: none;
 }