mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(theming): light text on colored backgrounds should be opaque (#7421)
According to [Material Design Guidelines](https://material.io/guidelines/style/color.html#color-usability) white text on colored backgrounds should do so at an opacity of 100%
This commit is contained in:
Gustav Bylund
committed by
Andrew Seguin
Andrew Seguin
parent
5737b9fd89
commit
1701b9871f
+299
-282
@@ -6,13 +6,30 @@
|
||||
// While the contrast colors in the spec are not prescriptive, we use them for convenience.
|
||||
|
||||
|
||||
/// @deprecated renamed to $dark-primary-text.
|
||||
$black-87-opacity: rgba(black, 0.87);
|
||||
/// @deprecated renamed to $light-primary-text.
|
||||
$white-87-opacity: rgba(white, 0.87);
|
||||
/// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.
|
||||
$black-12-opacity: rgba(black, 0.12);
|
||||
/// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.
|
||||
$white-12-opacity: rgba(white, 0.12);
|
||||
/// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.
|
||||
$black-6-opacity: rgba(black, 0.06);
|
||||
/// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.
|
||||
$white-6-opacity: rgba(white, 0.06);
|
||||
|
||||
$dark-primary-text: rgba(black, 0.87);
|
||||
$dark-secondary-text: rgba(black, 0.54);
|
||||
$dark-disabled-text: rgba(black, 0.38);
|
||||
$dark-dividers: rgba(black, 0.12);
|
||||
$dark-focused: rgba(black, 0.12);
|
||||
$light-primary-text: white;
|
||||
$light-secondary-text: rgba(white, 0.7);
|
||||
$light-disabled-text: rgba(white, 0.5);
|
||||
$light-dividers: rgba(white, 0.12);
|
||||
$light-focused: rgba(white, 0.12);
|
||||
|
||||
$mat-red: (
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
@@ -29,20 +46,20 @@ $mat-red: (
|
||||
A400: #ff1744,
|
||||
A700: #d50000,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -62,20 +79,20 @@ $mat-pink: (
|
||||
A400: #f50057,
|
||||
A700: #c51162,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -95,20 +112,20 @@ $mat-purple: (
|
||||
A400: #d500f9,
|
||||
A700: #aa00ff,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $light-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -128,20 +145,20 @@ $mat-deep-purple: (
|
||||
A400: #651fff,
|
||||
A700: #6200ea,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: $white-87-opacity,
|
||||
A700: $white-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $light-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -161,20 +178,20 @@ $mat-indigo: (
|
||||
A400: #3d5afe,
|
||||
A700: #304ffe,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: $white-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $light-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -194,20 +211,20 @@ $mat-blue: (
|
||||
A400: #2979ff,
|
||||
A700: #2962ff,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: white,
|
||||
A400: white,
|
||||
A700: white,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $light-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -227,20 +244,20 @@ $mat-light-blue: (
|
||||
A400: #00b0ff,
|
||||
A700: #0091ea,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: white,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -260,20 +277,20 @@ $mat-cyan: (
|
||||
A400: #00e5ff,
|
||||
A700: #00b8d4,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -293,20 +310,20 @@ $mat-teal: (
|
||||
A400: #1de9b6,
|
||||
A700: #00bfa5,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -326,20 +343,20 @@ $mat-green: (
|
||||
A400: #00e676,
|
||||
A700: #00c853,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: white,
|
||||
700: white,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -359,20 +376,20 @@ $mat-light-green: (
|
||||
A400: #76ff03,
|
||||
A700: #64dd17,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $dark-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -392,20 +409,20 @@ $mat-lime: (
|
||||
A400: #c6ff00,
|
||||
A700: #aeea00,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: $black-87-opacity,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $dark-primary-text,
|
||||
700: $dark-primary-text,
|
||||
800: $dark-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -425,20 +442,20 @@ $mat-yellow: (
|
||||
A400: #ffea00,
|
||||
A700: #ffd600,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: $black-87-opacity,
|
||||
900: $black-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $dark-primary-text,
|
||||
700: $dark-primary-text,
|
||||
800: $dark-primary-text,
|
||||
900: $dark-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -458,20 +475,20 @@ $mat-amber: (
|
||||
A400: #ffc400,
|
||||
A700: #ffab00,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: $black-87-opacity,
|
||||
900: $black-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $dark-primary-text,
|
||||
700: $dark-primary-text,
|
||||
800: $dark-primary-text,
|
||||
900: $dark-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -491,19 +508,19 @@ $mat-orange: (
|
||||
A400: #ff9100,
|
||||
A700: #ff6d00,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $black-87-opacity,
|
||||
700: $black-87-opacity,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $dark-primary-text,
|
||||
700: $dark-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: black,
|
||||
)
|
||||
);
|
||||
@@ -524,20 +541,20 @@ $mat-deep-orange: (
|
||||
A400: #ff3d00,
|
||||
A700: #dd2c00,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: white,
|
||||
600: white,
|
||||
700: white,
|
||||
800: white,
|
||||
900: white,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: white,
|
||||
A700: white,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -557,20 +574,20 @@ $mat-brown: (
|
||||
A400: #8d6e63,
|
||||
A700: #5d4037,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: white,
|
||||
400: white,
|
||||
500: $white-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: white,
|
||||
A700: $white-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $light-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -590,20 +607,20 @@ $mat-grey: (
|
||||
A400: #bdbdbd,
|
||||
A700: #616161,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: $black-87-opacity,
|
||||
500: $black-87-opacity,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: $black-87-opacity,
|
||||
A700: $white-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $dark-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -623,20 +640,20 @@ $mat-blue-grey: (
|
||||
A400: #78909c,
|
||||
A700: #455a64,
|
||||
contrast: (
|
||||
50: $black-87-opacity,
|
||||
100: $black-87-opacity,
|
||||
200: $black-87-opacity,
|
||||
300: $black-87-opacity,
|
||||
400: white,
|
||||
500: white,
|
||||
600: $white-87-opacity,
|
||||
700: $white-87-opacity,
|
||||
800: $white-87-opacity,
|
||||
900: $white-87-opacity,
|
||||
A100: $black-87-opacity,
|
||||
A200: $black-87-opacity,
|
||||
A400: white,
|
||||
A700: $white-87-opacity,
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $light-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $light-primary-text,
|
||||
A700: $light-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@@ -649,9 +666,9 @@ $mat-light-theme-background: (
|
||||
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
|
||||
card: white,
|
||||
dialog: white,
|
||||
disabled-button: $black-12-opacity,
|
||||
disabled-button: rgba(black, 0.12),
|
||||
raised-button: white,
|
||||
focused-button: $black-6-opacity,
|
||||
focused-button: $dark-focused,
|
||||
selected-button: map_get($mat-grey, 300),
|
||||
selected-disabled-button: map_get($mat-grey, 400),
|
||||
disabled-button-toggle: map_get($mat-grey, 200),
|
||||
@@ -667,9 +684,9 @@ $mat-dark-theme-background: (
|
||||
hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
|
||||
card: map_get($mat-grey, 800),
|
||||
dialog: map_get($mat-grey, 800),
|
||||
disabled-button: $white-12-opacity,
|
||||
disabled-button: rgba(white, 0.12),
|
||||
raised-button: map-get($mat-grey, 800),
|
||||
focused-button: $white-6-opacity,
|
||||
focused-button: $light-focused,
|
||||
selected-button: map_get($mat-grey, 900),
|
||||
selected-disabled-button: map_get($mat-grey, 800),
|
||||
disabled-button-toggle: black,
|
||||
@@ -680,13 +697,13 @@ $mat-dark-theme-background: (
|
||||
// Foreground palette for light themes.
|
||||
$mat-light-theme-foreground: (
|
||||
base: black,
|
||||
divider: $black-12-opacity,
|
||||
dividers: $black-12-opacity,
|
||||
disabled: rgba(black, 0.38),
|
||||
disabled-button: rgba(black, 0.38),
|
||||
disabled-text: rgba(black, 0.38),
|
||||
hint-text: rgba(black, 0.38),
|
||||
secondary-text: rgba(black, 0.54),
|
||||
divider: $dark-dividers,
|
||||
dividers: $dark-dividers,
|
||||
disabled: $dark-disabled-text,
|
||||
disabled-button: rgba(black, 0.26),
|
||||
disabled-text: $dark-disabled-text,
|
||||
hint-text: $dark-disabled-text,
|
||||
secondary-text: $dark-secondary-text,
|
||||
icon: rgba(black, 0.54),
|
||||
icons: rgba(black, 0.54),
|
||||
text: rgba(black, 0.87),
|
||||
@@ -698,13 +715,13 @@ $mat-light-theme-foreground: (
|
||||
// Foreground palette for dark themes.
|
||||
$mat-dark-theme-foreground: (
|
||||
base: white,
|
||||
divider: $white-12-opacity,
|
||||
dividers: $white-12-opacity,
|
||||
disabled: rgba(white, 0.3),
|
||||
divider: $light-dividers,
|
||||
dividers: $light-dividers,
|
||||
disabled: $light-disabled-text,
|
||||
disabled-button: rgba(white, 0.3),
|
||||
disabled-text: rgba(white, 0.3),
|
||||
hint-text: rgba(white, 0.3),
|
||||
secondary-text: rgba(white, 0.7),
|
||||
disabled-text: $light-disabled-text,
|
||||
hint-text: $light-disabled-text,
|
||||
secondary-text: $light-secondary-text,
|
||||
icon: white,
|
||||
icons: white,
|
||||
text: white,
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
.mat-snack-bar-container {
|
||||
background: if($is-dark-theme, map-get($mat-grey, 50), #323232);
|
||||
color: if($is-dark-theme, $black-87-opacity, white);
|
||||
color: if($is-dark-theme, $dark-primary-text, $light-primary-text);
|
||||
}
|
||||
|
||||
.mat-simple-snackbar-action {
|
||||
|
||||
Reference in New Issue
Block a user