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

Update high contrast theme

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-24 18:34:26 -04:00
parent a0d6b71f21
commit edb5187e03
8 changed files with 52 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/PreviewNav.jsx
View file

@ -10,7 +10,7 @@ const PreviewNav = ({ owner, project }) => (
<nav className="nav preview-nav"> <nav className="nav preview-nav">
<div className="nav__items-left"> <div className="nav__items-left">
<div className="nav__item-logo"> <div className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" /> <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
</div> </div>
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link> <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
<p className="toolbar__project-owner">by</p> <p className="toolbar__project-owner">by</p>

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

@ -43,7 +43,6 @@ $themes: (
inactive-text-color: $middle-dark, inactive-text-color: $middle-dark,
dropzone-text-color: $dark, dropzone-text-color: $dark,
modal-button-color: $dark, modal-button-color: $dark,
heading-text-color: $dark,
background-color: $lighter, background-color: $lighter,
button-background-color: $light, button-background-color: $light,
button-color: $black, button-color: $black,
@ -70,7 +69,7 @@ $themes: (
console-warn-background-color: $orange, console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue, console-debug-background-color: $dodgerblue,
console-error-background-color: $red, console-error-background-color: $red,
ide-border-color: $light, ide-border-color: $medium-light,
editor-gutter-color: $lighter, editor-gutter-color: $lighter,
file-hover-color: $light, file-hover-color: $light,
file-selected-color: $medium-light, file-selected-color: $medium-light,
@ -114,7 +113,6 @@ $themes: (
primary-text-color: $lightest, primary-text-color: $lightest,
dropzone-text-color: $black, dropzone-text-color: $black,
modal-button-color: $lightest, modal-button-color: $lightest,
heading-text-color: $lightest,
secondary-text-color: $medium-light, secondary-text-color: $medium-light,
inactive-text-color: $middle-light, inactive-text-color: $middle-light,
background-color: $darker, background-color: $darker,
@ -182,73 +180,72 @@ $themes: (
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
heavy-text-color: $yellow, heavy-text-color: $yellow,
primary-text-color: $yellow, primary-text-color: $lightest,
dropzone-text-color: $black, dropzone-text-color: $black,
modal-button-color: #333, modal-button-color: $dark,
heading-text-color: #e1e1e1, secondary-text-color: $lighter,
secondary-text-color: #e1e1e1, inactive-text-color: $light,
inactive-text-color: #f2f2f2,
background-color: $darker, background-color: $darker,
button-background-color: $white, button-background-color: $white,
button-color: $black, button-color: $black,
button-border-color: #979797, button-border-color: $middle-gray,
toolbar-button-color: #333333, toolbar-button-color: $dark,
toolbar-button-background-color: #C1C1C1, toolbar-button-background-color: $medium-light,
button-background-hover-color: $yellow, button-background-hover-color: $yellow,
button-background-active-color: $yellow, button-background-active-color: $yellow,
button-nav-inactive-color: #a0a0a0, button-nav-inactive-color: $light,
button-hover-color: #333333, button-hover-color: $dark,
button-active-color: #333333, button-active-color: $dark,
modal-background-color: #444, modal-background-color: $dark,
preferences-button-background-color: #C1C1C1, preferences-button-background-color: $medium-light,
modal-border-color: #949494, modal-border-color: $middle-dark,
icon-color: #d9d9d9, icon-color: $medium-light,
icon-hover-color: $yellow, icon-hover-color: $yellow,
icon-toast-hover-color: $yellow, icon-toast-hover-color: $yellow,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f, console-background-color: $dark,
console-color: $black, console-color: $black,
console-header-background-color: #3f3f3f, console-header-background-color: $medium-dark,
console-header-color: #d9d9d9, console-header-color: $lightest,
console-info-background-color: $lightsteelblue, console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange, console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue, console-debug-background-color: $dodgerblue,
console-error-background-color: $red, console-error-background-color: $red,
ide-border-color: #949494, ide-border-color: $middle-dark,
editor-gutter-color: #454545, editor-gutter-color: $darker,
file-hover-color: #404040, file-hover-color: $dark,
file-selected-color: #404040, file-selected-color: $medium-dark,
input-text-color: #333, input-text-color: $lightest,
input-background-color: $lightest, input-background-color: $dark,
input-border-color: #b5b5b5, input-border-color: $middle-dark,
search-background-color: $white, search-background-color: $white,
search-clear-background-color: #444, search-clear-background-color: $medium-dark,
search-hover-text-color: $black, search-hover-text-color: $dark,
search-hover-background-color: $yellow, search-hover-background-color: $yellow,
keyboard-shortcut-color: #e1e1e1, keyboard-shortcut-color: $middle-light,
nav-hover-color: $yellow, nav-hover-color: $yellow,
nav-border-color: $middle-dark, nav-border-color: $middle-dark,
error-color: $p5-contrast-pink, error-color: $p5-contrast-pink,
table-row-stripe-color: #3f3f3f, table-row-stripe-color: dark,
codefold-icon-open: url(../images/triangle-arrow-down-white.svg), codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
codefold-icon-closed: url(../images/triangle-arrow-right-white.svg), codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
primary-button-color: #fff, primary-button-color: $lightest,
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: #333, table-button-color: $dark,
table-button-background-color: #C1C1C1, table-button-background-color: $middle-gray,
table-button-active-color: #333, table-button-active-color: $dark,
table-button-background-active-color: #00FFFF, table-button-background-active-color: #00FFFF,
table-button-hover-color: #333, table-button-hover-color: $dark,
table-button-background-hover-color: $yellow, table-button-background-hover-color: $yellow,
progress-bar-background-color: #979797, progress-bar-background-color: $middle-gray,
progress-bar-active-color: #f10046, progress-bar-active-color: $p5js-active-pink,
form-title-color: $white, form-title-color: $lightest,
form-secondary-title-color: #b5b5b5, form-secondary-title-color: $medium-light,
form-navigation-options-color: #999999 form-navigation-options-color: $middle-light
) )
); );
@ -256,7 +253,7 @@ $console-warn-color: #ffbe05;
$console-error-color: #ff5f52; $console-error-color: #ff5f52;
$toast-background-color: #4A4A4A; $toast-background-color: #4A4A4A;
$toast-text-color: $white; $toast-text-color: $lightest;
$about-play-background-color: rgba(255, 255, 255, 0.7); $about-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7); $about-button-border-color: rgba(151, 151, 151, 0.7);

9
client/styles/components/_api-key.scss
View file

@ -1,8 +1,5 @@
.api-key-form__summary { .api-key-form__summary {
padding-top: #{25 / $base-font-size}rem; padding-top: #{25 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
} }
.api-key-form__section { .api-key-form__section {
@ -13,9 +10,6 @@
padding: #{15 / $base-font-size}rem 0; padding: #{15 / $base-font-size}rem 0;
font-size: #{21 / $base-font-size}rem; font-size: #{21 / $base-font-size}rem;
font-weight: bold; font-weight: bold;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
} }
.api-key-form__create-button { .api-key-form__create-button {
@ -99,9 +93,6 @@
margin-bottom: #{10 / $base-font-size}rem; margin-bottom: #{10 / $base-font-size}rem;
font-size: #{18 / $base-font-size}rem; font-size: #{18 / $base-font-size}rem;
font-weight: bold; font-weight: bold;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
} }
.api-key-form__new-token__info { .api-key-form__new-token__info {

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

@ -23,14 +23,14 @@
align-items: center; align-items: center;
} }
.nav__items-left, // .nav__items-left,
.nav__items-right { // .nav__items-right {
& button, & a { // & button, & a {
@include themify() { // @include themify() {
color: getThemifyVariable('primary-text-color'); // color: getThemifyVariable('primary-text-color');
} // }
} // }
} // }
.nav__item { .nav__item {
position: relative; position: relative;

2
client/styles/components/_p5-contrast-codemirror-theme.scss
View file

@ -10,7 +10,7 @@
//light gray: #f4f4f4 //light gray: #f4f4f4
//dark gray: #b5b5b5 //dark gray: #b5b5b5
$p5-contrast-black: #333; $p5-contrast-black: #1C1C1C;
$p5-contrast-gray: #A0A0A0; $p5-contrast-gray: #A0A0A0;
$p5-contrast-white: #FDFDFD; $p5-contrast-white: #FDFDFD;
$p5-contrast-darkgray: #333333; $p5-contrast-darkgray: #333333;

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

@ -33,25 +33,6 @@
} }
} }
.serve__over__https {
text-align: center;
margin-left: #{9 / $base-font-size}rem;
font-width: #{108 / $base-font-size}rem;
font-height: #{15 / $base-font-size}rem;
font-family: Montserrat;
font-size: #{12 / $base-font-size}rem;
margin-top: #{2 / $base-font-size}rem;
}
.preferences__heading {
display: flex;
flex-direction: row;
justify-content: space-between;
@include themify() {
color: getThemifyVariable("heading-text-color");
}
}
.preferences__title { .preferences__title {
width: #{90 / $base-font-size}rem; width: #{90 / $base-font-size}rem;
height: #{25 / $base-font-size}rem; height: #{25 / $base-font-size}rem;
@ -86,9 +67,6 @@
font-size: #{16 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem;
margin-top: #{13 / $base-font-size}rem; margin-top: #{13 / $base-font-size}rem;
margin-bottom: #{7 / $base-font-size}rem; margin-bottom: #{7 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable("heading-text-color");
}
} }
.preference__subtitle { .preference__subtitle {

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

@ -11,7 +11,7 @@
padding-right: #{38 / $base-font-size}rem; padding-right: #{38 / $base-font-size}rem;
@include themify() { @include themify() {
border-color: getThemifyVariable('input-border-color'); border-color: getThemifyVariable('input-border-color');
background-color: getThemifyVariable('search-background-color'); background-color: getThemifyVariable('input-background-color');
} }
} }

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

@ -235,7 +235,7 @@
margin-right: #{5 / $base-font-size}rem; margin-right: #{5 / $base-font-size}rem;
& g { & g {
@include themify() { @include themify() {
fill: getThemifyVariable('inactive-text-color'); fill: getThemifyVariable('icon-color');
} }
} }
& svg { & svg {