feat(css): merge mockup design system - extract 281 missing selectors from HTML mockups #1

Merged

crashmedia merged 14 commits from fix/css-mockup-design-system into main

2026-05-29 03:20:27 +00:00

crashmedia commented

2026-05-29 03:19:31 +00:00

Owner

Summary

This PR extracts the complete CSS design system from the HTML mockup files in screenshots/snapshots/ into the actual CSS files used by the live application.

Problem

The HTML mockups had ALL CSS inlined (~357 rules), but the actual CSS files only contained 54 of those selectors (16% coverage). This meant 84% of the mockup's visual design was never applied to the live site.

Changes

Updated files (5):

css/style-guide.css — merged common-ui + forms (+619 lines)
css/layout.css — merged layout + dashboard styles (+281 lines)
css/components.css — merged sessions + stats + users (+466 lines)
css/scoreboard.css — merged scoreboard styles (+285 lines)
css/tokens.css — merged base layout variables (+28 lines)

New files (8):

css/shop.css — Product grids, cart, category sidebar, filters
css/messages.css — Chat layout, notifications, notes, unread badges
css/drills.css — Drill sidebar, cards, skill bars, grids
css/gameplan.css — Video grid, ice canvas, whiteboard, clip entries
css/finance.css — Chart placeholders
css/pos.css — POS layout, cart, quantity controls
css/eval.css — Evaluation layout (sidebar + main)
css/settings.css — Device entries, status badges

Updated dashboard.php:

Added 8 new <link> tags for the new CSS files

Testing

All CSS files have been validated for balanced braces
Mockup selectors have been categorized and merged into appropriate target files
The sidebar was NOT modified (confirmed perfect)

## Summary This PR extracts the complete CSS design system from the HTML mockup files in `screenshots/snapshots/` into the actual CSS files used by the live application. ### Problem The HTML mockups had ALL CSS inlined (~357 rules), but the actual CSS files only contained 54 of those selectors (16% coverage). This meant 84% of the mockup's visual design was never applied to the live site. ### Changes **Updated files (5):** - `css/style-guide.css` — merged common-ui + forms (+619 lines) - `css/layout.css` — merged layout + dashboard styles (+281 lines) - `css/components.css` — merged sessions + stats + users (+466 lines) - `css/scoreboard.css` — merged scoreboard styles (+285 lines) - `css/tokens.css` — merged base layout variables (+28 lines) **New files (8):** - `css/shop.css` — Product grids, cart, category sidebar, filters - `css/messages.css` — Chat layout, notifications, notes, unread badges - `css/drills.css` — Drill sidebar, cards, skill bars, grids - `css/gameplan.css` — Video grid, ice canvas, whiteboard, clip entries - `css/finance.css` — Chart placeholders - `css/pos.css` — POS layout, cart, quantity controls - `css/eval.css` — Evaluation layout (sidebar + main) - `css/settings.css` — Device entries, status badges **Updated `dashboard.php`:** - Added 8 new `<link>` tags for the new CSS files ### Testing - All CSS files have been validated for balanced braces - Mockup selectors have been categorized and merged into appropriate target files - The sidebar was NOT modified (confirmed perfect)

crashmedia added 14 commits

2026-05-29 03:19:31 +00:00

feat(css): merge mockup design system into style-guide.css - add 281 missing selectors from HTML mockups 0a6ad9e0a1

feat(css): merge mockup layout and dashboard styles into layout.css 7b9ad57799

feat(css): merge mockup session, stats, and user components into components.css 0ebfb1e668

feat(css): merge mockup scoreboard styles into scoreboard.css 5a298759ec

feat(css): merge base layout variables into tokens.css 7ec80608f2

feat(css): add shop.css from mockup design system caa79adf3a

feat(css): add messages.css from mockup design system e0f66293e7

feat(css): add drills.css from mockup design system d63ae24cbd

feat(css): add gameplan.css from mockup design system c8d6eafb88

feat(css): add finance.css from mockup design system 3f4aeb88b9