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

Make p5 logo color variable (#150)

Browse source 
* initial changes for high contrast theme

* change more colours

* add more styles

* add new variables

* fix few more colours

* fix typo

* fix indent

* make logo colour a variable
This commit is contained in:
Mathura MG 2016-10-17 22:57:29 -04:00 committed by Cassie Tarakajian
parent 76bd1b1630
commit 1dafe3a8e9
4 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/modules/IDE/components/Toolbar.js
View file

@ -50,7 +50,7 @@ class Toolbar extends React.Component {
return ( return (
<div className="toolbar"> <div className="toolbar">
<img className="toolbar__logo" src={logoUrl} alt="p5js Logo" /> <InlineSVG className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
<button <button
className="toolbar__play-sketch-button" className="toolbar__play-sketch-button"
onClick={() => { onClick={() => {

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

@ -8,6 +8,7 @@ $yellow: #F5DC23;
$themes: ( $themes: (
light: ( light: (
logo-color: $p5js-pink,
primary-text-color: #333, primary-text-color: #333,
modal-button-color: #333, modal-button-color: #333,
heading-text-color: #333, heading-text-color: #333,
@ -39,6 +40,7 @@ $themes: (
input-border-color: #979797, input-border-color: #979797,
), ),
dark: ( dark: (
logo-color: $p5js-pink,
primary-text-color: $white, primary-text-color: $white,
modal-button-color: $white, modal-button-color: $white,
heading-text-color: $white, heading-text-color: $white,
@ -70,6 +72,7 @@ $themes: (
input-border-color: #979797, input-border-color: #979797,
), ),
contrast: ( contrast: (
logo-color: $yellow,
primary-text-color: $yellow, primary-text-color: $yellow,
modal-button-color: #333, modal-button-color: #333,
heading-text-color: #e1e1e1, heading-text-color: #e1e1e1,

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

@ -52,6 +52,11 @@
.toolbar__logo { .toolbar__logo {
margin-right: #{30 / $base-font-size}rem; margin-right: #{30 / $base-font-size}rem;
@include themify() {
& g {
fill: getThemifyVariable('logo-color');
}
}
} }
.toolbar { .toolbar {