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

refactor(theme): prefix font/theme pack CSS vars with --hb- namespace

Browse Source
This commit is contained in:
George Cushen committed 2026-03-13 15:46:35 +00:00
1 parent 71b5a1b844
commit e02d32190a
9 files changed
+59 -59
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

modules/blox/assets/css/blox/navbar.css
+4 -4
View File
@@ -6,7 +6,7 @@
.navbar-brand {
/* @apply text-black dark:text-white text-xl font-semibold; */
color: var(--color-header-fg);
color: var(--hb-color-header-fg);
@apply text-xl font-semibold;
}
@@ -42,8 +42,8 @@ input#nav-toggle:checked ~ #nav-menu {
}
#site-header.header {
background-color: var(--color-header-bg);
color: var(--color-header-fg);
background-color: var(--hb-color-header-bg);
color: var(--hb-color-header-fg);
@apply py-3 shadow;
}
@@ -55,7 +55,7 @@ input#nav-toggle:checked ~ #nav-menu {
.nav-link {
/* @apply dark:text-white block p-3 font-semibold transition lg:px-2 lg:py-3; */
color: var(--color-header-fg);
color: var(--hb-color-header-fg);
@apply block p-3 font-semibold transition lg:px-2 lg:py-3;
}
modules/blox/assets/css/config/theme.css
+13 -13
View File
@@ -323,26 +323,26 @@
/* Note: Providing these palettes in @theme ensures theme-pack mappings like var(--color-rose-600) always resolve */
/* Font families */
--font-family-sans: inter var, ui-sans-serif, system-ui, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
--font-heading: var(--font-family-sans);
--font-body: var(--font-family-sans);
--font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-nav: var(--font-heading);
--hb-font-family-sans: inter var, ui-sans-serif, system-ui, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
--hb-font-heading: var(--hb-font-family-sans);
--hb-font-body: var(--hb-font-family-sans);
--hb-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--hb-font-nav: var(--hb-font-heading);
/* Font weights */
--font-weight-heading: 700;
--font-weight-body: 400;
--hb-font-weight-heading: 700;
--hb-font-weight-body: 400;
--hb-font-weight-body-bold: 600;
/* Line heights */
--font-leading-heading: 1.2;
--font-leading-body: 1.6;
--font-leading-code: 1.5;
--hb-font-leading-heading: 1.2;
--hb-font-leading-body: 1.6;
--hb-font-leading-code: 1.5;
/* Letter spacing */
--font-tracking-heading: -0.02em;
--font-tracking-body: 0;
--font-tracking-caps: 0.05em;
--hb-font-tracking-heading: -0.02em;
--hb-font-tracking-body: 0;
--hb-font-tracking-caps: 0.05em;
/* Font sizes */
--font-size-xs: 0.75rem;
modules/blox/assets/css/framework/base.css
+10 -10
View File
@@ -5,14 +5,14 @@
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
/* Apply the runtime font vars injected by Hugo's typography partial */
font-family: var(--font-body);
font-family: var(--hb-font-body);
}
body {
font-family: var(--font-body);
font-weight: var(--font-weight-body, 400);
line-height: var(--font-leading-body, 1.6);
letter-spacing: var(--font-tracking-body, 0);
font-family: var(--hb-font-body);
font-weight: var(--hb-font-weight-body, 400);
line-height: var(--hb-font-leading-body, 1.6);
letter-spacing: var(--hb-font-tracking-body, 0);
}
h1,
@@ -21,17 +21,17 @@
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-heading, 700);
line-height: var(--font-leading-heading, 1.2);
letter-spacing: var(--font-tracking-heading, -0.02em);
font-family: var(--hb-font-heading);
font-weight: var(--hb-font-weight-heading, 700);
line-height: var(--hb-font-leading-heading, 1.2);
letter-spacing: var(--hb-font-tracking-heading, -0.02em);
}
code,
pre,
kbd,
samp {
font-family: var(--font-code);
font-family: var(--hb-font-code);
}
}
modules/blox/assets/css/framework/components.css
+1 -1
View File
@@ -8,7 +8,7 @@
.section-subheading {
font-size: 1.25rem;
font-weight: var(--font-weight-heading, 700);
font-weight: var(--hb-font-weight-heading, 700);
}
/* Home section background styles */
modules/blox/layouts/_partials/components/headers/navbar-simple.html
+6 -6
View File
@@ -9,7 +9,7 @@
<div class="flex w-full flex-wrap items-center justify-between px-3">
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-[var(--color-header-fg)] hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
class="block border-0 bg-transparent px-2 text-[var(--hb-color-header-fg)] hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
type="button"
data-te-collapse-init
data-te-target="#collapse-main-navbar"
@@ -51,7 +51,7 @@
class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1"
data-te-nav-item-ref>
<a
class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
[&.active]:font-bold [&.active]:text-primary-500 {{ $activeClass }}"
aria-current="page"
href="{{ .URL | relLangURL }}"
@@ -63,7 +63,7 @@
{{ if $show_search }}
<li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1">
<a
class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
[&.active]:font-bold [&.active]:text-primary-500"
aria-current="page"
href="#"
@@ -74,7 +74,7 @@
{{ end }}
{{ $show_mode_toggle := site.Params.hugoblox.header.theme_toggle | default true }}
{{ if $show_mode_toggle }}
<li class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
<li class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
[&.active]:font-bold [&.active]:text-primary-500">
<button class="theme-toggle mt-1" accesskey="t" title="">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
@@ -102,7 +102,7 @@
{{/* Theme Picker */}}
{{ if site.Params.hugoblox.header.theme_picker }}
<li class="lg:px-2">
<select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
<select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--hb-color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
<option value="">Theme</option>
{{ range $name, $data := site.Data.themes }}
<option value="{{ $name }}">{{ $name | humanize }}</option>
@@ -125,7 +125,7 @@
{{ $show_translations := site.Params.hugoblox.header.language_switcher | default true }}
{{ if .IsTranslated | and $show_translations }}
<li class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
<li class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
[&.active]:font-bold [&.active]:text-primary-500">
{{- partial "components/language-chooser.html" (dict "page" .) -}}
</li>
modules/blox/layouts/_partials/components/headers/navbar.html
+5 -5
View File
@@ -33,7 +33,7 @@
<input id="nav-toggle" type="checkbox" class="hidden" />
<label
for="nav-toggle"
class="order-3 cursor-pointer flex items-center lg:hidden text-[var(--color-header-fg)] lg:order-1">
class="order-3 cursor-pointer flex items-center lg:hidden text-[var(--hb-color-header-fg)] lg:order-1">
<svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
<title>Open Menu</title>
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
@@ -143,7 +143,7 @@
{{ with $show_search }}
<button
aria-label="toggle search"
class="inline-block px-3 text-xl text-[var(--color-header-fg)] hover:text-primary-500 cursor-pointer"
class="inline-block px-3 text-xl text-[var(--hb-color-header-fg)] hover:text-primary-500 cursor-pointer"
data-search-toggle>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" fill="currentColor"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
</button>
@@ -151,7 +151,7 @@
{{ $show_mode_toggle := site.Params.hugoblox.header.theme_toggle | default true }}
{{ if $show_mode_toggle }}
<div class="px-3 text-[var(--color-header-fg)] hover:text-primary-500
<div class="px-3 text-[var(--hb-color-header-fg)] hover:text-primary-500
[&.active]:font-bold [&.active]:text-primary-500">
<button class="theme-toggle mt-1" accesskey="t" title="appearance">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
@@ -179,7 +179,7 @@
{{/* Theme Picker */}}
{{ if site.Params.hugoblox.header.theme_picker }}
<div class="px-3">
<select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
<select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--hb-color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
<option value="">Theme</option>
{{ range $name, $data := site.Data.themes }}
<option value="{{ $name }}">{{ $name | humanize }}</option>
@@ -203,7 +203,7 @@
{{ $show_translations := site.Params.hugoblox.header.language_switcher | default true }}
{{ if .IsTranslated | and $show_translations }}
<div class="pl-1 mr-5 text-[var(--color-header-fg)] hover:text-primary-500
<div class="pl-1 mr-5 text-[var(--hb-color-header-fg)] hover:text-primary-500
[&.active]:font-bold [&.active]:text-primary-500">
{{- partial "components/language-chooser.html" (dict "page" .) -}}
</div>
modules/blox/layouts/_partials/functions/theme_variables.html
+6 -6
View File
@@ -14,13 +14,13 @@
{{ end }}
{{/* 2. Semantic Surface Variables */}}
--color-background: {{ $data.surfaces.background | default "#ffffff" }};
--color-foreground: {{ $data.surfaces.foreground | default "#000000" }};
--hb-color-background: {{ $data.surfaces.background | default "#ffffff" }};
--hb-color-foreground: {{ $data.surfaces.foreground | default "#000000" }};
{{/* Header */}}
--color-header-bg: {{ $data.surfaces.header.background | default $data.surfaces.background | default "#ffffff" }};
--color-header-fg: {{ $data.surfaces.header.foreground | default $data.surfaces.foreground | default "#000000" }};
--hb-color-header-bg: {{ $data.surfaces.header.background | default $data.surfaces.background | default "#ffffff" }};
--hb-color-header-fg: {{ $data.surfaces.header.foreground | default $data.surfaces.foreground | default "#000000" }};
{{/* Footer */}}
--color-footer-bg: {{ $data.surfaces.footer.background | default $data.surfaces.background | default "#f3f4f6" }};
--color-footer-fg: {{ $data.surfaces.footer.foreground | default $data.surfaces.foreground | default "#000000" }};
--hb-color-footer-bg: {{ $data.surfaces.footer.background | default $data.surfaces.background | default "#f3f4f6" }};
--hb-color-footer-fg: {{ $data.surfaces.footer.foreground | default $data.surfaces.foreground | default "#000000" }};
modules/blox/layouts/_partials/functions/typography.html
+13 -13
View File
@@ -190,25 +190,25 @@
<style>
:root {
/* Typography — Font Families */
--font-heading: {{ $heading_css | safeCSS }};
--font-body: {{ $body_css | safeCSS }};
--font-code: {{ $code_css | safeCSS }};
--font-nav: {{ $nav_css | safeCSS }};
--hb-font-heading: {{ $heading_css | safeCSS }};
--hb-font-body: {{ $body_css | safeCSS }};
--hb-font-code: {{ $code_css | safeCSS }};
--hb-font-nav: {{ $nav_css | safeCSS }};
/* Typography — Font Weights */
--font-weight-heading: {{ $heading_weight }};
--font-weight-body: {{ $body_weight }};
--hb-font-weight-heading: {{ $heading_weight }};
--hb-font-weight-body: {{ $body_weight }};
--hb-font-weight-body-bold: {{ $body_weight_bold }};
/* Typography — Line Heights */
--font-leading-heading: {{ $leading.heading }};
--font-leading-body: {{ $leading.body }};
--font-leading-code: {{ $leading.code }};
--hb-font-leading-heading: {{ $leading.heading }};
--hb-font-leading-body: {{ $leading.body }};
--hb-font-leading-code: {{ $leading.code }};
/* Typography — Letter Spacing */
--font-tracking-heading: {{ $tracking.heading | safeCSS }};
--font-tracking-body: {{ $tracking.body | safeCSS }};
--font-tracking-caps: {{ $tracking.caps | safeCSS }};
--hb-font-tracking-heading: {{ $tracking.heading | safeCSS }};
--hb-font-tracking-body: {{ $tracking.body | safeCSS }};
--hb-font-tracking-caps: {{ $tracking.caps | safeCSS }};
/* Typography — Font Sizes */
--hb-font-size-base: {{ $font_size_base | safeCSS }};
@@ -216,6 +216,6 @@
--hb-font-size-lg: {{ $font_size_lg | safeCSS }};
/* Typography — Font Family Alias (Tailwind v4 compat) */
--font-family-sans: {{ $body_css | safeCSS }};
--hb-font-family-sans: {{ $body_css | safeCSS }};
}
</style>
modules/blox/layouts/baseof.html
+1 -1
View File
@@ -6,7 +6,7 @@
data-wc-theme-default="{{ (lower site.Params.hugoblox.theme.mode) | default "system" }}"
data-hbb-relurl="{{ "" | relURL }}">
{{ partial "site_head" . }}
<body class="bg-[var(--color-background)] text-[var(--color-foreground)] page-wrapper" id="top">
<body class="bg-[var(--hb-color-background)] text-[var(--hb-color-foreground)] page-wrapper" id="top">
<div id="page-bg"></div>
<div class="page-header {{ if site.Params.hugoblox.header.sticky }}sticky top-0 z-30{{ end }}">
{{/* Load header block */}}