-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Description
To accept an infinite list instead of 2 parameters make easier to call it programmatically.
/// Helper function to use organized colors and tones
///
/// @access public
/// @param {String} $color-path - Color path as a list
/// @require {variable} $my-palette
/// @return {color}
/// @link http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
///
/// @example scss
/// a {
/// color: palette('anchor');
///
/// &:hover {
/// color: palette('anchor', 'hover');
/// }
/// }
///
@function palette($color-path...) {
$color: null;
$default-palette: (
'white': rgb(255, 255, 255),
'black': rgb(0, 0, 0),
'anchor': (
'base': rgb(0, 102, 204),
'link': rgb(0, 102, 204),
'visited': rgb(128, 0, 128),
'hover': rgb(50, 152, 255),
'focus': rgb(50, 152, 255),
'active': rgb(229, 0, 80),
),
'border': (
'base': rgb(192, 192, 192),
'focus': rgb(0, 0, 0),
),
'button': (
'base': rgb(225, 225, 225),
'focus': rgb(229, 241, 251),
'slider': hsl(0, 0%, 40%),
'submit': rgb(217, 83, 79),
'reset': transparent,
),
'disabled': (
'foreground': hsl(0, 0%, 42%),
'background': hsl(0, 0%, 94%),
),
'loading': (
'foreground': hsl(0, 0%, 94%),
'background': hsla(0, 0%, 7%, 0.8),
),
'label': (
'default': rgb(119, 119, 119),
'primary': rgb(51, 122, 183),
'success': rgb(66, 133, 66),
'info': rgb(60, 127, 145),
'warning': rgb(240, 173, 78),
'danger': rgb(217, 83, 79),
),
'mark': (
'foreground': rgb(51, 51, 51),
'background': rgb(215, 255, 90),
),
'placeholder': (
'base': hsl(0, 0%, 34%),
'focus': hsl(0, 0%, 56%),
),
'quotes': hsl(0, 0%, 34%),
'selection': (
'foreground': rgb(255, 255, 255),
'background': rgb(20, 105, 140),
),
'tap-highlight': rgb(255, 94, 153),
'target-highlight': rgb(255, 255, 102),
'text': (
'dark': hsl(0, 0%, 13%),
'light': rgb(229, 231, 234),
),
);
$full-palette: ();
@if meta.variable-exists('my-palette') and meta.type-of($my-palette) == 'map' {
$full-palette: map.deep-merge($default-palette, $my-palette);
}
$color: map.get($full-palette, $color-path...);
@if type-of($color) == 'map' {
@if map.has-key($full-palette, list.append($color-path, 'medium', $separator: space)...) {
$color: map.get($full-palette, list.append($color-path, 'medium', $separator: space)...);
} @else if map.has-key($full-palette, list.append($color-path, 'base', $separator: space)...) {
$color: map.get($full-palette, list.append($color-path, 'base', $separator: space)...);
} @else if map.has-key($full-palette, list.append($color-path, 'default', $separator: space)...) {
$color: map.get($full-palette, list.append($color-path, 'default', $separator: space)...);
}
}
@if meta.type-of($color) == 'color' or $color == 'transparent' {
@return $color;
}
@return null;
}Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels