-
+
{project.name}
by
diff --git a/client/components/__test__/FileNode.test.jsx b/client/components/__test__/FileNode.test.jsx
index b70ebf14..60eededb 100644
--- a/client/components/__test__/FileNode.test.jsx
+++ b/client/components/__test__/FileNode.test.jsx
@@ -24,7 +24,8 @@ describe('
', () => {
showFolderChildren: jest.fn(),
hideFolderChildren: jest.fn(),
canEdit: true,
- authenticated: false
+ authenticated: false,
+ openUploadFileModal: jest.fn()
};
component = shallow(
);
});
diff --git a/client/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
index 1445d628..a4f321eb 100644
--- a/client/components/__test__/__snapshots__/Nav.test.jsx.snap
+++ b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
@@ -144,7 +144,7 @@ exports[`Nav renders correctly 1`] = `
- Ctrl
+ ⌃
+F
@@ -161,7 +161,7 @@ exports[`Nav renders correctly 1`] = `
- Ctrl
+ ⌃
+G
@@ -180,7 +180,7 @@ exports[`Nav renders correctly 1`] = `
>
⇧
+
- Ctrl
+ ⌃
+G
@@ -242,7 +242,7 @@ exports[`Nav renders correctly 1`] = `
- Ctrl
+ ⌃
+Enter
@@ -261,7 +261,7 @@ exports[`Nav renders correctly 1`] = `
>
⇧
+
- Ctrl
+ ⌃
+Enter
diff --git a/client/images/console-debug-contrast.svg b/client/images/console-debug-contrast.svg
new file mode 100644
index 00000000..76906983
--- /dev/null
+++ b/client/images/console-debug-contrast.svg
@@ -0,0 +1,54 @@
+
+
diff --git a/client/images/console-debug-light.svg b/client/images/console-debug-light.svg
index 8bdc7ae3..0e039342 100644
--- a/client/images/console-debug-light.svg
+++ b/client/images/console-debug-light.svg
@@ -50,5 +50,5 @@
+ fill="#0071AD" />
diff --git a/client/images/console-error-contrast.svg b/client/images/console-error-contrast.svg
new file mode 100644
index 00000000..b455509b
--- /dev/null
+++ b/client/images/console-error-contrast.svg
@@ -0,0 +1,54 @@
+
+
diff --git a/client/images/console-info-contrast.svg b/client/images/console-info-contrast.svg
new file mode 100644
index 00000000..7c37d673
--- /dev/null
+++ b/client/images/console-info-contrast.svg
@@ -0,0 +1,54 @@
+
+
diff --git a/client/images/console-info-dark.svg b/client/images/console-info-dark.svg
index c116d093..869795c5 100644
--- a/client/images/console-info-dark.svg
+++ b/client/images/console-info-dark.svg
@@ -50,5 +50,5 @@
+ fill="#D9D9D9" />
diff --git a/client/images/console-info-light.svg b/client/images/console-info-light.svg
index 24b74263..eaf8be4d 100644
--- a/client/images/console-info-light.svg
+++ b/client/images/console-info-light.svg
@@ -50,5 +50,5 @@
+ fill="#4D4D4D" />
diff --git a/client/images/console-warn-contrast.svg b/client/images/console-warn-contrast.svg
new file mode 100644
index 00000000..6811e3d4
--- /dev/null
+++ b/client/images/console-warn-contrast.svg
@@ -0,0 +1,54 @@
+
+
diff --git a/client/images/console-warn-light.svg b/client/images/console-warn-light.svg
index 6e76d14a..548ee946 100644
--- a/client/images/console-warn-light.svg
+++ b/client/images/console-warn-light.svg
@@ -50,5 +50,5 @@
+ fill="#996B00" />
diff --git a/client/images/down-arrow.svg b/client/images/down-arrow.svg
index f6eb1e87..a1dc41d5 100644
--- a/client/images/down-arrow.svg
+++ b/client/images/down-arrow.svg
@@ -3,8 +3,8 @@
-
-
+
+
diff --git a/client/images/exit.svg b/client/images/exit.svg
index dd19e998..b6c0cc74 100644
--- a/client/images/exit.svg
+++ b/client/images/exit.svg
@@ -5,7 +5,7 @@
-
+
diff --git a/client/images/triangle-arrow-down-white.svg b/client/images/triangle-arrow-down-white.svg
index a66e9ff6..75fd5567 100644
--- a/client/images/triangle-arrow-down-white.svg
+++ b/client/images/triangle-arrow-down-white.svg
@@ -3,7 +3,7 @@
Created with Sketch.
-
+
diff --git a/client/images/triangle-arrow-down.svg b/client/images/triangle-arrow-down.svg
index a66e9ff6..47ab5d10 100644
--- a/client/images/triangle-arrow-down.svg
+++ b/client/images/triangle-arrow-down.svg
@@ -3,7 +3,7 @@
Created with Sketch.
-
+
diff --git a/client/images/triangle-arrow-right.svg b/client/images/triangle-arrow-right.svg
index a99148b2..222020a8 100644
--- a/client/images/triangle-arrow-right.svg
+++ b/client/images/triangle-arrow-right.svg
@@ -3,7 +3,7 @@
Created with Sketch.
-
+
diff --git a/client/images/up-arrow.svg b/client/images/up-arrow.svg
index a5a3fb18..c4a90f1d 100644
--- a/client/images/up-arrow.svg
+++ b/client/images/up-arrow.svg
@@ -3,8 +3,8 @@
-
-
+
+
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index ba45826e..dd24d7fe 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -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 '';
}
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 2b0fd714..eba7b76c 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -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,
diff --git a/client/styles/abstracts/_mixins.scss b/client/styles/abstracts/_mixins.scss
index 1e6f2c52..1d51f204 100644
--- a/client/styles/abstracts/_mixins.scss
+++ b/client/styles/abstracts/_mixins.scss
@@ -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');
}
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 09b9932f..4e0b172f 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -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;
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 05dfcf6e..4fca97fd 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -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);
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index c0d8a05c..94b3d55a 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -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;
+}
diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss
index 54929f04..66ff9ccd 100644
--- a/client/styles/components/_about.scss
+++ b/client/styles/components/_about.scss
@@ -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);
- }
}
}
diff --git a/client/styles/components/_api-key.scss b/client/styles/components/_api-key.scss
index 419abf50..36dfec49 100644
--- a/client/styles/components/_api-key.scss
+++ b/client/styles/components/_api-key.scss
@@ -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 {
diff --git a/client/styles/components/_asset-list.scss b/client/styles/components/_asset-list.scss
index 335fc7bf..c0cd524d 100644
--- a/client/styles/components/_asset-list.scss
+++ b/client/styles/components/_asset-list.scss
@@ -83,7 +83,7 @@
@include themify() {
& polygon {
- fill: getThemifyVariable('dropdown-color');
+ fill: getThemifyVariable('inactive-text-color');
}
}
}
diff --git a/client/styles/components/_collection-popover.scss b/client/styles/components/_collection-popover.scss
index 2d5db110..a9176c9e 100644
--- a/client/styles/components/_collection-popover.scss
+++ b/client/styles/components/_collection-popover.scss
@@ -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;
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index dbfaf7dc..c68e0c54 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -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 {
diff --git a/client/styles/components/_console-feed.scss b/client/styles/components/_console-feed.scss
index 597f9e97..366ee54c 100644
--- a/client/styles/components/_console-feed.scss
+++ b/client/styles/components/_console-feed.scss
@@ -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;
\ No newline at end of file
+$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'
+);
\ No newline at end of file
diff --git a/client/styles/components/_console.scss b/client/styles/components/_console.scss
index 53048614..109b069f 100644
--- a/client/styles/components/_console.scss
+++ b/client/styles/components/_console.scss
@@ -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;
diff --git a/client/styles/components/_editable-input.scss b/client/styles/components/_editable-input.scss
index b649c333..c64fd240 100644
--- a/client/styles/components/_editable-input.scss
+++ b/client/styles/components/_editable-input.scss
@@ -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;
}
diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 6096afa1..8042f929 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -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;
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
index 0f9bb56f..54b00447 100644
--- a/client/styles/components/_forms.scss
+++ b/client/styles/components/_forms.scss
@@ -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');
}
}
diff --git a/client/styles/components/_modal.scss b/client/styles/components/_modal.scss
index 752b4434..e59ef299 100644
--- a/client/styles/components/_modal.scss
+++ b/client/styles/components/_modal.scss
@@ -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;
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 7f5a45ac..fe9de97e 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -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;
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
index 0ad29dc3..0ec609b8 100644
--- a/client/styles/components/_p5-contrast-codemirror-theme.scss
+++ b/client/styles/components/_p5-contrast-codemirror-theme.scss
@@ -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 {
diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss
index bd073941..9e169514 100644
--- a/client/styles/components/_p5-dark-codemirror-theme.scss
+++ b/client/styles/components/_p5-dark-codemirror-theme.scss
@@ -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 {
diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss
index 49328175..485aa7be 100644
--- a/client/styles/components/_p5-light-codemirror-theme.scss
+++ b/client/styles/components/_p5-light-codemirror-theme.scss
@@ -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;
}
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 7d3bc6df..eb3d00b3 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -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");
}
}
diff --git a/client/styles/components/_preview-frame.scss b/client/styles/components/_preview-frame.scss
index 31f12481..04443267 100644
--- a/client/styles/components/_preview-frame.scss
+++ b/client/styles/components/_preview-frame.scss
@@ -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;
}
diff --git a/client/styles/components/_searchbar.scss b/client/styles/components/_searchbar.scss
index 7076f75c..de70b31c 100644
--- a/client/styles/components/_searchbar.scss
+++ b/client/styles/components/_searchbar.scss
@@ -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');
}
}
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 345d0b40..d7b782af 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -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 {
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index 98c95f72..39efdacb 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -101,7 +101,7 @@
height:#{25 / $base-font-size}rem;
@include themify() {
& polygon {
- fill: getThemifyVariable('dropdown-color');
+ fill: getThemifyVariable('inactive-text-color');
}
}
}
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
index 8db1ab81..dc160b5e 100644
--- a/client/styles/components/_toolbar.scss
+++ b/client/styles/components/_toolbar.scss
@@ -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');
}
}
}
diff --git a/client/styles/components/_uploader.scss b/client/styles/components/_uploader.scss
index c7e87799..5d3e9de0 100644
--- a/client/styles/components/_uploader.scss
+++ b/client/styles/components/_uploader.scss
@@ -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%;
diff --git a/client/utils/metaKey.js b/client/utils/metaKey.js
index 47899976..e8c45eed 100644
--- a/client/utils/metaKey.js
+++ b/client/utils/metaKey.js
@@ -8,7 +8,7 @@ const metaKey = (() => {
return 'Ctrl';
})();
-const metaKeyName = metaKey === 'Cmd' ? '\u2318' : 'Ctrl';
+const metaKeyName = metaKey === 'Cmd' ? '⌘' : '⌃';
export {
metaKey,