From 2d5ad57657e088bcb3018b008b31cb72ac028fdb Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Wed, 10 Dec 2025 01:40:31 -0500
Subject: [PATCH] this brings back most of the color I think

---
 src/api/Notifications/styles.css              |  6 +-
 src/components/Button.css                     | 76 +++++++++----------
 src/components/Card.css                       |  6 +-
 src/components/ErrorCard.css                  |  6 +-
 src/components/Switch.css                     |  2 +-
 src/components/ThemeSettings/themesStyles.css |  6 +-
 src/components/settings/AddonCard.css         |  5 +-
 src/components/settings/QuickAction.css       |  4 +-
 .../settings/tabs/changelog/styles.css        | 30 ++++----
 .../settings/tabs/plugins/UIElements.css      |  6 +-
 .../settings/tabs/plugins/styles.css          | 40 +++++-----
 src/components/settings/tabs/styles.css       | 16 ++--
 .../settings/tabs/updater/Components.tsx      |  2 +-
 .../settings/tabs/vencord/VencordTab.css      |  4 +-
 .../betterBanReasons/styles.css               |  4 +-
 .../channelTabs/components/ChannelTab.tsx     |  2 +-
 src/equicordplugins/channelTabs/style.css     | 28 +++----
 src/equicordplugins/commandPalette/style.css  |  6 +-
 src/equicordplugins/customSounds/styles.css   |  2 +-
 .../customTimestamps/style.css                |  8 +-
 src/equicordplugins/fontLoader/styles.css     |  2 +-
 src/equicordplugins/ghosted/styles.css        |  2 +-
 src/equicordplugins/githubRepos/styles.css    | 10 +--
 .../components/icons/overFlowIcon.tsx         |  2 +-
 src/equicordplugins/holyNotes/style.css       |  4 +-
 src/equicordplugins/iconViewer/IconsTab.css   | 12 +--
 src/equicordplugins/ignoreCalls/index.tsx     |  2 +-
 .../keyboardNavigation/components/style.css   | 10 +--
 src/equicordplugins/loginWithQR/ui/styles.css |  4 +-
 .../mediaPlaybackSpeed/styles.css             |  4 +-
 .../messageLoggerEnhanced/styles.css          |  6 +-
 .../moreStickers/components/picker.tsx        |  2 +-
 src/equicordplugins/moreStickers/style.css    | 16 ++--
 .../musicControls/spotify/spotifyStyles.css   | 14 ++--
 .../musicControls/tidal/tidalStyles.css       | 10 +--
 .../musicControls/youtubeMusic/ytmStyles.css  |  8 +-
 .../questCompleter.discordDesktop/style.css   |  2 +-
 .../scheduledMessages/styles.css              |  2 +-
 .../toastNotifications/components/styles.css  |  6 +-
 .../whitelistedEmojis/style.css               |  4 +-
 src/plugins/betterSessions/index.tsx          |  2 +-
 .../clientTheme/components/Settings.tsx       |  2 +-
 src/plugins/copyFileContents/style.css        |  6 +-
 src/plugins/decor/ui/styles.css               |  2 +-
 src/plugins/friendsSince/index.tsx            |  2 +-
 src/plugins/ignoreActivities/index.tsx        |  2 +-
 src/plugins/messageLogger/deleteStyleText.css |  4 +-
 src/plugins/permissionsViewer/styles.css      | 10 +--
 src/plugins/pictureInPicture/styles.css       |  8 +-
 src/plugins/pinDms/styles.css                 |  4 +-
 .../readAllNotificationsButton/style.css      |  4 +-
 src/plugins/serverInfo/styles.css             |  8 +-
 src/plugins/userVoiceShow/style.css           |  4 +-
 src/plugins/voiceDownload/style.css           |  6 +-
 src/plugins/voiceMessages/styles.css          |  2 +-
 55 files changed, 224 insertions(+), 223 deletions(-)

diff --git a/src/api/Notifications/styles.css b/src/api/Notifications/styles.css
index 471fbf014..4bae4284b 100644
--- a/src/api/Notifications/styles.css
+++ b/src/api/Notifications/styles.css
@@ -47,13 +47,13 @@
 .vc-notification-close-btn {
     all: unset;
     cursor: pointer;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     opacity: 0.5;
     transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .vc-notification-close-btn:hover {
-    color: var(--interactive-hover);
+    color: var(--interactive-icon-hover);
     opacity: 1;
 }
 
@@ -137,5 +137,5 @@
 
 .vc-notification-log-danger-btn {
     color: var(--white-500);
-    background-color: var(--button-danger-background);
+    background-color: var(---redesign-button-danger-background);
 }
\ No newline at end of file
diff --git a/src/components/Button.css b/src/components/Button.css
index debf21e8a..1babf1593 100644
--- a/src/components/Button.css
+++ b/src/components/Button.css
@@ -10,7 +10,7 @@
     text-align: start;
     transition: 50ms ease-in;
     transition-property: background-color, color, border-color, opacity;
-    background: var(--control-background-secondary-default);
+    background: var(--control-secondary-background-primary);
     color: var(--text-default);
     white-space: nowrap;
 
@@ -63,73 +63,73 @@
 }
 
 .vc-btn-primary {
-    background-color: var(--control-background-primary-default);
-    border-color: var(--control-border-primary-default);
-    color: var(--control-text-primary-default);
+    background-color: var(--control-primary-background-default);
+    border-color: var(--control-primary-border-default);
+    color: var(--control-primary-text-default);
 
     &:hover {
-        background-color: var(--control-background-primary-hover);
-        border-color: var(--control-border-primary-hover);
-        color: var(--control-text-primary-hover);
+        background-color: var(--control-primary-background-hover);
+        border-color: var(--control-primary-border-hover);
+        color: var(--control-primary-text-hover);
     }
 }
 
 .vc-btn-secondary,
 .vc-btn-link {
-    background-color: var(--control-background-secondary-default);
-    border-color: var(--control-border-secondary-default);
-    color: var(--control-text-secondary-default);
+    background-color: var(--control-secondary-background-default);
+    border-color: var(--control-secondary-border-default);
+    color: var(--control-secondary-text-default);
 
     &:hover {
-        background-color: var(--control-background-secondary-hover);
-        border-color: var(--control-border-secondary-hover);
-        color: var(--control-text-secondary-hover);
+        background-color: var(--control-secondary-background-hover);
+        border-color: var(--control-secondary-border-hover);
+        color: var(--control-secondary-text-hover);
     }
 }
 
 .vc-btn-dangerPrimary {
-    background-color: var(--control-background-critical-primary-default);
-    border-color: var(--control-border-critical-primary-default);
-    color: var(--control-text-critical-primary-default);
+    background-color: var(--control-critical-primary-background-default);
+    border-color: var(--control-critical-primary-border-default);
+    color: var(--control-critical-primary-text-default);
 
     &:hover {
-        background-color: var(--control-background-critical-primary-hover);
-        border-color: var(--control-border-critical-primary-hover);
-        color: var(--control-text-critical-primary-hover);
+        background-color: var(--control-critical-primary-background-hover);
+        border-color: var(--control-secondary-background-hover);
+        color: var(--control-secondary-background-hover);
     }
 }
 
 .vc-btn-dangerSecondary {
-    background-color: var(--control-background-critical-secondary-default);
-    border-color: var(--control-border-critical-secondary-default);
-    color: var(--control-text-critical-secondary-default);
+    background-color: var(--control-critical-secondary-background-default);
+    border-color: var(--control-critical-secondary-border-default);
+    color: var(--control-critical-secondary-text-default);
 
     &:hover {
-        background-color: var(--control-background-critical-secondary-hover);
-        border-color: var(--control-border-critical-secondary-hover);
-        color: var(--control-text-critical-secondary-hover);
+        background-color: var(--control-critical-secondary-background-hover);
+        border-color: var(--control-critical-secondary-border-hover);
+        color: var(--control-critical-secondary-text-hover);
     }
 }
 
 .vc-btn-overlayPrimary {
-    background-color: var(--control-background-overlay-primary-default);
-    border-color: var(--control-border-overlay-primary-default);
-    color: var(--control-text-overlay-primary-default);
+    background-color: var(--control-overlay-primary-background-default);
+    border-color: var(--control-overlay-primary-border-default);
+    color: var(--control-overlay-primary-text-default);
 
     &:hover {
-        background-color: var(--control-background-overlay-primary-hover);
-        border-color: var(--control-border-overlay-primary-hover);
-        color: var(--control-text-overlay-primary-hover);
+        background-color: var(--control-overlay-primary-background-hover);
+        border-color: var(--control-overlay-primary-border-hover);
+        color: var(--control-overlay-primary-text-hover);
     }
 }
 
 .vc-btn-positive {
-    background-color: var(--button-positive-background);
-    border-color: var(--button-positive-border);
-    color: var(--white);
+    background-color: var(--redesign-button-positive-background);
+    border-color: var(--redesign-button-positive-background);
+    color: var(--redesign-button-positive-text);
 
     &:hover {
-        background-color: var(--button-positive-background-hover);
+        background-color: var(--redesign-button-positive-pressed-background);
     }
 }
 
@@ -139,9 +139,9 @@
     color: var(--control-icon-icon-only-default);
 
     &:hover {
-        background-color: var(--control-background-icon-only-hover);
-        border-color: var(--control-border-icon-only-hover);
-        color: var(--control-icon-icon-only-hover);
+        background-color: var(--control-icon-only-background-hover);
+        border-color: var(--control-icon-only-border-hover);
+        color: var(--control-icon-only-icon-hover);
     }
 }
 
diff --git a/src/components/Card.css b/src/components/Card.css
index 8d4e74a98..7e131e4da 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -1,5 +1,5 @@
 .vc-card-base {
-    background: var(--card-primary-bg);
+    background: var(--background-surface-high);
     border-radius: var(--radius-sm, 8px)
 }
 
@@ -8,11 +8,11 @@
 }
 
 .vc-card-warning {
-    border: 1px solid var(--info-warning-foreground);
+    border: 1px solid var(--text-status-idle);
 }
 
 .vc-card-danger {
-    border: 1px solid var(--info-danger-foreground);
+    border: 1px solid var(--text-status-dnd);
 }
 
 .vc-card-defaultPadding {
diff --git a/src/components/ErrorCard.css b/src/components/ErrorCard.css
index 49ee6097f..9fc056eec 100644
--- a/src/components/ErrorCard.css
+++ b/src/components/ErrorCard.css
@@ -1,7 +1,7 @@
 .vc-error-card {
     padding: 1em;
-    background-color: var(--info-danger-background, rgb(237 66 69 / 10%));
-    border: 1px solid var(--info-danger-foreground, #ed4245);
+    background-color: var(--background-feedback-critical, rgb(237 66 69 / 10%));
+    border: 1px solid var(--text-status-dnd, #ed4245);
     border-radius: var(--radius-sm, 8px);
     color: var(--text-default);
 }
@@ -12,4 +12,4 @@
 
 .vc-error-card a:hover {
     text-decoration: underline;
-}
+}
\ No newline at end of file
diff --git a/src/components/Switch.css b/src/components/Switch.css
index cc0447a76..4b259bc22 100644
--- a/src/components/Switch.css
+++ b/src/components/Switch.css
@@ -15,7 +15,7 @@
 
 .vc-switch-checked {
     background: var(--brand-500);
-    border-color: var(--control-border-primary-default);
+    border-color: var(--control-primary-border-default);
 }
 
 .vc-switch-disabled {
diff --git a/src/components/ThemeSettings/themesStyles.css b/src/components/ThemeSettings/themesStyles.css
index 78735de4d..427d08222 100644
--- a/src/components/ThemeSettings/themesStyles.css
+++ b/src/components/ThemeSettings/themesStyles.css
@@ -8,7 +8,7 @@
     display: flex;
     flex-direction: column;
     background-color: var(--background-base-lower-alt);
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
     border-radius: 8px;
     padding: 1em;
     width: 100%;
@@ -38,13 +38,13 @@
 }
 
 .vc-settings-usercss-ie-buttons > div {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     opacity: .5;
     padding: 4px;
 }
 
 .vc-settings-usercss-ie-buttons > div:hover {
-    color: var(--interactive-hover);
+    color: var(--interactive-icon-hover);
     opacity: 1;
 }
 
diff --git a/src/components/settings/AddonCard.css b/src/components/settings/AddonCard.css
index 0e87cca5d..ad9fa27f1 100644
--- a/src/components/settings/AddonCard.css
+++ b/src/components/settings/AddonCard.css
@@ -1,6 +1,6 @@
 .vc-addon-card {
-    background-color: var(--card-primary-bg);
-    color: var(--interactive-active);
+    background-color: var(--background-surface-high);
+    color: var(--interactive-icon-active);
     border: 1px solid var(--border-subtle);
     border-radius: 8px;
     display: block;
@@ -41,6 +41,7 @@
     -webkit-box-orient: vertical;
     /* stylelint-disable-next-line property-no-unknown */
     box-orient: vertical;
+    color: var(--text-default);
 }
 
 .vc-addon-name-author {
diff --git a/src/components/settings/QuickAction.css b/src/components/settings/QuickAction.css
index ba582106b..48be321c2 100644
--- a/src/components/settings/QuickAction.css
+++ b/src/components/settings/QuickAction.css
@@ -14,7 +14,7 @@
 
 .vc-settings-quickActions-pill {
     all: unset;
-    background: var(--button-secondary-background);
+    background: var(--redesign-button-secondary-background);
     color: var(--text-default);
     display: flex;
     align-items: center;
@@ -26,7 +26,7 @@
 }
 
 .vc-settings-quickActions-pill:hover {
-    background: var(--button-secondary-background-hover);
+    background: var(--redesign-button-secondary-pressed-background);
     transform: translateY(-1px);
     box-shadow: var(--elevation-high);
 }
diff --git a/src/components/settings/tabs/changelog/styles.css b/src/components/settings/tabs/changelog/styles.css
index 04da73d7f..b10fe91c9 100644
--- a/src/components/settings/tabs/changelog/styles.css
+++ b/src/components/settings/tabs/changelog/styles.css
@@ -28,7 +28,7 @@
 
 .vc-changelog-entry.required:hover {
     background-color: var(--background-base-low);
-    border-left-color: var(--status-warning-foreground);
+    border-left-color: var(--status-warning-background);
 }
 
 .vc-changelog-entry-header {
@@ -132,7 +132,7 @@
 
 .vc-changelog-new-plugin-card.required:hover {
     background-color: var(--background-base-low);
-    border-left-color: var(--status-warning-foreground);
+    border-left-color: var(--status-warning-background);
 }
 
 .vc-changelog-new-plugins-compact {
@@ -174,17 +174,17 @@
 .vc-changelog-new-plugin-tag.required {
     background-color: var(--status-warning);
     color: var(--white);
-    border: 1px solid var(--status-warning-foreground);
+    border: 1px solid var(--status-warning-background);
 }
 
 .vc-changelog-new-plugin-tag.required:hover {
-    background-color: var(--status-warning-foreground);
+    background-color: var(--status-warning-background);
 }
 
 .vc-changelog-restart-notice {
     margin-top: 1em;
     padding: 0.75em;
-    background-color: var(--info-warning-background);
+    background-color: var(--background-feedback-warning);
     border-radius: 6px;
     border-left: 4px solid var(--status-warning);
 }
@@ -309,7 +309,7 @@
 
 /* Visual refresh support */
 .visual-refresh .vc-changelog-entry {
-    background-color: var(--card-primary-bg);
+    background-color: var(--background-surface-high);
     border: 1px solid var(--border-subtle);
 }
 
@@ -327,7 +327,7 @@
 
 .visual-refresh .vc-changelog-entry.required {
     border-left: 4px solid var(--status-warning);
-    background-color: var(--card-primary-bg);
+    background-color: var(--background-surface-high);
     border: 1px solid var(--border-subtle);
     padding-left: calc(0.75em - 4px);
 }
@@ -399,12 +399,12 @@
 }
 
 .visual-refresh .vc-changelog-entry:hover {
-    background-color: var(--card-primary-bg);
+    background-color: var(--background-surface-high);
     box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }
 
 .visual-refresh .vc-changelog-empty {
-    background-color: var(--card-primary-bg);
+    background-color: var(--background-surface-high);
     border: 1px solid var(--border-subtle);
 }
 
@@ -414,7 +414,7 @@
 }
 
 .visual-refresh .vc-changelog-new-plugins-section {
-    background-color: var(--card-primary-bg);
+    background-color: var(--background-surface-high);
     border: 1px solid var(--border-subtle);
     border-left: 4px solid var(--brand);
 }
@@ -425,7 +425,7 @@
 }
 
 .visual-refresh .vc-changelog-log {
-    background-color: var(--card-primary-bg);
+    background-color: var(--background-surface-high);
     border: 1px solid var(--border-subtle);
 }
 
@@ -438,7 +438,7 @@
 }
 
 .visual-refresh .vc-changelog-restart-notice {
-    background-color: var(--card-primary-bg);
+    background-color: var(--background-surface-high);
     border: 1px solid var(--status-warning);
     border-left: 4px solid var(--status-warning);
 }
@@ -521,7 +521,7 @@
 /* Visual refresh support for required plugins */
 .visual-refresh .vc-changelog-new-plugin-tag.required {
     background-color: var(--status-warning);
-    border: 1px solid var(--status-warning-foreground);
+    border: 1px solid var(--status-warning-background);
 }
 
 .visual-refresh .vc-changelog-new-plugin-card.required {
@@ -563,9 +563,9 @@
 .vc-changelog-delete-button:hover {
     opacity: 1 !important;
     color: var(--status-danger) !important;
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
 
 .vc-changelog-log-header:hover .vc-changelog-delete-button {
     opacity: 0.8;
-}
+}
\ No newline at end of file
diff --git a/src/components/settings/tabs/plugins/UIElements.css b/src/components/settings/tabs/plugins/UIElements.css
index 30777e620..30db51dbd 100644
--- a/src/components/settings/tabs/plugins/UIElements.css
+++ b/src/components/settings/tabs/plugins/UIElements.css
@@ -1,13 +1,13 @@
 .vc-plugin-ui-elements-button {
     display: flex;
     align-items: center;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     margin-top: 0.5em;
     cursor: pointer;
 
     &:hover {
-        background-color: var(--background-modifier-hover);
-        color: var(--interactive-hover);
+        background-color: var(--background-mod-subtle);
+        color: var(--interactive-icon-hover);
     }
 }
 
diff --git a/src/components/settings/tabs/plugins/styles.css b/src/components/settings/tabs/plugins/styles.css
index 026944032..6ceaa5cbe 100644
--- a/src/components/settings/tabs/plugins/styles.css
+++ b/src/components/settings/tabs/plugins/styles.css
@@ -33,12 +33,12 @@
     transition: background-color .2s ease;
 
     &:hover {
-        color: var(--interactive-hover)
+        color: var(--interactive-icon-hover)
     }
 }
 
 .vc-plugins-settings-button:hover {
-    color: var(--interactive-hover);
+    color: var(--interactive-icon-hover);
 }
 
 .vc-plugins-filter-controls {
@@ -78,9 +78,9 @@
 
 .vc-plugins-restart-card {
     padding: 1em;
-    background: var(--info-warning-background);
-    border: 1px solid var(--info-warning-foreground);
-    color: var(--info-warning-foreground);
+    background: var(--background-feedback-warning);
+    border: 1px solid var(--text-status-idle);
+    color: var(--text-status-idle);
 }
 
 .vc-plugins-info-icon:not(:hover, :focus) {
@@ -89,12 +89,12 @@
 
 .vc-plugins-restart-button {
     background-color: var(--background-base-low) !important;
-    border: 1px solid var(--info-warning-foreground) !important;
+    border: 1px solid var(--text-status-idle) !important;
     margin-top: 0.5em;
 }
 
 .vc-plugins-restart-button:hover {
-    background-color: var(--info-warning-foreground) !important;
+    background-color: var(--text-status-idle) !important;
 }
 
 .vc-plugin-stats {
@@ -175,29 +175,29 @@
 
 .vc-plugins-disable-warning,
 .vc-plugin-modal-disable-warning {
-    background-color: color-mix(in srgb, var(--button-danger-background) 10%, transparent) !important;
+    background-color: color-mix(in srgb, var(--redesign-button-danger-background) 10%, transparent) !important;
     border-style: solid !important;
     border-width: .1rem !important;
-    border-color: color-mix(in srgb, var(--button-danger-background) 80%, transparent) !important;
+    border-color: color-mix(in srgb, var(--redesign-button-danger-background) 80%, transparent) !important;
     border-radius: 5px !important;
-    color: color-mix(in srgb, var(--button-danger-background) 100%, transparent) !important;
+    color: color-mix(in srgb, var(--redesign-button-danger-background) 100%, transparent) !important;
 }
 
 .vc-plugins-disable-warning:hover,
 .vc-plugin-modal-disable-warning:hover {
-    background-color: color-mix(in srgb, var(--button-danger-background-hover) 40%, transparent) !important;
+    background-color: color-mix(in srgb, var(--redesign-button-danger-background) 40%, transparent) !important;
 }
 
 .vc-plugins-confirm-reset,
 .vc-plugin-modal-confirm-reset {
-    background-color: var(--button-danger-background) !important;
-    color: var(--header-primary);
+    background-color: var(--redesign-button-danger-background) !important;
+    color: var(--redesign-button-danger-pressed-text);
 }
 
 .vc-plugins-confirm-reset:hover,
 .vc-plugin-modal-confirm-reset:hover {
-    background-color: var(--button-danger-background-hover) !important;
-    filter: saturate(80%);
+    background-color: var(--redesign-button-danger-pressed-background) !important;
+    color: var(--redesign-button-danger-pressed-text);
 }
 
 .vc-modal-close-button {
@@ -250,20 +250,20 @@
 }
 
 .visual-refresh .vc-plugins-info-card {
-    background-color: var(--card-primary-bg) !important;
+    background-color: var(--background-surface-high) !important;
     border: 1px solid var(--border-subtle) !important;
 
     &:hover {
-        background-color: var(--card-primary-bg) !important;
+        background-color: var(--background-surface-high) !important;
     }
 }
 
 .visual-refresh .vc-plugin-stats {
-    background-color: var(--card-primary-bg) !important;
+    background-color: var(--background-surface-high) !important;
     border: 1px solid var(--border-subtle) !important;
 
     &:hover {
-        background-color: var(--card-primary-bg) !important;
+        background-color: var(--background-surface-high) !important;
     }
 }
 
@@ -298,4 +298,4 @@
 
 .vc-plugins-ui-elements {
     margin-top: 16px;
-}
+}
\ No newline at end of file
diff --git a/src/components/settings/tabs/styles.css b/src/components/settings/tabs/styles.css
index 8708994d9..cd3fb1c6f 100644
--- a/src/components/settings/tabs/styles.css
+++ b/src/components/settings/tabs/styles.css
@@ -33,15 +33,15 @@
 
 .vc-warning-card {
     padding: 1em;
-    background: var(--info-warning-background);
-    border: 1px solid var(--info-warning-foreground);
-    color: var(--info-warning-foreground);
+    background: var(--background-feedback-warning);
+    border: 1px solid var(--text-status-idle);
+    color: var(--text-status-idle);
 }
 
 .vc-backup-restore-card {
-    background-color: var(--info-warning-background);
-    border-color: var(--info-warning-foreground);
-    color: var(--info-warning-foreground);
+    background-color: var(--background-feedback-warning);
+    border-color: var(--text-status-idle);
+    color: var(--text-status-idle);
 }
 
 .vc-settings-theme-links {
@@ -76,7 +76,7 @@
 
 .vc-cloud-erase-data-danger-btn {
     color: var(--white-500);
-    background-color: var(--button-danger-background);
+    background-color: var(--redesign-button-danger-background);
 }
 
 .vc-settings-modal {
@@ -85,4 +85,4 @@
 
 .vc-settings-modal-close {
     float: right;
-}
+}
\ No newline at end of file
diff --git a/src/components/settings/tabs/updater/Components.tsx b/src/components/settings/tabs/updater/Components.tsx
index 2ba544ad0..664272c45 100644
--- a/src/components/settings/tabs/updater/Components.tsx
+++ b/src/components/settings/tabs/updater/Components.tsx
@@ -79,7 +79,7 @@ export function Updatable(props: CommonProps) {
 
     return (
         <>
-            <Flex className={Margins.top16} gap="8px">
+            <Flex className={Margins.bottom16} gap="8px">
                 <Button
                     size="small"
                     disabled={isUpdating || isChecking}
diff --git a/src/components/settings/tabs/vencord/VencordTab.css b/src/components/settings/tabs/vencord/VencordTab.css
index 410f3b3b2..cc4a52c54 100644
--- a/src/components/settings/tabs/vencord/VencordTab.css
+++ b/src/components/settings/tabs/vencord/VencordTab.css
@@ -18,11 +18,11 @@
 
 
 .vc-joindiscordbutton {
-    background-color: var(--button-secondary-background) !important;
+    background-color: var(--redesign-button-secondary-background) !important;
 }
 
 .vc-joindiscordbutton:hover {
-    background-color: var(--button-secondary-background-hover) !important;
+    background-color: var(--redesign-button-secondary-pressed-background) !important;
 }
 
 .vc-settings-card-buttons {
diff --git a/src/equicordplugins/betterBanReasons/styles.css b/src/equicordplugins/betterBanReasons/styles.css
index a1ba64ea6..50e40d85d 100644
--- a/src/equicordplugins/betterBanReasons/styles.css
+++ b/src/equicordplugins/betterBanReasons/styles.css
@@ -11,7 +11,7 @@
 }
 
 .vc-bbr-remove-button:hover {
-    color: var(--button-danger-background-hover);
+    color: var(--redesign-button-danger-pressed-background);
 }
 
 .vc-bbr-add-button {
@@ -28,4 +28,4 @@
     align-items: center;
     gap: 12px;
     margin: 0 !important;
-}
+}
\ No newline at end of file
diff --git a/src/equicordplugins/channelTabs/components/ChannelTab.tsx b/src/equicordplugins/channelTabs/components/ChannelTab.tsx
index 978da1b4a..c9ac7c9ed 100644
--- a/src/equicordplugins/channelTabs/components/ChannelTab.tsx
+++ b/src/equicordplugins/channelTabs/components/ChannelTab.tsx
@@ -492,7 +492,7 @@ export default function ChannelTab(props: ChannelTabsProps & { index: number; })
                 setTimeout(() => closeTab(id), 150);
             }}
         >
-            <XIcon size={16} fill="var(--interactive-normal)" />
+            <XIcon size={16} fill="var(--interactive-icon-default)" />
         </button>}
 
         {!compact && settings.store.showResizeHandle && <div
diff --git a/src/equicordplugins/channelTabs/style.css b/src/equicordplugins/channelTabs/style.css
index 02fde82df..86204e466 100644
--- a/src/equicordplugins/channelTabs/style.css
+++ b/src/equicordplugins/channelTabs/style.css
@@ -140,7 +140,7 @@
 }
 
 .vc-channeltabs-bookmark-star:hover {
-    stroke: var(--interactive-hover);
+    stroke: var(--interactive-icon-hover);
 }
 
 .vc-channeltabs-bookmark-star-checked {
@@ -194,7 +194,7 @@
     min-width: 0;
     margin: 0 4px;
     background-color: transparent;
-    border: 1px solid var(--background-modifier-accent);
+    border: 1px solid var(--background-mod-muted);
     transition:
         transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
         background-color 0.15s ease,
@@ -367,7 +367,7 @@
 }
 
 .vc-channeltabs-new-button:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
     transform: scale(1.1);
 }
 
@@ -381,7 +381,7 @@
 }
 
 .vc-channeltabs-new-button:hover svg {
-    color: var(--interactive-hover);
+    color: var(--interactive-icon-hover);
     animation: vc-channeltabs-plus-spin 0.3s ease-in-out;
 }
 
@@ -409,7 +409,7 @@
 }
 
 .vc-channeltabs-close-button:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
     transform: rotate(90deg);
 }
 
@@ -455,7 +455,7 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .vc-channeltabs-close-button.vc-channeltabs-close-button-compact:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
     transform: translateX(0) scale(1) rotate(90deg) !important;
     transition:
         opacity 0.3s ease-out 0.2s,
@@ -864,7 +864,7 @@
 .vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-drop-target {
     transform: none !important;
     background-color: transparent !important;
-    border-color: var(--background-modifier-accent) !important;
+    border-color: var(--background-mod-muted) !important;
     box-shadow: none !important;
 }
 
@@ -894,8 +894,8 @@
 
 /* Selected tab border - disable if setting is off */
 .vc-channeltabs-container.vc-channeltabs-no-selected-border .vc-channeltabs-tab-selected {
-    border: 1px solid var(--background-modifier-accent) !important;
-    border-bottom: 1px solid var(--background-modifier-accent) !important;
+    border: 1px solid var(--background-mod-muted) !important;
+    border-bottom: 1px solid var(--background-mod-muted) !important;
 }
 
 /* Selected tab background - disable if setting is off */
@@ -1048,13 +1048,13 @@
 
 /* Folder expansion */
 .vc-channeltabs-bookmark.vc-channeltabs-folder-expanded {
-    background-color: var(--background-modifier-selected);
+    background-color: var(--background-mod-strong);
 }
 
 /* Folder item styling - indented and visually connected to folder */
 .vc-channeltabs-bookmark.vc-channeltabs-folder-item {
     margin-left: 0.5rem;
-    border-left: 2px solid var(--background-modifier-accent);
+    border-left: 2px solid var(--background-mod-muted);
     padding-left: 0.5rem;
     opacity: 0.9;
     background-color: var(--background-secondary-alt);
@@ -1062,7 +1062,7 @@
 
 .vc-channeltabs-bookmark.vc-channeltabs-folder-item:hover {
     opacity: 1;
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
 
 /* Active bookmark visual indicator */
@@ -1127,11 +1127,11 @@
     color: var(--header-primary);
     transition: all 0.2s ease;
     outline: none;
-    box-shadow: 0 0 0 1px var(--background-modifier-accent);
+    box-shadow: 0 0 0 1px var(--background-mod-muted);
 }
 
 .channelTabs-keybind-button:hover:not(:disabled) {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
     border-color: var(--brand-experiment);
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
diff --git a/src/equicordplugins/commandPalette/style.css b/src/equicordplugins/commandPalette/style.css
index 2b297803f..286895b32 100644
--- a/src/equicordplugins/commandPalette/style.css
+++ b/src/equicordplugins/commandPalette/style.css
@@ -720,11 +720,11 @@
     color: var(--header-primary);
     transition: all 0.2s ease;
     outline: none;
-    box-shadow: 0 0 0 1px var(--background-modifier-accent);
+    box-shadow: 0 0 0 1px var(--background-mod-muted);
 }
 
 .vc-command-palette-keybind-button:hover:not(:disabled) {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
     border-color: var(--brand-experiment);
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
@@ -783,4 +783,4 @@
 
 /* stylelint-enable no-descending-specificity */
 
-/* fuck you css */
+/* fuck you css */
\ No newline at end of file
diff --git a/src/equicordplugins/customSounds/styles.css b/src/equicordplugins/customSounds/styles.css
index 2e19c7a4f..948905fc1 100644
--- a/src/equicordplugins/customSounds/styles.css
+++ b/src/equicordplugins/customSounds/styles.css
@@ -13,7 +13,7 @@
 .vc-custom-sounds-seasonal-title {
     margin-top: 16px;
     padding-top: 8px;
-    border-top: 1px solid var(--background-modifier-accent);
+    border-top: 1px solid var(--background-mod-muted);
 }
 
 .vc-custom-sounds-sound-section {
diff --git a/src/equicordplugins/customTimestamps/style.css b/src/equicordplugins/customTimestamps/style.css
index b6102466c..279334fc0 100644
--- a/src/equicordplugins/customTimestamps/style.css
+++ b/src/equicordplugins/customTimestamps/style.css
@@ -1,12 +1,12 @@
 .vc-cmt-info-card {
-    background-color: var(--info-help-background);
-    border: 1px solid var(--info-help-foreground);
+    background-color: var(--background-feedback-info);
+    border: 1px solid var(--icon-feedback-info);
     padding: 8px;
     border-radius: var(--radius-xs);
     margin: 10px 0;
 }
 
-.vc-cmt-demo-message-container{
+.vc-cmt-demo-message-container {
     position: sticky;
     background: var(--background-base-lowest);
     padding: 10px 0;
@@ -14,4 +14,4 @@
     top: -8px;
     border: solid grey 1px;
     border-radius: 5px;
-}
+}
\ No newline at end of file
diff --git a/src/equicordplugins/fontLoader/styles.css b/src/equicordplugins/fontLoader/styles.css
index 07f2f7830..7ca42e5ea 100644
--- a/src/equicordplugins/fontLoader/styles.css
+++ b/src/equicordplugins/fontLoader/styles.css
@@ -11,7 +11,7 @@
 }
 
 .eq-googlefonts-card:hover {
-    background: var(--background-modifier-hover);
+    background: var(--background-mod-subtle);
     cursor: pointer !important;
 }
 
diff --git a/src/equicordplugins/ghosted/styles.css b/src/equicordplugins/ghosted/styles.css
index 33ae4bef7..fb373f8fa 100644
--- a/src/equicordplugins/ghosted/styles.css
+++ b/src/equicordplugins/ghosted/styles.css
@@ -42,7 +42,7 @@
 }
 
 .vc-boo-ghosted-entry:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
 
 .vc-boo-user-info {
diff --git a/src/equicordplugins/githubRepos/styles.css b/src/equicordplugins/githubRepos/styles.css
index 214dab195..1255558ca 100644
--- a/src/equicordplugins/githubRepos/styles.css
+++ b/src/equicordplugins/githubRepos/styles.css
@@ -128,7 +128,7 @@
 }
 
 .vc-github-repos-table tbody tr:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
 
 .vc-github-repos-table td {
@@ -183,8 +183,8 @@
 }
 
 .vc-github-repos-table-star-icon {
-    color: var(--info-warning-foreground);
-    fill: var(--info-warning-foreground);
+    color: var(--text-status-idle);
+    fill: var(--text-status-idle);
 }
 
 .vc-github-repos-modal-footer-close {
@@ -221,11 +221,11 @@
 
 .vc-github-repos-link {
     cursor: pointer;
-    fill: var(--interactive-normal);
+    fill: var(--interactive-icon-default);
 }
 
 .vc-github-repos-name {
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
 }
 
 .vc-github-repos-header-repo {
diff --git a/src/equicordplugins/holyNotes/components/icons/overFlowIcon.tsx b/src/equicordplugins/holyNotes/components/icons/overFlowIcon.tsx
index 9b115ee60..24f5c9185 100644
--- a/src/equicordplugins/holyNotes/components/icons/overFlowIcon.tsx
+++ b/src/equicordplugins/holyNotes/components/icons/overFlowIcon.tsx
@@ -6,7 +6,7 @@
 
 import { JSX } from "react";
 
-const OverFlowIcon = ({ width = 24, height = 24, color = "var(--interactive-normal)", className, ...rest }) => (
+const OverFlowIcon = ({ width = 24, height = 24, color = "var(--interactive-icon-default)", className, ...rest }) => (
     <svg
         {...rest}
         width={width}
diff --git a/src/equicordplugins/holyNotes/style.css b/src/equicordplugins/holyNotes/style.css
index 577c60279..302c9d175 100644
--- a/src/equicordplugins/holyNotes/style.css
+++ b/src/equicordplugins/holyNotes/style.css
@@ -44,7 +44,7 @@ $modifier: var(--input-border);
     cursor: pointer;
     padding-left: 0px;
     margin: 0px 14px 6px 0px;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     transition: opacity 0.2s ease-in-out;
 }
 
@@ -115,7 +115,7 @@ $modifier: var(--input-border);
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     border-bottom-width: 2px;
     border-bottom-style: solid;
     /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
diff --git a/src/equicordplugins/iconViewer/IconsTab.css b/src/equicordplugins/iconViewer/IconsTab.css
index b5d6206b9..80d57010e 100644
--- a/src/equicordplugins/iconViewer/IconsTab.css
+++ b/src/equicordplugins/iconViewer/IconsTab.css
@@ -5,7 +5,7 @@
 
 .vc-icon-icon {
     margin-left: 5%;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     transition: transform 0.15s ease, color 0.15s ease;
 }
 
@@ -13,12 +13,12 @@
 .vc-icon-icon polygon,
 .vc-icon-icon circle,
 .vc-icon-icon rect {
-    fill: var(--interactive-normal);
+    fill: var(--interactive-icon-default);
     transition: fill 0.15s ease;
 }
 
 .vc-icon-container:hover .vc-icon-icon {
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
     transform: scale(1.020);
 }
 
@@ -26,7 +26,7 @@
 .vc-icon-container:hover .vc-icon-icon polygon,
 .vc-icon-container:hover .vc-icon-icon circle,
 .vc-icon-container:hover .vc-icon-icon rect {
-    fill: var(--interactive-active);
+    fill: var(--interactive-icon-active);
 }
 
 .vc-icon-modal-main-container {
@@ -109,7 +109,7 @@
 }
 
 .vc-icon-modal-color-tooltip:hover {
-    background-color: var(--info-help-background);
+    background-color: var(--background-feedback-info);
 }
 
 .vc-save-modal {
@@ -134,4 +134,4 @@
 .vc-ic-modals-footer {
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
-}
+}
\ No newline at end of file
diff --git a/src/equicordplugins/ignoreCalls/index.tsx b/src/equicordplugins/ignoreCalls/index.tsx
index 469606e28..e0f23a244 100644
--- a/src/equicordplugins/ignoreCalls/index.tsx
+++ b/src/equicordplugins/ignoreCalls/index.tsx
@@ -139,7 +139,7 @@ export default definePlugin({
                                 });
                             }}
                         >
-                            <Deafen color={"var(--interactive-active)"} />
+                            <Deafen color={"var(--interactive-icon-active)"} />
                         </Button>
                     )}
                 </Tooltip>
diff --git a/src/equicordplugins/keyboardNavigation/components/style.css b/src/equicordplugins/keyboardNavigation/components/style.css
index 155f48cc6..10e7eacef 100644
--- a/src/equicordplugins/keyboardNavigation/components/style.css
+++ b/src/equicordplugins/keyboardNavigation/components/style.css
@@ -17,10 +17,10 @@
 
 .vc-command-palette-key-hover {
     padding: 5px;
-    background-color: var(--background-modifier-selected);
+    background-color: var(--background-mod-strong);
     border-radius: 3px;
     font-family: var(--font-display);
-    color: var(--interactive-hover);
+    color: var(--interactive-icon-hover);
     padding-left: 0.8rem;
 }
 
@@ -46,7 +46,7 @@
 
 .vc-command-palette-registrar {
     position: absolute;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     white-space: nowrap;
     text-overflow: ellipsis;
     right: 1.6rem;
@@ -102,11 +102,11 @@
     height: 30px;
     width: 128px;
     color: var(--white-500);
-    background-color: var(--button-secondary-background);
+    background-color: var(--redesign-button-secondary-background);
     border-radius: 10px;
     transition: background-color 0.15s ease;
 }
 
 .vc-command-palette-key-recorder-button:hover {
-    background-color: var(--button-secondary-background-hover);
+    background-color: var(--redesign-button-secondary-background);
 }
\ No newline at end of file
diff --git a/src/equicordplugins/loginWithQR/ui/styles.css b/src/equicordplugins/loginWithQR/ui/styles.css
index 8a61a3fbc..220833bbe 100644
--- a/src/equicordplugins/loginWithQR/ui/styles.css
+++ b/src/equicordplugins/loginWithQR/ui/styles.css
@@ -94,8 +94,8 @@
     margin-top: 18px;
     width: 20rem;
     background: linear-gradient(to right,
-            var(--button-danger-background) calc(var(--progress) - 1%),
-            var(--button-danger-background-active) var(--progress)) !important;
+            var(--redesign-button-danger-background) calc(var(--progress) - 1%),
+            var(--redesign-button-danger-pressed-background) var(--progress)) !important;
     border-radius: 420rem;
 
     --progress: 0%;
diff --git a/src/equicordplugins/mediaPlaybackSpeed/styles.css b/src/equicordplugins/mediaPlaybackSpeed/styles.css
index e14279a86..17d8476b5 100644
--- a/src/equicordplugins/mediaPlaybackSpeed/styles.css
+++ b/src/equicordplugins/mediaPlaybackSpeed/styles.css
@@ -2,9 +2,9 @@
     background-color: transparent;
     height: 100%;
     z-index: 2;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
 }
 
 .vc-media-playback-speed-icon:hover {
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
 }
\ No newline at end of file
diff --git a/src/equicordplugins/messageLoggerEnhanced/styles.css b/src/equicordplugins/messageLoggerEnhanced/styles.css
index 2dcc3b711..a14476188 100644
--- a/src/equicordplugins/messageLoggerEnhanced/styles.css
+++ b/src/equicordplugins/messageLoggerEnhanced/styles.css
@@ -15,7 +15,7 @@
     position: absolute;
     top: -24px;
     right: -24px;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     cursor: pointer;
 }
 
@@ -72,11 +72,11 @@
 }
 
 .vc-log-toolbox-btn svg {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
 }
 
 :is(.vc-log-toolbox-btn:hover, .vc-log-toolbox-btn[class*="selected"]) svg {
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
 }
 
 .folder-upload-container {
diff --git a/src/equicordplugins/moreStickers/components/picker.tsx b/src/equicordplugins/moreStickers/components/picker.tsx
index 40dcb23ed..e4fbb7edb 100644
--- a/src/equicordplugins/moreStickers/components/picker.tsx
+++ b/src/equicordplugins/moreStickers/components/picker.tsx
@@ -42,7 +42,7 @@ export const PickerSidebar = ({ packMetas, onPackSelect }: SidebarProps) => {
                     }}
                 >
                     <RecentlyUsedIcon width={24} height={24} color={
-                        activePack === RecentPack ? " var(--interactive-active)" : "var(--interactive-normal)"
+                        activePack === RecentPack ? " var(--interactive-icon-active)" : "var(--interactive-icon-default)"
                     } />
                 </StickerCategory>
                 {
diff --git a/src/equicordplugins/moreStickers/style.css b/src/equicordplugins/moreStickers/style.css
index 5e83d8dbd..e3b25876e 100644
--- a/src/equicordplugins/moreStickers/style.css
+++ b/src/equicordplugins/moreStickers/style.css
@@ -1,13 +1,13 @@
 /* stylelint-disable function-url-quotes */
 .vc-more-stickers-icon {
-    fill: var(--interactive-normal);
+    fill: var(--interactive-icon-default);
     margin-top: 20%;
 }
 
 .vc-more-stickers-icon:hover,
 .vc-more-stickers-icon:focus-visible,
 .vc-more-stickers-icon-active {
-    fill: var(--interactive-active);
+    fill: var(--interactive-icon-active);
 }
 
 .vc-more-stickers-picker-container {
@@ -160,7 +160,7 @@
 
 .vc-more-stickers-sticker-category {
     border-radius: 4px;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     cursor: pointer;
     height: 32px;
     margin-bottom: 8px;
@@ -168,16 +168,16 @@
 
 .vc-more-stickers-sticker-category:hover,
 .vc-more-stickers-sticker-category-active {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
 
 .vc-more-stickers-clear-icon {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     cursor: pointer;
 }
 
 .vc-more-stickers-clear-icon:hover {
-    color: var(--interactive-hover);
+    color: var(--interactive-icon-hover);
 }
 
 .vc-more-stickers-picker-content-list-wrapper {
@@ -272,7 +272,7 @@
 }
 
 .vc-more-stickers-picker-content-header-header:hover {
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
     cursor: pointer;
 }
 
@@ -380,7 +380,7 @@
 }
 
 .vc-more-stickers-picker-content-inspector-title-secondary {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
diff --git a/src/equicordplugins/musicControls/spotify/spotifyStyles.css b/src/equicordplugins/musicControls/spotify/spotifyStyles.css
index 03cdfbe0b..d5baf58b3 100644
--- a/src/equicordplugins/musicControls/spotify/spotifyStyles.css
+++ b/src/equicordplugins/musicControls/spotify/spotifyStyles.css
@@ -24,7 +24,7 @@
     margin: 0 2px;
     border-radius: var(--radius-sm);
     background: none;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     padding: 0;
     width: 32px;
     height: 32px;
@@ -34,8 +34,8 @@
 }
 
 .vc-spotify-button:hover {
-    color: var(--interactive-hover);
-    background-color: var(--background-modifier-selected);
+    color: var(--interactive-icon-hover);
+    background-color: var(--background-mod-strong);
 }
 
 .vc-spotify-button-icon {
@@ -179,7 +179,7 @@
 }
 
 #vc-spotify-progress-bar > [class^="slider"] [class^="barFill"] {
-    background-color: var(--interactive-active);
+    background-color: var(--interactive-icon-active);
 }
 
 #vc-spotify-progress-bar > [class^="slider"]:hover [class^="barFill"] {
@@ -192,9 +192,9 @@
     width: 16px !important;
     margin-top: calc(17px/-2 + var(--bar-offset)/2);
     margin-left: -0.5px;
-    background-color: var(--interactive-active);
-    border-color: var(--interactive-normal);
-    color: var(--interactive-normal);
+    background-color: var(--interactive-icon-active);
+    border-color: var(--interactive-icon-default);
+    color: var(--interactive-icon-default);
     opacity: 0;
     transition: opacity 0.1s;
 }
diff --git a/src/equicordplugins/musicControls/tidal/tidalStyles.css b/src/equicordplugins/musicControls/tidal/tidalStyles.css
index cd00d6185..9d08c563f 100644
--- a/src/equicordplugins/musicControls/tidal/tidalStyles.css
+++ b/src/equicordplugins/musicControls/tidal/tidalStyles.css
@@ -60,7 +60,7 @@
     margin-top: calc(13px/-2 + var(--bar-offset)/2);
     margin-left: -0.5px;
     border: unset;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     opacity: 0;
     transition: opacity 0.1s;
 }
@@ -86,7 +86,7 @@
     margin: 0 2px;
     border-radius: var(--radius-sm);
     background: none;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     padding: 0;
     width: 32px;
     height: 32px;
@@ -97,8 +97,8 @@
 }
 
 .eq-tdl-button:hover {
-    color: var(--interactive-hover);
-    background-color: var(--background-modifier-selected);
+    color: var(--interactive-icon-hover);
+    background-color: var(--background-mod-strong);
 }
 
 .eq-tdl-button svg {
@@ -205,4 +205,4 @@
 
 .eq-tdl-time-right {
     right: 0;
-}
+}
\ No newline at end of file
diff --git a/src/equicordplugins/musicControls/youtubeMusic/ytmStyles.css b/src/equicordplugins/musicControls/youtubeMusic/ytmStyles.css
index 652f90bf3..af12fe53d 100644
--- a/src/equicordplugins/musicControls/youtubeMusic/ytmStyles.css
+++ b/src/equicordplugins/musicControls/youtubeMusic/ytmStyles.css
@@ -60,7 +60,7 @@
     margin-top: calc(13px/-2 + var(--bar-offset)/2);
     margin-left: -0.5px;
     border: unset;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     opacity: 0;
     transition: opacity 0.1s;
 }
@@ -86,7 +86,7 @@
     margin: 0 2px;
     border-radius: var(--radius-sm);
     background: none;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     padding: 0;
     width: 32px;
     height: 32px;
@@ -97,8 +97,8 @@
 }
 
 .vc-ytm-button:hover {
-    color: var(--interactive-hover);
-    background-color: var(--background-modifier-selected);
+    color: var(--interactive-icon-hover);
+    background-color: var(--background-mod-strong);
 }
 
 .vc-ytm-button svg {
diff --git a/src/equicordplugins/questCompleter.discordDesktop/style.css b/src/equicordplugins/questCompleter.discordDesktop/style.css
index bfbaddd4c..22ddb9473 100644
--- a/src/equicordplugins/questCompleter.discordDesktop/style.css
+++ b/src/equicordplugins/questCompleter.discordDesktop/style.css
@@ -3,7 +3,7 @@
     width: var(--space-32);
     min-width: 0;
     height: var(--space-32);
-    color: var(--interactive-normal) !important;
+    color: var(--interactive-icon-default) !important;
 
     &:hover {
         filter: brightness(2);
diff --git a/src/equicordplugins/scheduledMessages/styles.css b/src/equicordplugins/scheduledMessages/styles.css
index 24478f6fe..88eebd20b 100644
--- a/src/equicordplugins/scheduledMessages/styles.css
+++ b/src/equicordplugins/scheduledMessages/styles.css
@@ -157,7 +157,7 @@
     gap: 10px;
     margin-top: 16px;
     padding: 12px;
-    background: var(--info-danger-background);
+    background: var(--background-feedback-critical);
     border-radius: 5px;
     color: var(--text-normal);
     font-size: 14px;
diff --git a/src/equicordplugins/toastNotifications/components/styles.css b/src/equicordplugins/toastNotifications/components/styles.css
index c51163f5d..0fa077c2f 100644
--- a/src/equicordplugins/toastNotifications/components/styles.css
+++ b/src/equicordplugins/toastNotifications/components/styles.css
@@ -13,8 +13,8 @@
     --toastnotifications-title-line-height: 1.25rem;
 
     /* Close Button */
-    --toastnotifications-close-button-color: var(--interactive-normal);
-    --toastnotifications-close-button-hover-color: var(--interactive-hover);
+    --toastnotifications-close-button-color: var(--interactive-icon-default);
+    --toastnotifications-close-button-hover-color: var(--interactive-icon-hover);
     --toastnotifications-close-button-opacity: 0.5;
     --toastnotifications-close-button-hover-opacity: 1;
 
@@ -148,4 +148,4 @@
 
 .visual-refresh .toastnotifications-notification-root {
     background-color: var(--background-base-low);
-}
+}
\ No newline at end of file
diff --git a/src/equicordplugins/whitelistedEmojis/style.css b/src/equicordplugins/whitelistedEmojis/style.css
index 66d522460..a0db40ef0 100644
--- a/src/equicordplugins/whitelistedEmojis/style.css
+++ b/src/equicordplugins/whitelistedEmojis/style.css
@@ -30,7 +30,7 @@
 
 .remove-all-button {
     cursor: pointer;
-    background-color: var(--button-danger-background);
+    background-color: var(--redesign-button-danger-background);
     color: var(--white-500);
     transition: background-color 0.2s ease;
 }
@@ -78,7 +78,7 @@
 
 .remove-button {
     cursor: pointer;
-    background-color: var(--button-danger-background);
+    background-color: var(--redesign-button-danger-background);
     color: var(--white-500);
     transition: background-color 0.2s ease;
     margin-top: 10px;
diff --git a/src/plugins/betterSessions/index.tsx b/src/plugins/betterSessions/index.tsx
index 1738de38b..496db8842 100644
--- a/src/plugins/betterSessions/index.tsx
+++ b/src/plugins/betterSessions/index.tsx
@@ -140,7 +140,7 @@ export default definePlugin({
                             overflow: "hidden",
 
                             borderRadius: "50%",
-                            backgroundColor: "var(--interactive-normal)",
+                            backgroundColor: "var(--interactive-icon-default)",
                             color: "var(--background-base-lower)",
                         }}
                     >
diff --git a/src/plugins/clientTheme/components/Settings.tsx b/src/plugins/clientTheme/components/Settings.tsx
index 8298e2eed..69ad76efa 100644
--- a/src/plugins/clientTheme/components/Settings.tsx
+++ b/src/plugins/clientTheme/components/Settings.tsx
@@ -6,7 +6,7 @@
 
 import { classNameFactory } from "@api/Styles";
 import { ErrorCard } from "@components/ErrorCard";
-import { HeadingPrimary,HeadingSecondary } from "@components/Heading";
+import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
 import { relativeLuminance } from "@plugins/clientTheme/utils/colorUtils";
 import { createOrUpdateThemeColorVars } from "@plugins/clientTheme/utils/styleUtils";
diff --git a/src/plugins/copyFileContents/style.css b/src/plugins/copyFileContents/style.css
index 91034bf21..818652539 100644
--- a/src/plugins/copyFileContents/style.css
+++ b/src/plugins/copyFileContents/style.css
@@ -1,9 +1,9 @@
 .vc-cfc-button {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     cursor: pointer;
     padding-left: 4px;
 }
 
 .vc-cfc-button:hover {
-    color: var(--interactive-hover);
-}
+    color: var(--interactive-icon-hover);
+}
\ No newline at end of file
diff --git a/src/plugins/decor/ui/styles.css b/src/plugins/decor/ui/styles.css
index 19b02e8f4..ba95e483d 100644
--- a/src/plugins/decor/ui/styles.css
+++ b/src/plugins/decor/ui/styles.css
@@ -1,6 +1,6 @@
 .vc-decor-danger-btn {
     color: var(--white-500);
-    background-color: var(--button-danger-background);
+    background-color: var(--redesign-button-danger-background);
 }
 
 .vc-decor-change-decoration-modal-content {
diff --git a/src/plugins/friendsSince/index.tsx b/src/plugins/friendsSince/index.tsx
index c6466495f..3108ee142 100644
--- a/src/plugins/friendsSince/index.tsx
+++ b/src/plugins/friendsSince/index.tsx
@@ -71,7 +71,7 @@ export default definePlugin({
                                         width="16"
                                         height="16"
                                         viewBox="0 0 24 24"
-                                        fill="var(--interactive-normal)"
+                                        fill="var(--interactive-icon-default)"
                                     >
                                         <path d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
                                         <path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
diff --git a/src/plugins/ignoreActivities/index.tsx b/src/plugins/ignoreActivities/index.tsx
index 53c2a1ec4..d0d776f9c 100644
--- a/src/plugins/ignoreActivities/index.tsx
+++ b/src/plugins/ignoreActivities/index.tsx
@@ -66,7 +66,7 @@ function ToggleActivityComponent(activity: IgnoredActivity, isPlaying = false) {
     const { ignoredActivities } = s;
 
     if (ignoredActivities.some(act => act.id === activity.id)) return ToggleIconOff(activity, "var(--status-danger)");
-    return ToggleIconOn(activity, isPlaying ? "var(--green-300)" : "var(--interactive-normal)");
+    return ToggleIconOn(activity, isPlaying ? "var(--green-300)" : "var(--interactive-icon-default)");
 }
 
 function handleActivityToggle(e: React.MouseEvent<HTMLButtonElement, MouseEvent>, activity: IgnoredActivity) {
diff --git a/src/plugins/messageLogger/deleteStyleText.css b/src/plugins/messageLogger/deleteStyleText.css
index 655294c1c..8d9c1d49f 100644
--- a/src/plugins/messageLogger/deleteStyleText.css
+++ b/src/plugins/messageLogger/deleteStyleText.css
@@ -1,8 +1,8 @@
 .messagelogger-deleted {
     --text-default: var(--status-danger, #f04747);
-    --interactive-normal: var(--status-danger, #f04747);
+    --interactive-icon-default: var(--status-danger, #f04747);
     --text-muted: var(--status-danger, #f04747);
     --embed-title: var(--red-460, #be3535);
     --text-link: var(--red-460, #be3535);
     --header-primary: var(--red-460, #be3535);
-}
+}
\ No newline at end of file
diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css
index cb8010b52..c8611371d 100644
--- a/src/plugins/permissionsViewer/styles.css
+++ b/src/plugins/permissionsViewer/styles.css
@@ -66,11 +66,11 @@
 }
 
 .vc-permviewer-modal-list-item:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
 
 .vc-permviewer-modal-list-item-active {
-    background-color: var(--background-modifier-selected);
+    background-color: var(--background-mod-strong);
 }
 
 .vc-permviewer-modal-list-item-text {
@@ -122,7 +122,7 @@
 }
 
 .vc-permviewer-modal-perms-item-icon {
-    border: 1px solid var(--background-modifier-selected);
+    border: 1px solid var(--background-mod-strong);
     width: 24px;
     height: 24px;
 }
@@ -135,13 +135,13 @@
 }
 
 .vc-permviewer-modal-perms-item .vc-info-icon:hover {
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
 }
 
 /* copy pasted from discord cause impossible to webpack find */
 .vc-permviewer-role-button {
     border-radius: var(--radius-sm);
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     border: 1px solid var(--user-profile-border);
     /* stylelint-disable-next-line value-no-vendor-prefix */
     width: -moz-fit-content;
diff --git a/src/plugins/pictureInPicture/styles.css b/src/plugins/pictureInPicture/styles.css
index d0a81ca57..ec008e1f4 100644
--- a/src/plugins/pictureInPicture/styles.css
+++ b/src/plugins/pictureInPicture/styles.css
@@ -1,8 +1,8 @@
 .vc-pip-button {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
 }
 
 .vc-pip-button:hover {
-    background-color: var(--background-modifier-hover);
-    color: var(--interactive-hover);
-}
+    background-color: var(--background-mod-subtle);
+    color: var(--interactive-icon-hover);
+}
\ No newline at end of file
diff --git a/src/plugins/pinDms/styles.css b/src/plugins/pinDms/styles.css
index 173f0f76b..1458743bf 100644
--- a/src/plugins/pinDms/styles.css
+++ b/src/plugins/pinDms/styles.css
@@ -28,10 +28,10 @@
 .vc-pindms-collapse-icon {
     width: 16px;
     height: 16px;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     transform: rotate(90deg)
 }
 
 .vc-pindms-collapsed .vc-pindms-collapse-icon {
     transform: rotate(0deg);
-}
+}
\ No newline at end of file
diff --git a/src/plugins/readAllNotificationsButton/style.css b/src/plugins/readAllNotificationsButton/style.css
index ece1aba5b..1d1fe185a 100644
--- a/src/plugins/readAllNotificationsButton/style.css
+++ b/src/plugins/readAllNotificationsButton/style.css
@@ -1,5 +1,5 @@
 .vc-ranb-button {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     padding: 0 0.5em;
     width: 100%;
     font-size: 14px;
@@ -8,5 +8,5 @@
 }
 
 .vc-ranb-button:hover {
-    color: var(--interactive-active);
+    color: var(--interactive-icon-active);
 }
\ No newline at end of file
diff --git a/src/plugins/serverInfo/styles.css b/src/plugins/serverInfo/styles.css
index 1dfc871f3..98b16e7f8 100644
--- a/src/plugins/serverInfo/styles.css
+++ b/src/plugins/serverInfo/styles.css
@@ -48,7 +48,7 @@
 
 .vc-gp-tab {
     border-bottom: 2px solid transparent;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     cursor: pointer;
     line-height: 14px;
 }
@@ -58,7 +58,7 @@
 }
 
 .vc-gp-tab:where(.vc-gp-selected, :hover, :focus) {
-    border-bottom-color: var(--interactive-active);
+    border-bottom-color: var(--interactive-icon-active);
 }
 
 .vc-gp-info {
@@ -103,7 +103,7 @@
 }
 
 .vc-gp-member-row:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
 
 .vc-gp-member-content {
@@ -165,5 +165,5 @@
 }
 
 .vc-gp-scroller [class^="listRow"]:hover {
-    background-color: var(--background-modifier-hover);
+    background-color: var(--background-mod-subtle);
 }
\ No newline at end of file
diff --git a/src/plugins/userVoiceShow/style.css b/src/plugins/userVoiceShow/style.css
index 322b8ed39..6ee5fd7a0 100644
--- a/src/plugins/userVoiceShow/style.css
+++ b/src/plugins/userVoiceShow/style.css
@@ -1,5 +1,5 @@
 .vc-uvs-speaker {
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -10,7 +10,7 @@
 }
 
 .vc-uvs-clickable:hover {
-    color: var(--interactive-hover);
+    color: var(--interactive-icon-hover);
 }
 
 .vc-uvs-profile-speaker {
diff --git a/src/plugins/voiceDownload/style.css b/src/plugins/voiceDownload/style.css
index 2b776023f..4e1379e21 100644
--- a/src/plugins/voiceDownload/style.css
+++ b/src/plugins/voiceDownload/style.css
@@ -1,12 +1,12 @@
 .vc-voice-download {
     width: 24px;
     height: 24px;
-    color: var(--interactive-normal);
+    color: var(--interactive-icon-default);
     margin-left: 12px;
     cursor: pointer;
     position: relative;
 }
 
 .vc-voice-download:hover {
-    color: var(--interactive-active);
-}
+    color: var(--interactive-icon-active);
+}
\ No newline at end of file
diff --git a/src/plugins/voiceMessages/styles.css b/src/plugins/voiceMessages/styles.css
index 9e42350e1..d6203c34a 100644
--- a/src/plugins/voiceMessages/styles.css
+++ b/src/plugins/voiceMessages/styles.css
@@ -21,7 +21,7 @@
 }
 
 .vc-vmsg-preview-indicator {
-    background: var(--button-secondary-background);
+    background: var(--redesign-button-secondary-background);
     width: 16px;
     height: 16px;
     border-radius: 50%;