Split icons to their own import + fixes to icons

DiscordStyles · Jul 13, 2023 · 749a8f7 · 749a8f7
1 parent 939b053
commit 749a8f7
Show file tree

Hide file tree

Showing 11 changed files with 375 additions and 240 deletions.
diff --git a/bd-scss.config.js b/bd-scss.config.js
@@ -10,5 +10,5 @@ export default {
 		authorId: '174868361040232448'
 	},
 	baseImport: 'https://discordstyles.github.io/Fluent/Fluent.css',
-	addons: [['src/addons/_selfmessages.scss', 'dist/SelfMessages.css']]
+	addons: [['src/addons/_icons.scss', 'dist/Icons.css']]
 };
diff --git a/src/addons/_icons.scss b/src/addons/_icons.scss
diff --git a/src/addons/_selfmessages.scss b/src/addons/_selfmessages.scss
diff --git a/src/theme/_index.scss b/src/theme/_index.scss
@@ -18,3 +18,5 @@
 @use './os';
 
 @use './betterdiscord';
+
+@use '../addons/icons';
diff --git a/src/theme/_vars.scss b/src/theme/_vars.scss
@@ -1,5 +1,5 @@
 :root {
-	--fluent-version: '1.1.2';
+	--fluent-version: '1.1.3';
 
 	--transition: cubic-bezier(0, 0, 0, 1);
 

diff --git a/src/theme/app/_icons.scss b/src/theme/app/_icons.scss
diff --git a/src/theme/app/_index.scss b/src/theme/app/_index.scss
@@ -3,5 +3,4 @@
 @forward './tooltips';
 @forward './scrollbars';
 @forward './toolbar';
-@forward './icons';
 @forward './tabbar';
diff --git a/src/theme/assets/_mono.scss b/src/theme/assets/_mono.scss
@@ -40,6 +40,9 @@ $pen: $svg + '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path
 $emoji_path: 'M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z';
 $emoji: $svg + '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="#{$emoji_path}" /></svg>';
 
+$emoji-laugh: $svg +
+	'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.75 12a.75.75 0 0 0-.748.818C6.282 15.892 8.552 18.5 12 18.5c3.448 0 5.717-2.608 5.998-5.682A.75.75 0 0 0 17.25 12H6.749ZM12 17c-2.257 0-3.871-1.48-4.368-3.5h8.736C15.872 15.52 14.258 17 12 17ZM15.25 8.75c-.408 0-.71.287-.758.61a.75.75 0 1 1-1.484-.22c.162-1.09 1.123-1.89 2.242-1.89s2.08.8 2.242 1.89a.75.75 0 1 1-1.484.22c-.048-.323-.35-.61-.758-.61ZM7.992 9.36c.048-.323.35-.61.758-.61.409 0 .71.287.758.61a.75.75 0 1 0 1.484-.22c-.161-1.09-1.123-1.89-2.242-1.89s-2.08.8-2.242 1.89a.75.75 0 0 0 1.484.22Z" /><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM3.5 12a8.5 8.5 0 1 1 17 0 8.5 8.5 0 0 1-17 0Z" /></svg>';
+
 $sticker_path: 'M17.75 3A3.25 3.25 0 0 1 21 6.25v6.879a2.25 2.25 0 0 1-.659 1.59l-5.621 5.622a2.25 2.25 0 0 1-1.591.659H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm0 1.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.784 1.75 1.75 1.75H13v-3.064a6.657 6.657 0 0 1-.673.066L12 16.51a6.334 6.334 0 0 1-3.678-1.14.75.75 0 1 1 .854-1.234c.845.584 1.78.874 2.824.874.462 0 .903-.057 1.324-.171a3.247 3.247 0 0 1 2.713-1.832l.213-.007H19.5V6.25a1.75 1.75 0 0 0-1.75-1.75Zm.689 10h-2.188c-.918 0-1.671.707-1.744 1.607l-.006.143-.001 2.189 3.939-3.939ZM9 7.751a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 7.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z';
 $sticker: $svg + '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="#{$sticker_path}" /></svg>';
 

diff --git a/src/theme/popouts/_index.scss b/src/theme/popouts/_index.scss
@@ -1,7 +1,6 @@
 @forward './popout';
 @forward './menu';
 @forward './currentuser';
-@forward './menuicons';
 @forward './serverdropdown';
 @forward './searchsuggestions';
 @forward './threads';

diff --git a/src/theme/popouts/_menu.scss b/src/theme/popouts/_menu.scss
@@ -79,12 +79,7 @@
 		border-radius: var(--rounded);
 		padding: 8px 12px;
 		cursor: var(--cursor);
-		flex-direction: row-reverse;
 		gap: 8px;
-
-		.label-3CEiKJ:only-child {
-			order: -1;
-		}
 		.iconContainer-Ksy8Oj {
 			margin: 0;
 			display: flex;
@@ -118,13 +113,6 @@
 			color: rgb(var(--accent));
 		}
 	}
-
-	[role='menuitemcheckbox'],
-	[role='menuitemradio'],
-	& > div > div:not([class]) + div:not([class]) .item-5ApiZt {
-		flex-direction: row;
-	}
-
 	// Reset
 	.submenuContainer-3EVTeH {
 		.item-5ApiZt {

diff --git a/src/theme/sidebar/_channel.scss b/src/theme/sidebar/_channel.scss
@@ -1,5 +1,3 @@
-@use '../assets/mono';
-
 #app-mount {
 	.wrapper-NhbLHG {
 		padding: 2px 0;
@@ -70,96 +68,6 @@
 		.iconBase-2G48Fc {
 			cursor: var(--cursor);
 		}
-
-		// Children icons
-		.actionIcon-2sw4Sl {
-			&:has(path[d^='M4.79805 3C3.80445 3 2.99805']) {
-				mask-image: url(mono.$chat);
-			}
-			&:has(path[d^='M6.5 8.00667C7.88 8.00667']) {
-				mask-image: url(mono.$user-add);
-			}
-			&:has(path[d^='M14 7V9C14 9 12.5867']) {
-				mask-image: url(mono.$cog);
-			}
-			&:hover {
-				background: var(--interactive-active);
-			}
-		}
-
-		// Channel icons
-		.icon-2W8DHg {
-			// Text channel
-			&:has(path[d^='M5.88657 21C5.57547']),
-			&:has(path[d^='M14 8C14 7.44772']),
-			&:has(path[d^='M5.43309 21C5.35842 21']) {
-				mask-image: url(mono.$chat);
-			}
-			// Announcements
-			&:has(path[d^='M19.1 4V5.12659L4.85']),
-			&:has(path[d^='M19.0999 3.99994V5.12653L4.84988']) {
-				mask-image: url(mono.$megaphone);
-			}
-			// Threads
-			&:has(path[d^='M6.56929 14.6869H2.34375C1.97079']) {
-				mask-image: url(mono.$chat-multiple);
-			}
-			// Voice
-			&:has(path[d^='M11.383 3.07904C11.009']),
-			&:has(path[d^='M15 12C15 12.0007 15']) {
-				mask-image: url(mono.$speaker);
-			}
-			// Rules
-			&:has(path[d^='M33 34.5833V7.49998H35V36.6666H9C6.791']) {
-				mask-image: url(mono.$important);
-			}
-			// Browse Channels
-			&:has(path[d^='M5.00328 17.5C4.69218 17.5']) {
-				mask-image: url(mono.$search);
-			}
-			// Events
-			&:has(path[d^='M14 13C14 14.1']) {
-				mask-image: url(mono.$rss);
-			}
-			// Ongoing events
-			&:has(path[d^='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11']) {
-				mask-image: url(mono.$calendar-clock);
-			}
-			// Locked channel
-			&:has(path[d^='M17 11V7C17 4.243']) {
-				mask-image: url(mono.$lock-closed);
-			}
-		}
-		// Channel modifiers (locked/threads)
-		.iconContainer-21RCa3 {
-			// Locked channel
-			&:has(path[d^='M21.025 5V4C21.025'])::before {
-				content: '';
-				mask: url(mono.$lock-closed-filled) center/cover;
-				top: -3px;
-				right: -2px;
-				position: absolute;
-				background: var(--interactive-normal);
-				display: block;
-				width: 12px;
-				height: 12px;
-				z-index: 1;
-			}
-			// Threads in that channel
-			&:has(path[d^='M5.43309 21C5.35842 21'])::before,
-			&:has(path[d^='M19.0999 3.99994V5.12653L4.84988'])::before {
-				mask: url(mono.$comment-multi-filled) center/cover;
-				bottom: -2px;
-				right: -2px;
-				content: '';
-				position: absolute;
-				background: var(--interactive-normal);
-				display: block;
-				width: 12px;
-				height: 12px;
-				z-index: 1;
-			}
-		}
 	}
 
 	// Browser Channels