docs: Restructure styling documentation and add theme toggle docs
- Simplify CLAUDE.md from ~460 to ~145 lines with imports - Add Theme System section to css-design-system.md (3 modes: auto/light/dark) - Document theme toggle UI, localStorage persistence, CSS priority order - Add paths: frontmatter to authentication.md and company-period.md - Update DESIGN_TOKENS.md Dark Mode section with toggle documentation - Clean auto-build-memory.md header (remove non-existent auto-sync reference) - Remove non-existent plugin from settings.json 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -1,3 +1,7 @@
|
||||
---
|
||||
paths: "{backend,shared}/**/*.py,src/**/*.{js,vue}"
|
||||
---
|
||||
|
||||
# Authentication Rules
|
||||
|
||||
## JWT Token Structure (IMMUTABLE)
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
# Auto-Build Learned Patterns & Gotchas
|
||||
# Learned Patterns & Gotchas
|
||||
|
||||
**Last updated**: 2025-12-24T00:10:00Z
|
||||
**Source**: `.auto-build/memory/*.json` (auto-synced)
|
||||
**Last updated**: 2025-12-24
|
||||
**Maintained**: Manually (add new patterns/gotchas as discovered)
|
||||
|
||||
This file is automatically loaded by Claude Code and contains insights learned during feature implementations using the Auto-Build system.
|
||||
This file contains insights learned during feature implementations. Claude Code auto-loads this file to prevent repeating past mistakes.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
---
|
||||
paths: "{backend,shared}/**/*.py,src/**/*.{js,vue}"
|
||||
---
|
||||
|
||||
# Company & Period Selection Rules
|
||||
|
||||
## Store Factories (MANDATORY)
|
||||
|
||||
@@ -14,20 +14,36 @@ paths: src/modules/**/*.{vue,css}
|
||||
- Check `CSS_PATTERNS.md` BEFORE writing any CSS
|
||||
- Import shared styles from `shared/frontend/styles/`
|
||||
|
||||
## Dark Mode Support (CRITICAL)
|
||||
Dark mode is ACTIVE via `@media (prefers-color-scheme: dark)`.
|
||||
## Theme System (3 Modes) - CRITICAL
|
||||
|
||||
**Use semantic surface tokens for backgrounds:**
|
||||
ROA2WEB are **theme toggle în header**: auto → light → dark
|
||||
|
||||
| Mode | Comportament | CSS Selector |
|
||||
|------|--------------|--------------|
|
||||
| `auto` | Urmează preferința OS | `@media (prefers-color-scheme: dark)` |
|
||||
| `light` | Forțează light mode | `[data-theme="light"]` pe `<html>` |
|
||||
| `dark` | Forțează dark mode | `[data-theme="dark"]` pe `<html>` |
|
||||
|
||||
**Detalii implementare:**
|
||||
- **Toggle:** `AppHeader.vue` (lines 137-175)
|
||||
- **Persistență:** `localStorage['user-theme']` (valori: 'light', 'dark', sau absent=auto)
|
||||
- **CSS Priority:** `[data-theme]` > `@media (prefers-color-scheme)` > default light
|
||||
|
||||
**Testare OBLIGATORIE:**
|
||||
1. Click buton temă în header (ciclează auto→light→dark)
|
||||
2. DevTools → Rendering → Emulate CSS media → prefers-color-scheme: dark
|
||||
|
||||
**Semantic surface tokens (funcționează în TOATE modurile):**
|
||||
| Token | Light | Dark | Use For |
|
||||
|-------|-------|------|---------|
|
||||
| `--surface-card` | white | dark | Card/container backgrounds |
|
||||
| `--surface-ground` | light gray | darker | Page background |
|
||||
| `--surface-hover` | hover gray | dark hover | Hover states |
|
||||
| `--surface-border` | light border | dark border | Borders |
|
||||
| `--text-color` | dark | light | Primary text |
|
||||
| `--text-color-secondary` | gray | light gray | Secondary text |
|
||||
| `--surface-card` | white | #1e293b | Card/container backgrounds |
|
||||
| `--surface-ground` | #f8fafc | #0f172a | Page background |
|
||||
| `--surface-hover` | #f1f5f9 | #334155 | Hover states |
|
||||
| `--surface-border` | #e2e8f0 | #475569 | Borders |
|
||||
| `--text-color` | #111827 | #f9fafb | Primary text |
|
||||
| `--text-color-secondary` | #6b7280 | #d1d5db | Secondary text |
|
||||
|
||||
**For status colors, use scales:**
|
||||
**Status colors (scales 50-900):**
|
||||
- Success: `--green-50` to `--green-900` (bg: 50/100, text: 500/600)
|
||||
- Warning: `--yellow-50` to `--yellow-900`
|
||||
- Error: `--red-50` to `--red-900`
|
||||
@@ -79,4 +95,4 @@ color: var(--red-600); /* Error text */
|
||||
- Use hardcoded colors like `#2563eb` (use `var(--color-primary)`)
|
||||
- Use hardcoded backgrounds like `#ffffff` or `white` (use `var(--surface-card)`)
|
||||
- Create scoped CSS for patterns that already exist in shared files
|
||||
- Forget dark mode - always test with `prefers-color-scheme: dark`
|
||||
- **Skip theme testing** - ALWAYS test cu toggle (auto/light/dark) + DevTools dark mode
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
{
|
||||
"enabledPlugins": {
|
||||
"ab@roa2web-tools": true
|
||||
},
|
||||
"statusLine": {
|
||||
"type": "command",
|
||||
"command": "input=$(cat); model=$(echo \"$input\" | jq -r '.model.display_name // \"Unknown\"'); usage=$(echo \"$input\" | jq '.context_window.current_usage'); if [ \"$usage\" != \"null\" ]; then current=$(echo \"$usage\" | jq '.input_tokens + .cache_creation_input_tokens + .cache_read_input_tokens'); size=$(echo \"$input\" | jq '.context_window.context_window_size'); pct=$((current * 100 / size)); ctx=$(printf '%d%% ctx' \"$pct\"); else ctx='0% ctx'; fi; branch=$(git -c core.useBuiltinFSMonitor=false branch --show-current 2>/dev/null || echo 'no-git'); cwd=$(basename \"$(pwd)\"); printf '\\033[36m%s\\033[0m | \\033[33m%s\\033[0m | \\033[32m%s\\033[0m | \\033[35m%s\\033[0m' \"$model\" \"$ctx\" \"$branch\" \"$cwd\""
|
||||
|
||||
Reference in New Issue
Block a user