|
// Mixin to return the color code |
|
// |
|
// $property_name - The name of the property. |
|
// $args - Argments. |
|
// - name : Component name. |
|
// - palettes : Palettes Array (Default: $PALETTES). |
|
// - state : <Option> State Name (Default: normal). |
|
// - theme : <Option> Theme Name (Default: base). |
|
// |
|
// EXAMPLE: |
|
// $COMPONENT: ( |
|
// name: 'card' |
|
// ); |
|
// background: palette( 'card', $COMPONENT ); |
|
// |
|
@function palette( $property_name, /* array */ $args ){ |
|
// Argments |
|
$default : ( |
|
'palettes': $PALETTES, |
|
'name' : '', |
|
'state' : 'normal', |
|
'theme' : 'base' |
|
); |
|
$args: map-merge( $default, $args ); |
|
|
|
// Set Valiables |
|
$palettes : map-get( $args, 'palettes' ); |
|
$palette_name: map-get( $args, 'name' ); |
|
$theme_name : map-get( $args, 'theme' ); |
|
$state_name : map-get( $args, 'state' ); |
|
|
|
$error_color : #cc0000; |
|
$palette : ''; |
|
$property : ''; |
|
$tone : ''; |
|
$state : ''; |
|
$property : ''; |
|
|
|
// Get palette |
|
@if map-has-key( $palettes, $palette_name ) { |
|
$palette: map-get( $palettes, $palette_name ); |
|
} @else { |
|
@warn "Name in the palette : #{$palette_name} is not defined."; |
|
@return $error_color; |
|
} |
|
|
|
// Get tone |
|
@if map-has-key( $palette, $theme_name ) { |
|
$tone: map-get( $palette, $theme_name ); |
|
} @else { |
|
@warn "Tone in the palette : #{$theme_name} is not defined."; |
|
@return $error_color; |
|
} |
|
|
|
// Get property |
|
@if map-has-key( $tone, $state_name ) { |
|
$state: map-get( $tone, $state_name ); |
|
} @else { |
|
@warn "State in the palette: #{$state_name} is not defined."; |
|
@return $error_color; |
|
} |
|
|
|
// Get property |
|
@if map-has-key( $state, $property_name ) { |
|
$property: map-get( $state, $property_name ); |
|
} @else { |
|
@warn "Property in the palette: #{$property_name} is not defined."; |
|
@return $error_color; |
|
} |
|
|
|
@return $property; |
|
} |
|
|
|
|
|
@function set-palette-option($map, $key, $value) { |
|
$new: ($key: $value); |
|
@return map-merge($map, $new); |
|
} |
|
|
|
// http://scg.ar-ch.org/ |
|
|
|
// It is Mixin of that dark or bright colors. |
|
// |
|
// $src_color - Alters the color code. |
|
// $tone_name - The name of the tone. |
|
// |
|
// EXAMPLE: |
|
// color: tone( #333333, '1x' ); |
|
// |
|
@function brightness( $src_color, $tone_name: 'normal' ) { |
|
$dist_color: #cc0000; |
|
$tones: ( |
|
'8x' : ('darken', 64%), |
|
'7x' : ('darken', 56%), |
|
'6x' : ('darken', 48%), |
|
'5x' : ('darken', 40%), |
|
'4x' : ('darken', 32%), |
|
'3x' : ('darken', 24%), |
|
'2x' : ('darken', 16%), |
|
'1x' : ('darken', 8%), |
|
'05x' : ('darken', 4%), |
|
'normal' : ('none', 0%), |
|
'-05x' : ('lighten', 4%), |
|
'-1x' : ('lighten', 8%), |
|
'-2x' : ('lighten', 16%), |
|
'-3x' : ('lighten', 24%), |
|
'-4x' : ('lighten', 32%), |
|
'-5x' : ('lighten', 40%), |
|
'-6x' : ('lighten', 48%), |
|
'-7x' : ('lighten', 56%), |
|
'-8x' : ('lighten', 64%) |
|
); |
|
|
|
@if map-has-key( $tones, $tone_name ) { |
|
|
|
$tone: map-get( $tones, $tone_name ); |
|
$name: nth( $tone, 1 ); |
|
$amount: nth( $tone, 2 ); |
|
|
|
@if $name == lighten { |
|
// return lighten |
|
$dist_color: lighten( $src_color, $amount ); |
|
} @else if $name == darken { |
|
// darken |
|
$dist_color: darken( $src_color, $amount ); |
|
} @else { |
|
// normal |
|
$dist_color: $src_color; |
|
} |
|
|
|
} @else { |
|
@warn "Tone: #{$tone_name} is not defined."; |
|
} |
|
|
|
@return $dist_color; |
|
} |
|
|
|
|
|
|
|
|
|
// It is Mixin of that dark or bright colors. |
|
// |
|
// $src_color - Alters the color code. |
|
// $tone_name - The name of the tone. |
|
// |
|
// EXAMPLE: |
|
// color: saturation( #333333, '1x' ); |
|
// |
|
@function saturation( $src_color, $tone_name: 'normal' ) { |
|
$dist_color: #cc0000; |
|
$tones: ( |
|
'8x' : ('saturate', 64%), |
|
'7x' : ('saturate', 56%), |
|
'6x' : ('saturate', 48%), |
|
'5x' : ('saturate', 40%), |
|
'4x' : ('saturate', 32%), |
|
'3x' : ('saturate', 24%), |
|
'2x' : ('saturate', 16%), |
|
'1x' : ('saturate', 8%), |
|
'05x' : ('saturate', 4%), |
|
'normal' : ('none', 0%), |
|
'-05x' : ('desaturate', 4%), |
|
'-1x' : ('desaturate', 8%), |
|
'-2x' : ('desaturate', 16%), |
|
'-3x' : ('desaturate', 24%), |
|
'-4x' : ('desaturate', 32%), |
|
'-5x' : ('desaturate', 40%), |
|
'-6x' : ('desaturate', 48%), |
|
'-7x' : ('desaturate', 56%), |
|
'-8x' : ('desaturate', 64%) |
|
); |
|
|
|
@if map-has-key( $tones, $tone_name ) { |
|
|
|
$tone: map-get( $tones, $tone_name ); |
|
$name: nth( $tone, 1 ); |
|
$amount: nth( $tone, 2 ); |
|
|
|
@if $name == saturate { |
|
// saturate |
|
$dist_color: saturate( $src_color, $amount ); |
|
} @else if $name == darken { |
|
// desaturate |
|
$dist_color: desaturate( $src_color, $amount ); |
|
} @else { |
|
// normal |
|
$dist_color: $src_color; |
|
} |
|
|
|
} @else { |
|
@warn "Tone: #{$tone_name} is not defined."; |
|
} |
|
|
|
@return $dist_color; |
|
} |
/_color_palettes_mixins.scss
Created