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
-            course use a highlighting theme to make it easier to differentiate
-            identifiers and similar. At the current state, we don't recommended
-            a specific highlight-theme, but this might still change.
+            This example uses manual syntax highlighting using the following CSS
+            classes:
           </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) {
-    int new_size = 0;
+<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>
+    <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++) {
-        if (numbers[i] &gt;= 0) {
-            numbers[new_size] = numbers[i];
-            new_size++;
-        }
-    }
+    <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>
+        <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>
+            <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>
+            <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;
-    return realloc(numbers, sizeof(*numbers) * new_size);
-}</code></pre>
+    <span class="neutral">*</span><span class="identifier">size</span> <span class="neutral">=</span> <span class="identifier">new_size</span><span class="neutral">;</span>
+    <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>
+<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>
-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