Merge pull request #345 from ckeditor/t/144

Other: Migrated the package styles from SASS to PostCSS to bring theme support and avoid duplicates in some editor builds. Closes #144. Closes ckeditor/ckeditor5#420.

BREAKING CHANGE: The styles are no longer developed in SASS which means the `.scss` files became unavailable. Please refer to the [Theme Customization](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.

src/button/buttonview.js

@@ -13,6 +13,8 @@ import TooltipView from '../tooltip/tooltipview';
 
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
+import '../../theme/components/button/button.css';
+
 /**
  * The button view class.
  *

src/dropdown/dropdownview.js

@@ -11,6 +11,8 @@ import View from '../view';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+import '../../theme/components/dropdown/dropdown.css';
+
 /**
  * The dropdown view class.
  *

src/editorui/boxed/boxededitoruiview.js

@@ -8,6 +8,7 @@
  */
 
 import EditorUIView from '../../editorui/editoruiview';
+import LabelView from '../../label/labelview';
 import uid from '@ckeditor/ckeditor5-utils/src/uid';
 
 /**
@@ -25,7 +26,6 @@ export default class BoxedEditorUIView extends EditorUIView {
 	constructor( locale ) {
 		super( locale );
 
-		const t = this.t;
 		const ariaLabelUid = uid();
 
 		/**
@@ -46,6 +46,15 @@ export default class BoxedEditorUIView extends EditorUIView {
 		 */
 		this.main = this.createCollection();
 
+		/**
+		 * Voice label of the UI.
+		 *
+		 * @protected
+		 * @readonly
+		 * @member {module:ui/view~View} #_voiceLabelView
+		 */
+		this._voiceLabelView = this._createVoiceLabel( ariaLabelUid );
+
 		this.setTemplate( {
 			tag: 'div',
 
@@ -62,17 +71,7 @@ export default class BoxedEditorUIView extends EditorUIView {
 			},
 
 			children: [
-				{
-					tag: 'span',
-					attributes: {
-						id: `cke-editor__aria-label_${ ariaLabelUid }`,
-						class: 'cke-voice-label'
-					},
-					children: [
-						// TODO: Editor name?
-						t( 'Rich Text Editor' )
-					]
-				},
+				this._voiceLabelView,
 				{
 					tag: 'div',
 					attributes: {
@@ -92,4 +91,26 @@ export default class BoxedEditorUIView extends EditorUIView {
 			]
 		} );
 	}
+
+	/**
+	 * Creates a voice label view instance.
+	 *
+	 * @private
+	 * @returns {module:ui/label/labelview~LabelView}
+	 */
+	_createVoiceLabel( ariaLabelUid ) {
+		const t = this.t;
+		const voiceLabel = new LabelView();
+
+		voiceLabel.text = t( 'Rich Text Editor' );
+
+		voiceLabel.extendTemplate( {
+			attributes: {
+				id: `cke-editor__aria-label_${ ariaLabelUid }`,
+				class: 'cke-voice-label'
+			}
+		} );
+
+		return voiceLabel;
+	}
 }

src/editorui/editoruiview.js

@@ -12,6 +12,8 @@
 import View from '../view';
 import Template from '../template';
 
+import '../../theme/components/editorui/editorui.css';
+
 /**
  * The editor UI view class. Base class for the editor main views.
  *

src/icon/iconview.js

@@ -11,6 +11,8 @@
 
 import View from '../view';
 
+import '../../theme/components/icon/icon.css';
+
 /**
  * The icon view class.
  *

src/inputtext/inputtextview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/inputtext/inputtext.css';
+
 /**
  * The text input view class.
  *

src/label/labelview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/label/label.css';
+
 /**
  * The label view class.
  *

src/list/listview.js

@@ -12,6 +12,8 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 
+import '../../theme/components/list/list.css';
+
 /**
  * The list view class.
  *

src/panel/balloon/balloonpanelview.js

@@ -14,6 +14,8 @@ import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
+import '../../../theme/components/panel/balloonpanel.css';
+
 const toPx = toUnit( 'px' );
 const defaultLimiterElement = global.document.body;
 

src/panel/sticky/stickypanelview.js

@@ -12,6 +12,8 @@ import View from '../../view';
 import Template from '../../template';
 import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
 
+import '../../../theme/components/panel/stickypanel.css';
+
 const toPx = toUnit( 'px' );
 
 /**

src/toolbar/toolbarview.js

@@ -15,6 +15,8 @@ import ToolbarSeparatorView from './toolbarseparatorview';
 import preventDefault from '../bindings/preventdefault.js';
 import log from '@ckeditor/ckeditor5-utils/src/log';
 
+import '../../theme/components/toolbar/toolbar.css';
+
 /**
  * The toolbar view class.
  *

src/tooltip/tooltipview.js

@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/tooltip/tooltip.css';
+
 /**
  * The tooltip view class.
  *

src/view.js

@@ -16,6 +16,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import isIterable from '@ckeditor/ckeditor5-utils/src/isiterable';
 
+import '../theme/globals/globals.css';
+
 /**
  * The basic view class, which represents an HTML element created out of a
  * {@link module:ui/view~View#template}. Views are building blocks of the user interface and handle

tests/dropdown/manual/dropdown.js

@@ -11,7 +11,6 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import createDropdown from '../../../src/dropdown/createdropdown';
 import createListDropdown from '../../../src/dropdown/list/createlistdropdown';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 import testUtils from '../../_utils/utils';
 
 const ui = testUtils.createTestUIView( {

tests/manual/icon/icon.js

@@ -7,8 +7,6 @@
 
 import IconView from '../../../src/icon/iconview';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 const wrapper = document.querySelector( '#inline-svg' );
 
 const icon = `

tests/manual/panel/balloon/balloonpanelview.js

@@ -6,7 +6,6 @@
 /* globals document */
 
 import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
 
 const defaultPositions = BalloonPanelView.defaultPositions;
 const container = document.querySelector( '#container' );

tests/manual/panel/sticky/stickypanelview.js

@@ -6,8 +6,6 @@
 import testUtils from '../../../_utils/utils';
 import StickyPanelView from '../../../../src/panel/sticky/stickypanelview';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 const ui = testUtils.createTestUIView( {
 	stickyToTheTop: '.ck-sticky_to-the-top .ck-editor__top',
 	stickyToTheBox: '.ck-sticky_to-the-box .ck-editor__top'

tests/manual/tickets/126/1.js

@@ -7,8 +7,6 @@
 
 import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
 
-import '@ckeditor/ckeditor5-theme-lark/theme/theme.scss';
-
 window.createPanel = selector => {
 	const view = new BalloonPanelView();
 

theme/components/button/button.css

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../mixins/_unselectable.css";
+@import "../tooltip/mixins/_tooltip.css";
+
+.ck-button,
+a.ck-button {
+	@mixin ck-unselectable;
+	@mixin ck-tooltip_enabled;
+
+	display: inline-block;
+	position: relative;
+
+	&.ck-button_with-text {
+		& .ck-button__label {
+			display: block;
+		}
+	}
+
+	&:hover {
+		@mixin ck-tooltip_visible;
+	}
+
+	/* Get rid of the native focus outline around the tooltip when focused (but not :hover). */
+	&:focus:not(:hover) {
+		@mixin ck-tooltip_disabled;
+	}
+
+	& .ck-button__label {
+		display: none;
+	}
+}

theme/components/dropdown/dropdown.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-dropdown {
+	display: inline-block;
+	position: relative;
+
+	/* A triangle displayed to indicate this is actually a dropdown. */
+	&::after {
+		content: '';
+		width: 0;
+		height: 0;
+		pointer-events: none;
+		z-index: var(--ck-z-default);
+
+		position: absolute;
+		top: 50%;
+		transform: translate( 0, -50% );
+	}
+}
+
+.ck-dropdown__panel {
+	/* This is to get rid of flickering when the tooltip is shown under the panel,
+	which looks like the panel moves vertically a pixel down and up. */
+	-webkit-backface-visibility: hidden;
+
+	display: none;
+	z-index: var(--ck-z-modal);
+
+	position: absolute;
+	left: 0px;
+	transform: translateY( 100% );
+}
+
+.ck-dropdown__panel-visible {
+	display: inline-block;
+}