/
mdp-sass.scss
103 lines (94 loc) · 3.97 KB
/
mdp-sass.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
@use 'sass:math';
// Helper function to return @angular/material's color variables.
@function get-mat-text-color($bg-color, $light-text) {
@if ($light-text == true) {
@return rgba(white, 0.87);
}
@if (lightness($bg-color) >= 51) {
@return rgba(black, 0.87); // Light bg; return default text
} @else {
@return rgba(white, 0.87); // If bg is to dark, just return white
}
}
// Given two hex values, will return the product (a * b) as RGB.
@function multiply($hex-1, $hex-2) {
$new-red: multiply-rgb-value(red($hex-1), red($hex-2));
$new-green: multiply-rgb-value(green($hex-1), green($hex-2));
$new-blue: multiply-rgb-value(blue($hex-1), blue($hex-2));
$rgb: rgb($new-red, $new-green, $new-blue);
@return $rgb;
}
// Helper function to multiply two values and return the floored product.
@function multiply-rgb-value($rgb-val-1, $rgb-val-2) {
$multiplied: $rgb-val-1 * $rgb-val-2;
$floored: floor(math.div($multiplied, 255));
@return $floored;
}
// Given a Base Accent Color, saturate amount, and lighten amount, will return an accented base color. (Confusing, I know.)
@function get-accented-base-color($base-a-color, $saturate-amount, $lighten-amount) {
$saturated: saturate($base-a-color, $saturate-amount);
$lightened: lighten($saturated, $lighten-amount);
@return $lightened;
}
// Given a base hex color, will return a sass-map of color variations that coincide with @angular/material's mat-color signature;
@function get-mat-color-variations($base-color) {
$base: $base-color;
$base-light: #fff;
$base-dark: multiply($base, $base);
$base-triad: adjust_hue($base, 270);
$base-a: mix($base-dark, $base-triad, 85%);
$calc-map: (
50: mix($base-light, $base, 88%),
100: mix($base-light, $base, 70%),
200: mix($base-light, $base, 50%),
300: mix($base-light, $base, 30%),
400: mix($base-light, $base, 15%),
500: $base,
600: mix($base-dark, $base, 13%),
700: mix($base-dark, $base, 30%),
800: mix($base-dark, $base, 46%),
900: mix($base-dark, $base, 75%),
A100: get-accented-base-color($base-a, 80%, 48%),
A200: get-accented-base-color($base-a, 80%, 36%),
A400: get-accented-base-color($base-a, 100%, 31%),
A700: get-accented-base-color($base-a, 100%, 28%),
);
@return $calc-map;
}
// Given a base hex value, will return a map formatted to match @angular/material's mat-color signature with contrast values.
@function get-mat-palette($base-color, $light-text: false) {
$calc-map: get-mat-color-variations($base-color);
$tal-mat-color: (
50: map-get($calc-map, 50),
100: map-get($calc-map, 100),
200: map-get($calc-map, 200),
300: map-get($calc-map, 300),
400: map-get($calc-map, 400),
500: map-get($calc-map, 500),
600: map-get($calc-map, 600),
700: map-get($calc-map, 700),
800: map-get($calc-map, 800),
900: map-get($calc-map, 900),
A100: map-get($calc-map, A100),
A200: map-get($calc-map, A200),
A400: map-get($calc-map, A400),
A700: map-get($calc-map, A700),
contrast: (
50: get-mat-text-color(map-get($calc-map, 50), $light-text),
100: get-mat-text-color(map-get($calc-map, 100), $light-text),
200: get-mat-text-color(map-get($calc-map, 200), $light-text),
300: get-mat-text-color(map-get($calc-map, 300), $light-text),
400: get-mat-text-color(map-get($calc-map, 400), $light-text),
500: get-mat-text-color(map-get($calc-map, 500), $light-text),
600: get-mat-text-color(map-get($calc-map, 600), $light-text),
700: get-mat-text-color(map-get($calc-map, 700), $light-text),
800: get-mat-text-color(map-get($calc-map, 800), $light-text),
900: get-mat-text-color(map-get($calc-map, 900), $light-text),
A100: get-mat-text-color(map-get($calc-map, A100), $light-text),
A200: get-mat-text-color(map-get($calc-map, A200), $light-text),
A400: get-mat-text-color(map-get($calc-map, A400), $light-text),
A700: get-mat-text-color(map-get($calc-map, A700), $light-text),
)
);
@return $tal-mat-color;
}