The look and feel of the jewel component set
Jewel component set focus on themes. Themes provides the capability of change the appearance of all components at once. A theme is a predefined CSS file (and optionally a other assets like images) that holds the definitions of each Jewel component, its subcomponents and the default beads used to configure that components.
Royale use the theme to add the right css selectors to the final compilation so when the user loads the application the required css and other files are loaded and the application shows a concrete look and feel.
Jewel comes with predefined themes based on the 12 color wheel below:
{:align=“center”}
Current colors are:
Color | HEX |
---|---|
Red | #EC1C24 |
Topaz | #EF5A2A |
Orange | #F7941D |
Sunflower | #F8B13F |
Yellow | #E2D70B |
Emerald | #8CC63C |
Green | #3AB549 |
Turquoise | #29A89F |
Blue | #3CADF1 |
Sapphire | #2C74BE |
Violet | #662C90 |
Amethyst | #C92CC6 |
Jewel has been designed to cover multiple visual needs and support Light/Dark and Flat/No Flat themes:
{:align=“center”} {:height=“80%” width=“80%”}
Light/No Flat
{:align=“center”} {:height=“80%” width=“80%”}
Dark/No Flat
{:align=“center”} {:height=“80%” width=“80%”}
Light/Flat
{:align=“center”} {:height=“80%” width=“80%”}
Dark/Flat
Jewel Themes are a CSS file in the end (default.css
), with all needed CSS rules predefined. We create this CSSs using the Jewel SASS Theme framework located in JewelTheme project. By udating the rules in this theme project, we can recompile all predefined jewel themes in Apache Royale to update those themes with the latest changes.
Jewel library has a master theme called JewelTheme and other 144 themes in the themes
folder that are generated from JewelTheme. You can know more about how this is done in the Jewel Theme Creation section.
Only to name a few examples,
themes/Jewel-Dark-NoFlat-Primary-Violet-Theme
orthemes/Jewel-Light-NoFlat-Secondary-Emerald-Theme
are examples of concrete jewel themes that are part of Apache Royale official distribution. There's 144 unique themes that are the combinations of the 12 colors, dark/light and flat/no-flat options.
Users will use one up to three of the predefined jewel themes in themes
folder in a normal Application project: one for primary color, one for secondary color and one for emphasized color (i.e: themes/Jewel-Light-NoFlat-Primary-Blue-Theme
, themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme
and finally themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme
).
Example for maven pom.xml configuration:
<dependency> <groupId>org.apache.royale.framework</groupId> <artifactId>Jewel-Light-NoFlat-Primary-Blue-Theme</artifactId> <version>0.9.6-SNAPSHOT</version> <type>swc</type> <scope>theme</scope> <classifier>js</classifier> </dependency> <dependency> <groupId>org.apache.royale.framework</groupId> <artifactId>Jewel-Light-NoFlat-Secondary-Topaz-Theme</artifactId> <version>0.9.6-SNAPSHOT</version> <type>swc</type> <scope>theme</scope> <classifier>js</classifier> </dependency> <dependency> <groupId>org.apache.royale.framework</groupId> <artifactId>Jewel-Light-NoFlat-Emphasized-Emerald-Theme</artifactId> <version>0.9.6-SNAPSHOT</version> <type>swc</type> <scope>theme</scope> </dependency>
Other option is to use the Jewel Theme Library that provides all styles for primary, secondary and emphasized colors and configure these colors in its _theme.sass file
.
Example for maven pom.xml configuration:
<dependency> <groupId>org.apache.royale.framework</groupId> <artifactId>JewelTheme</artifactId> <version>0.9.6-SNAPSHOT</version> <type>swc</type> <scope>theme</scope> <classifier>js</classifier> </dependency>