Hi Alex, but...I'm using themes. The concept/target continues inmutable. SASS only transforms sass files to a final css. What SASS does is easy [1]
So if we get in Royale something like this as Om suggest, we can remove SASS and use ours (maybe call ir ROSS ;)) But something I need much more than this (or before this) is to get the CSS problems fixes To see on a high level view. What I'm trying to do is to have a UI set that generates an HTML structure that can be easily stylized and we can create any number of theme projects so users can change styles via compiler argument and the final App looks completely different without touch code in the App. The themes can be done via CSS with solid colors, gradient colors (but for this one I need CSS fixes) or images (png or svg). Then I'm finding another problems like alphas in text-shadow, and I suppose I'll find more in my way, since when the final CSS is generated by SASS still is processed by out compiler that have this issues. So if we want to remove SASS, can you check my branch to see what I'm doing and if we can have something like this in our own compiler? If we look at this is a progressive way: 1 - What I'm using (now): - variables (i.e. $primary-color: blue, when .css is generated in all uses of that var we get "blue") - partials (are separate files that is prefixed by "_" with part of the css) that I include in main css with @import "variables" (I have a main css where the rest of files are imported to generated only one final .css) - sass syntax, a more clean and organized syntax without curly braces and other characeters like ";" and indentation 2 - What I expect to use: - nesting (this is very convenient ) - mixins (reusable rules) - extend/inheritance rules (for example textbutton will extend button as we have in AS3 code to get the same base css :)) - operators (do math in CSS eventually ) 3 - What Royale can do for us from this point (1 & 2 is what SASS does for us right now out of the box): - integrate with the rest of our code AS3 and MXML [1] https://sass-lang.com/guide 2018-03-08 19:45 GMT+01:00 Alex Harui <[email protected]>: > Hi Carlos, > > Please try using themes and tell us why they are not working as you expect. > > Thanks, > -Alex > > On 3/8/18, 10:01 AM, "[email protected] on behalf of Carlos Rovira" > <[email protected] on behalf of [email protected]> wrote: > > >Hi Alex, > > > >for me is clear: If we have the same we get with SASS in Royale that's the > >way to go, the problem is that is not still real and I can't work until is > >done. > >I'm not a compiler guy, and I think is a bit utopic for me try to be > >sucessful in that area, and I can't ask you to stop other works to > >implement what I need. > >For example, I need much more to get "linear-gradient" working in CSS or > >"text-shadow" than you make string-substitution. It's a matter of > >priorities. > > > >For now I'm working in a branch so nothing is in develop for now. And, in > >the end, with the work done, if at some time we get that functionality > >done, I can migrate the SASS files to the structure you make, > >I think even is better for you to have my implementation so you can have > >something to work on right? > > > >I always try to be practical in all moment. For me I have now a valid way > >to go and the last hours I'm very productive. > > > > > > > >2018-03-08 18:21 GMT+01:00 Alex Harui <[email protected]>: > > > >> Hi Carlos, > >> > >> The other tool you have in hand is themes. I don't think you've > >>convinced > >> me and some others that what you want to achieve can't be done with the > >> theme feature in the compiler. Let' make sure we all agree that we > >>don't > >> already have all or most of a solution for this without string > >> substitutions or requiring another tool. > >> > >> Thanks, > >> -Alex > >> > >> On 3/8/18, 8:49 AM, "[email protected] on behalf of Carlos > Rovira" > >> <[email protected] on behalf of [email protected]> wrote: > >> > >> >Hi Om, > >> > > >> >I think SASS makes very few things (although essential for what I need > >>to > >> >progress in this effort). > >> >I'm with you that having that integrated as a new development for > >>royale > >> >that makes all of that more integrating it with AS3/MXML is the way to > >>go. > >> > > >> >The problem right now is that is not real and we need to get a UI with > >> >great look and feel that people could customize. For me this is the > >>part > >> >more important to make Royale be evaluate by more people out there. > >> >Technologies enter by the eyes, and we can lots of great things in the > >> >internals, that if we don't get it good looking we can't market it. For > >> >this reason I'm always in that front > >> > > >> >I'm sure with time we can get what you and Alex propose, and I'll be > >>the > >> >first to adopt it. If we get that, we can translate the work I do to > >>that. > >> >And even this work can be of great help since you and Alex can have > >> >something in the framework completed to use as reference in the > >> >implementation. > >> > > >> >About adoption, for me SASS is ok for now, I think is well adopted in > >>the > >> >world, I have already integrated in maven since there's a good working > >> >maven plugin. So for me is ok for now, but agree that I'll switch to > >> >something exclusively "made-for-royale" ;) > >> > > >> >For now, I need to go, and don't have other tool at hand... > >> > > >> > > >> > > >> > > >> > > >> > > >> > > >> > > >> >2018-03-08 17:35 GMT+01:00 OmPrakash Muppirala <[email protected]>: > >> > > >> >> 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://na01.safelinks.protection.outlook.com/?url= > https:%2F%2Fwww.slan > >>>>t > >> . > >> >>co%2Foptions%2F764%2Falternatives%2F~sass-alternatives&data=02%7C01% > >> 7Caha > >> >>rui%40adobe.com%7C08797862fcf34d95ddd608d58514 > >> a1a5%7Cfa7b1b5a7b34438794ae > >> >>d2c178decee1%7C0%7C0%7C636561246011379425&sdata= > >> pQi%2BpxJvuMS5qXTmNYrSFjJ > >> >>hnvl9PczXBUlpBh63avQ%3D&reserved=0 > >> >> > >> >> 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" <[email protected]> > >> 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 > >><[email protected] > >> >: > >> >> > > >> >> > > 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" <[email protected]> wrote: > >> >> > > > >> >> > > I wonder if this might be useful for IE… > >> >> > > > >> > >>>>https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fcodepe > >>>>n > >> . > >> >>io%2Faaronbarker%2Fpen%2FMeaRmL&data=02%7C01%7Caharui%40adobe.com > >> %7C08797 > >> >>862fcf34d95ddd608d58514a1a5%7Cfa7b1b5a7b34438794aed2c178de > >> cee1%7C0%7C0%7C > >> >>636561246011379425&sdata=TP3DcKSe%2FTTM4zVxN6Nm4uRgii% > >> 2FYkX9X7TN%2BzaFAE0 > >> >>c%3D&reserved=0 > >> >><https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fcodepen > >> > >>>>.io%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1 > >> >>a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata= > >> >>R%2FF7srO%2B1QdQTQLnx5GLJc26%2FBiu1sFSpKNhtCDdPk8%3D&reserved=0 > >> >> > > aaronbarker/pen/MeaRmL> > >> >> > > > >> >> > > > On Mar 8, 2018, at 3:18 PM, Harbs <[email protected]> > >>wrote: > >> >> > > > > >> >> > > > If we could ignore IE, CSS variables would have been a nice > >> >>solution… > >> >> > > > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fdevelope > >> >>r.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FUsing_ > >> CSS_variables&data=02%7C > >> >>01%7Caharui%40adobe.com%7C08797862fcf34d95ddd608d58514 > >> a1a5%7Cfa7b1b5a7b34 > >> >>438794aed2c178decee1%7C0%7C0%7C636561246011379425& > >> sdata=O8Wq%2FozFJ26mQdl > >> >>22eRogUHEz8dV3joGzEaW4dOo4pM%3D&reserved=0 > >> >> < > >> >> > > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fdevelope > >> >>r.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FUsing_ > >> CSS_variables&data=02%7C > >> >>01%7Caharui%40adobe.com%7C08797862fcf34d95ddd608d58514 > >> a1a5%7Cfa7b1b5a7b34 > >> >>438794aed2c178decee1%7C0%7C0%7C636561246011379425& > >> sdata=O8Wq%2FozFJ26mQdl > >> >>22eRogUHEz8dV3joGzEaW4dOo4pM%3D&reserved=0> > >> >> > > > > >> >> > > >> On Mar 8, 2018, at 1:29 PM, Piotr Zarzycki < > >> >> [email protected] > >> >> > > <mailto:[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] > >> >> > > <mailto:[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] > >> >> > > <mailto: > >> >> > > [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] <mailto: > >> >> > > [email protected]> on behalf of Carlos Rovira" > >> >> > > >>>> <[email protected] <mailto:[email protected]> > on > >> >> behalf > >> >> > > of > >> >> > > [email protected] <mailto:[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://na01.safelinks.protection.outlook.com/?url=> > >> >> > > >>>> https%3A%2F%2Fwww.geodi > >> >> > > >>>>> enstencentrum.nl > >> >><https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2Fenstence > >> >>ntrum.nl%2F&data=02%7C01%7Caharui%40adobe.com% > >> 7C08797862fcf34d95ddd608d58 > >> >>514a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&s > >> >>data=WEXvCx777cdeYcSiKqAUGAbzR%2F1KQtWyQhZmjDe9MJk%3D&reserved=0>% > >> >> > > 2Fsass-maven-plugin%2Fplugin-info. > >> >> > > >>>> html&data=02%7C01%7Caha > >> >> > > >>>>> rui%40adobe.com > >> > >>>><https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2F40adob > >>>>e > >> . > >> > >>>>com%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1 > >> >>a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata= > >> >>1LehX4laNVQjs6FHPPrGKUdft5V%2BxWD5IArre1XXDzM%3D&reserved=0>% > >> >> > 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] > >> >> > > <mailto:[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] <mailto: > >> >> > > [email protected]> on behalf of Carlos > >> >> > > >>>>>> Rovira" > >> >> > > >>>>>> <[email protected] <mailto:[email protected]> > >>on > >> >> > behalf > >> >> > > of [email protected] <mailto:[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://na01.safelinks.protection.outlook.com/?url=> > >> >> > > >>>>>> https%3A%2F%2Fgetmdl.io > >> >><https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2F2fgetmdl > >> > >>>>.io%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1 > >> >>a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata= > >> >>WMUak%2B3Pr%2FDDAJl22OOkUV7GFTL0lspmBLGUcZ4%2BbEM%3D&reserved=0> > >> >> > > >>>>>>> > >>%2Fcustomize%2Findex.html&data=02%7C01%7Caharui%40adobe.com > >> >>< > >> >> > > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2F40adobe.c > >> >>om%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1a > >> >>5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata=1 > >> >>LehX4laNVQjs6FHPPrGKUdft5V%2BxWD5IArre1XXDzM%3D&reserved=0> > >> >> > > >>>>>> %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] > >> >> > > <mailto:[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] <mailto:[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= < > >> >> > > https://na01.safelinks.protection.outlook.com/?url=> > >> >> > > >>>>>> http%3A%2F%2Fabout.me > >> > >>>><https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2F2fabou > >>>>t > >> . > >> >>me%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1a > >> >>5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata=v > >> >>dIhebp4AELk4Knvcs4qDOMghML2H6pD5O9rzJmiLlo%3D&reserved=0>% > >> >> > > >>>>>>>> 2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com < > >> >> > > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2F40adobe.c > >> >>om%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1a > >> >>5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata=1 > >> >>LehX4laNVQjs6FHPPrGKUdft5V%2BxWD5IArre1XXDzM%3D&reserved=0>% > >> >> > > >>>>>> 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 > >> > >>>><https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2F2fabou > >>>>t > >> . > >> >>me%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1a > >> >>5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata=v > >> >>dIhebp4AELk4Knvcs4qDOMghML2H6pD5O9rzJmiLlo%3D&reserved=0>%2 > >> >> > > >>>>>>> Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com < > >> >> > > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2F40adobe.c > >> >>om%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1a > >> >>5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata=1 > >> >>LehX4laNVQjs6FHPPrGKUdft5V%2BxWD5IArre1XXDzM%3D&reserved=0 > >> >> > > >% > >> >> > > >>>>>> 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 > >> > >>>><https://na01.safelinks.protection.outlook.com/?url= > http%3A%2F%2F2fabou > >>>>t > >> . > >> >>me%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1a > >> >>5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata=v > >> >>dIhebp4AELk4Knvcs4qDOMghML2H6pD5O9rzJmiLlo%3D&reserved=0>%2 > >> >> > > >>>>> Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com < > >> >> > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2F40adobe.c > >> >>om%2F&data=02%7C01%7Caharui%40adobe.com% > 7C08797862fcf34d95ddd608d58514 > >> a1a > >> >>5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sdata=1 > >> >>LehX4laNVQjs6FHPPrGKUdft5V%2BxWD5IArre1XXDzM%3D&reserved=0 > >> >> > > >% > >> >> > > >>>> 7Cbec10bf2ecb144cf5ddf08d5 > >> >> > > >>>>> 84d54627%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> >> > > >>>> 7C636560973893496699&s > >> >> > > >>>>> > >> >>data=86Hm91sdEvczfLja%2F867VKJoJyYNaVi8j7bgsNExM0E%3D&reserved=0 > >> >> > > >>>> > >> >> > > >>>> > >> >> > > >>> > >> >> > > >>> > >> >> > > >>> -- > >> >> > > >>> Carlos Rovira > >> >> > > >>> > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2Fabout.me% > >> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > >> 7C08797862fcf34d95ddd608 > >> >>d58514a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C63656124601137942 > >> >>5&sdata=SCenfeB7Masm957Lt6yEFBwfEGIZMiY%2BiffL7Baj4WM%3D&reserved=0 > >> >><https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2Fabout.me > >> >>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > >> 7C08797862fcf34d95ddd60 > >> >>8d58514a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C6365612460113794 > >> >>25&sdata=SCenfeB7Masm957Lt6yEFBwfEGIZMiY%2BiffL7Baj4WM%3D&reserved=0> > >> >> > > >>> > >> >> > > >> > >> >> > > >> > >> >> > > >> > >> >> > > >> -- > >> >> > > >> > >> >> > > >> Piotr Zarzycki > >> >> > > >> > >> >> > > >> Patreon: > >> >>*https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fwww.pat > >> >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com > >> %7C08797862fcf3 > >> >>4d95ddd608d58514a1a5%7Cfa7b1b5a7b34438794aed2c178de > >> cee1%7C0%7C0%7C6365612 > >> >>46011379425&sdata=AjSwl0xh0QwaSZD%2BcHeNZjUMnGoLK0LvOd1YH7UsriM% > >> 3D&reserv > >> >>ed=0 < > >> >> > > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fwww.patr > >> >>eon.com%2F&data=02%7C01%7Caharui%40adobe.com% > >> 7C08797862fcf34d95ddd608d585 > >> >>14a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&sd > >> >>ata=jVjcc7bRMCJm5oJXFj5cWCeYOklDPnSrC7clL54LZ1c%3D&reserved=0 > >> >> > > piotrzarzycki> > >> >> > > >> > >> >><https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fwww.pat > >> >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com > >> %7C08797862fcf3 > >> >>4d95ddd608d58514a1a5%7Cfa7b1b5a7b34438794aed2c178de > >> cee1%7C0%7C0%7C6365612 > >> >>46011379425&sdata=AjSwl0xh0QwaSZD%2BcHeNZjUMnGoLK0LvOd1YH7UsriM% > >> 3D&reserv > >> >>ed=0 > >> >><https://na01.safelinks.protection.outlook.com/?url= > >> https%3A%2F%2Fwww.pat > >> >>reon.com%2F&data=02%7C01%7Caharui%40adobe.com% > >> 7C08797862fcf34d95ddd608d58 > >> >>514a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&s > >> >>data=jVjcc7bRMCJm5oJXFj5cWCeYOklDPnSrC7clL54LZ1c%3D&reserved=0 > >> >> > > piotrzarzycki>>* > >> >> > > > > >> >> > > > >> >> > > >> >> > > >> >> > > >> >> > -- > >> >> > Carlos Rovira > >> >> > > >> >>https://na01.safelinks.protection.outlook.com/?url= > >> http%3A%2F%2Fabout.me% > >> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com% > >> 7C08797862fcf34d95ddd608 > >> >>d58514a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C63656124601137942 > >> >>5&sdata=SCenfeB7Masm957Lt6yEFBwfEGIZMiY%2BiffL7Baj4WM%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% > >> 7C08797862fcf34d95ddd608d5 > >> >8514a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> 7C636561246011379425&s > >> >data=SCenfeB7Masm957Lt6yEFBwfEGIZMiY%2BiffL7Baj4WM%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% > 7C120c12c3f0f74155345508d5 > >851eb7e1%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C636561289333397827&s > >data=AHHmO3aP898f1hvfjGRNi7ODn8wAySU2TZdmDqrOGsI%3D&reserved=0 > > -- Carlos Rovira http://about.me/carlosrovira
