Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ember Color Palette Component
  • Technique lifted directly from https://scotch.io/tutorials/aesthetic-sass-2-colors
  • base.scss comes before color-palette.scss
  • The palette-color scss function lets you do things like border-bottom: 1px solid palette-color('background', 'dark'); or color: palette-color('primary');
// Credit
// - http://sassmeister.com/gist/ac4322cc0564cd37c432
// - https://scotch.io/tutorials/aesthetic-sass-2-colors
$ColorPalette-colors: (
'primary': (
'base': #a80101,
'light': #d9534f,
'dark': #c9302c
),
'accent': (
'base': #d98328,
'light': #dd8f3d,
'dark': #c57623
),
'positive': (
'base': #228b22,
),
'secondary': (
'base': #a4a4a4,
'light': #d0d0d0,
'dark': #888,
'darker': #404040,
'darkest': #252525
),
'foreground': (
'base': #010101,
'light': #676767,
'dark': #000100,
'darker': #000
),
'background': (
'base': #fff,
'dark': #f0f0f0,
'darker': #ebebeb,
'darkest': #ccc
)
);
$ColorPalette-baseKey: 'base' !default;
$ColorPalette-opacities: (
'light': .8,
'dark': .4,
'darker': .3
);
@function palette-color(
$name: 'primary',
$variant: $ColorPalette-baseKey,
$opacity: 1
) {
$color: null;
$colorVariants: map-get($ColorPalette-colors, $name);
@if $colorVariants {
$color: map-get($colorVariants, $variant);
}
$alpha: if(type-of($opacity) == 'number', $opacity, map-get($ColorPalette-opacities, $opacity));
@if $alpha {
$color: rgba($color, $alpha);
}
@return $color;
}
<div class="ColorPalette">
<div class="ColorPalette-color ColorPalette-color--primary"><div class="ColorPalette-colorVariants"></div></div>
<div class="ColorPalette-color ColorPalette-color--accent"><div class="ColorPalette-colorVariants"></div></div>
<div class="ColorPalette-color ColorPalette-color--secondary"><div class="ColorPalette-colorVariants"></div></div>
<div class="ColorPalette-color ColorPalette-color--foreground"><div class="ColorPalette-colorVariants"></div></div>
<div class="ColorPalette-color ColorPalette-color--background"><div class="ColorPalette-colorVariants"></div></div>
</div>
import Ember from 'ember';
export default Ember.Component.extend({
tagName: ''
});
// Credit: https://scotch.io/tutorials/aesthetic-sass-2-colors
$ColorPalette-borderColor: palette-color('background', 'darkest');
$ColorPalette-variantHeight: 1.5rem;
.ColorPalette {
display: flex;
flex-direction: row;
justify-content: space-around;
max-width: 100%;
*, *:before, *:after {
position: relative;
}
}
.ColorPalette-color {
width: calc(20% - 1rem);
height: 170px;
display: block;
border: 1px solid $ColorPalette-borderColor;
&:before, &:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 30%;
bottom: 0;
left: 0;
border-top: 1px solid $ColorPalette-borderColor;
padding: .5rem;
text-transform: uppercase;
font-size: 85%;
overflow: hidden;
word-wrap: nowrap;
text-overflow: ellipsis;
}
&:before {
background-color: palette-color('background', 'base');
font-weight: bold;
}
&:after {
padding-top: 1.5rem;
font-size: 70%;
color: palette-color('secondary', 'dark');
}
@each $colorKey, $colorVariants in $ColorPalette-colors {
$baseColorValue: map-get($colorVariants, 'base');
&.ColorPalette-color--#{$colorKey} {
background-color: $baseColorValue;
&:before { content: "#{$colorKey}"; }
&:after { content: "#{$baseColorValue}"; }
$variantGradient: (unquote("to bottom"),);
$index: 0;
@each $variantName, $variantValue in $colorVariants {
$variantGradient: append($variantGradient, $variantValue $index * $ColorPalette-variantHeight);
$index: $index + 1;
$variantGradient: append($variantGradient, $variantValue $index * $ColorPalette-variantHeight);
}
.ColorPalette-colorVariants {
border-left: 2px solid palette-color('background', 'base');;
border-bottom: 2px solid palette-color('background', 'base');;
position: absolute;
height: $ColorPalette-variantHeight * length($colorVariants);
width: $ColorPalette-variantHeight;
right: 0;
top: 0;
background: linear-gradient(#{$variantGradient});
}
}
}
}
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.