You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.8 KiB
97 lines
2.8 KiB
2 years ago
|
$themes: (
|
||
|
dark: (
|
||
|
colors:(
|
||
|
"red": #E88080,
|
||
|
"yellow": #F2C97D,
|
||
|
"green": #63E2B7,
|
||
|
"blue": #70C0E8,
|
||
|
"purple": #c78cdc,
|
||
|
"orange": #ffa96c,
|
||
|
"lime": #96e79a,
|
||
|
"aqua": #8beef1,
|
||
|
"black": #000000,
|
||
|
"white": #FFFFFF,
|
||
|
"gray": #A7A6A7,
|
||
|
)
|
||
|
),
|
||
|
light: (
|
||
|
colors:(
|
||
|
"red": #E88080,
|
||
|
"yellow": #F2C97D,
|
||
|
"green": #63E2B7,
|
||
|
"blue": #70C0E8,
|
||
|
"purple": #c78cdc,
|
||
|
"orange": #ffa96c,
|
||
|
"lime": #96e79a,
|
||
|
"aqua": #8beef1,
|
||
|
"black": #000000,
|
||
|
"white": #FFFFFF,
|
||
|
"gray": #A7A6A7,
|
||
|
)
|
||
|
)
|
||
|
);
|
||
|
|
||
|
$dark-colors: map-get(map-get($themes, 'dark'), 'colors');
|
||
|
$light-colors: map-get(map-get($themes, 'light'), 'colors');
|
||
|
|
||
|
// ALL COLORS
|
||
|
$colors-all: ();
|
||
|
@each $key, $color in $dark-colors {
|
||
|
$colors-all: map-merge($colors-all, ('dark-'+$key: $color));
|
||
|
}
|
||
|
@each $key, $color in $light-colors {
|
||
|
$colors-all: map-merge($colors-all, ($key: $color));
|
||
|
}
|
||
|
|
||
|
// TRANSPARENT COLORS
|
||
|
$colors-transparent: ();
|
||
|
@each $key, $color in $dark-colors {
|
||
|
@for $i from 0 through 10 {
|
||
|
$num: 10-$i;
|
||
|
$percent: calc($num / 10);
|
||
|
$colors-transparent: map-merge($colors-transparent, ('dark-'+$key+'-'+($i*10): transparentize($color, $percent)));
|
||
|
}
|
||
|
}
|
||
|
@each $key, $color in $light-colors {
|
||
|
@for $i from 0 through 10 {
|
||
|
$num: 10-$i;
|
||
|
$percent: calc($num / 10);
|
||
|
$colors-transparent: map-merge($colors-transparent, ($key+'-'+($i*10): transparentize($color, $percent)));
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// LIGHT COLORS
|
||
|
|
||
|
$colors-light: ();
|
||
|
@each $key, $color in $dark-colors {
|
||
|
@for $i from 0 through 10 {
|
||
|
$num: $i;
|
||
|
$percent: calc($num * 5);
|
||
|
$colors-light: map-merge($colors-light, ('dark-'+$key+'-'+($i*10): lighten($color, $percent)));
|
||
|
}
|
||
|
}
|
||
|
@each $key, $color in $light-colors {
|
||
|
@for $i from 0 through 10 {
|
||
|
$num: $i;
|
||
|
$percent: calc($num * 5);
|
||
|
$colors-light: map-merge($colors-light, ($key+'-'+($i*10): lighten($color, $percent)));
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// DARK COLORS
|
||
|
|
||
|
$colors-dark: ();
|
||
|
@each $key, $color in $dark-colors {
|
||
|
@for $i from 0 through 10 {
|
||
|
$num: 10-$i;
|
||
|
$percent: calc($num * 5);
|
||
|
$colors-dark: map-merge($colors-dark, ('dark-'+$key+'-'+($i*10): darken($color, $percent)));
|
||
|
}
|
||
|
}
|
||
|
@each $key, $color in $light-colors {
|
||
|
@for $i from 0 through 10 {
|
||
|
$num: 10-$i;
|
||
|
$percent: calc($num * 5);
|
||
|
$colors-dark: map-merge($colors-dark, ($key+'-'+($i*10): darken($color, $percent)));
|
||
|
}
|
||
|
}
|