From 8aa6439132648996fb7ab98d4728d343889b87b4 Mon Sep 17 00:00:00 2001 From: Xin Date: Wed, 4 Oct 2023 20:41:59 +0100 Subject: [PATCH] feat: support custom primary saturation (#131) * feat: support custom primary saturation * chore: run npm run build:css * docs: update instruction for customizing primary color --- assets/css/compiled/main.css | 78 ++++++++++--------- assets/css/styles.css | 2 + .../content/docs/advanced/customization.md | 3 +- tailwind.config.js | 8 +- 4 files changed, 48 insertions(+), 43 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index cdeae78..3d9ca66 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -987,18 +987,18 @@ video { } .bg-primary-100 { --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 94% / var(--tw-bg-opacity)); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / var(--tw-bg-opacity)); } .bg-primary-400 { --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 66% / var(--tw-bg-opacity)); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / var(--tw-bg-opacity)); } .bg-primary-600 { --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity)); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity)); } .bg-primary-700\/5 { - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05); } .bg-red-100 { --tw-bg-opacity: 1; @@ -1261,7 +1261,7 @@ video { } .text-primary-800 { --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 32% / var(--tw-text-opacity)); + color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-text-opacity)); } .text-red-900 { --tw-text-opacity: 1; @@ -1439,7 +1439,7 @@ video { } } :is(html[class~="dark"] .content h2) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.1); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1); --tw-text-opacity: 1; color: rgb(241 245 249 / var(--tw-text-opacity)); } @@ -1511,7 +1511,7 @@ video { } .content a { --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity)); text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-position: from-font; @@ -1549,7 +1549,7 @@ video { margin-bottom: 1rem; overflow-x: auto; border-radius: 0.75rem; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05); padding-top: 1rem; padding-bottom: 1rem; font-size: .9em; @@ -1561,18 +1561,18 @@ video { .content pre:not(.code-block pre) { border-width: 1px; - border-color: hsl(var(--primary-hue) 100% 24% / 0.2); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2); --tw-contrast: contrast(1.5); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } } :is(html[class~="dark"] .content pre:not(.code-block pre)) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1); } @media (prefers-contrast: more) { :is(html[class~="dark"] .content pre:not(.code-block pre)) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.4); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4); } } .content code:not(.code-block code) { @@ -2168,7 +2168,7 @@ article details > summary::before { } .code-block pre { overflow-x: auto; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05); font-size: .9em; font-weight: 500; -webkit-font-smoothing: auto; @@ -2178,18 +2178,18 @@ article details > summary::before { .code-block pre { border-width: 1px; - border-color: hsl(var(--primary-hue) 100% 24% / 0.2); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2); --tw-contrast: contrast(1.5); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } } :is(html[class~="dark"] .code-block pre) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1); } @media (prefers-contrast: more) { :is(html[class~="dark"] .code-block pre) { - border-color: hsl(var(--primary-hue) 100% 94% / 0.4); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4); } } .code-block .filename { @@ -2202,7 +2202,7 @@ article details > summary::before { white-space: nowrap; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; - background-color: hsl(var(--primary-hue) 100% 39% / 0.05); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / 0.05); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; @@ -2212,7 +2212,7 @@ article details > summary::before { color: rgb(55 65 81 / var(--tw-text-opacity)); } :is(html[class~="dark"] .code-block .filename) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1); --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); } @@ -2265,7 +2265,7 @@ article details > summary::before { .chroma .hl { display: block; width: 100%; - background-color: hsl(var(--primary-hue) 100% 32% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / 0.1); } .hextra-cards { grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)); @@ -2357,13 +2357,13 @@ article details > summary::before { } .search-wrapper li .active { border-radius: 0.375rem; - background-color: hsl(var(--primary-hue) 100% 50% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1); } @media (prefers-contrast: more) { .search-wrapper li .active { --tw-border-opacity: 1; - border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity)); } } .search-wrapper .no-result { @@ -2450,7 +2450,7 @@ article details > summary::before { } .search-wrapper .match { --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity)); } @media (max-width: 767px) { .sidebar-container { @@ -2589,11 +2589,13 @@ body { } :root { --primary-hue: 212deg; + --primary-saturation: 100%; --navbar-height: 4rem; --menu-height: 3.75rem; } .dark { --primary-hue: 204deg; + --primary-saturation: 100%; } .placeholder\:text-gray-500::-moz-placeholder { --tw-text-opacity: 1; @@ -2690,11 +2692,11 @@ body { } .hover\:bg-primary-50:hover { --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity)); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 97% / var(--tw-bg-opacity)); } .hover\:bg-primary-700:hover { --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity)); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity)); } .hover\:bg-slate-50:hover { --tw-bg-opacity: 1; @@ -2714,7 +2716,7 @@ body { } .hover\:text-primary-600:hover { --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity)); } .hover\:opacity-60:hover { opacity: 0.6; @@ -2751,7 +2753,7 @@ body { } .focus\:ring-primary-300:focus { --tw-ring-opacity: 1; - --tw-ring-color: hsl(var(--primary-hue) 100% 77% / var(--tw-ring-opacity)); + --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / var(--tw-ring-opacity)); } .active\:bg-gray-400\/20:active { background-color: rgb(156 163 175 / 0.2); @@ -2793,11 +2795,11 @@ body { } .data-\[state\=selected\]\:border-primary-500[data-state=selected] { --tw-border-opacity: 1; - border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity)); } .data-\[state\=selected\]\:text-primary-600[data-state=selected] { --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity)); } .group[data-theme=dark] .group-data-\[theme\=dark\]\:hidden { display: none; @@ -2956,7 +2958,7 @@ body { .contrast-more\:border-primary-500 { --tw-border-opacity: 1; - border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity)); } .contrast-more\:border-transparent { @@ -3068,14 +3070,14 @@ body { background-color: rgb(251 146 60 / 0.2); } :is(html[class~="dark"] .dark\:bg-primary-300\/10) { - background-color: hsl(var(--primary-hue) 100% 77% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1); } :is(html[class~="dark"] .dark\:bg-primary-400\/10) { - background-color: hsl(var(--primary-hue) 100% 66% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 66% / 0.1); } :is(html[class~="dark"] .dark\:bg-primary-600) { --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 45% / var(--tw-bg-opacity)); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-bg-opacity)); } :is(html[class~="dark"] .dark\:bg-red-900\/30) { background-color: rgb(127 29 29 / 0.3); @@ -3129,7 +3131,7 @@ body { } :is(html[class~="dark"] .dark\:text-primary-600) { --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity)); } :is(html[class~="dark"] .dark\:text-red-200) { --tw-text-opacity: 1; @@ -3218,14 +3220,14 @@ body { background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } :is(html[class~="dark"] .dark\:hover\:bg-primary-100\/5:hover) { - background-color: hsl(var(--primary-hue) 100% 94% / 0.05); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.05); } :is(html[class~="dark"] .dark\:hover\:bg-primary-700:hover) { --tw-bg-opacity: 1; - background-color: hsl(var(--primary-hue) 100% 39% / var(--tw-bg-opacity)); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 39% / var(--tw-bg-opacity)); } :is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover { - background-color: hsl(var(--primary-hue) 100% 50% / 0.1); + background-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.1); } :is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) { --tw-text-opacity: 1; @@ -3253,7 +3255,7 @@ body { } :is(html[class~="dark"] .hover\:dark\:text-primary-600):hover { --tw-text-opacity: 1; - color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity)); + color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity)); } :is(html[class~="dark"] .dark\:hover\:shadow-none:hover) { --tw-shadow: 0 0 #0000; @@ -3266,7 +3268,7 @@ body { } :is(html[class~="dark"] .dark\:focus\:ring-primary-800:focus) { --tw-ring-opacity: 1; - --tw-ring-color: hsl(var(--primary-hue) 100% 32% / var(--tw-ring-opacity)); + --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) 32% / var(--tw-ring-opacity)); } @media (prefers-contrast: more) { @@ -3286,7 +3288,7 @@ body { :is(html[class~="dark"] .contrast-more\:dark\:border-primary-500) { --tw-border-opacity: 1; - border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity)); + border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity)); } :is(html[class~="dark"] .dark\:contrast-more\:border-neutral-400) { diff --git a/assets/css/styles.css b/assets/css/styles.css index f756cee..3894080 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -21,10 +21,12 @@ body { :root { --primary-hue: 212deg; + --primary-saturation: 100%; --navbar-height: 4rem; --menu-height: 3.75rem; } .dark { --primary-hue: 204deg; + --primary-saturation: 100%; } diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index b412798..d768f07 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -34,11 +34,12 @@ The color of text mixed with `other text` can customized with: ### Primary Color -The primary color of the theme can be customized by setting the `--primary-hue` variable: +The primary color of the theme can be customized by setting the `--primary-hue` and `--primary-saturation` variables: ```css {filename="assets/css/custom.css"} :root { --primary-hue: 100deg; + --primary-saturation: 90%; } ``` diff --git a/tailwind.config.js b/tailwind.config.js index 56a1bc9..5802de8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,10 +3,10 @@ const colors = require('tailwindcss/colors') const makePrimaryColor = l => ({ opacityValue }) => { - if (opacityValue === undefined) { - return `hsl(var(--primary-hue) 100% ${l}%)` - } - return `hsl(var(--primary-hue) 100% ${l}% / ${opacityValue})` + return ( + `hsl(var(--primary-hue) var(--primary-saturation) ${l}%` + + (opacityValue ? ` / ${opacityValue})` : ')') + ) } /** @type {import('tailwindcss').Config} */