UNPKG

14.2 kBSCSSView Raw
1// Color palettes from the Material Design spec.
2// See https://www.google.com/design/spec/style/color.html
3
4$md-red: (
5 50: #ffebee,
6 100: #ffcdd2,
7 200: #ef9a9a,
8 300: #e57373,
9 400: #ef5350,
10 500: #f44336,
11 600: #e53935,
12 700: #d32f2f,
13 800: #c62828,
14 900: #b71c1c,
15 A100: #ff8a80,
16 A200: #ff5252,
17 A400: #ff1744,
18 A700: #d50000,
19);
20
21$md-pink: (
22 50: #fce4ec,
23 100: #f8bbd0,
24 200: #f48fb1,
25 300: #f06292,
26 400: #ec407a,
27 500: #e91e63,
28 600: #d81b60,
29 700: #c2185b,
30 800: #ad1457,
31 900: #880e4f,
32 A100: #ff80ab,
33 A200: #ff4081,
34 A400: #f50057,
35 A700: #c51162,
36);
37
38$md-purple: (
39 50: #f3e5f5,
40 100: #e1bee7,
41 200: #ce93d8,
42 300: #ba68c8,
43 400: #ab47bc,
44 500: #9c27b0,
45 600: #8e24aa,
46 700: #7b1fa2,
47 800: #6a1b9a,
48 900: #4a148c,
49 A100: #ea80fc,
50 A200: #e040fb,
51 A400: #d500f9,
52 A700: #aa00ff,
53);
54
55$md-deep-purple: (
56 50: #ede7f6,
57 100: #d1c4e9,
58 200: #b39ddb,
59 300: #9575cd,
60 400: #7e57c2,
61 500: #673ab7,
62 600: #5e35b1,
63 700: #512da8,
64 800: #4527a0,
65 900: #311b92,
66 A100: #b388ff,
67 A200: #7c4dff,
68 A400: #651fff,
69 A700: #6200ea,
70);
71
72$md-indigo: (
73 50: #e8eaf6,
74 100: #c5cae9,
75 200: #9fa8da,
76 300: #7986cb,
77 400: #5c6bc0,
78 500: #3f51b5,
79 600: #3949ab,
80 700: #303f9f,
81 800: #283593,
82 900: #1a237e,
83 A100: #8c9eff,
84 A200: #536dfe,
85 A400: #3d5afe,
86 A700: #304ffe,
87);
88
89$md-blue: (
90 50: #e3f2fd,
91 100: #bbdefb,
92 200: #90caf9,
93 300: #64b5f6,
94 400: #42a5f5,
95 500: #2196f3,
96 600: #1e88e5,
97 700: #1976d2,
98 800: #1565c0,
99 900: #0d47a1,
100 A100: #82b1ff,
101 A200: #448aff,
102 A400: #2979ff,
103 A700: #2962ff,
104);
105
106$md-light-blue: (
107 50: #e1f5fe,
108 100: #b3e5fc,
109 200: #81d4fa,
110 300: #4fc3f7,
111 400: #29b6f6,
112 500: #03a9f4,
113 600: #039be5,
114 700: #0288d1,
115 800: #0277bd,
116 900: #01579b,
117 A100: #80d8ff,
118 A200: #40c4ff,
119 A400: #00b0ff,
120 A700: #0091ea,
121);
122
123$md-cyan: (
124 50: #e0f7fa,
125 100: #b2ebf2,
126 200: #80deea,
127 300: #4dd0e1,
128 400: #26c6da,
129 500: #00bcd4,
130 600: #00acc1,
131 700: #0097a7,
132 800: #00838f,
133 900: #006064,
134 A100: #84ffff,
135 A200: #18ffff,
136 A400: #00e5ff,
137 A700: #00b8d4,
138);
139
140$md-teal: (
141 50: #e0f2f1,
142 100: #b2dfdb,
143 200: #80cbc4,
144 300: #4db6ac,
145 400: #26a69a,
146 500: #009688,
147 600: #00897b,
148 700: #00796b,
149 800: #00695c,
150 900: #004d40,
151 A100: #a7ffeb,
152 A200: #64ffda,
153 A400: #1de9b6,
154 A700: #00bfa5,
155);
156
157$md-green: (
158 50: #e8f5e9,
159 100: #c8e6c9,
160 200: #a5d6a7,
161 300: #81c784,
162 400: #66bb6a,
163 500: #4caf50,
164 600: #43a047,
165 700: #388e3c,
166 800: #2e7d32,
167 900: #1b5e20,
168 A100: #b9f6ca,
169 A200: #69f0ae,
170 A400: #00e676,
171 A700: #00c853,
172);
173
174$md-light-green: (
175 50: #f1f8e9,
176 100: #dcedc8,
177 200: #c5e1a5,
178 300: #aed581,
179 400: #9ccc65,
180 500: #8bc34a,
181 600: #7cb342,
182 700: #689f38,
183 800: #558b2f,
184 900: #33691e,
185 A100: #ccff90,
186 A200: #b2ff59,
187 A400: #76ff03,
188 A700: #64dd17,
189);
190
191$md-lime: (
192 50: #f9fbe7,
193 100: #f0f4c3,
194 200: #e6ee9c,
195 300: #dce775,
196 400: #d4e157,
197 500: #cddc39,
198 600: #c0ca33,
199 700: #afb42b,
200 800: #9e9d24,
201 900: #827717,
202 A100: #f4ff81,
203 A200: #eeff41,
204 A400: #c6ff00,
205 A700: #aeea00,
206);
207
208$md-yellow: (
209 50: #fffde7,
210 100: #fff9c4,
211 200: #fff59d,
212 300: #fff176,
213 400: #ffee58,
214 500: #ffeb3b,
215 600: #fdd835,
216 700: #fbc02d,
217 800: #f9a825,
218 900: #f57f17,
219 A100: #ffff8d,
220 A200: #ffff00,
221 A400: #ffea00,
222 A700: #ffd600,
223);
224
225$md-amber: (
226 50: #fff8e1,
227 100: #ffecb3,
228 200: #ffe082,
229 300: #ffd54f,
230 400: #ffca28,
231 500: #ffc107,
232 600: #ffb300,
233 700: #ffa000,
234 800: #ff8f00,
235 900: #ff6f00,
236 A100: #ffe57f,
237 A200: #ffd740,
238 A400: #ffc400,
239 A700: #ffab00,
240);
241
242$md-orange: (
243 50: #fff3e0,
244 100: #ffe0b2,
245 200: #ffcc80,
246 300: #ffb74d,
247 400: #ffa726,
248 500: #ff9800,
249 600: #fb8c00,
250 700: #f57c00,
251 800: #ef6c00,
252 900: #e65100,
253 A100: #ffd180,
254 A200: #ffab40,
255 A400: #ff9100,
256 A700: #ff6d00,
257);
258
259$md-deep-orange: (
260 50: #fbe9e7,
261 100: #ffccbc,
262 200: #ffab91,
263 300: #ff8a65,
264 400: #ff7043,
265 500: #ff5722,
266 600: #f4511e,
267 700: #e64a19,
268 800: #d84315,
269 900: #bf360c,
270 A100: #ff9e80,
271 A200: #ff6e40,
272 A400: #ff3d00,
273 A700: #dd2c00,
274);
275
276$md-brown: (
277 50: #efebe9,
278 100: #d7ccc8,
279 200: #bcaaa4,
280 300: #a1887f,
281 400: #8d6e63,
282 500: #795548,
283 600: #6d4c41,
284 700: #5d4037,
285 800: #4e342e,
286 900: #3e2723,
287 A100: #d7ccc8,
288 A200: #bcaaa4,
289 A400: #8d6e63,
290 A700: #5d4037,
291);
292
293$md-grey: (
294 0: #ffffff,
295 50: #fafafa,
296 100: #f5f5f5,
297 200: #eeeeee,
298 300: #e0e0e0,
299 400: #bdbdbd,
300 500: #9e9e9e,
301 600: #757575,
302 700: #616161,
303 800: #424242,
304 900: #212121,
305 1000: #000000,
306 A100: #ffffff,
307 A200: #eeeeee,
308 A400: #bdbdbd,
309 A700: #616161,
310);
311
312$md-blue-grey: (
313 50: #eceff1,
314 100: #cfd8dc,
315 200: #b0bec5,
316 300: #90a4ae,
317 400: #78909c,
318 500: #607d8b,
319 600: #546e7a,
320 700: #455a64,
321 800: #37474f,
322 900: #263238,
323 A100: #cfd8dc,
324 A200: #b0bec5,
325 A400: #78909c,
326 A700: #455a64,
327);
328
329
330// Background palette for light themes.
331$md-light-theme-background: (
332 status-bar: map_get($md-grey, 300),
333 app-bar: map_get($md-grey, 100),
334 background: map_get($md-grey, 50),
335 hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
336 card: white,
337 dialog: white,
338 disabled-button: rgba(black, 0.12)
339);
340
341// Background palette for dark themes.
342$md-dark-theme-background: (
343 status-bar: black,
344 app-bar: map_get($md-grey, 900),
345 background: #303030,
346 hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
347 card: map_get($md-grey, 800),
348 dialog: map_get($md-grey, 800),
349 disabled-button: rgba(white, 0.12)
350);
351
352// Foreground palette for light themes.
353$md-light-theme-foreground: (
354 base: black,
355 divider: rgba(black, 0.12),
356 dividers: rgba(black, 0.12),
357 disabled: rgba(black, 0.38),
358 disabled-button: rgba(black, 0.38),
359 disabled-text: rgba(black, 0.38),
360 hint-text: rgba(black, 0.38),
361 secondary-text: rgba(black, 0.54),
362 icon: rgba(black, 0.54),
363 icons: rgba(black, 0.54),
364 text: rgba(black, 0.87)
365);
366
367// Foreground palette for dark themes.
368$md-dark-theme-foreground: (
369 base: white,
370 divider: rgba(white, 0.12),
371 dividers: rgba(white, 0.12),
372 disabled: rgba(white, 0.3),
373 disabled-button: rgba(white, 0.3),
374 disabled-text: rgba(white, 0.3),
375 hint-text: rgba(white, 0.3),
376 secondary-text: rgba(white, 0.7),
377 icon: white,
378 icons: white,
379 text: white
380);
381
382
383
384// TODO(jelbourn): Do we actually need these any more? Updates to the spec about how foreground
385// colors are used may have made this obsolete.
386
387// Contrast colors. These are hard-coded because it is too difficult (probably impossible) to
388// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
389// While the contrast colors in the spec are not perscriptive, we will use them for convenience.
390$black-87-opacity: rgba(black, 0.870588);
391$white-87-opacity: rgba(white, 0.870588);
392
393$md-contrast-palettes: (
394 $md-red: (
395 50: $black-87-opacity,
396 100: $black-87-opacity,
397 200: $black-87-opacity,
398 300: $black-87-opacity,
399 400: $black-87-opacity,
400 500: white,
401 600: white,
402 700: white,
403 800: $white-87-opacity,
404 900: $white-87-opacity,
405 A100: $black-87-opacity,
406 A200: white,
407 A400: white,
408 A700: white,
409 ),
410 $md-pink: (
411 50: $black-87-opacity,
412 100: $black-87-opacity,
413 200: $black-87-opacity,
414 300: $black-87-opacity,
415 400: $black-87-opacity,
416 500: white,
417 600: white,
418 700: $white-87-opacity,
419 800: $white-87-opacity,
420 900: $white-87-opacity,
421 A100: $black-87-opacity,
422 A200: white,
423 A400: white,
424 A700: white,
425 ),
426 $md-purple: (
427 50: $black-87-opacity,
428 100: $black-87-opacity,
429 200: $black-87-opacity,
430 300: white,
431 400: white,
432 500: $white-87-opacity,
433 600: $white-87-opacity,
434 700: $white-87-opacity,
435 800: $white-87-opacity,
436 900: $white-87-opacity,
437 A100: $black-87-opacity,
438 A200: white,
439 A400: white,
440 A700: white,
441 ),
442 $md-deep-purple: (
443 50: $black-87-opacity,
444 100: $black-87-opacity,
445 200: $black-87-opacity,
446 300: white,
447 400: white,
448 500: $white-87-opacity,
449 600: $white-87-opacity,
450 700: $white-87-opacity,
451 800: $white-87-opacity,
452 900: $white-87-opacity,
453 A100: $black-87-opacity,
454 A200: white,
455 A400: $white-87-opacity,
456 A700: $white-87-opacity,
457 ),
458 $md-indigo: (
459 50: $black-87-opacity,
460 100: $black-87-opacity,
461 200: $black-87-opacity,
462 300: white,
463 400: white,
464 500: $white-87-opacity,
465 600: $white-87-opacity,
466 700: $white-87-opacity,
467 800: $white-87-opacity,
468 900: $white-87-opacity,
469 A100: $black-87-opacity,
470 A200: white,
471 A400: white,
472 A700: $white-87-opacity,
473 ),
474 $md-blue: (
475 50: $black-87-opacity,
476 100: $black-87-opacity,
477 200: $black-87-opacity,
478 300: $black-87-opacity,
479 400: $black-87-opacity,
480 500: white,
481 600: white,
482 700: white,
483 800: $white-87-opacity,
484 900: $white-87-opacity,
485 A100: $black-87-opacity,
486 A200: white,
487 A400: white,
488 A700: white,
489 ),
490 $md-light-blue: (
491 50: $black-87-opacity,
492 100: $black-87-opacity,
493 200: $black-87-opacity,
494 300: $black-87-opacity,
495 400: $black-87-opacity,
496 500: white,
497 600: white,
498 700: white,
499 800: white,
500 900: $white-87-opacity,
501 A100: $black-87-opacity,
502 A200: $black-87-opacity,
503 A400: $black-87-opacity,
504 A700: white,
505 ),
506 $md-cyan: (
507 50: $black-87-opacity,
508 100: $black-87-opacity,
509 200: $black-87-opacity,
510 300: $black-87-opacity,
511 400: $black-87-opacity,
512 500: white,
513 600: white,
514 700: white,
515 800: white,
516 900: $white-87-opacity,
517 A100: $black-87-opacity,
518 A200: $black-87-opacity,
519 A400: $black-87-opacity,
520 A700: $black-87-opacity,
521 ),
522 $md-teal: (
523 50: $black-87-opacity,
524 100: $black-87-opacity,
525 200: $black-87-opacity,
526 300: $black-87-opacity,
527 400: $black-87-opacity,
528 500: white,
529 600: white,
530 700: white,
531 800: $white-87-opacity,
532 900: $white-87-opacity,
533 A100: $black-87-opacity,
534 A200: $black-87-opacity,
535 A400: $black-87-opacity,
536 A700: $black-87-opacity,
537 ),
538 $md-green: (
539 50: $black-87-opacity,
540 100: $black-87-opacity,
541 200: $black-87-opacity,
542 300: $black-87-opacity,
543 400: $black-87-opacity,
544 500: white,
545 600: white,
546 700: white,
547 800: $white-87-opacity,
548 900: $white-87-opacity,
549 A100: $black-87-opacity,
550 A200: $black-87-opacity,
551 A400: $black-87-opacity,
552 A700: $black-87-opacity,
553 ),
554 $md-light-green: (
555 50: $black-87-opacity,
556 100: $black-87-opacity,
557 200: $black-87-opacity,
558 300: $black-87-opacity,
559 400: $black-87-opacity,
560 500: $black-87-opacity,
561 600: $black-87-opacity,
562 700: $black-87-opacity,
563 800: white,
564 900: white,
565 A100: $black-87-opacity,
566 A200: $black-87-opacity,
567 A400: $black-87-opacity,
568 A700: $black-87-opacity,
569 ),
570 $md-lime: (
571 50: $black-87-opacity,
572 100: $black-87-opacity,
573 200: $black-87-opacity,
574 300: $black-87-opacity,
575 400: $black-87-opacity,
576 500: $black-87-opacity,
577 600: $black-87-opacity,
578 700: $black-87-opacity,
579 800: $black-87-opacity,
580 900: white,
581 A100: $black-87-opacity,
582 A200: $black-87-opacity,
583 A400: $black-87-opacity,
584 A700: $black-87-opacity,
585 ),
586 $md-yellow: (
587 50: $black-87-opacity,
588 100: $black-87-opacity,
589 200: $black-87-opacity,
590 300: $black-87-opacity,
591 400: $black-87-opacity,
592 500: $black-87-opacity,
593 600: $black-87-opacity,
594 700: $black-87-opacity,
595 800: $black-87-opacity,
596 900: $black-87-opacity,
597 A100: $black-87-opacity,
598 A200: $black-87-opacity,
599 A400: $black-87-opacity,
600 A700: $black-87-opacity,
601 ),
602 $md-amber: (
603 50: $black-87-opacity,
604 100: $black-87-opacity,
605 200: $black-87-opacity,
606 300: $black-87-opacity,
607 400: $black-87-opacity,
608 500: $black-87-opacity,
609 600: $black-87-opacity,
610 700: $black-87-opacity,
611 800: $black-87-opacity,
612 900: $black-87-opacity,
613 A100: $black-87-opacity,
614 A200: $black-87-opacity,
615 A400: $black-87-opacity,
616 A700: $black-87-opacity,
617 ),
618 $md-orange: (
619 50: $black-87-opacity,
620 100: $black-87-opacity,
621 200: $black-87-opacity,
622 300: $black-87-opacity,
623 400: $black-87-opacity,
624 500: $black-87-opacity,
625 600: $black-87-opacity,
626 700: $black-87-opacity,
627 800: white,
628 900: white,
629 A100: $black-87-opacity,
630 A200: $black-87-opacity,
631 A400: $black-87-opacity,
632 A700: black,
633 ),
634 $md-deep-orange: (
635 50: $black-87-opacity,
636 100: $black-87-opacity,
637 200: $black-87-opacity,
638 300: $black-87-opacity,
639 400: $black-87-opacity,
640 500: white,
641 600: white,
642 700: white,
643 800: white,
644 900: white,
645 A100: $black-87-opacity,
646 A200: $black-87-opacity,
647 A400: white,
648 A700: white,
649 ),
650 $md-brown: (
651 50: $black-87-opacity,
652 100: $black-87-opacity,
653 200: $black-87-opacity,
654 300: white,
655 400: white,
656 500: $white-87-opacity,
657 600: $white-87-opacity,
658 700: $white-87-opacity,
659 800: $white-87-opacity,
660 900: $white-87-opacity,
661 A100: $black-87-opacity,
662 A200: $black-87-opacity,
663 A400: white,
664 A700: $white-87-opacity,
665 ),
666 $md-grey: (
667 0: $black-87-opacity,
668 50: $black-87-opacity,
669 100: $black-87-opacity,
670 200: $black-87-opacity,
671 300: $black-87-opacity,
672 400: $black-87-opacity,
673 500: $black-87-opacity,
674 600: $white-87-opacity,
675 700: $white-87-opacity,
676 800: $white-87-opacity,
677 900: $white-87-opacity,
678 1000: $white-87-opacity,
679 A100: $black-87-opacity,
680 A200: $black-87-opacity,
681 A400: $black-87-opacity,
682 A700: $white-87-opacity,
683 ),
684 $md-blue-grey: (
685 50: $black-87-opacity,
686 100: $black-87-opacity,
687 200: $black-87-opacity,
688 300: $black-87-opacity,
689 400: white,
690 500: white,
691 600: $white-87-opacity,
692 700: $white-87-opacity,
693 800: $white-87-opacity,
694 900: $white-87-opacity,
695 A100: $black-87-opacity,
696 A200: $black-87-opacity,
697 A400: white,
698 A700: $white-87-opacity,
699 ),
700);