Created
June 28, 2014 13:41
-
-
Save axyz/e469bad6bcf181711bfb to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.8) | |
// Compass (v1.0.0.alpha.19) | |
// ---- | |
$_gmd-colors: ( | |
red: ( | |
50: #fde0dc, | |
100: #f9bdbb, | |
200: #f69988, | |
300: #f36c60, | |
400: #e84e40, | |
500: #e51c23, | |
600: #dd191d, | |
700: #d01716, | |
800: #c41411, | |
900: #b0120a, | |
A100: #ff7997, | |
A200: #ff5177, | |
A400: #ff2d6f, | |
A700: #e00032 | |
), | |
pink: ( | |
50: #fce4ec, | |
100: #f8bbd0, | |
200: #f48fb1, | |
300: #f06292, | |
400: #ec407a, | |
500: #e91e63, | |
600: #d81b60, | |
700: #c2185b, | |
800: #ad1457, | |
900: #880e4f, | |
A100: #ff80ab, | |
A200: #ff4081, | |
A400: #f50057, | |
A700: #c51162 | |
), | |
purple: ( | |
50: #f3e5f5, | |
100: #e1bee7, | |
200: #ce93d8, | |
300: #ba68c8, | |
400: #ab47bc, | |
500: #9c27b0, | |
600: #8e24aa, | |
700: #7b1fa2, | |
800: #6a1b9a, | |
900: #4a148c, | |
A100: #ea80fc, | |
A200: #e040fb, | |
A400: #d500f9, | |
A700: #aa00ff | |
), | |
deep-purple: ( | |
50: #ede7f6, | |
100: #d1c4e9, | |
200: #b39ddb, | |
300: #9575cd, | |
400: #7e57c2, | |
500: #673ab7, | |
600: #5e35b1, | |
700: #512da8, | |
800: #4527a0, | |
900: #311b92, | |
A100: #b388ff, | |
A200: #7c4dff, | |
A400: #651fff, | |
A700: #6200ea | |
), | |
indigo: ( | |
50: #e8eaf6, | |
100: #c5cae9, | |
200: #9fa8da, | |
300: #7986cb, | |
400: #5c6bc0, | |
500: #3f51b5, | |
600: #3949ab, | |
700: #303f9f, | |
800: #283593, | |
900: #1a237e, | |
A100: #8c9eff, | |
A200: #536dfe, | |
A400: #3d5afe, | |
A700: #304ffe | |
), | |
blue: ( | |
50: #e7e9fd, | |
100: #d0d9ff, | |
200: #afbfff, | |
300: #91a7ff, | |
400: #738ffe, | |
500: #5677fc, | |
600: #4e6cef, | |
700: #455ede, | |
800: #3b50ce, | |
900: #2a36b1, | |
A100: #a6baff, | |
A200: #6889ff, | |
A400: #4d73ff, | |
A700: #4d69ff | |
), | |
light-blue: ( | |
50: #e1f5fe, | |
100: #b3e5fc, | |
200: #81d4fa, | |
300: #4fc3f7, | |
400: #29b6f6, | |
500: #03a9f4, | |
600: #039be5, | |
700: #0288d1, | |
800: #0277bd, | |
900: #01579b, | |
A100: #80d8ff, | |
A200: #40c4ff, | |
A400: #00b0ff, | |
A700: #0091ea | |
), | |
cyan: ( | |
50: #e0f7fa, | |
100: #b2ebf2, | |
200: #80deea, | |
300: #4dd0e1, | |
400: #26c6da, | |
500: #00bcd4, | |
600: #00acc1, | |
700: #0097a7, | |
800: #00838f, | |
900: #006064, | |
A100: #84ffff, | |
A200: #18ffff, | |
A400: #00e5ff, | |
A700: #00b8d4 | |
), | |
teal: ( | |
50: #e0f2f1, | |
100: #b2dfdb, | |
200: #80cbc4, | |
300: #4db6ac, | |
400: #26a69a, | |
500: #009688, | |
600: #00897b, | |
700: #00796b, | |
800: #00695c, | |
900: #004d40, | |
A100: #a7ffeb, | |
A200: #64ffda, | |
A400: #1de9b6, | |
A700: #00bfa5 | |
), | |
green: ( | |
50: #d0f8ce, | |
100: #a3e9a4, | |
200: #72d572, | |
300: #42bd41, | |
400: #2baf2b, | |
500: #259b24, | |
600: #0a8f08, | |
700: #0a7e07, | |
800: #056f00, | |
900: #0d5302, | |
A100: #a2f78d, | |
A200: #5af158, | |
A400: #14e715, | |
A700: #12c700 | |
), | |
light-green: ( | |
50: #f1f8e9, | |
100: #dcedc8, | |
200: #c5e1a5, | |
300: #aed581, | |
400: #9ccc65, | |
500: #8bc34a, | |
600: #7cb342, | |
700: #689f38, | |
800: #558b2f, | |
900: #33691e, | |
A100: #ccff90, | |
A200: #b2ff59, | |
A400: #76ff03, | |
A700: #64dd17 | |
), | |
lime: ( | |
50: #f9fbe7, | |
100: #f0f4c3, | |
200: #e6ee9c, | |
300: #dce775, | |
400: #d4e157, | |
500: #cddc39, | |
600: #c0ca33, | |
700: #afb42b, | |
800: #9e9d24, | |
900: #827717, | |
A100: #f4ff81, | |
A200: #eeff41, | |
A400: #c6ff00, | |
A700: #aeea00 | |
), | |
yellow: ( | |
50: #fffde7, | |
100: #fff9c4, | |
200: #fff59d, | |
300: #fff176, | |
400: #ffee58, | |
500: #ffeb3b, | |
600: #fdd835, | |
700: #fbc02d, | |
800: #f9a825, | |
900: #f57f17, | |
A100: #ffff8d, | |
A200: #ffff00, | |
A400: #ffea00, | |
A700: #ffd600 | |
), | |
amber: ( | |
50: #fff8e1, | |
100: #ffecb3, | |
200: #ffe082, | |
300: #ffd54f, | |
400: #ffca28, | |
500: #ffc107, | |
600: #ffb300, | |
700: #ffa000, | |
800: #ff8f00, | |
900: #ff6f00, | |
A100: #ffe57f, | |
A200: #ffd740, | |
A400: #ffc400, | |
A700: #ffab00 | |
), | |
orange: ( | |
50: #fff3e0, | |
100: #ffe0b2, | |
200: #ffcc80, | |
300: #ffb74d, | |
400: #ffa726, | |
500: #ff9800, | |
600: #fb8c00, | |
700: #f57c00, | |
800: #ef6c00, | |
900: #e65100, | |
A100: #ffd180, | |
A200: #ffab40, | |
A400: #ff9100, | |
A700: #ff6d00 | |
), | |
deep-orange: ( | |
50: #fbe9e7, | |
100: #ffccbc, | |
200: #ffab91, | |
300: #ff8a65, | |
400: #ff7043, | |
500: #ff5722, | |
600: #f4511e, | |
700: #e64a19, | |
800: #d84315, | |
900: #bf360c, | |
A100: #ff9e80, | |
A200: #ff6e40, | |
A400: #ff3d00, | |
A700: #dd2c00 | |
), | |
brown: ( | |
50: #efebe9, | |
100: #d7ccc8, | |
200: #bcaaa4, | |
300: #a1887f, | |
400: #8d6e63, | |
500: #795548, | |
600: #6d4c41, | |
700: #5d4037, | |
800: #4e342e, | |
900: #3e2723 | |
// no accents for brown colors | |
), | |
grey: ( | |
50: #fafafa, | |
100: #f5f5f5, | |
200: #eeeeee, | |
300: #e0e0e0, | |
400: #bdbdbd, | |
500: #9e9e9e, | |
600: #757575, | |
700: #616161, | |
800: #424242, | |
900: #212121, | |
1000: #000000, | |
0: #ffffff // originally called 1000 | |
), | |
blue-grey: ( | |
50: #eceff1, | |
100: #cfd8dc, | |
200: #b0bec5, | |
300: #90a4ae, | |
400: #78909c, | |
500: #607d8b, | |
600: #546e7a, | |
700: #455a64, | |
800: #37474f, | |
900: #263238 | |
// no accent for blue-grey | |
) | |
); | |
@function gmd-color($color, $value: 500) { | |
@if map-has-key($_gmd-colors, $color) { | |
$color: map-get($_gmd-colors, $color); | |
@if map-has-key($color, $value) { | |
@return map-get($color, $value); | |
} | |
@warn "invalid value, using 500 as default"; | |
@return map-get($color, 500); | |
} | |
@warn "invalid color, using #ff0000 as default"; | |
@return #ff0000; | |
} | |
// Default palette | |
$gmd-primary: gmd-color(indigo, 500); | |
$gmd-primary-dark: gmd-color(indigo, 700); | |
$gmd-primary-light: gmd-color(indigo, 100); | |
$gmd-accent: gmd-color(pink, A200); | |
$gmd-accent-dark: gmd-color(pink, A400); | |
$gmd-accent-light: gmd-color(pink, A100); | |
@mixin gmd-palette($primary: red, $accent: pink) { | |
// Generate a color palette based on $primary and $accent colors | |
@if map-has-key($_gmd-colors, $primary) and map-has-key($_gmd-colors, $accent) { | |
$gmd-primary: gmd-color($primary, 500); | |
$gmd-primary-dark: gmd-color($primary, 700); | |
$gmd-primary-light: gmd-color($primary, 100); | |
$gmd-accent: gmd-color($accent, A200); | |
$gmd-accent-dark: gmd-color($accent, A400); | |
$gmd-accent-light: gmd-color($accent, A100); | |
} | |
@warn "invalid colors using defaults"; | |
} | |
$_gmd-alphas: ( | |
dividers: .12, | |
hint-text: .26, | |
secondary-text: .54, | |
icons: .54, | |
text: .87 | |
); | |
@function gmd-alpha($type) { | |
@if map-has-key($_gmd-alphas, $type) { | |
@return map-get($_gmd-alphas, $type); | |
} | |
@warn "invalid alpha type, using default 100%"; | |
@return 1; | |
} | |
@function gmd-alpha-color($color, $type) { | |
@if map-has-key($_gmd-alphas, $type) { | |
@return rgba($color, map-get($_gmd-alphas, $type)); | |
} | |
@warn "invalid alpha type, using default 100%"; | |
@return rgba($color, 1); | |
} | |
// Default alpha palette based on black | |
$gmd-dividers: gmd-alpha-color(black, dividers); | |
$gmd-hint-text: gmd-alpha-color(black, hint-text); | |
$gmd-secondary-text: gmd-alpha-color(black, secondary-text); | |
$gmd-icons: gmd-alpha-color(black, icons); | |
$gmd-text: gmd-alpha-color(black, text); | |
@mixin gmd-alpha-palette($color) { | |
// Generate an alpha palette based on $color | |
$gmd-dividers: gmd-alpha-color($color, dividers); | |
$gmd-hint-text: gmd-alpha-color($color, hint-text); | |
$gmd-secondary-text: gmd-alpha-color($color, secondary-text); | |
$gmd-icons: gmd-alpha-color($color, icons); | |
$gmd-text: gmd-alpha-color($color, text); | |
} | |
// TEST | |
@include gmd-palette(blue, lime); | |
@include gmd-alpha-palette(gmd-color(indigo)); | |
body { | |
background-color: gmd-color(blue-grey, 300); | |
color: $gmd-accent-light; | |
border-color: rgba(0,0,0, gmd-alpha(dividers)); | |
} | |
h1 { | |
color: $gmd-text; | |
} | |
h2 { | |
color: gmd-alpha-color(black, text); | |
background-color: gmd-alpha-color(gmd-color(indigo, 900), dividers); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #90a4ae; | |
color: #f4ff81; | |
border-color: rgba(0, 0, 0, 0.12); | |
} | |
h1 { | |
color: rgba(63, 81, 181, 0.87); | |
} | |
h2 { | |
color: rgba(0, 0, 0, 0.87); | |
background-color: rgba(26, 35, 126, 0.12); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment