Skip to content

Commit 1ea96b3

Browse files
aristatharistath
authored
Merge pull request #625 from ProgressPlanner/refactor/colors
Color palette refactor
2 parents bfe8990 + 743ed10 commit 1ea96b3

44 files changed

Lines changed: 984 additions & 267 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/css/admin.css‎

Lines changed: 39 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,6 @@
1212

1313
--prpl-container-max-width: calc(var(--prpl-column-min-width) * var(--prpl-max-columns) + var(--prpl-gap) * (var(--prpl-max-columns) - 1) + var(--prpl-column-min-width));
1414

15-
--prpl-color-gray-1: #e1e3e7;
16-
--prpl-color-gray-2: #d1d5db;
17-
--prpl-color-gray-3: #9ca3af;
18-
--prpl-color-gray-4: #6b7280;
19-
--prpl-color-gray-5: #4b5563;
20-
--prpl-color-gray-6: #374151;
21-
22-
--prpl-color-accent-red: #f43f5e;
23-
--prpl-color-accent-orange: #faa310;
24-
--prpl-color-400-orange: #f9b23c;
25-
--prpl-color-accent-purple: #0d6b9e;
26-
--prpl-color-accent-green: #14b8a6;
27-
28-
--prpl-color-headings: #38296d;
29-
--prpl-color-text: var(--prpl-color-gray-5);
30-
--prpl-color-link: #1e40af;
31-
32-
--prpl-color-notification-green: #16a34a;
33-
--prpl-color-notification-red: #e73136;
34-
35-
--prpl-color-button-primary: #dd3244;
36-
--prpl-color-button-primary-hover: #cf2441;
37-
38-
--prpl-background-orange: #fff9f0;
39-
--prpl-background-purple: #f6f5fb;
40-
--prpl-background-green: #f2faf9;
41-
--prpl-background-red: #fff6f7;
42-
--prpl-background-blue: #effbfe;
43-
4415
--prpl-font-size-xs: 0.75rem; /* 12px */
4516
--prpl-font-size-small: 0.875rem; /* 14px */
4617
--prpl-font-size-base: 1rem; /* 16px */
@@ -60,7 +31,7 @@
6031
body.toplevel_page_progress-planner {
6132

6233
#wpwrap {
63-
background-color: #f6f7f9;
34+
background-color: var(--prpl-background);
6435
}
6536

6637
ul#adminmenu {
@@ -69,7 +40,7 @@ body.toplevel_page_progress-planner {
6940
>li.current > a.current {
7041

7142
&::after {
72-
border-right-color: #f6f7f9 !important;
43+
border-right-color: var(--prpl-background) !important;
7344
}
7445
}
7546
}
@@ -120,6 +91,16 @@ body.toplevel_page_progress-planner {
12091
color: var(--prpl-color-link);
12192
}
12293

94+
.prpl-wrap input[type="checkbox"] {
95+
border-color: var(--prpl-color-selection-controls-inactive);
96+
}
97+
98+
.prpl-wrap select {
99+
border-color: var(--prpl-color-field-border);
100+
101+
/* box-shadow: 1px 2px 4px 0 var(--prpl-color-field-shadow); */
102+
}
103+
123104
.prpl-widget-width-2 {
124105
grid-column: span 2;
125106

@@ -149,22 +130,13 @@ body.toplevel_page_progress-planner {
149130

150131
&:hover {
151132
border-radius: 50%;
152-
background-color: var(--prpl-color-gray-4);
153-
154-
&::before {
155-
content: "";
156-
position: absolute;
157-
top: 0;
158-
left: 0;
159-
width: 100%;
160-
height: 100%;
161-
border: 2px solid var(--prpl-color-gray-4);
162-
border-radius: 50%;
163-
box-sizing: border-box;
164-
}
133+
134+
color: var(--prpl-color-ui-icon-hover);
135+
border-color: var(--prpl-color-ui-icon-hover);
136+
background-color: var(--prpl-color-ui-icon-hover-fill);
165137

166138
svg path {
167-
fill: #fff;
139+
fill: var(--prpl-color-ui-icon-hover);
168140
}
169141
}
170142
}
@@ -186,10 +158,14 @@ body.toplevel_page_progress-planner {
186158
button.prpl-info-icon {
187159
background: none;
188160
border: none;
189-
color: var(--prpl-color-gray-4);
161+
color: var(--prpl-color-ui-icon);
190162
cursor: pointer;
191163
font-size: var(--prpl-font-size-xs);
192164
padding: 0;
165+
166+
svg path {
167+
fill: var(--prpl-color-ui-icon);
168+
}
193169
}
194170

195171
/*------------------------------------*\
@@ -220,9 +196,9 @@ button.prpl-info-icon {
220196
justify-content: center;
221197
padding: 0.4em;
222198

223-
/* color: var(--prpl-color-gray-2); */
199+
/* color: var(--prpl-color-border); */
224200
background-color: #fff;
225-
border: 1px solid var(--prpl-color-gray-2);
201+
border: 1px solid var(--prpl-color-ui-icon);
226202
border-radius: var(--prpl-border-radius);
227203

228204
svg {
@@ -235,9 +211,9 @@ button.prpl-info-icon {
235211
}
236212

237213
&:hover {
238-
color: var(--prpl-color-link);
239-
border-color: var(--prpl-color-link);
240-
background-color: var(--prpl-background-blue);
214+
color: var(--prpl-color-ui-icon-hover);
215+
border-color: var(--prpl-color-ui-icon-hover);
216+
background-color: var(--prpl-color-ui-icon-hover-fill);
241217
}
242218
}
243219
}
@@ -267,8 +243,8 @@ button.prpl-info-icon {
267243
Generic styles for individual widgets.
268244
\*------------------------------------*/
269245
.prpl-widget-wrapper {
270-
background-color: #fff;
271-
border: 1px solid var(--prpl-color-gray-2);
246+
background-color: var(--prpl-background-paper);
247+
border: 1px solid var(--prpl-color-border);
272248
border-radius: var(--prpl-border-radius);
273249
padding: var(--prpl-padding);
274250
min-width: 0;
@@ -279,7 +255,7 @@ button.prpl-info-icon {
279255
hr {
280256
margin-top: 1.25rem;
281257
margin-bottom: 1.25rem;
282-
border-top-color: var(--prpl-color-gray-2);
258+
border-top-color: var(--prpl-color-border);
283259
}
284260

285261
/* Force the last column to be the last column. */
@@ -385,12 +361,12 @@ button.prpl-info-icon {
385361

386362
.prpl-wrap input.prpl-button-secondary,
387363
.prpl-wrap button.prpl-button-secondary {
388-
background: var(--prpl-color-gray-3);
364+
background: var(--prpl-color-selection-controls-inactive);
389365

390366
&:not([disabled]):hover,
391367
&:not([disabled]):focus {
392-
background: var(--prpl-color-gray-4);
393-
box-shadow: 3px 3px 10px var(--prpl-color-gray-4);
368+
background: var(--prpl-color-ui-icon);
369+
box-shadow: 3px 3px 10px var(--prpl-color-ui-icon);
394370
}
395371
}
396372

@@ -412,8 +388,8 @@ button.prpl-info-icon {
412388
Popovers generic styles.
413389
\*------------------------------------*/
414390
.prpl-popover {
415-
background: #fff;
416-
border: 1px solid var(--prpl-color-gray-3);
391+
background: var(--prpl-background-paper);
392+
border: 1px solid var(--prpl-color-border);
417393
border-radius: var(--prpl-border-radius);
418394
padding: var(--prpl-padding);
419395
font-weight: 400;
@@ -441,11 +417,11 @@ button.prpl-info-icon {
441417
cursor: pointer;
442418
background: none;
443419
border: none;
444-
color: var(--prpl-color-gray-4);
420+
color: var(--prpl-color-text);
445421

446422
&:hover,
447423
&:focus {
448-
color: var(--prpl-color-gray-6);
424+
color: var(--prpl-color-text-hover);
449425
}
450426
}
451427

@@ -490,7 +466,7 @@ button.prpl-info-icon {
490466
}
491467

492468
.driver-popover.prpl-driverjs-theme {
493-
background-color: var(--prpl-background-orange);
469+
background-color: var(--prpl-background-monthly);
494470
color: var(--prpl-color-text);
495471

496472
.driver-popover-title {
@@ -502,7 +478,7 @@ button.prpl-info-icon {
502478
}
503479

504480
button:not(.driver-popover-close-btn):hover {
505-
background-color: var(--prpl-background-orange);
481+
background-color: var(--prpl-background-monthly);
506482
}
507483
}
508484

‎assets/css/dashboard-widgets/score.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
grid-gap: calc(var(--prpl-gap) / 2);
1515

1616
> div {
17-
border: 1px solid var(--prpl-color-gray-2);
17+
border: 1px solid var(--prpl-color-border);
1818
border-radius: var(--prpl-border-radius);
1919
font-size: 0.875rem;
2020
text-align: center;

‎assets/css/page-widgets/badge-streak.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@
1515
}
1616

1717
#popover-badge-streak-content .inner {
18-
background: var(--prpl-background-red);
18+
background: var(--prpl-background-streak);
1919
}
2020

2121
#popover-badge-streak-maintenance .inner {
22-
background: var(--prpl-background-blue);
22+
background: var(--prpl-background-content-badge);
2323
}
2424

2525
.badges-popover-progress-total {
2626
display: block;
2727
width: 100%;
2828
height: 20px;
29-
background: var(--prpl-color-gray-1);
29+
background: var(--prpl-color-gauge-remain);
3030

3131
> span {
3232
display: block;
3333
height: 100%;
34-
background: var(--prpl-color-accent-red);
34+
background: var(--prpl-graph-color-1);
3535
}
3636
}
3737

‎assets/css/page-widgets/challenge.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
left: 0;
1111
width: 100%;
1212
height: 100%;
13-
background: var(--prpl-color-gray-2);
13+
background: var(--prpl-color-border);
1414
opacity: 0.4;
1515
}
1616

@@ -23,7 +23,7 @@
2323
z-index: 1;
2424
width: calc(100% - (var(--prpl-padding) * 4));
2525
background-color: #fff;
26-
border: 1px solid var(--prpl-color-gray-2);
26+
border: 1px solid var(--prpl-color-border);
2727
padding: var(--prpl-padding);
2828
border-radius: var(--prpl-border-radius);
2929

‎assets/css/page-widgets/content-activity.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
tr {
3030

3131
&:nth-child(odd) {
32-
background-color: #f6f7f9;
32+
background-color: var(--prpl-background-table);
3333
}
3434
}
3535
}
@@ -47,7 +47,7 @@
4747
th,
4848
td {
4949
text-align: start;
50-
border-top: 1px solid var(--prpl-color-gray-2);
50+
border-top: 1px solid var(--prpl-color-border);
5151
}
5252
}
5353

‎assets/css/page-widgets/latest-badge.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
img {
44
margin-top: 0.5rem;
5-
border: 1px solid var(--prpl-color-gray-2);
5+
border: 1px solid var(--prpl-color-border);
66
border-radius: var(--prpl-border-radius);
77
}
88

@@ -17,15 +17,15 @@
1717
align-items: center;
1818
gap: 0.5em;
1919
text-decoration: none;
20-
color: var(--prpl-color-gray-7);
21-
border: 1px solid var(--prpl-color-gray-2);
20+
color: var(--prpl-color-ui-icon);
21+
border: 1px solid var(--prpl-color-ui-icon);
2222
border-radius: var(--prpl-border-radius);
2323
padding: 0.5em 1em;
2424

2525
&:hover {
26-
color: var(--prpl-color-link);
27-
border-color: var(--prpl-color-link);
28-
background-color: var(--prpl-background-blue);
26+
color: var(--prpl-color-ui-icon-hover);
27+
border-color: var(--prpl-color-ui-icon-hover);
28+
background-color: var(--prpl-color-ui-icon-hover-fill);
2929
}
3030
}
3131
}

‎assets/css/page-widgets/monthly-badges.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
.prpl-widget-title {
7676
padding: 0.5rem 1rem;
7777
border-radius: 0.5rem;
78-
background: var(--prpl-background-orange);
78+
background: var(--prpl-background-monthly);
7979
}
8080

8181
.badge-group-monthly {
@@ -85,7 +85,7 @@
8585
.prpl-widget-wrapper-content {
8686

8787
.prpl-widget-title {
88-
background: var(--prpl-background-blue);
88+
background: var(--prpl-background-content-badge);
8989
}
9090

9191
.badge-group-content {
@@ -96,7 +96,7 @@
9696
.prpl-widget-wrapper-maintenance {
9797

9898
.prpl-widget-title {
99-
background: var(--prpl-background-red);
99+
background: var(--prpl-background-streak);
100100
}
101101

102102
.badge-group-maintenance {
@@ -127,11 +127,11 @@
127127
}
128128

129129
&.badge-group-content {
130-
background: var(--prpl-background-blue);
130+
background: var(--prpl-background-content-badge);
131131
}
132132

133133
&.badge-group-maintenance {
134-
background: var(--prpl-background-red);
134+
background: var(--prpl-background-streak);
135135
}
136136

137137
.prpl-badge {

0 commit comments

Comments
 (0)