Browse Source

Initial special behavior for unset theme variables

Very minimal, but shows how some special behavior can be defined for
themes beyond "use base value if not set".
merge-requests/51/head
Deimos 6 years ago
parent
commit
e402d7862e
  1. 2
      tildes/scss/themes/_black.scss
  2. 2
      tildes/scss/themes/_dark.scss
  3. 1
      tildes/scss/themes/_light.scss
  4. 20
      tildes/scss/themes/_theme_base.scss

2
tildes/scss/themes/_black.scss

@ -2,8 +2,6 @@ $theme-black: (
'foreground-primary': #ccc, 'foreground-primary': #ccc,
'foreground-secondary': #888, 'foreground-secondary': #888,
'foreground-highlight': #ddd, 'foreground-highlight': #ddd,
'foreground-middle': #aaa,
'foreground-extreme': #fff,
'background-primary': #000, 'background-primary': #000,
'background-secondary': #222, 'background-secondary': #222,
'background-input': #000, 'background-input': #000,

2
tildes/scss/themes/_dark.scss

@ -2,8 +2,6 @@ $theme-dark: (
'foreground-primary': $fg-light, 'foreground-primary': $fg-light,
'foreground-secondary': $fg-darkest, 'foreground-secondary': $fg-darkest,
'foreground-highlight': $fg-lightest, 'foreground-highlight': $fg-lightest,
'foreground-middle': #6e8186,
'foreground-extreme': #fff,
'background-primary': $bg-darkest, 'background-primary': $bg-darkest,
'background-secondary': $bg-dark, 'background-secondary': $bg-dark,
'background-input': #001f27, 'background-input': #001f27,

1
tildes/scss/themes/_light.scss

@ -2,7 +2,6 @@ $theme-light: (
'foreground-primary': $fg-dark, 'foreground-primary': $fg-dark,
'foreground-secondary': $fg-lightest, 'foreground-secondary': $fg-lightest,
'foreground-highlight': $fg-darkest, 'foreground-highlight': $fg-darkest,
'foreground-middle': #7c8e92,
'background-primary': $bg-lightest, 'background-primary': $bg-lightest,
'background-secondary': $bg-light, 'background-secondary': $bg-light,
'background-input': #fefbf1, 'background-input': #fefbf1,

20
tildes/scss/themes/_theme_base.scss

@ -652,15 +652,29 @@
} }
@function init-theme($theme-map) { @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: ( $theme-base: (
'foreground-primary': #333, 'foreground-primary': #333,
'foreground-secondary': #999, 'foreground-secondary': #999,
'foreground-highlight': #222, 'foreground-highlight': #222,
'foreground-middle': #666,
'foreground-extreme': #000,
'background-primary': #fff, 'background-primary': #fff,
'background-secondary': #eee, 'background-secondary': #eee,
'background-input': #f7f7f7, 'background-input': #f7f7f7,

Loading…
Cancel
Save