Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: support custom primary saturation (#131)

Browse Source 
* feat: support custom primary saturation

* chore: run npm run build:css

* docs: update instruction for customizing primary color
This commit is contained in:
Xin 2023-10-04 20:41:59 +01:00 committed by GitHub
parent b7558aca44
commit 8aa6439132
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
assets/css/compiled/main.css
View File

@ -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) {

2
assets/css/styles.css
View File

@ -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%;
}

3
exampleSite/content/docs/advanced/customization.md
View File

@ -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%;
}
```

8
tailwind.config.js
View File

@ -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} */