Browse Source

Docs: Adjusted palettes in the table styles section.

Aleksander Nowodzinski 5 years ago
parent
commit
60c19fa1ef

+ 50 - 50
packages/ckeditor5-table/docs/_snippets/features/table-styling.html

@@ -4,70 +4,70 @@
 		<table style="border-bottom:1px solid;border-left:1px solid;border-right:1px solid;border-top:1px solid;">
 			<thead>
 				<tr>
-					<th style="background-color:#eee;width:317px;" colspan="1" rowspan="2"><p>&nbsp;</p><p>&nbsp;</p></th>
-					<th style="background-color:#1d7373;text-align:center;width:224px;" colspan="3">Full Year (unaudited)</th>
-					<th style="background-color:#1d7373;text-align:center;width:360px;" colspan="4">2013 (unaudited)</th>
+					<th style="background-color:hsl(0,0%,90%);width:317px;" colspan="1" rowspan="2"><p>&nbsp;</p><p>&nbsp;</p></th>
+					<th style="background-color:hsl(180,60%,28%);text-align:center;width:224px;" colspan="3">Full Year (unaudited)</th>
+					<th style="background-color:hsl(180,60%,28%);text-align:center;width:360px;" colspan="4">2013 (unaudited)</th>
 				</tr>
 				<tr>
-					<th style="background-color:#5ccccc;width:78px;">2011</th>
-					<th style="background-color:#5ccccc;width:73px;">2012</th>
-					<th style="background-color:#5ccccc;width:72px;">2013</th>
-					<th style="background-color:#5ccccc;width:72px;">Q1</th>
-					<th style="background-color:#5ccccc;width:72px;">Q2</th>
-					<th style="background-color:#5ccccc;width:72px;">Q3</th>
-					<th style="background-color:#5ccccc;width:72px;">Q4</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">2011</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">2012</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">2013</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q1</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q2</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q3</th>
+					<th style="background-color:hsl(180,52%,58%);width:75px;">Q4</th>
 				</tr>
 			</thead>
 			<tbody>
 				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Cash, Cash Equivalents&nbsp;</strong></th>
-					<td style="width:78px;">$44,626</td>
-					<td style="width:73px;">$48,088</td>
-					<td style="width:72px;">$58,717</td>
-					<td style="width:72px;">$50,098</td>
-					<td style="background-color:#c7ffc7;border-bottom:2px solid green;border-left:2px solid green;border-right:2px solid green;border-top:2px solid green;width:72px;">$54,432</td>
-					<td style="width:72px;">$56,523</td>
-					<td style="width:72px;">$58,717</td>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Cash, Cash Equivalents&nbsp;</strong></th>
+					<td style="width:75px;">$44,626</td>
+					<td style="width:75px;">$48,088</td>
+					<td style="width:75px;">$58,717</td>
+					<td style="width:75px;">$50,098</td>
+					<td style="background-color:hsl(90,75%,60%);border-bottom:2px solid hsl(120,100%,25%);border-left:2px solid hsl(120,100%,25%);border-right:2px solid hsl(120,100%,25%);border-top:2px solid hsl(120,100%,25%);width:75px;">$54,432</td>
+					<td style="width:75px;">$56,523</td>
+					<td style="width:75px;">$58,717</td>
 				</tr>
 				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Accounts Receivable</strong></th>
-					<td style="width:78px;">$5,427</td>
-					<td style="width:73px;">$6,769</td>
-					<td style="background-color:#ffc7c7;border-bottom:2px solid red;border-left:2px solid red;border-right:2px solid red;border-top:2px solid red;width:72px;">$8,098</td>
-					<td style="width:72px;">$6,526</td>
-					<td style="width:72px;">$6,792</td>
-					<td style="width:72px;">$7,083</td>
-					<td style="width:72px;">$8,098</td>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Accounts Receivable</strong></th>
+					<td style="width:75px;">$5,427</td>
+					<td style="width:75px;">$6,769</td>
+					<td style="background-color:hsl(0,100%,89%);border-bottom:2px solid hsl(0,75%,60%);border-left:2px solid hsl(0,75%,60%);border-right:2px solid hsl(0,75%,60%);border-top:2px solid hsl(0,75%,60%);width:75px;">$8,098</td>
+					<td style="width:75px;">$6,526</td>
+					<td style="width:75px;">$6,792</td>
+					<td style="width:75px;">$7,083</td>
+					<td style="width:75px;">$8,098</td>
 				</tr>
 				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Property and Equipment, Net</strong></th>
-					<td style="width:78px;">$9,603</td>
-					<td style="width:73px;">$11,854</td>
-					<td style="width:72px;">$16,524</td>
-					<td style="width:72px;">$12,300</td>
-					<td style="width:72px;">$12,912</td>
-					<td style="width:72px;">$14,867</td>
-					<td style="width:72px;">$16,524</td>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Property and Equipment, Net</strong></th>
+					<td style="width:75px;">$9,603</td>
+					<td style="width:75px;">$11,854</td>
+					<td style="width:75px;">$16,524</td>
+					<td style="width:75px;">$12,300</td>
+					<td style="width:75px;">$12,912</td>
+					<td style="width:75px;">$14,867</td>
+					<td style="width:75px;">$16,524</td>
 				</tr>
 				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Total Assets</strong></th>
-					<td style="background-color:#ffc7c7;border-bottom:2px solid red;border-left:2px solid red;border-right:2px solid red;border-top:2px solid red;width:78px;">$72,574</td>
-					<td style="width:73px;">$93,798</td>
-					<td style="width:72px;">$110,920</td>
-					<td style="width:72px;">$96,692</td>
-					<td style="width:72px;">$101,182</td>
-					<td style="background-color:#c7ffc7;border-bottom:2px solid green;border-left:2px solid green;border-right:2px solid green;border-top:2px solid green;width:72px;">$105,068</td>
-					<td style="width:72px;">$110,920</td>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Total Assets</strong></th>
+					<td style="background-color:hsl(0,100%,89%);border-bottom:2px solid hsl(0,75%,60%);border-left:2px solid hsl(0,75%,60%);border-right:2px solid hsl(0,75%,60%);border-top:2px solid hsl(0,75%,60%);width:75px;">$72,574</td>
+					<td style="width:75px;">$93,798</td>
+					<td style="width:75px;">$110,920</td>
+					<td style="width:75px;">$96,692</td>
+					<td style="width:75px;">$101,182</td>
+					<td style="background-color:hsl(90,75%,60%);border-bottom:2px solid hsl(120,100%,25%);border-left:2px solid hsl(120,100%,25%);border-right:2px solid hsl(120,100%,25%);border-top:2px solid hsl(120,100%,25%);width:75px;">$105,068</td>
+					<td style="width:75px;">$110,920</td>
 				</tr>
 				<tr>
-					<th style="background-color:#ffd5b2;text-align:center;width:317px;"><strong>Cash Flow from Operations</strong></th>
-					<td style="width:78px;">$14,565</td>
-					<td style="width:73px;">$16,619</td>
-					<td style="width:72px;">$18,659</td>
-					<td style="width:72px;">$3,633</td>
-					<td style="width:72px;">$4,705</td>
-					<td style="width:72px;">$5,083</td>
-					<td style="width:72px;">$5,238</td>
+					<th style="background-color:hsl(27,100%,85%);text-align:center;width:317px;"><strong>Cash Flow from Operations</strong></th>
+					<td style="width:75px;">$14,565</td>
+					<td style="width:75px;">$16,619</td>
+					<td style="width:75px;">$18,659</td>
+					<td style="width:75px;">$3,633</td>
+					<td style="width:75px;">$4,705</td>
+					<td style="width:75px;">$5,083</td>
+					<td style="width:75px;">$5,238</td>
 				</tr>
 			</tbody>
 		</table>

+ 93 - 1
packages/ckeditor5-table/docs/_snippets/features/table-styling.js

@@ -7,6 +7,90 @@
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
+const COLOR_PALETTE = [
+	{
+		color: 'hsl(0, 0%, 0%)',
+		label: 'Black'
+	},
+	{
+		color: 'hsl(0, 0%, 30%)',
+		label: 'Dim grey'
+	},
+	{
+		color: 'hsl(0, 0%, 60%)',
+		label: 'Grey'
+	},
+	{
+		color: 'hsl(0, 0%, 90%)',
+		label: 'Light grey'
+	},
+	{
+		color: 'hsl(0, 0%, 100%)',
+		label: 'White',
+		hasBorder: true
+	},
+	{
+		color: 'hsl(0, 100%, 89%)',
+		label: 'Pink'
+	},
+	{
+		color: 'hsl(0, 75%, 60%)',
+		label: 'Red'
+	},
+	{
+		color: 'hsl(60, 75%, 60%)',
+		label: 'Yellow'
+	},
+	{
+		color: 'hsl(27, 100%, 85%)',
+		label: 'Light Orange'
+	},
+	{
+		color: 'hsl(30, 75%, 60%)',
+		label: 'Orange'
+	},
+	{
+		color: 'hsl(90, 75%, 60%)',
+		label: 'Light green'
+	},
+	{
+		color: 'hsl(120, 75%, 60%)',
+		label: 'Green'
+	},
+	{
+		color: 'hsl(150, 75%, 60%)',
+		label: 'Aquamarine'
+	},
+	{
+		color: 'hsl(120, 100%, 25%)',
+		label: 'Dark green'
+	},
+	{
+		color: 'hsl(180, 75%, 60%)',
+		label: 'Turquoise'
+	},
+	{
+		color: 'hsl(180, 52%, 58%)',
+		label: 'Light Aqua',
+	},
+	{
+		color: 'hsl(180, 60%, 28%)',
+		label: 'Aqua'
+	},
+	{
+		color: 'hsl(210, 75%, 60%)',
+		label: 'Light blue'
+	},
+	{
+		color: 'hsl(240, 75%, 60%)',
+		label: 'Blue'
+	},
+	{
+		color: 'hsl(270, 75%, 60%)',
+		label: 'Purple'
+	}
+];
+
 ClassicEditor
 	.create( document.querySelector( '#snippet-table-styling' ), {
 		extraPlugins: [
@@ -21,7 +105,15 @@ ClassicEditor
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},
 		table: {
-			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ]
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties' ],
+			tableProperties: {
+				borderColors: COLOR_PALETTE,
+				backgroundColors: COLOR_PALETTE
+			},
+			tableCellProperties: {
+				borderColors: COLOR_PALETTE,
+				backgroundColors: COLOR_PALETTE
+			}
 		}
 	} )
 	.then( editor => {