From ceea854fd0fde8dec3f41fa6ed579e9228bdf059 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael@ihminen.org>
Date: Mon, 20 Aug 2018 17:14:25 +0300
Subject: [PATCH] Import Gutenberg color variables & use Gutenberg className as
 a wrapper

---
 client/gutenberg/extensions/todo/block.js    |  9 ++--
 client/gutenberg/extensions/todo/editor.scss | 50 ++++++--------------
 2 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/client/gutenberg/extensions/todo/block.js b/client/gutenberg/extensions/todo/block.js
index 338a84be46c3..ddd54927b0c6 100644
--- a/client/gutenberg/extensions/todo/block.js
+++ b/client/gutenberg/extensions/todo/block.js
@@ -1,5 +1,7 @@
 /** @format */
 
+/* eslint wpcalypso/jsx-classname-namespace: 0 */
+
 /**
  * External dependencies
  */
@@ -154,9 +156,10 @@ const edit = class extends Component {
 
 	render() {
 		const { items, newItemAt } = this.state;
+		const { className } = this.props;
 		return (
-			<div className="wp-editor-a8c-todo">
-				<ul className="wp-editor-a8c-todo-list">
+			<div className={ className }>
+				<ul className={ `${ className }-list` }>
 					{ items.map( ( item, itemIndex ) => {
 						const moveUp = () => {
 							this.moveUp( itemIndex );
@@ -206,7 +209,7 @@ const edit = class extends Component {
 						);
 					} ) }
 				</ul>
-				<div class="add-new-todo-item-form">
+				<div className="add-new-todo-item-form">
 					<Button onClick={ this.addNewItem }>
 						<Dashicon icon="plus" /> Add new item
 					</Button>
diff --git a/client/gutenberg/extensions/todo/editor.scss b/client/gutenberg/extensions/todo/editor.scss
index 4d195f0f7767..b5de463cbf42 100644
--- a/client/gutenberg/extensions/todo/editor.scss
+++ b/client/gutenberg/extensions/todo/editor.scss
@@ -1,29 +1,10 @@
-// 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;
-$dark-gray-200: #7e8993;
-$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;
-$light-gray-300: #edeff0;
-$light-gray-200: #f3f4f5;
-$light-gray-100: #f8f9f9;
-$white: #fff;
-
-$color-accent-green: #31843f;
-
-.wp-editor-a8c-todo {
+// Calypso colors
+@import '../../../../assets/stylesheets/shared/_colors.scss';
+
+// Gutenberg colors
+@import '../../editor/edit-post/assets/stylesheets/_colors.scss';
+
+.wp-block-a8c-todo {
 	margin-bottom: 20px;
 
 	// This would be ideal but it's being overridden.
@@ -58,10 +39,10 @@ $color-accent-green: #31843f;
 
 	// Completed checklist item.
 	.item-done {
-		color: $color-accent-green;
+		color: $green-text-min;
 
 		.item-status {
-			background: $color-accent-green;
+			background: $green-text-min;
 			border: 0;
 			position: relative;
 		}
@@ -124,19 +105,16 @@ $color-accent-green: #31843f;
 				display: inline;
 			}
 		}
-
 	}
-
-
 }
 
 // We need to be super-specific here to be sure we're overwriting the default UL styling.
-.edit-post-visual-editor .wp-editor-a8c-todo .wp-editor-a8c-todo-list {
+.edit-post-visual-editor .wp-block-a8c-todo .wp-block-a8c-todo-list {
 	list-style-type: none;
 }
 
 // Same for the "add item" input.
-.editor-block-list__block .wp-editor-a8c-todo .add-new-item {
+.editor-block-list__block .wp-block-a8c-todo .add-new-item {
 	width: 100%;
 	margin-right: 6px;
 	padding: 7.5px 8px;
@@ -144,20 +122,20 @@ $color-accent-green: #31843f;
 
 // P2-specific styling.
 body:not( .wp-admin ) .gutenberg {
-	.wp-editor-a8c-todo .todolist-item {
+	.wp-block-a8c-todo .todolist-item {
 		padding: 10px 0 4px;
 	}
 }
 
 
 // Only show the "add new" form when it's strictly needed.
-.wp-editor-a8c-todo .add-new-todo-item-form {
+.wp-block-a8c-todo .add-new-todo-item-form {
 	display: none;
 }
 
 .editor-block-list__block.is-selected,
 .editor-block-list__block.is-typing {
-	.wp-editor-a8c-todo .add-new-todo-item-form {
+	.wp-block-a8c-todo .add-new-todo-item-form {
 		display: flex;
 	}
 }