From da6a36aa144efa1b8f93c9054eb096f464ac9aba Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Tue, 12 Jun 2018 10:23:58 +0200
Subject: [PATCH] Feature: The MVP of table content styles. Moved styles
 related to the editing to the separate file (see #2).

---
 src/table.js            |  2 ++
 src/tableediting.js     |  2 +-
 tests/manual/table.html | 29 ++++-------------------------
 theme/table.css         | 40 +++++++++++++++++++++++-----------------
 theme/tableediting.css  | 10 ++++++++++
 5 files changed, 40 insertions(+), 43 deletions(-)
 create mode 100644 theme/tableediting.css

diff --git a/src/table.js b/src/table.js
index 09e9ddcb..d60a64c0 100644
--- a/src/table.js
+++ b/src/table.js
@@ -13,6 +13,8 @@ import TableEditing from './tableediting';
 import TableUI from './tableui';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 
+import '../theme/table.css';
+
 /**
  * The table plugin.
  *
diff --git a/src/tableediting.js b/src/tableediting.js
index f69ebeb1..06f9e6e2 100644
--- a/src/tableediting.js
+++ b/src/tableediting.js
@@ -33,7 +33,7 @@ import SetHeaderColumnCommand from './commands/setheadercolumncommand';
 import { getParentTable } from './commands/utils';
 import TableUtils from './tableutils';
 
-import './../theme/table.css';
+import '../theme/tableediting.css';
 
 /**
  * The table editing feature.
diff --git a/tests/manual/table.html b/tests/manual/table.html
index aec8eb00..e890c702 100644
--- a/tests/manual/table.html
+++ b/tests/manual/table.html
@@ -1,28 +1,7 @@
 <style>
-
-	table {
-		border-collapse: collapse;
-		border-spacing: 0;
-		border-color: hsl(0,0%,87%);
-	}
-
-	table, th, td {
-		padding: 5px;
-		border: 1px inset hsl(0,0%,87%);
-	}
-
-	table th,
-	table td {
-		min-width: 1em;
-	}
-
-	table th {
-		background: hsl(0,0%,96%);
-		font-weight: bold;
-	}
-
-	table thead th {
-		background: hsl(0,0%,90%);
+	body {
+		font-family: Helvetica, Arial, sans-serif;
+		font-size: 14px;
 	}
 </style>
 
@@ -47,7 +26,7 @@
 		</thead>
 		<tbody>
 		<tr>
-			<th colspan="2" rowspan="4" scope="rowgroup">Terrestial planets</th>
+			<th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
 			<th scope="row">Mercury</th>
 			<td>0.330</td>
 			<td>4,879</td>
diff --git a/theme/table.css b/theme/table.css
index 419ba7f5..7a6ce450 100644
--- a/theme/table.css
+++ b/theme/table.css
@@ -3,24 +3,30 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck table.ck-widget th.ck-editor__nested-editable {
-	border-color: inherit;
-	border-style: inset;
-}
+.ck.ck-content table {
+	/* Give the table some air and center it horizontally */
+	margin: 1em auto;
 
-.ck table.ck-widget td.ck-editor__nested-editable {
-	border-color: inherit;
-	border-style: inset;
-}
+	/* The table cells should have slight borders */
+	border-collapse: collapse;
+	border-spacing: 0;
 
-.ck table.ck-widget td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
-.ck table.ck-widget td.ck-editor__nested-editable:focus {
-	background-color: inherit;
-	color: inherit;
-}
+	/* The outer border of the table should be slightly darker than the inner lines. */
+	&:not(:hover) {
+		outline: 1px solid hsl(0, 0%, 70%);
+		outline-offset: -1px;
+	}
+
+	& td,
+	& th {
+		min-width: 2em;
+		padding: .4em;
+		text-align: center;
+		border-color: hsl(0, 0%, 85%);
+	}
 
-.ck table.ck-widget th.ck-editor__nested-editable.ck-editor__nested-editable_focused,
-.ck table.ck-widget th.ck-editor__nested-editable:focus {
-	background-color: inherit;
-	color: inherit;
+	& th {
+		font-weight: bold;
+		background: hsl(0, 0%, 98%);
+	}
 }
diff --git a/theme/tableediting.css b/theme/tableediting.css
new file mode 100644
index 00000000..66c26cca
--- /dev/null
+++ b/theme/tableediting.css
@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */