Default WP colors and SCSS variables updated

src/_colors.scss

@@ -0,0 +1,88 @@
+/**
+ * Colors
+ */
+
+// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
+$black: #000;
+$dark-gray-900: #191e23;
+$dark-gray-800: #23282d;
+$dark-gray-700: #32373c;
+$dark-gray-600: #40464d;
+$dark-gray-500: #555d66; // Use this most of the time for dark items.
+$dark-gray-400: #606a73;
+$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
+$dark-gray-200: #7e8993;
+$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
+$dark-gray-100: #8f98a1;
+$light-gray-900: #a2aab2;
+$light-gray-800: #b5bcc2;
+$light-gray-700: #ccd0d4;
+$light-gray-600: #d7dade;
+$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
+$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
+$light-gray-300: #edeff0;
+$light-gray-200: #f3f4f5;
+$light-gray-100: #f8f9f9;
+$white: #fff;
+
+// Dark opacities, for use with light themes.
+$dark-opacity-900: rgba(#000510, 0.9);
+$dark-opacity-800: rgba(#00000a, 0.85);
+$dark-opacity-700: rgba(#06060b, 0.8);
+$dark-opacity-600: rgba(#000913, 0.75);
+$dark-opacity-500: rgba(#0a1829, 0.7);
+$dark-opacity-400: rgba(#0a1829, 0.65);
+$dark-opacity-300: rgba(#0e1c2e, 0.62);
+$dark-opacity-200: rgba(#162435, 0.55);
+$dark-opacity-100: rgba(#223443, 0.5);
+$dark-opacity-light-900: rgba(#304455, 0.45);
+$dark-opacity-light-800: rgba(#425863, 0.4);
+$dark-opacity-light-700: rgba(#667886, 0.35);
+$dark-opacity-light-600: rgba(#7b86a2, 0.3);
+$dark-opacity-light-500: rgba(#9197a2, 0.25);
+$dark-opacity-light-400: rgba(#95959c, 0.2);
+$dark-opacity-light-300: rgba(#829493, 0.15);
+$dark-opacity-light-200: rgba(#8b8b96, 0.1);
+$dark-opacity-light-100: rgba(#747474, 0.05);
+
+// Light opacities, for use with dark themes.
+$light-opacity-900: rgba($white, 1);
+$light-opacity-800: rgba($white, 0.9);
+$light-opacity-700: rgba($white, 0.85);
+$light-opacity-600: rgba($white, 0.8);
+$light-opacity-500: rgba($white, 0.75);
+$light-opacity-400: rgba($white, 0.7);
+$light-opacity-300: rgba($white, 0.65);
+$light-opacity-200: rgba($white, 0.6);
+$light-opacity-100: rgba($white, 0.55);
+$light-opacity-light-900: rgba($white, 0.5);
+$light-opacity-light-800: rgba($white, 0.45);
+$light-opacity-light-700: rgba($white, 0.4);
+$light-opacity-light-600: rgba($white, 0.35);
+$light-opacity-light-500: rgba($white, 0.3);
+$light-opacity-light-400: rgba($white, 0.25);
+$light-opacity-light-300: rgba($white, 0.2);
+$light-opacity-light-200: rgba($white, 0.15);
+$light-opacity-light-100: rgba($white, 0.1);
+
+// Additional colors.
+// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
+$blue-wordpress-700: #00669b;
+$blue-dark-900: #0071a1;
+
+$blue-medium-900: #006589;
+$blue-medium-800: #00739c;
+$blue-medium-700: #007fac;
+$blue-medium-600: #008dbe;
+$blue-medium-500: #00a0d2;
+$blue-medium-400: #33b3db;
+$blue-medium-300: #66c6e4;
+$blue-medium-200: #bfe7f3;
+$blue-medium-100: #e5f5fa;
+$blue-medium-highlight: #b3e7fe;
+$blue-medium-focus: #007cba;
+
+// Alert colors.
+$alert-yellow: #f0b849;
+$alert-red: #d94f4f;
+$alert-green: #4ab866;

src/app/style.scss

@@ -1,3 +1,4 @@
+@import "../_colors.scss";
 .tray-pointer {
 	height: 0;
 	width: 0;
@@ -12,7 +13,13 @@ body.trayright .tray-pointer {
 }
 
 .testpress {
-	background-color: #fff;
-	color: #191e23;
 	height: 340px;
+	.theme-light & {
+		color: $dark-gray-700;
+		border-bottom: 1px solid $light-gray-100;
+	}
+	.theme-dark & {
+		color: $light-gray-200;
+		border-bottom: 1px solid $dark-gray-400;
+	}
 }

src/components/pages/style.scss

@@ -1,3 +1,4 @@
+@import "../../_colors.scss";
 .pages {
 	height: 100%;
 	position: relative;
@@ -8,7 +9,14 @@
 		position: absolute;
 		left: 350px;
 		width: 350px;
-		background: #fff;
+		.theme-light & {
+			color: $dark-gray-700;
+			background-color: $light-gray-100;
+		}
+		.theme-dark & {
+			color: $light-gray-200;
+			background-color: $dark-gray-400;
+		}
 	}
 
 	&__page.page0,
@@ -30,16 +38,34 @@
 	&__page-header {
 		height: 35px;
 		padding: 10px;
-		color: #555d66;
-		border-bottom: 1px solid #ccc;
 		display: flex;
 		align-items: center;
+		.theme-light & {
+			color: $dark-gray-700;
+			border-bottom: 1px solid $light-gray-100;
+		}
+		.theme-dark & {
+			color: $light-gray-200;
+			border-bottom: 1px solid $dark-gray-400;
+		}
+	}
+
+	&__page-title {
+		margin: 0;
+		flex: auto;
+		display: flex;
+		flex-direction: row;
 	}
 
 	&__page-title-logo {
 		margin: 5px;
 		height: 25px;
-		fill: #555d66;
+		.theme-light & {
+			fill: $blue-wordpress-700;
+		}
+		.theme-dark & {
+			fill: $blue-medium-100;
+		}
 	}
 
 	&__page-title {

src/index.scss

@@ -1,8 +1,5 @@
-@import "../node_modules/@wordpress/components/build-style/style.css";
-
 body {
 	margin: 0;
 	padding: 0;
 	font-family: sans-serif;
-	line-height: 1.35;
 }