From 7f7943d2fc1b4d724c66ddc85e831243f7f0aa5f Mon Sep 17 00:00:00 2001 From: Oscar Date: Wed, 26 Aug 2020 12:10:24 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=93=20Adds=20Dark=20Mode=20(#210)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(dark mode): set up first set of colors * feat(dark mode): define state colours * ๐Ÿงน * feat(dark mode): variablify all teh wordz * feat(dark mode): set colors on body * feat(dark mode): replace hard coded color value * feat(dark mode): ๐ŸŒ‘ * feat(a11y): update link focus styles - restores visible focus in windows high contrast mode - increases visibility in boxes with bg colour * feat(dark mode): enable postcss * ๐Ÿ’… * feat(dark mode): add user control * chore: use generic headline name * feat(dark mode): hide switch until script loads * feat(dark mode): increase link contrast * add content warning to footer nav partial * feat(dark mode): replace hard coded colour value in alertbox * feat(dark mode): tone down text colour * feat(dark mode): properly invert code elements * ๐Ÿงน move box styles into own partial * feat(dark mode): use darker colour as background for links --- .browserslistrc | 3 + .eleventy.js | 2 + .postcssrc | 5 + 11ty/_data/site.js | 7 + .../_includes/components/base/site-footer.njk | 29 ++ 11ty/_includes/layouts/base.njk | 17 +- 11ty/assets/js/theme-switcher.js | 63 +++ ...renderDefinitionContentNextEntries.spec.js | 8 +- .../renderDefinitionContentNextEntries.js | 4 +- assets/css/_sass/_colours.scss | 11 - assets/css/abstracts/_colours.scss | 11 - assets/css/abstracts/_variables.scss | 36 +- assets/css/base.scss | 4 +- assets/css/base/_a.scss | 24 +- assets/css/base/_base.scss | 20 +- assets/css/base/_code.scss | 15 + assets/css/base/_custom-properties.scss | 63 +++ assets/css/base/_radio-buttons.scss | 53 ++ assets/css/base/_selection.scss | 4 +- assets/css/base/_typography.scss | 76 +-- assets/css/components/_alertbox.scss | 2 +- assets/css/components/_box.scss | 31 ++ assets/css/components/_definitions.scss | 35 +- assets/css/components/_flag.scss | 11 +- assets/css/components/_word.scss | 8 +- .../css/structures/_definition-content.scss | 6 +- .../structures/_definition-navigation.scss | 9 - assets/css/structures/_footer.scss | 8 +- assets/css/structures/_grid.scss | 102 ++-- package-lock.json | 452 +++++++++++++++++- package.json | 2 + 31 files changed, 880 insertions(+), 241 deletions(-) create mode 100644 .browserslistrc create mode 100644 .postcssrc create mode 100644 11ty/_data/site.js create mode 100644 11ty/_includes/components/base/site-footer.njk create mode 100644 11ty/assets/js/theme-switcher.js delete mode 100644 assets/css/_sass/_colours.scss delete mode 100644 assets/css/abstracts/_colours.scss create mode 100644 assets/css/base/_code.scss create mode 100644 assets/css/base/_radio-buttons.scss create mode 100644 assets/css/components/_box.scss diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 00000000..8ef3c8de --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not ie 10 diff --git a/.eleventy.js b/.eleventy.js index 7e285be7..eda76520 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -198,6 +198,8 @@ module.exports = function(config) { config.setLibrary('md', mdIt); + config.addPassthroughCopy({ [`./11ty/assets/js/**/*`]: '/js' }); + // You can return your Config object (optional). return { dir: { diff --git a/.postcssrc b/.postcssrc new file mode 100644 index 00000000..0430e173 --- /dev/null +++ b/.postcssrc @@ -0,0 +1,5 @@ +{ + "plugins": { + "postcss-preset-env": true + } +} diff --git a/11ty/_data/site.js b/11ty/_data/site.js new file mode 100644 index 00000000..b4daab26 --- /dev/null +++ b/11ty/_data/site.js @@ -0,0 +1,7 @@ +module.exports = { + themes: [ + { value: 'system', label: 'Operating System' }, + { value: 'light', label: 'Light' }, + { value: 'dark', label: 'Dark' } + ] +}; diff --git a/11ty/_includes/components/base/site-footer.njk b/11ty/_includes/components/base/site-footer.njk new file mode 100644 index 00000000..245c47de --- /dev/null +++ b/11ty/_includes/components/base/site-footer.njk @@ -0,0 +1,29 @@ + diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk index 8bb518d2..f3a4dc96 100644 --- a/11ty/_includes/layouts/base.njk +++ b/11ty/_includes/layouts/base.njk @@ -42,22 +42,9 @@ {% block content %}{% endblock content %} - + {% include 'components/base/site-footer.njk' %} {% block pageScript %} {% endblock pageScript %} + diff --git a/11ty/assets/js/theme-switcher.js b/11ty/assets/js/theme-switcher.js new file mode 100644 index 00000000..9edffcd1 --- /dev/null +++ b/11ty/assets/js/theme-switcher.js @@ -0,0 +1,63 @@ +function initThemeSwitch() { + let $switchContainer = document.querySelector('.js-theme-switch'); + + if (!$switchContainer) return; + + $switchContainer.hidden = false; + + let userOverwrite = ['light', 'dark']; + + let $buttons = $switchContainer.querySelectorAll('[type="radio"]'); + + /** + * @type String + */ + let userThemeSetting = localStorage.getItem('sdUserTheme'); + + function setInitialState() { + if (userThemeSetting) { + document.documentElement.setAttribute( + 'data-user-theme', + userThemeSetting + ); + $switchContainer.querySelector( + `[value="${userThemeSetting}"]` + ).checked = true; + } else { + $switchContainer.querySelector('[value="system"]').checked = true; + } + } + + function setUserPreference(value) { + localStorage.setItem('sdUserTheme', value); + document.documentElement.setAttribute('data-user-theme', value); + } + + function unsetUserPreference() { + localStorage.removeItem('sdUserTheme'); + document.documentElement.removeAttribute('data-user-theme'); + } + + Array.from($buttons).forEach(function($button) { + $button.addEventListener('change', function() { + // only run the switch functionality for the currently active radio button + if (!$button.checked) return; + + if (userOverwrite.includes($button.value)) { + setUserPreference($button.value); + } else { + unsetUserPreference(); + } + }); + }); + + setInitialState(); +} + +if (document.readyState === 'complete') { + initThemeSwitch(); +} else { + window.addEventListener('load', function() { + initThemeSwitch(); + }); +} diff --git a/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js b/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js index 4c80f390..561f51d9 100644 --- a/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js +++ b/11ty/shortcodes/__tests__/renderDefinitionContentNextEntries.spec.js @@ -11,11 +11,11 @@ test('first item', (t) => { renderDefinitionContentNextEntries(title, slug, testCollection), `
-

Previous words

+

Previous words

-

Next words

+

Next words

` @@ -28,11 +28,11 @@ test('last item', (t) => { renderDefinitionContentNextEntries(title, slug, testCollection), `
-

Previous words

+

Previous words

-

Next words

+

Next words

` diff --git a/11ty/shortcodes/renderDefinitionContentNextEntries.js b/11ty/shortcodes/renderDefinitionContentNextEntries.js index 66207429..c621f511 100644 --- a/11ty/shortcodes/renderDefinitionContentNextEntries.js +++ b/11ty/shortcodes/renderDefinitionContentNextEntries.js @@ -19,7 +19,7 @@ module.exports = function definitionContentNextEntries( return `
-

Previous words

+

Previous words

-

Next words

+

Next words