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
$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))); |
|
} |
|
} |