From cdb8f556fb7c9872783257bca8b8748384c4a409 Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Mon, 8 Mar 2021 23:27:16 -0500 Subject: [PATCH] feat(docs-infra): implement dark mode (#41129) defines styles for a first iteration of an aio darkmode PR Close #41129 --- aio/angular.json | 10 +- aio/content/marketing/index.html | 4 +- aio/content/marketing/presskit.html | 4 +- aio/src/app/app.component.html | 3 +- aio/src/app/app.module.ts | 2 + aio/src/app/shared/shared.module.ts | 7 +- .../theme-picker/style-manager/index.ts | 3 - .../style-manager/style-manager.spec.ts | 56 ----------- .../style-manager/style-manager.ts | 48 --------- .../theme-picker/theme-picker.component.html | 3 - .../theme-picker.component.spec.ts | 25 ----- .../theme-picker/theme-picker.component.ts | 36 ------- .../theme-picker/theme-storage/index.ts | 3 - .../theme-storage/theme-storage.ts | 28 ------ .../theme-toggle.component.spec.ts | 92 +++++++++++++++++ .../theme-picker/theme-toggle.component.ts | 91 +++++++++++++++++ aio/src/index.html | 11 ++- aio/src/styles/0-base/_typography-theme.scss | 84 ++++++++-------- aio/src/styles/0-base/_typography.scss | 41 ++++---- aio/src/styles/1-layouts/_theme.scss | 26 ++--- .../content-layout/_content-layout.scss | 4 +- .../1-layouts/footer/_footer-theme.scss | 16 +-- aio/src/styles/1-layouts/footer/_footer.scss | 12 +-- .../layout-global/_layout-global-theme.scss | 10 +- .../_marketing-layout-theme.scss | 44 ++++----- .../marketing-layout/_marketing-layout.scss | 64 +++++------- .../1-layouts/not-found/_not-found-theme.scss | 13 +-- .../1-layouts/not-found/_not-found.scss | 27 +++-- .../1-layouts/sidenav/_sidenav-theme.scss | 28 +++--- .../styles/1-layouts/sidenav/_sidenav.scss | 26 ++--- .../1-layouts/top-menu/_top-menu-theme.scss | 54 +++++----- .../styles/1-layouts/top-menu/_top-menu.scss | 34 +++++-- aio/src/styles/2-modules/_index.scss | 1 + aio/src/styles/2-modules/_theme.scss | 99 ++++++++++--------- .../styles/2-modules/alert/_alert-theme.scss | 35 +++---- aio/src/styles/2-modules/alert/_alert.scss | 5 +- .../2-modules/api-list/_api-list-theme.scss | 40 ++++---- .../styles/2-modules/api-list/_api-list.scss | 28 +++--- .../2-modules/api-pages/_api-pages-theme.scss | 23 ++--- .../2-modules/api-pages/_api-pages.scss | 21 ++-- .../api-symbols/_api-symbols-theme.scss | 17 ++-- .../2-modules/api-symbols/_api-symbols.scss | 7 +- .../2-modules/buttons/_buttons-theme.scss | 43 ++++---- .../styles/2-modules/buttons/_buttons.scss | 26 ++--- .../2-modules/callout/_callout-theme.scss | 29 +++--- .../styles/2-modules/callout/_callout.scss | 7 +- .../styles/2-modules/card/_card-theme.scss | 26 ++--- aio/src/styles/2-modules/card/_card.scss | 22 ++--- .../styles/2-modules/code/_code-theme.scss | 53 +++++----- aio/src/styles/2-modules/code/_code.scss | 12 +-- .../contributor/_contributor-theme.scss | 17 ++-- .../2-modules/contributor/_contributor.scss | 13 ++- .../2-modules/deploy-theme/_deploy-theme.scss | 28 +++--- .../2-modules/details/_details-theme.scss | 15 +-- .../styles/2-modules/details/_details.scss | 10 +- .../2-modules/errors/_errors-theme.scss | 51 +++++----- aio/src/styles/2-modules/errors/_errors.scss | 9 +- .../styles/2-modules/features/_features.scss | 5 +- .../2-modules/filetree/_filetree-theme.scss | 19 ++-- .../styles/2-modules/filetree/_filetree.scss | 7 +- .../2-modules/guides/_guides-theme.scss | 11 +-- aio/src/styles/2-modules/guides/_guides.scss | 5 +- .../_heading-anchors-theme.scss | 13 +-- .../heading-anchors/_heading-anchors.scss | 2 - aio/src/styles/2-modules/hr/_hr-theme.scss | 11 +-- aio/src/styles/2-modules/hr/_hr.scss | 2 - .../2-modules/images/_images-theme.scss | 15 ++- aio/src/styles/2-modules/images/_images.scss | 2 - .../styles/2-modules/label/_label-theme.scss | 29 +++--- aio/src/styles/2-modules/label/_label.scss | 7 +- .../notification/_notification-theme.scss | 19 ++-- .../2-modules/notification/_notification.scss | 7 +- .../2-modules/presskit/_presskit-theme.scss | 14 ++- .../styles/2-modules/presskit/_presskit.scss | 7 +- .../2-modules/resources/_resources-theme.scss | 15 ++- .../2-modules/resources/_resources.scss | 8 +- .../search-results/_search-results-theme.scss | 30 +++--- .../search-results/_search-results.scss | 9 +- .../select-menu/_select-menu-theme.scss | 28 +++--- .../2-modules/select-menu/_select-menu.scss | 16 +-- .../styles/2-modules/table/_table-theme.scss | 28 +++--- aio/src/styles/2-modules/table/_table.scss | 11 +-- aio/src/styles/2-modules/toc/_toc-theme.scss | 34 +++---- aio/src/styles/2-modules/toc/_toc.scss | 17 ++-- aio/src/styles/_app-theme.scss | 14 +-- aio/src/styles/_constants.scss | 5 + aio/src/styles/_mixins.scss | 17 ++-- aio/src/styles/_print.scss | 18 ++-- aio/src/styles/_typography-theme.scss | 3 - .../{dark.scss => dark-theme.scss} | 8 +- .../{light.scss => light-theme.scss} | 7 +- aio/src/styles/main.scss | 8 +- aio/src/styles/ng-io-theme.scss | 10 -- goldens/size-tracking/aio-payloads.json | 8 +- 94 files changed, 945 insertions(+), 1070 deletions(-) delete mode 100644 aio/src/app/shared/theme-picker/style-manager/index.ts delete mode 100644 aio/src/app/shared/theme-picker/style-manager/style-manager.spec.ts delete mode 100644 aio/src/app/shared/theme-picker/style-manager/style-manager.ts delete mode 100644 aio/src/app/shared/theme-picker/theme-picker.component.html delete mode 100644 aio/src/app/shared/theme-picker/theme-picker.component.spec.ts delete mode 100644 aio/src/app/shared/theme-picker/theme-picker.component.ts delete mode 100644 aio/src/app/shared/theme-picker/theme-storage/index.ts delete mode 100644 aio/src/app/shared/theme-picker/theme-storage/theme-storage.ts create mode 100644 aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts create mode 100644 aio/src/app/shared/theme-picker/theme-toggle.component.ts rename aio/src/styles/custom-themes/{dark.scss => dark-theme.scss} (57%) rename aio/src/styles/custom-themes/{light.scss => light-theme.scss} (56%) delete mode 100644 aio/src/styles/ng-io-theme.scss diff --git a/aio/angular.json b/aio/angular.json index ed6581ca49..22200e173b 100644 --- a/aio/angular.json +++ b/aio/angular.json @@ -44,14 +44,14 @@ "src/styles/main.scss", { "inject": false, - "input": "src/styles/custom-themes/light.scss", - "bundleName": "assets/light" + "input": "src/styles/custom-themes/dark-theme.scss", + "bundleName": "dark-theme" }, { "inject": false, - "input": "src/styles/custom-themes/dark.scss", - "bundleName": "assets/dark" - }, + "input": "src/styles/custom-themes/light-theme.scss", + "bundleName": "light-theme" + } ], "scripts": [], "budgets": [ diff --git a/aio/content/marketing/index.html b/aio/content/marketing/index.html index e907ab7acf..60b6aec13b 100755 --- a/aio/content/marketing/index.html +++ b/aio/content/marketing/index.html @@ -8,9 +8,7 @@
- +
diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html index 74c9787a51..ae30612190 100644 --- a/aio/content/marketing/presskit.html +++ b/aio/content/marketing/presskit.html @@ -37,7 +37,7 @@
- Black logo Angular + Black logo Angular

One Color Logo

@@ -54,7 +54,7 @@
- Transparent logo Angular + Transparent logo Angular

One Color Inverse Logo

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html index a443a57f48..be0db3b713 100644 --- a/aio/src/app/app.component.html +++ b/aio/src/app/app.component.html @@ -1,4 +1,5 @@
+
@@ -23,7 +24,7 @@ - +
diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts index 94fcd85b97..db5ffb6e88 100644 --- a/aio/src/app/app.module.ts +++ b/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 `` component. // tslint:disable: max-line-length @@ -170,6 +171,7 @@ export const svgIconProviders = [ SearchBoxComponent, NotificationComponent, TopMenuComponent, + ThemeToggleComponent ], providers: [ Deployment, diff --git a/aio/src/app/shared/shared.module.ts b/aio/src/app/shared/shared.module.ts index 8c03e90299..afefd050e8 100644 --- a/aio/src/app/shared/shared.module.ts +++ b/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, - ThemePickerComponent + SelectComponent ], declarations: [ SearchResultsComponent, - SelectComponent, - ThemePickerComponent + SelectComponent ] }) export class SharedModule {} diff --git a/aio/src/app/shared/theme-picker/style-manager/index.ts b/aio/src/app/shared/theme-picker/style-manager/index.ts deleted file mode 100644 index 05ad917e68..0000000000 --- a/aio/src/app/shared/theme-picker/style-manager/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// Taken from Angular Material docs repo - -export * from './style-manager'; diff --git a/aio/src/app/shared/theme-picker/style-manager/style-manager.spec.ts b/aio/src/app/shared/theme-picker/style-manager/style-manager.spec.ts deleted file mode 100644 index d1101ff8e7..0000000000 --- a/aio/src/app/shared/theme-picker/style-manager/style-manager.spec.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/aio/src/app/shared/theme-picker/style-manager/style-manager.ts b/aio/src/app/shared/theme-picker/style-manager/style-manager.ts deleted file mode 100644 index 01d2f804b7..0000000000 --- a/aio/src/app/shared/theme-picker/style-manager/style-manager.ts +++ /dev/null @@ -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}`; -} diff --git a/aio/src/app/shared/theme-picker/theme-picker.component.html b/aio/src/app/shared/theme-picker/theme-picker.component.html deleted file mode 100644 index d5927664dd..0000000000 --- a/aio/src/app/shared/theme-picker/theme-picker.component.html +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/aio/src/app/shared/theme-picker/theme-picker.component.spec.ts b/aio/src/app/shared/theme-picker/theme-picker.component.spec.ts deleted file mode 100644 index 311ae9a933..0000000000 --- a/aio/src/app/shared/theme-picker/theme-picker.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ThemePickerComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ThemePickerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/aio/src/app/shared/theme-picker/theme-picker.component.ts b/aio/src/app/shared/theme-picker/theme-picker.component.ts deleted file mode 100644 index 666f9deb17..0000000000 --- a/aio/src/app/shared/theme-picker/theme-picker.component.ts +++ /dev/null @@ -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); - } - } -} diff --git a/aio/src/app/shared/theme-picker/theme-storage/index.ts b/aio/src/app/shared/theme-picker/theme-storage/index.ts deleted file mode 100644 index 0d529e25c9..0000000000 --- a/aio/src/app/shared/theme-picker/theme-storage/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// Taken from Angular Material docs repo - -export * from './theme-storage'; diff --git a/aio/src/app/shared/theme-picker/theme-storage/theme-storage.ts b/aio/src/app/shared/theme-picker/theme-storage/theme-storage.ts deleted file mode 100644 index 91e70168bb..0000000000 --- a/aio/src/app/shared/theme-picker/theme-storage/theme-storage.ts +++ /dev/null @@ -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 { } - } -} diff --git a/aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts b/aio/src/app/shared/theme-picker/theme-toggle.component.spec.ts new file mode 100644 index 0000000000..21b8312639 --- /dev/null +++ b/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; +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; +} diff --git a/aio/src/app/shared/theme-picker/theme-toggle.component.ts b/aio/src/app/shared/theme-picker/theme-toggle.component.ts new file mode 100644 index 0000000000..bb05fff53f --- /dev/null +++ b/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: ` + + `, +}) +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); + } +} diff --git a/aio/src/index.html b/aio/src/index.html index 990b09bd90..46ef427ffa 100644 --- a/aio/src/index.html +++ b/aio/src/index.html @@ -30,6 +30,11 @@ + + @@ -97,14 +102,12 @@ diff --git a/aio/src/styles/0-base/_typography-theme.scss b/aio/src/styles/0-base/_typography-theme.scss index e512fa7435..f49e44bc15 100644 --- a/aio/src/styles/0-base/_typography-theme.scss +++ b/aio/src/styles/0-base/_typography-theme.scss @@ -1,52 +1,52 @@ -@use '../constants' as *; -@use '~@angular/material/theming' as *; +@use '../constants'; -@mixin typography-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) { + $is-dark-theme: map-get($theme, is-dark); - body { - color: if($is-dark-theme, $offwhite, $darkgray); - } + body { + color: if($is-dark-theme, constants.$offwhite, constants.$darkgray); + } - h1, - h2, - h3, - h4, - h5, - h6 { - color: if($is-dark-theme, $offwhite, $darkgray); - } + h1, + h2, + h3, + h4, + h5, + h6 { + color: if($is-dark-theme, constants.$offwhite, constants.$deepgray); + } - h6 { - color: if($is-dark-theme, $offwhite, $mediumgray); - } + h6 { + color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray); + } - p, - ol, - ul, - ol, - li, - input, - a { - color: if($is-dark-theme, $white, $darkgray); - } + h2 { + border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray); + } - .app-toolbar a { - color: if($is-dark-theme, $darkgray, $white); - } + p, + ol, + ul, + ol, + li, + input, + a { + color: if($is-dark-theme, constants.$white, constants.$darkgray); + } - code { - color: if($is-dark-theme, $white, $darkgray); - } + .app-toolbar a { + color: constants.$white; + } - .sidenav-content a { - color: if($is-dark-theme, lighten($blue, 20), $blue); - } + code { + color: if($is-dark-theme, constants.$white, constants.$darkgray); + } - .error-text { - color: $brightred; - } + .sidenav-content a { + color: if($is-dark-theme, constants.$lightblue, constants.$blue); + } + + .error-text { + color: constants.$brightred; + } } diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index 19b32ab776..09099f334e 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -1,14 +1,14 @@ -@use '../constants' as *; -@use '../mixins' as *; +@use '../constants'; +@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 line-height(32); + @include mixins.font-size(16); + @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. diff --git a/aio/src/styles/1-layouts/_theme.scss b/aio/src/styles/1-layouts/_theme.scss index bbe01d264f..e25c41ee82 100644 --- a/aio/src/styles/1-layouts/_theme.scss +++ b/aio/src/styles/1-layouts/_theme.scss @@ -1,15 +1,15 @@ -@use 'footer/footer-theme' as *; -@use 'layout-global/layout-global-theme' as *; -@use 'marketing-layout/marketing-layout-theme' as *; -@use 'not-found/not-found-theme' as *; -@use 'sidenav/sidenav-theme' as *; -@use 'top-menu/top-menu-theme' as *; +@use 'footer/footer-theme'; +@use 'layout-global/layout-global-theme'; +@use 'marketing-layout/marketing-layout-theme'; +@use 'not-found/not-found-theme'; +@use 'sidenav/sidenav-theme'; +@use 'top-menu/top-menu-theme'; -@mixin layout-themes($theme) { - @include footer-theme($theme); - @include layout-global-theme($theme); - @include marketing-layout-theme($theme); - @include not-found-theme($theme); - @include sidenav-theme($theme); - @include top-menu-theme($theme); +@mixin theme($theme) { + @include footer-theme.theme($theme); + @include layout-global-theme.theme($theme); + @include marketing-layout-theme.theme($theme); + @include not-found-theme.theme($theme); + @include sidenav-theme.theme($theme); + @include top-menu-theme.theme($theme); } diff --git a/aio/src/styles/1-layouts/content-layout/_content-layout.scss b/aio/src/styles/1-layouts/content-layout/_content-layout.scss index 7381ace844..42c26eec4e 100644 --- a/aio/src/styles/1-layouts/content-layout/_content-layout.scss +++ b/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; diff --git a/aio/src/styles/1-layouts/footer/_footer-theme.scss b/aio/src/styles/1-layouts/footer/_footer-theme.scss index b821b37abd..0e8c2b1279 100644 --- a/aio/src/styles/1-layouts/footer/_footer-theme.scss +++ b/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; } } } diff --git a/aio/src/styles/1-layouts/footer/_footer.scss b/aio/src/styles/1-layouts/footer/_footer.scss index 9e1e87099c..2c8ced7e3a 100644 --- a/aio/src/styles/1-layouts/footer/_footer.scss +++ b/aio/src/styles/1-layouts/footer/_footer.scss @@ -1,9 +1,9 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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); } } diff --git a/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss b/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss index 2540745739..ceb5b03848 100644 --- a/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss +++ b/aio/src/styles/1-layouts/layout-global/_layout-global-theme.scss @@ -1,15 +1,13 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants' ; +@import '~@angular/material/theming'; -@mixin layout-global-theme($theme) { - $primary: map-get($theme, primary); +@mixin theme($theme) { $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); } } diff --git a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss index dd121ffdd6..760c395812 100644 --- a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss +++ b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss @@ -1,78 +1,72 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@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), mat-color($primary, 400)); + background: linear-gradient(145deg, mat-color($primary, 900), if($is-dark-theme, mat-color($primary, 700), #42a5f5)); color: mat-color($foreground, text); } section#intro { - color: $white; + color: constants.$white; - @if $is-dark-theme { - .hero-logo { - img { - filter: brightness(1.1); - } - } + .hero-logo { + background-image: url(/assets/images/logos/angular/angular.svg); } } .announcement-bar { - background-color: $white; + background-color: constants.$white; .button { - color: $white; - background-color: $blue; + color: constants.$white; + 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; } } } diff --git a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss index 8c9a82bbbc..e3b15dd55b 100644 --- a/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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 line-height(64); + @include mixins.font-size(40); + @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 line-height(50); + @include mixins.font-size(32); + @include mixins.line-height(50); } } .hero-logo { display: flex; - - @media (max-width: 780px) { - justify-content: center; - } - - img { - width: 400px; - height: 400px; - margin-bottom: 8px; - max-width: none; - padding: 0; - - @media (max-width: 780px) { - width: 250px; - height: 250px; - } - } + width: 50%; + min-width: 250px; + height: 400px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin-bottom: 8px; } } @@ -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; } diff --git a/aio/src/styles/1-layouts/not-found/_not-found-theme.scss b/aio/src/styles/1-layouts/not-found/_not-found-theme.scss index bbf85e4cd8..e9818b12f0 100644 --- a/aio/src/styles/1-layouts/not-found/_not-found-theme.scss +++ b/aio/src/styles/1-layouts/not-found/_not-found-theme.scss @@ -1,19 +1,16 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin not-found-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $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; } } diff --git a/aio/src/styles/1-layouts/not-found/_not-found.scss b/aio/src/styles/1-layouts/not-found/_not-found.scss index 1dba303b4f..fe2d9a2e37 100644 --- a/aio/src/styles/1-layouts/not-found/_not-found.scss +++ b/aio/src/styles/1-layouts/not-found/_not-found.scss @@ -1,24 +1,23 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .nf-container { - align-items: center; - padding: 32px; + align-items: center; + padding: 32px; } .nf-response { - margin: 32px; - height: 100%; - flex-direction: column; + margin: 32px; + height: 100%; + flex-direction: column; - h1 { - @include font-size(48); - text-transform: uppercase; - margin: 8px 0; - } + h1 { + @include mixins.font-size(48); + text-transform: uppercase; + margin: 8px 0; + } } .nf-icon.material-icons { - @include font-size(100); - position: static; + @include mixins.font-size(100); + position: static; } diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss b/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss index 4c533cb2b7..c4eb5587d1 100644 --- a/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss +++ b/aio/src/styles/1-layouts/sidenav/_sidenav-theme.scss @@ -1,21 +1,19 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin sidenav-theme($theme) { - $primary: map-get($theme, primary); +@mixin theme($theme) { $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); - border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray); + background-color: if($is-dark-theme, constants.$deepgray, constants.$superlightgray); + 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); - color: if($is-dark-theme, $powderblue, $blue); - text-shadow: 0 0 5px if($is-dark-theme, $black, $white); + background-color: if($is-dark-theme, constants.$darkgray, constants.$lightgray); + color: if($is-dark-theme, constants.$powderblue, constants.$blue); + 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); } } } diff --git a/aio/src/styles/1-layouts/sidenav/_sidenav.scss b/aio/src/styles/1-layouts/sidenav/_sidenav.scss index dd4651c379..4201d6a0b9 100644 --- a/aio/src/styles/1-layouts/sidenav/_sidenav.scss +++ b/aio/src/styles/1-layouts/sidenav/_sidenav.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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 line-height(28); + @include mixins.font-size(16); + @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 line-height(24); + @include mixins.font-size(14); + @include mixins.line-height(24); font-weight: 400; margin: 0; padding-left: 36px; } .level-3 { - @include font-size(14); - @include line-height(24); + @include mixins.font-size(14); + @include mixins.line-height(24); margin: 0; padding-left: 44px; } .level-4 { - @include font-size(14); - @include line-height(24); + @include mixins.font-size(14); + @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); } } } diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss index 467de58e7c..5ae4714496 100644 --- a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss +++ b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss @@ -1,31 +1,35 @@ -@use '../../constants' as *; -@use '../../mixins' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@use '../../mixins'; +@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); - box-shadow: 0 0 1px 2px $focus-outline-ondark; + background: rgba(constants.$white, 0.15); + 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; - background-color: $white; + color: constants.$darkgray; + background-color: constants.$white; - @include placeholder { - color: $mediumgray; + @include mixins.placeholder { + color: constants.$mediumgray; } } } - // THEME PICKER - - aio-theme-picker { - button { - color: $offwhite; + aio-theme-toggle { + @media screen and (min-width: 351px) { + border-right: 1px solid constants.$white; } } @@ -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; } } } diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss index 5089497eb9..b9f25cb4f7 100644 --- a/aio/src/styles/1-layouts/top-menu/_top-menu.scss +++ b/aio/src/styles/1-layouts/top-menu/_top-menu.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; // 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 font-size(14); + @include mixins.placeholder { + @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; - margin: 0 -16px; + padding: 0; + margin: 24px 8px; &:focus { - outline-offset: -16px; + outline-offset: 8px; } @media screen and (max-width: 480px) { diff --git a/aio/src/styles/2-modules/_index.scss b/aio/src/styles/2-modules/_index.scss index a1da7c849f..66f600a7af 100644 --- a/aio/src/styles/2-modules/_index.scss +++ b/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'; diff --git a/aio/src/styles/2-modules/_theme.scss b/aio/src/styles/2-modules/_theme.scss index 840ad0cbc7..fa0e651be1 100644 --- a/aio/src/styles/2-modules/_theme.scss +++ b/aio/src/styles/2-modules/_theme.scss @@ -1,51 +1,52 @@ -@use 'alert/alert-theme' as *; -@use 'api-list/api-list-theme' as *; -@use 'api-pages/api-pages-theme' as *; -@use 'api-symbols/api-symbols-theme' as *; -@use 'buttons/buttons-theme' as *; -@use 'callout/callout-theme' as *; -@use 'card/card-theme' as *; -@use 'code/code-theme' as *; -@use 'contributor/contributor-theme' as *; -@use 'details/details-theme' as *; -@use 'errors/errors-theme' as *; -@use 'filetree/filetree-theme' as *; -@use 'guides/guides-theme' as *; -@use 'heading-anchors/heading-anchors-theme' as *; -@use 'hr/hr-theme' as *; -@use 'images/images-theme' as *; -@use 'label/label-theme' as *; -@use 'notification/notification-theme' as *; -@use 'presskit/presskit-theme' as *; -@use 'resources/resources-theme' as *; -@use 'search-results/search-results-theme' as *; -@use 'select-menu/select-menu-theme' as *; -@use 'table/table-theme' as *; -@use 'toc/toc-theme' as *; +@use 'alert/alert-theme'; +@use 'api-list/api-list-theme'; +@use 'api-pages/api-pages-theme'; +@use 'api-symbols/api-symbols-theme'; +@use 'buttons/buttons-theme'; +@use 'callout/callout-theme'; +@use 'card/card-theme'; +@use 'code/code-theme'; +@use 'contributor/contributor-theme'; +@use 'deploy-theme/deploy-theme'; +@use 'details/details-theme'; +@use 'errors/errors-theme'; +@use 'filetree/filetree-theme'; +@use 'guides/guides-theme'; +@use 'heading-anchors/heading-anchors-theme'; +@use 'hr/hr-theme'; +@use 'images/images-theme'; +@use 'label/label-theme'; +@use 'notification/notification-theme'; +@use 'presskit/presskit-theme'; +@use 'resources/resources-theme'; +@use 'search-results/search-results-theme'; +@use 'select-menu/select-menu-theme'; +@use 'table/table-theme'; +@use 'toc/toc-theme'; -@mixin module-themes($theme) { - @include alert-theme($theme); - @include api-list-theme($theme); - @include api-symbols-theme($theme); - @include buttons-theme($theme); - @include callout-theme($theme); - @include card-theme($theme); - @include code-theme($theme); - @include contributor-theme($theme); - @include deploy-theme($theme); - @include details-theme($theme); - @include errors-theme($theme); - @include filetree-theme($theme); - @include guides-theme($theme); - @include heading-anchors-theme($theme); - @include hr-theme($theme); - @include images-theme($theme); - @include label-theme($theme); - @include notification-theme($theme); - @include presskit-theme($theme); - @include resources-theme($theme); - @include search-results-theme($theme); - @include select-menu-theme($theme); - @include table-theme($theme); - @include toc-theme($theme); +@mixin theme($theme) { + @include alert-theme.theme($theme); + @include api-list-theme.theme($theme); + @include api-symbols-theme.theme($theme); + @include buttons-theme.theme($theme); + @include callout-theme.theme($theme); + @include card-theme.theme($theme); + @include code-theme.theme($theme); + @include contributor-theme.theme($theme); + @include deploy-theme.theme($theme); + @include details-theme.theme($theme); + @include errors-theme.theme($theme); + @include filetree-theme.theme($theme); + @include guides-theme.theme($theme); + @include heading-anchors-theme.theme($theme); + @include hr-theme.theme($theme); + @include images-theme.theme($theme); + @include label-theme.theme($theme); + @include notification-theme.theme($theme); + @include presskit-theme.theme($theme); + @include resources-theme.theme($theme); + @include search-results-theme.theme($theme); + @include select-menu-theme.theme($theme); + @include table-theme.theme($theme); + @include toc-theme.theme($theme); } diff --git a/aio/src/styles/2-modules/alert/_alert-theme.scss b/aio/src/styles/2-modules/alert/_alert-theme.scss index dfc1b39cd5..c2d7161e69 100644 --- a/aio/src/styles/2-modules/alert/_alert-theme.scss +++ b/aio/src/styles/2-modules/alert/_alert-theme.scss @@ -1,18 +1,15 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin alert-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $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; - background-color: if($is-dark-theme, $deepgray, rgba($brightred, 0.05)); + border-left: 8px solid constants.$brightred; + 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; - background-color: if($is-dark-theme, $deepgray, rgba($orange, 0.05)); + border-left: 8px solid constants.$orange; + 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; - background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.05)); + border-left: 8px solid constants.$blue; + 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; } } } diff --git a/aio/src/styles/2-modules/alert/_alert.scss b/aio/src/styles/2-modules/alert/_alert.scss index 5a6dffec73..14dd056939 100644 --- a/aio/src/styles/2-modules/alert/_alert.scss +++ b/aio/src/styles/2-modules/alert/_alert.scss @@ -1,10 +1,9 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .alert { padding: 16px; margin: 24px 0px; - @include font-size(14); + @include mixins.font-size(14); width: 100%; box-sizing: border-box; clear: both; diff --git a/aio/src/styles/2-modules/api-list/_api-list-theme.scss b/aio/src/styles/2-modules/api-list/_api-list-theme.scss index 8c662c659d..a7ad62fb29 100644 --- a/aio/src/styles/2-modules/api-list/_api-list-theme.scss +++ b/aio/src/styles/2-modules/api-list/_api-list-theme.scss @@ -1,47 +1,49 @@ -@use '../../constants' as *; -@use '../../mixins' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@use '../../mixins'; +@import '~@angular/material/theming'; -@mixin api-list-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $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); - border: 1px solid if($is-dark-theme, $darkgray, $white); - background-color: if($is-dark-theme, $darkgray, $white); - color: if($is-dark-theme, $white, $darkgray); + 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, constants.$darkgray, constants.$white); + background-color: if($is-dark-theme, constants.$darkgray, constants.$white); + color: if($is-dark-theme, constants.$white, constants.$darkgray); - @include placeholder { - color: if($is-dark-theme, $offwhite, $mediumgray); + @include mixins.placeholder { + color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray); } &:focus { - border: 1px solid $blue-400; - box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12); + border: 1px solid constants.$blue-400; + 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); - color: if($is-dark-theme, $offwhite, $blue-500); + background: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50); + color: if($is-dark-theme, constants.$offwhite, constants.$blue-500); } } } diff --git a/aio/src/styles/2-modules/api-list/_api-list.scss b/aio/src/styles/2-modules/api-list/_api-list.scss index b2b3fe40f7..6ad3f53bca 100644 --- a/aio/src/styles/2-modules/api-list/_api-list.scss +++ b/aio/src/styles/2-modules/api-list/_api-list.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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 line-height(32); + @include mixins.font-size(14); + @include mixins.line-height(32); outline: none; padding: 4px 16px 4px 32px; transition: all .2s; width: 182px; - @include placeholder { - @include font-size(14); + @include mixins.placeholder { + @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), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { + @media handheld and (max-width: constants.$phone-breakpoint), + screen and (max-device-width: constants.$phone-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; diff --git a/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss b/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss index ce396ee02a..0cf480666c 100644 --- a/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss +++ b/aio/src/styles/2-modules/api-pages/_api-pages-theme.scss @@ -1,21 +1,16 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@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; } } } diff --git a/aio/src/styles/2-modules/api-pages/_api-pages.scss b/aio/src/styles/2-modules/api-pages/_api-pages.scss index f19a064cf0..e0dd991527 100644 --- a/aio/src/styles/2-modules/api-pages/_api-pages.scss +++ b/aio/src/styles/2-modules/api-pages/_api-pages.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .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; } } diff --git a/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss b/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss index dfff229597..1bdd52a6a0 100644 --- a/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss +++ b/aio/src/styles/2-modules/api-symbols/_api-symbols-theme.scss @@ -1,19 +1,14 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; - -@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); +@use '../../constants'; +@import '~@angular/material/theming'; +@mixin theme($theme) { .symbol { - box-shadow: 0 1px 2px rgba($black, 0.24); - color: $white; + box-shadow: 0 1px 2px rgba(constants.$black, 0.24); + 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); diff --git a/aio/src/styles/2-modules/api-symbols/_api-symbols.scss b/aio/src/styles/2-modules/api-symbols/_api-symbols.scss index 2319b7a3d2..8128632782 100644 --- a/aio/src/styles/2-modules/api-symbols/_api-symbols.scss +++ b/aio/src/styles/2-modules/api-symbols/_api-symbols.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; /* 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; diff --git a/aio/src/styles/2-modules/buttons/_buttons-theme.scss b/aio/src/styles/2-modules/buttons/_buttons-theme.scss index 75bb60d416..c4f0ff1e7e 100644 --- a/aio/src/styles/2-modules/buttons/_buttons-theme.scss +++ b/aio/src/styles/2-modules/buttons/_buttons-theme.scss @@ -1,12 +1,7 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; - -@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); +@use '../../constants'; +@import '~@angular/material/theming'; +@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; - color: rgba($white, 0.87); + background: constants.$mediumgray; + color: rgba(constants.$white, 0.87); } &.button-plain { - background: $white; - color: rgba($darkgray, 0.87); + background: constants.$white; + color: rgba(constants.$darkgray, 0.87); } &.button-subtle { - background: $mediumgray; - color: darken($offwhite, 10%); + background: constants.$mediumgray; + color: darken(constants.$offwhite, 10%); &:hover { - color: rgba($white, 0.7); + color: rgba(constants.$white, 0.7); } } &.button-blue { - background: $blue; - color: rgba($white, 0.87); + background: constants.$blue; + color: rgba(constants.$white, 0.87); &:hover { - color: rgba($white, 0.7); + color: rgba(constants.$white, 0.7); } } &.button-banner { - background: $darkgray; - color: rgba($white, 0.87); + background: constants.$darkgray; + 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; - color: $white; + background-color: constants.$blue; + color: constants.$white; } } } diff --git a/aio/src/styles/2-modules/buttons/_buttons.scss b/aio/src/styles/2-modules/buttons/_buttons.scss index 79a656e60a..e5fc7939ad 100644 --- a/aio/src/styles/2-modules/buttons/_buttons.scss +++ b/aio/src/styles/2-modules/buttons/_buttons.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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 line-height(24); + @include mixins.font-size(12); + @include mixins.line-height(24); padding: 0px 8px; } &.button-large { - @include font-size(15); - @include line-height(48); + @include mixins.font-size(15); + @include mixins.line-height(48); padding: 0px 24px; } &.button-x-large { - @include font-size(16); - @include line-height(56); + @include mixins.font-size(16); + @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 line-height(48); + @include mixins.font-size(16); + @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; } } diff --git a/aio/src/styles/2-modules/callout/_callout-theme.scss b/aio/src/styles/2-modules/callout/_callout-theme.scss index 20014059ad..02f3bc53c1 100644 --- a/aio/src/styles/2-modules/callout/_callout-theme.scss +++ b/aio/src/styles/2-modules/callout/_callout-theme.scss @@ -1,42 +1,39 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin callout-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $is-dark-theme: map-get($theme, is-dark); .callout { header { - color: $white; + color: constants.$white; } &.is-critical { - border-color: $brightred; - background: rgba($brightred, 0.05); + border-color: constants.$brightred; + background: rgba(constants.$brightred, if($is-dark-theme, 0.1, 0.05)); header { - background: $brightred; + background: constants.$brightred; } } &.is-important { - border-color: $orange; - background: rgba($orange, 0.05); + border-color: constants.$orange; + 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; - background: rgba($blue, 0.05); + border-color: constants.$blue; + background: rgba(constants.$blue, if($is-dark-theme, 0.1, 0.05)); header { - background: $blue; + background: constants.$blue; } } } diff --git a/aio/src/styles/2-modules/callout/_callout.scss b/aio/src/styles/2-modules/callout/_callout.scss index fc1986931d..5a2f70186c 100644 --- a/aio/src/styles/2-modules/callout/_callout.scss +++ b/aio/src/styles/2-modules/callout/_callout.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; @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) { diff --git a/aio/src/styles/2-modules/card/_card-theme.scss b/aio/src/styles/2-modules/card/_card-theme.scss index 7836c31647..40f8b2aed2 100644 --- a/aio/src/styles/2-modules/card/_card-theme.scss +++ b/aio/src/styles/2-modules/card/_card-theme.scss @@ -1,37 +1,31 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin card-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $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); - background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.1)); - border-top: 0.5px solid if($is-dark-theme, $darkgray, $lightgray); + color: if($is-dark-theme, constants.$powderblue, constants.$darkblue); + background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$blue, 0.1)); + 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)); - } } diff --git a/aio/src/styles/2-modules/card/_card.scss b/aio/src/styles/2-modules/card/_card.scss index e5c42366e8..59f77bce92 100644 --- a/aio/src/styles/2-modules/card/_card.scss +++ b/aio/src/styles/2-modules/card/_card.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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 line-height(24); + @include mixins.font-size(20); + @include mixins.line-height(24); margin: 0; padding: 32px 0 24px; text-transform: none; @@ -32,8 +33,8 @@ } p { - @include font-size(13); - @include line-height(24); + @include mixins.font-size(13); + @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, diff --git a/aio/src/styles/2-modules/code/_code-theme.scss b/aio/src/styles/2-modules/code/_code-theme.scss index a81f7cf5df..8dca7dcd3e 100644 --- a/aio/src/styles/2-modules/code/_code-theme.scss +++ b/aio/src/styles/2-modules/code/_code-theme.scss @@ -1,29 +1,26 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import "~@angular/material/theming"; -@mixin code-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $is-dark-theme: map-get($theme, is-dark); code-example { &:not(.no-box) { - background-color: if($is-dark-theme, $deepgray, rgb($backgroundgray, 0.2)); - border: 0.5px solid if($is-dark-theme, $darkgray, $lightgray); - color: $darkgray; + background-color: if($is-dark-theme, constants.$deepgray, rgb(constants.$backgroundgray, 0.2)); + border: 0.5px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray); + 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); - color: $offwhite; + background-color: constants.$accentblue; + color: constants.$offwhite; } } @@ -39,50 +36,50 @@ code-example.avoid header, code-example.avoidFile header { - border: 2px solid $anti-pattern; - background: $anti-pattern; + border: 2px solid constants.$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)); - color: if($is-dark-theme, $white, $darkgray); + background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$lightgray, 0.5)); + 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; } } } diff --git a/aio/src/styles/2-modules/code/_code.scss b/aio/src/styles/2-modules/code/_code.scss index fe87ab89cb..9e8a465bf2 100644 --- a/aio/src/styles/2-modules/code/_code.scss +++ b/aio/src/styles/2-modules/code/_code.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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); } } } diff --git a/aio/src/styles/2-modules/contributor/_contributor-theme.scss b/aio/src/styles/2-modules/contributor/_contributor-theme.scss index 3caa56739d..4bb278f5e3 100644 --- a/aio/src/styles/2-modules/contributor/_contributor-theme.scss +++ b/aio/src/styles/2-modules/contributor/_contributor-theme.scss @@ -1,29 +1,26 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin contributor-theme($theme) { - $primary: map-get($theme, primary); +@mixin theme($theme) { $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; } } } diff --git a/aio/src/styles/2-modules/contributor/_contributor.scss b/aio/src/styles/2-modules/contributor/_contributor.scss index 1a7627fb9b..189520e9b5 100644 --- a/aio/src/styles/2-modules/contributor/_contributor.scss +++ b/aio/src/styles/2-modules/contributor/_contributor.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; 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 line-height(14); + @include mixins.font-size(12); + @include mixins.line-height(14); text-align: left; } } @@ -158,8 +157,8 @@ aio-contributor { p { cursor: pointer; - @include font-size(14); - @include line-height(18); + @include mixins.font-size(14); + @include mixins.line-height(18); margin: 8px 16px; text-overflow: ellipsis; overflow-y: auto; diff --git a/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss b/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss index 40b785ab06..9e9817a8f8 100644 --- a/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss +++ b/aio/src/styles/2-modules/deploy-theme/_deploy-theme.scss @@ -1,14 +1,18 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@use '../../mixins'; -aio-shell.mode-archive { - @include deploy-theme($blue-grey-900, $blue-grey-400); -} +@mixin theme($theme) { + $is-dark-theme: map-get($theme, is-dark); -aio-shell.mode-next { - @include deploy-theme($brightred, $darkred); -} - -aio-shell.mode-rc { - @include deploy-theme($tangerine, $darkgoldenrod); -} + aio-shell.mode-archive { + @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-next { + @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)); + } +} \ No newline at end of file diff --git a/aio/src/styles/2-modules/details/_details-theme.scss b/aio/src/styles/2-modules/details/_details-theme.scss index c52300971b..a093dd1db2 100644 --- a/aio/src/styles/2-modules/details/_details-theme.scss +++ b/aio/src/styles/2-modules/details/_details-theme.scss @@ -1,17 +1,12 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; - -@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); +@use '../../constants'; +@import '~@angular/material/theming'; +@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; } } } diff --git a/aio/src/styles/2-modules/details/_details.scss b/aio/src/styles/2-modules/details/_details.scss index 44774fbe89..c035267b9d 100644 --- a/aio/src/styles/2-modules/details/_details.scss +++ b/aio/src/styles/2-modules/details/_details.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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); } } diff --git a/aio/src/styles/2-modules/errors/_errors-theme.scss b/aio/src/styles/2-modules/errors/_errors-theme.scss index b95a693f7d..735472ebe3 100644 --- a/aio/src/styles/2-modules/errors/_errors-theme.scss +++ b/aio/src/styles/2-modules/errors/_errors-theme.scss @@ -1,32 +1,27 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import "~@angular/material/theming"; -@mixin errors-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); - - .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; - } - } +@mixin theme($theme) { + .error-list { + li { + .symbol { + &.runtime { + background: constants.$green-500; } + + &.compiler { + background: constants.$blue-500; + } + } + + a { + color: constants.$blue-grey-600; + + &:hover { + background: constants.$blue-grey-50; + color: constants.$blue-500; + } + } } + } } diff --git a/aio/src/styles/2-modules/errors/_errors.scss b/aio/src/styles/2-modules/errors/_errors.scss index b42519b239..d38f4a15e0 100644 --- a/aio/src/styles/2-modules/errors/_errors.scss +++ b/aio/src/styles/2-modules/errors/_errors.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .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; diff --git a/aio/src/styles/2-modules/features/_features.scss b/aio/src/styles/2-modules/features/_features.scss index 30630bce53..099415c2bf 100644 --- a/aio/src/styles/2-modules/features/_features.scss +++ b/aio/src/styles/2-modules/features/_features.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; // 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; diff --git a/aio/src/styles/2-modules/filetree/_filetree-theme.scss b/aio/src/styles/2-modules/filetree/_filetree-theme.scss index a825bf91ed..8cc165f8d5 100644 --- a/aio/src/styles/2-modules/filetree/_filetree-theme.scss +++ b/aio/src/styles/2-modules/filetree/_filetree-theme.scss @@ -1,24 +1,19 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; - -@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); +@use '../../constants'; +@import '~@angular/material/theming'; +@mixin theme($theme) { .filetree { - background: $white; - border: 4px solid $lightgray; + background: constants.$white; + border: 4px solid constants.$lightgray; .file { - color: $darkgray; + color: constants.$darkgray; } .children { .file { &:before { - border-color: $lightgray; + border-color: constants.$lightgray; } } } diff --git a/aio/src/styles/2-modules/filetree/_filetree.scss b/aio/src/styles/2-modules/filetree/_filetree.scss index 664926fec3..7aa90e7c6d 100644 --- a/aio/src/styles/2-modules/filetree/_filetree.scss +++ b/aio/src/styles/2-modules/filetree/_filetree.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .filetree { border-radius: 4px; @@ -8,8 +7,8 @@ .file { display: block; - @include letter-spacing(0.3); - @include line-height(32); + @include mixins.letter-spacing(0.3); + @include mixins.line-height(32); } .children { diff --git a/aio/src/styles/2-modules/guides/_guides-theme.scss b/aio/src/styles/2-modules/guides/_guides-theme.scss index 38d31653b5..e56b23feec 100644 --- a/aio/src/styles/2-modules/guides/_guides-theme.scss +++ b/aio/src/styles/2-modules/guides/_guides-theme.scss @@ -1,13 +1,10 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin guides-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $is-dark-theme: map-get($theme, is-dark); .reviewed { - color: lighten($darkgray, 10); + color: if($is-dark-theme, constants.$offwhite, lighten(constants.$darkgray, 10)); } } diff --git a/aio/src/styles/2-modules/guides/_guides.scss b/aio/src/styles/2-modules/guides/_guides.scss index a2a587c558..45e1031131 100644 --- a/aio/src/styles/2-modules/guides/_guides.scss +++ b/aio/src/styles/2-modules/guides/_guides.scss @@ -1,8 +1,7 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .reviewed { - @include font-size(13); + @include mixins.font-size(13); font-style: italic; text-align: right; } \ No newline at end of file diff --git a/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss b/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss index 31efd5ecd2..0821d91485 100644 --- a/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss +++ b/aio/src/styles/2-modules/heading-anchors/_heading-anchors-theme.scss @@ -1,12 +1,7 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; - -@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); +@use '../../constants'; +@import '~@angular/material/theming'; +@mixin theme($theme) { .sidenav-content { h1, h2, @@ -15,7 +10,7 @@ h5, h6 { .header-link { - color: $mediumgray; + color: constants.$mediumgray; } } } diff --git a/aio/src/styles/2-modules/heading-anchors/_heading-anchors.scss b/aio/src/styles/2-modules/heading-anchors/_heading-anchors.scss index b075c62af7..7e859c3454 100644 --- a/aio/src/styles/2-modules/heading-anchors/_heading-anchors.scss +++ b/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 { diff --git a/aio/src/styles/2-modules/hr/_hr-theme.scss b/aio/src/styles/2-modules/hr/_hr-theme.scss index ab6e7e2b87..801ff1c0bf 100644 --- a/aio/src/styles/2-modules/hr/_hr-theme.scss +++ b/aio/src/styles/2-modules/hr/_hr-theme.scss @@ -1,13 +1,10 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin hr-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $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); } } diff --git a/aio/src/styles/2-modules/hr/_hr.scss b/aio/src/styles/2-modules/hr/_hr.scss index 4f34fc4f59..f37d879ec9 100644 --- a/aio/src/styles/2-modules/hr/_hr.scss +++ b/aio/src/styles/2-modules/hr/_hr.scss @@ -1,5 +1,3 @@ -@use '../../constants' as *; - hr { border: none; height: 1px; diff --git a/aio/src/styles/2-modules/images/_images-theme.scss b/aio/src/styles/2-modules/images/_images-theme.scss index c49dc7b20f..0a7fb9cce1 100644 --- a/aio/src/styles/2-modules/images/_images-theme.scss +++ b/aio/src/styles/2-modules/images/_images-theme.scss @@ -1,19 +1,16 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin images-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $is-dark-theme: map-get($theme, is-dark); .content { .lightbox { - border: 1px solid if($is-dark-theme, $darkgray, $lightgray); - background-color: if($is-dark-theme, $deepgray, $lightboxgray); + border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray); + background-color: if($is-dark-theme, constants.$deepgray, constants.$lightboxgray); img { - background-color: $white; + background-color: constants.$white; } } } diff --git a/aio/src/styles/2-modules/images/_images.scss b/aio/src/styles/2-modules/images/_images.scss index e528a2c6a8..6e84993ff9 100644 --- a/aio/src/styles/2-modules/images/_images.scss +++ b/aio/src/styles/2-modules/images/_images.scss @@ -1,5 +1,3 @@ -@use '../../constants' as *; - .content { img { diff --git a/aio/src/styles/2-modules/label/_label-theme.scss b/aio/src/styles/2-modules/label/_label-theme.scss index b2071e93f6..a4e300f0c6 100644 --- a/aio/src/styles/2-modules/label/_label-theme.scss +++ b/aio/src/styles/2-modules/label/_label-theme.scss @@ -1,27 +1,22 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; - -@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); +@use '../../constants'; +@import '~@angular/material/theming'; +@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; - color: $mediumgray; + background-color: constants.$mist; + color: constants.$mediumgray; } &.property-type-label { - background-color: $darkgray; - color: $white; + background-color: constants.$darkgray; + color: constants.$white; } } } diff --git a/aio/src/styles/2-modules/label/_label.scss b/aio/src/styles/2-modules/label/_label.scss index 4ac6edc858..e5771e2e63 100644 --- a/aio/src/styles/2-modules/label/_label.scss +++ b/aio/src/styles/2-modules/label/_label.scss @@ -1,11 +1,10 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .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; } } diff --git a/aio/src/styles/2-modules/notification/_notification-theme.scss b/aio/src/styles/2-modules/notification/_notification-theme.scss index 273a54d5bc..79d82d6be8 100644 --- a/aio/src/styles/2-modules/notification/_notification-theme.scss +++ b/aio/src/styles/2-modules/notification/_notification-theme.scss @@ -1,24 +1,19 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; - -@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); +@use '../../constants'; +@import '~@angular/material/theming'; +@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; } } } diff --git a/aio/src/styles/2-modules/notification/_notification.scss b/aio/src/styles/2-modules/notification/_notification.scss index d36d7aacb2..de7bbc1cbe 100644 --- a/aio/src/styles/2-modules/notification/_notification.scss +++ b/aio/src/styles/2-modules/notification/_notification.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; $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 { diff --git a/aio/src/styles/2-modules/presskit/_presskit-theme.scss b/aio/src/styles/2-modules/presskit/_presskit-theme.scss index 37e92be5b4..fcf50d14b4 100644 --- a/aio/src/styles/2-modules/presskit/_presskit-theme.scss +++ b/aio/src/styles/2-modules/presskit/_presskit-theme.scss @@ -1,26 +1,24 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin presskit-theme($theme) { - $primary: map-get($theme, primary); +@mixin theme($theme) { $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); } } } diff --git a/aio/src/styles/2-modules/presskit/_presskit.scss b/aio/src/styles/2-modules/presskit/_presskit.scss index f862bbdfe2..347eb8e0bc 100644 --- a/aio/src/styles/2-modules/presskit/_presskit.scss +++ b/aio/src/styles/2-modules/presskit/_presskit.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; .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; } diff --git a/aio/src/styles/2-modules/resources/_resources-theme.scss b/aio/src/styles/2-modules/resources/_resources-theme.scss index a7f9bbd01e..e9adadf7eb 100644 --- a/aio/src/styles/2-modules/resources/_resources-theme.scss +++ b/aio/src/styles/2-modules/resources/_resources-theme.scss @@ -1,22 +1,19 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin resources-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); +@mixin theme($theme) { $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%); } } diff --git a/aio/src/styles/2-modules/resources/_resources.scss b/aio/src/styles/2-modules/resources/_resources.scss index 35cdd881d1..0651f966c4 100644 --- a/aio/src/styles/2-modules/resources/_resources.scss +++ b/aio/src/styles/2-modules/resources/_resources.scss @@ -1,10 +1,10 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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 { diff --git a/aio/src/styles/2-modules/search-results/_search-results-theme.scss b/aio/src/styles/2-modules/search-results/_search-results-theme.scss index 07421eed8d..39007ab9bd 100644 --- a/aio/src/styles/2-modules/search-results/_search-results-theme.scss +++ b/aio/src/styles/2-modules/search-results/_search-results-theme.scss @@ -1,39 +1,37 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin search-results-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); +@mixin theme($theme) { $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; } } } diff --git a/aio/src/styles/2-modules/search-results/_search-results.scss b/aio/src/styles/2-modules/search-results/_search-results.scss index 522b9e187b..e30756b854 100644 --- a/aio/src/styles/2-modules/search-results/_search-results.scss +++ b/aio/src/styles/2-modules/search-results/_search-results.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; 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 line-height(24); + @include mixins.font-size(14); + @include mixins.line-height(24); display: inline-block; font-weight: normal; padding: 0.6rem 0; diff --git a/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss b/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss index 6e6d6e3888..34397da0e9 100644 --- a/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss +++ b/aio/src/styles/2-modules/select-menu/_select-menu-theme.scss @@ -1,22 +1,20 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin select-menu-theme($theme) { - $primary: map-get($theme, primary); +@mixin theme($theme) { $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); - box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); - border: 1px solid if($is-dark-theme, $darkgray, $white); - color: if($is-dark-theme, $blue-grey-200, $blue-grey-600); + background: if($is-dark-theme, constants.$darkgray, constants.$white); + 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, constants.$darkgray, constants.$white); + color: if($is-dark-theme, constants.$blue-grey-200, constants.$blue-grey-600); &:focus { - border: 1px solid $blue-400; - box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12); + border: 1px solid constants.$blue-400; + 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); - color: f($is-dark-theme, $blue-grey-400, $blue-grey-500); + background-color: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50); + 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); } } } diff --git a/aio/src/styles/2-modules/select-menu/_select-menu.scss b/aio/src/styles/2-modules/select-menu/_select-menu.scss index bbdd86285e..adc6171d1b 100644 --- a/aio/src/styles/2-modules/select-menu/_select-menu.scss +++ b/aio/src/styles/2-modules/select-menu/_select-menu.scss @@ -1,5 +1,5 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../constants'; +@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 line-height(32); + @include mixins.font-size(14); + @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; } } } diff --git a/aio/src/styles/2-modules/table/_table-theme.scss b/aio/src/styles/2-modules/table/_table-theme.scss index 450449fbb6..2273fc0c14 100644 --- a/aio/src/styles/2-modules/table/_table-theme.scss +++ b/aio/src/styles/2-modules/table/_table-theme.scss @@ -1,42 +1,40 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin table-theme($theme) { - $primary: map-get($theme, primary); +@mixin theme($theme) { $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); - background-color: if($is-dark-theme, mat-color($background, background), $white); + 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), constants.$white); thead > { tr > th { - background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2)); - border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray); - color: if($is-dark-theme, $white, $darkgray); + background: if($is-dark-theme, constants.$deepgray, rgba(constants.$lightgray, 0.2)); + border-bottom: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray); + 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); } } } diff --git a/aio/src/styles/2-modules/table/_table.scss b/aio/src/styles/2-modules/table/_table.scss index 4dd7349600..61e943f203 100644 --- a/aio/src/styles/2-modules/table/_table.scss +++ b/aio/src/styles/2-modules/table/_table.scss @@ -1,5 +1,4 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; 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 { diff --git a/aio/src/styles/2-modules/toc/_toc-theme.scss b/aio/src/styles/2-modules/toc/_toc-theme.scss index d26d22204a..25d20a95cd 100644 --- a/aio/src/styles/2-modules/toc/_toc-theme.scss +++ b/aio/src/styles/2-modules/toc/_toc-theme.scss @@ -1,9 +1,7 @@ -@use '../../constants' as *; -@use '~@angular/material/theming' as *; +@use '../../constants'; +@import '~@angular/material/theming'; -@mixin toc-theme($theme) { - $primary: map-get($theme, primary); - $background: map-get($theme, background); +@mixin theme($theme) { $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); - color: if($is-dark-theme, $white, $mediumgray); + background: if($is-dark-theme, constants.$darkgray, constants.$lightgray); + 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; } } } diff --git a/aio/src/styles/2-modules/toc/_toc.scss b/aio/src/styles/2-modules/toc/_toc.scss index efd581f80b..69aced4f2d 100644 --- a/aio/src/styles/2-modules/toc/_toc.scss +++ b/aio/src/styles/2-modules/toc/_toc.scss @@ -1,10 +1,9 @@ -@use '../../constants' as *; -@use '../../mixins' as *; +@use '../../mixins'; $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; } diff --git a/aio/src/styles/_app-theme.scss b/aio/src/styles/_app-theme.scss index 1aa512d7ff..35369c5622 100644 --- a/aio/src/styles/_app-theme.scss +++ b/aio/src/styles/_app-theme.scss @@ -1,9 +1,9 @@ -@use '0-base/typography-theme' as *; -@use '1-layouts/theme' as *; -@use '2-modules/theme' as *; +@use '0-base/typography-theme'; +@use '1-layouts/theme' as layout-themes; +@use '2-modules/theme' as module-themes; -@mixin app-theme($theme) { - @include typography-theme($theme); - @include layout-themes($theme); - @include module-themes($theme); +@mixin theme($theme) { + @include typography-theme.theme($theme); + @include layout-themes.theme($theme); + @include module-themes.theme($theme); } diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss index 890ca7a974..4e0745141f 100755 --- a/aio/src/styles/_constants.scss +++ b/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; diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss index 9dc5bbdc84..baa4c69ac5 100644 --- a/aio/src/styles/_mixins.scss +++ b/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; } } } diff --git a/aio/src/styles/_print.scss b/aio/src/styles/_print.scss index 6d1d72f662..60921bd6af 100644 --- a/aio/src/styles/_print.scss +++ b/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; - color: $darkgray; + border: 0.5px solid constants.$lightgray; + 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; diff --git a/aio/src/styles/_typography-theme.scss b/aio/src/styles/_typography-theme.scss index d94535b713..2085475d03 100755 --- a/aio/src/styles/_typography-theme.scss +++ b/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, diff --git a/aio/src/styles/custom-themes/dark.scss b/aio/src/styles/custom-themes/dark-theme.scss similarity index 57% rename from aio/src/styles/custom-themes/dark.scss rename to aio/src/styles/custom-themes/dark-theme.scss index 6653337752..962a388d62 100644 --- a/aio/src/styles/custom-themes/dark.scss +++ b/aio/src/styles/custom-themes/dark-theme.scss @@ -1,10 +1,10 @@ -@use '../app-theme' as *; -@use '~@angular/material/theming' as *; +@use '../app-theme'; +@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); diff --git a/aio/src/styles/custom-themes/light.scss b/aio/src/styles/custom-themes/light-theme.scss similarity index 56% rename from aio/src/styles/custom-themes/light.scss rename to aio/src/styles/custom-themes/light-theme.scss index 0e87bf0bc5..6bc59970a3 100644 --- a/aio/src/styles/custom-themes/light.scss +++ b/aio/src/styles/custom-themes/light-theme.scss @@ -1,9 +1,10 @@ -@use '../app-theme' as *; -@use '~@angular/material/theming' as *; +@use '../app-theme'; +@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); diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss index b599004d00..420fd414c6 100755 --- a/aio/src/styles/main.scss +++ b/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(); diff --git a/aio/src/styles/ng-io-theme.scss b/aio/src/styles/ng-io-theme.scss deleted file mode 100644 index 5a5e745837..0000000000 --- a/aio/src/styles/ng-io-theme.scss +++ /dev/null @@ -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); diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json index f98024bf21..cbb7ae312c 100755 --- a/goldens/size-tracking/aio-payloads.json +++ b/goldens/size-tracking/aio-payloads.json @@ -2,8 +2,8 @@ "aio": { "master": { "uncompressed": { - "runtime-es2015": 4538, - "main-es2015": 451314, + "runtime-es2015": 4619, + "main-es2015": 453172, "polyfills-es2015": 55210 } } @@ -11,8 +11,8 @@ "aio-local": { "master": { "uncompressed": { - "runtime-es2015": 4538, - "main-es2015": 451493, + "runtime-es2015": 4619, + "main-es2015": 453394, "polyfills-es2015": 55291 } }