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

wix-style-react

: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, tinyLineHeight, smallLineHeight, mediumLineHeight;
}

: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: value(THEME-TEXT-COLOR-PRIMARY);
}
.root:skin(standard):light {
  color: value(THEME-TEXT-COLOR-PRIMARY-LIGHT);
}
.root:skin(standard):secondary {
  color: value(THEME-TEXT-COLOR-SECONDARY);
}
.root:skin(standard):light:secondary {
  color: value(THEME-TEXT-COLOR-SECONDARY-LIGHT);
}

/* Success */
.root:skin(success) {
  color: value(G10);
}

/* Error */
.root:skin(error) {
  color: value(R10);
}

/* Premium */
.root:skin(premium) {
  color: value(P10);
}

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

/* Primary */
.root:skin(primary) {
  color: value(B10);
}

/******** Link ********/
.root > a {
  cursor: pointer;
  color: value(B10);
  text-decoration: none;
}

.root > a:hover {
  color: value(B20);
}

/******* List Style ******/
.root ol,
.root ul {
  padding: 0;
  margin: 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: 30px;
  margin-bottom: 6px;
}

.root:size(medium) ol li {
  margin: 0 0 6px 30px;
}

.root:size(small) ul li {
  padding-left: 24px;
  margin-bottom: 9px;
}

.root:size(small) ol li {
  margin: 0 0 9px 24px;
}

.root:size(small) li:last-child {
  margin-bottom: 6px;
}

.root:size(tiny) ul li {
  padding-left: 22px;
  margin-bottom: 9px;
}

.root:size(tiny) ol li {
  margin: 0 0 9px 22px;
}

.root:size(tiny) li:last-child {
  margin-bottom: 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;
  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: 6px;
  margin-block-start: 6px;
}

.root:size(tiny) p:empty {
  min-height: value(tinyLineHeight);
}

.root:size(small) p:empty {
  min-height: value(smallLineHeight);
}

.root:size(medium) p:empty {
  min-height: value(mediumLineHeight);
}