headquarter/openspec/changes/repo-restructure/apply-2.1-report.md

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:

  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.