diff --git a/frontend/assets/css/typo.utils.css b/frontend/assets/css/typo.utils.css new file mode 100644 index 0000000..a8fc4f7 --- /dev/null +++ b/frontend/assets/css/typo.utils.css @@ -0,0 +1,96 @@ +/* TYPO HERO */ +@utility typo-hero-1 { + @apply text-[96px] leading-[96px] font-bold; +} + +@utility typo-hero-2 { + @apply text-[72px] leading-[72px] font-bold; +} + +/* TYPE HEADING */ +@utility typo-h-1 { + @apply text-[64px] leading-[72px] font-bold; +} + +@utility typo-h-2 { + @apply text-[56px] leading-[64px] font-bold; +} + +@utility typo-h-3 { + @apply text-[48px] leading-[56px] font-bold; +} + +@utility typo-h-4 { + @apply text-[40px] leading-[52px] font-bold; +} + +@utility typo-h-5 { + @apply text-[32px] leading-[40px] font-bold; +} + +@utility typo-h-6 { + @apply text-[24px] leading-[32px] font-bold; +} + +/* TYPE SUBHEADING */ +@utility typo-sub-h-xl { + @apply text-[20px] leading-[24px] font-semibold; +} + +@utility typo-sub-h-lg { + @apply text-[18px] leading-[24px] font-semibold; +} + +@utility typo-sub-h-md { + @apply text-[16px] leading-[20px] font-semibold; +} + +@utility typo-sub-h-sm { + @apply text-[14px] leading-[20px] font-semibold; +} + +@utility typo-sub-h-xs { + @apply text-[12px] leading-[16px] font-semibold; +} + +/* TYPE PARAGRAPH */ +@utility typo-p-2xl { + @apply text-[24px] leading-[40px] font-normal; +} + +@utility typo-p-xl { + @apply text-[20px] leading-[32px] font-normal; +} + +@utility typo-p-lg { + @apply text-[18px] leading-[32px] font-normal; +} + +@utility typo-p-md { + @apply text-[16px] leading-[28px] font-normal; +} + +@utility typo-p-sm { + @apply text-[14px] leading-[24px] font-normal; +} + +@utility typo-p-xs { + @apply text-[12px] leading-[16px] font-normal; +} + +/* TYPO LABEL */ +@utility typo-label-lg { + @apply text-[18px] leading-[24px] font-medium; +} + +@utility typo-label-md { + @apply text-[16px] leading-[24px] font-medium; +} + +@utility typo-label-sm { + @apply text-[14px] leading-[20px] font-medium; +} + +@utility typo-label-xs { + @apply text-[12px] leading-[16px] font-medium; +} \ No newline at end of file