Fix: Bugs Tnixc found and hopefully the rest (#235)

catppuccin · Oct 25, 2023 · 34f9e94 · 34f9e94
1 parent c14a1b2
commit 34f9e94
Show file tree

Hide file tree

Showing 9 changed files with 292 additions and 284 deletions.
diff --git a/src/catppuccin-latte.theme.scss b/src/catppuccin-latte.theme.scss
@@ -262,7 +262,7 @@ button[class*="emojiButtonNormal"] > div > div {
   --interactive-active: #{$text};
 
   // "spine" svgs before threads
-  svg[class|="spine"] {
+  svg[class^="spine"] {
     color: $surface2;
   }
 
@@ -308,12 +308,12 @@ nav[class*="guilds-"].theme-dark {
   @import "@catppuccin/palette/scss/mocha";
 
   // server icons
-  foreignObject > div[data-list-item-id|="guildsnav_"] {
+  foreignObject > div[data-list-item-id^="guildsnav_"] {
     background-color: lighten($base, 2%);
 
     &:hover,
     &[class*="selected"] {
-      > div[class|="childWrapper"] {
+      > div[class^="childWrapper"] {
         color: $crust;
         font-weight: 600;
       }
@@ -326,10 +326,10 @@ nav[class*="guilds-"].theme-dark {
   }
 
   // lightens folder wrapper bg
-  span[class|="expandedFolderBackground"] {
+  span[class^="expandedFolderBackground"] {
     background-color: lighten($base, 3%);
   }
-  div[class|="folder"][class*="hover-"] {
+  div[class^="folder"][class*="hover-"] {
     background-color: lighten($base, 8%);
   }
 
@@ -340,8 +340,8 @@ nav[class*="guilds-"].theme-dark {
   }
 
   // server list icons
-  div[class|="upperBadge"] {
-    > div[class|="iconBadge"] {
+  div[class^="upperBadge"] {
+    > div[class^="iconBadge"] {
       path {
         color: $base;
       }

diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
@@ -9,7 +9,7 @@
     color: $crust;
 
     // darken the nitro button too
-    svg[class|="premiumIcon"] {
+    svg[class^="premiumIcon"] {
       color: darken($pink, 20%);
     }
 
@@ -30,11 +30,11 @@
 }
 
 // For some reason, red buttons on click turn blue. Sure.
-button[class*="lookFilled-"][class*="colorRed_"]:active {
+button[class*="lookFilled_"][class*="colorRed_"]:active {
   background-color: $red;
 }
 
-[class*="lookOutlined-"][class*="colorPrimary_"] {
+[class*="lookOutlined_"][class*="colorPrimary_"] {
   border-color: $surface1;
 
   &:hover {
@@ -45,9 +45,9 @@ button[class*="lookFilled-"][class*="colorRed_"]:active {
 }
 
 // buttons in sidebar when in calls
-div[class|="actionButtons"] {
-  [class|="button"][class*="buttonColor_"],
-  [class|="button"] [class*="buttonColor_"] {
+div[class^="actionButtons"] {
+  [class^="button"][class*="buttonColor_"],
+  [class^="button"] [class*="buttonColor_"] {
     background-color: $surface1;
 
     &[class*="buttonActive_"] {
@@ -66,29 +66,29 @@ div[class|="actionButtons"] {
 }
 
 // lookInverted buttons should have darker brand text
-[class*="lookInverted-"][class*="colorBrand_"] {
+[class*="lookInverted_"][class*="colorBrand_"] {
   color: var(--brand-experiment-600);
 
   // darken the nitro button too
-  svg[class|="premiumIcon"] {
+  svg[class^="premiumIcon"] {
     color: darken($pink, 15%);
   }
 }
 
 // lookLink + colorPrimary should be themed
 .theme-dark,
 .theme-light {
-  [class*="lookLink-"][class*="colorPrimary_"] {
+  [class*="lookLink_"][class*="colorPrimary_"] {
     color: $text;
   }
-  [class*="lookFilled-"][class*="colorTransparent_"] {
+  [class*="lookFilled_"][class*="colorTransparent_"] {
     color: $text;
     background-color: $surface0;
   }
 }
 
 // dangerous button when hovered is colored properly
-div[class*="button-"][class*="dangerous_"]:hover {
+div[class*="button_"][class*="dangerous_"]:hover {
   color: darken($red, 10%);
 }
 
@@ -102,12 +102,12 @@ div[role="radio"][class*="selected"] {
   }
 }
 //nonspecific radio buttons
-[class*="container-"][style*="background-color: var(--green_360)"] {
+[class*="container_"][style*="background_color: var(__green_360)"] {
   --green-360: #{$green}; //vencord plugin settings
   background-color: $green !important;
 }
-[class*="container-"][style*="background-color: var(--primary_400)"],
-[class*="container-"][style*="background_color: rgb(130, 133, 143)"] {
+[class*="container_"][style*="background_color: var(__primary_400)"],
+[class*="container_"][style*="background_color: rgb(130, 133, 143)"] {
   background-color: $crust !important; //used in a lot of places
 }
 // vencord spotify plugin button theming support (uses vencord-specific classes)