feat: support custom primary saturation (#131)

* feat: support custom primary saturation * chore: run npm run build:css * docs: update instruction for customizing primary color
imfing · Oct 4, 2023 · 8aa6439 · 8aa6439
1 parent b7558ac
commit 8aa6439
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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} */