vaadin-lumo-stylespackage.utilities.typography.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
/**
* @license
* Copyright (c) 2017 - 2024 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
export const typography = css`
/* === 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 clamp === */
[class*='line-clamp-'] {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
.line-clamp-1 {
-webkit-line-clamp: 1;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
}
.line-clamp-4 {
-webkit-line-clamp: 4;
}
.line-clamp-5 {
-webkit-line-clamp: 5;
}
.line-clamp-6 {
-webkit-line-clamp: 6;
}
/* === 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-warning {
color: var(--lumo-warning-text-color);
}
.text-warning-contrast {
color: var(--lumo-warning-contrast-color);
}
/* == Text decoration === */
.line-through {
text-decoration-line: line-through;
}
.no-underline {
text-decoration-line: none;
}
.underline {
text-decoration-line: underline;
}
/* === 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-break-spaces {
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);
}
}
`;