Merge pull request #45 from ckeditor/t/2

Feature: The MVP of table content styles. Moved styles related to the editing to ckeditor5-theme-lark (see #2).

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.
  *

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.

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>

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%);
+	}
 }

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.
+ */