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, "carlos.rov...@gmail.com on behalf of Carlos Rovira" <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> 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 <aha...@adobe.com.invalid>: > >> 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, "carlos.rov...@gmail.com on behalf of Carlos Rovira" >> <carlos.rov...@gmail.com on behalf of carlosrov...@apache.org> 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 <bigosma...@gmail.com>: >> > >> >> 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" <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://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 <harbs.li...@gmail.com> >>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 < >> >> 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 >> >><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 >><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 >> >><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 < >> >> > > 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 >> >>>><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
