This commit is contained in:
MOH
@@ -2,7 +2,13 @@
|
||||
|
||||
## 1. UI primitive source of truth
|
||||
|
||||
The current primitive source of truth is:
|
||||
The current primitive source of truth is the local
|
||||
|
||||
`components/ui`
|
||||
|
||||
layer.
|
||||
|
||||
Current core primitive files:
|
||||
|
||||
- `components/ui/button.tsx`
|
||||
- `components/ui/card.tsx`
|
||||
@@ -21,11 +27,11 @@ The current primitive source of truth is:
|
||||
- `components/ui/label.tsx`
|
||||
- `components/ui/separator.tsx`
|
||||
|
||||
Feature code currently reuses these primitives directly.
|
||||
Feature code currently imports these local primitives rather than importing Radix primitives directly.
|
||||
|
||||
## 2. Libraries currently used for UI, motion, icons, and class composition
|
||||
|
||||
UI primitives and wrappers:
|
||||
UI primitives and wrappers currently used:
|
||||
|
||||
- `@radix-ui/react-accordion`
|
||||
- `@radix-ui/react-checkbox`
|
||||
@@ -34,16 +40,16 @@ UI primitives and wrappers:
|
||||
- `@radix-ui/react-select`
|
||||
- `@radix-ui/react-slot`
|
||||
|
||||
Motion:
|
||||
Motion currently used:
|
||||
|
||||
- `framer-motion`
|
||||
- `tailwindcss-animate`
|
||||
|
||||
Icons:
|
||||
Icons currently used:
|
||||
|
||||
- `lucide-react`
|
||||
|
||||
Class composition:
|
||||
Class composition currently used:
|
||||
|
||||
- `class-variance-authority`
|
||||
- `clsx`
|
||||
@@ -52,21 +58,19 @@ Class composition:
|
||||
Shared helper:
|
||||
|
||||
- `lib/utils.ts`
|
||||
- `cn(...inputs)`
|
||||
|
||||
Source files:
|
||||
Current helper function:
|
||||
|
||||
- `package.json`
|
||||
- `lib/utils.ts`
|
||||
`cn()`
|
||||
|
||||
## 3. Current token system in use
|
||||
|
||||
The active semantic token layer is defined in:
|
||||
The active token system is defined in:
|
||||
|
||||
- `app/globals.css`
|
||||
- `tailwind.config.ts`
|
||||
|
||||
Current color token groups exposed in Tailwind:
|
||||
Current semantic color tokens exposed in Tailwind:
|
||||
|
||||
- `background`
|
||||
- `foreground`
|
||||
@@ -100,7 +104,7 @@ Current color token groups exposed in Tailwind:
|
||||
- `status.warning-soft`
|
||||
- `sidebar.*`
|
||||
|
||||
Current tokenized utility usage in shared UI is based on:
|
||||
Current shared utility usage is centered on:
|
||||
|
||||
- `bg-card`
|
||||
- `bg-background`
|
||||
@@ -111,46 +115,56 @@ Current tokenized utility usage in shared UI is based on:
|
||||
- `border-border/80`
|
||||
- `border-border/70`
|
||||
- `border-input`
|
||||
- `hover:bg-accent`
|
||||
|
||||
There are also decorative hero tokens still present in current code:
|
||||
|
||||
- `--hero-base`
|
||||
- `--hero-ink`
|
||||
- `--hero-left`
|
||||
- `--hero-right`
|
||||
- `--hero-bottom`
|
||||
|
||||
## 4. Current radius system in use
|
||||
|
||||
Defined in:
|
||||
Current radius tokens in:
|
||||
|
||||
- `app/globals.css`
|
||||
- `tailwind.config.ts`
|
||||
|
||||
Current radius tokens:
|
||||
are:
|
||||
|
||||
- `--radius-surface: 24px`
|
||||
- `--radius-nested: 16px`
|
||||
- `--radius-pill: 9999px`
|
||||
|
||||
Current mapped utilities:
|
||||
Current Tailwind mappings in:
|
||||
|
||||
- `tailwind.config.ts`
|
||||
|
||||
are:
|
||||
|
||||
- `rounded-surface`
|
||||
- `rounded-nested`
|
||||
- `rounded-pill`
|
||||
|
||||
Current shared primitive usage:
|
||||
Current usage pattern:
|
||||
|
||||
- surface containers:
|
||||
- `rounded-surface`
|
||||
- `rounded-surface`
|
||||
- outer surfaces and primitive containers
|
||||
- `components/ui/card.tsx`
|
||||
- `components/ui/app-card.tsx`
|
||||
- `components/ui/dialog.tsx`
|
||||
- `components/ui/select.tsx`
|
||||
- `components/ui/tabs.tsx`
|
||||
- controls and nested blocks:
|
||||
- `rounded-nested`
|
||||
- `rounded-nested`
|
||||
- controls and inner blocks
|
||||
- `components/ui/button.tsx`
|
||||
- `components/ui/input.tsx`
|
||||
- `components/ui/textarea.tsx`
|
||||
- `components/ui/select.tsx`
|
||||
- `components/ui/dialog.tsx`
|
||||
- `components/ui/sheet.tsx`
|
||||
- pill controls:
|
||||
- `rounded-pill`
|
||||
- `rounded-pill`
|
||||
- top-level chrome controls
|
||||
- `components/layout/site-header.tsx`
|
||||
- `components/layout/floating-preferences.tsx`
|
||||
|
||||
@@ -162,11 +176,9 @@ Source:
|
||||
|
||||
- `components/ui/card.tsx`
|
||||
|
||||
Current base rule:
|
||||
Current base surface rule:
|
||||
|
||||
```tsx
|
||||
rounded-surface border border-border/80 bg-card text-card-foreground shadow-card
|
||||
```
|
||||
`rounded-surface border border-border/80 bg-card text-card-foreground shadow-card`
|
||||
|
||||
### `AppCard`
|
||||
|
||||
@@ -199,9 +211,9 @@ Current interactive rule:
|
||||
|
||||
- `hover:bg-accent/30 hover:text-accent-foreground`
|
||||
|
||||
### Current surface usage in feature code
|
||||
Current feature code now reuses these levels in shared admin surfaces.
|
||||
|
||||
Nested surface blocks currently reuse `AppCard` directly in:
|
||||
Examples:
|
||||
|
||||
- `components/root/media-field-picker.tsx`
|
||||
- `components/root/portfolio-projects-overview.tsx`
|
||||
@@ -217,11 +229,9 @@ Source:
|
||||
|
||||
- `components/ui/button.tsx`
|
||||
|
||||
Base:
|
||||
Current base rule:
|
||||
|
||||
```tsx
|
||||
inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-nested text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
|
||||
```
|
||||
`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-nested text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`
|
||||
|
||||
Current variants:
|
||||
|
||||
@@ -238,17 +248,6 @@ Current variants:
|
||||
- `destructive`
|
||||
- `bg-destructive text-destructive-foreground hover:bg-destructive/90`
|
||||
|
||||
Current sizes:
|
||||
|
||||
- `default`
|
||||
- `h-10 px-4 py-2`
|
||||
- `sm`
|
||||
- `h-9 px-3`
|
||||
- `lg`
|
||||
- `h-11 px-6`
|
||||
- `icon`
|
||||
- `h-10 w-10`
|
||||
|
||||
### Input
|
||||
|
||||
Source:
|
||||
@@ -257,9 +256,7 @@ Source:
|
||||
|
||||
Current rule:
|
||||
|
||||
```tsx
|
||||
flex h-10 w-full rounded-nested border border-input bg-background px-3 py-2 text-base text-foreground shadow-xs ring-offset-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-0
|
||||
```
|
||||
`flex h-10 w-full rounded-nested border border-input bg-background px-3 py-2 text-base text-foreground shadow-xs ... focus-visible:border-ring ... focus-visible:ring-ring/30`
|
||||
|
||||
### Select
|
||||
|
||||
@@ -269,21 +266,15 @@ Source:
|
||||
|
||||
Current trigger rule:
|
||||
|
||||
```tsx
|
||||
flex h-10 w-full items-center justify-between rounded-nested border border-input bg-background px-3 py-2 text-sm shadow-xs
|
||||
```
|
||||
`flex h-10 w-full items-center justify-between rounded-nested border border-input bg-background px-3 py-2 text-sm shadow-xs`
|
||||
|
||||
Current content rule:
|
||||
|
||||
```tsx
|
||||
rounded-surface border border-input bg-background text-foreground shadow-panel
|
||||
```
|
||||
`rounded-surface border border-input bg-background text-foreground shadow-panel`
|
||||
|
||||
Current item rule:
|
||||
|
||||
```tsx
|
||||
rounded-nested ... focus:bg-accent focus:text-accent-foreground
|
||||
```
|
||||
`rounded-nested ... focus:bg-accent focus:text-accent-foreground`
|
||||
|
||||
### Dialog
|
||||
|
||||
@@ -293,21 +284,15 @@ Source:
|
||||
|
||||
Current overlay rule:
|
||||
|
||||
```tsx
|
||||
fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm
|
||||
```
|
||||
`fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm`
|
||||
|
||||
Current content rule:
|
||||
|
||||
```tsx
|
||||
rounded-surface border border-border/80 bg-card p-6 text-card-foreground shadow-panel
|
||||
```
|
||||
`rounded-surface border border-border/80 bg-card p-6 text-card-foreground shadow-panel`
|
||||
|
||||
Current close button rule:
|
||||
|
||||
```tsx
|
||||
inline-flex h-8 w-8 items-center justify-center rounded-nested text-muted-foreground hover:bg-accent hover:text-foreground
|
||||
```
|
||||
`inline-flex h-8 w-8 items-center justify-center rounded-nested text-muted-foreground hover:bg-accent hover:text-foreground`
|
||||
|
||||
### Sheet
|
||||
|
||||
@@ -317,15 +302,11 @@ Source:
|
||||
|
||||
Current overlay rule matches `Dialog`:
|
||||
|
||||
```tsx
|
||||
fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm
|
||||
```
|
||||
`fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm`
|
||||
|
||||
Current content rule:
|
||||
|
||||
```tsx
|
||||
border-border/80 bg-card p-6 text-card-foreground shadow-panel
|
||||
```
|
||||
`border-border/80 bg-card p-6 text-card-foreground shadow-panel`
|
||||
|
||||
Current side radius rules:
|
||||
|
||||
@@ -342,21 +323,15 @@ Source:
|
||||
|
||||
Current list rule:
|
||||
|
||||
```tsx
|
||||
inline-flex ... gap-2 rounded-surface border border-border/80 bg-muted/40 p-1.5
|
||||
```
|
||||
`inline-flex ... gap-2 rounded-surface border border-border/80 bg-muted/40 p-1.5`
|
||||
|
||||
Current trigger rule:
|
||||
|
||||
```tsx
|
||||
rounded-nested px-3 py-2 text-sm font-medium text-muted-foreground
|
||||
```
|
||||
`rounded-nested px-3 py-2 text-sm font-medium text-muted-foreground`
|
||||
|
||||
Current active rule:
|
||||
Current active trigger rule:
|
||||
|
||||
```tsx
|
||||
border border-border/80 bg-background text-foreground shadow-xs
|
||||
```
|
||||
`border border-border/80 bg-background text-foreground shadow-xs`
|
||||
|
||||
## 7. Current layout/container rules in use
|
||||
|
||||
@@ -366,11 +341,9 @@ Source:
|
||||
|
||||
- `components/layout/container.tsx`
|
||||
|
||||
Current base container rule:
|
||||
Current base rule:
|
||||
|
||||
```tsx
|
||||
mx-auto w-full px-4 sm:px-6 lg:px-8
|
||||
```
|
||||
`mx-auto w-full px-4 sm:px-6 lg:px-8`
|
||||
|
||||
Current size variants:
|
||||
|
||||
@@ -383,7 +356,18 @@ Current size variants:
|
||||
- `admin`
|
||||
- `max-w-admin`
|
||||
|
||||
### Shared public chrome
|
||||
Mapped widths from:
|
||||
|
||||
- `app/globals.css`
|
||||
|
||||
are:
|
||||
|
||||
- `--container-narrow: 48rem`
|
||||
- `--container-default: 72rem`
|
||||
- `--container-wide: 80rem`
|
||||
- `--container-admin: 88rem`
|
||||
|
||||
### Shared public top chrome
|
||||
|
||||
Current shared top controls use:
|
||||
|
||||
@@ -404,7 +388,7 @@ Current admin layout still uses:
|
||||
|
||||
- `min-h-screen bg-muted/30`
|
||||
- `grid min-h-screen lg:grid-cols-[280px_minmax(0,1fr)]`
|
||||
- `sticky top-0`
|
||||
- sticky sidebar and header
|
||||
- `p-4 lg:p-6`
|
||||
|
||||
Source:
|
||||
@@ -413,7 +397,7 @@ Source:
|
||||
|
||||
## 8. Current spacing rhythm in use
|
||||
|
||||
Current repeated spacing values across primitives and layout:
|
||||
Current repeated spacing values:
|
||||
|
||||
- `p-4`
|
||||
- `p-6`
|
||||
@@ -446,6 +430,15 @@ Current primitive spacing sources:
|
||||
- `Container`
|
||||
- `px-4 sm:px-6 lg:px-8`
|
||||
|
||||
Current layout spacing is also built around:
|
||||
|
||||
- `gap-section`
|
||||
- `gap-content`
|
||||
|
||||
from:
|
||||
|
||||
- `tailwind.config.ts`
|
||||
|
||||
## 9. Current motion rules in use
|
||||
|
||||
Primary motion library:
|
||||
@@ -460,16 +453,16 @@ Current motion patterns:
|
||||
|
||||
- reveal-on-scroll wrapper
|
||||
- `components/motion-fade.tsx`
|
||||
- `initial: { opacity: 0, y: 20 }`
|
||||
- `whileInView: { opacity: 1, y: 0 }`
|
||||
- `transition: { duration: 0.45, ease: "easeOut" }`
|
||||
- shared overlay open/close classes
|
||||
- `dialog`
|
||||
- `sheet`
|
||||
- `select`
|
||||
- `dropdown-menu`
|
||||
- `accordion`
|
||||
- animated nav active pill and mobile menu
|
||||
- `initial={{ opacity: 0, y: 20 }}`
|
||||
- `whileInView={{ opacity: 1, y: 0 }}`
|
||||
- `transition={{ duration: 0.45, delay, ease: "easeOut" }}`
|
||||
- shared overlay and disclosure state classes
|
||||
- `components/ui/dialog.tsx`
|
||||
- `components/ui/sheet.tsx`
|
||||
- `components/ui/select.tsx`
|
||||
- `components/ui/dropdown-menu.tsx`
|
||||
- `components/ui/accordion.tsx`
|
||||
- animated navigation chrome
|
||||
- `components/layout/site-header.tsx`
|
||||
|
||||
## 10. Current icon rules in use
|
||||
@@ -478,9 +471,13 @@ Current icon library:
|
||||
|
||||
- `lucide-react`
|
||||
|
||||
Current shared rule:
|
||||
Current rule:
|
||||
|
||||
Icons are imported directly from `lucide-react` and passed through local primitives or feature components.
|
||||
icons are imported directly from
|
||||
|
||||
`lucide-react`
|
||||
|
||||
and used through local primitives or feature components.
|
||||
|
||||
Examples:
|
||||
|
||||
@@ -490,47 +487,50 @@ Examples:
|
||||
- `components/theme-toggle.tsx`
|
||||
- `components/root/portfolio-project-form.tsx`
|
||||
|
||||
No second React icon library is currently present in `package.json`.
|
||||
No second React icon library is present in:
|
||||
|
||||
- `package.json`
|
||||
|
||||
## 11. Current forbidden drift or remaining transitional areas, if any
|
||||
|
||||
The shared primitive system is currently tokenized.
|
||||
The shared primitive layer is currently tokenized.
|
||||
|
||||
Remaining transitional areas still present in the codebase:
|
||||
Remaining transitional or non-shared drift still present in the codebase:
|
||||
|
||||
- public hero / atmospheric visuals still use raw gradients and `rgba(...)` decorative backgrounds
|
||||
- public atmospheric and hero visuals still use route-specific raw gradients and `rgba(...)`
|
||||
- `components/layout/home-hero.tsx`
|
||||
- `components/layout/site-ambient-backdrop.tsx`
|
||||
- `components/layout/hero-atmosphere.tsx`
|
||||
- `components/layout/site-logo.tsx`
|
||||
- `coming-soon` page still uses older raw translucent chrome styles
|
||||
- `coming-soon` still uses older translucent raw chrome rules
|
||||
- `app/[locale]/coming-soon/page.tsx`
|
||||
- some public route-level content blocks still use direct local classes instead of shared primitive wrappers
|
||||
- some public route-level content blocks still use route-local classes instead of shared primitives
|
||||
- `app/[locale]/(site)/portfolio/page.tsx`
|
||||
- `app/[locale]/(site)/portfolio/[slug]/page.tsx`
|
||||
- one preview block in site settings still uses a custom dark preview surface
|
||||
- one custom dark preview surface remains in current admin code
|
||||
- `components/root/site-settings-form.tsx`
|
||||
- `bg-slate-950`
|
||||
- `text-white/55`
|
||||
- `text-white/60`
|
||||
- some admin and public cards still use `Card` with local class overrides instead of `AppCard`
|
||||
- `app/root/page.tsx`
|
||||
- `components/dashboard/dashboard-card.tsx`
|
||||
|
||||
These files exist in the current codebase and should be treated as remaining transitional areas, not as shared-system rules.
|
||||
These are current areas in the repository, but they are not the shared-system rules.
|
||||
|
||||
## 12. Codex rules derived from the current system
|
||||
|
||||
- Use `components/ui` as the primitive source of truth.
|
||||
- Use `cn()` from `lib/utils.ts` for class composition.
|
||||
- Use `cva()` where the primitive already exposes variants.
|
||||
- Use semantic tokens already defined in `app/globals.css` and mapped in `tailwind.config.ts`.
|
||||
- Use `Card` for the base surface:
|
||||
- `rounded-surface border border-border/80 bg-card text-card-foreground shadow-card`
|
||||
- Use `Card` as the base surface primitive.
|
||||
- Use `AppCard` when feature code needs explicit shared surface levels.
|
||||
- Use `AppCard level={1}` for primary card surfaces.
|
||||
- Use `AppCard level={2}` for nested panels and inner blocks.
|
||||
- Use `AppCard level={3}` for elevated grouped panels.
|
||||
- Use `rounded-surface`, `rounded-nested`, and `rounded-pill` as the shared radius system.
|
||||
- Use `Input`, `Textarea`, `Select`, `Dialog`, `Sheet`, and `Tabs` from `components/ui` instead of re-creating those patterns in feature code.
|
||||
- Use `Input`, `Textarea`, `Select`, `Dialog`, `Sheet`, and `Tabs` from `components/ui` instead of rebuilding those patterns in feature code.
|
||||
- Use `Container` for width and horizontal padding rules.
|
||||
- Use `lucide-react` for icons.
|
||||
- Use `framer-motion` for custom motion and `tailwindcss-animate` for primitive state transitions.
|
||||
- Do not treat transitional decorative hero files or remaining route-local raw blocks as shared-system primitives.
|
||||
- Do not treat route-specific hero visuals or transitional raw blocks as shared-system primitives.
|
||||
|
||||
Reference in New Issue
Block a user