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

respect prefers-reduce-motion flag
All checks were successful
/ build (push) Successful in 12s
Details

Browse source
This commit is contained in:
kritzl 2025-03-25 22:55:09 +01:00
commit 9ea4831636
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
7 changed files with 125 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -158,6 +158,11 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
@media (prefers-reduced-motion) {
.dark {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.dark .light-only {
display: none;
}
@ -193,6 +198,11 @@
--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));
}
@media (prefers-reduced-motion) {
.light {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.light .light-only {
display: initial;
}
@ -237,6 +247,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html .light-only {
display: none;
}
@ -271,6 +288,13 @@
--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));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html:has(#themeLight:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html:has(#themeLight:checked) .light-only {
display: initial;
}
@ -310,6 +334,13 @@
--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));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html .light-only {
display: initial;
}
@ -352,6 +383,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html:has(#themeDark:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html:has(#themeDark:checked) .light-only {
display: none;
}

2
styleguide/assets/style/base.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyFF;EArFE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAIA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAIA;EACE;;AAGF;EACE;;;AA+CJ;EA1CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAIA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAYJ;EACE;IA9FA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAIA;AAAA;AAAA;IAGA;AAAA;AAAA;;EAIA;IACE;;EAGF;IACE;;EAuDA;IAlDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAIA;IACA;;EAEA;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IA5DA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAIA;IACA;;EAEA;IACE;;EAGF;IACE;;EA6BA;IA9GF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAIA;AAAA;AAAA;IAGA;AAAA;AAAA;;EAIA;IACE;;EAGF;IACE;;EAwEF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KA9euB;EA+evB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}
{"version":3,"sourceRoot":"","sources":["base.scss"],"names":[],"mappings":"AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAiGF;EA7FE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;AAAA;AAAA;EAGA;AAAA;AAAA;EAGA;EACA;EACA;AAAA;AAAA;EAQA;AAAA;AAAA;EAGA;AAAA;AAAA;;AAPA;EA+DF;IA9DI;;;AAUF;EACE;;AAGF;EACE;;;AAmDJ;EA9CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAQA;EACA;;AALA;EAoBF;IAnBI;;;AAMF;EACE;;AAGF;EACE;;;AAYJ;EACE;IAtGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwEA;IAvEE;;;AAsEJ;EA5DE;IACE;;EAGF;IACE;;EA2DA;IAtDF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EA4BE;IA3BA;;;AAuBJ;EAjBE;IACE;;EAGF;IACE;;EAoBF;IACE;;;AAIJ;EACE;IAhEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;AAAA;AAAA;IAQA;IACA;;;AALA;EAsCA;IArCE;;;AAoCJ;EA9BE;IACE;;EAGF;IACE;;EA6BA;IAtHF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;AAAA;AAAA;IAGA;AAAA;AAAA;IAGA;IACA;IACA;AAAA;AAAA;IAQA;AAAA;AAAA;IAGA;AAAA;AAAA;;;AAPA;EAwFE;IAvFA;;;AAmFJ;EAzEE;IACE;;EAGF;IACE;;EA4EF;IACE;;;AAMJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAMA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA,KAtfuB;EAufvB;;AAEA;EALF;IAMI;;;AAGF;EACE;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;;AAMR;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"base.css"}

8
styleguide/assets/style/base.scss
View file

@ -169,6 +169,10 @@ $mobile-navigation-height: 4rem;
filter 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms,
border-color 150ms cubic-bezier(0, 1.7, 1, -0.3) 50ms;
@media (prefers-reduced-motion) {
--transition-glow: filter 150ms, border-color 150ms;
}
--text-glow-primary: drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));
@ -212,6 +216,10 @@ $mobile-navigation-height: 4rem;
filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
@media (prefers-reduced-motion) {
--transition-glow: filter 150ms, border-color 150ms;
}
--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));

38
styleguide/assets/style/merch.css
View file

@ -158,6 +158,11 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
@media (prefers-reduced-motion) {
.dark {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.dark .light-only {
display: none;
}
@ -193,6 +198,11 @@
--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));
}
@media (prefers-reduced-motion) {
.light {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.light .light-only {
display: initial;
}
@ -237,6 +247,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html .light-only {
display: none;
}
@ -271,6 +288,13 @@
--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));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html:has(#themeLight:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html:has(#themeLight:checked) .light-only {
display: initial;
}
@ -310,6 +334,13 @@
--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));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html .light-only {
display: initial;
}
@ -352,6 +383,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html:has(#themeDark:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html:has(#themeDark:checked) .light-only {
display: none;
}

2
styleguide/assets/style/merch.css.map
View file

File diff suppressed because one or more lines are too long

38
styleguide/assets/style/styleguide.css
View file

@ -158,6 +158,11 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
@media (prefers-reduced-motion) {
.dark {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.dark .light-only {
display: none;
}
@ -193,6 +198,11 @@
--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));
}
@media (prefers-reduced-motion) {
.light {
--transition-glow: filter 150ms, border-color 150ms;
}
}
.light .light-only {
display: initial;
}
@ -237,6 +247,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html .light-only {
display: none;
}
@ -271,6 +288,13 @@
--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));
}
}
@media (prefers-color-scheme: dark) and (prefers-reduced-motion) {
html:has(#themeLight:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: dark) {
html:has(#themeLight:checked) .light-only {
display: initial;
}
@ -310,6 +334,13 @@
--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));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html .light-only {
display: initial;
}
@ -352,6 +383,13 @@
drop-shadow(0 0 0.0625em var(--color-secondary))
drop-shadow(0 0 0.125em var(--color-secondary));
}
}
@media (prefers-color-scheme: light) and (prefers-reduced-motion) {
html:has(#themeDark:checked) {
--transition-glow: filter 150ms, border-color 150ms;
}
}
@media (prefers-color-scheme: light) {
html:has(#themeDark:checked) .light-only {
display: none;
}

2
styleguide/assets/style/styleguide.css.map
View file

File diff suppressed because one or more lines are too long