Skip to content

Instantly share code, notes, and snippets.

@benjamincharity
Created May 29, 2017 16:37
Show Gist options
  • Save benjamincharity/76d2060258a9ba42ef5c5445b256f3d2 to your computer and use it in GitHub Desktop.
Save benjamincharity/76d2060258a9ba42ef5c5445b256f3d2 to your computer and use it in GitHub Desktop.
Manage colors via a method and a map.
// 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