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

client/modules/IDE/components/Preferences.js

@@ -190,6 +190,17 @@ class Preferences extends React.Component {
               checked={this.props.theme === 'dark'}
             />
             <label htmlFor="dark-theme-on" className="preference__option">Dark</label>
+            <input
+              type="radio"
+              onChange={() => this.props.setTheme('contrast')}
+              aria-label="contrast theme on"
+              name="contrast theme"
+              id="contrast-theme-on"
+              className="preference__radio-button"
+              value="contrast"
+              checked={this.props.theme === 'contrast'}
+            />
+            <label htmlFor="contrast-theme-on" className="preference__option">High Contrast</label>
           </div>
         </div>
         <div className="preference">

client/styles/abstracts/_placeholders.scss

@@ -81,7 +81,7 @@
 		margin-bottom: #{28 / $base-font-size}rem;
 		line-height: #{50 / $base-font-size}rem;
 		& g {
-			fill: getThemifyVariable('primary-text-color');
+			fill: getThemifyVariable('modal-button-color');
 		}
 		&:hover {
 			background-color: getThemifyVariable('button-background-hover-color');
@@ -104,9 +104,10 @@
 	font-size: #{12 / $base-font-size}rem;
 	cursor: pointer;
 	text-align: left;
-	margin-bottom: #{5 / $base-font-size}rem;
-	border: 0;
 	padding: 0;
+	margin-bottom: #{5 / $base-font-size}rem;
+	padding-right: #{5 / $base-font-size}rem;
+	border: 0;
 	list-style-type: none;
 }
 

client/styles/abstracts/_variables.scss

@@ -4,10 +4,13 @@ $base-font-size: 16;
 $p5js-pink: #ed225d;
 $white: #fff;
 $black: #000;
+$yellow: #F5DC23;
 
 $themes: (
   light: (
     primary-text-color: #333,
+    modal-button-color: #333,
+    heading-text-color: #333,
     secondary-text-color: #6b6b6b,
     inactive-text-color: #b5b5b5,
     background-color: #fbfbfb,
@@ -37,6 +40,8 @@ $themes: (
   ),
   dark: (
     primary-text-color: $white,
+    modal-button-color: $white,
+    heading-text-color: $white,
     secondary-text-color: #c2c2c2,
     inactive-text-color: #7d7d7d,
     background-color: #333,
@@ -63,6 +68,37 @@ $themes: (
     file-selected-color: #404040,
     input-text-color: #333,
     input-border-color: #979797,
+  ),
+  contrast: (
+    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,
+    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: #979797,
   )
 );
 
@@ -71,4 +107,3 @@ $console-error-color: #ff5f52;
 
 $toast-background-color: #979797;
 $toast-text-color: $white;
-

client/styles/components/_p5-contrast-codemirror-theme.scss

@@ -0,0 +1,118 @@
+// brown: #6C4D13
+// black: #333
+// blue: #0F9DD7
+// pink: #D9328F
+// gray: #999999
+// dark blue: #318094
+// white: #fdfdfd
+
+//numbers
+//light gray: #f4f4f4
+//dark gray: #b5b5b5
+
+$p5-contrast-black: #333;
+$p5-contrast-gray: #A0A0A0;
+$p5-contrast-white: #FDFDFD;
+$p5-contrast-darkgray: #333333;
+$p5-contrast-lightgray: #C1C1C1;
+$p5-contrast-blue: #00FFFF;
+$p5-contrast-green: #2DE9B6;
+$p5-contrast-yellow: #F5DC23;
+$p5-contrast-orange: #FFA95D;
+$p5-contrast-pink: #FFA9D9;
+
+$p5-contrast-gutter: #454545;
+$p5-contrast-number: #FDFDFD;
+$p5-contrast-selected: rgba(45, 123, 182, 25);
+$p5-contrast-activeline: #999999;
+
+.cm-s-p5-contrast {
+  background-color: $p5-contrast-black;
+  color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-comment {
+  color: $p5-contrast-lightgray;
+}
+
+.cm-s-p5-contrast .cm-def {
+  color: $p5-contrast-blue;
+}
+
+.cm-s-p5-contrast .cm-string {
+  color: $p5-contrast-green;
+}
+
+.cm-s-p5-contrast .cm-string-2 {
+  color: $p5-contrast-green;
+}
+
+.cm-s-p5-contrast .cm-number {
+  color: $p5-contrast-pink;
+}
+
+.cm-s-p5-contrast .cm-keyword {
+  color: $p5-contrast-yellow;
+}
+
+.cm-s-p5-contrast .cm-variable {
+  color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-variable-2 {
+  color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-property {
+  color: $p5-contrast-white;
+}
+
+.cm-s-p5-contrast .cm-atom {
+  color: $p5-contrast-pink;
+}
+
+.cm-s-p5-contrast .cm-operator {
+  color: $p5-contrast-lightgray;
+}
+
+.cm-s-p5-contrast .cm-linenumber {
+  color: $p5-contrast-number;
+}
+
+.cm-s-p5-contrast .CodeMirror-selected {
+  background-color: $p5-contrast-selected;
+}
+
+.cm-s-p5-contrast .CodeMirror-activeline-background {
+  background-color: #404040;
+}
+
+.cm-s-p5-contrast .CodeMirror-activeline-gutter {
+  background-color: #454545;
+  border-right: 1px solid #949494;
+}
+
+.cm-s-p5-contrast .cm-error {
+  color: #f00;
+}
+
+.cm-s-p5-contrast .CodeMirror-matchingbracket {
+  outline: 1px solid $p5-contrast-darkgray;
+  color: black !important;
+}
+
+.cm-s-p5-contrast .cm-qualifier {
+  color: $p5-contrast-yellow;
+}
+
+.cm-s-p5-contrast .cm-tag {
+  color: $p5-contrast-orange;
+}
+
+.cm-s-p5-contrast .cm-builtin {
+  color: $p5-contrast-yellow;
+}
+
+.cm-s-p5-contrast .cm-attribute {
+  color: $p5-contrast-white;
+}

client/styles/components/_preferences.scss

@@ -32,6 +32,9 @@
 	flex-direction: row;
 	justify-content: space-between;
 	margin-bottom: #{20 / $base-font-size}rem;
+	@include themify() {
+		color: getThemifyVariable('heading-text-color');
+	}
 }
 
 .preference {
@@ -48,6 +51,9 @@
 .preference__title {
 	width: 100%;
 	margin-bottom: #{10 / $base-font-size}rem;
+	@include themify() {
+		color: getThemifyVariable('heading-text-color');
+	}
 }
 
 .preference__subtitle {
@@ -75,9 +81,9 @@
 
 .preference__label {
 	@include themify() {
-		color: getThemifyColor('inactive-text-color');
+		color: getThemifyVariable('inactive-text-color');
 		&:hover {
-			color: getThemifyColor('inactive-text-color');
+			color: getThemifyVariable('primary-text-color');
 		}
 	}
 	margin: 0;
@@ -99,6 +105,7 @@
 .preference__option {
 	@include themify() {
 		@extend %preference-option;
+		padding-right: #{20 / $base-font-size}rem;
 	}
 }
 
@@ -111,12 +118,10 @@
 
 .preference__options {
 	display: flex;
-	justify-content: space-between;
-	width: #{70 / $base-font-size}rem;
 }
 
 .preference__radio-button:checked + .preference__option {
-	@include themify() {	
+	@include themify() {
 		//for some reason this won't work for getThemifyVariable
 	  color: map-get($theme-map, 'primary-text-color');
 	}

client/styles/main.scss

@@ -13,6 +13,7 @@
 
 @import 'components/p5-light-codemirror-theme';
 @import 'components/p5-dark-codemirror-theme';
+@import 'components/p5-contrast-codemirror-theme';
 @import 'components/editor';
 @import 'components/nav';
 @import 'components/toolbar';