From 82ec6bbc448289b0596e8210fdb093982683e589 Mon Sep 17 00:00:00 2001 From: Vitaly Baev Date: Wed, 4 Sep 2024 22:35:36 +0200 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D1=82=D1=91=D0=BC=D0=BD=D1=83=D1=8E=20=D1=82?= =?UTF-8?q?=D0=B5=D0=BC=D1=83=20(#172)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Прототип тёмной темы * Правит мобильное меню в тёмной теме * Правит очевидные ошибки стилей после обновления верстки * Добавляет переключатель тёмной/светлой темы * Прототип тёмной темы * Правит мобильное меню в тёмной теме * Правит очевидные ошибки стилей после обновления верстки * Добавляет переключатель тёмной/светлой темы * Правит цвет выбранного тега * Merge remote-tracking branch 'upstream/master' into feature/162-dark-mode-prototype # Conflicts: # src/includes/header.njk # src/scripts/index.js * Синхронизирует ветку, обновляет названия переменных, правит ошибки верстки * Меняет цвет посещенных ссылок в тёмной теме * Обновляет svg иконки соцсетей * Обновляет использование масок фотографий для темной темы * Обновляет цвет буквицы в темной теме * Обновляет стили таблиц в темной теме * Обновляет Browserlist и версию Node.js * Добавляет Yaml Lint (#152) * Добавляет Yaml Lint * Добавляет отступ * Обновляет версии экшенов --------- Co-authored-by: Pavel Mineev Co-authored-by: Vadim Makeev * Переносит весь код скрпитов в html * Делает весь скрипт отдельным файлом, но инлайнит его в HTML * Удаляет иконки github'а * Правит ошибки стиля в js-коде * Правит стиль кавычек * Удаляет лишнюю запятую * Меняет принцип переключения тем * Правит стили * Правит цвета блоков с кодом в статье об OKLCH * Удаляет пустой блок * Правит опечатку в названии атрибута * Правит вложенность элементов * Добавляет игнорирование атрибутов `media` на элементах `meta` для html-валидатора * Добавляет префикс для токенов * Добавляет обводку лого * Делает иконки контрастнее --------- Co-authored-by: Vadim Makeev Co-authored-by: Paul Co-authored-by: Pavel Mineev Co-authored-by: monochromer Co-authored-by: monochromer --- package.json | 3 +- .../oklch-in-css-why-quit-rgb-hsl/index.md | 3 +- src/eleventy-config/transforms.js | 2 + src/images/link.svg | 2 +- src/images/logo.svg | 2 +- src/images/social/github.svg | 1 - src/images/sprite.svg | 3 + src/includes/menu.njk | 3 + src/includes/scheme-switcher.njk | 20 +++++ src/layouts/page.njk | 12 ++- src/scripts/modules/scheme-switcher.js | 85 +++++++++++++++++++ src/styles/blocks/archive.css | 2 +- src/styles/blocks/article-card.css | 6 +- src/styles/blocks/article.css | 11 +-- src/styles/blocks/articles.css | 13 ++- src/styles/blocks/content.css | 43 +++++----- src/styles/blocks/creators.css | 8 +- src/styles/blocks/footer.css | 17 ++-- src/styles/blocks/header.css | 2 +- src/styles/blocks/links.css | 9 +- src/styles/blocks/logo.css | 2 +- src/styles/blocks/main.css | 5 -- src/styles/blocks/menu.css | 19 +++-- src/styles/blocks/notice.css | 2 +- src/styles/blocks/page.css | 4 +- src/styles/blocks/player.css | 1 + src/styles/blocks/podcast-preview.css | 25 +++--- src/styles/blocks/podcast.css | 4 +- src/styles/blocks/scheme-switcher.css | 28 ++++++ src/styles/blocks/tooltip.css | 8 +- src/styles/styles.css | 17 ++++ src/styles/themes/dark.css | 66 ++++++++++++++ src/styles/themes/light.css | 66 ++++++++++++++ 33 files changed, 389 insertions(+), 105 deletions(-) delete mode 100644 src/images/social/github.svg create mode 100644 src/includes/scheme-switcher.njk create mode 100644 src/scripts/modules/scheme-switcher.js create mode 100644 src/styles/blocks/scheme-switcher.css create mode 100644 src/styles/themes/dark.css create mode 100644 src/styles/themes/light.css diff --git a/package.json b/package.json index 5517b14b5..4fea412b1 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,8 @@ "suppressErrors": [ "Bad value for attribute “href” on element “a”: Illegal character in fragment: “#” is not allowed.", "Bad value “soft-light” for attribute “mode” on element “feBlend”.", - "Element “style” not allowed as child of element “div” in this context." + "Element “style” not allowed as child of element “div” in this context.", + "Attribute “media” not allowed on element “meta” at this point" ] } } diff --git a/src/articles/oklch-in-css-why-quit-rgb-hsl/index.md b/src/articles/oklch-in-css-why-quit-rgb-hsl/index.md index 7b8c70d5a..7d708343e 100644 --- a/src/articles/oklch-in-css-why-quit-rgb-hsl/index.md +++ b/src/articles/oklch-in-css-why-quit-rgb-hsl/index.md @@ -25,7 +25,8 @@ featured: true margin-block: -16px 16px; padding-block: 24px; column-gap: 8px; - border: 4px solid var(--color-green-light); + border: 4px solid transparent; + border-image: linear-gradient(90deg, var(--token-color-content-block-code-gradient)) 1; background-image: repeating-conic-gradient( #fff 0% 25%, diff --git a/src/eleventy-config/transforms.js b/src/eleventy-config/transforms.js index 2f5aab607..a139eb94c 100644 --- a/src/eleventy-config/transforms.js +++ b/src/eleventy-config/transforms.js @@ -234,6 +234,8 @@ export default function(eleventyConfig) { if (outputPath && outputPath.endsWith('.html')) { return htmlmin.minify(content, { collapseWhitespace: true, + minifyJS: true, + minifyCSS: true, }); } return content; diff --git a/src/images/link.svg b/src/images/link.svg index 81c27b366..c7fd9f449 100644 --- a/src/images/link.svg +++ b/src/images/link.svg @@ -1 +1 @@ - + diff --git a/src/images/logo.svg b/src/images/logo.svg index 23eb6922f..af9be29f1 100644 --- a/src/images/logo.svg +++ b/src/images/logo.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/src/images/social/github.svg b/src/images/social/github.svg deleted file mode 100644 index ac433c45c..000000000 --- a/src/images/social/github.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/images/sprite.svg b/src/images/sprite.svg index d5f815c3d..6a2006a2a 100644 --- a/src/images/sprite.svg +++ b/src/images/sprite.svg @@ -1,4 +1,7 @@ + + + diff --git a/src/includes/menu.njk b/src/includes/menu.njk index 98b4a1c09..0751aa2e2 100644 --- a/src/includes/menu.njk +++ b/src/includes/menu.njk @@ -19,4 +19,7 @@ {% endfor %} +
  • + {% include "scheme-switcher.njk" %} +
    • diff --git a/src/includes/scheme-switcher.njk b/src/includes/scheme-switcher.njk new file mode 100644 index 000000000..470c2aaa7 --- /dev/null +++ b/src/includes/scheme-switcher.njk @@ -0,0 +1,20 @@ +
    + + + +
    diff --git a/src/layouts/page.njk b/src/layouts/page.njk index f4927cb4f..abaee6e28 100644 --- a/src/layouts/page.njk +++ b/src/layouts/page.njk @@ -8,7 +8,14 @@ - + + + + {% if page.url.startsWith('/podcast/') %} @@ -21,6 +28,9 @@ + diff --git a/src/scripts/modules/scheme-switcher.js b/src/scripts/modules/scheme-switcher.js new file mode 100644 index 000000000..2bd431cc8 --- /dev/null +++ b/src/scripts/modules/scheme-switcher.js @@ -0,0 +1,85 @@ +const STORAGE_KEY = 'color-scheme'; + +const THEMES = { + AUTO: 'auto', + LIGHT: 'light', + DARK: 'dark', +}; + +const MEDIA = { + ENABLED: 'all', + DISABLED: 'not all', + [THEMES.LIGHT]: '(prefers-color-scheme: light)', + [THEMES.DARK]: '(prefers-color-scheme: dark)', +}; + +const domRefs = { + meta: { + [THEMES.LIGHT]: document.head.querySelector('meta[name=theme-color][media*=prefers-color-scheme][media*=light]'), + [THEMES.DARK]: document.head.querySelector('meta[name=theme-color][media*=prefers-color-scheme][media*=dark]'), + }, + styles: { + [THEMES.LIGHT]: document.head.querySelector('style[media*=prefers-color-scheme][media*=light]'), + [THEMES.DARK]: document.head.querySelector('style[media*=prefers-color-scheme][media*=dark]'), + }, + switcher: null, +}; + +function getCurrentTheme() { + const storedTheme = localStorage.getItem(STORAGE_KEY); + return storedTheme || THEMES.AUTO; +} + +function saveCurrentTheme(theme) { + if (!theme || theme === THEMES.AUTO) { + localStorage.removeItem(STORAGE_KEY); + } else { + localStorage.setItem(STORAGE_KEY, theme); + } +} + +function applyTheme(theme) { + theme = theme ?? getCurrentTheme(); + + if (domRefs.switcher) { + for (const button of domRefs.switcher.querySelectorAll('.scheme-switcher__button')) { + button.setAttribute('aria-pressed', button.value === theme); + } + } + + [ + ...Object.entries(domRefs.meta), + ...Object.entries(domRefs.styles), + ].forEach(([originalTheme, element]) => { + element.media = theme === THEMES.AUTO + ? MEDIA[originalTheme] + : theme === originalTheme ? MEDIA.ENABLED : MEDIA.DISABLED; + ; + }); +} + +applyTheme(); + +document.addEventListener('DOMContentLoaded', () => { + domRefs.switcher = document.querySelector('.scheme-switcher'); + + domRefs.switcher?.addEventListener('click', (event) => { + const button = event.target.closest('.scheme-switcher__button'); + if (!button) { + return; + } + const theme = button.value; + saveCurrentTheme(theme); + applyTheme(theme); + }); + + window.addEventListener('storage', (event) => { + if (event.key !== STORAGE_KEY) { + return; + } + const newTheme = event.newValue; + applyTheme(newTheme); + }); + + applyTheme(); +}); diff --git a/src/styles/blocks/archive.css b/src/styles/blocks/archive.css index 3a04cf7bc..faa429325 100644 --- a/src/styles/blocks/archive.css +++ b/src/styles/blocks/archive.css @@ -89,7 +89,7 @@ } .archive__tags-link:not([href]) { - color: black; + color: var(--token-color-archive-tag-current); font-weight: 900; font-stretch: expanded; } diff --git a/src/styles/blocks/article-card.css b/src/styles/blocks/article-card.css index 4756ed440..49f6e0417 100644 --- a/src/styles/blocks/article-card.css +++ b/src/styles/blocks/article-card.css @@ -83,7 +83,7 @@ } .article-card__link { - color: var(--color-grey-darker); + color: var(--token-color-article-card-link); text-decoration: none; } @@ -120,7 +120,7 @@ .article-card__date { grid-area: date; - color: var(--color-grey-medium); + color: var(--token-color-article-card-date); } .article-card__date, @@ -133,7 +133,7 @@ } .article-card__author { - color: var(--color-grey-darker); + color: var(--token-color-article-card-author); text-transform: uppercase; } diff --git a/src/styles/blocks/article.css b/src/styles/blocks/article.css index 8414f4a08..70eeaf71c 100644 --- a/src/styles/blocks/article.css +++ b/src/styles/blocks/article.css @@ -47,7 +47,7 @@ grid-template-columns: 1fr 1fr; margin: 0 0 64px; padding-right: 0; - color: black; + color: var(--token-color-text-primary); background-color: transparent; } } @@ -120,8 +120,9 @@ display: flex; flex-direction: column; padding: 24px 24px 39px; - border-top: 1px solid var(--color-grey-medium); - border-bottom: 1px solid var(--color-grey-medium); + border-width: 1px 0; + border-style: solid; + border-color: var(--token-color-article-heading-border); } } @@ -192,7 +193,7 @@ @media (min-width: 1024px) { .article__link { - color: black; + color: var(--token-color-text-primary); } } @@ -248,7 +249,7 @@ .article__date { margin-right: 21px; - color: var(--color-grey-lighter); + color: var(--token-color-article-date); } .article__tags { diff --git a/src/styles/blocks/articles.css b/src/styles/blocks/articles.css index 9d02ac7f7..9af04b533 100644 --- a/src/styles/blocks/articles.css +++ b/src/styles/blocks/articles.css @@ -8,11 +8,11 @@ .articles__item { padding: 14px 0 16px; - border-top: 1px solid var(--color-grey-lighter); + border-top: 1px solid var(--token-color-articles-item-border-color); } .articles__item:last-of-type { - border-bottom: 1px solid var(--color-grey-lighter); + border-bottom: 1px solid var(--token-color-articles-item-border-color); } @media (min-width: 1024px) { @@ -36,7 +36,7 @@ margin-left: 1px; padding: 16px 40px 32px 24px; border: none; - box-shadow: 0 0 0 1px var(--color-grey-lighter); + box-shadow: 0 0 0 1px var(--token-color-articles-item-border-color); } .articles__item--main:last-of-type { @@ -54,7 +54,7 @@ .articles__item--articles, .articles__item--articles:last-of-type { - border-color: var(--color-grey-lighter); + border-color: var(--token-color-articles-item-border-color); } /* Related */ @@ -70,7 +70,7 @@ margin-left: 1px; padding: 16px 32px 32px 24px; border: none; - box-shadow: 0 0 0 1px var(--color-grey-lighter); + box-shadow: 0 0 0 1px var(--token-color-articles-item-border-color); } .articles__item--related:last-of-type { @@ -84,7 +84,7 @@ display: flex; flex-direction: column; padding: 16px 0; - background-color: var(--color-grey-dark); + background-color: var(--token-color-articles-item-featured-backgound); border-top: none; } @@ -93,6 +93,5 @@ z-index: 1; grid-row-start: 1; grid-row-end: 3; - box-shadow: 0 0 0 1px var(--color-grey-dark); } } diff --git a/src/styles/blocks/content.css b/src/styles/blocks/content.css index 1a90ecc6b..70d15486d 100644 --- a/src/styles/blocks/content.css +++ b/src/styles/blocks/content.css @@ -3,7 +3,7 @@ .content { max-width: 700px; margin: 0 auto; - color: black; + color: var(--token-color-content-text); font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; @@ -23,6 +23,7 @@ .content h3 { margin-top: 32px; margin-bottom: 16px; + color: var(--token-color-content-heading); font-size: 16px; font-stretch: expanded; line-height: 1.2; @@ -30,6 +31,10 @@ text-transform: uppercase; } +.content strong { + color: var(--token-color-content-heading); +} + @media (min-width: 600px) { .content h2, .content h3 { @@ -70,7 +75,7 @@ .content h2 .tooltip__button, .content h3 .tooltip__button { - opacity: 0.3; + opacity: calc(0.3 * var(--is-light-theme) + 0.7 * var(--is-dark-theme)); } .content h2:hover .tooltip__button, @@ -98,12 +103,12 @@ /* Links */ .content a:link { - color: var(--color-blue-darker); + color: var(--token-color-content-link); transition: color 0.2s linear; } .content a:visited { - color: var(--color-grey-medium); + color: var(--token-color-content-link-visited); } @media (hover: hover) and (pointer: fine) { @@ -112,7 +117,7 @@ } } -.content a:active { +.content a:active { color: var(--color-turquoise); } @@ -246,6 +251,7 @@ margin-bottom: 16px; padding: 5px 0; padding-left: 14px; + color: var(--token-color-content-blockquote-text); } @media (min-width: 1240px) { @@ -262,7 +268,7 @@ bottom: 0; left: 0; width: 1px; - background-color: var(--color-grey-lighter); + background-color: var(--token-color-content-blockquote-border); content: ''; } @@ -281,7 +287,7 @@ padding-left: 0.25em; font-family: 'Rostin', monospace; word-wrap: break-word; - background-color: var(--color-grey-lightest); + background-color: var(--token-color-content-inline-code-background); } .content pre { @@ -290,11 +296,10 @@ margin-top: 16px; margin-bottom: 16px; padding: 4px 16px; - background-color: var(--color-green-light); + background-color: var(--token-color-content-block-code-background); background-image: linear-gradient( to right, - var(--color-green-light) 0%, - var(--color-blue-lightest) 100% + var(--token-color-content-block-code-gradient) ); } @@ -314,8 +319,7 @@ width: 76px; background-image: linear-gradient( to left, - var(--color-blue-lightest) 0%, - var(--color-blue-lightest-0a) 100% + var(--token-color-content-block-code-fade) ); content: ''; pointer-events: none; @@ -326,7 +330,7 @@ padding: 16px 0; overflow-x: auto; scrollbar-width: thin; - scrollbar-color: var(--color-green-darker-50a) transparent; + scrollbar-color: var(--token-color-content-block-code-scrollbar) transparent; background-color: transparent; user-select: all; } @@ -353,13 +357,11 @@ .content pre code::-webkit-scrollbar-thumb { background-color: var(--color-green-darker-50a); - border-top: 4px solid var(--color-green-light); + border-radius: 8px; } .content pre:hover code::-webkit-scrollbar-thumb { background-color: var(--color-green-darker); - border-top: none; - border-radius: 8px; } .content pre code::-webkit-scrollbar-thumb:active { @@ -384,7 +386,7 @@ margin-top: 0.13em; margin-left: -5px; padding-right: 15px; - color: var(--color-grey-medium); + color: var(--token-color-content-first-letter); font-weight: normal; font-size: 3.5em; font-stretch: expanded; @@ -411,16 +413,15 @@ } .content thead { - background-color: var(--color-green-light); + background-color: var(--token-color-content-table-head); background-image: linear-gradient( to right, - var(--color-green-light) 0%, - var(--color-blue-lightest) 100% + var(--token-color-content-table-head-gradient) ); } .content tr { - border-bottom: 1px solid var(--color-grey-lighter); + border-bottom: 1px solid var(--token-color-content-table-border); } .content th, diff --git a/src/styles/blocks/creators.css b/src/styles/blocks/creators.css index 21c8df6ca..f8941f770 100644 --- a/src/styles/blocks/creators.css +++ b/src/styles/blocks/creators.css @@ -22,7 +22,7 @@ .creators__author { margin-bottom: 19px; - color: var(--color-grey-darker); + color: var(--token-color-creators-author); letter-spacing: 0.05em; text-transform: uppercase; } @@ -32,7 +32,7 @@ } .creators__author:link:visited { - color: var(--color-grey-medium); + color: var(--token-color-creators-author-visited); } @media (hover: hover) and (pointer: fine) { @@ -87,13 +87,13 @@ } .creators__collaborators-link:link { - color: var(--color-grey-darker); + color: var(--token-color-creators-author); letter-spacing: -0.03em; transition: color 0.2s linear; } .creators__collaborators-link:visited { - color: var(--color-grey-medium); + color: var(--token-color-creators-author-visited); } .creators__collaborators-link:not(:last-child) { diff --git a/src/styles/blocks/footer.css b/src/styles/blocks/footer.css index c58f2994a..cdaa43499 100644 --- a/src/styles/blocks/footer.css +++ b/src/styles/blocks/footer.css @@ -6,8 +6,8 @@ grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 24px; - color: var(--color-grey-lighter); - background-color: var(--color-grey-dark); + color: var(--token-color-footer-text); + background-color: var(--token-color-footer-background); } @media (min-width: 630px) { @@ -29,23 +29,20 @@ transition: color 0.2s linear; } -.footer__link[href]:link { - color: var(--color-grey-lightest); +.footer__link:link { + color: var(--token-color-footer-link); } -.footer__link[href]:visited { +.footer__link:visited { color: white; } @media (hover: hover) and (pointer: fine) { - .footer__link[href]:hover { - color: white; + .footer__link:hover { + color: var(--color-turquoise); } } -.footer__link[href]:active { - color: var(--color-turquoise); -} /* Copy */ diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css index b1c1aeaa7..c6deb519c 100644 --- a/src/styles/blocks/header.css +++ b/src/styles/blocks/header.css @@ -68,7 +68,7 @@ grid-row: 1; grid-column: 1 / -1; padding-bottom: 13px; - border-bottom: 1px solid var(--color-grey-lighter); + border-bottom: 1px solid var(--token-color-header-index-border); } } diff --git a/src/styles/blocks/links.css b/src/styles/blocks/links.css index 770946af5..0cf903d20 100644 --- a/src/styles/blocks/links.css +++ b/src/styles/blocks/links.css @@ -4,7 +4,7 @@ display: grid; margin-top: -1px; padding: 16px 16px 24px; - background-color: var(--color-grey-lightest); + background-color: var(--token-color-links-background); } @media (min-width: 568px) { @@ -76,7 +76,7 @@ } .links__section:not(:last-child) { - border-bottom: 1px solid var(--color-grey-lighter); + border-bottom: 1px solid var(--token-color-links-divider); } /* Description */ @@ -140,6 +140,7 @@ .links__icon--facebook { background-image: url('/images/social/facebook.svg'); + border-radius: 100%; } .links__icon--mastodon { @@ -158,10 +159,6 @@ background-image: url('/images/social/threads.svg'); } -.links__icon--github { - background-image: url('/images/social/github.svg'); -} - .links__icon--spotify { background-image: url('/images/social/spotify.svg'); } diff --git a/src/styles/blocks/logo.css b/src/styles/blocks/logo.css index df64c6d7a..25445e7cd 100644 --- a/src/styles/blocks/logo.css +++ b/src/styles/blocks/logo.css @@ -72,7 +72,7 @@ .logo__tagline { margin: 0; - color: var(--color-grey-dark); + color: var(--token-color-logo-tagline); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; diff --git a/src/styles/blocks/main.css b/src/styles/blocks/main.css index 7f1006862..39ed546fa 100644 --- a/src/styles/blocks/main.css +++ b/src/styles/blocks/main.css @@ -1,10 +1,5 @@ /* Main */ -.main { - /* padding: 16px 8px 37px; */ - background-color: white; -} - .main__content { margin-bottom: 30px; } diff --git a/src/styles/blocks/menu.css b/src/styles/blocks/menu.css index b0f43cced..19720b557 100644 --- a/src/styles/blocks/menu.css +++ b/src/styles/blocks/menu.css @@ -33,7 +33,7 @@ @media (max-width: 735px) { .menu__icon { display: block; - stroke: black; + stroke: var(--token-color-menu-button); } .menu__icon:hover { @@ -67,7 +67,7 @@ margin-top: 14px; padding-bottom: 26px; padding-left: 64px; - background-color: white; + background-color: var(--token-color-menu-list-background); } .menu__list--open { @@ -94,6 +94,7 @@ .menu__list { display: grid; grid-auto-flow: column; + align-items: center; column-gap: 8px; } @@ -112,15 +113,19 @@ } @media (min-width: 736px) { - .menu--index .menu__item:not(:last-of-type) { + .menu--index .menu__item { margin-right: 8px; } + + .menu--index .menu__item--scheme-switcher { + margin-left: auto; + } } /* Link */ .menu__link { - color: var(--color-special-dark); + color: var(--token-color-menu-link); } .menu__link:not([aria-current]):hover { @@ -128,12 +133,8 @@ } .menu__link[aria-current] { - color: black; + color: var(--token-color-menu-link-current); font-weight: bold; font-stretch: expanded; text-decoration: none; } - -.menu__link--inactive { - color: var(--color-grey-medium); -} diff --git a/src/styles/blocks/notice.css b/src/styles/blocks/notice.css index 21f49a89a..ee5320d59 100644 --- a/src/styles/blocks/notice.css +++ b/src/styles/blocks/notice.css @@ -29,7 +29,7 @@ .notice__link { display: inline-block; - color: black; + color: inherit; font-size: 24px; letter-spacing: -0.02em; text-decoration: none; diff --git a/src/styles/blocks/page.css b/src/styles/blocks/page.css index 5e256286e..806acb637 100644 --- a/src/styles/blocks/page.css +++ b/src/styles/blocks/page.css @@ -6,9 +6,9 @@ } .page { - color: black; + color: var(--token-color-text-primary); font-family: 'Dewi', sans-serif; - background-color: white; + background-color: var(--token-color-background-primary); scroll-behavior: smooth; } diff --git a/src/styles/blocks/player.css b/src/styles/blocks/player.css index 787853456..2b9cb5a54 100644 --- a/src/styles/blocks/player.css +++ b/src/styles/blocks/player.css @@ -26,6 +26,7 @@ .player__icon { display: block; margin: auto; + fill: currentcolor; } .player__audio { diff --git a/src/styles/blocks/podcast-preview.css b/src/styles/blocks/podcast-preview.css index e594a398e..3c72335e3 100644 --- a/src/styles/blocks/podcast-preview.css +++ b/src/styles/blocks/podcast-preview.css @@ -1,16 +1,11 @@ .podcast-preview { - --main-color: var(--color-grey-darker); - --background-color: transparent; - --meta-color: var(--color-grey-medium); - --border-color: var(--color-grey-lighter); - --link-hover-color: var(--color-blue-light); position: relative; display: flex; flex-direction: column; padding: 24px; - color: var(--main-color); - background-color: var(--background-color); - border: 1px solid var(--border-color); + color: var(--token-color-podcast-preview-text); + background-color: var(--token-color-podcast-preview-background); + border: 1px solid var(--token-color-podcast-preview-border); } @media (min-width: 540px) { @@ -54,26 +49,26 @@ } .podcast-preview__link:hover::after { - border-color: var(--link-hover-color); + border-color: var(--token-color-podcast-preview-link-hover); } .podcast-preview__date { margin-top: auto; padding-top: 24px; - color: var(--meta-color); + color: var(--token-color-podcast-preview-meta); } .podcast-preview__number { display: block; margin-bottom: 8px; - color: var(--meta-color); + color: var(--token-color-podcast-preview-meta); font-stretch: expanded; text-transform: uppercase; } .podcast-preview--inverse { - --main-color: #ffffff; - --meta-color: var(--color-grey-lighter); - --background-color: var(--color-grey-dark); - --border-color: var(--color-grey-dark); + --token-color-podcast-preview-text: #ffffff; + --token-color-podcast-preview-meta: var(--color-grey-lighter); + --token-color-podcast-preview-background: var(--color-grey-dark); + --token-color-podcast-preview-border: var(--color-grey-dark); } diff --git a/src/styles/blocks/podcast.css b/src/styles/blocks/podcast.css index f9c0f916c..df31a64d0 100644 --- a/src/styles/blocks/podcast.css +++ b/src/styles/blocks/podcast.css @@ -33,7 +33,7 @@ .podcast__header { grid-column: 1 / -1; padding-bottom: 24px; - border-bottom: 1px solid var(--color-grey-lightest); + border-bottom: 1px solid var(--token-color-podcast-header-border); } .podcast__number { @@ -161,7 +161,7 @@ .podcast__timecode-link { margin-right: 5px; - color: var(--color-blue-darker); + color: var(--token-color-podcast-timecode-link); font-size: 15px; font-family: 'Rostin', monospace; text-decoration: none; diff --git a/src/styles/blocks/scheme-switcher.css b/src/styles/blocks/scheme-switcher.css new file mode 100644 index 000000000..d88671c39 --- /dev/null +++ b/src/styles/blocks/scheme-switcher.css @@ -0,0 +1,28 @@ +/* Color Scheme Switcher */ + +.scheme-switcher { + display: flex; + gap: 4px; +} + +.scheme-switcher__button { + padding: 4px; + color: var(--color-light-text-secondary); + background: none; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.scheme-switcher__button[aria-pressed='true'] { + background-color: var(--token-color-scheme-switcher-hover); +} + +.scheme-switcher__button:hover { + color: var(--color-special-neutral); +} + +.scheme-switcher__icon { + display: block; + fill: currentcolor; +} diff --git a/src/styles/blocks/tooltip.css b/src/styles/blocks/tooltip.css index 484815567..76e229723 100644 --- a/src/styles/blocks/tooltip.css +++ b/src/styles/blocks/tooltip.css @@ -15,17 +15,13 @@ padding: 0; font-size: inherit; vertical-align: middle; - background-color: transparent; - background-image: url('/images/link.svg'); + background-color: var(--color-blue-darker); + mask-image: url('/images/link.svg'); border: none; cursor: pointer; appearance: none; } -.content .tooltip__button:visited { - color: var(--color-blue-darker); -} - .tooltip__button:focus { opacity: 1; } diff --git a/src/styles/styles.css b/src/styles/styles.css index ecb11b673..8e1db1aff 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -12,6 +12,7 @@ @import 'blocks/header.css'; @import 'blocks/logo.css'; @import 'blocks/menu.css'; +@import 'blocks/scheme-switcher.css'; @import 'blocks/articles.css'; @import 'blocks/archive.css'; @import 'blocks/notice.css'; @@ -68,4 +69,20 @@ --color-special-neutral: #61afb4; --color-special-dark-10a: #3b83ba1a; --color-special-dark: #3b84bb; + + --color-dark-background: #1b2028; + --color-dark-background-social: #151618; + --color-dark-background-footer: #0f0f0f; + --color-dark-background-featured-article: #151a22; + --color-dark-background-code: #151618; + --color-dark-background-code-0a: #15161800; + --color-dark-background-code-scrollbar: #1b2028; + --color-dark-background-mobile-sidebar: #1e2735; /* #13171e; */ + --color-dark-divider: #2d323d; + --color-dark-text-primary: #dae3eb; + --color-dark-text-secondary: #91a1b0; + --color-dark-text-content: #bac5cf; + --color-dark-text-header: #f1f6fb; + --color-dark-text-link: #539dd4; + --color-dark-text-link-visited: #6885ec; } diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css new file mode 100644 index 000000000..669d62d47 --- /dev/null +++ b/src/styles/themes/dark.css @@ -0,0 +1,66 @@ +:root { + --token-color-text-primary: var(--color-dark-text-primary); + --token-color-background-primary: var(--color-dark-background); + + --token-color-logo-tagline: var(--color-dark-text-primary); + + --token-color-links-background: var(--color-dark-background-social); + --token-color-links-divider: var(--color-dark-divider); + + --token-color-menu-button: var(--color-dark-text-header); + --token-color-menu-list-background: var(--color-dark-background); + --token-color-menu-link: var(--color-dark-text-link); + --token-color-menu-link-current: var(--color-dark-text-header); + + --token-color-scheme-switcher-hover: var(--color-dark-divider); + + --token-color-header-index-border: var(--color-dark-divider); + + --token-color-footer-text: var(--color-dark-text-secondary); + --token-color-footer-background: var(--color-dark-background-footer); + --token-color-footer-link: var(--color-dark-text-primary); + + --token-color-archive-tag-current: inherit; + + --token-color-podcast-header-border: var(--color-dark-divider); + --token-color-podcast-timecode-link: var(--color-dark-text-link); + + --token-color-podcast-preview-text: var(--color-dark-text-primary); + --token-color-podcast-preview-background: transparent; + --token-color-podcast-preview-meta: var(--color-dark-text-secondary); + --token-color-podcast-preview-border: var(--color-dark-divider); + --token-color-podcast-preview-link-hover: var(--color-blue-light); + + --token-color-article-card-link: var(--color-dark-text-primary); + --token-color-article-card-date: var(--color-dark-text-secondary); + --token-color-article-card-author: var(--color-dark-text-primary); + + --token-color-articles-item-border-color: var(--color-dark-divider); + --token-color-articles-item-featured-backgound: var(--color-dark-background-featured-article); + + --token-color-article-heading-border: var(--color-dark-divider); + --token-color-article-date: var(--color-dark-text-secondary); + + --token-color-creators-author: var(--color-dark-text-secondary); + --token-color-creators-author-visited: var(--color-dark-text-link-visited); + + --token-color-content-text: var(--color-dark-text-content); + --token-color-content-heading: var(--color-dark-text-primary); + --token-color-content-link: var(--color-dark-text-link); + --token-color-content-link-visited: var(--color-dark-text-link-visited); + --token-color-content-blockquote-text: var(--color-dark-text-content); + --token-color-content-blockquote-border: #4d5466; + --token-color-content-first-letter: var(--color-dark-text-primary); + --token-color-content-table-border: #4d5466; + --token-color-content-table-head: #2a3443; + --token-color-content-table-head-gradient: var(--token-color-content-table-head) 0 0; + --token-color-content-inline-code-background: var(--color-dark-background-code); + --token-color-content-block-code-background: var(--color-dark-background-code); + --token-color-content-block-code-gradient: var(--color-dark-background-code) 0 0; + --token-color-content-block-code-fade: var(--color-dark-background-code), var(--color-dark-background-code-0a); + --token-color-content-block-code-scrollbar: var(--color-dark-background-code-scrollbar); + + --is-light-theme: 0; + --is-dark-theme: 1; + color-scheme: dark; +} diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css new file mode 100644 index 000000000..f77fa85ec --- /dev/null +++ b/src/styles/themes/light.css @@ -0,0 +1,66 @@ +:root { + --token-color-text-primary: #000000; + --token-color-background-primary: #ffffff; + + --token-color-logo-tagline: var(--color-grey-dark); + + --token-color-links-background: var(--color-grey-lightest); + --token-color-links-divider: var(--color-grey-lighter); + + --token-color-menu-button: #000000; + --token-color-menu-list-background: #ffffff; + --token-color-menu-link: var(--color-special-dark); + --token-color-menu-link-current: #000000; + + --token-color-scheme-switcher-hover: var(--color-grey-lightest); + + --token-color-header-index-border: var(--color-grey-lighter); + + --token-color-footer-text: var(--color-grey-lighter); + --token-color-footer-background: var(--color-grey-dark); + --token-color-footer-link: var(--color-grey-lightest); + + --token-color-archive-tag-current: #000000; + + --token-color-podcast-header-border: var(--color-grey-lightest); + --token-color-podcast-timecode-link: var(--color-blue-darker); + + --token-color-podcast-preview-text: var(--color-grey-darker); + --token-color-podcast-preview-background: transparent; + --token-color-podcast-preview-meta: var(--color-grey-medium); + --token-color-podcast-preview-border: var(--color-grey-lighter); + --token-color-podcast-preview-link-hover: var(--color-blue-light); + + --token-color-article-card-link: var(--color-grey-darker); + --token-color-article-card-date: var(--color-grey-medium); + --token-color-article-card-author: var(--color-grey-darker); + + --token-color-articles-item-border-color: var(--color-grey-lighter); + --token-color-articles-item-featured-backgound: var(--color-grey-dark); + + --token-color-article-heading-border: var(--color-grey-medium); + --token-color-article-date: var(--color-grey-lighter); + + --token-color-creators-author: var(--color-grey-darker); + --token-color-creators-author-visited: var(--color-grey-medium); + + --token-color-content-text: #000000; + --token-color-content-heading: inherit; + --token-color-content-link: var(--color-blue-darker); + --token-color-content-link-visited: var(--color-grey-medium); + --token-color-content-blockquote-text: inherit; + --token-color-content-blockquote-border: var(--color-grey-lighter); + --token-color-content-first-letter: var(--color-grey-medium); + --token-color-content-table-border: var(--color-grey-lighter); + --token-color-content-table-head: var(--color-green-light); + --token-color-content-table-head-gradient: var(--color-green-light), var(--color-blue-lightest); + --token-color-content-inline-code-background: var(--color-grey-lightest); + --token-color-content-block-code-background: var(--color-green-light); + --token-color-content-block-code-gradient: var(--color-green-light), var(--color-blue-lightest); + --token-color-content-block-code-fade: var(--color-blue-lightest), var(--color-blue-lightest-0a); + --token-color-content-block-code-scrollbar: var(--color-green-darker-50a); + + --is-light-theme: 1; + --is-dark-theme: 0; + color-scheme: light; +}