Hi Alex, I started the theme as "VividBlue", but was something to get started, as I read and look how others are doing, I see that main colors should be configurable on the same theme, for that reason the theme refactor name is simply "JewelTheme".
In the other hand, I'm a bit blocked trying to make many complex visual things at a time, this due to various reasons: * for advanced things browsers has limitations here and there * we have some problems in CSS as we are discussing in other threads, and although we are discussing it, I feel that each day I put time on this to work, I can't solve this issues * SVGs are cool but requieres more love than I thought for this reason, yesterday I continued my work with different thoughts in mind: * I want to have something good looking as fast as possible, and for me is important to get it with some infrastructure well done (css per control, organization, component html structure,..) * for that reason I'm going back to CSS3 mainly, in the end I think we need a pure CSS theme as well * my plan is to get this theme be customizable with colors (this is what we're discussing here) * as I get things done in this theme, I can start another theme that can use linear gradients instead of plain colors * then I can make another one with SVG mainly * I think this plan will make us have things more soon that try to fight at the same time with SVG, royale compiler, and more, as I have little time each day to invest in this project I need to see things done to keep me motivated and pursuing this efftort. So coming back at your proposal, don't know id CSS property overriding is working (I can test it), but as a path to follow it seems to me a bit weird. It could be great if we have the basics working and then a user wants to make something like that (to put another theme in place), but I don't think we should promote this as a great way to do things since we'll adding code to the mix and more bytes to download, while others only use one compact css. I'll look into it as something like a "hack" that a user could be doing at sometime, but not as the basis of a royale official theme in the framework I'm looking at SASS and I see there's a maven plugin [1]. What do you think if I do a try to see what we get? The only thing is that ANT build file should be fixed for others. In the end, I want to do something like we did in MDL, with some vars in pom.xml like this: <properties> <!-- Customize Jewel colors --> <primary>red</primary> <secondary>grey</secondary> </properties> And that will be pass to the HTML template to the line where the CSS is loaded let me know what do you think Thanks [1] https://www.geodienstencentrum.nl/sass-maven-plugin/plugin-info.html 2018-03-08 9:45 GMT+01:00 Alex Harui <[email protected]>: > I think I may be missing something, because, IMO, the Royale way is to use > Themes. Weren't you working on a VividBlue theme? > > I suppose Themes might be a bit heavier than true string/variable > substitution, but I think there is property overriding in the compiler. > I'm not sure order of theme SWCs is preserved and used, but maybe we can > implement that if that's what is needed. > > I think if JewelTheme.swc specifies: > > Button { > background-color: white; > } > > And JewelBlueTheme.swc specifies > > Button { > background-color: blue; > } > > That both will be output in the CSS in that order and blue will win. It > might be that the compiler already can tell that there is a later Button > selector with background-color and can choose not to output the > "background-color: white". If that doesn't exist already, we can probably > make it happen. > > I think on the command line, you would specify -theme=JewelTheme.swc and > -theme=JewelBlueTheme.swc. > > String substitution is possible. I'm about to push code that allows > simple member access expressions as compiler defines so there is already a > form of substitution in the AS compiler. > > HTH, > -Alex > > > On 3/7/18, 11:14 PM, "[email protected] on behalf of Carlos Rovira" > <[email protected] on behalf of [email protected]> wrote: > > >Hi Alex, Om, > > > >I'm referring to what Om's describe. In MDL and the rest of frameworks we > >pass for example "primary" and "accent" color. In this way the final CSS > >gets the colors in all rules they need to use hardcoded. Please check the > >following link: > > > >https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fgetmdl.io > >%2Fcustomize%2Findex.html&data=02%7C01%7Caharui%40adobe.com > %7C7ee10b52100d > >4931824e08d584c450aa%7Cfa7b1b5a7b34438794aed2c178de > cee1%7C0%7C0%7C63656090 > >1060420372&sdata=YwCDV9HX4XIFn2O%2B2L90UaoHu9tKAEOPwTDdwViUQWo% > 3D&reserved > >=0 > > > >then we get a CSS with the colors applied. This is done with SASS > >processing, but I was asking if we can get this out-of-the-box with royale > >since we are using a compiler, or we have another trick that we could use > >to get the same result. Another way with CSS could be to use variables in > >CSS but maybe this is not still part of the actual browsers support or we > >don't support it in our CSS processing. > > > >If not, I'll need to introduce SASS processing in the chain in some way. > > > > > > > >2018-03-08 4:33 GMT+01:00 OmPrakash Muppirala <[email protected]>: > > > >> Carlos, > >> > >> In SASS, there are variables, but you cannot pass variables into it from > >> the app. The variables in SASS are compiled down to CSS as hardcoded > >> values, that's it. > >> > >> Usually, multiple class values are created and we set the class > >>property on > >> an element using a string evaluation. > >> > >> For example: > >> > >> var colorName = this.hasWarning() ? "Red" : "Blue"; > >> var className:String = "button" + colorName + "Class"; > >> > >> element.setAttribute("class", className); > >> > >> In the css: > >> > >> .buttonRedClass { > >> color: darkred; > >> } > >> > >> .buttonBlueClass { > >> color: lightskyblue; > >> } > >> > >> This is one way of doing things. > >> > >> The other way is to directly set the .style property of the element and > >> apply the color there. Not very elegant, but should work. > >> > >> Hope that helps. > >> > >> Thanks, > >> Om > >> > >> On Wed, Mar 7, 2018 at 3:18 PM, Carlos Rovira <[email protected]> > >> wrote: > >> > >> > Hi, > >> > > >> > I'd need to pass two or three colors to a CSS (i.e: primary, secondary > >> and > >> > accent) > >> > in other frameworks people use things like SASS > >> > Maybe in Royale we could get it in our own way > >> > > >> > any suggestion so that I could test? > >> > > >> > thanks! > >> > > >> > -- > >> > Carlos Rovira > >> > > >>https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fabout.me% > >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > 7C7ee10b52100d4931824e08 > >>d584c450aa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C63656090106042037 > >>2&sdata=LirhMtyi6j2OLZIvI0BFOPxXMurqUIoOIC7fqisx8oc%3D&reserved=0 > >> > > >> > > > > > > > >-- > >Carlos Rovira > >https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2Fabout.me%2 > >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > 7C7ee10b52100d4931824e08d5 > >84c450aa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C636560901060420372&s > >data=LirhMtyi6j2OLZIvI0BFOPxXMurqUIoOIC7fqisx8oc%3D&reserved=0 > > -- Carlos Rovira http://about.me/carlosrovira
