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/images/p5js-logo.svg
View file

@ -11,4 +11,4 @@
</g>
</g>
</g>
</svg>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

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

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

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

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

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

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