Wave 3: fix Sass deprecation warnings (component/style fixes)

[tobydrinkall]

Summary

Wave 3 of the Angular 9→20 upgrade, based on devin/1782947720-angular20-core-upgrade (PR #417). Scoped to Sass/style fixes only — no rxjs, lint tooling, test, NgModule, or control-flow changes.

• @import → @use ... as * in src/styles.scss and all src/app/**/*.scss (partials _media.scss / _theme_variables.scss are variable-only, so as * keeps existing variable references unchanged)
• $skull-size / N → math.div($skull-size, N) in error-message.component.scss and _themes.scss (@use "sass:math" added)
• darken($theme-amoledblack-text-color, 33%) → color.adjust($theme-amoledblack-text-color, $lightness: -33%) in _themes.scss (@use "sass:color" added)
• Deprecated :host >>> shadow-piercing combinator → :host ::ng-deep in comment.component.scss and user.component.scss (was emitting Dart Sass "bogus combinator" deprecation warnings and being dropped from output)

Templates were reviewed for Angular-20-deprecated syntax — none found; *ngIf/*ngFor and NgModules intentionally left as-is per scope.

Verification

• npm run build: passes with zero Sass deprecation warnings. Only remaining warning is the pre-existing CommonJS rxjs/Observable optimization-bailout notice (rxjs is out of scope, Wave 4+).
• npm run lint: fails with Cannot find builder "@angular-devkit/build-angular:tslint" — pre-existing (tslint builder removed in the core upgrade; fixed in Wave 4).
• npm test: Executed 0 of 0 SUCCESS — no spec files exist (pre-existing).
• App renders at http://localhost:4200 via npm start:

Link to Devin session: https://app.devin.ai/sessions/43fca74241024028ac15823cadf91331
Requested by: @tobydrinkall

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[devin-ai-integration]

Devin Review found 2 potential issues.

[devin-ai-integration]

📝 Info: Sass darken() to color.adjust() conversion on an rgba color

The conversion from darken($theme-amoledblack-text-color, 33%) to color.adjust($theme-amoledblack-text-color, $lightness: -33%) at src/app/shared/scss/_themes.scss:235 is an exact behavioral equivalence per Sass documentation. However, the input color is rgba(255, 255, 255, 0.75) (defined at src/app/shared/scss/_theme_variables.scss:35), which is white at 75% opacity. Reducing lightness by 33 absolute percentage points (from 100% to 67%) produces a medium-gray at 75% opacity. The Sass team recommends color.scale() for perceptually smoother adjustments — this would produce a different (darker) result. Since this PR is a mechanical migration preserving existing behavior, color.adjust is the correct choice, but a future improvement could consider color.scale() for better perceptual consistency.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

📝 Info: @use without as * for themes import emits CSS but provides no member access

In src/styles.scss:1, _themes.scss is imported via @use "./app/shared/scss/themes" (without as *), while all other files use as *. This is intentional and correct: _themes.scss only emits CSS via @include theme(...) calls and defines no variables/mixins that styles.scss needs to reference. Using @use without as * is cleaner here since it avoids polluting the namespace. Worth noting that if _themes.scss ever exports variables or mixins that styles.scss needs, the import would need to change to as * or use the themes. namespace prefix.

---

Was this helpful? React with 👍 or 👎 to provide feedback.