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 <[email protected]>
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:
