/
_icon-button-theme.scss
124 lines (106 loc) · 4.16 KB
/
_icon-button-theme.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
@use 'sass:map';
@use 'sass:math';
@use '@material/density/functions' as mdc-density-functions;
@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
@use '@material/theme/theme-color' as mdc-theme-color;
@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
@use './button-theme-private';
@use '../core/theming/theming';
$_icon-size: 24px;
@mixin _ripple-color($color) {
--mat-mdc-button-persistent-ripple-color: #{$color};
--mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
}
@function _variable-safe-contrast-tone($value, $is-dark) {
@if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
@return mdc-theme-color.contrast-tone($value);
}
@return if($is-dark, 'light', 'dark');
}
@mixin color($config-or-theme) {
$config: theming.get-color-config($config-or-theme);
$color-tokens: tokens-mdc-icon-button.get-color-tokens($config);
$background-palette: map.get($config, background);
$surface: theming.get-color-from-palette($background-palette, card);
$is-dark: map.get($config, is-dark);
$on-surface: if(_variable-safe-contrast-tone($surface, $is-dark) == 'dark', #000, #fff);
.mat-mdc-icon-button {
@include button-theme-private.ripple-theme-styles($config, false);
@include mdc-icon-button-theme.theme($color-tokens);
@include _ripple-color($on-surface);
&.mat-primary {
$color: theming.get-color-from-palette(map.get($config, primary));
@include mdc-icon-button-theme.theme((icon-color: $color));
@include _ripple-color($color);
}
&.mat-accent {
$color: theming.get-color-from-palette(map.get($config, accent));
@include mdc-icon-button-theme.theme((icon-color: $color));
@include _ripple-color($color);
}
&.mat-warn {
$color: theming.get-color-from-palette(map.get($config, warn));
@include mdc-icon-button-theme.theme((icon-color: $color));
@include _ripple-color($color);
}
@include button-theme-private.apply-disabled-style() {
$disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
@include mdc-icon-button-theme.theme((
icon-color: $disabled-color,
disabled-icon-color: $disabled-color,
));
}
}
}
@mixin typography($config-or-theme) {
}
@mixin density($config-or-theme) {
$density-scale: theming.get-density-config($config-or-theme);
// Manually apply the expected density theming, and include the padding
// as it was applied before
$calculated-size: mdc-density-functions.prop-value(
$density-config: (
size: (
default: 48px,
maximum: 48px,
minimum: 28px,
),
),
$density-scale: $density-scale,
$property-name: size,
);
// Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
.mat-mdc-icon-button.mat-mdc-button-base {
// Match the styles that used to be present. This is necessary for backwards
// compat to match the previous implementations selector count (two classes).
@include mdc-icon-button-theme.theme((
state-layer-size: $calculated-size,
));
// TODO: Switch calculated-size to "var(--mdc-icon-button-state-layer-size)"
// Currently fails validation because the variable is "undefined"
// in the sass stack.
// TODO: Switch icon-size to "var(--mdc-icon-button-icon-size)". Currently
// fails validation because the variable is "undefined" in the sass stack.
width: var(--mdc-icon-button-state-layer-size);
height: var(--mdc-icon-button-state-layer-size);
padding: math.div($calculated-size - $_icon-size, 2);
@include button-theme-private.touch-target-density($density-scale);
}
}
@mixin theme($theme-or-color-config) {
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
$color: theming.get-color-config($theme);
$density: theming.get-density-config($theme);
$typography: theming.get-typography-config($theme);
@if $color != null {
@include color($color);
}
@if $density != null {
@include density($density);
}
@if $typography != null {
@include typography($typography);
}
}
}