drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-07-05 13:57:10 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

change multiplier to just adding percentages

Browse Source
This commit is contained in:
Attila Greguss
2024-10-10 11:16:40 +01:00
parent 8954247842
commit b4f6e2fd7a
2 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1006,18 +1006,18 @@ video {
} }
.hx-bg-primary-100 { .hx-bg-primary-100 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.44) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 44%) / var(--tw-bg-opacity));
} }
.hx-bg-primary-400 { .hx-bg-primary-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.16) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 16%) / var(--tw-bg-opacity));
} }
.hx-bg-primary-600 { .hx-bg-primary-600 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-bg-opacity));
} }
.hx-bg-primary-700\/5 { .hx-bg-primary-700\/5 {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.89) / 0.05); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 11%) / 0.05);
} }
.hx-bg-red-100 { .hx-bg-red-100 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
@ -1274,7 +1274,7 @@ video {
} }
.hx-text-primary-800 { .hx-text-primary-800 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.82) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 18%) / var(--tw-text-opacity));
} }
.hx-text-red-900 { .hx-text-red-900 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
@ -1449,7 +1449,7 @@ video {
} }
} }
.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) { .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.44) / 0.1); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 44%) / 0.1);
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(241 245 249 / var(--tw-text-opacity)); color: rgb(241 245 249 / var(--tw-text-opacity));
} }
@ -1517,7 +1517,7 @@ video {
} }
.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) { .content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-text-opacity));
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-thickness: from-font; text-decoration-thickness: from-font;
text-underline-position: from-font; text-underline-position: from-font;
@ -1551,7 +1551,7 @@ video {
margin-bottom: 1rem; margin-bottom: 1rem;
overflow-x: auto; overflow-x: auto;
border-radius: 0.75rem; border-radius: 0.75rem;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.89) / 0.05); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 11%) / 0.05);
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
font-size: .9em; font-size: .9em;
@ -1563,18 +1563,18 @@ video {
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) { .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)) {
border-width: 1px; border-width: 1px;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.74) / 0.2); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 26%) / 0.2);
--tw-contrast: contrast(1.5); --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); 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);
} }
} }
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) { .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.27) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 27%) / 0.1);
} }
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
.content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) { .content :where(pre):not(:where(.hextra-code-block pre, [class~=not-prose],[class~=not-prose] *)):is(html[class~="dark"] *) {
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.44) / 0.4); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 44%) / 0.4);
} }
} }
.content :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) { .content :where(code):not(:where(.hextra-code-block code, [class~=not-prose],[class~=not-prose] *)) {
@ -2135,7 +2135,7 @@ article details > summary::before {
} }
.hextra-code-block pre { .hextra-code-block pre {
overflow-x: auto; overflow-x: auto;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.89) / 0.05); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 11%) / 0.05);
font-size: .9em; font-size: .9em;
font-weight: 500; font-weight: 500;
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
@ -2145,18 +2145,18 @@ article details > summary::before {
.hextra-code-block pre { .hextra-code-block pre {
border-width: 1px; border-width: 1px;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.74) / 0.2); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 26%) / 0.2);
--tw-contrast: contrast(1.5); --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); 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);
} }
} }
.hextra-code-block pre:is(html[class~="dark"] *) { .hextra-code-block pre:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.27) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 27%) / 0.1);
} }
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
.hextra-code-block pre:is(html[class~="dark"] *) { .hextra-code-block pre:is(html[class~="dark"] *) {
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.44) / 0.4); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 44%) / 0.4);
} }
} }
.hextra-code-block .filename { .hextra-code-block .filename {
@ -2169,7 +2169,7 @@ article details > summary::before {
white-space: nowrap; white-space: nowrap;
border-top-left-radius: 0.75rem; border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem; border-top-right-radius: 0.75rem;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.89) / 0.05); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 11%) / 0.05);
padding-top: 0.5rem; padding-top: 0.5rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-left: 1rem; padding-left: 1rem;
@ -2179,7 +2179,7 @@ article details > summary::before {
color: rgb(55 65 81 / var(--tw-text-opacity)); color: rgb(55 65 81 / var(--tw-text-opacity));
} }
.hextra-code-block .filename:is(html[class~="dark"] *) { .hextra-code-block .filename:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.27) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 27%) / 0.1);
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity)); color: rgb(229 231 235 / var(--tw-text-opacity));
} }
@ -2236,7 +2236,7 @@ article details > summary::before {
.chroma .hl { .chroma .hl {
display: block; display: block;
width: 100%; width: 100%;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.82) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 18%) / 0.1);
} }
.hextra-cards { .hextra-cards {
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr)); grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
@ -2348,13 +2348,13 @@ article details > summary::before {
} }
.search-wrapper li .active { .search-wrapper li .active {
border-radius: 0.375rem; border-radius: 0.375rem;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 0%) / 0.1);
} }
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
.search-wrapper li .active { .search-wrapper li .active {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1) / var(--tw-border-opacity)); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 0%) / var(--tw-border-opacity));
} }
} }
.search-wrapper .no-result { .search-wrapper .no-result {
@ -2441,7 +2441,7 @@ article details > summary::before {
} }
.search-wrapper .match { .search-wrapper .match {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-text-opacity));
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.sidebar-container { .sidebar-container {
@ -2725,11 +2725,11 @@ body:is(html[class~="dark"] *) {
} }
.hover\:hx-bg-primary-50:hover { .hover\:hx-bg-primary-50:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.47) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 47%) / var(--tw-bg-opacity));
} }
.hover\:hx-bg-primary-700:hover { .hover\:hx-bg-primary-700:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.89) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 11%) / var(--tw-bg-opacity));
} }
.hover\:hx-bg-slate-50:hover { .hover\:hx-bg-slate-50:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
@ -2749,7 +2749,7 @@ body:is(html[class~="dark"] *) {
} }
.hover\:hx-text-primary-600:hover { .hover\:hx-text-primary-600:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-text-opacity));
} }
.hover\:hx-opacity-60:hover { .hover\:hx-opacity-60:hover {
opacity: 0.6; opacity: 0.6;
@ -2786,7 +2786,7 @@ body:is(html[class~="dark"] *) {
} }
.focus\:hx-ring-primary-300:focus { .focus\:hx-ring-primary-300:focus {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.27) / var(--tw-ring-opacity)); --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 27%) / var(--tw-ring-opacity));
} }
.active\:hx-bg-gray-400\/20:active { .active\:hx-bg-gray-400\/20:active {
background-color: rgb(156 163 175 / 0.2); background-color: rgb(156 163 175 / 0.2);
@ -2831,11 +2831,11 @@ body:is(html[class~="dark"] *) {
} }
.data-\[state\=selected\]\:hx-border-primary-500[data-state="selected"] { .data-\[state\=selected\]\:hx-border-primary-500[data-state="selected"] {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1) / var(--tw-border-opacity)); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 0%) / var(--tw-border-opacity));
} }
.data-\[state\=selected\]\:hx-text-primary-600[data-state="selected"] { .data-\[state\=selected\]\:hx-text-primary-600[data-state="selected"] {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-text-opacity));
} }
.hx-group[data-theme="dark"] .group-data-\[theme\=dark\]\:hx-hidden { .hx-group[data-theme="dark"] .group-data-\[theme\=dark\]\:hx-hidden {
display: none; display: none;
@ -2874,7 +2874,7 @@ body:is(html[class~="dark"] *) {
.contrast-more\:hx-border-primary-500 { .contrast-more\:hx-border-primary-500 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1) / var(--tw-border-opacity)); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 0%) / var(--tw-border-opacity));
} }
.contrast-more\:hx-border-transparent { .contrast-more\:hx-border-transparent {
@ -2989,14 +2989,14 @@ body:is(html[class~="dark"] *) {
background-color: rgb(251 146 60 / 0.2); background-color: rgb(251 146 60 / 0.2);
} }
.dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) { .dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.27) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 27%) / 0.1);
} }
.dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) { .dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.16) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 16%) / 0.1);
} }
.dark\:hx-bg-primary-600:is(html[class~="dark"] *) { .dark\:hx-bg-primary-600:is(html[class~="dark"] *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-bg-opacity));
} }
.dark\:hx-bg-red-900\/30:is(html[class~="dark"] *) { .dark\:hx-bg-red-900\/30:is(html[class~="dark"] *) {
background-color: rgb(127 29 29 / 0.3); background-color: rgb(127 29 29 / 0.3);
@ -3050,7 +3050,7 @@ body:is(html[class~="dark"] *) {
} }
.dark\:hx-text-primary-600:is(html[class~="dark"] *) { .dark\:hx-text-primary-600:is(html[class~="dark"] *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-text-opacity));
} }
.dark\:hx-text-red-200:is(html[class~="dark"] *) { .dark\:hx-text-red-200:is(html[class~="dark"] *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
@ -3139,14 +3139,14 @@ body:is(html[class~="dark"] *) {
background-color: rgb(23 23 23 / var(--tw-bg-opacity)); background-color: rgb(23 23 23 / var(--tw-bg-opacity));
} }
.dark\:hover\:hx-bg-primary-100\/5:hover:is(html[class~="dark"] *) { .dark\:hover\:hx-bg-primary-100\/5:hover:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1.44) / 0.05); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 44%) / 0.05);
} }
.dark\:hover\:hx-bg-primary-700:hover:is(html[class~="dark"] *) { .dark\:hover\:hx-bg-primary-700:hover:is(html[class~="dark"] *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.89) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 11%) / var(--tw-bg-opacity));
} }
.hover\:dark\:hx-bg-primary-500\/10:is(html[class~="dark"] *):hover { .hover\:dark\:hx-bg-primary-500\/10:is(html[class~="dark"] *):hover {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 0%) / 0.1);
} }
.dark\:hover\:hx-text-gray-100:hover:is(html[class~="dark"] *) { .dark\:hover\:hx-text-gray-100:hover:is(html[class~="dark"] *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
@ -3174,7 +3174,7 @@ body:is(html[class~="dark"] *) {
} }
.hover\:dark\:hx-text-primary-600:is(html[class~="dark"] *):hover { .hover\:dark\:hx-text-primary-600:is(html[class~="dark"] *):hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.95) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 5%) / var(--tw-text-opacity));
} }
.dark\:hover\:hx-shadow-none:hover:is(html[class~="dark"] *) { .dark\:hover\:hx-shadow-none:hover:is(html[class~="dark"] *) {
--tw-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000;
@ -3187,7 +3187,7 @@ body:is(html[class~="dark"] *) {
} }
.dark\:focus\:hx-ring-primary-800:focus:is(html[class~="dark"] *) { .dark\:focus\:hx-ring-primary-800:focus:is(html[class~="dark"] *) {
--tw-ring-opacity: 1; --tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 0.82) / var(--tw-ring-opacity)); --tw-ring-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 18%) / var(--tw-ring-opacity));
} }
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
@ -3207,7 +3207,7 @@ body:is(html[class~="dark"] *) {
.contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) { .contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * 1) / var(--tw-border-opacity)); border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 0%) / var(--tw-border-opacity));
} }
.dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) { .dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) {

4
tailwind.config.js
View File

@ -4,9 +4,9 @@ const makePrimaryColor =
l => l =>
({ opacityValue }) => { ({ opacityValue }) => {
// we convert the passed in lightness value to a multiplier relative to 50% (full color) // we convert the passed in lightness value to a multiplier relative to 50% (full color)
let finalLightness = 1 + ((l - 50) / 100); let finalLightness = (l - 50);
return ( return (
`hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * ${finalLightness})` + `hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) ${finalLightness > 0 ? "+" : "-"} ${Math.abs(finalLightness)}%)` +
(opacityValue ? ` / ${opacityValue})` : ')') (opacityValue ? ` / ${opacityValue})` : ')')
) )
} }