Add syntax-highlighting

styleguide/assets/style/base.scss

@@ -137,6 +137,10 @@ $mobile-navigation-height: 4rem;
   --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-text-1: var(--color-dark-text-1);
+  --color-text-2: var(--color-dark-text-2);
+  --color-text-3: var(--color-dark-text-3);
+  --color-text-4: var(--color-dark-text-4);
   --color-primary: var(--color-dark-primary);
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
@@ -179,6 +183,10 @@ $mobile-navigation-height: 4rem;
   --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-text-1: var(--color-light-text-1);
+  --color-text-2: var(--color-light-text-2);
+  --color-text-3: var(--color-light-text-3);
+  --color-text-4: var(--color-light-text-4);
   --color-primary: var(--color-light-primary);
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
@@ -402,10 +410,11 @@ pre {
   display: block;
   padding: 1rem;
   border-radius: 1rem;
-  background-color: var(--color-shade-1);
+  border: solid 0.3em var(--color-shade-2);
 
   code {
     background-color: initial;
+    border: initial;
     border-radius: initial;
     padding: initial;
     font-size: inherit;
@@ -416,11 +425,46 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  background-color: var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-2);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }
 
+pre span,
+code span,
+.code span {
+  &.comment {
+    color: var(--color-text-4);
+    font-style: italic;
+  }
+
+  &.neutral {
+    color: var(--color-text-2);
+  }
+
+  &.identifier {
+    color: var(--color-primary);
+  }
+
+  &.function {
+    color: var(--color-accent-1);
+    font-style: italic;
+  }
+
+  &.keyword {
+    color: var(--color-accent-2);
+  }
+
+  &.number {
+    color: var(--color-accent-3);
+  }
+
+  &.string {
+    color: var(--color-accent-3);
+    font-style: italic;
+  }
+}
+
 table {
   width: fit-content;
   border-collapse: collapse;

styleguide/assets/style/styleguide.css

@@ -122,6 +122,10 @@
   --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-text-1: var(--color-dark-text-1);
+  --color-text-2: var(--color-dark-text-2);
+  --color-text-3: var(--color-dark-text-3);
+  --color-text-4: var(--color-dark-text-4);
   --color-primary: var(--color-dark-primary);
   --color-secondary: var(--color-dark-secondary);
   --color-error: var(--color-dark-error);
@@ -160,6 +164,10 @@
   --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-text-1: var(--color-light-text-1);
+  --color-text-2: var(--color-light-text-2);
+  --color-text-3: var(--color-light-text-3);
+  --color-text-4: var(--color-light-text-4);
   --color-primary: var(--color-light-primary);
   --color-secondary: var(--color-light-secondary);
   --color-error: var(--color-light-error);
@@ -191,6 +199,10 @@
     --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-text-1: var(--color-dark-text-1);
+    --color-text-2: var(--color-dark-text-2);
+    --color-text-3: var(--color-dark-text-3);
+    --color-text-4: var(--color-dark-text-4);
     --color-primary: var(--color-dark-primary);
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
@@ -228,6 +240,10 @@
     --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-text-1: var(--color-light-text-1);
+    --color-text-2: var(--color-light-text-2);
+    --color-text-3: var(--color-light-text-3);
+    --color-text-4: var(--color-light-text-4);
     --color-primary: var(--color-light-primary);
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
@@ -263,6 +279,10 @@
     --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-text-1: var(--color-light-text-1);
+    --color-text-2: var(--color-light-text-2);
+    --color-text-3: var(--color-light-text-3);
+    --color-text-4: var(--color-light-text-4);
     --color-primary: var(--color-light-primary);
     --color-secondary: var(--color-light-secondary);
     --color-error: var(--color-light-error);
@@ -292,6 +312,10 @@
     --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-text-1: var(--color-dark-text-1);
+    --color-text-2: var(--color-dark-text-2);
+    --color-text-3: var(--color-dark-text-3);
+    --color-text-4: var(--color-dark-text-4);
     --color-primary: var(--color-dark-primary);
     --color-secondary: var(--color-dark-secondary);
     --color-error: var(--color-dark-error);
@@ -470,10 +494,11 @@ pre {
   display: block;
   padding: 1rem;
   border-radius: 1rem;
-  background-color: var(--color-shade-1);
+  border: solid 0.3em var(--color-shade-2);
 }
 pre code {
   background-color: initial;
+  border: initial;
   border-radius: initial;
   padding: initial;
   font-size: inherit;
@@ -483,11 +508,50 @@ code,
 .code {
   font-family: "Departure Mono", ui-monospace, monospace;
   font-size: 0.8em;
-  background-color: var(--color-shade-2);
+  border: solid 0.15em var(--color-shade-2);
   border-radius: 0.2em;
   padding: 0 0.2em;
 }
 
+pre span.comment,
+code span.comment,
+.code span.comment {
+  color: var(--color-text-4);
+  font-style: italic;
+}
+pre span.neutral,
+code span.neutral,
+.code span.neutral {
+  color: var(--color-text-2);
+}
+pre span.identifier,
+code span.identifier,
+.code span.identifier {
+  color: var(--color-primary);
+}
+pre span.function,
+code span.function,
+.code span.function {
+  color: var(--color-accent-1);
+  font-style: italic;
+}
+pre span.keyword,
+code span.keyword,
+.code span.keyword {
+  color: var(--color-accent-2);
+}
+pre span.number,
+code span.number,
+.code span.number {
+  color: var(--color-accent-3);
+}
+pre span.string,
+code span.string,
+.code span.string {
+  color: var(--color-accent-3);
+  font-style: italic;
+}
+
 table {
   width: fit-content;
   border-collapse: collapse;

styleguide/demopage/index.html

@@ -181,30 +181,36 @@
 
         <section>
           <h2>Preformatted Text</h2>
-          <!-- TODO: custom highlighting theme -->
           <p>
-            This example doesn't use any syntax highlighting, but one can of
+            This example uses manual syntax highlighting using the following CSS
-            course use a highlighting theme to make it easier to differentiate
+            classes:
-            identifiers and similar. At the current state, we don't recommended
-            a specific highlight-theme, but this might still change.
           </p>
+          <ul>
+            <li><code>neutral</code></li>
+            <li><code>identifier</code></li>
+            <li><code>number</code></li>
+            <li><code>string</code></li>
+            <li><code>comment</code></li>
+            <li><code>keyword</code></li>
+            <li><code>function</code></li>
+          </ul>
           <pre
             aria-labelledby="code-positives-description"
-          ><code>#include &lt;stdlib.h&gt;
+          ><code><span class="keyword">#include</span> <span class="string">&lt;stdlib.h&gt;</span>
 
-int *positives(int *numbers, int *size) {
+<span class="keyword">int</span> <span class="neutral">*</span><span class="identifier">positives</span><span class="neutral">(int</span> <span class="neutral">*</span><span class="identifier">numbers</span><span class="neutral">,</span> <span class="keyword">int</span> <span class="neutral">*</span><span class="identifier">size</span><span class="neutral">) {</span>
-    int new_size = 0;
+    <span class="keyword">int</span> <span class="identifier">new_size</span> <span class="neutral">=</span> <span class="number">0</span><span class="neutral">;</span>
 
-    for (int i = 0; i &lt; *size; i++) {
+    <span class="keyword">for</span> <span class="neutral">(</span><span class="keyword">int</span> <span class="identifier">i</span> <span class="neutral">=</span> <span class="number">0</span><span class="neutral">;</span> <span class="identifier">i</span> <span class="neutral">&lt;</span> <span class="neutral">*</span><span class="identifier">size</span><span class="neutral">;</span> <span class="identifier">i</span><span class="neutral">++) {</span>
-        if (numbers[i] &gt;= 0) {
+        <span class="keyword">if</span> <span class="neutral">(</span><span class="identifier">numbers</span><span class="neutral">[</span><span class="identifier">i</span><span class="neutral">]</span> <span class="neutral">&gt;=</span> <span class="number">0</span><span class="neutral">) {</span>
-            numbers[new_size] = numbers[i];
+            <span class="identifier">numbers</span><span class="neutral">[</span><span class="identifier">new_size</span><span class="neutral">]</span> <span class="neutral">=</span> <span class="identifier">numbers</span><span class="neutral">[</span><span class="identifier">i</span><span class="neutral">]</span><span class="neutral">;</span>
-            new_size++;
+            <span class="identifier">new_size</span><span class="neutral">++</span><span class="neutral">;</span>
-        }
+        <span class="neutral">}</span>
-    }
+    <span class="neutral">}</span>
 
-    *size = new_size;
+    <span class="neutral">*</span><span class="identifier">size</span> <span class="neutral">=</span> <span class="identifier">new_size</span><span class="neutral">;</span>
-    return realloc(numbers, sizeof(*numbers) * new_size);
+    <span class="keyword">return</span> <span class="function">realloc</span><span class="neutral">(</span><span class="identifier">numbers</span><span class="neutral">,</span> <span class="function">sizeof</span><span class="neutral">(*</span><span class="identifier">numbers</span><span class="neutral">)</span> <span class="neutral">*</span> <span class="identifier">new_size</span><span class="neutral">);</span>
-}</code></pre>
+<span class="neutral">}</span></code></pre>
           <p>
             This is a simple function written in C, which removes all negative
             integers from an array and updates its element count.

styleguide/glow/index.html

@@ -138,47 +138,44 @@
           <li>
             For CSS filters one can simply use the following set of three
             shadows layered atop each other:
-            <pre>
+            <pre><code><span class="keyword">filter</span><span class="neutral">:</span>
-filter:
+  <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>
-  drop-shadow(0 0 0.03125em var(--color-white))
+  <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>
-  drop-shadow(0 0 0.0625em var(--color-primary))
+  <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>
-  drop-shadow(0 0 0.125em var(--color-primary));</pre
-            >
           </li>
           <li>
             For SVG filters instead use the following two filters:
-            <pre>
+            <pre><code>
-&lt;filter x="-150%" y="-150%" width="400%" height="400%"
+<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>
-   style="color-interpolation-filters:sRGB;" id="textBlurPrimary"&gt;
+   <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>
-  &lt;feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
+  <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>
-     style="flood-color: var(--color-white);" result="drop_shadow_0" /&gt;
+     <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>
-  &lt;feDropShadow in="drop_shadow_0" dx="0" dy="0" stdDeviation="32.5"
+  <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>
-     style="flood-color: var(--color-primary);" result="drop_shadow_1" /&gt;
+     <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>
-  &lt;feDropShadow in="drop_shadow_1" dx="0" dy="0" stdDeviation="65"
+  <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>
-     style="flood-color: var(--color-primary);" result="drop_shadow_2" /&gt;
+     <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>
-&lt;/filter&gt;
+<span class="neutral">&lt;/filter&gt;</span>
 
-&lt;filter x="-150%" y="-150%" width="400%" height="400%"
+<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>
-   style="color-interpolation-filters:sRGB;" id="textInsetPrimary"&gt;
+   <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>
-  &lt;feFlood style="flood-color: var(--color-white);" result="flood-white"
+  <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>
-     /&gt;
+     <span class="neutral">/&gt;</span>
-  &lt;feFlood style="flood-color: var(--color-primary);"
+  <span class="neutral">&lt;feFlood</span> <span class="identifier">style</span><span class="neutral">=</span><span class="string">"flood-color: var(--color-primary);"</span>
-     result="flood-glow-color" /&gt;
+     <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"
+  <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>
-     result="flooded" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
-  &lt;feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
+  <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>
-     result="inset_drop_shadow" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/&gt;</span>
-  &lt;feComposite in="flood-white" in2="inset_drop_shadow" operator="in"
+  <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>
-     result="inset_drop_shadow_white" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_white"</span> <span class="neutral">/&gt;</span>
-  &lt;feComposite in="inset_drop_shadow_white" in2="SourceAlpha" operator="in"
+  <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>
-     result="inset_shadow" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
-  &lt;feMerge result="final"&gt;
+  <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>
-    &lt;feMergeNode in="flooded" /&gt;
+    <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>
-    &lt;feMergeNode in="inset_shadow" /&gt;
+    <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>
-  &lt;/feMerge&gt;
+  <span class="neutral">&lt;/feMerge&gt;</span>
-&lt;/filter&gt;</pre
+<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>
+            <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>
-filter: drop-shadow(0 0 0.03125em var(--color-argon-950));
+<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>
-color: var(--color-argon-800);</pre
-            >
           </li>
           <li>
             For SVG filters instead use the following two filters:
-            <pre>
+            <pre><code>
-&lt;filter x="-25%" y="-150%" width="150%" height="400%"
+<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>
-   style="color-interpolation-filters:sRGB;" id="textBlurPrimary"&gt;
+   <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>
-  &lt;feDropShadow in="SourceGraphic" dx="0" dy="0" stdDeviation="16.25"
+  <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>
-     style="flood-color: var(--color-argon-950);" result="drop_shadow_0" /&gt;
+     <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>
-&lt;/filter&gt;
+<span class="neutral">&lt;/filter&gt;</span>
 
-&lt;filter x="-25%" y="-150%" width="150%" height="400%"
+<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>
-   style="color-interpolation-filters:sRGB;" id="textInsetPrimary"&gt;
+   <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>
-  &lt;feFlood style="flood-color: var(--color-primary);" result="flood_brighter"
+  <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>
-     /&gt;
+     <span class="neutral">/&gt;</span>
-  &lt;feFlood style="flood-color: var(--color-argon-800);"
+  <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>
-     result="flood_darker" /&gt;
+     <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"
+  <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>
-     result="flooded" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"flooded"</span> <span class="neutral">/&gt;</span>
-  &lt;feGaussianBlur in="SourceAlpha" stdDeviation="8.125"
+  <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>
-     result="inset_drop_shadow" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow"</span> <span class="neutral">/&gt;</span>
-  &lt;feComposite in="flood_brighter" in2="inset_drop_shadow" operator="in"
+  <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>
-     result="inset_drop_shadow_brighter" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_drop_shadow_brighter"</span> <span class="neutral">/&gt;</span>
-  &lt;feComposite in="inset_drop_shadow_brighter" in2="SourceAlpha" operator="in"
+  <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>
-     result="inset_shadow" /&gt;
+     <span class="identifier">result</span><span class="neutral">=</span><span class="string">"inset_shadow"</span> <span class="neutral">/&gt;</span>
-  &lt;feMerge result="final"&gt;
+  <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>
-    &lt;feMergeNode in="flooded" /&gt;
+    <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>
-    &lt;feMergeNode in="inset_shadow" /&gt;
+    <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>
-  &lt;/feMerge&gt;
+  <span class="neutral">&lt;/feMerge&gt;</span>
-&lt;/filter&gt;</pre
+<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