jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

migrate accent colours from HSL to oklch, inject theme into admin

Browse Source 
Phase 1: Replace hex_to_hsl with hex_to_oklch in CSSGenerator, output
--t-accent-l/c/h instead of --t-accent-h/s/l. All 46 HSL accent
references across theme-semantic.css, theme-layer2-attributes.css, and
shop/components.css replaced with oklch/color-mix equivalents. Dead
style*= attribute selectors for button variants replaced with proper
class-based selectors. Added color-scheme: light/dark to mood output.

Phase 2: Add LoadTheme plug to admin pipeline, extend AdminLayoutHook
with theme_settings and generated_css assigns, add font preloads and
generated CSS injection to admin_root.html.heex. No visual changes to
admin yet — .themed wrapper added in next phase.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-02-20 23:53:42 +00:00
parent eb65b11e4d
commit 285aafa0b5
10 changed files with 169 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
assets/css/theme-layer2-attributes.css
View File

@@ -157,19 +157,21 @@
/* Button Style Variants */
&[data-button-style="outline"] {
& button[style*="background-color: hsl(var(--t-accent"],
& a[style*="background-color: hsl(var(--t-accent"] {
& .themed-button,
& .atc-btn,
& .cart-drawer-checkout {
background-color: transparent !important;
color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)) !important;
border: 2px solid hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)) !important;
color: var(--t-accent) !important;
border: 2px solid var(--t-accent) !important;
}
}
&[data-button-style="soft"] {
& button[style*="background-color: hsl(var(--t-accent"],
& a[style*="background-color: hsl(var(--t-accent"] {
background-color: hsl(var(--t-accent-h) var(--t-accent-s) 90%) !important;
color: hsl(var(--t-accent-h) var(--t-accent-s) 30%) !important;
& .themed-button,
& .atc-btn,
& .cart-drawer-checkout {
background-color: color-mix(in oklch, var(--t-accent) 12%, var(--t-surface-base)) !important;
color: color-mix(in oklch, var(--t-accent) 80%, black) !important;
border: 2px solid transparent !important;
}
}
@@ -231,12 +233,12 @@
}
& .filter-pill-active {
background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
background-color: var(--t-accent);
color: var(--t-text-inverse);
border-color: transparent;
&:hover {
background-color: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 5%));
background-color: var(--t-accent-hover);
color: var(--t-text-inverse);
}
}
@@ -250,7 +252,7 @@
&:focus {
outline: none;
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
border-color: var(--t-accent);
}
&::placeholder {
@@ -269,12 +271,12 @@
&:focus {
outline: none;
border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
border-color: var(--t-accent);
}
}
& .themed-button {
background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
background-color: var(--t-accent);
color: var(--t-text-inverse);
border-radius: var(--t-radius-button);
border: none;
@@ -322,7 +324,7 @@
}
.badge-new {
background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
background-color: var(--t-accent);
color: var(--t-text-inverse);
}