add flavors!

refact0r · Jul 22, 2024 · 9f7c079 · 9f7c079
1 parent f1397a1
commit 9f7c079
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 25 deletions.
diff --git a/flavors/spicetify-text.theme.css b/flavors/spicetify-text.theme.css
@@ -0,0 +1,73 @@
+/**
+ * @name system24 (spicetify text theme)
+ * @description A tui-style discord theme. Settings configured to match the spicetify text theme.
+ * @author refact0r
+ * @version 1.0.0
+ * @invite nz87hXyvcy
+ * @website https://github.com/refact0r/system24
+ * @source https://github.com/refact0r/system24/blob/master/flavors/text.theme.css 
+ * @authorId 508863359777505290
+ * @authorLink https://www.refact0r.dev
+*/
+
+@import url('https://refact0r.github.io/system24/system24.css');
+
+/* customize things here */
+:root {
+	--font: 'DM Mono';
+	letter-spacing: 0;
+	font-weight: 400;
+	--label-font-weight: 400;
+
+	--corner-text: 'system24';
+
+	--pad: 16px;
+	--txt-pad: 10px;
+
+	--bg-0: hsl(0, 0%, 7%);
+	--bg-1: hsl(0, 0%, 10%);
+	--bg-2: hsl(0, 0%, 13%);
+	--bg-3: hsl(0, 0%, 16%);
+
+	--hover: hsla(0, 0%, 40%, 0.1);
+	--active: hsla(0, 0%, 40%, 0.2);
+	--selected: var(--active);
+
+	--txt-dark: var(--bg-0);
+	--txt-link: var(--cyan);
+	--txt-0: hsl(0, 0%, 100%);
+	--txt-1: hsl(0, 0%, 70%);
+	--txt-2: hsl(0, 0%, 50%);
+	--txt-3: hsl(0, 0%, 30%);
+
+	--acc-0: #1ed760;
+	--acc-1: #1db954;
+	--acc-2: var(--purple-2);
+
+	--border-width: 1px;
+	--border-color: #535353;
+	--border-hover-color: #1ed760;
+	--border-transition: 0.2s ease;
+
+	--online-dot: var(--green);
+	--dnd-dot: var(--pink);
+	--idle-dot: var(--yellow);
+	--streaming-dot: var(--purple);
+
+	--mention-txt: var(--acc-0);
+	--mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%);
+	--mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%);
+	--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%);
+	--reply-overlay: var(--active);
+	--reply-hover-overlay: var(--hover);
+
+	--pink: oklch(73% 0.12 0);
+	--pink-1: oklch(63% 0.12 0);
+	--pink-2: oklch(53% 0.12 0);
+	--purple: oklch(73% 0.12 300);
+	--purple-1: oklch(63% 0.12 300);
+	--purple-2: oklch(53% 0.12 300);
+	--cyan: oklch(73% 0.12 200);
+	--yellow: oklch(78% 0.12 80);
+	--green: oklch(73% 0.12 160);
+}
diff --git a/system24.css b/system24.css
@@ -27,27 +27,27 @@
 	--txt-2: oklch(60% 0 0);
 	--txt-3: oklch(40% 0 0);
 
-	--mention-txt: var(--purple);
-	--mention-bg: color-mix(in oklch, var(--purple), transparent 90%);
-	--mention-overlay: color-mix(in oklch, var(--purple), transparent 90%);
-	--mention-hover-overlay: color-mix(
-		in oklch,
-		var(--purple),
-		transparent 95%
-	);
-	--reply-overlay: var(--active);
-	--reply-hover-overlay: var(--hover);
+	--acc-0: var(--purple);
+	--acc-1: var(--purple-1);
+	--acc-2: var(--purple-2);
 
 	--border-width: 2px;
 	--border-color: var(--bg-3);
-	--border-hover-color: var(--purple);
+	--border-hover-color: var(--acc-0);
 	--border-transition: 0.2s ease;
 
 	--online-dot: var(--green);
 	--dnd-dot: var(--pink);
 	--idle-dot: var(--yellow);
 	--streaming-dot: var(--purple);
 
+	--mention-txt: var(--acc-0);
+	--mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%);
+	--mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%);
+	--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%);
+	--reply-overlay: var(--active);
+	--reply-hover-overlay: var(--hover);
+
 	--pink: oklch(73% 0.12 0);
 	--pink-1: oklch(63% 0.12 0);
 	--pink-2: oklch(53% 0.12 0);
@@ -93,6 +93,11 @@
 [class*=embedFull_] /* embed default color */ {
 	border-color: var(--bg-2);
 }
+/* fix text */
+[class^='newChannel_'],
+[class^='newBadge_'] {
+	color: var(--bg-0);
+}
 /* fix white-500 */
 [class*=lookFilled_][class*=colorPrimary_] /* neutral buttons (like in account settings) */,
 #app-mount [class*=lookLink_][class*=colorPrimary_] /* link buttons (like in account settings) */,
@@ -125,7 +130,7 @@
 }
 /* accents */
 svg[style='color: rgb(88, 101, 242);'] /* folder icons */ {
-	color: var(--purple) !important;
+	color: var(--acc-0) !important;
 }
 [class^='folderIconWrapper_'][style='background-color: rgba(88, 101, 242, 0.4);'] {
 	background: var(--bg-1) !important;
@@ -140,7 +145,7 @@ svg[class^=slider_] > rect[fill='white'] /* settings checkbuttons slider */ {
 	background: var(--txt-1);
 }
 [class^=message_][class*=mentioned_]::before /* mention message left bar */ {
-	background: var(--purple);
+	background: var(--acc-0);
 }
 
 /* add spacing */
@@ -911,10 +916,10 @@ html.theme-light {
 
 	--elevation-low: none;
 
-	--brand-500: var(--purple); /* unread bar, accent buttons, spotify */
-	--brand-530: var(--purple); /* hover highlight in context menu */
-	--brand-560: var(--purple-1); /* accent button hover */
-	--brand-600: var(--purple-2); /* accent button active */
+	--brand-500: var(--acc-0); /* unread bar, accent buttons, spotify */
+	--brand-530: var(--acc-0); /* hover highlight in context menu */
+	--brand-560: var(--acc-1); /* accent button hover */
+	--brand-600: var(--acc-2); /* accent button active */
 
 	--primary-500: var(--bg-2); /* neutral button background */
 	--primary-800: var(--bg-1); /* bot command panel suggestion argument */
@@ -929,5 +934,5 @@ html.theme-light {
 
 	--green-360: var(--green); /* vc icon on server */
 
-	--twitch: var(--purple-1);
+	--twitch: var(--acc-1);
 }
diff --git a/system24.theme.css b/system24.theme.css
@@ -40,23 +40,27 @@
 	--txt-2: oklch(60% 0 0);
 	--txt-3: oklch(40% 0 0);
 
-	--mention-txt: var(--purple);
-	--mention-bg: color-mix(in srgb, var(--purple), transparent 90%);
-	--mention-overlay: color-mix(in srgb, var(--purple), transparent 90%);
-	--mention-hover-overlay: color-mix(in srgb, var(--purple), transparent 95%);
-	--reply-overlay: var(--active);
-	--reply-hover-overlay: var(--hover);
+	--acc-0: var(--purple);
+	--acc-1: var(--purple-1);
+	--acc-2: var(--purple-2);
 
 	--border-width: 2px;
 	--border-color: var(--bg-3);
-	--border-hover-color: var(--purple);
+	--border-hover-color: var(--acc-0);
 	--border-transition: 0.2s ease;
 
 	--online-dot: var(--green);
 	--dnd-dot: var(--pink);
 	--idle-dot: var(--yellow);
 	--streaming-dot: var(--purple);
 
+	--mention-txt: var(--acc-0);
+	--mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%);
+	--mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%);
+	--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%);
+	--reply-overlay: var(--active);
+	--reply-hover-overlay: var(--hover);
+
 	--pink: oklch(73% 0.12 0);
 	--pink-1: oklch(63% 0.12 0);
 	--pink-2: oklch(53% 0.12 0);