8
0
Pārlūkot izejas kodu

Migrated UI components from SASS to PostCSS. Added theme support.

Aleksander Nowodzinski 8 gadi atpakaļ
vecāks
revīzija
8e271423dd
52 mainītis faili ar 1289 papildinājumiem un 940 dzēšanām
  1. 0 2
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  2. 18 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-basic-styles/code.css
  3. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-block-quote/blockquote.css
  4. 39 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css
  5. 9 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css
  6. 38 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css
  7. 18 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/image.css
  8. 21 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagecaption.css
  9. 40 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagestyle.css
  10. 29 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
  11. 41 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
  12. 107 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button.css
  13. 51 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown.css
  14. 70 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui.css
  15. 23 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon.css
  16. 31 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext.css
  17. 8 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label.css
  18. 45 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list.css
  19. 116 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
  20. 18 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css
  21. 50 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css
  22. 84 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip.css
  23. 47 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/helpers/button.css
  24. 83 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/reset.css
  25. 59 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-upload/imageuploadprogress.css
  26. 49 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css
  27. 0 94
      packages/ckeditor5-theme-lark/theme/components/button.scss
  28. 0 43
      packages/ckeditor5-theme-lark/theme/components/dropdown.scss
  29. 0 66
      packages/ckeditor5-theme-lark/theme/components/editor.scss
  30. 0 7
      packages/ckeditor5-theme-lark/theme/components/icon.scss
  31. 0 25
      packages/ckeditor5-theme-lark/theme/components/inputtext.scss
  32. 0 6
      packages/ckeditor5-theme-lark/theme/components/label.scss
  33. 0 41
      packages/ckeditor5-theme-lark/theme/components/list.scss
  34. 0 113
      packages/ckeditor5-theme-lark/theme/components/panel/balloonpanel.scss
  35. 0 14
      packages/ckeditor5-theme-lark/theme/components/panel/stickypanel.scss
  36. 0 74
      packages/ckeditor5-theme-lark/theme/components/reset.scss
  37. 0 45
      packages/ckeditor5-theme-lark/theme/components/toolbar/toolbar.scss
  38. 0 77
      packages/ckeditor5-theme-lark/theme/components/tooltip.scss
  39. 0 43
      packages/ckeditor5-theme-lark/theme/helpers/_button.scss
  40. 0 96
      packages/ckeditor5-theme-lark/theme/helpers/_colors.scss
  41. 0 45
      packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss
  42. 0 21
      packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss
  43. 0 26
      packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss
  44. 0 34
      packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss
  45. 0 42
      packages/ckeditor5-theme-lark/theme/helpers/_states.scss
  46. 58 0
      packages/ckeditor5-theme-lark/theme/helpers/colors.css
  47. 16 0
      packages/ckeditor5-theme-lark/theme/helpers/fonts.css
  48. 26 0
      packages/ckeditor5-theme-lark/theme/helpers/rounded.css
  49. 32 0
      packages/ckeditor5-theme-lark/theme/helpers/shadow.css
  50. 13 0
      packages/ckeditor5-theme-lark/theme/helpers/spacing.css
  51. 39 0
      packages/ckeditor5-theme-lark/theme/helpers/states.css
  52. 0 26
      packages/ckeditor5-theme-lark/theme/theme.scss

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

@@ -22,8 +22,6 @@ import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinp
 import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
 import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
 
 
-import '../../theme/theme.scss';
-
 class TextView extends View {
 class TextView extends View {
 	constructor() {
 	constructor() {
 		super();
 		super();

+ 18 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-basic-styles/code.css

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/colors.css";
+@import "../helpers/rounded.css";
+@import "../helpers/spacing.css";
+
+:root {
+	--ck-color-code: rgba( 200, 200, 200, 0.3 );
+}
+
+code {
+	background-color: var(--ck-color-code);
+	padding: var(--ck-spacing-tiny);
+	border-radius: var(--ck-border-radius);
+}

+ 11 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-block-quote/blockquote.css

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+blockquote {
+	border-left: solid 5px #CCC;
+	padding-left: 20px;
+	margin-left: 0;
+	font-style: italic;
+}

+ 39 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/colors.css";
+@import "../helpers/rounded.css";
+
+.ck-editor__top {
+	& .ck-sticky-panel {
+		& .ck-toolbar {
+			@mixin ck-rounded-corners {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			/* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */
+			background: var(--ck-color-editor-toolbar-background);
+			border-bottom-width: 0;
+		}
+
+		& .ck-sticky-panel__content_sticky .ck-toolbar {
+			border-bottom-width: 1px;
+
+			@mixin ck-rounded-corners {
+				border-radius: 0;
+			}
+		}
+	}
+}
+
+.ck-editor__editable {
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	border: 1px solid var(--ck-color-editor-border);
+}

+ 9 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-placeholder::before {
+	cursor: text;
+	color: #c2c2c2;
+}

+ 38 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/fonts.css";
+@import "../helpers/spacing.css";
+
+.ck-heading_heading1 {
+	font-size: 1.5em;
+}
+
+.ck-heading_heading2 {
+	font-size: 1.3em;
+}
+
+.ck-heading_heading3 {
+	font-size: 1.1em;
+}
+
+/* Using absolute units to make sure each element has the same height and padding.
+https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+[class*="ck-heading_"] {
+	line-height: calc(1.8 * var(--ck-font-size-base));
+	/* Strip the units from $ck-def-spacing here. */
+	padding: calc(var(--ck-spacing-unit) * var(--ck-font-size-base));
+}
+
+[class*="ck-heading_heading"] {
+	font-weight: bold;
+}
+
+/* Resize dropdown's button label. */
+.ck-dropdown.ck-heading-dropdown {
+	& .ck-dropdown__button .ck-button__label {
+		width: 8em;
+	}
+}

+ 18 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-image/image.css

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-editor__editable {
+	& .image {
+		text-align: center;
+
+		& > img {
+			/*Center the image if its width is smaller than content's width.*/
+			margin: 0 auto;
+
+			/*Make sure the image never exceeds the size of the parent container (#67).*/
+			max-width: 100%;
+		}
+	}
+}

+ 21 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagecaption.css

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/colors.css";
+@import "../helpers/fonts.css";
+@import "../helpers/spacing.css";
+
+:root {
+	--ck-color-image-caption-background: var(--ck-color-base-foreground);
+	--ck-color-image-caption-text: var(--ck-color-base-text);
+};
+
+.ck-editor__editable .image > figcaption {
+	color: var(--ck-color-image-caption-text);
+	background-color: var(--ck-color-image-caption-background);
+	padding: var(--ck-spacing-standard);
+	font-size: var(--ck-font-size-small);
+	outline-offset: -1px;
+}

+ 40 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imagestyle.css

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/spacing.css";
+
+:root {
+	--ck-image-spacing: calc(5 * var(--ck-spacing-small));
+	--ck-image-max-width: 50%;
+};
+
+.ck-editor__editable {
+	& .image-style-side,
+	& .image-style-align-left,
+	& .image-style-align-center,
+	& .image-style-align-right {
+		max-width: var(--ck-image-max-width);
+	}
+
+	& .image-style-side {
+		float: right;
+		margin-left: var(--ck-image-spacing);
+	}
+
+	& .image-style-align-left {
+		float: left;
+		margin-right: var(--ck-image-spacing);
+	}
+
+	& .image-style-align-center {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	& .image-style-align-right {
+		float: right;
+		margin-left: var(--ck-image-spacing);
+	}
+}

+ 29 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/spacing.css";
+
+.cke-text-alternative-form {
+	padding: var(--ck-spacing-large);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-image/issues/40 */
+		outline: none;
+	}
+
+	& .ck-label {
+		margin-bottom: var(--ck-spacing-small);
+	}
+}
+
+.cke-text-alternative-form__actions {
+	padding-top: var(--ck-spacing-large);
+
+	& .ck-button {
+		& + .ck-button {
+			margin-right: var(--ck-spacing-medium);
+		}
+	}
+}

+ 41 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/spacing.css";
+
+.ck-link-form {
+	padding: var(--ck-spacing-large);
+
+	&:focus {
+		/*https://github.com/ckeditor/ckeditor5-link/issues/90*/
+		outline: none;
+	}
+
+	& .ck-input-text {
+		/*https://github.com/ckeditor/ckeditor5-link/issues/145*/
+		width: 100%;
+	}
+
+	& .ck-label {
+		margin-bottom: var(--ck-spacing-tiny);
+	}
+}
+
+.ck-link-form__actions {
+	padding-top: var(--ck-spacing-large);
+
+	& .ck-button {
+		/*"Save" and "Cancel" buttons.*/
+		& + .ck-button {
+			margin-right: var(--ck-spacing-medium);
+		}
+
+		/* The "Unlink" button.*/
+		&:last-child {
+			/*https://github.com/ckeditor/ckeditor5-link/issues/145*/
+			margin-right: calc(4 * var(--ck-spacing-medium));
+		}
+	}
+}

+ 107 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button.css

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/colors.css";
+@import "../../helpers/fonts.css";
+@import "../../helpers/rounded.css";
+@import "../../helpers/spacing.css";
+@import "../../helpers/states.css";
+@import "../../helpers/shadow.css";
+
+@import "../helpers/button.css";
+
+.ck-button,
+a.ck-button {
+	@mixin ck-button-colors var(--ck-color-button-default-background), var(--ck-color-button-default-border);
+	@mixin ck-rounded-corners;
+
+	border-width: 1px;
+	border-style: solid;
+	white-space: nowrap;
+	cursor: default;
+	vertical-align: middle;
+	padding: var(--ck-spacing-small);
+
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+	}
+
+	@mixin ck-button-icon {
+		float: left;
+	}
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+	&.ck-disabled {
+		@mixin ck-button-icon {
+			@mixin ck-disabled;
+		}
+
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
+		& .ck-button__label {
+			@mixin ck-disabled;
+		}
+	}
+
+	&.ck-button_with-text {
+		padding: var(--ck-spacing-small) var(--ck-spacing-standard);
+
+		@mixin ck-button-icon {
+			margin-left: calc(-1 * var(--ck-spacing-small));
+			margin-right: var(--ck-spacing-small);
+		}
+
+		& .ck-button__label {
+			display: block;
+		}
+	}
+
+	/* A style of the button which is currently on, e.g. its feature is active. */
+	&.ck-on {
+		@mixin ck-button-colors var(--ck-color-button-on-background), var(--ck-color-button-on-border);
+	}
+
+	& .ck-icon {
+		use,
+		use * {
+			color: inherit;
+		}
+	}
+
+	& .ck-button__label {
+		/* Enable font size inheritance, which allows fluid UI scaling. */
+		font-size: inherit;
+
+		float: left;
+		height: var(--ck-line-height-base)em;
+		line-height: inherit;
+		font-weight: inherit;
+		color: inherit;
+		cursor: inherit;
+	}
+}
+
+/* A style of the button which handles the primary action. */
+.ck-button-action,
+a.ck-button-action {
+	@mixin ck-button-colors var(--ck-color-button-action-background), var(--ck-color-button-action-border);
+
+	text-shadow: 0 -1px color(var(--ck-color-button-action-background) shade(20%));
+	color: var(--ck-color-button-action-text);
+
+	&:hover,
+	&:focus,
+	&:active {
+		text-shadow: 0 -1px color(var(--ck-color-button-action-background) shade(20%))
+	}
+}
+
+.ck-button-bold,
+a.ck-button-bold {
+	font-weight: bold;
+}

+ 51 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown.css

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/colors.css";
+@import "../../helpers/rounded.css";
+@import "../../helpers/spacing.css";
+@import "../../helpers/states.css";
+@import "../../helpers/shadow.css";
+
+.ck-dropdown {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	/* A triangle displayed to indicate this is actually a dropdown. */
+	&::after {
+		border-style: solid;
+		border-width: .4em .4em 0 .4em;
+		border-color: var(--ck-color-dropdown-symbol) transparent;
+		right: var(--ck-spacing-standard);
+	}
+
+	& .ck-button.ck-dropdown__button {
+		/* A space to accommodate the triangle. */
+		padding-right: calc(2 * var(--ck-spacing-standard));
+
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+		&.ck-disabled .ck-button__label {
+			@mixin ck-disabled;
+		}
+
+		/* #23 */
+		& .ck-button__label {
+			width: 7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+.ck-dropdown__panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	background: var(--ck-color-dropdown-panel-background);
+	border: 1px solid var(--ck-color-dropdown-panel-border);
+
+	/* Compensate double border from button and from box when positioned below the button. */
+	bottom: 1px;
+}

+ 70 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui.css

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/colors.css";
+@import "../../helpers/rounded.css";
+@import "../../helpers/spacing.css";
+@import "../../helpers/states.css";
+@import "../../helpers/shadow.css";
+
+@import '../helpers/button.css';
+
+.ck-editor__editable {
+	@mixin ck-rounded-corners;
+
+	&.ck-focused {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-inner-shadow);
+	}
+}
+
+.ck-editor__editable_inline {
+	overflow: auto;
+	padding: 0 var(--ck-spacing-standard);
+	border: 1px solid transparent;
+}
+
+.ck-editor-toolbar {
+	& .ck-button,
+	& .ck-button:focus {
+		border-width: 0;
+	}
+
+	& .ck-button {
+		&:not(:hover):not(:focus):not(.ck-on),
+		&.ck-disabled {
+			background: var(--ck-color-editor-toolbar-background);
+		}
+
+		&.ck-on {
+			@mixin ck-button-colors color(var(--ck-color-editor-toolbar-button-background) shade(10%)), color(var(--ck-color-button-default-border) shade(10%));
+		}
+	}
+
+	& .ck-button.ck-dropdown__button {
+		border-width: 1px;
+
+		&:not(:hover):not(:focus):not(.ck-on) {
+			background: var(--ck-color-editor-dropdown-background);
+		}
+	}
+
+	@nest .ck-toolbar-container & {
+		background: var(--ck-color-editor-toolbar-background);
+	}
+}
+
+/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
+.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
+	&:after {
+		border-bottom-color: var(--ck-color-editor-toolbar-background);
+	}
+}
+
+.ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
+	&:after {
+		border-top-color: var(--ck-color-editor-toolbar-background);
+	}
+}

+ 23 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon.css

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/fonts.css";
+
+/**
+ * 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.
+ */
+:root {
+	--ck-icon-min-size: calc(var(--ck-font-size-base)*var(--ck-line-height-base));
+}
+
+svg.ck-icon {
+	width: var(--ck-line-height-base)em;
+	height: var(--ck-line-height-base)em;
+
+	min-width: var(--ck-icon-min-size);
+	min-height: var(--ck-icon-min-size);
+}

+ 31 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/colors.css";
+@import "../../helpers/rounded.css";
+@import "../../helpers/spacing.css";
+@import "../../helpers/states.css";
+@import "../../helpers/shadow.css";
+
+.ck-input-text {
+	@mixin ck-rounded-corners;
+	@mixin ck-box-shadow var(--ck-inner-shadow);
+
+	background: var(--ck-color-input-background);
+	border: 1px solid var(--ck-color-input-border);
+	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+	min-width: 21em;
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
+	}
+
+	&[readonly] {
+		border: 1px solid color(var(--ck-color-input-border) tint(10));
+		background: color(var(--ck-color-input-background) shade(5));
+		color: color(var(--ck-color-input-text) tint(20)));
+	}
+}

+ 8 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label.css

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-label {
+	font-weight: bold;
+}

+ 45 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/colors.css";
+@import "../../helpers/rounded.css";
+@import "../../helpers/spacing.css";
+@import "../../helpers/states.css";
+@import "../../helpers/shadow.css";
+
+.ck-list {
+	@mixin ck-rounded-corners;
+	@mixin ck-unselectable;
+
+	list-style-type: none;
+	background: var(--ck-color-list-background);
+}
+
+.ck-list__item {
+	padding: var(--ck-spacing-medium);
+	cursor: default;
+	min-width: 12em;
+
+	&:hover,
+	&:focus {
+		background: var(--ck-color-list-item-background-hover);
+	}
+
+	&:focus {
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+
+		outline: none;
+	}
+}
+
+.ck-list__item_active {
+	background: var(--ck-color-list-item-background-active);
+	color: var(--ck-color-list-item-text-active);
+
+	&:hover,
+	&:focus {
+		background: color(var(--ck-color-list-item-background-active) shade(10));
+	}
+}

+ 116 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css

@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../helpers/colors.css";
+@import "../../../helpers/rounded.css";
+@import "../../../helpers/states.css";
+@import "../../../helpers/shadow.css";
+
+:root {
+	--ck-balloon-arrow-offset: 2px;
+	--ck-balloon-arrow-height: 15px;
+	--ck-balloon-arrow-half-width: 10px;
+};
+
+.ck-balloon-panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	min-height: 15px;
+
+	background: var(--ck-color-panel-background);
+	border: 1px solid var(--ck-color-panel-border);
+
+	&.ck-balloon-panel_with-arrow {
+		&:before,
+		&:after {
+			width: 0;
+			height: 0;
+			border-style: solid;
+		}
+	}
+
+	&[class*="arrow_n"] {
+		&:before,
+		&:after {
+			border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
+		}
+
+		&:before {
+			border-color: transparent transparent var(--ck-color-panel-border) transparent;
+		}
+
+		&:after {
+			border-color: transparent transparent var(--ck-color-panel-background) transparent;
+			margin-top: var(--ck-balloon-arrow-offset);
+		}
+	}
+
+	&[class*="arrow_s"] {
+		&:before,
+		&:after {
+			border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
+		}
+
+		&:before {
+			border-color: var(--ck-color-panel-border) transparent  transparent;
+		}
+
+		&:after {
+			border-color: var(--ck-color-panel-background) transparent transparent transparent;
+			margin-bottom: var(--ck-balloon-arrow-offset);
+		}
+	}
+
+	&.ck-balloon-panel_arrow_n {
+		&:before,
+		&:after {
+			left: 50%;
+			margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_nw {
+		&:before,
+		&:after {
+			left: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_ne {
+		&:before,
+		&:after {
+			right: calc(2 * var(--ck-balloon-arrow-half-width));
+			top: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_s {
+		&:before,
+		&:after {
+			left: 50%;
+			margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_sw {
+		&:before,
+		&:after {
+			left: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+
+	&.ck-balloon-panel_arrow_se {
+		&:before,
+		&:after {
+			right: calc(2 * var(--ck-balloon-arrow-half-width));
+			bottom: calc(-1 * var(--ck-balloon-arrow-height));
+		}
+	}
+}

+ 18 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../helpers/shadow.css";
+
+.ck-editor {
+	& .ck-sticky-panel {
+		& .ck-sticky-panel__content_sticky {
+			@mixin ck-drop-shadow;
+
+			border-width: 0 1px 1px;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+	}
+}

+ 50 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../helpers/colors.css";
+@import "../../../helpers/rounded.css";
+@import "../../../helpers/spacing.css";
+@import "../../../helpers/states.css";
+
+.ck-toolbar {
+	@mixin ck-rounded-corners;
+
+	padding: var(--ck-spacing-small);
+	border: 1px solid var(--ck-color-toolbar-border);
+
+	/* Allow wrapping toolbar items to the new line. */
+	white-space: initial;
+
+	/* (#11) Separate toolbar items. */
+	& > * {
+		margin-right: var(--ck-spacing-small);
+	}
+
+	& > *:last-child {
+		margin-right: 0;
+	}
+
+	@nest .ck-toolbar-container & {
+		border: 0;
+	}
+}
+
+.ck-toolbar_floating {
+	/* Disallow wrapping toolbar items to the new line when the toolbar is floating,
+	resulting in an toolbar shapes when the horizontal space is limited.
+	https://github.com/ckeditor/ckeditor5-theme-lark/issues/93 */
+	white-space: nowrap;
+}
+
+.ck-toolbar__separator {
+	width: 1px;
+	height: calc(1em + 2 * var(--ck-spacing-medium));
+	vertical-align: middle;
+	background: var(--ck-color-toolbar-border);
+}
+
+.ck-toolbar__newline {
+	height: var(--ck-spacing-small);
+}

+ 84 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip.css

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/colors.css";
+@import "../../helpers/rounded.css";
+@import "../../helpers/spacing.css";
+
+:root {
+	--ck-tooltip-arrow-size: 5px;
+}
+
+.ck-tooltip {
+	left: 50%;
+
+	/**
+	 * A class once applied displays the tooltip south of the element.
+	 *
+	 *       [element]
+	 *           ^
+	 *     +-----------+
+	 *     |  Tooltip  |
+	 *     +-----------+
+	 */
+	&.ck-tooltip_s {
+		bottom: calc(-1 * var(--ck-tooltip-arrow-size));
+		transform: translateY( 100% );
+
+		& .ck-tooltip__text::after {
+			top: calc(-1 * var(--ck-tooltip-arrow-size));
+			transform: translateX( -50% );
+			border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
+			border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
+		}
+	}
+
+	/**
+	 * A class once applied displays the tooltip north of the element.
+	 *
+	 *     +-----------+
+	 *     |  Tooltip  |
+	 *     +-----------+
+	 *           V
+	 *       [element]
+	 */
+	&.ck-tooltip_n {
+		top: calc(-1 * var(--ck-tooltip-arrow-size));
+		transform: translateY( -100% );
+
+		& .ck-tooltip__text::after {
+			bottom: calc(-1 * var(--ck-tooltip-arrow-size));
+			transform: translateX( -50% );
+			border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
+			border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
+		}
+	}
+}
+
+.ck-tooltip__text {
+	@mixin ck-rounded-corners;
+
+	font-size: .9em;
+	line-height: 1.5;
+	color: var(--ck-color-tooltip-text);
+	padding: var(--ck-spacing-small) var(--ck-spacing-medium);
+	background: var(--ck-color-tooltip-background);
+	position: relative;
+	left: -50%;
+
+	&::after {
+		border-style: solid;
+		left: 50%;
+	}
+}
+
+.ck-tooltip,
+.ck-tooltip__text::after {
+	/*For the transition to work, the tooltip must be controlled
+	using visibility+opacity. A delay prevents a "tooltip avalanche"
+	i.e. when scanning the toolbar with mouse cursor.*/
+	transition: opacity .2s ease-in-out .2s;
+}
+

+ 47 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/helpers/button.css

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../helpers/colors.css";
+
+/**
+ * Implements a button of given background color.
+ *
+ * @param {String} $background - Background color of the button.
+ * @param {String} $border - Border color of the button.
+ */
+@define-mixin ck-button-colors $background, $border {
+	background: $background;
+	border-color: $border;
+
+	&:not(.ck-disabled) {
+		&:hover,
+		&:focus {
+			background: color($background shade(10%));
+			border-color: color($border shade(10%));
+		}
+
+		&:active {
+			background: color($background shade(15%));
+			border-color: color($border shade(15%));
+			box-shadow: inset 0 2px 2px color($background shade(25%));
+		}
+	}
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
+	&.ck-disabled {
+		background: color($background shade(10%));
+		border-color: color($border tint(10%));
+	}
+}
+
+/**
+ * A helper to define button–specific icon styles.
+ *
+ */
+@define-mixin ck-button-icon {
+	& .ck-icon {
+		@mixin-content;
+	}
+}

+ 83 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/reset.css

@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/fonts.css";
+@import "../helpers/colors.css";
+
+@custom-selector :--ck-reset-all
+	.ck-reset_all,
+	.ck-reset_all *,
+	.ck-reset_all a,
+	.ck-reset_all textarea;
+
+/**
+ * Resets an element, ignoring its children.
+ */
+.ck-reset,
+:--ck-reset-all {
+	/* Do not include inheritable rules here. */
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	text-decoration: none;
+	vertical-align: middle;
+	transition: none;
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/105 */
+	word-wrap: break-word;
+}
+
+/**
+ * Resets an element AND its children.
+ */
+:--ck-reset-all {
+	/* These are rule inherited by all children elements. */
+	border-collapse: collapse;
+	font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face);
+	color: var(--ck-color-text);
+	text-align: left;
+	white-space: nowrap;
+	cursor: auto;
+	float: none;
+}
+
+.ck-reset_all {
+	& .ck-rtl * {
+		text-align: right;
+	}
+
+	& iframe {
+		/* For IE */
+		vertical-align: inherit;
+	}
+
+	& 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;
+	}
+
+	& button::-moz-focus-inner {
+		/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
+	    padding: 0;
+	    border: 0
+	}
+}

+ 59 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-upload/imageuploadprogress.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Infinite progress bar default width. */
+:root {
+	--ck-image-upload-progress-line-width: 30px;
+}
+
+figure.image {
+	/* Showing animation. */
+	&.ck-appear {
+		animation: fadeIn 700ms;
+	}
+
+	/* Infinite progress bar on top while image is read. */
+	&.ck-infinite-progress::before {
+		width: var(--ck-image-upload-progress-line-width);
+		height: 2px;
+		background: rgba(0, 0, 0, 0.1);
+		animation-name: readingProgressAnimation;
+		animation-duration: 1500ms;
+		animation-iteration-count: infinite;
+		transition-timing-function: linear;
+	}
+
+	&.ck-image-upload-placeholder > img {
+		width: 100%;
+	}
+
+	/* Upload progress bar. */
+	& .ck-progress-bar {
+		height: 2px;
+		width: 0;
+		background: #6ab5f9;
+		transition: width 100ms;
+	}
+}
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to   { opacity: 1; }
+}
+
+@keyframes readingProgressAnimation {
+	0% {
+		width: var(--ck-image-upload-progress-line-width);
+		right: 0;
+	}
+
+	50% {
+		width: calc(var(--ck-image-upload-progress-line-width) * 1.5);
+	}
+
+	100% {
+		right: 100%;
+	}
+}

+ 49 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../helpers/colors.css";
+@import "../helpers/spacing.css";
+@import "../helpers/shadow.css";
+@import "../helpers/states.css";
+
+:root {
+	--ck-widget-outline-thickness: 3px;
+
+	--ck-color-widget-border-blurred: #ddd;
+	--ck-color-widget-border-hover: #FFD25C;
+	--ck-color-widget-editable-focused-background: var(--ck-color-base-background),
+};
+
+.ck-widget {
+	margin: var(--ck-spacing-standard) 0;
+	padding: 0;
+
+	&.ck-widget_selected, 
+	&.ck-widget_selected:hover {
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-border-focus);
+	}
+
+	@nest .ck-editor__editable.ck-blurred &.ck-widget_selected {
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-blurred);
+	}
+
+	&:hover {
+		outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-hover);
+	}
+
+	& .ck-editable {
+		border: 1px solid transparent;
+
+		/*The `:focus` style is applied before `.ck-editable_focused` class is rendered in the view.
+		These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied.*/
+		&.ck-editable_focused, 
+		&:focus {
+			@mixin ck-focus-ring;
+			@mixin ck-box-shadow var(--ck-inner-shadow);
+
+			background-color: var(--ck-color-widget-editable-focused-background);
+		}
+	}
+}

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

@@ -1,94 +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 {
-	@include ck-button-colors( 'button-default-background', 'button-default-border' );
-	@include ck-rounded-corners();
-
-	border-width: 1px;
-	border-style: solid;
-	white-space: nowrap;
-	cursor: default;
-	vertical-align: middle;
-	padding: ck-spacing( 'small' );
-
-	// Enable font size inheritance, which allows fluid UI scaling.
-	font-size: inherit;
-
-	&:focus {
-		@include ck-focus-ring();
-		@include ck-box-shadow( $ck-focus-outer-shadow );
-	}
-
-	@include ck-button-icon {
-		float: left;
-	}
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/70
-	&.ck-disabled {
-		@include ck-button-icon {
-			@include ck-disabled;
-		}
-
-		// https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
-		.ck-button__label {
-			@include ck-disabled;
-		}
-	}
-
-	&.ck-button_with-text {
-		padding: ck-spacing( 'small' ) ck-spacing();
-
-		@include ck-button-icon {
-			margin-left: -#{ck-spacing( 'small' )};
-			margin-right: ck-spacing( 'small' );
-		}
-
-		.ck-button__label {
-			display: block;
-		}
-	}
-
-	// A style of the button which is currently on, e.g. its feature is active.
-	&.ck-on {
-		@include ck-button-colors( 'button-on-background', 'button-on-border' );
-	}
-
-	// A style of the button which handles the primary action.
-	&-action {
-		@include ck-button-colors( 'button-action-background', 'button-action-border' );
-
-		text-shadow: 0 -1px ck-color( 'button-action-background', -20 );
-		color: ck-color( 'button-action-text' );
-
-		&:hover,
-		&:focus,
-		&:active {
-			text-shadow: 0 -1px ck-color( 'button-action-background', -40 );
-		}
-	}
-
-	&-bold {
-		font-weight: bold;
-	}
-
-	.ck-icon {
-		use,
-		use * {
-			color: inherit;
-		}
-	}
-
-	.ck-button__label {
-		// Enable font size inheritance, which allows fluid UI scaling.
-		font-size: inherit;
-
-		float: left;
-		height: #{ $ck-line-height-base }em;
-		line-height: inherit;
-		font-weight: inherit;
-		color: inherit;
-		cursor: inherit;
-	}
-}

+ 0 - 43
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -1,43 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-dropdown {
-	// Enable font size inheritance, which allows fluid UI scaling.
-	font-size: inherit;
-
-	// A triangle displayed to indicate this is actually a dropdown.
-	&::after {
-		border-style: solid;
-		border-width: .4em .4em 0 .4em;
-		border-color: ck-color( 'dropdown-symbol' ) transparent;
-		right: ck-spacing();
-	}
-
-	.ck-button.ck-dropdown__button {
-		// A space to accommodate the triangle.
-		padding-right: 2 * ck-spacing();
-
-		// https://github.com/ckeditor/ckeditor5-theme-lark/issues/70
-		&.ck-disabled .ck-button__label {
-			@include ck-disabled;
-		}
-
-		// #23
-		.ck-button__label {
-			width: 7em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-}
-
-.ck-dropdown__panel {
-	background: ck-color( 'dropdown-panel-background' );
-	border: 1px solid ck-color( 'dropdown-panel-border' );
-
-	// Compensate double border from button and from box when positioned below the button.
-	bottom: 1px;
-
-	@include ck-rounded-corners();
-	@include ck-drop-shadow();
-}

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

@@ -1,66 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '../helpers/_button.scss';
-
-.ck-editor__editable {
-	@include ck-rounded-corners();
-
-	&.ck-focused {
-		@include ck-focus-ring();
-		@include ck-box-shadow( $ck-inner-shadow );
-	}
-
-	&_inline {
-		overflow: auto;
-		padding: 0 ck-spacing();
-		border: 1px solid transparent;
-	}
-}
-
-
-.ck-editor-toolbar {
-	.ck-button {
-		border-width: 0;
-
-		&:not(:hover):not(:focus):not(.ck-on),
-		&.ck-disabled {
-			background: ck-color( 'editor-toolbar-background' );
-		}
-
-		&.ck-on {
-			@include ck-button-colors( 'editor-toolbar-button-background', 'button-default-border', -10 );
-		}
-	}
-
-	.ck-button.ck-dropdown__button {
-		border-width: 1px;
-
-		&:not(:hover):not(:focus):not(.ck-on) {
-			background: ck-color( 'editor-dropdown-background' );
-		}
-	}
-
-	.ck-toolbar-container & {
-		background: ck-color( 'editor-toolbar-background' );
-	}
-}
-
-// https://github.com/ckeditor/ckeditor5-theme-lark/issues/111
-.ck-toolbar-container.ck-editor-toolbar-container.ck-balloon-panel_arrow {
-	&_n,
-	&_ne,
-	&_nw {
-		&:after {
-			border-bottom-color: ck-color( 'editor-toolbar-background' );
-		}
-	}
-
-	&_s,
-	&_se,
-	&_sw {
-		&:after {
-			border-top-color: ck-color( 'editor-toolbar-background' );
-		}
-	}
-}

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

@@ -1,7 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-svg.ck-icon {
-	width: #{ $ck-line-height-base }em;
-	height: #{ $ck-line-height-base }em;
-}

+ 0 - 25
packages/ckeditor5-theme-lark/theme/components/inputtext.scss

@@ -1,25 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-input {
-	&-text {
-		@include ck-rounded-corners();
-		@include ck-box-shadow( $ck-inner-shadow );
-
-		background: ck-color( 'input-background' );
-		border: 1px solid ck-color( 'input-border' );
-		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
-		min-width: 21em;
-
-		&:focus {
-			@include ck-focus-ring();
-			@include ck-box-shadow( $ck-focus-outer-shadow, $ck-inner-shadow );
-		}
-
-		&[readonly] {
-			border: 1px solid ck-color( 'input-border', 10 );
-			background: ck-color( 'input-background', -5 );
-			color: ck-color( 'input-text', 20 );
-		}
-	}
-}

+ 0 - 6
packages/ckeditor5-theme-lark/theme/components/label.scss

@@ -1,6 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-label {
-	font-weight: bold;
-}

+ 0 - 41
packages/ckeditor5-theme-lark/theme/components/list.scss

@@ -1,41 +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-rounded-corners();
-	@include ck-unselectable();
-
-	// Crop the the items when the list has huge border-radius.
-	overflow: hidden;
-	list-style-type: none;
-	background: ck-color( 'list-background' );
-
-	&__item {
-		padding: ck-spacing( 'medium' );
-		cursor: default;
-		min-width: 12em;
-
-		&:hover,
-		&:focus {
-			background: ck-color( 'list-item-background-hover' );
-		}
-
-		&:focus {
-			@include ck-box-shadow( $ck-focus-outer-shadow );
-
-			position: relative;
-			z-index: ck-z();
-			outline: none;
-		}
-
-		&_active {
-			background: ck-color( 'list-item-background-active' );
-			color: ck-color( 'list-item-text-active' );
-
-			&:hover,
-			&:focus {
-				background: ck-color( 'list-item-background-active', -10 );
-			}
-		}
-	}
-}

+ 0 - 113
packages/ckeditor5-theme-lark/theme/components/panel/balloonpanel.scss

@@ -1,113 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-balloon-arrow-offset: 2px;
-$ck-balloon-arrow-height: 15px;
-$ck-balloon-arrow-half-width: 10px;
-
-.ck-balloon-panel {
-	@include ck-rounded-corners();
-	@include ck-drop-shadow();
-
-	min-height: 15px;
-
-	background: ck-color( 'panel-background' );
-	border: 1px solid ck-color( 'panel-border' );
-
-	&.ck-balloon-panel_with-arrow {
-		&:before,
-		&:after {
-			width: 0;
-			height: 0;
-			border-style: solid;
-		}
-	}
-
-	&.ck-balloon-panel_arrow {
-		&_n,
-		&_ne,
-		&_nw {
-			&:before,
-			&:after {
-				border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
-			}
-
-			&:before {
-				border-color: transparent transparent ck-color( 'panel-border' ) transparent;
-			}
-
-			&:after {
-				border-color: transparent transparent ck-color( 'panel-background' ) transparent;
-				margin-top: $ck-balloon-arrow-offset;
-			}
-		}
-
-		&_s,
-		&_se,
-		&_sw {
-			&:before,
-			&:after {
-				border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
-			}
-
-			&:before {
-				border-color: ck-color( 'panel-border' ) transparent  transparent;
-			}
-
-			&:after {
-				border-color: ck-color( 'panel-background' ) transparent transparent transparent;
-				margin-bottom: $ck-balloon-arrow-offset;
-			}
-		}
-
-		&_n {
-			&:before,
-			&:after {
-				left: 50%;
-				margin-left: -$ck-balloon-arrow-half-width;
-				top: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_nw {
-			&:before,
-			&:after {
-				left: 2 * $ck-balloon-arrow-half-width;
-				top: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_ne {
-			&:before,
-			&:after {
-				right: 2 * $ck-balloon-arrow-half-width;
-				top: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_s {
-			&:before,
-			&:after {
-				left: 50%;
-				margin-left: -$ck-balloon-arrow-half-width;
-				bottom: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_sw {
-			&:before,
-			&:after {
-				left: 2 * $ck-balloon-arrow-half-width;
-				bottom: -$ck-balloon-arrow-height;
-			}
-		}
-
-		&_se {
-			&:before,
-			&:after {
-				right: 2 * $ck-balloon-arrow-half-width;
-				bottom: -$ck-balloon-arrow-height;
-			}
-		}
-	}
-}

+ 0 - 14
packages/ckeditor5-theme-lark/theme/components/panel/stickypanel.scss

@@ -1,14 +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 {
-			@include ck-drop-shadow();
-
-			border-width: 0 1px 1px;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-		}
-	}
-}

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

@@ -1,74 +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.
-	margin: 0;
-	padding: 0;
-	border: 0;
-	background: transparent;
-	text-decoration: none;
-	vertical-align: middle;
-	transition: none;
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/105
-	word-wrap: break-word;
-}
-
-/**
- * Resets an element AND its 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-line-height-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;
-	}
-
-	// See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox
-	button::-moz-focus-inner {
-	    padding: 0;
-	    border: 0
-	}
-}

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

@@ -1,45 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-.ck-toolbar {
-	padding: ck-spacing( 'small' );
-	border: 1px solid ck-color( 'toolbar-border' );
-
-	// Allow wrapping toolbar items to the new line.
-	white-space: initial;
-
-	&_floating {
-		// Disallow wrapping toolbar items to the new line when the toolbar is floating,
-		// resulting in an toolbar shapes when the horizontal space is limited.
-		// https://github.com/ckeditor/ckeditor5-theme-lark/issues/93
-		white-space: nowrap;
-	}
-
-	@include ck-unselectable();
-	@include ck-rounded-corners();
-
-	&__separator {
-		width: 1px;
-		height: calc( 1em + 2 * #{ck-spacing( 'medium' )} );
-		vertical-align: middle;
-		background: ck-color( 'toolbar-border' );
-	}
-
-	&__newline {
-		height: ck-spacing( 'small' );
-	}
-
-	// (#11) Separate toolbar items.
-	& > * {
-		margin-right: ck-spacing( 'small' );
-	}
-
-	& > *:last-child {
-		margin-right: 0;
-	}
-
-	.ck-toolbar-container & {
-		border: 0;
-	}
-}
-

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

@@ -1,77 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-tooltip-arrow-size: 5px;
-
-.ck-tooltip {
-	left: 50%;
-
-	&__text {
-		@include ck-rounded-corners();
-
-		font-size: .9em;
-		line-height: 1.5;
-		color: ck-color( 'tooltip-text' );
-		padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
-		background: ck-color( 'tooltip-background' );
-		position: relative;
-		left: -50%;
-
-		&::after {
-			border-style: solid;
-			left: 50%;
-		}
-	}
-
-	/**
-	 * A class once applied displays the tooltip south of the element.
-	 *
-	 *       [element]
-	 *           ^
-	 *     +-----------+
-	 *     |  Tooltip  |
-	 *     +-----------+
-	 */
-	&.ck-tooltip_s {
-		bottom: - $ck-tooltip-arrow-size;
-		transform: translateY( 100% );
-
-		.ck-tooltip__text::after {
-			top: -$ck-tooltip-arrow-size;
-			transform: translateX( -50% );
-			border-color: transparent transparent ck-color( 'tooltip-background' ) transparent;
-			border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
-
-		}
-	}
-
-	/**
-	 * A class once applied displays the tooltip north of the element.
-	 *
-	 *     +-----------+
-	 *     |  Tooltip  |
-	 *     +-----------+
-	 *           V
-	 *       [element]
-	 */
-	&.ck-tooltip_n {
-		top: -$ck-tooltip-arrow-size;
-		transform: translateY( -100% );
-
-		.ck-tooltip__text::after {
-			bottom: -$ck-tooltip-arrow-size;
-			transform: translateX( -50% );
-			border-color: ck-color( 'tooltip-background' ) transparent transparent transparent;
-			border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
-		}
-	}
-}
-
-.ck-tooltip,
-.ck-tooltip__text::after {
-	// For the transition to work, the tooltip must be controlled
-	// using visibility+opacity. A delay prevents a "tooltip avalanche"
-	// i.e. when scanning the toolbar with mouse cursor.
-	transition: opacity .2s ease-in-out .2s;
-}
-

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

@@ -1,43 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Implements a button of given background color.
- *
- * @param {String} $background - Background color of the button.
- * @param {String} $border - Border color of the button.
- */
-@mixin ck-button-colors( $background, $border, $offset: 0 ) {
-	background: ck-color( $background, $offset );
-	border-color: ck-color( $border, $offset );
-
-	&:not(.ck-disabled) {
-		&:hover,
-		&:focus {
-			background: ck-color( $background, $offset - 10 );
-			border-color: ck-color( $border, $offset - 10 );
-		}
-
-		&:active {
-			background: ck-color( $background, $offset - 15 );
-			border-color: ck-color( $border, $offset - 15 );
-			box-shadow: inset 0 2px 2px ck-color( $background, $offset - 25 );
-		}
-	}
-
-	// https://github.com/ckeditor/ckeditor5-theme-lark/issues/98
-	&.ck-disabled {
-		background: ck-color( $background, $offset + 10 );
-		border-color: ck-color( $border, $offset + 10 );
-	}
-}
-
-/**
- * A helper to define button–specific icon styles.
- *
- */
-@mixin ck-button-icon {
-	.ck-icon {
-		@content;
-	}
-}

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

@@ -1,96 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-$ck-color-foreground: 							#f7f7f7 !default;
-$ck-color-background: 							#fff !default;
-$ck-color-border: 								scale-color( $ck-color-background, $lightness: -25 ) !default;
-$ck-color-action: 								#61B145 !default;
-$ck-color-focus: 								#6ab5f9 !default;
-$ck-color-text: 								#333 !default;
-$ck-color-active: 								#1A8BF1 !default;
-
-/**
- * Colors configured by the user.
- *
- * @type Map
- * @example
- *		$ck-colors: ( 'foreground': red );
- * @see $_ck-colors
- */
-$ck-colors: () !default;
-
-/**
- * Internal map with default colors.
- *
- * @type Map
- * @see ck-color-add
- */
-$_ck-colors: (
-	'border-focus': 							#48a3f5,
-	'text': 									$ck-color-text,
-	'shadow-drop': 								rgba( 0, 0, 0, .2 ),
-	'shadow-inner': 							rgba( 0, 0, 0, .1 ),
-
-	// ------------------------------------------------------------
-
-	'button-default-background': 				$ck-color-background,
-	'button-default-border': 					$ck-color-border,
-	'button-on-background': 					$ck-color-foreground,
-	'button-on-border': 						scale-color( $ck-color-foreground, $lightness: -25 ),
-	'button-action-background': 				$ck-color-action,
-	'button-action-border': 					scale-color( $ck-color-action, $lightness: -20 ),
-	'button-action-text': 						$ck-color-background,
-
-	'dropdown-panel-background': 				$ck-color-background,
-	'dropdown-panel-border': 					$ck-color-border,
-	'dropdown-symbol': 							#707070,
-
-	'input-background': 						$ck-color-background,
-	'input-border': 							$ck-color-border,
-	'input-text': 								$ck-color-text,
-
-	'list-background': 							$ck-color-background,
-	'list-item-background-hover': 				$ck-color-foreground,
-	'list-item-background-active': 				$ck-color-active,
-	'list-item-text-active':					$ck-color-background,
-
-	'panel-background': 						$ck-color-background,
-	'panel-border': 							$ck-color-border,
-
-	'toolbar-background': 						$ck-color-background,
-	'toolbar-border': 							$ck-color-border,
-
-	'tooltip-background': 						$ck-color-text,
-	'tooltip-text': 							$ck-color-background,
-
-	'editor-border': 							$ck-color-border,
-	'editor-toolbar-background': 				$ck-color-foreground,
-	'editor-toolbar-button-background': 		$ck-color-foreground,
-	'editor-dropdown-background': 				$ck-color-background,
-);
-
-/**
- * Returns a color of given name and lightness offset.
- *
- * @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 );
-}
-
-/**
- * Adds a color to internal color map.
- *
- * @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;
-}

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

@@ -1,45 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Base font size.
- *
- * @see $ck-font-sizes
- */
-$ck-font-size-base: 12px !default;
-
-/**
- * Base line height.
- */
-$ck-line-height-base: 1.67 !default;
-
-/**
- * Base font face.
- *
- */
-$ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif !default;
-
-/**
- * Base font sizes for scaling.
- *
- * @see ck-font-size
- */
-$ck-font-sizes: (
-	-2: 0.7em,
-	-1: 0.75em,
-	 0: 1em,
-	 1: 1.4em,
-	 2: 1.8em
-);
-
-/**
- * Returns font-size in units for given level.
- *
- * @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 );
-}

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

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

+ 0 - 26
packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss

@@ -1,26 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * A visual style of element's inner shadow (i.e. input).
- */
-$ck-inner-shadow: 2px 2px 3px ck-color( 'shadow-inner' ) inset;
-
-/**
- * A visual style of element's drop shadow (i.e. panel).
- */
-$ck-drop-shadow: 0 1px 2px 0 ck-color( 'shadow-drop' );
-
-/**
- * A helper to combine multiple shadows.
- */
-@mixin ck-box-shadow($shadows...) {
-	box-shadow: $shadows;
-}
-
-/**
- * Gives an element a drop shadow so it looks like a floating panel.
- */
-@mixin ck-drop-shadow() {
-	@include ck-box-shadow( $ck-drop-shadow );
-}

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

@@ -1,34 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * Default spacing value ("unit").
- *
- */
-$ck-def-spacing: .8em !default;
-
-/**
- * Internal map with default spacings.
- *
- * @type Map
- * @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.
- *
- * @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 );
-}

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

@@ -1,42 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-/**
- * A visual style of focused element's outer shadow.
- */
-$ck-focus-outer-shadow: 0 0 3px 2px lighten( ck-color( 'border-focus' ), 10% );
-
-/**
- * A visual style of focused element's border or outline.
- */
-$ck-focus-ring: 1px solid ck-color( 'border-focus' );
-
-/**
- * An opacity value of disabled UI item.
- */
-$ck-disabled-opacity: .5;
-
-/**
- * A class which indicates that an element holding it is disabled.
- */
-@mixin ck-disabled {
-	opacity: $ck-disabled-opacity;
-}
-
-/**
- * A visual style of focused element's border.
- */
-@mixin ck-focus-ring() {
-	// Disable native outline.
-	outline: none;
-	border: $ck-focus-ring;
-}
-
-/**
- * Brings visual styling for :focus state.
- */
-@mixin ck-user-focus-outline() {
-	&:focus {
-		@include ck-focus-outline();
-	}
-}

+ 58 - 0
packages/ckeditor5-theme-lark/theme/helpers/colors.css

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-color-base-foreground: 						#f7f7f7;
+	--ck-color-base-background: 						#fff;
+	--ck-color-base-border: 							color(var(--ck-color-base-background) shade(25%));
+	--ck-color-base-action: 							#61B145;
+	--ck-color-base-focus: 								#6ab5f9;
+	--ck-color-base-text: 								#333;
+	--ck-color-base-active: 							#1A8BF1;
+
+	/* ----------------------------------------------------------------------------- */
+
+	--ck-color-border-focus: 							#48a3f5;
+	--ck-color-text: 									var(--ck-color-base-text);
+	--ck-color-shadow-drop: 							rgba( 0, 0, 0, .2 );
+	--ck-color-shadow-inner: 							rgba( 0, 0, 0, .1 );
+
+	/* ----------------------------------------------------------------------------- */
+
+	--ck-color-button-default-background: 				var(--ck-color-base-background);
+	--ck-color-button-default-border: 					var(--ck-color-base-border);
+	--ck-color-button-on-background: 					var(--ck-color-base-foreground);
+	--ck-color-button-on-border: 						color(var(--ck-color-base-foreground) shade(25%));
+	--ck-color-button-action-background: 				var(--ck-color-base-action);
+	--ck-color-button-action-border: 					color(var(--ck-color-base-action) shade(20%));
+	--ck-color-button-action-text: 						var(--ck-color-base-background);
+
+	--ck-color-dropdown-panel-background: 				var(--ck-color-base-background);
+	--ck-color-dropdown-panel-border: 					var(--ck-color-base-border);
+	--ck-color-dropdown-symbol: 						#707070;
+
+	--ck-color-input-background: 						var(--ck-color-base-background);
+	--ck-color-input-border: 							var(--ck-color-base-border);
+	--ck-color-input-text: 								var(--ck-color-base-text);
+
+	--ck-color-list-background: 						var(--ck-color-base-background);
+	--ck-color-list-item-background-hover: 				var(--ck-color-base-foreground);
+	--ck-color-list-item-background-active: 			var(--ck-color-base-active);
+	--ck-color-list-item-text-active:					var(--ck-color-base-background);
+
+	--ck-color-panel-background: 						var(--ck-color-base-background);
+	--ck-color-panel-border: 							var(--ck-color-base-border);
+
+	--ck-color-toolbar-background: 						var(--ck-color-base-background);
+	--ck-color-toolbar-border: 							var(--ck-color-base-border);
+
+	--ck-color-tooltip-background: 						var(--ck-color-base-text);
+	--ck-color-tooltip-text: 							var(--ck-color-base-background);
+
+	--ck-color-editor-border: 							var(--ck-color-base-border);
+	--ck-color-editor-toolbar-background: 				var(--ck-color-base-foreground);
+	--ck-color-editor-toolbar-button-background: 		var(--ck-color-base-foreground);
+	--ck-color-editor-dropdown-background: 				var(--ck-color-base-background);
+}

+ 16 - 0
packages/ckeditor5-theme-lark/theme/helpers/fonts.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-font-size-base: 12px;
+	--ck-line-height-base: 1.67;
+	--ck-font-face: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+
+	--ck-font-size-tiny: 0.7em;
+	--ck-font-size-small: 0.75em;
+	--ck-font-size-normal: 1em;
+	--ck-font-size-big: 1.4em;
+	--ck-font-size-large: 1.8em;
+}

+ 26 - 0
packages/ckeditor5-theme-lark/theme/helpers/rounded.css

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Default border-radius value.
+ */
+:root{
+	--ck-border-radius: 2px;
+}
+
+/**
+ * Implements rounded corner interface for .ck-rounded-corners class.
+ *
+ * @see $ck-border-radius
+ */
+@define-mixin ck-rounded-corners {
+	border-radius: 0;
+
+	@nest .ck-rounded-corners &,
+	&.ck-rounded-corners {
+		border-radius: var(--ck-border-radius);
+		@mixin-content;
+	}
+}

+ 32 - 0
packages/ckeditor5-theme-lark/theme/helpers/shadow.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "./colors.css";
+
+:root {
+	/**
+	 * A visual style of element's inner shadow (i.e. input).
+	 */
+	--ck-inner-shadow: 2px 2px 3px var(--ck-color-shadow-inner) inset;
+
+	/**
+	 * A visual style of element's drop shadow (i.e. panel).
+	 */
+	--ck-drop-shadow: 0 1px 2px 0 var(--ck-color-shadow-drop);
+}
+
+/**
+ * A helper to combine multiple shadows.
+ */
+@define-mixin ck-box-shadow $shadowA, $shadowB: 0 0 {
+	box-shadow: $shadowA, $shadowB;
+}
+
+/**
+ * Gives an element a drop shadow so it looks like a floating panel.
+ */
+@define-mixin ck-drop-shadow {
+	@mixin ck-box-shadow var(--ck-drop-shadow);
+}

+ 13 - 0
packages/ckeditor5-theme-lark/theme/helpers/spacing.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-spacing-unit: 						0.8;
+	--ck-spacing-large: 					calc(var(--ck-spacing-unit)*1.5em);
+	--ck-spacing-standard: 					var(--ck-spacing-unit)em;
+	--ck-spacing-medium: 					calc(var(--ck-spacing-unit)*0.8em);
+	--ck-spacing-small: 					calc(var(--ck-spacing-unit)*0.5em);
+	--ck-spacing-tiny: 						calc(var(--ck-spacing-unit)*0.25em);
+}

+ 39 - 0
packages/ckeditor5-theme-lark/theme/helpers/states.css

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "./colors.css";
+
+:root {
+	/**
+	 * A visual style of focused element's outer shadow.
+	 */
+	--ck-focus-outer-shadow: 0 0 3px 2px color(var(--ck-color-border-focus) lightness(+15%));
+
+	/**
+	 * A visual style of focused element's border or outline.
+	 */
+	--ck-focus-ring: 1px solid var(--ck-color-border-focus);
+
+	/**
+	 * An opacity value of disabled UI item.
+	 */
+	--ck-disabled-opacity: .5;
+}
+
+/**
+ * A class which indicates that an element holding it is disabled.
+ */
+@define-mixin ck-disabled {
+	opacity: var(--ck-disabled-opacity);
+}
+
+/**
+ * A visual style of focused element's border.
+ */
+@define-mixin ck-focus-ring {
+	/* Disable native outline. */
+	outline: none;
+	border: var(--ck-focus-ring)
+}

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

@@ -1,26 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-// Lark is based on the UI wireframe theme
-@import '~@ckeditor/ckeditor5-ui/theme/theme';
-
-@import 'helpers/colors';
-@import 'helpers/fonts';
-@import 'helpers/rounded';
-@import 'helpers/spacing';
-@import 'helpers/states';
-@import 'helpers/shadow';
-@import 'helpers/button';
-
-@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/inputtext';
-@import 'components/editor';
-@import 'components/panel/balloonpanel';
-@import 'components/panel/stickypanel';