EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix lightmode glow & make merch.scss inherit from styleguide.scss

Browse source
This commit is contained in:
lilith 2025-03-04 20:12:48 +01:00
commit 130a1cb5b7
Signed by: lilith
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
11 changed files with 1188 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

64
styleguide/assets/style/base.css
View file

@ -137,8 +137,7 @@
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white);
--transition-glow:
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
@ -168,15 +167,14 @@
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950);
--transition-glow:
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
}
.light .light-only {
display: initial;
@ -208,8 +206,7 @@
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white);
--transition-glow:
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
@ -238,15 +235,14 @@
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950);
--transition-glow:
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
}
html:has(#themeLight:checked) .light-only {
display: initial;
@ -254,6 +250,7 @@
html:has(#themeLight:checked) .dark-only {
display: none;
}
#themeToggleDark {
display: none;
}
@ -273,15 +270,14 @@
--color-accent-1: var(--color-light-accent-1);
--color-accent-2: var(--color-light-accent-2);
--color-accent-3: var(--color-light-accent-3);
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
--color-glow-primary: var(--color-argon-950);
--color-glow-secondary: var(--color-krypton-950);
--transition-glow:
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
--filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-950));
--filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-950));
--color-glow-primary: var(--color-argon-800);
--color-glow-secondary: var(--color-krypton-800);
--transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-400));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-400));
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-argon-950));
--text-glow-secondary: drop-shadow(0 0 0.03125em var(--color-krypton-950));
}
html .light-only {
display: initial;
@ -311,8 +307,7 @@
drop-shadow(0 0 0.25em var(--color-secondary));
--color-glow-primary: var(--color-white);
--color-glow-secondary: var(--color-white);
--transition-glow:
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
--transition-glow: filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
@ -327,6 +322,7 @@
html:has(#themeDark:checked) .dark-only {
display: initial;
}
#themeToggleLight {
display: none;
}
@ -532,9 +528,7 @@ a {
color: var(--color-accent-1);
text-decoration: underline;
}
a:hover,
a:active,
a:focus {
a:hover, a:active, a:focus {
color: var(--color-accent-3);
text-decoration: none;
}
@ -542,9 +536,7 @@ a:visited {
color: var(--color-accent-2);
text-decoration: underline;
}
a:visited:hover,
a:visited:active,
a:visited:focus {
a:visited:hover, a:visited:active, a:visited:focus {
color: var(--color-accent-3);
text-decoration: none;
}