crashmedia/Arctic_Wolves
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Aurora-Glass design system - complete implementation #3

Closed
crashmedia wants to merge 560 commits from feature/design-system-themes into main
pull from: feature/design-system-themes
merge into: crashmedia:main
Conversation 0 Commits 560 Files changed 541 +7617 -68329
crashmedia commented 2026-05-29 19:39:08 +00:00
Owner
Copy link

Complete Aurora-Glass design system implementation. 350+ files updated including all desktop views, PWA views, CSS files, scoreboard redesign, and 20 mockup screenshots.

Complete Aurora-Glass design system implementation. 350+ files updated including all desktop views, PWA views, CSS files, scoreboard redesign, and 20 mockup screenshots.
- Glass Deep: 20 views
- Frosted Midnight: 20 views
- Aurora Glass: 20 views

Screenshots captured at 1440x900 viewport using Playwright
- Change .sb-board from 7-column grid to flex layout (home card | clock | guest card)
- Apply aurora-glass to team cards: glass-medium, backdrop-filter blur(16px) saturate(180%), radius-2xl
- Floating clock: .sb-board-center has no background, no card - just floats between panels
- Penalty stacks get glass-light background with radius-xl
- Stat boxes get glass-light with radius-xl
- Control panels (.sb-panel) get glass-medium + radius-2xl
- Scoresheet sections (.sb-ss-section) get glass-medium + radius-2xl
- Modals get glass styling with radius-2xl
- All inputs/buttons/controls use radius-xl and glass-light
- Mockup extensions updated to match 2-card flex layout
- Responsive breakpoints updated for flex layout (768px: clock goes on top)
- Preserved: team colors, LED scores, amber clock, penalty boxes, PP indicators, goal light, buzzer
- .sb-ctrl-panel: glass-medium bg, backdrop-filter blur(16px) saturate(180%), radius-2xl
- .sb-ctrl-btn-secondary: glass-light bg, backdrop-filter blur(8px)
- All buttons/inputs: radius-xl (18px)
- Penalty list: glass-light bg, radius-xl
- Preserved all existing functionality and HTML structure
- Info box border-radius: 6px -> var(--radius-xl)
- Main section styling already handled by CSS .sb-ss-section update
Replace old design tokens with Aurora-Glass equivalents:
- --bg-card → --glass-light
- --bg-main → --bg-base
- --bg-hover → --glass-subtle
- --bg-secondary → --bg-surface-1
- --border → --border-subtle
- --text-white → --text-primary
- --text-muted → --text-tertiary
- --text-dim → --text-secondary
- --primary-10/15/20 → --primary-subtle
- Add backdrop-filter: blur(16px) saturate(180%)
- Remove colored glows
Replace old design tokens with Aurora-Glass equivalents:
- --bg-card → --glass-light
- --bg-main → --bg-base
- --bg-hover → --glass-subtle
- --bg-secondary → --bg-surface-1
- --border → --border-subtle
- --text-white → --text-primary
- --text-muted → --text-tertiary
- --text-dim → --text-secondary
- --primary-10/15/20 → --primary-subtle
- Add backdrop-filter: blur(16px) saturate(180%)
- Remove colored glows
Replace old design tokens with Aurora-Glass equivalents and add backdrop-filter glass effects.
Replace old design tokens with Aurora-Glass equivalents and add backdrop-filter glass effects.
Replace old design tokens with Aurora-Glass equivalents and add backdrop-filter glass effects.
crashmedia closed this pull request 2026-05-29 19:42:22 +00:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
crashmedia/Arctic_Wolves!3
No description provided.