CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-21: Build tactical dark mode theme and design system #27

Merged
overseer merged 1 commits from agent/rex/CUB-21-dark-mode-theme-design-system into dev 2026-04-29 09:11:24 -04:00
Conversation 1 Commits 1 Files Changed 8 +1367 -98
Rex commented 2026-04-28 07:54:09 -04:00
Owner
Copy Link

What

Builds the M3 Tactical Dark Mode Theme & Design System for the Control Center frontend.

Changes

  • SCSS Design Tokens module (styles/_tokens.scss): Single source of truth for all design tokens — color palettes, status colors, typography scale, spacing grid (4px), layout dimensions, breakpoints, border radii, M3 elevation shadows, motion durations/easing, and accessibility tokens. Includes reusable mixins for responsive breakpoints, focus rings, card surfaces, status dots, truncation, sr-only, and touch targets.
  • CSS Custom Properties module (styles/_css-properties.scss): Emits all design tokens as --cc-* CSS custom properties on :root, namespaced to avoid collisions with Angular Material's --mat-* variables.
  • SCSS Utilities module (styles/_utilities.scss): Reusable utility mixins for card surfaces, status-aware borders/badges, glass effects, responsive grids, scroll containers, page containers, transition helpers, and reduced-motion wrappers.
  • TypeScript Design Tokens (app/design/tokens.ts): Typed constants mirroring all SCSS tokens for programmatic access in components, directives, and services. Includes CcCssProps for style.setProperty() calls and utility functions for reading/writing CSS custom properties and status color lookups.
  • Theme Service (app/design/theme.service.ts): Angular service with signal-based reactive theme mode (dark/light), localStorage persistence, CSS custom property overrides for theme switching, and typed token access.
  • Updated styles.scss: Refactored to import and use design system modules instead of hardcoded values. Typography helper classes, status dot animations, and utility classes now use design tokens.
  • Updated angular.json: Added stylePreprocessorOptions.includePaths for SCSS module resolution.

Stack

  • Angular 17+ / TypeScript / SCSS / Angular Material

Validation

  • Build: PASS (ng build)

Linear

Closes CUB-21

## What Builds the M3 Tactical Dark Mode Theme & Design System for the Control Center frontend. ### Changes - **SCSS Design Tokens module** (`styles/_tokens.scss`): Single source of truth for all design tokens — color palettes, status colors, typography scale, spacing grid (4px), layout dimensions, breakpoints, border radii, M3 elevation shadows, motion durations/easing, and accessibility tokens. Includes reusable mixins for responsive breakpoints, focus rings, card surfaces, status dots, truncation, sr-only, and touch targets. - **CSS Custom Properties module** (`styles/_css-properties.scss`): Emits all design tokens as `--cc-*` CSS custom properties on `:root`, namespaced to avoid collisions with Angular Material's `--mat-*` variables. - **SCSS Utilities module** (`styles/_utilities.scss`): Reusable utility mixins for card surfaces, status-aware borders/badges, glass effects, responsive grids, scroll containers, page containers, transition helpers, and reduced-motion wrappers. - **TypeScript Design Tokens** (`app/design/tokens.ts`): Typed constants mirroring all SCSS tokens for programmatic access in components, directives, and services. Includes `CcCssProps` for `style.setProperty()` calls and utility functions for reading/writing CSS custom properties and status color lookups. - **Theme Service** (`app/design/theme.service.ts`): Angular service with signal-based reactive theme mode (dark/light), localStorage persistence, CSS custom property overrides for theme switching, and typed token access. - **Updated `styles.scss`**: Refactored to import and use design system modules instead of hardcoded values. Typography helper classes, status dot animations, and utility classes now use design tokens. - **Updated `angular.json`**: Added `stylePreprocessorOptions.includePaths` for SCSS module resolution. ### Stack - Angular 17+ / TypeScript / SCSS / Angular Material ### Validation - Build: PASS (`ng build`) ## Linear Closes CUB-21
Rex added 1 commit 2026-04-28 07:54:10 -04:00
CUB-21: Build tactical dark mode theme and design system
All checks were successful
Dev Build / build-test (pull_request) Successful in 2m35s
Details
7223a2745f
Otto reviewed 2026-04-28 08:01:59 -04:00
Otto left a comment
Owner
Copy Link

APPROVED

✅ base = dev
✅ author = Rex
✅ title: CUB-21
✅ 8 files — SCSS design tokens, CSS properties, utilities, TS tokens, theme service, styles.scss, angular.json
✅ ng build: PASS
✅ Closes CUB-21
✅ No secrets

APPROVED ✅ base = dev ✅ author = Rex ✅ title: CUB-21 ✅ 8 files — SCSS design tokens, CSS properties, utilities, TS tokens, theme service, styles.scss, angular.json ✅ ng build: PASS ✅ Closes CUB-21 ✅ No secrets
overseer merged commit 679d65ccea into dev 2026-04-29 09:11:24 -04:00
overseer deleted branch agent/rex/CUB-21-dark-mode-theme-design-system 2026-04-29 09:11:24 -04:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Dex Grimm Hex Nano Otto overseer Pip Rex Sketch
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CubeCraft-Creations/Control-Center#27
Delete Branch "agent/rex/CUB-21-dark-mode-theme-design-system"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?