honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): clean up AIO Sass files (#42442) 

Cleans up AIO's Sass files by:
* Switching them all over to the `@use`-based API from Angular Material.
* Removing the import of the Material theming API in a bunch of places that weren't using it.
* Migrating the new usages of Sass utility functions to the new syntax (e.g. `map.get` vs `map-get`).
* Fixing a few files that were using 4 spaces for indentation instead of 2.

PR Close #42442
This commit is contained in:
Kristiyan Kostadinov 2021-06-02 18:37:13 +02:00 committed by Andrew Kushnir
parent 0ac193c86c
commit 3d1c905c91
38 changed files with 193 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
aio/src/styles/0-base/_typography-theme.scss
View File

@ -1,7 +1,8 @@
@use 'sass:map';
@use '../constants'; @use '../constants';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
body { body {
color: if($is-dark-theme, constants.$offwhite, constants.$darkgray); color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);

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

@ -1,13 +1,14 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$primary: map-get($theme, primary); $primary: map.get($theme, primary);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
footer { footer {
// Because the footer background is always the same color in both light and dark mode, there is no need to specify a foreground color // 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)); background-color: mat.get-color-from-palette($primary, if($is-dark-theme, 900, 700));
aio-footer { aio-footer {
& > * { & > * {

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

@ -1,13 +1,14 @@
@use 'sass:map';
@use '../../constants' ; @use '../../constants' ;
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$background: map-get($theme, background); $background: map.get($theme, background);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
html, html,
body, body,
.content { .content {
background: if($is-dark-theme, mat-color($background, background), constants.$white); background: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);
} }
} }

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

@ -1,14 +1,15 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$primary: map-get($theme, primary); $primary: map.get($theme, primary);
$foreground: map-get($theme, foreground); $foreground: map.get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
.background-sky { .background-sky {
background: linear-gradient(145deg, mat-color($primary, 900), if($is-dark-theme, mat-color($primary, 700), #42a5f5)); background: linear-gradient(145deg, mat.get-color-from-palette($primary, 900), if($is-dark-theme, mat.get-color-from-palette($primary, 700), #42a5f5));
color: mat-color($foreground, text); color: mat.get-color-from-palette($foreground, text);
} }
section#intro { section#intro {
@ -59,7 +60,7 @@
} }
.marketing-banner { .marketing-banner {
background-color: if($is-dark-theme, mat-color($primary, 800), mat-color($primary, 600)); background-color: if($is-dark-theme, mat.get-color-from-palette($primary, 800), mat.get-color-from-palette($primary, 600));
.banner-headline { .banner-headline {
color: constants.$white; color: constants.$white;

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

@ -1,8 +1,8 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
.nf-response { .nf-response {
h1 { h1 {

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

@ -1,12 +1,13 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$background: map-get($theme, background); $background: map.get($theme, background);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
mat-sidenav-container.sidenav-container { mat-sidenav-container.sidenav-container {
background-color: if($is-dark-theme, mat-color($background, background), constants.$white); background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);
mat-sidenav.sidenav { mat-sidenav.sidenav {
background-color: if($is-dark-theme, constants.$deepgray, constants.$superlightgray); background-color: if($is-dark-theme, constants.$deepgray, constants.$superlightgray);

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

@ -1,21 +1,22 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@use '../../mixins'; @use '../../mixins';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$primary: map-get($theme, primary); $primary: map.get($theme, primary);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
mat-toolbar.app-toolbar { mat-toolbar.app-toolbar {
@if $is-dark-theme { @if $is-dark-theme {
&.mat-primary { &.mat-primary {
background: mat-color($primary, darker) background: mat.get-color-from-palette($primary, darker)
} }
} }
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
.page-home & { .page-home & {
background: if($is-dark-theme, mat-color($primary, darker), constants.$blue); background: if($is-dark-theme, mat.get-color-from-palette($primary, darker), constants.$blue);
} }
mat-icon { mat-icon {

15
aio/src/styles/2-modules/_code.scss
View File

@ -1,5 +1,6 @@
@use '../constants' as *; @use 'sass:color';
@use '../mixins' as *; @use '../constants';
@use '../mixins';
code-example, code-example,
code-tabs { code-tabs {
@ -52,7 +53,7 @@ code-example {
background-color: $accentblue; background-color: $accentblue;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
color: $offwhite; color: $offwhite;
@include font-size(16); @include mixins.font-size(16);
padding: 8px 16px; padding: 8px 16px;
} }
} }
@ -110,21 +111,21 @@ aio-code {
} }
span { span {
@include line-height(24); @include mixins.line-height(24);
} }
ol.linenums { ol.linenums {
margin: 0; margin: 0;
color: lighten($mediumgray, 25%); color: color.adjust($mediumgray, $lightness: 25%);
li { li {
margin: 0; margin: 0;
font-family: $code-font; font-family: $code-font;
font-size: 90%; font-size: 90%;
@include line-height(24); @include mixins.line-height(24);
&::marker { &::marker {
color: lighten($mediumgray, 25%); color: color.adjust($mediumgray, $lightness: 25%);
} }
} }
} }

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

@ -1,8 +1,8 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
.alert { .alert {
color: if($is-dark-theme, constants.$offwhite, constants.$darkgray); color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);

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

@ -1,9 +1,9 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@use '../../mixins'; @use '../../mixins';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
aio-api-list { aio-api-list {
.api-filter { .api-filter {

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

@ -1,5 +1,4 @@
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin api-pages-theme($theme) { @mixin api-pages-theme($theme) {
.api-body { .api-body {

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

@ -1,5 +1,5 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
.symbol { .symbol {
@ -10,10 +10,10 @@
// Symbol mapping variables in *constants* // Symbol mapping variables in *constants*
@each $name, $symbol in constants.$api-symbols { @each $name, $symbol in constants.$api-symbols {
&.#{$name} { &.#{$name} {
background: map-get($symbol, background); background: map.get($symbol, background);
&:before { &:before {
content: map-get($symbol, content); content: map.get($symbol, content);
} }
} }
} }

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

@ -1,5 +1,5 @@
@use 'sass:color';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
// This rule overrides some Angular Material styles defined for `.mat-button` // This rule overrides some Angular Material styles defined for `.mat-button`
@ -20,7 +20,7 @@
&.button-subtle { &.button-subtle {
background: constants.$mediumgray; background: constants.$mediumgray;
color: darken(constants.$offwhite, 10%); color: color.adjust(constants.$offwhite, $lightness: -10%);
&:hover { &:hover {
color: rgba(constants.$white, 0.7); color: rgba(constants.$white, 0.7);

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

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

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

@ -1,8 +1,8 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
.card-container { .card-container {
.docs-card { .docs-card {

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

@ -1,8 +1,9 @@
@use 'sass:color';
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import "~@angular/material/theming";
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
code-example { code-example {
&:not(.no-box) { &:not(.no-box) {
@ -51,11 +52,11 @@
pre.prettyprint { pre.prettyprint {
code { code {
ol.linenums { ol.linenums {
color: lighten(constants.$mediumgray, 25%); color: color.adjust(constants.$mediumgray, $lightness: 25%);
li { li {
&::marker { &::marker {
color: lighten(constants.$mediumgray, 25%); color: color.adjust(constants.$mediumgray, $lightness: 25%);
} }
} }
} }

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

@ -1,11 +1,12 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$background: map-get($theme, background); $background: map.get($theme, background);
aio-contributor { aio-contributor {
background: mat-color($background, background); background: mat.get-color-from-palette($background, background);
.contributor-info { .contributor-info {
background: rgba(constants.$darkgray, 0.5); background: rgba(constants.$darkgray, 0.5);

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

@ -1,18 +1,19 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@use '../../mixins'; @use '../../mixins';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
aio-shell.mode-archive { 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)); @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 { aio-shell.mode-next {
@include mixins.deploy-theme(constants.$brightred, constants.$darkred, if($is-dark-theme, constants.$powderblue, constants.$brightred)); @include mixins.deploy-theme(constants.$brightred, constants.$darkred, if($is-dark-theme, constants.$powderblue, constants.$brightred));
} }
aio-shell.mode-rc { aio-shell.mode-rc {
@include mixins.deploy-theme(constants.$tangerine, constants.$darkgoldenrod, if($is-dark-theme, constants.$powderblue, constants.$tangerine)); @include mixins.deploy-theme(constants.$tangerine, constants.$darkgoldenrod, if($is-dark-theme, constants.$powderblue, constants.$tangerine));
} }
} }

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

@ -1,5 +1,4 @@
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
details { details {

3
aio/src/styles/2-modules/details/_details.scss
View File

@ -1,3 +1,4 @@
@use 'sass:selector';
@use '../../constants'; @use '../../constants';
@use '../../mixins'; @use '../../mixins';
@ -33,7 +34,7 @@ details {
i.material-icons.expand { i.material-icons.expand {
@include mixins.rotate(0deg); @include mixins.rotate(0deg);
@at-root #{selector-replace(&, 'details', 'details[open]')} { @at-root #{selector.replace(&, 'details', 'details[open]')} {
@include mixins.rotate(180deg); @include mixins.rotate(180deg);
} }
} }

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

@ -1,5 +1,4 @@
@use '../../constants'; @use '../../constants';
@import "~@angular/material/theming";
@mixin theme($theme) { @mixin theme($theme) {
.error-list { .error-list {

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

@ -1,5 +1,4 @@
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
.filetree { .filetree {

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

@ -1,10 +1,11 @@
@use 'sass:color';
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
.reviewed { .reviewed {
color: if($is-dark-theme, constants.$offwhite, lighten(constants.$darkgray, 10)); color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));
} }
} }

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

@ -1,5 +1,4 @@
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
.sidenav-content { .sidenav-content {

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

@ -1,8 +1,8 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
hr { hr {
background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray); background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);

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

@ -1,8 +1,8 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
.content { .content {
.lightbox { .lightbox {

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

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

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

@ -1,5 +1,4 @@
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
aio-notification { aio-notification {

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

@ -1,9 +1,10 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$background: map-get($theme, background); $background: map.get($theme, background);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
.presskit-container { .presskit-container {
.presskit-section { .presskit-section {
@ -18,7 +19,7 @@
background-color: constants.$white; background-color: constants.$white;
&-inverse { &-inverse {
background-color: if($is-dark-theme, mat-color($background, background), constants.$deepgray); background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$deepgray);
} }
} }
} }

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

@ -1,8 +1,8 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming';
@mixin theme($theme) { @mixin theme($theme) {
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
aio-resource-list { aio-resource-list {
.subcategory-title { .subcategory-title {

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

@ -1,9 +1,11 @@
@use 'sass:color';
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map.get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
aio-search-results { aio-search-results {
.search-results { .search-results {
@ -17,7 +19,7 @@
ul { ul {
.search-result-item { .search-result-item {
color: if($is-dark-theme, constants.$offwhite , constants.$lightgray); color: if($is-dark-theme, constants.$offwhite, constants.$lightgray);
&:hover { &:hover {
color: constants.$white; color: constants.$white;
@ -27,11 +29,11 @@
} }
.no-results { .no-results {
color: mat-color($foreground, text); color: mat.get-color-from-palette($foreground, text);
} }
a { a {
color: mat-color($foreground, text); color: mat.get-color-from-palette($foreground, text);
} }
} }
@ -43,7 +45,7 @@
} }
.search-result-item { .search-result-item {
color: if($is-dark-theme, constants.$offwhite ,lighten(constants.$darkgray, 10)); color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));
&:hover { &:hover {
color: constants.$accentblue; color: constants.$accentblue;
@ -52,7 +54,7 @@
} }
.no-results { .no-results {
color: mat-color($foreground, text); color: mat.get-color-from-palette($foreground, text);
} }
a { a {

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

@ -1,9 +1,10 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$background: map-get($theme, background); $background: map.get($theme, background);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
aio-select { aio-select {
.form-select-button { .form-select-button {
@ -23,7 +24,7 @@
} }
.form-select-dropdown { .form-select-dropdown {
background: mat-color($background, background); background: mat.get-color-from-palette($background, background);
box-shadow: 0 16px 16px rgba(constants.$black, 0.24), 0 0 16px rgba(constants.$black, 0.12); box-shadow: 0 16px 16px rgba(constants.$black, 0.24), 0 0 16px rgba(constants.$black, 0.12);
li { li {

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

@ -1,13 +1,14 @@
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$background: map-get($theme, background); $background: map.get($theme, background);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
table { table {
box-shadow: 0 2px 2px rgba(constants.$mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, constants.$white, constants.$black), 0.12); box-shadow: 0 2px 2px rgba(constants.$mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, constants.$white, constants.$black), 0.12);
background-color: if($is-dark-theme, mat-color($background, background), constants.$white); background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), constants.$white);
thead > { thead > {
tr > th { tr > th {

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

@ -1,9 +1,11 @@
@use 'sass:color';
@use 'sass:map';
@use '../../constants'; @use '../../constants';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
@mixin theme($theme) { @mixin theme($theme) {
$foreground: map-get($theme, foreground); $foreground: map.get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark); $is-dark-theme: map.get($theme, is-dark);
aio-toc { aio-toc {
.toc-inner { .toc-inner {
@ -46,7 +48,7 @@
} }
a { a {
color: if($is-dark-theme, constants.$white, lighten(constants.$darkgray, 10)); color: if($is-dark-theme, constants.$white, color.adjust(constants.$darkgray, $lightness: 10%));
} }
&:hover { &:hover {
@ -84,7 +86,7 @@
.toc-inner { .toc-inner {
.toc-heading { .toc-heading {
&.secondary { &.secondary {
color: mat-color($foreground, text); color: mat.get-color-from-palette($foreground, text);
} }
} }
} }

8
aio/src/styles/_mixins.scss
View File

@ -1,3 +1,5 @@
@use 'sass:list';
@use 'sass:selector';
@use './constants'; @use './constants';
// REM Font Adjustments // REM Font Adjustments
@ -127,7 +129,7 @@
); );
@if $nestParentSelector and & { @if $nestParentSelector and & {
@at-root #{selector-nest(#{$selectors}, &)} { @at-root #{selector.nest(#{$selectors}, &)} {
@content; @content;
} }
} @else { } @else {
@ -179,10 +181,10 @@
'.page-presskit', '.page-presskit',
'.page-resources', '.page-resources',
); );
$selectors: join($marketingPagesSelectors, $extraSelectors, $separator: comma); $selectors: list.join($marketingPagesSelectors, $extraSelectors, $separator: comma);
@if $nestParentSelector and & { @if $nestParentSelector and & {
@at-root #{selector-nest(#{$selectors}, &)} { @at-root #{selector.nest(#{$selectors}, &)} {
@content; @content;
} }
} @else { } @else {

12
aio/src/styles/custom-themes/dark-theme.scss
View File

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

12
aio/src/styles/custom-themes/light-theme.scss
View File

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

4
aio/src/styles/main.scss
View File

@ -6,8 +6,8 @@
// import print styles // import print styles
@use './print'; @use './print';
@import '~@angular/material/theming'; @use '~@angular/material' as mat;
// Include the base styles for Angular Material core. We include this here so that you only // 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. // have to load a single css file for Angular Material in your app.
@include mat-core(); @include mat.core();