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

Update code syntax and console colors

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-27 18:34:53 -04:00
parent ad77cd8218
commit 677148e538
5 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,7 +17,11 @@ $CONSOLE_FEED_LIGHT_STYLES: (
LOG_DEBUG_COLOR: '#0071AD', LOG_DEBUG_COLOR: '#0071AD',
LOG_DEBUG_BACKGROUND: '#D6F1FF', LOG_DEBUG_BACKGROUND: '#D6F1FF',
LOG_DEBUG_BORDER: '#C2EBFF', LOG_DEBUG_BORDER: '#C2EBFF',
LOG_COLOR: '#4D4D4D' LOG_COLOR: '#4D4D4D',
ARROW_COLOR: '#666',
OBJECT_VALUE_STRING_COLOR: '#D81B18',
OBJECT_VALUE_NULL_COLOR: '#666',
OBJECT_VALUE_UNDEFINED_COLOR: '#666',
); );
$CONSOLE_FEED_DARK_STYLES: ( $CONSOLE_FEED_DARK_STYLES: (
@ -47,21 +51,22 @@ $CONSOLE_FEED_DARK_STYLES: (
TABLE_TH_HOVER_COLOR: 'grey', TABLE_TH_HOVER_COLOR: 'grey',
TABLE_SORT_ICON_COLOR: 'grey', TABLE_SORT_ICON_COLOR: 'grey',
TABLE_DATA_BACKGROUND_IMAGE: 'grey', TABLE_DATA_BACKGROUND_IMAGE: 'grey',
TABLE_DATA_BACKGROUND_SIZE: 'grey' TABLE_DATA_BACKGROUND_SIZE: 'grey',
ARROW_COLOR: '#D9D9D9'
); );
$CONSOLE_FEED_CONTRAST_STYLES: ( $CONSOLE_FEED_CONTRAST_STYLES: (
BASE_BACKGROUND_COLOR: '', BASE_BACKGROUND_COLOR: '',
BASE_COLOR: 'white', BASE_COLOR: 'white',
OBJECT_NAME_COLOR: 'white', OBJECT_NAME_COLOR: 'white',
OBJECT_VALUE_NULL_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_NULL_COLOR: '#B3BEFF',
OBJECT_VALUE_UNDEFINED_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_UNDEFINED_COLOR: '#B3BEFF',
OBJECT_VALUE_REGEXP_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_REGEXP_COLOR: '#B3BEFF',
OBJECT_VALUE_STRING_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_STRING_COLOR: '#B3BEFF',
OBJECT_VALUE_SYMBOL_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
OBJECT_VALUE_NUMBER_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_NUMBER_COLOR: '#B3BEFF',
OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_BOOLEAN_COLOR: '#B3BEFF',
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: 'hsl(230, 100%, 80%)', OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#B3BEFF',
LOG_ERROR_BACKGROUND: '#1F0000', LOG_ERROR_BACKGROUND: '#1F0000',
LOG_ERROR_COLOR: '#EA7B7D', LOG_ERROR_COLOR: '#EA7B7D',
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)', LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
@ -77,5 +82,6 @@ $CONSOLE_FEED_CONTRAST_STYLES: (
TABLE_TH_HOVER_COLOR: 'grey', TABLE_TH_HOVER_COLOR: 'grey',
TABLE_SORT_ICON_COLOR: 'grey', TABLE_SORT_ICON_COLOR: 'grey',
TABLE_DATA_BACKGROUND_IMAGE: 'grey', TABLE_DATA_BACKGROUND_IMAGE: 'grey',
TABLE_DATA_BACKGROUND_SIZE: 'grey' TABLE_DATA_BACKGROUND_SIZE: 'grey',
ARROW_COLOR: '#D9D9D9'
); );

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

@ -52,7 +52,7 @@ pre.CodeMirror-line {
} }
.CodeMirror-gutter-elt:not(.CodeMirror-linenumber) { .CodeMirror-gutter-elt:not(.CodeMirror-linenumber) {
opacity: 0.3; opacity: 0.2;
width: #{49 / $base-font-size}rem !important; width: #{49 / $base-font-size}rem !important;
height: 100%; height: 100%;
left: 49px !important; left: 49px !important;

6
client/styles/components/_p5-contrast-codemirror-theme.scss
View file

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

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

@ -89,12 +89,12 @@ $p5-dark-error: #df3a3d;
} }
.cm-s-p5-dark .CodeMirror-activeline-background { .cm-s-p5-dark .CodeMirror-activeline-background {
background-color: #404040; background-color: $dark;
} }
.cm-s-p5-dark .CodeMirror-activeline-gutter { .cm-s-p5-dark .CodeMirror-activeline-gutter {
background-color: #454545; background-color: $dark;
border-right: 1px solid #949494; border-right: 1px solid $middle-dark;
} }
.cm-s-p5-dark span.CodeMirror-matchingbracket { .cm-s-p5-dark span.CodeMirror-matchingbracket {

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

@ -13,12 +13,12 @@
$p5-light-lightbrown: #7a5a3a; $p5-light-lightbrown: #7a5a3a;
$p5-light-brown: #704F21; $p5-light-brown: #704F21;
$p5-light-black: #333333; $p5-light-black: #333333;
$p5-light-pink: #be3652; $p5-light-pink: #CA445F;
$p5-light-gray: #666; $p5-light-gray: #666;
$p5-light-lightblue: #007bbb; $p5-light-lightblue: #007bbb;
$p5-light-darkblue: #306bb4; $p5-light-darkblue: #306bb4;
$p5-light-white: #FDFDFD; $p5-light-white: #FDFDFD;
$p5-light-orange: #EE9900; $p5-light-orange: #9E6700;
$p5-light-lightgray: #E0D7D1; $p5-light-lightgray: #E0D7D1;
$p5-light-darkgray: #666666; $p5-light-darkgray: #666666;
$p5-light-green: #008007; $p5-light-green: #008007;
@ -86,11 +86,12 @@ $p5-light-activeline: rgb(207, 207, 207);
} }
.cm-s-p5-light .CodeMirror-activeline-background { .cm-s-p5-light .CodeMirror-activeline-background {
background-color: #F3F3F3; background-color: $light;
} }
.cm-s-p5-light .CodeMirror-activeline-gutter { .cm-s-p5-light .CodeMirror-activeline-gutter {
background-color: #ECECEC; background-color: $light;
border-right: 1px solid $medium-light;
} }
.cm-s-p5-light .cm-error { .cm-s-p5-light .cm-error {