UNPKG

@sandlada/material-design-css

Version:

A ready-made npm package for a collection of css styles in the material design style.

material-design-css.sandlada.com

sandlada/material-design-css

184 lines (183 loc) • 11.9 kB
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
:root { --md-sys-color-background: light-dark(#f9f9f9, #131313); --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab); --md-sys-color-error-container: light-dark(#ffdad6, #93000a); --md-sys-color-error-dim: light-dark(#a80710, #ff554a); --md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730); --md-sys-color-inverse-on-surface: light-dark(#f1f1f1, #303030); --md-sys-color-inverse-primary: light-dark(#c6c6c6, #5e5e5e); --md-sys-color-inverse-surface: light-dark(#303030, #e2e2e2); --md-sys-color-neutral-palette-key-color: light-dark(#777777, #777777); --md-sys-color-neutral-variant-palette-key-color: light-dark(#777777, #777777); --md-sys-color-on-background: light-dark(#1b1b1b, #e2e2e2); --md-sys-color-on-error: light-dark(#ffffff, #690005); --md-sys-color-on-error-container: light-dark(#410002, #ffdad6); --md-sys-color-on-primary: light-dark(#e2e2e2, #1b1b1b); --md-sys-color-on-primary-container: light-dark(#ffffff, #000000); --md-sys-color-on-primary-fixed: light-dark(#ffffff, #ffffff); --md-sys-color-on-primary-fixed-variant: light-dark(#e2e2e2, #e2e2e2); --md-sys-color-on-secondary: light-dark(#ffffff, #1b1b1b); --md-sys-color-on-secondary-container: light-dark(#1b1b1b, #e2e2e2); --md-sys-color-on-secondary-fixed: light-dark(#1b1b1b, #1b1b1b); --md-sys-color-on-secondary-fixed-variant: light-dark(#3b3b3b, #3b3b3b); --md-sys-color-on-surface: light-dark(#1b1b1b, #e2e2e2); --md-sys-color-on-surface-variant: light-dark(#474747, #c6c6c6); --md-sys-color-on-tertiary: light-dark(#e2e2e2, #1b1b1b); --md-sys-color-on-tertiary-container: light-dark(#ffffff, #000000); --md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #ffffff); --md-sys-color-on-tertiary-fixed-variant: light-dark(#e2e2e2, #e2e2e2); --md-sys-color-outline: light-dark(#777777, #919191); --md-sys-color-outline-variant: light-dark(#c6c6c6, #474747); --md-sys-color-primary: light-dark(#000000, #ffffff); --md-sys-color-primary-container: light-dark(#3b3b3b, #d4d4d4); --md-sys-color-primary-dim: light-dark(#000000, #f1f1f1); --md-sys-color-primary-fixed: light-dark(#5e5e5e, #5e5e5e); --md-sys-color-primary-fixed-dim: light-dark(#474747, #474747); --md-sys-color-primary-palette-key-color: light-dark(#777777, #777777); --md-sys-color-scrim: light-dark(#000000, #000000); --md-sys-color-secondary: light-dark(#5e5e5e, #c6c6c6); --md-sys-color-secondary-container: light-dark(#d4d4d4, #474747); --md-sys-color-secondary-dim: light-dark(#525252, #e2e2e2); --md-sys-color-secondary-fixed: light-dark(#c6c6c6, #c6c6c6); --md-sys-color-secondary-fixed-dim: light-dark(#ababab, #ababab); --md-sys-color-secondary-palette-key-color: light-dark(#777777, #777777); --md-sys-color-shadow: light-dark(#000000, #000000); --md-sys-color-surface: light-dark(#f9f9f9, #131313); --md-sys-color-surface-bright: light-dark(#f9f9f9, #393939); --md-sys-color-surface-container: light-dark(#eeeeee, #1f1f1f); --md-sys-color-surface-container-high: light-dark(#e8e8e8, #2a2a2a); --md-sys-color-surface-container-highest: light-dark(#e2e2e2, #353535); --md-sys-color-surface-container-low: light-dark(#f3f3f3, #1b1b1b); --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0e); --md-sys-color-surface-dim: light-dark(#dadada, #131313); --md-sys-color-surface-tint: light-dark(#5e5e5e, #c6c6c6); --md-sys-color-surface-variant: light-dark(#e2e2e2, #474747); --md-sys-color-tertiary: light-dark(#3b3b3b, #e2e2e2); --md-sys-color-tertiary-container: light-dark(#747474, #919191); --md-sys-color-tertiary-dim: light-dark(#303030, #f1f1f1); --md-sys-color-tertiary-fixed: light-dark(#5e5e5e, #5e5e5e); --md-sys-color-tertiary-fixed-dim: light-dark(#474747, #474747); --md-sys-color-tertiary-palette-key-color: light-dark(#777777, #777777); } :root[low-contrast] { --md-sys-color-background: light-dark(#f9f9f9, #131313); --md-sys-color-error: light-dark(#da342e, #ff5449); --md-sys-color-error-container: light-dark(#ffcdc7, #7b0007); --md-sys-color-error-dim: light-dark(#c82623, #ff554a); --md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730); --md-sys-color-inverse-on-surface: light-dark(#989898, #646464); --md-sys-color-inverse-primary: light-dark(#7a7a7a, #808080); --md-sys-color-inverse-surface: light-dark(#303030, #e2e2e2); --md-sys-color-neutral-palette-key-color: light-dark(#777777, #777777); --md-sys-color-neutral-variant-palette-key-color: light-dark(#777777, #777777); --md-sys-color-on-background: light-dark(#909090, #626262); --md-sys-color-on-error: light-dark(#fffbff, #5c0003); --md-sys-color-on-error-container: light-dark(#e23a32, #f0443b); --md-sys-color-on-primary: light-dark(#fcfcfc, #2a2a2a); --md-sys-color-on-primary-container: light-dark(#7a7a7a, #848484); --md-sys-color-on-primary-fixed: light-dark(#4c4c4c, #c4c4c4); --md-sys-color-on-primary-fixed-variant: light-dark(#666666, #a0a0a0); --md-sys-color-on-secondary: light-dark(#fcfcfc, #2a2a2a); --md-sys-color-on-secondary-container: light-dark(#7a7a7a, #848484); --md-sys-color-on-secondary-fixed: light-dark(#4c4c4c, #c4c4c4); --md-sys-color-on-secondary-fixed-variant: light-dark(#666666, #a0a0a0); --md-sys-color-on-surface: light-dark(#5f5f5f, #a3a3a3); --md-sys-color-on-surface-variant: light-dark(#7b7b7b, #838383); --md-sys-color-on-tertiary: light-dark(#fcfcfc, #2a2a2a); --md-sys-color-on-tertiary-container: light-dark(#7a7a7a, #848484); --md-sys-color-on-tertiary-fixed: light-dark(#4c4c4c, #c4c4c4); --md-sys-color-on-tertiary-fixed-variant: light-dark(#666666, #a0a0a0); --md-sys-color-outline: light-dark(#b2b2b2, #545454); --md-sys-color-outline-variant: light-dark(#d9d9d9, #3a3a3a); --md-sys-color-primary: light-dark(#747474, #919191); --md-sys-color-primary-container: light-dark(#d9d9d9, #3a3a3a); --md-sys-color-primary-dim: light-dark(#686868, #919191); --md-sys-color-primary-fixed: light-dark(#d9d9d9, #515151); --md-sys-color-primary-fixed-dim: light-dark(#bdbdbd, #3a3a3a); --md-sys-color-primary-palette-key-color: light-dark(#777777, #777777); --md-sys-color-scrim: light-dark(#000000, #000000); --md-sys-color-secondary: light-dark(#747474, #919191); --md-sys-color-secondary-container: light-dark(#d9d9d9, #3a3a3a); --md-sys-color-secondary-dim: light-dark(#686868, #919191); --md-sys-color-secondary-fixed: light-dark(#d9d9d9, #515151); --md-sys-color-secondary-fixed-dim: light-dark(#bdbdbd, #3a3a3a); --md-sys-color-secondary-palette-key-color: light-dark(#777777, #777777); --md-sys-color-shadow: light-dark(#000000, #000000); --md-sys-color-surface: light-dark(#f9f9f9, #131313); --md-sys-color-surface-bright: light-dark(#f9f9f9, #393939); --md-sys-color-surface-container: light-dark(#eeeeee, #1f1f1f); --md-sys-color-surface-container-high: light-dark(#e8e8e8, #2a2a2a); --md-sys-color-surface-container-highest: light-dark(#e2e2e2, #353535); --md-sys-color-surface-container-low: light-dark(#f3f3f3, #1b1b1b); --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0e); --md-sys-color-surface-dim: light-dark(#dadada, #131313); --md-sys-color-surface-tint: light-dark(#5e5e5e, #c6c6c6); --md-sys-color-surface-variant: light-dark(#e2e2e2, #474747); --md-sys-color-tertiary: light-dark(#747474, #919191); --md-sys-color-tertiary-container: light-dark(#d9d9d9, #3a3a3a); --md-sys-color-tertiary-dim: light-dark(#686868, #919191); --md-sys-color-tertiary-fixed: light-dark(#d9d9d9, #515151); --md-sys-color-tertiary-fixed-dim: light-dark(#bdbdbd, #3a3a3a); --md-sys-color-tertiary-palette-key-color: light-dark(#777777, #777777); } :root[high-contrast] { --md-sys-color-background: light-dark(#f9f9f9, #131313); --md-sys-color-error: light-dark(#600004, #ffece9); --md-sys-color-error-container: light-dark(#98000a, #ffaea4); --md-sys-color-error-dim: light-dark(#480002, #ffedea); --md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730); --md-sys-color-inverse-on-surface: light-dark(#ffffff, #000000); --md-sys-color-inverse-primary: light-dark(#c6c6c6, #484848); --md-sys-color-inverse-surface: light-dark(#303030, #e2e2e2); --md-sys-color-neutral-palette-key-color: light-dark(#777777, #777777); --md-sys-color-neutral-variant-palette-key-color: light-dark(#777777, #777777); --md-sys-color-on-background: light-dark(#1b1b1b, #e2e2e2); --md-sys-color-on-error: light-dark(#ffffff, #000000); --md-sys-color-on-error-container: light-dark(#ffffff, #220001); --md-sys-color-on-primary: light-dark(#ffffff, #000000); --md-sys-color-on-primary-container: light-dark(#ffffff, #000000); --md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000); --md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #0b0b0b); --md-sys-color-on-secondary: light-dark(#ffffff, #000000); --md-sys-color-on-secondary-container: light-dark(#ffffff, #0b0b0b); --md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000); --md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #0b0b0b); --md-sys-color-on-surface: light-dark(#000000, #ffffff); --md-sys-color-on-surface-variant: light-dark(#000000, #ffffff); --md-sys-color-on-tertiary: light-dark(#ffffff, #000000); --md-sys-color-on-tertiary-container: light-dark(#ffffff, #000000); --md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000); --md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0b0b0b); --md-sys-color-outline: light-dark(#2c2c2c, #f0f0f0); --md-sys-color-outline-variant: light-dark(#494949, #c2c2c2); --md-sys-color-primary: light-dark(#000000, #ffffff); --md-sys-color-primary-container: light-dark(#3b3b3b, #d4d4d4); --md-sys-color-primary-dim: light-dark(#000000, #f1f1f1); --md-sys-color-primary-fixed: light-dark(#494949, #dedede); --md-sys-color-primary-fixed-dim: light-dark(#333333, #c2c2c2); --md-sys-color-primary-palette-key-color: light-dark(#777777, #777777); --md-sys-color-scrim: light-dark(#000000, #000000); --md-sys-color-secondary: light-dark(#2c2c2c, #f0f0f0); --md-sys-color-secondary-container: light-dark(#494949, #c2c2c2); --md-sys-color-secondary-dim: light-dark(#1f1f1f, #f1f1f1); --md-sys-color-secondary-fixed: light-dark(#494949, #dedede); --md-sys-color-secondary-fixed-dim: light-dark(#333333, #c2c2c2); --md-sys-color-secondary-palette-key-color: light-dark(#777777, #777777); --md-sys-color-shadow: light-dark(#000000, #000000); --md-sys-color-surface: light-dark(#f9f9f9, #131313); --md-sys-color-surface-bright: light-dark(#f9f9f9, #505050); --md-sys-color-surface-container: light-dark(#e2e2e2, #303030); --md-sys-color-surface-container-high: light-dark(#d4d4d4, #3b3b3b); --md-sys-color-surface-container-highest: light-dark(#c6c6c6, #474747); --md-sys-color-surface-container-low: light-dark(#f1f1f1, #1f1f1f); --md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000); --md-sys-color-surface-dim: light-dark(#b9b9b9, #131313); --md-sys-color-surface-tint: light-dark(#5e5e5e, #c6c6c6); --md-sys-color-surface-variant: light-dark(#e2e2e2, #474747); --md-sys-color-tertiary: light-dark(#2c2c2c, #f0f0f0); --md-sys-color-tertiary-container: light-dark(#494949, #c2c2c2); --md-sys-color-tertiary-dim: light-dark(#1f1f1f, #f1f1f1); --md-sys-color-tertiary-fixed: light-dark(#494949, #dedede); --md-sys-color-tertiary-fixed-dim: light-dark(#333333, #c2c2c2); --md-sys-color-tertiary-palette-key-color: light-dark(#777777, #777777); }