Skip to content

Commit d78a1ed

Browse files
valeriansaliouvaleriansaliou
committed
feat: move all shades of blue to accent color
1 parent 94b0f01 commit d78a1ed

19 files changed

+69
-37
lines changed

‎src/assemblies/inbox/InboxTopbar.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -444,16 +444,16 @@ $c: ".a-inbox-topbar";
444444
visibility: hidden;
445445

446446
#{$c}__identity-action-icon {
447-
fill: rgb(var(--color-base-blue-normal));
447+
fill: rgb(var(--color-accent-background-normal));
448448
display: block;
449449
cursor: pointer;
450450

451451
&:hover {
452-
fill: rgb(var(--color-base-blue-dark));
452+
fill: rgb(var(--color-accent-background-dark));
453453
}
454454

455455
&:active {
456-
fill: darken-var(var(--color-base-blue-dark), 5%);
456+
fill: darken-var(var(--color-accent-background-dark), 5%);
457457
}
458458
}
459459
}

‎src/assets/stylesheets/utilities/_utilities.appearance.scss

+16
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@
4848
--color-text-tertiary: #{hex-var($color-text-tertiary)};
4949
--color-text-reverse: #{hex-var($color-text-reverse)};
5050

51+
// Accents
52+
--color-accent-background-normal: #{hex-var($color-accent-background)};
53+
--color-accent-background-dark: #{hex-var(
54+
darken($color-accent-background, 8%)
55+
)};
56+
--color-accent-text: #{hex-var($color-accent-text)};
57+
5158
&--dark {
5259
// Black
5360
--color-black: #{hex-var(invert($color-black))};
@@ -100,5 +107,14 @@
100107
--color-text-secondary: #{hex-var(invert($color-text-secondary))};
101108
--color-text-tertiary: #{hex-var(invert($color-text-tertiary))};
102109
--color-text-reverse: #{hex-var(invert($color-text-reverse))};
110+
111+
// Accents
112+
--color-accent-background-normal: #{hex-var(
113+
lighten($color-accent-background, 4%)
114+
)};
115+
--color-accent-background-dark: #{hex-var(
116+
lighten($color-accent-background, 6%)
117+
)};
118+
--color-accent-text: #{hex-var(invert($color-accent-text))};
103119
}
104120
}

‎src/assets/stylesheets/variables/_variables.colors.scss

+4
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,7 @@ $color-text-primary: #000000;
5353
$color-text-secondary: #828993;
5454
$color-text-tertiary: #999fa7;
5555
$color-text-reverse: #ffffff;
56+
57+
// Accents
58+
$color-accent-background: $color-base-blue-normal;
59+
$color-accent-text: $color-text-reverse;

‎src/components/base/BaseAction.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ $inner-bordered-box-shadow-sizes: inset 0 -1px 0px 0;
225225
&--active {
226226
> #{$c}__inner {
227227
#{$c}__icon {
228-
fill: darken-var(var(--color-base-blue-normal), 6%);
228+
fill: darken-var(var(--color-accent-background-normal), 6%);
229229
}
230230
}
231231

‎src/components/base/BaseCount.vue

+11-2
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@ export default {
5050

5151
color: {
5252
type: String,
53-
default: "blue",
53+
default: "accent",
5454

5555
validator(x: string) {
56-
return ["blue", "red", "white"].includes(x);
56+
return ["accent", "blue", "red", "white"].includes(x);
5757
}
5858
}
5959
}
@@ -94,6 +94,15 @@ $count-padding-sides: 5px;
9494
}
9595
}
9696

97+
&--accent {
98+
background-color: rgb(var(--color-accent-background-normal));
99+
color: rgb(var(--color-accent-text));
100+
101+
#{$c}__icon {
102+
fill: rgb(var(--color-accent-text));
103+
}
104+
}
105+
97106
&--blue {
98107
background-color: rgb(var(--color-base-blue-normal));
99108
}

‎src/components/base/BaseNavigateSection.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ export default {
6767

6868
color: {
6969
type: String,
70-
default: "blue",
70+
default: "accent",
7171

7272
validator(x: string) {
73-
return ["blue"].includes(x);
73+
return ["accent"].includes(x);
7474
}
7575
},
7676

@@ -153,20 +153,20 @@ $icon-size: 28px;
153153

154154
// --> COLORS <--
155155

156-
&--blue {
156+
&--accent {
157157
#{$c}__icon {
158-
background-color: rgb(var(--color-base-blue-dark));
158+
background-color: rgb(var(--color-accent-background-dark));
159159
}
160160

161161
&#{$c}--active {
162-
background-color: rgb(var(--color-base-blue-dark));
162+
background-color: rgb(var(--color-accent-background-dark));
163163

164164
&:hover {
165-
background-color: darken-var(var(--color-base-blue-dark), 2%);
165+
background-color: darken-var(var(--color-accent-background-dark), 2%);
166166
}
167167

168168
&:active {
169-
background-color: darken-var(var(--color-base-blue-dark), 3%);
169+
background-color: darken-var(var(--color-accent-background-dark), 3%);
170170
}
171171
}
172172
}

‎src/components/form/FormFieldSuggest.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,7 @@ $suggest-sizes: (
296296
margin-inline-end: 8px;
297297

298298
&:is(svg) {
299-
fill: rgb(var(--color-base-blue-dark));
299+
fill: rgb(var(--color-accent-background-dark));
300300
}
301301
}
302302

@@ -313,10 +313,13 @@ $suggest-sizes: (
313313

314314
&--active {
315315
#{$c}__link {
316-
background-color: rgb(var(--color-base-blue-normal));
316+
background-color: rgb(var(--color-accent-background-normal));
317317

318318
&:active {
319-
background-color: darken-var(var(--color-base-blue-normal), 4%);
319+
background-color: darken-var(
320+
var(--color-accent-background-normal),
321+
4%
322+
);
320323
}
321324

322325
#{$c}__link-label,

‎src/components/inbox/InboxDetailsMultiIdentity.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ $c: ".c-inbox-details-multi-identity";
6767
justify-content: center;
6868

6969
#{$c}__name-icon {
70-
fill: rgb(var(--color-base-blue-dark));
70+
fill: rgb(var(--color-accent-background-dark));
7171
margin-inline-end: 6px;
7272
flex: 0 0 auto;
7373
}

‎src/components/inbox/InboxDetailsMultiMembers.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ $c: ".c-inbox-details-multi-members";
276276

277277
&--add {
278278
#{$c}__icon {
279-
fill: rgb(var(--color-base-blue-dark));
279+
fill: rgb(var(--color-accent-background-dark));
280280
}
281281
}
282282
}

‎src/components/inbox/InboxFormFormatting.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -348,11 +348,11 @@ $group-spacing-edges: 12px;
348348

349349
&--preview {
350350
#{$c}__mode-icon {
351-
fill: rgb(var(--color-base-blue-dark));
351+
fill: rgb(var(--color-accent-background-dark));
352352
}
353353

354354
#{$c}__mode-label {
355-
color: rgb(var(--color-base-blue-dark));
355+
color: rgb(var(--color-accent-background-dark));
356356
}
357357
}
358358
}

‎src/components/list/ListBrowse.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ $c: ".c-list-browse";
168168
}
169169

170170
#{$c}__title-icon {
171-
fill: rgb(var(--color-base-blue-dark));
171+
fill: rgb(var(--color-accent-background-dark));
172172
}
173173

174174
#{$c}__title-count {

‎src/components/list/ListButton.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -323,24 +323,24 @@ $list-button-colors: (
323323
}
324324

325325
&--active {
326-
background-color: rgb(var(--color-base-blue-normal));
326+
background-color: rgb(var(--color-accent-background-normal));
327327

328328
&:hover {
329329
&,
330330
&#{$c}--translucent {
331-
background-color: darken-var(var(--color-base-blue-normal), 4%);
331+
background-color: darken-var(var(--color-accent-background-normal), 4%);
332332
}
333333
}
334334

335335
&#{$c}--actionable:active {
336336
&,
337337
&#{$c}--translucent {
338-
background-color: darken-var(var(--color-base-blue-normal), 6%);
338+
background-color: darken-var(var(--color-accent-background-normal), 6%);
339339
}
340340
}
341341

342342
#{$c}__label {
343-
color: rgb(var(--color-white));
343+
color: rgb(var(--color-accent-text));
344344
}
345345
}
346346

‎src/components/sidebar/SidebarMainActionAdd.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ $c: ".c-sidebar-main-action-add";
6666

6767
#{$c} {
6868
#{$c}__icon {
69-
fill: rgb(var(--color-base-blue-dark));
69+
fill: rgb(var(--color-accent-background-dark));
7070
}
7171
}
7272
</style>

‎src/components/sidebar/SidebarMainItemGeneric.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ export default {
138138
},
139139

140140
computed: {
141-
countColor(): string {
142-
return this.active === true ? "white" : "blue";
141+
countColor(): string | void {
142+
return this.active === true ? "white" : undefined;
143143
},
144144

145145
roomError(): string | null {

‎src/components/sidebar/SidebarMainItemMulti.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ $c: ".c-sidebar-main-item-multi";
134134

135135
#{$c} {
136136
#{$c}__icon {
137-
fill: rgb(var(--color-base-blue-dark));
137+
fill: rgb(var(--color-accent-background-dark));
138138
margin-block-start: 2px;
139139
}
140140

@@ -152,7 +152,7 @@ $c: ".c-sidebar-main-item-multi";
152152

153153
&--active {
154154
#{$c}__icon {
155-
fill: rgb(var(--color-white));
155+
fill: rgb(var(--color-accent-text));
156156
}
157157

158158
#{$c}__domain {

‎src/components/sidebar/SidebarMainItemUser.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ $composing-dot-size: 3px;
154154
justify-content: center;
155155

156156
#{$c}__composing-dot {
157-
background-color: rgb(var(--color-base-blue-dark));
157+
background-color: rgb(var(--color-accent-background-dark));
158158
width: $composing-dot-size;
159159
height: $composing-dot-size;
160160
flex: 0 0 auto;

‎src/components/sidebar/SidebarMainSection.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -102,14 +102,14 @@ $c: ".c-sidebar-main-section";
102102

103103
#{$c} {
104104
#{$c}__icon {
105-
fill: rgb(var(--color-base-blue-dark));
105+
fill: rgb(var(--color-accent-background-dark));
106106
}
107107

108108
// --> BOOLEANS <--
109109

110110
&--active {
111111
#{$c}__icon {
112-
fill: rgb(var(--color-white));
112+
fill: rgb(var(--color-accent-text));
113113
}
114114
}
115115
}

‎src/popups/inbox/SharedFiles.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ $c: ".p-shared-files";
320320
#{$c}__target {
321321
background-color: rgb(var(--color-background-primary));
322322
border: 1px solid rgb(var(--color-border-primary));
323-
outline: 0 solid rgba(var(--color-base-blue-normal), 0.16);
323+
outline: 0 solid rgba(var(--color-accent-background-normal), 0.16);
324324
display: block;
325325
border-radius: 6px;
326326
transition: border-color 100ms linear, outline-width 150ms linear;
@@ -331,11 +331,11 @@ $c: ".p-shared-files";
331331
}
332332

333333
&:hover {
334-
border-color: darken-var(var(--color-base-blue-normal), 8%);
334+
border-color: darken-var(var(--color-accent-background-normal), 8%);
335335
}
336336

337337
&:active {
338-
border-color: darken-var(var(--color-base-blue-normal), 18%);
338+
border-color: darken-var(var(--color-accent-background-normal), 18%);
339339
}
340340
}
341341
}

‎src/views/app/spotlight/AppSpotlightBrowseChannels.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export default {
100100
),
101101

102102
size: "12px",
103-
fill: "rgb(var(--color-base-blue-dark)"
103+
fill: "rgb(var(--color-accent-background-dark))"
104104
}
105105
},
106106

0 commit comments

Comments
 (0)