Developer
c5fbb6722b
- Create styles/tokens.css with CSS custom properties and dark theme - Create styles/global.css with resets, shell layout, and navigation - Create styles/utilities.css with generic utilities and primitives - Create styles/syntax-highlight.css with Prism.js theme - Update main.tsx to import the 4 new style files - Keep styles.css intact for backward compatibility Quality gates: build (pass), lint (pass) Refs: repo-restructure Task 2.1
68 lines
2.9 KiB
Markdown
68 lines
2.9 KiB
Markdown
# Task 2.1 Apply Report: Extract Global Styles and Tokens
|
||
|
||
**Status:** Success
|
||
|
||
## Files Created (4)
|
||
|
||
- `apps/web/src/styles/tokens.css` (69 lines) — CSS custom properties:
|
||
- `:root` with all design tokens (colors, spacing, breakpoints, typography)
|
||
- `[data-theme="dark"]` with dark mode overrides
|
||
|
||
- `apps/web/src/styles/global.css` (127 lines) — Global resets and shell layout:
|
||
- `* { box-sizing: border-box; }`
|
||
- `body` reset with theme background
|
||
- `a` link reset
|
||
- `.shell`, `.shell-header`, `.shell-body`, `.shell-nav`, `.shell-content`
|
||
- `.nav-item`, `.nav-item-active`, `.nav-section-title`, `.nav-divider`
|
||
- `.brand`, `.header-actions`
|
||
- `.eyebrow`
|
||
- Responsive shell media query (`@media (max-width: 767px)`)
|
||
|
||
- `apps/web/src/styles/utilities.css` (718 lines) — Utility classes and generic primitives:
|
||
- `.stack`, `.stack-sm`, `.stack-md`, `.stack-lg`
|
||
- `.row`, `.grid`
|
||
- `.truncate`, `.truncate-multiline`, `.break-word`
|
||
- Touch target utilities (`min-height: 44px`)
|
||
- `.container` with responsive breakpoints
|
||
- `.card-grid`, `.card`, `.card-label`, `.card-value`
|
||
- `.primary-button`, `.secondary-button`, `.ghost-button`
|
||
- `.user-chip`, `.center-screen`, `.page-header`
|
||
- `.dialog-overlay`, `.dialog`, `.dialog-lg`
|
||
- `.form-field`, `.form-group`, `.dialog-actions`
|
||
- `.error-text`, `.success-text`, `.danger-text`, `.danger-button`
|
||
- `.small`, `.muted`
|
||
- URL validation styles
|
||
- Responsive table/card layout utilities
|
||
- Icon system utilities
|
||
|
||
- `apps/web/src/styles/syntax-highlight.css` (131 lines) — Prism.js theme:
|
||
- `code[class*="language-"]`, `pre[class*="language-"]` base styles
|
||
- All `.token.*` color rules (comment, keyword, string, function, etc.)
|
||
- `.language-css .token.string` override
|
||
|
||
## Files Modified (1)
|
||
|
||
- `apps/web/src/main.tsx` — Replaced `import "./styles.css";` with:
|
||
```ts
|
||
import "./styles/tokens.css";
|
||
import "./styles/global.css";
|
||
import "./styles/utilities.css";
|
||
import "./styles/syntax-highlight.css";
|
||
```
|
||
|
||
## Files Preserved
|
||
|
||
- `apps/web/src/styles.css` — Kept intact for backward compatibility. Component/page-specific styles remain here and will be extracted into CSS Modules in Tasks 2.2 and 2.3.
|
||
|
||
## Quality Gate Results
|
||
|
||
- `npm run build` — **PASS** — Build succeeds, output CSS 17.58 kB
|
||
- `npm run lint` — **PASS** — Zero warnings
|
||
- Visual sanity: Shell layout, navigation, and base styles load correctly via the new imports
|
||
|
||
## Notes
|
||
|
||
- `utilities.css` is 718 lines because it contains many generic primitives (.card, .button, .dialog, .form-field) that are used across multiple components. These will be further split into CSS Modules in Tasks 2.2–2.3 as components are extracted.
|
||
- No CSS rules were modified during extraction — pure copy-paste.
|
||
- The `styles.css` file still exists and is functional; it will be deleted in Task 2.3 after all component/page styles are extracted into CSS Modules.
|