feat(docs-infra): implement dark mode (#41129)

defines styles for a first iteration of an aio darkmode

PR Close #41129

aio/angular.json

@@ -44,14 +44,14 @@
               "src/styles/main.scss",
               {
                 "inject": false,
-                "input": "src/styles/custom-themes/light.scss",
+                "input": "src/styles/custom-themes/dark-theme.scss",
-                "bundleName": "assets/light"
+                "bundleName": "dark-theme"
               },
               {
                 "inject": false,
-                "input": "src/styles/custom-themes/dark.scss",
+                "input": "src/styles/custom-themes/light-theme.scss",
-                "bundleName": "assets/dark"
+                "bundleName": "light-theme"
-              },
+              }
             ],
             "scripts": [],
             "budgets": [

aio/content/marketing/index.html

@@ -8,9 +8,7 @@
   <section id="intro">
 
     <!-- LOGO -->
-    <div class="hero-logo">
+    <div class="hero-logo"></div>
-      <img src="assets/images/logos/angular/angular.svg" alt="Angular">
-    </div>
 
     <!-- CONTAINER -->
     <div class="homepage-container">

aio/content/marketing/presskit.html

@@ -37,7 +37,7 @@
 
       <div class="presskit-icon-item">
         <div class="presskit-image-container">
-          <img src="assets/images/logos/angular/angular_solidBlack.svg" alt="Black logo Angular">
+          <img src="assets/images/logos/angular/angular_solidBlack.svg" class="transparent-img" alt="Black logo Angular">
         </div>
         <div>
           <h3>One Color Logo</h3>
@@ -54,7 +54,7 @@
 
       <div class="presskit-icon-item">
         <div class="presskit-image-container">
-          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img" alt="Transparent logo Angular">
+          <img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-inverse" alt="Transparent logo Angular">
         </div>
         <div>
           <h3>One Color Inverse Logo</h3>

aio/src/app/app.component.html

@@ -1,4 +1,5 @@
 <div id="top-of-page"></div>
+
 <div *ngIf="isFetching" class="progress-bar-container">
   <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
 </div>
@@ -23,7 +24,7 @@
     </a>
     <aio-top-menu *ngIf="showTopMenu" [nodes]="topMenuNodes" [currentNode]="currentNodes?.TopBar"></aio-top-menu>
     <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
-    <aio-theme-picker></aio-theme-picker>
+    <aio-theme-toggle></aio-theme-toggle>
     <div class="toolbar-external-icons-container">
       <a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
         <mat-icon svgIcon="logos:twitter"></mat-icon>

aio/src/app/app.module.ts

@@ -42,6 +42,7 @@ import { SharedModule } from 'app/shared/shared.module';
 import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
 
 import {environment} from '../environments/environment';
+import { ThemeToggleComponent } from './shared/theme-picker/theme-toggle.component';
 
 // These are the hardcoded inline svg sources to be used by the `<mat-icon>` component.
 // tslint:disable: max-line-length
@@ -170,6 +171,7 @@ export const svgIconProviders = [
     SearchBoxComponent,
     NotificationComponent,
     TopMenuComponent,
+    ThemeToggleComponent
   ],
   providers: [
     Deployment,

aio/src/app/shared/shared.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchResultsComponent } from './search-results/search-results.component';
 import { SelectComponent } from './select/select.component';
-import { ThemePickerComponent } from './theme-picker/theme-picker.component';
 
 @NgModule({
   imports: [
@@ -10,13 +9,11 @@ import { ThemePickerComponent } from './theme-picker/theme-picker.component';
   ],
   exports: [
     SearchResultsComponent,
-    SelectComponent,
+    SelectComponent
-    ThemePickerComponent
   ],
   declarations: [
     SearchResultsComponent,
-    SelectComponent,
+    SelectComponent
-    ThemePickerComponent
   ]
 })
 export class SharedModule {}

aio/src/app/shared/theme-picker/style-manager/index.ts

@@ -1,3 +0,0 @@
-// Taken from Angular Material docs repo
-
-export * from './style-manager';

aio/src/app/shared/theme-picker/style-manager/style-manager.spec.ts

@@ -1,56 +0,0 @@
-// Taken from Angular Material docs repo
-
-import {HttpClientTestingModule} from '@angular/common/http/testing';
-import {inject, TestBed} from '@angular/core/testing';
-import {StyleManager} from './style-manager';
-
-
-describe('StyleManager', () => {
-  let styleManager: StyleManager;
-
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [HttpClientTestingModule],
-    providers: [StyleManager]
-  }));
-
-  beforeEach(inject([StyleManager], (sm: StyleManager) => {
-    styleManager = sm;
-  }));
-
-  afterEach(() => {
-    const links = document.head.querySelectorAll('link');
-    for (const link of Array.prototype.slice.call(links)) {
-      if (link.className.includes('style-manager-')) {
-        document.head.removeChild(link);
-      }
-    }
-  });
-
-  it('should add stylesheet to head', () => {
-    styleManager.setStyle('test', 'test.css');
-    const styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
-    expect(styleEl).not.toBeNull();
-    expect(styleEl.href.endsWith('test.css')).toBe(true);
-  });
-
-  it('should change existing stylesheet', () => {
-    styleManager.setStyle('test', 'test.css');
-    const styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
-    expect(styleEl).not.toBeNull();
-    expect(styleEl.href.endsWith('test.css')).toBe(true);
-
-    styleManager.setStyle('test', 'new.css');
-    expect(styleEl.href.endsWith('new.css')).toBe(true);
-  });
-
-  it('should remove existing stylesheet', () => {
-    styleManager.setStyle('test', 'test.css');
-    let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
-    expect(styleEl).not.toBeNull();
-    expect(styleEl.href.endsWith('test.css')).toBe(true);
-
-    styleManager.removeStyle('test');
-    styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
-    expect(styleEl).toBeNull();
-  });
-});

aio/src/app/shared/theme-picker/style-manager/style-manager.ts

@@ -1,48 +0,0 @@
-// Taken from Angular Material docs repo
-
-import {Injectable} from '@angular/core';
-
-
-/**
- * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
- * removed or changed later.
- */
-@Injectable()
-export class StyleManager {
-  /**
-   * Set the stylesheet with the specified key.
-   */
-  setStyle(key: string, href: string) {
-    getLinkElementForKey(key).setAttribute('href', href);
-  }
-
-  /**
-   * Remove the stylesheet with the specified key.
-   */
-  removeStyle(key: string) {
-    const existingLinkElement = getExistingLinkElementByKey(key);
-    if (existingLinkElement) {
-      document.head.removeChild(existingLinkElement);
-    }
-  }
-}
-
-function getLinkElementForKey(key: string) {
-  return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
-}
-
-function getExistingLinkElementByKey(key: string) {
-  return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
-}
-
-function createLinkElementWithKey(key: string) {
-  const linkEl = document.createElement('link');
-  linkEl.setAttribute('rel', 'stylesheet');
-  linkEl.classList.add(getClassNameForKey(key));
-  document.head.appendChild(linkEl);
-  return linkEl;
-}
-
-function getClassNameForKey(key: string) {
-  return `style-manager-${key}`;
-}

aio/src/app/shared/theme-picker/theme-picker.component.html

@@ -1,3 +0,0 @@
-<button (click)="selectTheme({ 'light': 'dark', 'dark': 'light' }[currentTheme])">
-    Change theme (Current: {{ currentTheme }})
-</button>

aio/src/app/shared/theme-picker/theme-picker.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ThemePickerComponent } from './theme-picker.component';
-
-describe('ThemePickerComponent', () => {
-  let component: ThemePickerComponent;
-  let fixture: ComponentFixture<ThemePickerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ThemePickerComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ThemePickerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

aio/src/app/shared/theme-picker/theme-picker.component.ts

@@ -1,36 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { StyleManager } from './style-manager';
-import { ThemeStorage } from './theme-storage/theme-storage';
-
-@Component({
-  selector: 'aio-theme-picker',
-  templateUrl: './theme-picker.component.html',
-  providers: [ThemeStorage, StyleManager]
-})
-export class ThemePickerComponent implements OnInit {
-
-  currentTheme: 'light' | 'dark' = 'light';
-
-  constructor(private _themeStorage: ThemeStorage, private _styleManager: StyleManager) { }
-
-  ngOnInit(): void {
-    const theme = this._themeStorage.getStoredThemeName();
-    if (theme) {
-      this.selectTheme(theme);
-    }
-  }
-
-  selectTheme(theme: string) {
-    this.currentTheme = theme as 'light' | 'dark';
-
-    if (theme === 'light') {
-      this._styleManager.removeStyle('theme');
-    } else {
-      this._styleManager.setStyle('theme', `assets/${theme}.css`);
-    }
-
-    if (this.currentTheme) {
-      this._themeStorage.storeTheme(this.currentTheme);
-    }
-  }
-}

aio/src/app/shared/theme-picker/theme-storage/index.ts

@@ -1,3 +0,0 @@
-// Taken from Angular Material docs repo
-
-export * from './theme-storage';

aio/src/app/shared/theme-picker/theme-storage/theme-storage.ts

@@ -1,28 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ThemeStorage {
-  static storageKey = 'io-theme-storage-current-name';
-
-
-  storeTheme(theme: 'light' | 'dark') {
-    try {
-      window.localStorage[ThemeStorage.storageKey] = theme;
-    } catch { }
-
-  }
-
-  getStoredThemeName(): 'light' | 'dark' | null {
-    try {
-      return window.localStorage[ThemeStorage.storageKey] || null;
-    } catch {
-      return null;
-    }
-  }
-
-  clearStorage(): void {
-    try {
-      window.localStorage.removeItem(ThemeStorage.storageKey);
-    } catch { }
-  }
-}

aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts

@@ -0,0 +1,92 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ThemeStorage, ThemeToggleComponent } from './theme-toggle.component';
+
+class FakeThemeStorage implements ThemeStorage {
+  fakeStorage: string | null = null;
+
+  getThemePreference(): string | null {
+      return this.fakeStorage;
+  }
+
+  setThemePreference(isDark: boolean): void {
+      this.fakeStorage = String(isDark);
+  }
+}
+
+let themeStorage: ThemeStorage;
+
+// Verify that FakeThemeStorage behaves like ThemeStorage would
+describe('FakeThemeStorage', () => {
+  beforeEach(() => {
+    themeStorage = new FakeThemeStorage();
+  });
+
+  it('should have null stored initially', () => {
+    expect(themeStorage.getThemePreference()).toBeNull();
+  });
+
+  it('should store true as a string if isDark is true', () => {
+    themeStorage.setThemePreference(true);
+    expect(themeStorage.getThemePreference()).toBe('true');
+  });
+
+  it('should store false as a string if isDark is false', () => {
+    themeStorage.setThemePreference(false);
+    expect(themeStorage.getThemePreference()).toBe('false');
+  });
+});
+
+
+let component: ThemeToggleComponent;
+let fixture: ComponentFixture<ThemeToggleComponent>;
+let debugElement: DebugElement;
+
+describe('ThemeToggleComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ThemeToggleComponent ],
+      providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ],
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ThemeToggleComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show toggle button', () => {
+    expect(getToggleButton()).toBeDefined();
+  });
+
+  it('should toggle between light and dark mode', () => {
+    expect(component.getThemeName()).toBe('light');
+    getToggleButton().click();
+    expect(component.getThemeName()).toBe('dark');
+  });
+
+  it('should have the correct next theme', () => {
+    component.toggleTheme();
+    expect(component.getThemeName()).toBe('dark');
+    component.toggleTheme();
+    expect(component.getThemeName()).toBe('light');
+  });
+
+  it('should have the correct aria-label', () => {
+    expect(component.getToggleLabel()).toBe(`Switch to dark mode`);
+    component.toggleTheme();
+    expect(component.getToggleLabel()).toBe(`Switch to light mode`);
+  });
+});
+
+function getToggleButton(): HTMLButtonElement {
+  return debugElement.query(By.css('button')).nativeElement;
+}

aio/src/app/shared/theme-picker/theme-toggle.component.ts

@@ -0,0 +1,91 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, Injectable } from '@angular/core';
+
+/** Injectable facade around localStorage for theme preference to make testing easier. */
+@Injectable({ providedIn: 'root' })
+export class ThemeStorage {
+  getThemePreference(): string | null {
+    // Wrap localStorage access in try/catch because user agents can block localStorage. If it is
+    // blocked, we treat it as if no preference was previously stored.
+    try {
+      return localStorage.getItem('aio-theme');
+    } catch {
+      return null;
+    }
+  }
+
+  setThemePreference(isDark: boolean): void {
+    // Wrap localStorage access in try/catch because user agents can block localStorage. If it
+    // fails, we persist nothing.
+    try {
+      localStorage.setItem('aio-theme', String(isDark));
+    } catch { }
+  }
+}
+
+@Component({
+  selector: 'aio-theme-toggle',
+  template: `
+    <button mat-icon-button type="button" (click)="toggleTheme()"
+            [title]="getToggleLabel()" [attr.aria-label]="getToggleLabel()">
+      <mat-icon>
+        {{ isDark ? 'light' : 'dark' }}_mode
+      </mat-icon>
+    </button>
+  `,
+})
+export class ThemeToggleComponent {
+  isDark = false;
+
+  constructor(@Inject(DOCUMENT) private document: Document, private readonly themeStorage: ThemeStorage) {
+    this.initializeThemeFromPreferences();
+  }
+
+  toggleTheme(): void {
+    this.isDark = !this.isDark;
+    this.updateRenderedTheme();
+  }
+
+  private initializeThemeFromPreferences(): void {
+    // Check whether there's an explicit preference in localStorage.
+    const storedPreference = this.themeStorage.getThemePreference();
+
+    // If we do have a preference in localStorage, use that. Otherwise,
+    // initialize based on the prefers-color-scheme media query.
+    if (storedPreference) {
+      this.isDark = storedPreference === 'true';
+    } else {
+      this.isDark = matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+    }
+
+    const initialTheme = this.document.querySelector('#aio-initial-theme');
+    if (initialTheme) {
+      // todo(aleksanderbodurri): change to initialTheme.remove() when ie support is dropped
+      initialTheme.parentElement?.removeChild(initialTheme);
+    }
+
+    const themeLink = this.document.createElement('link');
+    themeLink.id = 'aio-custom-theme';
+    themeLink.rel = 'stylesheet';
+    themeLink.href = `${this.getThemeName()}-theme.css`;
+    this.document.head.appendChild(themeLink);
+  }
+
+  getThemeName(): string {
+    return this.isDark ? 'dark' : 'light';
+  }
+
+  getToggleLabel(): string {
+    return `Switch to ${this.isDark ? 'light' : 'dark'} mode`;
+  }
+
+  private updateRenderedTheme(): void {
+    // If we're calling this method, the user has explicitly interacted with the theme toggle.
+    const customLinkElement = this.document.getElementById('aio-custom-theme') as HTMLLinkElement | null;
+    if (customLinkElement) {
+      customLinkElement.href = `${this.getThemeName()}-theme.css`;
+    }
+
+    this.themeStorage.setThemePreference(this.isDark);
+  }
+}

aio/src/index.html

@@ -30,6 +30,11 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
   <!-- -->
 
+  <style id="aio-initial-theme">
+    @import url("light-theme.css") (prefers-color-scheme: light);
+    @import url("dark-theme.css") (prefers-color-scheme: dark);
+  </style>
+
   <link rel="manifest" href="pwa-manifest.json">
   <meta name="theme-color" content="#1976d2">
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -97,14 +102,12 @@
   <noscript>
     <div class="background-sky hero"></div>
     <section id="intro" style="text-shadow: 1px 1px #1976d2;">
-      <div class="hero-logo">
+      <div class="hero-logo"></div>
-        <img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular">
-      </div>
       <div class="homepage-container">
         <div class="hero-headline">The modern web<br>developer's platform</div>
       </div>
     </section>
-    <h2 style="color: red; margin-top: 40px; position: relative; text-align: center; text-shadow: 1px 1px #fafafa;">
+    <h2 style="color: red; margin-top: 40px; position: relative; text-align: center; text-shadow: 1px 1px #fafafa; border-top: none;">
       <b><i>This website requires JavaScript.</i></b>
     </h2>
   </noscript>

aio/src/styles/0-base/_typography-theme.scss

@@ -1,52 +1,52 @@
-@use '../constants' as *;
+@use '../constants';
-@use '~@angular/material/theming' as *;
 
-@mixin typography-theme($theme) {
+@mixin theme($theme) {
-    $primary: map-get($theme, primary);
+  $is-dark-theme: map-get($theme, is-dark);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-    $is-dark-theme: map-get($theme, is-dark);
 
-    body {
+  body {
-        color: if($is-dark-theme, $offwhite, $darkgray);
+    color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
-    }
+  }
 
-    h1,
+  h1,
-    h2,
+  h2,
-    h3,
+  h3,
-    h4,
+  h4,
-    h5,
+  h5,
-    h6 {
+  h6 {
-        color: if($is-dark-theme, $offwhite, $darkgray);
+    color: if($is-dark-theme, constants.$offwhite, constants.$deepgray);
-    }
+  }
 
-    h6 {
+  h6 {
-        color: if($is-dark-theme, $offwhite, $mediumgray);
+    color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);
-    }
+  }
 
-    p,
+  h2 {
-    ol,
+    border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
-    ul,
+  }
-    ol,
-    li,
-    input,
-    a {
-        color: if($is-dark-theme, $white, $darkgray);
-    }
 
-    .app-toolbar a {
+  p,
-        color: if($is-dark-theme, $darkgray, $white);
+  ol,
-    }
+  ul,
+  ol,
+  li,
+  input,
+  a {
+    color: if($is-dark-theme, constants.$white, constants.$darkgray);
+  }
 
-    code {
+  .app-toolbar a {
-        color: if($is-dark-theme, $white, $darkgray);
+    color: constants.$white;
-    }
+  }
 
-    .sidenav-content a {
+  code {
-        color: if($is-dark-theme, lighten($blue, 20), $blue);
+    color: if($is-dark-theme, constants.$white, constants.$darkgray);
-    }
+  }
 
-    .error-text {
+  .sidenav-content a {
-        color: $brightred;
+    color: if($is-dark-theme, constants.$lightblue, constants.$blue);
-    }
+  }
+
+  .error-text {
+    color: constants.$brightred;
+  }
 }

aio/src/styles/0-base/_typography.scss

@@ -1,14 +1,14 @@
-@use '../constants' as *;
+@use '../constants';
-@use '../mixins' as *;
+@use '../mixins';
 
 html {
   font-size: 62.5%;
 }
 
 body {
-  font-family: $main-font;
+  font-family: constants.$main-font;
   margin: 0;
-  @include font-size(16);
+  @include mixins.font-size(16);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -19,7 +19,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  @include font-size(40);
+  @include mixins.font-size(40);
   display: inline-block;
   margin: 1.6rem 0;
 
@@ -29,13 +29,12 @@ h1 {
 }
 
 h2 {
-  border-top: 1px solid $lightgray;
   clear: both;
-  @include font-size(32);
+  @include mixins.font-size(32);
   margin-top: 4rem;
   padding-top: 4rem;
 
-  @include marketing-pages($extraSelectors: ('.page-api'), $nestParentSelector: true) {
+  @include mixins.marketing-pages($extraSelectors: ('.page-api'), $nestParentSelector: true) {
     border-top: 0;
     margin-top: 2rem;
     padding-top: 0;
@@ -43,25 +42,25 @@ h2 {
 }
 
 h3 {
-  @include font-size(24);
+  @include mixins.font-size(24);
   margin-top: 3rem;
   clear: both;
 }
 
 h4 {
-  @include font-size(20);
+  @include mixins.font-size(20);
   margin-top: 3rem;
   clear: both;
 }
 
 h5 {
-  @include font-size(18);
+  @include mixins.font-size(18);
   margin-top: 2rem;
   clear: both;
 }
 
 h6 {
-  @include font-size(16);
+  @include mixins.font-size(16);
   margin-top: 2rem;
   clear: both;
 }
@@ -90,13 +89,13 @@ ul,
 li,
 input,
 a {
-  @include font-size(16);
+  @include mixins.font-size(16);
-  @include line-height(32);
+  @include mixins.line-height(32);
   font-family: inherit;
   font-weight: 400;
 
   & > em {
-    @include letter-spacing(0.3);
+    @include mixins.letter-spacing(0.3);
   }
 }
 
@@ -125,7 +124,7 @@ ol ol {
 
 li {
   padding-bottom: 8px;
-  @include line-height(24);
+  @include mixins.line-height(24);
 
   p {
     margin: 0;
@@ -137,9 +136,9 @@ a {
 }
 
 .app-toolbar a {
-  @include font-size(16);
+  @include mixins.font-size(16);
   font-weight: 400;
-  font-family: $main-font;
+  font-family: constants.$main-font;
   text-transform: uppercase;
 }
 
@@ -176,14 +175,14 @@ td {
 }
 
 th {
-  @include font-size(16);
+  @include mixins.font-size(16);
   font-weight: 500;
   padding: 13px 32px;
   text-align: left;
 }
 
 code {
-  font-family: $code-font;
+  font-family: constants.$code-font;
   font-size: 90%;
 }
 
@@ -197,7 +196,7 @@ code {
 // `doc-viewer` component when it is displaying docs for the different areas of the documentation.
 // We add the icon to all external links which are identified as absolute links (those that start with `http:` or https:`).
 // For more info see PR #36601.
-@include docs-pages {
+@include mixins.docs-pages {
   aio-doc-viewer {
     // The docs-viewer also contain links to GitHub (e.g. the "edit this page" icon) identified with
     // the `.github-links` class. We don't want to add the external link icon to these links.

aio/src/styles/1-layouts/_theme.scss

@@ -1,15 +1,15 @@
-@use 'footer/footer-theme' as *;
+@use 'footer/footer-theme';
-@use 'layout-global/layout-global-theme' as *;
+@use 'layout-global/layout-global-theme';
-@use 'marketing-layout/marketing-layout-theme' as *;
+@use 'marketing-layout/marketing-layout-theme';
-@use 'not-found/not-found-theme' as *;
+@use 'not-found/not-found-theme';
-@use 'sidenav/sidenav-theme' as *;
+@use 'sidenav/sidenav-theme';
-@use 'top-menu/top-menu-theme' as *;
+@use 'top-menu/top-menu-theme';
 
-@mixin layout-themes($theme) {
+@mixin theme($theme) {
-  @include footer-theme($theme);
+  @include footer-theme.theme($theme);
-  @include layout-global-theme($theme);
+  @include layout-global-theme.theme($theme);
-  @include marketing-layout-theme($theme);
+  @include marketing-layout-theme.theme($theme);
-  @include not-found-theme($theme);
+  @include not-found-theme.theme($theme);
-  @include sidenav-theme($theme);
+  @include sidenav-theme.theme($theme);
-  @include top-menu-theme($theme);
+  @include top-menu-theme.theme($theme);
 }

aio/src/styles/1-layouts/content-layout/_content-layout.scss

@@ -1,4 +1,4 @@
-@use '../../mixins' as *;
+@use '../../mixins';
 
 .sidenav-container {
   width: 100%;
@@ -22,7 +22,7 @@
     padding: 80px 1rem 1rem;
   }
 
-  @include marketing-pages(
+  @include mixins.marketing-pages(
       $extraSelectors: ('.page-api', '.page-file-not-found', '.page-guide-cheatsheet'),
       $nestParentSelector: true) {
     max-width: none;

aio/src/styles/1-layouts/footer/_footer-theme.scss

@@ -1,25 +1,25 @@
-@use '../../constants' as *;
+@use '../../constants';
+@import '~@angular/material/theming';
 
-@mixin footer-theme($theme) {
+@mixin theme($theme) {
   $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   footer {
-    background-color: $blue;
+    // Because the footer background is always the same color in both light and dark mode, there is no need to specify a foreground color
+    background-color: mat-color($primary, if($is-dark-theme, 900, 700));
 
     aio-footer {
       & > * {
-        color: $white;
+        color: constants.$white;
       }
 
       a {
-        color: $white;
+        color: constants.$white;
       }
 
       h3 {
-        color: $white;
+        color: constants.$white;
       }
     }
   }

aio/src/styles/1-layouts/footer/_footer.scss

@@ -1,9 +1,9 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 footer {
   position: relative;
-  @include line-height(24);
+  @include mixins.line-height(24);
   flex: 1;
   padding: 48px;
   z-index: 0;
@@ -37,19 +37,19 @@ footer {
 
       &:focus {
         // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-        outline: 1px solid rgba($white, 0.8);
+        outline: 1px solid rgba(constants.$white, 0.8);
         outline-offset: 2px;
       }
     }
 
     h3 {
-      @include font-size(16);
+      @include mixins.font-size(16);
       text-transform: uppercase;
       font-weight: 400;
       margin: 8px 0 12px;
 
       @media (max-width: 600px) {
-        @include font-size(14);
+        @include mixins.font-size(14);
       }
     }
 

aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss

@@ -1,15 +1,13 @@
-@use '../../constants' as *;
+@use '../../constants' ;
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin layout-global-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
   $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   html,
   body,
   .content {
-    background: if($is-dark-theme, mat-color($background, background), $white);
+    background: if($is-dark-theme, mat-color($background, background), constants.$white);
   }
 }

aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss

@@ -1,78 +1,72 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin marketing-layout-theme($theme) {
+@mixin theme($theme) {
   $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   .background-sky {
-    background-color: mat-color($primary, default);
+    background: linear-gradient(145deg, mat-color($primary, 900), if($is-dark-theme, mat-color($primary, 700), #42a5f5));
-    background: linear-gradient(145deg, mat-color($primary, 900), mat-color($primary, 400));
     color: mat-color($foreground, text);
   }
 
   section#intro {
-    color: $white;
+    color: constants.$white;
 
-    @if $is-dark-theme {
+    .hero-logo {
-      .hero-logo {
+      background-image: url(/assets/images/logos/angular/angular.svg);
-        img {
-          filter: brightness(1.1);
-        }
-      }
     }
   }
 
   .announcement-bar {
-    background-color: $white;
+    background-color: constants.$white;
 
     .button {
-      color: $white;
+      color: constants.$white;
-      background-color: $blue;
+      background-color: constants.$blue;
 
       &:hover {
-        color: rgba($white, 0.7);
+        color: rgba(constants.$white, 0.7);
       }
     }
   }
 
   .home-row .card {
-    background-color: if($is-dark-theme, $darkgray, $white);
+    background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
 
     .card-text-container {
       p {
-        color: if($is-dark-theme, $offwhite, $darkgray);
+        color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
       }
     }
 
     &:hover {
       h2 {
-        color: $blue;
+        color: if($is-dark-theme, constants.$cyan, constants.$blue);
       }
     }
   }
 
   .button.hero-cta {
-    background-color: if($is-dark-theme, $darkgray, $white);
+    background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
   }
 
   .cta-bar {
     .hero-cta {
-      color: if($is-dark-theme, lighten($blue, 10), $blue);
+      color: if($is-dark-theme, constants.$cyan, constants.$blue);
     }
   }
 
   .text-headline {
-    color: if($is-dark-theme, lighten($blue, 10), $blue);
+    color: if($is-dark-theme, constants.$lightblue, constants.$blue);
   }
 
   .marketing-banner {
-    background-color: if($is-dark-theme, $blue, lighten($blue, 10));
+    background-color: if($is-dark-theme, mat-color($primary, 800), mat-color($primary, 600));
 
     .banner-headline {
-      color: $white;
+      color: constants.$white;
     }
   }
 }

aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 .hero {
   display: flex;
@@ -25,9 +25,9 @@
 
   .hero-title {
     display: inline-block;
-    @include font-size(28);
+    @include mixins.font-size(28);
     font-weight: 400;
-    @include line-height(48);
+    @include mixins.line-height(48);
     margin: 0 8px 0 0;
     text-transform: uppercase;
 
@@ -60,7 +60,7 @@ section#intro {
   }
 
   .homepage-container {
-    width: 100%;
+    width: 50%;
     max-width: 1040px;
     margin: 0 auto;
     margin-top: -7%;
@@ -78,8 +78,8 @@ section#intro {
   }
 
   .hero-headline {
-    @include font-size(40);
+    @include mixins.font-size(40);
-    @include line-height(64);
+    @include mixins.line-height(64);
     font-weight: 500;
     margin: 32px 0;
 
@@ -92,30 +92,20 @@ section#intro {
     }
 
     @media (max-width: 575px) {
-      @include font-size(32);
+      @include mixins.font-size(32);
-      @include line-height(50);
+      @include mixins.line-height(50);
     }
   }
 
   .hero-logo {
     display: flex;
-
+    width: 50%;
-    @media (max-width: 780px) {
+    min-width: 250px;
-      justify-content: center;
+    height: 400px;
-    }
+    background-size: contain;
-
+    background-position: center;
-    img {
+    background-repeat: no-repeat;
-      width: 400px;
+    margin-bottom: 8px;
-      height: 400px;
-      margin-bottom: 8px;
-      max-width: none;
-      padding: 0;
-
-      @media (max-width: 780px) {
-        width: 250px;
-        height: 250px;
-      }
-    }
   }
 }
 
@@ -129,7 +119,7 @@ section#intro {
   margin: 0 auto;
   padding: 16px;
   border-radius: 4px;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
   box-sizing: border-box;
   transition: all 0.3s ease-in;
 
@@ -154,7 +144,7 @@ section#intro {
     align-items: center;
     height: 40px;
     min-width: 160px;
-    @include font-size(16);
+    @include mixins.font-size(16);
     border-radius: 48px;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
     box-sizing: border-box;
@@ -166,11 +156,11 @@ section#intro {
     right: 0;
     position: static;
     transition: all 0.3s ease-in;
-    @include font-size(16);
+    @include mixins.font-size(16);
   }
 
   p {
-    @include font-size(16);
+    @include mixins.font-size(16);
     margin: 8px;
     text-align: center;
   }
@@ -179,7 +169,7 @@ section#intro {
 // ANGULAR LINE
 
 .home-row .card {
-  @include card(70%, auto);
+  @include mixins.card(70%, auto);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -228,9 +218,9 @@ section#intro {
 
 .button.hero-cta {
   padding: 2px 34px 0;
-  @include font-size(18);
+  @include mixins.font-size(18);
   font-weight: 600;
-  @include line-height(40);
+  @include mixins.line-height(40);
   border-radius: 48px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
   box-sizing: border-box;
@@ -241,7 +231,7 @@ section#intro {
   }
 }
 
-@include marketing-pages {
+@include mixins.marketing-pages {
   .sidenav-content {
     padding: 0 0 3rem;
   }
@@ -269,7 +259,7 @@ section#intro {
 }
 
 .text-headline {
-  @include font-size(20);
+  @include mixins.font-size(20);
   font-weight: 500;
   margin-top: 10px;
   text-transform: uppercase;
@@ -355,14 +345,14 @@ div[layout=row]{
 
   .banner-headline {
     text-transform: uppercase;
-    @include font-size(24);
+    @include mixins.font-size(24);
     font-weight: 300;
     margin: 0;
     -webkit-margin-before: 0;
     -webkit-margin-after: 0;
 
     @media (max-width: 600px) {
-      @include font-size(18);
+      @include mixins.font-size(18);
       font-weight: 400;
     }
 

aio/src/styles/1-layouts/not-found/_not-found-theme.scss

@@ -1,19 +1,16 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin not-found-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   .nf-response {
     h1 {
-      color: $blue;
+      color: if($is-dark-theme, constants.$lightblue, constants.$blue);
     }
   }
 
   .nf-icon.material-icons {
-    color: $blue;
+    color: constants.$blue;
   }
 }

aio/src/styles/1-layouts/not-found/_not-found.scss

@@ -1,24 +1,23 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .nf-container {
-    align-items: center;
+  align-items: center;
-    padding: 32px;
+  padding: 32px;
 }
 
 .nf-response {
-    margin: 32px;
+  margin: 32px;
-    height: 100%;
+  height: 100%;
-    flex-direction: column;
+  flex-direction: column;
 
-    h1 {
+  h1 {
-        @include font-size(48);
+    @include mixins.font-size(48);
-        text-transform: uppercase;
+    text-transform: uppercase;
-        margin: 8px 0;
+    margin: 8px 0;
-    }
+  }
 }
 
 .nf-icon.material-icons {
-    @include font-size(100);
+  @include mixins.font-size(100);
-    position: static;
+  position: static;
 }

aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss

@@ -1,21 +1,19 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin sidenav-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
   $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   mat-sidenav-container.sidenav-container {
-    background-color: if($is-dark-theme, mat-color($background, background), $white);
+    background-color: if($is-dark-theme, mat-color($background, background), constants.$white);
 
     mat-sidenav.sidenav {
-      background-color: if($is-dark-theme, $deepgray, $superlightgray);
+      background-color: if($is-dark-theme, constants.$deepgray, constants.$superlightgray);
-      border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+      border-right: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
 
       .doc-version {
-        border-top: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+        border-top: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
       }
     }
   }
@@ -23,20 +21,20 @@
   aio-nav-menu {
     aio-nav-item {
       .vertical-menu-item {
-        color: if($is-dark-theme, $offwhite, $darkgray);
+        color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
 
         &:hover {
-          background-color: if($is-dark-theme, $darkgray, $lightgray);
+          background-color: if($is-dark-theme, constants.$darkgray, constants.$lightgray);
-          color: if($is-dark-theme, $powderblue, $blue);
+          color: if($is-dark-theme, constants.$powderblue, constants.$blue);
-          text-shadow: 0 0 5px if($is-dark-theme, $black, $white);
+          text-shadow: 0 0 5px if($is-dark-theme, constants.$black, constants.$white);
 
           &.selected {
-            color: if($is-dark-theme, $powderblue, $darkblue);
+            color: if($is-dark-theme, constants.$powderblue, constants.$darkblue);
           }
         }
 
         &.selected {
-          color: if($is-dark-theme, $lightblue, $darkblue);
+          color: if($is-dark-theme, constants.$lightblue, constants.$darkblue);
         }
       }
     }

aio/src/styles/1-layouts/sidenav/_sidenav.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 // Disable sidenav animations for the initial render.
 .starting.mat-drawer-transition .mat-drawer-content {
@@ -71,7 +71,7 @@ aio-nav-menu {
       word-wrap: break-word;
 
       &:focus {
-        outline: $focus-outline-onlight auto 2px;
+        outline: constants.$focus-outline-onlight auto 2px;
       }
 
       span {
@@ -119,8 +119,8 @@ aio-nav-menu {
     }
 
     .level-1 {
-      @include font-size(16);
+      @include mixins.font-size(16);
-      @include line-height(28);
+      @include mixins.line-height(28);
       font-weight: 400;
       padding-left: 20px;
       margin: 0;
@@ -128,34 +128,34 @@ aio-nav-menu {
     }
 
     .level-2 {
-      @include font-size(14);
+      @include mixins.font-size(14);
-      @include line-height(24);
+      @include mixins.line-height(24);
       font-weight: 400;
       margin: 0;
       padding-left: 36px;
     }
 
     .level-3 {
-      @include font-size(14);
+      @include mixins.font-size(14);
-      @include line-height(24);
+      @include mixins.line-height(24);
       margin: 0;
       padding-left: 44px;
     }
 
     .level-4 {
-      @include font-size(14);
+      @include mixins.font-size(14);
-      @include line-height(24);
+      @include mixins.line-height(24);
       margin: 0;
       padding-left: 52px;
     }
 
     .level-1, .level-2, .level-3 {
       &.collapsed > .mat-icon {
-        @include rotate(0deg);
+        @include mixins.rotate(0deg);
       }
 
       &.expanded > .mat-icon {
-        @include rotate(90deg);
+        @include mixins.rotate(90deg);
       }
     }
   }

aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss

@@ -1,31 +1,35 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin top-menu-theme($theme) {
+@mixin theme($theme) {
   $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   mat-toolbar.app-toolbar {
+    @if $is-dark-theme {
+      &.mat-primary {
+        background: mat-color($primary, darker)
+      }
+    }
+
     // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
     .page-home & {
-      background-color: $blue;
+      background: if($is-dark-theme, mat-color($primary, darker), constants.$blue);
     }
 
     mat-icon {
-      color: $white;
+      color: constants.$white;
     }
 
     // HAMBURGER BUTTON
     .hamburger {
       &:hover {
-        color: $offwhite;
+        color: constants.$offwhite;
       }
 
       & .mat-icon {
-        color: $white;
+        color: constants.$white;
       }
     }
 
@@ -33,7 +37,7 @@
     .nav-link.home {
       &:focus {
         // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-        outline: 1px solid $focus-outline-ondark;
+        outline: 1px solid constants.$focus-outline-ondark;
       }
     }
 
@@ -44,20 +48,20 @@
           a.nav-link {
             .nav-link-inner {
               &:hover {
-                background: rgba($white, 0.15);
+                background: rgba(constants.$white, 0.15);
               }
             }
 
             &:focus {
               .nav-link-inner {
-                background: rgba($white, 0.15);
+                background: rgba(constants.$white, 0.15);
-                box-shadow: 0 0 1px 2px $focus-outline-ondark;
+                box-shadow: 0 0 1px 2px constants.$focus-outline-ondark;
               }
             }
 
             &:active {
               .nav-link-inner {
-                background: rgba($white, 0.15);
+                background: rgba(constants.$white, 0.15);
               }
             }
           }
@@ -65,7 +69,7 @@
           &.selected {
             a.nav-link {
               .nav-link-inner {
-                background: rgba($white, 0.15);
+                background: rgba(constants.$white, 0.15);
               }
             }
           }
@@ -76,20 +80,18 @@
     // SEARCH BOX
     aio-search-box.search-container {
       input {
-        color: $darkgray;
+        color: constants.$darkgray;
-        background-color: $white;
+        background-color: constants.$white;
 
-        @include placeholder {
+        @include mixins.placeholder {
-          color: $mediumgray;
+          color: constants.$mediumgray;
         }
       }
     }
 
-    // THEME PICKER
+    aio-theme-toggle {
-
+      @media screen and (min-width: 351px) {
-    aio-theme-picker {
+        border-right: 1px solid constants.$white;
-      button {
-        color: $offwhite;
       }
     }
 
@@ -98,7 +100,7 @@
       a {
         &:focus {
           // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-          outline: 1px solid $focus-outline-ondark;
+          outline: 1px solid constants.$focus-outline-ondark;
         }
       }
     }

aio/src/styles/1-layouts/top-menu/_top-menu.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 // VARIABLES
 $showTopMenuWidth: 1048px;
@@ -29,7 +28,7 @@ mat-toolbar.app-toolbar {
   }
 
   // DOCS PAGES OVERRIDE: HAMBURGER
-  @include docs-pages($nestParentSelector: true) {
+  @include mixins.docs-pages($nestParentSelector: true) {
     @media (min-width: $showTopMenuWidth) {
       .hamburger {
         // Hamburger shown on non-marketing pages even on large screens.
@@ -172,8 +171,8 @@ mat-toolbar.app-toolbar {
         outline: none;
       }
 
-      @include placeholder {
+      @include mixins.placeholder {
-        @include font-size(14);
+        @include mixins.font-size(14);
       }
 
       @media (min-width: 1000px) {
@@ -190,6 +189,13 @@ mat-toolbar.app-toolbar {
     }
   }
 
+  aio-theme-toggle {
+    @media screen and (min-width: 350px) {
+      padding-right: 2px;
+      margin-right: 2px;
+    }
+  }
+
   // EXTERNAL LINK ICONS
   .toolbar-external-icons-container {
     display: flex;
@@ -197,14 +203,26 @@ mat-toolbar.app-toolbar {
     flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
     height: 100%;
 
+    @media screen and (max-width: 350px) {
+      a[title="GitHub"] {
+        display: none;
+      }
+    }
+
+    a[title="Twitter"], a[title="YouTube"] {
+      @media screen and (max-width: 420px) {
+        display: none;
+      }
+    }
+
     a {
       display: flex;
       align-items: center;
-      padding: 24px;
+      padding: 0;
-      margin: 0 -16px;
+      margin: 24px 8px;
 
       &:focus {
-        outline-offset: -16px;
+        outline-offset: 8px;
       }
 
       @media screen and (max-width: 480px) {

aio/src/styles/2-modules/_index.scss

@@ -27,6 +27,7 @@
 @forward 'progress-bar/progress-bar';
 @forward 'presskit/presskit';
 @forward 'resources/resources';
+@forward 'roadmap';
 @forward 'search-results/search-results';
 @forward 'select-menu/select-menu';
 @forward 'table/table';

aio/src/styles/2-modules/_theme.scss

@@ -1,51 +1,52 @@
-@use 'alert/alert-theme' as *;
+@use 'alert/alert-theme';
-@use 'api-list/api-list-theme' as *;
+@use 'api-list/api-list-theme';
-@use 'api-pages/api-pages-theme' as *;
+@use 'api-pages/api-pages-theme';
-@use 'api-symbols/api-symbols-theme' as *;
+@use 'api-symbols/api-symbols-theme';
-@use 'buttons/buttons-theme' as *;
+@use 'buttons/buttons-theme';
-@use 'callout/callout-theme' as *;
+@use 'callout/callout-theme';
-@use 'card/card-theme' as *;
+@use 'card/card-theme';
-@use 'code/code-theme' as *;
+@use 'code/code-theme';
-@use 'contributor/contributor-theme' as *;
+@use 'contributor/contributor-theme';
-@use 'details/details-theme' as *;
+@use 'deploy-theme/deploy-theme';
-@use 'errors/errors-theme' as *;
+@use 'details/details-theme';
-@use 'filetree/filetree-theme' as *;
+@use 'errors/errors-theme';
-@use 'guides/guides-theme' as *;
+@use 'filetree/filetree-theme';
-@use 'heading-anchors/heading-anchors-theme' as *;
+@use 'guides/guides-theme';
-@use 'hr/hr-theme' as *;
+@use 'heading-anchors/heading-anchors-theme';
-@use 'images/images-theme' as *;
+@use 'hr/hr-theme';
-@use 'label/label-theme' as *;
+@use 'images/images-theme';
-@use 'notification/notification-theme' as *;
+@use 'label/label-theme';
-@use 'presskit/presskit-theme' as *;
+@use 'notification/notification-theme';
-@use 'resources/resources-theme' as *;
+@use 'presskit/presskit-theme';
-@use 'search-results/search-results-theme' as *;
+@use 'resources/resources-theme';
-@use 'select-menu/select-menu-theme' as *;
+@use 'search-results/search-results-theme';
-@use 'table/table-theme' as *;
+@use 'select-menu/select-menu-theme';
-@use 'toc/toc-theme' as *;
+@use 'table/table-theme';
+@use 'toc/toc-theme';
 
-@mixin module-themes($theme) {
+@mixin theme($theme) {
-  @include alert-theme($theme);
+  @include alert-theme.theme($theme);
-  @include api-list-theme($theme);
+  @include api-list-theme.theme($theme);
-  @include api-symbols-theme($theme);
+  @include api-symbols-theme.theme($theme);
-  @include buttons-theme($theme);
+  @include buttons-theme.theme($theme);
-  @include callout-theme($theme);
+  @include callout-theme.theme($theme);
-  @include card-theme($theme);
+  @include card-theme.theme($theme);
-  @include code-theme($theme);
+  @include code-theme.theme($theme);
-  @include contributor-theme($theme);
+  @include contributor-theme.theme($theme);
-  @include deploy-theme($theme);
+  @include deploy-theme.theme($theme);
-  @include details-theme($theme);
+  @include details-theme.theme($theme);
-  @include errors-theme($theme);
+  @include errors-theme.theme($theme);
-  @include filetree-theme($theme);
+  @include filetree-theme.theme($theme);
-  @include guides-theme($theme);
+  @include guides-theme.theme($theme);
-  @include heading-anchors-theme($theme);
+  @include heading-anchors-theme.theme($theme);
-  @include hr-theme($theme);
+  @include hr-theme.theme($theme);
-  @include images-theme($theme);
+  @include images-theme.theme($theme);
-  @include label-theme($theme);
+  @include label-theme.theme($theme);
-  @include notification-theme($theme);
+  @include notification-theme.theme($theme);
-  @include presskit-theme($theme);
+  @include presskit-theme.theme($theme);
-  @include resources-theme($theme);
+  @include resources-theme.theme($theme);
-  @include search-results-theme($theme);
+  @include search-results-theme.theme($theme);
-  @include select-menu-theme($theme);
+  @include select-menu-theme.theme($theme);
-  @include table-theme($theme);
+  @include table-theme.theme($theme);
-  @include toc-theme($theme);
+  @include toc-theme.theme($theme);
 }

aio/src/styles/2-modules/alert/_alert-theme.scss

@@ -1,18 +1,15 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin alert-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   .alert {
-    color: if($is-dark-theme, $offwhite, $darkgray);
+    color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
 
     &.is-critical {
-      border-left: 8px solid $brightred;
+      border-left: 8px solid constants.$brightred;
-      background-color: if($is-dark-theme, $deepgray, rgba($brightred, 0.05));
+      background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$brightred, 0.05));
 
       h1,
       h2,
@@ -20,13 +17,13 @@
       h4,
       h5,
       h6 {
-        color: $brightred;
+        color: constants.$brightred;
       }
     }
 
     &.is-important {
-      border-left: 8px solid $orange;
+      border-left: 8px solid constants.$orange;
-      background-color: if($is-dark-theme, $deepgray, rgba($orange, 0.05));
+      background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$orange, 0.05));
 
       h1,
       h2,
@@ -34,13 +31,13 @@
       h4,
       h5,
       h6 {
-        color: $orange;
+        color: constants.$orange;
       }
     }
 
     &.is-helpful {
-      border-left: 8px solid $blue;
+      border-left: 8px solid constants.$blue;
-      background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.05));
+      background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$blue, 0.05));
 
       h1,
       h2,
@@ -48,19 +45,19 @@
       h4,
       h5,
       h6 {
-        color: $blue;
+        color: constants.$blue;
       }
     }
 
     &.archive-warning {
-      background-color: if($is-dark-theme, $deepgray, $darkred);
+      background-color: if($is-dark-theme, constants.$deepgray, constants.$darkred);
 
       * {
-        color: $white;
+        color: constants.$white;
       }
 
       a {
-        color: $white;
+        color: constants.$white;
       }
     }
   }

aio/src/styles/2-modules/alert/_alert.scss

@@ -1,10 +1,9 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .alert {
     padding: 16px;
     margin: 24px 0px;
-    @include font-size(14);
+    @include mixins.font-size(14);
     width: 100%;
     box-sizing: border-box;
     clear: both;

aio/src/styles/2-modules/api-list/_api-list-theme.scss

@@ -1,47 +1,49 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin api-list-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   aio-api-list {
     .api-filter {
       .form-search {
         input {
-          box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+          box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
-          border: 1px solid if($is-dark-theme, $darkgray, $white);
+          border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$white);
-          background-color: if($is-dark-theme, $darkgray, $white);
+          background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
-          color: if($is-dark-theme, $white, $darkgray);
+          color: if($is-dark-theme, constants.$white, constants.$darkgray);
 
-          @include placeholder {
+          @include mixins.placeholder {
-            color: if($is-dark-theme, $offwhite, $mediumgray);
+            color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);
           }
 
           &:focus {
-            border: 1px solid $blue-400;
+            border: 1px solid constants.$blue-400;
-            box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+            box-shadow: 0 2px 2px rgba(constants.$blue-400, 0.24), 0 0 2px rgba(constants.$blue-400, 0.12);
           }
         }
 
         .material-icons {
-          color: if($is-dark-theme, $lightblue, $blue-grey-600);
+          color: if($is-dark-theme, constants.$lightblue, constants.$blue-grey-600);
         }
       }
     }
 
     .api-list-container {
+
+      a {
+        color: if($is-dark-theme, constants.$warmblue, constants.$blue);
+      }
+
       .api-list {
         li {
           a {
-            color: if($is-dark-theme, $cyan, $blue-grey-600);
+            color: if($is-dark-theme, constants.$coldblue, constants.$blue-grey-600);
 
             &:hover {
-              background: if($is-dark-theme, $darkgray, $blue-grey-50);
+              background: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50);
-              color: if($is-dark-theme, $offwhite, $blue-500);
+              color: if($is-dark-theme, constants.$offwhite, constants.$blue-500);
             }
           }
         }

aio/src/styles/2-modules/api-list/_api-list.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 /* API LIST STYLES */
 
@@ -44,15 +44,15 @@ aio-api-list {
       input {
         box-sizing: border-box;
         border-radius: 4px;
-        @include font-size(14);
+        @include mixins.font-size(14);
-        @include line-height(32);
+        @include mixins.line-height(32);
         outline: none;
         padding: 4px 16px 4px 32px;
         transition: all .2s;
         width: 182px;
 
-        @include placeholder {
+        @include mixins.placeholder {
-          @include font-size(14);
+          @include mixins.font-size(14);
         }
 
         @media screen and (max-width: 600px) {
@@ -61,13 +61,13 @@ aio-api-list {
       }
 
       .material-icons {
-        @include font-size(20);
+        @include mixins.font-size(20);
         left: 8px;
         pointer-events: none;
         position: absolute;
         top: 12px;
         width: 20px;
-        z-index: $layer-1;
+        z-index: constants.$layer-1;
       }
     }
 
@@ -85,9 +85,9 @@ aio-api-list {
     padding: 16px 0;
     position: relative;
 
-    @media handheld and (max-width: $phone-breakpoint),
+    @media handheld and (max-width: constants.$phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-device-width: constants.$phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
+    screen and (max-width: constants.$tablet-breakpoint) {
       padding: 24px 0 0;
     }
 
@@ -108,9 +108,9 @@ aio-api-list {
       }
 
       li {
-        @include font-size(14);
+        @include mixins.font-size(14);
         margin: 8px 0;
-        @include line-height(14);
+        @include mixins.line-height(14);
         padding: 0;
         float: left;
         width: 33%;
@@ -120,7 +120,7 @@ aio-api-list {
         white-space: nowrap;
 
         a {
-          @include line-height(16);
+          @include mixins.line-height(16);
           padding: 0 16px;
           text-decoration: none;
           transition: all .3s;

aio/src/styles/2-modules/api-pages/_api-pages-theme.scss

@@ -1,21 +1,16 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
 @mixin api-pages-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
-
   .api-body {
     details.overloads {
       .detail-contents {
-        border: 1px solid $lightgray;
+        border: 1px solid constants.$lightgray;
       }
 
       summary {
         .actions {
-          color: $blue;
+          color: constants.$blue;
         }
       }
     }
@@ -27,10 +22,10 @@
         .with-github-links {
           .github-links {
             a {
-              color: $mediumgray;
+              color: constants.$mediumgray;
 
               .material-icons:hover {
-                color: $blue;
+                color: constants.$blue;
               }
             }
           }
@@ -38,21 +33,21 @@
       }
 
       tr {
-        border-bottom: 1px solid $lightgray;
+        border-bottom: 1px solid constants.$lightgray;
       }
     }
 
     .from-constructor,
     .read-only-property,
     .write-only-property {
-      background-color: $lightgray;
+      background-color: constants.$lightgray;
     }
   }
 
   .github-links {
     .material-icons {
       &:hover {
-        background-color: $mist;
+        background-color: constants.$mist;
       }
     }
   }

aio/src/styles/2-modules/api-pages/_api-pages.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .api-body {
   max-width: 1200px;
@@ -42,7 +41,7 @@
       }
       .actions {
         display: flex;
-        @include font-size(14);
+        @include mixins.font-size(14);
       }
       .show-all {
         display: initial;
@@ -84,7 +83,7 @@
 
     &.parameters-table {
       margin-top: 0;
-      @include font-size(14);
+      @include mixins.font-size(14);
       box-shadow: none;
 
       tr {
@@ -143,7 +142,7 @@
       }
 
       h4 {
-        @include font-size(14);
+        @include mixins.font-size(14);
         font-weight: bold;
         margin-top: 12px;
       }
@@ -151,7 +150,7 @@
 
     th {
       text-transform: none;
-      @include font-size(16);
+      @include mixins.font-size(16);
       font-weight: bold;
     }
 
@@ -199,16 +198,16 @@
   }
 
   .api-heading {
-    @include font-size(14);
+    @include mixins.font-size(14);
     margin: 16px;
   }
 
   .from-constructor,
   .read-only-property,
   .write-only-property {
-    @include font-size(12);
+    @include mixins.font-size(12);
     font-weight: 600;
-    @include letter-spacing(0.5);
+    @include mixins.letter-spacing(0.5);
     font-style: italic;
     border-radius: 4px;
     padding: 4px 6px;
@@ -242,7 +241,7 @@
   .material-icons {
     border-radius: 4px;
     padding: 4px;
-    @include font-size(20);
+    @include mixins.font-size(20);
   }
 }
 
@@ -263,7 +262,7 @@
   }
 
   h1 {
-    @include font-size(24);
+    @include mixins.font-size(24);
     margin: 0;
   }
 }

aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss

@@ -1,19 +1,14 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
-
-@mixin api-symbols-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
 
+@mixin theme($theme) {
   .symbol {
-    box-shadow: 0 1px 2px rgba($black, 0.24);
+    box-shadow: 0 1px 2px rgba(constants.$black, 0.24);
-    color: $white;
+    color: constants.$white;
 
     // SYMBOL TYPES
     // Symbol mapping variables in *constants*
-    @each $name, $symbol in $api-symbols {
+    @each $name, $symbol in constants.$api-symbols {
       &.#{$name} {
         background: map-get($symbol, background);
 

aio/src/styles/2-modules/api-symbols/_api-symbols.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 /* API SYMBOLS */
 
@@ -8,9 +7,9 @@
 .symbol {
   border-radius: 2px;
   display: inline-block;
-  @include font-size(10);
+  @include mixins.font-size(10);
   font-weight: 600;
-  @include line-height(16);
+  @include mixins.line-height(16);
   margin-right: 8px;
   text-align: center;
   width: 16px;

aio/src/styles/2-modules/buttons/_buttons-theme.scss

@@ -1,12 +1,7 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
-
-@mixin buttons-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
 
+@mixin theme($theme) {
   // This rule overrides some Angular Material styles defined for `.mat-button`
   // (hence we include `.mat-button` in the selector).
   a.button.mat-button,
@@ -14,43 +9,43 @@
     // COLORS
 
     &.button-secondary {
-      background: $mediumgray;
+      background: constants.$mediumgray;
-      color: rgba($white, 0.87);
+      color: rgba(constants.$white, 0.87);
     }
 
     &.button-plain {
-      background: $white;
+      background: constants.$white;
-      color: rgba($darkgray, 0.87);
+      color: rgba(constants.$darkgray, 0.87);
     }
 
     &.button-subtle {
-      background: $mediumgray;
+      background: constants.$mediumgray;
-      color: darken($offwhite, 10%);
+      color: darken(constants.$offwhite, 10%);
 
       &:hover {
-        color: rgba($white, 0.7);
+        color: rgba(constants.$white, 0.7);
       }
     }
 
     &.button-blue {
-      background: $blue;
+      background: constants.$blue;
-      color: rgba($white, 0.87);
+      color: rgba(constants.$white, 0.87);
 
       &:hover {
-        color: rgba($white, 0.7);
+        color: rgba(constants.$white, 0.7);
       }
     }
 
     &.button-banner {
-      background: $darkgray;
+      background: constants.$darkgray;
-      color: rgba($white, 0.87);
+      color: rgba(constants.$white, 0.87);
     }
   }
 
   .cta-bar {
     .button {
       &:hover {
-        color: $offwhite;
+        color: constants.$offwhite;
       }
     }
   }
@@ -59,11 +54,11 @@
     // This rule overrides some Angular Material styles defined for `.mat-button`
     // (hence we include `.mat-button` in the selector).
     a.button.mat-button.filter-button {
-      background-color: rgba($blue, 0.2);
+      background-color: rgba(constants.$blue, 0.2);
       &.selected,
       &:hover {
-        background-color: $blue;
+        background-color: constants.$blue;
-        color: $white;
+        color: constants.$white;
       }
     }
   }

aio/src/styles/2-modules/buttons/_buttons.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 /* Button Styles */
 
@@ -13,9 +13,9 @@ a.button.mat-button,
 .button {
   color: inherit;
   display: inline-block;
-  @include line-height(32);
+  @include mixins.line-height(32);
   padding: 0px 16px;
-  @include font-size(14);
+  @include mixins.font-size(14);
   font-weight: 400;
   border-radius: 3px;
   text-decoration: none;
@@ -25,20 +25,20 @@ a.button.mat-button,
 
   // SIZES
   &.button-small {
-    @include font-size(12);
+    @include mixins.font-size(12);
-    @include line-height(24);
+    @include mixins.line-height(24);
     padding: 0px 8px;
   }
 
   &.button-large {
-    @include font-size(15);
+    @include mixins.font-size(15);
-    @include line-height(48);
+    @include mixins.line-height(48);
     padding: 0px 24px;
   }
 
   &.button-x-large {
-    @include font-size(16);
+    @include mixins.font-size(16);
-    @include line-height(56);
+    @include mixins.line-height(56);
     padding: 0px 24px;
   }
 }
@@ -64,14 +64,14 @@ a.button.mat-button,
   // (hence we include `.mat-button` in the selector).
   a.button.mat-button.filter-button {
     border-radius: 4px;
-    @include font-size(16);
+    @include mixins.font-size(16);
-    @include line-height(48);
+    @include mixins.line-height(48);
     margin: 8px;
     padding: 0px 16px;
     width: 168px;
 
     @media (max-width: 480px) {
-      @include font-size(14);
+      @include mixins.font-size(14);
       width: auto;
     }
   }

aio/src/styles/2-modules/callout/_callout-theme.scss

@@ -1,42 +1,39 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin callout-theme($theme) {
+@mixin theme($theme) {
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
     $is-dark-theme: map-get($theme, is-dark);
 
 
     .callout {      
         header {
-          color: $white;
+          color: constants.$white;
         }
       
         &.is-critical {
-          border-color: $brightred;
+          border-color: constants.$brightred;
-          background: rgba($brightred, 0.05);
+          background: rgba(constants.$brightred, if($is-dark-theme, 0.1, 0.05));
       
           header {
-            background: $brightred;
+            background: constants.$brightred;
           }
         }
       
         &.is-important {
-          border-color: $orange;
+          border-color: constants.$orange;
-          background: rgba($orange, 0.05);
+          background: rgba(constants.$orange,if($is-dark-theme, 0.1, 0.05));
       
           header {
-            background: $amber-700;
+            background: constants.$amber-700;
           }
         }
       
         &.is-helpful {
-          border-color: $blue;
+          border-color: constants.$blue;
-          background: rgba($blue, 0.05);
+          background: rgba(constants.$blue, if($is-dark-theme, 0.1, 0.05));
       
           header {
-            background: $blue;
+            background: constants.$blue;
           }
         }
       }

aio/src/styles/2-modules/callout/_callout.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 @use '../alert/alert';
 
 .callout {
@@ -9,7 +8,7 @@
   border-radius: 4px;
 
   header {
-    @include line-height(24);
+    @include mixins.line-height(24);
     font-weight: 500;
     padding: 8px 16px;
     margin: 0;
@@ -20,7 +19,7 @@
   p {
     padding: 16px;
     margin: 0px;
-    @include font-size(14);
+    @include mixins.font-size(14);
   }
 
   > *:not(:first-child) {

aio/src/styles/2-modules/card/_card-theme.scss

@@ -1,37 +1,31 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin card-theme($theme) {
+@mixin theme($theme) { 
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   .card-container {
     .docs-card {
-      background-color: if($is-dark-theme, $darkgray, $white);
+      background-color: if($is-dark-theme, constants.$deepgray, constants.$white);
 
       section {
-        color: if($is-dark-theme, $powderblue, $blue);
+        color: if($is-dark-theme, constants.$cyan, constants.$blue);
       }
 
       p {
-        color: if($is-dark-theme, $offwhite, $darkgray);
+        color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
       }
 
       .card-footer {
-        color: if($is-dark-theme, $cyan, $darkblue);
+        color: if($is-dark-theme, constants.$powderblue, constants.$darkblue);
-        background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.1));
+        background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$blue, 0.1));
-        border-top: 0.5px solid if($is-dark-theme, $darkgray, $lightgray);
+        border-top: 0.5px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
 
         a {
-          color: $mediumgray;
+          color: constants.$mediumgray;
         }
       }
     }
   }
 
-  .card-section {
-    @include card(auto, 90%, if($is-dark-theme, $darkgray, $white));
-  }
 }

aio/src/styles/2-modules/card/_card.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 .card-container {
   display: flex;
@@ -9,7 +9,8 @@
   margin: 16px 0;
 
   .docs-card {
-    @include card(194px, 35%);
+    @include mixins.card(194px, 35%);
+
     max-width: 340px;
     min-width: 300px;
     margin: 24px 16px;
@@ -23,8 +24,8 @@
     }
 
     section {
-      @include font-size(20);
+      @include mixins.font-size(20);
-      @include line-height(24);
+      @include mixins.line-height(24);
       margin: 0;
       padding: 32px 0 24px;
       text-transform: none;
@@ -32,8 +33,8 @@
     }
 
     p {
-      @include font-size(13);
+      @include mixins.font-size(13);
-      @include line-height(24);
+      @include mixins.line-height(24);
       padding: 0 16px;
       margin: 0;
       text-align: center;
@@ -42,21 +43,20 @@
     .card-footer {
       bottom: 0;
       box-sizing: border-box;
-      @include line-height(48);
+      @include mixins.line-height(48);
       left: 0;
       position: absolute;
       right: 0;
       text-align: right;
 
       a {
-        @include font-size(13);
+        @include mixins.font-size(13);
       }
     }
   }
 }
 
 .card-section {
-  @include card(auto, 90%);
   padding: 16px 32px;
   margin: 16px 0;
   display: flex;
@@ -65,7 +65,7 @@
 
   // Removes on-hover effect from card mixin
   &:hover {
-    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
   }
 
   h1,

aio/src/styles/2-modules/code/_code-theme.scss

@@ -1,29 +1,26 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import "~@angular/material/theming";
 
-@mixin code-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   code-example {
     &:not(.no-box) {
-      background-color: if($is-dark-theme, $deepgray, rgb($backgroundgray, 0.2));
+      background-color: if($is-dark-theme, constants.$deepgray, rgb(constants.$backgroundgray, 0.2));
-      border: 0.5px solid if($is-dark-theme, $darkgray, $lightgray);
+      border: 0.5px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
-      color: $darkgray;
+      color: constants.$darkgray;
     }
 
     // TERMINAL / SHELL TEXT STYLES
     &.code-shell,
     &[language="sh"],
     &[language="bash"] {
-      background-color: $darkgray;
+      background-color: constants.$darkgray;
     }
 
     header {
-      background-color: if($is-dark-theme, $blue-900, $accentblue);
+      background-color: constants.$accentblue;
-      color: $offwhite;
+      color: constants.$offwhite;
     }
   }
 
@@ -39,50 +36,50 @@
 
   code-example.avoid header,
   code-example.avoidFile header {
-    border: 2px solid $anti-pattern;
+    border: 2px solid constants.$anti-pattern;
-    background: $anti-pattern;
+    background: constants.$anti-pattern;
   }
 
   code-example.avoid,
   code-example.avoidFile,
   code-tabs.avoid mat-tab-body,
   code-tabs.avoidFile mat-tab-body {
-    border: 0.5px solid $anti-pattern;
+    border: 0.5px solid constants.$anti-pattern;
   }
 
   aio-code {
     pre.prettyprint {
       code {
         ol.linenums {
-          color: lighten($mediumgray, 25%);
+          color: lighten(constants.$mediumgray, 25%);
 
           li {
             &::marker {
-              color: lighten($mediumgray, 25%);
+              color: lighten(constants.$mediumgray, 25%);
             }
           }
         }
 
         .code-missing {
-          color: $darkred;
+          color: constants.$darkred;
         }
       }
 
       .copy-button {
-        color: $blue-grey-200;
+        color: constants.$blue-grey-200;
 
         &:hover {
-          color: $mediumgray;
+          color: constants.$mediumgray;
         }
       }
 
       &.lang-sh,
       &.lang-bash {
         .copy-button {
-          color: if($is-dark-theme, $blue-grey-200, $lightgray);
+          color: if($is-dark-theme, constants.$blue-grey-200, constants.$lightgray);
 
           &:hover {
-            color: if($is-dark-theme, $blue-grey-300, $superlightgray);
+            color: if($is-dark-theme, constants.$blue-grey-300, constants.$superlightgray);
           }
         }
       }
@@ -92,14 +89,14 @@
   .sidenav-content {
     code {
       a {
-        color: if($is-dark-theme, $cyan, $darkblue);
+        color: if($is-dark-theme, constants.$cyan, constants.$darkblue);
       }
     }
 
     :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
       > code {
-        background-color: if($is-dark-theme, $darkgray, rgba($lightgray, 0.5));
+        background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$lightgray, 0.5));
-        color: if($is-dark-theme, $white, $darkgray);
+        color: if($is-dark-theme, constants.$white, constants.$darkgray);
       }
     }
   }
@@ -107,7 +104,7 @@
   // Dark Mode Code Palette
   $code-lightteal: #17d3ff;
   $code-lightred: #ffb0b0;
-  $code-lightgreen: #a9ef5f;
+  $code-lightgreen: #c3e88d;
   $code-lightpurple: #d1b4ff;
   $code-lightorange: #ffd779;
   $code-lightblue: #98caff;
@@ -119,7 +116,7 @@
 
   /* SPAN elements with the classes below are added by prettyprint. */
   .pln {
-    color: if($is-dark-theme, $white, #000);
+    color: if($is-dark-theme, constants.$white, #000);
   } /* plain text */
 
   @media screen {
@@ -219,7 +216,7 @@
       .lit,
       .pun,
       .dec {
-        color: $codegreen;
+        color: constants.$codegreen;
       }
     }
   }

aio/src/styles/2-modules/code/_code.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 code-example,
 code-tabs {
@@ -42,7 +42,7 @@ code-example {
 
   header {
     border-radius: 5px 5px 0 0;
-    @include font-size(16);
+    @include mixins.font-size(16);
     padding: 8px 16px;
   }
 }
@@ -81,7 +81,7 @@ aio-code {
       }
 
       span {
-        @include line-height(24);
+        @include mixins.line-height(24);
       }
 
       ol.linenums {
@@ -89,9 +89,9 @@ aio-code {
 
         li {
           margin: 0;
-          font-family: $code-font;
+          font-family: constants.$code-font;
           font-size: 90%;
-          @include line-height(24);
+          @include mixins.line-height(24);
         }
       }
     }

aio/src/styles/2-modules/contributor/_contributor-theme.scss

@@ -1,29 +1,26 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin contributor-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
   $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
 
   aio-contributor {
     background: mat-color($background, background);
 
     .contributor-info {
-      background: rgba($darkgray, 0.5);
+      background: rgba(constants.$darkgray, 0.5);
 
       .info-item {
-        color: $white;
+        color: constants.$white;
 
         &:hover {
-          color: $lightgray;
+          color: constants.$lightgray;
         }
       }
     }
 
     .contributor-image {
-      border: 2px solid $lightgray;
+      border: 2px solid constants.$lightgray;
     }
   }
 }

aio/src/styles/2-modules/contributor/_contributor.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 aio-contributor-list {
   .contributor-group {
@@ -58,7 +57,7 @@ aio-contributor {
 
     .info-item {
       display: flex;
-      @include font-size(14);
+      @include mixins.font-size(14);
       font-weight: 500;
       margin: 8px;
       padding: 0;
@@ -128,8 +127,8 @@ aio-contributor {
 
       p {
         margin: 8px 0;
-        @include font-size(12);
+        @include mixins.font-size(12);
-        @include line-height(14);
+        @include mixins.line-height(14);
         text-align: left;
       }
     }
@@ -158,8 +157,8 @@ aio-contributor {
 
   p {
     cursor: pointer;
-    @include font-size(14);
+    @include mixins.font-size(14);
-    @include line-height(18);
+    @include mixins.line-height(18);
     margin: 8px 16px;
     text-overflow: ellipsis;
     overflow-y: auto;

aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss

@@ -1,14 +1,18 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
-aio-shell.mode-archive {
+@mixin theme($theme) {
-  @include deploy-theme($blue-grey-900, $blue-grey-400);
+  $is-dark-theme: map-get($theme, is-dark);
-}
 
-aio-shell.mode-next {
+  aio-shell.mode-archive {
-  @include deploy-theme($brightred, $darkred);
+    @include mixins.deploy-theme(constants.$blue-grey-900, constants.$blue-grey-400, if($is-dark-theme, constants.$powderblue, constants.$blue-grey-900));
-}
+  }
   
-aio-shell.mode-rc {
+  aio-shell.mode-next {
-  @include deploy-theme($tangerine, $darkgoldenrod);
+    @include mixins.deploy-theme(constants.$brightred, constants.$darkred, if($is-dark-theme, constants.$powderblue, constants.$brightred));
+  }
+  
+  aio-shell.mode-rc {
+    @include mixins.deploy-theme(constants.$tangerine, constants.$darkgoldenrod, if($is-dark-theme, constants.$powderblue, constants.$tangerine));
+  }
 }

aio/src/styles/2-modules/details/_details-theme.scss

@@ -1,17 +1,12 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
-
-@mixin details-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
 
+@mixin theme($theme) {
   details {
-    box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+    box-shadow: 0 1px 4px 0 rgba(constants.$black, 0.37);
 
     > summary {
-      color: $black;
+      color: constants.$black;
     }
   }
 }

aio/src/styles/2-modules/details/_details.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 /*
  * General styling to make detail/summary tags look a bit more material
@@ -18,7 +18,7 @@
 details {
   > summary {
     cursor: pointer;
-    @include font-size(16);
+    @include mixins.font-size(16);
     position: relative;
     padding: 16px 24px;
     height: 16px;
@@ -31,10 +31,10 @@ details {
 
     // Rotate the icon
     i.material-icons.expand {
-      @include rotate(0deg);
+      @include mixins.rotate(0deg);
 
       @at-root #{selector-replace(&, 'details', 'details[open]')} {
-        @include rotate(180deg);
+        @include mixins.rotate(180deg);
       }
     }
 

aio/src/styles/2-modules/errors/_errors-theme.scss

@@ -1,32 +1,27 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import "~@angular/material/theming";
 
-@mixin errors-theme($theme) {
+@mixin theme($theme) {
-    $primary: map-get($theme, primary);
+  .error-list {
-    $background: map-get($theme, background);
+    li {
-    $foreground: map-get($theme, foreground);
+      .symbol {
-    $is-dark-theme: map-get($theme, is-dark);
+        &.runtime {
-
+          background: constants.$green-500;
-    .error-list {
-        li {
-            .symbol {
-                &.runtime {
-                    background: $green-500;
-                }
-
-                &.compiler {
-                    background: $blue-500;
-                }
-            }
-
-            a {
-                color: $blue-grey-600;
-
-                &:hover {
-                    background: $blue-grey-50;
-                    color: $blue-500;
-                }
-            }
         }
+
+        &.compiler {
+          background: constants.$blue-500;
+        }
+      }
+
+      a {
+        color: constants.$blue-grey-600;
+
+        &:hover {
+          background: constants.$blue-grey-50;
+          color: constants.$blue-500;
+        }
+      }
     }
+  }
 }

aio/src/styles/2-modules/errors/_errors.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .error-list {
   display: grid;
@@ -12,9 +11,9 @@
   }
 
   li {
-    @include font-size(14);
+    @include mixins.font-size(14);
     margin: 8px 0;
-    @include line-height(14);
+    @include mixins.line-height(14);
     padding: 0;
     float: left;
     overflow: hidden;
@@ -32,7 +31,7 @@
 
     a {
       display: inline-block;
-      @include line-height(16);
+      @include mixins.line-height(16);
       padding: 0 16px 0;
       text-decoration: none;
       transition: all .3s;

aio/src/styles/2-modules/features/_features.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 // FEATURES MARKETING PAGE SPECIFIC STYLES
 
@@ -16,7 +15,7 @@
   }
 
   .feature-title {
-    @include font-size(16);
+    @include mixins.font-size(16);
     font-weight: 500;
     margin: 8px 0px;
     clear: both;

aio/src/styles/2-modules/filetree/_filetree-theme.scss

@@ -1,24 +1,19 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
-
-@mixin filetree-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
 
+@mixin theme($theme) {
   .filetree {
-    background: $white;
+    background: constants.$white;
-    border: 4px solid $lightgray;
+    border: 4px solid constants.$lightgray;
 
     .file {
-      color: $darkgray;
+      color: constants.$darkgray;
     }
 
     .children {
       .file {
         &:before {
-          border-color: $lightgray;
+          border-color: constants.$lightgray;
         }
       }
     }

aio/src/styles/2-modules/filetree/_filetree.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .filetree {
   border-radius: 4px;
@@ -8,8 +7,8 @@
 
   .file {
     display: block;
-    @include letter-spacing(0.3);
+    @include mixins.letter-spacing(0.3);
-    @include line-height(32);
+    @include mixins.line-height(32);
   }
 
   .children {

aio/src/styles/2-modules/guides/_guides-theme.scss

@@ -1,13 +1,10 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin guides-theme($theme) {
+@mixin theme($theme) {
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
     $is-dark-theme: map-get($theme, is-dark);
 
     .reviewed {
-        color: lighten($darkgray, 10);
+        color: if($is-dark-theme, constants.$offwhite, lighten(constants.$darkgray, 10));
       }
 }

aio/src/styles/2-modules/guides/_guides.scss

@@ -1,8 +1,7 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .reviewed {
-  @include font-size(13);
+  @include mixins.font-size(13);
   font-style: italic;
   text-align: right;
 }

aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss

@@ -1,12 +1,7 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
-
-@mixin heading-anchors-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
 
+@mixin theme($theme) {
   .sidenav-content {
     h1,
     h2,
@@ -15,7 +10,7 @@
     h5,
     h6 {
       .header-link {
-        color: $mediumgray;
+        color: constants.$mediumgray;
       }
     }
   }

aio/src/styles/2-modules/heading-anchors/_heading-anchors.scss

@@ -1,5 +1,3 @@
-@use '../../constants' as *;
-
 .sidenav-content {
   h1, h2, h3, h4, h5, h6 {
 

aio/src/styles/2-modules/hr/_hr-theme.scss

@@ -1,13 +1,10 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin hr-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   hr {
-    background: if($is-dark-theme, $mediumgray, $lightgray);
+    background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
   }
 }

aio/src/styles/2-modules/hr/_hr.scss

@@ -1,5 +1,3 @@
-@use '../../constants' as *;
-
 hr {
   border: none;
   height: 1px;

aio/src/styles/2-modules/images/_images-theme.scss

@@ -1,19 +1,16 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin images-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   .content {
     .lightbox {
-      border: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+      border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
-      background-color: if($is-dark-theme, $deepgray, $lightboxgray);
+      background-color: if($is-dark-theme, constants.$deepgray, constants.$lightboxgray);
 
       img {
-        background-color: $white;
+        background-color: constants.$white;
       }
     }
   }

aio/src/styles/2-modules/images/_images.scss

@@ -1,5 +1,3 @@
-@use '../../constants' as *;
-
 .content {
   img {
 

aio/src/styles/2-modules/label/_label-theme.scss

@@ -1,27 +1,22 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
-
-@mixin label-theme($theme) {
-    $primary: map-get($theme, primary);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-    $is-dark-theme: map-get($theme, is-dark);
 
+@mixin theme($theme) {
     .api-header label {
-        color: $white;
+        color: constants.$white;
 
         &.api-status-label {
-          background-color: $mediumgray;
+          background-color: constants.$mediumgray;
       
           &.deprecated, &.security, &.impure-pipe {
-            background-color: $brightred;
+            background-color: constants.$brightred;
           }
         }
       
         &.api-type-label {
-          background-color: $accentblue;
+          background-color: constants.$accentblue;
       
-          @each $name, $symbol in $api-symbols {
+          @each $name, $symbol in constants.$api-symbols {
             &.#{$name} {
               background: map-get($symbol, background);
             }
@@ -29,13 +24,13 @@
         }
       
         &.page-label {
-          background-color: $mist;
+          background-color: constants.$mist;
-          color: $mediumgray;
+          color: constants.$mediumgray;
         }
       
         &.property-type-label {
-          background-color: $darkgray;
+          background-color: constants.$darkgray;
-          color: $white;
+          color: constants.$white;
         }
       }
 }

aio/src/styles/2-modules/label/_label.scss

@@ -1,11 +1,10 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .api-header label {
   border-radius: 4px;
   padding: 2px 10px;
   display: inline;
-  @include font-size(12);
+  @include mixins.font-size(12);
   margin-right: 8px;
   font-weight: 500;
   text-transform: uppercase;
@@ -29,7 +28,7 @@
   }
 
   &.property-type-label {
-    @include font-size(12);
+    @include mixins.font-size(12);
     text-transform: none;
   }
 }

aio/src/styles/2-modules/notification/_notification-theme.scss

@@ -1,24 +1,19 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
-
-@mixin notification-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-  $is-dark-theme: map-get($theme, is-dark);
 
+@mixin theme($theme) {
   aio-notification {
-    background: $darkgray;
+    background: constants.$darkgray;
 
     .close-button {
-      background: $darkgray;
+      background: constants.$darkgray;
     }
 
     .content {
-      background: $darkgray;
+      background: constants.$darkgray;
 
       .action-button {
-        background: $brightred;
+        background: constants.$brightred;
       }
     }
   }

aio/src/styles/2-modules/notification/_notification.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 $notificationHeight: 56px;
 
@@ -57,7 +56,7 @@ aio-notification {
       border-radius: 15px;
       text-transform: uppercase;
       padding: 0 10px;
-      @include font-size(12);
+      @include mixins.font-size(12);
       @media (max-width: 780px) {
         display: none;
       }
@@ -91,7 +90,7 @@ aio-notification {
   }
 }
 
-@include marketing-pages {
+@include mixins.marketing-pages {
   &.aio-notification-show {
     mat-sidenav-container.sidenav-container {
       .sidenav-content {

aio/src/styles/2-modules/presskit/_presskit-theme.scss

@@ -1,26 +1,24 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin presskit-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
   $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   .presskit-container {
     .presskit-section {
       &:not(:first-child) {
-        border-top: 1px solid $lightgray;
+        border-top: 1px solid constants.$lightgray;
       }
 
       .presskit-icon-group {
         .presskit-icon-item {
           .presskit-image-container {
             .transparent-img {
-              background-color: $white;
+              background-color: constants.$white;
 
               &-inverse {
-                background-color: if($is-dark-theme, mat-color($background, background), $deepgray);
+                background-color: if($is-dark-theme, mat-color($background, background), constants.$deepgray);
               }
             }
           }

aio/src/styles/2-modules/presskit/_presskit.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 .presskit-container {
   padding: 0 32px 32px 32px;
@@ -40,7 +39,7 @@
             margin-right: 0;
           }
 
-          .transparent-img {
+          .transparent-img, .transparent-img-inverse {
             border-radius: 50%;
           }
         }
@@ -57,7 +56,7 @@
             &::after {
               content: "cloud_download";
               font-family: "Material Icons";
-              @include font-size(24);
+              @include mixins.font-size(24);
               position: absolute;
               right: 0;
             }

aio/src/styles/2-modules/resources/_resources-theme.scss

@@ -1,22 +1,19 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin resources-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   aio-resource-list {
     .subcategory-title {
-      background-color: if($is-dark-theme, $deepgray, $mist);
+      background-color: if($is-dark-theme, constants.$deepgray, constants.$mist);
     }
 
     .resource-row-link {
-      background-color: if($is-dark-theme, $darkgray, $white);
+      background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
 
       &:hover {
-        border-color: if($is-dark-theme, rgba($lightblue, 0.5), rgba($blue, 0.5));
+        border-color: if($is-dark-theme, rgba(constants.$lightblue, 0.5), rgba(constants.$blue, 0.5));
         box-shadow: 0 8px 8px rgb(1 131 163 / 24%), 0 0 8px rgb(1 67 163 / 12%), 0 6px 18px rgb(43 133 231 / 12%);
       }
     }

aio/src/styles/2-modules/resources/_resources.scss

@@ -1,10 +1,10 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 aio-resource-list {
   .showcase {
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 1px 4px 0 rgba($black, 0.37);
+    box-shadow: 0 1px 4px 0 rgba(constants.$black, 0.37);
     border-radius: 4px;
     margin-bottom: 8px * 6;
   }
@@ -12,7 +12,7 @@ aio-resource-list {
   .resource-item {
     h4 {
       margin: 0;
-      @include line-height(24);
+      @include mixins.line-height(24);
     }
 
     p {

aio/src/styles/2-modules/search-results/_search-results-theme.scss

@@ -1,39 +1,37 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin search-results-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   aio-search-results {
     .search-results {
-      background-color: $darkgray;
+      background-color: constants.$darkgray;
       box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
 
       .search-area {
         .search-section-header {
-          color: $white;
+          color: constants.$white;
         }
 
         ul {
           .search-result-item {
-            color: $lightgray;
+            color: if($is-dark-theme, constants.$offwhite , constants.$lightgray);
 
             &:hover {
-              color: $white;
+              color: constants.$white;
             }
           }
         }
       }
 
       .no-results {
-        color: $white;
+        color: mat-color($foreground, text);
       }
 
       a {
-        color: $white;
+        color: mat-color($foreground, text);
       }
     }
 
@@ -41,24 +39,24 @@
       .search-results {
         .search-area {
           .search-section-header {
-            color: $darkgray;
+            color: constants.$darkgray;
           }
 
           .search-result-item {
-            color: lighten($darkgray, 10);
+            color: if($is-dark-theme, constants.$offwhite ,lighten(constants.$darkgray, 10));
 
             &:hover {
-              color: $accentblue;
+              color: constants.$accentblue;
             }
           }
         }
 
         .no-results {
-          color: $darkgray;
+          color: mat-color($foreground, text);
         }
 
         a {
-          color: $blue;
+          color: constants.$blue;
         }
       }
     }

aio/src/styles/2-modules/search-results/_search-results.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 aio-search-results {
   z-index: 10;
@@ -24,7 +23,7 @@ aio-search-results {
       padding: 16px;
 
       .search-section-header {
-        @include font-size(16);
+        @include mixins.font-size(16);
         font-weight: 400;
         margin: 10px 0px 5px;
         text-transform: uppercase;
@@ -39,8 +38,8 @@ aio-search-results {
         }
 
         .search-result-item {
-          @include font-size(14);
+          @include mixins.font-size(14);
-          @include line-height(24);
+          @include mixins.line-height(24);
           display: inline-block;
           font-weight: normal;
           padding: 0.6rem 0;

aio/src/styles/2-modules/select-menu/_select-menu-theme.scss

@@ -1,22 +1,20 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin select-menu-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
   $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   aio-select {
     .form-select-button {
-      background: if($is-dark-theme, $darkgray, $white);
+      background: if($is-dark-theme, constants.$darkgray, constants.$white);
-      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
-      border: 1px solid if($is-dark-theme, $darkgray, $white);
+      border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$white);
-      color: if($is-dark-theme, $blue-grey-200, $blue-grey-600);
+      color: if($is-dark-theme, constants.$blue-grey-200, constants.$blue-grey-600);
 
       &:focus {
-        border: 1px solid $blue-400;
+        border: 1px solid constants.$blue-400;
-        box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+        box-shadow: 0 2px 2px rgba(constants.$blue-400, 0.24), 0 0 2px rgba(constants.$blue-400, 0.12);
       }
 
       &[disabled] {
@@ -26,16 +24,16 @@
 
     .form-select-dropdown {
       background: mat-color($background, background);
-      box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
+      box-shadow: 0 16px 16px rgba(constants.$black, 0.24), 0 0 16px rgba(constants.$black, 0.12);
 
       li {
         &:hover {
-          background-color: if($is-dark-theme, $darkgray, $blue-grey-50);
+          background-color: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50);
-          color: f($is-dark-theme, $blue-grey-400, $blue-grey-500);
+          color: f($is-dark-theme, constants.$blue-grey-400, constants.$blue-grey-500);
         }
 
         &.selected {
-          background-color: if($is-dark-theme, $darkgray, $blue-grey-100);
+          background-color: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-100);
         }
       }
     }

aio/src/styles/2-modules/select-menu/_select-menu.scss

@@ -1,5 +1,5 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '../../mixins' as *;
+@use '../../mixins';
 
 /* SELECT MENU */
 
@@ -11,9 +11,9 @@ aio-select {
   .form-select-button {
     box-sizing: border-box;
     border-radius: 4px;
-    @include font-size(14);
+    @include mixins.font-size(14);
     font-weight: 400;
-    @include line-height(32);
+    @include mixins.line-height(32);
     outline: none;
     padding: 4px 16px;
     text-align: left;
@@ -42,12 +42,12 @@ aio-select {
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: $layer-2;
+    z-index: constants.$layer-2;
 
     li {
       cursor: pointer;
-      @include font-size(14);
+      @include mixins.font-size(14);
-      @include line-height(32);
+      @include mixins.line-height(32);
       margin: 0;
       padding: 4px 16px 4px 40px;
       position: relative;
@@ -66,7 +66,7 @@ aio-select {
         left: 16px;
         position: absolute;
         top: 12px;
-        z-index: $layer-5;
+        z-index: constants.$layer-5;
       }
     }
   }

aio/src/styles/2-modules/table/_table-theme.scss

@@ -1,42 +1,40 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin table-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
   $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
   table {
-    box-shadow: 0 2px 2px rgba($mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, $white, $black), 0.12);
+    box-shadow: 0 2px 2px rgba(constants.$mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, constants.$white, constants.$black), 0.12);
-    background-color: if($is-dark-theme, mat-color($background, background), $white);
+    background-color: if($is-dark-theme, mat-color($background, background), constants.$white);
 
     thead > {
       tr > th {
-        background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2));
+        background: if($is-dark-theme, constants.$deepgray, rgba(constants.$lightgray, 0.2));
-        border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+        border-bottom: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
-        color: if($is-dark-theme, $white, $darkgray);
+        color: if($is-dark-theme, constants.$white, constants.$darkgray);
       }
     }
 
     tbody > tr > {
       th,
       td {
-        border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+        border-bottom: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
       }
 
       td {
         tr td:first-child {
           @media (max-width: 480px) {
-            background-color: $lightgray;
+            background-color: constants.$lightgray;
           }
         }
       }
 
       th {
-        background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2));
+        background: if($is-dark-theme, constants.$deepgray, rgba(constants.$lightgray, 0.2));
         &:not(:last-child) {
-          border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
+          border-right: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
         }
       }
     }
@@ -44,7 +42,7 @@
     tbody > tr {
       &:last-child td {
         @media (max-width: 480px) {
-          border-bottom: 1px solid if($is-dark-theme, $deepgray, $lightgray);
+          border-bottom: 1px solid if($is-dark-theme, constants.$deepgray, constants.$lightgray);
         }
       }
     }

aio/src/styles/2-modules/table/_table.scss

@@ -1,5 +1,4 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 table {
   margin: 24px 0px;
@@ -23,12 +22,12 @@ table {
     }
 
     tr > th {
-      @include font-size(12);
+      @include mixins.font-size(12);
       font-weight: 500;
       padding: 8px 24px;
       text-align: left;
       text-transform: uppercase;
-      @include line-height(28);
+      @include mixins.line-height(28);
     }
   }
 
@@ -37,7 +36,7 @@ table {
     td {
       padding: 16px;
       text-align: left;
-      @include line-height(24);
+      @include mixins.line-height(24);
       vertical-align: top;
 
       @media (max-width: 480px) {
@@ -50,7 +49,7 @@ table {
     }
 
     td {
-      @include letter-spacing(0.3);
+      @include mixins.letter-spacing(0.3);
     }
 
     th {

aio/src/styles/2-modules/toc/_toc-theme.scss

@@ -1,9 +1,7 @@
-@use '../../constants' as *;
+@use '../../constants';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
-@mixin toc-theme($theme) {
+@mixin theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
@@ -12,7 +10,7 @@
       .toc-heading {
         &.secondary {
           &:hover {
-            color: $accentblue;
+            color: constants.$accentblue;
           }
         }
       }
@@ -21,22 +19,22 @@
         &.toc-heading,
         &.toc-more-items {
           &.embedded:focus {
-            background: if($is-dark-theme, $darkgray, $lightgray);
+            background: if($is-dark-theme, constants.$darkgray, constants.$lightgray);
-            color: if($is-dark-theme, $white, $mediumgray);
+            color: if($is-dark-theme, constants.$white, constants.$mediumgray);
           }
         }
 
         &.toc-heading {
           &:hover:not(.embedded) {
-            color: $accentblue;
+            color: constants.$accentblue;
           }
         }
 
         &.toc-more-items {
-          color: $mediumgray;
+          color: if($is-dark-theme, constants.$lightgray, constants.$mediumgray);
 
           &:hover {
-            color: $accentblue;
+            color: constants.$accentblue;
           }
         }
       }
@@ -44,38 +42,38 @@
       ul.toc-list {
         li {
           &.h1:after {
-            background: if($is-dark-theme, $mediumgray, $lightgray);
+            background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
           }
 
           a {
-            color: if($is-dark-theme, $white, lighten($darkgray, 10));
+            color: if($is-dark-theme, constants.$white, lighten(constants.$darkgray, 10));
           }
 
           &:hover {
             * {
-              color: if($is-dark-theme, $lightblue, $accentblue);
+              color: if($is-dark-theme, constants.$lightblue, constants.$accentblue);
             }
           }
 
           &.active {
             * {
-              color: if($is-dark-theme, $cyan, $blue);
+              color: if($is-dark-theme, constants.$cyan, constants.$blue);
             }
 
             a:before {
-              background: if($is-dark-theme, $cyan, $blue);
+              background: if($is-dark-theme, constants.$cyan, constants.$blue);
             }
           }
         }
 
         &:not(.embedded) li {
           &:before {
-            border-left-color: if($is-dark-theme, $darkgray, $lightgray);
+            border-left-color: if($is-dark-theme, constants.$darkgray, constants.$lightgray);
           }
 
           &:not(.active):hover {
             a:before {
-              background: $lightgray;
+              background: constants.$lightgray;
             }
           }
         }

aio/src/styles/2-modules/toc/_toc.scss

@@ -1,10 +1,9 @@
-@use '../../constants' as *;
+@use '../../mixins';
-@use '../../mixins' as *;
 
 $tocItemLineHeight: 24;
 $tocItemTopPadding: 9;
-$tocMarkerSize: 6;
 $tocMarkerRailSize: 1;
+$tocMarkerSize: 6;
 
 @mixin tocMarker() {
   border-radius: 50%;
@@ -29,13 +28,13 @@ $tocMarkerRailSize: 1;
 
 aio-toc {
   .toc-inner {
-    @include font-size(13);
+    @include mixins.font-size(13);
     overflow-y: visible;
     padding: 4px 0 0 10px;
 
     .toc-heading,
     .toc-list .h1 {
-      @include font-size(16);
+      @include mixins.font-size(16);
     }
 
     .toc-heading {
@@ -92,11 +91,11 @@ aio-toc {
 
     .mat-icon {
       &.collapsed {
-        @include rotate(0deg);
+        @include mixins.rotate(0deg);
       }
 
       &:not(.collapsed) {
-        @include rotate(90deg);
+        @include mixins.rotate(90deg);
       }
     }
 
@@ -111,7 +110,7 @@ aio-toc {
 
       li {
         box-sizing: border-box;
-        @include line-height($tocItemLineHeight);
+        @include mixins.line-height($tocItemLineHeight);
         padding: #{$tocItemTopPadding}px 0 #{$tocItemTopPadding}px 12px;
         position: relative;
         transition: all 0.3s ease-in-out;
@@ -131,7 +130,7 @@ aio-toc {
 
         a {
           overflow: visible;
-          @include font-size(14);
+          @include mixins.font-size(14);
           line-height: inherit;
           display: table-cell;
         }

aio/src/styles/_app-theme.scss

@@ -1,9 +1,9 @@
-@use '0-base/typography-theme' as *;
+@use '0-base/typography-theme';
-@use '1-layouts/theme' as *;
+@use '1-layouts/theme' as layout-themes;
-@use '2-modules/theme' as *;
+@use '2-modules/theme' as module-themes;
 
-@mixin app-theme($theme) {
+@mixin theme($theme) {
-  @include typography-theme($theme);
+  @include typography-theme.theme($theme);
-  @include layout-themes($theme);
+  @include layout-themes.theme($theme);
-  @include module-themes($theme);
+  @include module-themes.theme($theme);
 }

aio/src/styles/_constants.scss

@@ -10,7 +10,12 @@ $layer-4: 4;
 $layer-5: 5;
 
 // COLOR PALETTE
+$cyan: #39d0ff;
+$powderblue: #bae0ff;
+$lightblue: #7fc9ff;
 $blue: #1976D2;
+$warmblue: #7491ff;
+$coldblue: #8ccade;
 $darkblue: #1669bb;
 $accentblue: #1E88E5;
 $brightred: #DD0031;

aio/src/styles/_mixins.scss

@@ -1,4 +1,4 @@
-@use './constants' as *;
+@use './constants';
 
 // REM Font Adjustments
 @mixin font-size($sizeValue) {
@@ -41,39 +41,38 @@
     border-radius: 5px;
     padding: 20px;
     margin: 0 auto; // was 24
-    border: 0.5px solid $lightgray;
+    border: 0.5px solid constants.$lightgray;
 }
 
 // INFO CARD SKELETON
 @mixin card($height, $width) {
   height: $height;
   width: $width;
-  background-color: $white;
   border-radius: 4px;
-  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
   box-sizing: border-box;
   transition: box-shadow .5s;
 
   &:hover {
-    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+    box-shadow: 0 8px 8px rgba(constants.$black, 0.24), 0 0 8px rgba(constants.$black, 0.12);
     text-decoration: none;
   }
 }
 
-@mixin deploy-theme($mainColor, $gradientTargetColor) {
+@mixin deploy-theme($mainColor, $gradientTargetColor, $textColor) {
   .mat-toolbar.mat-primary, footer {
     background: linear-gradient(145deg, $mainColor, $gradientTargetColor);
   }
 
   .vertical-menu-item {
     &.selected, &:hover {
-      color: $mainColor;
+      color: $textColor;
     }
   }
 
   .toc-inner ul.toc-list li {
     &.active a {
-      color: $mainColor;
+      color: $textColor;
 
       &:before {
         background-color: $mainColor;
@@ -81,7 +80,7 @@
     }
 
     &:hover a {
-      color: $mainColor;
+      color: $textColor;
     }
   }
 }

aio/src/styles/_print.scss

@@ -1,4 +1,4 @@
-@use './constants' as *;
+@use './constants';
 
 @media print {
   // General Adjustments
@@ -13,7 +13,7 @@
 
   h1 {
     height: 40px !important;
-    color: $darkgray !important;
+    color: constants.$darkgray !important;
   }
 
   h1,
@@ -38,7 +38,7 @@
   }
 
   table tbody tr:last-child td {
-    border-bottom: 1px solid $lightgray !important;
+    border-bottom: 1px solid constants.$lightgray !important;
   }
 
   img {
@@ -52,7 +52,7 @@
   p > code,
   li > code,
   table code {
-    color: $blue !important;
+    color: constants.$blue !important;
   }
 
   // No Print Class
@@ -104,19 +104,19 @@
       .lit,
       .pun,
       .dec {
-        color: $darkgray;
+        color: constants.$darkgray;
       }
     }
 
     header {
       background: none;
-      border: 0.5px solid $lightgray;
+      border: 0.5px solid constants.$lightgray;
-      color: $darkgray;
+      color: constants.$darkgray;
     }
   }
 
   .content code {
-    border: 0.5px solid $lightgray;
+    border: 0.5px solid constants.$lightgray;
   }
 
   .mat-tab-labels {
@@ -132,7 +132,7 @@
   }
 
   .api-header label {
-    color: $darkgray !important;
+    color: constants.$darkgray !important;
     font-weight: bold !important;
     margin: 2px !important;
     padding: 0 !important;

aio/src/styles/_typography-theme.scss

@@ -2,9 +2,6 @@
 
 @mixin docs-site-typography-theme($theme) {
   $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
   .docs-component-viewer-tabbed-content,

aio/src/styles/custom-themes/dark-theme.scss

@@ -1,10 +1,10 @@
-@use '../app-theme' as *;
+@use '../app-theme';
-@use '~@angular/material/theming' as *;
+@import "~@angular/material/theming";
 
-$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
+$ng-io-primary: mat-palette($mat-blue, 700, 600, 900);
 $ng-io-accent: mat-palette($mat-red, 700, 600, 800);
 $ng-io-warn: mat-palette($mat-red);
 $ng-io-theme: mat-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
 @include angular-material-theme($ng-io-theme);
-@include app-theme($ng-io-theme);
+@include app-theme.theme($ng-io-theme);

aio/src/styles/custom-themes/light-theme.scss

@@ -1,9 +1,10 @@
-@use '../app-theme' as *;
+@use '../app-theme';
-@use '~@angular/material/theming' as *;
+@import '~@angular/material/theming';
 
 $ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
 $ng-io-accent: mat-palette($mat-red, 700, 600, 800);
 $ng-io-warn: mat-palette($mat-red);
 $ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
 
-// We don't have to call theme mixins here because light.scss is used by default in ng-io-theme.scss
+@include angular-material-theme($ng-io-theme);
+@include app-theme.theme($ng-io-theme);

aio/src/styles/main.scss

@@ -1,5 +1,3 @@
-@use './ng-io-theme.scss';
-
 // import directories
 @use './0-base' as base;
 @use './1-layouts' as layouts;
@@ -7,3 +5,9 @@
 
 // import print styles
 @use './print';
+
+@import '~@angular/material/theming';
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include mat-core();

aio/src/styles/ng-io-theme.scss

@@ -1,10 +0,0 @@
-@use '~@angular/material/theming' as *;
-@import 'app-theme';
-// Plus imports for other components in your app.
-
-// Include the base styles for Angular Material core. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-@include mat-core();
-
-@include angular-material-theme(light.$ng-io-theme);
-@include app-theme(light.$ng-io-theme);

goldens/size-tracking/aio-payloads.json

@@ -2,8 +2,8 @@
   "aio": {
     "master": {
       "uncompressed": {
-        "runtime-es2015": 4538,
+        "runtime-es2015": 4619,
-        "main-es2015": 451314,
+        "main-es2015": 453172,
         "polyfills-es2015": 55210
       }
     }
@@ -11,8 +11,8 @@
   "aio-local": {
     "master": {
       "uncompressed": {
-        "runtime-es2015": 4538,
+        "runtime-es2015": 4619,
-        "main-es2015": 451493,
+        "main-es2015": 453394,
         "polyfills-es2015": 55291
       }
     }