189 lines
5.1 KiB
Markdown
189 lines
5.1 KiB
Markdown
---
|
|
paths:
|
|
- "src/**/*.tsx"
|
|
- "src/**/*.css"
|
|
---
|
|
|
|
# Styling Patterns
|
|
|
|
This codebase uses **custom-defined CSS variables** for all sizing, spacing, and dimensions. **DO NOT use default Tailwind classes** that are not defined in this system.
|
|
|
|
---
|
|
|
|
## What NOT to Use
|
|
|
|
These default Tailwind classes are **NOT defined** and will not work:
|
|
|
|
```tsx
|
|
// DO NOT USE - undefined width classes
|
|
w-xs, w-sm, w-md, w-lg, w-xl, w-2xl, w-3xl, w-4xl, w-5xl, w-6xl, w-7xl
|
|
w-screen, w-min, w-max, w-fit (except these work)
|
|
w-96, w-80, w-72, w-64, w-56, w-48 (fixed pixel widths)
|
|
|
|
// DO NOT USE - undefined height classes
|
|
h-screen (use h-svh instead), h-min, h-max
|
|
h-96, h-80, h-72, h-64, h-56, h-48 (fixed pixel widths except defined ones)
|
|
|
|
// DO NOT USE - undefined spacing beyond 8
|
|
p-9, p-10, p-11, p-12, p-14, p-16, p-20, p-24, etc.
|
|
m-9, m-10, m-11, m-12, m-14, m-16, m-20, m-24, etc.
|
|
gap-9, gap-10, gap-11, gap-12, etc.
|
|
|
|
// DO NOT USE - undefined border radius
|
|
rounded-2xl, rounded-3xl (use rounded-theme or rounded-theme-capped)
|
|
```
|
|
|
|
---
|
|
|
|
## What TO Use
|
|
|
|
| Category | Use These | Don't Use |
|
|
|----------|-----------|-----------|
|
|
| **Width** | `w-5` to `w-100`, `w-content-width`, fractions | `w-xs`, `w-md`, `w-lg`, `w-96` |
|
|
| **Height** | `h-4` to `h-12`, `h-30`, `h-90` to `h-150`, `h-svh` | `h-screen`, `h-96`, `h-80` |
|
|
| **Padding** | `p-1` to `p-8` | `p-9`, `p-10`, `p-12`, `p-16` |
|
|
| **Margin** | `m-1` to `m-8` | `m-9`, `m-10`, `m-12`, `m-16` |
|
|
| **Gap** | `gap-1` to `gap-8` | `gap-9`, `gap-10`, `gap-12` |
|
|
| **Text** | `text-2xs` to `text-9xl` | (all defined) |
|
|
| **Radius** | `rounded-theme`, `rounded-theme-capped` | `rounded-2xl`, `rounded-3xl` |
|
|
|
|
---
|
|
|
|
## Spacing Scale (1-8 ONLY)
|
|
|
|
All spacing uses VW-based fluid scaling. **Only values 1-8 are defined:**
|
|
- `p-1` to `p-8`, `m-1` to `m-8`, `gap-1` to `gap-8`
|
|
- Directional: `px-4`, `py-6`, `mx-2`, `my-4`, etc.
|
|
|
|
---
|
|
|
|
## Content Width (CRITICAL FOR SECTIONS)
|
|
|
|
**`w-content-width`** is the most important width class - use it for all section content containers:
|
|
|
|
```tsx
|
|
// ALWAYS use w-content-width for section containers
|
|
<section className="relative w-full">
|
|
<div className="w-content-width mx-auto">
|
|
{/* Section content goes here */}
|
|
</div>
|
|
</section>
|
|
|
|
<div className="w-content-width" /> // Main content width
|
|
<div className="w-content-width-expanded" /> // Expanded (for carousels)
|
|
```
|
|
|
|
---
|
|
|
|
## Width Scale
|
|
|
|
| Pattern | Values | Notes |
|
|
|---------|--------|-------|
|
|
| `w-5` to `w-100` | Increments of 5 (5vw to 100vw) | Main width classes |
|
|
| `w-7_5`, `w-12_5`, etc. | Increments of 2.5 | Half-step widths |
|
|
| `w-carousel-item-3`, `w-carousel-item-4` | Carousel widths | For carousel items |
|
|
| `w-full`, `w-1/2`, `w-1/3`, etc. | Standard fractions | Tailwind defaults work |
|
|
|
|
---
|
|
|
|
## Height Scale
|
|
|
|
Heights use standard rem on desktop, but become vw-based on mobile (< 768px).
|
|
|
|
- **Standard**: `h-4` to `h-12` (1rem to 3rem)
|
|
- **Large**: `h-30`, `h-90` to `h-150` (for larger containers)
|
|
- **Viewport**: Use `h-svh` instead of `h-screen`
|
|
|
|
---
|
|
|
|
## Text Sizes
|
|
|
|
`text-2xs` to `text-9xl` - all fluid (clamp-based).
|
|
|
|
Key sizes:
|
|
- `text-base` - body text
|
|
- `text-6xl` - section headings
|
|
- `text-7xl`/`text-8xl` - hero headings
|
|
|
|
---
|
|
|
|
## Border Radius
|
|
|
|
Use theme-aware classes:
|
|
- `rounded-theme` - uses ThemeProvider setting
|
|
- `rounded-theme-capped` - max xl
|
|
|
|
---
|
|
|
|
## Hero Page Padding
|
|
|
|
Special padding for hero sections that accounts for navbar:
|
|
|
|
```tsx
|
|
<section className="py-hero-page-padding" /> // Standard
|
|
<section className="py-hero-page-padding-half" /> // Half
|
|
<section className="py-hero-page-padding-1_5" /> // 1.5x
|
|
<section className="py-hero-page-padding-double" /> // Double
|
|
```
|
|
|
|
---
|
|
|
|
## Color Variables
|
|
|
|
Defined in `src/app/styles/variables.css`:
|
|
|
|
```css
|
|
--background: #f5f4ef /* Page background */
|
|
--card: #dad6cd /* Card backgrounds */
|
|
--foreground: #2a2928 /* Text color */
|
|
--primary-cta: #2a2928 /* Primary button background */
|
|
--primary-cta-text: #f5f4ef /* Primary button text */
|
|
--secondary-cta: #ecebea /* Secondary button background */
|
|
--secondary-cta-text: #2a2928 /* Secondary button text */
|
|
--accent: #ffffff /* Accent highlights, glows */
|
|
--background-accent: #c6b180 /* Accent variant */
|
|
```
|
|
|
|
Use as Tailwind classes: `bg-background`, `text-foreground`, etc.
|
|
|
|
---
|
|
|
|
## Dynamic CSS Classes
|
|
|
|
These classes are styled based on ThemeProvider configuration:
|
|
|
|
```tsx
|
|
<div className="card rounded-theme p-6">Card content</div>
|
|
<button className="primary-button rounded-theme px-6 py-3">Primary</button>
|
|
<button className="secondary-button rounded-theme px-6 py-3">Secondary</button>
|
|
```
|
|
|
|
---
|
|
|
|
## Inverted Background Pattern
|
|
|
|
For sections that need dark backgrounds:
|
|
|
|
```typescript
|
|
// Required prop - forces explicit choice
|
|
useInvertedBackground: boolean
|
|
|
|
// Usage in component
|
|
<section className={cls("w-full", useInvertedBackground && "bg-foreground")}>
|
|
<p className={useInvertedBackground ? "text-background" : "text-foreground"}>
|
|
Content
|
|
</p>
|
|
</section>
|
|
```
|
|
|
|
---
|
|
|
|
## Using CSS Variables Directly
|
|
|
|
When you need values not available as Tailwind classes:
|
|
|
|
```tsx
|
|
<div className="bottom-[calc(var(--spacing-4)+var(--spacing-4))]" />
|
|
<div className="left-[calc(var(--vw-1)*2)]" />
|
|
```
|