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

Add syntax-highlighting

Browse source
This commit is contained in:
lilith 2025-03-04 22:13:25 +01:00
commit 8d4b51f99e
Signed by: lilith
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
5 changed files with 196 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

126
styleguide/glow/index.html
View file

@ -138,47 +138,44 @@
<li>
For CSS filters one can simply use the following set of three
shadows layered atop each other:
<pre>
filter:
drop-shadow(0 0 0.03125em var(--color-white))
drop-shadow(0 0 0.0625em var(--color-primary))
drop-shadow(0 0 0.125em var(--color-primary));</pre
>
<pre><code><span class="keyword">filter</span><span class="neutral">:</span>
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.03125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-white</span><span class="neutral">))</span>
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.0625</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-primary</span><span class="neutral">))</span>
<span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-primary</span><span class="neutral">));</span></code></pre>
</li>
<li>
For SVG filters instead use the following two filters:
<pre>
&lt;filter x="-150%" y="-150%" width="400%" height="400%"
style="color-interpolation-filters:sRGB;" id="textBlurPrimary"&gt;
&lt;feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
style="flood-color: var(--color-white);" result="drop_shadow_0" /&gt;
&lt;feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="32.5"
style="flood-color: var(--color-primary);" result="drop_shadow_1" /&gt;
&lt;feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="65"
style="flood-color: var(--color-primary);" result="drop_shadow_2" /&gt;
&lt;/filter&gt;
<pre><code>
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"32.5"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"drop_shadow_1"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"65"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_2"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/filter&gt;</span>
&lt;filter x="-150%" y="-150%" width="400%" height="400%"
style="color-interpolation-filters:sRGB;" id="textInsetPrimary"&gt;
&lt;feFlood style="flood-color: var(--color-white);" result="flood-white"
/&gt;
&lt;feFlood style="flood-color: var(--color-primary);"
result="flood-glow-color" /&gt;
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"400%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-white);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-white"</span>
<span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="neutral">/&gt;</span>
&lt;feComposite in="flood-glow-color" in2="SourceAlpha" operator="in"
result="flooded" /&gt;
&lt;feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
result="inset_drop_shadow" /&gt;
&lt;feComposite in="flood-white" in2="inset_drop_shadow" operator="in"
result="inset_drop_shadow_white" /&gt;
&lt;feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in"
result="inset_shadow" /&gt;
&lt;feMerge result="final"&gt;
&lt;feMergeNode in="flooded" /&gt;
&lt;feMergeNode in="inset_shadow" /&gt;
&lt;/feMerge&gt;
&lt;/filter&gt;</pre
>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-glow-color"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"8.125"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood-white"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_white"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_white"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"final"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;/filter&gt;</span></code></pre>
We use two separate filters here, because when combining shadows
with the primary and the secondary color as can be seen in the logo,
it is necessary to first add all drop-shadows to all paths using
@ -212,41 +209,38 @@ filter:
<ul>
<li>
For CSS filters one can simply use the following properties:
<pre>
filter: drop-shadow(0 0 0.03125em var(--color-argon-950));
color: var(--color-argon-800);</pre
>
<pre><code><span class="keyword">filter</span><span class="neutral">:</span> <span class="function">drop-shadow</span><span class="neutral">(</span><span class="number">0</span> <span class="number">0</span> <span class="number">0.03125</span><span class="keyword">em</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-argon-950</span><span class="neutral">));</span>
<span class="keyword">color</span><span class="neutral">:</span> <span class="function">var</span><span class="neutral">(</span><span class="identifier">--color-argon-800</span><span class="neutral">);</span></code></pre>
</li>
<li>
For SVG filters instead use the following two filters:
<pre>
&lt;filter x="-25%" y="-150%" width="150%" height="400%"
style="color-interpolation-filters:sRGB;" id="textBlurPrimary"&gt;
&lt;feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
style="flood-color: var(--color-argon-950);" result="drop_shadow_0" /&gt;
&lt;/filter&gt;
<pre><code>
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textBlurPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feDropShadow</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceGraphic"</span> <span class="identifier">dx</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">dy</span><span class="neutral">=</span><span class="string">"0"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"16.25"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-950);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"drop_shadow_0"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/filter&gt;</span>
&lt;filter x="-25%" y="-150%" width="150%" height="400%"
style="color-interpolation-filters:sRGB;" id="textInsetPrimary"&gt;
&lt;feFlood style="flood-color: var(--color-primary);" result="flood_brighter"
/&gt;
&lt;feFlood style="flood-color: var(--color-argon-800);"
result="flood_darker" /&gt;
<span class="neutral">&lt;filter</span> <span class="identifier">x</span><span class="neutral">=</span><span class="string">"-25%"</span> <span class="identifier">y</span><span class="neutral">=</span><span class="string">"-150%"</span> <span class="identifier">width</span><span class="neutral">=</span><span class="string">"150%"</span> <span class="identifier">height</span><span class="neutral">=</span><span class="string">"400%"</span>
<span class="identifier">style</span><span class="neutral">=</span><span class="string">"color-interpolation-filters:sRGB;"</span> <span class="identifier">id</span><span class="neutral">=</span><span class="string">"textInsetPrimary"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_brighter"</span>
<span class="neutral">/&gt;</span>
<span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-argon-800);"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="neutral">/&gt;</span>
&lt;feComposite in="flood_darker" in2="SourceAlpha" operator="in"
result="flooded" /&gt;
&lt;feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
result="inset_drop_shadow" /&gt;
&lt;feComposite in="flood_brighter" in2="inset_drop_shadow" operator="in"
result="inset_drop_shadow_brighter" /&gt;
&lt;feComposite in="inset_drop_shadow_brighter" in2="SourceAlpha" operator="in"
result="inset_shadow" /&gt;
&lt;feMerge result="final"&gt;
&lt;feMergeNode in="flooded" /&gt;
&lt;feMergeNode in="inset_shadow" /&gt;
&lt;/feMerge&gt;
&lt;/filter&gt;</pre
>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_darker"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feGaussianBlur</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">stdDeviation</span><span class="neutral">=</span><span class="string">"8.125"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flood_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feComposite</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="identifier">in2</span><span class="neutral">=</span><span class="string">"SourceAlpha"</span> <span class="identifier">operator</span><span class="neutral">=</span><span class="string">"in"</span>
<span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMerge</span> <span class="identifier">result</span><span class="neutral">=</span><span class="string">"final"</span><span class="neutral">&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;feMergeNode</span> <span class="identifier">in</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
<span class="neutral">&lt;/feMerge&gt;</span>
<span class="neutral">&lt;/filter&gt;</span></code></pre>
We use two separate filters here, because when combining shadows
with the primary and the secondary color as can be seen in the logo,
it is necessary to first add all drop-shadows to all paths using