From bde3df7d0ed9b032f4ee2c6f70e047e9abc0ddb5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 27 Nov 2024 01:45:00 +0200
Subject: [PATCH 1/2] feat(UI): add fallback when css masking is not supported

---
 src/livecodes/styles/app.scss                    |  3 +++
 .../styles/{inc-icons.css => inc-icons.scss}     | 16 ++++++++++++++++
 src/livecodes/styles/inc-light.scss              |  3 +++
 3 files changed, 22 insertions(+)
 rename src/livecodes/styles/{inc-icons.css => inc-icons.scss} (98%)

diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 035be0e57..8447bbd86 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -217,6 +217,9 @@
   --text-success-bg-color: rgba(85, 255, 0, 0.25);
   --text-success-border: 1px solid rgb(85, 255, 0);
   --text-success-color: rgb(153, 255, 102);
+
+  --icon-filter: invert(0.8);
+  --icon-filter-active: invert(1);
 }
 
 @import 'inc-light';
diff --git a/src/livecodes/styles/inc-icons.css b/src/livecodes/styles/inc-icons.scss
similarity index 98%
rename from src/livecodes/styles/inc-icons.css
rename to src/livecodes/styles/inc-icons.scss
index e2a29dd00..aa966eab4 100644
--- a/src/livecodes/styles/inc-icons.css
+++ b/src/livecodes/styles/inc-icons.scss
@@ -10,6 +10,22 @@
   width: 1em;
 }
 
+@supports not (mask-image: var(--svg)) {
+  [class^='icon-'] {
+    background-color: transparent;
+    background-image: var(--svg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    filter: var(--icon-filter);
+  }
+
+  a:hover [class^='icon-'],
+  button:hover [class^='icon-'],
+  [class^='icon-']:hover {
+    filter: var(--icon-filter-active);
+  }
+}
+
 .icon-add {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z'/%3E%3C/svg%3E");
 }
diff --git a/src/livecodes/styles/inc-light.scss b/src/livecodes/styles/inc-light.scss
index 3371a9988..b2051f194 100644
--- a/src/livecodes/styles/inc-light.scss
+++ b/src/livecodes/styles/inc-light.scss
@@ -72,6 +72,9 @@
   --text-success-border: 1px solid rgb(0, 128, 0);
   --text-success-color: rgb(0, 178, 0);
 
+  --icon-filter: invert(0.3);
+  --icon-filter-active: invert(1);
+
   #logo img {
     filter: drop-shadow(1px 1px 1px var(--color50));
   }

From 823c3425341777d5eeca24e1518fd5687a95a858 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 27 Nov 2024 02:09:17 +0200
Subject: [PATCH 2/2] undo change file extension

---
 src/livecodes/styles/{inc-icons.scss => inc-icons.css} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/livecodes/styles/{inc-icons.scss => inc-icons.css} (100%)

diff --git a/src/livecodes/styles/inc-icons.scss b/src/livecodes/styles/inc-icons.css
similarity index 100%
rename from src/livecodes/styles/inc-icons.scss
rename to src/livecodes/styles/inc-icons.css