Hi,
you have various strategies you can follow in order to style you themes and
components.
The first thing to notice is unlike Basic, Jewel brings from structure to
each component when needed. For example, a CheckBox in Basic is just an
input with type="checkbox", while in Jewel is a label with 2 childs tags:
input and span. Most of the time structure is needed to get some actual
look and feel.
Next, all components use to have a bead default configuration that is
created in Jewel library and based on the jewel namespace and the name of
the component (j|CheckBox), and CSS styles.
CSS Styles are of two kinds:
a.- Structure: Are the styles use to be needed most of the time and will
not change from one theme to another. Those are found in Jewel library,
since are considered "not part of a theme". Examples of this styles are:
display: flex, user-select: none, position: relative, zoom: 1,...
b.- Look and feel: Are styles in charge of bring colors, font-faces, font
sizes and styles, borders, backgrounds, gradients, round corners...all this
styles are in themes, and is the ones you need to target.
Notice that no matter the style from a or b, you always can override it
thanks to royale compiler taking precedence of your project.
About themes like "Jewel-Light-NoFlat-Primary-Blue-Theme". This are
predefined themes for people that does not want to make anything on this
regard. So they just can use a combination of 3 (primary, secondary and
emphasized). Jewel will bring 144 themes to get the different combinations
between 12 colors, flat/noflat, light/dark options. So while this kind of
themes can be override, they are not designed for that, since are
precompiled CSS just for final use.
To change all components look and feel: you can create your own theme. To
do this you should duplicate JewelTheme and configure it in your project
and start changing things to match how you want your look and feel.
If you just want to change some components, you can just modify in your
project the same as I did when doing TodoMVC example. In TodoMVC you can
see how I override the styles of some jewel components like Button,
ToggleButton, CheckBox and List to name some.
Aditionally you can use natural overriding mechanisms of CSS by creating a
style that depends on a Jewel style. For example, if I just want to change
a concrete button I can add a style like this:
.jewel.button.mystyle{
border: 1px solid red;
}
then <j:Button className="mystyle"/>
So you can have styles changed for all buttons, and changed for concrete
ones.
About future changes of styles. I can guarantee Jewel styles will freeze.
I'll try to make it as stable as possible over time but there's some plans
for the next months to make this possible.
For example, few weeks ago, I change how list item renderers highlight or
select, to avoid :hover pseudo elements, that was needed to get DataGrid
hover working for a complete row where mouse cursor are not physically over
the renderer. So the only thing I can recommend is to be connected to the
project and check what changes we are doing in this area and update your
project accordingly.
I can list here some of the things I expect to change styles in the future:
* "SizeControl" bead and "FontIcon" sizes, where setup many months ago to
show different sizes, but needs to give more options and be synchronized.
* "Card": right now is like a flex "Panel" but will need to have more
things like CardFooter or CardTitle (names are nothing final), probably
main color will be white instead of grey
* "FormItem": the actual layout does not seems to be the most general
Themes are implemented right now for Light and Flat/NoFlat, but I still
need to go over Dark themes (and Flat/NoFlat)
I think is not too much, other things that will change will be due to the
needs or improvements that are required.
HTH
Carlos
El mar., 11 feb. 2020 a las 11:10, Maria Jose Esteve (<mjest...@iest.com>)
escribió:
> Hi,
> In order to have an overview of the style structure, we have done some
> tests with SASS and Jewel.
>
> The structure we have identified consists of 3 parts, in order of
> dependence is as follows:
>
> - In the Jewel project of the Apache Royale framework, you will find the
> .sass classes of the Jewel components, here you define the basic aspects of
> each one.
> - In the Themes folder of the Royale framework, we find the JewelTheme
> project, in this project the default appearance of the Jewel components is
> defined according to their type (Primary, secondary or Emphasized)
> - On the same route, we find different projects that define a particular
> style for a specific type, for example:
> Jewel-Light-NoFlat-Primary-Blue-Theme.
>
> We were able to create a new style, "xxx-Primary-Theme", which depends on
> the JewelTheme library (which in turn depends on the .sass of the Jewel
> library)
>
> We have also been able to add a copy of Jewel Theme to the structure of
> our project, as indicated in [1]
>
> Up to this point, we have been able to compile and use our own styles.
>
> The problem we have arises when we need to modify the general appearance
> of a component (located in the SASS folder of the Jewel library)
>
> For example, we need to modify the default padding of the Button element.
> What would be the correct way to make this modification?
>
> We would need a solution that would allow us to modify our style, without
> losing the code updates that are continuously carried out in the SDK.
>
> [1]
> https://apache.github.io/royale-docs/component-sets/jewel/theme-creation
>
> thanks for everything.
>
> Hiedra.
>
--
Carlos Rovira
http://about.me/carlosrovira
