Skip to content

Instantly share code, notes, and snippets.

@nukos

nukos/_colors.scss

Last active Aug 29, 2015
Embed
What would you like to do?
SCSS color palette mixin.
$palettes: (
'typo': (
'base': (
'normal': #E6ECF2,
'light' : #ffffff,
'dark' : #dddddd
),
'inverse': (
'normal': #444444,
'light' : #777777,
'dark' : #222222
)
),
'anchor': (
'base': (
'normal' : #AACEF2,
'hover' : #73ACE6,
'active' : #2E8AE6,
'current': #242B33,
'visited': #596C80
),
'inverse': (
'normal' : #2E7AE6,
'hover' : #4588E6,
'active' : #0060E6,
'current': #242B33,
'visited': #553DCC
),
'nav': (
'normal' : #bdc5c7,
'hover' : #edf1f2,
'active' : #ffffff,
'current': #edf1f2
)
),
'bg': (
'base': (
'normal' : #242B33,
'hover' : #36414D,
'active' : #475766,
'current': #596C80,
'visited': #12161A,
),
'inverse' : (
'normal' : #fafafa,
'hover' : #f5f5f5,
'active' : #ffffff,
'current': #eeeeee,
'visited': #dddddd
),
'gradation': (
'start' : #242B33,
'end' : #475766
)
),
'colors': (
'red' : (
'normal' : #E84E3C
),
'orange' : (
'normal' : #F29933
),
'yellow' : (
'normal' : #F2C10F
),
'lime' : (
'normal' : #99DE37
),
'green' : (
'normal' : #33D463
),
'emerald' : (
'normal' : #31DEA7
),
'cyan' : (
'normal' : #36CFE0
),
'aqua' : (
'normal' : #49AAE3
),
'blue' : (
'normal' : #427AE3
),
'deepblue' : (
'normal' : #4353E0
),
'violet' : (
'normal' : #8B41E0
),
'purple' : (
'normal' : #C34FE0
),
'winered' : (
'normal' : #EB497F
)
)
);
// Mixin to return the color code
//
// $palette_list - Array containing the palette.
// $palette_name - The name of the palette.
// $tone_name - (option) The name of the tone.
// $state_name - (option) The name of the state of tone.
//
@function palette( $palette_list, $palette_name, $tone_name: 'base', $state_name: 'normal' ) {
$error_color: #cc0000;
$palette : '';
$torn : '';
$color : '';
@if map-has-key( $palette_list, $palette_name ) {
$palette: map-get( $palette_list, $palette_name );
} @else {
@warn "Name in the palette : #{$palette_name} is not defined.";
@return $error_color;
}
@if map-has-key( $palette, $tone_name ) {
$torn: map-get( $palette, $tone_name );
} @else {
@warn "Tone in the palette : #{$tone_name} is not defined.";
@return $error_color;
}
@if map-has-key( $torn, $state_name ) {
$color: map-get( $torn, $state_name );
} @else {
@warn "Tone : #{$tone_name} to state : #{$state_name} is not defined.";
@return $error_color;
}
@return $color;
}
@import "palettes";
@import "colors";
div {
background: palette( $palettes, 'bg' );
//background: #242b33;
color: palette( $palettes, 'typo', 'inverse' );
//color: #eee;
}
a:hover {
color: palette( $palettes, 'anchor', 'base', 'hover' );
//color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment