forked from angular/components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_m3-filled-text-field.scss
68 lines (64 loc) · 3.62 KB
/
_m3-filled-text-field.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
@use 'sass:map';
@use '../core/tokens/m3-utils';
@use '../core/style/sass-utils';
// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mat, form-field-filled);
/// Generates the tokens for MDC filled-text-field
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @param {Map} $token-slots Possible token slots
/// @return {Map} A set of tokens for the MDC filled-text-field
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
$tokens: (
active-indicator-color: map.get($systems, md-sys-color, on-surface-variant),
active-indicator-height: if($exclude-hardcoded, null, 1px),
caret-color: map.get($systems, md-sys-color, primary),
container-color: map.get($systems, md-sys-color, surface-variant),
container-shape: map.get($systems, md-sys-shape, corner-extra-small),
disabled-active-indicator-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
disabled-container-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, on-surface), $alpha: 0.04),
disabled-input-text-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
disabled-label-text-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
error-active-indicator-color: map.get($systems, md-sys-color, error),
error-focus-active-indicator-color: map.get($systems, md-sys-color, error),
error-focus-label-text-color: map.get($systems, md-sys-color, error),
error-hover-active-indicator-color: map.get($systems, md-sys-color, on-error-container),
error-hover-label-text-color: map.get($systems, md-sys-color, on-error-container),
error-label-text-color: map.get($systems, md-sys-color, error),
focus-active-indicator-color: map.get($systems, md-sys-color, primary),
focus-active-indicator-height: if($exclude-hardcoded, null, 2px),
focus-label-text-color: map.get($systems, md-sys-color, primary),
hover-active-indicator-color: map.get($systems, md-sys-color, on-surface),
hover-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
input-text-color: map.get($systems, md-sys-color, on-surface),
input-text-placeholder-color: map.get($systems, md-sys-color, on-surface-variant),
label-text-color: map.get($systems, md-sys-color, on-surface-variant),
label-text-font: map.get($systems, md-sys-typescale, body-large-font),
label-text-size: map.get($systems, md-sys-typescale, body-large-size),
label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking),
label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
);
$variant-tokens: (
primary: (), // Default, no overrides needed
secondary: (
caret-color: map.get($systems, md-sys-color, secondary),
focus-active-indicator-color: map.get($systems, md-sys-color, secondary),
focus-label-text-color: map.get($systems, md-sys-color, secondary),
),
tertiary: (
caret-color: map.get($systems, md-sys-color, tertiary),
focus-active-indicator-color: map.get($systems, md-sys-color, tertiary),
focus-label-text-color: map.get($systems, md-sys-color, tertiary),
),
error: (
caret-color: map.get($systems, md-sys-color, error),
focus-active-indicator-color: map.get($systems, md-sys-color, error),
focus-label-text-color: map.get($systems, md-sys-color, error),
),
);
@return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
}