Kaynağa Gözat

Merge tag 'v1.0.0-beta.1' into stable

Release: v1.0.0-beta.1.
Piotrek Koszuliński 7 yıl önce
ebeveyn
işleme
d25419e8e7
82 değiştirilmiş dosya ile 2146 ekleme ve 1324 silme
  1. 1 1
      packages/ckeditor5-theme-lark/.eslintrc.js
  2. 15 11
      packages/ckeditor5-theme-lark/.travis.yml
  3. 47 0
      packages/ckeditor5-theme-lark/CHANGELOG.md
  4. 1 1
      packages/ckeditor5-theme-lark/LICENSE.md
  5. 3 1
      packages/ckeditor5-theme-lark/README.md
  6. 98 0
      packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css
  7. 0 79
      packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.scss
  8. 0 21
      packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.scss
  9. 9 8
      packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js
  10. 111 163
      packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md
  11. 19 8
      packages/ckeditor5-theme-lark/package.json
  12. 1 1
      packages/ckeditor5-theme-lark/tests/42.js
  13. 3 0
      packages/ckeditor5-theme-lark/tests/manual/iconset.html
  14. 96 0
      packages/ckeditor5-theme-lark/tests/manual/iconset.js
  15. 7 0
      packages/ckeditor5-theme-lark/tests/manual/iconset.md
  16. 105 0
      packages/ckeditor5-theme-lark/tests/manual/inverted.html
  17. 36 0
      packages/ckeditor5-theme-lark/tests/manual/inverted.js
  18. 5 0
      packages/ckeditor5-theme-lark/tests/manual/inverted.md
  19. BIN
      packages/ckeditor5-theme-lark/tests/manual/logo.png
  20. 6 9
      packages/ckeditor5-theme-lark/tests/manual/theme.html
  21. 164 83
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  22. 23 0
      packages/ckeditor5-theme-lark/tests/manual/tickets/113/1.html
  23. 32 0
      packages/ckeditor5-theme-lark/tests/manual/tickets/113/1.js
  24. 5 0
      packages/ckeditor5-theme-lark/tests/manual/tickets/113/1.md
  25. 42 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css
  26. 9 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-engine/placeholder.css
  27. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-heading/heading.css
  28. 59 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadprogress.css
  29. 17 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
  30. 10 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css
  31. 61 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
  32. 17 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
  33. 102 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/button/button.css
  34. 72 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css
  35. 21 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/listdropdown.css
  36. 65 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/splitbutton.css
  37. 8 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/toolbardropdown.css
  38. 48 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/editorui/editorui.css
  39. 35 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/icon/icon.css
  40. 39 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css
  41. 8 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/label/label.css
  42. 41 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
  43. 114 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/balloonpanel.css
  44. 18 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/stickypanel.css
  45. 62 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css
  46. 82 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/tooltip/tooltip.css
  47. 95 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css
  48. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css
  49. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css
  50. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css
  51. 84 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css
  52. 11 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css
  53. 16 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css
  54. 14 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css
  55. 13 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css
  56. 31 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css
  57. 46 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css
  58. 0 94
      packages/ckeditor5-theme-lark/theme/components/button.scss
  59. 0 43
      packages/ckeditor5-theme-lark/theme/components/dropdown.scss
  60. 0 66
      packages/ckeditor5-theme-lark/theme/components/editor.scss
  61. 0 7
      packages/ckeditor5-theme-lark/theme/components/icon.scss
  62. 0 25
      packages/ckeditor5-theme-lark/theme/components/inputtext.scss
  63. 0 6
      packages/ckeditor5-theme-lark/theme/components/label.scss
  64. 0 41
      packages/ckeditor5-theme-lark/theme/components/list.scss
  65. 0 113
      packages/ckeditor5-theme-lark/theme/components/panel/balloonpanel.scss
  66. 0 14
      packages/ckeditor5-theme-lark/theme/components/panel/stickypanel.scss
  67. 0 74
      packages/ckeditor5-theme-lark/theme/components/reset.scss
  68. 0 45
      packages/ckeditor5-theme-lark/theme/components/toolbar/toolbar.scss
  69. 0 77
      packages/ckeditor5-theme-lark/theme/components/tooltip.scss
  70. 0 43
      packages/ckeditor5-theme-lark/theme/helpers/_button.scss
  71. 0 96
      packages/ckeditor5-theme-lark/theme/helpers/_colors.scss
  72. 0 45
      packages/ckeditor5-theme-lark/theme/helpers/_fonts.scss
  73. 0 21
      packages/ckeditor5-theme-lark/theme/helpers/_rounded.scss
  74. 0 26
      packages/ckeditor5-theme-lark/theme/helpers/_shadow.scss
  75. 0 34
      packages/ckeditor5-theme-lark/theme/helpers/_spacing.scss
  76. 0 42
      packages/ckeditor5-theme-lark/theme/helpers/_states.scss
  77. 11 0
      packages/ckeditor5-theme-lark/theme/mixins/_disabled.css
  78. 13 0
      packages/ckeditor5-theme-lark/theme/mixins/_focus.css
  79. 19 0
      packages/ckeditor5-theme-lark/theme/mixins/_rounded.css
  80. 18 0
      packages/ckeditor5-theme-lark/theme/mixins/_shadow.css
  81. 4 0
      packages/ckeditor5-theme-lark/theme/theme.css
  82. 0 26
      packages/ckeditor5-theme-lark/theme/theme.scss

+ 1 - 1
packages/ckeditor5-theme-lark/.eslintrc.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
 

+ 15 - 11
packages/ckeditor5-theme-lark/.travis.yml

@@ -1,24 +1,28 @@
 sudo: required
 dist: trusty
 addons:
+  firefox: "latest"
   apt:
     sources:
-      - google-chrome
+    - google-chrome
     packages:
-      - google-chrome-stable
+    - google-chrome-stable
 language: node_js
 node_js:
-  - "6"
+- '6'
 cache:
-  - node_modules
+- node_modules
 before_install:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 install:
-  - npm install @ckeditor/ckeditor5-dev-tests
-  - ckeditor5-dev-tests-install-dependencies
+- npm install @ckeditor/ckeditor5-dev-tests
+- ckeditor5-dev-tests-install-dependencies
 script:
-  - ckeditor5-dev-tests-travis
+- ckeditor5-dev-tests-travis
 after_success:
-  - codeclimate-test-reporter < coverage/lcov.info
-  - ckeditor5-dev-tests-save-revision
+- ckeditor5-dev-tests-save-revision
+env:
+  global:
+  - secure: JESDEdWvCivJgsOM9AYn5IGudJKItJKqRqWpHVXZI4/pAf2wr81Dlx/y4NJkHHurcoarCnJtX03MY1rXlqjKROGUKy4YzQYDQaE0FkCz20xOXVgglb9GfZVTH/hTs/RnVuf/iTwK+Vg/X5xeI8zNR2XPd2sD5V8wuK87w5h0OunMz8Hdrc4UrS1UvY+5+vYc79E2/GqbGQMHvO6EZpTvg6Tpx5Ndw7gGn4N26Bok+HdbH32SwadKE7fk/HQpmsHoNkKCawp99VdtLR8HaA3MOY89Iq/SNaGtdGFGvsG5hUpbDQCfrPol91U/dIWDK1sFcwp4lrAFcYjc6AKoL/lxIy43esyO/2VqUrEM+vMdM60iif8HMoqMtf/V4LuKHTju4YyxF8UgGD5Ldg2b8wwFxwgLVmHFKpxja0hlbXWdoWFMwkLeXgow+1MxrMO+UbbBmAubjZft2y+DV/2a5UXF8U2ZU64p1IcBxBVW8OQ3WnAqosl+ye0VvmmhghYmKwh2sip1izAG6PGaF1N80fvKIjir+k9lG7bmK+T0K6VH6xQ31NNDy5WjY0g9EOZTChf4SeOD938gKxigey13kRSaMOPzxNjnPKcU+d84WTpvpvgxIdsibgLxFxsUmOXJwCa/b8x1g6y00RhA49szTWoD3JQ8r+Pbte9M795wjPdaZDo=
+  - secure: Fa7KGX1VnF3kdEv159/VzJTzx0NMytO8RfJ28V+MSR3pJN3Hry5V3j08HxaGviwfqHnRUb+tBxQdXjIqRyolMEf8182u/cBwugaXPXH0g/IzOZvJZkSEzheQ/h0TtnxR+qsFylLmzrBtO6mjAY4xwo/uYZYMM2STToDMBiRGThM/Id6QTmNKRbk4koUTSadqIkbaVJDTIsaoRRshClmkjYM6XQSxWDAEo1lPfP1izhbscFSHb9VxWbd7wkwv6PJh4N2FocO5XOHlQG2bICMvfHzS1SPve/iRhG/umW1xiEpAphPd+1mtB3iZGVjXvLGxFOwkS/iAtIejq34ERH3h+ZRE1Ix6avxyyJjcSQmuRaKc4DwLAMNm4LYKxNwBfuBF9uZKFchSfnCt12epzD1yABr6tmBri9iSlColEwAPWQ8I3Sb4lyAGa8wSCBg6pxCHvX083XA6CfDXuMdqxwWQKYeAzb6NEYnSs4t5WXLThoEHcVd/jfGaMg/tLe1wixPf1Zdxg5OFCUYq7Mr3gEfgUNk728yJ06H8spX9pLOjWYdccNTAlLWlrRG4m4Dsuualokd6/nV/7tg0ggKgOwrNPyTmPtkd/drA2TxtfAwV1wfvoALxW3JxqYZt6l1RLaZsRbckEdsV5neX3oTh8jdvu2xvuSNLgaYLcnprSH7Fa0c=

+ 47 - 0
packages/ckeditor5-theme-lark/CHANGELOG.md

@@ -1,6 +1,53 @@
 Changelog
 =========
 
+## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (2018-03-15)
+
+### Features
+
+* Added styles for a selected link element (see [ckeditor/ckeditor5-link#72](https://github.com/ckeditor/ckeditor5-link/issues/72)). ([aa27d55](https://github.com/ckeditor/ckeditor5-theme-lark/commit/aa27d55))
+* Implemented styles for the ButtonDropdown (see: [ckeditor/ckeditor5-ui#333](https://github.com/ckeditor/ckeditor5-ui/issues/333)). Fixed spacing issues with toolbar items wrapped to the new line. Closes [ckeditor/ckeditor5#682](https://github.com/ckeditor/ckeditor5/issues/682). ([ef4d421](https://github.com/ckeditor/ckeditor5-theme-lark/commit/ef4d421))
+
+  Also:
+
+  * Various improvements to visual styles of the dropdowns.
+  * Migrated toolbar to CSS `flex`.
+  * Allowed vertical toolbars.
+* Redesigned the theme (see [ckeditor/ckeditor5#645](https://github.com/ckeditor/ckeditor5/issues/645)). Closes [#120](https://github.com/ckeditor/ckeditor5-theme-lark/issues/120). Closes [ckeditor/ckeditor5#732](https://github.com/ckeditor/ckeditor5/issues/732). ([0fc18a4](https://github.com/ckeditor/ckeditor5-theme-lark/commit/0fc18a4))
+
+### Bug fixes
+
+* A lone paragraph should be vertically centered in the editor. Closes [ckeditor/ckeditor5#847](https://github.com/ckeditor/ckeditor5/issues/847). ([d09dfab](https://github.com/ckeditor/ckeditor5-theme-lark/commit/d09dfab))
+* Classic editor's editable should have a background. Closes [#113](https://github.com/ckeditor/ckeditor5-theme-lark/issues/113). ([1ea8c9d](https://github.com/ckeditor/ckeditor5-theme-lark/commit/1ea8c9d))
+* First child of editable should always have a top margin to make sure the content is separated. Closes [#116](https://github.com/ckeditor/ckeditor5-theme-lark/issues/116). Closes [ckeditor/ckeditor5-ui#351](https://github.com/ckeditor/ckeditor5-ui/issues/351). ([d717139](https://github.com/ckeditor/ckeditor5-theme-lark/commit/d717139))
+* Split button's arrow button should get a proper styling when the button is on. Closes [#131](https://github.com/ckeditor/ckeditor5-theme-lark/issues/131). ([5edae52](https://github.com/ckeditor/ckeditor5-theme-lark/commit/5edae52))
+* The file dialog button should have the same background as other toolbar buttons. Closes [ckeditor/ckeditor5#850](https://github.com/ckeditor/ckeditor5/issues/850). ([c9ae59c](https://github.com/ckeditor/ckeditor5-theme-lark/commit/c9ae59c))
+* The input focus outline should not stand out too much. Closes [ckeditor/ckeditor5#815](https://github.com/ckeditor/ckeditor5/issues/815). ([0ec33f6](https://github.com/ckeditor/ckeditor5-theme-lark/commit/0ec33f6))
+
+### Other changes
+
+* Adjusted the `border-radius` of the various UI components (drop-down, dropdown panel, list drop-down, and split button) for a better look when placed next to one another. Closes [ckeditor/ckeditor5#816](https://github.com/ckeditor/ckeditor5/issues/816). ([d81568d](https://github.com/ckeditor/ckeditor5-theme-lark/commit/d81568d))
+* All colors in the styles should be in the HSLa format. Closes [#124](https://github.com/ckeditor/ckeditor5-theme-lark/issues/124). ([33c7e0d](https://github.com/ckeditor/ckeditor5-theme-lark/commit/33c7e0d))
+* Enlarged background in `.ck-link_selected`. Closes [#155](https://github.com/ckeditor/ckeditor5-theme-lark/issues/155). ([a7f1925](https://github.com/ckeditor/ckeditor5-theme-lark/commit/a7f1925))
+* Fixed the coloring issue with the multi-color icons. Additionally, moved the visual `.ck-icon` styles from `ckeditor5-ui`. Closes [#148](https://github.com/ckeditor/ckeditor5-theme-lark/issues/148). ([fbe7e7d](https://github.com/ckeditor/ckeditor5-theme-lark/commit/fbe7e7d))
+* Improved the visual styles of the split button when hovered or open. Closes [[#134](https://github.com/ckeditor/ckeditor5-theme-lark/issues/134)](https://github.com/ckeditor/ckeditor5-theme-lark/issues/134). ([6db332e](https://github.com/ckeditor/ckeditor5-theme-lark/commit/6db332e))
+* Increased the spacing in the toolbar by making the buttons bigger. Unified rendering of several components. Closes [ckeditor/ckeditor5#820](https://github.com/ckeditor/ckeditor5/issues/820). ([f223d6a](https://github.com/ckeditor/ckeditor5-theme-lark/commit/f223d6a))
+* Manual tests should be aligned to the newest dropdown API ([ckeditor/ckeditor5-ui#356](https://github.com/ckeditor/ckeditor5-ui/issues/356)). Minor refactoring in the drop-down ecosystem. Closes [#129](https://github.com/ckeditor/ckeditor5-theme-lark/issues/129). ([553288a](https://github.com/ckeditor/ckeditor5-theme-lark/commit/553288a))
+* Migrated the theme from SASS to PostCSS (see [ckeditor/ckeditor5-ui#144](https://github.com/ckeditor/ckeditor5-ui/issues/144)). ([efc6004](https://github.com/ckeditor/ckeditor5-theme-lark/commit/efc6004))
+* Moved ck-button-icon mixin to ckeditor5-ui. ([f086062](https://github.com/ckeditor/ckeditor5-theme-lark/commit/f086062))
+* Reduced the contrast of the shadow under various floating elements. Closes [ckeditor/ckeditor5#818](https://github.com/ckeditor/ckeditor5/issues/818). ([cf658d5](https://github.com/ckeditor/ckeditor5-theme-lark/commit/cf658d5))
+* Removed the "generic" layer of the theme to simplify it and improve the maintainability. Closes [#135](https://github.com/ckeditor/ckeditor5-theme-lark/issues/135). ([18809f6](https://github.com/ckeditor/ckeditor5-theme-lark/commit/18809f6))
+* Style `ck-button_with-text` instead of styling every dropdown button in toolbar. Closes [#122](https://github.com/ckeditor/ckeditor5-theme-lark/issues/122). ([93338a5](https://github.com/ckeditor/ckeditor5-theme-lark/commit/93338a5))
+
+### BREAKING CHANGES
+
+* The `.ck-editor-toolbar` CSS class has been removed.
+* Various CSS variables (mostly colors) have been removed. Please make sure your code uses the latest theme API.
+* From now on there's only one subset of the theme, aligned to the default look of CKEditor 5.
+* Various UI components' styles have been rewritten. The CSS selectors that used to style them may have a different specificity and appear in a different order.
+* The styles are no longer developed in SASS which means various `.scss` files (including variables, mixins, etc.) became unavailable. Please refer to the [Theme Customization](https://docs.ckeditor.com/ckeditor5/latest/framework/guides/ui/theme-customization.html) guide to learn more about migration to PostCSS.
+
+
 ## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-theme-lark/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
 
 ### Other changes

+ 1 - 1
packages/ckeditor5-theme-lark/LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **Lark Theme for CKEditor 5** – https://github.com/ckeditor/ckeditor5 <br>
-Copyright (c) 2003-2017, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
 Licensed under the terms of any of the following licenses at your choice:
 

+ 3 - 1
packages/ckeditor5-theme-lark/README.md

@@ -4,7 +4,9 @@ CKEditor 5 Lark theme
 [![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-theme-lark.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark)
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-theme-lark.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-theme-lark)
-[![Test Coverage](https://codeclimate.com/github/ckeditor/ckeditor5-theme-lark/badges/coverage.svg)](https://codeclimate.com/github/ckeditor/ckeditor5-theme-lark/coverage)
+[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://www.browserstack.com/automate/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-theme-lark/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-theme-lark?branch=master)
+<br>
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-theme-lark/status.svg)](https://david-dm.org/ckeditor/ckeditor5-theme-lark)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-theme-lark/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-theme-lark?type=dev)
 

+ 98 - 0
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.css

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/* Overrides the border-radius setting in the theme. */
+	--ck-border-radius: 4px;
+
+	/* Overrides the default font size in the theme. */
+	--ck-font-size-base: 14px;
+
+	/* Helper variables to avoid duplication in the colors. */
+	--ck-custom-background: hsl(270, 1%, 29%);
+	--ck-custom-foreground: hsl(255, 3%, 18%);
+	--ck-custom-border: hsl(300, 1%, 22%);
+	--ck-custom-white: hsl(0, 0%, 100%);
+
+	/* -- Overrides generic colors -------------------------------------------------------------- */
+
+	--ck-color-base-foreground: var(--ck-custom-background);
+	--ck-color-focus-border: hsl(208, 90%, 62%);
+	--ck-color-text: hsl(0, 0%, 98%);
+	--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+	--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+	/* -- Overrides the default .ck-button class colors ----------------------------------------- */
+
+	--ck-color-button-default-background: var(--ck-custom-background);
+	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+	--ck-color-button-default-active-background: hsl(270, 2%, 20%);
+	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+	--ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+	--ck-color-button-on-background: var(--ck-custom-foreground);
+	--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+	--ck-color-button-on-active-background: hsl(255, 4%, 14%);
+	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
+	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+	--ck-color-button-action-background: hsl(168, 76%, 42%);
+	--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+	--ck-color-button-action-active-background: hsl(168, 76%, 36%);
+	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+	--ck-color-button-action-text: var(--ck-custom-white);
+
+	/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
+
+	--ck-color-dropdown-panel-background: var(--ck-custom-background);
+	--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+	/* -- Overrides the default .ck-input class colors ------------------------------------------ */
+
+	--ck-color-input-background: var(--ck-custom-foreground);
+	--ck-color-input-border: hsl(257, 3%, 43%);
+	--ck-color-input-text: hsl(0, 0%, 98%);
+	--ck-color-input-disabled-background: hsl(255, 4%, 21%);
+	--ck-color-input-disabled-border: hsl(250, 3%, 38%);
+	--ck-color-input-disabled-text: hsl(0, 0%, 46%);
+
+	/* -- Overrides the default .ck-list class colors ------------------------------------------- */
+
+	--ck-color-list-background: var(--ck-custom-background);
+	--ck-color-list-item-background-hover: var(--ck-custom-foreground);
+	--ck-color-list-item-background-active: hsl(208, 88%, 52%);
+	--ck-color-list-item-text-active: var(--ck-custom-white);
+
+	/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
+
+	--ck-color-panel-background: var(--ck-custom-background);
+	--ck-color-panel-border: var(--ck-custom-border);
+
+	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+
+	--ck-color-toolbar-background: var(--ck-custom-background);
+	--ck-color-toolbar-border: var(--ck-custom-border);
+
+	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+
+	--ck-color-tooltip-background: hsl(252, 7%, 14%);
+	--ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+
+	--ck-color-image-caption-background: hsl(0, 0%, 97%);
+	--ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+	/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+
+	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
+	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
+	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+
+	/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
+
+	--ck-color-link-default: hsl(190, 100%, 75%);
+}

+ 0 - 79
packages/ckeditor5-theme-lark/docs/_snippets/examples/custom.scss

@@ -1,79 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-// Overrides the border-radius setting in the theme.
-$ck-border-radius: 4px;
-
-// Overrides the default font size in the theme.
-$ck-font-size-base: 14px;
-
-// Helper variables to avoid duplication in $ck-colors.
-$custom-background: #4A494B;
-$custom-foreground: #3a393d;
-$custom-border: #383738;
-$custom-white: #fff;
-
-// Colors used by the ck-color() mixin across the theme.
-$ck-colors: (
-	// Overrides the default focus color used by the ck-focus-ring() mixin.
-	'border-focus': #48a3f5,
-
-	// Overrides the default text color in the theme.
-	'text': #fafafa,
-
-	// Overrides the default shadow colors in the theme.
-	'shadow-drop': rgba( 0, 0, 0, .2 ),
-	'shadow-inner': rgba( 0, 0, 0, .1 ),
-
-	// Overrides the default .ck-button class colors.
-	'button-default-background': $custom-background,
-	'button-default-border': $custom-border,
-	'button-on-background': $custom-foreground,
-	'button-on-border': $custom-border,
-	'button-action-background': #1ABC9C,
-	'button-action-border': #49d2b7,
-	'button-action-text': $custom-white,
-
-	// Overrides the default .ck-dropdown class colors.
-	'dropdown-panel-background': $custom-background,
-	'dropdown-panel-border': $custom-foreground,
-	'dropdown-symbol': #f1f1f1,
-
-	// Overrides the default .ck-input class colors.
-	'input-background': $custom-foreground,
-	'input-border': #6b6970,
-	'input-text': #fafafa,
-
-	// Overrides the default .ck-list class colors.
-	'list-background': $custom-background,
-	'list-item-background-hover': $custom-foreground,
-	'list-item-background-active': #1A8BF1,
-	'list-item-text-active': $custom-white,
-
-	// Overrides the default .ck-balloon-panel class colors.
-	'panel-background': $custom-background,
-	'panel-border': $custom-border,
-
-	// Overrides the default .ck-toolbar class colors.
-	'toolbar-background': $custom-foreground,
-	'toolbar-border': $custom-border,
-
-	// Overrides the default .ck-tooltip class colors.
-	'tooltip-background': #212025,
-	'tooltip-text': #eee,
-
-	// Overrides the default colors used by the editor.
-	'editor-border': $custom-background,
-	'editor-toolbar-background': $custom-background,
-	'editor-toolbar-button-background': $custom-background,
-	'editor-dropdown-background': #535254,
-
-	// Overrides the default colors used by ckeditor5-image package.
-	'image-caption-background': #f7f7f7,
-	'image-caption-text': #333,
-
-	// Overrides the default colors used by ckeditor5-widget package.
-	'widget-border-blurred': #ddd,
-	'widget-border-hover': #FFD25C,
-	'widget-editable-focused-background': $custom-white
-);

+ 0 - 21
packages/ckeditor5-theme-lark/docs/_snippets/examples/extras.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
-
-// Allow using Lark's ck-box-shadow() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
-
-// Allow using colors defined in Lark and the ck-color() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
-
-// The shadow should be 10% brighter than the toolbar background.
-$shadow-color: ck-color( 'editor-toolbar-background', 10 );
-
-.ck-editor-toolbar {
-	.ck-button.ck-dropdown__button {
-		// Apply a dedicated inner box-shadow to the dropdown button.
-		@include ck-box-shadow(
-			0 0 0 1px $shadow-color inset,
-			0 0 5px $shadow-color inset
-		);
-	}
-}

+ 9 - 8
packages/ckeditor5-theme-lark/docs/_snippets/examples/theme-lark.js

@@ -1,26 +1,27 @@
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
 
 /* globals console, window, document */
 
-/* config { "sassImportPath": "./custom.scss" } */
-
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
-import './extras.scss';
+import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloudservices/tests/_utils/cloudservices-config';
+import './custom.css';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-classic-editor' ), {
-		plugins: [ ArticlePluginSet ],
+		plugins: [ ArticlePluginSet, EasyImage ],
 		toolbar: {
-			items: [ 'headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
+			items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ],
 			viewportTopOffset: 60
 		},
 		image: {
-			toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
-		}
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
+		cloudServices: CS_CONFIG
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 111 - 163
packages/ckeditor5-theme-lark/docs/framework/guides/theme-customization.md

@@ -5,11 +5,9 @@ order: 10
 
 # Theme customization
 
-The [`@ckeditor/ckeditor5-theme-lark`](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) is the default theme of CKEditor 5. Lark is modular, [BEM–friendly](https://en.bem.info/methodology/css/) and built in [SASS](http://sass-lang.com).
+The [`@ckeditor/ckeditor5-theme-lark`](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) is the default theme of CKEditor 5. Lark is modular, [BEM–friendly](https://en.bem.info/methodology/css/) and built using [PostCSS](http://postcss.org/).
 
-Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done in two different ways, which can also be used together if needed:
- * By building the editor with a set of custom SASS variables and overriding [defaults](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Variable_Defaults___default), which does not change the size of the build.
- * By importing an extra `.scss` file and overriding the CSS rules, which increases the size of the build.
+Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done by importing an extra `.css` file and overriding the [native CSS variables](https://www.w3.org/TR/css-variables/).
 
 You can see the demo of an editor with the dark theme as a result of customizations described later in this guide:
 
@@ -25,214 +23,164 @@ CKEditor 5 is bundled using [webpack](https://webpack.js.org/) and it handles th
 
 The entire process of building and managing the styles boils down to three steps:
 
-1. **Collecting**: Each JavaScript file in the project can import multiple `.scss` files using the ES6 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) directive. Imported files are handled by the [CSS Loader](https://www.npmjs.com/package/css-loader).
+1. **Collecting**: Each JavaScript file in the project can import multiple `.css` files using the ES6 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) directive. Imported files are handled by the [PostCSS Loader](https://www.npmjs.com/package/postcss-loader).
 
 	```js
-	import '../theme/theme.scss';
+	import '../theme/styles.css';
 
 	class AnyEditorClass {
 		...
 	}
 	```
 
-	```scss
-	// Contents of theme.scss.
-	$color: red;
-
-	.ck-editor {
-		color: $color;
+	```css
+	/* Contents of styles.css. */
+	:root {
+		--color: red;
 	}
-	```
 
-2. **Compiling**: The [SASS Loader](https://www.npmjs.com/package/sass-loader) compiles `.scss` files from SASS to CSS. Each file is compiled asynchronously, in a separate SASS thread.
-
-	```scss
 	.ck-editor {
-		color: $color; // -> color: red;
+		color: var(--color);
 	}
 	```
 
-3. **Loading**: Finally the [Style loader](https://www.npmjs.com/package/style-loader) loads the output CSS along with the `ckeditor.js` file into a `<style>` element in the `<head>` section of the web page.
+2. **Processing**: The PostCSS Loader processes `.css` files to the output CSS. Each file is compiled asynchronously, in a separate processor thread using pre–defined plugins.
+
+3. **Loading**: Finally the [style loader](https://www.npmjs.com/package/style-loader) loads the output CSS along with the `ckeditor.js` file into a `<style>` element in the `<head>` section of the web page.
 
 	```html
 	<head>
 		<style type="text/css">
 			.ck-editor {
-				color: red;
+				color: var(--color);
 			}
 		</style>
 	</head>
 	```
 
-## Customization with SASS variables
+## Customization with CSS variables
 
-Having {@link builds/guides/development/custom-builds#Forking-an-existing-build cloned} an existing build of CKEditor for a quick start, take a look at the specific definitions in the `webpack.config.js` file.
+Having {@link builds/guides/development/custom-builds#forking-an-existing-build cloned} an existing build of CKEditor for a quick start, let's use the full potential of CSS variables. The customization in this guide will make the theme dark, with slightly bigger text and more rounded corners.
 
-```js
-module: {
-	rules: [
-		...
-		{
-			test: /\.scss$/,
-			use: [
-				'style-loader',
-				'css-loader',
-				'sass-loader'
-			]
-		}
-	]
-}
-```
+<info-box hint>
+	Check out the [colors sheet](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals/_colors.css) for the full list of customizable colors. You can also browse [other files](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/ckeditor5-ui/globals) to learn about other useful tools.
+</info-box>
 
-Each SASS file is compiled in a separate thread, so to override default variables (defined with `!default`) across the theme, new values must be imported or declared at the very beginning of **each single** SASS file's compilation process. SASS Loader offers the [`data`](https://www.npmjs.com/package/sass-loader#environment-variables) option to do this.
+The file containing custom variables will be named `custom.css` and it will look as below:
 
+```css
+:root {
+	/* Overrides the border-radius setting in the theme. */
+	--ck-border-radius: 4px;
 
-Now [`@import`](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_import__import) a `custom.scss` file located in the root of the repository containing all custom variables.
+	/* Overrides the default font size in the theme. */
+	--ck-font-size-base: 14px;
 
-```js
-use: [
-	'style-loader',
-	'css-loader',
-	{
-		loader: 'sass-loader',
-		options: {
-			data: `@import 'custom.scss';`
-		}
-	}
-]
-```
+	/* Helper variables to avoid duplication in the colors. */
+	--ck-custom-background: hsl(270, 1%, 29%);
+	--ck-custom-foreground: hsl(255, 3%, 18%);
+	--ck-custom-border: hsl(300, 1%, 22%);
+	--ck-custom-white: hsl(0, 0%, 100%);
 
-Using the full potential of SASS variables, the customization will make the theme dark, with slightly bigger text and more rounded corners.
+	/* -- Overrides generic colors -------------------------------------------------------------- */
 
-<info-box hint>
-	Check out the [colors helper](https://github.com/ckeditor/ckeditor5-theme-lark/blob/master/theme/helpers/_colors.scss) for the full list of customizable colors. You can also browse [other helpers](https://github.com/ckeditor/ckeditor5-theme-lark/tree/master/theme/helpers) to learn about other useful SASS variables.
-</info-box>
+	--ck-color-base-foreground: var(--ck-custom-background);
+	--ck-color-focus-border: hsl(208, 90%, 62%);
+	--ck-color-text: hsl(0, 0%, 98%);
+	--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+	--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
 
-The contents of `custom.scss` could look as below:
-
-```scss
-// Overrides the border radius setting in the theme.
-$ck-border-radius: 4px;
-
-// Overrides the default font size in the theme.
-$ck-font-size-base: 14px;
-
-// Helper variables to avoid duplication in $ck-colors.
-$custom-background: #4A494B;
-$custom-foreground: #3a393d;
-$custom-border: #383738;
-$custom-white: #fff;
-
-// Colors used by the ck-color() mixin across the theme.
-$ck-colors: (
-	// Overrides the default focus color used by the ck-focus-ring() mixin.
-	'border-focus': #48a3f5,
-
-	// Overrides the default text color in the theme.
-	'text': #fafafa,
-
-	// Overrides the default shadow colors in the theme.
-	'shadow-drop': rgba( 0, 0, 0, .2 ),
-	'shadow-inner': rgba( 0, 0, 0, .1 ),
-
-	// Overrides the default .ck-button class colors.
-	'button-default-background': $custom-background,
-	'button-default-border': $custom-border,
-	'button-on-background': $custom-foreground,
-	'button-on-border': $custom-border,
-	'button-action-background': #1ABC9C,
-	'button-action-border': #49d2b7,
-	'button-action-text': $custom-white,
-
-	// Overrides the default .ck-dropdown class colors.
-	'dropdown-panel-background': $custom-background,
-	'dropdown-panel-border': $custom-foreground,
-	'dropdown-symbol': #f1f1f1,
-
-	// Overrides the default .ck-input class colors.
-	'input-background': $custom-foreground,
-	'input-border': #6b6970,
-	'input-text': #fafafa,
-
-	// Overrides the default .ck-list class colors.
-	'list-background': $custom-background,
-	'list-item-background-hover': $custom-foreground,
-	'list-item-background-active': #1A8BF1,
-	'list-item-text-active': $custom-white,
-
-	// Overrides the default .ck-balloon-panel class colors.
-	'panel-background': $custom-background,
-	'panel-border': $custom-border,
-
-	// Overrides the default .ck-toolbar class colors.
-	'toolbar-background': $custom-foreground,
-	'toolbar-border': $custom-border,
-
-	// Overrides the default .ck-tooltip class colors.
-	'tooltip-background': #212025,
-	'tooltip-text': #eee,
-
-	// Overrides the default colors used by the editor.
-	'editor-border': $custom-background,
-	'editor-toolbar-background': $custom-background,
-	'editor-toolbar-button-background': $custom-background,
-	'editor-dropdown-background': #535254,
-
-	// Overrides the default colors used by the ckeditor5-image package.
-	'image-caption-background': #f7f7f7,
-	'image-caption-text': #333,
-
-	// Overrides the default colors used by the ckeditor5-widget package.
-	'widget-border-blurred': #ddd,
-	'widget-border-hover': #FFD25C,
-	'widget-editable-focused-background': $custom-white
-);
-```
+	/* -- Overrides the default .ck-button class colors ----------------------------------------- */
 
-It is time to build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles.
+	--ck-color-button-default-background: var(--ck-custom-background);
+	--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+	--ck-color-button-default-active-background: hsl(270, 2%, 20%);
+	--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+	--ck-color-button-default-disabled-background: var(--ck-custom-background);
 
-## Adding extra styles to the build
+	--ck-color-button-on-background: var(--ck-custom-foreground);
+	--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+	--ck-color-button-on-active-background: hsl(255, 4%, 14%);
+	--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
+	--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
 
-Not every element of the theme can be customized using SASS variables and some visual tweaking may require more complex CSS rules.
+	--ck-color-button-action-background: hsl(168, 76%, 42%);
+	--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+	--ck-color-button-action-active-background: hsl(168, 76%, 36%);
+	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+	--ck-color-button-action-text: var(--ck-custom-white);
 
-In the editor demo presented and the very beginning of this guide, the drop down button in the toolbar has a complex inner [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b) that makes it more appealing. By default, the [Lark](https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark) theme does not support such shadow and that is why it must be defined separately.
+	/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
 
-```css
-.ck-editor-toolbar .ck-button.ck-dropdown__button {
-	box-shadow: 0 0 0 1px #5c5b5d inset, 0 0 5px #5c5b5d inset;
-}
-```
+	--ck-color-dropdown-panel-background: var(--ck-custom-background);
+	--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
 
-The rule above could be added directly to any stylesheet in the web page and most certainly would work as expected.
+	/* -- Overrides the default .ck-input class colors ------------------------------------------ */
 
-But what if the color set customized in the [previous part](#Customization-with-SASS-variables) of this guide has changed? Static CSS rules will neither update along with the SASS variables nor can they benefit from the mixins and functions provided by the theme. To add extra styles and keep them within the ecosystem, a separate SASS file should be created (in his example it will be called `extras.scss`):
+	--ck-color-input-background: var(--ck-custom-foreground);
+	--ck-color-input-border: hsl(257, 3%, 43%);
+	--ck-color-input-text: hsl(0, 0%, 98%);
+	--ck-color-input-disabled-background: hsl(255, 4%, 21%);
+	--ck-color-input-disabled-border: hsl(250, 3%, 38%);
+	--ck-color-input-disabled-text: hsl(0, 0%, 46%);
 
-```scss
-// Allow using Lark's ck-box-shadow() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_shadow.scss';
+	/* -- Overrides the default .ck-list class colors ------------------------------------------- */
 
-// Allow using colors defined in Lark and the ck-color() mixin.
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
+	--ck-color-list-background: var(--ck-custom-background);
+	--ck-color-list-item-background-hover: var(--ck-custom-foreground);
+	--ck-color-list-item-background-active: hsl(208, 88%, 52%);
+	--ck-color-list-item-text-active: var(--ck-custom-white);
 
-// The shadow should be 10% brighter than the toolbar background.
-$shadow-color: ck-color( 'editor-toolbar-background', 10 );
+	/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
 
-.ck-editor-toolbar {
-	.ck-button.ck-dropdown__button {
-		// Apply a dedicated inner box-shadow to the drop-down button.
-		@include ck-box-shadow(
-			0 0 0 1px $shadow-color inset,
-			0 0 5px $shadow-color inset
-		);
-	}
+	--ck-color-panel-background: var(--ck-custom-background);
+	--ck-color-panel-border: var(--ck-custom-border);
+
+	/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+
+	--ck-color-toolbar-background: var(--ck-custom-background);
+	--ck-color-toolbar-border: var(--ck-custom-border);
+
+	/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+
+	--ck-color-tooltip-background: hsl(252, 7%, 14%);
+	--ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+	/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+
+	--ck-color-image-caption-background: hsl(0, 0%, 97%);
+	--ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+	/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+
+	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
+	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
+	--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+
+	/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
+
+	--ck-color-link-default: hsl(190, 100%, 75%);
 }
 ```
 
-This file then needs to be imported into a JavaScript file that is processed by webpack and the [loaders](#Styles-processing-and-bundling), like for example an entry point of the application.
+This file can be referenced directly in HTML **after the `<link>` tag injected by the editor** and its content will simply override the default CSS variables. CSS variables are natively [supported](https://caniuse.com/#feat=css-variables) in all major web browsers and just like like any other CSS rule, they are prioritized in the order of precedence.
+
+```html
+<link rel="stylesheet" href="custom.css" type="text/css">
+```
+
+Alternatively, the style sheet can also be imported into a JavaScript file that is processed by webpack and the [loaders](#styles-processing-and-bundling) becoming part of the build, e.g. an entry point of the application.
+
+<info-box info>
+	Learn more about {@link framework/guides/quick-start building the editor using webpack}.
+</info-box>
 
 ```js
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import 'extras.scss';
+
+// To override the default styles, this file must be imported after ClassicEditor.
+import 'custom.css';
 
 ClassicEditor
 	.create( ... )
@@ -245,4 +193,4 @@ ClassicEditor
 
 ```
 
-This way, the additional styles will stay up–to–date as the application develops and changes over the time.
+It is time to build the editor using `npm run build-ckeditor` and see the results. From now on, the editor's theme is using customized styles, which are part of the build.

+ 19 - 8
packages/ckeditor5-theme-lark/package.json

@@ -1,22 +1,32 @@
 {
   "name": "@ckeditor/ckeditor5-theme-lark",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-beta.1",
   "description": "A bright theme for CKEditor 5.",
   "keywords": [
     "ckeditor5",
     "ckeditor5-theme"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "^1.0.0-alpha.2"
+    "@ckeditor/ckeditor5-ui": "^1.0.0-beta.1"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-core": "^1.0.0-alpha.2",
-    "@ckeditor/ckeditor5-utils": "^1.0.0-alpha.2",
-    "eslint": "^4.8.0",
-    "eslint-config-ckeditor5": "^1.0.6",
+    "@ckeditor/ckeditor5-alignment": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-cloudservices": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-core": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-editor-balloon": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-easy-image": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-font": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-highlight": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-link": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-list": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-undo": "^1.0.0-beta.1",
+    "@ckeditor/ckeditor5-utils": "^1.0.0-beta.1",
+    "eslint": "^4.15.0",
+    "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",
-    "lint-staged": "^4.2.3"
+    "lint-staged": "^6.0.0"
   },
   "engines": {
     "node": ">=6.0.0",
@@ -39,6 +49,7 @@
     "lint": "eslint --quiet '**/*.js'",
     "precommit": "lint-staged"
   },
+  "main": "./theme/theme.css",
   "lint-staged": {
     "**/*.js": [
       "eslint --quiet"

+ 1 - 1
packages/ckeditor5-theme-lark/tests/42.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
 

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

@@ -0,0 +1,3 @@
+<style>
+	svg.ck-icon .ck-icon__fill { fill: yellow; }
+</style>

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

@@ -0,0 +1,96 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+
+import alignLeft from '@ckeditor/ckeditor5-alignment/theme/icons/align-left.svg';
+import alignCenter from '@ckeditor/ckeditor5-alignment/theme/icons/align-center.svg';
+import alignRight from '@ckeditor/ckeditor5-alignment/theme/icons/align-right.svg';
+import alignJustify from '@ckeditor/ckeditor5-alignment/theme/icons/align-justify.svg';
+
+import bold from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
+import italic from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
+import underline from '@ckeditor/ckeditor5-basic-styles/theme/icons/underline.svg';
+import code from '@ckeditor/ckeditor5-basic-styles/theme/icons/code.svg';
+import strikethrough from '@ckeditor/ckeditor5-basic-styles/theme/icons/strikethrough.svg';
+
+import cancel from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
+import check from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
+import lowVision from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
+import image from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
+import objectLeft from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
+import objectCenter from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
+import objectRight from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
+import objectFullWidth from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
+import pencil from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
+import quote from '@ckeditor/ckeditor5-core/theme/icons/quote.svg';
+
+import fontFamily from '@ckeditor/ckeditor5-font/theme/icons/font-family.svg';
+import fontSize from '@ckeditor/ckeditor5-font/theme/icons/font-size.svg';
+
+import marker from '@ckeditor/ckeditor5-highlight/theme/icons/marker.svg';
+import pen from '@ckeditor/ckeditor5-highlight/theme/icons/pen.svg';
+import eraser from '@ckeditor/ckeditor5-highlight/theme/icons/eraser.svg';
+
+import link from '@ckeditor/ckeditor5-link/theme/icons/link.svg';
+import unlink from '@ckeditor/ckeditor5-link/theme/icons/unlink.svg';
+
+import bulletedList from '@ckeditor/ckeditor5-list/theme/icons/bulletedlist.svg';
+import numberedList from '@ckeditor/ckeditor5-list/theme/icons/numberedlist.svg';
+
+import undo from '@ckeditor/ckeditor5-undo/theme/icons/undo.svg';
+import redo from '@ckeditor/ckeditor5-undo/theme/icons/redo.svg';
+
+import '../../theme/ckeditor5-ui/components/editorui/editorui.css';
+
+const icons = {
+	// alignment
+	alignLeft, alignCenter, alignRight, alignJustify,
+
+	// basic-styles
+	bold, italic, underline, code, strikethrough,
+
+	// core
+	check, cancel, lowVision, quote, image, objectLeft, objectCenter, objectRight, objectFullWidth, pencil,
+
+	// font
+	fontFamily, fontSize,
+
+	// highlight
+	marker, pen, eraser,
+
+	// link
+	link, unlink,
+
+	// list
+	bulletedList, numberedList,
+
+	// undo
+	undo, redo
+};
+
+const toolbar = new ToolbarView();
+
+for ( const i in icons ) {
+	const button = new ButtonView();
+
+	button.set( {
+		label: i,
+		icon: icons[ i ],
+		tooltip: true
+	} );
+
+	button.iconView.fillColor = '#FFDA51';
+
+	toolbar.items.add( button );
+}
+
+toolbar.className = 'ck-editor-toolbar ck-reset_all';
+toolbar.render();
+
+document.body.appendChild( toolbar.element );

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

@@ -0,0 +1,7 @@
+## Project icons
+
+Make sure all icons in the toolbar render correctly.
+
+## Notes
+
+* Some icons like "marker" and "pen" should be filled with yellow color.

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

@@ -0,0 +1,105 @@
+<style>
+	body {
+		height: 2000px;
+	}
+
+	:root {
+		/* Helper variables to avoid duplication in the colors. */
+		--ck-custom-background: hsl(270, 1%, 29%);
+		--ck-custom-foreground: hsl(255, 3%, 18%);
+		--ck-custom-border: hsl(300, 1%, 22%);
+		--ck-custom-white: hsl(0, 0%, 100%);
+
+		/* -- Overrides generic colors -------------------------------------------------------------- */
+
+		--ck-color-base-foreground: var(--ck-custom-background);
+		--ck-color-focus-border: hsl(208, 90%, 62%);
+		--ck-color-text: hsl(0, 0%, 98%);
+		--ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+		--ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+		/* -- Overrides the default .ck-button class colors ----------------------------------------- */
+
+		--ck-color-button-default-background: var(--ck-custom-background);
+		--ck-color-button-default-focus-background: hsl(270, 1%, 22%);
+		--ck-color-button-default-active-background: hsl(270, 2%, 20%);
+		--ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+		--ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+		--ck-color-button-on-background: var(--ck-custom-foreground);
+		--ck-color-button-on-focus-background: hsl(255, 4%, 16%);
+		--ck-color-button-on-active-background: hsl(255, 4%, 14%);
+		--ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
+		--ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+		--ck-color-button-action-background: hsl(168, 76%, 42%);
+		--ck-color-button-action-focus-background: hsl(168, 76%, 38%);
+		--ck-color-button-action-active-background: hsl(168, 76%, 36%);
+		--ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+		--ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+		--ck-color-button-action-text: var(--ck-custom-white);
+
+		/* -- Overrides the default .ck-dropdown class colors --------------------------------------- */
+
+		--ck-color-dropdown-panel-background: var(--ck-custom-background);
+		--ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+		/* -- Overrides the default .ck-input class colors ------------------------------------------ */
+
+		--ck-color-input-background: var(--ck-custom-foreground);
+		--ck-color-input-border: hsl(257, 3%, 43%);
+		--ck-color-input-text: hsl(0, 0%, 98%);
+		--ck-color-input-disabled-background: hsl(255, 4%, 21%);
+		--ck-color-input-disabled-border: hsl(250, 3%, 38%);
+		--ck-color-input-disabled-text: hsl(0, 0%, 46%);
+
+		/* -- Overrides the default .ck-list class colors ------------------------------------------- */
+
+		--ck-color-list-background: var(--ck-custom-background);
+		--ck-color-list-item-background-hover: var(--ck-custom-foreground);
+		--ck-color-list-item-background-active: hsl(208, 88%, 52%);
+		--ck-color-list-item-text-active: var(--ck-custom-white);
+
+		/* -- Overrides the default .ck-balloon-panel class colors ---------------------------------- */
+
+		--ck-color-panel-background: var(--ck-custom-background);
+		--ck-color-panel-border: var(--ck-custom-border);
+
+		/* -- Overrides the default .ck-toolbar class colors ---------------------------------------- */
+
+		--ck-color-toolbar-background: var(--ck-custom-background);
+		--ck-color-toolbar-border: var(--ck-custom-border);
+
+		/* -- Overrides the default .ck-tooltip class colors ---------------------------------------- */
+
+		--ck-color-tooltip-background: hsl(252, 7%, 14%);
+		--ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+		/* -- Overrides the default colors used by ckeditor5-image package -------------------------- */
+
+		--ck-color-image-caption-background: hsl(0, 0%, 97%);
+		--ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+		/* -- Overrides the default colors used by ckeditor5-widget package ------------------------- */
+
+		--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
+		--ck-color-widget-border-hover: hsl(43, 100%, 68%);
+		--ck-color-widget-editable-focused-background: var(--ck-custom-white);
+
+		/* -- Overrides the default colors used by ckeditor5-link package ------------------------- */
+
+		--ck-color-link-default: hsl(190, 100%, 75%);
+	}
+</style>
+
+<h2>Editor-classic</h2>
+
+<div id="editor-classic">
+	<h2>The three greatest things you learn from traveling</h2><p>Like all the great things on earth traveling teaches us by example. Here are some of the most <strong>precious lessons</strong> I’ve learned over the years of traveling.</p><h3>Appreciation of diversity</h3><p>Getting used to an <a href="https://ckeditor.com">entirely different culture</a> can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
+</div>
+
+<h2>Editor-balloon</h2>
+
+<div id="editor-balloon">
+	<h2>The three greatest things you learn from traveling</h2><p>Like all the great things on earth traveling teaches us by example. Here are some of the most <strong>precious lessons</strong> I’ve learned over the years of traveling.</p><h3>Appreciation of diversity</h3><p>Getting used to an <a href="https://ckeditor.com">entirely different culture</a> can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
+</div>

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

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

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

@@ -0,0 +1,5 @@
+## Inverted Lark
+
+1. Check the overall look and feel of the inverted theme.
+2. Make sure all UI components render correctly.
+3. Make sure all UI components respond to focus, hover, and other state changes.

BIN
packages/ckeditor5-theme-lark/tests/manual/logo.png


+ 6 - 9
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -5,9 +5,9 @@
 			line-height: 3em;
 		}
 
-		*[id^="icon"] .ck-icon + .ck-icon,
-		*[id^="button"] .ck-button + .ck-button,
-		*[id^="dropdown"] .ck-dropdown + .ck-dropdown {
+		*:not(.ck-toolbar) > .ck-icon + .ck-icon,
+		*:not(.ck-toolbar) > .ck-button + .ck-button:not(.ck-splitbutton__arrow),
+		*:not(.ck-toolbar) > .ck-dropdown + .ck-dropdown {
 			margin-left: 0.3em;
 		}
 
@@ -53,7 +53,6 @@
 
 		<div id="button-icon-custom"></div>
 
-		<br/>
 		<br/>
 
 		<div id="button-icon-states"></div>
@@ -68,14 +67,14 @@
 
 	<h3>Button: Tooltip</h3>
 	<div id="button-tooltip" class="ck-reset_all"></div>
-<hr/>
 
 <h2>Dropdown</h2>
 
 	<h3>ListDropdown</h3>
-	<div id="dropdown" class="ck-reset_all"></div>
+	<div id="list-dropdown" class="ck-reset_all"></div>
 
-<hr/>
+	<h3>ButtonDropdown</h3>
+	<div id="button-dropdown" class="ck-reset_all"></div>
 
 <h2>Toolbar</h2>
 
@@ -97,8 +96,6 @@
 	<h3>Toolbar: Multi-row</h3>
 	<div id="toolbar-multi-row" class="ck-reset_all"></div>
 
-<hr/>
-
 <h2>Inputs</h2>
 
 	<h3>Labeled</h3>

+ 164 - 83
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
 
@@ -13,7 +13,9 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import createListDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown';
+
+import { createDropdown, addListToDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
@@ -21,8 +23,7 @@ import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinp
 
 import boldIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg';
 import italicIcon from '@ckeditor/ckeditor5-basic-styles/theme/icons/italic.svg';
-
-import '../../theme/theme.scss';
+import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 
 class TextView extends View {
 	constructor() {
@@ -62,7 +63,8 @@ const ui = testUtils.createTestUIView( {
 	'buttonResponsive3': '#button-responsive-3',
 	'buttonTooltip': '#button-tooltip',
 
-	dropdown: '#dropdown',
+	listDropdown: '#list-dropdown',
+	buttonDropdown: '#button-dropdown',
 
 	'toolbarText': '#toolbar-text',
 	'toolbarButton': '#toolbar-button',
@@ -93,19 +95,19 @@ function renderIcon() {
 function renderButton() {
 	// --- States ------------------------------------------------------------
 
-	ui.buttonStates.add( button( {
-		label: 'State: normal (none)',
-	} ) );
-
-	ui.buttonStates.add( button( {
-		label: 'State: disabled',
-		isEnabled: false
-	} ) );
-
-	ui.buttonStates.add( button( {
-		label: 'State: on',
-		isOn: true
-	} ) );
+	ui.buttonStates.add( toolbar( [
+		button( {
+			label: 'State: normal (none)',
+		} ),
+		button( {
+			label: 'State: disabled',
+			isEnabled: false
+		} ),
+		button( {
+			label: 'State: on',
+			isOn: true
+		} )
+	] ) );
 
 	// --- Types ------------------------------------------------------------
 
@@ -113,9 +115,9 @@ function renderButton() {
 	const roundedButton = button( { label: 'Rounded corners' } );
 	const boldButton = button( { label: 'Bold text' } );
 
-	ui.buttonTypes.add( actionButton );
-	ui.buttonTypes.add( roundedButton );
-	ui.buttonTypes.add( boldButton );
+	ui.buttonTypes.add( toolbar( [
+		actionButton, roundedButton, boldButton
+	] ) );
 
 	// TODO: It requires model interface.
 	actionButton.element.classList.add( 'ck-button-action' );
@@ -128,59 +130,50 @@ function renderButton() {
 
 	// --- Icon ------------------------------------------------------------
 
-	ui.buttonIcon.add( button( {
-		label: 'Bold',
-		icon: boldIcon
-	} ) );
+	ui.buttonIcon.add( toolbar( [
+		button( {
+			label: 'Bold',
+			icon: boldIcon
+		} )
+	] ) );
 
 	const styledButton = button( {
 		label: 'Button with an icon and custom styles',
 		icon: italicIcon
 	} );
 
-	ui.buttonIconCustom.add( styledButton );
+	ui.buttonIconCustom.add( toolbar( [ styledButton ] ) );
 
 	// TODO: It probably requires model interface.
 	styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
 
-	ui.buttonIconStates.add( button( {
-		label: 'Disabled',
-		icon: boldIcon,
-		isEnabled: false
-	} ) );
-
 	const disabledActionButton = button( {
 		label: 'Disabled action',
 		icon: boldIcon,
 		isEnabled: false
 	} );
 
-	ui.buttonIconStates.add( disabledActionButton );
+	ui.buttonIconStates.add( toolbar( [
+		button( {
+			label: 'Disabled',
+			icon: boldIcon,
+			isEnabled: false
+		} ),
+		disabledActionButton,
+		button( {
+			label: 'Bold',
+			withText: false,
+			tooltip: true,
+			icon: boldIcon
+		} )
+	] ) );
 
 	// TODO: It requires model interface.
 	disabledActionButton.element.classList.add( 'ck-button-action' );
 
-	ui.buttonIconStates.add( button( {
-		label: 'Bold',
-		withText: false,
-		tooltip: true,
-		icon: boldIcon
-	} ) );
-
 	// --- Responsive ------------------------------------------------------------
 
 	for ( let i = 1; i < 4; i++ ) {
-		ui[ `buttonResponsive${ i }` ].add( button( {
-			label: 'A button',
-			isEnabled: true
-		} ) );
-
-		ui[ `buttonResponsive${ i }` ].add( button( {
-			label: 'Bold',
-			icon: boldIcon,
-			isEnabled: true
-		} ) );
-
 		const notextButton = button( {
 			label: 'Bold',
 			withText: false,
@@ -188,7 +181,18 @@ function renderButton() {
 			icon: boldIcon
 		} );
 
-		ui[ `buttonResponsive${ i }` ].add( notextButton );
+		ui[ `buttonResponsive${ i }` ].add( toolbar( [
+			button( {
+				label: 'A button',
+				isEnabled: true
+			} ),
+			button( {
+				label: 'Bold',
+				icon: boldIcon,
+				isEnabled: true
+			} ),
+			notextButton
+		] ) );
 
 		// TODO: It requires model interface.
 		notextButton.element.classList.add( 'ck-button-action' );
@@ -196,19 +200,20 @@ function renderButton() {
 
 	// --- Tooltip ------------------------------------------------------------
 
-	ui.buttonTooltip.add( button( {
-		label: 'This button has a tooltip (south)',
-		withText: true,
-		tooltip: 'The content of the tooltip',
-	} ) );
-
-	ui.buttonTooltip.add( button( {
-		label: 'This one too – north',
-		withText: true,
-		keystroke: 'Ctrl+N',
-		tooltip: true,
-		tooltipPosition: 'n'
-	} ) );
+	ui.buttonTooltip.add( toolbar( [
+		button( {
+			label: 'This button has a tooltip (south)',
+			withText: true,
+			tooltip: 'The content of the tooltip',
+		} ),
+		button( {
+			label: 'This one too – north',
+			withText: true,
+			keystroke: 'Ctrl+N',
+			tooltip: true,
+			tooltipPosition: 'n'
+		} )
+	] ) );
 }
 
 function renderDropdown() {
@@ -223,21 +228,55 @@ function renderDropdown() {
 		} ) );
 	} );
 
-	const itemListModel = new Model( {
-		items: collection
-	} );
-
-	ui.dropdown.add( dropdown( {
-		label: 'Normal state',
-		isEnabled: true,
-		content: itemListModel
-	} ) );
+	ui.listDropdown.add( toolbar( [
+		listDropdown( {
+			label: 'Normal state',
+			isEnabled: true,
+			items: collection
+		} ),
+		listDropdown( {
+			label: 'Disabled',
+			isEnabled: false,
+			items: collection
+		} )
+	] ) );
 
-	ui.dropdown.add( dropdown( {
-		label: 'Disabled',
-		isEnabled: false,
-		content: itemListModel
-	} ) );
+	ui.buttonDropdown.add( toolbar( [
+		toolbarDropdown( {
+			label: 'Normal state',
+			isEnabled: true,
+			buttons: [
+				button( {
+					withText: false,
+					label: 'foo',
+					icon: boldIcon
+				} ),
+				button( {
+					withText: false,
+					label: 'foo',
+					icon: italicIcon
+				} )
+			]
+		} ),
+		toolbarDropdown( {
+			label: 'Disabled',
+			isEnabled: false,
+			buttons: [
+				button( {
+					withText: false,
+					isEnabled: false,
+					label: 'foo',
+					icon: boldIcon
+				} ),
+				button( {
+					withText: false,
+					isEnabled: false,
+					label: 'foo',
+					icon: italicIcon
+				} )
+			]
+		} )
+	] ) );
 }
 
 function renderToolbar() {
@@ -257,7 +296,12 @@ function renderToolbar() {
 			label: 'Button with an icon',
 			icon: boldIcon
 		} ),
-		dropdown(),
+		listDropdown(),
+		splitButtonDropdown( {
+			label: 'Split button dropdown',
+			withText: false,
+			icon: boldIcon
+		} ),
 		button()
 	] ) );
 
@@ -368,15 +412,52 @@ function toolbar( children = [] ) {
 	return toolbar;
 }
 
-function dropdown( {
+function listDropdown( {
 	label = 'Dropdown',
 	isEnabled = true,
 	isOn = false,
 	withText = true,
 	items = new Collection( { idProperty: 'label' } )
 } = {} ) {
-	const model = new Model( { label, isEnabled, items, isOn, withText } );
-	const dropdown = createListDropdown( model, {} );
+	const dropdown = createDropdown( {} );
+	addListToDropdown( dropdown, items );
+
+	dropdown.buttonView.set( { label, isEnabled, isOn, withText } );
+
+	return dropdown;
+}
+
+function toolbarDropdown( {
+	label = 'Button dropdown',
+	isEnabled = true,
+	isOn = false,
+	withText = true,
+	isVertical = true,
+	buttons = []
+} = {} ) {
+	const dropdown = createDropdown( {} );
+
+	addToolbarToDropdown( dropdown, buttons );
+
+	dropdown.buttonView.set( { label, isEnabled, isVertical, isOn, withText } );
+
+	return dropdown;
+}
+
+function splitButtonDropdown( {
+	label = 'Button dropdown',
+	icon = undefined,
+	isEnabled = true,
+	isOn = false,
+	withText = true,
+	isVertical = true,
+	buttons = []
+} = {} ) {
+	const dropdown = createDropdown( {}, SplitButtonView );
+
+	addToolbarToDropdown( dropdown, buttons );
+
+	dropdown.buttonView.set( { icon, label, isEnabled, isVertical, isOn, withText } );
 
 	return dropdown;
 }

+ 23 - 0
packages/ckeditor5-theme-lark/tests/manual/tickets/113/1.html

@@ -0,0 +1,23 @@
+<style>
+	body {
+		background: red;
+	}
+</style>
+
+<h2>Editor-classic</h2>
+
+<div id="editor-classic">
+	<p>This editable should have a background.</p>
+	<p>This editable should have a background.</p>
+	<p>This editable should have a background.</p>
+	<p>This editable should have a background.</p>
+</div>
+
+<h2>Editor-balloon</h2>
+
+<div id="editor-balloon">
+	<p>This editable's background should be transparent.</p>
+	<p>This editable's background should be transparent.</p>
+	<p>This editable's background should be transparent.</p>
+	<p>This editable's background should be transparent.</p>
+</div>

+ 32 - 0
packages/ckeditor5-theme-lark/tests/manual/tickets/113/1.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, window, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+const config = {
+	plugins: [ ArticlePluginSet ]
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-classic' ), config )
+	.then( editor => {
+		window.classicEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+BalloonEditor
+	.create( document.querySelector( '#editor-balloon' ), config )
+	.then( editor => {
+		window.balloonEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 5 - 0
packages/ckeditor5-theme-lark/tests/manual/tickets/113/1.md

@@ -0,0 +1,5 @@
+## Classic editor's editable should have a background [#113](https://github.com/ckeditor/ckeditor5-theme-lark/issues/113)
+
+1. The background of body should be red.
+2. The classic editor's editable background **should not** be red.
+2. The balloon editor's editable background **should** be red.

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

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../mixins/_rounded.css";
+
+.ck-editor__top {
+	& .ck-sticky-panel {
+		& .ck-toolbar {
+			@mixin ck-rounded-corners {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			border-bottom-width: 0;
+		}
+
+		& .ck-sticky-panel__content_sticky .ck-toolbar {
+			border-bottom-width: 1px;
+
+			@mixin ck-rounded-corners {
+				border-radius: 0;
+			}
+		}
+	}
+}
+
+/* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */
+.ck-editor__main .ck-editor__editable {
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/113 */
+	background: var(--ck-color-base-background);
+
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	&:not(.ck-focused) {
+		border-color: var(--ck-color-base-border);
+	}
+}

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

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

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

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Resize dropdown's button label. */
+.ck-dropdown.ck-heading-dropdown {
+	& .ck-dropdown__button .ck-button__label {
+		width: 8em;
+	}
+}

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

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2003-2018, 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: var(--ck-color-upload-infinite-background);
+		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: var(--ck-color-upload-bar-background);
+		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%;
+	}
+}

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

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-text-alternative-form {
+	padding: var(--ck-spacing-standard);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
+	}
+}

+ 10 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-link/link.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* Class added to span element surrounding currently selected link. */
+.ck-link_selected {
+	background: var(--ck-color-link-selected-background);
+	outline: 1px solid var(--ck-color-link-selected-background);
+}

+ 61 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
+@import "../mixins/_focus.css";
+@import "../mixins/_shadow.css";
+
+.ck-link-actions {
+	padding: var(--ck-spacing-standard);
+
+	& .ck-button.ck-link-actions__preview {
+		padding-left: 0;
+		padding-right: 0;
+
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			background: none;
+		}
+
+		&:active {
+			box-shadow: none;
+		}
+
+		&:focus {
+			& .ck-button__label {
+				text-decoration: underline;
+			}
+		}
+
+		& .ck-button__label {
+			padding: 0 var(--ck-spacing-standard);
+			color: var(--ck-color-link-default);
+			text-overflow: ellipsis;
+			cursor: pointer;
+
+			/* Match the box model of the link editor form's input so the balloon
+			does not change width when moving between actions and the form. */
+			max-width: var(--ck-input-text-width);
+			min-width: 3em;
+			text-align: center;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
+	}
+}

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

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-link-form {
+	padding: var(--ck-spacing-standard);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	& > :not(:first-child) {
+		margin-left: var(--ck-spacing-standard);
+	}
+}

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

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_focus.css";
+@import "../../../mixins/_shadow.css";
+@import "../../../mixins/_disabled.css";
+@import "../../../mixins/_rounded.css";
+@import "../../mixins/_button.css";
+
+.ck-button,
+a.ck-button {
+	@mixin ck-button-colors --ck-color-button-default;
+	@mixin ck-rounded-corners;
+
+	white-space: nowrap;
+	cursor: default;
+	vertical-align: middle;
+	padding: var(--ck-spacing-tiny);
+	text-align: center;
+
+	/* A very important piece of styling. Go to variable declaration to learn more. */
+	min-width: var(--ck-ui-component-min-height);
+	min-height: var(--ck-ui-component-min-height);
+
+	/* Normalize the height of the line. Removing this will break consistent height
+	among text and text-less buttons (with icons). */
+	line-height: 1;
+
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	/* Avoid flickering when the foucs border shows up. */
+	border: 1px solid transparent;
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow);
+
+		/* Disable border part of the focus ring for the buttons. It is too much. */
+		border-color: transparent;
+	}
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+	&.ck-disabled {
+		& .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-tiny) var(--ck-spacing-standard);
+
+		& .ck-button__icon {
+			margin-left: calc(-1 * var(--ck-spacing-small));
+			margin-right: var(--ck-spacing-small);
+		}
+	}
+
+	/* A style of the button which is currently on, e.g. its feature is active. */
+	&.ck-on {
+		@mixin ck-button-colors --ck-color-button-on;
+	}
+
+	& .ck-button__icon {
+		& use,
+		& use * {
+			color: inherit;
+		}
+	}
+
+	& .ck-button__label {
+		/* Enable font size inheritance, which allows fluid UI scaling. */
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+		cursor: inherit;
+
+		/* Must be consistent with .ck-icon's vertical align. Otherwise, buttons with and
+		without labels (but with icons) have different sizes in Chrome */
+		vertical-align: middle;
+	}
+}
+
+/* A style of the button which handles the primary action. */
+.ck-button-action,
+a.ck-button-action {
+	@mixin ck-button-colors --ck-color-button-action;
+
+	color: var(--ck-color-button-action-text);
+}
+
+.ck-button-bold,
+a.ck-button-bold {
+	font-weight: bold;
+}

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

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_disabled.css";
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-dropdown-arrow-size: calc(0.5 * var(--ck-icon-size));
+}
+
+.ck-dropdown {
+	/* Enable font size inheritance, which allows fluid UI scaling. */
+	font-size: inherit;
+
+	& .ck-dropdown__arrow {
+		right: var(--ck-spacing-standard);
+		width: var(--ck-dropdown-arrow-size);
+	}
+
+	&.ck-disabled .ck-dropdown__arrow {
+		@mixin ck-disabled;
+	}
+
+	& .ck-button.ck-dropdown__button {
+		/* A space to accommodate the triangle. */
+		padding-right: calc(2.5 * var(--ck-spacing-standard));
+
+		&:not(.ck-button_with-text) {
+			/* Make sure dropdowns with just an icon have the right inner spacing */
+			padding-left: var(--ck-spacing-small);
+		}
+
+		/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/70 */
+		&.ck-disabled .ck-button__label {
+			@mixin ck-disabled;
+		}
+
+		/* https://github.com/ckeditor/ckeditor5/issues/816 */
+		&.ck-on {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		/* #23 */
+		& .ck-button__label {
+			width: 7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+.ck-dropdown__panel {
+	@mixin ck-rounded-corners;
+	@mixin ck-drop-shadow;
+
+	/* Disabled radius of top-left border to be consistent with .dropdown__button
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+	}
+
+	background: var(--ck-color-dropdown-panel-background);
+	border: 1px solid var(--ck-color-dropdown-panel-border);
+	bottom: 0;
+
+	/* Make sure the panel is at least as wide as the dropdown's button. */
+	min-width: 100%;
+}

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+.ck-dropdown .ck-dropdown__panel .ck-list {
+	/* Disabled radius of top-left border to be consistent with .dropdown__button
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	@mixin ck-rounded-corners {
+		border-top-left-radius: 0;
+	}
+
+	/* Using absolute units to make sure each element has the same height and padding.
+	https://github.com/ckeditor/ckeditor5-heading/issues/63 */
+	& > .ck-list__item {
+		line-height: calc(.8*var(--ck-line-height-base)*var(--ck-font-size-base));
+		padding: calc(.4*var(--ck-line-height-base)*var(--ck-font-size-base));
+	}
+}

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

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+:root {
+	--ck-color-split-button-hover-background: hsl(0, 0%, 92%);
+	--ck-color-split-button-hover-border: hsl(0, 0%, 70%);
+}
+
+.ck-splitbutton {
+	& > .ck-splitbutton__action {
+		/* Don't round the first button on the right side */
+		@mixin ck-rounded-corners {
+			border-top-right-radius: unset;
+			border-bottom-right-radius: unset;
+		}
+	}
+
+	& > .ck-splitbutton__arrow {
+		/* It's a text-less button but still, it should not be square. */
+		min-width: unset;
+
+		/* Don't round the arrow button on the right side */
+		@mixin ck-rounded-corners {
+			border-top-left-radius: unset;
+			border-bottom-left-radius: unset;
+		}
+
+		& svg {
+			width: var(--ck-dropdown-arrow-size);
+		}
+	}
+
+	/* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
+	as a whole. The background of both buttons should stand out and there should be a visual
+	separation between both buttons. */
+	&.ck-splitbutton_open,
+	&:hover {
+		/* When the split button hovered as a whole, not as individual buttons. */
+		& > .ck-button:not(.ck-on):not(:hover) {
+			background: var(--ck-color-split-button-hover-background);
+		}
+
+		& > .ck-splitbutton__arrow {
+			border-left-color: var(--ck-color-split-button-hover-border);
+		}
+	}
+
+	/* Don't round the bottom left and right corners of the buttons when "open"
+	https://github.com/ckeditor/ckeditor5/issues/816 */
+	&.ck-splitbutton_open {
+		@mixin ck-rounded-corners {
+			& > .ck-splitbutton__action {
+				border-bottom-left-radius: 0;
+			}
+
+			& > .ck-splitbutton__arrow {
+				border-bottom-right-radius: 0;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-toolbar-dropdown .ck-toolbar {
+	border: 0;
+}

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

@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_disabled.css";
+@import "../../../mixins/_shadow.css";
+@import "../../../mixins/_focus.css";
+@import "../../mixins/_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;
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/116 */
+	& > *:first-child {
+		margin-top: var(--ck-spacing-large);
+	}
+
+	/* https://github.com/ckeditor/ckeditor5/issues/847 */
+	& > *:last-child {
+		margin-bottom: var(--ck-spacing-large);
+	}
+}
+
+/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
+.ck-toolbar-container[class*="arrow_n"] {
+	&::after {
+		border-bottom-color: var(--ck-color-base-foreground);
+	}
+}
+
+.ck-toolbar-container[class*="arrow_s"] {
+	&::after {
+		border-top-color: var(--ck-color-base-foreground);
+	}
+}

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-icon-size: calc(var(--ck-line-height-base) * var(--ck-font-size-normal));
+}
+
+svg.ck-icon {
+	width: var(--ck-icon-size);
+	height: var(--ck-icon-size);
+
+	/* Multiplied by the height of the line in "px" should give SVG "viewport" dimensions */
+	font-size: .8333350694em;
+
+	color: inherit;
+
+	/* Inherit cursor style (#5). */
+	cursor: inherit;
+
+	/* This will prevent blurry icons on Firefox. See #340. */
+	will-change: transform;
+
+	& * {
+		/* Inherit cursor style (#5). */
+		cursor: inherit;
+
+		/* Allows dynamic coloring of the icons. */
+		color: inherit;
+
+		/* Needed by FF. */
+		fill: currentColor;
+	}
+}

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_focus.css";
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-input-text-width: 18em;
+}
+
+.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-extra-tiny) var(--ck-spacing-medium);
+	min-width: var(--ck-input-text-width);
+
+	/* This is important to stay of the same height as surrounding buttons */
+	min-height: var(--ck-ui-component-min-height);
+
+	transition-property: box-shadow,border;
+	transition: .2s ease-in-out;
+
+	&:focus {
+		@mixin ck-focus-ring;
+		@mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
+	}
+
+	&[readonly] {
+		border: 1px solid var(--ck-color-input-disabled-border);
+		background: var(--ck-color-input-disabled-background);
+		color: var(--ck-color-input-disabled-text);
+	}
+}

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

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

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
+
+.ck-list {
+	@mixin ck-rounded-corners;
+
+	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: var(--ck-color-list-item-background-active-focus);
+	}
+}

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

@@ -0,0 +1,114 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-balloon-arrow-offset: 2px;
+	--ck-balloon-arrow-height: 10px;
+	--ck-balloon-arrow-half-width: 8px;
+}
+
+.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-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_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;
+		}
+	}
+}

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

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.css";
+
+.ck-toolbar {
+	@mixin ck-rounded-corners;
+
+	background: var(--ck-color-toolbar-background);
+	padding: 0 var(--ck-spacing-small);
+	border: 1px solid var(--ck-color-toolbar-border);
+
+	& > * {
+		/* (#11) Separate toolbar items. */
+		margin-right: var(--ck-spacing-small);
+
+		/* Make sure items wrapped to the next line have v-spacing */
+		margin-top: var(--ck-spacing-small);
+		margin-bottom: var(--ck-spacing-small);
+	}
+
+	&.ck-toolbar_vertical {
+		/* Items in a vertical toolbar span the entire width. */
+		padding: 0;
+
+		& > * {
+			/* Items in a vertical toolbar should span the horizontal space. */
+			width: 100%;
+
+			/* Items in a vertical toolbar should have no margin. */
+			margin: 0;
+
+			/* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
+			border-radius: 0;
+
+			/* Items in a vertical toolbar span the entire width so any border is pointless. */
+			border: 0;
+		}
+	}
+
+	& > *:last-child {
+		margin-right: 0;
+	}
+
+	@nest .ck-toolbar-container & {
+		border: 0;
+	}
+}
+
+.ck-toolbar__separator {
+	align-self: stretch;
+	width: 1px;
+	margin-top: 0;
+	margin-bottom: 0;
+	background: var(--ck-color-toolbar-border);
+}
+
+.ck-toolbar__newline {
+	margin: 0;
+}

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

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_rounded.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;
+}
+

+ 95 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_colors.css

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-color-base-foreground: 								hsl(0, 0%, 98%);
+	--ck-color-base-background: 								hsl(0, 0%, 100%);
+	--ck-color-base-border: 									hsl(0, 0%, 77%);
+	--ck-color-base-action: 									hsl(104, 44%, 48%);
+	--ck-color-base-focus: 										hsl(209, 92%, 70%);
+	--ck-color-base-text: 										hsl(0, 0%, 20%);
+	--ck-color-base-active: 									hsl(208, 88%, 52%);
+	--ck-color-base-active-focus:								hsl(208, 88%, 47%);
+
+	/* -- Generic colors ------------------------------------------------------------------------ */
+
+	--ck-color-focus-border: 									hsl(208, 90%, 62%);
+	--ck-color-focus-shadow:									hsl(209, 90%, 72%);
+	--ck-color-text: 											var(--ck-color-base-text);
+	--ck-color-shadow-drop: 									hsla(0, 0%, 0%, 0.15);
+	--ck-color-shadow-inner: 									hsla(0, 0%, 0%, 0.1);
+
+	/* -- Buttons ------------------------------------------------------------------------------- */
+
+	--ck-color-button-default-background: 						transparent;
+	--ck-color-button-default-focus-background: 				hsl(0, 0%, 90%);
+	--ck-color-button-default-active-background: 				hsl(0, 0%, 85%);
+	--ck-color-button-default-active-shadow: 					hsl(0, 0%, 75%);
+	--ck-color-button-default-disabled-background: 				transparent;
+
+	--ck-color-button-on-background: 							hsl(0, 0%, 87%);
+	--ck-color-button-on-focus-background: 						hsl(0, 0%, 77%);
+	--ck-color-button-on-active-background: 					hsl(0, 0%, 73%);
+	--ck-color-button-on-active-shadow: 						hsl(0, 0%, 63%);
+	--ck-color-button-on-disabled-background: 					hsl(0, 0%, 87%);
+
+	--ck-color-button-action-background: 						var(--ck-color-base-action);
+	--ck-color-button-action-focus-background: 					hsl(104, 44%, 43%);
+	--ck-color-button-action-active-background: 				hsl(104, 44%, 41%);
+	--ck-color-button-action-active-shadow: 					hsl(104, 44%, 36%);
+	--ck-color-button-action-disabled-background: 				hsl(104, 44%, 58%);
+	--ck-color-button-action-text: 								var(--ck-color-base-background);
+
+	/* -- Dropdown ------------------------------------------------------------------------------ */
+
+	--ck-color-dropdown-panel-background: 						var(--ck-color-base-background);
+	--ck-color-dropdown-panel-border: 							var(--ck-color-base-border);
+
+	/* -- Input --------------------------------------------------------------------------------- */
+
+	--ck-color-input-background: 								var(--ck-color-base-background);
+	--ck-color-input-border: 									hsl(0, 0%, 78%);
+	--ck-color-input-text: 										var(--ck-color-base-text);
+	--ck-color-input-disabled-background: 						hsl(0, 0%, 95%);
+	--ck-color-input-disabled-border: 							hsl(0, 0%, 78%);
+	--ck-color-input-disabled-text: 							hsl(0, 0%, 36%);
+
+	/* -- List ---------------------------------------------------------------------------------- */
+
+	--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-background-active-focus: 				var(--ck-color-base-active-focus);
+	--ck-color-list-item-text-active:							var(--ck-color-base-background);
+
+	/* -- Panel --------------------------------------------------------------------------------- */
+
+	--ck-color-panel-background: 								var(--ck-color-base-background);
+	--ck-color-panel-border: 									var(--ck-color-base-border);
+
+	/* -- Toolbar ------------------------------------------------------------------------------- */
+
+	--ck-color-toolbar-background: 								var(--ck-color-base-foreground);
+	--ck-color-toolbar-border: 									var(--ck-color-base-border);
+
+	/* -- Tooltip ------------------------------------------------------------------------------- */
+
+	--ck-color-tooltip-background: 								var(--ck-color-base-text);
+	--ck-color-tooltip-text: 									var(--ck-color-base-background);
+
+	/* -- Engine -------------------------------------------------------------------------------- */
+
+	--ck-color-engine-placeholder-text: 						hsl(0, 0%, 76%);
+
+	/* -- Upload -------------------------------------------------------------------------------- */
+
+	--ck-color-upload-bar-background:		 					hsl(209, 92%, 70%);
+	--ck-color-upload-infinite-background:		 				hsla(0, 0%, 0%, 0.1);
+
+	/* -- Link -------------------------------------------------------------------------------- */
+
+	--ck-color-link-default:									hsl(240, 100%, 47%);
+	--ck-color-link-selected-background:						hsl(201, 93%, 89%);
+}

+ 11 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_disabled.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/**
+	 * An opacity value of disabled UI item.
+	 */
+	--ck-disabled-opacity: .5;
+}

+ 16 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_focus.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/**
+	 * A visual style of focused element's outer shadow.
+	 */
+	--ck-focus-outer-shadow: 0 0 3px var(--ck-color-focus-shadow);
+
+	/**
+	 * A visual style of focused element's border or outline.
+	 */
+	--ck-focus-ring: 1px solid var(--ck-color-focus-border);
+}

+ 16 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_fonts.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	--ck-font-size-base: 13px;
+	--ck-line-height-base: 1.84615;
+	--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;
+}

+ 84 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_reset.css

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+:root {
+	/* This is super-important. This is **manually** adjusted so a button without an icon
+	is never smaller than a button with icon, additionally making sure that text-less buttons
+	are perfect squares. The value is also shared by other components which should stay "in-line"
+	with buttons. */
+	--ck-ui-component-min-height: 2.3em;
+}
+
+/**
+ * Resets an element, ignoring its children.
+ */
+.ck-reset,
+.ck-reset_all,
+.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,
+.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 hsl(255, 7%, 88%);
+	}
+
+	& button::-moz-focus-inner {
+		/* See http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox */
+	    padding: 0;
+	    border: 0
+	}
+}

+ 11 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_rounded.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Default border-radius value.
+ */
+:root{
+	--ck-border-radius: 2px;
+}

+ 16 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_shadow.css

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+: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 1px var(--ck-color-shadow-drop);
+}

+ 14 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/_spacing.css

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

+ 13 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/globals/globals.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "./_colors.css";
+@import "./_disabled.css";
+@import "./_focus.css";
+@import "./_fonts.css";
+@import "./_reset.css";
+@import "./_rounded.css";
+@import "./_shadow.css";
+@import "./_spacing.css";

+ 31 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/mixins/_button.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * 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 $prefix {
+	background: var($(prefix)-background);
+
+	&:not(.ck-disabled) {
+		&:hover,
+		&:focus {
+			background: var($(prefix)-focus-background);
+		}
+
+		&:active {
+			background: var($(prefix)-active-background);
+			box-shadow: inset 0 2px 2px var($(prefix)-active-shadow);
+		}
+	}
+
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/98 */
+	&.ck-disabled {
+		background: var($(prefix)-disabled-background);
+	}
+}

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

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../mixins/_focus.css";
+@import "../mixins/_shadow.css";
+
+:root {
+	--ck-widget-outline-thickness: 3px;
+	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
+	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
+	--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-focus-border);
+	}
+
+	@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();
-	}
-}

+ 11 - 0
packages/ckeditor5-theme-lark/theme/mixins/_disabled.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * A class which indicates that an element holding it is disabled.
+ */
+@define-mixin ck-disabled {
+	opacity: var(--ck-disabled-opacity);
+}

+ 13 - 0
packages/ckeditor5-theme-lark/theme/mixins/_focus.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * A visual style of focused element's border.
+ */
+@define-mixin ck-focus-ring {
+	/* Disable native outline. */
+	outline: none;
+	border: var(--ck-focus-ring)
+}

+ 19 - 0
packages/ckeditor5-theme-lark/theme/mixins/_rounded.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * 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;
+	}
+}

+ 18 - 0
packages/ckeditor5-theme-lark/theme/mixins/_shadow.css

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * 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);
+}

+ 4 - 0
packages/ckeditor5-theme-lark/theme/theme.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */

+ 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';