diff --git a/src/button/buttonview.js b/src/button/buttonview.js
index 3ea95b01..1d532025 100644
--- a/src/button/buttonview.js
+++ b/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.
  *
diff --git a/src/dropdown/dropdownview.js b/src/dropdown/dropdownview.js
index 88de7f08..04840c28 100644
--- a/src/dropdown/dropdownview.js
+++ b/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.
  *
diff --git a/src/editorui/boxed/boxededitoruiview.js b/src/editorui/boxed/boxededitoruiview.js
index 56c1065e..ee9ff108 100644
--- a/src/editorui/boxed/boxededitoruiview.js
+++ b/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;
+	}
 }
diff --git a/src/editorui/editoruiview.js b/src/editorui/editoruiview.js
index 6c644e0d..dc087de8 100644
--- a/src/editorui/editoruiview.js
+++ b/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.
  *
diff --git a/src/icon/iconview.js b/src/icon/iconview.js
index cec1c56b..4e8aea85 100644
--- a/src/icon/iconview.js
+++ b/src/icon/iconview.js
@@ -11,6 +11,8 @@
 
 import View from '../view';
 
+import '../../theme/components/icon/icon.css';
+
 /**
  * The icon view class.
  *
diff --git a/src/inputtext/inputtextview.js b/src/inputtext/inputtextview.js
index 76db9dca..bafa39e4 100644
--- a/src/inputtext/inputtextview.js
+++ b/src/inputtext/inputtextview.js
@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/inputtext/inputtext.css';
+
 /**
  * The text input view class.
  *
diff --git a/src/label/labelview.js b/src/label/labelview.js
index 18853100..7fc95297 100644
--- a/src/label/labelview.js
+++ b/src/label/labelview.js
@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/label/label.css';
+
 /**
  * The label view class.
  *
diff --git a/src/list/listview.js b/src/list/listview.js
index c2dbf2d8..4ded8185 100644
--- a/src/list/listview.js
+++ b/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.
  *
diff --git a/src/panel/balloon/balloonpanelview.js b/src/panel/balloon/balloonpanelview.js
index 6ac8bc07..5fe3acdf 100644
--- a/src/panel/balloon/balloonpanelview.js
+++ b/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;
 
diff --git a/src/panel/sticky/stickypanelview.js b/src/panel/sticky/stickypanelview.js
index 84864f14..34ca0fcf 100644
--- a/src/panel/sticky/stickypanelview.js
+++ b/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' );
 
 /**
diff --git a/src/toolbar/toolbarview.js b/src/toolbar/toolbarview.js
index 18533bf8..2de25be0 100644
--- a/src/toolbar/toolbarview.js
+++ b/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.
  *
diff --git a/src/tooltip/tooltipview.js b/src/tooltip/tooltipview.js
index ef524198..98d031b1 100644
--- a/src/tooltip/tooltipview.js
+++ b/src/tooltip/tooltipview.js
@@ -9,6 +9,8 @@
 
 import View from '../view';
 
+import '../../theme/components/tooltip/tooltip.css';
+
 /**
  * The tooltip view class.
  *
diff --git a/src/view.js b/src/view.js
index 8f6c17de..044e12ec 100644
--- a/src/view.js
+++ b/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
diff --git a/tests/dropdown/manual/dropdown.js b/tests/dropdown/manual/dropdown.js
index b67f7a9c..f09b4269 100644
--- a/tests/dropdown/manual/dropdown.js
+++ b/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( {
diff --git a/tests/manual/icon/icon.js b/tests/manual/icon/icon.js
index 16eafe74..cf17605b 100644
--- a/tests/manual/icon/icon.js
+++ b/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 = `
diff --git a/tests/manual/panel/balloon/balloonpanelview.js b/tests/manual/panel/balloon/balloonpanelview.js
index 6a160e37..318ab571 100644
--- a/tests/manual/panel/balloon/balloonpanelview.js
+++ b/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' );
diff --git a/tests/manual/panel/sticky/stickypanelview.js b/tests/manual/panel/sticky/stickypanelview.js
index b63e7be4..a1e3e216 100644
--- a/tests/manual/panel/sticky/stickypanelview.js
+++ b/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'
diff --git a/tests/manual/tickets/126/1.js b/tests/manual/tickets/126/1.js
index 854fa8bb..dde2610b 100644
--- a/tests/manual/tickets/126/1.js
+++ b/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();
 
diff --git a/theme/components/button.scss b/theme/components/button.scss
deleted file mode 100644
index 282341e1..00000000
--- a/theme/components/button.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-button,
-a.ck-button {
-	display: inline-block;
-	position: relative;
-
-	@include ck-unselectable();
-	@include ck-tooltip_enabled();
-
-	&.ck-button_with-text {
-		.ck-button__label {
-			display: block;
-		}
-	}
-
-	&:hover {
-		@include ck-tooltip_visible();
-	}
-
-	// Get rid of the native focus outline around the tooltip when focused (but not :hover).
-	&:focus:not(:hover) {
-		@include ck-tooltip_disabled();
-	}
-
-	.ck-button__label {
-		display: none;
-	}
-}
diff --git a/theme/components/button/button.css b/theme/components/button/button.css
new file mode 100644
index 00000000..383da6c1
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/theme/components/dropdown.scss b/theme/components/dropdown.scss
deleted file mode 100644
index 21d96682..00000000
--- a/theme/components/dropdown.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.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: ck-z();
-
-		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: ck-z( 'modal' );
-
-	position: absolute;
-	left: 0px;
-	transform: translateY( 100% );
-
-	&-visible {
-		display: inline-block;
-	}
-}
diff --git a/theme/components/dropdown/dropdown.css b/theme/components/dropdown/dropdown.css
new file mode 100644
index 00000000..be4c1b76
--- /dev/null
+++ b/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;
+}
diff --git a/theme/components/editor.scss b/theme/components/editor.scss
deleted file mode 100644
index 5cbcf642..00000000
--- a/theme/components/editor.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@mixin ck-editor-toolbar {
-	.ck-button {
-		// Make sure the next button does not overlap focused one.
-		&:focus {
-			z-index: ck-z();
-		}
-
-		// Tooltip tweaks:
-		//    1. Don't display tooltips for disabled buttons in the toolbar,
-		//       they're unavailable anyway.
-		//    2. Don't display tooltips for buttons with text; text explains
-		//       the button anyway.
-		&.ck-button_with-text:not(.ck-dropdown__button),
-		&.ck-disabled {
-			@include ck-tooltip_disabled();
-		}
-	}
-}
diff --git a/theme/components/editorui/editorui.css b/theme/components/editorui/editorui.css
new file mode 100644
index 00000000..3ebbb9b1
--- /dev/null
+++ b/theme/components/editorui/editorui.css
@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2017, 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.
+ */
diff --git a/theme/components/icon.scss b/theme/components/icon.scss
deleted file mode 100644
index bf4e80b3..00000000
--- a/theme/components/icon.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_fonts';
-
-/**
- * Default width/height of an icon. Note that it equals the default
- * height of the line of text, so e.g. it matches the height of the
- * button's label.
- */
-$ck-icon-min-size: round( $ck-font-size-base * $ck-line-height-base );
-
-svg.ck-icon {
-	min-width: $ck-icon-min-size;
-	min-height: $ck-icon-min-size;
-
-	font-size: 1em;
-	vertical-align: middle;
-	color: inherit;
-
-	// Inherit cursor style (#5).
-	cursor: inherit;
-
-	* {
-		// Inherit cursor style (#5).
-		cursor: inherit;
-
-		// Allows dynamic coloring of the icons.
-		color: inherit;
-
-		// Needed by FF.
-		fill: currentColor;
-	}
-}
diff --git a/theme/components/icon/icon.css b/theme/components/icon/icon.css
new file mode 100644
index 00000000..156a8b17
--- /dev/null
+++ b/theme/components/icon/icon.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+svg.ck-icon {
+	font-size: 1em;
+	vertical-align: middle;
+	color: inherit;
+
+	/* Inherit cursor style (#5). */
+	cursor: inherit;
+
+	& * {
+		/* Inherit cursor style (#5). */
+		cursor: inherit;
+
+		/* Allows dynamic coloring of the icons. */
+		color: inherit;
+
+		/* Needed by FF. */
+		fill: currentColor;
+	}
+}
diff --git a/theme/components/inputtext/inputtext.css b/theme/components/inputtext/inputtext.css
new file mode 100644
index 00000000..3ebbb9b1
--- /dev/null
+++ b/theme/components/inputtext/inputtext.css
@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2017, 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.
+ */
diff --git a/theme/components/label.scss b/theme/components/label.scss
deleted file mode 100644
index e0811fda..00000000
--- a/theme/components/label.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-label {
-	display: block;
-}
-
-.cke-voice-label {
-	display: none;
-}
diff --git a/theme/components/label/label.css b/theme/components/label/label.css
new file mode 100644
index 00000000..05e8e77d
--- /dev/null
+++ b/theme/components/label/label.css
@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-label {
+	display: block;
+}
+
+.cke-voice-label {
+	display: none;
+}
diff --git a/theme/components/list.scss b/theme/components/list.scss
deleted file mode 100644
index 24f68441..00000000
--- a/theme/components/list.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-list {
-	@include ck-unselectable();
-
-	&__item {
-		display: block;
-	}
-}
diff --git a/theme/components/list/list.css b/theme/components/list/list.css
new file mode 100644
index 00000000..7862f162
--- /dev/null
+++ b/theme/components/list/list.css
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../mixins/_unselectable.css";
+
+.ck-list {
+	@mixin ck-unselectable;
+
+	/* Crop the the items when the list has huge border-radius. */
+	overflow: hidden;
+}
+
+.ck-list__item {
+	display: block;
+
+	&:focus {
+		position: relative;
+		z-index: var(--ck-z-default);
+	}
+}
diff --git a/theme/components/panel/balloonpanel.css b/theme/components/panel/balloonpanel.css
new file mode 100644
index 00000000..c10bd2c7
--- /dev/null
+++ b/theme/components/panel/balloonpanel.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-balloon-panel {
+	display: none;
+	position: absolute;
+
+	z-index: var(--ck-z-modal);
+
+	&.ck-balloon-panel_with-arrow {
+		&::before,
+		&::after {
+			content: "";
+			position: absolute;
+		}
+
+		&::before {
+			z-index: var(--ck-z-default);
+		}
+
+		&::after {
+			z-index: calc(var(--ck-z-default) + 1 );
+		}
+	}
+
+	&[class*="arrow_n"] {
+		&::before {
+			z-index: var(--ck-z-default);
+		}
+
+		&::after {
+			z-index: calc(var(--ck-z-default) + 1);
+		}
+	}
+
+	&[class*="arrow_s"] {
+		&::before {
+			z-index: var(--ck-z-default);
+		}
+
+		&::after {
+			z-index: calc(var(--ck-z-default) + 1);
+		}
+	}
+}
+
+.ck-balloon-panel_visible {
+	display: block;
+}
diff --git a/theme/components/panel/balloonpanel.scss b/theme/components/panel/balloonpanel.scss
deleted file mode 100644
index f3d4f622..00000000
--- a/theme/components/panel/balloonpanel.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-balloon-panel {
-	display: none;
-	position: absolute;
-
-	z-index: ck-z( 'modal' );
-
-	&.ck-balloon-panel_with-arrow {
-		&:before,
-		&:after {
-			content: "";
-			position: absolute;
-		}
-
-		&:before {
-			z-index: ck-z();
-		}
-
-		&:after {
-			z-index: ck-z( 'default', 1 );
-		}
-	}
-
-	&.ck-balloon-panel_arrow {
-		&_n,
-		&_ne,
-		&_nw {
-			&:before {
-				z-index: ck-z( 'default' );
-			}
-
-			&:after {
-				z-index: ck-z( 'default', 1 );
-			}
-		}
-
-		&_s,
-		&_se,
-		&_sw {
-			&:before {
-				z-index: ck-z( 'default' );
-			}
-
-			&:after {
-				z-index: ck-z( 'default', 1 );
-			}
-		}
-	}
-
-	&_visible {
-		display: block;
-	}
-}
diff --git a/theme/components/panel/stickypanel.css b/theme/components/panel/stickypanel.css
new file mode 100644
index 00000000..0ce07c52
--- /dev/null
+++ b/theme/components/panel/stickypanel.css
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-editor {
+	& .ck-sticky-panel {
+		& .ck-sticky-panel__content_sticky {
+			z-index: var(--ck-z-modal); /* #315 */
+			position: fixed;
+			top: 0;
+		}
+
+		& .ck-sticky-panel__content_sticky_bottom-limit {
+			top: auto;
+			position: absolute;
+		}
+	}
+}
diff --git a/theme/components/panel/stickypanel.scss b/theme/components/panel/stickypanel.scss
deleted file mode 100644
index f20f0d38..00000000
--- a/theme/components/panel/stickypanel.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@include ck-editor {
-	.ck-sticky-panel {
-		.ck-sticky-panel__content_sticky {
-			z-index: ck-z( 'modal' ); // #315
-			position: fixed;
-			top: 0;
-
-			&_bottom-limit {
-				top: auto;
-				position: absolute;
-			}
-		}
-	}
-}
diff --git a/theme/components/reset.scss b/theme/components/reset.scss
deleted file mode 100644
index 25f0a019..00000000
--- a/theme/components/reset.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Resets an element, ignoring its children.
- */
-.ck-reset {
-	// Do not include inheritable rules here.
-	box-sizing: border-box;
-	width: auto;
-	height: auto;
-	position: static;
-}
-
-/**
- * Resets an element AND its children.
- */
-.ck-reset_all {
-	&, *, a, textarea {
-		// The following must be identical to .ck-reset.
-		@extend .ck-reset;
-	}
-}
diff --git a/theme/components/toolbar/toolbar.css b/theme/components/toolbar/toolbar.css
new file mode 100644
index 00000000..c780db36
--- /dev/null
+++ b/theme/components/toolbar/toolbar.css
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../mixins/_unselectable.css";
+
+.ck-toolbar {
+	@mixin ck-unselectable;
+}
+
+.ck-toolbar__separator {
+	display: inline-block;
+}
+
+.ck-toolbar__newline {
+	display: block;
+	clear: left;
+}
diff --git a/theme/components/toolbar/toolbar.scss b/theme/components/toolbar/toolbar.scss
deleted file mode 100644
index f0eaa16e..00000000
--- a/theme/components/toolbar/toolbar.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-toolbar {
-	@include ck-unselectable();
-
-	&__separator {
-		display: inline-block;
-	}
-
-	&__newline {
-		display: block;
-		clear: left;
-	}
-}
diff --git a/theme/components/tooltip.scss b/theme/components/tooltip.scss
deleted file mode 100644
index 8f1a1022..00000000
--- a/theme/components/tooltip.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Enables the tooltip, which is the tooltip is in DOM but
- * not yet displayed.
- */
-@mixin ck-tooltip_enabled {
-	.ck-tooltip {
-		display: block;
-	}
-}
-
-/**
- * Disables the tooltip making it disappear from DOM.
- */
-@mixin ck-tooltip_disabled {
-	.ck-tooltip {
-		display: none;
-	}
-}
-
-/**
- * Shows the tooltip, which is already in DOM.
- * Requires `ck-tooltip_enabled` first.
- */
-@mixin ck-tooltip_visible {
-	.ck-tooltip {
-		visibility: visible;
-		opacity: 1;
-	}
-}
-
-.ck-tooltip,
-.ck-tooltip__text::after {
-	position: absolute;
-
-	// Without this, hovering the tooltip could keep it visible.
-	pointer-events: none;
-
-	// This is to get rid of flickering when transitioning opacity in Chrome.
-	// It's weird but it works.
-	-webkit-backface-visibility: hidden;
-}
-
-.ck-tooltip {
-	// Tooltip is hidden by default.
-	visibility: hidden;
-	opacity: 0;
-	display: none;
-	z-index: ck-z( 'modal' );
-}
-
-.ck-tooltip__text {
-	display: inline-block;
-}
-
-.ck-tooltip__text::after {
-	content: "";
-	width: 0;
-	height: 0;
-}
diff --git a/theme/components/tooltip/mixins/_tooltip.css b/theme/components/tooltip/mixins/_tooltip.css
new file mode 100644
index 00000000..d1b4cb3f
--- /dev/null
+++ b/theme/components/tooltip/mixins/_tooltip.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Enables the tooltip, which is the tooltip is in DOM but
+ * not yet displayed.
+ */
+@define-mixin ck-tooltip_enabled {
+	& .ck-tooltip {
+		display: block;
+	}
+}
+
+/**
+ * Disables the tooltip making it disappear from DOM.
+ */
+@define-mixin ck-tooltip_disabled {
+	& .ck-tooltip {
+		display: none;
+	}
+}
+
+/**
+ * Shows the tooltip, which is already in DOM.
+ * Requires `ck-tooltip_enabled` first.
+ */
+@define-mixin ck-tooltip_visible {
+	& .ck-tooltip {
+		visibility: visible;
+		opacity: 1;
+	}
+}
diff --git a/theme/components/tooltip/tooltip.css b/theme/components/tooltip/tooltip.css
new file mode 100644
index 00000000..7a7a0b47
--- /dev/null
+++ b/theme/components/tooltip/tooltip.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-tooltip,
+.ck-tooltip__text::after {
+	position: absolute;
+
+	/* Without this, hovering the tooltip could keep it visible. */
+	pointer-events: none;
+
+	/* This is to get rid of flickering when transitioning opacity in Chrome.
+	It's weird but it works. */
+	-webkit-backface-visibility: hidden;
+}
+
+.ck-tooltip {
+	/* Tooltip is hidden by default. */
+	visibility: hidden;
+	opacity: 0;
+	display: none;
+	z-index: var(--ck-z-modal);
+}
+
+.ck-tooltip__text {
+	display: inline-block;
+
+	&::after {
+		content: "";
+		width: 0;
+		height: 0;
+	}
+}
+
diff --git a/theme/globals/_hidden.css b/theme/globals/_hidden.css
new file mode 100644
index 00000000..b8d434e2
--- /dev/null
+++ b/theme/globals/_hidden.css
@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * A class which hides an element in DOM.
+ */
+.ck-hidden {
+	/* Override selector specificity. Otherwise, all elements with some display
+	style defined will override this one, which is not a desired result. */
+	display: none !important;
+}
diff --git a/theme/globals/_reset.css b/theme/globals/_reset.css
new file mode 100644
index 00000000..c32fbb44
--- /dev/null
+++ b/theme/globals/_reset.css
@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-reset,
+.ck-reset_all,
+.ck-reset_all * {
+	box-sizing: border-box;
+	width: auto;
+	height: auto;
+	position: static;
+}
diff --git a/theme/globals/_zindex.css b/theme/globals/_zindex.css
new file mode 100644
index 00000000..997bd418
--- /dev/null
+++ b/theme/globals/_zindex.css
@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-z-default: 1;
+	--ck-z-modal: 999;
+}
diff --git a/theme/globals/globals.css b/theme/globals/globals.css
new file mode 100644
index 00000000..4dd8ca2f
--- /dev/null
+++ b/theme/globals/globals.css
@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "./_hidden.css";
+@import "./_reset.css";
+@import "./_zindex.css";
diff --git a/theme/helpers/_editor.scss b/theme/helpers/_editor.scss
deleted file mode 100644
index 85b33381..00000000
--- a/theme/helpers/_editor.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Wraps (S)CSS into .ck-editor namespace.
- */
-@mixin ck-editor {
-	.ck-editor {
-		@content;
-	}
-}
diff --git a/theme/helpers/_states.scss b/theme/helpers/_states.scss
deleted file mode 100644
index 0ee19dfa..00000000
--- a/theme/helpers/_states.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Makes element unselectable.
- */
-@mixin ck-unselectable() {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-/**
- * A class which hides an element in DOM.
- */
-.ck-hidden {
-	// Override selector specificity. Otherwise, all elements with some display
-	// style defined will override this one, which is not a desired result.
-	display: none !important;
-}
diff --git a/theme/helpers/_zindex.scss b/theme/helpers/_zindex.scss
deleted file mode 100644
index b4cbc686..00000000
--- a/theme/helpers/_zindex.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-def-z: (
-	'default': 1,
-	'modal': 999
-);
-
-@function ck-z( $layer: 'default', $index: 0 ) {
-	@return map-get( $ck-def-z, $layer ) + $index;
-}
diff --git a/theme/mixins/_unselectable.css b/theme/mixins/_unselectable.css
new file mode 100644
index 00000000..48227560
--- /dev/null
+++ b/theme/mixins/_unselectable.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Makes element unselectable.
+ */
+@define-mixin ck-unselectable {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none
+}
diff --git a/theme/theme.scss b/theme/theme.scss
deleted file mode 100644
index aee36297..00000000
--- a/theme/theme.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import 'helpers/states';
-@import 'helpers/zindex';
-@import 'helpers/editor';
-
-@import 'components/reset';
-@import 'components/icon';
-@import 'components/tooltip';
-@import 'components/button';
-@import 'components/toolbar/toolbar';
-@import 'components/dropdown';
-@import 'components/list';
-@import 'components/label';
-@import 'components/editor';
-@import 'components/panel/balloonpanel';
-@import 'components/panel/stickypanel';