Shawburn: Add color annotations

shawburn/inc/wpcom-editor-colors.php

@@ -0,0 +1,2 @@
+<?php
+require_once get_template_directory() . '/inc/wpcom-colors-css-variables.php';

shawburn/inc/wpcom.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * WordPress.com-specific functions and definitions.
+ *
+ * This file is centrally included from `wp-content/mu-plugins/wpcom-theme-compat.php`.
+ *
+ * @package Rockfield
+ */
+require_once get_template_directory() . '/inc/wpcom-colors-css-variables.php';
+/**
+ * Bind JS handlers to instantly live-preview changes.
+ */
+function shawburn_wpcom_color_annotations_preview_js() {
+	wp_enqueue_script( 'shawburn_wpcom_color_annotations_preview', get_template_directory_uri() . '/inc/color-annotations-preview.js', array( 'customize-preview' ), wp_get_theme()->get( 'Version' ), true );
+}
+add_action( 'customize_preview_init', 'shawburn_wpcom_color_annotations_preview_js' );

shawburn/sass/_global-variables.scss

@@ -0,0 +1,25 @@
+@mixin global-variables() {
+
+	/* Colors */
+	--wp--preset--color--primary: #0C80A1;
+	--wp--preset--color--primary-hover: darken(#0C80A1, 10%);
+	--wp--preset--color--secondary: #D4401C;
+	--wp--preset--color--secondary-hover: darken(#D4401C, 10%);
+	--wp--preset--color--foreground: #444444,
+	--wp--preset--color--foreground-low-contrast: #767676;
+	--wp--preset--color--foreground-high-contrast: #222222;
+	--wp--preset--color--background: #ffffff;
+	--wp--preset--color--background-low-contrast: #EAEAEA;
+	--wp--preset--color--background-high-contrast: #FAFAFA;
+	--wp--preset--color--border: #EAEAEA;
+	--wp--preset--color--border-low-contrast: #DADADA;
+	--wp--preset--color--border-high-contrast: #FAFAFA;
+	--wp--preset--color--text-selection: lighten(#0C80A1, 55%);
+	--wp--preset--color--alert-success:yellowgreen;
+	--wp--preset--color--alert-info: skyblue;
+	--wp--preset--color--alert-warning: gold;
+	--wp--preset--color--alert-error: salmon;
+	--wp--preset--color--black: black;
+	--wp--preset--color--white: white;
+
+}