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?
Prism CSS Color Palette Management.
// Prism 0.1.0
// http://prism.nukos.kitchen/
// Copyright 2015 nuko's kitchen
// MIT License
$COLOR-PRIMARY: #fafafa !default;
$COLOR-TEXT_BASE: #444444 !default;
$COLOR-TEXT_INVERSE: #eeeeee !default;
$COLOR-BG_BASE: #fafafa !default;
$COLOR-BG_INVERSE: #242B33 !default;
$COLOR-THEME_RED: #E84E3C !default;
$COLOR-THEME_ORANGE: #F29933 !default;
$COLOR-THEME_YELLOW: #F2C10F !default;
$COLOR-THEME_LIME: #99DE37 !default;
$COLOR-THEME_GREEN: #33D463 !default;
$COLOR-THEME_EMERALD: #31DEA7 !default;
$COLOR-THEME_CYAN: #36CFE0 !default;
$COLOR-THEME_AQUA: #49AAE3 !default;
$COLOR-THEME_BLUE: #427AE3 !default;
$COLOR-THEME_DEEPBLUE: #4353E0 !default;
$COLOR-THEME_VIOLET: #8B41E0 !default;
$COLOR-THEME_PURPLE: #C34FE0 !default;
$COLOR-THEME_WINERED: #EB497F !default;
$COLOR-BRAND_FACEBOOK: #3B5998 !default;
$COLOR-BRAND_TWITTER: #00acee !default;
$COLOR-BRAND_HATENA: #2c6ebd !default;
$COLOR-BRAND_POCKET: #ee4056 !default;
$COLOR-BRAND_GPLUS: #dd4c39 !default;
$COLOR-BRAND_FEEDLY: #2bb24c !default;
// Debug Colors
$COLOR-ERROR_BG: #cc0000 !default;
// Prism 0.1.0
// http://prism.nukos.kitchen/
// Copyright 2015 nuko's kitchen
// MIT License
$PRISM_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 )
)
)
)
) !default;
$PRISM_PALETTE_BRIGHTNESS: (
'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%)
) !default;
$PRISM_PALETTE_SATURATION: (
'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%)
) !default;
// Prism 0.1.0
// http://prism.nukos.kitchen/
// Copyright 2015 Ryuichi Nonaka
// MIT License
@import 'colors';
@import 'palettes';
// Define Prism palette
//
// @param {String} $name: palette name.
// @param {Maps} $palettes: palette maps (Default: $PRISM_PALETTES).
// @param {String} $state: <Option> State Name (Default: normal).
// @param {String} $theme: <Option> Theme Name (Default: base).
//
// @example scss - Usage
// .element {
// $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
// ...
// }
//
@function prism-define( $name, $palettes: null, $state: 'normal', $theme: 'base' ) {
$output: ();
@if type-of($palettes) == maps {
$output: (
'name': $name,
'palettes': $palettes,
'state': $state,
'theme': $theme
);
} @else {
$output: (
'name': $name,
'state': $state,
'theme': $theme
);
}
@return $output;
}
// Add option in define palette
//
// @param {Maps} $map: palettes.
// @param {String} $key: option key.
// @param {String} $value: option value
//
// @example scss - Usage
// .element {
// $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
// ...
//
// &:hover {
// $PALETTE_HOVER: prism-option( $PALETTE, 'state', 'hover' );
// ...
// }
// }
//
@function prism-option($map, $key, $value) {
@if type-of($map) == maps {
@warn "Argument 1 is not Maps";
}
$new_map: ($key: $value);
@return map-merge($map, $new_map);
}
// Function to return the color code
//
// @param {String} $property_name: The name of the property.
// @param {Maps} $args: Argments.
// - name : Component name.
// - palettes : Palettes Array (Default: $PRISM_PALETTES).
// - state : <Option> State Name (Default: normal).
// - theme : <Option> Theme Name (Default: base).
//
// @example scss - Usage
// .element {
// $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//
// background: prism( 'background', $PALETTE );
// }
//
@function prism( $property_name, $args ){
$error_color : $COLOR-ERROR_BG;
$output : '';
$palette : '';
$property : '';
$tone : '';
$state : '';
$default : (
'palettes': $PRISM_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' );
// 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.";
}
// 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.";
}
// 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.";
}
// 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.";
}
@if $property != '' { $output: $property; } @else { $output: $error_color; }
@return $output;
}
// It is Function of that dark or bright colors.
//
// @param {Color} $src_color: Alters the color code.
// @param {String} $tone_name: The name of the tone.
//
// @example scss - Usage
// .element {
// $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//
// $background-color: prism( 'background', $PALETTE );
// background: tone( $background-color, '1x' );
// }
//
@function brightness( $src_color, $tone_name: 'normal' ) {
$output: $COLOR-ERROR_BG;
$tones: $PRISM_PALETTE_BRIGHTNESS;
@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
$output: lighten( $src_color, $amount );
} @else if $name == darken {
// darken
$output: darken( $src_color, $amount );
} @else {
// normal
$output: $src_color;
}
} @else {
@warn "Tone: #{$tone_name} is not defined.";
}
@return $output;
}
// It is Function of that saturate or desaturate colors.
//
// @param {Color} $src_color: Alters the color code.
// @param {String} $tone_name: The name of the tone.
//
// @example scss - Usage
// .element {
// $PALETTE: prism-define( 'name', $palettes, 'normal', 'base' );
//
// $background-color: prism( 'background', $PALETTE );
// background: saturation( $background-color, '1x' );
// }
//
@function saturation( $src_color, $tone_name: 'normal' ) {
$output: $COLOR-ERROR_BG;
$tones: $PRISM_PALETTE_SATURATION;
@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
$output: saturate( $src_color, $amount );
} @else if $name == darken {
// desaturate
$output: desaturate( $src_color, $amount );
} @else {
// normal
$output: $src_color;
}
} @else {
@warn "Tone: #{$tone_name} is not defined.";
}
@return $output;
}
@import 'prism/prism';
.component-card {
$PALETTE: prism-define( 'card' );
$border-color: prism( 'border', $PALETTE );
$text-color: prism( 'color', $PALETTE );
$background-color: prism( 'background', $PALETTE );
$box-shadow-color: prism( 'box-shadow', $PALETTE );
margin : 2rem auto;
padding : 3rem;
min-width : 30%;
max-width : 60%;
border-radius : 2px;
border : 1px solid $border-color;
text-align : center;
color : $text-color;
background : $background-color;
box-shadow : 0 .05rem .2rem $box-shadow-color;
&:hover {
$PALETTE_HOVER: prism-option( $PALETTE, 'state', 'hover' );
$border-color: prism( 'border', $PALETTE_HOVER );
$text-color: prism( 'color', $PALETTE_HOVER );
$background-color: prism( 'background', $PALETTE_HOVER );
$box-shadow-color: prism( 'box-shadow', $PALETTE_HOVER );
border : 1px solid $border-color;
color : $text-color;
background : $background-color;
box-shadow : 0 .05rem .75rem $box-shadow-color;
}
&.state-current {
$PALETTE_CURRENT: prism-option( $PALETTE, 'state', 'current');
$border-color: prism( 'border', $PALETTE_CURRENT );
$text-color: prism( 'color', $PALETTE_CURRENT );
$background-color: prism( 'background', $PALETTE_CURRENT );
$box-shadow-color: prism( 'box-shadow', $PALETTE_CURRENT );
border : 1px solid $border-color;
color : $text-color;
background : $background-color;
box-shadow : 0 .05rem .5rem $box-shadow-color;
}
}
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.