/
_variables.scss
94 lines (85 loc) · 3.04 KB
/
_variables.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
////
/// @group form
////
@use 'sass:color';
@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/helpers';
@import '~@react-md/theme/dist/functions';
@import '~@react-md/typography/dist/variables';
@import './label/variables';
@import './select/variables';
@import './text-field/variables';
@import './toggle/variables';
/// The color to use when a form contains an error.
///
/// @require $rmd-theme-error
/// @type Color
$rmd-form-error-color: $rmd-theme-error !default;
/// This is the color that is used when a text field/textarea is errored
/// and the user hovers over it.
///
/// @require rmd-theme-get-swatch
/// @type Color
$rmd-form-error-hover-color: rmd-theme-get-swatch(
$rmd-form-error-color,
700,
true,
color.adjust($rmd-form-error-color, $lightness: -10%),
rmd-form-error-color
) !default;
/// The color to use when a form element (text, checkbox, radio, etc) is
/// currently active by the user(normally focus).
///
/// @require rmd-theme-var
/// @type Color
$rmd-form-active-color: rmd-theme-var(secondary) !default;
/// The color to use when a form element is disabled.
///
/// @require rmd-theme-var
/// @type Color
$rmd-form-disabled-color: rmd-theme-var(text-disabled-on-background) !default;
/// The default color to use for placeholder text within text fields.
///
/// @require rmd-theme-var
/// @type Color
$rmd-form-placeholder-color: rmd-theme-var(
text-secondary-on-background
) !default;
/// A Map of all the "themeable" parts of the form package. Every key in this map will
/// be used to create a css variable to dynamically update the values of the icon as
/// needed.
/// @type Map
$rmd-form-theme-values: (
error-color: $rmd-form-error-color,
error-hover-color: $rmd-form-error-hover-color,
active-color: $rmd-form-active-color,
disabled-color: $rmd-form-disabled-color,
toggle-inset: $rmd-toggle-inset,
toggle-dense-inset: $rmd-toggle-dense-inset,
indeterminate-height: $rmd-checkbox-indeterminate-height,
indeterminate-dense-height: $rmd-checkbox-indeterminate-dense-height,
track-background-color: $rmd-switch-track-background-color,
floating-top: $rmd-label-floating-top,
floating-dense-top: $rmd-label-floating-dense-top,
addon-top: auto,
addon-margin-top: 0px,
label-left-offset: 0px,
label-top-offset: 0px,
label-active-padding: 0px,
label-active-background-color: transparent,
listbox-background-color: $rmd-listbox-background-color,
text-padding-left: 0px,
text-padding-right: 0px,
text-padding-top: 0px,
text-offset: 0px,
text-active-color: $rmd-text-field-active-color,
text-border-color: $rmd-text-field-border-color,
text-border-hover-color: $rmd-text-field-border-hover-color,
text-filled-color: $rmd-text-field-filled-background-color,
text-height: $rmd-text-field-height,
text-label-height: $rmd-text-field-label-height,
text-label-dense-height: $rmd-text-field-label-dense-height,
text-placeholder-height: $rmd-text-field-height,
text-placeholder-dense-height: $rmd-text-field-dense-height,
textarea-padding: $rmd-textarea-vertical-padding,
) !default;