Created
May 29, 2017 16:37
-
-
Save benjamincharity/76d2060258a9ba42ef5c5445b256f3d2 to your computer and use it in GitHub Desktop.
Manage colors via a method and a map.
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
// Palettes color map | |
$palettes: ( | |
mapPrimary: ( | |
xlight: material-color('indigo', '200'), // #9FA8DA | |
light: material-color('indigo', '500'), // #3F51B5 | |
base: material-color('indigo', '700'), // #303F9F | |
dark: material-color('indigo', '900') // #1A237E | |
), | |
mapAccent: ( | |
light: material-color('cyan', '100'), // #B2EBF2 | |
base: material-color('cyan', '500'), // #00BCD4 | |
dark: material-color('cyan', '700') // #0097A7 | |
), | |
mapWarn: ( | |
light: material-color('red', '100'), // #FFCDD2 | |
base: material-color('red', 'a400'), // #FF1744 | |
dark: material-color('red', '700') // #D32F2F | |
), | |
mapWhite: ( | |
base: #fff, | |
dark: material-color('grey', '200') // #EEEEEE | |
), | |
mapBlack: ( | |
base: #000 | |
), | |
mapGray: ( | |
xlight: material-color('grey', '100'), // #F5F5F5 | |
light: material-color('grey', '300'), // #E0E0E0 | |
base: material-color('grey', '500'), // #9E9E9E | |
dark: material-color('grey', '800'), // #424242 | |
xdark: material-color('grey', '900') // #212121 | |
), | |
mapGreen: ( | |
base: material-color('green', '500') // #4CAF50 | |
) | |
); | |
// Allow access via function | |
@function palette($palette, $tone: 'base') { | |
@return map-get(map-get($palettes, $palette), $tone); | |
} | |
// Use a color | |
.foo { | |
border-bottom: 2px solid palette(mapGray, light); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment