Create typo style

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;
+}