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

Update light theme to try to be WCAG AA compliant, adjust Toolbar styling

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-21 17:49:02 -04:00
parent db0dc434e4
commit 642016a3b2
9 changed files with 95 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/styles/abstracts/_mixins.scss
View file

@ -21,12 +21,13 @@
@mixin icon() {
@include themify() {
color: getThemifyVariable('icon-color');
& g {
& g, & polygon {
opacity: 1;
fill: getThemifyVariable('icon-color');
}
&:hover {
color: getThemifyVariable('icon-hover-color');
& g {
& g, & polygon {
opacity: 1;
fill: getThemifyVariable('icon-hover-color');
}

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

@ -58,15 +58,15 @@
}
%none-themify-icon-with-hover {
color: $icon-color;
color: $medium-dark;
& g {
fill: $icon-color;
fill: $medium-dark;
}
&:hover {
color: $icon-hover-color;
color: $p5js-pink;
& g {
opacity: 1;
fill: $icon-hover-color;
fill: $p5js-pink;
}
}
background-color: transparent;
@ -136,7 +136,7 @@
background-color: transparent;
color: getThemifyVariable('inactive-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
color: getThemifyVariable('heavy-text-color');
}
}
font-size: #{12 / $base-font-size}rem;
@ -172,11 +172,11 @@
%link {
@include themify() {
text-decoration: none;
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('secondary-text-color');
cursor: pointer;
&:hover {
text-decoration: none;
color: getThemifyVariable('primary-text-color');
color: getThemifyVariable('logo-color');
}
}
}

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

@ -2,6 +2,7 @@ $base-font-size: 12;
//colors
$p5js-pink: #ed225d;
$processing-blue: #007BBB;
$white: #fff;
$black: #000;
$yellow: #F5DC23;
@ -9,34 +10,42 @@ $orange: #ffa500;
$red: #ff0000;
$lightsteelblue: #B0C4DE;
$dodgerblue: #1E90FF;
$icon-color: #666;
$icon-hover-color: #333;
// $icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9;
// Grays
$dark: #333;
$middleGray: #7d7d7d;
$middleLight: #a6a6a6;
// Grayscale values
$lightest: #FFF; // primary
$lighter: #FBFBFB;
// Abstracts
$primary-text-color: $dark;
$light: #F0F0F0; // primary
$medium-light: #D9D9D9;
$middle-light: #A6A6A6;
$middle-gray: #7D7D7D; // primary
$middle-dark: #666;
$medium-dark: #4D4D4D;
$dark: #333; // primary
$darker: #1C1C1C;
$darkest: #000;
$themes: (
light: (
logo-color: $p5js-pink,
primary-text-color: $primary-text-color,
dropzone-text-color: #333,
modal-button-color: #333,
heading-text-color: #333,
secondary-text-color: #666,
inactive-text-color: #666,
background-color: #fbfbfb,
heavy-text-color: $darker,
primary-text-color: $dark,
secondary-text-color: $medium-dark,
inactive-text-color: $middle-dark,
dropzone-text-color: $dark,
modal-button-color: $dark,
heading-text-color: $dark,
background-color: $lighter,
preview-placeholder-color: #dcdcdc,
button-background-color: #f4f4f4,
button-background-color: $light,
button-color: $black,
button-border-color: #979797,
button-border-color: $middle-light,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #f4f4f4,
toolbar-button-background-color: $light,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-nav-inactive-color: #a0a0a0,
@ -46,21 +55,22 @@ $themes: (
modal-button-background-color: #e6e6e6,
modal-border-color: rgba(17, 17, 17, 0.3),
modal-border-selected-color: #B9D0E1,
icon-color: $icon-color,
icon-hover-color: $icon-hover-color,
icon-color: $medium-dark,
icon-hover-color: $p5js-pink,
icon-toast-hover-color: $white,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #eee,
console-color: $white,
console-header-background-color: #d6d6d6,
console-header-color: #1c1c1c,
console-header-background-color: $medium-light,
console-header-color: $darker,
console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue,
console-error-background-color: $red,
ide-border-color: #f4f4f4,
editor-gutter-color: #f4f4f4,
file-selected-color: #f4f4f4,
ide-border-color: $light,
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,
@ -71,10 +81,12 @@ $themes: (
dropdown-color: #414141,
keyboard-shortcut-color: #757575,
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-background-color: $p5js-pink,
@ -90,9 +102,9 @@ $themes: (
progress-bar-active-color: #f10046,
form-title-color: rgba(51, 51, 51, 0.87),
form-secondary-title-color: $middleGray,
form-secondary-title-color: $middle-dark,
form-input-text-color: $dark,
form-input-placeholder-text-color: $middleLight,
form-input-placeholder-text-color: $middle-light,
form-border-color: #b5b5b5,
form-button-background-color: $white,
form-button-color: #f10046,
@ -100,10 +112,11 @@ $themes: (
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
form-navigation-options-color: $middle-dark
),
dark: (
logo-color: $p5js-pink,
heavy-text-color: $lightest,
primary-text-color: $white,
dropzone-text-color: $black,
modal-button-color: $white,
@ -139,6 +152,7 @@ $themes: (
console-error-background-color: $red,
ide-border-color: #949494,
editor-gutter-color: #363636,
file-hover-color: #404040,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
@ -150,6 +164,7 @@ $themes: (
dropdown-color: #dadada,
keyboard-shortcut-color: #B5B5B5,
nav-hover-color: $p5js-pink,
nav-border-color: $middle-dark,
error-color: $p5js-pink,
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
@ -181,6 +196,7 @@ $themes: (
),
contrast: (
logo-color: $yellow,
heavy-text-color: $yellow,
primary-text-color: $yellow,
dropzone-text-color: $black,
modal-button-color: #333,
@ -215,6 +231,7 @@ $themes: (
console-error-background-color: $red,
ide-border-color: #949494,
editor-gutter-color: #454545,
file-hover-color: #404040,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
@ -226,6 +243,7 @@ $themes: (
dropdown-color: #e1e1e1,
keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow,
nav-border-color: $middle-dark,
error-color: $p5-contrast-pink,
table-row-stripe-color: #3f3f3f,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg),

4
client/styles/components/_console.scss
View file

@ -78,6 +78,10 @@
.preview-console__clear {
@include themify() {
@extend %link;
color: getThemifyVariable('primary-text-color');
// &:hover {
// color: getThemifyVariable('console-header-color');
// }
}
background: transparent;
border: none;

2
client/styles/components/_editor.scss
View file

@ -374,7 +374,7 @@ pre.CodeMirror-line {
.editor__file-name {
@include themify() {
color: getThemifyVariable('secondary-text-color');
color: getThemifyVariable('primary-text-color');
}
height: #{29 / $base-font-size}rem;
padding-top: #{7 / $base-font-size}rem;

15
client/styles/components/_nav.scss
View file

@ -5,7 +5,7 @@
justify-content: space-between;
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
}
& button {
@ -23,10 +23,11 @@
align-items: center;
}
.nav__items-left {
& button {
.nav__items-left,
.nav__items-right {
& button, & a {
@include themify() {
color: getThemifyVariable('secondary-text-color');
color: getThemifyVariable('primary-text-color');
}
}
}
@ -52,6 +53,12 @@
padding-right: #{15 / $base-font-size}rem;
}
.nav__item-header-triangle polygon {
@include themify() {
fill: getThemifyVariable('icon-color');
}
}
.nav__item:hover {
.nav__item-header {
@include themify() {

2
client/styles/components/_preferences.scss
View file

@ -242,7 +242,7 @@ input[type="number"]::-webkit-outer-spin-button {
.preference__radio-button:checked + .preference__option {
@include themify() {
//for some reason this won't work for getThemifyVariable
color: map-get($theme-map, "primary-text-color");
color: map-get($theme-map, "heavy-text-color");
}
}

19
client/styles/components/_sidebar.scss
View file

@ -50,6 +50,12 @@
position: relative;
overflow-y: auto;
flex: 1 1 auto;
@include themify() {
border-top: 1px solid map-get($theme-map, 'ide-border-color');
}
.sidebar--contracted & {
border: none;
}
}
.sidebar__file-item {
@ -57,12 +63,10 @@
cursor: pointer;
position: relative;
@include themify() {
color: map-get($theme-map, 'inactive-text-color');
&:hover > .file-item__content .sidebar__file-item-name {
color: map-get($theme-map, 'primary-text-color');
}
&:hover > .file-item__content .sidebar__file-item-icon g {
fill: map-get($theme-map, 'primary-text-color');
// TODO get this to not affect parent, need to move it into JS
&:hover:not(.sidebar__file-item--selected) > .file-item__content {
background-color: map-get($theme-map, 'file-hover-color');
}
}
}
@ -120,6 +124,9 @@
content: '';
width: 100%;
}
@include themify() {
color: map-get($theme-map, 'primary-text-color');
}
}
.sidebar__file-item-show-options {
@ -191,7 +198,7 @@
@include icon();
position: absolute;
top: #{7 / $base-font-size}rem;
left: #{34 / $base-font-size}rem;
left: #{1 / $base-font-size}rem;
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;

40
client/styles/components/_toolbar.scss
View file

@ -89,9 +89,12 @@
}
.toolbar {
padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem;
padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
display: flex;
align-items: center;
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
}
}
.toolbar__project-name-container {
@ -106,7 +109,7 @@
.toolbar__project-name {
@include themify() {
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('logo-color');
&:hover {
color: getThemifyVariable('primary-text-color');
& .toolbar__edit-name-button path {
@ -134,45 +137,18 @@
.toolbar__project-owner {
margin-left: #{5 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('secondary-text-color');
}
}
.toolbar__autorefresh-label {
@include themify() {
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('secondary-text-color');
}
margin-left: #{5 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
}
.toolbar__serve-secure {
margin-left: #{20 / $base-font-size}rem;
}
.toolbar__serve-secure-label {
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
margin-left: #{5 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
}
.toolbar__serve-secure-help {
display: inline-block;
padding-top: 0;
padding-bottom: 0;
& svg {
width: #{10 / $base-font-size}rem;
height: #{10 / $base-font-size}rem;
}
@include themify() {
& path {
fill: getThemifyVariable('inactive-text-color');
}
}
}
.toolbar__edit-name-button {
display: inline-block;
vertical-align: top;
@ -183,7 +159,7 @@
}
@include themify() {
& path {
fill: getThemifyVariable('inactive-text-color');
fill: getThemifyVariable('logo-color');
}
}
}