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_BACKGROUND: '#D6F1FF',
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: (
@ -47,21 +51,22 @@ $CONSOLE_FEED_DARK_STYLES: (
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: (
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_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%)',
OBJECT_VALUE_NULL_COLOR: '#B3BEFF',
OBJECT_VALUE_UNDEFINED_COLOR: '#B3BEFF',
OBJECT_VALUE_REGEXP_COLOR: '#B3BEFF',
OBJECT_VALUE_STRING_COLOR: '#B3BEFF',
OBJECT_VALUE_SYMBOL_COLOR: '#B3BEFF',
OBJECT_VALUE_NUMBER_COLOR: '#B3BEFF',
OBJECT_VALUE_BOOLEAN_COLOR: '#B3BEFF',
OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#B3BEFF',
LOG_ERROR_BACKGROUND: '#1F0000',
LOG_ERROR_COLOR: '#EA7B7D',
LOG_WARN_BACKGROUND: 'hsl(50, 100%, 10%)',
@ -77,5 +82,6 @@ $CONSOLE_FEED_CONTRAST_STYLES: (
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'
);

2
client/styles/components/_editor.scss
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;

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 {
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 {

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 {
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 {

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

@ -13,12 +13,12 @@
$p5-light-lightbrown: #7a5a3a;
$p5-light-brown: #704F21;
$p5-light-black: #333333;
$p5-light-pink: #be3652;
$p5-light-pink: #CA445F;
$p5-light-gray: #666;
$p5-light-lightblue: #007bbb;
$p5-light-darkblue: #306bb4;
$p5-light-white: #FDFDFD;
$p5-light-orange: #EE9900;
$p5-light-orange: #9E6700;
$p5-light-lightgray: #E0D7D1;
$p5-light-darkgray: #666666;
$p5-light-green: #008007;
@ -86,11 +86,12 @@ $p5-light-activeline: rgb(207, 207, 207);
}
.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 {