From c86f0d7f0476ed4d824da5ae3b0769751cf66a95 Mon Sep 17 00:00:00 2001 From: Devin Haska Date: Mon, 12 Feb 2024 09:10:46 -0800 Subject: [PATCH] feat: theme revisions --- src/_data/colors.js | 25 ++++++++- src/_includes/css/colorVariables.njk | 32 +++++++++-- src/_includes/css/spacing.njk | 6 ++ src/_includes/partials/footer.html | 7 ++- src/_includes/partials/header.html | 5 +- src/_includes/svgs/calendar.svg | 4 ++ src/_layouts/base.html | 6 +- src/_layouts/post.html | 8 ++- src/assets/css/blocks/archive.css | 4 +- src/assets/css/blocks/categories.css | 29 ++++++---- src/assets/css/blocks/date.css | 6 +- src/assets/css/blocks/pill.css | 10 +++- src/assets/css/blocks/site-footer.css | 2 +- src/assets/css/blocks/site-logo.css | 33 ++--------- src/assets/css/blocks/site-nav.css | 8 ++- src/assets/css/global/global-styles.css | 50 +++++++++++++---- src/assets/css/global/variables.css | 30 +--------- src/assets/css/utils/flex.css | 4 ++ src/assets/css/utils/wrapper.css | 2 +- src/content/pages/styleguide.html | 75 +++++++++++++++++++++++++ 20 files changed, 243 insertions(+), 103 deletions(-) create mode 100644 src/_includes/svgs/calendar.svg create mode 100644 src/content/pages/styleguide.html diff --git a/src/_data/colors.js b/src/_data/colors.js index c7248ae..334a6fd 100644 --- a/src/_data/colors.js +++ b/src/_data/colors.js @@ -36,4 +36,27 @@ const colors = { }, }; -module.exports = colors; +const colorSchemes = { + light: { + primary: "188deg 84% 35%", + secondary: "8 84% 50%", + background: "0 0% 98%", + surface: "188 27% 94%", + border: "188 48% 80%", + text: "0 0% 4%", + fadeText: "188 12% 32%", + shadow: "188deg 100% 18%", + }, + dark: { + primary: "188deg 84% 28%", + secondary: "8 84% 43%", + background: "0 0% 4%", + surface: "202 10% 10%", + border: "208 27% 15%", + text: "0 0% 98%", + fadeText: "188 12% 70%", + shadow: "188deg 100% 18%", + }, +}; + +module.exports = { colors, colorSchemes }; diff --git a/src/_includes/css/colorVariables.njk b/src/_includes/css/colorVariables.njk index 9a4b728..8c628c3 100644 --- a/src/_includes/css/colorVariables.njk +++ b/src/_includes/css/colorVariables.njk @@ -1,7 +1,29 @@ -html { -{% for colorName, colorValues in colors %} - {% for value, hex in colorValues %} - --color-{{ colorName }}-{{ value }}: {{ hex }}; - {% endfor %} +{% set colorSchemes = colors.colorSchemes %} +{% set lightScheme = colorSchemes.light %} +{% set darkScheme = colorSchemes.dark %} + +:root { +{% for colorName, value in lightScheme %} + --{{ colorName }}: {{ value }}; + --color-{{ colorName }}: hsl({{ value }}); {% endfor %} } + +{% for colorName, value in lightScheme %} +.bg-{{ colorName }} { + background-color: var(--color-{{ colorName }}); +} + +.text-{{ colorName }} { + color: var(--color-{{ colorName }}); +} +{% endfor %} + +@media (prefers-color-scheme: dark) { + :root { +{% for colorName, value in darkScheme %} + --{{ colorName }}: {{ value }}; + --color-{{ colorName }}: hsl({{ value }}); +{% endfor %} + } +} diff --git a/src/_includes/css/spacing.njk b/src/_includes/css/spacing.njk index 92e5f05..3c4b30e 100644 --- a/src/_includes/css/spacing.njk +++ b/src/_includes/css/spacing.njk @@ -74,3 +74,9 @@ } {% endfor %} +:root { +{% for keyRaw, value in spacing %} + {% set key = keyRaw | replace(".", "-") %} + --spacing-{{ key }}: {{ value }}px; +{% endfor %} +} diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html index 42948ea..adee026 100644 --- a/src/_includes/partials/footer.html +++ b/src/_includes/partials/footer.html @@ -14,13 +14,16 @@ diff --git a/src/_includes/partials/header.html b/src/_includes/partials/header.html index 07d2dc2..090df0c 100644 --- a/src/_includes/partials/header.html +++ b/src/_includes/partials/header.html @@ -2,10 +2,13 @@