From 5bb5afdf6aeddbecea7e2bb5cb975c876fbede6f Mon Sep 17 00:00:00 2001
From: Saltssaumure <themes@saltssaumure.net>
Date: Sun, 26 May 2024 23:50:06 +0100
Subject: [PATCH] Improve text censor toggle

---
 Demonstration.theme.css            |  3 +--
 scss/part/_font.scss               | 16 +++++++++-------
 scss/themesettings/_container.scss |  4 ++++
 scss/themesettings/_font.scss      | 17 ++++++++++-------
 scss/themesettings/_mod.scss       |  4 ----
 scss/themesettings/index.scss      |  1 +
 6 files changed, 25 insertions(+), 20 deletions(-)
 create mode 100644 scss/themesettings/_container.scss

diff --git a/Demonstration.theme.css b/Demonstration.theme.css
index 0aa5123..aa1a23b 100644
--- a/Demonstration.theme.css
+++ b/Demonstration.theme.css
@@ -16,6 +16,7 @@
 :root {
     --demo-font-variant:    Circular;
     --demo-font-emoji:      Noto;
+    --demo-text:            censor;
     --demo-betterdiscord:   visible;
     --demo-replugged:       visible;
     --demo-vencord:         visible;
@@ -25,6 +26,4 @@
     --demo-image-hue:       270;
     --demo-banner-hue:      180;
     --demo-self-hue:        300;
-    --demo-font-read:       none;
-    --demo-font-code-read:  none;
 }
\ No newline at end of file
diff --git a/scss/part/_font.scss b/scss/part/_font.scss
index da5e3f3..3eb9df2 100644
--- a/scss/part/_font.scss
+++ b/scss/part/_font.scss
@@ -1,10 +1,12 @@
 @import url("https://fonts.googleapis.com/css2?family=Flow+Block&family=Flow+Rounded&family=Flow+Circular&family=Noto+Emoji&display=swap");
 
-:root {
-    --font-primary: var(--demo-font-read), Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
-    --font-display: var(--demo-font-read), Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
-    --font-headline: var(--demo-font-read), Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
-    --font-code: var(--demo-font-code-read), var(--demo-font-read), Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, monospace !important;
-    --font-clan-body: var(--demo-font-read), Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
-    --font-clan-signature: var(--demo-font-read), Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
+@container demo-text style(--demo-text: hidden) {
+    body {
+        --font-primary: Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
+        --font-display: Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
+        --font-headline: Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
+        --font-code: Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, monospace !important;
+        --font-clan-body: Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
+        --font-clan-signature: Flow var(--demo-font-variant), var(--demo-font-emoji) Emoji, system-ui !important;
+    }
 }
diff --git a/scss/themesettings/_container.scss b/scss/themesettings/_container.scss
new file mode 100644
index 0000000..09aaede
--- /dev/null
+++ b/scss/themesettings/_container.scss
@@ -0,0 +1,4 @@
+// Containers for showing or hiding client mod elements and text
+:root {
+    container: demo-betterdiscord demo-replugged demo-vencord demo-text;
+}
diff --git a/scss/themesettings/_font.scss b/scss/themesettings/_font.scss
index 5cd3f0f..bb3a9e3 100644
--- a/scss/themesettings/_font.scss
+++ b/scss/themesettings/_font.scss
@@ -1,4 +1,12 @@
-// Variant of Flow font
+// Show or hide text based on user settings
+// Default to hidden unless user sets to visible
+@property --demo-text {
+    syntax: "normal | censor";
+    inherits: false;
+    initial-value: censor;
+}
+
+// Variant of censored font "Flow <variant>"
 @property --demo-font-variant {
     syntax: "Circular | Rounded | Block";
     inherits: false;
@@ -6,14 +14,9 @@
 }
 
 // Emoji font
+// Outline-only or system default
 @property --demo-font-emoji {
     syntax: "Noto | none";
     inherits: false;
     initial-value: Noto;
 }
-
-// Emergency legible font
-:root {
-    --demo-font-read: none;
-    --demo-font-code-read: none;
-}
diff --git a/scss/themesettings/_mod.scss b/scss/themesettings/_mod.scss
index 5116b74..5c2b7ed 100644
--- a/scss/themesettings/_mod.scss
+++ b/scss/themesettings/_mod.scss
@@ -1,10 +1,6 @@
 // Show or hide client mod elements based on user settings
 // Default to visible unless user sets to hidden
 
-:root {
-    container: demo-betterdiscord demo-replugged demo-vencord;
-}
-
 $_mods: betterdiscord, replugged, vencord;
 
 @each $_mod in $_mods {
diff --git a/scss/themesettings/index.scss b/scss/themesettings/index.scss
index 48a040e..6105152 100644
--- a/scss/themesettings/index.scss
+++ b/scss/themesettings/index.scss
@@ -1,3 +1,4 @@
+@forward "./container";
 @forward "./font";
 @forward "./hue";
 @forward "./misc";