Skip to content

Commit 29aa405

Browse files
eamonxgeamonxg
committed
feat: support custom component colors
- Header, view, and card components
1 parent fea7623 commit 29aa405

5 files changed

Lines changed: 82 additions & 54 deletions

File tree

‎.dev/src/media/main.css‎

Lines changed: 64 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,24 @@
1212
}
1313

1414
:root {
15-
--background-start: oklch(0.984 0.003 247.858);
15+
--background-start: oklch(0.968 0.007 247.896);
1616
--background-mid: oklch(0.968 0.007 247.896);
17-
--background-end: oklch(0.929 0.013 255.508);
17+
--background-end: oklch(0.968 0.007 247.896);
18+
--base-text: oklch(0.208 0.042 265.755);
1819

1920
--progress-start: oklch(0.68 0.11 233);
2021
--progress-end: oklch(0.7535 0.1034 198.37);
2122

23+
--header-bg: oklch(0.968 0.007 247.896);
24+
--header-border: oklch(from var(--header-bg) calc(l - 0.1) c h);
25+
--header-interactive: oklch(from var(--header-bg) calc(l - 0.04) c h);
26+
27+
--view-bg: oklch(1 0 0);
28+
--view-border: oklch(from var(--view-bg) calc(l - 0.13) c h);
29+
30+
--card-bg: oklch(1 0 0);
31+
--card-border: oklch(from var(--card-bg) calc(l - 0.07) c h);
32+
2233
--primary: oklch(0.68 0.11 233);
2334
--primary-text: oklch(0.6656 0.1055 234.61);
2435

@@ -56,10 +67,23 @@
5667
--background-start: oklch(0.2077 0.0398 265.75);
5768
--background-mid: oklch(0.3861 0.059 188.42);
5869
--background-end: oklch(0.4318 0.0865 166.91);
70+
--base-text: oklch(0.968 0.007 247.896);
5971

6072
--progress-start: oklch(0.4318 0.0865 166.91);
6173
--progress-end: oklch(62.1% 0.145 189.632);
6274

75+
--header-bg: oklch(0.21 0.034 264.665);
76+
--header-border: oklch(from var(--header-bg) calc(l + 0.16) c h);
77+
--header-interactive: oklch(
78+
from var(--header-bg) calc(l + 0.16) calc(c + 0.01) h
79+
);
80+
81+
--view-bg: oklch(0.21 0.034 264.665);
82+
--view-border: oklch(from var(--view-bg) calc(l + 0.24) c h);
83+
84+
--card-bg: oklch(0.279 0.041 260.031);
85+
--card-border: oklch(from var(--card-bg) calc(l + 0.17) c h);
86+
6387
--primary: oklch(0.48 0.118 190.485);
6488
--primary-text: oklch(0.73 0.168 188.745);
6589

@@ -123,6 +147,17 @@
123147
--color-default: var(--default);
124148
--color-default-text: var(--default-text);
125149

150+
--color-header-bg: var(--header-bg);
151+
--color-base-text: var(--base-text);
152+
--color-header-border: var(--header-border);
153+
--color-header-interactive: var(--header-interactive);
154+
155+
--color-view-bg: var(--view-bg);
156+
--color-view-border: var(--view-border);
157+
158+
--color-card-bg: var(--card-bg);
159+
--color-card-border: var(--card-border);
160+
126161
--font-sans: var(--font-sans);
127162
--font-mono: var(--font-mono);
128163

@@ -148,7 +183,7 @@
148183
@apply md:before:from-aurora-start md:before:via-aurora-mid md:before:to-aurora-end max-md:bg-aurora-mid md:before:bg-gradient-to-br;
149184

150185
body {
151-
@apply flex flex-col bg-transparent text-sm leading-relaxed font-normal text-slate-900 transition-all duration-300 dark:text-slate-100;
186+
@apply text-base-text flex flex-col bg-transparent text-sm leading-relaxed font-normal transition-all duration-300;
152187
&.modal-overlay-active {
153188
@apply h-screen overflow-hidden;
154189
}
@@ -161,7 +196,7 @@
161196
h4,
162197
h5,
163198
h6 {
164-
@apply font-sans leading-tight font-semibold tracking-tight text-slate-900 dark:text-slate-100;
199+
@apply text-base-text font-sans leading-tight font-semibold tracking-tight;
165200
}
166201

167202
h1 {
@@ -232,24 +267,24 @@
232267
@layer components {
233268
@layer layout {
234269
header {
235-
@apply sticky top-0 z-60 mb-2 transition-all duration-300 before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-white/20 before:backdrop-blur-xl before:backdrop-saturate-150 before:transition-all before:duration-300 dark:before:bg-gray-900/90;
270+
@apply bg-header-bg sticky top-0 z-60 mb-2;
236271

237272
& .header-content {
238273
@apply relative flex h-14 items-center justify-between px-6 py-3 max-md:px-4 max-md:py-2;
239274
}
240275

241276
[data-nav-type="mega-menu"] & {
242277
& .desktop-menu-container {
243-
@apply pointer-events-none absolute inset-x-0 top-0 z-30 h-0 w-full overflow-hidden opacity-0 transition-all duration-150 ease-in-out before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-full before:min-h-full before:bg-white/40 before:backdrop-blur-xl before:backdrop-saturate-150 max-md:hidden dark:before:bg-gray-900/90;
278+
@apply bg-header-bg/40 dark:bg-header-bg/90 pointer-events-none absolute inset-x-0 top-0 z-30 h-0 w-full overflow-hidden opacity-0 backdrop-blur-xl transition-all duration-150 ease-in-out max-md:hidden;
244279

245280
&.active {
246-
@apply pointer-events-auto opacity-100;
281+
@apply pointer-events-auto h-[var(--mega-menu-height,0)] opacity-100;
247282
}
248283
}
249284
}
250285

251286
.brand {
252-
@apply hover:text-primary inline-block flex-shrink-0 text-xl font-semibold tracking-tight text-slate-900 no-underline transition-all duration-200 hover:-translate-y-0.5 max-md:order-1 max-md:flex-1 max-md:text-lg dark:text-slate-100;
287+
@apply hover:text-primary text-base-text inline-block flex-shrink-0 text-xl font-semibold tracking-tight no-underline transition-all duration-200 hover:-translate-y-0.5 max-md:order-1 max-md:flex-1 max-md:text-lg;
253288
}
254289

255290
.nav {
@@ -259,15 +294,15 @@
259294
@apply relative;
260295

261296
.menu {
262-
@apply block rounded-xl px-3.5 py-1.5 font-medium text-slate-700 no-underline transition-all duration-150 dark:text-slate-200;
297+
@apply text-base-text block rounded-xl px-3.5 py-1.5 font-medium no-underline transition-all duration-150;
263298

264299
&.menu-active {
265-
@apply text-slate-900 dark:text-slate-100;
300+
@apply text-base-text;
266301
[data-nav-type="mega-menu"] & {
267302
@apply underline decoration-2 underline-offset-4;
268303
}
269304
[data-nav-type="boxed-dropdown"] & {
270-
@apply bg-slate-200/90 dark:bg-slate-700;
305+
@apply bg-header-interactive;
271306
}
272307
}
273308
}
@@ -290,19 +325,19 @@
290325
}
291326

292327
[data-nav-type="boxed-dropdown"] & {
293-
@apply flex flex-col gap-y-1 rounded-3xl border border-slate-200/70 bg-white/80 py-2 shadow-lg backdrop-blur-md backdrop-saturate-150 transition-all duration-200 dark:border-gray-700/70 dark:bg-gray-900/90;
328+
@apply border-header-border bg-header-bg/90 flex flex-col gap-y-1 rounded-3xl border py-2 shadow-lg backdrop-blur-md backdrop-saturate-150 transition-all duration-200;
294329
}
295330
& > li {
296331
@apply m-0 list-none;
297332

298333
& > a {
299-
@apply block px-4 whitespace-nowrap text-slate-700 no-underline hover:text-slate-900 dark:text-slate-300 hover:dark:text-slate-100;
334+
@apply text-base-text block px-4 whitespace-nowrap no-underline;
300335

301336
[data-nav-type="mega-menu"] & {
302337
@apply py-3 hover:underline hover:decoration-2 hover:underline-offset-4;
303338
}
304339
[data-nav-type="boxed-dropdown"] & {
305-
@apply mx-2 rounded-2xl py-2 hover:bg-slate-200/60 dark:hover:bg-slate-700/70;
340+
@apply hover:bg-header-interactive mx-2 rounded-xl py-2;
306341
}
307342
}
308343
}
@@ -318,7 +353,7 @@
318353
@apply max-md:ml-5 max-md:cursor-pointer max-md:transition-all max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;
319354

320355
& svg {
321-
@apply size-5 max-md:text-slate-900 max-md:transition-transform max-md:duration-200 max-md:dark:text-slate-100;
356+
@apply max-md:text-base-text size-5 max-md:transition-transform max-md:duration-200;
322357
}
323358

324359
&.active {
@@ -333,7 +368,7 @@
333368
@apply flex shrink-0 flex-row-reverse gap-5 max-md:order-2 max-md:shrink-0 md:gap-8;
334369

335370
& span[data-indicator] {
336-
@apply size-5 cursor-pointer text-[0px] before:absolute before:size-5 before:bg-current before:text-slate-900 dark:before:text-slate-100;
371+
@apply before:text-base-text size-5 cursor-pointer text-[0px] before:absolute before:size-5 before:bg-current;
337372

338373
&[data-indicator="media_error"] {
339374
@apply before:[mask:url('@assets/icons/error.svg')_center/cover_no-repeat];
@@ -364,7 +399,7 @@
364399
@apply mx-auto min-h-[calc(100vh-4rem)] w-23/24 max-w-7xl px-4 max-md:w-full max-md:px-3;
365400

366401
#view {
367-
@apply mx-0 w-full p-0 shadow-none transition-all duration-300 empty:hidden md:rounded-4xl md:border md:border-slate-400/20 md:bg-white/90 md:p-6 md:shadow-xl md:hover:border-slate-400/30 md:hover:shadow-2xl md:hover:shadow-slate-400/30 md:dark:border-gray-600/30 md:dark:bg-gray-900/90 md:dark:shadow-black/50 md:dark:hover:border-gray-500/40 md:dark:hover:shadow-black/60;
402+
@apply md:border-view-border/30 md:bg-view-bg md:hover:border-view-border/50 mx-0 w-full p-0 shadow-none transition-all duration-300 empty:hidden md:rounded-4xl md:border md:p-6 md:shadow-xl md:hover:shadow-2xl;
368403

369404
.cbi-title-section {
370405
@apply mb-6 leading-relaxed max-md:mx-2 max-md:mb-3;
@@ -640,7 +675,7 @@
640675
input[type="password"],
641676
.cbi-input-text,
642677
.cbi-input {
643-
@apply focus:border-primary focus:ring-primary/20 relative rounded-2xl border border-slate-300/70 bg-white px-3 py-1.5 text-sm font-normal text-slate-900 placeholder-slate-400 shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60 dark:bg-slate-900 dark:text-slate-100 dark:placeholder-slate-400;
678+
@apply focus:border-primary focus:ring-primary/20 text-base-text relative rounded-2xl border border-slate-300/70 bg-white px-3 py-1.5 text-sm font-normal placeholder-slate-400 shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60 dark:bg-slate-900 dark:placeholder-slate-400;
644679

645680
.table.cbi-section-table & {
646681
@apply w-full;
@@ -675,7 +710,7 @@
675710

676711
@layer textarea {
677712
textarea {
678-
@apply focus:border-primary focus:ring-primary/20 min-h-24 w-full resize-y rounded-2xl border border-slate-300/70 bg-white px-3 py-2 text-sm font-normal text-slate-900 placeholder-slate-400 shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60 dark:bg-slate-900 dark:text-slate-100 dark:placeholder-slate-400;
713+
@apply focus:border-primary focus:ring-primary/20 text-base-text min-h-24 w-full resize-y rounded-2xl border border-slate-300/70 bg-white px-3 py-2 text-sm font-normal placeholder-slate-400 shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60 dark:bg-slate-900 dark:placeholder-slate-400;
679714
&[disabled] {
680715
@apply cursor-not-allowed opacity-40 dark:opacity-30;
681716
}
@@ -684,7 +719,7 @@
684719

685720
@layer select {
686721
select {
687-
@apply focus:border-primary focus:ring-primary/20 appearance-none rounded-2xl border border-slate-300/70 bg-white px-3 py-1.5 pr-10 text-sm font-normal text-slate-900 shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60 dark:bg-slate-900 dark:text-slate-100;
722+
@apply focus:border-primary focus:ring-primary/20 text-base-text appearance-none rounded-2xl border border-slate-300/70 bg-white px-3 py-1.5 pr-10 text-sm font-normal shadow-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:border-slate-600/60 dark:bg-slate-900;
688723
@apply bg-[url('@assets/icons/arrow-down.svg')] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat dark:bg-[url('@assets/icons/arrow-down-dark.svg')];
689724
&[disabled] {
690725
@apply cursor-not-allowed opacity-40 dark:opacity-30;
@@ -921,7 +956,7 @@
921956

922957
@layer progress {
923958
.cbi-progressbar {
924-
@apply relative h-3.5 w-full cursor-help overflow-hidden rounded-full bg-slate-300 before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-2xl before:text-xs/normal before:whitespace-nowrap before:text-slate-900 before:content-[attr(title)] max-md:h-4 max-md:rounded-2xl max-md:before:text-xs max-md:before:leading-normal dark:bg-slate-700 before:dark:border-slate-600 before:dark:text-slate-100 dark:before:text-slate-100;
959+
@apply before:text-base-text relative h-3.5 w-full cursor-help overflow-hidden rounded-full bg-slate-300 before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-2xl before:text-xs/normal before:whitespace-nowrap before:content-[attr(title)] max-md:h-4 max-md:rounded-2xl max-md:before:text-xs max-md:before:leading-normal dark:bg-slate-700 before:dark:border-slate-600;
925960
[data-page="admin-system-package-manager"] & {
926961
@apply max-sm:before:text-[10px];
927962
}
@@ -1006,7 +1041,7 @@
10061041
@apply mb-3 overflow-visible rounded-2xl p-6 transition-all duration-300 empty:hidden max-md:p-3;
10071042

10081043
#maincontent & {
1009-
@apply border border-slate-200/40 bg-white/95 shadow-lg hover:border-slate-300/50 hover:shadow-xl max-md:border max-md:border-slate-200/20 max-md:bg-white/98 dark:border-slate-600/30 dark:bg-slate-800/95 dark:hover:border-slate-500/40 dark:hover:shadow-black/25 max-md:dark:border-slate-700/15 max-md:dark:bg-slate-800/98;
1044+
@apply border-card-border/30 bg-card-bg hover:border-card-border/50 border shadow-lg hover:shadow-xl;
10101045
}
10111046

10121047
& > .cbi-title {
@@ -1020,7 +1055,7 @@
10201055
@apply ml-auto flex flex-shrink-0 items-center;
10211056

10221057
& .label[data-clickable] {
1023-
@apply bg-slate-100/40 text-slate-900 dark:bg-slate-900/30 dark:text-slate-100;
1058+
@apply text-base-text bg-slate-100/40 dark:bg-slate-900/30;
10241059
@apply inline-flex size-7 cursor-pointer items-center justify-center p-0 before:size-4 before:bg-current before:transition-transform before:duration-300 hover:shadow-md active:scale-95 max-md:size-6;
10251060
}
10261061

@@ -1043,7 +1078,7 @@
10431078
}
10441079

10451080
& h3 {
1046-
@apply border-b border-slate-200/50 pb-4 text-slate-900 max-md:mx-0 max-md:pb-2 dark:border-slate-600/40 dark:text-slate-100;
1081+
@apply text-base-text border-b border-slate-200/50 pb-4 max-md:mx-0 max-md:pb-2 dark:border-slate-600/40;
10471082
}
10481083

10491084
& div[style*="display:grid"] {
@@ -1348,14 +1383,14 @@
13481383
@apply max-md:flex max-md:items-center max-md:justify-between max-md:p-6 max-md:pb-4;
13491384

13501385
& .mobile-nav-title {
1351-
@apply max-md:m-0 max-md:text-lg max-md:font-semibold max-md:text-slate-900 max-md:dark:text-slate-100;
1386+
@apply max-md:text-base-text max-md:m-0 max-md:text-lg max-md:font-semibold;
13521387
}
13531388

13541389
& .mobile-nav-close {
13551390
@apply max-md:cursor-pointer max-md:transition-all max-md:duration-200 max-md:hover:scale-105 max-md:active:scale-95;
13561391

13571392
& svg {
1358-
@apply size-5 max-md:text-slate-900 max-md:transition-transform max-md:duration-200 max-md:dark:text-slate-100;
1393+
@apply max-md:text-base-text size-5 max-md:transition-transform max-md:duration-200;
13591394
}
13601395
}
13611396
}
@@ -1742,9 +1777,9 @@
17421777
}
17431778

17441779
& > li.active {
1745-
@apply border-b-2 border-slate-900 dark:border-slate-100;
1780+
@apply border-base-text border-b-2;
17461781
& > a {
1747-
@apply font-semibold text-slate-900 dark:text-slate-100;
1782+
@apply text-base-text font-semibold;
17481783
}
17491784
}
17501785
}
@@ -1885,7 +1920,7 @@
18851920
}
18861921
}
18871922
h3 {
1888-
@apply border-0 pb-4 text-slate-900 max-md:mx-0 max-md:pb-2 dark:text-slate-100;
1923+
@apply text-base-text border-0 pb-4 max-md:mx-0 max-md:pb-2;
18891924
}
18901925
}
18911926

‎.dev/src/resource/menu-aurora.js‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -302,26 +302,20 @@ return baseclass.extend({
302302

303303
menuLink.classList.add("menu-active");
304304
header.classList.add("has-desktop-nav");
305-
306-
requestAnimationFrame(() => {
307-
const navHeight = nav.scrollHeight;
308-
const headerHeight =
309-
header.querySelector(".header-content")?.offsetHeight || 56;
310-
const totalHeight = headerHeight + navHeight;
311-
312-
if (container) {
313-
container.style.height = `${totalHeight}px`;
314-
}
315-
316-
requestAnimationFrame(() => {
317-
nav.classList.add("active");
318-
overlay.classList.add("active");
319-
320-
if (container) {
321-
container.classList.add("active");
322-
}
323-
});
324-
});
305+
const navHeight = nav.scrollHeight;
306+
const headerHeight =
307+
header.querySelector(".header-content")?.offsetHeight || 56;
308+
const totalHeight = headerHeight + navHeight;
309+
310+
if (container) {
311+
container.style.setProperty(
312+
"--mega-menu-height",
313+
`${totalHeight}px`,
314+
);
315+
container.classList.add("active");
316+
overlay.classList.add("active");
317+
}
318+
nav.classList.add("active");
325319
}, 100);
326320
});
327321

@@ -450,7 +444,6 @@ return baseclass.extend({
450444
const container = document.querySelector(".desktop-menu-container");
451445
if (container) {
452446
container.classList.remove("active");
453-
container.style.height = "";
454447
}
455448

456449
document

‎Makefile‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk
88
LUCI_TITLE:=Aurora Theme (A modern browser theme built with Vite and Tailwind CSS)
99
LUCI_DEPENDS:=+luci-base
1010

11-
PKG_VERSION:=0.10.0
12-
PKG_RELEASE:=20260119
11+
PKG_VERSION:=0.10.1
12+
PKG_RELEASE:=20260123
1313
PKG_LICENSE:=Apache-2.0
1414

1515
LUCI_MINIFY_CSS:=

‎htdocs/luci-static/aurora/main.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)