If we could ignore IE, CSS variables would have been a nice solution… https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables <https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables>
> On Mar 8, 2018, at 1:29 PM, Piotr Zarzycki <[email protected]> wrote: > > 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>*
