p5.js-web-editor/client/styles/abstracts/_variables.scss

273 lines
9.2 KiB
SCSS

$base-font-size: 12;
//colors
$p5js-pink: #ed225d;
$processing-blue: #007BBB;
$p5js-active-pink: #f10046;
$white: #fff;
$black: #000;
$yellow: #F5DC23;
$orange: #ffa500;
$red: #ff0000;
$lightsteelblue: #B0C4DE;
$dodgerblue: #1E90FF;
// $icon-hover-color: #333;
$p5-contrast-pink: #FFA9D9;
$border-color: #B5B5B5;
$outline-color: #0F9DD7;
// 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,
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: $middle-light,
toolbar-button-color: $dark,
toolbar-button-background-color: $medium-light,
button-background-hover-color: $p5js-pink,
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: $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: $medium-light,
codefold-icon-open: url(../images/triangle-arrow-down.svg),
codefold-icon-closed: url(../images/triangle-arrow-right.svg),
primary-button-color: $lightest,
primary-button-background-color: $p5js-pink,
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: $lightest,
table-button-background-hover-color: $p5js-pink,
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: $medium-dark,
form-input-text-color: $dark,
form-input-placeholder-text-color: $middle-light,
form-navigation-options-color: $middle-dark
),
dark: (
logo-color: $p5js-pink,
logo-background-color: $lightest,
heavy-text-color: $lightest,
primary-text-color: $lightest,
dropzone-text-color: $black,
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: $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: $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,
keyboard-shortcut-color: $middle-light,
nav-hover-color: $p5js-pink,
nav-border-color: $middle-dark,
error-color: $p5js-pink,
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: $lightest,
primary-button-background-color: $p5js-pink,
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: $lightest,
table-button-background-hover-color: $p5js-pink,
progress-bar-background-color: $middle-gray,
progress-bar-active-color: $p5js-active-pink,
form-title-color: $lightest,
form-secondary-title-color: $medium-light,
form-navigation-options-color: $middle-light
),
contrast: (
logo-color: $yellow,
logo-background-color: $darker,
heavy-text-color: $yellow,
primary-text-color: $lightest,
dropzone-text-color: $black,
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: $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: $dark,
console-color: $black,
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: $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: $medium-dark,
search-hover-text-color: $dark,
search-hover-background-color: $yellow,
keyboard-shortcut-color: $middle-light,
nav-hover-color: $yellow,
nav-border-color: $middle-dark,
error-color: $p5-contrast-pink,
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: $lightest,
primary-button-background-color: $p5js-pink,
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: $dark,
table-button-background-hover-color: $yellow,
progress-bar-background-color: $middle-gray,
progress-bar-active-color: $p5js-active-pink,
form-title-color: $lightest,
form-secondary-title-color: $medium-light,
form-navigation-options-color: $middle-light
)
);
$toast-background-color: $medium-dark;
$toast-text-color: $lightest;
$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);