Skip to content

Commit 6ace057

Browse files
json-derulojson-derulo
committed
fix: use correct background color for snackbar
1 parent b9cff74 commit 6ace057

File tree

5 files changed

+182
-164
lines changed

5 files changed

+182
-164
lines changed

‎projects/material-css-vars/src/lib/_internal-helper.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
// used to circumvent node sass issue: https://github.com/sass/node-sass/issues/2251
22
@function rgb($r, $g: null, $b: null ) {
33
@if ($g == null) {
4-
@return unquote('#{$r}');
4+
@return unquote("#{$r}");
55
}
66

77
@if ($g and $b) {
8-
@return unquote('#{$r}, #{$g}, #{$b}');
8+
@return unquote("#{$r}, #{$g}, #{$b}");
99
}
1010

1111
@error "wrong number of arguments";
@@ -14,17 +14,17 @@
1414
// used to circumvent node sass issue: https://github.com/sass/node-sass/issues/2251
1515
@function rgba($r, $g, $b: null, $a: null ) {
1616
@if ($b == null) {
17-
@return unquote('#{$r}, #{$g}');
17+
@return unquote("#{$r}, #{$g}");
1818
}
1919

2020
@if ($b and $a) {
21-
@return unquote('#{$r}, #{$g}, #{$b}, #{$a}');
21+
@return unquote("#{$r}, #{$g}, #{$b}, #{$a}");
2222
}
2323

2424
@error "wrong number of arguments";
2525
}
2626

27-
@function str-replace($string, $search, $replace: '') {
27+
@function str-replace($string, $search, $replace: "") {
2828
$index: str-index($string, $search);
2929

3030
@if $index {
@@ -68,15 +68,15 @@
6868

6969
@function strip-variable($color) {
7070
$var: $color;
71-
@if (str-index($var, 'rgba(')) {
72-
$var: str-replace($var, 'rgba(', '');
71+
@if (str-index($var, "rgba(")) {
72+
$var: str-replace($var, "rgba(", "");
7373
}
74-
@if (str-index($var, 'rgb(')) {
75-
$var: str-replace($var, 'rgb(', '');
74+
@if (str-index($var, "rgb(")) {
75+
$var: str-replace($var, "rgb(", "");
7676
}
77-
@if (str-index($var, 'var(')) {
78-
$var: str-replace($var, ')', ''); // remove excess ")"
79-
$var: $var + ')';
77+
@if (str-index($var, "var(")) {
78+
$var: str-replace($var, ")", ""); // remove excess ")"
79+
$var: $var + ")";
8080
}
8181
@return $var;
8282
}

‎projects/material-css-vars/src/lib/_main.scss

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
@use '@angular/material' as mat;
2-
@use 'internal-helper' as helper;
3-
@use 'variables' as variables;
4-
@use 'internal-helper';
5-
@use 'public-util';
1+
@use "@angular/material" as mat;
2+
@use "variables";
3+
@use "internal-helper";
4+
@use "public-util";
65
// contains main overwrite of `mat-color` to make it all work
7-
// needs to come after '@angular/material'
8-
@use 'mat-lib-overwrites' as overwrites;
6+
// needs to come after "@angular/material"
7+
@use "mat-lib-overwrites";
98

109
@mixin init-css-vars($default-theme, $text, $default-foreground, $default-background) {
1110
// init css variables
12-
@include helper.root($text);
13-
@include helper.root($default-theme);
14-
@include helper.root($default-foreground);
15-
@include helper.root($default-background);
11+
@include internal-helper.root($text);
12+
@include internal-helper.root($default-theme);
13+
@include internal-helper.root($default-foreground);
14+
@include internal-helper.root($default-background);
1615
}
1716

1817
@mixin init-mat-theme($dark-theme-selector, $typography-config: mat.define-typography-config()) {
@@ -69,7 +68,7 @@
6968
}
7069
}
7170

72-
@include overwrites.other-overwrites;
71+
@include mat-lib-overwrites.other-overwrites;
7372

7473
$mat-css-theme: null !global;
7574
}

‎projects/material-css-vars/src/lib/_mat-lib-overwrites.scss

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'public-util';
1+
@use "public-util";
22
@use "variables";
33

44
// ---------------------------
@@ -16,6 +16,7 @@
1616
@include _mat-mdc-date-picker-overwrites();
1717
@include _mat-mdc-progress-bar-overwrites();
1818
@include _mat-mdc-slider-overwrites();
19+
@include _mat-mdc-snackbar-overwrites();
1920
}
2021

2122
// ---------------------------
@@ -375,3 +376,17 @@
375376
}
376377
}
377378
}
379+
380+
// ---------------------------
381+
// SNACKBAR component
382+
// ---------------------------
383+
@mixin _mat-mdc-snackbar-overwrites() {
384+
.mat-mdc-snack-bar-container {
385+
@include public-util.mat-css-dark-theme-global() {
386+
--mdc-snackbar-container-color: #{map-get(variables.$palette-background-dark, "snackbar")};
387+
}
388+
@include public-util.mat-css-light-theme-global() {
389+
--mdc-snackbar-container-color: #{map-get(variables.$palette-background, "snackbar")};
390+
}
391+
}
392+
}

‎projects/material-css-vars/src/lib/_public-util.scss

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
@forward "public-color-util";
2-
@use 'variables' as variables;
1+
@use "public-color-util";
2+
@use "variables";
33

44
// Utility mixins for the public
55

66
// colors
77
// ------
8-
@function mat-css-color($hue: 500, $opacity: null, $palette: 'primary', $is-contrast-color: false) {
8+
@function mat-css-color($hue: 500, $opacity: null, $palette: "primary", $is-contrast-color: false) {
99
// If opacity is being provided, we need to to use *-no-rgb pallets
1010
// in order to return a proper variable value.
1111
@if ($opacity != null) {
1212
@return _mat-css-color-no-rgb($hue, $opacity, $palette, $is-contrast-color);
1313
}
1414
$palette_: variables.$palette-primary;
1515
@if ($is-contrast-color == true) {
16-
@if ($palette=='primary') {
16+
@if ($palette=="primary") {
1717
$palette_: variables.$contrast-palette;
18-
} @else if ($palette=='accent') {
18+
} @else if ($palette=="accent") {
1919
$palette_: variables.$contrast-palette-accent;
20-
} @else if ($palette=='warn') {
20+
} @else if ($palette=="warn") {
2121
$palette_: variables.$contrast-palette-warn;
2222
} @else {
23-
@error 'Invalid contrast palette';
23+
@error "Invalid contrast palette";
2424
}
2525
} @else {
26-
@if ($palette=='primary') {
26+
@if ($palette=="primary") {
2727
$palette_: variables.$palette-primary;
28-
} @else if ($palette=='accent') {
28+
} @else if ($palette=="accent") {
2929
$palette_: variables.$palette-accent;
30-
} @else if ($palette=='warn') {
30+
} @else if ($palette=="warn") {
3131
$palette_: variables.$palette-warn;
3232
} @else {
33-
@error 'Invalid palette';
33+
@error "Invalid palette";
3434
}
3535
}
3636

@@ -53,7 +53,7 @@
5353
} @else if ($palette== "warn") {
5454
$palette_: variables.$contrast-palette-warn-no-rgb;
5555
} @else {
56-
@error 'Invalid contrast palette';
56+
@error "Invalid contrast palette";
5757
}
5858
} @else {
5959
@if ($palette== "primary") {
@@ -63,47 +63,47 @@
6363
} @else if ($palette== "warn") {
6464
$palette_: variables.$palette-warn-no-rgb;
6565
} @else {
66-
@error 'Invalid palette';
66+
@error "Invalid palette";
6767
}
6868
}
6969
$var: map_get($palette_, $hue);
7070
@return #{rgba($var, $opacity)};
7171
}
7272

7373
@function mat-css-color-primary($hue: 500, $opacity: null) {
74-
@return mat-css-color($hue, $opacity, 'primary');
74+
@return mat-css-color($hue, $opacity, "primary");
7575
}
7676

7777
@function mat-css-color-accent($hue: 500, $opacity: null) {
78-
@return mat-css-color($hue, $opacity, 'accent');
78+
@return mat-css-color($hue, $opacity, "accent");
7979
}
8080

8181
@function mat-css-color-warn($hue: 500, $opacity: null) {
82-
@return mat-css-color($hue, $opacity, 'warn');
82+
@return mat-css-color($hue, $opacity, "warn");
8383
}
8484

8585
// contrast-colors
8686
// ---------------
87-
@function mat-css-contrast-color($hue: 500, $opacity: null, $palette: 'primary') {
87+
@function mat-css-contrast-color($hue: 500, $opacity: null, $palette: "primary") {
8888
@return mat-css-color($hue, $opacity, $palette, true);
8989
}
9090

9191
@function mat-css-contrast-color-primary($hue: 500, $opacity: null) {
92-
@return mat-css-contrast-color($hue, $opacity, 'primary');
92+
@return mat-css-contrast-color($hue, $opacity, "primary");
9393
}
9494

9595
@function mat-css-contrast-color-accent($hue: 500, $opacity: null) {
96-
@return mat-css-contrast-color($hue, $opacity, 'accent');
96+
@return mat-css-contrast-color($hue, $opacity, "accent");
9797
}
9898

9999
@function mat-css-contrast-color-warn($hue: 500, $opacity: null) {
100-
@return mat-css-contrast-color($hue, $opacity, 'warn');
100+
@return mat-css-contrast-color($hue, $opacity, "warn");
101101
}
102102

103103
// mixins
104104
// ------
105105
@mixin mat-css-color-and-contrast($hue) {
106-
@warn 'mat-css-color-and-contrast() is deprecated. Please use mat-css-color-and-contrast-primary() instead.';
106+
@warn "mat-css-color-and-contrast() is deprecated. Please use mat-css-color-and-contrast-primary() instead.";
107107
@include mat-css-color-and-contrast-primary($hue);
108108
}
109109

@@ -160,11 +160,11 @@
160160
}
161161
}
162162

163-
@mixin mat-css-set-palette-defaults($css-var-map, $paletteType: 'primary') {
163+
@mixin mat-css-set-palette-defaults($css-var-map, $paletteType: "primary") {
164164
$new-map: ();
165165
@each $var, $defaultVal in $css-var-map {
166-
@if ($var != 'contrast') {
167-
$colorVal: hex-to-rgb($defaultVal);
166+
@if ($var != "contrast") {
167+
$colorVal: public-color-util.hex-to-rgb($defaultVal);
168168
@if $colorVal != null {
169169
$new-map: map_merge($new-map, (--palette-#{$paletteType}-#{$var}: #{$colorVal}));
170170
}

0 commit comments

Comments
 (0)