tiennm99/HugoBlox-kit
1
0 Fork 0
mirror of https://github.com/tiennm99/HugoBlox-kit.git synced 2026-10-13 00:14:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): align color variables with Tailwind v4

Browse Source 
- Replace rgb(var(--color-*))) with var(--color-*)
- Convert alpha forms to color-mix(in oklch, var(--color-*) X%, transparent)
- Normalize --color-hb-dark to rgb(...)
- Fix docs code block background in light mode

Closes #3272
This commit is contained in:
George Cushen committed 2025-10-07 01:11:46 +01:00
1 parent 74ed4ecc15
commit dd44522f1e
15 files changed
+65 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

modules/blox-tailwind/assets/css/blox/biography.css
+7 -7
View File
@@ -99,20 +99,20 @@
/* Enhanced focus states for accessibility */
.resume-biography-modern a:focus-visible {
outline: 2px solid rgb(var(--color-primary-500));
outline: 2px solid var(--color-primary-500);
outline-offset: 2px;
border-radius: 0.5rem;
}
/* Improved text selection styling */
.resume-biography-modern ::selection {
background-color: rgb(var(--color-primary-200) / 0.3);
color: rgb(var(--color-primary-900));
background-color: color-mix(in oklch, var(--color-primary-200) 30%, transparent);
color: var(--color-primary-900);
}
.dark .resume-biography-modern ::selection {
background-color: rgb(var(--color-primary-800) / 0.3);
color: rgb(var(--color-primary-100));
background-color: color-mix(in oklch, var(--color-primary-800) 30%, transparent);
color: var(--color-primary-100);
}
/* Enhanced gradient text support */
@@ -125,11 +125,11 @@
/* Ensure text remains readable on fallback */
@supports not (background-clip: text) {
.resume-biography-modern .bg-clip-text {
color: rgb(var(--color-neutral-900));
color: var(--color-neutral-900);
}
.dark .resume-biography-modern .bg-clip-text {
color: rgb(var(--color-neutral-100));
color: var(--color-neutral-100);
}
}
modules/blox-tailwind/assets/css/blox/navbar.css
+4 -4
View File
@@ -54,11 +54,11 @@ input#nav-toggle:checked ~ #nav-menu {
}
.nav-link:hover {
color: rgb(var(--color-primary-700));
color: var(--color-primary-700);
}
.dark .nav-link:hover {
color: rgb(var(--color-primary-300));
color: var(--color-primary-300);
}
.nav-dropdown {
@@ -92,7 +92,7 @@ input#nav-toggle:checked ~ #nav-menu {
}
.dark .nav-dropdown-item:hover {
background-color: rgb(var(--color-primary-500));
background-color: var(--color-primary-500);
}
.nav-dropdown-link {
@@ -100,5 +100,5 @@ input#nav-toggle:checked ~ #nav-menu {
}
.nav-dropdown-link:hover {
color: rgb(var(--color-primary-700));
color: var(--color-primary-700);
}
modules/blox-tailwind/assets/css/chroma.css
+2 -2
View File
@@ -7,8 +7,8 @@
.prose pre {
@apply relative rounded-md;
color: rgb(var(--color-neutral-700));
background-color: rgb(var(--color-neutral-50));
color: var(--color-neutral-700);
background-color: var(--color-neutral-50);
}
.dark .prose .chroma,
modules/blox-tailwind/assets/css/color-utilities.css
+5 -5
View File
@@ -9,21 +9,21 @@
@layer utilities {
/* Custom Hugo Blox Dark Color */
.bg-hb-dark {
background-color: rgb(var(--color-hb-dark, 23 24 28));
background-color: var(--color-hb-dark, rgb(23 24 28));
}
.text-hb-dark {
color: rgb(var(--color-hb-dark, 23 24 28));
color: var(--color-hb-dark, rgb(23 24 28));
}
.border-hb-dark {
border-color: rgb(var(--color-hb-dark, 23 24 28));
border-color: var(--color-hb-dark, rgb(23 24 28));
}
/* Dark mode variants */
.dark\:bg-hb-dark:where(.dark, .dark *) {
background-color: rgb(var(--color-hb-dark, 23 24 28));
background-color: var(--color-hb-dark, rgb(23 24 28));
}
.dark\:text-hb-dark:where(.dark, .dark *) {
color: rgb(var(--color-hb-dark, 23 24 28));
color: var(--color-hb-dark, rgb(23 24 28));
}
}
modules/blox-tailwind/assets/css/components/cards.css
+10 -10
View File
@@ -10,34 +10,34 @@
@apply flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-transparent hover:shadow-gray-100 dark:hover:shadow-transparent shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200;
@apply hover:border-gray-300 bg-transparent shadow-sm hover:bg-slate-50 hover:shadow-md;
border-color: rgb(var(--color-neutral-700));
border-color: var(--color-neutral-700);
}
.dark .hb-card {
border-color: rgb(var(--color-neutral-700));
border-color: var(--color-neutral-700);
}
.dark .hb-card:hover {
border-color: rgb(var(--color-neutral-600));
background-color: rgb(var(--color-neutral-800));
border-color: var(--color-neutral-600);
background-color: var(--color-neutral-800);
}
.hb-card-title {
@apply flex font-semibold items-start gap-2 text-gray-700 hover:text-gray-900 items-center;
color: rgb(var(--color-neutral-700));
color: var(--color-neutral-700);
}
.hb-card-title:hover {
color: rgb(var(--color-neutral-900));
color: var(--color-neutral-900);
}
.dark .hb-card-title {
color: rgb(var(--color-neutral-200));
color: var(--color-neutral-200);
}
.dark .hb-card-title:hover {
color: rgb(var(--color-neutral-50));
color: var(--color-neutral-50);
}
.hb-card-subtitle {
@@ -49,7 +49,7 @@
}
.hb-card svg {
color: rgb(var(--color-neutral-700));
color: var(--color-neutral-700);
width: 1.5rem;
transition: color 0.3s ease;
}
@@ -59,7 +59,7 @@
}
.dark .hb-card svg {
color: rgb(var(--color-neutral-300));
color: var(--color-neutral-300);
}
.dark .hb-card:hover svg {
modules/blox-tailwind/assets/css/components/copy.css
+2 -2
View File
@@ -24,12 +24,12 @@
.copy-button:focus,
.copy-button:active,
.copy-button:active:hover {
background-color: rgb(var(--color-primary-100));
background-color: var(--color-primary-100);
}
.dark .copy-button:hover,
.dark .copy-button:focus,
.dark .copy-button:active,
.dark .copy-button:active:hover {
background-color: rgb(var(--color-primary-600));
background-color: var(--color-primary-600);
}
modules/blox-tailwind/assets/css/components/glassmorphism.css
+11 -6
View File
@@ -10,7 +10,12 @@
.glassmorphism-primary {
@apply relative overflow-hidden;
background: linear-gradient(135deg, rgb(var(--color-primary-500) / 0.9), rgb(var(--color-primary-600) / 0.95), rgb(var(--color-primary-700) / 0.9));
background: linear-gradient(
135deg,
color-mix(in oklch, var(--color-primary-500) 90%, transparent),
color-mix(in oklch, var(--color-primary-600) 95%, transparent),
color-mix(in oklch, var(--color-primary-700) 90%, transparent)
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@@ -26,9 +31,9 @@
@apply relative overflow-hidden;
background: linear-gradient(
135deg,
rgb(var(--color-secondary-500) / 0.9),
rgb(var(--color-secondary-600) / 0.95),
rgb(var(--color-secondary-700) / 0.9)
color-mix(in oklch, var(--color-secondary-500) 90%, transparent),
color-mix(in oklch, var(--color-secondary-600) 95%, transparent),
color-mix(in oklch, var(--color-secondary-700) 90%, transparent)
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
@@ -178,12 +183,12 @@
.cta-glassmorphism .group {
/* Ensure proper text contrast in light mode */
color: rgb(var(--color-gray-900));
color: var(--color-gray-900);
}
.dark .cta-glassmorphism .group {
/* Maintain white text in dark mode */
color: rgb(var(--color-gray-100));
color: var(--color-gray-100);
}
/* Enhanced button glassmorphism for light mode visibility */
modules/blox-tailwind/assets/css/components/page.css
+2 -2
View File
@@ -89,9 +89,9 @@
details > summary {
@apply cursor-pointer font-semibold;
color: rgb(var(--color-primary-700));
color: var(--color-primary-700);
}
.dark details > summary {
color: rgb(var(--color-primary-300));
color: var(--color-primary-300);
}
modules/blox-tailwind/assets/css/components/sidebar-left.css
+5 -5
View File
@@ -31,11 +31,11 @@
}
.hb-sidebar-list::before {
background-color: rgb(var(--color-neutral-200));
background-color: var(--color-neutral-200);
}
.dark .hb-sidebar-list::before {
background-color: rgb(var(--color-neutral-700));
background-color: var(--color-neutral-700);
}
.hb-scrollbar {
@@ -70,7 +70,7 @@
}
.dark .hb-docs-link:hover {
background-color: rgb(var(--color-primary-100) / 5%);
background-color: color-mix(in oklch, var(--color-primary-100) 5%, transparent);
}
.hb-sidebar-mobile-menu {
@@ -82,11 +82,11 @@
}
.hb-sidebar-mobile-toc::before {
background-color: rgb(var(--color-neutral-200));
background-color: var(--color-neutral-200);
}
.dark .hb-sidebar-mobile-toc::before {
background-color: rgb(var(--color-neutral-800));
background-color: var(--color-neutral-800);
}
.hb-sidebar-custom-link {
modules/blox-tailwind/assets/css/components/steps.css
+4 -4
View File
@@ -1,11 +1,11 @@
.hb-steps {
@apply ml-4 mb-12 pl-6 border-l border-gray-200 [counter-reset:hb_step];
border-left-color: rgb(var(--color-neutral-200));
border-left-color: var(--color-neutral-200);
}
.dark .hb-steps {
border-left-color: rgb(var(--color-neutral-600));
border-left-color: var(--color-neutral-600);
}
.hb-steps h3 {
@@ -18,11 +18,11 @@
@apply text-base font-normal text-center -indent-px;
@apply mt-[3px] ml-[-41px];
color: rgb(var(--color-neutral-700));
color: var(--color-neutral-700);
content: counter(hb-step);
}
}
.dark .hb-steps h3::before {
color: rgb(var(--color-neutral-200));
color: var(--color-neutral-200);
}
modules/blox-tailwind/assets/css/config/theme.css
+1 -1
View File
@@ -3,7 +3,7 @@
/* Theme Configuration */
@theme {
/* Custom Colors */
--color-hb-dark: 23 24 28;
--color-hb-dark: rgb(23 24 28);
/* Standard Tailwind Color Scales - Provide variables as valid CSS colors */
/* Gray */
modules/blox-tailwind/assets/css/framework/base.css
+7 -7
View File
@@ -22,33 +22,33 @@
@layer components {
.prose a {
text-decoration: underline;
text-decoration-color: rgb(var(--color-primary-300));
text-decoration-color: var(--color-primary-300);
font-weight: 500;
}
.prose a:hover {
color: rgb(var(--color-primary-600));
color: var(--color-primary-600);
text-decoration: none;
border-radius: 0.09rem;
}
.prose mark {
color: rgb(var(--color-neutral-900));
background-color: rgb(var(--color-primary-200));
color: var(--color-neutral-900);
background-color: var(--color-primary-200);
padding: 0.1rem 0.2rem;
border-radius: 0.25rem;
}
.dark .prose-invert a {
text-decoration-color: rgb(var(--color-neutral-500));
text-decoration-color: var(--color-neutral-500);
}
.dark .prose-invert a:hover {
color: rgb(var(--color-primary-300));
color: var(--color-primary-300);
}
.dark .prose-invert mark {
background-color: rgb(var(--color-primary-400));
background-color: var(--color-primary-400);
color: black;
}
}
modules/blox-tailwind/assets/css/views/attachments.css
+4 -4
View File
@@ -1,20 +1,20 @@
.hb-attachment-link {
@apply inline-block font-semibold uppercase outline-none mr-4 mb-1.5 transition-all text-sm tracking-wide focus:outline-none;
color: rgb(var(--color-primary-600));
color: var(--color-primary-600);
}
.hb-attachment-link:hover {
color: rgb(var(--color-primary-700));
color: var(--color-primary-700);
text-decoration: underline;
}
.dark .hb-attachment-link {
color: rgb(var(--color-primary-400));
color: var(--color-primary-400);
}
.dark .hb-attachment-link:hover {
color: rgb(var(--color-primary-300));
color: var(--color-primary-300);
}
/* Small links - used in list views */
starters/academic-cv/content/_index.md
+1 -1
View File
@@ -118,6 +118,6 @@ sections:
design:
card:
# Card background color (CSS class)
css_class: 'bg-primary-300'
css_class: 'bg-primary-300 dark:bg-primary-700'
css_style: ''
---
starters/academic-cv/content/blog/second-brain/index.md
-10
View File
@@ -70,11 +70,6 @@ Anh here's a more advanced mindmap with formatting, code blocks, and math:
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
</code>
@@ -95,11 +90,6 @@ renders as
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```