You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by an...@apache.org on 2019/12/07 23:32:08 UTC

[royale-docs] branch master updated: Update jewel-theme-creation.md

This is an automated email from the ASF dual-hosted git repository.

andreww pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/royale-docs.git


The following commit(s) were added to refs/heads/master by this push:
     new e5e28e9  Update jewel-theme-creation.md
e5e28e9 is described below

commit e5e28e942377bb0f01aaf81e8f59640eae1470fd
Author: Andrew Wetmore <an...@cottage14.com>
AuthorDate: Sat Dec 7 19:31:59 2019 -0400

    Update jewel-theme-creation.md
    
    Minor text changes
---
 component-sets/jewel/jewel-theme-creation.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/component-sets/jewel/jewel-theme-creation.md b/component-sets/jewel/jewel-theme-creation.md
index 3cb4c78..7c8e4e1 100644
--- a/component-sets/jewel/jewel-theme-creation.md
+++ b/component-sets/jewel/jewel-theme-creation.md
@@ -30,23 +30,23 @@ Jewel is a component set designed with change of appearance in mind. Jewel comes
 
 Themes are a combination of files that define styles in [Cascading Style Sheets (CSS)](https://en.wikipedia.org/wiki/Cascading_Style_Sheets){:target='_blank'} and other assets like images (JPG, PNG, SVG,...). In Jewel we use [SASS](https://sass-lang.com){:target='_blank'} to define the CSS style rules since is a preprocessor scripting language that is interpreted or compiled into CSS.
 
-> You can create your own theme without the need of SASS, since is not obligatory, but we strongly recommend using it for the same reason we use AS3 instead of plain JavaScript.
+> You can create your own theme without the need of SASS, but we strongly recommend using it for the same reason we use AS3 instead of plain JavaScript.
 
 One of the advantages of using SASS is that we can organize style definitions by separating styles into files. In Jewel we use a `.sass` file per component so we can easily find all the definitions of the component's styles.
 
 ## Generating default.css
 
-The `default.css` file is the resuling CSS file that holds all CSS definitions for a Jewel theme. This file is generated by the SASS compiler. When a library with styles in it is compiled we use SASS to generate the `src/main/resuorces/default.css` file as part of the build process.
+The `default.css` file holds all CSS definitions for a Jewel theme. This file is generated by the SASS compiler. When a library with styles in it is compiled we use SASS to generate the `src/main/resuorces/default.css` file as part of the build process.
 
 > SASS generation is only set up in the Maven build, not in the ANT build. Apache Royale generates all `default.css` files in the SDK and makes them available to users using ANT, other build tools or IDEs. In the future we expect contributors to add SASS generation for ANT.
 
 ## Jewel Library
 
-Here you'll find the [ActionScript](features/as3) classes that define each component and support class files components need to work properly. You'll find a `sass` folder with a `.sass` file for each component which holds all _structural_ definitions. Those definitions can be normal _CSS rules_ or _royale bead definition rules_.
+Here you'll find the [ActionScript](features/as3) classes that define each component and support class files that components need to work properly. You'll find a `sass` folder with a `.sass` file that holds all _structural_ definitions file for each component. Those definitions can be normal _CSS rules_ or _royale bead definition rules_.
 
-You'll never find a style rule in the Jewel library that define _colors, lines, fonts, or shapes_ (the theme we locate in the __theme library__ handles these values). We'll find only the CSS rules needed to generate each jewel component visual structure (i.e: display, position, z-index, overflow,...), and the default ActionScript bead classes that ship with a concrete component per platform (i.e: BeadView, BeadModel, BeadController, BeadLayout,...).
+You'll never find a style rule in the Jewel library that defines _colors, lines, fonts, or shapes_ (the theme in the __theme library__ handles these values). We find only the CSS rules needed to generate each Jewel component's visual structure (such as display, position, z-index, and overflow), and the default ActionScript bead classes that ship with a concrete component per platform (such as BeadView, BeadModel, BeadController, and BeadLayout).
 
-> Apache Royale uses CSS through all the framwework to link [beads to the component's strand](features/strands-and-beads) so components define the default composition of beads via CSS.
+> Apache Royale uses CSS throughout the framwework to link [beads to the component's strand](features/strands-and-beads) so components define the default composition of beads via CSS.
 
 ## Jewel Theme Library
 
@@ -54,17 +54,17 @@ This library is like a __master theme__ where _colors, fonts, icons or shapes_ a
 
 ## Primary, Secondary and Emphasized colors
 
-Since Jewel themes support three diferent colors (__Primary__, __Secondary__ and __Emphasized__),  the Jewel Theme Library folder structure is:
+Since Jewel themes support three different colors (__Primary__, __Secondary__ and __Emphasized__),  the Jewel Theme Library folder structure is:
 
 * __Primary__ color: `sass/components-primary` for styles that use primary and default colors.
 * __Secondary__ color: `sass/components-secondary` for styles that use secondary colors.
-* __Emphasized__ color: `sass/components-empahsized` for styles that use emphasized colors.
+* __Emphasized__ color: `sass/components-empahsized` for styles that use colors for emphasis.
 
-`primary` is used by most of the components in Jewel, while only a few (i.e: Button, Badge or SnackBar) that need these variants use `secondary` and `emphasized`.
+`primary` is used by most of the components in Jewel, while only a few like Button, Badge or SnackBar that need the variants use `secondary` and `emphasized`.
 
 ## Theme SASS file
 
-`sass/_theme.sass` is the SASS file where we can modify Jewel themes. It's a very simple configuration file with variables that SASS uses to generate a `default.css` file. This is essentialy how each of the Jewel themes that come with Apache Royale are defined.
+`sass/_theme.sass` is where we can modify Jewel themes. It's a very simple configuration file with variables that SASS uses to generate a `default.css` file. This is essentialy how each of the Jewel themes that comes with Apache Royale is defined.
 
 For example, by default, we can find:
 
@@ -77,17 +77,17 @@ $secondary-color: $topaz
 $emphasized-color: $emerald
 ```
 
-so this `_theme.sass` file will create a Jewel theme variant that will look _no-flat_ and _light_, with _blue as the primary color_, _topaz as the secondary color_ and _emerald as the emphasized color_.
+This `_theme.sass` file will create a Jewel theme variant that will look _no-flat_ and _light_, with _blue as the primary color_, _topaz as the secondary color_ and _emerald as the emphasized color_.
 
 ## Jewel Theme summary
 
-__Jewel library__ has defintions that you don't normally need to change, while __Jewel Theme library__ is like a __master theme__ for all Royale Jjewel themes and is a good starting point when you want to create a new Jewel theme or just modify an existing one.
+__Jewel library__ has defintions that you don't normally need to change, while __Jewel Theme library__ is like a __master theme__ for all Royale Jjewel themes and is a good starting point when you want to create a new Jewel theme or modify an existing one.
 
 > To modify a style, make a copy of the __Jewel Theme Library__ and start adjusting the style for each Jewel component.
 
 ## A Jewel component example
 
-Let's take the [Jewel Alert](component-sets/jewel/alert) component as an example and look at the different files that compose this component:
+Let's take the [Jewel Alert](component-sets/jewel/alert) component as an example and look at the different files that make up this component:
 
 In __Jewel library__ you can find:
 
@@ -116,7 +116,7 @@ In the `sass` file you find the corresponding CSS selector:
 
 Nested in that selector is the corresponding tree of rules and selectors for that component.
 
-So __Alert__ is composed of four ActionScript files, and one `.sass` file that wires the component with its beads and defines a set of CSS rules to give a concrete CSS structure, but does not define colors, gradients, shapes or icons for Alert. The theme does all of that.
+So __Alert__ is composed of four ActionScript files and one `.sass` file that wires the component with its beads and defines a set of CSS rules to give a concrete CSS structure, but does not define colors, gradients, shapes or icons for Alert. The theme does all of that.
 
 In __Jewel Theme library__ you can find: