Merge branch 'master' into feature/storybook-components

This commit is contained in:
Andrew Nicolaou 2020-05-03 12:12:41 +02:00
commit 70fe492bbf
47 changed files with 740 additions and 448 deletions

View file

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

View file

@ -10,7 +10,7 @@ const PreviewNav = ({ owner, project }) => (
<nav className="nav preview-nav">
<div className="nav__items-left">
<div className="nav__item-logo">
<InlineSVG src={logoUrl} alt="p5.js logo" />
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
</div>
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
<p className="toolbar__project-owner">by</p>

View file

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

View file

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

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>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -50,5 +50,5 @@
<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="#007BBB" />
fill="#0071AD" />
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

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>

After

Width:  |  Height:  |  Size: 1.7 KiB

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>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -50,5 +50,5 @@
<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="#a3a3a3" />
fill="#D9D9D9" />
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -50,5 +50,5 @@
<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="#7D7D7D" />
fill="#4D4D4D" />
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

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

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -3,8 +3,8 @@
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<!-- <desc>Created with Sketch.</desc> -->
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-425.000000, -1168.000000)" fill="#333333">
<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="#AAA">
<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>
</g>

Before

Width:  |  Height:  |  Size: 979 B

After

Width:  |  Height:  |  Size: 968 B

View file

@ -5,7 +5,7 @@
<!-- <desc>Created with Sketch.</desc> -->
<defs></defs>
<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>
</g>
</g>

Before

Width:  |  Height:  |  Size: 826 B

After

Width:  |  Height:  |  Size: 823 B

View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<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)">
<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>

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 695 B

View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<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)">
<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>

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 698 B

View file

@ -3,7 +3,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<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)">
<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>

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 698 B

View file

@ -3,8 +3,8 @@
<!-- Generator: Sketch 39 (31667) - http://www.bohemiancoding.com/sketch -->
<!-- <desc>Created with Sketch.</desc> -->
<defs></defs>
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.539999962">
<g id="p5js-IDE-styles-foundation-pt-2" transform="translate(-394.000000, -1168.000000)" fill="#333333">
<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="#AAA">
<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>
</g>

Before

Width:  |  Height:  |  Size: 873 B

After

Width:  |  Height:  |  Size: 860 B

View file

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

View file

@ -170,6 +170,14 @@ class IDEView extends React.Component {
} else {
this.props.expandConsole();
}
} else if (e.keyCode === 27) {
if (this.props.ide.newFolderModalVisible) {
this.props.closeNewFolderModal();
} else if (this.props.ide.uploadFileModalVisible) {
this.props.closeUploadFileModal();
} else if (this.props.ide.modalIsVisible) {
this.props.closeNewFileModal();
}
}
}
@ -562,6 +570,7 @@ IDEView.propTypes = {
closeProjectOptions: PropTypes.func.isRequired,
newFolder: PropTypes.func.isRequired,
closeNewFolderModal: PropTypes.func.isRequired,
closeNewFileModal: PropTypes.func.isRequired,
createFolder: PropTypes.func.isRequired,
closeShareModal: PropTypes.func.isRequired,
showEditorOptions: PropTypes.func.isRequired,

View file

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

View file

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

View file

@ -2,6 +2,8 @@ $base-font-size: 12;
//colors
$p5js-pink: #ed225d;
$processing-blue: #007BBB;
$p5js-active-pink: #f10046;
$white: #fff;
$black: #000;
$yellow: #F5DC23;
@ -9,259 +11,263 @@ $orange: #ffa500;
$red: #ff0000;
$lightsteelblue: #B0C4DE;
$dodgerblue: #1E90FF;
$icon-color: #8b8b8b;
$icon-hover-color: #333;
// $icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9;
// Grays
$dark: #333;
$middleGray: #7d7d7d;
$middleLight: #a6a6a6;
$border-color: #B5B5B5;
$outline-color: #0F9DD7;
// Abstracts
$primary-text-color: $dark;
// Grayscale values
$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: (
light: (
logo-color: $p5js-pink,
primary-text-color: $primary-text-color,
dropzone-text-color: #333,
modal-button-color: #333,
heading-text-color: #333,
secondary-text-color: #a8a8a8,
inactive-text-color: #b5b5b5,
background-color: #fbfbfb,
preview-placeholder-color: #dcdcdc,
button-background-color: #f4f4f4,
logo-background-color: $lightest,
heavy-text-color: $darker,
primary-text-color: $dark,
secondary-text-color: $medium-dark,
inactive-text-color: $middle-dark,
dropzone-text-color: $dark,
modal-button-color: $dark,
background-color: $lighter,
button-background-color: $light,
button-secondary-background-color: $medium-light,
button-color: $black,
button-border-color: #979797,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #f4f4f4,
button-border-color: $middle-light,
toolbar-button-color: $dark,
toolbar-button-background-color: $medium-light,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-nav-inactive-color: #a0a0a0,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #f4f4f4,
modal-button-background-color: #e6e6e6,
modal-border-color: rgba(17, 17, 17, 0.3),
modal-border-selected-color: #B9D0E1,
icon-color: $icon-color,
icon-hover-color: $icon-hover-color,
icon-toast-hover-color: $white,
button-background-active-color: $p5js-active-pink,
button-nav-inactive-color: $middle-gray,
button-hover-color: $lightest,
button-active-color: $lightest,
modal-background-color: $light,
preferences-button-background-color: $medium-light,
modal-border-color: $middle-light,
icon-color: $middle-gray,
icon-hover-color: $darker,
icon-toast-hover-color: $lightest,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #eee,
console-color: $white,
console-header-background-color: #d6d6d6,
console-header-color: #b1b1b1,
console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue,
console-error-background-color: $red,
ide-border-color: #f4f4f4,
editor-gutter-color: #f4f4f4,
file-selected-color: #f4f4f4,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #4a4a4a,
search-background-color: #ffffff,
search-clear-background-color: #e9e9e9,
search-hover-text-color: #ffffff,
search-hover-background-color: #4d4d4d,
dropdown-color: #414141,
keyboard-shortcut-color: #757575,
console-background-color: $light,
console-color: $lightest,
console-header-background-color: $medium-light,
console-header-color: $darker,
console-info-background-color: #5276B7,
console-warn-background-color: #996B00,
console-debug-background-color: #0071AD,
console-error-background-color: #D11518,
ide-border-color: $medium-light,
editor-gutter-color: $lighter,
file-hover-color: $light,
file-selected-color: $medium-light,
input-text-color: $dark,
input-background-color: $lightest,
input-secondary-background-color: $lightest,
input-border-color: $middle-light,
search-background-color: $lightest,
search-clear-background-color: $light,
search-hover-text-color: $lightest,
search-hover-background-color: $medium-dark,
keyboard-shortcut-color: $middle-gray,
nav-hover-color: $p5js-pink,
nav-border-color: $middle-light,
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-closed: url(../images/triangle-arrow-right.svg),
primary-button-color: #fff,
primary-button-color: $lightest,
primary-button-background-color: $p5js-pink,
table-button-color: $white,
table-button-background-color: #979797,
table-button-active-color: $white,
table-button-color: $lightest,
table-button-background-color: $middle-gray,
table-button-active-color: $lightest,
table-button-background-active-color: #00A1D3,
table-button-hover-color: $white,
table-button-hover-color: $lightest,
table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: #979797,
progress-bar-active-color: #f10046,
progress-bar-background-color: $middle-gray,
progress-bar-active-color: $p5js-active-pink,
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-placeholder-text-color: $middleLight,
form-border-color: #b5b5b5,
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
form-input-placeholder-text-color: $middle-light,
form-navigation-options-color: $middle-dark
),
dark: (
logo-color: $p5js-pink,
primary-text-color: $white,
logo-background-color: $lightest,
heavy-text-color: $lightest,
primary-text-color: $lightest,
dropzone-text-color: $black,
modal-button-color: $white,
heading-text-color: $white,
secondary-text-color: #DADADA,
inactive-text-color: #b5b5b5,
background-color: #333,
preview-placeholder-color: #dcdcdc,
button-background-color: $white,
button-color: $black,
button-border-color: #979797,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #424242,
modal-button-color: $lightest,
secondary-text-color: $medium-light,
inactive-text-color: $middle-light,
background-color: $darker,
button-background-color: $dark,
button-secondary-background-color: $medium-dark,
button-color: $light,
button-border-color: $middle-dark,
toolbar-button-color: $lightest,
toolbar-button-background-color: $medium-dark,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-nav-inactive-color: #a0a0a0,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #444,
modal-button-background-color: #5f5f5f,
modal-border-color: #949494,
icon-color: #a9a9a9,
icon-hover-color: $white,
icon-toast-hover-color: $white,
button-background-active-color: $p5js-active-pink,
button-nav-inactive-color: $middle-light,
button-hover-color: $lightest,
button-active-color: $lightest,
modal-background-color: $dark,
preferences-button-background-color: $middle-dark,
modal-border-color: $middle-dark,
icon-color: $middle-light,
icon-hover-color: $lightest,
icon-toast-hover-color: $lightest,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f,
console-color: $black,
console-header-background-color: #3f3f3f,
console-header-color: #b5b5b5,
console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue,
console-error-background-color: $red,
ide-border-color: #949494,
editor-gutter-color: #363636,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4,
search-background-color: #ffffff,
search-clear-background-color: #4f4f4f,
search-hover-text-color: #ffffff,
console-background-color: $dark,
console-color: $lightest,
console-header-background-color: $medium-dark,
console-header-color: $lightest,
console-info-background-color: #5276B7,
console-warn-background-color: #966C08,
console-error-background-color: #DD3134,
console-debug-background-color: #097BB3,
ide-border-color: $middle-dark,
editor-gutter-color: $darker,
file-hover-color: $dark,
file-selected-color: $medium-dark,
input-text-color: $lightest,
input-background-color: $dark,
input-secondary-background-color: $medium-dark,
input-border-color: $middle-dark,
search-background-color: $lightest,
search-clear-background-color: $medium-dark,
search-hover-text-color: $lightest,
search-hover-background-color: $p5js-pink,
dropdown-color: #dadada,
keyboard-shortcut-color: #B5B5B5,
keyboard-shortcut-color: $middle-light,
nav-hover-color: $p5js-pink,
nav-border-color: $middle-dark,
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-closed: url(../images/triangle-arrow-right-white.svg),
primary-button-color: #fff,
primary-button-color: $lightest,
primary-button-background-color: $p5js-pink,
table-button-color: $white,
table-button-background-color: #979797,
table-button-active-color: $white,
table-button-color: $lightest,
table-button-background-color: $middle-gray,
table-button-active-color: $lightest,
table-button-background-active-color: #00A1D3,
table-button-hover-color: $white,
table-button-hover-color: $lightest,
table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: #979797,
progress-bar-active-color: #f10046,
progress-bar-background-color: $middle-gray,
progress-bar-active-color: $p5js-active-pink,
form-title-color: $white,
form-secondary-title-color: #b5b5b5,
form-border-color: #b5b5b5,
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
form-title-color: $lightest,
form-secondary-title-color: $medium-light,
form-navigation-options-color: $middle-light
),
contrast: (
logo-color: $yellow,
primary-text-color: $yellow,
logo-background-color: $darker,
heavy-text-color: $yellow,
primary-text-color: $lightest,
dropzone-text-color: $black,
modal-button-color: #333,
heading-text-color: #e1e1e1,
secondary-text-color: #e1e1e1,
inactive-text-color: #f2f2f2,
background-color: #333,
button-background-color: $white,
button-color: $black,
button-border-color: #979797,
toolbar-button-color: #333333,
toolbar-button-background-color: #C1C1C1,
modal-button-color: $dark,
secondary-text-color: $lighter,
inactive-text-color: $light,
background-color: $darker,
button-background-color: $dark,
button-secondary-background-color: $medium-dark,
button-color: $light,
button-border-color: $middle-dark,
toolbar-button-color: $dark,
toolbar-button-background-color: $medium-light,
button-background-hover-color: $yellow,
button-background-active-color: $yellow,
button-nav-inactive-color: #a0a0a0,
button-hover-color: #333333,
button-active-color: #333333,
modal-background-color: #444,
modal-button-background-color: #C1C1C1,
modal-border-color: #949494,
icon-color: #d9d9d9,
button-nav-inactive-color: $light,
button-hover-color: $dark,
button-active-color: $dark,
modal-background-color: $dark,
preferences-button-background-color: $medium-light,
modal-border-color: $middle-dark,
icon-color: $medium-light,
icon-hover-color: $yellow,
icon-toast-hover-color: $yellow,
shadow-color: rgba(0, 0, 0, 0.16),
console-background-color: #4f4f4f,
console-background-color: $dark,
console-color: $black,
console-header-background-color: #3f3f3f,
console-header-color: #d9d9d9,
console-header-background-color: $medium-dark,
console-header-color: $lightest,
console-info-background-color: $lightsteelblue,
console-warn-background-color: $orange,
console-debug-background-color: $dodgerblue,
console-error-background-color: $red,
ide-border-color: #949494,
editor-gutter-color: #454545,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #b5b5b5,
about-list-text-color: #f4f4f4,
ide-border-color: $middle-dark,
editor-gutter-color: $darker,
file-hover-color: $dark,
file-selected-color: $medium-dark,
input-text-color: $lightest,
input-background-color: $dark,
input-secondary-background-color: $medium-dark,
input-border-color: $middle-dark,
search-background-color: $white,
search-clear-background-color: #444,
search-hover-text-color: $black,
search-clear-background-color: $medium-dark,
search-hover-text-color: $dark,
search-hover-background-color: $yellow,
dropdown-color: #e1e1e1,
keyboard-shortcut-color: #e1e1e1,
keyboard-shortcut-color: $middle-light,
nav-hover-color: $yellow,
nav-border-color: $middle-dark,
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-closed: url(../images/triangle-arrow-right-white.svg),
primary-button-color: #fff,
primary-button-color: $lightest,
primary-button-background-color: $p5js-pink,
table-button-color: #333,
table-button-background-color: #C1C1C1,
table-button-active-color: #333,
table-button-color: $dark,
table-button-background-color: $middle-gray,
table-button-active-color: $dark,
table-button-background-active-color: #00FFFF,
table-button-hover-color: #333,
table-button-hover-color: $dark,
table-button-background-hover-color: $yellow,
progress-bar-background-color: #979797,
progress-bar-active-color: #f10046,
progress-bar-background-color: $middle-gray,
progress-bar-active-color: $p5js-active-pink,
form-title-color: $white,
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-title-color: $lightest,
form-secondary-title-color: $medium-light,
form-navigation-options-color: $middle-light
)
);
$console-warn-color: #ffbe05;
$console-error-color: #ff5f52;
$toast-background-color: $medium-dark;
$toast-text-color: $lightest;
$toast-background-color: #4A4A4A;
$toast-text-color: $white;
$light-console-error-color: #D11518;
$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-button-border-color: rgba(151, 151, 151, 0.7);

View file

@ -39,6 +39,7 @@ textarea {
padding: #{10 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('input-text-color');
background-color: getThemifyVariable('input-background-color');
border-color: getThemifyVariable('input-border-color');
}
}
@ -87,3 +88,11 @@ thead {
th {
text-align: left;
}
a:focus,
button:focus,
input:focus,
textarea:focus {
outline: none;
box-shadow: 0 0 0 1px $outline-color;
}

View file

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

View file

@ -1,8 +1,5 @@
.api-key-form__summary {
padding-top: #{25 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
}
.api-key-form__section {
@ -13,9 +10,6 @@
padding: #{15 / $base-font-size}rem 0;
font-size: #{21 / $base-font-size}rem;
font-weight: bold;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
}
.api-key-list {
display: block;
@ -84,9 +78,6 @@
margin-bottom: #{10 / $base-font-size}rem;
font-size: #{18 / $base-font-size}rem;
font-weight: bold;
@include themify() {
color: getThemifyVariable('heading-text-color');
}
}
.api-key-form__new-token__info {

View file

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

View file

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

View file

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

View file

@ -11,37 +11,82 @@ $CONSOLE_FEED_LIGHT_STYLES: (
LOG_ERROR_COLOR: '#D11518',
LOG_ERROR_BORDER: 'hsl(0, 100%, 92%)',
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 95%)',
LOG_WARN_COLOR: '#FAAF00',
LOG_WARN_COLOR: '#996B00',
LOG_WARN_BORDER: 'hsl(50, 100%, 88%)',
LOG_INFO_COLOR: '#7D7D7D',
LOG_DEBUG_COLOR: '#007BBB',
LOG_COLOR: 'rgb(128, 128, 128)'
LOG_INFO_COLOR: '#4D4D4D',
LOG_DEBUG_COLOR: '#0071AD',
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: (
BASE_BACKGROUND_COLOR: '',
BASE_COLOR: 'white',
OBJECT_NAME_COLOR: 'white',
OBJECT_VALUE_NULL_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_UNDEFINED_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_REGEXP_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_STRING_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_NULL_COLOR: '#DE4A9B',
OBJECT_VALUE_UNDEFINED_COLOR: '#DE4A9B',
OBJECT_VALUE_REGEXP_COLOR: '#EE9900',
OBJECT_VALUE_STRING_COLOR: '#58a10b',
OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_NUMBER_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(230, 100%, 80%)',
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'hsl(230, 100%, 80%)',
LOG_ERROR_BACKGROUND: 'hsl(0, 100%, 8%)',
LOG_ERROR_COLOR: '#df3a3d',
OBJECT_VALUE_NUMBER_COLOR: 'white',
OBJECT_VALUE_BOOLEAN_COLOR: '#DE4A9B',
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#b58318',
LOG_ERROR_BACKGROUND: '#1F0000',
LOG_ERROR_COLOR: '#DF3A3D',
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
LOG_WARN_COLOR: '#f5bc38',
LOG_INFO_COLOR: '#a3a3a3',
LOG_DEBUG_COLOR: '#0c99e2',
LOG_WARN_COLOR: '#F5BC38',
LOG_INFO_COLOR: '#D9D9D9',
LOG_INFO_BORDER: '#4D4D4D',
LOG_COLOR: '#D9D9D9',
LOG_DEBUG_COLOR: '#0C99E2',
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'
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'
);

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -10,7 +10,7 @@
//light gray: #f4f4f4
//dark gray: #b5b5b5
$p5-contrast-black: #333;
$p5-contrast-black: #1C1C1C;
$p5-contrast-gray: #A0A0A0;
$p5-contrast-white: #FDFDFD;
$p5-contrast-darkgray: #333333;
@ -84,12 +84,12 @@ $p5-contrast-activeline: #999999;
}
.cm-s-p5-contrast .CodeMirror-activeline-background {
background-color: #404040;
background-color: $dark;
}
.cm-s-p5-contrast .CodeMirror-activeline-gutter {
background-color: #454545;
border-right: 1px solid #949494;
background-color: $dark;
border-right: 1px solid $middle-dark;
}
.cm-s-p5-contrast .cm-error {

View file

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

View file

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

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 {
width: #{90 / $base-font-size}rem;
height: #{25 / $base-font-size}rem;
@ -86,9 +67,6 @@
font-size: #{16 / $base-font-size}rem;
margin-top: #{13 / $base-font-size}rem;
margin-bottom: #{7 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable("heading-text-color");
}
}
.preference__subtitle {
@ -104,8 +82,9 @@
@include themify() {
border: #{1 / $base-font-size}rem solid
getThemifyVariable("button-border-color");
background-color: getThemifyVariable("button-background-color");
// background-color: getThemifyVariable("button-background-color");
color: getThemifyVariable("input-text-color");
background-color: getThemifyVariable('input-background-color');
}
text-align: center;
border-radius: 0%;
@ -120,9 +99,9 @@
.preference__label {
@include themify() {
color: getThemifyVariable("inactive-text-color");
color: getThemifyVariable("secondary-text-color");
&:hover {
color: getThemifyVariable("primary-text-color");
color: getThemifyVariable("heavy-text-color");
}
}
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 {
@include themify() {
//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");
}
}

View file

@ -23,15 +23,6 @@
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 {
height: #{29 / $base-font-size}rem;
}

View file

@ -11,7 +11,7 @@
padding-right: #{38 / $base-font-size}rem;
@include themify() {
border-color: getThemifyVariable('input-border-color');
background-color: getThemifyVariable('search-background-color');
background-color: getThemifyVariable('input-background-color');
}
}

View file

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

View file

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

View file

@ -89,9 +89,12 @@
}
.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;
align-items: center;
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
}
}
.toolbar__project-name-container {
@ -106,11 +109,11 @@
.toolbar__project-name {
@include themify() {
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('secondary-text-color');
&:hover {
color: getThemifyVariable('primary-text-color');
color: getThemifyVariable('logo-color');
& .toolbar__edit-name-button path {
fill: getThemifyVariable('primary-text-color');
fill: getThemifyVariable('logo-color');
}
}
}
@ -134,45 +137,18 @@
.toolbar__project-owner {
margin-left: #{5 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('secondary-text-color');
}
}
.toolbar__autorefresh-label {
@include themify() {
color: getThemifyVariable('inactive-text-color');
color: getThemifyVariable('secondary-text-color');
}
margin-left: #{5 / $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 {
display: inline-block;
vertical-align: top;
@ -183,7 +159,7 @@
}
@include themify() {
& path {
fill: getThemifyVariable('inactive-text-color');
fill: getThemifyVariable('secondary-text-color');
}
}
}

View file

@ -1,9 +1,14 @@
.dropzone {
@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 {
min-height: #{200 / $base-font-size}rem;
width: 100%;

View file

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