From e9bcda23abdac5552a5e1133b5fe5af9b6191960 Mon Sep 17 00:00:00 2001 From: gitb0i <64463178+gitb0i@users.noreply.github.com> Date: Sun, 16 Aug 2026 08:33:34 -0700 Subject: [PATCH] ChannelTabs: use theme colors (#1301) --- .../channelTabs/components/ChannelTab.tsx | 2 +- src/equicordplugins/channelTabs/style.css | 64 +++++++++---------- .../channelTabs/util/constants.tsx | 2 +- 3 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/equicordplugins/channelTabs/components/ChannelTab.tsx b/src/equicordplugins/channelTabs/components/ChannelTab.tsx index 5bec9dc1a..bb950c975 100644 --- a/src/equicordplugins/channelTabs/components/ChannelTab.tsx +++ b/src/equicordplugins/channelTabs/components/ChannelTab.tsx @@ -133,7 +133,7 @@ export const NotificationDot = ({ channelIds }: { channelIds: string[]; }) => { width: "16px" }} ref={node => node?.style.setProperty("background-color", - hasMention ? "var(--red-400)" : "var(--brand-500)", "important" + hasMention ? "var(--danger-color, var(--red-400))" : "var(--main-color, var(--brand-experiment, var(--brand-500)))", "important" )} > {badgeText} diff --git a/src/equicordplugins/channelTabs/style.css b/src/equicordplugins/channelTabs/style.css index 5e82d29a5..d62af688f 100644 --- a/src/equicordplugins/channelTabs/style.css +++ b/src/equicordplugins/channelTabs/style.css @@ -1,5 +1,5 @@ :root { - --channeltabs-red: #f23f42; + --channeltabs-red: var(--danger-color, #f23f42); --channeltabs-blue: #0052b6; --channeltabs-yellow: #f0b132; --channeltabs-green: #24934f; @@ -153,8 +153,8 @@ } .vc-channeltabs-bookmark-star-checked { - fill: var(--brand-experiment, var(--brand-500)); - stroke: var(--brand-experiment, var(--brand-500)); + fill: var(--main-color, var(--brand-experiment, var(--brand-500))); + stroke: var(--main-color, var(--brand-experiment, var(--brand-500))); } .vc-channeltabs-bookmark { @@ -232,7 +232,7 @@ cursor: ew-resize; z-index: 10; opacity: 0; - background: var(--brand-500); + background: var(--hover-color, var(--main-color, var(--brand-experiment, var(--brand-500)))); border-radius: 0 11px 11px 0; transition: opacity 0.2s ease; } @@ -301,8 +301,8 @@ .vc-channeltabs-tab-selected { transform: translateY(-1px); background-color: var(--background-base-low); - border: 1px solid var(--brand-500); - border-bottom: 2px solid var(--brand-500); + border: 1px solid var(--main-color, var(--brand-experiment, var(--brand-500))); + border-bottom: 2px solid var(--main-color, var(--brand-experiment, var(--brand-500))); box-shadow: 0 1px 3px rgb(0 0 0 / 20%); } @@ -360,7 +360,7 @@ .vc-channeltabs-tab:hover:not(.vc-channeltabs-tab-selected) { transform: translateY(-1px) scale(1.02); background-color: var(--background-secondary-alt); - border-color: var(--border-subtle); + border-color: var(--hover-color, var(--border-subtle)); box-shadow: 0 2px 4px rgb(0 0 0 / 10%); } @@ -587,7 +587,7 @@ /* stylelint-disable-next-line no-descending-specificity */ .vc-channeltabs-tab:has([data-has-mention="true"]) { animation: vc-channeltabs-mention-pulse 2s ease-in-out infinite; - box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%); + box-shadow: 0 0 8px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 60%, transparent), 0 0 16px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 30%, transparent); } @keyframes vc-channeltabs-mention-pulse { @@ -595,11 +595,11 @@ /* stylelint-disable-next-line rule-empty-line-before */ 0%, 100% { - box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%); + box-shadow: 0 0 8px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 60%, transparent), 0 0 16px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 30%, transparent); } 50% { - box-shadow: 0 0 12px rgb(242 63 66 / 80%), 0 0 24px rgb(242 63 66 / 50%); + box-shadow: 0 0 12px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 80%, transparent), 0 0 24px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 50%, transparent); } } @@ -607,8 +607,8 @@ .vc-channeltabs-tab-selected:has([data-has-mention="true"]) { box-shadow: 0 1px 3px rgb(0 0 0 / 20%), - 0 0 12px rgb(242 63 66 / 80%), - 0 0 24px rgb(242 63 66 / 50%); + 0 0 12px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 80%, transparent), + 0 0 24px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 50%, transparent); } /* Pink Nitro glow effect (easter egg) */ @@ -862,7 +862,7 @@ top: 0; bottom: 0; width: 3px; - background: var(--brand-500); + background: var(--main-color, var(--brand-experiment, var(--brand-500))); border-radius: 3px; animation: vc-channeltabs-drop-indicator 0.5s ease-in-out infinite; } @@ -873,12 +873,12 @@ 0%, 100% { opacity: 0.6; - box-shadow: 0 0 8px var(--brand-500); + box-shadow: 0 0 8px var(--main-color, var(--brand-experiment, var(--brand-500))); } 50% { opacity: 1; - box-shadow: 0 0 12px var(--brand-500); + box-shadow: 0 0 12px var(--main-color, var(--brand-experiment, var(--brand-500))); } } @@ -1072,8 +1072,8 @@ /* Drag and drop visual feedback */ .vc-channeltabs-bookmarks-drop-target { - background-color: color-mix(in srgb, var(--brand-500) 15%, transparent); - border: 1px dashed color-mix(in srgb, var(--brand-500) 65%, transparent); + background-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 15%, transparent); + border: 1px dashed color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 65%, transparent); border-radius: 6px; } @@ -1083,8 +1083,8 @@ } .vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-target { - border-color: color-mix(in srgb, var(--brand-500) 70%, var(--border-subtle)); - box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 35%, transparent); + border-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 70%, var(--border-subtle)); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 35%, transparent); } .vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-before::before, @@ -1095,8 +1095,8 @@ bottom: 3px; width: 2px; border-radius: 999px; - background-color: var(--brand-500); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-500) 30%, transparent); + background-color: var(--main-color, var(--brand-experiment, var(--brand-500))); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 30%, transparent); } .vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-before::before { @@ -1116,10 +1116,10 @@ } .vc-channeltabs-bookmark.vc-channeltabs-folder-drop-target { - background-color: color-mix(in srgb, var(--brand-500) 22%, transparent); - border: 1px solid color-mix(in srgb, var(--brand-500) 80%, var(--border-subtle)); + background-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 22%, transparent); + border: 1px solid color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 80%, var(--border-subtle)); transform: scale(1.03); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 20%, transparent); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 20%, transparent); } .vc-channeltabs-bookmark.vc-channeltabs-folder-expanded { @@ -1142,13 +1142,13 @@ /* Active bookmark visual indicator */ .vc-channeltabs-bookmark.vc-channeltabs-bookmark-active { - border: 1px solid var(--brand-500); - box-shadow: 0 0 4px var(--brand-500); - background-color: color-mix(in srgb, var(--brand-500) 15%, transparent); + border: 1px solid var(--main-color, var(--brand-experiment, var(--brand-500))); + box-shadow: 0 0 4px var(--main-color, var(--brand-experiment, var(--brand-500))); + background-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 15%, transparent); } .vc-channeltabs-bookmark.vc-channeltabs-bookmark-active:hover { - box-shadow: 0 0 6px var(--brand-500); + box-shadow: 0 0 6px var(--hover-color, var(--main-color, var(--brand-experiment, var(--brand-500)))); } /* keybind Settings Styles */ @@ -1207,7 +1207,7 @@ .channelTabs-keybind-button:hover:not(:disabled) { background-color: var(--background-mod-subtle); - border-color: var(--brand-experiment); + border-color: var(--hover-color, var(--main-color, var(--brand-experiment, var(--brand-500)))); transform: translateY(-1px); box-shadow: 0 2px 8px rgb(0 0 0 / 20%); } @@ -1223,11 +1223,11 @@ } .channelTabs-keybind-button.listening { - background: linear-gradient(135deg, var(--brand-experiment) 0%, var(--brand-experiment-560) 100%); + background: linear-gradient(135deg, var(--main-color, var(--brand-experiment, var(--brand-500))) 0%, var(--brand-experiment-560) 100%); color: var(--white); - border-color: var(--brand-experiment); + border-color: var(--main-color, var(--brand-experiment, var(--brand-500))); animation: keybind-pulse 1.5s ease-in-out infinite; - box-shadow: 0 0 12px var(--brand-experiment); + box-shadow: 0 0 12px var(--main-color, var(--brand-experiment, var(--brand-500))); } @keyframes keybind-pulse { diff --git a/src/equicordplugins/channelTabs/util/constants.tsx b/src/equicordplugins/channelTabs/util/constants.tsx index b4fab165e..02e4a66b7 100644 --- a/src/equicordplugins/channelTabs/util/constants.tsx +++ b/src/equicordplugins/channelTabs/util/constants.tsx @@ -31,7 +31,7 @@ function AnimationSettings(): JSX.Element { { label: "Plus Button Pulse", value: "plus-pulse", selected: settings.store.animationPlusPulse }, { label: "Mention Badge Glow", value: "mention-glow", selected: settings.store.animationMentionGlow }, { label: "Compact Mode Expansion", value: "compact-expand", selected: settings.store.animationCompactExpand }, - { label: "Selected Tab Blue Border", value: "selected-border", selected: settings.store.animationSelectedBorder }, + { label: "Selected Tab Accent Border", value: "selected-border", selected: settings.store.animationSelectedBorder }, { label: "Selected Tab Background Color", value: "selected-background", selected: settings.store.animationSelectedBackground }, { label: "Tab Shadow Effects", value: "tab-shadows", selected: settings.store.animationTabShadows }, { label: "Tab Repositioning (smooth position changes)", value: "tab-positioning", selected: settings.store.animationTabPositioning },