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

Move all light theme variables to new design grayscale

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-22 17:45:48 -04:00
parent 7c54b71002
commit e8c3587b41
5 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -186,7 +186,7 @@
background-color: map-get($theme-map, 'modal-background-color'); background-color: map-get($theme-map, 'modal-background-color');
border: 1px solid map-get($theme-map, 'modal-border-color'); border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color'); box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
color: getThemifyVariable('dropdown-color'); color: getThemifyVariable('primary-text-color');
} }
text-align: left; text-align: left;
width: #{180 / $base-font-size}rem; width: #{180 / $base-font-size}rem;
@ -207,7 +207,7 @@
& button, & button,
& a { & a {
@include themify() { @include themify() {
color: getThemifyVariable('dropdown-color'); color: getThemifyVariable('primary-text-color');
} }
width: 100%; width: 100%;
text-align: left; text-align: left;

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

@ -3,6 +3,7 @@ $base-font-size: 12;
//colors //colors
$p5js-pink: #ed225d; $p5js-pink: #ed225d;
$processing-blue: #007BBB; $processing-blue: #007BBB;
$p5js-active-pink: #f10046;
$white: #fff; $white: #fff;
$black: #000; $black: #000;
$yellow: #F5DC23; $yellow: #F5DC23;
@ -50,7 +51,7 @@ $themes: (
toolbar-button-color: $p5js-pink, toolbar-button-color: $p5js-pink,
toolbar-button-background-color: $medium-light, toolbar-button-background-color: $medium-light,
button-background-hover-color: $p5js-pink, button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046, button-background-active-color: $p5js-active-pink,
button-nav-inactive-color: $middle-gray, button-nav-inactive-color: $middle-gray,
button-hover-color: $white, button-hover-color: $white,
button-active-color: $white, button-active-color: $white,
@ -79,12 +80,12 @@ $themes: (
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: #414141, 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,
error-color: $p5js-pink, error-color: $p5js-pink,
table-row-stripe-color: #d6d6d6, table-row-stripe-color: $medium-light,
codefold-icon-open: url(../images/triangle-arrow-down.svg), codefold-icon-open: url(../images/triangle-arrow-down.svg),
codefold-icon-closed: url(../images/triangle-arrow-right.svg), codefold-icon-closed: url(../images/triangle-arrow-right.svg),
@ -92,24 +93,24 @@ $themes: (
primary-button-background-color: $p5js-pink, primary-button-background-color: $p5js-pink,
table-button-color: $white, table-button-color: $white,
table-button-background-color: #979797, table-button-background-color: $middle-gray,
table-button-active-color: $white, table-button-active-color: $white,
table-button-background-active-color: #00A1D3, table-button-background-active-color: #00A1D3,
table-button-hover-color: $white, table-button-hover-color: $white,
table-button-background-hover-color: $p5js-pink, table-button-background-hover-color: $p5js-pink,
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: 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: $middle-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: #b5b5b5, form-border-color: $middle-light,
form-button-background-color: $white, form-button-background-color: $white,
form-button-color: #f10046, form-button-color: $p5js-active-pink,
form-button-background-hover-color: $p5js-pink, form-button-background-hover-color: $p5js-pink,
form-button-background-active-color: #f10046, form-button-background-active-color: $p5js-active-pink,
form-button-hover-color: $white, form-button-hover-color: $white,
form-button-active-color: $white, form-button-active-color: $white,
form-navigation-options-color: $middle-dark form-navigation-options-color: $middle-dark

2
client/styles/components/_asset-list.scss
View file

@ -83,7 +83,7 @@
@include themify() { @include themify() {
& polygon { & polygon {
fill: getThemifyVariable('dropdown-color'); fill: getThemifyVariable('inactive-text-color');
} }
} }
} }

2
client/styles/components/_collection-popover.scss
View file

@ -16,7 +16,7 @@
background-color: map-get($theme-map, 'modal-background-color'); background-color: map-get($theme-map, 'modal-background-color');
border: 1px solid map-get($theme-map, 'modal-border-color'); border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color'); box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
color: getThemifyVariable('dropdown-color'); color: getThemifyVariable('primary-text-color');
} }
text-align: left; text-align: left;

2
client/styles/components/_sketch-list.scss
View file

@ -96,7 +96,7 @@
height:#{25 / $base-font-size}rem; height:#{25 / $base-font-size}rem;
@include themify() { @include themify() {
& polygon { & polygon {
fill: getThemifyVariable('dropdown-color'); fill: getThemifyVariable('inactive-text-color');
} }
} }
} }