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

Merge pull request #1406 from processing/wcag-aa

Browse source 
Fixes #1263 - Updates colors and design to WCAG AA/AAA
This commit is contained in:
Cassie Tarakajian 2020-04-28 18:08:43 -04:00 committed by GitHub
commit 1747ba7558
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 743 additions and 450 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/components/Nav.jsx
View file

@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
onBlur={this.handleBlur} onBlur={this.handleBlur}
> >
Save Save
<span className="nav__keyboard-shortcut">{metaKeyName}+s</span> <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
</button> </button>
</li> } </li> }
{ this.props.project.id && this.props.user.authenticated && { this.props.project.id && this.props.user.authenticated &&
@ -541,13 +541,13 @@ class Nav extends React.PureComponent {
return ( return (
<ul className="nav__items-right" title="user-menu"> <ul className="nav__items-right" title="user-menu">
<li className="nav__item"> <li className="nav__item">
<Link to="/login"> <Link to="/login" className="nav__auth-button">
<span className="nav__item-header">Log in</span> <span className="nav__item-header">Log in</span>
</Link> </Link>
</li> </li>
<span className="nav__item-spacer">or</span> <span className="nav__item-or">or</span>
<li className="nav__item"> <li className="nav__item">
<Link to="/signup"> <Link to="/signup" className="nav__auth-button">
<span className="nav__item-header">Sign up</span> <span className="nav__item-header">Sign up</span>
</Link> </Link>
</li> </li>

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>

3
client/components/__test__/FileNode.test.jsx
View file

@ -24,7 +24,8 @@ describe('<FileNode />', () => {
showFolderChildren: jest.fn(), showFolderChildren: jest.fn(),
hideFolderChildren: jest.fn(), hideFolderChildren: jest.fn(),
canEdit: true, canEdit: true,
authenticated: false authenticated: false,
openUploadFileModal: jest.fn()
}; };
component = shallow(<FileNode {...props} />); component = shallow(<FileNode {...props} />);
}); });

10
client/components/__test__/__snapshots__/Nav.test.jsx.snap
View file

@ -144,7 +144,7 @@ exports[`Nav renders correctly 1`] = `
<span <span
className="nav__keyboard-shortcut" className="nav__keyboard-shortcut"
> >
Ctrl ⌃
+F +F
</span> </span>
</button> </button>
@ -161,7 +161,7 @@ exports[`Nav renders correctly 1`] = `
<span <span
className="nav__keyboard-shortcut" className="nav__keyboard-shortcut"
> >
Ctrl ⌃
+G +G
</span> </span>
</button> </button>
@ -180,7 +180,7 @@ exports[`Nav renders correctly 1`] = `
> >
⇧ ⇧
+ +
Ctrl ⌃
+G +G
</span> </span>
</button> </button>
@ -242,7 +242,7 @@ exports[`Nav renders correctly 1`] = `
<span <span
className="nav__keyboard-shortcut" className="nav__keyboard-shortcut"
> >
Ctrl ⌃
+Enter +Enter
</span> </span>
</button> </button>
@ -261,7 +261,7 @@ exports[`Nav renders correctly 1`] = `
> >
⇧ ⇧
+ +
Ctrl ⌃
+Enter +Enter
</span> </span>
</button> </button>

54
client/images/console-debug-contrast.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 24 24"
id="svg4"
sodipodi:docname="console-debug-contrast.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview6"
showgrid="false"
inkscape:zoom="23.6"
inkscape:cx="5"
inkscape:cy="5"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<path
d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"
id="path2"
fill="#38B6F5" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

2
client/images/console-debug-light.svg
View file

@ -50,5 +50,5 @@
<path <path
d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z" d="M14,12H10V10H14M14,16H10V14H14M20,8H17.19C16.74,7.22 16.12,6.55 15.37,6.04L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.04,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6.04C7.88,6.55 7.26,7.22 6.81,8H4V10H6.09C6.04,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.04,15.67 6.09,16H4V18H6.81C7.85,19.79 9.78,21 12,21C14.22,21 16.15,19.79 17.19,18H20V16H17.91C17.96,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.96,10.33 17.91,10H20V8Z"
id="path2" id="path2"
fill="#007BBB" /> fill="#0071AD" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

54
client/images/console-error-contrast.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 24 24"
id="svg4"
sodipodi:docname="console-error-contrast.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview6"
showgrid="false"
inkscape:zoom="23.6"
inkscape:cx="5"
inkscape:cy="5"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<path
d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
id="path2"
fill="#EA7B7D" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

54
client/images/console-info-contrast.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 24 24"
id="svg4"
sodipodi:docname="console-info-contrast.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview6"
showgrid="false"
inkscape:zoom="23.6"
inkscape:cx="5"
inkscape:cy="5"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<path
d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
id="path2"
fill="#D9D9D9" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
client/images/console-info-dark.svg
View file

@ -50,5 +50,5 @@
<path <path
d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
id="path2" id="path2"
fill="#a3a3a3" /> fill="#D9D9D9" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

2
client/images/console-info-light.svg
View file

@ -50,5 +50,5 @@
<path <path
d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
id="path2" id="path2"
fill="#7D7D7D" /> fill="#4D4D4D" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

54
client/images/console-warn-contrast.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 24 24"
id="svg4"
sodipodi:docname="console-warn-contrast.svg"
inkscape:version="0.92.2 2405546, 2018-03-11">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview6"
showgrid="false"
inkscape:zoom="23.6"
inkscape:cx="5"
inkscape:cy="5"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="svg4" />
<path
d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
id="path2"
fill="#f5bc38" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
client/images/console-warn-light.svg
View file

@ -50,5 +50,5 @@
<path <path
d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z" d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
id="path2" id="path2"
fill="#FAAF00" /> fill="#996B00" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

4
client/images/down-arrow.svg
View file

@ -3,8 +3,8 @@
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<!-- <desc>Created with Sketch.</desc> --> <!-- <desc>Created with Sketch.</desc> -->
<defs></defs> <defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962"> <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1.0">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333"> <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#AAA">
<g id="Icons" transform="translate(16.000000, 1063.000000)"> <g id="Icons" transform="translate(16.000000, 1063.000000)">
<polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon> <polygon id="arrow-shape-copy-2" transform="translate(416.000000, 109.198314) rotate(-180.000000) translate(-416.000000, -109.198314) " points="417.4 106.396628 423 111.996628 421.6 113.396628 416 107.796628 410.4 113.396628 409 111.996628 414.6 106.396628 415.996628 105"></polygon>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 979 B

After

Width:  |  Height:  |  Size: 968 B

2
client/images/exit.svg
View file

@ -5,7 +5,7 @@
<!-- <desc>Created with Sketch.</desc> --> <!-- <desc>Created with Sketch.</desc> -->
<defs></defs> <defs></defs>
<g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#D8D8D8"> <g id="Artboard-1" fill="#AAA">
<path d="M8,5.87867966 L2.69669914,0.575378798 L0.575378798,2.69669914 L5.87867966,8 L0.575378798,13.3033009 L2.69669914,15.4246212 L8,10.1213203 L13.3033009,15.4246212 L15.4246212,13.3033009 L10.1213203,8 L15.4246212,2.69669914 L13.3033009,0.575378798 L8,5.87867966 Z" id="exit"></path> <path d="M8,5.87867966 L2.69669914,0.575378798 L0.575378798,2.69669914 L5.87867966,8 L0.575378798,13.3033009 L2.69669914,15.4246212 L8,10.1213203 L13.3033009,15.4246212 L15.4246212,13.3033009 L10.1213203,8 L15.4246212,2.69669914 L13.3033009,0.575378798 L8,5.87867966 Z" id="exit"></path>
</g> </g>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 826 B

After

Width:  |  Height:  |  Size: 823 B

2
client/images/triangle-arrow-down-white.svg
View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5"> <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#FFF">
<g id="libraries" transform="translate(21.000000, 32.000000)"> <g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon> <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 695 B

2
client/images/triangle-arrow-down.svg
View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5"> <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
<g id="libraries" transform="translate(21.000000, 32.000000)"> <g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon> <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(180.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 698 B

2
client/images/triangle-arrow-right.svg
View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs></defs> <defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5"> <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#000000">
<g id="libraries" transform="translate(21.000000, 32.000000)"> <g id="libraries" transform="translate(21.000000, 32.000000)">
<polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon> <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(90.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 698 B

4
client/images/up-arrow.svg
View file

@ -3,8 +3,8 @@
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch --> <!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<!-- <desc>Created with Sketch.</desc> --> <!-- <desc>Created with Sketch.</desc> -->
<defs></defs> <defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962"> <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333"> <g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#AAA">
<g id="Icons" transform="translate(16.000000, 1063.000000)"> <g id="Icons" transform="translate(16.000000, 1063.000000)">
<polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon> <polygon id="arrow-shape-copy" points="386.4 106.396628 392 111.996628 390.6 113.396628 385 107.796628 379.4 113.396628 378 111.996628 383.6 106.396628 384.996628 105"></polygon>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 873 B

After

Width:  |  Height:  |  Size: 860 B

12
client/modules/IDE/components/Console.jsx
View file

@ -9,12 +9,16 @@ import {
} from '../../../styles/components/_console-feed.scss'; } from '../../../styles/components/_console-feed.scss';
import warnLightUrl from '../../../images/console-warn-light.svg'; import warnLightUrl from '../../../images/console-warn-light.svg';
import warnDarkUrl from '../../../images/console-warn-dark.svg'; import warnDarkUrl from '../../../images/console-warn-dark.svg';
import warnContrastUrl from '../../../images/console-warn-contrast.svg';
import errorLightUrl from '../../../images/console-error-light.svg'; import errorLightUrl from '../../../images/console-error-light.svg';
import errorDarkUrl from '../../../images/console-error-dark.svg'; import errorDarkUrl from '../../../images/console-error-dark.svg';
import errorContrastUrl from '../../../images/console-error-contrast.svg';
import debugLightUrl from '../../../images/console-debug-light.svg'; import debugLightUrl from '../../../images/console-debug-light.svg';
import debugDarkUrl from '../../../images/console-debug-dark.svg'; import debugDarkUrl from '../../../images/console-debug-dark.svg';
import debugContrastUrl from '../../../images/console-debug-contrast.svg';
import infoLightUrl from '../../../images/console-info-light.svg'; import infoLightUrl from '../../../images/console-info-light.svg';
import infoDarkUrl from '../../../images/console-info-dark.svg'; import infoDarkUrl from '../../../images/console-info-dark.svg';
import infoContrastUrl from '../../../images/console-info-contrast.svg';
const upArrowUrl = require('../../../images/up-arrow.svg'); const upArrowUrl = require('../../../images/up-arrow.svg');
const downArrowUrl = require('../../../images/down-arrow.svg'); const downArrowUrl = require('../../../images/down-arrow.svg');
@ -47,6 +51,12 @@ class Console extends React.Component {
LOG_DEBUG_ICON: `url(${debugDarkUrl})`, LOG_DEBUG_ICON: `url(${debugDarkUrl})`,
LOG_INFO_ICON: `url(${infoDarkUrl})` LOG_INFO_ICON: `url(${infoDarkUrl})`
}; };
const CONSOLE_FEED_CONTRAST_ICONS = {
LOG_WARN_ICON: `url(${warnContrastUrl})`,
LOG_ERROR_ICON: `url(${errorContrastUrl})`,
LOG_DEBUG_ICON: `url(${debugContrastUrl})`,
LOG_INFO_ICON: `url(${infoContrastUrl})`
};
const CONSOLE_FEED_SIZES = { const CONSOLE_FEED_SIZES = {
TREENODE_LINE_HEIGHT: 1.2, TREENODE_LINE_HEIGHT: 1.2,
BASE_FONT_SIZE: this.props.fontSize, BASE_FONT_SIZE: this.props.fontSize,
@ -64,7 +74,7 @@ class Console extends React.Component {
case 'dark': case 'dark':
return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style); return Object.assign(CONSOLE_FEED_DARK_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style);
case 'contrast': case 'contrast':
return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_DARK_ICONS, CONSOLE_FEED_SIZES, style); return Object.assign(CONSOLE_FEED_CONTRAST_STYLES, CONSOLE_FEED_CONTRAST_ICONS, CONSOLE_FEED_SIZES, style);
default: default:
return ''; return '';
} }

7
client/modules/IDE/components/NewFileForm.jsx
View file

@ -33,7 +33,12 @@ class NewFileForm extends React.Component {
{...domOnlyProps(name)} {...domOnlyProps(name)}
ref={(element) => { this.fileName = element; }} ref={(element) => { this.fileName = element; }}
/> />
<input type="submit" value="Add File" aria-label="add file" /> <input
type="submit"
value="Add File"
aria-label="add file"
className="new-file-form__submit"
/>
</div> </div>
{name.touched && name.error && <span className="form-error">{name.error}</span>} {name.touched && name.error && <span className="form-error">{name.error}</span>}
</form> </form>

7
client/modules/IDE/components/NewFolderForm.jsx
View file

@ -34,7 +34,12 @@ class NewFolderForm extends React.Component {
ref={(element) => { this.fileName = element; }} ref={(element) => { this.fileName = element; }}
{...domOnlyProps(name)} {...domOnlyProps(name)}
/> />
<input type="submit" value="Add Folder" aria-label="add folder" /> <input
type="submit"
value="Add Folder"
aria-label="add folder"
className="new-folder-form__submit"
/>
</div> </div>
{name.touched && name.error && <span className="form-error">{name.error}</span>} {name.touched && name.error && <span className="form-error">{name.error}</span>}
</form> </form>

5
client/styles/abstracts/_mixins.scss
View file

@ -21,12 +21,13 @@
@mixin icon() { @mixin icon() {
@include themify() { @include themify() {
color: getThemifyVariable('icon-color'); color: getThemifyVariable('icon-color');
& g { & g, & polygon {
opacity: 1;
fill: getThemifyVariable('icon-color'); fill: getThemifyVariable('icon-color');
} }
&:hover { &:hover {
color: getThemifyVariable('icon-hover-color'); color: getThemifyVariable('icon-hover-color');
& g { & g, & polygon {
opacity: 1; opacity: 1;
fill: getThemifyVariable('icon-hover-color'); fill: getThemifyVariable('icon-hover-color');
} }

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

@ -58,15 +58,15 @@
} }
%none-themify-icon-with-hover { %none-themify-icon-with-hover {
color: $icon-color; color: $medium-dark;
& g { & g {
fill: $icon-color; fill: $medium-dark;
} }
&:hover { &:hover {
color: $icon-hover-color; color: $p5js-pink;
& g { & g {
opacity: 1; opacity: 1;
fill: $icon-hover-color; fill: $p5js-pink;
} }
} }
background-color: transparent; background-color: transparent;
@ -110,7 +110,7 @@
@extend %toolbar-button; @extend %toolbar-button;
@include themify() { @include themify() {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('modal-button-background-color'); background-color: getThemifyVariable('preferences-button-background-color');
padding: 0; padding: 0;
margin-bottom: #{28 / $base-font-size}rem; margin-bottom: #{28 / $base-font-size}rem;
line-height: #{50 / $base-font-size}rem; line-height: #{50 / $base-font-size}rem;
@ -126,7 +126,7 @@
} }
&:disabled:hover { &:disabled:hover {
cursor: not-allowed; cursor: not-allowed;
background-color: getThemifyVariable('modal-button-background-color'); background-color: getThemifyVariable('preferences-button-background-color');
} }
} }
} }
@ -136,7 +136,7 @@
background-color: transparent; background-color: transparent;
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
&:hover { &:hover {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('heavy-text-color');
} }
} }
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
@ -176,7 +176,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('heavy-text-color');
} }
} }
} }
@ -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;

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

@ -2,6 +2,8 @@ $base-font-size: 12;
//colors //colors
$p5js-pink: #ed225d; $p5js-pink: #ed225d;
$processing-blue: #007BBB;
$p5js-active-pink: #f10046;
$white: #fff; $white: #fff;
$black: #000; $black: #000;
$yellow: #F5DC23; $yellow: #F5DC23;
@ -9,259 +11,263 @@ $orange: #ffa500;
$red: #ff0000; $red: #ff0000;
$lightsteelblue: #B0C4DE; $lightsteelblue: #B0C4DE;
$dodgerblue: #1E90FF; $dodgerblue: #1E90FF;
$icon-color: #8b8b8b; // $icon-hover-color: #333;
$icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9; $p5-contrast-pink: #FFA9D9;
// Grays $border-color: #B5B5B5;
$dark: #333; $outline-color: #0F9DD7;
$middleGray: #7d7d7d;
$middleLight: #a6a6a6;
// Abstracts // Grayscale values
$primary-text-color: $dark; $lightest: #FFF; // primary
$lighter: #FBFBFB;
$light: #F0F0F0; // primary
$medium-light: #D9D9D9;
$middle-light: #A6A6A6;
// $middle-gray: #7D7D7D; // primary
$middle-gray: #747474; // primary
$middle-dark: #666;
$medium-dark: #4D4D4D;
$dark: #333; // primary
$darker: #1C1C1C;
$darkest: #000;
$themes: ( $themes: (
light: ( light: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
primary-text-color: $primary-text-color, logo-background-color: $lightest,
dropzone-text-color: #333, heavy-text-color: $darker,
modal-button-color: #333, primary-text-color: $dark,
heading-text-color: #333, secondary-text-color: $medium-dark,
secondary-text-color: #a8a8a8, inactive-text-color: $middle-dark,
inactive-text-color: #b5b5b5, dropzone-text-color: $dark,
background-color: #fbfbfb, modal-button-color: $dark,
preview-placeholder-color: #dcdcdc, background-color: $lighter,
button-background-color: #f4f4f4, button-background-color: $light,
button-secondary-background-color: $medium-light,
button-color: $black, button-color: $black,
button-border-color: #979797, button-border-color: $middle-light,
toolbar-button-color: $p5js-pink, toolbar-button-color: $dark,
toolbar-button-background-color: #f4f4f4, 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: #a0a0a0, button-nav-inactive-color: $middle-gray,
button-hover-color: $white, button-hover-color: $lightest,
button-active-color: $white, button-active-color: $lightest,
modal-background-color: #f4f4f4, modal-background-color: $light,
modal-button-background-color: #e6e6e6, preferences-button-background-color: $medium-light,
modal-border-color: rgba(17, 17, 17, 0.3), modal-border-color: $middle-light,
modal-border-selected-color: #B9D0E1, icon-color: $middle-gray,
icon-color: $icon-color, icon-hover-color: $darker,
icon-hover-color: $icon-hover-color, icon-toast-hover-color: $lightest,
icon-toast-hover-color: $white,
shadow-color: rgba(0, 0, 0, 0.16), shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #eee, console-background-color: $light,
console-color: $white, console-color: $lightest,
console-header-background-color: #d6d6d6, console-header-background-color: $medium-light,
console-header-color: #b1b1b1, console-header-color: $darker,
console-info-background-color: $lightsteelblue, console-info-background-color: #5276B7,
console-warn-background-color: $orange, console-warn-background-color: #996B00,
console-debug-background-color: $dodgerblue, console-debug-background-color: #0071AD,
console-error-background-color: $red, console-error-background-color: #D11518,
ide-border-color: #f4f4f4, ide-border-color: $medium-light,
editor-gutter-color: #f4f4f4, editor-gutter-color: $lighter,
file-selected-color: #f4f4f4, file-hover-color: $light,
input-text-color: #333, file-selected-color: $medium-light,
input-border-color: #b5b5b5, input-text-color: $dark,
about-list-text-color: #4a4a4a, input-background-color: $lightest,
search-background-color: #ffffff, input-secondary-background-color: $lightest,
search-clear-background-color: #e9e9e9, input-border-color: $middle-light,
search-hover-text-color: #ffffff, search-background-color: $lightest,
search-hover-background-color: #4d4d4d, search-clear-background-color: $light,
dropdown-color: #414141, search-hover-text-color: $lightest,
keyboard-shortcut-color: #757575, search-hover-background-color: $medium-dark,
keyboard-shortcut-color: $middle-gray,
nav-hover-color: $p5js-pink, nav-hover-color: $p5js-pink,
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),
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: #979797, 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: #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: $middleGray, form-secondary-title-color: $medium-dark,
form-input-text-color: $dark, form-input-text-color: $dark,
form-input-placeholder-text-color: $middleLight, form-input-placeholder-text-color: $middle-light,
form-border-color: #b5b5b5, form-navigation-options-color: $middle-dark
form-button-background-color: $white,
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
), ),
dark: ( dark: (
logo-color: $p5js-pink, logo-color: $p5js-pink,
primary-text-color: $white, logo-background-color: $lightest,
heavy-text-color: $lightest,
primary-text-color: $lightest,
dropzone-text-color: $black, dropzone-text-color: $black,
modal-button-color: $white, modal-button-color: $lightest,
heading-text-color: $white, secondary-text-color: $medium-light,
secondary-text-color: #DADADA, inactive-text-color: $middle-light,
inactive-text-color: #b5b5b5, background-color: $darker,
background-color: #333, button-background-color: $dark,
preview-placeholder-color: #dcdcdc, button-secondary-background-color: $medium-dark,
button-background-color: $white, button-color: $light,
button-color: $black, button-border-color: $middle-dark,
button-border-color: #979797, toolbar-button-color: $lightest,
toolbar-button-color: $p5js-pink, toolbar-button-background-color: $medium-dark,
toolbar-button-background-color: #424242,
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: #a0a0a0, button-nav-inactive-color: $middle-light,
button-hover-color: $white, button-hover-color: $lightest,
button-active-color: $white, button-active-color: $lightest,
modal-background-color: #444, modal-background-color: $dark,
modal-button-background-color: #5f5f5f, preferences-button-background-color: $middle-dark,
modal-border-color: #949494, modal-border-color: $middle-dark,
icon-color: #a9a9a9, icon-color: $middle-light,
icon-hover-color: $white, icon-hover-color: $lightest,
icon-toast-hover-color: $white, icon-toast-hover-color: $lightest,
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: $lightest,
console-header-background-color: #3f3f3f, console-header-background-color: $medium-dark,
console-header-color: #b5b5b5, console-header-color: $lightest,
console-info-background-color: $lightsteelblue, console-info-background-color: #5276B7,
console-warn-background-color: $orange, console-warn-background-color: #966C08,
console-debug-background-color: $dodgerblue, console-error-background-color: #DD3134,
console-error-background-color: $red, console-debug-background-color: #097BB3,
ide-border-color: #949494, ide-border-color: $middle-dark,
editor-gutter-color: #363636, editor-gutter-color: $darker,
file-selected-color: #404040, file-hover-color: $dark,
input-text-color: #333, file-selected-color: $medium-dark,
input-border-color: #b5b5b5, input-text-color: $lightest,
about-list-text-color: #f4f4f4, input-background-color: $dark,
search-background-color: #ffffff, input-secondary-background-color: $medium-dark,
search-clear-background-color: #4f4f4f, input-border-color: $middle-dark,
search-hover-text-color: #ffffff, search-background-color: $lightest,
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,
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: #979797, 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: #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-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,
primary-text-color: $yellow, logo-background-color: $darker,
heavy-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: #333, button-background-color: $dark,
button-background-color: $white, button-secondary-background-color: $medium-dark,
button-color: $black, button-color: $light,
button-border-color: #979797, button-border-color: $middle-dark,
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,
modal-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-selected-color: #404040, file-hover-color: $dark,
input-text-color: #333, file-selected-color: $medium-dark,
input-border-color: #b5b5b5, input-text-color: $lightest,
about-list-text-color: #f4f4f4, input-background-color: $dark,
input-secondary-background-color: $medium-dark,
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,
dropdown-color: #e1e1e1, keyboard-shortcut-color: $middle-light,
keyboard-shortcut-color: #e1e1e1,
nav-hover-color: $yellow, nav-hover-color: $yellow,
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-border-color: #b5b5b5, form-navigation-options-color: $middle-light
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
) )
); );
$console-warn-color: #ffbe05; $toast-background-color: $medium-dark;
$console-error-color: #ff5f52; $toast-text-color: $lightest;
$toast-background-color: #4A4A4A; $light-console-error-color: #D11518;
$toast-text-color: $white; $light-console-warn-color: #FAAF00;
$light-console-debug-color: #0071AD;
$dark-console-error-color: #DF3A3D;
$dark-console-warn-color: #F5BC38;
$dark-console-debug-color: #0C99E2;
$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/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');
} }
} }
@ -87,3 +88,11 @@ thead {
th { th {
text-align: left; text-align: left;
} }
a:focus,
button:focus,
input:focus,
textarea:focus {
outline: none;
box-shadow: 0 0 0 1px $outline-color;
}

8
client/styles/components/_about.scss
View file

@ -45,11 +45,6 @@
padding-bottom: #{20 / $base-font-size}rem; padding-bottom: #{20 / $base-font-size}rem;
padding-left: #{20 / $base-font-size}rem; padding-left: #{20 / $base-font-size}rem;
width: #{720 / $base-font-size}rem; width: #{720 / $base-font-size}rem;
& a {
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
}
}
} }
.about__content-column { .about__content-column {
@ -76,9 +71,6 @@
@include themify() { @include themify() {
padding-top: #{10 / $base-font-size}rem; padding-top: #{10 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem;
& a {
color: getThemifyVariable(about-list-text-color);
}
} }
} }

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 {

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;

12
client/styles/components/_collection.scss
View file

@ -39,12 +39,8 @@
// padding: #{8 / $base-font-size}rem 0; // padding: #{8 / $base-font-size}rem 0;
} }
.collection-metadata__name .editable-input__label span { .collection-metadata__name .editable-input__label {
padding: 0.83333rem 0; padding: 0.83333rem #{7 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('primary-text-color');
}
} }
.collection-metadata__name, .collection-metadata__name,
@ -63,9 +59,9 @@
} }
.collection-metadata__description { .collection-metadata__description {
margin-top: #{8 / $base-font-size}rem; padding-top: #{8 / $base-font-size}rem;
text-align: left; text-align: left;
font-size: 14px; font-size: #{14 / $base-font-size}rem;
} }
.collection-metadata__description .editable-input__label { .collection-metadata__description .editable-input__label {

81
client/styles/components/_console-feed.scss
View file

@ -11,37 +11,82 @@ $CONSOLE_FEED_LIGHT_STYLES: (
LOG_ERROR_COLOR: '#D11518', LOG_ERROR_COLOR: '#D11518',
LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)', LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)',
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)', LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)',
LOG_WARN_COLOR: '#FAAF00', LOG_WARN_COLOR: '#996B00',
LOG_WARN_BORDER: 'hsl(50, 100%, 88%)', LOG_WARN_BORDER: 'hsl(50, 100%, 88%)',
LOG_INFO_COLOR: '#7D7D7D', LOG_INFO_COLOR: '#4D4D4D',
LOG_DEBUG_COLOR: '#007BBB', LOG_DEBUG_COLOR: '#0071AD',
LOG_COLOR: 'rgb(128, 128, 128)' LOG_DEBUG_BACKGROUND: '#D6F1FF',
LOG_DEBUG_BORDER: '#C2EBFF',
LOG_COLOR: '#4D4D4D',
ARROW_COLOR: '#666',
OBJECT_NAME_COLOR: '#333',
OBJECT_VALUE_NULL_COLOR: '#747474',
OBJECT_VALUE_UNDEFINED_COLOR: '#747474',
OBJECT_VALUE_STRING_COLOR: '#47820A',
OBJECT_VALUE_REGEXP_COLOR: '#A06801',
OBJECT_VALUE_NUMBER_COLOR: '#333',
OBJECT_VALUE_BOOLEAN_COLOR: '#D52889',
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9',
); );
$CONSOLE_FEED_DARK_STYLES: ( $CONSOLE_FEED_DARK_STYLES: (
BASE_BACKGROUND_COLOR: '', BASE_BACKGROUND_COLOR: '',
BASE_COLOR: 'white', BASE_COLOR: 'white',
OBJECT_NAME_COLOR: 'white', OBJECT_NAME_COLOR: 'white',
OBJECT_VALUE_NULL_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_NULL_COLOR: '#DE4A9B',
OBJECT_VALUE_UNDEFINED_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B',
OBJECT_VALUE_REGEXP_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_REGEXP_COLOR: '#EE9900',
OBJECT_VALUE_STRING_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_STRING_COLOR: '#58a10b',
OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_NUMBER_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_NUMBER_COLOR: 'white',
OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B',
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318',
LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 8%)', LOG_ERROR_BACKGROUND: '#1F0000',
LOG_ERROR_COLOR: '#df3a3d', LOG_ERROR_COLOR: '#DF3A3D',
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
LOG_WARN_COLOR: '#f5bc38', LOG_WARN_COLOR: '#F5BC38',
LOG_INFO_COLOR: '#a3a3a3', LOG_INFO_COLOR: '#D9D9D9',
LOG_DEBUG_COLOR: '#0c99e2', LOG_INFO_BORDER: '#4D4D4D',
LOG_COLOR: '#D9D9D9',
LOG_DEBUG_COLOR: '#0C99E2',
LOG_DEBUG_BACKGROUND: '#05232E',
LOG_DEBUG_BORDER: '#0C546E',
TABLE_BORDER_COLOR: 'grey', TABLE_BORDER_COLOR: 'grey',
TABLE_TH_BACKGROUND_COLOR: 'transparent', TABLE_TH_BACKGROUND_COLOR: 'transparent',
TABLE_TH_HOVER_COLOR: 'grey', TABLE_TH_HOVER_COLOR: 'grey',
TABLE_SORT_ICON_COLOR: 'grey', TABLE_SORT_ICON_COLOR: 'grey',
TABLE_DATA_BACKGROUND_IMAGE: 'grey', TABLE_DATA_BACKGROUND_IMAGE: 'grey',
TABLE_DATA_BACKGROUND_SIZE: 'grey' TABLE_DATA_BACKGROUND_SIZE: 'grey',
ARROW_COLOR: '#D9D9D9'
); );
$CONSOLE_FEED_CONTRAST_STYLES: $CONSOLE_FEED_DARK_STYLES; $CONSOLE_FEED_CONTRAST_STYLES: (
BASE_BACKGROUND_COLOR: '',
BASE_COLOR: 'white',
OBJECT_NAME_COLOR: 'white',
OBJECT_VALUE_NULL_COLOR: '#FFA9D9',
OBJECT_VALUE_UNDEFINED_COLOR: '#FFA9D9',
OBJECT_VALUE_REGEXP_COLOR: '#2DE9B6',
OBJECT_VALUE_STRING_COLOR: '#2DE9B6',
OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
OBJECT_VALUE_NUMBER_COLOR: '#FFA9D9',
OBJECT_VALUE_BOOLEAN_COLOR: '#FFA9D9',
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#F5DC23',
LOG_ERROR_BACKGROUND: '#1F0000',
LOG_ERROR_COLOR: '#EA7B7D',
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
LOG_WARN_COLOR: '#F5BC38',
LOG_INFO_COLOR: '#D9D9D9',
LOG_INFO_BORDER: '#4D4D4D',
LOG_COLOR: '#D9D9D9',
LOG_DEBUG_COLOR: '#38B6F5',
LOG_DEBUG_BACKGROUND: '#05232E',
LOG_DEBUG_BORDER: '#0C546E',
TABLE_BORDER_COLOR: 'grey',
TABLE_TH_BACKGROUND_COLOR: 'transparent',
TABLE_TH_HOVER_COLOR: 'grey',
TABLE_SORT_ICON_COLOR: 'grey',
TABLE_DATA_BACKGROUND_IMAGE: 'grey',
TABLE_DATA_BACKGROUND_SIZE: 'grey',
ARROW_COLOR: '#D9D9D9'
);

16
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,6 +90,10 @@
.preview-console__clear { .preview-console__clear {
@include themify() { @include themify() {
@extend %link; @extend %link;
color: getThemifyVariable('secondary-text-color');
&:hover {
color: getThemifyVariable('heavy-text-color');
}
} }
background: transparent; background: transparent;
border: none; border: none;

31
client/styles/components/_editable-input.scss
View file

@ -4,15 +4,18 @@
align-items: center; align-items: center;
} }
.editable-input__label { button.editable-input__label {
display: flex; display: flex;
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('inactive-text-color');
& path {
fill: getThemifyVariable('inactive-text-color');
}
&:hover { &:hover {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('logo-color');
& .editable-input__icon path { & path {
fill: getThemifyVariable('primary-text-color'); fill: getThemifyVariable('logo-color');
} }
} }
} }
@ -23,23 +26,13 @@
font-weight: unset; font-weight: unset;
} }
.editable-input__input {
width: 100%;
}
.editable-input__icon svg { .editable-input__icon svg {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
@include themify() {
path {
fill: getThemifyVariable('inactive-text-color');
}
}
}
.editable-input:hover {
@include themify() {
.editable-input__icon path {
fill: getThemifyVariable('primary-text-color');
}
}
} }
.editable-input--is-not-editing .editable-input__input, .editable-input--is-not-editing .editable-input__input,
@ -49,5 +42,5 @@
.editable-input--is-editing .editable-input__input, .editable-input--is-editing .editable-input__input,
.editable-input--is-not-editing .editable-input__label { .editable-input--is-not-editing .editable-input__label {
display: block; display: flex;
} }

36
client/styles/components/_editor.scss
View file

@ -52,7 +52,7 @@ pre.CodeMirror-line {
} }
.CodeMirror-gutter-elt:not(.CodeMirror-linenumber) { .CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
opacity: 0.3; opacity: 0.2;
width: #{49 / $base-font-size}rem !important; width: #{49 / $base-font-size}rem !important;
height: 100%; height: 100%;
left: 49px !important; left: 49px !important;
@ -120,12 +120,10 @@ pre.CodeMirror-line {
width: 100%; width: 100%;
margin-bottom: #{12 / $base-font-size}rem; margin-bottom: #{12 / $base-font-size}rem;
@include themify() { @include themify() {
background-color: getThemifyVariable('search-background-color'); color: getThemifyVariable('input-text-color');
background-color: getThemifyVariable('input-secondary-background-color');
border: solid 0.5px getThemifyVariable('button-border-color'); border: solid 0.5px getThemifyVariable('button-border-color');
} }
&:focus {
background-color: $white;
}
} }
.CodeMirror-search-count { .CodeMirror-search-count {
@ -145,22 +143,30 @@ pre.CodeMirror-line {
.CodeMirror-search-modifiers { .CodeMirror-search-modifiers {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
} }
.CodeMirror-regexp-button, .CodeMirror-regexp-button,
.CodeMirror-case-button, .CodeMirror-case-button,
.CodeMirror-word-button { .CodeMirror-word-button {
width: 20px; @include themify() {
height: 20px; // @extend %button;
padding: #{2 / $base-font-size}rem #{7 / $base-font-size}rem;
border: 2px solid transparent;
&:hover {
border-color: getThemifyVariable("button-border-color");
}
margin-left: #{10 / $base-font-size}rem; }
width: #{35 / $base-font-size}rem;
height: #{35 / $base-font-size}rem;
& + & {
margin-left: #{10 / $base-font-size}rem;
}
word-break: keep-all; word-break: keep-all;
white-space: nowrap; white-space: nowrap;
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
} }
.CodeMirror-regexp-button .label, .CodeMirror-regexp-button .label,
@ -171,7 +177,9 @@ pre.CodeMirror-line {
[aria-checked="true"] { [aria-checked="true"] {
@include themify() { @include themify() {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable("heavy-text-color");
background-color: getThemifyVariable("button-secondary-background-color");
border-color: getThemifyVariable("button-border-color");
} }
} }
@ -374,7 +382,7 @@ pre.CodeMirror-line {
.editor__file-name { .editor__file-name {
@include themify() { @include themify() {
color: getThemifyVariable('secondary-text-color'); color: getThemifyVariable('primary-text-color');
} }
height: #{29 / $base-font-size}rem; height: #{29 / $base-font-size}rem;
padding-top: #{7 / $base-font-size}rem; padding-top: #{7 / $base-font-size}rem;

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');
} }
} }

7
client/styles/components/_modal.scss
View file

@ -45,6 +45,13 @@
flex: 1; flex: 1;
} }
input.new-file-form__submit,
input.new-folder-form__submit {
@include themify() {
background-color: getThemifyVariable("button-secondary-background-color");
}
}
.modal__divider { .modal__divider {
text-align: center; text-align: center;
margin: #{20 / $base-font-size}rem 0; margin: #{20 / $base-font-size}rem 0;

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

@ -5,7 +5,7 @@
justify-content: space-between; justify-content: space-between;
@include themify() { @include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color'); border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
} }
& button { & button {
@ -23,13 +23,14 @@
align-items: center; align-items: center;
} }
.nav__items-left { // .nav__items-left,
& button { // .nav__items-right {
@include themify() { // & button, & a {
color: getThemifyVariable('secondary-text-color'); // @include themify() {
} // color: getThemifyVariable('primary-text-color');
} // }
} // }
// }
.nav__item { .nav__item {
position: relative; position: relative;
@ -43,13 +44,14 @@
} }
} }
.nav__item:first-child,
.nav__item--no-icon { .nav__item--no-icon {
padding-left: #{15 / $base-font-size}rem; padding-left: #{15 / $base-font-size}rem;
} }
.nav__item:last-child { .nav__item-header-triangle polygon {
padding-right: #{15 / $base-font-size}rem; @include themify() {
fill: getThemifyVariable('icon-color');
}
} }
.nav__item:hover { .nav__item:hover {
@ -116,10 +118,20 @@
.nav__item-spacer { .nav__item-spacer {
@include themify() { @include themify() {
color: map-get($theme-map, 'inactive-text-color'); color: map-get($theme-map, 'inactive-text-color');
margin: 0 #{8 / $base-font-size}rem; margin-left: #{8 / $base-font-size}rem;
} }
} }
.nav__item-or {
@include themify() {
color: map-get($theme-map, 'inactive-text-color');
}
}
.nav__auth-button {
padding: #{10 / $base-font-size}rem;
}
// .nav__dropdown button { // .nav__dropdown button {
// padding: 0; // padding: 0;
// } // }
@ -161,13 +173,19 @@
} }
.svg__logo g > path { .svg__logo g > path {
@include themify() { @include themify() {
fill: getThemifyVariable('logo-color'); fill: getThemifyVariable('logo-color');
} }
} }
.svg__logo g g:first-of-type path { .svg__logo g g:first-of-type path {
fill: none; fill: none;
} }
.svg__logo g g:first-of-type use {
@include themify() {
fill: getThemifyVariable('logo-background-color');
}
}
.nav__keyboard-shortcut { .nav__keyboard-shortcut {
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
font-family: Inconsololata, monospace; font-family: Inconsololata, monospace;

8
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;
@ -84,12 +84,12 @@ $p5-contrast-activeline: #999999;
} }
.cm-s-p5-contrast .CodeMirror-activeline-background { .cm-s-p5-contrast .CodeMirror-activeline-background {
background-color: #404040; background-color: $dark;
} }
.cm-s-p5-contrast .CodeMirror-activeline-gutter { .cm-s-p5-contrast .CodeMirror-activeline-gutter {
background-color: #454545; background-color: $dark;
border-right: 1px solid #949494; border-right: 1px solid $middle-dark;
} }
.cm-s-p5-contrast .cm-error { .cm-s-p5-contrast .cm-error {

12
client/styles/components/_p5-dark-codemirror-theme.scss
View file

@ -12,9 +12,9 @@
$p5-dark-lightbrown: #A67F59; $p5-dark-lightbrown: #A67F59;
$p5-light-green: #42F48F; $p5-light-green: #42F48F;
$p5-dark-black: #333; $p5-dark-black: #1C1C1C;
$p5-dark-pink: #D9328F; $p5-dark-pink: #DE4A9B;
$p5-dark-gray: #999999; $p5-dark-gray: #9B9B9B;
$p5-dark-lightblue: #0F9DD7; $p5-dark-lightblue: #0F9DD7;
$p5-dark-darkblue: #318094; $p5-dark-darkblue: #318094;
$p5-dark-white: #FDFDFD; $p5-dark-white: #FDFDFD;
@ -89,12 +89,12 @@ $p5-dark-error: #df3a3d;
} }
.cm-s-p5-dark .CodeMirror-activeline-background { .cm-s-p5-dark .CodeMirror-activeline-background {
background-color: #404040; background-color: $dark;
} }
.cm-s-p5-dark .CodeMirror-activeline-gutter { .cm-s-p5-dark .CodeMirror-activeline-gutter {
background-color: #454545; background-color: $dark;
border-right: 1px solid #949494; border-right: 1px solid $middle-dark;
} }
.cm-s-p5-dark span.CodeMirror-matchingbracket { .cm-s-p5-dark span.CodeMirror-matchingbracket {

71
client/styles/components/_p5-light-codemirror-theme.scss
View file

@ -10,18 +10,16 @@
//light gray: #f4f4f4 //light gray: #f4f4f4
//dark gray: #b5b5b5 //dark gray: #b5b5b5
$p5-light-lightbrown: #A67F59; $p5-light-brown: #7A5A3A;
$p5-light-brown: #704F21;
$p5-light-black: #333333; $p5-light-black: #333333;
$p5-light-pink: #D9328F; $p5-light-pink: #D52889;
$p5-light-gray: #A0A0A0; $p5-light-gray: #666;
$p5-light-lightblue: #00A1D3; $p5-light-blue: #0B7CA9;
$p5-light-darkblue: #2D7BB6; $p5-light-white: $lighter;
$p5-light-white: #FDFDFD; $p5-light-orange: #A06801;
$p5-light-orange: #EE9900; $p5-light-lightgray: $middle-gray;
$p5-light-lightgray: #E0D7D1; $p5-light-green: #47820A;
$p5-light-darkgray: #666666;
$p5-light-green: #58a10b;
$p5-light-gutter: #f4f4f4; $p5-light-gutter: #f4f4f4;
$p5-light-number: #b5b5b5; $p5-light-number: #b5b5b5;
@ -33,23 +31,23 @@ $p5-light-activeline: rgb(207, 207, 207);
color: $p5-light-black; color: $p5-light-black;
} }
.cm-s-p5-light .cm-comment { .cm-s-p5-light span .cm-comment {
color: $p5-light-gray; color: $p5-light-lightgray;
} }
.cm-s-p5-light .cm-def { .cm-s-p5-light span .cm-def {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light .cm-string { .cm-s-p5-light span .cm-string {
color: $p5-light-green; color: $p5-light-green;
} }
.cm-s-p5-light .cm-string-2 { .cm-s-p5-light span .cm-string-2 {
color: $p5-light-orange; color: $p5-light-orange;
} }
.cm-s-p5-light .cm-number { .cm-s-p5-light span .cm-number {
color: $p5-light-black; color: $p5-light-black;
} }
@ -57,70 +55,71 @@ $p5-light-activeline: rgb(207, 207, 207);
color: $p5-light-brown; color: $p5-light-brown;
} }
.cm-s-p5-light .cm-variable { .cm-s-p5-light span .cm-variable {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light .cm-variable2 { .cm-s-p5-light span .cm-variable2 {
color: $p5-light-black; color: $p5-light-black;
} }
.cm-s-p5-light .cm-property { .cm-s-p5-light span .cm-property {
color: $p5-light-black; color: $p5-light-black;
} }
.cm-s-p5-light .cm-atom { .cm-s-p5-light span .cm-atom {
color: $p5-light-pink; color: $p5-light-pink;
} }
.cm-s-p5-light .cm-operator { .cm-s-p5-light span .cm-operator {
color: $p5-light-lightbrown; color: $p5-light-brown;
} }
.cm-s-p5-light .cm-linenumber { .cm-s-p5-light .cm-linenumber {
color: $p5-light-number; color: $p5-light-number;
} }
.cm-s-p5-light .CodeMirror-selected { .cm-s-p5-light div .CodeMirror-selected {
background-color: $p5-light-selected; background-color: $p5-light-selected;
} }
.cm-s-p5-light .CodeMirror-activeline-background { .cm-s-p5-light .CodeMirror-activeline-background {
background-color: #F3F3F3; background-color: $light;
} }
.cm-s-p5-light .CodeMirror-activeline-gutter { .cm-s-p5-light .CodeMirror-activeline-gutter {
background-color: #ECECEC; background-color: $light;
border-right: 1px solid $medium-light;
} }
.cm-s-p5-light .cm-error { .cm-s-p5-light .cm-error {
color: #f00; color: #f00;
} }
.cm-s-p5-light .CodeMirror-matchingbracket { .cm-s-p5-light span .CodeMirror-matchingbracket {
outline: 1px solid $p5-light-gray; outline: 1px solid $p5-light-gray;
outline-offset: 1px; outline-offset: 1px;
color: $p5-light-black !important; color: $p5-light-black !important;
} }
.cm-s-p5-light .cm-qualifier { .cm-s-p5-light span .cm-qualifier {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light .cm-tag { .cm-s-p5-light span .cm-tag {
color: $p5-light-pink; color: $p5-light-pink;
} }
.cm-s-p5-light .cm-builtin { .cm-s-p5-light span .cm-builtin {
color: $p5-light-lightblue; color: $p5-light-blue;
} }
.cm-s-p5-light .cm-attribute { .cm-s-p5-light span .cm-attribute {
color: $p5-light-black; color: $p5-light-black;
} }
.cm-s-p5-light .cm-p5-function { .cm-s-p5-light .cm-p5-function {
color: $p5-light-darkblue; color: $p5-light-blue;
font-weight: bold; font-weight: bold;
} }

31
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 {
@ -104,8 +82,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%;
@ -120,9 +99,9 @@
.preference__label { .preference__label {
@include themify() { @include themify() {
color: getThemifyVariable("inactive-text-color"); color: getThemifyVariable("secondary-text-color");
&:hover { &:hover {
color: getThemifyVariable("primary-text-color"); color: getThemifyVariable("heavy-text-color");
} }
} }
margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem; margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
@ -242,7 +221,7 @@ input[type="number"]::-webkit-outer-spin-button {
.preference__radio-button:checked + .preference__option { .preference__radio-button:checked + .preference__option {
@include themify() { @include themify() {
//for some reason this won't work for getThemifyVariable //for some reason this won't work for getThemifyVariable
color: map-get($theme-map, "primary-text-color"); color: map-get($theme-map, "heavy-text-color");
} }
} }

9
client/styles/components/_preview-frame.scss
View file

@ -23,15 +23,6 @@
display: none; display: none;
} }
.preview-frame-placeholder {
width: #{400 / $base-font-size}rem;
height: #{400 / $base-font-size}rem;
position: absolute;
@include themify() {
background: getThemifyVariable('preview-placeholder-color');
}
}
.preview-frame__header { .preview-frame__header {
height: #{29 / $base-font-size}rem; height: #{29 / $base-font-size}rem;
} }

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');
} }
} }

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

@ -50,6 +50,12 @@
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
flex: 1 1 auto; flex: 1 1 auto;
@include themify() {
border-top: 1px solid map-get($theme-map, 'ide-border-color');
}
.sidebar--contracted & {
border: none;
}
} }
.sidebar__file-item { .sidebar__file-item {
@ -57,12 +63,10 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@include themify() { @include themify() {
color: map-get($theme-map, 'inactive-text-color'); color: map-get($theme-map, 'primary-text-color');
&:hover > .file-item__content .sidebar__file-item-name { // TODO get this to not affect parent, need to move it into JS
color: map-get($theme-map, 'primary-text-color'); &:hover:not(.sidebar__file-item--selected) > .file-item__content {
} background-color: map-get($theme-map, 'file-hover-color');
&:hover > .file-item__content .sidebar__file-item-icon g {
fill: map-get($theme-map, 'primary-text-color');
} }
} }
} }
@ -120,6 +124,9 @@
content: ''; content: '';
width: 100%; width: 100%;
} }
@include themify() {
color: map-get($theme-map, 'primary-text-color');
}
} }
.sidebar__file-item-show-options { .sidebar__file-item-show-options {
@ -166,35 +173,51 @@
display: none; display: none;
padding: 0; padding: 0;
border: 0; border: 0;
width: calc(100% - #{100 / $base-font-size}rem); width: calc(100% - #{63 / $base-font-size}rem);
.sidebar__file-item--editing & { .sidebar__file-item--editing & {
display: inline-block; display: inline-block;
} }
} }
.sidebar__expand { .sidebar__expand,
.sidebar__contract {
@include icon(); @include icon();
position: absolute; position: absolute;
top: #{7 / $base-font-size}rem; top: #{2 / $base-font-size}rem;
left: #{1 / $base-font-size}rem; left: #{0 / $base-font-size}rem;
height: #{14 / $base-font-size}rem; height: #{25 / $base-font-size}rem;
width: #{49 / $base-font-size}rem;
border-radius: 2px;
& svg { & svg {
height: #{14 / $base-font-size}rem; height: #{25 / $base-font-size}rem;
} }
@include themify() {
background-color: getThemifyVariable("toolbar-button-background-color");
& polygon {
fill: getThemifyVariable("toolbar-button-color");
}
&:hover {
background-color: getThemifyVariable("button-background-hover-color");
& polygon {
fill: getThemifyVariable("button-hover-color");
}
}
}
}
.sidebar__expand {
display: none; display: none;
&:hover {
cursor: e-resize;
}
.sidebar--contracted & { .sidebar--contracted & {
display: inline-block; display: inline-block;
} }
} }
.sidebar__contract { .sidebar__contract {
@include icon(); &:hover {
position: absolute; cursor: w-resize;
top: #{7 / $base-font-size}rem;
left: #{34 / $base-font-size}rem;
height: #{14 / $base-font-size}rem;
& svg {
height: #{14 / $base-font-size}rem;
} }
.sidebar--contracted & { .sidebar--contracted & {
display: none; display: none;
@ -228,7 +251,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('secondary-text-color');
} }
} }
& svg { & svg {

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');
} }
} }
} }

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

@ -89,9 +89,12 @@
} }
.toolbar { .toolbar {
padding: #{20 / $base-font-size}rem #{34 / $base-font-size}rem; padding: #{10 / $base-font-size}rem #{20 / $base-font-size}rem;
display: flex; display: flex;
align-items: center; align-items: center;
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
}
} }
.toolbar__project-name-container { .toolbar__project-name-container {
@ -106,11 +109,11 @@
.toolbar__project-name { .toolbar__project-name {
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('secondary-text-color');
&:hover { &:hover {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('logo-color');
& .toolbar__edit-name-button path { & .toolbar__edit-name-button path {
fill: getThemifyVariable('primary-text-color'); fill: getThemifyVariable('logo-color');
} }
} }
} }
@ -134,45 +137,18 @@
.toolbar__project-owner { .toolbar__project-owner {
margin-left: #{5 / $base-font-size}rem; margin-left: #{5 / $base-font-size}rem;
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('secondary-text-color');
} }
} }
.toolbar__autorefresh-label { .toolbar__autorefresh-label {
@include themify() { @include themify() {
color: getThemifyVariable('inactive-text-color'); color: getThemifyVariable('secondary-text-color');
} }
margin-left: #{5 / $base-font-size}rem; margin-left: #{5 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
} }
.toolbar__serve-secure {
margin-left: #{20 / $base-font-size}rem;
}
.toolbar__serve-secure-label {
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
margin-left: #{5 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
}
.toolbar__serve-secure-help {
display: inline-block;
padding-top: 0;
padding-bottom: 0;
& svg {
width: #{10 / $base-font-size}rem;
height: #{10 / $base-font-size}rem;
}
@include themify() {
& path {
fill: getThemifyVariable('inactive-text-color');
}
}
}
.toolbar__edit-name-button { .toolbar__edit-name-button {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@ -183,7 +159,7 @@
} }
@include themify() { @include themify() {
& path { & path {
fill: getThemifyVariable('inactive-text-color'); fill: getThemifyVariable('secondary-text-color');
} }
} }
} }

7
client/styles/components/_uploader.scss
View file

@ -1,9 +1,14 @@
.dropzone { .dropzone {
@include themify() { @include themify() {
color: getThemifyVariable('dropzone-text-color'); background-color: getThemifyVariable('input-secondary-background-color');
color: getThemifyVariable('input-text-color');
} }
} }
.dropzone .dz-preview.dz-image-preview {
background-color: transparent;
}
.uploader { .uploader {
min-height: #{200 / $base-font-size}rem; min-height: #{200 / $base-font-size}rem;
width: 100%; width: 100%;

2
client/utils/metaKey.js
View file

@ -8,7 +8,7 @@ const metaKey = (() => {
return 'Ctrl'; return 'Ctrl';
})(); })();
const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl'; const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
export { export {
metaKey, metaKey,