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 <[email protected]> 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 <[email protected] >> <mailto:[email protected]>> wrote: >> >> Hi, >> >> Why can it be simpler by creating bunch of default css classes, which >> stores colors which you need ? Why complicating it by asking user to inject >> something through the compiler options ? >> >> >> >> 2018-03-08 12:12 GMT+01:00 Carlos Rovira <[email protected] >> <mailto:[email protected]>>: >> >>> Hi Alex, >>> >>> at this moment, I only need to get 2-3 colors in final CSS file. But next I >>> think we should have a similar theme but with gradientes, that will mean >>> 4-6 colors. >>> But as I go with this maybe I could need something more, but right now >>> don't know what could be. >>> >>> As you say, the counterpart of introducing a CSS processor like SASS, is >>> that we introduce a new piece in the chain and that means wire it for maven >>> and ant. >>> Maybe this can be easy to do. >>> >>> In order to keep our efforts controlled, I propose you the folllowing: I >>> can check SASS implications and maybe see in MDL what other things can be >>> done. If I finaly see we only need to pass colors, we can try to make the >>> string substitution via compiler, if not we should look to introduce SASS. >>> Maybe if SASS is not to hard to introduce, we should directly go with it. >>> >>> what do you think? >>> >>> >>> >>> >>> >>> 2018-03-08 10:36 GMT+01:00 Alex Harui <[email protected] >>> <mailto:[email protected]>>: >>> >>>> Hi Carlos, >>>> >>>> That's fine if you want to work on a CSS theme. Your reasoning make >>> sense. >>>> >>>> Yes, Maven allows substitutions, but as you said there is Ant, but also >>>> command-line and IDEs. They all need a way to do whatever you want. >>>> >>>> Let's work from a real example: What is a selector that you want to have >>>> changed, and how would you want to change it via command-line compiler >>>> options? >>>> >>>> If you have: >>>> >>>> Button { >>>> color: COLOR::primary; >>>> } >>>> >>>> And want to specify >>>> >>>> -compiler.define=COLOR::primary,red >>>> >>>> We could probably convince the compiler to handle that. Right now, in >>> the >>>> emulation components we are using: >>>> >>>> if (GOOG::DEBUG) >>>> >>>> And for SWF compile we set >>>> >>>> -compiler.define=GOOG::DEBUG,true >>>> >>>> Which causes the compiler to generate an AST for >>>> >>>> if (true) >>>> >>>> And for JS compile we set: >>>> >>>> -compiler.define=GOOG::DEBUG,goog.DEBUG >>>> >>>> Which causes the compiler to output: >>>> >>>> if (goog.DEBUG) >>>> >>>> So we have a limited form of string substitutions in AS already and can >>>> probably do something like that in CSS. Is that what you are looking >>> for? >>>> >>>> But the thing is, if you use themes and in the main theme you have: >>>> >>>> Button { >>>> color: white; >>>> Font-size: 10px; >>>> } >>>> >>>> And in a theme SWC you have: >>>> >>>> Button { >>>> color: red; >>>> } >>>> >>>> I'm pretty sure we can make the output exactly the same: one selector >>>> that looks like: >>>> >>>> Button { >>>> color: red; >>>> Font-size: 10px; >>>> } >>>> >>>> I think themes may already work that way, and if not, we could probably >>>> make it work that way and it wouldn't have any extra overhead over string >>>> substitution. >>>> >>>> Of course, I could be wrong... >>>> -Alex >>>> >>>> >>>> On 3/8/18, 1:15 AM, "[email protected] >>>> <mailto:[email protected]> on behalf of Carlos Rovira" >>>> <[email protected] <mailto:[email protected]> on behalf of >>>> [email protected] <mailto:[email protected]>> wrote: >>>> >>>>> Hi Alex, >>>>> >>>>> I started the theme as "VividBlue", but was something to get started, >>> as I >>>>> read and look how others are doing, I see that main colors should be >>>>> configurable on the same theme, for that reason the theme refactor name >>> is >>>>> simply "JewelTheme". >>>>> >>>>> In the other hand, I'm a bit blocked trying to make many complex visual >>>>> things at a time, this due to various reasons: >>>>> >>>>> * for advanced things browsers has limitations here and there >>>>> * we have some problems in CSS as we are discussing in other threads, >>> and >>>>> although we are discussing it, I feel that each day I put time on this >>> to >>>>> work, I can't solve this issues >>>>> * SVGs are cool but requieres more love than I thought >>>>> >>>>> for this reason, yesterday I continued my work with different thoughts >>> in >>>>> mind: >>>>> >>>>> * I want to have something good looking as fast as possible, and for me >>> is >>>>> important to get it with some infrastructure well done (css per control, >>>>> organization, component html structure,..) >>>>> * for that reason I'm going back to CSS3 mainly, in the end I think we >>>>> need >>>>> a pure CSS theme as well >>>>> * my plan is to get this theme be customizable with colors (this is what >>>>> we're discussing here) >>>>> * as I get things done in this theme, I can start another theme that can >>>>> use linear gradients instead of plain colors >>>>> * then I can make another one with SVG mainly >>>>> * I think this plan will make us have things more soon that try to fight >>>>> at >>>>> the same time with SVG, royale compiler, and more, as I have little time >>>>> each day to invest in this project I need to see things done to keep me >>>>> motivated and pursuing this efftort. >>>>> >>>>> So coming back at your proposal, don't know id CSS property overriding >>> is >>>>> working (I can test it), but as a path to follow it seems to me a bit >>>>> weird. It could be great if we have the basics working and then a user >>>>> wants to make something like that (to put another theme in place), but I >>>>> don't think we should promote this as a great way to do things since >>> we'll >>>>> adding code to the mix and more bytes to download, while others only use >>>>> one compact css. I'll look into it as something like a "hack" that a >>> user >>>>> could be doing at sometime, but not as the basis of a royale official >>>>> theme >>>>> in the framework >>>>> >>>>> I'm looking at SASS and I see there's a maven plugin [1]. What do you >>>>> think >>>>> if I do a try to see what we get? The only thing is that ANT build file >>>>> should be fixed for others. >>>>> >>>>> In the end, I want to do something like we did in MDL, with some vars in >>>>> pom.xml like this: >>>>> >>>>> <properties> >>>>> <!-- Customize Jewel colors --> >>>>> <primary>red</primary> >>>>> <secondary>grey</secondary> >>>>> </properties> >>>>> >>>>> And that will be pass to the HTML template to the line where the CSS is >>>>> loaded >>>>> >>>>> let me know what do you think >>>>> >>>>> Thanks >>>>> >>>>> [1] >>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>> <https://na01.safelinks.protection.outlook.com/?url=> >>>> https%3A%2F%2Fwww.geodi >>>>> enstencentrum.nl >>>>> <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 <[email protected] >>>>> <mailto:[email protected]>>: >>>>> >>>>>> I think I may be missing something, because, IMO, the Royale way is to >>>>>> use >>>>>> Themes. Weren't you working on a VividBlue theme? >>>>>> >>>>>> I suppose Themes might be a bit heavier than true string/variable >>>>>> substitution, but I think there is property overriding in the >>> compiler. >>>>>> I'm not sure order of theme SWCs is preserved and used, but maybe we >>> can >>>>>> implement that if that's what is needed. >>>>>> >>>>>> I think if JewelTheme.swc specifies: >>>>>> >>>>>> Button { >>>>>> background-color: white; >>>>>> } >>>>>> >>>>>> And JewelBlueTheme.swc specifies >>>>>> >>>>>> Button { >>>>>> background-color: blue; >>>>>> } >>>>>> >>>>>> That both will be output in the CSS in that order and blue will win. >>> It >>>>>> might be that the compiler already can tell that there is a later >>> Button >>>>>> selector with background-color and can choose not to output the >>>>>> "background-color: white". If that doesn't exist already, we can >>>>>> probably >>>>>> make it happen. >>>>>> >>>>>> I think on the command line, you would specify -theme=JewelTheme.swc >>> and >>>>>> -theme=JewelBlueTheme.swc. >>>>>> >>>>>> String substitution is possible. I'm about to push code that allows >>>>>> simple member access expressions as compiler defines so there is >>>>>> already a >>>>>> form of substitution in the AS compiler. >>>>>> >>>>>> HTH, >>>>>> -Alex >>>>>> >>>>>> >>>>>> On 3/7/18, 11:14 PM, "[email protected] >>>>>> <mailto:[email protected]> on behalf of Carlos >>>>>> Rovira" >>>>>> <[email protected] <mailto:[email protected]> on behalf of >>>>>> [email protected] <mailto:[email protected]>> wrote: >>>>>> >>>>>>> Hi Alex, Om, >>>>>>> >>>>>>> I'm referring to what Om's describe. In MDL and the rest of >>> frameworks >>>>>> we >>>>>>> pass for example "primary" and "accent" color. In this way the final >>>>>> CSS >>>>>>> gets the colors in all rules they need to use hardcoded. Please check >>>>>> the >>>>>>> following link: >>>>>>> >>>>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>>>> <https://na01.safelinks.protection.outlook.com/?url=> >>>>>> https%3A%2F%2Fgetmdl.io <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 <[email protected] >>>>>>> <mailto:[email protected]> >>>> : >>>>>>> >>>>>>>> Carlos, >>>>>>>> >>>>>>>> In SASS, there are variables, but you cannot pass variables into it >>>>>> from >>>>>>>> the app. The variables in SASS are compiled down to CSS as >>> hardcoded >>>>>>>> values, that's it. >>>>>>>> >>>>>>>> Usually, multiple class values are created and we set the class >>>>>>>> property on >>>>>>>> an element using a string evaluation. >>>>>>>> >>>>>>>> For example: >>>>>>>> >>>>>>>> var colorName = this.hasWarning() ? "Red" : "Blue"; >>>>>>>> var className:String = "button" + colorName + "Class"; >>>>>>>> >>>>>>>> element.setAttribute("class", className); >>>>>>>> >>>>>>>> In the css: >>>>>>>> >>>>>>>> .buttonRedClass { >>>>>>>> color: darkred; >>>>>>>> } >>>>>>>> >>>>>>>> .buttonBlueClass { >>>>>>>> color: lightskyblue; >>>>>>>> } >>>>>>>> >>>>>>>> This is one way of doing things. >>>>>>>> >>>>>>>> The other way is to directly set the .style property of the element >>>>>> and >>>>>>>> apply the color there. Not very elegant, but should work. >>>>>>>> >>>>>>>> Hope that helps. >>>>>>>> >>>>>>>> Thanks, >>>>>>>> Om >>>>>>>> >>>>>>>> On Wed, Mar 7, 2018 at 3:18 PM, Carlos Rovira >>>>>> <[email protected] <mailto:[email protected]>> >>>>>>>> wrote: >>>>>>>> >>>>>>>>> Hi, >>>>>>>>> >>>>>>>>> I'd need to pass two or three colors to a CSS (i.e: primary, >>>>>> secondary >>>>>>>> and >>>>>>>>> accent) >>>>>>>>> in other frameworks people use things like SASS >>>>>>>>> Maybe in Royale we could get it in our own way >>>>>>>>> >>>>>>>>> any suggestion so that I could test? >>>>>>>>> >>>>>>>>> thanks! >>>>>>>>> >>>>>>>>> -- >>>>>>>>> Carlos Rovira >>>>>>>>> >>>>>>>> https://na01.safelinks.protection.outlook.com/?url= >>>>>>>> <https://na01.safelinks.protection.outlook.com/?url=> >>>>>> http%3A%2F%2Fabout.me <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>>* >
