Hi Harbs, the problem is IE11 is now the second browsers most used...maybe in 1-2 years Edge comes to the rescue, but right now Edge numbers are too bad :(
2018-03-08 14:18 GMT+01:00 Harbs <[email protected]>: > 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>* > > -- Carlos Rovira http://about.me/carlosrovira
