Skip to content

Commit b9b5547

Browse files
cxnteredcxntered
authored
feat: minor improvements (#440)
* 🐛 fix: misc elements' contrast * 🐛 fix: update removed variables * 🐛 fix: rainbow thread colors * ✨ feature: style mana components * ♻️ refactor: cleanup file icons * 🐛 fix: delete button icon color * 🐛 fix: notification badge color * ✨ feature: style status variables * 🔨 chore: remove img content seemingly unused/incompatible now, but can always be reverted * 🐛 fix: icon notification color * 🐛 fix: close window button hover color * 🐛 fix: unread mention bar contrast * 🐛 fix: dm mention badge contrast thanks discord
1 parent f235754 commit b9b5547

File tree

8 files changed

+96
-105
lines changed

8 files changed

+96
-105
lines changed

‎src/_theme.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
@import "components/variables";
1818

1919
@import "components/icons/bgImg";
20-
@import "components/icons/imgContent";
2120
@import "components/icons/svgBg";
2221
@import "components/icons/svgColor";
2322

‎src/components/_details.scss‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,31 +28,29 @@ span[class^="folderGroupBackground_"] {
2828
}
2929

3030
// Switches
31-
div[class^="control_"] > div[data-toggleable-component="switch"] {
31+
label[class^="container_"] > div[data-mana-component="switch"] {
3232
background-color: #{$surface2} !important;
33+
border: unset !important;
3334
transition: background-color 0.2s;
3435

35-
> svg {
36-
> rect {
37-
fill: var(--white);
38-
transition: fill 0.2s;
39-
}
40-
> svg > path {
41-
fill: #{$surface2};
42-
transition: fill 0.2s;
43-
}
36+
&:hover {
37+
background-color: #{$surface1} !important;
4438
}
4539

46-
&[class*="checked_"] {
40+
> svg > rect {
41+
fill: var(--white);
42+
transition: fill 0.2s;
43+
}
44+
45+
&:has(+ span > input:checked) {
4746
background-color: var(--brand-500) !important;
4847

49-
> svg {
50-
> rect {
51-
fill: #{$crust};
52-
}
53-
> svg > path {
54-
fill: var(--brand-500);
55-
}
48+
&:hover {
49+
background-color: var(--brand-560) !important;
50+
}
51+
52+
> svg > rect {
53+
fill: #{$crust};
5654
}
5755
}
5856
}
@@ -174,3 +172,8 @@ div[class^="toast_"][data-type="success"] {
174172
div[class^="toast_"][data-type="failure"] {
175173
--icon-feedback-critical: #{$base};
176174
}
175+
176+
// Delete button icon color
177+
div[class*="button_"][class*="dangerous_"] {
178+
color: #{$red};
179+
}

‎src/components/_sidebar.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
& {
88
--thread-default: var(--ctp-rainbow-thread-disabled) var(--channels-default);
99
--thread-core: var(--ctp-rainbow-thread-disabled) var(--text-default);
10-
--thread-muted: var(--ctp-rainbow-thread-disabled) var(--interactive-muted);
10+
--thread-spine: var(--ctp-rainbow-thread-disabled) var(--spine-default);
11+
--thread-muted: var(--ctp-rainbow-thread-disabled) var(--text-muted);
1112
}
1213

1314
@mixin rainbow-vars($colour) {
@@ -16,7 +17,8 @@
1617
--interactive-text-active: var(--thread-default, #{$colour});
1718
--text-strong: var(--thread-default, #{$colour});
1819
--text-default: var(--thread-core, #{$colour});
19-
--interactive-muted: var(--thread-muted, #{mix($colour, $crust, 50%)});
20+
--text-muted: var(--thread-muted, #{mix($colour, $crust, 50%)});
21+
--spine-default: var(--thread-spine, #{mix($colour, $crust, 50%)});
2022
}
2123

2224
@mixin rainbow-thread($n, $colour) {
@@ -50,7 +52,7 @@ ul[class^="content_"] > li[class^="container_"] > ul[role="group"] {
5052
// Repeating gradient on core spine element to not have unsightly gaps between the splines of mixin(rainbow-thread)
5153
// `to bottom` default
5254
background: var(
53-
--thread-muted,
55+
--thread-spine,
5456
repeating-linear-gradient(
5557
#{rainbow-gradient(($red, $peach, $yellow, $green, $blue, $mauve))}
5658
)

‎src/components/_variables.scss‎

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,6 @@
5959
--text-feedback-warning: #{$yellow};
6060
--text-feedback-info: #{$blue};
6161

62-
--background-feedback-positive: #{adjust-color($green, $alpha: -0.9)};
63-
--background-feedback-critical: #{adjust-color($red, $alpha: -0.9)};
64-
--background-feedback-warning: #{adjust-color($yellow, $alpha: -0.9)};
65-
--background-feedback-info: #{adjust-color($blue, $alpha: -0.9)};
66-
6762
--message-reacted-background-default: #{adjust-color($brand, $alpha: -0.7)} !important;
6863
--message-reacted-text-default: #{$brand};
6964

@@ -73,6 +68,7 @@
7368
--opacity-blurple-32: #{adjust-color($brand, $alpha: -0.68)};
7469
--opacity-blurple-60: #{adjust-color($brand, $alpha: -0.4)};
7570
--blurple-50: #{$brand};
71+
--blurple-60: #{darken($brand, math.div(20%, 2))};
7672

7773
// TODO: `2025_04_desktop_refresh_fast_follows` "Darker Guild List Background"
7874
--app-frame-background: #{darken($crust, 2%)};
@@ -95,8 +91,11 @@
9591
--chat-border: #{$crust};
9692
--chat-text-muted: #{$subtext0};
9793

94+
--checkbox-icon-active: #{$crust};
9895
--checkbox-border-default: #{$overlay0};
9996

97+
--radio-thumb-background-active: #{$crust};
98+
10099
--border-muted: #{$surface0};
101100
--border-strong: #{$mantle};
102101
--border-normal: #{$crust};
@@ -125,15 +124,19 @@
125124
--background-feedback-info: #{adjust-color($sky, $alpha: -0.85)};
126125
--icon-feedback-info: #{$sky};
127126

127+
--background-feedback-notification: #{$red};
128+
--icon-feedback-notification: #{$red};
129+
--badge-notification-background: #{$red};
130+
131+
--status-positive: #{$green};
128132
--status-positive-background: #{$green};
129133
--status-positive-text: #{$base};
130134

135+
--status-warning: #{$yellow};
131136
--status-warning-background: #{$yellow};
132137
--status-warning-text: #{$base};
133138

134139
--status-danger: #{$red};
135-
--status-positive: #{$green};
136-
--status-warning: #{$yellow};
137140

138141
// colorWarning
139142
--black-500: #{$crust};
@@ -157,10 +160,7 @@
157160
--primary-800: #{$crust};
158161

159162
--white: #{$text};
160-
--white-400: #{$text};
161163
--white-500: #{$text};
162-
--white-600: #{$subtext1};
163-
--white-700: #{$subtext0};
164164

165165
--guild-boosting-pink: #{$pink};
166166
--guild-boosting-blue: #{$blue};
@@ -188,6 +188,13 @@
188188
--control-primary-background-hover: #{darken($brand, math.div(15%, 2))};
189189
--control-primary-background-active: #{darken($brand, math.div(25%, 2))};
190190

191+
--control-secondary-background-default: #{$surface1} !important;
192+
--control-secondary-background-hover: #{darken($surface1, math.div(10%, 2))};
193+
--control-secondary-background-active: #{darken($surface1, math.div(15%, 2))};
194+
--control-secondary-border-default: #{$surface0};
195+
--control-secondary-text-default: #{$text} !important;
196+
--control-secondary-text-hover: #{$text};
197+
191198
--control-critical-primary-background-default: #{$red};
192199
--control-critical-primary-background-hover: #{darken($red, math.div(10%, 2))};
193200
--control-critical-primary-background-active: #{darken(
@@ -197,36 +204,28 @@
197204
--control-critical-primary-text-default: #{$base};
198205
--control-critical-primary-text-hover: #{$base};
199206

200-
--control-connected-background-default: #{$green};
201-
--control-connected-background-hover: #{darken($green, math.div(10%, 2))};
202-
--control-connected-background-active: #{darken($green, math.div(15%, 2))};
203-
--control-connected-border-default: #{$green};
204-
--control-connected-border-hover: #{darken($green, math.div(5%, 2))};
205-
--control-connected-border-active: #{darken($green, math.div(5%, 2))};
206-
207-
--control-secondary-background-default: #{$surface1} !important;
208-
--control-secondary-background-hover: #{darken($surface1, math.div(10%, 2))};
209-
--control-secondary-background-active: #{darken($surface1, math.div(15%, 2))};
210-
--control-secondary-text-default: #{$text} !important;
211-
212-
--control-critical-secondary-text-default: #{$text};
213-
--control-critical-secondary-border-default: #{$red};
214207
--control-critical-secondary-background-default: transparent;
215208
--control-critical-secondary-background-hover: #{darken(
216209
$red,
217210
math.div(5%, 2)
218211
)};
219-
--control-critical-secondary-text-hover: #{$base};
220-
--control-critical-secondary-border-hover: #{darken($red, math.div(5%, 2))};
221212
--control-critical-secondary-background-active: #{darken(
222213
$red,
223214
math.div(10%, 2)
224215
)};
225-
--control-critical-secondary-text-active: #{$base};
216+
--control-critical-secondary-border-default: #{$red};
217+
--control-critical-secondary-border-hover: #{darken($red, math.div(5%, 2))};
226218
--control-critical-secondary-border-active: #{darken($red, math.div(5%, 2))};
219+
--control-critical-secondary-text-default: #{$text};
220+
--control-critical-secondary-text-hover: #{$base};
221+
--control-critical-secondary-text-active: #{$base};
227222

228-
--control-secondary-border-default: #{$surface0};
229-
--control-secondary-text-hover: #{$text};
223+
--control-connected-background-default: #{$green};
224+
--control-connected-background-hover: #{darken($green, math.div(10%, 2))};
225+
--control-connected-background-active: #{darken($green, math.div(15%, 2))};
226+
--control-connected-border-default: #{$green};
227+
--control-connected-border-hover: #{darken($green, math.div(5%, 2))};
228+
--control-connected-border-active: #{darken($green, math.div(5%, 2))};
230229

231230
// discord still uses the button-outline naming for some variables for some reason?
232231
--button-outline-primary-text: #{$text};
@@ -235,19 +234,6 @@
235234
--button-outline-brand-background-hover: #{darken($brand, math.div(5%, 2))};
236235
--button-outline-brand-border-active: #{darken($brand, math.div(5%, 2))};
237236

238-
// used by vencord
239-
--redesign-button-positive-background: #{$green} !important;
240-
--redesign-button-positive-pressed-background: #{darken(
241-
$green,
242-
math.div(10%, 2)
243-
)};
244-
245-
--redesign-button-secondary-background: #{$surface1} !important;
246-
--redesign-button-secondary-pressed-background: #{darken(
247-
$surface1,
248-
math.div(10%, 2)
249-
)};
250-
251237
--modal-background: #{$base} !important;
252238
--modal-footer-background: #{$base};
253239

@@ -292,6 +278,7 @@
292278
--channeltextarea-background: #{$mantle};
293279

294280
--icon-muted: #{darken($subtext0, 5%)} !important;
281+
--icon-voice-muted: #{$red};
295282
--icon-default: #{$text};
296283
--icon-strong: #{$text};
297284
--icon-subtle: #{$subtext1};
@@ -315,8 +302,6 @@
315302
--interactive-background-selected: #{adjust-color($overlay0, $alpha: -0.8)};
316303
--interactive-background-active: #{adjust-color($text, $alpha: -0.83)};
317304

318-
--search-popout-option-non-text-color: #{$subtext0};
319-
320305
--__spoiler-background-color--hidden: #{$surface2};
321306
--__spoiler-warning-background-color: #{lighten($surface2, 5%)};
322307

@@ -325,10 +310,18 @@
325310

326311
--plum-23: #{$base};
327312

328-
--badge-background-default: #{$brand};
329-
--badge-text-default: #{$crust};
330313
--badge-text-brand: #{$base};
331314

315+
--text-status-online: #{$green};
316+
--text-status-idle: #{$yellow};
317+
--text-status-dnd: #{$red};
318+
--text-status-offline: #{$subtext1};
319+
320+
--icon-status-online: #{$green};
321+
--icon-status-idle: #{$yellow};
322+
--icon-status-dnd: #{$red};
323+
--icon-status-offline: #{$subtext1};
324+
332325
--twitch: #{darken($mauve, 10%)};
333326
--playstation: #{darken($blue, 10%)};
334327
--spotify: #{$green};

0 commit comments

Comments
 (0)