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

$base-font-size: 12;

//colors
$p5js-pink: #ed225d;
$white: #fff;
$black: #000;
$yellow: #F5DC23;
$primary-text-color: #333;
$icon-color: #8b8b8b;
$icon-hover-color: #333;

$themes: (
  light: (
    logo-color: $p5js-pink,
    primary-text-color: #333,
    modal-button-color: #333,
    heading-text-color: #333,
    secondary-text-color: #6b6b6b,
    inactive-text-color: #b5b5b5,
    background-color: #fbfbfb,
    preview-placeholder-color: #dcdcdc,
    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: #f4f4f4,
    modal-button-background-color: #e6e6e6,
    modal-border-color: #B9D0E1,
    icon-color: $icon-color,
    icon-hover-color: $icon-hover-color,
    icon-toast-hover-color: $white,
    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: #b5b5b5,
    about-list-text-color: #4a4a4a,
    search-background-color: #ebebeb
  ),
  dark: (
    logo-color: $p5js-pink,
    primary-text-color: $white,
    modal-button-color: $white,
    heading-text-color: $white,
    secondary-text-color: #c2c2c2,
    inactive-text-color: #b5b5b5,
    background-color: #333,
    preview-placeholder-color: #dcdcdc,
    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,
    icon-toast-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: #b5b5b5,
    about-list-text-color: #f4f4f4,
    search-background-color: #ebebeb
  ),
  contrast: (
    logo-color: $yellow,
    primary-text-color: $yellow,
    modal-button-color: #333,
    heading-text-color: #e1e1e1,
    secondary-text-color: #e1e1e1,
    inactive-text-color: #c1c1c1,
    background-color: #333,
    button-background-color: $white,
    button-color: $black,
    button-border-color: #979797,
    toolbar-button-color: #333333,
    toolbar-button-background-color: #C1C1C1,
    button-background-hover-color: $yellow,
    button-background-active-color: #f10046,
    button-hover-color: #333333,
    button-active-color: #333333,
    modal-background-color: #444,
    modal-button-background-color: #C1C1C1,
    modal-border-color: #949494,
    icon-color: #a9a9a9,
    icon-hover-color: $yellow,
    icon-toast-hover-color: $yellow,
    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: #454545,
    file-selected-color: #404040,
    input-text-color: #333,
    input-border-color: #b5b5b5,
    about-list-text-color: #f4f4f4,
    search-background-color: $white
  )
);

$console-warn-color: #ffbe05;
$console-error-color: #ff5f52;

$toast-background-color: #4A4A4A;
$toast-text-color: $white;

$form-title-color: rgba(51, 51, 51, 0.87);
$secondary-form-title-color: #b5b5b5;
$form-button-background-color: $white;
$form-button-color: #f10046;
$form-button-background-hover-color: $p5js-pink;
$form-button-background-active-color: #f10046;
$form-button-hover-color: $white;
$form-button-active-color: $white;
$form-navigation-options-color: #999999;

$about-play-background-color: rgba(255, 255, 255, 0.7);
$about-button-border-color: rgba(151, 151, 151, 0.7);
implement sidebar design #234 (#235) * removing avenir, replacing with montserrat * sidebar tweaks * sidebar positioning * resolving merge conflict * working on sidebar * removing avenir font, using montserrat instead due to licensing issues * removing old import statement for typeography scss file * design formatting for sidebar closes #234 2016-12-19 22:07:04 +00:00			`$base-font-size: 12;`
add logo and play to toolbar, with no functionality 2016-05-11 19:31:17 +00:00
			`//colors`
			`$p5js-pink: #ed225d;`
			`$white: #fff;`
			`$black: #000;`
Add high contrast theme (#141) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent 2016-10-12 16:08:12 +00:00			`$yellow: #F5DC23;`
fix #268 2017-01-17 18:28:28 +00:00			`$primary-text-color: #333;`
Style change to toasts (#316) * Changes to toast styles * Changes to toast styles removed an unused variable * removing another unused variable 2017-03-06 19:29:42 +00:00			`$icon-color: #8b8b8b;`
			`$icon-hover-color: #333;`
add logo and play to toolbar, with no functionality 2016-05-11 19:31:17 +00:00
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`$themes: (`
			`light: (`
Make p5 logo color variable (#150) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent * make logo colour a variable 2016-10-18 02:57:29 +00:00			`logo-color: $p5js-pink,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`primary-text-color: #333,`
Add high contrast theme (#141) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent 2016-10-12 16:08:12 +00:00			`modal-button-color: #333,`
			`heading-text-color: #333,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`secondary-text-color: #6b6b6b,`
			`inactive-text-color: #b5b5b5,`
adding styling 2016-09-22 01:46:23 +00:00			`background-color: #fbfbfb,`
implement sidebar design #234 (#235) * removing avenir, replacing with montserrat * sidebar tweaks * sidebar positioning * resolving merge conflict * working on sidebar * removing avenir font, using montserrat instead due to licensing issues * removing old import statement for typeography scss file * design formatting for sidebar closes #234 2016-12-19 22:07:04 +00:00			`preview-placeholder-color: #dcdcdc,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`button-background-color: #f4f4f4,`
			`button-color: $black,`
			`button-border-color: #979797,`
			`toolbar-button-color: $p5js-pink,`
start to integrate themes to placeholders 2016-09-13 20:42:06 +00:00			`toolbar-button-background-color: #f4f4f4,`
add theme to preferences, add backbone of themes to scss 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,`
formatting of dropdown login and editor menus (#239) * removing avenir font, using montserrat instead due to licensing issues * removing old import statement for typeography scss file * dropdown formatting closes #210 2016-12-20 05:21:04 +00:00			`modal-background-color: #f4f4f4,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`modal-button-background-color: #e6e6e6,`
			`modal-border-color: #B9D0E1,`
Style change to toasts (#316) * Changes to toast styles * Changes to toast styles removed an unused variable * removing another unused variable 2017-03-06 19:29:42 +00:00			`icon-color: $icon-color,`
			`icon-hover-color: $icon-hover-color,`
			`icon-toast-hover-color: $white,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`shadow-color: rgba(0, 0, 0, 0.16),`
			`console-background-color: #eee,`
			`console-header-background-color: #d6d6d6,`
clean up scss color variables, fix missing unthmeified variables 2016-09-22 03:39:50 +00:00			`console-header-color: #b1b1b1,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`ide-border-color: #f4f4f4,`
adding styling 2016-09-22 01:46:23 +00:00			`editor-gutter-color: #f4f4f4,`
a lot of dark theme fixes 2016-09-21 22:52:44 +00:00			`file-selected-color: #f4f4f4,`
clean up scss color variables, fix missing unthmeified variables 2016-09-22 03:39:50 +00:00			`input-text-color: #333,`
Taking login and sign pages out + new design for login and signup page (#228) * make login a seperate page * make signup a another page * get previousPath * setPreviousPath between routes * new desig for login pagen * new design for signup page * added login and exit icons * added signup and exit icons * refactor form-container.scss * deleted extra code 2016-12-15 23:43:58 +00:00			`input-border-color: #b5b5b5,`
New Design for About (#246) * new design for about * clean code * reuse play.svg 2017-01-06 18:14:39 +00:00			`about-list-text-color: #4a4a4a,`
Update Find styling to new design (#401) * Update Find styling * Update placeholder text 2017-07-28 15:38:47 +00:00			`search-background-color: #ebebeb`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`),`
			`dark: (`
Make p5 logo color variable (#150) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent * make logo colour a variable 2016-10-18 02:57:29 +00:00			`logo-color: $p5js-pink,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`primary-text-color: $white,`
Add high contrast theme (#141) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent 2016-10-12 16:08:12 +00:00			`modal-button-color: $white,`
			`heading-text-color: $white,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`secondary-text-color: #c2c2c2,`
implement sidebar design #234 (#235) * removing avenir, replacing with montserrat * sidebar tweaks * sidebar positioning * resolving merge conflict * working on sidebar * removing avenir font, using montserrat instead due to licensing issues * removing old import statement for typeography scss file * design formatting for sidebar closes #234 2016-12-19 22:07:04 +00:00			`inactive-text-color: #b5b5b5,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`background-color: #333,`
implement sidebar design #234 (#235) * removing avenir, replacing with montserrat * sidebar tweaks * sidebar positioning * resolving merge conflict * working on sidebar * removing avenir font, using montserrat instead due to licensing issues * removing old import statement for typeography scss file * design formatting for sidebar closes #234 2016-12-19 22:07:04 +00:00			`preview-placeholder-color: #dcdcdc,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`button-background-color: $white,`
			`button-color: $black,`
			`button-border-color: #979797,`
			`toolbar-button-color: $p5js-pink,`
start to integrate themes to placeholders 2016-09-13 20:42:06 +00:00			`toolbar-button-background-color: #424242,`
add theme to preferences, add backbone of themes to scss 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,`
Style change to toasts (#316) * Changes to toast styles * Changes to toast styles removed an unused variable * removing another unused variable 2017-03-06 19:29:42 +00:00			`icon-toast-hover-color: $white,`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`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,`
a lot of dark theme fixes 2016-09-21 22:52:44 +00:00			`editor-gutter-color: #363636,`
			`file-selected-color: #404040,`
clean up scss color variables, fix missing unthmeified variables 2016-09-22 03:39:50 +00:00			`input-text-color: #333,`
Taking login and sign pages out + new design for login and signup page (#228) * make login a seperate page * make signup a another page * get previousPath * setPreviousPath between routes * new desig for login pagen * new design for signup page * added login and exit icons * added signup and exit icons * refactor form-container.scss * deleted extra code 2016-12-15 23:43:58 +00:00			`input-border-color: #b5b5b5,`
New Design for About (#246) * new design for about * clean code * reuse play.svg 2017-01-06 18:14:39 +00:00			`about-list-text-color: #f4f4f4,`
Update Find styling to new design (#401) * Update Find styling * Update placeholder text 2017-07-28 15:38:47 +00:00			`search-background-color: #ebebeb`
Add high contrast theme (#141) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent 2016-10-12 16:08:12 +00:00			`),`
			`contrast: (`
Make p5 logo color variable (#150) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent * make logo colour a variable 2016-10-18 02:57:29 +00:00			`logo-color: $yellow,`
Add high contrast theme (#141) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent 2016-10-12 16:08:12 +00:00			`primary-text-color: $yellow,`
			`modal-button-color: #333,`
			`heading-text-color: #e1e1e1,`
			`secondary-text-color: #e1e1e1,`
			`inactive-text-color: #c1c1c1,`
			`background-color: #333,`
			`button-background-color: $white,`
			`button-color: $black,`
			`button-border-color: #979797,`
			`toolbar-button-color: #333333,`
			`toolbar-button-background-color: #C1C1C1,`
			`button-background-hover-color: $yellow,`
			`button-background-active-color: #f10046,`
			`button-hover-color: #333333,`
			`button-active-color: #333333,`
			`modal-background-color: #444,`
			`modal-button-background-color: #C1C1C1,`
			`modal-border-color: #949494,`
			`icon-color: #a9a9a9,`
			`icon-hover-color: $yellow,`
Style change to toasts (#316) * Changes to toast styles * Changes to toast styles removed an unused variable * removing another unused variable 2017-03-06 19:29:42 +00:00			`icon-toast-hover-color: $yellow,`
Add high contrast theme (#141) * initial changes for high contrast theme * change more colours * add more styles * add new variables * fix few more colours * fix typo * fix indent 2016-10-12 16:08:12 +00:00			`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: #454545,`
			`file-selected-color: #404040,`
			`input-text-color: #333,`
Taking login and sign pages out + new design for login and signup page (#228) * make login a seperate page * make signup a another page * get previousPath * setPreviousPath between routes * new desig for login pagen * new design for signup page * added login and exit icons * added signup and exit icons * refactor form-container.scss * deleted extra code 2016-12-15 23:43:58 +00:00			`input-border-color: #b5b5b5,`
New Design for About (#246) * new design for about * clean code * reuse play.svg 2017-01-06 18:14:39 +00:00			`about-list-text-color: #f4f4f4,`
Update Find styling to new design (#401) * Update Find styling * Update placeholder text 2017-07-28 15:38:47 +00:00			`search-background-color: $white`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`)`
			`);`

			`$console-warn-color: #ffbe05;`
			`$console-error-color: #ff5f52;`

Style change to toasts (#316) * Changes to toast styles * Changes to toast styles removed an unused variable * removing another unused variable 2017-03-06 19:29:42 +00:00			`$toast-background-color: #4A4A4A;`
add theme to preferences, add backbone of themes to scss 2016-09-13 18:15:46 +00:00			`$toast-text-color: $white;`
Taking login and sign pages out + new design for login and signup page (#228) * make login a seperate page * make signup a another page * get previousPath * setPreviousPath between routes * new desig for login pagen * new design for signup page * added login and exit icons * added signup and exit icons * refactor form-container.scss * deleted extra code 2016-12-15 23:43:58 +00:00
			`$form-title-color: rgba(51, 51, 51, 0.87);`
			`$secondary-form-title-color: #b5b5b5;`
			`$form-button-background-color: $white;`
			`$form-button-color: #f10046;`
			`$form-button-background-hover-color: $p5js-pink;`
			`$form-button-background-active-color: #f10046;`
			`$form-button-hover-color: $white;`
			`$form-button-active-color: $white;`
			`$form-navigation-options-color: #999999;`
New design for ResetPassword view and NewPassword view (#232) * newdesign for resetpassword view and newpassword view * bought password token back * added params.reset_password_token * no themify 2016-12-19 21:49:37 +00:00
New Design for About (#246) * new design for about * clean code * reuse play.svg 2017-01-06 18:14:39 +00:00			`$about-play-background-color: rgba(255, 255, 255, 0.7);`
			`$about-button-border-color: rgba(151, 151, 151, 0.7);`