feat: Initial typography / prose styles

This commit is contained in:
2026-01-13 22:17:15 -05:00
parent 12048ffdd3
commit 764bc6aeea
5 changed files with 47 additions and 0 deletions

View File

@@ -1,4 +1,8 @@
@import "tailwindcss";
@import "@nuxt/ui";
@import "./a11y.css";
@import "./containers.css";
@import "./links.css";
@import "./prose.css";
@import "./typography.css";

View File

@@ -0,0 +1,7 @@
@utility disabled-default {
@apply disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75;
}
@utility focus-default {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
}

View File

@@ -0,0 +1,7 @@
/* Variant to target all children links without specific link or button classes */
@custom-variant links (& a:not([class*='link-']):not([class*='button-']));
/* Link styles */
@utility link-base { @apply cursor-pointer disabled-default transition; }
@utility link-underline { @apply link-base underline hover:decoration-primary; }
@utility link-opacity { @apply link-base hover:opacity-80; }

View File

@@ -0,0 +1,16 @@
@utility prose {
/* Headings (allow class overrides) */
h1:not([class*="heading-"]) { @apply heading-1; }
h2:not([class*="heading-"]) { @apply heading-2; }
h3:not([class*="heading-"]) { @apply heading-3; }
h4:not([class*="heading-"]) { @apply heading-4; }
/* Links */
@apply links:link-underline;
/* Paragraphs */
p:not([class*="paragraph-"]) { @apply paragraph-lg; }
/* Spacing */
@apply space-y-2;
}

View File

@@ -0,0 +1,13 @@
/* Heading styles */
@utility heading-base { @apply font-bold tracking-tight };
@utility heading-1 { @apply heading-base text-4xl; }
@utility heading-2 { @apply heading-base text-3xl; }
@utility heading-3 { @apply heading-base text-2xl; }
@utility heading-4 { @apply heading-base text-xl; }
/* Paragraph styles */
@utility paragraph-base { @apply font-sans; }
@utility paragraph-sm { @apply paragraph-base text-sm; }
@utility paragraph-md { @apply paragraph-base text-base; }
@utility paragraph-lg { @apply paragraph-base text-lg; }
@utility paragraph-xl { @apply paragraph-base text-2xl; }