rsuite/Text/styles/index.css

A suite of react components

*[class*=rs-],*[class*=rs-]::before, *[class*=rs-]::after{
  box-sizing:border-box;
}

html{
  -webkit-tap-highlight-color:transparent;
  font-size:16px;
}

body{
  font-family:var(--rs-font-family-base);
  font-size:var(--rs-font-size-sm);
  line-height:var(--rs-line-height-md);
  color:var(--rs-text-primary);
  background-color:var(--rs-body);
}
:root{
  --rs-gray-0:#fff;
  --rs-gray-50:#f7f7fa;
  --rs-gray-200:#e5e5ea;
  --rs-gray-600:#717273;
  --rs-gray-700:#575757;
  --rs-gray-800:#343434;
  --rs-gray-900:#121212;
  --rs-primary-500:#3498ff;
  --rs-red-500:#F44336;
  --rs-orange-500:#FA8900;
  --rs-yellow-500:#FFB300;
  --rs-green-500:#4CAF50;
  --rs-cyan-500:#00BCD4;
  --rs-blue-500:#2196F3;
  --rs-violet-500:#673AB7;
  --rs-body:var(--rs-gray-0);
  --rs-text-primary:var(--rs-gray-800);
  --rs-text-secondary:var(--rs-gray-600);
  --rs-kbd-bg:var(--rs-gray-50);
  --rs-kbd-text:var(--rs-gray-800);
  --rs-kbd-border:var(--rs-gray-200);
}

[data-theme=dark],
.rs-theme-dark{
  --rs-gray-0:#fff;
  --rs-gray-50:#e9ebf0;
  --rs-gray-200:#a4a9b3;
  --rs-gray-600:#3c3f43;
  --rs-gray-700:#292d33;
  --rs-gray-800:#1a1d24;
  --rs-gray-900:#0f131a;
  --rs-primary-500:#34c3ff;
  --rs-red-500:#F04F43;
  --rs-orange-500:#FF9800;
  --rs-yellow-500:#FFC757;
  --rs-green-500:#58B15B;
  --rs-cyan-500:#00BCD4;
  --rs-blue-500:#1499EF;
  --rs-violet-500:#673AB7;
  --rs-body:var(--rs-gray-900);
  --rs-text-primary:var(--rs-gray-50);
  --rs-text-secondary:var(--rs-gray-200);
  --rs-kbd-bg:var(--rs-gray-600);
  --rs-kbd-text:var(--rs-gray-50);
  --rs-kbd-border:var(--rs-gray-700);
}

[data-theme=high-contrast],
.rs-theme-high-contrast{
  --rs-gray-0:#fff;
  --rs-gray-50:#e9ebf0;
  --rs-gray-200:#a4a9b3;
  --rs-gray-600:#3c3f43;
  --rs-gray-700:#292d33;
  --rs-gray-800:#1a1d24;
  --rs-gray-900:#0f131a;
  --rs-primary-500:#ffff00;
  --rs-red-500:#BD1732;
  --rs-orange-500:#FF9800;
  --rs-yellow-500:#FFC757;
  --rs-green-500:#0D822C;
  --rs-cyan-500:#00BCD4;
  --rs-blue-500:#1499EF;
  --rs-violet-500:#673AB7;
  --rs-body:var(--rs-gray-900);
  --rs-text-primary:var(--rs-gray-50);
  --rs-text-secondary:var(--rs-gray-200);
  --rs-kbd-bg:var(--rs-gray-600);
  --rs-kbd-text:var(--rs-gray-50);
  --rs-kbd-border:var(--rs-gray-700);
}

:root{
  --rs-font-family-base:-apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif;
  --rs-font-size-sm:0.875rem;
  --rs-line-height-md:calc(20 / 14);
  --rs-text-line-height-xs:calc(1 / 0.75);
  --rs-text-line-height-sm:calc(1.25 / 0.875);
  --rs-text-line-height-md:calc(1.5 / 1);
  --rs-text-line-height-lg:calc(1.75 / 1.125);
  --rs-text-line-height-xl:calc(1.75 / 1.25);
  --rs-text-line-height-2xl:calc(2 / 1.5);
  --rs-text-line-height-3xl:calc(2.25 / 1.875);
  --rs-text-line-height-4xl:calc(2.5 / 2.25);
  --rs-text-line-height-5xl:1;
  --rs-text-line-height-6xl:1;
  --rs-radius-sm:0.25rem;
}

@media (max-width: calc(576px - 1px)){
  [data-visible-from=xs]{
    display:none !important;
  }
}
@media (min-width: 576px){
  [data-hidden-from=xs]{
    display:none !important;
  }
}
@media (max-width: calc(768px - 1px)){
  [data-visible-from=sm]{
    display:none !important;
  }
}
@media (min-width: 768px){
  [data-hidden-from=sm]{
    display:none !important;
  }
}
@media (max-width: calc(992px - 1px)){
  [data-visible-from=md]{
    display:none !important;
  }
}
@media (min-width: 992px){
  [data-hidden-from=md]{
    display:none !important;
  }
}
@media (max-width: calc(1200px - 1px)){
  [data-visible-from=lg]{
    display:none !important;
  }
}
@media (min-width: 1200px){
  [data-hidden-from=lg]{
    display:none !important;
  }
}
@media (max-width: calc(1400px - 1px)){
  [data-visible-from=xl]{
    display:none !important;
  }
}
@media (min-width: 1400px){
  [data-hidden-from=xl]{
    display:none !important;
  }
}
:root{
  --rs-text-weight-thin:100;
  --rs-text-weight-light:300;
  --rs-text-weight-medium:500;
  --rs-text-weight-semibold:600;
  --rs-text-weight-bold:700;
  --rs-text-weight-extrabold:800;
}

.rs-text{
  font-family:var(--rs-font-family-base);
  margin:0;
  color:var(--rs-text-color, var(--rs-text-primary));
  font-size:var(--rs-font-size);
  line-height:var(--rs-text-line-height, var(--rs-line-height-md));
  line-clamp:var(--rs-text-max-lines);
}
.rs-text.rs-text-muted{
  color:var(--rs-text-secondary);
}
.rs-text-left{
  text-align:start;
}
.rs-text-center{
  text-align:center;
}
.rs-text-right{
  text-align:end;
}
.rs-text-justify{
  text-align:justify;
}
.rs-text-uppercase{
  text-transform:uppercase;
}
.rs-text-lowercase{
  text-transform:lowercase;
}
.rs-text-capitalize{
  text-transform:capitalize;
}
.rs-text-thin{
  font-weight:var(--rs-text-weight-thin);
}
.rs-text-light{
  font-weight:var(--rs-text-weight-light);
}
.rs-text-medium{
  font-weight:var(--rs-text-weight-medium);
}
.rs-text-semibold{
  font-weight:var(--rs-text-weight-semibold);
}
.rs-text-bold{
  font-weight:var(--rs-text-weight-bold);
}
.rs-text-extrabold{
  font-weight:var(--rs-text-weight-extrabold);
}
.rs-text-pre-line{
  white-space:pre-line;
}
.rs-text-ellipsis{
  overflow:hidden;
}
@supports (-webkit-line-clamp: 1){
  .rs-text-ellipsis{
    display:-webkit-box;
    -webkit-box-orient:vertical;
  }
}
@supports not (-webkit-line-clamp: 1){
  .rs-text-ellipsis{
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:break-word;
  }
}
.rs-text-primary{
  --rs-text-color:var(--rs-primary-500);
}
.rs-text-secondary{
  --rs-text-color:var(--rs-secondary-500);
}
.rs-text-success{
  --rs-text-color:var(--rs-success-500);
}
.rs-text-warning{
  --rs-text-color:var(--rs-warning-500);
}
.rs-text-error{
  --rs-text-color:var(--rs-error-500);
}
.rs-text-info{
  --rs-text-color:var(--rs-info-500);
}
.rs-text-dark{
  --rs-text-color:var(--rs-dark-500);
}
.rs-text-cyan{
  --rs-text-color:var(--rs-cyan-500);
}
.rs-text-violet{
  --rs-text-color:var(--rs-violet-500);
}
.rs-text-orange{
  --rs-text-color:var(--rs-orange-500);
}
.rs-text-yellow{
  --rs-text-color:var(--rs-yellow-500);
}
.rs-text-green{
  --rs-text-color:var(--rs-green-500);
}
.rs-text-red{
  --rs-text-color:var(--rs-red-500);
}
.rs-text-blue{
  --rs-text-color:var(--rs-blue-500);
}
.rs-text:where([style*=size-xs]){
  --rs-text-line-height:var(--rs-text-line-height-xs);
}
.rs-text:where([style*=size-sm]){
  --rs-text-line-height:var(--rs-text-line-height-sm);
}
.rs-text:where([style*=size-md]){
  --rs-text-line-height:var(--rs-text-line-height-md);
}
.rs-text:where([style*=size-lg]){
  --rs-text-line-height:var(--rs-text-line-height-lg);
}
.rs-text:where([style*=size-xl]){
  --rs-text-line-height:var(--rs-text-line-height-xl);
}
.rs-text:where([style*=size-2xl]){
  --rs-text-line-height:var(--rs-text-line-height-2xl);
}
.rs-text:where([style*=size-3xl]){
  --rs-text-line-height:var(--rs-text-line-height-3xl);
}
.rs-text:where([style*=size-4xl]){
  --rs-text-line-height:var(--rs-text-line-height-4xl);
}
.rs-text:where([style*=size-5xl]){
  --rs-text-line-height:var(--rs-text-line-height-5xl);
}
.rs-text:where([style*=size-6xl]){
  --rs-text-line-height:var(--rs-text-line-height-6xl);
}

kbd.rs-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  flex-shrink:0;
  white-space:nowrap;
  word-spacing:-0.4em;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  border-radius:var(--rs-radius-sm);
  line-height:1.7em;
  padding-inline-start:0.5em;
  padding-inline-end:0.5em;
  padding-bottom:0.05em;
  height:-moz-fit-content;
  height:fit-content;
  box-sizing:border-box;
  background-color:var(--rs-kbd-bg);
  border:solid 1px var(--rs-kbd-border);
  box-shadow:inset 0 -1px 0 var(--rs-kbd-border);
  color:var(--rs-kbd-text);
  font-family:var(--rs-kbd-font-family);
  font-size:var(--rs-kbd-font-size);
  letter-spacing:var(--rs-kbd-letter-spacing);
}

blockquote.rs-text{
  font-style:italic;
  padding-inline-start:1.5rem;
  border-left:2px solid var(--rs-gray-200);
}