From 6c624e86e39d8dc59452a2ce3e182d78b1f9eaeb Mon Sep 17 00:00:00 2001
From: Pekka Hyvönen <pekka@vaadin.com>
Date: Wed, 1 Feb 2017 19:13:08 +0200
Subject: Replace FontAwesome with Vaadin Icons (#8208)

* Include FontAwesome by default for easier migration
* Fix JSComponentLoadingIndicatorTest

Fixes #7979
Addresses part of #8219
---
 documentation/themes/themes-creating.asciidoc | 51 +++++++++++----------------
 1 file changed, 20 insertions(+), 31 deletions(-)

(limited to 'documentation/themes/themes-creating.asciidoc')

diff --git a/documentation/themes/themes-creating.asciidoc b/documentation/themes/themes-creating.asciidoc
index 4040bcf5ca..98fba272da 100644
--- a/documentation/themes/themes-creating.asciidoc
+++ b/documentation/themes/themes-creating.asciidoc
@@ -7,8 +7,6 @@ layout: page
 [[themes.creating]]
 = Creating and Using Themes
 
-*_This section has not yet been updated for Vaadin Framework 8._*
-
 Custom themes are placed in the [filename]#VAADIN/themes# folder of the web
 application, in an Eclipse project under the [filename]#WebContent# folder or
 [filename]#src/main/webapp# in Maven projects, as was illustrated in
@@ -31,7 +29,7 @@ on-the-fly when the theme is requested by a browser.
 
 We recommend that you organize the theme in at least two SCSS files so that you
 import the actual theme from a Sass file that is named more uniquely than the
-[filename]#styles.scss#, to make it distinquishable in the editor. This
+[filename]#styles.scss#, to make it distinguishable in the editor. This
 organization is how the Vaadin Plugin for Eclipse creates a new theme.
 
 If you use Vaadin add-ons that contain themes, Vaadin Plugin for Eclipse and
@@ -123,17 +121,16 @@ generated by the Vaadin Plugin for Eclipse or Maven.
 == Plain Old CSS Themes
 
 In addition to Sass themes, you can create plain old CSS themes. CSS theme are
-more restricted than Sass styles - you can't parameterize CSS themes in any way,
-unlike you can Valo, for example. Further, an application can only have one CSS
-theme while you can have multiple Sass themes.
+more restricted than Sass styles - you can't parameterize CSS themes in any way.
+Further, an application can only have one CSS theme while you can have multiple Sass themes.
 
 A CSS theme is defined in a [filename]#styles.css# file in the
 [filename]#VAADIN/themes/mytheme# folder. You need to import the
-[filename]#legacy-styles.css# of the built-in theme as follows:
+[filename]#styles.css# of Valo theme as follows:
 
 
 ----
-@import "../reindeer/legacy-styles.css";
+@import "../valo/styles.css";
 
 .v-app {
     background: yellow;
@@ -156,8 +153,6 @@ of the style names are determined in the client-side widget of each component.
 The easiest way to find out the styles of the elements is to use a HTML
 inspector such as FireBug.
 
-//TODO add reference to a Firebug section when available
-
 Some client-side components or component styles can be shared by different
 server-side components. For example, [literal]#++v-textfield++# style is used
 for all text input boxes in components, in addition to [classname]#TextField#.
@@ -166,17 +161,19 @@ for all text input boxes in components, in addition to [classname]#TextField#.
 [[themes.creating.builtin]]
 == Built-in Themes
 
-Vaadin currently includes the following built-in themes:
+Since version 8.0, Vaadin Framework includes only one built-in theme:
 
 * [literal]#++valo++#, the primary theme since Vaadin 7.3
+
+The following legacy themes can be found in the [filename]#vaadin-compability-themes.jar# package
+for easier migrating from framework version 7 to 8:
+
 * [literal]#++reindeer++#, the primary theme in Vaadin 6 and 7
 * [literal]#++chameleon++#, an easily customizable theme
 * [literal]#++runo++#, the default theme in IT Mill Toolkit 5
+* [literal]#++base++#, which was never to be used directly, but is the base for other legacy themes
 
-In addition, there is the [literal]#++base++# theme, which should not be used
-directly, but is extended by the other built-in themes, except valo.
-
-The built-in themes are provided in the respective
+The themes are provided in the respective
 [filename]#VAADIN/themes/&lt;theme&gt;/styles.scss# stylesheets in the
 [filename]#vaadin-themes# JAR. Also the precompiled CSS files are included, in
 case you want to use the themes directly.
@@ -187,34 +184,26 @@ style names for specific components.
 
 
 ----
-@Theme("runo")
 public class MyUI extends UI {
     @Override
     protected void init(VaadinRequest request) {
         ...
-        Panel panel = new Panel("Regular Panel in the Runo Theme");
-        panel.addComponent(new Button("Regular Runo Button"));
+        Panel panel = new Panel("Regular Panel in the Valo Theme");
+        panel.addComponent(new Button("Regular Valo Button"));
 
         // A button with the "small" style
-        Button smallButton = new Button("Small Runo Button");
-        smallButton.addStyleName(Runo.BUTTON_SMALL);
+        Button smallButton = new Button("Small Valo Button");
+        smallButton.addStyleName(ValoTheme.BUTTON_SMALL);
 
-        Panel lightPanel = new Panel("Light Panel");
-        lightPanel.addStyleName(Runo.PANEL_LIGHT);
+        Panel lightPanel = new Panel("Borderless Panel");
+        lightPanel.addStyleName(ValoTheme.PANEL_BORDERLESS);
         lightPanel.addComponent(
             new Label("With addStyleName(\"light\")"));
         ...
 ----
 
-The example with the Runo theme is shown in
-<<figure.themes.creating.builtin.runo>>.
-
-[[figure.themes.creating.builtin.runo]]
-.Runo Theme
-image::img/builtin-runo.png[]
-
-The built-in themes come with a custom icon font, FontAwesome, which is used for
-icons in the theme, and which you can use as font icons, as described in
+The Valo theme comes with a custom icon font, VaadinIcons,
+which you can use as font icons, as described in
 <<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font
 Icons">>.
 
-- 
cgit v1.2.3

