Merge pull request #127 from maicol07/main

refactor: Allow other formats for CSS variables
DiscordStyles · Jul 4, 2024 · 3b716fb · 3b716fb
2 parents ee0f8b2 + 20febe0
commit 3b716fb
Show file tree

Hide file tree

Showing 30 changed files with 57 additions and 58 deletions.
diff --git a/src/core/_root.scss b/src/core/_root.scss
@@ -1,9 +1,9 @@
 :root {
-	--accent: 98, 205, 254; /* The colour used throughout the app | R,G,B format | Default: 98, 205, 254 */
+	--accent: rgb(98, 205, 254); /* The colour used throughout the app | Default: 98, 205, 254 */
 
 	--channels-width: 300px; /* Size of the server channel/dms list | Default: 300px */
 	--members-width: 280px; /* Size of the members list | Default: 280px */
 
 	--dark-background-hue: 0; /* The hue of the background colour. | Options: 0 to 360 | Default: 0 */
 	--dark-background-saturation: 0%; /* How much of the colour should be visible. | Must end in a % | Default: 0% */
-}
+}
diff --git a/src/theme/_vars.scss b/src/theme/_vars.scss
@@ -4,7 +4,7 @@
 	--transition: cubic-bezier(0, 0, 0, 1);
 
 	--accent-text: #000;
-	--accent-solid: rgb(var(--accent));
+	--accent-solid: var(--accent);
 
 	--pill-width: 4px;
 	--pill-height: 16px;
@@ -79,5 +79,5 @@
 	--text-normal: var(--text-primary);
 	--text-muted: var(--text-tertiary);
 	--interactive-muted: var(--text-quaternary);
-	--text-link: rgb(var(--accent));
+	--text-link: var(--accent);
 }
diff --git a/src/theme/app/_tabbar.scss b/src/theme/app/_tabbar.scss
@@ -21,7 +21,7 @@
 			display: block;
 			opacity: 0;
 			border-radius: 30px;
-			background: rgb(var(--accent));
+			background: var(--accent);
 			position: absolute;
 			bottom: 0;
 			left: 50%;

diff --git a/src/theme/app/_toolbar.scss b/src/theme/app/_toolbar.scss
@@ -80,7 +80,7 @@
 			background: var(--bg-alt);
 			&::before {
 				height: 2px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 			}
 		}
 	}

diff --git a/src/theme/betterdiscord/_input.scss b/src/theme/betterdiscord/_input.scss
@@ -42,8 +42,8 @@
 				width: 18px;
 			}
 			&:checked {
-				background: rgb(var(--accent));
-				border-color: rgb(var(--accent));
+				background: var(--accent);
+				border-color: var(--accent);
 				&::before {
 					background: var(--accent-text);
 					transform: translateX(18px);

diff --git a/src/theme/chat/_forum.scss b/src/theme/chat/_forum.scss
@@ -48,7 +48,7 @@
 			background: var(--bg-interactive-high);
 		}
 		&#{cls('forum.card.selected')} {
-			border-color: rgb(var(--accent));
+			border-color: var(--accent);
 		}
 	}
 

diff --git a/src/theme/chat/_message.scss b/src/theme/chat/_message.scss
@@ -27,9 +27,9 @@
 		padding: 8px 16px 16px 16px;
 	}
 	.mentioned_d5deea {
-		background: rgb(var(--chat-mention-colour), 0.05);
+		background: rgb(from var(--chat-mention-colour) r g b / 5%);
 		&::before {
-			background: rgb(var(--chat-mention-colour));
+			background: var(--chat-mention-colour);
 		}
 
 		&.groupStart_d5deea .contents_ec86aa {
@@ -125,8 +125,8 @@
 
 	// @Mention/Link Channel
 	.wrapper_d4fa29 {
-		background: rgb(var(--accent), 0.1);
-		color: rgb(var(--accent));
+		background: rgb(from var(--accent) r g b / 10%);
+		color: var(--accent);
 		font-weight: var(--font-weight-semibold);
 		cursor: default;
 		&:hover {
@@ -145,9 +145,9 @@
 			background: var(--bg-interactive-high);
 		}
 		&.reactionMe_ec6b19 {
-			border-color: rgb(var(--accent));
-			.reactionCount_ec6b19 {
-				color: rgb(var(--accent));
+			border-color: var(--accent);
+			.reactionCount__2c34d {
+				color: var(--accent);
 			}
 		}
 	}
@@ -196,5 +196,5 @@
 
 // Light theme
 .theme-light #app-mount .mentioned_d5deea {
-	background: rgb(var(--accent), 0.15);
+	background: rgb(from var(--accent) r g b / 15%);
 }
diff --git a/src/theme/chat/_textbox.scss b/src/theme/chat/_textbox.scss
@@ -30,7 +30,7 @@
 			background: var(--bg-content-alt);
 			.inner_d0696b::before {
 				height: 2px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 			}
 		}
 	}

diff --git a/src/theme/guilds/_server.scss b/src/theme/guilds/_server.scss
@@ -34,7 +34,7 @@
 			@for $i from 21 through 40 {
 				span[style*='height: #{$i}'] {
 					transform: scale(1, 1) !important;
-					background: rgb(var(--accent));
+					background: var(--accent);
 				}
 			}
 		}

diff --git a/src/theme/inputs/_button.scss b/src/theme/inputs/_button.scss
@@ -21,9 +21,8 @@
 			align-items: center;
 			gap: 8px;
 		}
-
 		&.buttonColor_adcaac {
-			background: rgb(var(--accent));
+			background: var(--accent);
 			color: var(--accent-text);
 		}
 		&.lookFilled_dd4f85 {
@@ -34,7 +33,7 @@
 			transition: box-shadow 0.15s var(--transition);
 			&.colorBrand_dd4f85,
 			&.colorGreen-3y-Z79 {
-				background: rgb(var(--accent));
+				background: var(--accent);
 				color: var(--accent-text);
 			}
 			&.colorRed_dd4f85 {
@@ -104,7 +103,7 @@
 		}
 		&.lookLink_dd4f85 {
 			cursor: pointer;
-			color: rgb(var(--accent));
+			color: var(--accent);
 			.contents_dd4f85 {
 				background: none;
 			}

diff --git a/src/theme/inputs/_checkboxes.scss b/src/theme/inputs/_checkboxes.scss
@@ -24,8 +24,8 @@
 		display: none;
 	}
 	&[aria-checked='true'] .iconContainer_d90b3d {
-		border-color: rgb(var(--accent));
-		background: rgb(var(--accent));
+		border-color: var(--accent);
+		background: var(--accent);
 		&::before {
 			opacity: 1;
 		}

diff --git a/src/theme/inputs/_radio.scss b/src/theme/inputs/_radio.scss
@@ -19,8 +19,8 @@
 		display: none;
 	}
 	&[aria-checked='true'] .iconContainer_d90b3d {
-		border-color: rgb(var(--accent));
-		background: rgb(var(--accent));
+		border-color: var(--accent);
+		background: var(--accent);
 		&::before {
 			opacity: 1;
 		}

diff --git a/src/theme/inputs/_select.scss b/src/theme/inputs/_select.scss
@@ -63,7 +63,7 @@
 				transform: translateY(-50%);
 				width: 3px;
 				height: var(--pill-height);
-				background: rgb(var(--accent));
+				background: var(--accent);
 				border-radius: 30%;
 			}
 		}

diff --git a/src/theme/inputs/_slider.scss b/src/theme/inputs/_slider.scss
@@ -3,15 +3,15 @@
 		height: 4px;
 	}
 	.barFill_c7a159 {
-		background: rgb(var(--accent));
+		background: var(--accent);
 	}
 	.track_c7a159 {
 		left: 10px;
 	}
 	.grabber_c7a159 {
 		border: 4px solid var(--bg-highest);
 		margin-top: 0;
-		background: rgb(var(--accent));
+		background: var(--accent);
 		box-shadow: var(--shadow-flyout);
 		width: 20px;
 		height: 20px;

diff --git a/src/theme/inputs/_steps.scss b/src/theme/inputs/_steps.scss
@@ -1,8 +1,8 @@
 #app-mount .container-2uPlB3 {
 	.selectedProgressBar-11z5d9 {
-		background: rgb(var(--accent));
+		background: var(--accent);
 	}
 	.colorBrand-21Le_q {
-		color: rgb(var(--accent));
+		color: var(--accent);
 	}
 }
diff --git a/src/theme/inputs/_switch.scss b/src/theme/inputs/_switch.scss
@@ -46,8 +46,8 @@
 			width: 18px;
 		}
 		&:checked {
-			background: rgb(var(--accent));
-			border-color: rgb(var(--accent));
+			background: var(--accent);
+			border-color: var(--accent);
 			&::before {
 				background: var(--accent-text);
 				transform: translateX(18px);

diff --git a/src/theme/inputs/_textbox.scss b/src/theme/inputs/_textbox.scss
@@ -25,8 +25,8 @@
 		&:focus,
 		&:focus-within {
 			background: var(--textbox-bg-active) !important;
-			box-shadow: inset 0 -1px 0 rgb(var(--accent));
-			border-bottom-color: rgb(var(--accent));
+			box-shadow: inset 0 -1px 0 var(--accent);
+			border-bottom-color: var(--accent);
 		}
 	}
 	.input-2g-os5.textArea-3WXAeD {

diff --git a/src/theme/members/_member.scss b/src/theme/members/_member.scss
@@ -19,7 +19,7 @@
 			height: 0;
 			left: 0;
 			opacity: 0;
-			background: rgb(var(--accent));
+			background: var(--accent);
 			transition: var(--pill-transition);
 		}
 	}

diff --git a/src/theme/mixins/_btn.scss b/src/theme/mixins/_btn.scss
@@ -29,20 +29,20 @@
 }
 
 @mixin btnPrimary {
-	background: rgb(var(--accent));
+	background: var(--accent);
 	color: var(--accent-text);
 	transition: box-shadow 0.15s var(--transition);
 	font-weight: var(--font-weight-semibold);
 	border: 1px solid var(--btn-border-x);
 	border-top-color: var(--btn-border-t);
 	border-bottom-color: var(--btn-border-b);
 	&:hover {
-		background: rgb(var(--accent));
+		background: var(--accent);
 		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.1) !important;
 		border-color: hsl(0 0% 0% / 0.1);
 	}
 	&:active {
-		background: rgb(var(--accent));
+		background: var(--accent);
 		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.2) !important;
 		border-color: hsl(0 0% 0% / 0.2);
 	}

diff --git a/src/theme/modals/_quickswitcher.scss b/src/theme/modals/_quickswitcher.scss
@@ -45,8 +45,8 @@
 		&:focus,
 		&:focus-within {
 			background: var(--textbox-bg-active) !important;
-			box-shadow: inset 0 -1px 0 rgb(var(--accent));
-			border-bottom-color: rgb(var(--accent));
+			box-shadow: inset 0 -1px 0 var(--accent);
+			border-bottom-color: var(--accent);
 		}
 	}
 
@@ -75,7 +75,7 @@
 				transform: translateY(-50%);
 				width: var(--pill-width);
 				height: 0;
-				background: rgb(var(--accent));
+				background: var(--accent);
 				border-radius: 30px;
 				opacity: 0;
 				transition: var(--pill-transition);

diff --git a/src/theme/pages/_friends.scss b/src/theme/pages/_friends.scss
@@ -47,7 +47,7 @@
 				background: var(--bg-content-alt);
 				&::before {
 					height: 2px;
-					background: rgb(var(--accent));
+					background: var(--accent);
 				}
 			}
 		}
@@ -74,7 +74,7 @@
 			display: block;
 			height: 0;
 			width: var(--pill-width);
-			background: rgb(var(--accent));
+			background: var(--accent);
 			border-radius: 50px;
 			transition: var(--pill-transition);
 			opacity: 0;

diff --git a/src/theme/popouts/_autocomplete.scss b/src/theme/popouts/_autocomplete.scss
@@ -33,7 +33,7 @@
 				width: var(--pill-width);
 				height: 0;
 				border-radius: 30px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 				opacity: 0;
 				transition: var(--pill-transition);
 			}

diff --git a/src/theme/popouts/_emojipicker.scss b/src/theme/popouts/_emojipicker.scss
@@ -38,7 +38,7 @@
 				display: block;
 				opacity: 0;
 				border-radius: 30px;
-				background: rgb(var(--accent));
+				background: var(--accent);
 				position: absolute;
 				bottom: 0;
 				left: 50%;
@@ -92,8 +92,8 @@
 		}
 		&:focus-within {
 			background: var(--textbox-bg-high-active) !important;
-			box-shadow: inset 0 -1px 0 rgb(var(--accent));
-			border-bottom-color: rgb(var(--accent));
+			box-shadow: inset 0 -1px 0 var(--accent);
+			border-bottom-color: var(--accent);
 		}
 	}
 

diff --git a/src/theme/popouts/_menu.scss b/src/theme/popouts/_menu.scss
@@ -110,7 +110,7 @@
 			color: hsl(var(--discord-pink));
 		}
 		&.colorBrand-3cPPsm {
-			color: rgb(var(--accent));
+			color: var(--accent);
 		}
 	}
 	// Reset

diff --git a/src/theme/settings/_container.scss b/src/theme/settings/_container.scss
@@ -93,7 +93,7 @@
 				}
 
 				.selectedBackground-1qyzak {
-					background: rgb(var(--accent));
+					background: var(--accent);
 				}
 
 				// ~~Disabled icons (for now hopefully)
@@ -112,7 +112,7 @@
 					height: 0;
 					width: 4px;
 					border-radius: 4px;
-					background: rgb(var(--accent));
+					background: var(--accent);
 					opacity: 0;
 					transition: 0.15s var(--transition);
 				}

diff --git a/src/theme/settings/guild/_roles.scss b/src/theme/settings/guild/_roles.scss
@@ -124,7 +124,7 @@
 				left: 0;
 				top: 50%;
 				transform: translateY(-50%);
-				background: rgb(var(--accent));
+				background: var(--accent);
 				width: var(--pill-width);
 				height: 0;
 				opacity: 0;

diff --git a/src/theme/sidebar/_channel.scss b/src/theme/sidebar/_channel.scss
@@ -31,7 +31,7 @@
 		}
 		&.modeSelected_d8bfb3 {
 			&::before {
-				background: rgb(var(--accent));
+				background: var(--accent);
 				scale: 1;
 			}
 			.link_d8bfb3 {

diff --git a/src/theme/sidebar/_dms.scss b/src/theme/sidebar/_dms.scss
@@ -74,7 +74,7 @@
 			&::before {
 				scale: 1;
 				opacity: 1;
-				background: rgb(var(--accent));
+				background: var(--accent);
 			}
 			&:hover {
 				background: var(--bg-interactive-high-hover);