Skip to content

Commit b70f49f

Browse files
catarakcatarak
committed
Remove unused theme variables, redce the number of different grays, light theme WCAG updates
1 parent 642016a commit b70f49f

File tree

9 files changed

+38
-50
lines changed

9 files changed

+38
-50
lines changed

‎client/components/Nav.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
281281
onBlur={this.handleBlur}
282282
>
283283
Save
284-
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
284+
<span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
285285
</button>
286286
</li> }
287287
{ this.props.project.id && this.props.user.authenticated &&

‎client/images/triangle-arrow-down.svg

Lines changed: 1 addition & 1 deletion
Loading

‎client/images/triangle-arrow-right.svg

Lines changed: 1 addition & 1 deletion
Loading

‎client/styles/abstracts/_placeholders.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
@extend %toolbar-button;
111111
@include themify() {
112112
color: getThemifyVariable('primary-text-color');
113-
background-color: getThemifyVariable('modal-button-background-color');
113+
background-color: getThemifyVariable('preferences-button-background-color');
114114
padding: 0;
115115
margin-bottom: #{28 / $base-font-size}rem;
116116
line-height: #{50 / $base-font-size}rem;
@@ -126,7 +126,7 @@
126126
}
127127
&:disabled:hover {
128128
cursor: not-allowed;
129-
background-color: getThemifyVariable('modal-button-background-color');
129+
background-color: getThemifyVariable('preferences-button-background-color');
130130
}
131131
}
132132
}
@@ -176,7 +176,7 @@
176176
cursor: pointer;
177177
&:hover {
178178
text-decoration: none;
179-
color: getThemifyVariable('logo-color');
179+
color: getThemifyVariable('heavy-text-color');
180180
}
181181
}
182182
}

‎client/styles/abstracts/_variables.scss

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ $dodgerblue: #1E90FF;
1313
// $icon-hover-color: #333;
1414
$p5-contrast-pink: #FFA9D9;
1515

16+
$border-color: #B5B5B5;
17+
$outline-color: #0F9DD7;
18+
1619
// Grayscale values
1720
$lightest: #FFF; // primary
1821
$lighter: #FBFBFB;
@@ -21,7 +24,8 @@ $light: #F0F0F0; // primary
2124
$medium-light: #D9D9D9;
2225
$middle-light: #A6A6A6;
2326

24-
$middle-gray: #7D7D7D; // primary
27+
// $middle-gray: #7D7D7D; // primary
28+
$middle-gray: #747474; // primary
2529
$middle-dark: #666;
2630
$medium-dark: #4D4D4D;
2731

@@ -40,26 +44,24 @@ $themes: (
4044
modal-button-color: $dark,
4145
heading-text-color: $dark,
4246
background-color: $lighter,
43-
preview-placeholder-color: #dcdcdc,
4447
button-background-color: $light,
4548
button-color: $black,
4649
button-border-color: $middle-light,
4750
toolbar-button-color: $p5js-pink,
48-
toolbar-button-background-color: $light,
51+
toolbar-button-background-color: $medium-light,
4952
button-background-hover-color: $p5js-pink,
5053
button-background-active-color: #f10046,
51-
button-nav-inactive-color: #a0a0a0,
54+
button-nav-inactive-color: $middle-gray,
5255
button-hover-color: $white,
5356
button-active-color: $white,
54-
modal-background-color: #f4f4f4,
55-
modal-button-background-color: #e6e6e6,
56-
modal-border-color: rgba(17, 17, 17, 0.3),
57-
modal-border-selected-color: #B9D0E1,
58-
icon-color: $medium-dark,
59-
icon-hover-color: $p5js-pink,
57+
modal-background-color: $light,
58+
preferences-button-background-color: $medium-light,
59+
modal-border-color: $middle-light,
60+
icon-color: $middle-gray,
61+
icon-hover-color: $darker,
6062
icon-toast-hover-color: $white,
6163
shadow-color: rgba(0, 0, 0, 0.16),
62-
console-background-color: #eee,
64+
console-background-color: $light,
6365
console-color: $white,
6466
console-header-background-color: $medium-light,
6567
console-header-color: $darker,
@@ -71,24 +73,22 @@ $themes: (
7173
editor-gutter-color: $lighter,
7274
file-hover-color: $light,
7375
file-selected-color: $medium-light,
74-
input-text-color: #333,
75-
input-border-color: #b5b5b5,
76-
about-list-text-color: #4a4a4a,
77-
search-background-color: #ffffff,
78-
search-clear-background-color: #e9e9e9,
79-
search-hover-text-color: #ffffff,
80-
search-hover-background-color: #4d4d4d,
76+
input-text-color: $dark,
77+
input-border-color: $middle-light,
78+
search-background-color: $lightest,
79+
search-clear-background-color: $light,
80+
search-hover-text-color: $lightest,
81+
search-hover-background-color: $medium-dark,
8182
dropdown-color: #414141,
82-
keyboard-shortcut-color: #757575,
83+
keyboard-shortcut-color: $middle-gray,
8384
nav-hover-color: $p5js-pink,
8485
nav-border-color: $middle-light,
8586
error-color: $p5js-pink,
8687
table-row-stripe-color: #d6d6d6,
8788
codefold-icon-open: url(../images/triangle-arrow-down.svg),
8889
codefold-icon-closed: url(../images/triangle-arrow-right.svg),
89-
sidebar-background-color: $light,
9090

91-
primary-button-color: #fff,
91+
primary-button-color: $lightest,
9292
primary-button-background-color: $p5js-pink,
9393

9494
table-button-color: $white,
@@ -124,7 +124,6 @@ $themes: (
124124
secondary-text-color: #DADADA,
125125
inactive-text-color: #b5b5b5,
126126
background-color: #333,
127-
preview-placeholder-color: #dcdcdc,
128127
button-background-color: $white,
129128
button-color: $black,
130129
button-border-color: #979797,
@@ -136,7 +135,7 @@ $themes: (
136135
button-hover-color: $white,
137136
button-active-color: $white,
138137
modal-background-color: #444,
139-
modal-button-background-color: #5f5f5f,
138+
preferences-button-background-color: #5f5f5f,
140139
modal-border-color: #949494,
141140
icon-color: #a9a9a9,
142141
icon-hover-color: $white,
@@ -156,7 +155,6 @@ $themes: (
156155
file-selected-color: #404040,
157156
input-text-color: #333,
158157
input-border-color: #b5b5b5,
159-
about-list-text-color: #f4f4f4,
160158
search-background-color: #ffffff,
161159
search-clear-background-color: #4f4f4f,
162160
search-hover-text-color: #ffffff,
@@ -215,7 +213,7 @@ $themes: (
215213
button-hover-color: #333333,
216214
button-active-color: #333333,
217215
modal-background-color: #444,
218-
modal-button-background-color: #C1C1C1,
216+
preferences-button-background-color: #C1C1C1,
219217
modal-border-color: #949494,
220218
icon-color: #d9d9d9,
221219
icon-hover-color: $yellow,
@@ -235,7 +233,6 @@ $themes: (
235233
file-selected-color: #404040,
236234
input-text-color: #333,
237235
input-border-color: #b5b5b5,
238-
about-list-text-color: #f4f4f4,
239236
search-background-color: $white,
240237
search-clear-background-color: #444,
241238
search-hover-text-color: $black,

‎client/styles/base/_base.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,3 +87,11 @@ thead {
8787
th {
8888
text-align: left;
8989
}
90+
91+
a:focus,
92+
button:focus,
93+
input:focus,
94+
textarea:focus {
95+
outline: none;
96+
box-shadow: 0 0 0 1px $outline-color;
97+
}

‎client/styles/components/_about.scss

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,6 @@
4545
padding-bottom: #{20 / $base-font-size}rem;
4646
padding-left: #{20 / $base-font-size}rem;
4747
width: #{720 / $base-font-size}rem;
48-
& a {
49-
@include themify() {
50-
color: getThemifyVariable('form-navigation-options-color');
51-
}
52-
}
5348
}
5449

5550
.about__content-column {
@@ -76,9 +71,6 @@
7671
@include themify() {
7772
padding-top: #{10 / $base-font-size}rem;
7873
font-size: #{16 / $base-font-size}rem;
79-
& a {
80-
color: getThemifyVariable(about-list-text-color);
81-
}
8274
}
8375
}
8476

‎client/styles/components/_preview-frame.scss

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,6 @@
2323
display: none;
2424
}
2525

26-
.preview-frame-placeholder {
27-
width: #{400 / $base-font-size}rem;
28-
height: #{400 / $base-font-size}rem;
29-
position: absolute;
30-
@include themify() {
31-
background: getThemifyVariable('preview-placeholder-color');
32-
}
33-
}
34-
3526
.preview-frame__header {
3627
height: #{29 / $base-font-size}rem;
3728
}

‎client/utils/metaKey.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const metaKey = (() => {
88
return 'Ctrl';
99
})();
1010

11-
const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl';
11+
const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
1212

1313
export {
1414
metaKey,

0 commit comments

Comments
 (0)