2016-05-11 19:31:17 +00:00
|
|
|
$base-font-size: 16;
|
|
|
|
|
|
|
|
|
|
//colors
|
|
|
|
|
$p5js-pink: #ed225d;
|
|
|
|
|
$white: #fff;
|
|
|
|
|
$black: #000;
|
|
|
|
|
|
2016-09-13 18:15:46 +00:00
|
|
|
$themes: (
|
|
|
|
|
light: (
|
|
|
|
|
primary-text-color: #333,
|
|
|
|
|
secondary-text-color: #6b6b6b,
|
|
|
|
|
inactive-text-color: #b5b5b5,
|
2016-09-22 01:46:23 +00:00
|
|
|
background-color: #fbfbfb,
|
2016-09-13 18:15:46 +00:00
|
|
|
button-background-color: #f4f4f4,
|
|
|
|
|
button-color: $black,
|
|
|
|
|
button-border-color: #979797,
|
|
|
|
|
toolbar-button-color: $p5js-pink,
|
2016-09-13 20:42:06 +00:00
|
|
|
toolbar-button-background-color: #f4f4f4,
|
2016-09-13 18:15:46 +00:00
|
|
|
button-background-hover-color: $p5js-pink,
|
|
|
|
|
button-background-active-color: #f10046,
|
|
|
|
|
button-hover-color: $white,
|
|
|
|
|
button-active-color: $white,
|
2016-09-22 01:46:23 +00:00
|
|
|
modal-background-color: #fdfdfd,
|
2016-09-13 18:15:46 +00:00
|
|
|
modal-button-background-color: #e6e6e6,
|
|
|
|
|
modal-border-color: #B9D0E1,
|
|
|
|
|
icon-color: #8b8b8b,
|
|
|
|
|
icon-hover-color: #333,
|
|
|
|
|
shadow-color: rgba(0, 0, 0, 0.16),
|
|
|
|
|
console-background-color: #eee,
|
|
|
|
|
console-header-background-color: #d6d6d6,
|
|
|
|
|
ide-border-color: #f4f4f4,
|
2016-09-22 01:46:23 +00:00
|
|
|
editor-gutter-color: #f4f4f4,
|
2016-09-21 22:52:44 +00:00
|
|
|
file-selected-color: #f4f4f4,
|
2016-09-13 18:15:46 +00:00
|
|
|
),
|
|
|
|
|
dark: (
|
|
|
|
|
primary-text-color: $white,
|
|
|
|
|
secondary-text-color: #c2c2c2,
|
|
|
|
|
inactive-text-color: #7d7d7d,
|
|
|
|
|
background-color: #333,
|
|
|
|
|
button-background-color: $white,
|
|
|
|
|
button-color: $black,
|
|
|
|
|
button-border-color: #979797,
|
|
|
|
|
toolbar-button-color: $p5js-pink,
|
2016-09-13 20:42:06 +00:00
|
|
|
toolbar-button-background-color: #424242,
|
2016-09-13 18:15:46 +00:00
|
|
|
button-background-hover-color: $p5js-pink,
|
|
|
|
|
button-background-active-color: #f10046,
|
|
|
|
|
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,
|
|
|
|
|
shadow-color: rgba(0, 0, 0, 0.16),
|
|
|
|
|
console-background-color: #4f4f4f,
|
|
|
|
|
console-header-background-color: #3f3f3f,
|
|
|
|
|
console-header-color: #b5b5b5,
|
|
|
|
|
ide-border-color: #949494,
|
2016-09-21 22:52:44 +00:00
|
|
|
editor-gutter-color: #363636,
|
|
|
|
|
file-selected-color: #404040,
|
2016-09-13 18:15:46 +00:00
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
$primary-text-color: #333;
|
|
|
|
|
$secondary-text-color: #6b6b6b;
|
|
|
|
|
$inactive-text-color: #b5b5b5;
|
|
|
|
|
$background-color: #fdfdfd;
|
|
|
|
|
$button-background-color: #f4f4f4;
|
|
|
|
|
$button-color: $black;
|
|
|
|
|
$button-border-color: #979797;
|
|
|
|
|
$toolbar-button-color: $p5js-pink;
|
|
|
|
|
$button-background-hover-color: $p5js-pink;
|
|
|
|
|
$button-background-active-color: #f10046;
|
|
|
|
|
$button-hover-color: $white;
|
|
|
|
|
$button-active-color: $white;
|
|
|
|
|
$modal-background-color: #f4f4f4;
|
|
|
|
|
$modal-button-background-color: #e6e6e6;
|
|
|
|
|
$modal-border-color: #B9D0E1;
|
|
|
|
|
$icon-color: #8b8b8b;
|
|
|
|
|
$icon-hover-color: #333;
|
|
|
|
|
$shadow-color: rgba(0, 0, 0, 0.16);
|
|
|
|
|
$console-background-color: #eee;
|
|
|
|
|
$console-header-background-color: #d6d6d6;
|
|
|
|
|
$ide-border-color: #f4f4f4;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// other variables i may or may not need later
|
|
|
|
|
$ide-border-color: #f4f4f4;
|
|
|
|
|
$editor-selected-line-color: #f3f3f3;
|
|
|
|
|
$input-border-color: #979797;
|
|
|
|
|
|
|
|
|
|
$console-light-background-color: #eee;
|
|
|
|
|
$console-header-background-color: #d6d6d6;
|
|
|
|
|
$console-header-color: #b1b1b1;
|
|
|
|
|
$console-warn-color: #ffbe05;
|
|
|
|
|
$console-error-color: #ff5f52;
|
|
|
|
|
|
|
|
|
|
$toast-background-color: #979797;
|
|
|
|
|
$toast-text-color: $white;
|
|
|
|
|
|
|
|
|
|
//light and dark colors
|
|
|
|
|
|
2016-05-11 19:31:17 +00:00
|
|
|
$light-primary-text-color: #333;
|
|
|
|
|
$light-secondary-text-color: #6b6b6b;
|
|
|
|
|
$light-inactive-text-color: #b5b5b5;
|
|
|
|
|
$light-background-color: #fdfdfd;
|
|
|
|
|
|
|
|
|
|
$light-button-background-color: #f4f4f4;
|
|
|
|
|
$light-button-color: $black;
|
2016-06-14 01:07:00 +00:00
|
|
|
$light-button-border-color: #979797;
|
2016-05-11 19:31:17 +00:00
|
|
|
$light-toolbar-button-color: $p5js-pink;
|
|
|
|
|
$light-button-background-hover-color: $p5js-pink;
|
|
|
|
|
$light-button-background-active-color: #f10046;
|
|
|
|
|
$light-button-hover-color: $white;
|
|
|
|
|
$light-button-active-color: $white;
|
2016-07-21 19:07:53 +00:00
|
|
|
$light-modal-background-color: #f4f4f4;
|
2016-07-11 23:14:45 +00:00
|
|
|
$light-modal-button-background-color: #e6e6e6;
|
2016-07-13 20:13:28 +00:00
|
|
|
$light-modal-border-color: #B9D0E1;
|
2016-06-21 03:04:41 +00:00
|
|
|
$light-icon-color: #8b8b8b;
|
|
|
|
|
$light-icon-hover-color: $light-primary-text-color;
|
2016-07-21 19:07:53 +00:00
|
|
|
$light-shadow-color: rgba(0, 0, 0, 0.16);
|
2016-05-11 19:31:17 +00:00
|
|
|
|
|
|
|
|
$dark-primary-text-color: $white;
|
|
|
|
|
$dark-secondary-text-color: #c2c2c2;
|
|
|
|
|
$dark-inactive-color: #7d7d7d;
|
|
|
|
|
$dark-background-color: #333;
|
|
|
|
|
|
|
|
|
|
$dark-button-background-color: $white;
|
|
|
|
|
$dark-button-color: $black;
|
|
|
|
|
$dark-toolbar-button-color: $p5js-pink;
|
|
|
|
|
$dark-button-background-hover-color: $p5js-pink;
|
|
|
|
|
$dark-button-background-active-color: #f10046;
|
|
|
|
|
$dark-button-hover-color: $white;
|
|
|
|
|
$dark-button-active-color: $white;
|
|
|
|
|
|
