Good Morning, We can create our own theme, duplicating JewelTheme and modifying it ... in this project we can modify the styles of controls according to whether they are Primary, Secondary or Emphasized ... To modify the base style of a component, (for example the button padding), in the example todoMVC you overwrite the appearance using the .css reference in App.mxml Is there a method to overwrite the definition of the .sass class of a component on which JewelTheme depends?
Thanks Hiedra -----Mensaje original----- De: Carlos Rovira <[email protected]> Enviado el: martes, 11 de febrero de 2020 15:09 Para: Apache Royale Development <[email protected]> Asunto: Re: Jewel Theme personalized 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 (<[email protected]>) 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-creati > on > > thanks for everything. > > Hiedra. > -- Carlos Rovira http://about.me/carlosrovira
