p5.js-web-editor/client/styles/abstracts/_variables.scss
2016-10-01 16:01:05 -07:00

74 lines
2.1 KiB
SCSS

$base-font-size: 16;
//colors
$p5js-pink: #ed225d;
$white: #fff;
$black: #000;
$themes: (
light: (
primary-text-color: #333,
secondary-text-color: #6b6b6b,
inactive-text-color: #b5b5b5,
background-color: #fbfbfb,
button-background-color: #f4f4f4,
button-color: $black,
button-border-color: #979797,
toolbar-button-color: $p5js-pink,
toolbar-button-background-color: #f4f4f4,
button-background-hover-color: $p5js-pink,
button-background-active-color: #f10046,
button-hover-color: $white,
button-active-color: $white,
modal-background-color: #fdfdfd,
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,
console-header-color: #b1b1b1,
ide-border-color: #f4f4f4,
editor-gutter-color: #f4f4f4,
file-selected-color: #f4f4f4,
input-text-color: #333,
input-border-color: #979797,
),
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,
toolbar-button-background-color: #424242,
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,
editor-gutter-color: #363636,
file-selected-color: #404040,
input-text-color: #333,
input-border-color: #979797,
)
);
$console-warn-color: #ffbe05;
$console-error-color: #ff5f52;
$toast-background-color: #979797;
$toast-text-color: $white;