How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

Hi Piotr,

what I'm proposing is the same that google made with MDL and you're using
in your examples.
The only way to let developers to have more control is in this way. I'll
write a email now since I get it working in Maven
stay tuned! :)

2018-03-08 12:29 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:

> 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 <ca...@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 <ah...@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.rovira@gmail.com on behalf of Carlos
> Rovira"
> > > <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <ah...@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.rovira@gmail.com on behalf of Carlos
> > > >>Rovira"
> > > >> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <
> bigosmallm@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
> > > >><ca...@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=
> > > >> 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

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

Hi Piotr,

right, I'm working towards a very basic button example, that implies many
files, so I can explain you all what I'm trying to do.
Hope to let you know soon.

Thanks!

Carlos



2018-03-09 19:21 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:

> Carlos,
>
> If you could prepare test application, along with your last state of the
> code it would be helpful. I wanted to also understand the issues, cause I
> had issues with CSS while working on transpiledactionscript. I did win with
> them and I don't think whether it was as much as I thought before some
> workaround.
>
> Thanks,
> Piotr
>
>
> 2018-03-09 19:10 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>
> > Hi Alex,
> >
> > many thanks. I'm working right now in a POC of a theme based on solid
> color
> > with only button. I expect this can help me show you all what I'm trying
> to
> > do. Hope to get it this week and hope we can comment over it.
> >
> > let me know if you want me to test things like linear-gradients,
> > text-shadows and rgba
> >
> > thanks!
> >
> >
> >
> > 2018-03-09 19:01 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
> >
> > > Hi Carlos,
> > >
> > > I am about to work on the 0.9.2 release.  I will try to fix the CSS
> > issues
> > > in the compiler while the vote is pending.
> > >
> > > I still believe you can use themes to set the colors.  And that will
> work
> > > not just in Maven and Ant, but also on the command-line and IDEs.  I am
> > > still looking for a concrete example of why that does not work.  I will
> > > dig into your branches after I get the RC out for vote.
> > >
> > > -Alex
> > >
> > > On 3/9/18, 4:19 AM, "carlos.rovira@gmail.com on behalf of Carlos
> Rovira"
> > > <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
> > >
> > > >Hi Piotr,
> > > >
> > > >2018-03-09 12:40 GMT+01:00 Piotr Zarzycki <piotrzarzycki21@gmail.com
> >:
> > > >
> > > >> Carlos,
> > > >>
> > > >> I see following two things:
> > > >>
> > > >> 1) There is something in css which breaks build and you cannot uses,
> > > >> because compiler have some issue with it - yes?
> > > >>
> > > >
> > > >sometimes is breaking the build, others not output what I write in css
> > > >(for
> > > >example adding like "Unexpected value found" or something like that,
> > don't
> > > >remember the exact wording)
> > > >
> > > >
> > > >
> > > >> 2) You would like to add user possibility to change components
> easily
> > -
> > > >> Your solution is SASS, because #1.
> > > >>
> > > >>
> > > >I want the user can use a theme with the colors he/she want to use
> > > >With SASS I can put the colors in a variables and the user can change
> > it.
> > > >Or the next thing to look for are "palettes" that is something like
> MDL
> > > >does.
> > > >In this way user change colors or palettes and then use SASS to get
> > final
> > > >CSS.
> > > >This process can be separate from the rest of royale, like the process
> > to
> > > >make a PNG
> > > >since user can use the one we provide, or create another with
> Photoshop,
> > > >Sketch, Affinity...
> > > >
> > > >
> > > >
> > > >> Am I understand in general correctly this thread ?
> > > >>
> > > >>
> > > >This thread should have priorities. As I see are:
> > > >
> > > >1) Need to solve various problems with royale compiler processing of
> CSS
> > > >(gradients, alphas,...)
> > > >
> > > >this is crucial since the rest of points depends on this.
> > > >
> > > >2) How we can make users introduce a config via ANT or MAVEN to choose
> > > >what
> > > >colors they want in final app
> > > >
> > > >in this point I propose that user introduces properties for colors in
> > ANT
> > > >or MAVEN and then the compiler retrieves that when process CSS to make
> > > >string substitution
> > > >
> > > >3) What we can improve to make theme development more easier.
> > > >
> > > >in this part is how near we can get to what SASS gives us, this can be
> > of
> > > >less importance and since is more related at how the final CSS is
> > created,
> > > >we can decide to separate from royale project (although, having this
> > will
> > > >make our project to have even more sense, since as Om said, nobody
> has a
> > > >tool that makes what SASS does and even integrates with the code , in
> > this
> > > >case AS3/MXML).
> > > >
> > > >For point 3 I have SASS *separated* maven workflow, that doesn't need
> to
> > > >be
> > > >part of the rest of royale libs and themes. I use this for convenience
> > to
> > > >develop Jewel more easy and quick.
> > > >
> > > >One final thought. We are a front end technology. Front-end relies
> > heavily
> > > >in visuals. It seems in royale community, there's no much
> preoccupation
> > in
> > > >this part. I think I'm alone with this since the rest of contributors
> > are
> > > >more balanced towards framework code, compiler,...but not on UX
> (styles,
> > > >visuals, colors, animations...). I want to transmit here that all this
> > is
> > > >very important since front end developers choose in part with his
> > "eyes",
> > > >and then see other things. What I'm trying to contribute is fix the
> > visual
> > > >part so people coming, can see "hey! this looks good!, lets see what's
> > > >behind..." and then we love the rest of the technology.
> > > >There's other kind of users that only needs an easy dev tool to make
> an
> > > >app, and they don't care if it looks good or not, while it works. My
> > > >thinking is that nowadays this kind of user are very few compared with
> > the
> > > >other one.
> > > >I don't care to be the only one centered in visuals...it's ok for me,
> > but
> > > >I
> > > >want to remark the importance of this in the overall target we all
> > pursue
> > > >and that I need some help in the parts where I can't reach (compiler
> > > >mainly, infrastructure,...)
> > > >
> > > >Hope that clears this more
> > > >
> > > >Carlos
> > > >
> > > >
> > > >
> > > >
> > > >> Thanks, Piotr
> > > >>
> > > >>
> > > >> 2018-03-09 12:28 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> > > >>
> > > >> > Hi Alex,
> > > >> >
> > > >> > 2018-03-08 23:06 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
> > > >> >
> > > >> > > Hi Carlos,
> > > >> > >
> > > >> > > I don't doubt that SASS is powerful and useful, otherwise it
> > > >>wouldn't
> > > >> be
> > > >> > > popular.  What I am asking you to consider is that every
> decision
> > > >>you
> > > >> > make
> > > >> > > affects a lot of people and we only have a relatively small
> team.
> > > >> >
> > > >> >
> > > >> > Maybe you missed what I wrote at the beginning of this discussion.
> > Use
> > > >> SASS
> > > >> > doesn't means anything for the rest of the project.
> > > >> > Let's compare with a PSD vs an img. Imagine I author a PSD to
> > create a
> > > >> > button image background. Then I can put only the final PNG
> > > >> > in our framework to use it by a css and optionaly put the PSD I
> used
> > > >>to
> > > >> > author the final PNG in some source folder so people can use it.
> > > >> >
> > > >> > This is the same. SASS is the PSD and CSS is the PNG. The
> important
> > > >>thing
> > > >> > here's that I'm using SASS to be more productive,
> > > >> > and I'm producing a final "defaults.css". I can remove all SASS
> > files
> > > >>and
> > > >> > configurations and work it on my own, but I think people would
> want
> > it
> > > >> > In the other hand, people that don't want to use are not
> obligated,
> > > >>since
> > > >> > they can use the final "defaults.css" as its template to create
> his
> > > >>own
> > > >> > theme.
> > > >> > For me is just a matter of convenience since I can code the
> visuals
> > > >>in a
> > > >> > more organized way, just like I were coding AS3 vs JS. We use AS3
> > and
> > > >>not
> > > >> > CSS for the same reason people use SASS over CSS. It's more easy,
> > can
> > > >> catch
> > > >> > errors, and you are more safe of what you're doing.
> > > >> >
> > > >> >
> > > >> >
> > > >> > >   So the
> > > >> > > first question I have is what is there about the current Royale
> > > >>feature
> > > >> > > set that makes it truly impossible or impractical to implement a
> > > >> > CSS-based
> > > >> > > theme and generate flavors of it with other CSS files?  If you
> > push
> > > >>for
> > > >> > > SASS that means we have to impact all of our non-Maven users by
> > > >>asking
> > > >> > > them to integrate SASS somehow, or do more work on the compiler.
> > We
> > > >> > can't
> > > >> > > just make everybody use Maven and SASS.  That won't help us gain
> > > >>users
> > > >> > and
> > > >> > > successful migrators.
> > > >> > >
> > > >> >
> > > >> > I tell you in various emails this days. My problems are more in
> the
> > > >>post
> > > >> > processing of CSS by the royale compiler.
> > > >> > There's still sume rules that we don't allow, and that is limiting
> > me
> > > >> since
> > > >> > I need to workaround.
> > > >> > I thought about solving it in the compiler, but after trying it, I
> > > >> continue
> > > >> > to be not able to solve it myself.
> > > >> >
> > > >> > In the next "step", the main problem is how to make colors
> > > >>configurable
> > > >> by
> > > >> > the final user.
> > > >> > The way other frameworks do is the following [1]. They have all
> > > >> > combinations of css colors in a final minified file.
> > > >> >
> > > >> > We can do this better by creating the palettes and creating the
> CSS
> > on
> > > >> the
> > > >> > fly as people compile the Royale App.
> > > >> > The input will be 2-3 colors passed by ANT or Maven, the output
> for
> > > >>jewel
> > > >> > should be for example
> > > >> > "royale-jewel-${primary}-${secondary}-${accent}.min.css"
> > > >> > or if we create one with gradients then six vars ${primary1},
> > > >> ${primary2},
> > > >> > ${secondary1}, ${secondary2},...and so on
> > > >> >
> > > >> > But please, if we do this, it should not be planned as a few hacks
> > > >>here
> > > >> and
> > > >> > there. For me this should be part of something
> > > >> > like the targets rework you did some months ago. Where you need to
> > > >> > introduce it in all its complexity.
> > > >> >
> > > >> > This is the same, and what we get from this is a huge reward since
> > > >>we'll
> > > >> > have a great theme support that will people start to consider
> > > >> > Royale in real apps since we can provide them with a UI set that
> is
> > > >> usable
> > > >> > out of the box and match colors in their brands. They can choose
> how
> > > >> their
> > > >> > apps
> > > >> > looks from the beginning. Right now they can since we are
> providing
> > > >>basic
> > > >> > theme, or MDL, that makes them be stuck in the MDL namespace and
> > what
> > > >> > things
> > > >> > works in that external UI set.
> > > >> >
> > > >> >
> > > >> > > That's why I want you to provide a concrete example or two of
> what
> > > >>you
> > > >> > > can't do with the current feature set.  And that doesn't mean by
> > > >>using
> > > >> > > MDL-style string substitutions or SASS-syntax.  In the end, you
> > > >>want to
> > > >> > > start with a set of CSS files and have the final CSS to look
> like
> > > >> > > something.  Royale has a way of doing that.  Why does that way
> not
> > > >>work
> > > >> > > for you?
> > > >> >
> > > >> >
> > > >> > the "partials" (for taking SASS naming) is working in royale, so
> we
> > > >>have
> > > >> > already one thing.
> > > >> > That's ok, we need more on this, but we need now, or do you want I
> > > >>cross
> > > >> my
> > > >> > arms and wait
> > > >> > for this to be implemented? what should I do? I need to focus on
> > > >>Sketch,
> > > >> on
> > > >> > prototyping, on design, on coding visuals
> > > >> > that fills my time each day on Royale. I can't do much creating
> this
> > > >> > features in royale compiler, since I read that code and don't know
> > > >>what
> > > >> to
> > > >> > do
> > > >> > even with your Kindly explanations what I thank you for providing
> > me,
> > > >> since
> > > >> > is time you're investing for me.
> > > >> >
> > > >> >
> > > >> > > Sure there might be better ways, like all of the CSS features
> > > >> > > you listed below, but why do our themes need to use them?  Also
> > > >> consider
> > > >> > > that the more advanced CSS you use, the more work there will be
> to
> > > >> create
> > > >> > > a SWF equivalent.
> > > >> > >
> > > >> >
> > > >> > The final css is the same you will make by hand, so if SVGs are
> not
> > > >> > supported in SWF, this will no make a difference.
> > > >> > If linear gradients are not supported as well, again is the
> > > >>same...again
> > > >> > think in the PSD/PNG paralellims with SASS/CSS,
> > > >> > if SWF was not supporting PNG, the problem will not be that I
> author
> > > >>it
> > > >> > with Photoshop, is that we need Royale to make
> > > >> > it happen (support PNG in SWF)
> > > >> >
> > > >> >
> > > >> > >
> > > >> > > I think it will help the community more to understand the
> > trade-offs
> > > >> and
> > > >> > > avoid using the latest, coolest thing so we don't have to expend
> > as
> > > >> much
> > > >> > > energy getting it to work for non-Maven users.
> > > >> > >
> > > >> > >
> > > >> > We the things I'm doing, you don't need to wire SASS in ANT to see
> > my
> > > >> work.
> > > >> > As I'm uploading generated defaults.css, you have the final css
> > file,
> > > >> > ant a ANT build will retrieve this as in the rest of projects.
> > > >> >
> > > >> > Hope this clarifies all this more and we could go to the real
> target
> > > >>that
> > > >> > is getting a better visuals in a UI set that I'm sure will
> > > >> > provide us more engagement for people out there.
> > > >> >
> > > >> > Thanks
> > > >> > Carlos
> > > >> >
> > > >> >
> > > >> > > Thanks,
> > > >> > > -Alex
> > > >> >
> > > >> >
> > > >> >  [1]
> > > >>https://na01.safelinks.protection.outlook.com/?url=
> > > https%3A%2F%2Fcdnjs.co
> > > >>m%2Flibraries%2Fmaterial-design-lite&data=02%7C01%7Caharui%
> 40adobe.com
> > > %7C
> > > >>b89b18e7a3b8444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> > > cee1%7C0%7
> > > >>C0%7C636561948219452668&sdata=vre2s3Z4HuE8j7v4UBLyovYjFoPJIy
> > > 8gGbp2o5J3WW4
> > > >>%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
> > > %7Cb89b18e7a3b8
> > > >>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> > > cee1%7C0%7C0%7C6365619
> > > >>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&
> > > reserv
> > > >>ed=0
> > > >>
> > > >><https://na01.safelinks.protection.outlook.com/?url=
> > > https%3A%2F%2Fwww.pat
> > > >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> > > %7Cb89b18e7a3b8
> > > >>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> > > cee1%7C0%7C0%7C6365619
> > > >>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&
> > > reserv
> > > >>ed=0>*
> > > >>
> > > >
> > > >
> > > >
> > > >--
> > > >Carlos Rovira
> > > >https://na01.safelinks.protection.outlook.com/?url=
> > > http%3A%2F%2Fabout.me%2
> > > >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> > > 7Cb89b18e7a3b8444b0ebf08d5
> > > >85b81ffe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> > > 7C636561948219452668&s
> > > >data=0AWcm1ZIKLmbOLGrxAiaBo%2FO6XdSmHChaez4kyskBsA%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

Re: How can we pass colors to a CSS?

[Piotr Zarzycki <pi...@gmail.com>]

Carlos,

If you could prepare test application, along with your last state of the
code it would be helpful. I wanted to also understand the issues, cause I
had issues with CSS while working on transpiledactionscript. I did win with
them and I don't think whether it was as much as I thought before some
workaround.

Thanks,
Piotr


2018-03-09 19:10 GMT+01:00 Carlos Rovira <ca...@apache.org>:

> Hi Alex,
>
> many thanks. I'm working right now in a POC of a theme based on solid color
> with only button. I expect this can help me show you all what I'm trying to
> do. Hope to get it this week and hope we can comment over it.
>
> let me know if you want me to test things like linear-gradients,
> text-shadows and rgba
>
> thanks!
>
>
>
> 2018-03-09 19:01 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
>
> > Hi Carlos,
> >
> > I am about to work on the 0.9.2 release.  I will try to fix the CSS
> issues
> > in the compiler while the vote is pending.
> >
> > I still believe you can use themes to set the colors.  And that will work
> > not just in Maven and Ant, but also on the command-line and IDEs.  I am
> > still looking for a concrete example of why that does not work.  I will
> > dig into your branches after I get the RC out for vote.
> >
> > -Alex
> >
> > On 3/9/18, 4:19 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> > <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
> >
> > >Hi Piotr,
> > >
> > >2018-03-09 12:40 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
> > >
> > >> Carlos,
> > >>
> > >> I see following two things:
> > >>
> > >> 1) There is something in css which breaks build and you cannot uses,
> > >> because compiler have some issue with it - yes?
> > >>
> > >
> > >sometimes is breaking the build, others not output what I write in css
> > >(for
> > >example adding like "Unexpected value found" or something like that,
> don't
> > >remember the exact wording)
> > >
> > >
> > >
> > >> 2) You would like to add user possibility to change components easily
> -
> > >> Your solution is SASS, because #1.
> > >>
> > >>
> > >I want the user can use a theme with the colors he/she want to use
> > >With SASS I can put the colors in a variables and the user can change
> it.
> > >Or the next thing to look for are "palettes" that is something like MDL
> > >does.
> > >In this way user change colors or palettes and then use SASS to get
> final
> > >CSS.
> > >This process can be separate from the rest of royale, like the process
> to
> > >make a PNG
> > >since user can use the one we provide, or create another with Photoshop,
> > >Sketch, Affinity...
> > >
> > >
> > >
> > >> Am I understand in general correctly this thread ?
> > >>
> > >>
> > >This thread should have priorities. As I see are:
> > >
> > >1) Need to solve various problems with royale compiler processing of CSS
> > >(gradients, alphas,...)
> > >
> > >this is crucial since the rest of points depends on this.
> > >
> > >2) How we can make users introduce a config via ANT or MAVEN to choose
> > >what
> > >colors they want in final app
> > >
> > >in this point I propose that user introduces properties for colors in
> ANT
> > >or MAVEN and then the compiler retrieves that when process CSS to make
> > >string substitution
> > >
> > >3) What we can improve to make theme development more easier.
> > >
> > >in this part is how near we can get to what SASS gives us, this can be
> of
> > >less importance and since is more related at how the final CSS is
> created,
> > >we can decide to separate from royale project (although, having this
> will
> > >make our project to have even more sense, since as Om said, nobody has a
> > >tool that makes what SASS does and even integrates with the code , in
> this
> > >case AS3/MXML).
> > >
> > >For point 3 I have SASS *separated* maven workflow, that doesn't need to
> > >be
> > >part of the rest of royale libs and themes. I use this for convenience
> to
> > >develop Jewel more easy and quick.
> > >
> > >One final thought. We are a front end technology. Front-end relies
> heavily
> > >in visuals. It seems in royale community, there's no much preoccupation
> in
> > >this part. I think I'm alone with this since the rest of contributors
> are
> > >more balanced towards framework code, compiler,...but not on UX (styles,
> > >visuals, colors, animations...). I want to transmit here that all this
> is
> > >very important since front end developers choose in part with his
> "eyes",
> > >and then see other things. What I'm trying to contribute is fix the
> visual
> > >part so people coming, can see "hey! this looks good!, lets see what's
> > >behind..." and then we love the rest of the technology.
> > >There's other kind of users that only needs an easy dev tool to make an
> > >app, and they don't care if it looks good or not, while it works. My
> > >thinking is that nowadays this kind of user are very few compared with
> the
> > >other one.
> > >I don't care to be the only one centered in visuals...it's ok for me,
> but
> > >I
> > >want to remark the importance of this in the overall target we all
> pursue
> > >and that I need some help in the parts where I can't reach (compiler
> > >mainly, infrastructure,...)
> > >
> > >Hope that clears this more
> > >
> > >Carlos
> > >
> > >
> > >
> > >
> > >> Thanks, Piotr
> > >>
> > >>
> > >> 2018-03-09 12:28 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> > >>
> > >> > Hi Alex,
> > >> >
> > >> > 2018-03-08 23:06 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
> > >> >
> > >> > > Hi Carlos,
> > >> > >
> > >> > > I don't doubt that SASS is powerful and useful, otherwise it
> > >>wouldn't
> > >> be
> > >> > > popular.  What I am asking you to consider is that every decision
> > >>you
> > >> > make
> > >> > > affects a lot of people and we only have a relatively small team.
> > >> >
> > >> >
> > >> > Maybe you missed what I wrote at the beginning of this discussion.
> Use
> > >> SASS
> > >> > doesn't means anything for the rest of the project.
> > >> > Let's compare with a PSD vs an img. Imagine I author a PSD to
> create a
> > >> > button image background. Then I can put only the final PNG
> > >> > in our framework to use it by a css and optionaly put the PSD I used
> > >>to
> > >> > author the final PNG in some source folder so people can use it.
> > >> >
> > >> > This is the same. SASS is the PSD and CSS is the PNG. The important
> > >>thing
> > >> > here's that I'm using SASS to be more productive,
> > >> > and I'm producing a final "defaults.css". I can remove all SASS
> files
> > >>and
> > >> > configurations and work it on my own, but I think people would want
> it
> > >> > In the other hand, people that don't want to use are not obligated,
> > >>since
> > >> > they can use the final "defaults.css" as its template to create his
> > >>own
> > >> > theme.
> > >> > For me is just a matter of convenience since I can code the visuals
> > >>in a
> > >> > more organized way, just like I were coding AS3 vs JS. We use AS3
> and
> > >>not
> > >> > CSS for the same reason people use SASS over CSS. It's more easy,
> can
> > >> catch
> > >> > errors, and you are more safe of what you're doing.
> > >> >
> > >> >
> > >> >
> > >> > >   So the
> > >> > > first question I have is what is there about the current Royale
> > >>feature
> > >> > > set that makes it truly impossible or impractical to implement a
> > >> > CSS-based
> > >> > > theme and generate flavors of it with other CSS files?  If you
> push
> > >>for
> > >> > > SASS that means we have to impact all of our non-Maven users by
> > >>asking
> > >> > > them to integrate SASS somehow, or do more work on the compiler.
> We
> > >> > can't
> > >> > > just make everybody use Maven and SASS.  That won't help us gain
> > >>users
> > >> > and
> > >> > > successful migrators.
> > >> > >
> > >> >
> > >> > I tell you in various emails this days. My problems are more in the
> > >>post
> > >> > processing of CSS by the royale compiler.
> > >> > There's still sume rules that we don't allow, and that is limiting
> me
> > >> since
> > >> > I need to workaround.
> > >> > I thought about solving it in the compiler, but after trying it, I
> > >> continue
> > >> > to be not able to solve it myself.
> > >> >
> > >> > In the next "step", the main problem is how to make colors
> > >>configurable
> > >> by
> > >> > the final user.
> > >> > The way other frameworks do is the following [1]. They have all
> > >> > combinations of css colors in a final minified file.
> > >> >
> > >> > We can do this better by creating the palettes and creating the CSS
> on
> > >> the
> > >> > fly as people compile the Royale App.
> > >> > The input will be 2-3 colors passed by ANT or Maven, the output for
> > >>jewel
> > >> > should be for example
> > >> > "royale-jewel-${primary}-${secondary}-${accent}.min.css"
> > >> > or if we create one with gradients then six vars ${primary1},
> > >> ${primary2},
> > >> > ${secondary1}, ${secondary2},...and so on
> > >> >
> > >> > But please, if we do this, it should not be planned as a few hacks
> > >>here
> > >> and
> > >> > there. For me this should be part of something
> > >> > like the targets rework you did some months ago. Where you need to
> > >> > introduce it in all its complexity.
> > >> >
> > >> > This is the same, and what we get from this is a huge reward since
> > >>we'll
> > >> > have a great theme support that will people start to consider
> > >> > Royale in real apps since we can provide them with a UI set that is
> > >> usable
> > >> > out of the box and match colors in their brands. They can choose how
> > >> their
> > >> > apps
> > >> > looks from the beginning. Right now they can since we are providing
> > >>basic
> > >> > theme, or MDL, that makes them be stuck in the MDL namespace and
> what
> > >> > things
> > >> > works in that external UI set.
> > >> >
> > >> >
> > >> > > That's why I want you to provide a concrete example or two of what
> > >>you
> > >> > > can't do with the current feature set.  And that doesn't mean by
> > >>using
> > >> > > MDL-style string substitutions or SASS-syntax.  In the end, you
> > >>want to
> > >> > > start with a set of CSS files and have the final CSS to look like
> > >> > > something.  Royale has a way of doing that.  Why does that way not
> > >>work
> > >> > > for you?
> > >> >
> > >> >
> > >> > the "partials" (for taking SASS naming) is working in royale, so we
> > >>have
> > >> > already one thing.
> > >> > That's ok, we need more on this, but we need now, or do you want I
> > >>cross
> > >> my
> > >> > arms and wait
> > >> > for this to be implemented? what should I do? I need to focus on
> > >>Sketch,
> > >> on
> > >> > prototyping, on design, on coding visuals
> > >> > that fills my time each day on Royale. I can't do much creating this
> > >> > features in royale compiler, since I read that code and don't know
> > >>what
> > >> to
> > >> > do
> > >> > even with your Kindly explanations what I thank you for providing
> me,
> > >> since
> > >> > is time you're investing for me.
> > >> >
> > >> >
> > >> > > Sure there might be better ways, like all of the CSS features
> > >> > > you listed below, but why do our themes need to use them?  Also
> > >> consider
> > >> > > that the more advanced CSS you use, the more work there will be to
> > >> create
> > >> > > a SWF equivalent.
> > >> > >
> > >> >
> > >> > The final css is the same you will make by hand, so if SVGs are not
> > >> > supported in SWF, this will no make a difference.
> > >> > If linear gradients are not supported as well, again is the
> > >>same...again
> > >> > think in the PSD/PNG paralellims with SASS/CSS,
> > >> > if SWF was not supporting PNG, the problem will not be that I author
> > >>it
> > >> > with Photoshop, is that we need Royale to make
> > >> > it happen (support PNG in SWF)
> > >> >
> > >> >
> > >> > >
> > >> > > I think it will help the community more to understand the
> trade-offs
> > >> and
> > >> > > avoid using the latest, coolest thing so we don't have to expend
> as
> > >> much
> > >> > > energy getting it to work for non-Maven users.
> > >> > >
> > >> > >
> > >> > We the things I'm doing, you don't need to wire SASS in ANT to see
> my
> > >> work.
> > >> > As I'm uploading generated defaults.css, you have the final css
> file,
> > >> > ant a ANT build will retrieve this as in the rest of projects.
> > >> >
> > >> > Hope this clarifies all this more and we could go to the real target
> > >>that
> > >> > is getting a better visuals in a UI set that I'm sure will
> > >> > provide us more engagement for people out there.
> > >> >
> > >> > Thanks
> > >> > Carlos
> > >> >
> > >> >
> > >> > > Thanks,
> > >> > > -Alex
> > >> >
> > >> >
> > >> >  [1]
> > >>https://na01.safelinks.protection.outlook.com/?url=
> > https%3A%2F%2Fcdnjs.co
> > >>m%2Flibraries%2Fmaterial-design-lite&data=02%7C01%7Caharui%40adobe.com
> > %7C
> > >>b89b18e7a3b8444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> > cee1%7C0%7
> > >>C0%7C636561948219452668&sdata=vre2s3Z4HuE8j7v4UBLyovYjFoPJIy
> > 8gGbp2o5J3WW4
> > >>%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
> > %7Cb89b18e7a3b8
> > >>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> > cee1%7C0%7C0%7C6365619
> > >>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&
> > reserv
> > >>ed=0
> > >>
> > >><https://na01.safelinks.protection.outlook.com/?url=
> > https%3A%2F%2Fwww.pat
> > >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> > %7Cb89b18e7a3b8
> > >>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> > cee1%7C0%7C0%7C6365619
> > >>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&
> > reserv
> > >>ed=0>*
> > >>
> > >
> > >
> > >
> > >--
> > >Carlos Rovira
> > >https://na01.safelinks.protection.outlook.com/?url=
> > http%3A%2F%2Fabout.me%2
> > >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> > 7Cb89b18e7a3b8444b0ebf08d5
> > >85b81ffe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> > 7C636561948219452668&s
> > >data=0AWcm1ZIKLmbOLGrxAiaBo%2FO6XdSmHChaez4kyskBsA%3D&reserved=0
> >
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>



-- 

Piotr Zarzycki

Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

Hi Alex,

many thanks. I'm working right now in a POC of a theme based on solid color
with only button. I expect this can help me show you all what I'm trying to
do. Hope to get it this week and hope we can comment over it.

let me know if you want me to test things like linear-gradients,
text-shadows and rgba

thanks!



2018-03-09 19:01 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:

> Hi Carlos,
>
> I am about to work on the 0.9.2 release.  I will try to fix the CSS issues
> in the compiler while the vote is pending.
>
> I still believe you can use themes to set the colors.  And that will work
> not just in Maven and Ant, but also on the command-line and IDEs.  I am
> still looking for a concrete example of why that does not work.  I will
> dig into your branches after I get the RC out for vote.
>
> -Alex
>
> On 3/9/18, 4:19 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >Hi Piotr,
> >
> >2018-03-09 12:40 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
> >
> >> Carlos,
> >>
> >> I see following two things:
> >>
> >> 1) There is something in css which breaks build and you cannot uses,
> >> because compiler have some issue with it - yes?
> >>
> >
> >sometimes is breaking the build, others not output what I write in css
> >(for
> >example adding like "Unexpected value found" or something like that, don't
> >remember the exact wording)
> >
> >
> >
> >> 2) You would like to add user possibility to change components easily -
> >> Your solution is SASS, because #1.
> >>
> >>
> >I want the user can use a theme with the colors he/she want to use
> >With SASS I can put the colors in a variables and the user can change it.
> >Or the next thing to look for are "palettes" that is something like MDL
> >does.
> >In this way user change colors or palettes and then use SASS to get final
> >CSS.
> >This process can be separate from the rest of royale, like the process to
> >make a PNG
> >since user can use the one we provide, or create another with Photoshop,
> >Sketch, Affinity...
> >
> >
> >
> >> Am I understand in general correctly this thread ?
> >>
> >>
> >This thread should have priorities. As I see are:
> >
> >1) Need to solve various problems with royale compiler processing of CSS
> >(gradients, alphas,...)
> >
> >this is crucial since the rest of points depends on this.
> >
> >2) How we can make users introduce a config via ANT or MAVEN to choose
> >what
> >colors they want in final app
> >
> >in this point I propose that user introduces properties for colors in ANT
> >or MAVEN and then the compiler retrieves that when process CSS to make
> >string substitution
> >
> >3) What we can improve to make theme development more easier.
> >
> >in this part is how near we can get to what SASS gives us, this can be of
> >less importance and since is more related at how the final CSS is created,
> >we can decide to separate from royale project (although, having this will
> >make our project to have even more sense, since as Om said, nobody has a
> >tool that makes what SASS does and even integrates with the code , in this
> >case AS3/MXML).
> >
> >For point 3 I have SASS *separated* maven workflow, that doesn't need to
> >be
> >part of the rest of royale libs and themes. I use this for convenience to
> >develop Jewel more easy and quick.
> >
> >One final thought. We are a front end technology. Front-end relies heavily
> >in visuals. It seems in royale community, there's no much preoccupation in
> >this part. I think I'm alone with this since the rest of contributors are
> >more balanced towards framework code, compiler,...but not on UX (styles,
> >visuals, colors, animations...). I want to transmit here that all this is
> >very important since front end developers choose in part with his "eyes",
> >and then see other things. What I'm trying to contribute is fix the visual
> >part so people coming, can see "hey! this looks good!, lets see what's
> >behind..." and then we love the rest of the technology.
> >There's other kind of users that only needs an easy dev tool to make an
> >app, and they don't care if it looks good or not, while it works. My
> >thinking is that nowadays this kind of user are very few compared with the
> >other one.
> >I don't care to be the only one centered in visuals...it's ok for me, but
> >I
> >want to remark the importance of this in the overall target we all pursue
> >and that I need some help in the parts where I can't reach (compiler
> >mainly, infrastructure,...)
> >
> >Hope that clears this more
> >
> >Carlos
> >
> >
> >
> >
> >> Thanks, Piotr
> >>
> >>
> >> 2018-03-09 12:28 GMT+01:00 Carlos Rovira <ca...@apache.org>:
> >>
> >> > Hi Alex,
> >> >
> >> > 2018-03-08 23:06 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
> >> >
> >> > > Hi Carlos,
> >> > >
> >> > > I don't doubt that SASS is powerful and useful, otherwise it
> >>wouldn't
> >> be
> >> > > popular.  What I am asking you to consider is that every decision
> >>you
> >> > make
> >> > > affects a lot of people and we only have a relatively small team.
> >> >
> >> >
> >> > Maybe you missed what I wrote at the beginning of this discussion. Use
> >> SASS
> >> > doesn't means anything for the rest of the project.
> >> > Let's compare with a PSD vs an img. Imagine I author a PSD to create a
> >> > button image background. Then I can put only the final PNG
> >> > in our framework to use it by a css and optionaly put the PSD I used
> >>to
> >> > author the final PNG in some source folder so people can use it.
> >> >
> >> > This is the same. SASS is the PSD and CSS is the PNG. The important
> >>thing
> >> > here's that I'm using SASS to be more productive,
> >> > and I'm producing a final "defaults.css". I can remove all SASS files
> >>and
> >> > configurations and work it on my own, but I think people would want it
> >> > In the other hand, people that don't want to use are not obligated,
> >>since
> >> > they can use the final "defaults.css" as its template to create his
> >>own
> >> > theme.
> >> > For me is just a matter of convenience since I can code the visuals
> >>in a
> >> > more organized way, just like I were coding AS3 vs JS. We use AS3 and
> >>not
> >> > CSS for the same reason people use SASS over CSS. It's more easy, can
> >> catch
> >> > errors, and you are more safe of what you're doing.
> >> >
> >> >
> >> >
> >> > >   So the
> >> > > first question I have is what is there about the current Royale
> >>feature
> >> > > set that makes it truly impossible or impractical to implement a
> >> > CSS-based
> >> > > theme and generate flavors of it with other CSS files?  If you push
> >>for
> >> > > SASS that means we have to impact all of our non-Maven users by
> >>asking
> >> > > them to integrate SASS somehow, or do more work on the compiler.  We
> >> > can't
> >> > > just make everybody use Maven and SASS.  That won't help us gain
> >>users
> >> > and
> >> > > successful migrators.
> >> > >
> >> >
> >> > I tell you in various emails this days. My problems are more in the
> >>post
> >> > processing of CSS by the royale compiler.
> >> > There's still sume rules that we don't allow, and that is limiting me
> >> since
> >> > I need to workaround.
> >> > I thought about solving it in the compiler, but after trying it, I
> >> continue
> >> > to be not able to solve it myself.
> >> >
> >> > In the next "step", the main problem is how to make colors
> >>configurable
> >> by
> >> > the final user.
> >> > The way other frameworks do is the following [1]. They have all
> >> > combinations of css colors in a final minified file.
> >> >
> >> > We can do this better by creating the palettes and creating the CSS on
> >> the
> >> > fly as people compile the Royale App.
> >> > The input will be 2-3 colors passed by ANT or Maven, the output for
> >>jewel
> >> > should be for example
> >> > "royale-jewel-${primary}-${secondary}-${accent}.min.css"
> >> > or if we create one with gradients then six vars ${primary1},
> >> ${primary2},
> >> > ${secondary1}, ${secondary2},...and so on
> >> >
> >> > But please, if we do this, it should not be planned as a few hacks
> >>here
> >> and
> >> > there. For me this should be part of something
> >> > like the targets rework you did some months ago. Where you need to
> >> > introduce it in all its complexity.
> >> >
> >> > This is the same, and what we get from this is a huge reward since
> >>we'll
> >> > have a great theme support that will people start to consider
> >> > Royale in real apps since we can provide them with a UI set that is
> >> usable
> >> > out of the box and match colors in their brands. They can choose how
> >> their
> >> > apps
> >> > looks from the beginning. Right now they can since we are providing
> >>basic
> >> > theme, or MDL, that makes them be stuck in the MDL namespace and what
> >> > things
> >> > works in that external UI set.
> >> >
> >> >
> >> > > That's why I want you to provide a concrete example or two of what
> >>you
> >> > > can't do with the current feature set.  And that doesn't mean by
> >>using
> >> > > MDL-style string substitutions or SASS-syntax.  In the end, you
> >>want to
> >> > > start with a set of CSS files and have the final CSS to look like
> >> > > something.  Royale has a way of doing that.  Why does that way not
> >>work
> >> > > for you?
> >> >
> >> >
> >> > the "partials" (for taking SASS naming) is working in royale, so we
> >>have
> >> > already one thing.
> >> > That's ok, we need more on this, but we need now, or do you want I
> >>cross
> >> my
> >> > arms and wait
> >> > for this to be implemented? what should I do? I need to focus on
> >>Sketch,
> >> on
> >> > prototyping, on design, on coding visuals
> >> > that fills my time each day on Royale. I can't do much creating this
> >> > features in royale compiler, since I read that code and don't know
> >>what
> >> to
> >> > do
> >> > even with your Kindly explanations what I thank you for providing me,
> >> since
> >> > is time you're investing for me.
> >> >
> >> >
> >> > > Sure there might be better ways, like all of the CSS features
> >> > > you listed below, but why do our themes need to use them?  Also
> >> consider
> >> > > that the more advanced CSS you use, the more work there will be to
> >> create
> >> > > a SWF equivalent.
> >> > >
> >> >
> >> > The final css is the same you will make by hand, so if SVGs are not
> >> > supported in SWF, this will no make a difference.
> >> > If linear gradients are not supported as well, again is the
> >>same...again
> >> > think in the PSD/PNG paralellims with SASS/CSS,
> >> > if SWF was not supporting PNG, the problem will not be that I author
> >>it
> >> > with Photoshop, is that we need Royale to make
> >> > it happen (support PNG in SWF)
> >> >
> >> >
> >> > >
> >> > > I think it will help the community more to understand the trade-offs
> >> and
> >> > > avoid using the latest, coolest thing so we don't have to expend as
> >> much
> >> > > energy getting it to work for non-Maven users.
> >> > >
> >> > >
> >> > We the things I'm doing, you don't need to wire SASS in ANT to see my
> >> work.
> >> > As I'm uploading generated defaults.css, you have the final css file,
> >> > ant a ANT build will retrieve this as in the rest of projects.
> >> >
> >> > Hope this clarifies all this more and we could go to the real target
> >>that
> >> > is getting a better visuals in a UI set that I'm sure will
> >> > provide us more engagement for people out there.
> >> >
> >> > Thanks
> >> > Carlos
> >> >
> >> >
> >> > > Thanks,
> >> > > -Alex
> >> >
> >> >
> >> >  [1]
> >>https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fcdnjs.co
> >>m%2Flibraries%2Fmaterial-design-lite&data=02%7C01%7Caharui%40adobe.com
> %7C
> >>b89b18e7a3b8444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7
> >>C0%7C636561948219452668&sdata=vre2s3Z4HuE8j7v4UBLyovYjFoPJIy
> 8gGbp2o5J3WW4
> >>%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
> %7Cb89b18e7a3b8
> >>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365619
> >>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&
> reserv
> >>ed=0
> >>
> >><https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.pat
> >>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> %7Cb89b18e7a3b8
> >>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365619
> >>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&
> reserv
> >>ed=0>*
> >>
> >
> >
> >
> >--
> >Carlos Rovira
> >https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2
> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7Cb89b18e7a3b8444b0ebf08d5
> >85b81ffe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636561948219452668&s
> >data=0AWcm1ZIKLmbOLGrxAiaBo%2FO6XdSmHChaez4kyskBsA%3D&reserved=0
>
>


-- 
Carlos Rovira
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[Alex Harui <ah...@adobe.com.INVALID>]

Hi Carlos,

I am about to work on the 0.9.2 release.  I will try to fix the CSS issues
in the compiler while the vote is pending.

I still believe you can use themes to set the colors.  And that will work
not just in Maven and Ant, but also on the command-line and IDEs.  I am
still looking for a concrete example of why that does not work.  I will
dig into your branches after I get the RC out for vote.

-Alex

On 3/9/18, 4:19 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:

>Hi Piotr,
>
>2018-03-09 12:40 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:
>
>> Carlos,
>>
>> I see following two things:
>>
>> 1) There is something in css which breaks build and you cannot uses,
>> because compiler have some issue with it - yes?
>>
>
>sometimes is breaking the build, others not output what I write in css
>(for
>example adding like "Unexpected value found" or something like that, don't
>remember the exact wording)
>
>
>
>> 2) You would like to add user possibility to change components easily -
>> Your solution is SASS, because #1.
>>
>>
>I want the user can use a theme with the colors he/she want to use
>With SASS I can put the colors in a variables and the user can change it.
>Or the next thing to look for are "palettes" that is something like MDL
>does.
>In this way user change colors or palettes and then use SASS to get final
>CSS.
>This process can be separate from the rest of royale, like the process to
>make a PNG
>since user can use the one we provide, or create another with Photoshop,
>Sketch, Affinity...
>
>
>
>> Am I understand in general correctly this thread ?
>>
>>
>This thread should have priorities. As I see are:
>
>1) Need to solve various problems with royale compiler processing of CSS
>(gradients, alphas,...)
>
>this is crucial since the rest of points depends on this.
>
>2) How we can make users introduce a config via ANT or MAVEN to choose
>what
>colors they want in final app
>
>in this point I propose that user introduces properties for colors in ANT
>or MAVEN and then the compiler retrieves that when process CSS to make
>string substitution
>
>3) What we can improve to make theme development more easier.
>
>in this part is how near we can get to what SASS gives us, this can be of
>less importance and since is more related at how the final CSS is created,
>we can decide to separate from royale project (although, having this will
>make our project to have even more sense, since as Om said, nobody has a
>tool that makes what SASS does and even integrates with the code , in this
>case AS3/MXML).
>
>For point 3 I have SASS *separated* maven workflow, that doesn't need to
>be
>part of the rest of royale libs and themes. I use this for convenience to
>develop Jewel more easy and quick.
>
>One final thought. We are a front end technology. Front-end relies heavily
>in visuals. It seems in royale community, there's no much preoccupation in
>this part. I think I'm alone with this since the rest of contributors are
>more balanced towards framework code, compiler,...but not on UX (styles,
>visuals, colors, animations...). I want to transmit here that all this is
>very important since front end developers choose in part with his "eyes",
>and then see other things. What I'm trying to contribute is fix the visual
>part so people coming, can see "hey! this looks good!, lets see what's
>behind..." and then we love the rest of the technology.
>There's other kind of users that only needs an easy dev tool to make an
>app, and they don't care if it looks good or not, while it works. My
>thinking is that nowadays this kind of user are very few compared with the
>other one.
>I don't care to be the only one centered in visuals...it's ok for me, but
>I
>want to remark the importance of this in the overall target we all pursue
>and that I need some help in the parts where I can't reach (compiler
>mainly, infrastructure,...)
>
>Hope that clears this more
>
>Carlos
>
>
>
>
>> Thanks, Piotr
>>
>>
>> 2018-03-09 12:28 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>>
>> > Hi Alex,
>> >
>> > 2018-03-08 23:06 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
>> >
>> > > Hi Carlos,
>> > >
>> > > I don't doubt that SASS is powerful and useful, otherwise it
>>wouldn't
>> be
>> > > popular.  What I am asking you to consider is that every decision
>>you
>> > make
>> > > affects a lot of people and we only have a relatively small team.
>> >
>> >
>> > Maybe you missed what I wrote at the beginning of this discussion. Use
>> SASS
>> > doesn't means anything for the rest of the project.
>> > Let's compare with a PSD vs an img. Imagine I author a PSD to create a
>> > button image background. Then I can put only the final PNG
>> > in our framework to use it by a css and optionaly put the PSD I used
>>to
>> > author the final PNG in some source folder so people can use it.
>> >
>> > This is the same. SASS is the PSD and CSS is the PNG. The important
>>thing
>> > here's that I'm using SASS to be more productive,
>> > and I'm producing a final "defaults.css". I can remove all SASS files
>>and
>> > configurations and work it on my own, but I think people would want it
>> > In the other hand, people that don't want to use are not obligated,
>>since
>> > they can use the final "defaults.css" as its template to create his
>>own
>> > theme.
>> > For me is just a matter of convenience since I can code the visuals
>>in a
>> > more organized way, just like I were coding AS3 vs JS. We use AS3 and
>>not
>> > CSS for the same reason people use SASS over CSS. It's more easy, can
>> catch
>> > errors, and you are more safe of what you're doing.
>> >
>> >
>> >
>> > >   So the
>> > > first question I have is what is there about the current Royale
>>feature
>> > > set that makes it truly impossible or impractical to implement a
>> > CSS-based
>> > > theme and generate flavors of it with other CSS files?  If you push
>>for
>> > > SASS that means we have to impact all of our non-Maven users by
>>asking
>> > > them to integrate SASS somehow, or do more work on the compiler.  We
>> > can't
>> > > just make everybody use Maven and SASS.  That won't help us gain
>>users
>> > and
>> > > successful migrators.
>> > >
>> >
>> > I tell you in various emails this days. My problems are more in the
>>post
>> > processing of CSS by the royale compiler.
>> > There's still sume rules that we don't allow, and that is limiting me
>> since
>> > I need to workaround.
>> > I thought about solving it in the compiler, but after trying it, I
>> continue
>> > to be not able to solve it myself.
>> >
>> > In the next "step", the main problem is how to make colors
>>configurable
>> by
>> > the final user.
>> > The way other frameworks do is the following [1]. They have all
>> > combinations of css colors in a final minified file.
>> >
>> > We can do this better by creating the palettes and creating the CSS on
>> the
>> > fly as people compile the Royale App.
>> > The input will be 2-3 colors passed by ANT or Maven, the output for
>>jewel
>> > should be for example
>> > "royale-jewel-${primary}-${secondary}-${accent}.min.css"
>> > or if we create one with gradients then six vars ${primary1},
>> ${primary2},
>> > ${secondary1}, ${secondary2},...and so on
>> >
>> > But please, if we do this, it should not be planned as a few hacks
>>here
>> and
>> > there. For me this should be part of something
>> > like the targets rework you did some months ago. Where you need to
>> > introduce it in all its complexity.
>> >
>> > This is the same, and what we get from this is a huge reward since
>>we'll
>> > have a great theme support that will people start to consider
>> > Royale in real apps since we can provide them with a UI set that is
>> usable
>> > out of the box and match colors in their brands. They can choose how
>> their
>> > apps
>> > looks from the beginning. Right now they can since we are providing
>>basic
>> > theme, or MDL, that makes them be stuck in the MDL namespace and what
>> > things
>> > works in that external UI set.
>> >
>> >
>> > > That's why I want you to provide a concrete example or two of what
>>you
>> > > can't do with the current feature set.  And that doesn't mean by
>>using
>> > > MDL-style string substitutions or SASS-syntax.  In the end, you
>>want to
>> > > start with a set of CSS files and have the final CSS to look like
>> > > something.  Royale has a way of doing that.  Why does that way not
>>work
>> > > for you?
>> >
>> >
>> > the "partials" (for taking SASS naming) is working in royale, so we
>>have
>> > already one thing.
>> > That's ok, we need more on this, but we need now, or do you want I
>>cross
>> my
>> > arms and wait
>> > for this to be implemented? what should I do? I need to focus on
>>Sketch,
>> on
>> > prototyping, on design, on coding visuals
>> > that fills my time each day on Royale. I can't do much creating this
>> > features in royale compiler, since I read that code and don't know
>>what
>> to
>> > do
>> > even with your Kindly explanations what I thank you for providing me,
>> since
>> > is time you're investing for me.
>> >
>> >
>> > > Sure there might be better ways, like all of the CSS features
>> > > you listed below, but why do our themes need to use them?  Also
>> consider
>> > > that the more advanced CSS you use, the more work there will be to
>> create
>> > > a SWF equivalent.
>> > >
>> >
>> > The final css is the same you will make by hand, so if SVGs are not
>> > supported in SWF, this will no make a difference.
>> > If linear gradients are not supported as well, again is the
>>same...again
>> > think in the PSD/PNG paralellims with SASS/CSS,
>> > if SWF was not supporting PNG, the problem will not be that I author
>>it
>> > with Photoshop, is that we need Royale to make
>> > it happen (support PNG in SWF)
>> >
>> >
>> > >
>> > > I think it will help the community more to understand the trade-offs
>> and
>> > > avoid using the latest, coolest thing so we don't have to expend as
>> much
>> > > energy getting it to work for non-Maven users.
>> > >
>> > >
>> > We the things I'm doing, you don't need to wire SASS in ANT to see my
>> work.
>> > As I'm uploading generated defaults.css, you have the final css file,
>> > ant a ANT build will retrieve this as in the rest of projects.
>> >
>> > Hope this clarifies all this more and we could go to the real target
>>that
>> > is getting a better visuals in a UI set that I'm sure will
>> > provide us more engagement for people out there.
>> >
>> > Thanks
>> > Carlos
>> >
>> >
>> > > Thanks,
>> > > -Alex
>> >
>> >
>> >  [1] 
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcdnjs.co
>>m%2Flibraries%2Fmaterial-design-lite&data=02%7C01%7Caharui%40adobe.com%7C
>>b89b18e7a3b8444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7
>>C0%7C636561948219452668&sdata=vre2s3Z4HuE8j7v4UBLyovYjFoPJIy8gGbp2o5J3WW4
>>%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%7Cb89b18e7a3b8
>>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365619
>>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&reserv
>>ed=0
>> 
>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pat
>>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7Cb89b18e7a3b8
>>444b0ebf08d585b81ffe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365619
>>48219452668&sdata=m1gonUiYPMWgS8rwpZYA%2FpDPRMxCi9FzP3J0qNgKdZo%3D&reserv
>>ed=0>*
>>
>
>
>
>-- 
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Cb89b18e7a3b8444b0ebf08d5
>85b81ffe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636561948219452668&s
>data=0AWcm1ZIKLmbOLGrxAiaBo%2FO6XdSmHChaez4kyskBsA%3D&reserved=0

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

Hi Piotr,

2018-03-09 12:40 GMT+01:00 Piotr Zarzycki <pi...@gmail.com>:

> Carlos,
>
> I see following two things:
>
> 1) There is something in css which breaks build and you cannot uses,
> because compiler have some issue with it - yes?
>

sometimes is breaking the build, others not output what I write in css (for
example adding like "Unexpected value found" or something like that, don't
remember the exact wording)



> 2) You would like to add user possibility to change components easily -
> Your solution is SASS, because #1.
>
>
I want the user can use a theme with the colors he/she want to use
With SASS I can put the colors in a variables and the user can change it.
Or the next thing to look for are "palettes" that is something like MDL
does.
In this way user change colors or palettes and then use SASS to get final
CSS.
This process can be separate from the rest of royale, like the process to
make a PNG
since user can use the one we provide, or create another with Photoshop,
Sketch, Affinity...



> Am I understand in general correctly this thread ?
>
>
This thread should have priorities. As I see are:

1) Need to solve various problems with royale compiler processing of CSS
(gradients, alphas,...)

this is crucial since the rest of points depends on this.

2) How we can make users introduce a config via ANT or MAVEN to choose what
colors they want in final app

in this point I propose that user introduces properties for colors in ANT
or MAVEN and then the compiler retrieves that when process CSS to make
string substitution

3) What we can improve to make theme development more easier.

in this part is how near we can get to what SASS gives us, this can be of
less importance and since is more related at how the final CSS is created,
we can decide to separate from royale project (although, having this will
make our project to have even more sense, since as Om said, nobody has a
tool that makes what SASS does and even integrates with the code , in this
case AS3/MXML).

For point 3 I have SASS *separated* maven workflow, that doesn't need to be
part of the rest of royale libs and themes. I use this for convenience to
develop Jewel more easy and quick.

One final thought. We are a front end technology. Front-end relies heavily
in visuals. It seems in royale community, there's no much preoccupation in
this part. I think I'm alone with this since the rest of contributors are
more balanced towards framework code, compiler,...but not on UX (styles,
visuals, colors, animations...). I want to transmit here that all this is
very important since front end developers choose in part with his "eyes",
and then see other things. What I'm trying to contribute is fix the visual
part so people coming, can see "hey! this looks good!, lets see what's
behind..." and then we love the rest of the technology.
There's other kind of users that only needs an easy dev tool to make an
app, and they don't care if it looks good or not, while it works. My
thinking is that nowadays this kind of user are very few compared with the
other one.
I don't care to be the only one centered in visuals...it's ok for me, but I
want to remark the importance of this in the overall target we all pursue
and that I need some help in the parts where I can't reach (compiler
mainly, infrastructure,...)

Hope that clears this more

Carlos




> Thanks, Piotr
>
>
> 2018-03-09 12:28 GMT+01:00 Carlos Rovira <ca...@apache.org>:
>
> > Hi Alex,
> >
> > 2018-03-08 23:06 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
> >
> > > Hi Carlos,
> > >
> > > I don't doubt that SASS is powerful and useful, otherwise it wouldn't
> be
> > > popular.  What I am asking you to consider is that every decision you
> > make
> > > affects a lot of people and we only have a relatively small team.
> >
> >
> > Maybe you missed what I wrote at the beginning of this discussion. Use
> SASS
> > doesn't means anything for the rest of the project.
> > Let's compare with a PSD vs an img. Imagine I author a PSD to create a
> > button image background. Then I can put only the final PNG
> > in our framework to use it by a css and optionaly put the PSD I used to
> > author the final PNG in some source folder so people can use it.
> >
> > This is the same. SASS is the PSD and CSS is the PNG. The important thing
> > here's that I'm using SASS to be more productive,
> > and I'm producing a final "defaults.css". I can remove all SASS files and
> > configurations and work it on my own, but I think people would want it
> > In the other hand, people that don't want to use are not obligated, since
> > they can use the final "defaults.css" as its template to create his own
> > theme.
> > For me is just a matter of convenience since I can code the visuals in a
> > more organized way, just like I were coding AS3 vs JS. We use AS3 and not
> > CSS for the same reason people use SASS over CSS. It's more easy, can
> catch
> > errors, and you are more safe of what you're doing.
> >
> >
> >
> > >   So the
> > > first question I have is what is there about the current Royale feature
> > > set that makes it truly impossible or impractical to implement a
> > CSS-based
> > > theme and generate flavors of it with other CSS files?  If you push for
> > > SASS that means we have to impact all of our non-Maven users by asking
> > > them to integrate SASS somehow, or do more work on the compiler.  We
> > can't
> > > just make everybody use Maven and SASS.  That won't help us gain users
> > and
> > > successful migrators.
> > >
> >
> > I tell you in various emails this days. My problems are more in the post
> > processing of CSS by the royale compiler.
> > There's still sume rules that we don't allow, and that is limiting me
> since
> > I need to workaround.
> > I thought about solving it in the compiler, but after trying it, I
> continue
> > to be not able to solve it myself.
> >
> > In the next "step", the main problem is how to make colors configurable
> by
> > the final user.
> > The way other frameworks do is the following [1]. They have all
> > combinations of css colors in a final minified file.
> >
> > We can do this better by creating the palettes and creating the CSS on
> the
> > fly as people compile the Royale App.
> > The input will be 2-3 colors passed by ANT or Maven, the output for jewel
> > should be for example
> > "royale-jewel-${primary}-${secondary}-${accent}.min.css"
> > or if we create one with gradients then six vars ${primary1},
> ${primary2},
> > ${secondary1}, ${secondary2},...and so on
> >
> > But please, if we do this, it should not be planned as a few hacks here
> and
> > there. For me this should be part of something
> > like the targets rework you did some months ago. Where you need to
> > introduce it in all its complexity.
> >
> > This is the same, and what we get from this is a huge reward since we'll
> > have a great theme support that will people start to consider
> > Royale in real apps since we can provide them with a UI set that is
> usable
> > out of the box and match colors in their brands. They can choose how
> their
> > apps
> > looks from the beginning. Right now they can since we are providing basic
> > theme, or MDL, that makes them be stuck in the MDL namespace and what
> > things
> > works in that external UI set.
> >
> >
> > > That's why I want you to provide a concrete example or two of what you
> > > can't do with the current feature set.  And that doesn't mean by using
> > > MDL-style string substitutions or SASS-syntax.  In the end, you want to
> > > start with a set of CSS files and have the final CSS to look like
> > > something.  Royale has a way of doing that.  Why does that way not work
> > > for you?
> >
> >
> > the "partials" (for taking SASS naming) is working in royale, so we have
> > already one thing.
> > That's ok, we need more on this, but we need now, or do you want I cross
> my
> > arms and wait
> > for this to be implemented? what should I do? I need to focus on Sketch,
> on
> > prototyping, on design, on coding visuals
> > that fills my time each day on Royale. I can't do much creating this
> > features in royale compiler, since I read that code and don't know what
> to
> > do
> > even with your Kindly explanations what I thank you for providing me,
> since
> > is time you're investing for me.
> >
> >
> > > Sure there might be better ways, like all of the CSS features
> > > you listed below, but why do our themes need to use them?  Also
> consider
> > > that the more advanced CSS you use, the more work there will be to
> create
> > > a SWF equivalent.
> > >
> >
> > The final css is the same you will make by hand, so if SVGs are not
> > supported in SWF, this will no make a difference.
> > If linear gradients are not supported as well, again is the same...again
> > think in the PSD/PNG paralellims with SASS/CSS,
> > if SWF was not supporting PNG, the problem will not be that I author it
> > with Photoshop, is that we need Royale to make
> > it happen (support PNG in SWF)
> >
> >
> > >
> > > I think it will help the community more to understand the trade-offs
> and
> > > avoid using the latest, coolest thing so we don't have to expend as
> much
> > > energy getting it to work for non-Maven users.
> > >
> > >
> > We the things I'm doing, you don't need to wire SASS in ANT to see my
> work.
> > As I'm uploading generated defaults.css, you have the final css file,
> > ant a ANT build will retrieve this as in the rest of projects.
> >
> > Hope this clarifies all this more and we could go to the real target that
> > is getting a better visuals in a UI set that I'm sure will
> > provide us more engagement for people out there.
> >
> > Thanks
> > Carlos
> >
> >
> > > Thanks,
> > > -Alex
> >
> >
> >  [1] https://cdnjs.com/libraries/material-design-lite
> >
>
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>



-- 
Carlos Rovira
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[Piotr Zarzycki <pi...@gmail.com>]

Carlos,

I see following two things:

1) There is something in css which breaks build and you cannot uses,
because compiler have some issue with it - yes?
2) You would like to add user possibility to change components easily -
Your solution is SASS, because #1.

Am I understand in general correctly this thread ?

Thanks, Piotr


2018-03-09 12:28 GMT+01:00 Carlos Rovira <ca...@apache.org>:

> Hi Alex,
>
> 2018-03-08 23:06 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
>
> > Hi Carlos,
> >
> > I don't doubt that SASS is powerful and useful, otherwise it wouldn't be
> > popular.  What I am asking you to consider is that every decision you
> make
> > affects a lot of people and we only have a relatively small team.
>
>
> Maybe you missed what I wrote at the beginning of this discussion. Use SASS
> doesn't means anything for the rest of the project.
> Let's compare with a PSD vs an img. Imagine I author a PSD to create a
> button image background. Then I can put only the final PNG
> in our framework to use it by a css and optionaly put the PSD I used to
> author the final PNG in some source folder so people can use it.
>
> This is the same. SASS is the PSD and CSS is the PNG. The important thing
> here's that I'm using SASS to be more productive,
> and I'm producing a final "defaults.css". I can remove all SASS files and
> configurations and work it on my own, but I think people would want it
> In the other hand, people that don't want to use are not obligated, since
> they can use the final "defaults.css" as its template to create his own
> theme.
> For me is just a matter of convenience since I can code the visuals in a
> more organized way, just like I were coding AS3 vs JS. We use AS3 and not
> CSS for the same reason people use SASS over CSS. It's more easy, can catch
> errors, and you are more safe of what you're doing.
>
>
>
> >   So the
> > first question I have is what is there about the current Royale feature
> > set that makes it truly impossible or impractical to implement a
> CSS-based
> > theme and generate flavors of it with other CSS files?  If you push for
> > SASS that means we have to impact all of our non-Maven users by asking
> > them to integrate SASS somehow, or do more work on the compiler.  We
> can't
> > just make everybody use Maven and SASS.  That won't help us gain users
> and
> > successful migrators.
> >
>
> I tell you in various emails this days. My problems are more in the post
> processing of CSS by the royale compiler.
> There's still sume rules that we don't allow, and that is limiting me since
> I need to workaround.
> I thought about solving it in the compiler, but after trying it, I continue
> to be not able to solve it myself.
>
> In the next "step", the main problem is how to make colors configurable by
> the final user.
> The way other frameworks do is the following [1]. They have all
> combinations of css colors in a final minified file.
>
> We can do this better by creating the palettes and creating the CSS on the
> fly as people compile the Royale App.
> The input will be 2-3 colors passed by ANT or Maven, the output for jewel
> should be for example
> "royale-jewel-${primary}-${secondary}-${accent}.min.css"
> or if we create one with gradients then six vars ${primary1}, ${primary2},
> ${secondary1}, ${secondary2},...and so on
>
> But please, if we do this, it should not be planned as a few hacks here and
> there. For me this should be part of something
> like the targets rework you did some months ago. Where you need to
> introduce it in all its complexity.
>
> This is the same, and what we get from this is a huge reward since we'll
> have a great theme support that will people start to consider
> Royale in real apps since we can provide them with a UI set that is usable
> out of the box and match colors in their brands. They can choose how their
> apps
> looks from the beginning. Right now they can since we are providing basic
> theme, or MDL, that makes them be stuck in the MDL namespace and what
> things
> works in that external UI set.
>
>
> > That's why I want you to provide a concrete example or two of what you
> > can't do with the current feature set.  And that doesn't mean by using
> > MDL-style string substitutions or SASS-syntax.  In the end, you want to
> > start with a set of CSS files and have the final CSS to look like
> > something.  Royale has a way of doing that.  Why does that way not work
> > for you?
>
>
> the "partials" (for taking SASS naming) is working in royale, so we have
> already one thing.
> That's ok, we need more on this, but we need now, or do you want I cross my
> arms and wait
> for this to be implemented? what should I do? I need to focus on Sketch, on
> prototyping, on design, on coding visuals
> that fills my time each day on Royale. I can't do much creating this
> features in royale compiler, since I read that code and don't know what to
> do
> even with your Kindly explanations what I thank you for providing me, since
> is time you're investing for me.
>
>
> > Sure there might be better ways, like all of the CSS features
> > you listed below, but why do our themes need to use them?  Also consider
> > that the more advanced CSS you use, the more work there will be to create
> > a SWF equivalent.
> >
>
> The final css is the same you will make by hand, so if SVGs are not
> supported in SWF, this will no make a difference.
> If linear gradients are not supported as well, again is the same...again
> think in the PSD/PNG paralellims with SASS/CSS,
> if SWF was not supporting PNG, the problem will not be that I author it
> with Photoshop, is that we need Royale to make
> it happen (support PNG in SWF)
>
>
> >
> > I think it will help the community more to understand the trade-offs and
> > avoid using the latest, coolest thing so we don't have to expend as much
> > energy getting it to work for non-Maven users.
> >
> >
> We the things I'm doing, you don't need to wire SASS in ANT to see my work.
> As I'm uploading generated defaults.css, you have the final css file,
> ant a ANT build will retrieve this as in the rest of projects.
>
> Hope this clarifies all this more and we could go to the real target that
> is getting a better visuals in a UI set that I'm sure will
> provide us more engagement for people out there.
>
> Thanks
> Carlos
>
>
> > Thanks,
> > -Alex
>
>
>  [1] https://cdnjs.com/libraries/material-design-lite
>



-- 

Piotr Zarzycki

Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

Hi Alex,

2018-03-08 23:06 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:

> Hi Carlos,
>
> I don't doubt that SASS is powerful and useful, otherwise it wouldn't be
> popular.  What I am asking you to consider is that every decision you make
> affects a lot of people and we only have a relatively small team.


Maybe you missed what I wrote at the beginning of this discussion. Use SASS
doesn't means anything for the rest of the project.
Let's compare with a PSD vs an img. Imagine I author a PSD to create a
button image background. Then I can put only the final PNG
in our framework to use it by a css and optionaly put the PSD I used to
author the final PNG in some source folder so people can use it.

This is the same. SASS is the PSD and CSS is the PNG. The important thing
here's that I'm using SASS to be more productive,
and I'm producing a final "defaults.css". I can remove all SASS files and
configurations and work it on my own, but I think people would want it
In the other hand, people that don't want to use are not obligated, since
they can use the final "defaults.css" as its template to create his own
theme.
For me is just a matter of convenience since I can code the visuals in a
more organized way, just like I were coding AS3 vs JS. We use AS3 and not
CSS for the same reason people use SASS over CSS. It's more easy, can catch
errors, and you are more safe of what you're doing.



>   So the
> first question I have is what is there about the current Royale feature
> set that makes it truly impossible or impractical to implement a CSS-based
> theme and generate flavors of it with other CSS files?  If you push for
> SASS that means we have to impact all of our non-Maven users by asking
> them to integrate SASS somehow, or do more work on the compiler.  We can't
> just make everybody use Maven and SASS.  That won't help us gain users and
> successful migrators.
>

I tell you in various emails this days. My problems are more in the post
processing of CSS by the royale compiler.
There's still sume rules that we don't allow, and that is limiting me since
I need to workaround.
I thought about solving it in the compiler, but after trying it, I continue
to be not able to solve it myself.

In the next "step", the main problem is how to make colors configurable by
the final user.
The way other frameworks do is the following [1]. They have all
combinations of css colors in a final minified file.

We can do this better by creating the palettes and creating the CSS on the
fly as people compile the Royale App.
The input will be 2-3 colors passed by ANT or Maven, the output for jewel
should be for example
"royale-jewel-${primary}-${secondary}-${accent}.min.css"
or if we create one with gradients then six vars ${primary1}, ${primary2},
${secondary1}, ${secondary2},...and so on

But please, if we do this, it should not be planned as a few hacks here and
there. For me this should be part of something
like the targets rework you did some months ago. Where you need to
introduce it in all its complexity.

This is the same, and what we get from this is a huge reward since we'll
have a great theme support that will people start to consider
Royale in real apps since we can provide them with a UI set that is usable
out of the box and match colors in their brands. They can choose how their
apps
looks from the beginning. Right now they can since we are providing basic
theme, or MDL, that makes them be stuck in the MDL namespace and what things
works in that external UI set.


> That's why I want you to provide a concrete example or two of what you
> can't do with the current feature set.  And that doesn't mean by using
> MDL-style string substitutions or SASS-syntax.  In the end, you want to
> start with a set of CSS files and have the final CSS to look like
> something.  Royale has a way of doing that.  Why does that way not work
> for you?


the "partials" (for taking SASS naming) is working in royale, so we have
already one thing.
That's ok, we need more on this, but we need now, or do you want I cross my
arms and wait
for this to be implemented? what should I do? I need to focus on Sketch, on
prototyping, on design, on coding visuals
that fills my time each day on Royale. I can't do much creating this
features in royale compiler, since I read that code and don't know what to
do
even with your Kindly explanations what I thank you for providing me, since
is time you're investing for me.


> Sure there might be better ways, like all of the CSS features
> you listed below, but why do our themes need to use them?  Also consider
> that the more advanced CSS you use, the more work there will be to create
> a SWF equivalent.
>

The final css is the same you will make by hand, so if SVGs are not
supported in SWF, this will no make a difference.
If linear gradients are not supported as well, again is the same...again
think in the PSD/PNG paralellims with SASS/CSS,
if SWF was not supporting PNG, the problem will not be that I author it
with Photoshop, is that we need Royale to make
it happen (support PNG in SWF)


>
> I think it will help the community more to understand the trade-offs and
> avoid using the latest, coolest thing so we don't have to expend as much
> energy getting it to work for non-Maven users.
>
>
We the things I'm doing, you don't need to wire SASS in ANT to see my work.
As I'm uploading generated defaults.css, you have the final css file,
ant a ANT build will retrieve this as in the rest of projects.

Hope this clarifies all this more and we could go to the real target that
is getting a better visuals in a UI set that I'm sure will
provide us more engagement for people out there.

Thanks
Carlos


> Thanks,
> -Alex


 [1] https://cdnjs.com/libraries/material-design-lite

Re: How can we pass colors to a CSS?

[Alex Harui <ah...@adobe.com.INVALID>]

Hi Carlos,

I don't doubt that SASS is powerful and useful, otherwise it wouldn't be
popular.  What I am asking you to consider is that every decision you make
affects a lot of people and we only have a relatively small team.  So the
first question I have is what is there about the current Royale feature
set that makes it truly impossible or impractical to implement a CSS-based
theme and generate flavors of it with other CSS files?  If you push for
SASS that means we have to impact all of our non-Maven users by asking
them to integrate SASS somehow, or do more work on the compiler.  We can't
just make everybody use Maven and SASS.  That won't help us gain users and
successful migrators.

That's why I want you to provide a concrete example or two of what you
can't do with the current feature set.  And that doesn't mean by using
MDL-style string substitutions or SASS-syntax.  In the end, you want to
start with a set of CSS files and have the final CSS to look like
something.  Royale has a way of doing that.  Why does that way not work
for you?  Sure there might be better ways, like all of the CSS features
you listed below, but why do our themes need to use them?  Also consider
that the more advanced CSS you use, the more work there will be to create
a SWF equivalent.

I think it will help the community more to understand the trade-offs and
avoid using the latest, coolest thing so we don't have to expend as much
energy getting it to work for non-Maven users.

Thanks,
-Alex

On 3/8/18, 1:21 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:

>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://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsass-lang
>.com%2Fguide&data=02%7C01%7Caharui%40adobe.com%7C50afb928a22c46af34a008d58
>53a9f00%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636561409277491255&sd
>ata=q1FV4cBu9hppoy5Jho75sJJzc62mt42l8L9O0khi%2BvQ%3D&reserved=0
>
>
>2018-03-08 19:45 GMT+01:00 Alex Harui <ah...@adobe.com.invalid>:
>
>> 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.rovira@gmail.com on behalf of Carlos
>>Rovira"
>> <carlos.rovira@gmail.com on behalf of carlosrovira@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 <ah...@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.rovira@gmail.com on behalf of Carlos
>> Rovira"
>> >> <carlos.rovira@gmail.com on behalf of carlosrovira@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
>><bi...@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" <ca...@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
>> >><bigosmallm@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" <ha...@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 <ha...@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 <
>> >> >> piotrzarzycki21@gmail.com
>> >> >> > > <ma...@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 <
>> >> carlosrovira@apache.org
>> >> >> > > <ma...@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
>> >><aharui@adobe.com.invalid
>> >> >> > > <mailto:
>> >> >> > > aharui@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.rovira@gmail.com <mailto:
>> >> >> > > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
>> >> >> > > >>>> <carlos.rovira@gmail.com <ma...@gmail.com>
>> on
>> >> >> behalf
>> >> >> > > of
>> >> >> > > carlosrovira@apache.org <ma...@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
>> >><aharui@adobe.com.invalid
>> >> >> > > <ma...@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.rovira@gmail.com <mailto:
>> >> >> > > carlos.rovira@gmail.com> on behalf of Carlos
>> >> >> > > >>>>>> Rovira"
>> >> >> > > >>>>>> <carlos.rovira@gmail.com
>><ma...@gmail.com>
>> >>on
>> >> >> > behalf
>> >> >> > > of carlosrovira@apache.org <ma...@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 <
>> >> >> > > bigosmallm@gmail.com
>> >> >> > > <ma...@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
>> >> >> > > >>>>>> <carlosrovira@apache.org 
>><mailto:carlosrovira@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
>>
>>
>
>
>-- 
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C50afb928a22c46af34a008d5
>853a9f00%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636561409277491255&s
>data=1v1ZmS2896d099RxQOCO5ei3xs6SL380Dl0i7zBksWM%3D&reserved=0

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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 <ah...@adobe.com.invalid>:

> 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.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@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 <ah...@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.rovira@gmail.com on behalf of Carlos
> Rovira"
> >> <carlos.rovira@gmail.com on behalf of carlosrovira@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 <bi...@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" <ca...@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
> >><bigosmallm@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" <ha...@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 <ha...@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 <
> >> >> piotrzarzycki21@gmail.com
> >> >> > > <ma...@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 <
> >> carlosrovira@apache.org
> >> >> > > <ma...@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
> >><aharui@adobe.com.invalid
> >> >> > > <mailto:
> >> >> > > aharui@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.rovira@gmail.com <mailto:
> >> >> > > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
> >> >> > > >>>> <carlos.rovira@gmail.com <ma...@gmail.com>
> on
> >> >> behalf
> >> >> > > of
> >> >> > > carlosrovira@apache.org <ma...@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
> >><aharui@adobe.com.invalid
> >> >> > > <ma...@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.rovira@gmail.com <mailto:
> >> >> > > carlos.rovira@gmail.com> on behalf of Carlos
> >> >> > > >>>>>> Rovira"
> >> >> > > >>>>>> <carlos.rovira@gmail.com <ma...@gmail.com>
> >>on
> >> >> > behalf
> >> >> > > of carlosrovira@apache.org <ma...@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 <
> >> >> > > bigosmallm@gmail.com
> >> >> > > <ma...@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
> >> >> > > >>>>>> <carlosrovira@apache.org <mailto:carlosrovira@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
>
>


-- 
Carlos Rovira
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[Alex Harui <ah...@adobe.com.INVALID>]

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.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@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 <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
>> <carlos.rovira@gmail.com on behalf of carlosrovira@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 <bi...@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" <ca...@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
>><bigosmallm@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" <ha...@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 <ha...@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 <
>> >> piotrzarzycki21@gmail.com
>> >> > > <ma...@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 <
>> carlosrovira@apache.org
>> >> > > <ma...@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
>><aharui@adobe.com.invalid
>> >> > > <mailto:
>> >> > > aharui@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.rovira@gmail.com <mailto:
>> >> > > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
>> >> > > >>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
>> >> behalf
>> >> > > of
>> >> > > carlosrovira@apache.org <ma...@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
>><aharui@adobe.com.invalid
>> >> > > <ma...@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.rovira@gmail.com <mailto:
>> >> > > carlos.rovira@gmail.com> on behalf of Carlos
>> >> > > >>>>>> Rovira"
>> >> > > >>>>>> <carlos.rovira@gmail.com <ma...@gmail.com>
>>on
>> >> > behalf
>> >> > > of carlosrovira@apache.org <ma...@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 <
>> >> > > bigosmallm@gmail.com
>> >> > > <ma...@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
>> >> > > >>>>>> <carlosrovira@apache.org <ma...@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

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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 <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@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 <bi...@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.slant
> .
> >>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" <ca...@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 <bigosmallm@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" <ha...@gmail.com> wrote:
> >> > >
> >> > > I wonder if this might be useful for IE…
> >> > >
> >>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcodepen
> .
> >>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 <ha...@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 <
> >> piotrzarzycki21@gmail.com
> >> > > <ma...@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 <
> carlosrovira@apache.org
> >> > > <ma...@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 <aharui@adobe.com.invalid
> >> > > <mailto:
> >> > > aharui@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.rovira@gmail.com <mailto:
> >> > > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
> >> > > >>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
> >> behalf
> >> > > of
> >> > > carlosrovira@apache.org <ma...@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%2F40adobe
> .
> >>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 <aharui@adobe.com.invalid
> >> > > <ma...@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.rovira@gmail.com <mailto:
> >> > > carlos.rovira@gmail.com> on behalf of Carlos
> >> > > >>>>>> Rovira"
> >> > > >>>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
> >> > behalf
> >> > > of carlosrovira@apache.org <ma...@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 <
> >> > > bigosmallm@gmail.com
> >> > > <ma...@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
> >> > > >>>>>> <carlosrovira@apache.org <ma...@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%2F2fabout
> .
> >>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%2F2fabout
> .
> >>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%2F2fabout
> .
> >>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
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[Alex Harui <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@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 <bi...@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.slant.
>>co%2Foptions%2F764%2Falternatives%2F~sass-alternatives&data=02%7C01%7Caha
>>rui%40adobe.com%7C08797862fcf34d95ddd608d58514a1a5%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" <ca...@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 <bi...@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" <ha...@gmail.com> wrote:
>> > >
>> > > I wonder if this might be useful for IE…
>> > > 
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcodepen.
>>io%2Faaronbarker%2Fpen%2FMeaRmL&data=02%7C01%7Caharui%40adobe.com%7C08797
>>862fcf34d95ddd608d58514a1a5%7Cfa7b1b5a7b34438794aed2c178decee1%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%7C08797862fcf34d95ddd608d58514a1
>>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 <ha...@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%7C08797862fcf34d95ddd608d58514a1a5%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%7C08797862fcf34d95ddd608d58514a1a5%7Cfa7b1b5a7b34
>>438794aed2c178decee1%7C0%7C0%7C636561246011379425&sdata=O8Wq%2FozFJ26mQdl
>>22eRogUHEz8dV3joGzEaW4dOo4pM%3D&reserved=0>
>> > > >
>> > > >> On Mar 8, 2018, at 1:29 PM, Piotr Zarzycki <
>> piotrzarzycki21@gmail.com
>> > > <ma...@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 <carlosrovira@apache.org
>> > > <ma...@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 <aharui@adobe.com.invalid
>> > > <mailto:
>> > > aharui@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.rovira@gmail.com <mailto:
>> > > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
>> > > >>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
>> behalf
>> > > of
>> > > carlosrovira@apache.org <ma...@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%2F40adobe.
>>com%2F&data=02%7C01%7Caharui%40adobe.com%7C08797862fcf34d95ddd608d58514a1
>>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 <aharui@adobe.com.invalid
>> > > <ma...@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.rovira@gmail.com <mailto:
>> > > carlos.rovira@gmail.com> on behalf of Carlos
>> > > >>>>>> Rovira"
>> > > >>>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
>> > behalf
>> > > of carlosrovira@apache.org <ma...@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%7C08797862fcf34d95ddd608d58514a1
>>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%7C08797862fcf34d95ddd608d58514a1a
>>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 <
>> > > bigosmallm@gmail.com
>> > > <ma...@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
>> > > >>>>>> <carlosrovira@apache.org <ma...@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%2F2fabout.
>>me%2F&data=02%7C01%7Caharui%40adobe.com%7C08797862fcf34d95ddd608d58514a1a
>>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%7C08797862fcf34d95ddd608d58514a1a
>>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%2F2fabout.
>>me%2F&data=02%7C01%7Caharui%40adobe.com%7C08797862fcf34d95ddd608d58514a1a
>>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%7C08797862fcf34d95ddd608d58514a1a
>>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%2F2fabout.
>>me%2F&data=02%7C01%7Caharui%40adobe.com%7C08797862fcf34d95ddd608d58514a1a
>>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%7C08797862fcf34d95ddd608d58514a1a
>>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%7Cfa7b1b5a7b34438794aed2c178decee1%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%7Cfa7b1b5a7b34438794aed2c178decee1%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

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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 <bi...@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://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" <ca...@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 <bi...@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" <ha...@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 <ha...@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 <
> piotrzarzycki21@gmail.com
> > > <ma...@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 <carlosrovira@apache.org
> > > <ma...@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 <aharui@adobe.com.invalid
> > > <mailto:
> > > aharui@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.rovira@gmail.com <mailto:
> > > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
> > > >>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
> behalf
> > > of
> > > carlosrovira@apache.org <ma...@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 <aharui@adobe.com.invalid
> > > <ma...@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.rovira@gmail.com <mailto:
> > > carlos.rovira@gmail.com> on behalf of Carlos
> > > >>>>>> Rovira"
> > > >>>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
> > behalf
> > > of carlosrovira@apache.org <ma...@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 <
> > > bigosmallm@gmail.com
> > > <ma...@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
> > > >>>>>> <carlosrovira@apache.org <ma...@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
> >
>



-- 
Carlos Rovira
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[OmPrakash Muppirala <bi...@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://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" <ca...@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 <bi...@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" <ha...@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 <ha...@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 <piotrzarzycki21@gmail.com
> > <ma...@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 <carlosrovira@apache.org
> > <ma...@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 <aharui@adobe.com.invalid
> > <mailto:
> > aharui@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.rovira@gmail.com <mailto:
> > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
> > >>>> <carlos.rovira@gmail.com <ma...@gmail.com> on behalf
> > of
> > carlosrovira@apache.org <ma...@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 <aharui@adobe.com.invalid
> > <ma...@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.rovira@gmail.com <mailto:
> > carlos.rovira@gmail.com> on behalf of Carlos
> > >>>>>> Rovira"
> > >>>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on
> behalf
> > of carlosrovira@apache.org <ma...@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 <
> > bigosmallm@gmail.com
> > <ma...@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
> > >>>>>> <carlosrovira@apache.org <ma...@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
>

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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 <bi...@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" <ha...@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 <ha...@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 <piotrzarzycki21@gmail.com
> <ma...@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 <carlosrovira@apache.org
> <ma...@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 <aharui@adobe.com.invalid
> <mailto:
> aharui@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.rovira@gmail.com <mailto:
> carlos.rovira@gmail.com> on behalf of Carlos Rovira"
> >>>> <carlos.rovira@gmail.com <ma...@gmail.com> on behalf
> of
> carlosrovira@apache.org <ma...@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 <aharui@adobe.com.invalid
> <ma...@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.rovira@gmail.com <mailto:
> carlos.rovira@gmail.com> on behalf of Carlos
> >>>>>> Rovira"
> >>>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on behalf
> of carlosrovira@apache.org <ma...@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 <
> bigosmallm@gmail.com
> <ma...@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
> >>>>>> <carlosrovira@apache.org <ma...@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=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/
> >%
> >>>>>> 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

Re: How can we pass colors to a CSS?

[OmPrakash Muppirala <bi...@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" <ha...@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 <ha...@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 <piotrzarzycki21@gmail.com
<ma...@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 <carlosrovira@apache.org
<ma...@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 <aharui@adobe.com.invalid <mailto:
aharui@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.rovira@gmail.com <mailto:
carlos.rovira@gmail.com> on behalf of Carlos Rovira"
>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on behalf of
carlosrovira@apache.org <ma...@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 <aharui@adobe.com.invalid
<ma...@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.rovira@gmail.com <mailto:
carlos.rovira@gmail.com> on behalf of Carlos
>>>>>> Rovira"
>>>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on behalf
of carlosrovira@apache.org <ma...@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 <bigosmallm@gmail.com
<ma...@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
>>>>>> <carlosrovira@apache.org <ma...@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=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/
>%
>>>>>> 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>>*
>

Re: How can we pass colors to a CSS?

[Harbs <ha...@gmail.com>]

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 <ha...@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 <piotrzarzycki21@gmail.com <ma...@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 <carlosrovira@apache.org <ma...@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 <aharui@adobe.com.invalid <ma...@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.rovira@gmail.com <ma...@gmail.com> on behalf of Carlos Rovira"
>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on behalf of carlosrovira@apache.org <ma...@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 <aharui@adobe.com.invalid <ma...@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.rovira@gmail.com <ma...@gmail.com> on behalf of Carlos
>>>>>> Rovira"
>>>>>> <carlos.rovira@gmail.com <ma...@gmail.com> on behalf of carlosrovira@apache.org <ma...@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 <bigosmallm@gmail.com <ma...@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
>>>>>> <carlosrovira@apache.org <ma...@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=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/>%
>>>>>> 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>>*
> 

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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 <ha...@gmail.com>:

> 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 <pi...@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 <ca...@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 <ah...@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.rovira@gmail.com on behalf of Carlos
> Rovira"
> >>> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <ah...@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.rovira@gmail.com on behalf of Carlos
> >>>>> Rovira"
> >>>>> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <bigosmallm@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
> >>>>> <ca...@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=
> >>>>> 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

Re: How can we pass colors to a CSS?

[Harbs <ha...@gmail.com>]

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 <pi...@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 <ca...@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 <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
>>> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <ah...@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.rovira@gmail.com on behalf of Carlos
>>>>> Rovira"
>>>>> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <bigosmallm@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
>>>>> <ca...@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=
>>>>> 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>*

Re: How can we pass colors to a CSS?

[Piotr Zarzycki <pi...@gmail.com>]

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 <ca...@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 <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
> > <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <ah...@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.rovira@gmail.com on behalf of Carlos
> > >>Rovira"
> > >> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <bigosmallm@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
> > >><ca...@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=
> > >> 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>*

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@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 <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <ah...@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.rovira@gmail.com on behalf of Carlos
> >>Rovira"
> >> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <bi...@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
> >><ca...@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=
> >> 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

Re: How can we pass colors to a CSS?

[Alex Harui <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@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%3A%2F%2Fwww.geodi
>enstencentrum.nl%2Fsass-maven-plugin%2Fplugin-info.html&data=02%7C01%7Caha
>rui%40adobe.com%7Cbec10bf2ecb144cf5ddf08d584d54627%7Cfa7b1b5a7b34438794aed
>2c178decee1%7C0%7C0%7C636560973893496699&sdata=3FoDbj2YbEJpJnKG8%2FLpqathy
>k1ACgHcBhgVaHufHTY%3D&reserved=0
>
>
>
>2018-03-08 9:45 GMT+01:00 Alex Harui <ah...@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.rovira@gmail.com on behalf of Carlos
>>Rovira"
>> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <bi...@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
>><ca...@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=
>> 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

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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://www.geodienstencentrum.nl/sass-maven-plugin/plugin-info.html



2018-03-08 9:45 GMT+01:00 Alex Harui <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@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%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 <bi...@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 <ca...@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=
> 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
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[Alex Harui <ah...@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.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@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%3A%2F%2Fgetmdl.io
>%2Fcustomize%2Findex.html&data=02%7C01%7Caharui%40adobe.com%7C7ee10b52100d
>4931824e08d584c450aa%7Cfa7b1b5a7b34438794aed2c178decee1%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 <bi...@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 <ca...@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=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

Re: How can we pass colors to a CSS?

[Carlos Rovira <ca...@apache.org>]

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://getmdl.io/customize/index.html

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 <bi...@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 <ca...@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
> > http://about.me/carlosrovira
> >
>



-- 
Carlos Rovira
http://about.me/carlosrovira

Re: How can we pass colors to a CSS?

[OmPrakash Muppirala <bi...@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 <ca...@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
> http://about.me/carlosrovira
>

Re: How can we pass colors to a CSS?

[Alex Harui <ah...@adobe.com.INVALID>]

Not sure I understand the question.  What are you trying to achieve?

-Alex

On 3/7/18, 3:18 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@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=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Ce72009d0852248622e6808d5
>8481c49e%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636560615251936510&s
>data=tPCMXnPKG7aqNjYcVULLK4gD5IyrgW0xcsAjHZYzzDI%3D&reserved=0