Hi, Why can it be simpler by creating bunch of default css classes, which stores colors which you need ? Why complicating it by asking user to inject something through the compiler options ?
2018-03-08 12:12 GMT+01:00 Carlos Rovira <[email protected]>: > Hi Alex, > > at this moment, I only need to get 2-3 colors in final CSS file. But next I > think we should have a similar theme but with gradientes, that will mean > 4-6 colors. > But as I go with this maybe I could need something more, but right now > don't know what could be. > > As you say, the counterpart of introducing a CSS processor like SASS, is > that we introduce a new piece in the chain and that means wire it for maven > and ant. > Maybe this can be easy to do. > > In order to keep our efforts controlled, I propose you the folllowing: I > can check SASS implications and maybe see in MDL what other things can be > done. If I finaly see we only need to pass colors, we can try to make the > string substitution via compiler, if not we should look to introduce SASS. > Maybe if SASS is not to hard to introduce, we should directly go with it. > > what do you think? > > > > > > 2018-03-08 10:36 GMT+01:00 Alex Harui <[email protected]>: > > > Hi Carlos, > > > > That's fine if you want to work on a CSS theme. Your reasoning make > sense. > > > > Yes, Maven allows substitutions, but as you said there is Ant, but also > > command-line and IDEs. They all need a way to do whatever you want. > > > > Let's work from a real example: What is a selector that you want to have > > changed, and how would you want to change it via command-line compiler > > options? > > > > If you have: > > > > Button { > > color: COLOR::primary; > > } > > > > And want to specify > > > > -compiler.define=COLOR::primary,red > > > > We could probably convince the compiler to handle that. Right now, in > the > > emulation components we are using: > > > > if (GOOG::DEBUG) > > > > And for SWF compile we set > > > > -compiler.define=GOOG::DEBUG,true > > > > Which causes the compiler to generate an AST for > > > > if (true) > > > > And for JS compile we set: > > > > -compiler.define=GOOG::DEBUG,goog.DEBUG > > > > Which causes the compiler to output: > > > > if (goog.DEBUG) > > > > So we have a limited form of string substitutions in AS already and can > > probably do something like that in CSS. Is that what you are looking > for? > > > > But the thing is, if you use themes and in the main theme you have: > > > > Button { > > color: white; > > Font-size: 10px; > > } > > > > And in a theme SWC you have: > > > > Button { > > color: red; > > } > > > > I'm pretty sure we can make the output exactly the same: one selector > > that looks like: > > > > Button { > > color: red; > > Font-size: 10px; > > } > > > > I think themes may already work that way, and if not, we could probably > > make it work that way and it wouldn't have any extra overhead over string > > substitution. > > > > Of course, I could be wrong... > > -Alex > > > > > > On 3/8/18, 1:15 AM, "[email protected] on behalf of Carlos Rovira" > > <[email protected] on behalf of [email protected]> wrote: > > > > >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://na01.safelinks.protection.outlook.com/?url= > > https%3A%2F%2Fwww.geodi > > >enstencentrum.nl%2Fsass-maven-plugin%2Fplugin-info. > > html&data=02%7C01%7Caha > > >rui%40adobe.com%7Cbec10bf2ecb144cf5ddf08d584d5 > > 4627%7Cfa7b1b5a7b34438794aed > > >2c178decee1%7C0%7C0%7C636560973893496699&sdata= > > 3FoDbj2YbEJpJnKG8%2FLpqathy > > >k1ACgHcBhgVaHufHTY%3D&reserved=0 > > > > > > > > > > > >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 > > >https://na01.safelinks.protection.outlook.com/?url= > > http%3A%2F%2Fabout.me%2 > > >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > > 7Cbec10bf2ecb144cf5ddf08d5 > > >84d54627%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > > 7C636560973893496699&s > > >data=86Hm91sdEvczfLja%2F867VKJoJyYNaVi8j7bgsNExM0E%3D&reserved=0 > > > > > > > -- > Carlos Rovira > http://about.me/carlosrovira > -- Piotr Zarzycki Patreon: *https://www.patreon.com/piotrzarzycki <https://www.patreon.com/piotrzarzycki>*
