keeweb/app/styles/base/_theme-vars.scss

34 lines
2.6 KiB
SCSS
Raw Normal View History

2017-04-24 23:52:48 +02:00
@function set-theme-vars($t) {
@return map-merge($t, (
muted-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, mute-percent)),
2017-04-27 09:40:18 +02:00
muted-color-border: mix(map-get($t, medium-color), map-get($t, background-color), semi-mute-percent(map-get($t, mute-percent))),
2017-04-24 23:52:48 +02:00
text-selection-bg-color: rgba(map-get($t, action-color), .3),
text-selection-bg-color-error: rgba(map-get($t, error-color), .8),
text-semi-muted-color: mix(map-get($t, action-color), map-get($t, text-color), .5),
2017-04-27 09:40:18 +02:00
text-contrast-action-color: text-contrast-color(map-get($t, action-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)),
text-contrast-error-color: text-contrast-color(map-get($t, error-color), map-get($t, color-lightness-shift), map-get($t, background-color), map-get($t, text-color)),
2017-04-24 23:52:48 +02:00
base-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 50%),
accent-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 65%),
light-border-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, light-border-percent)),
2017-04-27 09:40:18 +02:00
form-box-shadow-color-focus: lightness-alpha(map-get($t, action-color), -5%, -.3),
form-box-shadow-color-focus-error: lightness-alpha(map-get($t, error-color), -5%, -.3),
2017-04-24 23:52:48 +02:00
dropdown-box-shadow-color: rgba(map-get($t, medium-color), .05),
secondary-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 10%),
intermediate-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 3%),
intermediate-pressed-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 2.6%),
disabled-background-color: shade(map-get($t, background-color), 5%),
action-background-color-focus: shade(map-get($t, action-color), 20%),
2017-04-26 22:24:08 +02:00
action-background-color-focus-tr: rgba(shade(map-get($t, action-color), 20%), .1),
2017-04-24 23:52:48 +02:00
error-background-color-focus: shade(map-get($t, error-color), 20%),
2017-04-26 22:24:08 +02:00
error-background-color-focus-tr: rgba(shade(map-get($t, error-color), 20%), .1),
2017-04-24 23:52:48 +02:00
action-background-color-active: shade(map-get($t, action-color), 25%),
2017-04-26 22:24:08 +02:00
action-background-color-active-tr: rgba(shade(map-get($t, action-color), 25%), .15),
2017-04-24 23:52:48 +02:00
error-background-color-active: shade(map-get($t, error-color), 25%),
2017-04-26 22:24:48 +02:00
error-background-color-active-tr: rgba(shade(map-get($t, error-color), 25%), .15),
2017-04-24 23:52:48 +02:00
modal-background-color: rgba(map-get($t, background-color), map-get($t, modal-opacity)),
2017-04-26 22:25:48 +02:00
modal-background-color-tr: rgba(map-get($t, background-color), 0),
2017-04-24 23:52:48 +02:00
));
}