Ver código fonte

Merge pull request #2 from ckeditor/t/1

t/1: Implement the themes architecture
Aleksander Nowodzinski 9 anos atrás
pai
commit
b5114b2f03
31 arquivos alterados com 1116 adições e 0 exclusões
  1. 26 0
      packages/ckeditor5-theme-lark/tests/.jshintrc
  2. 240 0
      packages/ckeditor5-theme-lark/tests/manual/theme.html
  3. 51 0
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  4. 12 0
      packages/ckeditor5-theme-lark/tests/manual/theme.md
  5. 120 0
      packages/ckeditor5-theme-lark/theme/components/button.scss
  6. 54 0
      packages/ckeditor5-theme-lark/theme/components/editor.scss
  7. 48 0
      packages/ckeditor5-theme-lark/theme/components/icon.scss
  8. 77 0
      packages/ckeditor5-theme-lark/theme/components/reset.scss
  9. 27 0
      packages/ckeditor5-theme-lark/theme/components/toolbar.scss
  10. 69 0
      packages/ckeditor5-theme-lark/theme/helpers/_colors.scss
  11. 13 0
      packages/ckeditor5-theme-lark/theme/helpers/_editor.scss
  12. 43 0
      packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss
  13. 22 0
      packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss
  14. 37 0
      packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss
  15. 36 0
      packages/ckeditor5-theme-lark/theme/helpers/_states.scss
  16. 14 0
      packages/ckeditor5-theme-lark/theme/icons/align-center.svg
  17. 14 0
      packages/ckeditor5-theme-lark/theme/icons/align-left.svg
  18. 14 0
      packages/ckeditor5-theme-lark/theme/icons/align-right.svg
  19. 14 0
      packages/ckeditor5-theme-lark/theme/icons/bold.svg
  20. 14 0
      packages/ckeditor5-theme-lark/theme/icons/bulletedlist.svg
  21. 14 0
      packages/ckeditor5-theme-lark/theme/icons/image.svg
  22. 14 0
      packages/ckeditor5-theme-lark/theme/icons/italic.svg
  23. 17 0
      packages/ckeditor5-theme-lark/theme/icons/link.svg
  24. 19 0
      packages/ckeditor5-theme-lark/theme/icons/numberedlist.svg
  25. 16 0
      packages/ckeditor5-theme-lark/theme/icons/picker.svg
  26. 14 0
      packages/ckeditor5-theme-lark/theme/icons/quote.svg
  27. 16 0
      packages/ckeditor5-theme-lark/theme/icons/source.svg
  28. 14 0
      packages/ckeditor5-theme-lark/theme/icons/table.svg
  29. 15 0
      packages/ckeditor5-theme-lark/theme/icons/underline.svg
  30. 17 0
      packages/ckeditor5-theme-lark/theme/icons/unlink.svg
  31. 15 0
      packages/ckeditor5-theme-lark/theme/theme.scss

+ 26 - 0
packages/ckeditor5-theme-lark/tests/.jshintrc

@@ -0,0 +1,26 @@
+{
+	"browser": true,
+	"esnext": true,
+
+	"expr": true,
+	"immed": true,
+	"latedef": "nofunc",
+	"loopfunc": true,
+	"noarg": true,
+	"nonbsp": true,
+	"strict": "global",
+	"undef": true,
+	"unused": true,
+	"varstmt": true,
+
+	"globals": {
+		"after": false,
+		"afterEach": false,
+		"before": false,
+		"beforeEach": false,
+		"describe": false,
+		"expect": false,
+		"it": false,
+		"sinon": false
+	}
+}

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

@@ -0,0 +1,240 @@
+<head>
+	<link rel="stylesheet" href="%APPS_DIR%ckeditor/build/amd/theme/ckeditor.css">
+	<style>
+		.wrappable {
+			white-space: initial;
+			line-height: 3em;
+		}
+
+		#buttonResponsive div > div {
+			font-size: 1.3em;
+			line-height: 2.8em;
+		}
+
+		#buttonResponsive div .ck-button {
+			font-size: inherit;
+		}
+
+		@keyframes iconColorChange {
+			0% {
+				color: white;
+				background: orange;
+			}
+			50% {
+				color: orange;
+				background: white;
+			}
+			100% {
+				color: white;
+				background: orange;
+			}
+		}
+
+		#iconColorChange {
+			border: 0;
+			animation: iconColorChange 3s infinite;
+		}
+	</style>
+</head>
+
+<div id="editor"></div>
+
+<h2>Icon</h2>
+<h3>Icon: In–text</h3>
+
+<p>Icons
+	<svg class="ck-icon"><use xlink:href="#ck-icon-quote"></use></svg>
+	and
+	<svg class="ck-icon"><use xlink:href="#ck-icon-bold"></use></svg> in a plain paragraph.
+	<span style="color: red">
+		Icons
+		<svg class="ck-icon"><use xlink:href="#ck-icon-link"></use></svg>
+		follow the
+		<svg class="ck-icon"><use xlink:href="#ck-icon-source"></use></svg>
+		color of text.
+	</span>
+</p>
+
+<h3>Icon: Availability</h3>
+<p id="icons"></p>
+
+<hr/>
+
+<h2>Button</h2>
+<h3>Button: States</h3>
+
+<div class="ck-reset-all">
+	<button class="ck-button">State: normal (none)</button>
+	<button class="ck-button ck-disabled">State: disabled</button>
+	<button class="ck-button ck-on">State: on</button>
+</div>
+
+<h3>Button: Types</h3>
+
+<div class="ck-reset-all">
+	<button class="ck-button ck-button-action">Action button</button>
+	<button class="ck-button ck-rounded-corners">Rounded corners</button>
+	<button class="ck-button ck-button-bold">Bold text</button>
+</div>
+
+<h3>Button: Icon</h3>
+<div class="ck-reset-all" >
+	<div id="buttonIcon"></div>
+
+	<br/>
+
+	<button class="ck-button">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		Icon to the left
+	</button>
+	<button class="ck-button">
+		<svg class="ck-icon ck-icon-right"><use xlink:href="#ck-icon-bold"></use></svg>
+		Icon to the right (RTL)
+	</button>
+	<button class="ck-button" style="border-radius: 100px; border: 0">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		Custom style with icon
+	</button>
+
+	<br/>
+	<br/>
+
+	<button class="ck-button ck-disabled">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		Disabled with icon
+	</button>
+
+	<button class="ck-button ck-disabled ck-button-notext">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+	</button>
+	<button id="iconColorChange" class="ck-button">
+		<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		Icon follows text color
+	</button>
+</div>
+
+<h3>Button: Responsiveness</h3>
+<div id="buttonResponsive" class="ck-reset-all">
+	<div>
+		<button class="ck-button">A button</button>
+		<button class="ck-button ck-button-action">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+			Image
+		</button>
+		<button class="ck-button">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+			Bold
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		</button>
+	</div>
+</div>
+
+<hr/>
+
+<h2>Toolbar</h2>
+
+<h3>Toolbar: Text</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		Just text and some <svg class="ck-icon"><use xlink:href="#ck-icon-bold"></use></svg> icon.
+	</div>
+</div>
+
+<h3>Toolbar: Button</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		<button class="ck-button">A button</button>
+		<button class="ck-button ck-disabled">Disabled button</button>
+		<button class="ck-button ck-button-active">Active button</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		And some text.
+	</div>
+</div>
+
+<h3>Toolbar: Rounded</h3>
+<div class="ck-reset-all">
+	<div class="ck-rounded-corners ck-toolbar">
+		<button class="ck-button">A button which corners are also rounded because of toolbar class</button>
+		<button class="ck-button ck-button-notext"><svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg></button>
+	</div>
+</div>
+
+<h3>Toolbar: Wrapping content</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar" style="width: 80px">
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
+		</button>
+	</div>
+</div>
+
+<h3>Toolbar: Item separators</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		<button class="ck-button">First</button>
+		<button class="ck-button">Second</button>
+		<span class="ck-toolbar-separator"></span>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
+		</button>
+		<span class="ck-toolbar-separator"></span>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		</button>
+	</div>
+</div>
+
+<h3>Toolbar: Multi-row</h3>
+<div class="ck-reset-all">
+	<div class="ck-toolbar">
+		<button class="ck-button">First row</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-bold"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-italic"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-underline"></use></svg>
+		</button>
+		<span class="ck-toolbar-newline"></span>
+		<button class="ck-button">Second row</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-link"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-image"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-table"></use></svg>
+		</button>
+		<button class="ck-button ck-button-notext">
+			<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-source"></use></svg>
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,51 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import IconManagerView from '/ckeditor5/ui/iconmanagerview.js';
+import iconManagerModel from '/theme/iconmanagermodel.js';
+
+function setupIconManager() {
+	const iconManagerView = new IconManagerView( iconManagerModel );
+	document.body.appendChild( iconManagerView.element );
+	iconManagerView.init();
+}
+
+function renderIcons() {
+	const buttonIcons = document.getElementById( 'buttonIcon' );
+	const icons = document.getElementById( 'icons' );
+	const tmp = document.createElement( 'div' );
+
+	iconManagerModel.icons.forEach( i => {
+		tmp.innerHTML = `<svg class="ck-icon"><use xlink:href="#ck-icon-${ i }"></use></svg>`;
+
+		icons.appendChild( tmp.firstChild );
+		icons.appendChild( document.createTextNode( ' ' ) );
+
+		tmp.innerHTML =
+			`<button class="ck-button ck-button-notext">
+				<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-${ i }"></use></svg>
+			</button>`;
+
+		buttonIcons.appendChild( tmp.firstChild );
+		buttonIcons.appendChild( document.createTextNode( ' ' ) );
+	} );
+}
+
+function renderResponsiveButtons() {
+	const responsive = document.getElementById( 'buttonResponsive' );
+	let current = responsive.firstElementChild;
+
+	for ( let i = 3; i--; ) {
+		const clone = current.cloneNode( 1 );
+		current.appendChild( clone );
+		current = clone;
+	}
+}
+
+setupIconManager();
+renderIcons();
+renderResponsiveButtons();

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

@@ -0,0 +1,12 @@
+@bender-ui: collapsed
+@bender-tags: theme
+
+1. Visually observe and make sure all components are styled and displayed correctly.
+2. Check the behavior on `:hover` of buttons and the like.
+3. Check component interaction on `:focus` and `:active`.
+
+## Notes:
+
+* The theme should look the same in each web browser, however there might be some minor quirks related to the engine of the browser like:
+  * text not centered vertically (Firefox)
+  * blurry icons (Firefox)

+ 120 - 0
packages/ckeditor5-theme-lark/theme/components/button.scss

@@ -0,0 +1,120 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Implements a button of given background color.
+ *
+ * @access public
+ * @param {String} $color - Background color of the button.
+ */
+@mixin ck-button( $color ) {
+	border: 1px solid;
+	white-space: nowrap;
+	cursor: pointer;
+	vertical-align: middle;
+	line-height: $ck-icon-size / $ck-font-size-base;
+	padding: ck-spacing( 'small' ) ck-spacing();
+	position: relative;
+
+	@include ck-button-colors( $color );
+	@include ck-focus-shadow();
+}
+
+/**
+ * Implements a button of given background color.
+ *
+ * @access public
+ * @param {String} $color - Background color of the button.
+ */
+@mixin ck-button-colors( $color, $offset: 0 ) {
+	background: ck-color( $color, $offset );
+	border-color: ck-border-color( $color, $offset );
+
+	@include ck-button-state-colors( $color, $offset );
+}
+
+/**
+ * Implements button states.
+ *
+ * @access public
+ * @param {String} $color - Background color of the button.
+ */
+@mixin ck-button-state-colors( $color, $offset: 0 ) {
+	&:hover,
+	&:focus {
+		background: ck-color( $color, $offset - 10 );
+		border-color: ck-border-color( $color, $offset - 10 );
+	}
+
+	&:active {
+		background: ck-color( $color, $offset - 15 );
+		border-color: ck-border-color( $color, $offset - 15 );
+		box-shadow: inset 0 2px 2px ck-color( $color, $offset - 25 );
+	}
+}
+
+/**
+ * A helper to define button–specific icon styles.
+ *
+ * @access public
+ */
+@mixin ck-button-icon {
+	[class*="ck-icon"] {
+		@content;
+	}
+}
+
+.ck-button,
+a.ck-button {
+	display: inline-block;
+	overflow: hidden;
+
+	@include ck-button( 'background' );
+	@include ck-unselectable();
+	@include ck-rounded-corners();
+
+	&.ck-button-notext {
+		padding: ck-spacing( 'small' );
+
+		@include ck-button-icon {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+
+	&.ck-on {
+		@include ck-button( 'foreground' );
+	}
+
+	&-action {
+		text-shadow: 0 -1px ck-color( 'action', -20 );
+		color: ck-color();
+
+		@include ck-button( 'action' );
+
+		&:hover,
+		&:focus,
+		&:active {
+			text-shadow: 0 -1px ck-color( 'action', -40 );
+		}
+	}
+
+	&-bold {
+		font-weight: bold;
+	}
+
+	.ck-icon {
+		use,
+		use * {
+			color: inherit;
+		}
+
+		&-left {
+			margin-left: -#{ck-spacing( 'small' )};
+		}
+
+		&-right {
+			margin-right: -#{ck-spacing( 'small' )};
+		}
+	}
+}

+ 54 - 0
packages/ckeditor5-theme-lark/theme/components/editor.scss

@@ -0,0 +1,54 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+// TODO/NOTE: This along with _editor helper will probably become a creator theme.
+@include ck-editor {
+	.ck-editor-top {
+		.ck-toolbar {
+			border-top: 0;
+			border-left: 0;
+			border-right: 0;
+		}
+	}
+
+	.ck-editor-editable {
+		background: ck-color();
+		overflow: hidden;
+		padding: ck-spacing();
+	}
+
+	.ck-editor-bottom {
+		border-bottom: 0;
+		border-left: 0;
+		border-right: 0;
+
+		padding: ck-spacing();
+	}
+}
+
+.ck-editor,
+.ck-editor-bottom {
+	background: ck-color( 'foreground' );
+	border: 1px solid ck-border-color( 'foreground' );
+}
+
+@include ck-editor {
+	.ck-toolbar {
+		.ck-button {
+			border: 0;
+		}
+
+		// Make sure the next button does not overlap focused one.
+		.ck-button:focus {
+			z-index: 1;
+		}
+
+		.ck-button:not(:hover):not(:focus):not(.ck-on) {
+			background: ck-color( 'foreground' );
+		}
+
+		.ck-button.ck-on {
+			@include ck-button-colors( 'foreground', -10 );
+		}
+	}
+}

+ 48 - 0
packages/ckeditor5-theme-lark/theme/components/icon.scss

@@ -0,0 +1,48 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Default width/height of an icon.
+ *
+ * @access public
+ */
+$ck-icon-size: 20px;
+
+.ck-icon-manager {
+	display: none;
+
+	&-sprite {
+		* {
+			fill: currentColor; // needed by Webkit/Blink
+		}
+	}
+}
+
+.ck-icon {
+	min-width: $ck-icon-size;
+	min-height: $ck-icon-size;
+	width: #{$ck-icon-size / $ck-font-size-base}em;
+	height: #{$ck-icon-size / $ck-font-size-base}em;
+	font-size: 1em;
+	vertical-align: middle;
+	color: inherit;
+
+	&-left {
+		float: left;
+		margin-right: ck-spacing( 'small' );
+	}
+
+	&-right {
+		float: right;
+		margin-left: ck-spacing( 'small' );
+	}
+
+	* {
+		fill: currentColor; // needed by FF
+	}
+
+	use {
+		width: $ck-icon-size;
+		height: $ck-icon-size;
+	}
+}

+ 77 - 0
packages/ckeditor5-theme-lark/theme/components/reset.scss

@@ -0,0 +1,77 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+// Reset for single elements, not their children.
+.ck-reset {
+	// Do not include inheritable rules here.
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	text-decoration: none;
+	vertical-align: middle;
+	transition: none;
+	box-sizing: border-box;
+	width: auto;
+	height: auto;
+	position: static;
+}
+
+// Reset for elements and their children.
+.ck-reset-all {
+	&, *, a, textarea {
+		// These are rule inherited by all children elements.
+		border-collapse: collapse;
+		font: normal normal normal $ck-font-size-base $ck-font-face;
+		color: ck-color( 'text' );
+		text-align: left;
+		white-space: nowrap;
+		cursor: auto;
+		float: none;
+
+		// The following must be identical to .ck-reset.
+		@extend .ck-reset;
+	}
+
+	.ck-rtl * {
+		text-align: right;
+	}
+
+	// Defaults for some elements.
+	iframe {
+		vertical-align: inherit;	// For IE
+	}
+
+	textarea {
+		white-space: pre-wrap;
+	}
+
+	textarea,
+	input[type="text"],
+	input[type="password"] {
+		cursor: text;
+	}
+
+	textarea[disabled],
+	input[type="text"][disabled],
+	input[type="password"][disabled] {
+		cursor: default;
+	}
+
+	fieldset {
+		padding: 10px;
+		border: 2px groove #E0DFE3;
+	}
+
+	table {
+		table-layout: auto;
+	}
+
+	// See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox
+	button::-moz-focus-inner {
+	    padding: 0;
+	    border: 0
+	}
+}
+
+

+ 27 - 0
packages/ckeditor5-theme-lark/theme/components/toolbar.scss

@@ -0,0 +1,27 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-toolbar {
+	line-height: 1;
+	padding: ck-spacing( 'small' );
+	border: 1px solid ck-border-color();
+	white-space: initial;
+
+	@include ck-unselectable();
+	@include ck-rounded-corners();
+
+	&-separator {
+		width: 1px;
+		height: calc( 1em + 2 * #{ck-spacing( 'medium' )} );
+		vertical-align: middle;
+		display: inline-block;
+		background: ck-border-color();
+		margin: 0 ck-spacing( 'tiny' );
+	}
+
+	&-newline {
+		display: block;
+		clear: left;
+		height: ck-spacing( 'small' );
+	}
+}

+ 69 - 0
packages/ckeditor5-theme-lark/theme/helpers/_colors.scss

@@ -0,0 +1,69 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Colors configured by the user.
+ *
+ * @type Map
+ * @access public
+ * @example
+ *		$ck-colors: ( 'foreground': red );
+ * @see $_ck-colors
+ */
+$ck-colors: () !default;
+
+/**
+ * Internal map with default colors.
+ *
+ * @type Map
+ * @access private
+ * @see ck-color-add
+ */
+$_ck-colors: (
+	'action': #61B145,
+	'background': #fff,
+	'focus': #83BFFC,
+	'foreground': #f7f7f7,
+	'text': #333,
+);
+
+/**
+ * Returns a color of given name and lightness offset.
+ *
+ * @access public
+ * @param {String} $name [ 'background' ] - Name of the color.
+ * @param {Number} $offset [ 0 ] - Offset of the lightness.
+ * @return {String}
+ * @see $_ck-colors
+ */
+@function ck-color( $name: 'background', $offset: 0 ) {
+	$colors: map-merge( $_ck-colors, $ck-colors );
+
+	@return scale-color( map-get( $colors, $name ), $lightness: $offset );
+}
+
+/**
+ * Returns a border–color for a given name and lightness offset.
+ *
+ * @access public
+ * @param {String} $name [ 'background' ] - Name of the color.
+ * @param {Number} $offset [ 0 ] - Offset of the lightness.
+ * @return {String}
+ * @see $ck-color
+ */
+@function ck-border-color( $name: 'background', $offset: 0 ) {
+	@return ck-color( $name, $offset - 25 );
+}
+
+/**
+ * Adds a color to internal color map.
+ *
+ * @access public
+ * @example
+ *		@include ck-color-add( ( 'special': yellow, 'hover': #00FF00 ) );
+ * @param {Map} $map - A map with new colors.
+ * @see $_ck-colors
+ */
+@mixin ck-color-add( $map ) {
+	$_ck-colors: map-merge( $_ck-colors, $map ) !global;
+}

+ 13 - 0
packages/ckeditor5-theme-lark/theme/helpers/_editor.scss

@@ -0,0 +1,13 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Wraps (S)CSS into .ck-editor namespace.
+ *
+ * @access public
+ */
+@mixin ck-editor {
+	.ck-editor {
+		@content;
+	}
+}

+ 43 - 0
packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss

@@ -0,0 +1,43 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Base font size.
+ *
+ * @access public
+ * @see $ck-font-sizes
+ */
+$ck-font-size-base: 12px !default;
+
+/**
+ * Base font face.
+ *
+ * @access public
+ */
+$ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
+
+/**
+ * Base font sizes for scaling.
+ *
+ * @access public
+ * @see ck-font-size
+ */
+$ck-font-sizes: (
+	-1: 0.75rem,
+	 0: 1rem,
+	 1: 1.4rem,
+	 2: 1.8rem
+);
+
+/**
+ * Returns font-size in units for given level.
+ *
+ * @access public
+ * @param {Number} $level [ 0 ] - Size of the font.
+ * @return {String}
+ * @see $ck-font-sizes
+ * @see $ck-font-size-base
+ */
+@function ck-font-size( $level: 0 ) {
+	@return map-get( $ck-font-sizes, $level );
+}

+ 22 - 0
packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss

@@ -0,0 +1,22 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Default border-radius value.
+ *
+ * @access public
+ */
+$ck-border-radius: 3px !default;
+
+/**
+ * Implements rounded corner interface for .ck-rounded-corners class.
+ *
+ * @access public
+ * @see $ck-border-radius
+ */
+@mixin ck-rounded-corners() {
+	&.ck-rounded-corners,
+	.ck-rounded-corners & {
+		border-radius: $ck-border-radius;
+	}
+}

+ 37 - 0
packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss

@@ -0,0 +1,37 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+/**
+ * Default spacing value ("unit").
+ *
+ * @access public
+ */
+$ck-def-spacing: .8em !default;
+
+/**
+ * Internal map with default spacings.
+ *
+ * @type Map
+ * @access public
+ * @see ck-spacing
+ */
+$ck-def-spacings: (
+	'large': 1.5,
+	'standard': 1,
+	'medium': .8,
+	'small': .5,
+	'tiny': .25
+);
+
+/**
+ * Returns a spacing value with units for given name.
+ *
+ * @access public
+ * @param {String} $spacing [ 'standard' ] - Spacing level.
+ * @return {String}
+ * @see $ck-def-spacing
+ * @see $ck-def-spacings
+ */
+@function ck-spacing( $spacing: 'standard' ) {
+	@return $ck-def-spacing * map-get( $ck-def-spacings, $spacing );
+}

+ 36 - 0
packages/ckeditor5-theme-lark/theme/helpers/_states.scss

@@ -0,0 +1,36 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+.ck-hidden {
+	display: none;
+}
+
+.ck-disabled {
+	opacity: .5;
+}
+
+/**
+ * Brings visual styling for :focus state.
+ *
+ * @access public
+ */
+@mixin ck-focus-shadow() {
+	&:focus {
+		outline: thin dotted;
+		outline: 5px auto -webkit-focus-ring-color;
+
+		// To avoid collision with border in Firefox.
+		outline-offset: -2px;
+	}
+}
+
+/**
+ * Makes element unselectable.
+ *
+ * @access public
+ */
+@mixin ck-unselectable() {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}

+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/align-center.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <title>align-center</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="align-center" sketch:type="MSArtboardGroup" fill="#444444">
+            <g id="icon:align-center" sketch:type="MSLayerGroup" transform="translate(2.000000, 4.000000)">
+                <path d="M2,6 L2,7 L14,7 L14,6 L2,6 L2,6 Z M3,12 L3,13 L13,13 L13,12 L3,12 L3,12 Z M0,9 L0,10 L16,10 L16,9 L0,9 L0,9 Z M2,0 L2,1 L14,1 L14,0 L2,0 L2,0 Z M0,3 L0,4 L16,4 L16,3 L0,3 L0,3 Z" id="path4634-copy-3" sketch:type="MSShapeGroup" transform="translate(8.000000, 6.500000) scale(-1, 1) translate(-8.000000, -6.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/align-left.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <title>align-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="align-left" sketch:type="MSArtboardGroup" fill="#444444">
+            <g id="icon:align-left" sketch:type="MSLayerGroup" transform="translate(3.000000, 4.000000)">
+                <path d="M0,6 L0,7 L12,7 L12,6 L0,6 L0,6 Z M0,12 L0,13 L10,13 L10,12 L0,12 L0,12 Z M0,9 L0,10 L15,10 L15,9 L0,9 L0,9 Z M0,0 L0,1 L12,1 L12,0 L0,0 L0,0 Z M0,3 L0,4 L15,4 L15,3 L0,3 L0,3 Z" id="path4634" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>

+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/align-right.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <title>align-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="align-right" sketch:type="MSArtboardGroup" fill="#444444">
+            <g id="icon:align-right" sketch:type="MSLayerGroup" transform="translate(2.000000, 4.000000)">
+                <path d="M0,6 L0,7 L12,7 L12,6 L0,6 L0,6 Z M0,12 L0,13 L10,13 L10,12 L0,12 L0,12 Z M0,9 L0,10 L15,10 L15,9 L0,9 L0,9 Z M0,0 L0,1 L12,1 L12,0 L0,0 L0,0 Z M0,3 L0,4 L15,4 L15,3 L0,3 L0,3 Z" id="path4634-copy" sketch:type="MSShapeGroup" transform="translate(7.500000, 6.500000) scale(-1, 1) translate(-7.500000, -6.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

Diferenças do arquivo suprimidas por serem muito extensas
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/bold.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/bulletedlist.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/image.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/italic.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 17 - 0
packages/ckeditor5-theme-lark/theme/icons/link.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 19 - 0
packages/ckeditor5-theme-lark/theme/icons/numberedlist.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 16 - 0
packages/ckeditor5-theme-lark/theme/icons/picker.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/quote.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 16 - 0
packages/ckeditor5-theme-lark/theme/icons/source.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 14 - 0
packages/ckeditor5-theme-lark/theme/icons/table.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 15 - 0
packages/ckeditor5-theme-lark/theme/icons/underline.svg


Diferenças do arquivo suprimidas por serem muito extensas
+ 17 - 0
packages/ckeditor5-theme-lark/theme/icons/unlink.svg


+ 15 - 0
packages/ckeditor5-theme-lark/theme/theme.scss

@@ -0,0 +1,15 @@
+// Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+// For licensing, see LICENSE.md or http://ckeditor.com/license
+
+@import 'helpers/colors';
+@import 'helpers/fonts';
+@import 'helpers/rounded';
+@import 'helpers/spacing';
+@import 'helpers/states';
+@import 'helpers/editor';
+
+@import 'components/reset';
+@import 'components/icon';
+@import 'components/button';
+@import 'components/toolbar';
+@import 'components/editor';