Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 901e4ac

Browse files
crisbetocrisbeto
authored
feat: switch to sass modules (#952)
Switches all of the .scss files to the Sass module system and to use the new Material theming API.
1 parent a4dc376 commit 901e4ac

31 files changed

+354
-327
lines changed

‎scenes/src/styles.scss

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
2-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
33

4-
@include mat-core();
4+
@include mat.core();
55

6-
$primary: mat-palette($mat-red, 500, 200, 900);
7-
$accent: mat-palette($mat-red, 500, 200, 700);
8-
$warn: mat-palette($mat-red);
6+
$_primary: mat.define-palette(mat.$red-palette, 500, 200, 900);
7+
$_accent: mat.define-palette(mat.$red-palette, 500, 200, 700);
8+
$_warn: mat.define-palette(mat.$red-palette);
99

10-
$theme: mat-light-theme($primary, $accent, $warn);
11-
$background-color: #fff2f4;
10+
$_theme: mat.define-light-theme($_primary, $_accent, $_warn);
11+
$_background-color: #fff2f4;
1212

13-
$background: map-get($theme, background);
14-
$background: map_merge($background, (
15-
background: $background-color,
13+
$_background: map.get($_theme, background);
14+
$_background: map.merge($_background, (
15+
background: $_background-color,
1616
disabled-button: rgba(red, 0.5),
1717
selected-button: rgba(red, 0.23)));
18-
$theme: map_merge($theme, (background: $background));
18+
$_theme: map.merge($_theme, (background: $_background));
1919

20-
$secondary-text-color: map_get($mat-red, 600);
20+
$_secondary-text-color: map_get(mat.$red-palette, 600);
2121

22-
$foreground: map-get($theme, foreground);
23-
$foreground: map_merge($foreground, (
22+
$_foreground: map.get($_theme, foreground);
23+
$_foreground: map.merge($_foreground, (
2424
disabled-button: rgba(red, 0.45),
25-
text: $secondary-text-color,
26-
divider: $secondary-text-color,
27-
secondary-text: $secondary-text-color,
28-
dsiabled-text: $secondary-text-color,
29-
hint-text: $secondary-text-color,
30-
icon: $secondary-text-color));
31-
$theme: map_merge($theme, (foreground: $foreground));
32-
33-
@include angular-material-theme($theme);
25+
text: $_secondary-text-color,
26+
divider: $_secondary-text-color,
27+
secondary-text: $_secondary-text-color,
28+
dsiabled-text: $_secondary-text-color,
29+
hint-text: $_secondary-text-color,
30+
icon: $_secondary-text-color));
31+
$_theme: map.merge($_theme, (foreground: $_foreground));
32+
33+
@include mat.all-component-themes($_theme);
3434

3535
body {
3636
margin: 0;

‎src/_app-theme.scss

Lines changed: 46 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,65 @@
1-
@import '~@angular/material/theming';
1+
@use '~@angular/material' as mat;
22

3-
@import './app/pages/component-category-list/component-category-list-theme';
4-
@import './app/pages/component-sidenav/component-sidenav-theme';
5-
@import './app/pages/component-viewer/component-viewer-theme';
6-
@import './app/pages/guide-list/guide-list-theme';
7-
@import './app/pages/homepage/homepage-theme';
8-
@import './app/pages/not-found/not-found-theme';
9-
@import './app/shared/carousel/carousel-theme';
10-
@import './app/shared/example-viewer/example-viewer-theme';
11-
@import './app/shared/footer/footer-theme';
12-
@import './app/shared/navbar/navbar-theme';
13-
@import './app/shared/table-of-contents/table-of-contents-theme';
14-
@import './styles/api-theme';
15-
@import './styles/markdown-theme';
16-
@import './styles/svg-theme';
17-
@import './styles/tables-theme';
3+
@use 'sass:map';
4+
@use './app/pages/component-category-list/component-category-list-theme';
5+
@use './app/pages/component-sidenav/component-sidenav-theme';
6+
@use './app/pages/component-viewer/component-viewer-theme';
7+
@use './app/pages/guide-list/guide-list-theme';
8+
@use './app/pages/homepage/homepage-theme';
9+
@use './app/pages/not-found/not-found-theme';
10+
@use './app/shared/carousel/carousel-theme';
11+
@use './app/shared/example-viewer/example-viewer-theme';
12+
@use './app/shared/footer/footer-theme';
13+
@use './app/shared/navbar/navbar-theme';
14+
@use './app/shared/table-of-contents/table-of-contents-theme';
15+
@use './styles/api-theme';
16+
@use './styles/markdown-theme';
17+
@use './styles/svg-theme';
18+
@use './styles/tables-theme';
1819

1920
// Styles for the docs app that are based on the current theme.
20-
@mixin material-docs-app-theme($theme) {
21-
$primary: map-get($theme, primary);
22-
$accent: map-get($theme, accent);
23-
$warn: map-get($theme, warn);
24-
$background: map-get($theme, background);
25-
$foreground: map-get($theme, foreground);
26-
$next-theme: mat-palette($mat-red);
21+
@mixin theme($theme) {
22+
$primary: map.get($theme, primary);
23+
$accent: map.get($theme, accent);
24+
$warn: map.get($theme, warn);
25+
$background: map.get($theme, background);
26+
$foreground: map.get($theme, foreground);
27+
$next-theme: mat.define-palette(mat.$red-palette);
2728

2829
.docs-app-background {
29-
background: mat-color($background, background);
30+
background: mat.get-color-from-palette($background, background);
3031
}
3132

3233
.docs-primary-header {
33-
background: mat-color($primary);
34+
background: mat.get-color-from-palette($primary);
3435

3536
h1 {
36-
color: mat-color($primary, default-contrast);
37+
color: mat.get-color-from-palette($primary, default-contrast);
3738
}
3839
}
3940

4041
.docs-footer {
41-
background: mat-color($primary);
42-
color: mat-color($primary, default-contrast);
42+
background: mat.get-color-from-palette($primary);
43+
color: mat.get-color-from-palette($primary, default-contrast);
4344
}
4445

4546
.is-next-version {
46-
background: mat-color($next-theme, 900) !important;
47+
background: mat.get-color-from-palette($next-theme, 900) !important;
4748
}
48-
@include carousel-theme($theme);
49-
@include component-category-list-theme($theme);
50-
@include component-viewer-sidenav-theme($theme);
51-
@include component-viewer-theme($theme);
52-
@include docs-site-api-theme($theme);
53-
@include docs-site-markdown-theme($theme);
54-
@include docs-site-svg-theme($theme);
55-
@include docs-site-tables-theme($theme);
56-
@include example-viewer-theme($theme);
57-
@include footer-theme($theme);
58-
@include guide-list-theme($theme);
59-
@include home-page-theme($theme);
60-
@include not-found-theme($theme);
61-
@include nav-bar-theme($theme);
62-
@include table-of-contents-theme($theme);
63-
}
64-
65-
// Define the light theme.
66-
$primary: mat-palette($mat-indigo);
67-
$accent: mat-palette($mat-pink, A200, A100, A400);
6849

69-
$theme: mat-light-theme($primary, $accent);
50+
@include carousel-theme.theme($theme);
51+
@include component-category-list-theme.theme($theme);
52+
@include component-sidenav-theme.theme($theme);
53+
@include component-viewer-theme.theme($theme);
54+
@include api-theme.theme($theme);
55+
@include markdown-theme.theme($theme);
56+
@include svg-theme.theme($theme);
57+
@include tables-theme.theme($theme);
58+
@include example-viewer-theme.theme($theme);
59+
@include footer-theme.theme($theme);
60+
@include guide-list-theme.theme($theme);
61+
@include homepage-theme.theme($theme);
62+
@include not-found-theme.theme($theme);
63+
@include navbar-theme.theme($theme);
64+
@include table-of-contents-theme.theme($theme);
65+
}

‎src/app/material-docs-app.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'constants';
1+
@use '../styles/constants';
22

33
material-docs-app {
44
display: flex;
@@ -25,7 +25,7 @@ material-docs-app > router-outlet + app-component-sidenav {
2525
-webkit-overflow-scrolling: touch;
2626
}
2727

28-
@media (max-width: $extra-small-breakpoint-width) {
28+
@media (max-width: constants.$extra-small-breakpoint-width) {
2929
material-docs-app > router-outlet + .main-content,
3030
material-docs-app > router-outlet + app-component-sidenav {
3131
margin-top: 92px;

‎src/app/pages/component-category-list/_component-category-list-theme.scss

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,38 @@
1-
@import '~@angular/material/theming';
1+
@use 'sass:map';
2+
@use '~@angular/material' as mat;
23

3-
@mixin component-category-list-theme($theme) {
4-
$primary: map-get($theme, primary);
5-
$accent: map-get($theme, accent);
6-
$warn: map-get($theme, warn);
7-
$background: map-get($theme, background);
8-
$foreground: map-get($theme, foreground);
9-
$is-dark-theme: map-get($theme, is-dark);
4+
@mixin theme($theme) {
5+
$primary: map.get($theme, primary);
6+
$accent: map.get($theme, accent);
7+
$warn: map.get($theme, warn);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
10+
$is-dark-theme: map.get($theme, is-dark);
1011
$nav-background-opacity: if($is-dark-theme, 0.2, 0.03);
1112

1213
.docs-component-category-list-summary a {
13-
color: mat-color($primary, if($is-dark-theme, 200, default));
14+
color: mat.get-color-from-palette($primary, if($is-dark-theme, 200, default));
1415
}
1516

1617
.docs-component-category-list-card-summary {
17-
color: mat-color($foreground, secondary-text);
18+
color: mat.get-color-from-palette($foreground, secondary-text);
1819
}
1920

2021
.docs-component-category-list-card {
21-
border: 1px solid mat-color($foreground, divider);
22+
border: 1px solid mat.get-color-from-palette($foreground, divider);
2223
border-radius: 4px;
23-
background: mat-color($background, card);
24+
background: mat.get-color-from-palette($background, card);
2425
}
2526

2627
.docs-component-category-list-card:hover {
2728
background: rgba(0, 0, 0, $nav-background-opacity);
2829
}
2930

3031
.docs-component-category-list-card-title {
31-
color: mat-color($foreground, text);
32+
color: mat.get-color-from-palette($foreground, text);
3233
}
3334

3435
.docs-component-category-list-card-image-wrapper {
35-
border-bottom: 1px solid mat-color($foreground, divider);
36+
border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
3637
}
3738
}

‎src/app/pages/component-category-list/component-category-list.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '../../../styles/constants';
2-
31
:host {
42
display: flex;
53
flex-direction: column;

‎src/app/pages/component-page-header/component-page-header.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
@import '../../../styles/constants';
1+
@use '../../../styles/constants';
22

33
.component-page-header {
44
display: flex;
55
align-items: center;
66

7-
@media (max-width: $small-breakpoint-width) {
7+
@media (max-width: constants.$small-breakpoint-width) {
88
padding-left: 0;
99
}
1010
}
1111

1212
h1 {
1313
outline: none;
1414

15-
@media (max-width: $small-breakpoint-width) {
15+
@media (max-width: constants.$small-breakpoint-width) {
1616
padding: 24px 8px;
1717
font-size: 20px;
1818
}
@@ -24,7 +24,7 @@ h1 {
2424
min-width: 64px;
2525
display: none;
2626

27-
@media (max-width: $small-breakpoint-width) {
27+
@media (max-width: constants.$small-breakpoint-width) {
2828
display: flex;
2929
align-items: center;
3030
justify-content: center;

‎src/app/pages/component-sidenav/_component-sidenav-theme.scss

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,49 @@
1-
@import '~@angular/material/theming';
2-
@import 'constants';
3-
4-
@mixin component-viewer-sidenav-theme($theme) {
5-
$primary: map-get($theme, primary);
6-
$background: map-get($theme, background);
7-
$foreground: map-get($theme, foreground);
8-
$is-dark-theme: map-get($theme, is-dark);
1+
@use '~@angular/material' as mat;
2+
@use 'sass:color';
3+
@use 'sass:map';
4+
@use '../../../styles/constants';
5+
6+
@mixin theme($theme) {
7+
$primary: map.get($theme, primary);
8+
$background: map.get($theme, background);
9+
$foreground: map.get($theme, foreground);
10+
$is-dark-theme: map.get($theme, is-dark);
911
$nav-background-opacity: if($is-dark-theme, 0.2, 0.03);
1012
$nav-background-focus-opacity: if($is-dark-theme, 0.25, 0.08);
1113

1214
.docs-component-viewer-nav-content {
13-
border-right: 1px solid mat-color($foreground, divider);
15+
border-right: 1px solid mat.get-color-from-palette($foreground, divider);
1416

1517
&::-webkit-scrollbar-thumb {
1618
background: rgba(0, 0, 0, .26);
1719
}
1820

1921
a {
20-
color: map-get($foreground, secondary-text);
22+
color: map.get($foreground, secondary-text);
2123

2224
&:hover {
23-
color: mat-color($foreground, text);
25+
color: mat.get-color-from-palette($foreground, text);
2426
}
2527

2628
&.docs-component-viewer-sidenav-item-selected {
27-
background: rgba(mat-color($primary, default), 0.15);
28-
color: lighten(mat-color($primary, default), if($is-dark-theme, 25%, 0));
29+
background: rgba(mat.get-color-from-palette($primary, default), 0.15);
30+
color: color.adjust(
31+
mat.get-color-from-palette($primary, default),
32+
$lightness: if($is-dark-theme, 25%, 0%)
33+
);
2934
}
3035

3136
&.docs-component-viewer-sidenav-item-selected:hover {
32-
background: rgba(mat-color($primary, default), 0.3);
37+
background: rgba(mat.get-color-from-palette($primary, default), 0.3);
3338
}
3439
}
3540

3641
.mat-list-item {
37-
color: rgba(mat-color($foreground, secondary-text), 0.65);
42+
color: rgba(mat.get-color-from-palette($foreground, secondary-text), 0.65);
3843
}
3944
}
4045

41-
@media (max-width: $small-breakpoint-width) {
46+
@media (max-width: constants.$small-breakpoint-width) {
4247
.docs-component-viewer-sidenav {
4348
.docs-component-viewer-nav-content {
4449
background: none;

‎src/app/pages/component-sidenav/component-sidenav.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'constants';
1+
@use '../../../styles/constants';
22

33
app-component-sidenav {
44
display: flex;
@@ -32,7 +32,7 @@ app-component-sidenav {
3232
top: 0;
3333

3434
.docs-component-viewer-nav-content {
35-
width: $sidenav-width;
35+
width: constants.$sidenav-width;
3636
height: 100vh;
3737
overflow: auto;
3838

@@ -87,7 +87,7 @@ div.docs-component-viewer-nav-content .mat-nav-list .mat-list-item .mat-list-ite
8787
padding-left: 25px;
8888
}
8989

90-
@media (max-width: $small-breakpoint-width) {
90+
@media (max-width: constants.$small-breakpoint-width) {
9191
// Add specific rule to prevent default rule conflict
9292
.docs-component-viewer-sidenav-container .docs-component-viewer-sidenav {
9393
// position right above the content

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy