refactor: extract global styles and tokens (Task 2.1)

- 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
2026-06-02 19:29:38 +00:00
parent c50d6663d5
commit c5fbb6722b
17 changed files with 1750 additions and 47 deletions
@@ -0,0 +1,67 @@
+# 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.