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

Update color-codes in color guide
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
lilith 2025-02-14 01:33:29 +01:00
commit 2db7e22a95
Signed by: traumweh
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
1 changed files with 160 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

49
styleguide/color_guide.html
View file

@ -9,10 +9,10 @@
</head> </head>
<body> <body>
<header> <header>
<a href="index.html">Back to Overview</a> <a href="index.html">Back to Overview</a>
</header> </header>
<main> <main>
<h1>Color Guide</h1> <h1>Color Guide</h1>
<p> <p>
@ -28,37 +28,36 @@
<div aria-labelledby="label-dark-swatch-foreground" class="swatch-container"> <div aria-labelledby="label-dark-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-foreground)"></div>
<span id="label-dark-swatch-foreground">#f5f0f0</span> <span id="label-dark-swatch-foreground">#f2f0f5</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-background" class="swatch-container"> <div aria-labelledby="label-dark-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-background)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-background)"></div>
<span id="label-dark-swatch-background">#180736</span> <span id="label-dark-swatch-background">#0c011f</span>
</div> </div>
</section> </section>
<!-- TODO: Final shades -->
<section aria-labelledby="label-dark-shades"> <section aria-labelledby="label-dark-shades">
<span id="label-dark-shades">Shades</span> <span id="label-dark-shades">Shades</span>
<div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container"> <div aria-labelledby="label-dark-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-shade-1)"></div>
<span id="label-dark-swatch-shade-1">#TODO</span> <span id="label-dark-swatch-shade-1">#56023c</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container"> <div aria-labelledby="label-dark-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-shade-2)"></div>
<span id="label-dark-swatch-shade-2">#TODO</span> <span id="label-dark-swatch-shade-2">#6d0449</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container"> <div aria-labelledby="label-dark-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-shade-3)"></div>
<span id="label-dark-swatch-shade-3">#TODO</span> <span id="label-dark-swatch-shade-3">#830755</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container"> <div aria-labelledby="label-dark-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-shade-4)"></div>
<span id="label-dark-swatch-shade-4">#TODO</span> <span id="label-dark-swatch-shade-4">#9a0a61</span>
</div> </div>
</section> </section>
@ -76,23 +75,20 @@
</div> </div>
</section> </section>
<!-- TODO: Might be too bright -->
<section aria-labelledby="label-dark-error-success"> <section aria-labelledby="label-dark-error-success">
<span id="label-dark-error-success">Error &amp; Success</span> <span id="label-dark-error-success">Error &amp; Success</span>
<div aria-labelledby="label-dark-swatch-error" class="swatch-container"> <div aria-labelledby="label-dark-swatch-error" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-error)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-error)"></div>
<span id="label-dark-swatch-error">#f22d2d</span> <span id="label-dark-swatch-error">#bb2626</span>
</div> </div>
<div aria-labelledby="label-dark-swatch-success" class="swatch-container"> <div aria-labelledby="label-dark-swatch-success" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-dark-success)"></div> <div class="swatch" style="--swatch-color: var(--color-dark-success)"></div>
<span id="label-dark-swatch-success">#8cff3c</span> <span id="label-dark-swatch-success">#54aa18</span>
</div> </div>
</section> </section>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-dark-accents"> <section aria-labelledby="label-dark-accents">
<span id="label-dark-accents">Accents</span> <span id="label-dark-accents">Accents</span>
@ -121,37 +117,36 @@
<div aria-labelledby="label-light-swatch-foreground" class="swatch-container"> <div aria-labelledby="label-light-swatch-foreground" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div> <div class="swatch" style="--swatch-color: var(--color-light-foreground)"></div>
<span id="label-light-swatch-foreground">#180736</span> <span id="label-light-swatch-foreground">#0c011f</span>
</div> </div>
<div aria-labelledby="label-light-swatch-background" class="swatch-container"> <div aria-labelledby="label-light-swatch-background" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-background)"></div> <div class="swatch" style="--swatch-color: var(--color-light-background)"></div>
<span id="label-light-swatch-background">#f5f0f0</span> <span id="label-light-swatch-background">#f2f0f5</span>
</div> </div>
</section> </section>
<!-- TODO: Final shades -->
<section aria-labelledby="label-light-shades"> <section aria-labelledby="label-light-shades">
<span id="label-light-shades">Shades</span> <span id="label-light-shades">Shades</span>
<div aria-labelledby="label-light-swatch-shade-1" class="swatch-container"> <div aria-labelledby="label-light-swatch-shade-1" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div> <div class="swatch" style="--swatch-color: var(--color-light-shade-1)"></div>
<span id="label-light-swatch-shade-1">#TODO</span> <span id="label-light-swatch-shade-1">#d1c6e0</span>
</div> </div>
<div aria-labelledby="label-light-swatch-shade-2" class="swatch-container"> <div aria-labelledby="label-light-swatch-shade-2" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div> <div class="swatch" style="--swatch-color: var(--color-light-shade-2)"></div>
<span id="label-light-swatch-shade-2">#TODO</span> <span id="label-light-swatch-shade-2">#b2a0cb</span>
</div> </div>
<div aria-labelledby="label-light-swatch-shade-3" class="swatch-container"> <div aria-labelledby="label-light-swatch-shade-3" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div> <div class="swatch" style="--swatch-color: var(--color-light-shade-3)"></div>
<span id="label-light-swatch-shade-3">#TODO</span> <span id="label-light-swatch-shade-3">#957eb5</span>
</div> </div>
<div aria-labelledby="label-light-swatch-shade-4" class="swatch-container"> <div aria-labelledby="label-light-swatch-shade-4" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div> <div class="swatch" style="--swatch-color: var(--color-light-shade-4)"></div>
<span id="label-light-swatch-shade-4">#TODO</span> <span id="label-light-swatch-shade-4">#7a60a0</span>
</div> </div>
</section> </section>
@ -160,12 +155,12 @@
<div aria-labelledby="label-light-swatch-primary" class="swatch-container"> <div aria-labelledby="label-light-swatch-primary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-primary)"></div> <div class="swatch" style="--swatch-color: var(--color-light-primary)"></div>
<span id="label-light-swatch-primary">#TODO</span> <span id="label-light-swatch-primary">#9a0a61</span>
</div> </div>
<div aria-labelledby="label-light-swatch-secondary" class="swatch-container"> <div aria-labelledby="label-light-swatch-secondary" class="swatch-container">
<div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div> <div class="swatch" style="--swatch-color: var(--color-light-secondary)"></div>
<span id="label-light-swatch-secondary">#TODO</span> <span id="label-light-swatch-secondary">#167fac</span>
</div> </div>
</section> </section>
@ -183,8 +178,6 @@
</div> </div>
</section> </section>
<!-- TODO: Color names -->
<!-- TODO: Secondary as first accent? -->
<section aria-labelledby="label-light-accents"> <section aria-labelledby="label-light-accents">
<span id="label-light-accents">Accents</span> <span id="label-light-accents">Accents</span>
@ -208,7 +201,7 @@
<h2>Printing</h2> <h2>Printing</h2>
<p> <p>
Our primary and secondary colours are also defined for CMYK printing: Our primary and secondary colors are also defined for CMYK printing:
</p> </p>
<div class="swatch-grid"> <div class="swatch-grid">
@ -226,7 +219,7 @@
</div> </div>
</section> </section>
</div> </div>
</main> </main>
</body> </body>
</html> </html>