r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Remove unused theme variables, redce the number of different grays, light theme WCAG updates

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-22 16:52:47 -04:00
parent 642016a3b2
commit b70f49ffc5
9 changed files with 38 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/Nav.jsx
View file

@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur}
>
Save
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span>
<span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
</button>
</li> }
{ this.props.project.id && this.props.user.authenticated &&

2
client/images/triangle-arrow-down.svg
View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 698 B

2
client/images/triangle-arrow-right.svg
View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
<g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 698 B

6
client/styles/abstracts/_placeholders.scss
View file

@ -110,7 +110,7 @@
@extend %toolbar-button;
@include themify() {
color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('modal-button-background-color');
background-color: getThemifyVariable('preferences-button-background-color');
padding: 0;
margin-bottom: #{28 / $base-font-size}rem;
line-height: #{50 / $base-font-size}rem;
@ -126,7 +126,7 @@
}
&:disabled:hover {
cursor: not-allowed;
background-color: getThemifyVariable('modal-button-background-color');
background-color: getThemifyVariable('preferences-button-background-color');
}
}
}
@ -176,7 +176,7 @@
cursor: pointer;
&:hover {
text-decoration: none;
color: getThemifyVariable('logo-color');
color: getThemifyVariable('heavy-text-color');
}
}
}

49
client/styles/abstracts/_variables.scss
View file

@ -13,6 +13,9 @@ $dodgerblue: #1E90FF;
// $icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9;
$border-color: #B5B5B5;
$outline-color: #0F9DD7;
// Grayscale values
$lightest: #FFF; // primary
$lighter: #FBFBFB;
@ -21,7 +24,8 @@ $light: #F0F0F0; // primary
$medium-light: #D9D9D9;
$middle-light: #A6A6A6;
$middle-gray: #7D7D7D; // primary
// $middle-gray: #7D7D7D; // primary
$middle-gray: #747474; // primary
$middle-dark: #666;
$medium-dark: #4D4D4D;
@ -40,26 +44,24 @@ $themes: (
modal-button-color: $dark,
heading-text-color: $dark,
background-color: $lighter,
preview-placeholder-color: #dcdcdc,
button-background-color: $light,
button-color: $black,
button-border-color: $middle-light,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: $light,
toolbar-button-background-color: $medium-light,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-nav-inactive-color: #a0a0a0,
button-nav-inactive-color: $middle-gray,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #f4f4f4,
modal-button-background-color: #e6e6e6,
modal-border-color: rgba(17, 17, 17, 0.3),
modal-border-selected-color: #B9D0E1,
icon-color: $medium-dark,
icon-hover-color: $p5js-pink,
modal-background-color: $light,
preferences-button-background-color: $medium-light,
modal-border-color: $middle-light,
icon-color: $middle-gray,
icon-hover-color: $darker,
icon-toast-hover-color: $white,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #eee,
console-background-color: $light,
console-color: $white,
console-header-background-color: $medium-light,
console-header-color: $darker,
@ -71,24 +73,22 @@ $themes: (
editor-gutter-color: $lighter,
file-hover-color: $light,
file-selected-color: $medium-light,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #4a4a4a,
search-background-color: #ffffff,
search-clear-background-color: #e9e9e9,
search-hover-text-color: #ffffff,
search-hover-background-color: #4d4d4d,
input-text-color: $dark,
input-border-color: $middle-light,
search-background-color: $lightest,
search-clear-background-color: $light,
search-hover-text-color: $lightest,
search-hover-background-color: $medium-dark,
dropdown-color: #414141,
keyboard-shortcut-color: #757575,
keyboard-shortcut-color: $middle-gray,
nav-hover-color: $p5js-pink,
nav-border-color: $middle-light,
error-color: $p5js-pink,
table-row-stripe-color: #d6d6d6,
codefold-icon-open: url(../images/triangle-arrow-down.svg),
codefold-icon-closed: url(../images/triangle-arrow-right.svg),
sidebar-background-color: $light,
primary-button-color: #fff,
primary-button-color: $lightest,
primary-button-background-color: $p5js-pink,
table-button-color: $white,
@ -124,7 +124,6 @@ $themes: (
secondary-text-color: #DADADA,
inactive-text-color: #b5b5b5,
background-color: #333,
preview-placeholder-color: #dcdcdc,
button-background-color: $white,
button-color: $black,
button-border-color: #979797,
@ -136,7 +135,7 @@ $themes: (
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #444,
modal-button-background-color: #5f5f5f,
preferences-button-background-color: #5f5f5f,
modal-border-color: #949494,
icon-color: #a9a9a9,
icon-hover-color: $white,
@ -156,7 +155,6 @@ $themes: (
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4,
search-background-color: #ffffff,
search-clear-background-color: #4f4f4f,
search-hover-text-color: #ffffff,
@ -215,7 +213,7 @@ $themes: (
button-hover-color: #333333,
button-active-color: #333333,
modal-background-color: #444,
modal-button-background-color: #C1C1C1,
preferences-button-background-color: #C1C1C1,
modal-border-color: #949494,
icon-color: #d9d9d9,
icon-hover-color: $yellow,
@ -235,7 +233,6 @@ $themes: (
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4,
search-background-color: $white,
search-clear-background-color: #444,
search-hover-text-color: $black,

8
client/styles/base/_base.scss
View file

@ -87,3 +87,11 @@ thead {
th {
text-align: left;
}
a:focus,
button:focus,
input:focus,
textarea:focus {
outline: none;
box-shadow: 0 0 0 1px $outline-color;
}

8
client/styles/components/_about.scss
View file

@ -45,11 +45,6 @@
padding-bottom: #{20 / $base-font-size}rem;
padding-left: #{20 / $base-font-size}rem;
width: #{720 / $base-font-size}rem;
& a {
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
}
}
.about__content-column {
@ -76,9 +71,6 @@
@include themify() {
padding-top: #{10 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem;
& a {
color: getThemifyVariable(about-list-text-color);
}
}
}

9
client/styles/components/_preview-frame.scss
View file

@ -23,15 +23,6 @@
display: none;
}
.preview-frame-placeholder {
width: #{400 / $base-font-size}rem;
height: #{400 / $base-font-size}rem;
position: absolute;
@include themify() {
background: getThemifyVariable('preview-placeholder-color');
}
}
.preview-frame__header {
height: #{29 / $base-font-size}rem;
}

2
client/utils/metaKey.js
View file

@ -8,7 +8,7 @@ const metaKey = (() => {
return 'Ctrl';
})();
const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl';
const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
export {
metaKey,