Consolidate SCSS with semantic aliases and reusable mixins

[Copilot]

Reviewed all SCSS files to eliminate hardcoded values, add missing semantic aliases, and extract repetitive patterns into mixins for improved maintainability and consistency.

Semantic Color Aliases Added

Extended semantic/_colors.scss with missing aliases:

• Error/warning states: $color-error, $color-warning, $color-error-bg
• Text variants: $color-text-error, $color-text-disabled, $color-text-muted
• Border states: $color-border-default, $color-border-light, $color-border-hover, $color-border-focus, $color-border-error
• Overlays: $color-overlay-backdrop, $color-overlay-light
• Brand colors: $color-brand-github, $color-brand-google, $color-brand-discord
• Text tone map: Added error and disabled variants

Utility Mixins Created

Added to utilities/_mixins.scss:

@mixin box-shadow($size: md) { /* uses semantic/$shadow map */ }
@mixin border($color, $width: 1px, $style: solid) { /* consistent borders */ }
@mixin border-interactive($default, $hover, $focus) { /* interactive states */ }
@mixin focus-outline($color, $width: 2px, $offset: 2px) { /* a11y focus */ }
@mixin slide-up($duration: 0.2s) { /* slide animation */ }
@mixin pulse($duration: 2.5s) { /* pulse animation */ }

Component Updates (11 files)

Replaced hardcoded values throughout:

Before:

.errorText {
  color: red;
}

.feedbackModal {
  background-color: #24292e; // GitHub
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  animation: slide-up 0.2s ease-out;
  
  @keyframes slide-up { /* 10 lines */ }
}

After:

.errorText {
  @include c.apply-text-tone(map.get(c.$text-tone, error));
}

.feedbackModal {
  background-color: c.$color-brand-github;
  @include m.box-shadow(md);
  @include m.slide-up(0.2s);
}

Updated: Input, LoginPage, ProgressBar, FeedbackWidget, Card, NavDrawer, QuestDetail, CharacterCurrentActivity, ActivityTimeline, Navbar, ActivityInput

Original prompt

Go through all my scss files. Review the styles for missing semantic aliases, and create any missing aliases. The design system semantic variables should be used everywhere. Also look for opportunities to replace repetitive code with mixins. The priority is my ability to understand how to use the code: standardised, somewhat condensed from currently, but retaining clarity.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.