diff --git a/tildes/scss/themes/_black.scss b/tildes/scss/themes/_black.scss index 8f32768..6b159da 100644 --- a/tildes/scss/themes/_black.scss +++ b/tildes/scss/themes/_black.scss @@ -2,8 +2,6 @@ $theme-black: ( 'foreground-primary': #ccc, 'foreground-secondary': #888, 'foreground-highlight': #ddd, - 'foreground-middle': #aaa, - 'foreground-extreme': #fff, 'background-primary': #000, 'background-secondary': #222, 'background-input': #000, diff --git a/tildes/scss/themes/_dark.scss b/tildes/scss/themes/_dark.scss index 240941f..c162480 100644 --- a/tildes/scss/themes/_dark.scss +++ b/tildes/scss/themes/_dark.scss @@ -2,8 +2,6 @@ $theme-dark: ( 'foreground-primary': $fg-light, 'foreground-secondary': $fg-darkest, 'foreground-highlight': $fg-lightest, - 'foreground-middle': #6e8186, - 'foreground-extreme': #fff, 'background-primary': $bg-darkest, 'background-secondary': $bg-dark, 'background-input': #001f27, diff --git a/tildes/scss/themes/_light.scss b/tildes/scss/themes/_light.scss index e65a783..b7d6e25 100644 --- a/tildes/scss/themes/_light.scss +++ b/tildes/scss/themes/_light.scss @@ -2,7 +2,6 @@ $theme-light: ( 'foreground-primary': $fg-dark, 'foreground-secondary': $fg-lightest, 'foreground-highlight': $fg-darkest, - 'foreground-middle': #7c8e92, 'background-primary': $bg-lightest, 'background-secondary': $bg-light, 'background-input': #fefbf1, diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss index f9768aa..570a287 100644 --- a/tildes/scss/themes/_theme_base.scss +++ b/tildes/scss/themes/_theme_base.scss @@ -652,15 +652,29 @@ } @function init-theme($theme-map) { - @return map-merge($theme-base, $theme-map); + $theme: map-merge($theme-base, $theme-map); + + // set $is-light as a bool for whether background-primary seems light or dark + $is-light: lightness(map-get($theme, 'background-primary')) > 50; + + // foreground-middle: if not defined, mix foreground-primary and foreground-secondary + $foreground-middle: map-get($theme, 'foreground-middle'); + $foreground-middle: mix(map-get($theme, 'foreground-primary'), map-get($theme, 'foreground-secondary')) !default; + + // foreground-extreme: if not defined, use white on a dark background and black on a light one + $foreground-extreme: map-get($theme, 'foreground-extreme'); + $foreground-extreme: if($is-light, #000, #fff) !default; + + @return map-merge($theme, ( + 'foreground-extreme': $foreground-extreme, + 'foreground-middle': $foreground-middle, + )); } $theme-base: ( 'foreground-primary': #333, 'foreground-secondary': #999, 'foreground-highlight': #222, - 'foreground-middle': #666, - 'foreground-extreme': #000, 'background-primary': #fff, 'background-secondary': #eee, 'background-input': #f7f7f7,