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

Merge remote-tracking branch 'origin/styleguide' into styleguide

Browse source
This commit is contained in:
kritzl 2025-02-12 16:14:46 +01:00
commit 5fa0e0dcf4
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
5 changed files with 559 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
styleguide/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
.sass-cache

319
styleguide/assets/style/glows.svg Normal file
View file

@ -0,0 +1,319 @@
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
:root {
--color-white: #ffffff;
--color-primary: #c6257d;
--color-secondary: #4badd8;
}
</style>
<filter style="color-interpolation-filters:sRGB;" id="textBlur16Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.25" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur18Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5625" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.125" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.28125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur24Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.75" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.375" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur32Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="4" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur48Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="6" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.75" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur72Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="4.5" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="9" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="1.125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur160Primary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-primary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="10" style="flood-color: var(--color-primary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="20" style="flood-color: var(--color-primary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur16Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.25" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur18Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.5625" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.125" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.28125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur24Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="0.75" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.375" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur32Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="2" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="4" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur48Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="1.5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="3" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="6" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="0.75" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur72Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="2.25" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="4.5" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="9" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="1.125" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
<filter style="color-interpolation-filters:sRGB;" id="textBlur160Secondary">
<feFlood style="flood-color: var(--color-white);" result="flood-white" />
<feFlood style="flood-color: var(--color-secondary);" result="flood-glow-color" />
<feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="5" style="flood-color: var(--color-white);"
result="drop_shadow_0" />
<feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="10" style="flood-color: var(--color-secondary);"
result="drop_shadow_1" />
<feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="20" style="flood-color: var(--color-secondary);"
result="drop_shadow_2" />
<feComposite in="flood-glow-color" in2="SourceAlpha" operator="in" result="flooded" />
<feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="inset_drop_shadow" />
<feComposite in="flood-white" in2="inset_drop_shadow" operator="in" result="inset_drop_shadow_white" />
<feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in" result="inset_shadow" />
<feMerge result="final">
<feMergeNode in="drop_shadow_2" />
<feMergeNode in="flooded" />
<feMergeNode in="inset_shadow" />
</feMerge>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

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

@ -373,7 +373,8 @@ a.a-visited {
color: var(--color-accent-2);
}
code, .code {
code,
.code {
max-width: 100%;
overflow-x: auto;
}
@ -430,4 +431,116 @@ code, .code {
line-height: 1.5;
}
.glow-16-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
filter: url("glows.svg#textBlur16Primary");
}
.glow-18-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
filter: url("glows.svg#textBlur18Primary");
}
.glow-24-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
filter: url("glows.svg#textBlur24Primary");
}
.glow-32-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
filter: url("glows.svg#textBlur32Primary");
}
.glow-48-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
filter: url("glows.svg#textBlur48Primary");
}
.glow-72-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
filter: url("glows.svg#textBlur72Primary");
}
.glow-160-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);
filter: url("glows.svg#textBlur160Primary");
}
.glow-16-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
filter: url("glows.svg#textBlur16Secondary");
}
.glow-18-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
filter: url("glows.svg#textBlur18Secondary");
}
.glow-24-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
filter: url("glows.svg#textBlur24Secondary");
}
.glow-32-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
filter: url("glows.svg#textBlur32Secondary");
}
.glow-48-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
filter: url("glows.svg#textBlur48Secondary");
}
.glow-72-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
filter: url("glows.svg#textBlur72Secondary");
}
.glow-160-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);
filter: url("glows.svg#textBlur160Secondary");
}
/*# sourceMappingURL=styleguide.css.map */

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

File diff suppressed because one or more lines are too long

122
styleguide/assets/style/styleguide.scss
View file

@ -39,7 +39,8 @@ a {
}
}
code, .code {
code,
.code {
max-width: 100%;
overflow-x: auto;
}
@ -47,13 +48,14 @@ code, .code {
.layout-column {
display: flex;
& > * {
&>* {
width: 100%;
}
@media (max-width: $breakpoint-md) {
flex-wrap: wrap;
& > * {
&>* {
width: 100%;
}
}
@ -70,7 +72,7 @@ code, .code {
gap: 1rem;
margin-top: 2rem;
& > span {
&>span {
width: 100%;
font-size: var(--text-xl);
}
@ -100,3 +102,115 @@ code, .code {
}
}
}
.glow-16-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
filter: url('glows.svg#textBlur16Primary')
}
.glow-18-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
filter: url('glows.svg#textBlur18Primary')
}
.glow-24-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
filter: url('glows.svg#textBlur24Primary')
}
.glow-32-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
filter: url('glows.svg#textBlur32Primary')
}
.glow-48-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
filter: url('glows.svg#textBlur48Primary')
}
.glow-72-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
filter: url('glows.svg#textBlur72Primary')
}
.glow-160-primary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);
filter: url('glows.svg#textBlur160Primary')
}
.glow-16-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 16px;
color: var(--color-white);
filter: url('glows.svg#textBlur16Secondary')
}
.glow-18-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 18px;
color: var(--color-white);
filter: url('glows.svg#textBlur18Secondary')
}
.glow-24-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 24px;
color: var(--color-white);
filter: url('glows.svg#textBlur24Secondary')
}
.glow-32-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 32px;
color: var(--color-white);
filter: url('glows.svg#textBlur32Secondary')
}
.glow-48-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 48px;
color: var(--color-white);
filter: url('glows.svg#textBlur48Secondary')
}
.glow-72-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 72px;
color: var(--color-white);
filter: url('glows.svg#textBlur72Secondary')
}
.glow-160-secondary {
font-family: "Argon Glow", ui-sans, sans-serif;
font-weight: 400;
font-size: 160px;
color: var(--color-white);
filter: url('glows.svg#textBlur160Secondary')
}