Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / src / palette / demo.html
blob: 9cf40c5a9f6b3c6f29badbca2bbff180c7f0e285 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]1 <div class="demo-preview-block demo-page--palette">
2 <div class="demo-palette">
3 <div class="demo-palette-heading mdl-color--red-500">
4 <div class="demo-palette-name">Red</div>
5
6 500
7 </div>
8 <div class="demo-palette-color mdl-color--red-50 demo-palette--dark-text">50</div>
9 <div class="demo-palette-color mdl-color--red-100 demo-palette--dark-text">100</div>
10 <div class="demo-palette-color mdl-color--red-200 demo-palette--dark-text">200</div>
11 <div class="demo-palette-color mdl-color--red-300 demo-palette--dark-text">300</div>
12 <div class="demo-palette-color mdl-color--red-400 demo-palette--dark-text">400</div>
13 <div class="demo-palette-color mdl-color--red-500">500</div>
14 <div class="demo-palette-color mdl-color--red-600">600</div>
15 <div class="demo-palette-color mdl-color--red-700">700</div>
16 <div class="demo-palette-color mdl-color--red-800">800</div>
17 <div class="demo-palette-color mdl-color--red-900">900</div>
18 <div class="demo-palette-color mdl-color--red-A100 demo-palette--dark-text">A100</div>
19 <div class="demo-palette-color mdl-color--red-A200">A200</div>
20 <div class="demo-palette-color mdl-color--red-A400">A400</div>
21 <div class="demo-palette-color mdl-color--red-A700">A700</div>
22 </div>
23
24 <div class="demo-palette">
25 <div class="demo-palette-heading mdl-color--pink-500">
26 <div class="demo-palette-name">Pink</div>
27
28 500
29 </div>
30 <div class="demo-palette-color mdl-color--pink-50 demo-palette--dark-text">50</div>
31 <div class="demo-palette-color mdl-color--pink-100 demo-palette--dark-text">100</div>
32 <div class="demo-palette-color mdl-color--pink-200 demo-palette--dark-text">200</div>
33 <div class="demo-palette-color mdl-color--pink-300 demo-palette--dark-text">300</div>
34 <div class="demo-palette-color mdl-color--pink-400 demo-palette--dark-text">400</div>
35 <div class="demo-palette-color mdl-color--pink-500">500</div>
36 <div class="demo-palette-color mdl-color--pink-600">600</div>
37 <div class="demo-palette-color mdl-color--pink-700">700</div>
38 <div class="demo-palette-color mdl-color--pink-800">800</div>
39 <div class="demo-palette-color mdl-color--pink-900">900</div>
40 <div class="demo-palette-color mdl-color--pink-A100 demo-palette--dark-text">A100</div>
41 <div class="demo-palette-color mdl-color--pink-A200">A200</div>
42 <div class="demo-palette-color mdl-color--pink-A400">A400</div>
43 <div class="demo-palette-color mdl-color--pink-A700">A700</div>
44 </div>
45
46 <div class="demo-palette">
47 <div class="demo-palette-heading mdl-color--purple-500">
48 <div class="demo-palette-name">Purple</div>
49
50 500
51 </div>
52 <div class="demo-palette-color mdl-color--purple-50 demo-palette--dark-text">50</div>
53 <div class="demo-palette-color mdl-color--purple-100 demo-palette--dark-text">100</div>
54 <div class="demo-palette-color mdl-color--purple-200 demo-palette--dark-text">200</div>
55 <div class="demo-palette-color mdl-color--purple-300">300</div>
56 <div class="demo-palette-color mdl-color--purple-400">400</div>
57 <div class="demo-palette-color mdl-color--purple-500">500</div>
58 <div class="demo-palette-color mdl-color--purple-600">600</div>
59 <div class="demo-palette-color mdl-color--purple-700">700</div>
60 <div class="demo-palette-color mdl-color--purple-800">800</div>
61 <div class="demo-palette-color mdl-color--purple-900">900</div>
62 <div class="demo-palette-color mdl-color--purple-A100 demo-palette--dark-text">A100</div>
63 <div class="demo-palette-color mdl-color--purple-A200">A200</div>
64 <div class="demo-palette-color mdl-color--purple-A400">A400</div>
65 <div class="demo-palette-color mdl-color--purple-A700">A700</div>
66 </div>
67
68 <div class="demo-palette">
69 <div class="demo-palette-heading mdl-color--deep-purple-500">
70 <div class="demo-palette-name">Deep Purple</div>
71
72 500
73 </div>
74 <div class="demo-palette-color mdl-color--deep-purple-50 demo-palette--dark-text">50</div>
75 <div class="demo-palette-color mdl-color--deep-purple-100 demo-palette--dark-text">100</div>
76 <div class="demo-palette-color mdl-color--deep-purple-200 demo-palette--dark-text">200</div>
77 <div class="demo-palette-color mdl-color--deep-purple-300">300</div>
78 <div class="demo-palette-color mdl-color--deep-purple-400">400</div>
79 <div class="demo-palette-color mdl-color--deep-purple-500">500</div>
80 <div class="demo-palette-color mdl-color--deep-purple-600">600</div>
81 <div class="demo-palette-color mdl-color--deep-purple-700">700</div>
82 <div class="demo-palette-color mdl-color--deep-purple-800">800</div>
83 <div class="demo-palette-color mdl-color--deep-purple-900">900</div>
84 <div class="demo-palette-color mdl-color--deep-purple-A100 demo-palette--dark-text">A100</div>
85 <div class="demo-palette-color mdl-color--deep-purple-A200">A200</div>
86 <div class="demo-palette-color mdl-color--deep-purple-A400">A400</div>
87 <div class="demo-palette-color mdl-color--deep-purple-A700">A700</div>
88 </div>
89
90 <div class="demo-palette">
91 <div class="demo-palette-heading mdl-color--indigo-500">
92 <div class="demo-palette-name">Indigo</div>
93
94 500
95 </div>
96 <div class="demo-palette-color mdl-color--indigo-50 demo-palette--dark-text">50</div>
97 <div class="demo-palette-color mdl-color--indigo-100 demo-palette--dark-text">100</div>
98 <div class="demo-palette-color mdl-color--indigo-200 demo-palette--dark-text">200</div>
99 <div class="demo-palette-color mdl-color--indigo-300">300</div>
100 <div class="demo-palette-color mdl-color--indigo-400">400</div>
101 <div class="demo-palette-color mdl-color--indigo-500">500</div>
102 <div class="demo-palette-color mdl-color--indigo-600">600</div>
103 <div class="demo-palette-color mdl-color--indigo-700">700</div>
104 <div class="demo-palette-color mdl-color--indigo-800">800</div>
105 <div class="demo-palette-color mdl-color--indigo-900">900</div>
106 <div class="demo-palette-color mdl-color--indigo-A100 demo-palette--dark-text">A100</div>
107 <div class="demo-palette-color mdl-color--indigo-A200">A200</div>
108 <div class="demo-palette-color mdl-color--indigo-A400">A400</div>
109 <div class="demo-palette-color mdl-color--indigo-A700">A700</div>
110 </div>
111
112 <div class="demo-palette">
113 <div class="demo-palette-heading mdl-color--blue-500">
114 <div class="demo-palette-name">Blue</div>
115
116 500
117 </div>
118 <div class="demo-palette-color mdl-color--blue-50 demo-palette--dark-text">50</div>
119 <div class="demo-palette-color mdl-color--blue-100 demo-palette--dark-text">100</div>
120 <div class="demo-palette-color mdl-color--blue-200 demo-palette--dark-text">200</div>
121 <div class="demo-palette-color mdl-color--blue-300 demo-palette--dark-text">300</div>
122 <div class="demo-palette-color mdl-color--blue-400 demo-palette--dark-text">400</div>
123 <div class="demo-palette-color mdl-color--blue-500">500</div>
124 <div class="demo-palette-color mdl-color--blue-600">600</div>
125 <div class="demo-palette-color mdl-color--blue-700">700</div>
126 <div class="demo-palette-color mdl-color--blue-800">800</div>
127 <div class="demo-palette-color mdl-color--blue-900">900</div>
128 <div class="demo-palette-color mdl-color--blue-A100 demo-palette--dark-text">A100</div>
129 <div class="demo-palette-color mdl-color--blue-A200">A200</div>
130 <div class="demo-palette-color mdl-color--blue-A400">A400</div>
131 <div class="demo-palette-color mdl-color--blue-A700">A700</div>
132 </div>
133
134 <div class="demo-palette">
135 <div class="demo-palette-heading mdl-color--light-blue-500">
136 <div class="demo-palette-name">Light Blue</div>
137
138 500
139 </div>
140 <div class="demo-palette-color mdl-color--light-blue-50 demo-palette--dark-text">50</div>
141 <div class="demo-palette-color mdl-color--light-blue-100 demo-palette--dark-text">100</div>
142 <div class="demo-palette-color mdl-color--light-blue-200 demo-palette--dark-text">200</div>
143 <div class="demo-palette-color mdl-color--light-blue-300 demo-palette--dark-text">300</div>
144 <div class="demo-palette-color mdl-color--light-blue-400 demo-palette--dark-text">400</div>
145 <div class="demo-palette-color mdl-color--light-blue-500">500</div>
146 <div class="demo-palette-color mdl-color--light-blue-600">600</div>
147 <div class="demo-palette-color mdl-color--light-blue-700">700</div>
148 <div class="demo-palette-color mdl-color--light-blue-800">800</div>
149 <div class="demo-palette-color mdl-color--light-blue-900">900</div>
150 <div class="demo-palette-color mdl-color--light-blue-A100 demo-palette--dark-text">A100</div>
151 <div class="demo-palette-color mdl-color--light-blue-A200 demo-palette--dark-text">A200</div>
152 <div class="demo-palette-color mdl-color--light-blue-A400 demo-palette--dark-text">A400</div>
153 <div class="demo-palette-color mdl-color--light-blue-A700">A700</div>
154 </div>
155
156 <div class="demo-palette">
157 <div class="demo-palette-heading mdl-color--cyan-500">
158 <div class="demo-palette-name">Cyan</div>
159
160 500
161 </div>
162 <div class="demo-palette-color mdl-color--cyan-50 demo-palette--dark-text">50</div>
163 <div class="demo-palette-color mdl-color--cyan-100 demo-palette--dark-text">100</div>
164 <div class="demo-palette-color mdl-color--cyan-200 demo-palette--dark-text">200</div>
165 <div class="demo-palette-color mdl-color--cyan-300 demo-palette--dark-text">300</div>
166 <div class="demo-palette-color mdl-color--cyan-400 demo-palette--dark-text">400</div>
167 <div class="demo-palette-color mdl-color--cyan-500">500</div>
168 <div class="demo-palette-color mdl-color--cyan-600">600</div>
169 <div class="demo-palette-color mdl-color--cyan-700">700</div>
170 <div class="demo-palette-color mdl-color--cyan-800">800</div>
171 <div class="demo-palette-color mdl-color--cyan-900">900</div>
172 <div class="demo-palette-color mdl-color--cyan-A100 demo-palette--dark-text">A100</div>
173 <div class="demo-palette-color mdl-color--cyan-A200 demo-palette--dark-text">A200</div>
174 <div class="demo-palette-color mdl-color--cyan-A400 demo-palette--dark-text">A400</div>
175 <div class="demo-palette-color mdl-color--cyan-A700 demo-palette--dark-text">A700</div>
176 </div>
177
178 <div class="demo-palette">
179 <div class="demo-palette-heading mdl-color--teal-500">
180 <div class="demo-palette-name">Teal</div>
181
182 500
183 </div>
184 <div class="demo-palette-color mdl-color--teal-50 demo-palette--dark-text">50</div>
185 <div class="demo-palette-color mdl-color--teal-100 demo-palette--dark-text">100</div>
186 <div class="demo-palette-color mdl-color--teal-200 demo-palette--dark-text">200</div>
187 <div class="demo-palette-color mdl-color--teal-300 demo-palette--dark-text">300</div>
188 <div class="demo-palette-color mdl-color--teal-400 demo-palette--dark-text">400</div>
189 <div class="demo-palette-color mdl-color--teal-500">500</div>
190 <div class="demo-palette-color mdl-color--teal-600">600</div>
191 <div class="demo-palette-color mdl-color--teal-700">700</div>
192 <div class="demo-palette-color mdl-color--teal-800">800</div>
193 <div class="demo-palette-color mdl-color--teal-900">900</div>
194 <div class="demo-palette-color mdl-color--teal-A100 demo-palette--dark-text">A100</div>
195 <div class="demo-palette-color mdl-color--teal-A200 demo-palette--dark-text">A200</div>
196 <div class="demo-palette-color mdl-color--teal-A400 demo-palette--dark-text">A400</div>
197 <div class="demo-palette-color mdl-color--teal-A700 demo-palette--dark-text">A700</div>
198 </div>
199
200 <div class="demo-palette">
201 <div class="demo-palette-heading mdl-color--green-500">
202 <div class="demo-palette-name">Green</div>
203
204 500
205 </div>
206 <div class="demo-palette-color mdl-color--green-50 demo-palette--dark-text">50</div>
207 <div class="demo-palette-color mdl-color--green-100 demo-palette--dark-text">100</div>
208 <div class="demo-palette-color mdl-color--green-200 demo-palette--dark-text">200</div>
209 <div class="demo-palette-color mdl-color--green-300 demo-palette--dark-text">300</div>
210 <div class="demo-palette-color mdl-color--green-400 demo-palette--dark-text">400</div>
211 <div class="demo-palette-color mdl-color--green-500">500</div>
212 <div class="demo-palette-color mdl-color--green-600">600</div>
213 <div class="demo-palette-color mdl-color--green-700">700</div>
214 <div class="demo-palette-color mdl-color--green-800">800</div>
215 <div class="demo-palette-color mdl-color--green-900">900</div>
216 <div class="demo-palette-color mdl-color--green-A100 demo-palette--dark-text">A100</div>
217 <div class="demo-palette-color mdl-color--green-A200 demo-palette--dark-text">A200</div>
218 <div class="demo-palette-color mdl-color--green-A400 demo-palette--dark-text">A400</div>
219 <div class="demo-palette-color mdl-color--green-A700 demo-palette--dark-text">A700</div>
220 </div>
221
222 <div class="demo-palette">
223 <div class="demo-palette-heading mdl-color--light-green-500">
224 <div class="demo-palette-name">Light Green</div>
225
226 500
227 </div>
228 <div class="demo-palette-color mdl-color--light-green-50 demo-palette--dark-text">50</div>
229 <div class="demo-palette-color mdl-color--light-green-100 demo-palette--dark-text">100</div>
230 <div class="demo-palette-color mdl-color--light-green-200 demo-palette--dark-text">200</div>
231 <div class="demo-palette-color mdl-color--light-green-300 demo-palette--dark-text">300</div>
232 <div class="demo-palette-color mdl-color--light-green-400 demo-palette--dark-text">400</div>
233 <div class="demo-palette-color mdl-color--light-green-500 demo-palette--dark-text">500</div>
234 <div class="demo-palette-color mdl-color--light-green-600 demo-palette--dark-text">600</div>
235 <div class="demo-palette-color mdl-color--light-green-700 demo-palette--dark-text">700</div>
236 <div class="demo-palette-color mdl-color--light-green-800">800</div>
237 <div class="demo-palette-color mdl-color--light-green-900">900</div>
238 <div class="demo-palette-color mdl-color--light-green-A100 demo-palette--dark-text">A100</div>
239 <div class="demo-palette-color mdl-color--light-green-A200 demo-palette--dark-text">A200</div>
240 <div class="demo-palette-color mdl-color--light-green-A400 demo-palette--dark-text">A400</div>
241 <div class="demo-palette-color mdl-color--light-green-A700 demo-palette--dark-text">A700</div>
242 </div>
243
244 <div class="demo-palette">
245 <div class="demo-palette-heading mdl-color--lime-500 demo-palette--dark-text">
246 <div class="demo-palette-name">Lime</div>
247
248 500
249 </div>
250 <div class="demo-palette-color mdl-color--lime-50 demo-palette--dark-text">50</div>
251 <div class="demo-palette-color mdl-color--lime-100 demo-palette--dark-text">100</div>
252 <div class="demo-palette-color mdl-color--lime-200 demo-palette--dark-text">200</div>
253 <div class="demo-palette-color mdl-color--lime-300 demo-palette--dark-text">300</div>
254 <div class="demo-palette-color mdl-color--lime-400 demo-palette--dark-text">400</div>
255 <div class="demo-palette-color mdl-color--lime-500 demo-palette--dark-text">500</div>
256 <div class="demo-palette-color mdl-color--lime-600 demo-palette--dark-text">600</div>
257 <div class="demo-palette-color mdl-color--lime-700 demo-palette--dark-text">700</div>
258 <div class="demo-palette-color mdl-color--lime-800 demo-palette--dark-text">800</div>
259 <div class="demo-palette-color mdl-color--lime-900">900</div>
260 <div class="demo-palette-color mdl-color--lime-A100 demo-palette--dark-text">A100</div>
261 <div class="demo-palette-color mdl-color--lime-A200 demo-palette--dark-text">A200</div>
262 <div class="demo-palette-color mdl-color--lime-A400 demo-palette--dark-text">A400</div>
263 <div class="demo-palette-color mdl-color--lime-A700 demo-palette--dark-text">A700</div>
264 </div>
265
266 <div class="demo-palette">
267 <div class="demo-palette-heading mdl-color--yellow-500 demo-palette--dark-text">
268 <div class="demo-palette-name">Yellow</div>
269
270 500
271 </div>
272 <div class="demo-palette-color mdl-color--yellow-50 demo-palette--dark-text">50</div>
273 <div class="demo-palette-color mdl-color--yellow-100 demo-palette--dark-text">100</div>
274 <div class="demo-palette-color mdl-color--yellow-200 demo-palette--dark-text">200</div>
275 <div class="demo-palette-color mdl-color--yellow-300 demo-palette--dark-text">300</div>
276 <div class="demo-palette-color mdl-color--yellow-400 demo-palette--dark-text">400</div>
277 <div class="demo-palette-color mdl-color--yellow-500 demo-palette--dark-text">500</div>
278 <div class="demo-palette-color mdl-color--yellow-600 demo-palette--dark-text">600</div>
279 <div class="demo-palette-color mdl-color--yellow-700 demo-palette--dark-text">700</div>
280 <div class="demo-palette-color mdl-color--yellow-800 demo-palette--dark-text">800</div>
281 <div class="demo-palette-color mdl-color--yellow-900 demo-palette--dark-text">900</div>
282 <div class="demo-palette-color mdl-color--yellow-A100 demo-palette--dark-text">A100</div>
283 <div class="demo-palette-color mdl-color--yellow-A200 demo-palette--dark-text">A200</div>
284 <div class="demo-palette-color mdl-color--yellow-A400 demo-palette--dark-text">A400</div>
285 <div class="demo-palette-color mdl-color--yellow-A700 demo-palette--dark-text">A700</div>
286 </div>
287
288 <div class="demo-palette">
289 <div class="demo-palette-heading mdl-color--amber-500 demo-palette--dark-text">
290 <div class="demo-palette-name">Amber</div>
291
292 500
293 </div>
294 <div class="demo-palette-color mdl-color--amber-50 demo-palette--dark-text">50</div>
295 <div class="demo-palette-color mdl-color--amber-100 demo-palette--dark-text">100</div>
296 <div class="demo-palette-color mdl-color--amber-200 demo-palette--dark-text">200</div>
297 <div class="demo-palette-color mdl-color--amber-300 demo-palette--dark-text">300</div>
298 <div class="demo-palette-color mdl-color--amber-400 demo-palette--dark-text">400</div>
299 <div class="demo-palette-color mdl-color--amber-500 demo-palette--dark-text">500</div>
300 <div class="demo-palette-color mdl-color--amber-600 demo-palette--dark-text">600</div>
301 <div class="demo-palette-color mdl-color--amber-700 demo-palette--dark-text">700</div>
302 <div class="demo-palette-color mdl-color--amber-800 demo-palette--dark-text">800</div>
303 <div class="demo-palette-color mdl-color--amber-900 demo-palette--dark-text">900</div>
304 <div class="demo-palette-color mdl-color--amber-A100 demo-palette--dark-text">A100</div>
305 <div class="demo-palette-color mdl-color--amber-A200 demo-palette--dark-text">A200</div>
306 <div class="demo-palette-color mdl-color--amber-A400 demo-palette--dark-text">A400</div>
307 <div class="demo-palette-color mdl-color--amber-A700 demo-palette--dark-text">A700</div>
308 </div>
309
310 <div class="demo-palette">
311 <div class="demo-palette-heading mdl-color--orange-500 demo-palette--dark-text">
312 <div class="demo-palette-name">Orange</div>
313
314 500
315 </div>
316 <div class="demo-palette-color mdl-color--orange-50 demo-palette--dark-text">50</div>
317 <div class="demo-palette-color mdl-color--orange-100 demo-palette--dark-text">100</div>
318 <div class="demo-palette-color mdl-color--orange-200 demo-palette--dark-text">200</div>
319 <div class="demo-palette-color mdl-color--orange-300 demo-palette--dark-text">300</div>
320 <div class="demo-palette-color mdl-color--orange-400 demo-palette--dark-text">400</div>
321 <div class="demo-palette-color mdl-color--orange-500 demo-palette--dark-text">500</div>
322 <div class="demo-palette-color mdl-color--orange-600 demo-palette--dark-text">600</div>
323 <div class="demo-palette-color mdl-color--orange-700 demo-palette--dark-text">700</div>
324 <div class="demo-palette-color mdl-color--orange-800">800</div>
325 <div class="demo-palette-color mdl-color--orange-900">900</div>
326 <div class="demo-palette-color mdl-color--orange-A100 demo-palette--dark-text">A100</div>
327 <div class="demo-palette-color mdl-color--orange-A200 demo-palette--dark-text">A200</div>
328 <div class="demo-palette-color mdl-color--orange-A400 demo-palette--dark-text">A400</div>
329 <div class="demo-palette-color mdl-color--orange-A700 demo-palette--dark-text">A700</div>
330 </div>
331
332 <div class="demo-palette">
333 <div class="demo-palette-heading mdl-color--deep-orange-500">
334 <div class="demo-palette-name">Deep Orange</div>
335
336 500
337 </div>
338 <div class="demo-palette-color mdl-color--deep-orange-50 demo-palette--dark-text">50</div>
339 <div class="demo-palette-color mdl-color--deep-orange-100 demo-palette--dark-text">100</div>
340 <div class="demo-palette-color mdl-color--deep-orange-200 demo-palette--dark-text">200</div>
341 <div class="demo-palette-color mdl-color--deep-orange-300 demo-palette--dark-text">300</div>
342 <div class="demo-palette-color mdl-color--deep-orange-400 demo-palette--dark-text">400</div>
343 <div class="demo-palette-color mdl-color--deep-orange-500">500</div>
344 <div class="demo-palette-color mdl-color--deep-orange-600">600</div>
345 <div class="demo-palette-color mdl-color--deep-orange-700">700</div>
346 <div class="demo-palette-color mdl-color--deep-orange-800">800</div>
347 <div class="demo-palette-color mdl-color--deep-orange-900">900</div>
348 <div class="demo-palette-color mdl-color--deep-orange-A100 demo-palette--dark-text">A100</div>
349 <div class="demo-palette-color mdl-color--deep-orange-A200 demo-palette--dark-text">A200</div>
350 <div class="demo-palette-color mdl-color--deep-orange-A400">A400</div>
351 <div class="demo-palette-color mdl-color--deep-orange-A700">A700</div>
352 </div>
353
354 <div class="demo-palette">
355 <div class="demo-palette-heading mdl-color--brown-500">
356 <div class="demo-palette-name">Brown</div>
357
358 500
359 </div>
360 <div class="demo-palette-color mdl-color--brown-50 demo-palette--dark-text">50</div>
361 <div class="demo-palette-color mdl-color--brown-100 demo-palette--dark-text">100</div>
362 <div class="demo-palette-color mdl-color--brown-200 demo-palette--dark-text">200</div>
363 <div class="demo-palette-color mdl-color--brown-300">300</div>
364 <div class="demo-palette-color mdl-color--brown-400">400</div>
365 <div class="demo-palette-color mdl-color--brown-500">500</div>
366 <div class="demo-palette-color mdl-color--brown-600">600</div>
367 <div class="demo-palette-color mdl-color--brown-700">700</div>
368 <div class="demo-palette-color mdl-color--brown-800">800</div>
369 <div class="demo-palette-color mdl-color--brown-900">900</div>
370 </div>
371
372 <div class="demo-palette">
373 <div class="demo-palette-heading mdl-color--grey-500 demo-palette--dark-text">
374 <div class="demo-palette-name">Grey</div>
375
376 500
377 </div>
378 <div class="demo-palette-color mdl-color--grey-50 demo-palette--dark-text">50</div>
379 <div class="demo-palette-color mdl-color--grey-100 demo-palette--dark-text">100</div>
380 <div class="demo-palette-color mdl-color--grey-200 demo-palette--dark-text">200</div>
381 <div class="demo-palette-color mdl-color--grey-300 demo-palette--dark-text">300</div>
382 <div class="demo-palette-color mdl-color--grey-400 demo-palette--dark-text">400</div>
383 <div class="demo-palette-color mdl-color--grey-500 demo-palette--dark-text">500</div>
384 <div class="demo-palette-color mdl-color--grey-600">600</div>
385 <div class="demo-palette-color mdl-color--grey-700">700</div>
386 <div class="demo-palette-color mdl-color--grey-800">800</div>
387 <div class="demo-palette-color mdl-color--grey-900">900</div>
388 </div>
389
390 <div class="demo-palette">
391 <div class="demo-palette-heading mdl-color--blue-grey-500">
392 <div class="demo-palette-name">Blue Grey</div>
393
394 500
395 </div>
396 <div class="demo-palette-color mdl-color--blue-grey-50 demo-palette--dark-text">50</div>
397 <div class="demo-palette-color mdl-color--blue-grey-100 demo-palette--dark-text">100</div>
398 <div class="demo-palette-color mdl-color--blue-grey-200 demo-palette--dark-text">200</div>
399 <div class="demo-palette-color mdl-color--blue-grey-300 demo-palette--dark-text">300</div>
400 <div class="demo-palette-color mdl-color--blue-grey-400">400</div>
401 <div class="demo-palette-color mdl-color--blue-grey-500">500</div>
402 <div class="demo-palette-color mdl-color--blue-grey-600">600</div>
403 <div class="demo-palette-color mdl-color--blue-grey-700">700</div>
404 <div class="demo-palette-color mdl-color--blue-grey-800">800</div>
405 <div class="demo-palette-color mdl-color--blue-grey-900">900</div>
406 </div>
407
408 <div class="demo-palette">
409 <div class="demo-palette-heading demo-palette-single mdl-color--black">
410 <div class="demo-palette-name">Black</div>
411 </div>
412 <div class="demo-palette-heading demo-palette-single mdl-color--white demo-palette--dark-text">
413 <div class="demo-palette-name">White</div>
414 </div>
415 </div>
416
417 </div>