lumo-css-framework/typography.css

CSS framework for building web apps using Vaadin's Lumo theme

/* === Font size === */
.text-2xs {
  font-size: var(--lumo-font-size-xxs);
}
.text-xs {
  font-size: var(--lumo-font-size-xs);
}
.text-s {
  font-size: var(--lumo-font-size-s);
}
.text-m {
  font-size: var(--lumo-font-size-m);
}
.text-l {
  font-size: var(--lumo-font-size-l);
}
.text-xl {
  font-size: var(--lumo-font-size-xl);
}
.text-2xl {
  font-size: var(--lumo-font-size-xxl);
}
.text-3xl {
  font-size: var(--lumo-font-size-xxxl);
}

/* === Font weight === */
.font-thin {
  font-weight: 100; 
}
.font-extralight {
  font-weight: 200; 
}
.font-light {
  font-weight: 300; 
}
.font-normal {
  font-weight: 400; 
}
.font-medium {
  font-weight: 500; 
}
.font-semibold {
  font-weight: 600; 
}
.font-bold {
  font-weight: 700; 
}
.font-extrabold {
  font-weight: 800; 
}
.font-black {
  font-weight: 900; 
}

/* === Line height === */
.leading-none {
  line-height: 1;
}
.leading-xs {
  line-height: var(--lumo-line-height-xs);
}
.leading-s {
  line-height: var(--lumo-line-height-s);
}
.leading-m {
  line-height: var(--lumo-line-height-m);
}

/* === List style type === */
.list-none {
  list-style-type: none;
}

/* === Text alignment === */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}

/* === Text color === */
.text-header {
  color: var(--lumo-header-text-color);
}
.text-body {
  color: var(--lumo-body-text-color);
}
.text-secondary {
  color: var(--lumo-secondary-text-color);
}
.text-tertiary {
  color: var(--lumo-tertiary-text-color);
}
.text-disabled {
  color: var(--lumo-disabled-text-color);
}
.text-primary {
  color: var(--lumo-primary-text-color);
}
.text-primary-contrast {
  color: var(--lumo-primary-contrast-color);
}
.text-error {
  color: var(--lumo-error-text-color);
}
.text-error-contrast {
  color: var(--lumo-error-contrast-color);
}
.text-success {
  color: var(--lumo-success-text-color);
}
.text-success-contrast {
  color: var(--lumo-success-contrast-color);
}

/* === Text overflow === */
.overflow-clip {
  text-overflow: clip;
}
.overflow-ellipsis {
  text-overflow: ellipsis;
}

/* === Text transform === */
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}

/* === Whitespace === */
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}

/* === Responsive design === */
@media (min-width: 640px) {
  .sm\:text-2xs {
    font-size: var(--lumo-font-size-xxs);
  }
  .sm\:text-xs {
    font-size: var(--lumo-font-size-xs);
  }
  .sm\:text-s {
    font-size: var(--lumo-font-size-s);
  }
  .sm\:text-m {
    font-size: var(--lumo-font-size-m);
  }
  .sm\:text-l {
    font-size: var(--lumo-font-size-l);
  }
  .sm\:text-xl {
    font-size: var(--lumo-font-size-xl);
  }
  .sm\:text-2xl {
    font-size: var(--lumo-font-size-xxl);
  }
  .sm\:text-3xl {
    font-size: var(--lumo-font-size-xxxl);
  }
}
@media (min-width: 768px) {
  .md\:text-2xs {
    font-size: var(--lumo-font-size-xxs);
  }
  .md\:text-xs {
    font-size: var(--lumo-font-size-xs);
  }
  .md\:text-s {
    font-size: var(--lumo-font-size-s);
  }
  .md\:text-m {
    font-size: var(--lumo-font-size-m);
  }
  .md\:text-l {
    font-size: var(--lumo-font-size-l);
  }
  .md\:text-xl {
    font-size: var(--lumo-font-size-xl);
  }
  .md\:text-2xl {
    font-size: var(--lumo-font-size-xxl);
  }
  .md\:text-3xl {
    font-size: var(--lumo-font-size-xxxl);
  }
}
@media (min-width: 1024px) {
  .lg\:text-2xs {
    font-size: var(--lumo-font-size-xxs);
  }
  .lg\:text-xs {
    font-size: var(--lumo-font-size-xs);
  }
  .lg\:text-s {
    font-size: var(--lumo-font-size-s);
  }
  .lg\:text-m {
    font-size: var(--lumo-font-size-m);
  }
  .lg\:text-l {
    font-size: var(--lumo-font-size-l);
  }
  .lg\:text-xl {
    font-size: var(--lumo-font-size-xl);
  }
  .lg\:text-2xl {
    font-size: var(--lumo-font-size-xxl);
  }
  .lg\:text-3xl {
    font-size: var(--lumo-font-size-xxxl);
  }
}
@media (min-width: 1280px) {
  .xl\:text-2xs {
    font-size: var(--lumo-font-size-xxs);
  }
  .xl\:text-xs {
    font-size: var(--lumo-font-size-xs);
  }
  .xl\:text-s {
    font-size: var(--lumo-font-size-s);
  }
  .xl\:text-m {
    font-size: var(--lumo-font-size-m);
  }
  .xl\:text-l {
    font-size: var(--lumo-font-size-l);
  }
  .xl\:text-xl {
    font-size: var(--lumo-font-size-xl);
  }
  .xl\:text-2xl {
    font-size: var(--lumo-font-size-xxl);
  }
  .xl\:text-3xl {
    font-size: var(--lumo-font-size-xxxl);
  }
}
@media (min-width: 1536px) {
  .\32xl\:text-2xs {
    font-size: var(--lumo-font-size-xxs);
  }
  .\32xl\:text-xs {
    font-size: var(--lumo-font-size-xs);
  }
  .\32xl\:text-s {
    font-size: var(--lumo-font-size-s);
  }
  .\32xl\:text-m {
    font-size: var(--lumo-font-size-m);
  }
  .\32xl\:text-l {
    font-size: var(--lumo-font-size-l);
  }
  .\32xl\:text-xl {
    font-size: var(--lumo-font-size-xl);
  }
  .\32xl\:text-2xl {
    font-size: var(--lumo-font-size-xxl);
  }
  .\32xl\:text-3xl {
    font-size: var(--lumo-font-size-xxxl);
  }
}