Browse Source

Test: Created a test with an inverted (customized) version of the theme.

Aleksander Nowodzinski 7 years ago
parent
commit
506dc0429c

+ 2 - 0
packages/ckeditor5-theme-lark/package.json

@@ -13,6 +13,8 @@
     "@ckeditor/ckeditor5-alignment": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-editor-balloon": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-font": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-highlight": "^1.0.0-alpha.2",
     "@ckeditor/ckeditor5-link": "^1.0.0-alpha.2",

+ 140 - 0
packages/ckeditor5-theme-lark/tests/manual/inverted.html

@@ -0,0 +1,140 @@
+<style>
+	body {
+		height: 2000px;
+	}
+
+	:root {
+		/* Helper variables to avoid duplication in the colors. */
+		--ck-custom-background: #4A494B;
+		--ck-custom-foreground: #3a393d;
+		--ck-custom-border: #383738;
+		--ck-custom-white: #fff;
+
+		--ck-color-base-foreground: var(--ck-custom-background);
+
+		/* -- Overrides generic colors -------------------------------------------------------------- */
+
+		--ck-color-focus-border: #48a3f5;
+		--ck-color-text: #fafafa;
+		--ck-color-shadow-drop: rgba( 0, 0, 0, .2 );
+		--ck-color-shadow-inner: rgba( 0, 0, 0, .1 );
+
+		/* -- Overrides the default .ck-button class colors ----------------------------------------- */
+
+		--ck-color-button-default-background: var(--ck-custom-background);
+		--ck-color-button-default-border: var(--ck-custom-border);
+		--ck-color-button-default-focus-background: #434244;
+		--ck-color-button-default-focus-border: #323232;
+		--ck-color-button-default-active-background: #3f3e40;
+		--ck-color-button-default-active-border: #302f30;
+		--ck-color-button-default-active-shadow: #3b3a3c;
+		--ck-color-button-default-disabled-background: var(--ck-custom-background);
+		--ck-color-button-default-disabled-border: var(--ck-custom-border);
+
+		--ck-color-button-on-background: var(--ck-custom-foreground);
+		--ck-color-button-on-border: var(--ck-custom-border);
+		--ck-color-button-on-focus-background: #343337;
+		--ck-color-button-on-focus-border: #323232;
+		--ck-color-button-on-active-background: #313034;
+		--ck-color-button-on-active-border: #302f30;
+		--ck-color-button-on-active-shadow: #2e2e31;
+		--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+		--ck-color-button-on-disabled-border: var(--ck-custom-border);
+
+		--ck-color-button-action-background: #1ABC9C;
+		--ck-color-button-action-border: #49d2b7;
+		--ck-color-button-action-focus-background: #17a98c;
+		--ck-color-button-action-focus-border: #42bda5;
+		--ck-color-button-action-active-background: #16a085;
+		--ck-color-button-action-active-border: #3eb39c;
+		--ck-color-button-action-active-shadow: #15967d;
+		--ck-color-button-action-disabled-background: #1ABC9C;
+		--ck-color-button-action-disabled-border: #49d2b7;
+		--ck-color-button-action-text: var(--ck-custom-white);
+
+		/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
+
+		--ck-color-dropdown-panel-background: var(--ck-custom-background);
+		--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+		--ck-color-dropdown-symbol: #f1f1f1;
+
+		/* -- Overrides the default .ck-input class colors ------------------------------------------ */
+
+		--ck-color-input-background: var(--ck-custom-foreground);
+		--ck-color-input-border: #6b6970;
+		--ck-color-input-text: #fafafa;
+		--ck-color-input-disabled-background: #343337;
+		--ck-color-input-disabled-border: #605f65;
+		--ck-color-input-disabled-text: #757575;
+
+		/* -- Overrides the default .ck-list class colors ------------------------------------------- */
+
+		--ck-color-list-background: var(--ck-custom-background);
+		--ck-color-list-item-background-hover: var(--ck-custom-foreground);
+		--ck-color-list-item-background-active: #1A8BF1;
+		--ck-color-list-item-text-active: var(--ck-custom-white);
+
+		/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
+
+		--ck-color-panel-background: var(--ck-custom-background);
+		--ck-color-panel-border: var(--ck-custom-border);
+
+		/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+
+		--ck-color-toolbar-background: var(--ck-custom-foreground);
+		--ck-color-toolbar-border: var(--ck-custom-border);
+
+		/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+
+		--ck-color-tooltip-background: #212025;
+		--ck-color-tooltip-text: #eee;
+
+		/* -- Overrides the default colors used by the editor --------------------------------------- */
+
+		--ck-color-editor-border: var(--ck-custom-background);
+		--ck-color-editor-toolbar-background: var(--ck-custom-background);
+
+		--ck-color-editor-toolbar-button-on-background: #3c3c3c;
+		--ck-color-editor-toolbar-button-on-border: transparent;
+		--ck-color-editor-toolbar-button-on-focus-background: #353535;
+		--ck-color-editor-toolbar-button-on-focus-border: transparent;
+		--ck-color-editor-toolbar-button-on-active-background: #272727;
+		--ck-color-editor-toolbar-button-on-active-border: transparent;
+		--ck-color-editor-toolbar-button-on-active-shadow: #2d2d2d;
+		--ck-color-editor-toolbar-button-on-disabled-background: transparent;
+		--ck-color-editor-toolbar-button-on-disabled-border: transparent;
+
+		--ck-color-editor-dropdown-background: #535254;
+
+		/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+
+		--ck-color-image-caption-background: #f7f7f7;
+		--ck-color-image-caption-text: #333;
+
+		/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+
+		--ck-color-widget-border-blurred: #ddd;
+		--ck-color-widget-border-hover: #FFD25C;
+		--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+
+		/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
+
+		--ck-color-link-default: #81eaff;
+	}
+</style>
+
+<h2>Editor-classic</h2>
+
+<div id="editor-classic">
+	<h2>Heading 1</h2>
+	<p>Paragraph</p>
+	<p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
+</div>
+
+<h2>Editor-balloon</h2>
+
+<div id="editor-balloon">
+	<h2>Heading 1</h2>
+	<p>Paragraph</p>
+	<p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
+</div>

+ 42 - 0
packages/ckeditor5-theme-lark/tests/manual/inverted.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, window, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+
+const config = {
+	plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic, Strikethrough, Code, Link ],
+	toolbar: [ 'headings', '|', 'bold', 'italic', 'strikethrough', 'code', '|', 'link', '|', 'undo', 'redo' ]
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-classic' ), config )
+	.then( editor => {
+		window.classicEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+BalloonEditor
+	.create( document.querySelector( '#editor-balloon' ), config )
+	.then( editor => {
+		window.balloonEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 1 - 0
packages/ckeditor5-theme-lark/tests/manual/inverted.md

@@ -0,0 +1 @@
+1. TODO