Skip to content

Instantly share code, notes, and snippets.

@iamskok

iamskok/Google Material design palette - Sassy-colors

Last active August 31, 2015 23:31
Show Gist options
  • Save iamskok/ae041ed388b87eacba0d to your computer and use it in GitHub Desktop.
Save iamskok/ae041ed388b87eacba0d to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
Google Material design palette - Sassy-colors
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
///
/// Google Material Color Palette
///
/// @type {Map} color palette
///
/// @source http://www.google.com/design/spec/style/color.html
///
$google-material-palette: (
'red': (
'50': #ffebee,
'100': #ffcdd2,
'200': #ef9a9a,
'300': #e57373,
'400': #ef5350,
'500': #f44336,
'600': #e53935,
'700': #d32f2f,
'800': #c62828,
'900': #b71c1c,
'a100': #ff8a80,
'a200': #ff5252,
'a400': #ff1744,
'a700': #d50000,
),
'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': #e3f2fd,
'100': #bbdefb,
'200': #90caf9,
'300': #64b5f6,
'400': #42a5f5,
'500': #2196f3,
'600': #1e88e5,
'700': #1976d2,
'800': #1565c0,
'900': #0d47a1,
'a100': #82b1ff,
'a200': #448aff,
'a400': #2979ff,
'a700': #2962ff,
),
'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': #e8f5e9,
'100': #c8e6c9,
'200': #a5d6a7,
'300': #81c784,
'400': #66bb6a,
'500': #4caf50,
'600': #43a047,
'700': #388e3c,
'800': #2e7d32,
'900': #1b5e20,
'a100': #b9f6ca,
'a200': #69f0ae,
'a400': #00e676,
'a700': #00c853,
),
'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,
),
'grey': (
'50': #fafafa,
'100': #f5f5f5,
'200': #eeeeee,
'300': #e0e0e0,
'400': #bdbdbd,
'500': #9e9e9e,
'600': #757575,
'700': #616161,
'800': #424242,
'900': #212121,
),
'blue-grey': (
'50': #eceff1,
'100': #cfd8dc,
'200': #b0bec5,
'300': #90a4ae,
'400': #78909c,
'500': #607d8b,
'600': #546e7a,
'700': #455a64,
'800': #37474f,
'900': #263238,
),
'black': (
'500': #000,
'text': rgba(0,0,0,0.87),
'secondary-text': rgba(0,0,0,0.54),
'icons': rgba(0,0,0,0.54),
'disabled': rgba(0,0,0,0.26),
'hint-text': rgba(0,0,0,0.26),
'dividers': rgba(0,0,0,0.12),
),
'white': (
'500': #fff,
'text': #fff,
'secondary-text': rgba(255,255,255,0.7),
'icons': #fff,
'disabled': rgba(255,255,255,0.3),
'hint-text': rgba(255,255,255,0.3),
'dividers': rgba(255,255,255,0.12),
),
);
///
/// Color palette from scotch.io blog
///
/// @type {Map} color palette
///
/// @source https://scotch.io/tutorials/aesthetic-sass-2-colors
///
$scotch-io-palette: (
'primary': (
'base': #8e3329,
'light': #d9534f,
'dark': #c9302c,
),
'accent': (
'base': #d98328,
'light': #dd8f3d,
'dark': #c57623,
),
'secondary': (
'base': #5a1321,
'light': #7b1a2d,
'dark': #51111e,
),
'foreground': (
'base': #191919,
'light': #333333,
'dark': #111111,
'darker': #000000,
),
'background': (
'base': #e9e9e9,
'light': #ffffff,
'dark': #dddddd,
)
);
///
/// Global palette configuration
///
/// @access public
///
/// @type {Map} $palette - custom color palette
///
$palette: $google-material-palette;
///
/// Fetch nested keys
///
/// @access public
///
/// @param {Map} $map - Map
/// @param {Arglist} $keys - Keys to fetch
///
/// @return {*}
///
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
///
/// Get a color from a palette
///
/// @access public
///
/// @param {String} $name - color name
/// @param {String} $tone - color tone
/// @param {Map} $palette - color palette
///
/// @return {Color}
///
/// @throw "Color #{$name} is not found"
///
/// @throw "Color tone #{$tone} is not found"
///
/// @example
/// sp-color('purple') // #9c27b0
/// sp-color('red', '100') // #ffcdd2
/// sp-color('pink', 'X') // ()
///
@function sp-color($name, $tone, $global-palette) {
@if type-of($name) == 'string' and
type-of($tone) == 'string' and
type-of($global-palette) == 'map' {
@if not map-has-key($global-palette, $name) {
@warn "#{$name} color is not found";
}
@if not map-deep-get($global-palette, $name, $tone) {
@warn "#{$tone} color tone is not found";
}
@return map-deep-get($global-palette, $name, $tone);
} @else {
@return null;
}
}
///
/// Get random value from the list
///
/// @access private
///
/// @param {List} $list - list of values
///
/// @return {*}
///
/// @example
/// sp-random-of(('a', 'b', 'c')) // 'b'
/// sp-random-of(('1', '2', ('a', 'b', 'c'))) // ('a', 'b', 'c')
///
@function sp-random-of($list) {
@if type-of($list) == 'list' {
@return nth($list, random(length($list)));
} @else {
@return null;
}
}
///
/// Get a random tone from a list of tones
///
/// @access private
///
/// @param {String} $color-name - color name
/// @param {Map} $tones-map - tones of `$color-name`
/// @param {List} $tones - multiple tones to choose from
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
@function sp-tone-list($color-name, $tones-map, $tones, $global-palette) {
@if type-of($tones-map) == 'map' {
@if map-has-key($tones-map, sp-random-of($tones)) {
@return sp-color($color-name, sp-random-of($tones), $global-palette);
}
}
@return null;
}
///
/// Get a random tone from a map of tones
///
/// @access private
///
/// @param {String} $color-name - color name
/// @param {Map} $tones-map - tones of `$color-name`
/// @param {Map} $tones - multiple tones with exceptions to choose from
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
@function sp-tone-map($color-name, $tones-map, $tones, $global-palette) {
$exceptions: map-get($tones, 'exceptions');
// If not `null` is a work around for Sass error,
// which appers after multiple `call` functions
@if map-get($global-palette, $color-name) != null {
// Get a random tone name of a $color-name
$tone: sp-random-of(map-keys(map-get($global-palette, $color-name)));
@if type-of($tone) == 'string' {
@each $exception in $exceptions {
// If a chosen tone name is exception,
// then run this function again
@if $tone == $exception {
$tone: call('sp-tone-map', $color-name, $tones-map, $tones, $global-palette);
}
}
@return sp-color($color-name, $tone, $global-palette);
}
}
@return null;
}
///
/// Get defined tone
///
/// @access private
///
/// @param {String} $color-name - color name
/// @param {Map} $tones-map - tones for `$color-name`
/// @param {String} $tones - tone
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
@function sp-tone-string($color-name, $tones-map, $tones, $global-palette) {
@if type-of($tones-map) == 'map' {
@if map-has-key($tones-map, $tones) {
@return sp-color($color-name, $tones, $global-palette);
}
}
@return null;
}
///
/// Get a random tone from 'all' tone values
///
/// @access private
///
/// @param {String} $color-name - color name
/// @param {Map} $tones-map - tones of `$color-name`
/// @param {String} $tones - all tone values
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
@function sp-tone-all($color-name, $tones-map, $tones, $global-palette) {
@if type-of($tones-map) == 'map' {
@return sp-color($color-name, sp-random-of(map-keys($tones-map)), $global-palette);
}
@return null;
}
///
/// Get a color tone from a current color name
///
/// @access private
///
/// @param {String} $color-name - color name
/// @param {Map} $tones-map - tones for `$color-name`
/// @param {String} $tones - tone
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
@function sp-tones($color-name, $tones-map, $tones, $global-palette) {
@if $tones == 'all' {
@return sp-tone-all($color-name, $tones-map, $tones, $global-palette);
}
@if type-of($tones) == 'list' {
@return sp-tone-list($color-name, $tones-map, $tones, $global-palette);
}
@if type-of($tones) == 'map' and
map-get($tones, 'exceptions') {
@return sp-tone-map($color-name, $tones-map, $tones, $global-palette);
}
@if type-of($tones) == 'string' {
@return sp-tone-string($color-name, $tones-map, $tones, $global-palette);
}
@return null;
}
///
/// Get a random color name from 'all' color names
///
/// @access private
///
/// @param {List|Map|String} $tones - color tone
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
/// @example
/// sp-color-all(('exceptions': ('500')), $palette); // #ffab40
/// sp-color-all('600', $palette); // #546e7a
/// sp-color-all(('500', '600', '700'), $palette); // #8bc34a
/// sp-color-all('all', $palette); // #ffe082
///
@function sp-color-all($tones, $global-palette: $palette) {
$color-name: sp-random-of(map-keys($global-palette));
$tones-map: map-get($global-palette, $color-name);
@return sp-tones($color-name, $tones-map, $tones, $global-palette);
}
///
/// Get a random color name from a list of color names
///
/// @access private
///
/// @param {List} $colors - map of color exceptions
/// @param {List|Map|String} $tones - color tone
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
/// @example
/// sp-color-list(('red', 'green', 'orange'), '500', $palette); // #ffab40
///
@function sp-color-list($colors, $tones, $global-palette: $palette) {
// Get a random color name from a list
$color-name: sp-random-of($colors);
// Check if current color name exists
@if map-has-key($global-palette, $color-name) {
// Get tones map from a $color-name
$tones-map: map-get($global-palette, $color-name);
@return sp-tones($color-name, $tones-map, $tones, $global-palette);
}
@return null;
}
///
/// Get a random color name from a map of exceptions
///
/// @access private
///
/// @param {Map} $colors - map of color exceptions
/// @param {List|Map|String} $tones - color tone
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
/// @example
/// sp-color-map(('exceptions': ('red', 'green')), ('exceptions': '500'), $palette); // #ffab40
/// sp-color-map(('exceptions': 'pink'), '600', $palette); // #546e7a
///
@function sp-color-map($colors, $tones, $global-palette: $palette) {
@if map-has-key($colors, 'exceptions') {
$exceptions: map-get($colors, 'exceptions');
// Get a random color name
$color-name: sp-random-of(map-keys($global-palette));
@if type-of($color-name) == 'string' {
@each $exception in $exceptions {
// If a chosen color name is exception,
// then run this function again
@if $color-name == $exception {
$color-name: call('sp-color-map', $colors, $tones, $global-palette);
}
}
}
// Get tones map from a $color-name
$tones-map: map-get($global-palette, $color-name);
@return sp-tones($color-name, $tones-map, $tones, $global-palette);
}
@return null;
}
///
/// Get a color name
///
/// @access private
///
/// @param {List|Map|String} $tones - color tone
/// @param {Map} $global-palette - global color palette
///
/// @return {Color|Null}
///
/// @example
/// sp-color-string( 'red', 'all', $palette); // #f44336
/// sp-color-string('green', ('100', '200'), $palette); // #c8e6c9
///
@function sp-color-string($colors, $tones, $global-palette: $palette) {
@if not map-has-key($global-palette, $colors) {
@return null;
}
$color-name: $colors;
$tones-map: map-get($global-palette, $color-name);
@return sp-tones($color-name, $tones-map, $tones, $global-palette);
}
///
/// Get random color
///
/// @access public
///
/// @param {Map|List|String} $colors ['all'] - color name
/// @param {Map|List|String} $tones ['all'] - color tone
/// @param {Map} $global-palette [$palette] - color palette
///
/// @return {Color}
///
/// @example
/// sp-color-random() // #ffcc80
/// sp-color-random('all', ('exceptions': ('300', '200', '100'))) // #283593
///
@function sp-color-random($colors, $tones, $global-palette) {
@if type-of($global-palette) == 'map' {
@if $colors == 'all' {
@return sp-color-all($tones, $global-palette);
}
@if type-of($colors) == 'string' {
@return sp-color-string($colors, $tones, $global-palette);
}
@if type-of($colors) == 'list' {
@return sp-color-list($colors, $tones, $global-palette);
}
@if type-of($colors) == 'map' {
@return sp-color-map($colors, $tones, $global-palette);
}
}
@return null;
}
Sassy-palette {
color: sp-color('red', '900', $palette);
color-all-tone-string: sp-color-random('all', '500', $palette);
color-all-tone-list: sp-color-random('all', ('100', '200'), $palette);
color-all-tone-map: sp-color-random('all', ('exceptions': ('700', '800', '900')), $palette);
color-all-tone-all: sp-color-random('all', 'all', $palette);
color-map: sp-color-random(('exceptions': ('green', 'blue')), '500', $palette);
color-map-tone-all: sp-color-random(('exceptions': ('red', 'deep-purple') ), 'all', $palette);
color-map-color-list: sp-color-random(('exceptions': ('green', 'blue')), ('800', '900'), $palette);
color-map-tone-map: sp-color-random( ('exceptions': ('red', 'deep-purple') ), ('exceptions': ('500', '600')), $palette);
color-string-tone-list: sp-color-random('red', ('800', '900'), $palette);
color-string-tone-map: sp-color-random('red', ('exceptions': ('100', '200')), $palette);
color-list: sp-color-random(('red', 'green'), '500', $palette);
color-list-tone-list: sp-color-random(('red', 'green'), ('100', '200'), $palette);
color-list-tone-map: sp-color-random(('red', 'green'), ('exceptions': ('100', '200')), $palette);
}
Raw
SassMeister-output.css
Sassy-palette {
color: #b71c1c;
color-all-tone-string: #673ab7;
color-all-tone-map: rgba(0, 0, 0, 0.26);
color-all-tone-all: #81d4fa;
color-map: #ff9800;
color-map-tone-all: #40c4ff;
color-map-color-list: #1a237e;
color-string-tone-list: #b71c1c;
color-string-tone-map: #b71c1c;
color-list: #4caf50;
color-list-tone-list: #c8e6c9;
color-list-tone-map: #ef5350;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment