alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Releases 33 Activity

feat: update background colors
test-build / guarddog (push) Successful in 1m12s
Details
test-build / build (push) Successful in 1m30s
Details

Browse Source
This commit is contained in:
Alex Lebens
2026-05-21 15:57:34 -05:00
parent 901a641b59
commit f71b28adf0
5 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+9 -4
View File
@@ -39,11 +39,16 @@
--color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
--color-secondary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-200));
/* Object colors */
--color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
--color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
--color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
/* Background colors */
--color-background: light-dark(var(--color-neutral-200), var(--color-mist-800));
--color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-mist-900) 20%, transparent));
--color-background-card: light-dark(color-mix(in srgb, var(--color-mist-100) 80%, transparent), color-mix(in srgb, var(--color-mist-900) 50%, transparent));
--color-background-1: light-dark(color-mix(in srgb, var(--color-mist-200) 75%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 95%, var(--color-mist-950)));
--color-background-2: light-dark(color-mix(in srgb, var(--color-mist-400) 10%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 80%, var(--color-mist-950)));
--color-background-3: light-dark(color-mix(in srgb, var(--color-mist-200) 85%, var(--color-slate-100)), color-mix(in srgb, var(--color-mist-700) 85%, var(--color-mist-950)));
/* Object colors */
--color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
/* Typography */
src/styles/utilities-buttons.css
+2 -2
View File
@@ -8,7 +8,7 @@
@utility button-base-hidden {
@apply transition-all duration-300
border border-transparent
hover:bg-neutral-200 dark:hover:bg-neutral-700
hover:bg-mist-200 dark:hover:bg-mist-700
p-2
}
@@ -41,7 +41,7 @@
@utility button-bg-neutral {
@apply transition-all duration-300
border border-neutral-100 dark:border-stone-500/20
border border-neutral-100 dark:border-mist-700/20
bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90
}
src/styles/utilities-cards.css
+4 -4
View File
@@ -1,8 +1,8 @@
@utility card-base {
@apply transition-all duration-300
rounded-xl
border border-neutral-100 dark:border-stone-500/20
bg-background-card hover:bg-neutral-100 dark:hover:bg-neutral-800/90
border border-mist-100/20 dark:border-mist-700/20
bg-background-card hover:bg-neutral-100 dark:hover:bg-mist-900/70
shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
}
@@ -10,7 +10,7 @@
@apply transition-all duration-300
rounded-2xl
border border-transparent
hover:bg-neutral-400/20 dark:hover:bg-neutral-800/40
hover:bg-mist-400/20 dark:hover:bg-mist-800/40
}
@utility card-hover-icon-color {
@@ -21,7 +21,7 @@
@utility card-hover-icon-scale {
@apply transition-transform duration-300 will-change-transform
drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-neutral-500/60
drop-shadow-md dark:drop-shadow-xl dark:drop-shadow-mist-500/60
group-hover:scale-3d group-hover:scale-105
}
src/styles/utilities-misc.css
+2 -2
View File
@@ -1,7 +1,7 @@
/* Nav */
@utility nav-base {
@apply border border-neutral-100 dark:border-stone-500/20
bg-neutral-100 dark:bg-neutral-800
@apply border border-mist-100/20 dark:border-mist-700/20
bg-mist-100/80 dark:bg-mist-900/40
shadow-xs dark:shadow-md
}