Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS Color Code Managemant Mixins.
// 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__PRIMARY: #fafafa;
$COLOR__TEXT-BASE: #444444;
$COLOR__TEXT-INVERSE: #eeeeee;
$COLOR__BG-BASE: #fafafa;
$COLOR__BG-INVERSE: #242B33;
$COLOR__THEME-RED: #E84E3C;
$COLOR__THEME-ORANGE: #F29933;
$COLOR__THEME-YELLOW: #F2C10F;
$COLOR__THEME-LIME: #99DE37;
$COLOR__THEME-GREEN: #33D463;
$COLOR__THEME-EMERALD: #31DEA7;
$COLOR__THEME-CYAN: #36CFE0;
$COLOR__THEME-AQUA: #49AAE3;
$COLOR__THEME-BLUE: #427AE3;
$COLOR__THEME-DEEPBLUE: #4353E0;
$COLOR__THEME-VIOLET: #8B41E0;
$COLOR__THEME-PURPLE: #C34FE0;
$COLOR__THEME-WINERED: #EB497F;
$COLOR__BRAND-FACEBOOK: #3B5998;
$COLOR__BRAND-TWITTER: #00acee;
$COLOR__BRAND-HATENA: #2c6ebd;
$COLOR__BRAND-POCKET: #ee4056;
$COLOR__BRAND-GPLUS: #dd4c39;
$COLOR__BRAND-FEEDLY: #2bb24c;
$PALETTES: (
'card': (
'base': (
'normal': (
border: transparent,
color: $COLOR__TEXT-BASE,
background: $COLOR__BG-BASE,
box-shadow: rgba( 0, 0, 0, .05 )
),
'hover': (
border: $COLOR__THEME-DEEPBLUE,
color: brightness( $COLOR__TEXT-BASE, '-05x' ),
background: brightness( $COLOR__BG-BASE, '05x' ),
box-shadow: rgba( 0, 0, 0, .1 )
),
'current': (
border: #333,
color: #fff,
background: #444,
box-shadow: rgba( 0, 0, 0, .05 )
)
)
)
);
<div class="component-card">
CARD
</div>
<div class="component-card state-current">
CARD
</div>
.component-card {
$COMPONENT: (
name: 'card'
);
margin : 2rem auto;
padding : 3rem;
min-width : 30%;
max-width : 60%;
border-radius : 2px;
border : 1px solid palette( 'border', $COMPONENT );
text-align : center;
color : palette( 'color', $COMPONENT );
background : palette( 'background', $COMPONENT );
box-shadow : 0 .05rem .2rem palette( 'box-shadow', $COMPONENT );
&:hover {
$HOVER: set-palette-option( $COMPONENT, 'state', 'hover' );
border : 1px solid palette( 'border', $HOVER );
color : palette( 'color', $HOVER );
background : palette( 'background', $HOVER );
box-shadow : 0 .05rem .75rem palette( 'box-shadow', $HOVER );
}
&.state-current {
$CURRENT: set-palette-option( $COMPONENT, 'state', 'current');
border : 1px solid palette( 'border', $CURRENT );
color : palette( 'color', $CURRENT );
background : palette( 'background', $CURRENT );
box-shadow : 0 .05rem .5rem palette( 'box-shadow', $CURRENT );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.