@vandeurenglenn/lite-elements 0.3.50 → 0.3.52

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 (82) hide show
  1. package/exports/banner.js +36 -36
  2. package/exports/bundle/button.js +6 -1
  3. package/exports/bundle/dialog.js +10 -8
  4. package/exports/bundle/index.html +590 -590
  5. package/exports/bundle/themes/default/colors.module.css +180 -180
  6. package/exports/bundle/themes/default/missing/motion.css +3 -3
  7. package/exports/bundle/themes/default/missing/shape.css +12 -12
  8. package/exports/bundle/themes/default/missing/theme.dark.css +4 -4
  9. package/exports/bundle/themes/default/missing/theme.light.css +4 -4
  10. package/exports/bundle/themes/default/missing/tokens.css +8 -8
  11. package/exports/bundle/themes/default/theme.css +10 -10
  12. package/exports/bundle/themes/default/theme.dark.css +33 -33
  13. package/exports/bundle/themes/default/theme.light.css +33 -33
  14. package/exports/bundle/themes/default/tokens.css +256 -256
  15. package/exports/bundle/themes/default/typography.module.css +150 -150
  16. package/exports/bundle/upload-image.js +49 -45
  17. package/exports/button.js +148 -143
  18. package/exports/card.js +139 -139
  19. package/exports/code.js +34 -34
  20. package/exports/demo-icons.js +15 -15
  21. package/exports/demo-shell.js +539 -539
  22. package/exports/demo.js +456 -456
  23. package/exports/dialog.js +150 -148
  24. package/exports/divider.js +21 -21
  25. package/exports/drawer-button.js +13 -13
  26. package/exports/drawer-item.js +38 -38
  27. package/exports/drawer-layout.js +95 -95
  28. package/exports/drawer.js +7 -7
  29. package/exports/dropdown-menu.js +58 -58
  30. package/exports/dropdown.js +25 -25
  31. package/exports/elevation.js +50 -50
  32. package/exports/fab.js +145 -145
  33. package/exports/icon-button.js +12 -12
  34. package/exports/icon-set.js +4 -4
  35. package/exports/icon.js +15 -15
  36. package/exports/input.js +5 -5
  37. package/exports/list-item.js +42 -42
  38. package/exports/menu.js +12 -12
  39. package/exports/minute-field.js +4 -4
  40. package/exports/mixins/scroll-mixin.d.ts +1 -1
  41. package/exports/notification.js +34 -34
  42. package/exports/notifications.js +65 -65
  43. package/exports/pages.js +42 -42
  44. package/exports/pane.js +18 -18
  45. package/exports/rail.js +57 -57
  46. package/exports/root.js +7 -7
  47. package/exports/section/section.d.ts +1 -1
  48. package/exports/section.js +10 -10
  49. package/exports/section2.js +24 -24
  50. package/exports/selector.js +30 -30
  51. package/exports/summary-mirror.js +19 -19
  52. package/exports/summary.js +24 -24
  53. package/exports/supporting-pane.js +46 -46
  54. package/exports/tab.js +21 -21
  55. package/exports/tabs.js +50 -50
  56. package/exports/text-field.js +9 -9
  57. package/exports/theme.js +8 -8
  58. package/exports/themes/default/colors.module.css +180 -180
  59. package/exports/themes/default/missing/motion.css +3 -3
  60. package/exports/themes/default/missing/shape.css +12 -12
  61. package/exports/themes/default/missing/theme.dark.css +4 -4
  62. package/exports/themes/default/missing/theme.light.css +4 -4
  63. package/exports/themes/default/missing/tokens.css +8 -8
  64. package/exports/themes/default/theme.css +10 -10
  65. package/exports/themes/default/theme.dark.css +33 -33
  66. package/exports/themes/default/theme.light.css +33 -33
  67. package/exports/themes/default/tokens.css +256 -256
  68. package/exports/themes/default/typography.module.css +150 -150
  69. package/exports/time-picker.js +20 -20
  70. package/exports/toggle-button.js +3 -3
  71. package/exports/toggle.js +4 -4
  72. package/exports/top-app-bar.js +20 -20
  73. package/exports/typography.js +155 -155
  74. package/exports/upload-file.js +8 -8
  75. package/exports/upload-image.js +200 -200
  76. package/package.json +20 -28
  77. package/exports/bundle/simple-hash-router.js +0 -1
  78. package/exports/bundle/types2.js +0 -1
  79. package/exports/router/simple-hash-router.d.ts +0 -34
  80. package/exports/router/types.d.ts +0 -45
  81. package/exports/simple-hash-router.js +0 -111
  82. package/exports/types2.js +0 -1
package/exports/bundle/themes/default/tokens.css CHANGED
@@ -1,256 +1,256 @@
1
- :root {
2
- --md-source: #6750A4;
3
- /* primary */
4
- --md-ref-palette-primary0: #000000;
5
- --md-ref-palette-primary10: #21005D;
6
- --md-ref-palette-primary20: #381E72;
7
- --md-ref-palette-primary30: #4F378B;
8
- --md-ref-palette-primary40: #6750A4;
9
- --md-ref-palette-primary50: #7F67BE;
10
- --md-ref-palette-primary60: #9A82DB;
11
- --md-ref-palette-primary70: #B69DF8;
12
- --md-ref-palette-primary80: #D0BCFF;
13
- --md-ref-palette-primary90: #EADDFF;
14
- --md-ref-palette-primary95: #F6EDFF;
15
- --md-ref-palette-primary99: #FFFBFE;
16
- --md-ref-palette-primary100: #FFFFFF;
17
- /* secondary */
18
- --md-ref-palette-secondary0: #000000;
19
- --md-ref-palette-secondary10: #1D192B;
20
- --md-ref-palette-secondary20: #332D41;
21
- --md-ref-palette-secondary30: #4A4458;
22
- --md-ref-palette-secondary40: #625B71;
23
- --md-ref-palette-secondary50: #7A7289;
24
- --md-ref-palette-secondary60: #958DA5;
25
- --md-ref-palette-secondary70: #B0A7C0;
26
- --md-ref-palette-secondary80: #CCC2DC;
27
- --md-ref-palette-secondary90: #E8DEF8;
28
- --md-ref-palette-secondary95: #F6EDFF;
29
- --md-ref-palette-secondary99: #FFFBFE;
30
- --md-ref-palette-secondary100: #FFFFFF;
31
- /* tertiary */
32
- --md-ref-palette-tertiary0: #000000;
33
- --md-ref-palette-tertiary10: #31111D;
34
- --md-ref-palette-tertiary20: #492532;
35
- --md-ref-palette-tertiary30: #633B48;
36
- --md-ref-palette-tertiary40: #7D5260;
37
- --md-ref-palette-tertiary50: #986977;
38
- --md-ref-palette-tertiary60: #B58392;
39
- --md-ref-palette-tertiary70: #D29DAC;
40
- --md-ref-palette-tertiary80: #EFB8C8;
41
- --md-ref-palette-tertiary90: #FFD8E4;
42
- --md-ref-palette-tertiary95: #FFECF1;
43
- --md-ref-palette-tertiary99: #FFFBFA;
44
- --md-ref-palette-tertiary100: #FFFFFF;
45
- /* error */
46
- --md-ref-palette-error0: #000000;
47
- --md-ref-palette-error10: #410E0B;
48
- --md-ref-palette-error20: #601410;
49
- --md-ref-palette-error30: #8C1D18;
50
- --md-ref-palette-error40: #B3261E;
51
- --md-ref-palette-error50: #DC362E;
52
- --md-ref-palette-error60: #E46962;
53
- --md-ref-palette-error70: #EC928E;
54
- --md-ref-palette-error80: #F2B8B5;
55
- --md-ref-palette-error90: #F9DEDC;
56
- --md-ref-palette-error95: #FCEEEE;
57
- --md-ref-palette-error99: #FFFBF9;
58
- --md-ref-palette-error100: #FFFFFF;
59
- /* neutral */
60
- --md-ref-palette-neutral0: #000000;
61
- --md-ref-palette-neutral10: #1C1B1F;
62
- --md-ref-palette-neutral20: #313033;
63
- --md-ref-palette-neutral30: #484649;
64
- --md-ref-palette-neutral40: #605D62;
65
- --md-ref-palette-neutral50: #787579;
66
- --md-ref-palette-neutral60: #939094;
67
- --md-ref-palette-neutral70: #AEAAAE;
68
- --md-ref-palette-neutral80: #C9C5CA;
69
- --md-ref-palette-neutral90: #E6E1E5;
70
- --md-ref-palette-neutral95: #F4EFF4;
71
- --md-ref-palette-neutral99: #FFFBFE;
72
- --md-ref-palette-neutral100: #FFFFFF;
73
- /* neutral-variant */
74
- --md-ref-palette-neutral-variant0: #000000;
75
- --md-ref-palette-neutral-variant10: #1D1A22;
76
- --md-ref-palette-neutral-variant20: #322F37;
77
- --md-ref-palette-neutral-variant30: #49454F;
78
- --md-ref-palette-neutral-variant40: #605D66;
79
- --md-ref-palette-neutral-variant50: #79747E;
80
- --md-ref-palette-neutral-variant60: #938F99;
81
- --md-ref-palette-neutral-variant70: #AEA9B4;
82
- --md-ref-palette-neutral-variant80: #CAC4D0;
83
- --md-ref-palette-neutral-variant90: #E7E0EC;
84
- --md-ref-palette-neutral-variant95: #F5EEFA;
85
- --md-ref-palette-neutral-variant99: #FFFBFE;
86
- --md-ref-palette-neutral-variant100: #FFFFFF;
87
- /* light */
88
- --md-sys-color-primary-light: #6750A4;
89
- --md-sys-color-on-primary-light: #FFFFFF;
90
- --md-sys-color-primary-container-light: #EADDFF;
91
- --md-sys-color-on-primary-container-light: #21005D;
92
- --md-sys-color-secondary-light: #625B71;
93
- --md-sys-color-on-secondary-light: #FFFFFF;
94
- --md-sys-color-secondary-container-light: #E8DEF8;
95
- --md-sys-color-on-secondary-container-light: #1D192B;
96
- --md-sys-color-secondary-container-hover-light: #E8DEF87A;
97
- --md-sys-color-tertiary-light: #7D5260;
98
- --md-sys-color-on-tertiary-light: #FFFFFF;
99
- --md-sys-color-tertiary-container-light: #FFD8E4;
100
- --md-sys-color-on-tertiary-container-light: #31111D;
101
- --md-sys-color-error-light: #B3261E;
102
- --md-sys-color-on-error-light: #FFFFFF;
103
- --md-sys-color-error-container-light: #F9DEDC;
104
- --md-sys-color-on-error-container-light: #410E0B;
105
- --md-sys-color-outline-light: #79747E;
106
- --md-sys-color-background-light: #FFFBFE;
107
- --md-sys-color-on-background-light: #1C1B1F;
108
- --md-sys-color-surface-light: #FFFBFE;
109
- --md-sys-color-on-surface-light: #1C1B1F;
110
- --md-sys-color-surface-variant-light: #E7E0EC;
111
- --md-sys-color-on-surface-variant-light: #49454F;
112
- --md-sys-color-inverse-surface-light: #313033;
113
- --md-sys-color-inverse-on-surface-light: #F4EFF4;
114
- --md-sys-color-inverse-primary-light: #D0BCFF;
115
- --md-sys-color-shadow-light: #000000;
116
- --md-sys-color-surface-tint-light: #6750A4;
117
- --md-sys-color-outline-variant-light: #CAC4D0;
118
- --md-sys-color-scrim-light: #000000;
119
- /* dark */
120
- --md-sys-color-primary-dark: #D0BCFF;
121
- --md-sys-color-on-primary-dark: #381E72;
122
- --md-sys-color-primary-container-dark: #4F378B;
123
- --md-sys-color-on-primary-container-dark: #EADDFF;
124
- --md-sys-color-secondary-dark: #CCC2DC;
125
- --md-sys-color-on-secondary-dark: #332D41;
126
- --md-sys-color-secondary-container-dark: #4A4458;
127
- --md-sys-color-on-secondary-container-dark: #E8DEF8;
128
- --md-sys-color-secondary-container-hover-dark: #4A44587A;
129
- --md-sys-color-tertiary-dark: #EFB8C8;
130
- --md-sys-color-on-tertiary-dark: #492532;
131
- --md-sys-color-tertiary-container-dark: #633B48;
132
- --md-sys-color-on-tertiary-container-dark: #FFD8E4;
133
- --md-sys-color-error-dark: #F2B8B5;
134
- --md-sys-color-on-error-dark: #601410;
135
- --md-sys-color-error-container-dark: #8C1D18;
136
- --md-sys-color-on-error-container-dark: #F9DEDC;
137
- --md-sys-color-outline-dark: #938F99;
138
- --md-sys-color-background-dark: #1C1B1F;
139
- --md-sys-color-on-background-dark: #E6E1E5;
140
- --md-sys-color-surface-dark: #1C1B1F;
141
- --md-sys-color-on-surface-dark: #E6E1E5;
142
- --md-sys-color-surface-variant-dark: #49454F;
143
- --md-sys-color-on-surface-variant-dark: #CAC4D0;
144
- --md-sys-color-inverse-surface-dark: #E6E1E5;
145
- --md-sys-color-inverse-on-surface-dark: #313033;
146
- --md-sys-color-inverse-primary-dark: #6750A4;
147
- --md-sys-color-shadow-dark: #000000;
148
- --md-sys-color-surface-tint-dark: #D0BCFF;
149
- --md-sys-color-outline-variant-dark: #49454F;
150
- --md-sys-color-scrim-dark: #000000;
151
- /* display - large */
152
- --md-sys-typescale-display-large-font-family-name: Roboto;
153
- --md-sys-typescale-display-large-font-family-style: Regular;
154
- --md-sys-typescale-display-large-font-weight: 400px;
155
- --md-sys-typescale-display-large-font-size: 57px;
156
- --md-sys-typescale-display-large-line-height: 64px;
157
- --md-sys-typescale-display-large-letter-spacing: -0.25px;
158
- /* display - medium */
159
- --md-sys-typescale-display-medium-font-family-name: Roboto;
160
- --md-sys-typescale-display-medium-font-family-style: Regular;
161
- --md-sys-typescale-display-medium-font-weight: 400px;
162
- --md-sys-typescale-display-medium-font-size: 45px;
163
- --md-sys-typescale-display-medium-line-height: 52px;
164
- --md-sys-typescale-display-medium-letter-spacing: 0px;
165
- /* display - small */
166
- --md-sys-typescale-display-small-font-family-name: Roboto;
167
- --md-sys-typescale-display-small-font-family-style: Regular;
168
- --md-sys-typescale-display-small-font-weight: 400px;
169
- --md-sys-typescale-display-small-font-size: 36px;
170
- --md-sys-typescale-display-small-line-height: 44px;
171
- --md-sys-typescale-display-small-letter-spacing: 0px;
172
- /* headline - large */
173
- --md-sys-typescale-headline-large-font-family-name: Roboto;
174
- --md-sys-typescale-headline-large-font-family-style: Regular;
175
- --md-sys-typescale-headline-large-font-weight: 400px;
176
- --md-sys-typescale-headline-large-font-size: 32px;
177
- --md-sys-typescale-headline-large-line-height: 40px;
178
- --md-sys-typescale-headline-large-letter-spacing: 0px;
179
- /* headline - medium */
180
- --md-sys-typescale-headline-medium-font-family-name: Roboto;
181
- --md-sys-typescale-headline-medium-font-family-style: Regular;
182
- --md-sys-typescale-headline-medium-font-weight: 400px;
183
- --md-sys-typescale-headline-medium-font-size: 28px;
184
- --md-sys-typescale-headline-medium-line-height: 36px;
185
- --md-sys-typescale-headline-medium-letter-spacing: 0px;
186
- /* headline - small */
187
- --md-sys-typescale-headline-small-font-family-name: Roboto;
188
- --md-sys-typescale-headline-small-font-family-style: Regular;
189
- --md-sys-typescale-headline-small-font-weight: 400px;
190
- --md-sys-typescale-headline-small-font-size: 24px;
191
- --md-sys-typescale-headline-small-line-height: 32px;
192
- --md-sys-typescale-headline-small-letter-spacing: 0px;
193
- /* body - large */
194
- --md-sys-typescale-body-large-font-family-name: Roboto;
195
- --md-sys-typescale-body-large-font-family-style: Regular;
196
- --md-sys-typescale-body-large-font-weight: 400px;
197
- --md-sys-typescale-body-large-font-size: 16px;
198
- --md-sys-typescale-body-large-line-height: 24px;
199
- --md-sys-typescale-body-large-letter-spacing: 0.50px;
200
- /* body - medium */
201
- --md-sys-typescale-body-medium-font-family-name: Roboto;
202
- --md-sys-typescale-body-medium-font-family-style: Regular;
203
- --md-sys-typescale-body-medium-font-weight: 400px;
204
- --md-sys-typescale-body-medium-font-size: 14px;
205
- --md-sys-typescale-body-medium-line-height: 20px;
206
- --md-sys-typescale-body-medium-letter-spacing: 0.25px;
207
- /* body - small */
208
- --md-sys-typescale-body-small-font-family-name: Roboto;
209
- --md-sys-typescale-body-small-font-family-style: Regular;
210
- --md-sys-typescale-body-small-font-weight: 400px;
211
- --md-sys-typescale-body-small-font-size: 12px;
212
- --md-sys-typescale-body-small-line-height: 16px;
213
- --md-sys-typescale-body-small-letter-spacing: 0.40px;
214
- /* label - large */
215
- --md-sys-typescale-label-large-font-family-name: Roboto;
216
- --md-sys-typescale-label-large-font-family-style: Medium;
217
- --md-sys-typescale-label-large-font-weight: 500px;
218
- --md-sys-typescale-label-large-font-size: 14px;
219
- --md-sys-typescale-label-large-line-height: 20px;
220
- --md-sys-typescale-label-large-letter-spacing: 0.10px;
221
- /* label - medium */
222
- --md-sys-typescale-label-medium-font-family-name: Roboto;
223
- --md-sys-typescale-label-medium-font-family-style: Medium;
224
- --md-sys-typescale-label-medium-font-weight: 500px;
225
- --md-sys-typescale-label-medium-font-size: 12px;
226
- --md-sys-typescale-label-medium-line-height: 16px;
227
- --md-sys-typescale-label-medium-letter-spacing: 0.50px;
228
- /* label - small */
229
- --md-sys-typescale-label-small-font-family-name: Roboto;
230
- --md-sys-typescale-label-small-font-family-style: Medium;
231
- --md-sys-typescale-label-small-font-weight: 500px;
232
- --md-sys-typescale-label-small-font-size: 11px;
233
- --md-sys-typescale-label-small-line-height: 16px;
234
- --md-sys-typescale-label-small-letter-spacing: 0.50px;
235
- /* title - large */
236
- --md-sys-typescale-title-large-font-family-name: Roboto;
237
- --md-sys-typescale-title-large-font-family-style: Regular;
238
- --md-sys-typescale-title-large-font-weight: 400px;
239
- --md-sys-typescale-title-large-font-size: 22px;
240
- --md-sys-typescale-title-large-line-height: 28px;
241
- --md-sys-typescale-title-large-letter-spacing: 0px;
242
- /* title - medium */
243
- --md-sys-typescale-title-medium-font-family-name: Roboto;
244
- --md-sys-typescale-title-medium-font-family-style: Medium;
245
- --md-sys-typescale-title-medium-font-weight: 500px;
246
- --md-sys-typescale-title-medium-font-size: 16px;
247
- --md-sys-typescale-title-medium-line-height: 24px;
248
- --md-sys-typescale-title-medium-letter-spacing: 0.15px;
249
- /* title - small */
250
- --md-sys-typescale-title-small-font-family-name: Roboto;
251
- --md-sys-typescale-title-small-font-family-style: Medium;
252
- --md-sys-typescale-title-small-font-weight: 500px;
253
- --md-sys-typescale-title-small-font-size: 14px;
254
- --md-sys-typescale-title-small-line-height: 20px;
255
- --md-sys-typescale-title-small-letter-spacing: 0.10px;
256
- }
1
+ :root {
2
+ --md-source: #6750A4;
3
+ /* primary */
4
+ --md-ref-palette-primary0: #000000;
5
+ --md-ref-palette-primary10: #21005D;
6
+ --md-ref-palette-primary20: #381E72;
7
+ --md-ref-palette-primary30: #4F378B;
8
+ --md-ref-palette-primary40: #6750A4;
9
+ --md-ref-palette-primary50: #7F67BE;
10
+ --md-ref-palette-primary60: #9A82DB;
11
+ --md-ref-palette-primary70: #B69DF8;
12
+ --md-ref-palette-primary80: #D0BCFF;
13
+ --md-ref-palette-primary90: #EADDFF;
14
+ --md-ref-palette-primary95: #F6EDFF;
15
+ --md-ref-palette-primary99: #FFFBFE;
16
+ --md-ref-palette-primary100: #FFFFFF;
17
+ /* secondary */
18
+ --md-ref-palette-secondary0: #000000;
19
+ --md-ref-palette-secondary10: #1D192B;
20
+ --md-ref-palette-secondary20: #332D41;
21
+ --md-ref-palette-secondary30: #4A4458;
22
+ --md-ref-palette-secondary40: #625B71;
23
+ --md-ref-palette-secondary50: #7A7289;
24
+ --md-ref-palette-secondary60: #958DA5;
25
+ --md-ref-palette-secondary70: #B0A7C0;
26
+ --md-ref-palette-secondary80: #CCC2DC;
27
+ --md-ref-palette-secondary90: #E8DEF8;
28
+ --md-ref-palette-secondary95: #F6EDFF;
29
+ --md-ref-palette-secondary99: #FFFBFE;
30
+ --md-ref-palette-secondary100: #FFFFFF;
31
+ /* tertiary */
32
+ --md-ref-palette-tertiary0: #000000;
33
+ --md-ref-palette-tertiary10: #31111D;
34
+ --md-ref-palette-tertiary20: #492532;
35
+ --md-ref-palette-tertiary30: #633B48;
36
+ --md-ref-palette-tertiary40: #7D5260;
37
+ --md-ref-palette-tertiary50: #986977;
38
+ --md-ref-palette-tertiary60: #B58392;
39
+ --md-ref-palette-tertiary70: #D29DAC;
40
+ --md-ref-palette-tertiary80: #EFB8C8;
41
+ --md-ref-palette-tertiary90: #FFD8E4;
42
+ --md-ref-palette-tertiary95: #FFECF1;
43
+ --md-ref-palette-tertiary99: #FFFBFA;
44
+ --md-ref-palette-tertiary100: #FFFFFF;
45
+ /* error */
46
+ --md-ref-palette-error0: #000000;
47
+ --md-ref-palette-error10: #410E0B;
48
+ --md-ref-palette-error20: #601410;
49
+ --md-ref-palette-error30: #8C1D18;
50
+ --md-ref-palette-error40: #B3261E;
51
+ --md-ref-palette-error50: #DC362E;
52
+ --md-ref-palette-error60: #E46962;
53
+ --md-ref-palette-error70: #EC928E;
54
+ --md-ref-palette-error80: #F2B8B5;
55
+ --md-ref-palette-error90: #F9DEDC;
56
+ --md-ref-palette-error95: #FCEEEE;
57
+ --md-ref-palette-error99: #FFFBF9;
58
+ --md-ref-palette-error100: #FFFFFF;
59
+ /* neutral */
60
+ --md-ref-palette-neutral0: #000000;
61
+ --md-ref-palette-neutral10: #1C1B1F;
62
+ --md-ref-palette-neutral20: #313033;
63
+ --md-ref-palette-neutral30: #484649;
64
+ --md-ref-palette-neutral40: #605D62;
65
+ --md-ref-palette-neutral50: #787579;
66
+ --md-ref-palette-neutral60: #939094;
67
+ --md-ref-palette-neutral70: #AEAAAE;
68
+ --md-ref-palette-neutral80: #C9C5CA;
69
+ --md-ref-palette-neutral90: #E6E1E5;
70
+ --md-ref-palette-neutral95: #F4EFF4;
71
+ --md-ref-palette-neutral99: #FFFBFE;
72
+ --md-ref-palette-neutral100: #FFFFFF;
73
+ /* neutral-variant */
74
+ --md-ref-palette-neutral-variant0: #000000;
75
+ --md-ref-palette-neutral-variant10: #1D1A22;
76
+ --md-ref-palette-neutral-variant20: #322F37;
77
+ --md-ref-palette-neutral-variant30: #49454F;
78
+ --md-ref-palette-neutral-variant40: #605D66;
79
+ --md-ref-palette-neutral-variant50: #79747E;
80
+ --md-ref-palette-neutral-variant60: #938F99;
81
+ --md-ref-palette-neutral-variant70: #AEA9B4;
82
+ --md-ref-palette-neutral-variant80: #CAC4D0;
83
+ --md-ref-palette-neutral-variant90: #E7E0EC;
84
+ --md-ref-palette-neutral-variant95: #F5EEFA;
85
+ --md-ref-palette-neutral-variant99: #FFFBFE;
86
+ --md-ref-palette-neutral-variant100: #FFFFFF;
87
+ /* light */
88
+ --md-sys-color-primary-light: #6750A4;
89
+ --md-sys-color-on-primary-light: #FFFFFF;
90
+ --md-sys-color-primary-container-light: #EADDFF;
91
+ --md-sys-color-on-primary-container-light: #21005D;
92
+ --md-sys-color-secondary-light: #625B71;
93
+ --md-sys-color-on-secondary-light: #FFFFFF;
94
+ --md-sys-color-secondary-container-light: #E8DEF8;
95
+ --md-sys-color-on-secondary-container-light: #1D192B;
96
+ --md-sys-color-secondary-container-hover-light: #E8DEF87A;
97
+ --md-sys-color-tertiary-light: #7D5260;
98
+ --md-sys-color-on-tertiary-light: #FFFFFF;
99
+ --md-sys-color-tertiary-container-light: #FFD8E4;
100
+ --md-sys-color-on-tertiary-container-light: #31111D;
101
+ --md-sys-color-error-light: #B3261E;
102
+ --md-sys-color-on-error-light: #FFFFFF;
103
+ --md-sys-color-error-container-light: #F9DEDC;
104
+ --md-sys-color-on-error-container-light: #410E0B;
105
+ --md-sys-color-outline-light: #79747E;
106
+ --md-sys-color-background-light: #FFFBFE;
107
+ --md-sys-color-on-background-light: #1C1B1F;
108
+ --md-sys-color-surface-light: #FFFBFE;
109
+ --md-sys-color-on-surface-light: #1C1B1F;
110
+ --md-sys-color-surface-variant-light: #E7E0EC;
111
+ --md-sys-color-on-surface-variant-light: #49454F;
112
+ --md-sys-color-inverse-surface-light: #313033;
113
+ --md-sys-color-inverse-on-surface-light: #F4EFF4;
114
+ --md-sys-color-inverse-primary-light: #D0BCFF;
115
+ --md-sys-color-shadow-light: #000000;
116
+ --md-sys-color-surface-tint-light: #6750A4;
117
+ --md-sys-color-outline-variant-light: #CAC4D0;
118
+ --md-sys-color-scrim-light: #000000;
119
+ /* dark */
120
+ --md-sys-color-primary-dark: #D0BCFF;
121
+ --md-sys-color-on-primary-dark: #381E72;
122
+ --md-sys-color-primary-container-dark: #4F378B;
123
+ --md-sys-color-on-primary-container-dark: #EADDFF;
124
+ --md-sys-color-secondary-dark: #CCC2DC;
125
+ --md-sys-color-on-secondary-dark: #332D41;
126
+ --md-sys-color-secondary-container-dark: #4A4458;
127
+ --md-sys-color-on-secondary-container-dark: #E8DEF8;
128
+ --md-sys-color-secondary-container-hover-dark: #4A44587A;
129
+ --md-sys-color-tertiary-dark: #EFB8C8;
130
+ --md-sys-color-on-tertiary-dark: #492532;
131
+ --md-sys-color-tertiary-container-dark: #633B48;
132
+ --md-sys-color-on-tertiary-container-dark: #FFD8E4;
133
+ --md-sys-color-error-dark: #F2B8B5;
134
+ --md-sys-color-on-error-dark: #601410;
135
+ --md-sys-color-error-container-dark: #8C1D18;
136
+ --md-sys-color-on-error-container-dark: #F9DEDC;
137
+ --md-sys-color-outline-dark: #938F99;
138
+ --md-sys-color-background-dark: #1C1B1F;
139
+ --md-sys-color-on-background-dark: #E6E1E5;
140
+ --md-sys-color-surface-dark: #1C1B1F;
141
+ --md-sys-color-on-surface-dark: #E6E1E5;
142
+ --md-sys-color-surface-variant-dark: #49454F;
143
+ --md-sys-color-on-surface-variant-dark: #CAC4D0;
144
+ --md-sys-color-inverse-surface-dark: #E6E1E5;
145
+ --md-sys-color-inverse-on-surface-dark: #313033;
146
+ --md-sys-color-inverse-primary-dark: #6750A4;
147
+ --md-sys-color-shadow-dark: #000000;
148
+ --md-sys-color-surface-tint-dark: #D0BCFF;
149
+ --md-sys-color-outline-variant-dark: #49454F;
150
+ --md-sys-color-scrim-dark: #000000;
151
+ /* display - large */
152
+ --md-sys-typescale-display-large-font-family-name: Roboto;
153
+ --md-sys-typescale-display-large-font-family-style: Regular;
154
+ --md-sys-typescale-display-large-font-weight: 400px;
155
+ --md-sys-typescale-display-large-font-size: 57px;
156
+ --md-sys-typescale-display-large-line-height: 64px;
157
+ --md-sys-typescale-display-large-letter-spacing: -0.25px;
158
+ /* display - medium */
159
+ --md-sys-typescale-display-medium-font-family-name: Roboto;
160
+ --md-sys-typescale-display-medium-font-family-style: Regular;
161
+ --md-sys-typescale-display-medium-font-weight: 400px;
162
+ --md-sys-typescale-display-medium-font-size: 45px;
163
+ --md-sys-typescale-display-medium-line-height: 52px;
164
+ --md-sys-typescale-display-medium-letter-spacing: 0px;
165
+ /* display - small */
166
+ --md-sys-typescale-display-small-font-family-name: Roboto;
167
+ --md-sys-typescale-display-small-font-family-style: Regular;
168
+ --md-sys-typescale-display-small-font-weight: 400px;
169
+ --md-sys-typescale-display-small-font-size: 36px;
170
+ --md-sys-typescale-display-small-line-height: 44px;
171
+ --md-sys-typescale-display-small-letter-spacing: 0px;
172
+ /* headline - large */
173
+ --md-sys-typescale-headline-large-font-family-name: Roboto;
174
+ --md-sys-typescale-headline-large-font-family-style: Regular;
175
+ --md-sys-typescale-headline-large-font-weight: 400px;
176
+ --md-sys-typescale-headline-large-font-size: 32px;
177
+ --md-sys-typescale-headline-large-line-height: 40px;
178
+ --md-sys-typescale-headline-large-letter-spacing: 0px;
179
+ /* headline - medium */
180
+ --md-sys-typescale-headline-medium-font-family-name: Roboto;
181
+ --md-sys-typescale-headline-medium-font-family-style: Regular;
182
+ --md-sys-typescale-headline-medium-font-weight: 400px;
183
+ --md-sys-typescale-headline-medium-font-size: 28px;
184
+ --md-sys-typescale-headline-medium-line-height: 36px;
185
+ --md-sys-typescale-headline-medium-letter-spacing: 0px;
186
+ /* headline - small */
187
+ --md-sys-typescale-headline-small-font-family-name: Roboto;
188
+ --md-sys-typescale-headline-small-font-family-style: Regular;
189
+ --md-sys-typescale-headline-small-font-weight: 400px;
190
+ --md-sys-typescale-headline-small-font-size: 24px;
191
+ --md-sys-typescale-headline-small-line-height: 32px;
192
+ --md-sys-typescale-headline-small-letter-spacing: 0px;
193
+ /* body - large */
194
+ --md-sys-typescale-body-large-font-family-name: Roboto;
195
+ --md-sys-typescale-body-large-font-family-style: Regular;
196
+ --md-sys-typescale-body-large-font-weight: 400px;
197
+ --md-sys-typescale-body-large-font-size: 16px;
198
+ --md-sys-typescale-body-large-line-height: 24px;
199
+ --md-sys-typescale-body-large-letter-spacing: 0.50px;
200
+ /* body - medium */
201
+ --md-sys-typescale-body-medium-font-family-name: Roboto;
202
+ --md-sys-typescale-body-medium-font-family-style: Regular;
203
+ --md-sys-typescale-body-medium-font-weight: 400px;
204
+ --md-sys-typescale-body-medium-font-size: 14px;
205
+ --md-sys-typescale-body-medium-line-height: 20px;
206
+ --md-sys-typescale-body-medium-letter-spacing: 0.25px;
207
+ /* body - small */
208
+ --md-sys-typescale-body-small-font-family-name: Roboto;
209
+ --md-sys-typescale-body-small-font-family-style: Regular;
210
+ --md-sys-typescale-body-small-font-weight: 400px;
211
+ --md-sys-typescale-body-small-font-size: 12px;
212
+ --md-sys-typescale-body-small-line-height: 16px;
213
+ --md-sys-typescale-body-small-letter-spacing: 0.40px;
214
+ /* label - large */
215
+ --md-sys-typescale-label-large-font-family-name: Roboto;
216
+ --md-sys-typescale-label-large-font-family-style: Medium;
217
+ --md-sys-typescale-label-large-font-weight: 500px;
218
+ --md-sys-typescale-label-large-font-size: 14px;
219
+ --md-sys-typescale-label-large-line-height: 20px;
220
+ --md-sys-typescale-label-large-letter-spacing: 0.10px;
221
+ /* label - medium */
222
+ --md-sys-typescale-label-medium-font-family-name: Roboto;
223
+ --md-sys-typescale-label-medium-font-family-style: Medium;
224
+ --md-sys-typescale-label-medium-font-weight: 500px;
225
+ --md-sys-typescale-label-medium-font-size: 12px;
226
+ --md-sys-typescale-label-medium-line-height: 16px;
227
+ --md-sys-typescale-label-medium-letter-spacing: 0.50px;
228
+ /* label - small */
229
+ --md-sys-typescale-label-small-font-family-name: Roboto;
230
+ --md-sys-typescale-label-small-font-family-style: Medium;
231
+ --md-sys-typescale-label-small-font-weight: 500px;
232
+ --md-sys-typescale-label-small-font-size: 11px;
233
+ --md-sys-typescale-label-small-line-height: 16px;
234
+ --md-sys-typescale-label-small-letter-spacing: 0.50px;
235
+ /* title - large */
236
+ --md-sys-typescale-title-large-font-family-name: Roboto;
237
+ --md-sys-typescale-title-large-font-family-style: Regular;
238
+ --md-sys-typescale-title-large-font-weight: 400px;
239
+ --md-sys-typescale-title-large-font-size: 22px;
240
+ --md-sys-typescale-title-large-line-height: 28px;
241
+ --md-sys-typescale-title-large-letter-spacing: 0px;
242
+ /* title - medium */
243
+ --md-sys-typescale-title-medium-font-family-name: Roboto;
244
+ --md-sys-typescale-title-medium-font-family-style: Medium;
245
+ --md-sys-typescale-title-medium-font-weight: 500px;
246
+ --md-sys-typescale-title-medium-font-size: 16px;
247
+ --md-sys-typescale-title-medium-line-height: 24px;
248
+ --md-sys-typescale-title-medium-letter-spacing: 0.15px;
249
+ /* title - small */
250
+ --md-sys-typescale-title-small-font-family-name: Roboto;
251
+ --md-sys-typescale-title-small-font-family-style: Medium;
252
+ --md-sys-typescale-title-small-font-weight: 500px;
253
+ --md-sys-typescale-title-small-font-size: 14px;
254
+ --md-sys-typescale-title-small-line-height: 20px;
255
+ --md-sys-typescale-title-small-letter-spacing: 0.10px;
256
+ }