Skip to content

Commit edb5187

Browse files
catarakcatarak
committed
Update high contrast theme
1 parent a0d6b71 commit edb5187

File tree

8 files changed

+52
-86
lines changed

8 files changed

+52
-86
lines changed

‎client/components/PreviewNav.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const PreviewNav = ({ owner, project }) => (
1010
<nav className="nav preview-nav">
1111
<div className="nav__items-left">
1212
<div className="nav__item-logo">
13-
<InlineSVG src={logoUrl} alt="p5.js logo" />
13+
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
1414
</div>
1515
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
1616
<p className="toolbar__project-owner">by</p>

‎client/styles/abstracts/_variables.scss

Lines changed: 40 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ $themes: (
4343
inactive-text-color: $middle-dark,
4444
dropzone-text-color: $dark,
4545
modal-button-color: $dark,
46-
heading-text-color: $dark,
4746
background-color: $lighter,
4847
button-background-color: $light,
4948
button-color: $black,
@@ -70,7 +69,7 @@ $themes: (
7069
console-warn-background-color: $orange,
7170
console-debug-background-color: $dodgerblue,
7271
console-error-background-color: $red,
73-
ide-border-color: $light,
72+
ide-border-color: $medium-light,
7473
editor-gutter-color: $lighter,
7574
file-hover-color: $light,
7675
file-selected-color: $medium-light,
@@ -114,7 +113,6 @@ $themes: (
114113
primary-text-color: $lightest,
115114
dropzone-text-color: $black,
116115
modal-button-color: $lightest,
117-
heading-text-color: $lightest,
118116
secondary-text-color: $medium-light,
119117
inactive-text-color: $middle-light,
120118
background-color: $darker,
@@ -182,81 +180,80 @@ $themes: (
182180
contrast: (
183181
logo-color: $yellow,
184182
heavy-text-color: $yellow,
185-
primary-text-color: $yellow,
183+
primary-text-color: $lightest,
186184
dropzone-text-color: $black,
187-
modal-button-color: #333,
188-
heading-text-color: #e1e1e1,
189-
secondary-text-color: #e1e1e1,
190-
inactive-text-color: #f2f2f2,
185+
modal-button-color: $dark,
186+
secondary-text-color: $lighter,
187+
inactive-text-color: $light,
191188
background-color: $darker,
192189
button-background-color: $white,
193190
button-color: $black,
194-
button-border-color: #979797,
195-
toolbar-button-color: #333333,
196-
toolbar-button-background-color: #C1C1C1,
191+
button-border-color: $middle-gray,
192+
toolbar-button-color: $dark,
193+
toolbar-button-background-color: $medium-light,
197194
button-background-hover-color: $yellow,
198195
button-background-active-color: $yellow,
199-
button-nav-inactive-color: #a0a0a0,
200-
button-hover-color: #333333,
201-
button-active-color: #333333,
202-
modal-background-color: #444,
203-
preferences-button-background-color: #C1C1C1,
204-
modal-border-color: #949494,
205-
icon-color: #d9d9d9,
196+
button-nav-inactive-color: $light,
197+
button-hover-color: $dark,
198+
button-active-color: $dark,
199+
modal-background-color: $dark,
200+
preferences-button-background-color: $medium-light,
201+
modal-border-color: $middle-dark,
202+
icon-color: $medium-light,
206203
icon-hover-color: $yellow,
207204
icon-toast-hover-color: $yellow,
208205
shadow-color: rgba(0, 0, 0, 0.16),
209-
console-background-color: #4f4f4f,
206+
console-background-color: $dark,
210207
console-color: $black,
211-
console-header-background-color: #3f3f3f,
212-
console-header-color: #d9d9d9,
208+
console-header-background-color: $medium-dark,
209+
console-header-color: $lightest,
213210
console-info-background-color: $lightsteelblue,
214211
console-warn-background-color: $orange,
215212
console-debug-background-color: $dodgerblue,
216213
console-error-background-color: $red,
217-
ide-border-color: #949494,
218-
editor-gutter-color: #454545,
219-
file-hover-color: #404040,
220-
file-selected-color: #404040,
221-
input-text-color: #333,
222-
input-background-color: $lightest,
223-
input-border-color: #b5b5b5,
214+
ide-border-color: $middle-dark,
215+
editor-gutter-color: $darker,
216+
file-hover-color: $dark,
217+
file-selected-color: $medium-dark,
218+
input-text-color: $lightest,
219+
input-background-color: $dark,
220+
input-border-color: $middle-dark,
224221
search-background-color: $white,
225-
search-clear-background-color: #444,
226-
search-hover-text-color: $black,
222+
search-clear-background-color: $medium-dark,
223+
search-hover-text-color: $dark,
227224
search-hover-background-color: $yellow,
228-
keyboard-shortcut-color: #e1e1e1,
225+
keyboard-shortcut-color: $middle-light,
229226
nav-hover-color: $yellow,
230227
nav-border-color: $middle-dark,
231228
error-color: $p5-contrast-pink,
232-
table-row-stripe-color: #3f3f3f,
229+
table-row-stripe-color: dark,
233230
codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
234231
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
235232

236-
primary-button-color: #fff,
233+
primary-button-color: $lightest,
237234
primary-button-background-color: $p5js-pink,
238235

239-
table-button-color: #333,
240-
table-button-background-color: #C1C1C1,
241-
table-button-active-color: #333,
236+
table-button-color: $dark,
237+
table-button-background-color: $middle-gray,
238+
table-button-active-color: $dark,
242239
table-button-background-active-color: #00FFFF,
243-
table-button-hover-color: #333,
240+
table-button-hover-color: $dark,
244241
table-button-background-hover-color: $yellow,
245242

246-
progress-bar-background-color: #979797,
247-
progress-bar-active-color: #f10046,
243+
progress-bar-background-color: $middle-gray,
244+
progress-bar-active-color: $p5js-active-pink,
248245

249-
form-title-color: $white,
250-
form-secondary-title-color: #b5b5b5,
251-
form-navigation-options-color: #999999
246+
form-title-color: $lightest,
247+
form-secondary-title-color: $medium-light,
248+
form-navigation-options-color: $middle-light
252249
)
253250
);
254251

255252
$console-warn-color: #ffbe05;
256253
$console-error-color: #ff5f52;
257254

258255
$toast-background-color: #4A4A4A;
259-
$toast-text-color: $white;
256+
$toast-text-color: $lightest;
260257

261258
$about-play-background-color: rgba(255, 255, 255, 0.7);
262259
$about-button-border-color: rgba(151, 151, 151, 0.7);

‎client/styles/components/_api-key.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
.api-key-form__summary {
22
padding-top: #{25 / $base-font-size}rem;
3-
@include themify() {
4-
color: getThemifyVariable('heading-text-color');
5-
}
63
}
74

85
.api-key-form__section {
@@ -13,9 +10,6 @@
1310
padding: #{15 / $base-font-size}rem 0;
1411
font-size: #{21 / $base-font-size}rem;
1512
font-weight: bold;
16-
@include themify() {
17-
color: getThemifyVariable('heading-text-color');
18-
}
1913
}
2014

2115
.api-key-form__create-button {
@@ -99,9 +93,6 @@
9993
margin-bottom: #{10 / $base-font-size}rem;
10094
font-size: #{18 / $base-font-size}rem;
10195
font-weight: bold;
102-
@include themify() {
103-
color: getThemifyVariable('heading-text-color');
104-
}
10596
}
10697

10798
.api-key-form__new-token__info {

‎client/styles/components/_nav.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@
2323
align-items: center;
2424
}
2525

26-
.nav__items-left,
27-
.nav__items-right {
28-
& button, & a {
29-
@include themify() {
30-
color: getThemifyVariable('primary-text-color');
31-
}
32-
}
33-
}
26+
// .nav__items-left,
27+
// .nav__items-right {
28+
// & button, & a {
29+
// @include themify() {
30+
// color: getThemifyVariable('primary-text-color');
31+
// }
32+
// }
33+
// }
3434

3535
.nav__item {
3636
position: relative;

‎client/styles/components/_p5-contrast-codemirror-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
//light gray: #f4f4f4
1111
//dark gray: #b5b5b5
1212

13-
$p5-contrast-black: #333;
13+
$p5-contrast-black: #1C1C1C;
1414
$p5-contrast-gray: #A0A0A0;
1515
$p5-contrast-white: #FDFDFD;
1616
$p5-contrast-darkgray: #333333;

‎client/styles/components/_preferences.scss

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -33,25 +33,6 @@
3333
}
3434
}
3535

36-
.serve__over__https {
37-
text-align: center;
38-
margin-left: #{9 / $base-font-size}rem;
39-
font-width: #{108 / $base-font-size}rem;
40-
font-height: #{15 / $base-font-size}rem;
41-
font-family: Montserrat;
42-
font-size: #{12 / $base-font-size}rem;
43-
margin-top: #{2 / $base-font-size}rem;
44-
}
45-
46-
.preferences__heading {
47-
display: flex;
48-
flex-direction: row;
49-
justify-content: space-between;
50-
@include themify() {
51-
color: getThemifyVariable("heading-text-color");
52-
}
53-
}
54-
5536
.preferences__title {
5637
width: #{90 / $base-font-size}rem;
5738
height: #{25 / $base-font-size}rem;
@@ -86,9 +67,6 @@
8667
font-size: #{16 / $base-font-size}rem;
8768
margin-top: #{13 / $base-font-size}rem;
8869
margin-bottom: #{7 / $base-font-size}rem;
89-
@include themify() {
90-
color: getThemifyVariable("heading-text-color");
91-
}
9270
}
9371

9472
.preference__subtitle {

‎client/styles/components/_searchbar.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
padding-right: #{38 / $base-font-size}rem;
1212
@include themify() {
1313
border-color: getThemifyVariable('input-border-color');
14-
background-color: getThemifyVariable('search-background-color');
14+
background-color: getThemifyVariable('input-background-color');
1515
}
1616
}
1717

‎client/styles/components/_sidebar.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@
235235
margin-right: #{5 / $base-font-size}rem;
236236
& g {
237237
@include themify() {
238-
fill: getThemifyVariable('inactive-text-color');
238+
fill: getThemifyVariable('icon-color');
239239
}
240240
}
241241
& svg {

0 commit comments

Comments
 (0)