Carlos, I use Sass/Scss extensively. I really don't think it effectively solves the problem we are diacuasing here.
But if the entire Royale community wants to standardize on Sass as the css preprocessor, I will respect that. Once you do your POC maybe we will be in a better place to make a call. Alex's responses in this thread has given me great hope that Royale can have a built in css preprocessor that can be tied with code as well. No other toolchain out there does anything like this. By controlling the compiler, we have a very unique opportunity to build something like this. To be frank, Sass, Less and other css preprocessors suck in one way or the other. There are new preprocessors cropping up everyday. Here is a list of pros and cons for a few https://www.slant.co/options/764/alternatives/~sass-alternatives We dont want to deal with the uncertainty of which one is going to win in the preprocessor wars. Just my 2 cents. Thanks, Om On Mar 8, 2018 8:18 AM, "Carlos Rovira" <carlosrov...@apache.org> wrote: > Hi Om, > > after seeing today some videos, docs and info about SASS I think is worth > it to use it. In fact is widely used today for all big players (google,..) > The greatness about SASS is the is so simple and not only allows variables, > but nesting css elements (that make more easy to organize), and separation > of files (to become a final one), something that already solved in > compiler, but maybe is more a hack since a tool like this is more logical. > > The tool is very easy and is not needed if you don't want to use it. I'll > make a first commit in Jewel branch to introduce it in maven (no ANT for > now). > > My vision is that SASS is more natural than other solutions and that making > that solutions seems to me more than a "hack" to will make us more hurt > than good. > > I'll be using only in Jewel, so no need to use it in other themes or parts > of the project. > > I think it really ease the task I need to do, so for the moment I'll go > with it only for the "Jewel effort" > > > > > > > > 2018-03-08 17:08 GMT+01:00 OmPrakash Muppirala <bigosma...@gmail.com>: > > > Let us not introduce Sass into the Royale toolchain. We need to be css > > preprocessor agnostic. > > > > The short term solution could be that we inject properties into the app > and > > a theme class simply does a setAttribute("style", > > "color=injectedColorValue") based on that. > > > > Also, CSS variables are scoped only at the css file level. I am not sure > > if that would be useful here. > > > > Thanks, > > Om > > > > > > On Mar 8, 2018 5:22 AM, "Harbs" <harbs.li...@gmail.com> wrote: > > > > I wonder if this might be useful for IE… > > https://codepen.io/aaronbarker/pen/MeaRmL <https://codepen.io/ > > aaronbarker/pen/MeaRmL> > > > > > On Mar 8, 2018, at 3:18 PM, Harbs <harbs.li...@gmail.com> wrote: > > > > > > 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 <piotrzarzyck...@gmail.com > > <mailto:piotrzarzyck...@gmail.com>> 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 <carlosrov...@apache.org > > <mailto:carlosrov...@apache.org>>: > > >> > > >>> 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 <aha...@adobe.com.invalid > > <mailto: > > aha...@adobe.com.invalid>>: > > >>> > > >>>> 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, "carlos.rov...@gmail.com <mailto: > > carlos.rov...@gmail.com> on behalf of Carlos Rovira" > > >>>> <carlos.rov...@gmail.com <mailto:carlos.rov...@gmail.com> on behalf > > of > > carlosrov...@apache.org <mailto:carlosrov...@apache.org>> 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://na01.safelinks.protection.outlook.com/?url=> > > >>>> https%3A%2F%2Fwww.geodi > > >>>>> enstencentrum.nl <http://enstencentrum.nl/>% > > 2Fsass-maven-plugin%2Fplugin-info. > > >>>> html&data=02%7C01%7Caha > > >>>>> rui%40adobe.com <http://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 <aha...@adobe.com.invalid > > <mailto:aha...@adobe.com.invalid>>: > > >>>>> > > >>>>>> 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, "carlos.rov...@gmail.com <mailto: > > carlos.rov...@gmail.com> on behalf of Carlos > > >>>>>> Rovira" > > >>>>>> <carlos.rov...@gmail.com <mailto:carlos.rov...@gmail.com> on > behalf > > of carlosrov...@apache.org <mailto:carlosrov...@apache.org>> 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://na01.safelinks.protection.outlook.com/?url=> > > >>>>>> https%3A%2F%2Fgetmdl.io <http://2fgetmdl.io/> > > >>>>>>> %2Fcustomize%2Findex.html&data=02%7C01%7Caharui%40adobe.com < > > http://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 < > > bigosma...@gmail.com > > <mailto:bigosma...@gmail.com> > > >>>> : > > >>>>>>> > > >>>>>>>> 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 > > >>>>>> <carlosrov...@apache.org <mailto:carlosrov...@apache.org>> > > >>>>>>>> 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= < > > https://na01.safelinks.protection.outlook.com/?url=> > > >>>>>> http%3A%2F%2Fabout.me <http://2fabout.me/>% > > >>>>>>>> 2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com < > > http://40adobe.com/>% > > >>>>>> 7C7ee10b52100d4931824e08 > > >>>>>>>> d584c450aa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > > >>>>>> 7C63656090106042037 > > >>>>>>>> 2&sdata=LirhMtyi6j2OLZIvI0BFOPxXMurqUI > oOIC7fqisx8oc%3D&reserved=0 > > >>>>>>>>> > > >>>>>>>> > > >>>>>>> > > >>>>>>> > > >>>>>>> > > >>>>>>> -- > > >>>>>>> Carlos Rovira > > >>>>>>> https://na01.safelinks.protection.outlook.com/?url= < > > https://na01.safelinks.protection.outlook.com/?url=> > > >>>>>> http%3A%2F%2Fabout.me <http://2fabout.me/>%2 > > >>>>>>> Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com < > > http://40adobe.com/ > > >% > > >>>>>> 7C7ee10b52100d4931824e08d5 > > >>>>>>> 84c450aa%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > > >>>>>> 7C636560901060420372&s > > >>>>>>> data=LirhMtyi6j2OLZIvI0BFOPxXMurqUIoOIC7fqisx8oc%3D&reserved=0 > > >>>>>> > > >>>>>> > > >>>>> > > >>>>> > > >>>>> -- > > >>>>> Carlos Rovira > > >>>>> https://na01.safelinks.protection.outlook.com/?url= < > > https://na01.safelinks.protection.outlook.com/?url=> > > >>>> http%3A%2F%2Fabout.me <http://2fabout.me/>%2 > > >>>>> Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com < > http://40adobe.com/ > > >% > > >>>> 7Cbec10bf2ecb144cf5ddf08d5 > > >>>>> 84d54627%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > > >>>> 7C636560973893496699&s > > >>>>> data=86Hm91sdEvczfLja%2F867VKJoJyYNaVi8j7bgsNExM0E%3D&reserved=0 > > >>>> > > >>>> > > >>> > > >>> > > >>> -- > > >>> Carlos Rovira > > >>> http://about.me/carlosrovira <http://about.me/carlosrovira> > > >>> > > >> > > >> > > >> > > >> -- > > >> > > >> Piotr Zarzycki > > >> > > >> Patreon: *https://www.patreon.com/piotrzarzycki < > > https://www.patreon.com/ > > piotrzarzycki> > > >> <https://www.patreon.com/piotrzarzycki <https://www.patreon.com/ > > piotrzarzycki>>* > > > > > > > > > -- > Carlos Rovira > http://about.me/carlosrovira >
