Skip to content

Commit 2293bdf

Browse files
Che-ZhuChe-Zhu
authored
refactor(sandbox): pin Next.js version and add design specification (#124)
* docs: add design specification document - Define VS Code-inspired dark theme color system - Document two-section sidebar architecture - Specify component standards (Button, Card, Tabs) - Include typography, border radius, and shadow systems - Reference related files (globals.css, style.md) * refactor(dockerfile): extract Next.js version to NEXT_VERSION env variable - Add NEXT_VERSION=15.5.9 environment variable for centralized version control - Update global npm install to use create-next-app@${NEXT_VERSION} - Update npx command to use create-next-app@${NEXT_VERSION} This ensures version consistency and makes future upgrades easier by requiring changes in only one place.
1 parent 21b65af commit 2293bdf

2 files changed

Lines changed: 201 additions & 2 deletions

File tree

‎docs/design_specification.md‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
# Fulling Design Specification
2+
3+
This document defines the visual design standards for the Fulling project. All pages and components must adhere to this specification.
4+
5+
---
6+
7+
## Design Philosophy
8+
9+
### Core Principles
10+
11+
1. **VS Code-Inspired Dark Theme** — Familiar interface for developers
12+
2. **Two-Section Sidebar Architecture** — Visual separation between navigation and project areas
13+
3. **Semantic Naming** — CSS variables named by purpose for easy maintenance
14+
4. **WCAG Accessibility** — Contrast ratios meet accessibility standards
15+
16+
### Visual Hierarchy
17+
18+
| Level | Background | Usage |
19+
|-------|------------|-------|
20+
| Main Background | `#1E1E1E` | Editor/content area |
21+
| Panel Background | `#252526` | Cards, modals, tab containers |
22+
| Sidebar Navigation | `#333333` | Primary navigation area |
23+
| Sidebar Project | `#242426` | Project list area |
24+
25+
---
26+
27+
## Color System
28+
29+
### Primary Colors
30+
31+
| Variable | Value | Usage |
32+
|----------|-------|-------|
33+
| `--primary` | `#10639D` | Brand color (buttons, links, accents) |
34+
| `--primary-hover` | `#155a8a` | Primary hover state |
35+
| `--primary-foreground` | `#FFFFFF` | Text on primary elements |
36+
37+
### Functional Colors
38+
39+
| Variable | Usage |
40+
|----------|-------|
41+
| `--destructive` | Delete actions, error states (red spectrum) |
42+
| `--accent` | Hover states, highlights (`#2B2D2E`) |
43+
| `--muted` | Supporting element backgrounds |
44+
| `--muted-foreground` | Secondary text (`#808080`) |
45+
46+
### Text Colors
47+
48+
| Variable | Value | Usage |
49+
|----------|-------|-------|
50+
| `--foreground` | `#CCCCCC` | Primary text |
51+
| `--muted-foreground` | `oklch(0.72 0 0)` | Secondary text, descriptions |
52+
| `--card-foreground` | `#FFFFFF` | Card titles only |
53+
54+
### Borders
55+
56+
| Variable | Value | Usage |
57+
|----------|-------|-------|
58+
| `--border` | `#3E3E3E` | General borders |
59+
| `--input` | `oklch(0.37 0 0)` | Input field borders |
60+
| `--ring` | `oklch(0.62 0.19 259.76)` | Focus ring |
61+
62+
---
63+
64+
## Theme Configuration
65+
66+
The project supports two dark themes, switched via CSS class:
67+
68+
### `.dark` (Default)
69+
- Primary: `#10639D` (deep blue)
70+
- Suitable for: General use
71+
72+
### `.stealth` (Alternate)
73+
- Primary: `#007acc` (VS Code blue)
74+
- Suitable for: Pure VS Code experience
75+
76+
> **Note**: Light theme (`:root`) definitions exist but are incomplete. Do not use.
77+
78+
---
79+
80+
## Typography
81+
82+
| Variable | Font | Usage |
83+
|----------|------|-------|
84+
| `--font-mono` | JetBrains Mono, monospace | Code, terminal |
85+
| `--font-serif` | Source Serif 4, serif | Headings, emphasis |
86+
87+
---
88+
89+
## Border Radius System
90+
91+
| Variable | Computed Value | Usage |
92+
|----------|---------------|-------|
93+
| `--radius` | `0.375rem` | Base radius |
94+
| `--radius-sm` | `calc(var(--radius) - 4px)` | Small elements |
95+
| `--radius-md` | `calc(var(--radius) - 2px)` | Medium elements |
96+
| `--radius-lg` | `var(--radius)` | Large elements |
97+
| `--radius-xl` | `calc(var(--radius) + 4px)` | Cards, modals |
98+
99+
---
100+
101+
## Shadow System
102+
103+
Multi-level shadows optimized for dark theme:
104+
105+
| Variable | Usage |
106+
|----------|-------|
107+
| `--shadow-xs` | Minimal shadow |
108+
| `--shadow-sm` | Small shadow (default buttons) |
109+
| `--shadow-md` | Medium shadow |
110+
| `--shadow-lg` | Large shadow (modals) |
111+
| `--shadow-xl` | Extra large shadow |
112+
113+
---
114+
115+
## Component Specifications
116+
117+
### Button
118+
119+
**Variants:**
120+
121+
| Variant | Style | Usage |
122+
|---------|-------|-------|
123+
| `default` | Primary background + white text | Primary actions |
124+
| `secondary` | Secondary background + border | Secondary actions |
125+
| `outline` | Transparent + border | Neutral actions |
126+
| `ghost` | Transparent | Toolbar buttons |
127+
| `destructive` | Red background | Dangerous actions |
128+
| `link` | Link style | Text links |
129+
130+
**Sizes:**
131+
132+
| Size | Height | Usage |
133+
|------|--------|-------|
134+
| `sm` | `h-8` | Compact contexts |
135+
| `default` | `h-9` | Standard buttons |
136+
| `lg` | `h-10` | Emphasized buttons |
137+
| `icon` | `size-9` | Icon buttons |
138+
| `icon-sm` | `size-8` | Small icon buttons |
139+
| `icon-lg` | `size-10` | Large icon buttons |
140+
141+
### Card
142+
143+
- Background: `bg-card`
144+
- Border Radius: `rounded-xl`
145+
- Padding: `py-6 px-6`
146+
- Shadow: `shadow-sm`
147+
- Border: `border`
148+
149+
### Tabs
150+
151+
| State | Background | Text |
152+
|-------|------------|------|
153+
| Container | `#252526` | — |
154+
| Inactive | `#292929` | `#A0A0A0` |
155+
| Active | `#1E1E1E` | `#FFFFFF` |
156+
| Hover | `#363637` | — |
157+
158+
---
159+
160+
## Sidebar Specifications
161+
162+
### Primary Navigation
163+
164+
| Variable | Value |
165+
|----------|-------|
166+
| `--sidebar-background` | `#333333` |
167+
| `--sidebar-primary-foreground` | `#808080` |
168+
| `--sidebar-primary-active` | `#FFFFFF` |
169+
| `--sidebar-primary-hover` | `#2B2D2E` |
170+
171+
### Project Section
172+
173+
| Variable | Value |
174+
|----------|-------|
175+
| `--sidebar-project-background` | `#242426` |
176+
| `--sidebar-project-foreground` | `#CCCCCC` |
177+
| `--sidebar-project-active-background` | `#3A3D41` |
178+
179+
---
180+
181+
## Chart Colors
182+
183+
Sequential color palette for data visualization (blue-purple spectrum):
184+
185+
| Variable | Usage |
186+
|----------|-------|
187+
| `--chart-1` | Primary chart color |
188+
| `--chart-2` | Secondary chart color |
189+
| `--chart-3` | Tertiary chart color |
190+
| `--chart-4` | Quaternary chart color |
191+
| `--chart-5` | Quinary chart color |
192+
193+
---
194+
195+
## Related Files
196+
197+
- [globals.css](file:///Users/che/Documents/GitHub/fulling/app/globals.css) — CSS variable definitions
198+
- [style.md](file:///Users/che/Documents/GitHub/fulling/docs/style.md) — Detailed color reference

‎sandbox/Dockerfile‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ LABEL maintainer="FullstackAgent" \
1919
# This is safe - no actual secrets are hardcoded in the Dockerfile.
2020
ENV DEBIAN_FRONTEND=noninteractive \
2121
NODE_VERSION=22.x \
22+
NEXT_VERSION=15.5.9 \
2223
CLAUDE_CODE_VERSION=latest \
2324
PATH="/root/.local/bin:/home/fulling/.local/bin:$PATH" \
2425
TERM=xterm-256color \
@@ -82,7 +83,7 @@ RUN set -eux; \
8283
# -----------------------------------------------------------------------------
8384
RUN npm install -g \
8485
@anthropic-ai/claude-code \
85-
create-next-app \
86+
create-next-app@${NEXT_VERSION} \
8687
pnpm \
8788
prisma \
8889
typescript \
@@ -223,7 +224,7 @@ RUN set -eux; \
223224
mkdir -p "$TEMPLATE_DIR"; \
224225
cd "$TEMPLATE_DIR"; \
225226
echo "=== Creating Next.js project in $TEMPLATE_DIR ==="; \
226-
npx --yes create-next-app@latest . \
227+
npx --yes create-next-app@${NEXT_VERSION} . \
227228
--typescript \
228229
--tailwind \
229230
--eslint \

0 commit comments

Comments
 (0)