@logo-elements/logo-elements-styles/utilities/typography.js

Logo Elements Design System is a design system library for modern web applications which gives your web apps Logo Applications look and feel, used by Logo Elements

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
import { css } from '@vaadin/vaadin-themable-mixin/register-styles';

export const typography = css`
  /* === Font size === */
  .text-2xs {
    font-size: var(--leds-font-size-xxs);
  }
  .text-xs {
    font-size: var(--leds-font-size-xs);
  }
  .text-s {
    font-size: var(--leds-font-size-s);
  }
  .text-m {
    font-size: var(--leds-font-size-m);
  }
  .text-l {
    font-size: var(--leds-font-size-l);
  }
  .text-xl {
    font-size: var(--leds-font-size-xl);
  }
  .text-2xl {
    font-size: var(--leds-font-size-xxl);
  }
  .text-3xl {
    font-size: var(--leds-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(--leds-line-height-xs);
  }
  .leading-s {
    line-height: var(--leds-line-height-s);
  }
  .leading-m {
    line-height: var(--leds-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(--leds-header-text-color);
  }
  .text-body {
    color: var(--leds-body-text-color);
  }
  .text-secondary {
    color: var(--leds-secondary-text-color);
  }
  .text-tertiary {
    color: var(--leds-tertiary-text-color);
  }
  .text-disabled {
    color: var(--leds-disabled-text-color);
  }
  .text-primary {
    color: var(--leds-primary-text-color);
  }
  .text-primary-contrast {
    color: var(--leds-primary-contrast-color);
  }
  .text-error {
    color: var(--leds-error-text-color);
  }
  .text-error-contrast {
    color: var(--leds-error-contrast-color);
  }
  .text-success {
    color: var(--leds-success-text-color);
  }
  .text-success-contrast {
    color: var(--leds-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(--leds-font-size-xxs);
    }
    .sm\\:text-xs {
      font-size: var(--leds-font-size-xs);
    }
    .sm\\:text-s {
      font-size: var(--leds-font-size-s);
    }
    .sm\\:text-m {
      font-size: var(--leds-font-size-m);
    }
    .sm\\:text-l {
      font-size: var(--leds-font-size-l);
    }
    .sm\\:text-xl {
      font-size: var(--leds-font-size-xl);
    }
    .sm\\:text-2xl {
      font-size: var(--leds-font-size-xxl);
    }
    .sm\\:text-3xl {
      font-size: var(--leds-font-size-xxxl);
    }
  }
  @media (min-width: 768px) {
    .md\\:text-2xs {
      font-size: var(--leds-font-size-xxs);
    }
    .md\\:text-xs {
      font-size: var(--leds-font-size-xs);
    }
    .md\\:text-s {
      font-size: var(--leds-font-size-s);
    }
    .md\\:text-m {
      font-size: var(--leds-font-size-m);
    }
    .md\\:text-l {
      font-size: var(--leds-font-size-l);
    }
    .md\\:text-xl {
      font-size: var(--leds-font-size-xl);
    }
    .md\\:text-2xl {
      font-size: var(--leds-font-size-xxl);
    }
    .md\\:text-3xl {
      font-size: var(--leds-font-size-xxxl);
    }
  }
  @media (min-width: 1024px) {
    .lg\\:text-2xs {
      font-size: var(--leds-font-size-xxs);
    }
    .lg\\:text-xs {
      font-size: var(--leds-font-size-xs);
    }
    .lg\\:text-s {
      font-size: var(--leds-font-size-s);
    }
    .lg\\:text-m {
      font-size: var(--leds-font-size-m);
    }
    .lg\\:text-l {
      font-size: var(--leds-font-size-l);
    }
    .lg\\:text-xl {
      font-size: var(--leds-font-size-xl);
    }
    .lg\\:text-2xl {
      font-size: var(--leds-font-size-xxl);
    }
    .lg\\:text-3xl {
      font-size: var(--leds-font-size-xxxl);
    }
  }
  @media (min-width: 1280px) {
    .xl\\:text-2xs {
      font-size: var(--leds-font-size-xxs);
    }
    .xl\\:text-xs {
      font-size: var(--leds-font-size-xs);
    }
    .xl\\:text-s {
      font-size: var(--leds-font-size-s);
    }
    .xl\\:text-m {
      font-size: var(--leds-font-size-m);
    }
    .xl\\:text-l {
      font-size: var(--leds-font-size-l);
    }
    .xl\\:text-xl {
      font-size: var(--leds-font-size-xl);
    }
    .xl\\:text-2xl {
      font-size: var(--leds-font-size-xxl);
    }
    .xl\\:text-3xl {
      font-size: var(--leds-font-size-xxxl);
    }
  }
  @media (min-width: 1536px) {
    .\\32xl\\:text-2xs {
      font-size: var(--leds-font-size-xxs);
    }
    .\\32xl\\:text-xs {
      font-size: var(--leds-font-size-xs);
    }
    .\\32xl\\:text-s {
      font-size: var(--leds-font-size-s);
    }
    .\\32xl\\:text-m {
      font-size: var(--leds-font-size-m);
    }
    .\\32xl\\:text-l {
      font-size: var(--leds-font-size-l);
    }
    .\\32xl\\:text-xl {
      font-size: var(--leds-font-size-xl);
    }
    .\\32xl\\:text-2xl {
      font-size: var(--leds-font-size-xxl);
    }
    .\\32xl\\:text-3xl {
      font-size: var(--leds-font-size-xxxl);
    }
  }
`;