feat: strikethroughs red, highlights use yellow by default

Author: chrisgrieser

source/2-variables/variables.css

@@ -44,9 +44,7 @@
 	--text-normal: var(--color-base-85s);
 	--active-line-color: var(--color-accent);
 	--text-muted: var(--color-base-70);
-
-	/* custom middle ground between text-muted and text-faint */
-	--text-gray: var(--color-base-60);
+	--text-gray: var(--color-base-60); /* custom middle between `text-muted` and `text-faint` */
 	--text-faint: var(--color-base-50);
 	--text-accent: var(--color-accent);
 	--text-accent-hover: var(--hover-accent);

source/3-markup/markdown.css

@@ -463,22 +463,28 @@ blockquote code {
 /** Strikethroughs
 ──────────────────────────────────────────────────── */
 
-/* make the "~" readable */
-.cm-formatting-strikethrough {
-	text-decoration: none;
+.cm-strikethrough {
+	body:not(uncolored-strikethroughs) & {
+		color: rgba(var(--color-red-rgb), 0.85);
+	}
+
+	/* make the "~" readable */
+	&.cm-formatting {
+		text-decoration: none;
+	}
 }
 
 /* ───────────────────────────────────────────────── */
 /** Highlights
 ──────────────────────────────────────────────────── */
 
 .theme-light {
-	--highlight-hue-1: 280;
+	--highlight-hue-1: 50;
 	--highlight-sla-values: 85% 70% / 40%;
 }
 
 .theme-dark {
-	--highlight-hue-1: 280;
+	--highlight-hue-1: 50;
 	--highlight-sla-values: 85% 40% / 40%;
 }
 

source/style-settings.yaml

@@ -316,10 +316,16 @@ settings:
     description: Hue of ==highlighted text==
     markdown: true
     type: variable-number-slider
-    default: 280
+    default: 40
     min: 0
     max: 360
     step: 5
+  - id: uncolored-strikethroughs
+    title: Uncolored italic
+    markdown: true
+    description: "~~Strikethrough text~~ will use the standard text color instead of being red."
+    type: class-toggle
+    default: false
 
   #─────────────────────────────────────────────────────────────────────────────
   # Editor Content