wix-style-react/dist/src/Text/Text.st.css

wix-style-react

@st-import [
  --wds-color-text-standard-primary,
  --wds-color-text-standard-primary-light,
  --wds-color-text-standard-secondary,
  --wds-color-text-standard-secondary-light,
  --wds-color-fill-standard-primary,
  --wds-color-fill-standard-primary-hover,
  --wds-color-text-disabled,
  --wds-color-text-disabled-light,
  --wds-color-text-success,
  --wds-color-text-destructive,
  --wds-color-text-premium,
  --wds-color-text-primary,
  --wds-font-line-height-body-medium,
  --wds-font-line-height-body-small,
  --wds-font-line-height-body-tiny,
  --wds-space-100,
  --wds-space-150,
  --wds-space-400,
  --wds-space-500,
] from "@wix/design-system-tokens/all.st.css";

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-tiny-thin, text-tiny-normal, text-tiny-bold, text-small-thin,
  text-small-normal, text-small-bold, text-medium-thin, text-medium-normal,
  text-medium-bold, wsr-text-line-height-tiny, wsr-text-line-height-small, wsr-text-line-height-medium;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, B20, D10-30, D80-70, G10, P10, R10,
             THEME-TEXT-COLOR-PRIMARY, THEME-TEXT-COLOR-PRIMARY-LIGHT, THEME-TEXT-COLOR-SECONDARY, THEME-TEXT-COLOR-SECONDARY-LIGHT;
}

:vars {
  /*
    NOTE: Not using icons from "~wix-ui-icons-common/Confirm.svg" because ~ import
    syntax is not supported in Stylable yet and because in Sass/Less there are build
    issues with Yoshi 3.x version.
  */
  listIconUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5,14.4393398 L16.9393398,7 C17.232233,6.70710678 17.7071068,6.70710678 18,7 C18.2928932,7.29289322 18.2928932,7.76776695 18,8.06066017 L9.5,16.5606602 L6,13.0606602 C5.70710678,12.767767 5.70710678,12.2928932 6,12 C6.29289322,11.7071068 6.76776695,11.7071068 7.06066017,12 L9.5,14.4393398 Z'/%3E%3C/svg%3E");
  listIconSmallUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M11.9393398,6 C12.232233,5.70710678 12.7071068,5.70710678 13,6 C13.2928932,6.29289322 13.2928932,6.76776695 13,7.06066017 L7.5,12.5606602 L5,10.0606602 C4.70710678,9.76776695 4.70710678,9.29289322 5,9 C5.29289322,8.70710678 5.76776695,8.70710678 6.06066017,9 L7.5,10.4393398 L11.9393398,6 Z'/%3E%3C/svg%3E");
  listCircleIconUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
  listCircleIconSmallUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='2'%3E%3C/circle%3E%3C/svg%3E");
}

.root {
  -st-states: disabled, secondary, light, skin(enum(standard, success, error, premium, disabled, primary)),
    size(enum(tiny, small, medium)), weight(enum(thin, normal, bold)), list-style(enum(circle, checkmark));

  white-space: pre-line;
}

/****** Weights ******/
/* Thin */
.root:weight(thin):size(tiny) {
  -st-mixin: text-tiny-thin;
}
.root:weight(thin):size(small) {
  -st-mixin: text-small-thin;
}
.root:weight(thin):size(medium) {
  -st-mixin: text-medium-thin;
}

/* Normal */
.root:weight(normal):size(tiny) {
  -st-mixin: text-tiny-normal;
}
.root:weight(normal):size(small) {
  -st-mixin: text-small-normal;
}
.root:weight(normal):size(medium) {
  -st-mixin: text-medium-normal;
}

/* Bold */
.root:weight(bold):size(tiny) {
  -st-mixin: text-tiny-bold;
}
.root:weight(bold):size(small) {
  -st-mixin: text-small-bold;
}
.root:weight(bold):size(medium) {
  -st-mixin: text-medium-bold;
}

/******* Skins *******/
/* Standard */
.root:skin(standard) {
  color: var(--wds-color-text-standard-primary, value(THEME-TEXT-COLOR-PRIMARY));
}
.root:skin(standard):light {
  color: var(--wds-color-text-standard-primary-light, value(THEME-TEXT-COLOR-PRIMARY-LIGHT));
}
.root:skin(standard):secondary {
  color: var(--wds-color-text-standard-secondary, value(THEME-TEXT-COLOR-SECONDARY));
}
.root:skin(standard):light:secondary {
  color: var(--wds-color-text-standard-secondary-light, value(THEME-TEXT-COLOR-SECONDARY-LIGHT));
}

/* Success */
.root:skin(success) {
  color: var(--wds-color-text-success, value(G10));
}

/* Error */
.root:skin(error) {
  color: var(--wds-color-text-destructive, value(R10));
}

/* Premium */
.root:skin(premium) {
  color: var(--wds-color-text-premium, value(P10));
}

/* Disabled */
.root:skin(disabled) {
  color: var(--wds-color-text-disabled, value(D10-30));
}
.root:skin(disabled):light {
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

/* Primary */
.root:skin(primary) {
  color: var(--wds-color-text-primary, value(B10));
}

/******** Link ********/
.root > a {
  cursor: pointer;
  color: var(--wds-color-fill-standard-primary, value(B10));
  text-decoration: none;
}

.root > a:hover {
  color: var(--wds-color-fill-standard-primary-hover, value(B20));
}

/******* List Style ******/
.root ol,
.root ul {
  padding: 0;
  margin: var(--wds-space-100, 6px) 0;
}
.root ul {
  list-style-type: none;
}

.root > ol ol,
.root > ol ol,
.root > ol ul,
.root > ul ol {
  padding: 0;
}

.root > ol li,
.root > ul li {
  position: relative;
}

.root:size(medium) ul li {
  padding-left: var(--wds-space-500, 30px);
  margin-bottom: var(--wds-space-100, 6px);
}

.root:size(medium) ol li {
  margin: 0 0 var(--wds-space-100, 6px) var(--wds-space-500, 30px);
}

.root:size(small) ul li {
  padding-left: var(--wds-space-400, 24px);
  margin-bottom: var(--wds-space-150, 9px);
}

.root:size(small) ol li {
  margin: 0 0 var(--wds-space-150, 9px) var(--wds-space-400, 24px);
}

.root:size(small) li:last-child {
  margin-bottom: var(--wds-space-100, 6px);
}

.root:size(tiny) ul li {
  padding-left: var(--wds-space-400, 22px);
  margin-bottom: var(--wds-space-150, 9px);
}

.root:size(tiny) ol li {
  margin: 0 0 var(--wds-space-150, 9px) var(--wds-space-400, 22px);
}

.root:size(tiny) li:last-child {
  margin-bottom: var(--wds-space-100, 6px);
}

.root ul li::before {
  content: '';
  position: absolute;
  display: block;
  left: 0;
  background-color: currentColor;
}

.root:size(medium) ul li::before {
  width: 24px;
  height: 24px;
}

.root:size(small) ul li::before,
.root:size(tiny) ul li::before {
  width: 18px;
  height: 18px;
}

.root:size(tiny) ul li::before {
  margin-top: -2px;
}

.root:size(medium):list-style(checkmark) ul li::before {
  -webkit-mask: value(listIconUrl) no-repeat center/contain;
  mask: value(listIconUrl) no-repeat center/contain;
}

.root:size(small):list-style(checkmark) ul li::before,
.root:size(tiny):list-style(checkmark) ul li::before {
  -webkit-mask: value(listIconSmallUrl) no-repeat center/contain;
  mask: value(listIconSmallUrl) no-repeat center/contain;
}

.root:size(medium):list-style(circle) ul li::before {
  -webkit-mask: value(listCircleIconUrl) no-repeat center/contain;
  mask: value(listCircleIconUrl) no-repeat center/contain;
}

.root:size(small):list-style(circle) ul li::before,
.root:size(tiny):list-style(circle) ul li::before {
  -webkit-mask: value(listCircleIconSmallUrl) no-repeat center/contain;
  mask: value(listCircleIconSmallUrl) no-repeat center/contain;
}

/* <p/> tag */
.root p {
  margin-block-end: var(--wds-space-100, 6px);
  margin-block-start: var(--wds-space-100, 6px);
}

.root:size(tiny) p:empty {
  min-height: var(--wds-font-line-height-body-tiny, value(wsr-text-line-height-tiny));
}

.root:size(small) p:empty {
  min-height: var(--wds-font-line-height-body-small, value(wsr-text-line-height-small));
}

.root:size(medium) p:empty {
  min-height: var(--wds-font-line-height-body-medium, value(wsr-text-line-height-medium));
}

/* st-namespace-reference="../../../src/Text/Text.st.css" */