cmds-tailwind-styles/styles/typography.scale.css

A tailwind preset of utilities for Copa Airlines design system

@layer utilities {
  .text {

    &-d {

      &1 {
        @apply text-14-20;
      }

      &2 {
        @apply text-12-16 tracking-1;
      }

      &3 {
        @apply text-12-16;
      }
    }

    &-base {
      @apply text-16-24;
    }

    &-u {

      &1 {
        @apply text-18-24;

        @screen lg {
          @apply text-20-32;
        }
      }

      &2 {
        @apply text-20-24 -tracking-063;

        @screen sm {
          @apply text-24-32 -tracking-075;
        }

        @screen md {
          @apply text-28-32 -tracking-088;
        }

        @screen lg {
          @apply text-32-40 -tracking-1;
        }
      }

      &3 {
        @apply text-24-32 -tracking-075;

        @screen sm {
          @apply text-30-40 -tracking-094;
        }

        @screen md {
          @apply text-36-40 -tracking-105;
        }

        @screen lg {
          @apply text-40-48 -tracking-1025;
        }
      }

      &4 {
        @apply text-30-32 -tracking-1025;

        @screen sm {
          @apply text-36-40 -tracking-105;
        }

        @screen md {
          @apply text-40-48 -tracking-1025;
        }

        @screen lg {
          @apply text-48-64 -tracking-105;
        }
      }

      &5 {
        @apply text-32-40 -tracking-1033;

        @screen sm {
          @apply text-44-48 -tracking-1083;
        }

        @screen md {
          @apply text-52-56 -tracking-2017;
        }

        @screen lg {
          @apply text-60-64 -tracking-205;
        }
      }

      &6 {
        @apply text-36-40 -tracking-1042;

        @screen sm {
          @apply text-56-64 -tracking-2021;
        }

        @screen md {
          @apply text-66-72 -tracking-2061;
        }

        @screen lg {
          @apply text-76-80 -tracking-3;
        }
      }
    }
  }
}