mirror of https://github.com/keeweb/keeweb.git
61 lines
2.7 KiB
SCSS
61 lines
2.7 KiB
SCSS
// Named colors
|
|
$black: #111;
|
|
$white: #d8e5f1;
|
|
$red: #df3c06;
|
|
$orange: #fbac45;
|
|
$yellow: #e9d92a;
|
|
$green: #0dc94b;
|
|
$blue: #4e6af8;
|
|
$violet: #d946db;
|
|
|
|
// Theme colors
|
|
@function background-color() { @return th(background-color); }
|
|
@function medium-color() { @return th(medium-color); }
|
|
@function text-color() { @return th(text-color); }
|
|
@function action-color() { @return th(action-color); }
|
|
@function error-color() { @return th(error-color); }
|
|
|
|
// Text
|
|
@function muted-color() { @return mix(medium-color(), background-color(), th(mute-percent)); }
|
|
@function muted-color-border() { @return mix(medium-color(), background-color(), th(mute-percent) / 2); }
|
|
@function text-selection-bg-color() { @return rgba(action-color(), .3); }
|
|
@function text-selection-bg-color-error() { @return rgba(error-color(), .8); }
|
|
@function text-contrast-color($bg) { @if (lightness($bg) >= lightness(background-color())) { @return text-color(); } @else { @return background-color(); } }
|
|
|
|
// Borders, shadows
|
|
@function base-border-color() { @return mix(medium-color(), background-color(), 50%); }
|
|
@function accent-border-color() { @return mix(medium-color(), background-color(), 65%); }
|
|
@function light-border-color() { @return mix(medium-color(), background-color(), th(light-border-percent)); }
|
|
@function form-box-shadow-color() { @return rgba($black, 0.06); }
|
|
@function form-box-shadow-color-focus() { @return adjust-color(action-color(), $lightness: -5%, $alpha: -0.3); }
|
|
@function form-box-shadow-color-focus-error() { @return adjust-color(error-color(), $lightness: -5%, $alpha: -0.3); }
|
|
@function dropdown-box-shadow-color() { @return rgba(medium-color(), .05); }
|
|
|
|
// Backgrounds
|
|
@function secondary-background-color() { @return mix(medium-color(), background-color(), 10%); }
|
|
@function intermediate-background-color() { @return mix(medium-color(), background-color(), 3%); }
|
|
@function intermediate-pressed-background-color() { @return mix(medium-color(), background-color(), 2.6%); }
|
|
@function disabled-background-color() { @return shade(background-color(), 5%); }
|
|
@function action-background-color-focus() { @return shade(action-color(), 20%); }
|
|
@function error-background-color-focus() { @return shade(error-color(), 20%); }
|
|
@function action-background-color-active() { @return shade(action-color(), 25%); }
|
|
@function error-background-color-active() { @return shade(error-color(), 25%); }
|
|
|
|
$all-colors: (
|
|
"white": $white,
|
|
"black": $black,
|
|
"red": $red,
|
|
"orange": $orange,
|
|
"yellow": $yellow,
|
|
"green": $green,
|
|
"blue": $blue,
|
|
"violet": $violet,
|
|
);
|
|
|
|
@each $col, $val in $all-colors {
|
|
.#{$col}-color { color: #{$val}; }
|
|
}
|
|
.muted-color { @include th { color: muted-color(); }; }
|
|
.action-color { @include th { color: action-color(); }; }
|
|
.error-color { @include th { color: error-color(); }; }
|