Kollektiv | Your private LLM knowledgebase

/** * Typography system * * This file defines our typography system in four main sections: * * 1. :root - Base variables that don't directly map to Tailwind utilities. * Used as references and accessed globally in CSS. * * 2. @theme inline - Variables that generate standard Tailwind utility classes * (e.g., font-bold, text-lg, text-primary). * * 3. @layer base - Default styles for basic HTML elements (h1, p, etc.). * Provides a sensible fallback but might be overridden by component-specific styles. * * 4. @layer utilities - Custom typography utility classes (`.app-typography-*`). * These are the PREFERRED way to apply consistent typography across the application, * ensuring styles apply predictably, even within components. * @plugin '@tailwindcss/typography'; /* === BASE TYPOGRAPHY VARIABLES === */ /* These variables don't generate utility classes but serve as the foundation */ :root { /* Font sizes */ --font-size-1: 0.75rem; /* 12px */ --font-size-2: 0.875rem; /* 14px */ --font-size-3: 1rem; /* 16px */ --font-size-4: 1.125rem; /* 18px */ --font-size-5: 1.25rem; /* 20px */ --font-size-6: 1.5rem; /* 24px */ --font-size-7: 1.75rem; /* 28px */ --font-size-8: 2.1875rem; /* 35px */ --font-size-9: 3.75rem; /* 60px */ /* Add fluid typography scale (preserves desktop sizes) */ --font-size-fluid-1: clamp(0.8125rem, calc(0.76rem + 0.2vw), 0.75rem); /* 13px → 12px */ --font-size-fluid-2: clamp(0.875rem, calc(0.83rem + 0.2vw), 0.875rem); /* 14px → 14px */ --font-size-fluid-3: clamp(1rem, calc(0.95rem + 0.25vw), 1rem); /* 16px → 16px */ --font-size-fluid-4: clamp(1.0625rem, calc(1rem + 0.25vw), 1.125rem); /* 17px → 18px */ --font-size-fluid-5: clamp(1.125rem, calc(1.05rem + 0.5vw), 1.25rem); /* 18px → 20px */ --font-size-fluid-6: clamp(1.25rem, calc(1.15rem + 0.5vw), 1.5rem); /* 20px → 24px */ --font-size-fluid-7: clamp(1.5rem, calc(1.35rem + 0.75vw), 1.75rem); /* 24px → 28px */ --font-size-fluid-8: clamp(1.75rem, calc(1.5rem + 1.25vw), 2.1875rem); /* 28px → 35px */ --font-size-fluid-9: clamp(2.5rem, calc(2rem + 1.75vw), 3.75rem); /* 40px → 60px */ /* Letter spacing */ --letter-spacing-1: 0.0025em; --letter-spacing-2: 0em; --letter-spacing-3: 0em; --letter-spacing-4: -0.0025em; --letter-spacing-5: -0.005em; --letter-spacing-6: -0.00625em; --letter-spacing-7: -0.0075em; --letter-spacing-8: -0.01em; --letter-spacing-9: -0.025em; /* Line heights */ --line-height-1: 1.333; /* 16px for 12px text (Size 1) */ --line-height-2: 1.428; /* 20px for 14px text (Size 2) */ --line-height-3: 1.5; /* 24px for 16px text (Size 3) */ --line-height-4: 1.444; /* 26px for 18px text (Size 4) */ --line-height-5: 1.4; /* 28px for 20px text (Size 5) */ --line-height-6: 1.25; /* 30px for 24px text (Size 6) */ --line-height-7: 1.285; /* 36px for 28px text (Size 7) */ --line-height-8: 1.142; /* 40px for 35px text (Size 8) */ --line-height-9: 1; /* 60px for 60px text (Size 9) */ /* Heading line heights */ --heading-line-height-1: 1.333; /* Same as --line-height-1 */ --heading-line-height-2: 1.428; /* Same as --line-height-2 */ --heading-line-height-3: 1.5; /* Same as --line-height-3 */ --heading-line-height-4: 1.444; /* Same as --line-height-4 */ --heading-line-height-5: 1.4; /* Same as --line-height-5 */ --heading-line-height-6: 1.25; /* Same as --line-height-6 */ --heading-line-height-7: 1.285; /* Same as --line-height-7 */ --heading-line-height-8: 1.142; /* Same as --line-height-8 */ --heading-line-height-9: 1; /* Same as --line-height-9 */ } /* Scaled down shell for AppLayout*/ [data-app-shell] { /* knock every step down by 1 step */ --font-size-fluid-3: clamp(0.875rem, calc(0.83rem + 0.2vw), 0.875rem); /* 14px → 14px */ --font-size-fluid-4: clamp(1rem, calc(0.95rem + 0.25vw), 1rem); /* 16px → 16px */ --font-size-fluid-5: clamp(1.0625rem, calc(1rem + 0.25vw), 1.125rem); /* 17px → 18px */ --font-size-fluid-6: clamp(1.125rem, calc(1.05rem + 0.5vw), 1.25rem); /* 18px → 20px */ --font-size-fluid-7: clamp(1.25rem, calc(1.15rem + 0.5vw), 1.5rem); /* 20px → 24px */ --font-size-fluid-8: clamp(1.5rem, calc(1.35rem + 0.75vw), 1.75rem); /* 24px → 28px */ --font-size-fluid-9: clamp(1.75rem, calc(1.5rem + 1.25vw), 2.1875rem); /* 28px → 35px */ /* OPTIONAL — if you see vertical crowding, uncomment these --heading-line-height-7: 1.35; --heading-line-height-8: 1.25; --heading-line-height-9: 1.15; */ } [data-app-shell] h2, [data-app-shell] h3 { /* medium (e.g. 500) instead of bold */ font-weight: var(--font-weight-medium); } [data-app-shell] ol, [data-app-shell] ul, [data-app-shell] li { font-size: var(--font-size-fluid-3); line-height: var(--line-height-3); } [data-app-shell] h4, [data-app-shell] h5, [data-app-shell] h6 { /* regular (e.g. 400) instead of medium/bold */ font-weight: var(--font-weight-regular); } /* === TAILWIND UTILITY GENERATORS === */ /* These variables generate Tailwind utility classes */ @theme inline { /* Font families */ --font-sans: Inter, sans-serif; --font-serif: Inter, serif; --font-mono: "Space Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji"; --font-brand: "Space Grotesk", sans-serif; --font-heading: var(--heading-font-family); --font-body: var(--default-font-family); /* Font weights - these generate utility classes like font-bold */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 900; /* Default typography values */ --default-font-family: "Inter", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --default-font-size: var(--font-size-3); /* Same size used for `<Text size="3">` */ --default-font-style: normal; --default-font-weight: var(--font-weight-regular); --default-line-height: 1.5; --default-letter-spacing: 0em; --default-leading-trim-start: 0.42em; --default-leading-trim-end: 0.36em; /* Heading typography */ --heading-font-family: var(--default-font-family); --heading-font-size-adjust: 1; --heading-font-style: normal; --heading-leading-trim-start: var(--default-leading-trim-start); --heading-leading-trim-end: var(--default-leading-trim-end); --heading-letter-spacing: 0em; /* Code typography */ --code-font-family: var(--font-mono); --code-font-size-adjust: 0.95; --code-font-style: normal; --code-font-weight: inherit; --code-letter-spacing: -0.007em; --code-padding-top: 0.1em; --code-padding-bottom: 0.1em; --code-padding-left: 0.25em; --code-padding-right: 0.25em; /* Strong typography */ --strong-font-family: var(--default-font-family); --strong-font-size-adjust: 1; --strong-font-style: inherit; --strong-font-weight: var(--font-weight-bold); --strong-letter-spacing: 0em; /* Em typography */ --em-font-family: "Georgia", "Georgia Pro", serif; --em-font-size-adjust: 1.18; --em-font-style: italic; --em-font-weight: inherit; --em-letter-spacing: -0.025em; /* Quote typography */ --quote-font-family: "Georgia", "Georgia Pro", serif; --quote-font-size-adjust: 1.18; --quote-font-style: italic; --quote-font-weight: inherit; --quote-letter-spacing: -0.025em; /* Tab typography */ --tab-active-letter-spacing: -0.01em; --tab-active-word-spacing: 0em; --tab-inactive-letter-spacing: 0em; --tab-inactive-word-spacing: 0em; /* Tailwind mapping - these create utility classes */ /* Update Tailwind font size mapping */ --text-xs: var(--font-size-fluid-1); --text-sm: var(--font-size-fluid-2); --text-base: var(--font-size-fluid-3); --text-lg: var(--font-size-fluid-4); --text-xl: var(--font-size-fluid-5); --text-2xl: var(--font-size-fluid-6); --text-3xl: var(--font-size-fluid-7); --text-4xl: var(--font-size-fluid-8); /* Line heights for Tailwind utilities */ --leading-none: var(--line-height-9); /* 1 */ --leading-tight: var(--line-height-6); /* 1.25 */ --leading-normal: var(--line-height-3); /* 1.5 */ --leading-relaxed: var(--line-height-2); /* 1.428 */ /* Letter spacing for Tailwind utilities */ --tracking-tight: var(--letter-spacing-9); --tracking-normal: var(--letter-spacing-6); --tracking-wide: var(--letter-spacing-3); --tracking-widest: var(--letter-spacing-1); } /* === BASE HTML ELEMENT STYLING === */ /* * @layer base is used to apply our typography system to HTML elements. * We use this instead of @theme inline for element styling because: * 1. It follows the proper cascade order in CSS * 2. It allows us to style HTML elements directly without classes * 3. It provides default styling that can be overridden with utility classes */ @layer base { body { font-family: var(--font-sans); font-size: var(--font-size-fluid-3); /* Your body text size */ line-height: var(--line-height-3); font-weight: var(--font-weight-regular); } /* Headings */ h1 { font-size: var(--font-size-fluid-9); letter-spacing: var(--letter-spacing-9); line-height: var(--heading-line-height-9); font-weight: var(--font-weight-bold); } h2 { font-size: var(--font-size-fluid-8); letter-spacing: var(--letter-spacing-8); line-height: var(--heading-line-height-8); font-weight: var(--font-weight-bold); } h3 { font-size: var(--font-size-fluid-7); letter-spacing: var(--letter-spacing-7); line-height: var(--heading-line-height-7); font-weight: var(--font-weight-bold); } h4 { font-size: var(--font-size-fluid-6); letter-spacing: var(--letter-spacing-6); line-height: var(--heading-line-height-6); font-weight: var(--font-weight-medium); } h5 { font-size: var(--font-size-fluid-5); letter-spacing: var(--letter-spacing-5); line-height: var(--heading-line-height-5); font-weight: var(--font-weight-medium); } h6 { font-size: var(--font-size-fluid-4); letter-spacing: var(--letter-spacing-4); line-height: var(--heading-line-height-4); font-weight: var(--font-weight-medium); } /* Paragraphs and text */ p { font-size: var(--font-size-fluid-3); letter-spacing: var(--letter-spacing-3); line-height: var(--line-height-3); } small { font-size: var(--font-size-fluid-1); letter-spacing: var(--letter-spacing-2); line-height: var(--line-height-2); } /* Links */ a { font-weight: var(--font-weight-medium); @apply transition-colors duration-200; } a:hover { color: var(--color-primary); } /* Code element */ code { font-family: var(--code-font-family); font-size: calc(1em * var(--code-font-size-adjust)); font-style: var(--code-font-style); font-weight: var(--code-font-weight); letter-spacing: var(--code-letter-spacing); padding-top: var(--code-padding-top); padding-bottom: var(--code-padding-bottom); padding-left: var(--code-padding-left); padding-right: var(--code-padding-right); background-color: var(--color-muted); border-radius: 3px; } /* Strong element */ strong { font-family: var(--strong-font-family); font-size: calc(1em * var(--strong-font-size-adjust)); font-style: var(--strong-font-style); font-weight: var(--strong-font-weight); letter-spacing: var(--strong-letter-spacing); } /* Emphasis element */ em { font-family: var(--em-font-family); font-size: calc(1em * var(--em-font-size-adjust)); font-style: var(--em-font-style); font-weight: var(--em-font-weight); letter-spacing: var(--em-letter-spacing); } /* Blockquote element */ blockquote { font-family: var(--quote-font-family); font-size: calc(1em * var(--quote-font-size-adjust)); font-style: var(--quote-font-style); font-weight: var(--quote-font-weight); letter-spacing: var(--quote-letter-spacing); border-left: 4px solid var(--color-border); padding-left: 1rem; margin-left: 0; margin-right: 0; } pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; overflow-x: auto; } }