@materializecss/materialize 2.0.4 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/css/materialize.css +644 -558
  2. package/dist/css/materialize.min.css +2 -2
  3. package/dist/js/materialize.js +18 -8
  4. package/dist/js/materialize.min.js +2 -2
  5. package/dist/js/materialize.min.js.map +1 -1
  6. package/dist/src/bounding.d.ts.map +1 -1
  7. package/dist/src/edges.d.ts.map +1 -1
  8. package/dist/src/modal.d.ts.map +1 -1
  9. package/dist/src/select.d.ts.map +1 -1
  10. package/dist/src/toasts.d.ts.map +1 -1
  11. package/dist/src/utils.d.ts.map +1 -1
  12. package/dist/src/waves.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/sass/components/_badges.scss +17 -12
  15. package/sass/components/_buttons.scss +137 -126
  16. package/sass/components/_cards.scss +12 -14
  17. package/sass/components/_carousel.scss +8 -6
  18. package/sass/components/_chips.scss +10 -11
  19. package/sass/components/_collapsible.scss +6 -8
  20. package/sass/components/_collection.scss +15 -15
  21. package/sass/components/_datepicker.scss +15 -15
  22. package/sass/components/_dropdown.scss +5 -17
  23. package/sass/components/_global.scss +65 -137
  24. package/sass/components/_grid.scss +12 -4
  25. package/sass/components/_materialbox.scss +1 -1
  26. package/sass/components/_modal.scss +14 -9
  27. package/sass/components/_navbar.scss +31 -25
  28. package/sass/components/_preloader.scss +5 -6
  29. package/sass/components/_sidenav.scss +42 -26
  30. package/sass/components/_slider.scss +5 -5
  31. package/sass/components/_table_of_contents.scss +7 -8
  32. package/sass/components/_tabs.scss +16 -17
  33. package/sass/components/_tapTarget.scss +3 -3
  34. package/sass/components/_timepicker.scss +12 -12
  35. package/sass/components/_toast.scss +17 -10
  36. package/sass/components/_tooltip.scss +13 -6
  37. package/sass/components/_variables.scss +13 -377
  38. package/sass/components/colors.module.scss +74 -180
  39. package/sass/components/forms/_checkboxes.scss +22 -22
  40. package/sass/components/forms/_file-input.scss +2 -5
  41. package/sass/components/forms/_forms.scss +5 -3
  42. package/sass/components/forms/_input-fields.scss +40 -41
  43. package/sass/components/forms/_radio-buttons.scss +11 -14
  44. package/sass/components/forms/_range.scss +16 -24
  45. package/sass/components/forms/_select.scss +34 -28
  46. package/sass/components/forms/_switches.scss +9 -12
  47. package/sass/components/theme.module.scss +140 -0
  48. package/sass/materialize.scss +6 -3
  49. package/sass/components/_theme_variables.scss +0 -78
  50. package/sass/components/theme.dark.module.scss +0 -32
  51. package/sass/components/theme.light.module.scss +0 -32
package/sass/components/forms/_select.scss CHANGED
@@ -3,17 +3,17 @@
3
3
 
4
4
  select.browser-default {
5
5
  opacity: 1;
6
- color: $select-input-color;
6
+ color: var(--md-sys-color-on-background);
7
7
  }
8
8
 
9
9
  select {
10
10
  opacity: 0;
11
- background-color: $select-background;
11
+ background-color: var(--md-sys-color-surface);
12
12
  width: 100%;
13
- padding: $select-padding;
14
- border: $select-border;
15
- border-radius: $select-radius;
16
- height: $input-height;
13
+ padding: 5px;
14
+ border: 1px solid var(--md-sys-color-outline-variant);
15
+ border-radius: 2px;
16
+ height: 3rem;
17
17
  }
18
18
 
19
19
  // .select-label {
@@ -64,24 +64,24 @@ select {
64
64
  /*
65
65
  input.select-dropdown {
66
66
  &:focus {
67
- border-bottom: 1px solid $input-focus-color;
67
+ border-bottom: 1px solid var(--md-sys-color-primary);
68
68
  }
69
69
  position: relative;
70
70
  cursor: pointer;
71
71
  background-color: transparent;
72
72
  border: none;
73
- border-bottom: $input-border;
73
+ border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
74
74
  outline: none;
75
- height: $input-height;
76
- line-height: $input-height;
75
+ height: 3rem;
76
+ line-height: 3rem;
77
77
  width: 100%;
78
- font-size: $input-font-size;
79
- margin: $input-margin;
78
+ font-size: 16px;
79
+ margin: 0 0 8px 0;
80
80
  padding: 0;
81
81
  display: block;
82
82
  user-select:none;
83
83
  z-index: 1;
84
- color: $select-input-color;
84
+ color: var(--md-sys-color-on-background);
85
85
  }
86
86
  */
87
87
 
@@ -92,14 +92,14 @@ select {
92
92
  bottom: 0;
93
93
  margin: auto 0;
94
94
  z-index: 0;
95
- fill: $select-input-color;
95
+ fill: var(--md-sys-color-on-background);
96
96
  }
97
97
 
98
98
  /*
99
99
  & + label {
100
100
  position: absolute;
101
101
  top: -26px;
102
- font-size: $label-font-size;
102
+ font-size: .8rem;
103
103
  }
104
104
  */
105
105
 
@@ -117,52 +117,54 @@ select {
117
117
 
118
118
  // Disabled styles
119
119
  select:disabled {
120
- color: $input-disabled-color;
120
+ color: var(--md-sys-color-on-surface);
121
121
  }
122
122
 
123
123
  .select-wrapper.disabled {
124
124
  + label {
125
- color: $input-disabled-color;
125
+ color: var(--md-sys-color-on-surface);
126
126
  }
127
127
  .caret {
128
- fill: $input-disabled-color;
128
+ fill: var(--md-sys-color-on-surface);
129
129
  }
130
130
  }
131
131
 
132
132
  .select-wrapper input.select-dropdown:disabled {
133
- color: $input-disabled-color;
133
+ color: var(--md-sys-color-on-surface);
134
134
  cursor: default;
135
135
  user-select: none;
136
136
  }
137
137
 
138
138
  .select-wrapper i {
139
- color: $select-disabled-color;
139
+ color: var(--md-sys-color-on-surface);
140
140
  }
141
141
 
142
142
  .select-dropdown li.disabled,
143
143
  .select-dropdown li.disabled > span,
144
144
  .select-dropdown li.optgroup {
145
- color: $select-disabled-color;
146
- background-color: transparent;
145
+ color: var(--md-sys-color-on-surface);
146
+ //background-color: transparent;
147
147
  }
148
148
 
149
+ /*
149
150
  body.keyboard-focused {
150
151
  .select-dropdown.dropdown-content li:focus {
151
- background-color: $select-option-focus;
152
+ //background-color: $select-option-focus;
152
153
  }
153
154
  }
154
155
 
155
156
  .select-dropdown.dropdown-content {
156
157
  li {
157
158
  &:hover:not(.disabled) {
158
- background-color: $select-option-hover;
159
+ //background-color: $select-option-hover;
159
160
  }
160
161
 
161
162
  &.selected:not(.disabled) {
162
- background-color: $select-option-selected;
163
+ //background-color: $select-option-selected;
163
164
  }
164
165
  }
165
166
  }
167
+ */
166
168
 
167
169
  /*
168
170
  // Prefix Icons
@@ -193,17 +195,21 @@ body.keyboard-focused {
193
195
 
194
196
  // Optgroup styles
195
197
  .select-dropdown li.optgroup {
196
- border-top: 1px solid $dropdown-hover-bg-color;
198
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
197
199
 
198
200
  &.selected > span {
199
- color: $font-color-main;
201
+ color: var(--md-sys-color-on-background);
200
202
  }
201
203
 
202
204
  & > span {
203
- color: $font-color-medium;
205
+ color: var(--md-sys-color-on-surface-variant);
204
206
  }
205
207
 
206
208
  & ~ li.optgroup-option {
207
209
  padding-left: 1rem;
208
210
  }
209
211
  }
212
+
213
+ .select-dropdown .selected {
214
+ color: red;
215
+ }
package/sass/components/forms/_switches.scss CHANGED
@@ -1,6 +1,3 @@
1
- /* Switch
2
- ========================================================================== */
3
-
4
1
  .switch {
5
2
  --track-height: 32px;
6
3
  --track-width: 52px;
@@ -30,8 +27,8 @@
30
27
  // CHECKED
31
28
  // Track
32
29
  &:checked + .lever{
33
- background-color: var(--primary-color);
34
- border-color: var(--primary-color);
30
+ background-color: var(--md-sys-color-primary);
31
+ border-color: var(--md-sys-color-primary);
35
32
  }
36
33
  // Dot
37
34
  &:checked + .lever {
@@ -57,10 +54,10 @@
57
54
  border-width: 2px;
58
55
  border-color: var(--md-sys-color-outline);
59
56
 
60
- //background-color: $switch-track-unchecked-bg;
61
- @extend .surface-variant;
57
+ //@extend .surface-variant;
58
+ background-color: var(--md-sys-color-surface-variant);
62
59
 
63
- border-radius: $switch-radius;
60
+ border-radius: 15px;
64
61
  margin-right: 10px;
65
62
  transition: background 0.3s ease;
66
63
  vertical-align: middle;
@@ -99,22 +96,22 @@ input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
99
96
  }
100
97
 
101
98
  input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
102
- background-color: $switch-reaction-checked-hover-color;
99
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
103
100
  }
104
101
 
105
102
  // Switch active style
106
103
  input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
107
104
  input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
108
- background-color: $switch-reaction-checked-focus-color;
105
+ background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
109
106
  }
110
107
 
111
108
  input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
112
- background-color: $switch-reaction-unchecked-hover-color;
109
+ background-color: rgba(0, 0, 0, 0.04);
113
110
  }
114
111
 
115
112
  input[type=checkbox]:not(:disabled) ~ .lever:active:before,
116
113
  input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
117
- background-color: $switch-reaction-unchecked-focus-color;
114
+ background-color: rgba(0, 0, 0, 0.12);
118
115
  }
119
116
 
120
117
  // Disabled Styles
package/sass/components/theme.module.scss ADDED
@@ -0,0 +1,140 @@
1
+ /* System Defaults */
2
+ :root, :host {
3
+ color-scheme: light;
4
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
5
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
6
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
7
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
8
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
9
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
10
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
11
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
12
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
13
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
14
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
15
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
16
+ --md-sys-color-error: var(--md-sys-color-error-light);
17
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
18
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
19
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
20
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
21
+ --md-sys-color-background: var(--md-sys-color-background-light);
22
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
23
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
24
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
25
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
26
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
27
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
28
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
29
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
30
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
31
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
32
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
33
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
34
+ }
35
+
36
+ @media (prefers-color-scheme: dark) {
37
+ :root, :host {
38
+ color-scheme: dark;
39
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
40
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
41
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
42
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
43
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
44
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
45
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
46
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
47
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
48
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
49
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
50
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
51
+ --md-sys-color-error: var(--md-sys-color-error-dark);
52
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
53
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
54
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
55
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
56
+ --md-sys-color-background: var(--md-sys-color-background-dark);
57
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
58
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
59
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
60
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
61
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
62
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
63
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
64
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
65
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
66
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
67
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
68
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
69
+ }
70
+ }
71
+
72
+ /* ===================================================================== Themes */
73
+
74
+ :root[theme='light'] {
75
+ color-scheme: light;
76
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
77
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
78
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
79
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
80
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
81
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
82
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
83
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
84
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
85
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
86
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
87
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
88
+ --md-sys-color-error: var(--md-sys-color-error-light);
89
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
90
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
91
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
92
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
93
+ --md-sys-color-background: var(--md-sys-color-background-light);
94
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
95
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
96
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
97
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
98
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
99
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
100
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
101
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
102
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
103
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
104
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
105
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
106
+ }
107
+
108
+ :root[theme='dark'] {
109
+ color-scheme: dark;
110
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
111
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
112
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
113
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
114
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
115
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
116
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
117
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
118
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
119
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
120
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
121
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
122
+ --md-sys-color-error: var(--md-sys-color-error-dark);
123
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
124
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
125
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
126
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
127
+ --md-sys-color-background: var(--md-sys-color-background-dark);
128
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
129
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
130
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
131
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
132
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
133
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
134
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
135
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
136
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
137
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
138
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
139
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
140
+ }
package/sass/materialize.scss CHANGED
@@ -1,18 +1,20 @@
1
1
  @charset "UTF-8";
2
+
2
3
  @import "components/tokens.module";
4
+ @import "components/theme.module";
5
+ //@import "components/_theme_variables";
3
6
  @import "components/colors.module";
4
7
  @import "components/typography.module";
5
- @import "components/theme.light.module";
6
- @import "components/theme.dark.module";
7
- @import "components/_theme_variables";
8
8
 
9
9
  // Color
10
10
  @import "components/color-variables";
11
11
  @import "components/color-classes";
12
12
  // Variables;
13
13
  @import "components/variables";
14
+
14
15
  // Reset
15
16
  @import "components/normalize";
17
+
16
18
  // components
17
19
  @import "components/global";
18
20
  @import "components/collection";
@@ -28,6 +30,7 @@
28
30
  @import "components/tooltip";
29
31
  @import "components/buttons";
30
32
  @import "components/dropdown";
33
+
31
34
  @import "components/modal";
32
35
  @import "components/collapsible";
33
36
  @import "components/chips";
package/sass/components/_theme_variables.scss DELETED
@@ -1,78 +0,0 @@
1
- :root, :host {
2
- --surface-color: var(--md-sys-color-surface);
3
- --background-color: var(--md-sys-color-background);
4
-
5
- --font-color-main: var(--md-sys-color-on-background);
6
- --font-color-medium: var(--md-sys-color-on-surface-variant);
7
- --font-color-disabled: var(--md-sys-color-on-surface);
8
-
9
- --font-on-primary-color-main: var(--md-sys-color-on-primary);
10
- --font-on-primary-color-dark-main: var(--md-sys-color-on-primary-dark);
11
- --font-on-primary-color-dark-medium: var(--md-sys-color-on-surface-variant-dark);
12
- --font-on-primary-color-medium: var(--md-sys-color-on-surface-variant);
13
- --font-on-primary-color-disabled: rgba(255, 255, 255, 0.38);
14
- --font-on-secondary-color-main: var(--md-sys-color-on-secondary);
15
-
16
- --hover-color: rgba(0, 0, 0, 0.04);
17
- --focus-color: rgba(0, 0, 0, 0.12);
18
- --focus-color-solid: #E0E0E0;
19
-
20
- --background-color-disabled: rgba(0, 0, 0, 0.12);
21
- --background-color-level-4dp: rgba(0, 0, 0, 0.09);
22
- --background-color-level-16dp-solid: var(--surface-color);
23
- --background-color-slight-emphasis: rgba(0, 0, 0, 0.08);
24
- --background-color-card: var(--surface-color);
25
-
26
- --tooltip-background-color: #313033;
27
- --tooltip-font-color: rgba(255, 255, 255, 0.77);
28
-
29
- --separator-color: #DDDDDD; /* borders between components */
30
-
31
- --error-color: #F44336;
32
-
33
- --slider-track-color: var(--md-sys-color-shadow-light);
34
- --switch-thumb-off-color: var(--md-ref-palette-primary100);
35
-
36
- --carousel-indicator-color: rgba(255, 255, 255, 0.45);
37
- --carousel-indicator-active-color: var(--md-ref-palette-primary100);
38
-
39
- --primary-color: var(--md-sys-color-primary);
40
- --primary-color-dark: var(--md-sys-color-primary-dark);
41
- --primary-color-raised-hover-solid: var(--md-ref-palette-primary70);
42
- --primary-color-raised-focus-solid: var(--md-ref-palette-primary80);
43
- --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
44
- --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
45
- --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
46
- --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);
47
-
48
- --secondary-color: var(--md-sys-color-secondary);
49
- --secondary-color-hover-solid: var(--md-ref-palette-secondary70);
50
- --secondary-color-focus-solid: var(--md-ref-palette-secondary80);
51
- --secondary-container-color: var(--md-sys-color-secondary-container);
52
- --font-on-secondary-container-color: var(--md-sys-color-on-secondary-container);
53
-
54
- --md_sys_color_on-surface: 28, 27, 31;
55
- }
56
-
57
- //important: when all variables are assigned this could be removed as will be no difference
58
- :root[theme='dark'] {
59
- --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);
60
-
61
- --hover-color: rgba(255, 255, 255, 0.04);
62
- --focus-color: rgba(255, 255, 255, 0.12);
63
- --focus-color-solid: #424242;
64
-
65
- --background-color-disabled: rgba(255, 255, 255, 0.12);
66
- --background-color-level-4dp: rgba(255, 255, 255, 0.09);
67
- --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);
68
-
69
- --separator-color: #424242; /* borders between components */
70
-
71
- --error-color: #CF6679;
72
-
73
- --switch-thumb-off-color: #bababa;
74
-
75
- --md_sys_color_on-surface: 230, 225, 229;
76
- }
77
-
78
-
package/sass/components/theme.dark.module.scss DELETED
@@ -1,32 +0,0 @@
1
- :root[theme='dark'] {
2
- --md-sys-color-primary: var(--md-sys-color-primary-dark);
3
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
4
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
5
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
6
- --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
7
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
8
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
9
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
10
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
11
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
12
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
13
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
14
- --md-sys-color-error: var(--md-sys-color-error-dark);
15
- --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
16
- --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
17
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
18
- --md-sys-color-outline: var(--md-sys-color-outline-dark);
19
- --md-sys-color-background: var(--md-sys-color-background-dark);
20
- --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
21
- --md-sys-color-surface: var(--md-sys-color-surface-dark);
22
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
23
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
24
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
25
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
26
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
27
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
28
- --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
29
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
30
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
31
- --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
32
- }
package/sass/components/theme.light.module.scss DELETED
@@ -1,32 +0,0 @@
1
- :root {
2
- --md-sys-color-primary: var(--md-sys-color-primary-light);
3
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
4
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
5
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
6
- --md-sys-color-secondary: var(--md-sys-color-secondary-light);
7
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
8
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
9
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
10
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
11
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
12
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
13
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
14
- --md-sys-color-error: var(--md-sys-color-error-light);
15
- --md-sys-color-on-error: var(--md-sys-color-on-error-light);
16
- --md-sys-color-error-container: var(--md-sys-color-error-container-light);
17
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
18
- --md-sys-color-outline: var(--md-sys-color-outline-light);
19
- --md-sys-color-background: var(--md-sys-color-background-light);
20
- --md-sys-color-on-background: var(--md-sys-color-on-background-light);
21
- --md-sys-color-surface: var(--md-sys-color-surface-light);
22
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
23
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
24
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
25
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
26
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
27
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
28
- --md-sys-color-shadow: var(--md-sys-color-shadow-light);
29
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
30
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
31
- --md-sys-color-scrim: var(--md-sys-color-scrim-light);
32
- }