diff --git a/package.json b/package.json index 2da86665..cdf29cfe 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "not-nexulien", "private": "true", - "version": "1.13.7", + "version": "1.13.8", "description": "the best (worst) discord client mod, now with custom badges and plugins whenever i feel like it", "homepage": "https://git.defautluser0.xyz/not-nexulien/Not-Nexulien", "bugs": { diff --git a/packages/vencord-types/package.json b/packages/vencord-types/package.json index 7fd3345f..ea9fcd6a 100644 --- a/packages/vencord-types/package.json +++ b/packages/vencord-types/package.json @@ -1,7 +1,7 @@ { "name": "@vencord/types", "private": false, - "version": "1.13.7", + "version": "1.13.8", "description": "", "types": "index.d.ts", "scripts": { diff --git a/src/api/Notifications/styles.css b/src/api/Notifications/styles.css index e32161c4..1dcd9d57 100644 --- a/src/api/Notifications/styles.css +++ b/src/api/Notifications/styles.css @@ -51,13 +51,13 @@ .vc-notification-close-btn { all: unset; cursor: pointer; - color: var(--interactive-normal); + color: var(--interactive-icon-default, var(--interactive-normal)); 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, var(--interactive-hover)); opacity: 1; } @@ -123,7 +123,7 @@ .vc-notification-log-danger-btn { color: var(--white-500); - background-color: var(--button-danger-background); + background-color: var(--redesign-button-danger-background, var(--button-danger-background)); } .vc-notification-log-noNotifications { @@ -131,4 +131,4 @@ width: 100%; text-align: center; color: var(--text-muted); -} \ No newline at end of file +} diff --git a/src/components/Button.css b/src/components/Button.css index 48c0dd5d..7e7eebdc 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-default, var(--control-background-secondary-default)); color: var(--text-default); white-space: nowrap; @@ -26,7 +26,7 @@ &:focus-visible { /* stylelint-disable-next-line custom-property-pattern */ - box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4)); + box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4))); } } @@ -63,85 +63,84 @@ } .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, var(--control-background-primary-default)); + border-color: var(--control-primary-border-default, var(--control-border-primary-default)); + color: var(--control-primary-text-default, var(--control-text-primary-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, var(--control-background-primary-hover)); + border-color: var(--control-primary-border-hover, var(--control-border-primary-hover)); + color: var(--control-primary-text-hover, var(--control-text-primary-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, var(--control-background-secondary-default)); + border-color: var(--control-secondary-border-default, var(--control-border-secondary-default)); + color: var(--control-secondary-text-default, var(--control-text-secondary-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, var(--control-background-secondary-hover)); + border-color: var(--control-secondary-border-hover, var(--control-border-secondary-hover)); + color: var(--control-secondary-text-hover, var(--control-text-secondary-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, var(--control-background-critical-primary-default)); + border-color: var(--control-critical-primary-border-default, var(--control-border-critical-primary-default)); + color: var(--control-critical-primary-text-default, var(--control-text-critical-primary-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, var(--control-background-critical-primary-hover)); + border-color: var(--control-critical-primary-border-hover, var(--control-border-critical-primary-hover)); + color: var(--control-critical-primary-text-hover, var(--control-text-critical-primary-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, var(--control-background-critical-secondary-default)); + border-color: var(--control-critical-secondary-border-default, var(--control-border-critical-secondary-default)); + color: var(--control-critical-secondary-text-default, var(--control-text-critical-secondary-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, var(--control-background-critical-secondary-hover)); + border-color: var(--control-critical-secondary-border-hover, var(--control-border-critical-secondary-hover)); + color: var(--control-critical-secondary-text-hover, var(--control-text-critical-secondary-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, var(--control-background-overlay-primary-default)); + border-color: var(--control-overlay-primary-border-default, var(--control-border-overlay-primary-default)); + color: var(--control-overlay-primary-text-default, var(--control-text-overlay-primary-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, var(--control-background-overlay-primary-hover)); + border-color: var(--control-overlay-primary-border-hover, var(--control-border-overlay-primary-hover)); + color: var(--control-overlay-primary-text-hover, var(--control-text-overlay-primary-hover)); } } .vc-btn-positive { - background-color: var(--button-positive-background); - border-color: var(--button-positive-border); + background-color: var(--redesign-button-positive-background, var(--button-positive-background)); color: var(--white); &:hover { - background-color: var(--button-positive-background-hover); + background-color: var(--redesign-button-positive-pressed-background, var(--button-positive-background-hover)); } } .vc-btn-none { background-color: transparent; border-color: transparent; - color: var(--control-icon-icon-only-default); + color: var(--control-icon-only-icon-default, 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, var(--control-background-icon-only-hover)); + border-color: var(--control-icon-only-border-hover, var(--control-border-icon-only-hover)); + color: var(--control-icon-only-icon-hover, var(--control-icon-icon-only-hover)); } } @@ -178,7 +177,7 @@ &:focus-visible { /* stylelint-disable-next-line custom-property-pattern */ - box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4)); + box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4))); } } @@ -187,7 +186,7 @@ } .vc-text-btn-secondary { - color: var(--text-primary); + color: var(--text-strong, var(--text-default)); } .vc-text-btn-danger { diff --git a/src/components/Card.css b/src/components/Card.css index 8d4e74a9..59ff8baa 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(--card-background-default, var(--card-primary-bg)); border-radius: var(--radius-sm, 8px) } @@ -8,11 +8,11 @@ } .vc-card-warning { - border: 1px solid var(--info-warning-foreground); + border: 1px solid var(--icon-status-idle, var(--info-warning-foreground)); } .vc-card-danger { - border: 1px solid var(--info-danger-foreground); + border: 1px solid var(--icon-status-dnd, var(--info-danger-foreground)); } .vc-card-defaultPadding { diff --git a/src/components/Switch.css b/src/components/Switch.css index cc0447a7..186724f4 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, var(--control-border-primary-default)); } .vc-switch-disabled { @@ -25,7 +25,7 @@ .vc-switch-focusVisible { /* stylelint-disable-next-line custom-property-pattern */ - box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4)); + box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4))); } .vc-switch-slider { diff --git a/src/components/settings/AddonCard.css b/src/components/settings/AddonCard.css index 58b2aa94..6f348fcc 100644 --- a/src/components/settings/AddonCard.css +++ b/src/components/settings/AddonCard.css @@ -1,6 +1,7 @@ .vc-addon-card { - background-color: var(--background-secondary-alt); - color: var(--interactive-active); + background-color: var(--card-background-default, var(--card-primary-bg)); + color: var(--interactive-icon-active, var(--interactive-active)); + border: 1px solid var(--border-subtle); border-radius: 8px; display: block; height: 100%; @@ -105,4 +106,4 @@ .vc-addon-title:hover { overflow: visible; animation: vc-addon-title var(--duration) linear infinite; -} \ No newline at end of file +} diff --git a/src/components/settings/QuickAction.css b/src/components/settings/QuickAction.css index 4534f460..4780fb84 100644 --- a/src/components/settings/QuickAction.css +++ b/src/components/settings/QuickAction.css @@ -34,15 +34,21 @@ .vc-settings-quickActions-pill { all: unset; - background: var(--button-secondary-background); + background: var(--redesign-button-secondary-background, var(--button-secondary-background)); color: var(--text-default); display: flex; align-items: center; gap: 0.5em; } -.vc-settings-quickActions-button:focus-visible { - outline: 2px solid var(--focus-primary); +.vc-settings-quickActions-pill:hover { + background: var(--redesign-button-secondary-pressed-background, var(--button-secondary-background-hover)); + transform: translateY(-1px); + box-shadow: var(--elevation-high); +} + +.vc-settings-quickActions-pill:focus-visible { + outline: 2px solid var(--border-focus, var(--focus-primary)); outline-offset: 2px; transition-duration: 0s; } diff --git a/src/components/settings/tabs/patchHelper/FullPatchInput.tsx b/src/components/settings/tabs/patchHelper/FullPatchInput.tsx index 68ec174c..2a9ba6f8 100644 --- a/src/components/settings/tabs/patchHelper/FullPatchInput.tsx +++ b/src/components/settings/tabs/patchHelper/FullPatchInput.tsx @@ -77,7 +77,7 @@ export function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacemen onChange={setPatch} onBlur={update} /> - {error !== "" && {error}} + {error !== "" && {error}} ); } diff --git a/src/components/settings/tabs/patchHelper/PatchPreview.tsx b/src/components/settings/tabs/patchHelper/PatchPreview.tsx index f00a2ecf..f640730d 100644 --- a/src/components/settings/tabs/patchHelper/PatchPreview.tsx +++ b/src/components/settings/tabs/patchHelper/PatchPreview.tsx @@ -140,7 +140,7 @@ export function PatchPreview({ module, match, replacement, setReplacementError } )} {compileResult && ( - + {compileResult[1]} )} diff --git a/src/components/settings/tabs/plugins/UIElements.css b/src/components/settings/tabs/plugins/UIElements.css index 30777e62..c205abc2 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, var(--interactive-normal)); margin-top: 0.5em; cursor: pointer; &:hover { - background-color: var(--background-modifier-hover); - color: var(--interactive-hover); + background-color: var(--background-mod-subtle, var(--background-modifier-hover)); + color: var(--interactive-icon-hover, var(--interactive-hover)); } } diff --git a/src/components/settings/tabs/plugins/components/styles.css b/src/components/settings/tabs/plugins/components/styles.css index 100c1d4c..f4cafd06 100644 --- a/src/components/settings/tabs/plugins/components/styles.css +++ b/src/components/settings/tabs/plugins/components/styles.css @@ -31,5 +31,5 @@ } .vc-plugins-setting-error { - color: var(--text-danger); + color: var(--text-feedback-critical, var(--text-danger, #FF5C5C)); } \ No newline at end of file diff --git a/src/components/settings/tabs/plugins/styles.css b/src/components/settings/tabs/plugins/styles.css index 5f48f241..5e9532f9 100644 --- a/src/components/settings/tabs/plugins/styles.css +++ b/src/components/settings/tabs/plugins/styles.css @@ -29,16 +29,16 @@ padding: 0; background: transparent; margin-right: 8px; - color: var(--icon-secondary); + color: var(--icon-muted, var(--icon-secondary)); transition: background-color .2s ease; &:hover { - color: var(--interactive-hover) + color: var(--interactive-icon-hover, var(--interactive-hover)) } } .vc-plugins-settings-button:hover { - color: var(--interactive-hover); + color: var(--interactive-icon-hover, var(--interactive-hover)); } .vc-plugins-filter-controls { @@ -69,7 +69,8 @@ } .vc-plugins-restart-button { - background-color: var(--yellow-300) !important; + margin-top: 0.5em; + background: var(--icon-status-idle, var(--info-warning-foreground)) !important; } .vc-plugins-info-icon:not(:hover, :focus) { @@ -88,4 +89,4 @@ display: flex; flex-direction: column; gap: 1.25em; -} \ No newline at end of file +} diff --git a/src/components/settings/tabs/styles.css b/src/components/settings/tabs/styles.css index 46050521..906252cf 100644 --- a/src/components/settings/tabs/styles.css +++ b/src/components/settings/tabs/styles.css @@ -20,7 +20,7 @@ display: inline-block !important; color: var(--text-default) !important; padding: 0.5em 1em; - border: 1px solid var(--input-border); + border: 1px solid var(--input-border-default, var(--input-border)); max-height: unset; background-color: transparent; box-sizing: border-box; @@ -52,7 +52,7 @@ .vc-cloud-erase-data-danger-btn { color: var(--white-500); - background-color: var(--button-danger-background); + background-color: var(--redesign-button-danger-background, var(--button-danger-background)); } .vc-settings-modal { diff --git a/src/components/settings/tabs/themes/styles.css b/src/components/settings/tabs/themes/styles.css index c33ad226..06343dd3 100644 --- a/src/components/settings/tabs/themes/styles.css +++ b/src/components/settings/tabs/themes/styles.css @@ -4,39 +4,6 @@ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } -.vc-settings-theme-card { - display: flex; - flex-direction: column; - background-color: var(--background-base-lower-alt); - color: var(--interactive-active); - border-radius: 8px; - padding: 1em; - width: 100%; - transition: 0.1s ease-out; - transition-property: box-shadow, transform, background, opacity; -} - -.vc-settings-theme-info-card { - margin-top: 16px; - margin-bottom: 16px; -} - -.vc-settings-theme-card-text { - text-overflow: ellipsis; - height: 1.2em; - margin-bottom: 2px; - white-space: nowrap; - overflow: hidden; -} - -.vc-settings-theme-author::before { - content: "by "; -} - -.vc-settings-theme-validator-card { - margin-top: 16px; -} - .vc-settings-csp-list { display: flex; flex-direction: column; @@ -57,4 +24,4 @@ } --custom-button-button-md-height: 26px; -} \ No newline at end of file +} diff --git a/src/plugins/_core/settings.tsx b/src/plugins/_core/settings.tsx index c3428bd7..f3c3c901 100644 --- a/src/plugins/_core/settings.tsx +++ b/src/plugins/_core/settings.tsx @@ -35,7 +35,7 @@ let LayoutTypes = { PANEL: 3, PANE: 4 }; -waitFor(["SECTION", "SIDEBAR_ITEM", "PANEL", "PANE"], v => LayoutTypes = v); +waitFor(["SECTION", "SIDEBAR_ITEM", "PANEL"], v => LayoutTypes = v); const FallbackSectionTypes = { HEADER: "HEADER", @@ -61,11 +61,13 @@ interface SettingsLayoutNode { type: number; key?: string; legacySearchKey?: string; + getLegacySearchKey?(): string; useLabel?(): string; useTitle?(): string; buildLayout?(): SettingsLayoutNode[]; icon?(): ReactNode; render?(): ReactNode; + StronglyDiscouragedCustomComponent?(): ReactNode; } interface EntryOptions { @@ -186,28 +188,43 @@ export default definePlugin({ buildEntry(options: EntryOptions): SettingsLayoutNode { const { key, title, panelTitle = title, Component, Icon } = options; + const panel: SettingsLayoutNode = { + key: key + "_panel", + type: LayoutTypes.PANEL, + useTitle: () => panelTitle, + }; + + const render = { + // FIXME + StronglyDiscouragedCustomComponent: () => , + render: () => , + }; + + // FIXME + if (LayoutTypes.PANE) { + panel.buildLayout = () => [ + { + key: key + "_pane", + type: LayoutTypes.PANE, + useTitle: () => panelTitle, + buildLayout: () => [], + ...render + } + ]; + } else { + Object.assign(panel, render); + panel.buildLayout = () => []; + } + return ({ key, type: LayoutTypes.SIDEBAR_ITEM, + // FIXME legacySearchKey: title.toUpperCase(), + getLegacySearchKey: () => title.toUpperCase(), useTitle: () => title, icon: () => , - buildLayout: () => [ - { - key: key + "_panel", - type: LayoutTypes.PANEL, - useTitle: () => panelTitle, - buildLayout: () => [ - { - key: key + "_pane", - type: LayoutTypes.PANE, - buildLayout: () => [], - render: () => , - useTitle: () => panelTitle - } - ] - } - ] + buildLayout: () => [panel] }); }, diff --git a/src/plugins/betterSessions/index.tsx b/src/plugins/betterSessions/index.tsx index 6413fa5e..1a723bf7 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, var(--interactive-normal))", color: "var(--background-base-lower)", }} > diff --git a/src/plugins/clientTheme/clientTheme.css b/src/plugins/clientTheme/clientTheme.css index 828703e5..a0607efb 100644 --- a/src/plugins/clientTheme/clientTheme.css +++ b/src/plugins/clientTheme/clientTheme.css @@ -16,11 +16,11 @@ } .vc-clientTheme-container [class^="swatch"] { - border: thin solid var(--input-border) !important; + border: thin solid var(--input-border-default, var(--input-border)) !important; } .vc-clientTheme-buttons-container { margin-top: 16px; display: flex; gap: 4px; -} +} \ No newline at end of file diff --git a/src/plugins/copyFileContents/style.css b/src/plugins/copyFileContents/style.css index 91034bf2..4ad02675 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, var(--interactive-normal)); cursor: pointer; padding-left: 4px; } .vc-cfc-button:hover { - color: var(--interactive-hover); -} + color: var(--interactive-icon-hover, var(--interactive-hover)); +} \ No newline at end of file diff --git a/src/plugins/customRPC/index.tsx b/src/plugins/customRPC/index.tsx index db541b84..2408b8cc 100644 --- a/src/plugins/customRPC/index.tsx +++ b/src/plugins/customRPC/index.tsx @@ -276,7 +276,7 @@ export default definePlugin({ -
+
{activity && diff --git a/src/plugins/ignoreActivities/index.tsx b/src/plugins/ignoreActivities/index.tsx index 2b9fa694..01db9bb4 100644 --- a/src/plugins/ignoreActivities/index.tsx +++ b/src/plugins/ignoreActivities/index.tsx @@ -64,7 +64,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, var(--interactive-normal))"); } function handleActivityToggle(e: React.MouseEvent, activity: IgnoredActivity) { diff --git a/src/plugins/memberCount/style.css b/src/plugins/memberCount/style.css index 009e7d10..fcb4cf0c 100644 --- a/src/plugins/memberCount/style.css +++ b/src/plugins/memberCount/style.css @@ -47,7 +47,7 @@ .vc-membercount-total-count { fill: none; - stroke: var(--status-offline); + stroke: var(--icon-status-offline, var(--status-offline)); stroke-width: 4px; width: 15px; height: 15px; diff --git a/src/plugins/messageLogger/deleteStyleText.css b/src/plugins/messageLogger/deleteStyleText.css index 655294c1..9d798d1d 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(--interactive-normal, 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 c149933f..fff85b73 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, var(--background-modifier-hover)); } .vc-permviewer-modal-list-item-active { - background-color: var(--background-modifier-selected); + background-color: var(--background-mod-strong, var(--background-modifier-selected)); } .vc-permviewer-modal-list-item-text { @@ -100,7 +100,7 @@ .vc-permviewer-modal-divider { width: 2px; - background-color: var(--background-modifier-active); + background-color: var(--background-mod-normal, var(--background-modifier-active)); } .vc-permviewer-modal-perms { @@ -114,7 +114,7 @@ align-items: center; gap: 5px; padding: 10px 2px 10px 10px; - border-bottom: 2px solid var(--background-modifier-active); + border-bottom: 2px solid var(--background-mod-normal, var(--background-modifier-active)); } .vc-permviewer-modal-perms-item:last-child { @@ -122,7 +122,7 @@ } .vc-permviewer-modal-perms-item-icon { - border: 1px solid var(--background-modifier-selected); + border: 1px solid var(--background-mod-strong, var(--background-modifier-selected)); 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, var(--interactive-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, var(--interactive-normal)); border: 1px solid var(--user-profile-border); /* stylelint-disable-next-line value-no-vendor-prefix */ width: -moz-fit-content; @@ -163,4 +163,4 @@ display: flex; align-items: center; gap: 4px; -} +} \ No newline at end of file diff --git a/src/plugins/pictureInPicture/styles.css b/src/plugins/pictureInPicture/styles.css index d0a81ca5..e889bc4b 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, var(--interactive-normal)); } .vc-pip-button:hover { - background-color: var(--background-modifier-hover); - color: var(--interactive-hover); -} + background-color: var(--background-mod-subtle, var(--background-modifier-hover)); + color: var(--interactive-icon-hover, var(--interactive-hover)); +} \ No newline at end of file diff --git a/src/plugins/pinDms/styles.css b/src/plugins/pinDms/styles.css index 173f0f76..d038e06b 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, var(--interactive-normal)); transform: rotate(90deg) } .vc-pindms-collapsed .vc-pindms-collapse-icon { transform: rotate(0deg); -} +} \ No newline at end of file diff --git a/src/plugins/plainFolderIcon/style.css b/src/plugins/plainFolderIcon/style.css index 3e2992fc..d8c7f6dc 100644 --- a/src/plugins/plainFolderIcon/style.css +++ b/src/plugins/plainFolderIcon/style.css @@ -6,5 +6,5 @@ transform: translateZ(0); /* The new icons are fully transparent. Add a sane default to match the old behavior */ - background-color: color-mix(in oklab, var(--custom-folder-color, var(--bg-brand)) 40%, transparent); -} + background-color: color-mix(in oklab, var(--custom-folder-color, var(--badge-background-default, var(--bg-brand))) 40%, transparent); +} \ No newline at end of file diff --git a/src/plugins/readAllNotificationsButton/style.css b/src/plugins/readAllNotificationsButton/style.css index ece1aba5..a3d55a21 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, var(--interactive-normal)); 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, var(--interactive-active)); } \ No newline at end of file diff --git a/src/plugins/reviewDB/style.css b/src/plugins/reviewDB/style.css index bf2fed30..c462466d 100644 --- a/src/plugins/reviewDB/style.css +++ b/src/plugins/reviewDB/style.css @@ -8,13 +8,14 @@ } .vc-rdb-input { - padding-left: 12px; + padding-inline: 12px; margin-top: 6px; margin-bottom: 12px; resize: none; overflow: hidden; background: transparent; - border: 1px solid var(--profile-message-input-border-color); + border: 1px solid var(--input-border-default, var(--border-muted)); + box-sizing: border-box; } .vc-rdb-modal-footer-wrapper { @@ -39,7 +40,7 @@ .vc-rdb-modal-footer .vc-rdb-input { margin-bottom: 0; - background: var(--input-background); + background: var(--input-background-default, var(--input-background)); } .vc-rdb-modal-footer [class|="pageControlContainer"] { @@ -61,7 +62,7 @@ } .vc-rdb-review:hover { - background: var(--background-message-hover) !important; + background: var(--message-background-hover, var(--background-message-hover)) !important; border-radius: 8px; } diff --git a/src/plugins/sendTimestamps/styles.css b/src/plugins/sendTimestamps/styles.css index 7d82b800..08d119b8 100644 --- a/src/plugins/sendTimestamps/styles.css +++ b/src/plugins/sendTimestamps/styles.css @@ -1,11 +1,11 @@ .vc-st-date-picker { - background-color: var(--input-background); + background-color: var(--input-background-default, var(--input-background)); color: var(--text-default); width: 95%; padding: 8px 8px 8px 12px; margin: 1em 0; outline: none; - border: 1px solid var(--input-background); + border: 1px solid var(--input-background-default, var(--input-background)); border-radius: 4px; font-weight: 500; font-style: inherit; @@ -36,4 +36,4 @@ .vc-st-preview-text { margin-bottom: 1em; -} +} \ No newline at end of file diff --git a/src/plugins/serverInfo/styles.css b/src/plugins/serverInfo/styles.css index f10fb6ac..741499c0 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, var(--interactive-normal)); 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, var(--interactive-active)); } .vc-gp-info { @@ -97,5 +97,5 @@ } .vc-gp-scroller [class^="listRow"]:hover { - background-color: var(--background-modifier-hover); -} + background-color: var(--background-mod-subtle, var(--background-modifier-hover)); +} \ No newline at end of file diff --git a/src/plugins/showConnections/VerifiedIcon.tsx b/src/plugins/showConnections/VerifiedIcon.tsx index 0e64527e..07c6ff06 100644 --- a/src/plugins/showConnections/VerifiedIcon.tsx +++ b/src/plugins/showConnections/VerifiedIcon.tsx @@ -25,7 +25,7 @@ const VerifiedIconComponent = findComponentByCodeLazy("#{intl::CONNECTIONS_ROLE_ export function VerifiedIcon() { const color = useToken(ColorMap.colors.INTERACTIVE_MUTED).hex(); - const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ACTIVE).hex(); + const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ICON_ACTIVE ?? ColorMap.colors.INTERACTIVE_ACTIVE).hex(); return ( [class^="slider"] [class^="barFill"] { - background-color: var(--interactive-active); + background-color: var(--interactive-icon-active, var(--interactive-active)); } #vc-spotify-progress-bar > [class^="slider"]:hover [class^="barFill"] { @@ -192,9 +184,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, var(--interactive-active)); + border-color: var(--interactive-icon-default, var(--interactive-normal)); + color: var(--interactive-icon-default, var(--interactive-normal)); opacity: 0; transition: opacity 0.1s; } diff --git a/src/plugins/textReplace/index.tsx b/src/plugins/textReplace/index.tsx index 99bf3aac..35996ccc 100644 --- a/src/plugins/textReplace/index.tsx +++ b/src/plugins/textReplace/index.tsx @@ -92,7 +92,7 @@ function renderFindError(find: string) { return null; } catch (e) { return ( - + {String(e)} ); diff --git a/src/plugins/userVoiceShow/style.css b/src/plugins/userVoiceShow/style.css index 322b8ed3..5984f954 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, var(--interactive-normal)); 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, var(--interactive-hover)); } .vc-uvs-profile-speaker { diff --git a/src/plugins/vencordToolbox/styles.css b/src/plugins/vencordToolbox/styles.css index 642375b4..72b343ed 100644 --- a/src/plugins/vencordToolbox/styles.css +++ b/src/plugins/vencordToolbox/styles.css @@ -4,13 +4,13 @@ } .vc-toolbox-icon { - color: var(--interactive-normal); + color: var(--interactive-icon-default, var(--interactive-normal)); } .vc-toolbox-btn[class*="selected"] .vc-toolbox-icon { - color: var(--interactive-active); + color: var(--interactive-icon-active, var(--interactive-active)); } .vc-toolbox-btn:hover .vc-toolbox-icon { - color: var(--interactive-hover); -} + color: var(--interactive-icon-hover, var(--interactive-hover)); +} \ No newline at end of file diff --git a/src/plugins/voiceDownload/style.css b/src/plugins/voiceDownload/style.css index 2b776023..56ebf553 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, var(--interactive-normal)); margin-left: 12px; cursor: pointer; position: relative; } .vc-voice-download:hover { - color: var(--interactive-active); -} + color: var(--interactive-icon-active, var(--interactive-active)); +} \ No newline at end of file diff --git a/src/plugins/voiceMessages/styles.css b/src/plugins/voiceMessages/styles.css index 8fd4062d..de48729c 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, var(--button-secondary-background)); width: 16px; height: 16px; border-radius: 50%; @@ -50,5 +50,5 @@ } .vc-vmsg-error { - color: var(--text-danger); + color: var(--text-feedback-critical, var(--text-danger, #FF5C5C)); } \ No newline at end of file