From 6ee2e492b055298ff9171017f396ff50981b3391 Mon Sep 17 00:00:00 2001
From: Eric McCarthy <eric@limulus.net>
Date: Fri, 29 Nov 2024 13:04:09 -0700
Subject: [PATCH] feat: p3 colors for ldn logo

---
 www/_includes/layouts/base.webc               |  2 +-
 .../{ldn.561214f5.svg => ldn.dcaedd8b.svg}    | 50 ++++++++++++++++++-
 www/assets/svg/lib/ldn.svg                    |  2 +-
 3 files changed, 51 insertions(+), 3 deletions(-)
 rename www/assets/svg/{ldn.561214f5.svg => ldn.dcaedd8b.svg} (56%)

diff --git a/www/_includes/layouts/base.webc b/www/_includes/layouts/base.webc
index 3062368..144db84 100644
--- a/www/_includes/layouts/base.webc
+++ b/www/_includes/layouts/base.webc
@@ -13,7 +13,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <link rel="icon" href="/assets/svg/ldn.561214f5.svg" type="image/svg+xml" />
+    <link rel="icon" href="/assets/svg/ldn.dcaedd8b.svg" type="image/svg+xml" />
 
     <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
     <link rel="stylesheet" href="../css/normalize.css" />
diff --git a/www/assets/svg/ldn.561214f5.svg b/www/assets/svg/ldn.dcaedd8b.svg
similarity index 56%
rename from www/assets/svg/ldn.561214f5.svg
rename to www/assets/svg/ldn.dcaedd8b.svg
index 862418a..2b70a41 100644
--- a/www/assets/svg/ldn.561214f5.svg
+++ b/www/assets/svg/ldn.dcaedd8b.svg
@@ -6,6 +6,27 @@
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
 >
+  <style>
+    /* Work around svgsprite removing logo-p3 */
+    @supports not (color: oklch(0% 0 0)) {
+      g#logo-p3 {
+        display: none;
+      }
+    }
+
+    @supports (color: oklch(0% 0 0)) {
+      @media (color-gamut: p3) {
+        g#logo-srgb {
+          display: none;
+        }
+
+        g#logo-p3 {
+          display: block;
+        }
+      }
+    }
+  </style>
+
   <defs>
     <mask id="dot-mask">
       <rect x="0" y="0" width="2800" height="2800" fill="white" />
@@ -39,6 +60,7 @@
       </g>
     </mask>
 
+    <!-- sRGB Gradients -->
     <linearGradient id="tl-br" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" stop-color="#ffffff" />
       <stop offset="100%" stop-color="white" stop-opacity="0" />
@@ -55,13 +77,39 @@
       <stop offset="0%" stop-color="#ff00e1" />
       <stop offset="100%" stop-color="#ff00e1" stop-opacity="0" />
     </linearGradient>
+
+    <!-- P3 Gradients -->
+    <linearGradient id="tl-br-p3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="oklch(100% 0 0)" />
+      <stop offset="100%" stop-color="oklch(100% 0 0 / 0%)" />
+    </linearGradient>
+    <linearGradient id="tr-bl-p3" x1="100%" y1="0%" x2="0%" y2="0%">
+      <stop offset="0%" stop-color="oklch(85.61% 0.2015 167.18)" />
+      <stop offset="100%" stop-color="oklch(85.61% 0.2015 167.18 / 0%)" />
+    </linearGradient>
+    <linearGradient id="br-tl-p3" x1="100%" y1="100%" x2="0%" y2="0%">
+      <stop offset="0%" stop-color="oklch(47.03% 0.3106 265.65)" />
+      <stop offset="100%" stop-color="oklch(47.03% 0.3106 265.65 / 0%)" />
+    </linearGradient>
+    <linearGradient id="bl-tr-p3" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="oklch(68.5% 0.3343 335.14)" />
+      <stop offset="100%" stop-color="oklch(68.5% 0.3343 335.14 / 0%)" />
+    </linearGradient>
   </defs>
 
-  <g id="gradient" mask="url(#ldn-mask)">
+  <g id="logo-srgb" mask="url(#ldn-mask)">
     <rect x="0" y="0" width="2800" height="2800" fill="black" />
     <rect x="0" y="0" width="2800" height="2800" fill="url(#tl-br)" />
     <rect x="0" y="0" width="2800" height="2800" fill="url(#tr-bl)" />
     <rect x="0" y="0" width="2800" height="2800" fill="url(#br-tl)" />
     <rect x="0" y="0" width="2800" height="2800" fill="url(#bl-tr)" />
   </g>
+
+  <g id="logo-p3" mask="url(#ldn-mask)">
+    <rect x="0" y="0" width="2800" height="2800" fill="black" />
+    <rect x="0" y="0" width="2800" height="2800" fill="url(#tl-br-p3)" />
+    <rect x="0" y="0" width="2800" height="2800" fill="url(#tr-bl-p3)" />
+    <rect x="0" y="0" width="2800" height="2800" fill="url(#br-tl-p3)" />
+    <rect x="0" y="0" width="2800" height="2800" fill="url(#bl-tr-p3)" />
+  </g>
 </svg>
diff --git a/www/assets/svg/lib/ldn.svg b/www/assets/svg/lib/ldn.svg
index 848d1aa..29046f9 120000
--- a/www/assets/svg/lib/ldn.svg
+++ b/www/assets/svg/lib/ldn.svg
@@ -1 +1 @@
-../ldn.561214f5.svg
\ No newline at end of file
+../ldn.dcaedd8b.svg
\ No newline at end of file