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

Continue to update dark theme, remove many unused theme variables

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-23 20:25:39 -04:00
parent 3461c9619e
commit 6b11adf88b
5 changed files with 38 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -75,12 +75,12 @@ $themes: (
file-hover-color: $light, file-hover-color: $light,
file-selected-color: $medium-light, file-selected-color: $medium-light,
input-text-color: $dark, input-text-color: $dark,
input-background-color: $lightest,
input-border-color: $middle-light, input-border-color: $middle-light,
search-background-color: $lightest, search-background-color: $lightest,
search-clear-background-color: $light, search-clear-background-color: $light,
search-hover-text-color: $lightest, search-hover-text-color: $lightest,
search-hover-background-color: $medium-dark, search-hover-background-color: $medium-dark,
dropdown-color: $dark,
keyboard-shortcut-color: $middle-gray, keyboard-shortcut-color: $middle-gray,
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
nav-border-color: $middle-light, nav-border-color: $middle-light,
@ -103,16 +103,9 @@ $themes: (
progress-bar-active-color: $p5js-active-pink, progress-bar-active-color: $p5js-active-pink,
form-title-color: rgba(51, 51, 51, 0.87), form-title-color: rgba(51, 51, 51, 0.87),
form-secondary-title-color: $middle-dark, form-secondary-title-color: $medium-dark,
form-input-text-color: $dark, form-input-text-color: $dark,
form-input-placeholder-text-color: $middle-light, form-input-placeholder-text-color: $middle-light,
form-border-color: $middle-light,
form-button-background-color: $lightest,
form-button-color: $p5js-active-pink,
form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: $p5js-active-pink,
form-button-hover-color: $lightest,
form-button-active-color: $lightest,
form-navigation-options-color: $middle-dark form-navigation-options-color: $middle-dark
), ),
dark: ( dark: (
@ -152,46 +145,39 @@ $themes: (
console-error-background-color: $red, console-error-background-color: $red,
ide-border-color: $middle-dark, ide-border-color: $middle-dark,
editor-gutter-color: $darker, 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-border-color: #b5b5b5, input-background-color: $dark,
search-background-color: #ffffff, input-border-color: $middle-dark,
search-clear-background-color: #4f4f4f, search-background-color: $lightest,
search-hover-text-color: #ffffff, search-clear-background-color: $medium-dark,
search-hover-text-color: $lightest,
search-hover-background-color: $p5js-pink, search-hover-background-color: $p5js-pink,
dropdown-color: #dadada, keyboard-shortcut-color: $middle-light,
keyboard-shortcut-color: #B5B5B5,
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
nav-border-color: $middle-dark, nav-border-color: $middle-dark,
error-color: $p5js-pink, error-color: $p5js-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: $white, table-button-color: $lightest,
table-button-background-color: $middle-gray, table-button-background-color: $middle-gray,
table-button-active-color: $white, table-button-active-color: $lightest,
table-button-background-active-color: #00A1D3, table-button-background-active-color: #00A1D3,
table-button-hover-color: $white, table-button-hover-color: $lightest,
table-button-background-hover-color: $p5js-pink, table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: $middle-gray, 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-border-color: #b5b5b5, form-navigation-options-color: $middle-light
form-button-background-color: $black,
form-button-color: #f10046,
form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: #f10046,
form-button-hover-color: $white,
form-button-active-color: $white,
form-navigation-options-color: #999999
), ),
contrast: ( contrast: (
logo-color: $yellow, logo-color: $yellow,
@ -233,12 +219,12 @@ $themes: (
file-hover-color: #404040, file-hover-color: #404040,
file-selected-color: #404040, file-selected-color: #404040,
input-text-color: #333, input-text-color: #333,
input-background-color: $lightest,
input-border-color: #b5b5b5, input-border-color: #b5b5b5,
search-background-color: $white, search-background-color: $white,
search-clear-background-color: #444, search-clear-background-color: #444,
search-hover-text-color: $black, search-hover-text-color: $black,
search-hover-background-color: $yellow, search-hover-background-color: $yellow,
dropdown-color: #e1e1e1,
keyboard-shortcut-color: #e1e1e1, keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow, nav-hover-color: $yellow,
nav-border-color: $middle-dark, nav-border-color: $middle-dark,
@ -262,13 +248,6 @@ $themes: (
form-title-color: $white, form-title-color: $white,
form-secondary-title-color: #b5b5b5, form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,
form-button-background-color: $black,
form-button-color: #f10046,
form-button-background-hover-color: $p5-contrast-pink,
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: #999999
) )
); );

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

@ -39,6 +39,7 @@ textarea {
padding: #{10 / $base-font-size}rem; padding: #{10 / $base-font-size}rem;
@include themify() { @include themify() {
color: getThemifyVariable('input-text-color'); color: getThemifyVariable('input-text-color');
background-color: getThemifyVariable('input-background-color');
border-color: getThemifyVariable('input-border-color'); border-color: getThemifyVariable('input-border-color');
} }
} }

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

@ -56,6 +56,12 @@
.preview-console__collapse { .preview-console__collapse {
padding-top: #{3 / $base-font-size}rem; padding-top: #{3 / $base-font-size}rem;
@include icon(); @include icon();
@include themify() {
& g,
& polygon {
fill: getThemifyVariable('secondary-text-color');
}
}
.preview-console--collapsed & { .preview-console--collapsed & {
display: none; display: none;
} }
@ -64,6 +70,12 @@
.preview-console__expand { .preview-console__expand {
padding-top: #{3 / $base-font-size}rem; padding-top: #{3 / $base-font-size}rem;
@include icon(); @include icon();
@include themify() {
& g,
& polygon {
fill: getThemifyVariable('secondary-text-color');
}
}
display: none; display: none;
.preview-console--collapsed & { .preview-console--collapsed & {
display: inline-block; display: inline-block;
@ -78,7 +90,7 @@
.preview-console__clear { .preview-console__clear {
@include themify() { @include themify() {
@extend %link; @extend %link;
color: getThemifyVariable('inactive-text-color'); // color: getThemifyVariable('inactive-text-color');
// &:hover { // &:hover {
// color: getThemifyVariable('console-header-color'); // color: getThemifyVariable('console-header-color');
// } // }

1
client/styles/components/_forms.scss
View file

@ -53,6 +53,7 @@
font-size: #{16 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem;
@include themify() { @include themify() {
color: getThemifyVariable('form-input-text-color'); color: getThemifyVariable('form-input-text-color');
background-color: getThemifyVariable('input-background-color');
} }
} }

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

@ -104,8 +104,9 @@
@include themify() { @include themify() {
border: #{1 / $base-font-size}rem solid border: #{1 / $base-font-size}rem solid
getThemifyVariable("button-border-color"); getThemifyVariable("button-border-color");
background-color: getThemifyVariable("button-background-color"); // background-color: getThemifyVariable("button-background-color");
color: getThemifyVariable("input-text-color"); color: getThemifyVariable("input-text-color");
background-color: getThemifyVariable('input-background-color');
} }
text-align: center; text-align: center;
border-radius: 0%; border-radius: 0%;