Let us not introduce Sass into the Royale toolchain. We need to be css
preprocessor agnostic.
The short term solution could be that we inject properties into the app and
a theme class simply does a setAttribute("style",
"color=injectedColorValue") based on that.
Also, CSS variables are scoped only at the css file level. I am not sure
if that would be useful here.
Thanks,
Om
On Mar 8, 2018 5:22 AM, "Harbs" <[email protected]> wrote:
I wonder if this might be useful for IE…
https://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>>*
>
