website refactor
This commit is contained in:
@@ -160,7 +160,6 @@ export function TeamLeaderboardPreview({ teams, onTeamClick }: Props) {
|
||||
- No Next.js imports
|
||||
- Only receive props and render
|
||||
- Maximum reusability
|
||||
- **Strict Layering**: Generic primitives (`Box`, `Surface`, `Stack`, `Grid`) are internal to this layer.
|
||||
- **Encapsulation**: Must NOT expose `className`, `style`, or Tailwind-specific props to consumers.
|
||||
- **Semantic APIs**: Use semantic props (e.g., `variant="primary"`, `size="large"`) instead of implementation details.
|
||||
|
||||
@@ -192,12 +191,7 @@ export function Button({ children, variant = 'primary', onClick }: ButtonProps)
|
||||
|
||||
To prevent "div wrapper" abuse and maintain architectural integrity, we enforce a strict boundary between **Primitives** and **Semantic UI**.
|
||||
|
||||
### 1. Primitives (Forbidden in Components)
|
||||
- **Primitives**: `Box`, `Surface`, `Stack`, `Grid` (in `ui/primitives/`)
|
||||
- **Internal only**: These should NEVER be imported by `components/`. They are for building semantic UI elements.
|
||||
- **Full flexibility**: They allow arbitrary styling (bg, border, shadow, etc.) to build semantic components.
|
||||
|
||||
### 2. Semantic UI & Layout (Allowed in Components)
|
||||
### Semantic UI & Layout (Allowed in Components)
|
||||
- **Building blocks**: `Card`, `Panel`, `Button`, `Table`.
|
||||
- **Layout Components**: `Layout`, `Container` (in `ui/`).
|
||||
- **Restricted flexibility**: Semantic components are restricted to their defined props. They do NOT allow arbitrary styling props (bg, border, etc.).
|
||||
|
||||
@@ -142,23 +142,6 @@ Example conceptually:
|
||||
- `intent: default | danger`
|
||||
- CSS module uses variables like `background: var(--ui-color-intent-primary)`.
|
||||
|
||||
### Primitives
|
||||
|
||||
The primitives in [`apps/website/ui/primitives`](apps/website/ui/primitives) exist to build consistent semantics. They should not encode a “theme” directly; they expose minimal layout/styling mechanics.
|
||||
|
||||
Examples in code today:
|
||||
|
||||
- [`Box`](apps/website/ui/primitives/Box.tsx:1)
|
||||
- [`Stack`](apps/website/ui/primitives/Stack.tsx:1)
|
||||
- [`Surface`](apps/website/ui/primitives/Surface.tsx:1)
|
||||
|
||||
Conceptually, primitives should either:
|
||||
|
||||
- map typed props to standard CSS properties (style object), or
|
||||
- map typed props to CSS variables that are already in the theme contract.
|
||||
|
||||
What primitives should **not** do: generate Tailwind class strings as their main behavior.
|
||||
|
||||
---
|
||||
|
||||
## Token naming: semantic + stable
|
||||
|
||||
Reference in New Issue
Block a user