Merge branch 'refs/heads/styleguide'
This commit is contained in:
commit
c44a57fd5c
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
33 changed files with 2686 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.idea
|
||||
1
styleguide/.gitignore
vendored
Normal file
1
styleguide/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.sass-cache
|
||||
BIN
styleguide/assets/font/argonglow/ArgonGlow-Bold.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-Bold.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/argonglow/ArgonGlow-ExtraLight.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-ExtraLight.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/argonglow/ArgonGlow-Light.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-Light.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/argonglow/ArgonGlow-Medium.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-Medium.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/argonglow/ArgonGlow-Regular.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-Regular.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/argonglow/ArgonGlow-SemiBold.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-SemiBold.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/argonglow/ArgonGlow-Thin.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-Thin.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/argonglow/ArgonGlow-VariableVF.woff2
Normal file
BIN
styleguide/assets/font/argonglow/ArgonGlow-VariableVF.woff2
Normal file
Binary file not shown.
96
styleguide/assets/font/argonglow/OFL
Normal file
96
styleguide/assets/font/argonglow/OFL
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
Copyright (c) 2025, The Argon Glow Project Authors (https://codeberg.org/kritzl/argon-glow),
|
||||
Copyright (c) 2025, kritzl (kritzl@kritzl.dev),
|
||||
Copyright (c) 2025, traumweh (traumweh@lyx.sh),
|
||||
with Reserved Font Name "Argon Glow".
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting - in part or in whole - any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
styleguide/assets/font/athiti/Athiti-Bold.woff2
Normal file
BIN
styleguide/assets/font/athiti/Athiti-Bold.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/athiti/Athiti-ExtraLight.woff2
Normal file
BIN
styleguide/assets/font/athiti/Athiti-ExtraLight.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/athiti/Athiti-Light.woff2
Normal file
BIN
styleguide/assets/font/athiti/Athiti-Light.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/athiti/Athiti-Medium.woff2
Normal file
BIN
styleguide/assets/font/athiti/Athiti-Medium.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/athiti/Athiti-Regular.woff2
Normal file
BIN
styleguide/assets/font/athiti/Athiti-Regular.woff2
Normal file
Binary file not shown.
BIN
styleguide/assets/font/athiti/Athiti-SemiBold.woff2
Normal file
BIN
styleguide/assets/font/athiti/Athiti-SemiBold.woff2
Normal file
Binary file not shown.
93
styleguide/assets/font/athiti/OFL
Normal file
93
styleguide/assets/font/athiti/OFL
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
Copyright (c) 2015, Cadson Demak (info@cadsondemak.com)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
styleguide/assets/font/departuremono/DepartureMono-Regular.woff2
Normal file
BIN
styleguide/assets/font/departuremono/DepartureMono-Regular.woff2
Normal file
Binary file not shown.
93
styleguide/assets/font/departuremono/LICENSE
Normal file
93
styleguide/assets/font/departuremono/LICENSE
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
Copyright 2022–2024 Helena Zhang (helenazhang.com).
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
319
styleguide/assets/style/glows.svg
Normal file
319
styleguide/assets/style/glows.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 18 KiB |
322
styleguide/assets/style/main.css
Normal file
322
styleguide/assets/style/main.css
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
:root {
|
||||
--color-neutral-50: #F2F0F5;
|
||||
--color-neutral-100: #D1C6E0;
|
||||
--color-neutral-200: #B2A0CB;
|
||||
--color-neutral-300: #957EB5;
|
||||
--color-neutral-400: #7A60A0;
|
||||
--color-neutral-500: #61468B;
|
||||
--color-neutral-600: #4B3176;
|
||||
--color-neutral-700: #371F60;
|
||||
--color-neutral-800: #26114B;
|
||||
--color-neutral-900: #180736;
|
||||
--color-neutral-950: #0C011F;
|
||||
--color-argon-50: #E1ABC9;
|
||||
--color-argon-100: #DA87B5;
|
||||
--color-argon-200: #D464A1;
|
||||
--color-argon-300: #CD448F;
|
||||
--color-argon-400: #C6257D;
|
||||
--color-argon-500: #B0166F;
|
||||
--color-argon-600: #9A0A61;
|
||||
--color-argon-700: #830755;
|
||||
--color-argon-800: #6D0449;
|
||||
--color-argon-900: #56023C;
|
||||
--color-argon-950: #3F012D;
|
||||
--color-krypton-50: #B2D9EA;
|
||||
--color-krypton-100: #8CC9E4;
|
||||
--color-krypton-200: #69BADE;
|
||||
--color-krypton-300: #4BADD8;
|
||||
--color-krypton-400: #2493C2;
|
||||
--color-krypton-500: #167FAC;
|
||||
--color-krypton-600: #0A6C96;
|
||||
--color-krypton-700: #075C81;
|
||||
--color-krypton-800: #044C6B;
|
||||
--color-krypton-900: #023C55;
|
||||
--color-krypton-950: #012C3F;
|
||||
--color-green-50: #C0F49A;
|
||||
--color-green-100: #A7E57A;
|
||||
--color-green-200: #8FD75D;
|
||||
--color-green-300: #7AC843;
|
||||
--color-green-400: #66B92D;
|
||||
--color-green-500: #54AA18;
|
||||
--color-green-600: #47990F;
|
||||
--color-green-700: #397E0A;
|
||||
--color-green-800: #2B6206;
|
||||
--color-green-900: #1F4703;
|
||||
--color-green-950: #122B01;
|
||||
--color-red-50: #E6AFAF;
|
||||
--color-red-100: #DD9090;
|
||||
--color-red-200: #D57272;
|
||||
--color-red-300: #CC5757;
|
||||
--color-red-400: #C33D3D;
|
||||
--color-red-500: #BB2626;
|
||||
--color-red-600: #B21010;
|
||||
--color-red-700: #950808;
|
||||
--color-red-800: #780404;
|
||||
--color-red-900: #5C0202;
|
||||
--color-red-950: #3F0101;
|
||||
--color-dark-foreground: var(--color-neutral-50);
|
||||
--color-dark-background: var(--color-neutral-900);
|
||||
--color-dark-shade-1: var(--color-neutral-800);
|
||||
--color-dark-shade-2: var(--color-neutral-700);
|
||||
--color-dark-shade-3: var(--color-neutral-600);
|
||||
--color-dark-shade-4: var(--color-neutral-500);
|
||||
--color-dark-primary: var(--color-argon-400);
|
||||
--color-dark-secondary: var(--color-krypton-300);
|
||||
--color-dark-error: var(--color-red-500);
|
||||
--color-dark-success: var(--color-green-500);
|
||||
--color-dark-accent-1: #60a5f9;
|
||||
--color-dark-accent-2: #d381f7;
|
||||
--color-dark-accent-3: #ff7975;
|
||||
--color-light-foreground: var(--color-neutral-900);
|
||||
--color-light-background: var(--color-neutral-50);
|
||||
--color-light-shade-1: var(--color-neutral-100);
|
||||
--color-light-shade-2: var(--color-neutral-200);
|
||||
--color-light-shade-3: var(--color-neutral-300);
|
||||
--color-light-shade-4: var(--color-neutral-400);
|
||||
--color-light-primary: var(--color-argon-600);
|
||||
--color-light-secondary: var(--color-krypton-500);
|
||||
--color-light-error: var(--color-red-600);
|
||||
--color-light-success: var(--color-green-600);
|
||||
--color-light-accent-1: #303EC0;
|
||||
--color-light-accent-2: #6c366c;
|
||||
--color-light-accent-3: #932f0a;
|
||||
--color-cmyk-primary: var(--color-dark-primary);
|
||||
--color-cmyk-secondary: var(--color-dark-secondary);
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
--container-3xs: 16rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
--container-md: 28rem;
|
||||
--container-lg: 32rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--container-5xl: 64rem;
|
||||
--container-6xl: 72rem;
|
||||
--container-7xl: 80rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-shade-1: var(--color-dark-shade-1);
|
||||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
}
|
||||
|
||||
.light {
|
||||
--color-foreground: var(--color-light-foreground);
|
||||
--color-background: var(--color-light-background);
|
||||
--color-shade-1: var(--color-light-shade-1);
|
||||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
--color-success: var(--color-light-success);
|
||||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
}
|
||||
|
||||
html, html.light {
|
||||
--color-foreground: var(--color-light-foreground);
|
||||
--color-background: var(--color-light-background);
|
||||
--color-shade-1: var(--color-light-shade-1);
|
||||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
--color-success: var(--color-light-success);
|
||||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-shade-1: var(--color-dark-shade-1);
|
||||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-shade-1: var(--color-dark-shade-1);
|
||||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 700;
|
||||
src: local("Athiti"), url("../font/athiti/Athiti-Bold.otf") format("opentype"), url("../font/athiti/Athiti-Bold.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 600;
|
||||
src: local("Athiti"), url("../font/athiti/Athiti-SemiBold.otf") format("opentype"), url("../font/athiti/Athiti-SemiBold.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 500;
|
||||
src: local("Athiti"), url("../font/athiti/Athiti-Medium.otf") format("opentype"), url("../font/athiti/Athiti-Medium.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 400;
|
||||
src: local("Athiti"), url("../font/athiti/Athiti-Regular.otf") format("opentype"), url("../font/athiti/Athiti-Regular.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 300;
|
||||
src: local("Athiti"), url("../font/athiti/Athiti-Light.otf") format("opentype"), url("../font/athiti/Athiti-Light.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 200;
|
||||
src: local("Athiti"), url("../font/athiti/Athiti-ExtraLight.otf") format("opentype"), url("../font/athiti/Athiti-ExtraLight.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Departure Mono";
|
||||
src: local("Departure Mono"), url("../font/departuremono/DepartureMono-Regular.otf") format("opentype"), url("../font/departuremono/DepartureMono-Regular.woff") format("woff"), url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 100;
|
||||
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Thin.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Thin.woff") format("woff"), url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 200;
|
||||
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-ExtraLight.otf") format("opentype"), url("../font/argonglow/ArgonGlow-ExtraLight.woff") format("woff"), url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 300;
|
||||
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Light.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Light.woff") format("woff"), url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 400;
|
||||
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Regular.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Regular.woff") format("woff"), url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 500;
|
||||
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Medium.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Medium.woff") format("woff"), url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 600;
|
||||
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-SemiBold.otf") format("opentype"), url("../font/argonglow/ArgonGlow-SemiBold.woff") format("woff"), url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 700;
|
||||
src: local("Argon Glow"), url("../font/argonglow/ArgonGlow-Bold.otf") format("opentype"), url("../font/argonglow/ArgonGlow-Bold.woff") format("woff"), url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow Variable";
|
||||
src: url("../font/argonglow/ArgonGlow-VariableVF.ttf") format("truetype"), url("../font/argonglow/ArgonGlow-VariableVF.woff") format("woff"), url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow Bug";
|
||||
font-weight: 500;
|
||||
src: url("../font/argonglow/bug/ArgonGlow-Medium.otf") format("opentype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow Bug Variable";
|
||||
src: url("../font/argonglow/bug/ArgonGlow-VariableVF.ttf") format("truetype");
|
||||
}
|
||||
:root {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
font-family: "Athiti", ui-sans, sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: var(--container-4xl);
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
}
|
||||
|
||||
code, .code {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--color-shade-1);
|
||||
}
|
||||
|
||||
table tr th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent-1);
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
a:visited:hover, a:visited:active, a:visited:focus {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
1
styleguide/assets/style/main.css.map
Normal file
1
styleguide/assets/style/main.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAMA;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;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;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA2CF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;;AAMF;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE","file":"main.css"}
|
||||
353
styleguide/assets/style/main.scss
Normal file
353
styleguide/assets/style/main.scss
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
$breakpoint-sm: 40rem;
|
||||
$breakpoint-md: 48rem;
|
||||
$breakpoint-lg: 64rem;
|
||||
$breakpoint-xl: 80rem;
|
||||
$breakpoint-2xl: 96rem;
|
||||
|
||||
:root {
|
||||
--color-neutral-50: #F2F0F5;
|
||||
--color-neutral-100: #D1C6E0;
|
||||
--color-neutral-200: #B2A0CB;
|
||||
--color-neutral-300: #957EB5;
|
||||
--color-neutral-400: #7A60A0;
|
||||
--color-neutral-500: #61468B;
|
||||
--color-neutral-600: #4B3176;
|
||||
--color-neutral-700: #371F60;
|
||||
--color-neutral-800: #26114B;
|
||||
--color-neutral-900: #180736;
|
||||
--color-neutral-950: #0C011F;
|
||||
--color-argon-50: #E1ABC9;
|
||||
--color-argon-100: #DA87B5;
|
||||
--color-argon-200: #D464A1;
|
||||
--color-argon-300: #CD448F;
|
||||
--color-argon-400: #C6257D;
|
||||
--color-argon-500: #B0166F;
|
||||
--color-argon-600: #9A0A61;
|
||||
--color-argon-700: #830755;
|
||||
--color-argon-800: #6D0449;
|
||||
--color-argon-900: #56023C;
|
||||
--color-argon-950: #3F012D;
|
||||
--color-krypton-50: #B2D9EA;
|
||||
--color-krypton-100: #8CC9E4;
|
||||
--color-krypton-200: #69BADE;
|
||||
--color-krypton-300: #4BADD8;
|
||||
--color-krypton-400: #2493C2;
|
||||
--color-krypton-500: #167FAC;
|
||||
--color-krypton-600: #0A6C96;
|
||||
--color-krypton-700: #075C81;
|
||||
--color-krypton-800: #044C6B;
|
||||
--color-krypton-900: #023C55;
|
||||
--color-krypton-950: #012C3F;
|
||||
--color-green-50: #C0F49A;
|
||||
--color-green-100: #A7E57A;
|
||||
--color-green-200: #8FD75D;
|
||||
--color-green-300: #7AC843;
|
||||
--color-green-400: #66B92D;
|
||||
--color-green-500: #54AA18;
|
||||
--color-green-600: #47990F;
|
||||
--color-green-700: #397E0A;
|
||||
--color-green-800: #2B6206;
|
||||
--color-green-900: #1F4703;
|
||||
--color-green-950: #122B01;
|
||||
--color-red-50: #E6AFAF;
|
||||
--color-red-100: #DD9090;
|
||||
--color-red-200: #D57272;
|
||||
--color-red-300: #CC5757;
|
||||
--color-red-400: #C33D3D;
|
||||
--color-red-500: #BB2626;
|
||||
--color-red-600: #B21010;
|
||||
--color-red-700: #950808;
|
||||
--color-red-800: #780404;
|
||||
--color-red-900: #5C0202;
|
||||
--color-red-950: #3F0101;
|
||||
|
||||
--color-white: #FFFFFF;
|
||||
|
||||
--color-dark-foreground: var(--color-neutral-50);
|
||||
--color-dark-background: var(--color-neutral-950);
|
||||
--color-dark-shade-1: var(--color-neutral-800);
|
||||
--color-dark-shade-2: var(--color-neutral-700);
|
||||
--color-dark-shade-3: var(--color-neutral-600);
|
||||
--color-dark-shade-4: var(--color-neutral-500);
|
||||
--color-dark-primary: var(--color-argon-400);
|
||||
--color-dark-secondary: var(--color-krypton-300);
|
||||
--color-dark-error: var(--color-red-500);
|
||||
--color-dark-success: var(--color-green-500);
|
||||
--color-dark-accent-1: #60a5f9;
|
||||
--color-dark-accent-2: #d381f7;
|
||||
--color-dark-accent-3: #ff7975;
|
||||
|
||||
--color-light-foreground: var(--color-neutral-950);
|
||||
--color-light-background: var(--color-neutral-50);
|
||||
--color-light-shade-1: var(--color-neutral-100);
|
||||
--color-light-shade-2: var(--color-neutral-200);
|
||||
--color-light-shade-3: var(--color-neutral-300);
|
||||
--color-light-shade-4: var(--color-neutral-400);
|
||||
--color-light-primary: var(--color-argon-600);
|
||||
--color-light-secondary: var(--color-krypton-500);
|
||||
--color-light-error: var(--color-red-600);
|
||||
--color-light-success: var(--color-green-600);
|
||||
--color-light-accent-1: #303EC0;
|
||||
--color-light-accent-2: #6c366c;
|
||||
--color-light-accent-3: #932f0a;
|
||||
|
||||
--color-cmyk-primary: var(--color-dark-primary);
|
||||
--color-cmyk-secondary: var(--color-dark-secondary);
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
|
||||
--container-3xs: 16rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
--container-md: 28rem;
|
||||
--container-lg: 32rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--container-5xl: 64rem;
|
||||
--container-6xl: 72rem;
|
||||
--container-7xl: 80rem;
|
||||
}
|
||||
|
||||
@mixin theme_dark() {
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-shade-1: var(--color-dark-shade-1);
|
||||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
}
|
||||
|
||||
@mixin theme_light() {
|
||||
--color-foreground: var(--color-light-foreground);
|
||||
--color-background: var(--color-light-background);
|
||||
--color-shade-1: var(--color-light-shade-1);
|
||||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
--color-success: var(--color-light-success);
|
||||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@include theme_dark();
|
||||
}
|
||||
|
||||
.light {
|
||||
@include theme_light();
|
||||
}
|
||||
|
||||
html, html.light {
|
||||
@include theme_light();
|
||||
}
|
||||
|
||||
html.dark {
|
||||
@include theme_dark();
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
@include theme_dark();
|
||||
}
|
||||
}
|
||||
|
||||
// fonts
|
||||
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 700;
|
||||
src: url("../font/athiti/Athiti-Bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 600;
|
||||
src: url("../font/athiti/Athiti-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 500;
|
||||
src: url("../font/athiti/Athiti-Medium.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 400;
|
||||
src: url("../font/athiti/Athiti-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 300;
|
||||
src: url("../font/athiti/Athiti-Light.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 200;
|
||||
src: url("../font/athiti/Athiti-ExtraLight.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Departure Mono";
|
||||
src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 100;
|
||||
src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 200;
|
||||
src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 300;
|
||||
src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 400;
|
||||
src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 500;
|
||||
src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 600;
|
||||
src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 700;
|
||||
src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
}
|
||||
|
||||
// Styling of components begins here
|
||||
|
||||
:root {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
font-family: "Athiti", ui-sans, sans-serif;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6,
|
||||
{
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
h1, .h1 {
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h4, .h4 {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h5, .h5 {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h6, .h6 {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
code, .code {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-shade-1);
|
||||
}
|
||||
|
||||
table {
|
||||
tr {
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent-1);
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: var(--color-accent-2);
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
546
styleguide/assets/style/styleguide.css
Normal file
546
styleguide/assets/style/styleguide.css
Normal file
|
|
@ -0,0 +1,546 @@
|
|||
:root {
|
||||
--color-neutral-50: #F2F0F5;
|
||||
--color-neutral-100: #D1C6E0;
|
||||
--color-neutral-200: #B2A0CB;
|
||||
--color-neutral-300: #957EB5;
|
||||
--color-neutral-400: #7A60A0;
|
||||
--color-neutral-500: #61468B;
|
||||
--color-neutral-600: #4B3176;
|
||||
--color-neutral-700: #371F60;
|
||||
--color-neutral-800: #26114B;
|
||||
--color-neutral-900: #180736;
|
||||
--color-neutral-950: #0C011F;
|
||||
--color-argon-50: #E1ABC9;
|
||||
--color-argon-100: #DA87B5;
|
||||
--color-argon-200: #D464A1;
|
||||
--color-argon-300: #CD448F;
|
||||
--color-argon-400: #C6257D;
|
||||
--color-argon-500: #B0166F;
|
||||
--color-argon-600: #9A0A61;
|
||||
--color-argon-700: #830755;
|
||||
--color-argon-800: #6D0449;
|
||||
--color-argon-900: #56023C;
|
||||
--color-argon-950: #3F012D;
|
||||
--color-krypton-50: #B2D9EA;
|
||||
--color-krypton-100: #8CC9E4;
|
||||
--color-krypton-200: #69BADE;
|
||||
--color-krypton-300: #4BADD8;
|
||||
--color-krypton-400: #2493C2;
|
||||
--color-krypton-500: #167FAC;
|
||||
--color-krypton-600: #0A6C96;
|
||||
--color-krypton-700: #075C81;
|
||||
--color-krypton-800: #044C6B;
|
||||
--color-krypton-900: #023C55;
|
||||
--color-krypton-950: #012C3F;
|
||||
--color-green-50: #C0F49A;
|
||||
--color-green-100: #A7E57A;
|
||||
--color-green-200: #8FD75D;
|
||||
--color-green-300: #7AC843;
|
||||
--color-green-400: #66B92D;
|
||||
--color-green-500: #54AA18;
|
||||
--color-green-600: #47990F;
|
||||
--color-green-700: #397E0A;
|
||||
--color-green-800: #2B6206;
|
||||
--color-green-900: #1F4703;
|
||||
--color-green-950: #122B01;
|
||||
--color-red-50: #E6AFAF;
|
||||
--color-red-100: #DD9090;
|
||||
--color-red-200: #D57272;
|
||||
--color-red-300: #CC5757;
|
||||
--color-red-400: #C33D3D;
|
||||
--color-red-500: #BB2626;
|
||||
--color-red-600: #B21010;
|
||||
--color-red-700: #950808;
|
||||
--color-red-800: #780404;
|
||||
--color-red-900: #5C0202;
|
||||
--color-red-950: #3F0101;
|
||||
--color-white: #FFFFFF;
|
||||
--color-dark-foreground: var(--color-neutral-50);
|
||||
--color-dark-background: var(--color-neutral-950);
|
||||
--color-dark-shade-1: var(--color-neutral-800);
|
||||
--color-dark-shade-2: var(--color-neutral-700);
|
||||
--color-dark-shade-3: var(--color-neutral-600);
|
||||
--color-dark-shade-4: var(--color-neutral-500);
|
||||
--color-dark-primary: var(--color-argon-400);
|
||||
--color-dark-secondary: var(--color-krypton-300);
|
||||
--color-dark-error: var(--color-red-500);
|
||||
--color-dark-success: var(--color-green-500);
|
||||
--color-dark-accent-1: #60a5f9;
|
||||
--color-dark-accent-2: #d381f7;
|
||||
--color-dark-accent-3: #ff7975;
|
||||
--color-light-foreground: var(--color-neutral-950);
|
||||
--color-light-background: var(--color-neutral-50);
|
||||
--color-light-shade-1: var(--color-neutral-100);
|
||||
--color-light-shade-2: var(--color-neutral-200);
|
||||
--color-light-shade-3: var(--color-neutral-300);
|
||||
--color-light-shade-4: var(--color-neutral-400);
|
||||
--color-light-primary: var(--color-argon-600);
|
||||
--color-light-secondary: var(--color-krypton-500);
|
||||
--color-light-error: var(--color-red-600);
|
||||
--color-light-success: var(--color-green-600);
|
||||
--color-light-accent-1: #303EC0;
|
||||
--color-light-accent-2: #6c366c;
|
||||
--color-light-accent-3: #932f0a;
|
||||
--color-cmyk-primary: var(--color-dark-primary);
|
||||
--color-cmyk-secondary: var(--color-dark-secondary);
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
--container-3xs: 16rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
--container-md: 28rem;
|
||||
--container-lg: 32rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--container-5xl: 64rem;
|
||||
--container-6xl: 72rem;
|
||||
--container-7xl: 80rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-shade-1: var(--color-dark-shade-1);
|
||||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
}
|
||||
|
||||
.light {
|
||||
--color-foreground: var(--color-light-foreground);
|
||||
--color-background: var(--color-light-background);
|
||||
--color-shade-1: var(--color-light-shade-1);
|
||||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
--color-success: var(--color-light-success);
|
||||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
}
|
||||
|
||||
html, html.light {
|
||||
--color-foreground: var(--color-light-foreground);
|
||||
--color-background: var(--color-light-background);
|
||||
--color-shade-1: var(--color-light-shade-1);
|
||||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
--color-success: var(--color-light-success);
|
||||
--color-accent-1: var(--color-light-accent-1);
|
||||
--color-accent-2: var(--color-light-accent-2);
|
||||
--color-accent-3: var(--color-light-accent-3);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-shade-1: var(--color-dark-shade-1);
|
||||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
--color-foreground: var(--color-dark-foreground);
|
||||
--color-background: var(--color-dark-background);
|
||||
--color-shade-1: var(--color-dark-shade-1);
|
||||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
--color-success: var(--color-dark-success);
|
||||
--color-accent-1: var(--color-dark-accent-1);
|
||||
--color-accent-2: var(--color-dark-accent-2);
|
||||
--color-accent-3: var(--color-dark-accent-3);
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 700;
|
||||
src: url("../font/athiti/Athiti-Bold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 600;
|
||||
src: url("../font/athiti/Athiti-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 500;
|
||||
src: url("../font/athiti/Athiti-Medium.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 400;
|
||||
src: url("../font/athiti/Athiti-Regular.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 300;
|
||||
src: url("../font/athiti/Athiti-Light.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Athiti";
|
||||
font-weight: 200;
|
||||
src: url("../font/athiti/Athiti-ExtraLight.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Departure Mono";
|
||||
src: url("../font/departuremono/DepartureMono-Regular.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 100;
|
||||
src: url("../font/argonglow/ArgonGlow-Thin.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 200;
|
||||
src: url("../font/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 300;
|
||||
src: url("../font/argonglow/ArgonGlow-Light.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 400;
|
||||
src: url("../font/argonglow/ArgonGlow-Regular.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 500;
|
||||
src: url("../font/argonglow/ArgonGlow-Medium.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 600;
|
||||
src: url("../font/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
font-weight: 700;
|
||||
src: url("../font/argonglow/ArgonGlow-Bold.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Argon Glow";
|
||||
src: url("../font/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
|
||||
font-weight: 100 900;
|
||||
}
|
||||
:root {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
font-family: "Athiti", ui-sans, sans-serif;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
font-family: "Argon Glow", ui-sans, sans-serif;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h4, .h4 {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h5, .h5 {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
h6, .h6 {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var();
|
||||
}
|
||||
|
||||
code, .code {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-shade-1);
|
||||
}
|
||||
|
||||
table tr th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent-1);
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
a:visited:hover, a:visited:active, a:visited:focus {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: min(var(--container-4xl), 100vw);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 40rem) {
|
||||
main {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.a-regular {
|
||||
color: var(--color-accent-1);
|
||||
}
|
||||
a.a-hover {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
a.a-visited {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
|
||||
code,
|
||||
.code {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.layout-column {
|
||||
display: flex;
|
||||
}
|
||||
.layout-column > * {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
.layout-column {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.layout-column > * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
padding: 1rem;
|
||||
}
|
||||
.swatch-grid section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.swatch-grid section > span {
|
||||
width: 100%;
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
.swatch-grid section .swatch-container {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
gap: 0.25rem;
|
||||
background-color: var(--color-background);
|
||||
border-radius: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 0.125rem solid var(--color-foreground);
|
||||
}
|
||||
.swatch-grid section .swatch-container .swatch {
|
||||
background-color: var(--swatch-color);
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.swatch-grid section .swatch-container span {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
color: var(--color-foreground);
|
||||
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 */
|
||||
1
styleguide/assets/style/styleguide.css.map
Normal file
1
styleguide/assets/style/styleguide.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["main.scss","styleguide.scss"],"names":[],"mappings":"AAMA;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;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;EA3CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EACE;IAhDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA2CF;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;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;;ACzVN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EAPF;IAQI;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
|
||||
216
styleguide/assets/style/styleguide.scss
Normal file
216
styleguide/assets/style/styleguide.scss
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
@import "main";
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: min(var(--container-4xl), 100vw);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: $breakpoint-sm) {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&.a-regular {
|
||||
color: var(--color-accent-1);
|
||||
}
|
||||
|
||||
&.a-hover {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
|
||||
&.a-visited {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
}
|
||||
|
||||
code,
|
||||
.code {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.layout-column {
|
||||
display: flex;
|
||||
|
||||
&>* {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
flex-wrap: wrap;
|
||||
|
||||
&>* {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
padding: 1rem;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.swatch-container {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
gap: 0.25rem;
|
||||
background-color: var(--color-background);
|
||||
border-radius: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 0.125rem solid var(--color-foreground);
|
||||
|
||||
.swatch {
|
||||
background-color: var(--swatch-color);
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
color: var(--color-foreground);
|
||||
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')
|
||||
}
|
||||
232
styleguide/color_guide.html
Normal file
232
styleguide/color_guide.html
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
||||
<title>Color Guide</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html">Back to Overview</a>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Color Guide</h1>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
<h2>Digital Media</h2>
|
||||
<div class="layout-column">
|
||||
<div class="dark swatch-grid">
|
||||
<h3>Darkmode</h3>
|
||||
|
||||
<section aria-labelledby="label-dark-fore-background">
|
||||
<span id="label-dark-fore-background">Fore- & Background</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
|
||||
<span id="label-dark-swatch-foreground">#f5f0f0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-background" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
|
||||
<span id="label-dark-swatch-background">#180736</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TODO: Final shades -->
|
||||
<section aria-labelledby="label-dark-shades">
|
||||
<span id="label-dark-shades">Shades</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
|
||||
<span id="label-dark-swatch-shade-1">#TODO</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
|
||||
<span id="label-dark-swatch-shade-2">#TODO</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
|
||||
<span id="label-dark-swatch-shade-3">#TODO</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
|
||||
<span id="label-dark-swatch-shade-4">#TODO</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-dark-primary-secondary">
|
||||
<span id="label-dark-primary-secondary">Primary & Secondary</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-primary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-primary)"></div>
|
||||
<span id="label-dark-swatch-primary">#c6257d</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-secondary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-secondary)"></div>
|
||||
<span id="label-dark-swatch-secondary">#4dadd8</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TODO: Might be too bright -->
|
||||
<section aria-labelledby="label-dark-error-success">
|
||||
<span id="label-dark-error-success">Error & Success</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-error" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
|
||||
<span id="label-dark-swatch-error">#f22d2d</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-success" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
|
||||
<span id="label-dark-swatch-success">#8cff3c</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TODO: Color names -->
|
||||
<!-- TODO: Secondary as first accent? -->
|
||||
<section aria-labelledby="label-dark-accents">
|
||||
<span id="label-dark-accents">Accents</span>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-accent-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-1)"></div>
|
||||
<span id="label-dark-swatch-accent-1">#60a5f9</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-accent-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-2)"></div>
|
||||
<span id="label-dark-swatch-accent-2">#d381f7</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-dark-swatch-accent-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-dark-accent-3)"></div>
|
||||
<span id="label-dark-swatch-accent-3">#ff7975</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="light swatch-grid">
|
||||
<h3>Lightmode</h3>
|
||||
|
||||
<section aria-labelledby="label-light-fore-background">
|
||||
<span id="label-light-fore-background">Fore- & Background</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
|
||||
<span id="label-light-swatch-foreground">#180736</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-background" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
|
||||
<span id="label-light-swatch-background">#f5f0f0</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TODO: Final shades -->
|
||||
<section aria-labelledby="label-light-shades">
|
||||
<span id="label-light-shades">Shades</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
|
||||
<span id="label-light-swatch-shade-1">#TODO</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
|
||||
<span id="label-light-swatch-shade-2">#TODO</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
|
||||
<span id="label-light-swatch-shade-3">#TODO</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
|
||||
<span id="label-light-swatch-shade-4">#TODO</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-light-primary-secondary">Primary & Secondary</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
|
||||
<span id="label-light-swatch-primary">#TODO</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
|
||||
<span id="label-light-swatch-secondary">#TODO</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="label-light-error-success">
|
||||
<span id="label-light-error-success">Error & Success</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-error" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-error)"></div>
|
||||
<span id="label-light-swatch-error">#b21010</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-success" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-success)"></div>
|
||||
<span id="label-light-swatch-success">#47990f</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TODO: Color names -->
|
||||
<!-- TODO: Secondary as first accent? -->
|
||||
<section aria-labelledby="label-light-accents">
|
||||
<span id="label-light-accents">Accents</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-accent-1" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-accent-1)"></div>
|
||||
<span id="label-light-swatch-accent-1">#303ec0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-accent-2" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-accent-2)"></div>
|
||||
<span id="label-light-swatch-accent-2">#6c366c</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-accent-3" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-light-accent-3)"></div>
|
||||
<span id="label-light-swatch-accent-3">#932f0a</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Printing</h2>
|
||||
<p>
|
||||
Our primary and secondary colours are also defined for CMYK printing:
|
||||
</p>
|
||||
|
||||
<div class="swatch-grid">
|
||||
<section aria-labelledby="label-light-primary-secondary">
|
||||
<span id="label-cmyk-primary-secondary">CMYK Colors</span>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-primary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-cmyk-primary)"></div>
|
||||
<span id="label-cmyk-swatch-primary">0/94/6/0</span>
|
||||
</div>
|
||||
|
||||
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
|
||||
<div class="swatch" style="--swatch-color: var(--color-cmyk-secondary)"></div>
|
||||
<span id="label-cmyk-swatch-secondary">81/0/10/0</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
77
styleguide/generator/generator.js
Normal file
77
styleguide/generator/generator.js
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
let can = document.createElement("canvas");
|
||||
let ctx = can.getContext('2d');
|
||||
let result;
|
||||
const downloadButton = document.querySelector('#download');
|
||||
|
||||
function filterImage(svgDataUrl, width, height) {
|
||||
const filteredImage = new Image();
|
||||
const resultPreview = document.querySelector('#result_img')
|
||||
|
||||
can.width = width;
|
||||
can.height = height;
|
||||
|
||||
filteredImage.onload = function () {
|
||||
ctx.drawImage(filteredImage, 0, 0, width, height);
|
||||
result = can.toDataURL();
|
||||
downloadButton.disabled = false;
|
||||
resultPreview.src = result;
|
||||
};
|
||||
filteredImage.src = svgDataUrl;
|
||||
}
|
||||
|
||||
function loadImage(base64Image) {
|
||||
const sourceImage = new Image();
|
||||
const svg = document.querySelector('svg')
|
||||
const svgImage = svg.querySelector('image')
|
||||
const sourcePreview = document.querySelector('#source_img')
|
||||
let svgDataUrl;
|
||||
|
||||
sourceImage.onload = function () {
|
||||
let svgWidth = this.width;
|
||||
let svgHeight = this.height;
|
||||
|
||||
if (this.width > 1000) {
|
||||
svgWidth = 1000;
|
||||
svgHeight = 1000 * this.height / this.width;
|
||||
}
|
||||
|
||||
svg.setAttribute("height", svgHeight);
|
||||
svg.setAttribute("width", svgWidth);
|
||||
|
||||
let svgString = (new XMLSerializer).serializeToString(svg);
|
||||
svgDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgString);
|
||||
|
||||
filterImage(svgDataUrl, this.width, this.height);
|
||||
};
|
||||
sourceImage.src = svgImage.href.baseVal = sourcePreview.src = base64Image;
|
||||
}
|
||||
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const files = e.target.files;
|
||||
if (!files || !files.length) return;
|
||||
const file = files[0];
|
||||
if (!file.type.match('image.*')) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (readerEvent) => {
|
||||
loadImage(readerEvent.target.result);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
document.querySelector('#file_input').addEventListener('change', handleFileSelect, false);
|
||||
|
||||
function downloadURI(_uri, _name) {
|
||||
let link = document.createElement("a");
|
||||
link.download = 'distortedImageEH22.png';
|
||||
link.href = result;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
delete link;
|
||||
}
|
||||
|
||||
downloadButton.addEventListener('click', downloadURI);
|
||||
78
styleguide/generator/index.html
Normal file
78
styleguide/generator/index.html
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body style="height: 100vh;">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 1em; align-items: center">
|
||||
|
||||
<div>
|
||||
<input id="file_input" type="file" name="image" accept="image/*">
|
||||
</div>
|
||||
|
||||
<img id="source_img" src=""
|
||||
style="width: 400px; height: 300px; border: solid 4px darkblue; background-color: darkblue; object-fit: contain;" />
|
||||
<img id="result_img" src=""
|
||||
style="width: 400px; height: 300px; border: solid 4px darkgreen; background-color: darkgreen; object-fit: contain;" />
|
||||
|
||||
<div style="display: none;">
|
||||
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter id="filter0" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
||||
primitiveUnits="objectBoundingBox">
|
||||
<feColorMatrix in="SourceGraphic" type="saturate" values="0" result="bw" />
|
||||
<feColorMatrix in="bw" type="luminanceToAlpha" result="ltoa" />
|
||||
<feComponentTransfer in="ltoa" result="ltoa_inverse">
|
||||
<feFuncA type="table" tableValues="0 1" />
|
||||
</feComponentTransfer>
|
||||
|
||||
<feConvolveMatrix in="ltoa_inverse" result="pink_edges" kernelMatrix="-4 0 4 0 0 0 -4 0 4" />
|
||||
<feComponentTransfer in="pink_edges" result="pink">
|
||||
<feFuncR type="table" tableValues="0.7765 0" />
|
||||
<feFuncG type="table" tableValues="0.1451 0" />
|
||||
<feFuncB type="table" tableValues="0.4902 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="pink" result="pink_shift" dx="-0.002" />
|
||||
|
||||
<feConvolveMatrix in="ltoa_inverse" result="cyan_edges" kernelMatrix="4 0 -4 0 0 0 4 0 -4" />
|
||||
<feComponentTransfer in="cyan_edges" result="cyan">
|
||||
<feFuncR type="table" tableValues="0.2941 0" />
|
||||
<feFuncG type="table" tableValues="0.6784 0" />
|
||||
<feFuncB type="table" tableValues="0.8471 0" />
|
||||
</feComponentTransfer>
|
||||
<feOffset in="cyan" result="cyan_shift" dx="0.002" />
|
||||
|
||||
<feMerge result="pink_cyan_shift">
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
<feMergeNode in="pink_shift" />
|
||||
<feMergeNode in="cyan_shift" />
|
||||
</feMerge>
|
||||
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0 0.2" numOctaves="1" result="noise" />
|
||||
<feDisplacementMap in="pink_cyan_shift" in2="noise" result="distorted_raw" scale="0.02" />
|
||||
<feOffset in="distorted_raw" result="distorted" />
|
||||
</filter>
|
||||
|
||||
<g filter="url(#filter0)">
|
||||
<image href="" width="100%" height="100%" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button id="download" disabled>
|
||||
Download Result
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="generator.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
24
styleguide/index.html
Normal file
24
styleguide/index.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
||||
<title>Color Guide</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1>Styleguide Easterhegg 2025</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="color_guide.html">Color Guide</a></li>
|
||||
<li><a href="testpage.html">Testpage</a></li>
|
||||
<li><a href="typography.html">Typography</a></li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
157
styleguide/testpage.html
Normal file
157
styleguide/testpage.html
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
||||
<title>Testdocument</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html">Back to Overview</a>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Testdocument</h1>
|
||||
<p>Tests for Fonts and Colorpalettes</p>
|
||||
|
||||
<section>
|
||||
<h2>Section With Links</h2>
|
||||
<table>
|
||||
<caption>Overview of link highlighting</caption>
|
||||
<tr>
|
||||
<th scope="row">Regular Link:</th>
|
||||
<td><a class="a-regular" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Hover/Focus/Active Link:</th>
|
||||
<td><a class="a-hover" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Visited Link:</th>
|
||||
<td><a class="a-visited" href="https://eh22.easterhegg.eu/">https://eh22.easterhegg.eu/</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Section With Text</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
||||
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
||||
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
||||
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
|
||||
<h3>Subsection Title</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
||||
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
||||
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
||||
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
|
||||
<h4>Subsubsection Title</h4>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||
dolore magna aliquyam erat, sed diam voluptua.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Section With Code</h2>
|
||||
<pre><code>#include <stdlib.h>
|
||||
|
||||
int *positives(int *numbers, int *size) {
|
||||
int new_size = 0;
|
||||
|
||||
for (int i = 0; i < *size; i++) {
|
||||
if (numbers[i] >= 0) {
|
||||
numbers[new_size] = numbers[i];
|
||||
new_size++;
|
||||
}
|
||||
}
|
||||
|
||||
*size = new_size;
|
||||
return realloc(numbers, sizeof(*numbers) * new_size);
|
||||
}</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Section With Image</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
||||
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
||||
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
||||
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<figure>
|
||||
<img src="assets/image/cat.png"
|
||||
alt="Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues."/>
|
||||
<figcaption>Example image with some visual distortion applied.</figcaption>
|
||||
</figure>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
||||
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
||||
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
||||
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Section With Lists</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<ol>
|
||||
<li>Short item no. 1.</li>
|
||||
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
|
||||
next line and therefore moves the next item further down.
|
||||
</li>
|
||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
|
||||
but there is no next item to move.
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
||||
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
||||
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
|
||||
<h3>Subsection Title</h3>
|
||||
<ol>
|
||||
<li>Short item no. 1.</li>
|
||||
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
|
||||
next line and therefore moves the next item further down.
|
||||
</li>
|
||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
|
||||
but there is no next item to move.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h3>Subsection Title</h3>
|
||||
<ul>
|
||||
<li>Short item no. 1.</li>
|
||||
<li>Long item in the middle. This item is longer then one visual line, which is why it wraps over into the
|
||||
next line and therefore moves the next item further down.
|
||||
</li>
|
||||
<li>Long item at the end, which is also longer than one visual line. It also wraps over into the next line,
|
||||
but there is no next item to move.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
76
styleguide/typography.html
Normal file
76
styleguide/typography.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
||||
<title>Typography</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html">Back to Overview</a>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Typography</h1>
|
||||
<div class="float-left">
|
||||
<table>
|
||||
<tr>
|
||||
<th scope="row">Main Title</th>
|
||||
<td>72px</td>
|
||||
<td>Argon Glow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 1</th>
|
||||
<td>48px</td>
|
||||
<td>Tilt Neon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 2</th>
|
||||
<td>32px</td>
|
||||
<td>Tilt Neon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 3</th>
|
||||
<td>24px</td>
|
||||
<td>Tilt Neon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Heading 4</th>
|
||||
<td>18px</td>
|
||||
<td>Tilt Neon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Subheading</th>
|
||||
<td>24px</td>
|
||||
<td>Athiti</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Paragraph</th>
|
||||
<td>16px</td>
|
||||
<td>Athiti</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Code</th>
|
||||
<td>16px</td>
|
||||
<td>Departure Mono</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<ul>
|
||||
<li class="main-title">Main Title</li>
|
||||
<li class="h1">Heading 1</li>
|
||||
<li class="h2">Heading 2</li>
|
||||
<li class="h3">Heading 3</li>
|
||||
<li class="h4">Heading 4</li>
|
||||
<li class="subheading">Subheading</li>
|
||||
<li class="p">Paragraph</li>
|
||||
<li class="code">Code</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue