$scotch-color-key: 'base' !default;
$scotch-colors: (
'primary': (
'base': #8e3329,
'light': #d9534f,
'dark': #c9302c
),
'accent': (
'base': #d98328,
'light': #dd8f3d,
'dark': #c57623
),
'secondary': (
'base': #5a1321,
'light': #7b1a2d,
'dark': #51111e
),
'foreground': (
'base': #191919,
'light': #333333,
'dark': #111111,
'darker': #000000
),
'background': (
'base': #e9e9e9,
'light': #ffffff,
'dark': #dddddd
)
);
$scotch-opacity: (
'light': 0.8, // opacity used with lighter colors
'dark': 0.4, // opacity used with darker colors
// ... etc.
);
@function scotch-color(
$name: 'primary',
$variant: $scotch-color-key,
$opacity: 1
) {
$color: null;
// Get the color spectrum
$color-spectrum: map-get($scotch-colors, $name);
// Get the color variant
@if $color-spectrum {
$color: map-get($color-spectrum, $variant);
}
// Get the alpha setting
$alpha: if(type-of($opacity) == 'number', $opacity, map-get($scotch-opacity, $opacity));
// Set the alpha of the color
@if $alpha {
$color: rgba($color, $alpha);
}
@return $color;
}
// Example usage
.scotch-button {
background-color: scotch-color('primary');
&:hover {
background-color: scotch-color('primary', 'light');
}
&.secondary {
background-color: scotch-color('secondary');
&:hover {
background-color: scotch-color('secondary', 'dark');
}
}
&.transparent {
background-color: scotch-color('primary', $opacity: 'light');
}
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.