From 59c2a2910171e1935b7cf7260976956ce6b1b1f5 Mon Sep 17 00:00:00 2001
From: GreenB0t <58006778+GreenB0t@users.noreply.github.com>
Date: Sat, 20 Jun 2026 12:26:10 +0100
Subject: [PATCH 1/6] 2 gradient themes, Midnight Fairy & Neon City, and 1
 related Tweak

---
 themes/midnight-fairy.preview.sable.css |  20 ++++
 themes/midnight-fairy.sable.css         | 124 +++++++++++++++++++++
 themes/neon-city.preview.sable.css      |  20 ++++
 themes/neon-city.sable.css              | 140 ++++++++++++++++++++++++
 tweaks/solid-colors.sable.css           |  27 +++++
 5 files changed, 331 insertions(+)
 create mode 100644 themes/midnight-fairy.preview.sable.css
 create mode 100644 themes/midnight-fairy.sable.css
 create mode 100644 themes/neon-city.preview.sable.css
 create mode 100644 themes/neon-city.sable.css
 create mode 100644 tweaks/solid-colors.sable.css

diff --git a/themes/midnight-fairy.preview.sable.css b/themes/midnight-fairy.preview.sable.css
new file mode 100644
index 0000000..ec013ab
--- /dev/null
+++ b/themes/midnight-fairy.preview.sable.css
@@ -0,0 +1,20 @@
+/*
+@sable-theme
+id: midnight-fairy
+name: Midnight Fairy
+author: userspring
+kind: dark
+contrast: low
+tags: gradient, purple, violet blue, two-tone
+fullThemeUrl: https://raw.githubusercontent.com/GreenB0t/Gachiakuta/refs/heads/master/midnight-fairy.preview.sable.css
+*/
+
+.sable-theme-preview {
+  --sable-bg-container: linear-gradient(to left, hsl(250, 40%, 28%), hsl(225, 40%, 25%));
+  --sable-bg-on-container: hsl(345, 30%, 88%);
+  --sable-surface-container: hsl(230, 35%, 33%);
+  --sable-surface-container-line: hsl(270, 25%, 30.94%);
+  --sable-surface-on-container: hsl(345, 25%, 92%);
+  --sable-primary-main: hsl(270, 25%, 34%);
+  --sable-primary-on-main: hsl(270, 12.5%, 85%);
+}
\ No newline at end of file
diff --git a/themes/midnight-fairy.sable.css b/themes/midnight-fairy.sable.css
new file mode 100644
index 0000000..1e840d3
--- /dev/null
+++ b/themes/midnight-fairy.sable.css
@@ -0,0 +1,124 @@
+/*
+@sable-theme
+id: midnight-fairy
+name: Midnight Fairy
+author: userspring
+kind: dark
+contrast: low
+tags: gradient, purple, violet blue, two-tone
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/midnight-fairy.sable.css
+*/
+
+/* Comment: Keep --sides-grad for the "Solid Colors" tweak to work */
+
+  /* Center Box Gradient */
+body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] {
+  --center-grad: radial-gradient(ellipse at right, hsl(250, 40%, 28%) 20%, hsl(210, 40%, 20%)) fixed;
+  background: var(--center-grad);
+}
+
+body.sable-remote-theme {
+
+  /* Side Panels Gradient */
+  --sides-grad: radial-gradient(ellipse at right, hsl(300, 100%, 30%), hsl(0, 0%, 0%)) fixed;
+  background: var(--sides-grad);
+
+  /* Background */
+  --sable-bg-container: hsla(270, 25%, 20.4%, 0.7); /*!*/
+  --sable-bg-container-hover: hsl(270, 25%, 22.44%);
+  --sable-bg-container-active: hsl(270, 25%, 24.48%);
+  --sable-bg-container-line: hsl(270, 25%, 26.52%);
+  --sable-bg-on-container: hsl(345, 30%, 88%);
+
+  /* Surface */
+  --sable-surface-container: hsl(230, 35%, 33%);
+  --sable-surface-container-hover: hsl(250, 25%, 30.18%);
+  --sable-surface-container-active: hsl(270, 25%, 28.56%);
+  --sable-surface-container-line: hsl(270, 25%, 30.94%);
+  --sable-surface-on-container: hsl(345, 25%, 92%);
+
+  /* Surface Variant */
+  --sable-surface-var-container: hsl(230, 40%, 30%);
+  --sable-surface-var-container-hover: hsl(270, 30%, 18.7%);
+  --sable-surface-var-container-active: hsl(270, 30%, 20.4%);
+  --sable-surface-var-container-line: hsl(270, 30%, 35%);
+  --sable-surface-var-on-container: hsl(270, 40%, 90%);
+
+  /* Primary */
+  --sable-primary-main: hsl(270, 25%, 34%);
+  --sable-primary-main-hover: hsl(270, 25%, 37.4%);
+  --sable-primary-main-active: hsl(270, 25%, 40.8%);
+  --sable-primary-main-line: hsl(270, 25%, 44.2%);
+  --sable-primary-on-main: hsl(270, 12.5%, 85%);
+  --sable-primary-container: hsl(270, 22%, 58%);
+  --sable-primary-container-hover: hsl(250, 25%, 40.18%);
+  --sable-primary-container-active: hsl(270, 20%, 53.04%);
+  --sable-primary-container-line: hsl(270, 20%, 57.46%);
+  --sable-primary-on-container: hsl(345, 25%, 92%);
+
+  /* Secondary */
+  --sable-sec-main: hsl(230, 32%, 65%);
+  --sable-sec-main-hover: hsl(230, 50%, 88%);
+  --sable-sec-main-active: hsl(230, 50%, 96%);
+  --sable-sec-main-line: hsl(230, 50%, 100%);
+  --sable-sec-on-main: hsl(230, 50%, 24%);
+  --sable-sec-container: hsl(230, 35%, 50%);
+  --sable-sec-container-hover: hsl(230, 35%, 44%);
+  --sable-sec-container-active: hsl(230, 35%, 48%);
+  --sable-sec-container-line: hsl(230, 35%, 52%);
+  --sable-sec-on-container: hsl(230, 50%, 96%);
+
+  /* Success */
+  --sable-success-main: hsl(345, 46%, 73%);
+  --sable-success-main-hover: hsl(345, 46%, 80.3%);
+  --sable-success-main-active: hsl(345, 46%, 87.6%);
+  --sable-success-main-line: hsl(345, 46%, 94.9%);
+  --sable-success-on-main: hsl(345, 23%, 14.6%);
+  --sable-success-container: hsl(345, 27.6%, 21.9%);
+  --sable-success-container-hover: hsl(345, 27.6%, 24.09%);
+  --sable-success-container-active: hsl(345, 27.6%, 26.28%);
+  --sable-success-container-line: hsl(345, 27.6%, 28.47%);
+  --sable-success-on-container: hsl(345, 46%, 87.6%);
+
+  /* Warning */
+  --sable-warn-main: hsl(345, 100%, 100%);
+  --sable-warn-main-hover: hsl(345, 50%, 100%);
+  --sable-warn-main-active: hsl(345, 50%, 100%);
+  --sable-warn-main-line: hsl(345, 50%, 100%);
+  --sable-warn-on-main: hsl(345, 25%, 30%);
+  --sable-warn-container: hsl(345, 30%, 45%);
+  --sable-warn-container-hover: hsl(345, 30%, 49.5%);
+  --sable-warn-container-active: hsl(345, 30%, 54%);
+  --sable-warn-container-line: hsl(345, 30%, 58.5%);
+  --sable-warn-on-container: hsl(345, 50%, 100%);
+
+  /* Critical */
+  --sable-crit-main: hsl(345, 73%, 68%);
+  --sable-crit-main-hover: hsl(345, 73%, 74.8%);
+  --sable-crit-main-active: hsl(345, 73%, 81.6%);
+  --sable-crit-main-line: hsl(345, 73%, 88.4%);
+  --sable-crit-on-main: hsl(345, 36.5%, 13.6%);
+  --sable-crit-container: hsl(345, 43.8%, 20.4%);
+  --sable-crit-container-hover: hsl(345, 43.8%, 22.44%);
+  --sable-crit-container-active: hsl(345, 43.8%, 24.48%);
+  --sable-crit-container-line: hsl(345, 43.8%, 26.52%);
+  --sable-crit-on-container: hsl(345, 73%, 81.6%);
+
+  /* Other */
+  --sable-focus-ring: hsla(270, 100%, 75%, 0.8);
+  --sable-shadow: hsla(270, 100%, 70%, 0.2);
+  --sable-overlay: hsla(270, 55%, 12%, 0.9);
+}
+
+/* Left Panel Buttons */
+body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover {
+  background-color: hsl(270, 25%, 30.6%);
+}
+
+/* Tip - Rooms & Settings Left Panel Gradient Zone, useful for zero Translucence:
+
+body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] {
+background: linear-gradient(to top, hsla(200, 100%, 8%, 0.85) 20%, hsla(300, 100%, 2%, 0.85) 40%) fixed;
+}
+or like we did, set --sable-bg-container alpha to 0.7 and --side-grad saturation to 100% for low translucence
+*/
\ No newline at end of file
diff --git a/themes/neon-city.preview.sable.css b/themes/neon-city.preview.sable.css
new file mode 100644
index 0000000..873379d
--- /dev/null
+++ b/themes/neon-city.preview.sable.css
@@ -0,0 +1,20 @@
+/*
+@sable-theme
+id: neon-city
+name: Neon City
+author: userspring
+kind: dark
+contrast: high
+tags: gradient, purple, glow, translucent
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city.sable.css
+*/
+
+.sable-theme-preview {
+  --sable-bg-container: linear-gradient(to top, hsl(300, 100%, 8%), hsl(300, 100%, 2%));
+  --sable-bg-on-container: hsla(270, 20.5%, 90%, 0.85);
+  --sable-surface-container: hsla(300, 30%, 5%, 0.67);
+  --sable-surface-container-line: hsla(270, 35%, 30.94%, 0.85);
+  --sable-surface-on-container: hsla(270, 0%, 95%, 1);
+  --sable-primary-main: hsla(270, 25%, 34%, 0.85);
+  --sable-primary-on-main: hsla(270, 12.5%, 85%, 0.85);
+}
\ No newline at end of file
diff --git a/themes/neon-city.sable.css b/themes/neon-city.sable.css
new file mode 100644
index 0000000..1e7934d
--- /dev/null
+++ b/themes/neon-city.sable.css
@@ -0,0 +1,140 @@
+/*
+@sable-theme
+id: neon-city
+name: Neon City
+author: userspring
+kind: dark
+contrast: high
+tags: gradient, purple, glow, translucent
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/neon-city.sable.css
+*/
+
+/* Comment: Keep alpha vars & --sides-grad for the "Solid Colors" tweak to work */
+
+  /* Center Box Gradient */
+body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] {
+  --center-grad: linear-gradient(to top, hsl(300, 100%, 6%) 20%, hsl(300, 100%, 2%) 40%) fixed;
+  background: var(--center-grad);
+}
+
+body.sable-remote-theme {
+
+  /* Side Panels Gradient */
+  --sides-grad: linear-gradient(to top, hsl(300, 100%, 8%) 20%, hsl(300, 100%, 2%) 40%) fixed;
+  background: var(--sides-grad);
+
+  /* Translucence - Don't add new vars */
+  --softest-alpha: 0;
+  --softer-alpha: 0.4;
+  --soft-alpha: 0.67;
+  --hard-alpha: 0.85;
+  --harder-alpha: meow;
+  --hardest-alpha: 1;
+
+  /* Background */
+  --sable-bg-container: hsla(300, 50%, 6%, 0.05); /*!*/
+  --sable-bg-container-hover: hsla(270, 25%, 22.44%, var(--hard-alpha));
+  --sable-bg-container-active: hsla(270, 25%, 24.48%, var(--hard-alpha));
+  --sable-bg-container-line: hsla(270, 45%, 26.52%, var(--hard-alpha));
+  --sable-bg-on-container: hsla(270, 20.5%, 90%, var(--hard-alpha));
+
+  /* Surface */
+  --sable-surface-container: hsla(300, 30%, 5%, var(--soft-alpha)); /*!*/
+  --sable-surface-container-hover: hsla(300, 25%, 11%, var(--hard-alpha));
+  --sable-surface-container-active: hsla(270, 25%, 28.56%, var(--hard-alpha));
+  --sable-surface-container-line: hsla(270, 35%, 30.94%, var(--hard-alpha));
+  --sable-surface-on-container: hsla(270, 0%, 95%, var(--hardest-alpha));
+
+  /* Surface Variant */
+  --sable-surface-var-container: hsla(270, 0%, 0%, var(--softer-alpha)); /*!*/
+  --sable-surface-var-container-hover: hsla(270, 30%, 18.7%, var(--hard-alpha));
+  --sable-surface-var-container-active: hsla(270, 30%, 20.4%, var(--hard-alpha));
+  --sable-surface-var-container-line: hsla(270, 35%, 42%, var(--hard-alpha));
+  --sable-surface-var-on-container: hsla(270, 40%, 90%, var(--hard-alpha));
+
+  /* Primary */
+  --sable-primary-main: hsla(270, 25%, 34%, var(--hard-alpha));
+  --sable-primary-main-hover: hsla(270, 25%, 37.4%, var(--hard-alpha));
+  --sable-primary-main-active: hsla(270, 25%, 40.8%, var(--hard-alpha));
+  --sable-primary-main-line: hsla(270, 35%, 44.2%, var(--hard-alpha));
+  --sable-primary-on-main: hsla(270, 12.5%, 85%, var(--hard-alpha));
+  --sable-primary-container: hsla(270, 20%, 20%, var(--hard-alpha));
+  --sable-primary-container-hover: hsla(272, 43.8%, 22.44%, var(--hard-alpha));
+  --sable-primary-container-active: hsla(270, 20%, 53.04%, var(--hard-alpha));
+  --sable-primary-container-line: hsla(270, 30%, 57.46%, var(--hard-alpha));
+  --sable-primary-on-container: hsla(272, 73%, 81.6%, var(--hard-alpha));
+
+  /* Secondary */
+  --sable-sec-main: hsla(270, 35%, 64%, var(--hard-alpha));
+  --sable-sec-main-hover: hsla(270, 50%, 88%, var(--hard-alpha));
+  --sable-sec-main-active: hsla(270, 50%, 96%, var(--hard-alpha));
+  --sable-sec-main-line: hsla(270, 50%, 100%, var(--hard-alpha));
+  --sable-sec-on-main: hsla(270, 50%, 24%, var(--hard-alpha));
+  --sable-sec-container: hsla(270, 35%, 5%, var(--hard-alpha));
+  --sable-sec-container-hover: hsla(270, 35%, 20%, var(--hard-alpha));
+  --sable-sec-container-active: hsla(270, 35%, 48%, var(--hard-alpha));
+  --sable-sec-container-line: hsla(270, 35%, 52%, var(--hard-alpha));
+  --sable-sec-on-container: hsla(270, 50%, 96%, var(--hard-alpha));
+
+  /* Success */
+  --sable-success-main: hsla(271, 46%, 73%, var(--hard-alpha));
+  --sable-success-main-hover: hsla(271, 46%, 80.3%, var(--hard-alpha));
+  --sable-success-main-active: hsla(271, 46%, 87.6%, var(--hard-alpha));
+  --sable-success-main-line: hsla(271, 46%, 94.9%, var(--hard-alpha));
+  --sable-success-on-main: hsla(271, 23%, 14.6%, var(--hard-alpha));
+  --sable-success-container: hsla(271, 27.6%, 21.9%, var(--hard-alpha));
+  --sable-success-container-hover: hsla(271, 27.6%, 24.09%, var(--hard-alpha));
+  --sable-success-container-active: hsla(271, 27.6%, 26.28%, var(--hard-alpha));
+  --sable-success-container-line: hsla(271, 37.6%, 28.47%, var(--hard-alpha));
+  --sable-success-on-container: hsla(271, 46%, 87.6%, var(--hard-alpha));
+
+  /* Warning */
+  --sable-warn-main: hsla(270, 100%, 100%, var(--hard-alpha));
+  --sable-warn-main-hover: hsla(270, 50%, 100%, var(--hard-alpha));
+  --sable-warn-main-active: hsla(270, 50%, 100%, var(--hard-alpha));
+  --sable-warn-main-line: hsla(270, 50%, 100%, var(--hard-alpha));
+  --sable-warn-on-main: hsla(270, 25%, 30%, var(--hard-alpha));
+  --sable-warn-container: hsla(270, 30%, 45%, var(--hard-alpha));
+  --sable-warn-container-hover: hsla(270, 30%, 49.5%, var(--hard-alpha));
+  --sable-warn-container-active: hsla(270, 30%, 54%, var(--hard-alpha));
+  --sable-warn-container-line: hsla(270, 35%, 58.5%, var(--hard-alpha));
+  --sable-warn-on-container: hsla(270, 50%, 100%, var(--hard-alpha));
+
+  /* Critical */
+  --sable-crit-main: hsla(272, 73%, 68%, var(--hard-alpha));
+  --sable-crit-main-hover: hsla(272, 73%, 74.8%, var(--hard-alpha));
+  --sable-crit-main-active: hsla(272, 73%, 81.6%, var(--hard-alpha));
+  --sable-crit-main-line: hsla(272, 73%, 88.4%, var(--hard-alpha));
+  --sable-crit-on-main: hsla(272, 36.5%, 13.6%, var(--hard-alpha));
+  --sable-crit-container: hsla(272, 43.8%, 20.4%, var(--hard-alpha));
+  --sable-crit-container-hover: hsla(272, 43.8%, 22.44%, var(--hard-alpha));
+  --sable-crit-container-active: hsla(272, 43.8%, 24.48%, var(--hard-alpha));
+  --sable-crit-container-line: hsla(272, 43.8%, 26.52%, var(--hard-alpha));
+  --sable-crit-on-container: hsla(272, 73%, 81.6%, var(--hard-alpha));
+
+  /* Other */
+  --sable-focus-ring: hsla(270, 100%, 75%, 0.8);
+  --sable-shadow: hsla(270, 100%, 70%, 0.6);
+  --sable-overlay: hsla(270, 55%, 12%, 0.9);
+}
+
+/* Left Panel Buttons Shadow */
+body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover {
+  box-shadow: 0 0 9px 1px hsla(270, 100%, 75%, 0.65); /* 0 0 10px 1px hsla(270, 100%, 70%, 0.6); */
+  transition: box-shadow 0.2s ease;
+}
+
+  /* Text Box Shadow */
+*:focus-visible {
+  box-shadow: 0 10px 15px -10px hsla(270, 50%, 50%, 0.6); /* h offset, v off, blur, spread */
+  outline: none;
+}
+
+
+/* Tip - Rooms & Settings Left Panel Gradient Zone, useful for zero Translucence:
+
+body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] {
+background: linear-gradient(to top, hsla(200, 100%, 8%, 0.85) 20%, hsla(300, 100%, 2%, 0.85) 40%) fixed;
+}
+or set --sable-bg-container alpha to 0.7 and --side-grad saturation to 100% for low translucence
+*/
\ No newline at end of file
diff --git a/tweaks/solid-colors.sable.css b/tweaks/solid-colors.sable.css
new file mode 100644
index 0000000..18248c2
--- /dev/null
+++ b/tweaks/solid-colors.sable.css
@@ -0,0 +1,27 @@
+/*
+@sable-tweak
+id: solid-colors
+name: Solid Colors
+description: Remove transparency effects
+author: userspring
+tags: global, translucence
+*/
+
+/* Remove opacity on elements */
+body.sable-remote-theme,
+body.sable-remote-theme * {
+  --softest-alpha: 1 !important;
+  --softer-alpha: 1 !important;
+  --soft-alpha: 1 !important;
+  --hard-alpha: 1 !important;
+  --harder-alpha: 1 !important;
+  --hardest-alpha: 1 !important;
+}
+
+/* Fix for gradient themes - Settings Left Panel*/
+body.sable-remote-theme [data-sentry-component="PageNav"][data-sentry-element="Box"] {
+  background: linear-gradient(to top, var(--sable-bg-container), var(--sable-bg-container)), var(--sides-grad) !important;
+}
+
+
+/* Tip - Check 'Neon City' theme implementation*/
\ No newline at end of file

From ae1742761c946be2058c1abb84324dd3c0ad7e0e Mon Sep 17 00:00:00 2001
From: GreenB0t <58006778+GreenB0t@users.noreply.github.com>
Date: Sat, 20 Jun 2026 13:23:58 +0100
Subject: [PATCH 2/6] Tone down neon purple tiny bit

---
 themes/neon-city.sable.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/neon-city.sable.css b/themes/neon-city.sable.css
index 1e7934d..b49afa3 100644
--- a/themes/neon-city.sable.css
+++ b/themes/neon-city.sable.css
@@ -13,14 +13,14 @@ fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/n
 
   /* Center Box Gradient */
 body.sable-remote-theme [class*="ContainerColor_ContainerColor_variant_Surface"] {
-  --center-grad: linear-gradient(to top, hsl(300, 100%, 6%) 20%, hsl(300, 100%, 2%) 40%) fixed;
+  --center-grad: linear-gradient(to top, hsl(300, 100%, 5.5%) 20%, hsl(300, 100%, 2%) 40%) fixed;
   background: var(--center-grad);
 }
 
 body.sable-remote-theme {
 
   /* Side Panels Gradient */
-  --sides-grad: linear-gradient(to top, hsl(300, 100%, 8%) 20%, hsl(300, 100%, 2%) 40%) fixed;
+  --sides-grad: linear-gradient(to top, hsl(300, 100%, 7.5%) 20%, hsl(300, 100%, 2%) 40%) fixed;
   background: var(--sides-grad);
 
   /* Translucence - Don't add new vars */

From 8e950deb277efabf1cc83bed2fb5b2053ff0e1fd Mon Sep 17 00:00:00 2001
From: GreenB0t <58006778+GreenB0t@users.noreply.github.com>
Date: Sun, 21 Jun 2026 16:04:53 +0100
Subject: [PATCH 3/6] Fixed Midnight-Fairy url

---
 themes/midnight-fairy.preview.sable.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/midnight-fairy.preview.sable.css b/themes/midnight-fairy.preview.sable.css
index ec013ab..99357da 100644
--- a/themes/midnight-fairy.preview.sable.css
+++ b/themes/midnight-fairy.preview.sable.css
@@ -6,7 +6,7 @@ author: userspring
 kind: dark
 contrast: low
 tags: gradient, purple, violet blue, two-tone
-fullThemeUrl: https://raw.githubusercontent.com/GreenB0t/Gachiakuta/refs/heads/master/midnight-fairy.preview.sable.css
+fullThemeUrl: https://raw.githubusercontent.com/SableClient/themes/main/themes/midnight-fairy.sable.css
 */
 
 .sable-theme-preview {

From 32d8f1356fa661fcaf8d078c1c1b5cdd583374a1 Mon Sep 17 00:00:00 2001
From: GreenB0t <58006778+GreenB0t@users.noreply.github.com>
Date: Sun, 21 Jun 2026 16:19:03 +0100
Subject: [PATCH 4/6] Cleaned out a comment

---
 themes/neon-city.sable.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/neon-city.sable.css b/themes/neon-city.sable.css
index b49afa3..264021a 100644
--- a/themes/neon-city.sable.css
+++ b/themes/neon-city.sable.css
@@ -120,13 +120,13 @@ body.sable-remote-theme {
 
 /* Left Panel Buttons Shadow */
 body.sable-remote-theme button[class*="Sidebar_SidebarAvatar"]:hover {
-  box-shadow: 0 0 9px 1px hsla(270, 100%, 75%, 0.65); /* 0 0 10px 1px hsla(270, 100%, 70%, 0.6); */
+  box-shadow: 0 0 9px 1px hsla(270, 100%, 75%, 0.65);
   transition: box-shadow 0.2s ease;
 }
 
   /* Text Box Shadow */
 *:focus-visible {
-  box-shadow: 0 10px 15px -10px hsla(270, 50%, 50%, 0.6); /* h offset, v off, blur, spread */
+  box-shadow: 0 10px 15px -10px hsla(270, 50%, 50%, 0.6);
   outline: none;
 }
 

From abe9f6dd808f1d6207c08b662e092049f33455f8 Mon Sep 17 00:00:00 2001
From: GreenB0t <58006778+GreenB0t@users.noreply.github.com>
Date: Mon, 22 Jun 2026 13:30:35 +0100
Subject: [PATCH 5/6] Preserved important red & green success/warn colors in my
 themes

---
 themes/blue-nord.sable.css       | 20 ++++++++++----------
 themes/midnight-fairy.sable.css  | 20 ++++++++++----------
 themes/neon-city.sable.css       | 20 ++++++++++----------
 themes/shark-deep-blue.sable.css | 10 +++++-----
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/themes/blue-nord.sable.css b/themes/blue-nord.sable.css
index 722959a..3f5d49a 100644
--- a/themes/blue-nord.sable.css
+++ b/themes/blue-nord.sable.css
@@ -56,11 +56,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsl(40, 50%, 96%);
 
   /* Success */
-  --sable-success-main: hsl(189, 46%, 73%);
-  --sable-success-main-hover: hsl(189, 46%, 80.3%);
-  --sable-success-main-active: hsl(189, 46%, 87.6%);
-  --sable-success-main-line: hsl(189, 46%, 94.9%);
-  --sable-success-on-main: hsl(189, 23%, 14.6%);
+  --sable-success-main: hsl(130, 46%, 73%);
+  --sable-success-main-hover: hsl(130, 46%, 80.3%);
+  --sable-success-main-active: hsl(130, 46%, 87.6%);
+  --sable-success-main-line: hsl(130, 46%, 94.9%);
+  --sable-success-on-main: hsl(130, 23%, 14.6%);
   --sable-success-container: hsl(189, 27.6%, 21.9%);
   --sable-success-container-hover: hsl(189, 27.6%, 24.09%);
   --sable-success-container-active: hsl(189, 27.6%, 26.28%);
@@ -68,11 +68,11 @@ body.sable-remote-theme {
   --sable-success-on-container: hsl(189, 46%, 87.6%);
 
   /* Warning */
-  --sable-warn-main: hsl(40, 100%, 100%);
-  --sable-warn-main-hover: hsl(40, 50%, 100%);
-  --sable-warn-main-active: hsl(40, 50%, 100%);
-  --sable-warn-main-line: hsl(40, 50%, 100%);
-  --sable-warn-on-main: hsl(40, 25%, 30%);
+  --sable-warn-main: hsl(0, 100%, 100%);
+  --sable-warn-main-hover: hsl(0, 50%, 100%);
+  --sable-warn-main-active: hsl(0, 50%, 100%);
+  --sable-warn-main-line: hsl(0, 50%, 100%);
+  --sable-warn-on-main: hsl(0, 25%, 30%);
   --sable-warn-container: hsl(40, 30%, 45%);
   --sable-warn-container-hover: hsl(40, 30%, 49.5%);
   --sable-warn-container-active: hsl(40, 30%, 54%);
diff --git a/themes/midnight-fairy.sable.css b/themes/midnight-fairy.sable.css
index 1e840d3..6967ee0 100644
--- a/themes/midnight-fairy.sable.css
+++ b/themes/midnight-fairy.sable.css
@@ -69,11 +69,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsl(230, 50%, 96%);
 
   /* Success */
-  --sable-success-main: hsl(345, 46%, 73%);
-  --sable-success-main-hover: hsl(345, 46%, 80.3%);
-  --sable-success-main-active: hsl(345, 46%, 87.6%);
-  --sable-success-main-line: hsl(345, 46%, 94.9%);
-  --sable-success-on-main: hsl(345, 23%, 14.6%);
+  --sable-success-main: hsl(130, 46%, 73%);
+  --sable-success-main-hover: hsl(130, 46%, 80.3%);
+  --sable-success-main-active: hsl(130, 46%, 87.6%);
+  --sable-success-main-line: hsl(130, 46%, 94.9%);
+  --sable-success-on-main: hsl(130, 23%, 14.6%);
   --sable-success-container: hsl(345, 27.6%, 21.9%);
   --sable-success-container-hover: hsl(345, 27.6%, 24.09%);
   --sable-success-container-active: hsl(345, 27.6%, 26.28%);
@@ -81,11 +81,11 @@ body.sable-remote-theme {
   --sable-success-on-container: hsl(345, 46%, 87.6%);
 
   /* Warning */
-  --sable-warn-main: hsl(345, 100%, 100%);
-  --sable-warn-main-hover: hsl(345, 50%, 100%);
-  --sable-warn-main-active: hsl(345, 50%, 100%);
-  --sable-warn-main-line: hsl(345, 50%, 100%);
-  --sable-warn-on-main: hsl(345, 25%, 30%);
+  --sable-warn-main: hsl(0, 100%, 100%);
+  --sable-warn-main-hover: hsl(0, 50%, 100%);
+  --sable-warn-main-active: hsl(0, 50%, 100%);
+  --sable-warn-main-line: hsl(0, 50%, 100%);
+  --sable-warn-on-main: hsl(0, 25%, 30%);
   --sable-warn-container: hsl(345, 30%, 45%);
   --sable-warn-container-hover: hsl(345, 30%, 49.5%);
   --sable-warn-container-active: hsl(345, 30%, 54%);
diff --git a/themes/neon-city.sable.css b/themes/neon-city.sable.css
index 264021a..09a7253 100644
--- a/themes/neon-city.sable.css
+++ b/themes/neon-city.sable.css
@@ -77,11 +77,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsla(270, 50%, 96%, var(--hard-alpha));
 
   /* Success */
-  --sable-success-main: hsla(271, 46%, 73%, var(--hard-alpha));
-  --sable-success-main-hover: hsla(271, 46%, 80.3%, var(--hard-alpha));
-  --sable-success-main-active: hsla(271, 46%, 87.6%, var(--hard-alpha));
-  --sable-success-main-line: hsla(271, 46%, 94.9%, var(--hard-alpha));
-  --sable-success-on-main: hsla(271, 23%, 14.6%, var(--hard-alpha));
+  --sable-success-main: hsla(130, 46%, 73%, var(--hard-alpha));
+  --sable-success-main-hover: hsla(130, 46%, 80.3%, var(--hard-alpha));
+  --sable-success-main-active: hsla(130, 46%, 87.6%, var(--hard-alpha));
+  --sable-success-main-line: hsla(130, 46%, 94.9%, var(--hard-alpha));
+  --sable-success-on-main: hsla(130, 23%, 14.6%, var(--hard-alpha));
   --sable-success-container: hsla(271, 27.6%, 21.9%, var(--hard-alpha));
   --sable-success-container-hover: hsla(271, 27.6%, 24.09%, var(--hard-alpha));
   --sable-success-container-active: hsla(271, 27.6%, 26.28%, var(--hard-alpha));
@@ -89,11 +89,11 @@ body.sable-remote-theme {
   --sable-success-on-container: hsla(271, 46%, 87.6%, var(--hard-alpha));
 
   /* Warning */
-  --sable-warn-main: hsla(270, 100%, 100%, var(--hard-alpha));
-  --sable-warn-main-hover: hsla(270, 50%, 100%, var(--hard-alpha));
-  --sable-warn-main-active: hsla(270, 50%, 100%, var(--hard-alpha));
-  --sable-warn-main-line: hsla(270, 50%, 100%, var(--hard-alpha));
-  --sable-warn-on-main: hsla(270, 25%, 30%, var(--hard-alpha));
+  --sable-warn-main: hsla(0, 100%, 100%, var(--hard-alpha));
+  --sable-warn-main-hover: hsla(0, 50%, 100%, var(--hard-alpha));
+  --sable-warn-main-active: hsla(0, 50%, 100%, var(--hard-alpha));
+  --sable-warn-main-line: hsla(0, 50%, 100%, var(--hard-alpha));
+  --sable-warn-on-main: hsla(0, 25%, 30%, var(--hard-alpha));
   --sable-warn-container: hsla(270, 30%, 45%, var(--hard-alpha));
   --sable-warn-container-hover: hsla(270, 30%, 49.5%, var(--hard-alpha));
   --sable-warn-container-active: hsla(270, 30%, 54%, var(--hard-alpha));
diff --git a/themes/shark-deep-blue.sable.css b/themes/shark-deep-blue.sable.css
index e4b97fb..864349e 100644
--- a/themes/shark-deep-blue.sable.css
+++ b/themes/shark-deep-blue.sable.css
@@ -93,11 +93,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsl(203, 78.9%, 98.99%);
 
   /* --- Success --- */
-  --sable-success-main: hsl(206, 72.59%, 79.17%);
-  --sable-success-main-hover: hsl(353, 69.43%, 72.67%);
-  --sable-success-main-active: hsl(353, 67.85%, 67.90%);
-  --sable-success-main-line: hsl(353, 66.28%, 63.68%);
-  --sable-success-on-main: hsl(353, 39.45%, 15.27%);
+  --sable-success-main: hsl(130, 72.59%, 79.17%);
+  --sable-success-main-hover: hsl(130, 69.43%, 72.67%);
+  --sable-success-main-active: hsl(130, 67.85%, 67.90%);
+  --sable-success-main-line: hsl(130, 66.28%, 63.68%);
+  --sable-success-on-main: hsl(130, 39.45%, 15.27%);
   --sable-success-container: hsl(353, 47.34%, 23.83%);
   --sable-success-container-hover: hsl(353, 47.34%, 27.62%);
   --sable-success-container-active: hsl(353, 47.34%, 31.41%);

From f96b5c87946934801eb4067e3ade9c07faf05d6c Mon Sep 17 00:00:00 2001
From: GreenB0t <58006778+GreenB0t@users.noreply.github.com>
Date: Mon, 22 Jun 2026 14:14:47 +0100
Subject: [PATCH 6/6] undo green success, too wide spread

---
 themes/blue-nord.sable.css       | 10 +++++-----
 themes/midnight-fairy.sable.css  | 10 +++++-----
 themes/neon-city.sable.css       | 10 +++++-----
 themes/shark-deep-blue.sable.css | 10 +++++-----
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/themes/blue-nord.sable.css b/themes/blue-nord.sable.css
index 3f5d49a..f1796d5 100644
--- a/themes/blue-nord.sable.css
+++ b/themes/blue-nord.sable.css
@@ -56,11 +56,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsl(40, 50%, 96%);
 
   /* Success */
-  --sable-success-main: hsl(130, 46%, 73%);
-  --sable-success-main-hover: hsl(130, 46%, 80.3%);
-  --sable-success-main-active: hsl(130, 46%, 87.6%);
-  --sable-success-main-line: hsl(130, 46%, 94.9%);
-  --sable-success-on-main: hsl(130, 23%, 14.6%);
+  --sable-success-main: hsl(189, 46%, 73%);
+  --sable-success-main-hover: hsl(189, 46%, 80.3%);
+  --sable-success-main-active: hsl(189, 46%, 87.6%);
+  --sable-success-main-line: hsl(189, 46%, 94.9%);
+  --sable-success-on-main: hsl(189, 23%, 14.6%);
   --sable-success-container: hsl(189, 27.6%, 21.9%);
   --sable-success-container-hover: hsl(189, 27.6%, 24.09%);
   --sable-success-container-active: hsl(189, 27.6%, 26.28%);
diff --git a/themes/midnight-fairy.sable.css b/themes/midnight-fairy.sable.css
index 6967ee0..bada261 100644
--- a/themes/midnight-fairy.sable.css
+++ b/themes/midnight-fairy.sable.css
@@ -69,11 +69,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsl(230, 50%, 96%);
 
   /* Success */
-  --sable-success-main: hsl(130, 46%, 73%);
-  --sable-success-main-hover: hsl(130, 46%, 80.3%);
-  --sable-success-main-active: hsl(130, 46%, 87.6%);
-  --sable-success-main-line: hsl(130, 46%, 94.9%);
-  --sable-success-on-main: hsl(130, 23%, 14.6%);
+  --sable-success-main: hsl(345, 46%, 73%);
+  --sable-success-main-hover: hsl(345, 46%, 80.3%);
+  --sable-success-main-active: hsl(345, 46%, 87.6%);
+  --sable-success-main-line: hsl(345, 46%, 94.9%);
+  --sable-success-on-main: hsl(345, 23%, 14.6%);
   --sable-success-container: hsl(345, 27.6%, 21.9%);
   --sable-success-container-hover: hsl(345, 27.6%, 24.09%);
   --sable-success-container-active: hsl(345, 27.6%, 26.28%);
diff --git a/themes/neon-city.sable.css b/themes/neon-city.sable.css
index 09a7253..21b3fa0 100644
--- a/themes/neon-city.sable.css
+++ b/themes/neon-city.sable.css
@@ -77,11 +77,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsla(270, 50%, 96%, var(--hard-alpha));
 
   /* Success */
-  --sable-success-main: hsla(130, 46%, 73%, var(--hard-alpha));
-  --sable-success-main-hover: hsla(130, 46%, 80.3%, var(--hard-alpha));
-  --sable-success-main-active: hsla(130, 46%, 87.6%, var(--hard-alpha));
-  --sable-success-main-line: hsla(130, 46%, 94.9%, var(--hard-alpha));
-  --sable-success-on-main: hsla(130, 23%, 14.6%, var(--hard-alpha));
+  --sable-success-main: hsla(271, 46%, 73%, var(--hard-alpha));
+  --sable-success-main-hover: hsla(271, 46%, 80.3%, var(--hard-alpha));
+  --sable-success-main-active: hsla(271, 46%, 87.6%, var(--hard-alpha));
+  --sable-success-main-line: hsla(271, 46%, 94.9%, var(--hard-alpha));
+  --sable-success-on-main: hsla(271, 23%, 14.6%, var(--hard-alpha));
   --sable-success-container: hsla(271, 27.6%, 21.9%, var(--hard-alpha));
   --sable-success-container-hover: hsla(271, 27.6%, 24.09%, var(--hard-alpha));
   --sable-success-container-active: hsla(271, 27.6%, 26.28%, var(--hard-alpha));
diff --git a/themes/shark-deep-blue.sable.css b/themes/shark-deep-blue.sable.css
index 864349e..e1e1514 100644
--- a/themes/shark-deep-blue.sable.css
+++ b/themes/shark-deep-blue.sable.css
@@ -93,11 +93,11 @@ body.sable-remote-theme {
   --sable-sec-on-container: hsl(203, 78.9%, 98.99%);
 
   /* --- Success --- */
-  --sable-success-main: hsl(130, 72.59%, 79.17%);
-  --sable-success-main-hover: hsl(130, 69.43%, 72.67%);
-  --sable-success-main-active: hsl(130, 67.85%, 67.90%);
-  --sable-success-main-line: hsl(130, 66.28%, 63.68%);
-  --sable-success-on-main: hsl(130, 39.45%, 15.27%);
+  --sable-success-main: hsl(353, 72.59%, 79.17%);
+  --sable-success-main-hover: hsl(353, 69.43%, 72.67%);
+  --sable-success-main-active: hsl(353, 67.85%, 67.90%);
+  --sable-success-main-line: hsl(353, 66.28%, 63.68%);
+  --sable-success-on-main: hsl(353, 39.45%, 15.27%);
   --sable-success-container: hsl(353, 47.34%, 23.83%);
   --sable-success-container-hover: hsl(353, 47.34%, 27.62%);
   --sable-success-container-active: hsl(353, 47.34%, 31.41%);