Use short hands consistently across the theme (#212)

* 2 * var(--text-normal) now shorthand * ok discord I get it * Update friends.scss * Update variables.scss * Revert "Merge branch 'master' into pls-ignore-unless-nyx-or-leo" This reverts commit fcc10c4, reversing changes made to 8157424.
ClearVision · Oct 16, 2024 · 9785dda · 9785dda
1 parent aaa3091
commit 9785dda
Show file tree

Hide file tree

Showing 33 changed files with 81 additions and 75 deletions.
diff --git a/src/app/titlebar.scss b/src/app/titlebar.scss
@@ -6,8 +6,8 @@
   margin: 0;
   padding-top: 2px;
   padding-bottom: 2px;
-  background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.6));
-  box-shadow: 0 0 20px rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.6));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.6));
+  box-shadow: 0 0 20px rgba(0, 0, 0, calc($bg-shading * 0.6));
   > %titlebarWordmark {
     position: static;
     margin-right: auto;

diff --git a/src/channels/channels.scss b/src/channels/channels.scss
@@ -1,7 +1,7 @@
 /* CHANNELS */
 %channelsSidebar {
   width: cv('channels-width');
-  background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.3));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
   %platformWin & {
     border-radius: 0;
   }

diff --git a/src/channels/panels.scss b/src/channels/panels.scss
@@ -2,7 +2,7 @@
 %panels {
   background: transparent;
   > :first-child {
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.3));
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, calc($bg-shading * 0.3));
   }
 }
 %themeDark %panel {

diff --git a/src/channels/specialChannels.scss b/src/channels/specialChannels.scss
@@ -1,10 +1,10 @@
 /*CUSTOMIZE CHANNELS*/
 
 %customizeChannelsHeader {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6)) !important;
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6)) !important;
 }
 %customizeChannels {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.5)) !important;
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.5)) !important;
 }
 
 /*header*/
@@ -54,10 +54,10 @@
 }
 
 %browseChannelsRow {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
   &:hover {
     &:not(%browseChannelsDisabled) {
-      background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
+      background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
     }
   }
 }
@@ -111,7 +111,7 @@
   %serverGuideAction,
   %serverGuideSidebarCard,
   %serverGuideRow {
-    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+    background: rgba(0, 0, 0, calc($bg-shading * 0.4));
   }
   %serverGuideAction:hover {
     background: $hover-color;
@@ -140,7 +140,7 @@
 }
 /*Cases where we get taken to channels*/
 %serverGuideChannelHintBanner {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
 }
 %serverGuideChannelHintIcon {
   background: $main-color;

diff --git a/src/chat/call.scss b/src/chat/call.scss
@@ -1,8 +1,8 @@
 /* PRIVATE CALL */
 %callWrapper {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.8));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.8));
   &%callMinimum {
-    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.8));
+    background: rgba(0, 0, 0, calc($bg-shading * 0.8));
   }
 }
 %callContainer {
@@ -11,7 +11,7 @@
 
 // VIDEO STREAM
 %callTile {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.7));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.7));
 }
 %callInviteButton {
   background-color: $main-color;
@@ -52,7 +52,7 @@
 }
 
 %streamStillRunning {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.7));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.7));
 }
 
 // ACTION BUTTON

diff --git a/src/chat/chat.scss b/src/chat/chat.scss
@@ -9,7 +9,7 @@
 }
 %chatContent,
 %chatResize {
-  background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.5));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.5));
 }
 %chat {
   // CONTENT

diff --git a/src/chat/stageCall.scss b/src/chat/stageCall.scss
@@ -7,7 +7,7 @@
 
 // STAGE
 %stageContainer {
-  background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.5));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.5));
 }
 %stageCallContainer,
 %stageScroller {
@@ -63,9 +63,9 @@
   }
 }
 %stageOptionContainer {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
   &:hover {
-    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
+    background: rgba(0, 0, 0, calc($bg-shading * 0.6));
   }
 }
 %stageLeaveButton {
@@ -99,7 +99,7 @@
 
 // REQUESTS
 %stageRequestContainer {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
 }
 %stageIconBigBackground {
   background-color: $main-color;

diff --git a/src/fixespt2.scss b/src/fixespt2.scss
@@ -5,14 +5,14 @@ div.popoutList_da8701.phoneFieldPopout_ff761b.elevationBorderLow_ff8688 {
 
 // Security keys list https://discord.com/channels/212324635356692500/858733936800956427/1270769660039663636
 div.credentialList_eaef52 {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.4));
   border-radius: 4px;
 }
 div.name_d808b0 {
-  color: var(--text-normal);
+  color: $text-normal;
 }
 button.button_dd4f85.lookBlank_dd4f85.colorTransparent_dd4f85.sizeIcon_dd4f85.grow_dd4f85 {
-  color: var(--text-normal);
+  color: $text-normal;
 }
 div.credentialItem_eaef52.container_d808b0 {
   border-radius: 0px;

diff --git a/src/general/input.scss b/src/general/input.scss
@@ -3,7 +3,7 @@
   padding: 2px;
 }
 %input {
-  color: var(--text-normal);
+  color: $text-normal;
   background-color: hsla(0, 0%, 100%, 0.07);
   border: none;
   box-shadow: 0 0 0 2px hsla(0, 0%, 100%, 0.09);

diff --git a/src/general/scrollbar.scss b/src/general/scrollbar.scss
@@ -62,7 +62,7 @@
 %friendsTable {
   %scroller {
     &::-webkit-scrollbar-track-piece {
-      background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.3)) !important;
+      background-color: rgba(0, 0, 0, calc($bg-shading * 0.3)) !important;
     }
   }
 }

diff --git a/src/guilds/guilds.scss b/src/guilds/guilds.scss
@@ -19,7 +19,7 @@
   }
 }
 %guildsWrapper {
-  box-shadow: inset 0 0 20px rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.3));
+  box-shadow: inset 0 0 20px rgba(0, 0, 0, calc($bg-shading * 0.3));
 }
 
 // HOME BUTTON
@@ -144,5 +144,5 @@
 
 // FOOTER - currently only in experiments
 %guildsFooter {
-  background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.3));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
 }
diff --git a/src/headerBar/headerBar.scss b/src/headerBar/headerBar.scss
@@ -2,13 +2,13 @@
 %base {
   %headerBar {
     height: 48px;
-    background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.6));
-    box-shadow: 0 0 10px rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.6));
+    background: rgba(0, 0, 0, calc($bg-shading * 0.6));
+    box-shadow: 0 0 10px rgba(0, 0, 0, calc($bg-shading * 0.6));
     color: hsla(0, 0%, 100%, 0.5);
   }
   %threadHeaderBar {
-    background: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.6));
-    box-shadow: 0 0 10px rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.6));
+    background: rgba(0, 0, 0, calc($bg-shading * 0.6));
+    box-shadow: 0 0 10px rgba(0, 0, 0, calc($bg-shading * 0.6));
     color: hsla(0, 0%, 100%, 0.5);
   }
 }

diff --git a/src/home/friends.scss b/src/home/friends.scss
@@ -7,7 +7,7 @@
 
 // FRIENDS COLUMN
 %friendsColumn {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
 }
 %friendsSearch {
   background-color: hsla(0, 0%, 100%, 0.07);
@@ -117,7 +117,7 @@
 
 // NOW PLAYING
 %nowPlayingColumn {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
 }
 %nowPlayingColumnContainer {
   background-color: transparent;
@@ -166,8 +166,8 @@
   background-color: hsla(0, 0%, 0%, 0.4);
 }
 %promotedQuestPill {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.8));
-  color: var(--text-normal);
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.8));
+  color: $text-normal;
 }
 
 // DM USER PROFILE

diff --git a/src/home/nitro.scss b/src/home/nitro.scss
@@ -4,7 +4,7 @@
 }
 %nitroScroller,
 %nitroPremiumScroller {
-  background-color: rgba(0, 0, 0, calc(#{cv('bg.app.shading')} * 0.5));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.5));
   right: 0%;
   transition: all 0.5s ease-in-out;
   &:has(+ %nitroPerksScroller%nitroPerksScrollerOpen) {
@@ -32,7 +32,7 @@
 
 // PERKS PAGE
 %nitroPerksScroller {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
   transition: all 0.5s ease-in-out;
 }
 %nitroPerksBackButton {

diff --git a/src/home/requests.scss b/src/home/requests.scss
@@ -7,5 +7,5 @@
 }
 /*was it spam*/
 %messageReqSpamCheck {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
 }
diff --git a/src/injectors/bd/plugins.scss b/src/injectors/bd/plugins.scss
@@ -75,7 +75,7 @@ div#magane div.stickerWindow div.packs-toolbar {
 #MemberCount {
   background: transparent;
   h3 {
-    color: var(--text-normal);
+    color: $text-normal;
     padding: 12px 0;
     flex-direction: column;
     font-size: 11px;

diff --git a/src/injectors/ven/plugins.scss b/src/injectors/ven/plugins.scss
@@ -1,6 +1,6 @@
 /*Shiki code blocks*/
 .shiki-plain {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.2)) !important;
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.2)) !important;
 }
 
 .shiki-container {

diff --git a/src/injectors/ven/venSettings.scss b/src/injectors/ven/venSettings.scss
@@ -28,12 +28,12 @@
 // vencord quick action pills
 .vc-settings-quickActions-pill {
   background: rgba(0, 0, 0, 0.4);
-  color: var(--text-normal);
+  color: $text-normal;
   border: 1px solid $main-color;
   transition: all 0.5s ease-in-out;
 }
 .vc-settings-quickActions-pill:hover {
   background: $hover-color;
-  color: var(--text-normal);
+  color: $text-normal;
   border: transparent;
 }
diff --git a/src/members/members.scss b/src/members/members.scss
@@ -235,10 +235,10 @@
 }
 // MEMBERS ACTIVITY SECTION (as opposed to just the text under members)
 %memberActivityContainer {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
   border: 2px solid transparent;
   &:hover {
-    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+    background: rgba(0, 0, 0, calc($bg-shading * 0.4));
     border: 2px solid $hover-color;
   }
 }
diff --git a/src/messages/message.scss b/src/messages/message.scss
@@ -24,7 +24,7 @@
 
   // CONTENT
   %messageContent {
-    color: var(--text-normal);
+    color: $text-normal;
   }
   %messageSystemContainer {
     color: hsla(0, 0%, 100%, 0.5);

diff --git a/src/messages/poll.scss b/src/messages/poll.scss
@@ -1,5 +1,5 @@
 %poll {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
 }
 /* selection */
 %pollAnswerSelectionIcon %pollRadioForeground {

diff --git a/src/modals/otherModals.scss b/src/modals/otherModals.scss
@@ -147,7 +147,7 @@
   background: rgba(0, 0, 0, 0.4);
 }
 %activityTag {
-  background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.5));
+  background-color: rgba(0, 0, 0, calc($bg-shading * 0.5));
 }
 %activityItem {
   background: rgba(0, 0, 0, 0.4);
@@ -197,7 +197,7 @@
     }
   }
   %soundboardHint {
-    background: rgba(0, 0, 0, calc(var(--background-shading) * 0.3));
+    background: rgba(0, 0, 0, calc($bg-shading * 0.3));
   }
 }
 
@@ -252,7 +252,7 @@
 }
 %webhookEmojiRow {
   background-color: $main-color;
-  color: var(--text-normal) !important;
+  color: $text-normal !important;
 }
 %webhookBackground:after {
   background: var(--background-overlay);

diff --git a/src/pages/appDirectory.scss b/src/pages/appDirectory.scss
@@ -13,27 +13,27 @@
 
 // HOME PAGE
 %directoryCategory {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
   &:hover {
     background: $hover-color;
   }
 }
 %directoryCard,
 %directoryNewToApps {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
 }
 %directoryListCard {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
   &%directoryCardClickable:hover {
-    background-color: rgba(0, 0, 0, calc(var(--background-shading) * 0.6));
+    background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
     color: #fff;
     %textMediumNormal {
       color: #fff;
     }
   }
 }
 %directoryFooter {
-  background: rgba(0, 0, 0, calc(var(--background-shading) * 0.4));
+  background: rgba(0, 0, 0, calc($bg-shading * 0.4));
 }
 
 // SEARCH