You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2018/03/25 22:38:59 UTC
[Jewel] Work In progress screenshots
Hi!
I was working hard this days and I think is time to share a screen shot
about Jewel actual state.
I've plan to support 12 colors. The following is the color wheel
https://snag.gy/u8Rrzv.jpg
The names of normal colors are as expected: red, blue, green,....
But for intermediate colors, instead a composed name like yellow-green, I
prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
Topaz or Sapphire. All this continues the "Jewel" concept of the jewels or
gems embedded in the royal crown ;)
A side from this colors that will be the contrast color (primary,
secondary, emphasized)
We will have a normal-light theme:
https://snag.gy/x3Pnmu.jpg (remember that's still unfinished)
but you can have it flat :
https://snag.gy/1WQ48U.jpg. (same here...)
or instead of light, it can be dark
https://snag.gy/EPSlZ1.jpg. (still needs more work in the dark colors)
and flat-dark
https://snag.gy/hBjzrS.jpg (this is maybe what needs more work of all)
All this combined with the 12 wheel colors ;)
Structure: I'm creating all of this with SASS vars in only one theme, what
makes it extremely convenient to work, since with only one color, I can
program the rest using color functions in SASS
For example:
border: 1px solid darken($button-color, 15%)
background: linear-gradient(lighten($button-color, 5%), darken(
$button-color, 5%))
box-shadow: inset 0 1px 0 lighten($button-color, 20%)
for flat/normal or light/dark is the same, I only need to switch two vars:
$flat: false
$dark: false
and compile the new final CSS
For final use:
With all this more settled, I'll try to separate primary and secondary
rules from the rest, so you can apply
* JewelLightFlatTheme + JewelPrimaryEmeralTheme + JewelSecondaryBlueTheme =
to get a final look
So combinations can be great here to have different flavors and people can
choose what's better for their branding
* The actual JewelTheme will be the "framework" to get the final generated
CSSs (with this plan SASS will generate 3 separate CSS files)
* We can provide some combinations, but it's up to the developer create the
combinations we don't provide. I think it's reasonable.
There's much more here, but I think it's ok for a first email about this.
My main problems are with CSS compilation problems, but with Alex's help I
expect to get over this soon, since each time I see less problems with CSS
:)
You can compile and test JewelExample to see this in action. There's so
much work in lots of states for this initial set of components (normal,
hover, active, disabled, ...). As you go from left to right, we have less
things done. As I finish with this initial set (Button, TextButton,
TextField, CheckBox, RadioButton, Slider), I'll go for more components.
Let me know what do you think about all this :)
Thanks!
Carlos
--
Carlos Rovira
http://about.me/carlosrovira
Re: [Jewel] Work In progress screenshots
Posted by Angelo Lazzari <la...@gmail.com>.
Really really great work Carlos!!!
El lun., 26 mar. 2018 a las 9:23, Yishay Weiss (<yi...@hotmail.com>)
escribió:
> Great job Carlos. Keep it up.
>
>
>
> ________________________________
> From: carlos.rovira@gmail.com <ca...@gmail.com> on behalf of
> Carlos Rovira <ca...@apache.org>
> Sent: Monday, March 26, 2018 1:38:59 AM
> To: dev@royale.apache.org
> Subject: [Jewel] Work In progress screenshots
>
> Hi!
>
> I was working hard this days and I think is time to share a screen shot
> about Jewel actual state.
>
> I've plan to support 12 colors. The following is the color wheel
>
> https://snag.gy/u8Rrzv.jpg
>
> The names of normal colors are as expected: red, blue, green,....
> But for intermediate colors, instead a composed name like yellow-green, I
> prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
> Topaz or Sapphire. All this continues the "Jewel" concept of the jewels or
> gems embedded in the royal crown ;)
>
> A side from this colors that will be the contrast color (primary,
> secondary, emphasized)
>
> We will have a normal-light theme:
>
> https://snag.gy/x3Pnmu.jpg (remember that's still unfinished)
>
> but you can have it flat :
>
> https://snag.gy/1WQ48U.jpg. (same here...)
>
> or instead of light, it can be dark
>
> https://snag.gy/EPSlZ1.jpg. (still needs more work in the dark colors)
>
> and flat-dark
>
> https://snag.gy/hBjzrS.jpg (this is maybe what needs more work of all)
>
> All this combined with the 12 wheel colors ;)
>
> Structure: I'm creating all of this with SASS vars in only one theme, what
> makes it extremely convenient to work, since with only one color, I can
> program the rest using color functions in SASS
>
> For example:
>
> border: 1px solid darken($button-color, 15%)
> background: linear-gradient(lighten($button-color, 5%), darken(
> $button-color, 5%))
> box-shadow: inset 0 1px 0 lighten($button-color, 20%)
>
> for flat/normal or light/dark is the same, I only need to switch two vars:
>
> $flat: false
> $dark: false
>
> and compile the new final CSS
>
> For final use:
>
> With all this more settled, I'll try to separate primary and secondary
> rules from the rest, so you can apply
>
> * JewelLightFlatTheme + JewelPrimaryEmeralTheme + JewelSecondaryBlueTheme =
> to get a final look
>
> So combinations can be great here to have different flavors and people can
> choose what's better for their branding
>
> * The actual JewelTheme will be the "framework" to get the final generated
> CSSs (with this plan SASS will generate 3 separate CSS files)
> * We can provide some combinations, but it's up to the developer create the
> combinations we don't provide. I think it's reasonable.
>
> There's much more here, but I think it's ok for a first email about this.
> My main problems are with CSS compilation problems, but with Alex's help I
> expect to get over this soon, since each time I see less problems with CSS
> :)
>
> You can compile and test JewelExample to see this in action. There's so
> much work in lots of states for this initial set of components (normal,
> hover, active, disabled, ...). As you go from left to right, we have less
> things done. As I finish with this initial set (Button, TextButton,
> TextField, CheckBox, RadioButton, Slider), I'll go for more components.
>
> Let me know what do you think about all this :)
>
> Thanks!
>
> Carlos
>
>
>
>
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
RE: [Jewel] Work In progress screenshots
Posted by Yishay Weiss <yi...@hotmail.com>.
Great job Carlos. Keep it up.
________________________________
From: carlos.rovira@gmail.com <ca...@gmail.com> on behalf of Carlos Rovira <ca...@apache.org>
Sent: Monday, March 26, 2018 1:38:59 AM
To: dev@royale.apache.org
Subject: [Jewel] Work In progress screenshots
Hi!
I was working hard this days and I think is time to share a screen shot
about Jewel actual state.
I've plan to support 12 colors. The following is the color wheel
https://snag.gy/u8Rrzv.jpg
The names of normal colors are as expected: red, blue, green,....
But for intermediate colors, instead a composed name like yellow-green, I
prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
Topaz or Sapphire. All this continues the "Jewel" concept of the jewels or
gems embedded in the royal crown ;)
A side from this colors that will be the contrast color (primary,
secondary, emphasized)
We will have a normal-light theme:
https://snag.gy/x3Pnmu.jpg (remember that's still unfinished)
but you can have it flat :
https://snag.gy/1WQ48U.jpg. (same here...)
or instead of light, it can be dark
https://snag.gy/EPSlZ1.jpg. (still needs more work in the dark colors)
and flat-dark
https://snag.gy/hBjzrS.jpg (this is maybe what needs more work of all)
All this combined with the 12 wheel colors ;)
Structure: I'm creating all of this with SASS vars in only one theme, what
makes it extremely convenient to work, since with only one color, I can
program the rest using color functions in SASS
For example:
border: 1px solid darken($button-color, 15%)
background: linear-gradient(lighten($button-color, 5%), darken(
$button-color, 5%))
box-shadow: inset 0 1px 0 lighten($button-color, 20%)
for flat/normal or light/dark is the same, I only need to switch two vars:
$flat: false
$dark: false
and compile the new final CSS
For final use:
With all this more settled, I'll try to separate primary and secondary
rules from the rest, so you can apply
* JewelLightFlatTheme + JewelPrimaryEmeralTheme + JewelSecondaryBlueTheme =
to get a final look
So combinations can be great here to have different flavors and people can
choose what's better for their branding
* The actual JewelTheme will be the "framework" to get the final generated
CSSs (with this plan SASS will generate 3 separate CSS files)
* We can provide some combinations, but it's up to the developer create the
combinations we don't provide. I think it's reasonable.
There's much more here, but I think it's ok for a first email about this.
My main problems are with CSS compilation problems, but with Alex's help I
expect to get over this soon, since each time I see less problems with CSS
:)
You can compile and test JewelExample to see this in action. There's so
much work in lots of states for this initial set of components (normal,
hover, active, disabled, ...). As you go from left to right, we have less
things done. As I finish with this initial set (Button, TextButton,
TextField, CheckBox, RadioButton, Slider), I'll go for more components.
Let me know what do you think about all this :)
Thanks!
Carlos
--
Carlos Rovira
http://about.me/carlosrovira
Re: [Jewel] Work In progress screenshots
Posted by Carlos Rovira <ca...@apache.org>.
Hi All,
thanks for the positive feedback to all! :)
I'll continue my journey to complete this UI set, there's still lots of
work to do here
@Olaf, wanting to see that "try-it-now" and maybe by that time, you'll
using Jewel UI Set with Blue/Topaz colors to fit our website ;)
Thanks!
2018-03-26 16:42 GMT+02:00 Peter Ent <pe...@adobe.com.invalid>:
> That looks really nice. Great job!
> ‹peter
>
> On 3/25/18, 6:38 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >Hi!
> >
> >I was working hard this days and I think is time to share a screen shot
> >about Jewel actual state.
> >
> >I've plan to support 12 colors. The following is the color wheel
> >
> >https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fsnag.gy%2
> >Fu8Rrzv.jpg&data=02%7C01%7Cpent%40adobe.com%
> 7C6ae916393d8c466ccc3e08d592a1
> >4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576143734649304&sdata
> >=3QNqvLRB70tIJHzZELAOclBvrr0jaHrR%2B8Qkrz3byXA%3D&reserved=0
> >
> >The names of normal colors are as expected: red, blue, green,....
> >But for intermediate colors, instead a composed name like yellow-green, I
> >prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
> >Topaz or Sapphire. All this continues the "Jewel" concept of the jewels or
> >gems embedded in the royal crown ;)
> >
> >A side from this colors that will be the contrast color (primary,
> >secondary, emphasized)
> >
> >We will have a normal-light theme:
> >
> >https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fsnag.gy%2
> >Fx3Pnmu.jpg&data=02%7C01%7Cpent%40adobe.com%
> 7C6ae916393d8c466ccc3e08d592a1
> >4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576143734649304&sdata
> >=ZAnKviux5zVEZubllV2mRaZyJtfj4C%2Bf%2FjnulgV53u4%3D&reserved=0 (remember
> >that's still unfinished)
> >
> >but you can have it flat :
> >
> >https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fsnag.gy%2
> >F1WQ48U.jpg&data=02%7C01%7Cpent%40adobe.com%
> 7C6ae916393d8c466ccc3e08d592a1
> >4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576143734649304&sdata
> >=NYjd32Urv7heJwoNzV8iK45VoSQSY7JLweYz1JWEhgE%3D&reserved=0. (same
> here...)
> >
> >or instead of light, it can be dark
> >
> >https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fsnag.gy%2
> >FEPSlZ1.jpg&data=02%7C01%7Cpent%40adobe.com%
> 7C6ae916393d8c466ccc3e08d592a1
> >4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576143734649304&sdata
> >=6HU4xMs%2BdaozNV3D7JzoeS87xkwNOHLeUV7rHXFQcDk%3D&reserved=0. (still
> >needs more work in the dark colors)
> >
> >and flat-dark
> >
> >https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fsnag.gy%2
> >FhBjzrS.jpg&data=02%7C01%7Cpent%40adobe.com%
> 7C6ae916393d8c466ccc3e08d592a1
> >4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576143734649304&sdata
> >=zjwaZwB3FfF2CLyni2p5UXFFlLOo01gEldYKseeVBYs%3D&reserved=0 (this is maybe
> >what needs more work of all)
> >
> >All this combined with the 12 wheel colors ;)
> >
> >Structure: I'm creating all of this with SASS vars in only one theme, what
> >makes it extremely convenient to work, since with only one color, I can
> >program the rest using color functions in SASS
> >
> >For example:
> >
> >border: 1px solid darken($button-color, 15%)
> > background: linear-gradient(lighten($button-color, 5%), darken(
> >$button-color, 5%))
> > box-shadow: inset 0 1px 0 lighten($button-color, 20%)
> >
> >for flat/normal or light/dark is the same, I only need to switch two vars:
> >
> >$flat: false
> >$dark: false
> >
> >and compile the new final CSS
> >
> >For final use:
> >
> >With all this more settled, I'll try to separate primary and secondary
> >rules from the rest, so you can apply
> >
> >* JewelLightFlatTheme + JewelPrimaryEmeralTheme + JewelSecondaryBlueTheme
> >=
> >to get a final look
> >
> >So combinations can be great here to have different flavors and people can
> >choose what's better for their branding
> >
> >* The actual JewelTheme will be the "framework" to get the final generated
> >CSSs (with this plan SASS will generate 3 separate CSS files)
> >* We can provide some combinations, but it's up to the developer create
> >the
> >combinations we don't provide. I think it's reasonable.
> >
> >There's much more here, but I think it's ok for a first email about this.
> >My main problems are with CSS compilation problems, but with Alex's help I
> >expect to get over this soon, since each time I see less problems with CSS
> >:)
> >
> >You can compile and test JewelExample to see this in action. There's so
> >much work in lots of states for this initial set of components (normal,
> >hover, active, disabled, ...). As you go from left to right, we have less
> >things done. As I finish with this initial set (Button, TextButton,
> >TextField, CheckBox, RadioButton, Slider), I'll go for more components.
> >
> >Let me know what do you think about all this :)
> >
> >Thanks!
> >
> >Carlos
> >
> >
> >
> >
> >
> >
> >
> >--
> >Carlos Rovira
> >https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2
> >Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%
> 7C6ae916393d8c466ccc3e08d592
> >a14685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636576143734649304&sda
> >ta=BzjmrIJd%2Fi1GSRT3n9BOgGzbxG%2BAkwWg7pSM0hHFyiQ%3D&reserved=0
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: [Jewel] Work In progress screenshots
Posted by Peter Ent <pe...@adobe.com.INVALID>.
That looks really nice. Great job!
‹peter
On 3/25/18, 6:38 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>Hi!
>
>I was working hard this days and I think is time to share a screen shot
>about Jewel actual state.
>
>I've plan to support 12 colors. The following is the color wheel
>
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>Fu8Rrzv.jpg&data=02%7C01%7Cpent%40adobe.com%7C6ae916393d8c466ccc3e08d592a1
>4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576143734649304&sdata
>=3QNqvLRB70tIJHzZELAOclBvrr0jaHrR%2B8Qkrz3byXA%3D&reserved=0
>
>The names of normal colors are as expected: red, blue, green,....
>But for intermediate colors, instead a composed name like yellow-green, I
>prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
>Topaz or Sapphire. All this continues the "Jewel" concept of the jewels or
>gems embedded in the royal crown ;)
>
>A side from this colors that will be the contrast color (primary,
>secondary, emphasized)
>
>We will have a normal-light theme:
>
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>Fx3Pnmu.jpg&data=02%7C01%7Cpent%40adobe.com%7C6ae916393d8c466ccc3e08d592a1
>4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576143734649304&sdata
>=ZAnKviux5zVEZubllV2mRaZyJtfj4C%2Bf%2FjnulgV53u4%3D&reserved=0 (remember
>that's still unfinished)
>
>but you can have it flat :
>
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>F1WQ48U.jpg&data=02%7C01%7Cpent%40adobe.com%7C6ae916393d8c466ccc3e08d592a1
>4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576143734649304&sdata
>=NYjd32Urv7heJwoNzV8iK45VoSQSY7JLweYz1JWEhgE%3D&reserved=0. (same here...)
>
>or instead of light, it can be dark
>
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>FEPSlZ1.jpg&data=02%7C01%7Cpent%40adobe.com%7C6ae916393d8c466ccc3e08d592a1
>4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576143734649304&sdata
>=6HU4xMs%2BdaozNV3D7JzoeS87xkwNOHLeUV7rHXFQcDk%3D&reserved=0. (still
>needs more work in the dark colors)
>
>and flat-dark
>
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%2
>FhBjzrS.jpg&data=02%7C01%7Cpent%40adobe.com%7C6ae916393d8c466ccc3e08d592a1
>4685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576143734649304&sdata
>=zjwaZwB3FfF2CLyni2p5UXFFlLOo01gEldYKseeVBYs%3D&reserved=0 (this is maybe
>what needs more work of all)
>
>All this combined with the 12 wheel colors ;)
>
>Structure: I'm creating all of this with SASS vars in only one theme, what
>makes it extremely convenient to work, since with only one color, I can
>program the rest using color functions in SASS
>
>For example:
>
>border: 1px solid darken($button-color, 15%)
> background: linear-gradient(lighten($button-color, 5%), darken(
>$button-color, 5%))
> box-shadow: inset 0 1px 0 lighten($button-color, 20%)
>
>for flat/normal or light/dark is the same, I only need to switch two vars:
>
>$flat: false
>$dark: false
>
>and compile the new final CSS
>
>For final use:
>
>With all this more settled, I'll try to separate primary and secondary
>rules from the rest, so you can apply
>
>* JewelLightFlatTheme + JewelPrimaryEmeralTheme + JewelSecondaryBlueTheme
>=
>to get a final look
>
>So combinations can be great here to have different flavors and people can
>choose what's better for their branding
>
>* The actual JewelTheme will be the "framework" to get the final generated
>CSSs (with this plan SASS will generate 3 separate CSS files)
>* We can provide some combinations, but it's up to the developer create
>the
>combinations we don't provide. I think it's reasonable.
>
>There's much more here, but I think it's ok for a first email about this.
>My main problems are with CSS compilation problems, but with Alex's help I
>expect to get over this soon, since each time I see less problems with CSS
>:)
>
>You can compile and test JewelExample to see this in action. There's so
>much work in lots of states for this initial set of components (normal,
>hover, active, disabled, ...). As you go from left to right, we have less
>things done. As I finish with this initial set (Button, TextButton,
>TextField, CheckBox, RadioButton, Slider), I'll go for more components.
>
>Let me know what do you think about all this :)
>
>Thanks!
>
>Carlos
>
>
>
>
>
>
>
>--
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%7C6ae916393d8c466ccc3e08d592
>a14685%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576143734649304&sda
>ta=BzjmrIJd%2Fi1GSRT3n9BOgGzbxG%2BAkwWg7pSM0hHFyiQ%3D&reserved=0
Re: [Jewel] Work In progress screenshots
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Looks great!
On 3/26/18, 12:08 AM, "Harbs" <ha...@gmail.com> wrote:
>Whoah! That’s pretty awesome!
>
>Harbs
>
>> On Mar 26, 2018, at 1:38 AM, Carlos Rovira <ca...@apache.org>
>>wrote:
>>
>> Hi!
>>
>> I was working hard this days and I think is time to share a screen shot
>> about Jewel actual state.
>>
>> I've plan to support 12 colors. The following is the color wheel
>>
>>
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%
>>2Fu8Rrzv.jpg&data=02%7C01%7Caharui%40adobe.com%7Ca314512c34664301744c08d5
>>92e8576c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576449033219494&
>>sdata=bkyxFjPcfcm28GYNS9jOOSijL3LxPxXG4C0LnqBbfBU%3D&reserved=0
>>
>> The names of normal colors are as expected: red, blue, green,....
>> But for intermediate colors, instead a composed name like yellow-green,
>>I
>> prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
>> Topaz or Sapphire. All this continues the "Jewel" concept of the jewels
>>or
>> gems embedded in the royal crown ;)
>>
>> A side from this colors that will be the contrast color (primary,
>> secondary, emphasized)
>>
>> We will have a normal-light theme:
>>
>>
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%
>>2Fx3Pnmu.jpg&data=02%7C01%7Caharui%40adobe.com%7Ca314512c34664301744c08d5
>>92e8576c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576449033219494&
>>sdata=HurYv5v9lsiU3GaKSJMoNLUJqxzl1F6qrICnZNP%2BAqQ%3D&reserved=0
>>(remember that's still unfinished)
>>
>> but you can have it flat :
>>
>>
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%
>>2F1WQ48U.jpg&data=02%7C01%7Caharui%40adobe.com%7Ca314512c34664301744c08d5
>>92e8576c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576449033219494&
>>sdata=f05m1SHiqnaFgBFFrI7purLNbPFKMy0mgVa8tSSpJjA%3D&reserved=0. (same
>>here...)
>>
>> or instead of light, it can be dark
>>
>>
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%
>>2FEPSlZ1.jpg&data=02%7C01%7Caharui%40adobe.com%7Ca314512c34664301744c08d5
>>92e8576c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576449033219494&
>>sdata=rAVtDBHLejzPWFZKDqmxxAknYKKSIhSH%2BLajnkcxg%2Fk%3D&reserved=0.
>>(still needs more work in the dark colors)
>>
>> and flat-dark
>>
>>
>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsnag.gy%
>>2FhBjzrS.jpg&data=02%7C01%7Caharui%40adobe.com%7Ca314512c34664301744c08d5
>>92e8576c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636576449033219494&
>>sdata=8GuVHJ6ILZKkewYkIT2uQ3uAKIunKWA9%2BWBxhUQNBzI%3D&reserved=0 (this
>>is maybe what needs more work of all)
>>
>> All this combined with the 12 wheel colors ;)
>>
>> Structure: I'm creating all of this with SASS vars in only one theme,
>>what
>> makes it extremely convenient to work, since with only one color, I can
>> program the rest using color functions in SASS
>>
>> For example:
>>
>> border: 1px solid darken($button-color, 15%)
>> background: linear-gradient(lighten($button-color, 5%), darken(
>> $button-color, 5%))
>> box-shadow: inset 0 1px 0 lighten($button-color, 20%)
>>
>> for flat/normal or light/dark is the same, I only need to switch two
>>vars:
>>
>> $flat: false
>> $dark: false
>>
>> and compile the new final CSS
>>
>> For final use:
>>
>> With all this more settled, I'll try to separate primary and secondary
>> rules from the rest, so you can apply
>>
>> * JewelLightFlatTheme + JewelPrimaryEmeralTheme +
>>JewelSecondaryBlueTheme =
>> to get a final look
>>
>> So combinations can be great here to have different flavors and people
>>can
>> choose what's better for their branding
>>
>> * The actual JewelTheme will be the "framework" to get the final
>>generated
>> CSSs (with this plan SASS will generate 3 separate CSS files)
>> * We can provide some combinations, but it's up to the developer create
>>the
>> combinations we don't provide. I think it's reasonable.
>>
>> There's much more here, but I think it's ok for a first email about
>>this.
>> My main problems are with CSS compilation problems, but with Alex's
>>help I
>> expect to get over this soon, since each time I see less problems with
>>CSS
>> :)
>>
>> You can compile and test JewelExample to see this in action. There's so
>> much work in lots of states for this initial set of components (normal,
>> hover, active, disabled, ...). As you go from left to right, we have
>>less
>> things done. As I finish with this initial set (Button, TextButton,
>> TextField, CheckBox, RadioButton, Slider), I'll go for more components.
>>
>> Let me know what do you think about all this :)
>>
>> Thanks!
>>
>> Carlos
>>
>>
>>
>>
>>
>>
>>
>> --
>> Carlos Rovira
>>
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7Ca314512c34664301744c08
>>d592e8576c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63657644903321949
>>4&sdata=hHSjdOVf6qAcMeKiY6YG03kx8V7nKsIztEmGhdOx5r4%3D&reserved=0
>
Re: [Jewel] Work In progress screenshots
Posted by Harbs <ha...@gmail.com>.
Whoah! That’s pretty awesome!
Harbs
> On Mar 26, 2018, at 1:38 AM, Carlos Rovira <ca...@apache.org> wrote:
>
> Hi!
>
> I was working hard this days and I think is time to share a screen shot
> about Jewel actual state.
>
> I've plan to support 12 colors. The following is the color wheel
>
> https://snag.gy/u8Rrzv.jpg
>
> The names of normal colors are as expected: red, blue, green,....
> But for intermediate colors, instead a composed name like yellow-green, I
> prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
> Topaz or Sapphire. All this continues the "Jewel" concept of the jewels or
> gems embedded in the royal crown ;)
>
> A side from this colors that will be the contrast color (primary,
> secondary, emphasized)
>
> We will have a normal-light theme:
>
> https://snag.gy/x3Pnmu.jpg (remember that's still unfinished)
>
> but you can have it flat :
>
> https://snag.gy/1WQ48U.jpg. (same here...)
>
> or instead of light, it can be dark
>
> https://snag.gy/EPSlZ1.jpg. (still needs more work in the dark colors)
>
> and flat-dark
>
> https://snag.gy/hBjzrS.jpg (this is maybe what needs more work of all)
>
> All this combined with the 12 wheel colors ;)
>
> Structure: I'm creating all of this with SASS vars in only one theme, what
> makes it extremely convenient to work, since with only one color, I can
> program the rest using color functions in SASS
>
> For example:
>
> border: 1px solid darken($button-color, 15%)
> background: linear-gradient(lighten($button-color, 5%), darken(
> $button-color, 5%))
> box-shadow: inset 0 1px 0 lighten($button-color, 20%)
>
> for flat/normal or light/dark is the same, I only need to switch two vars:
>
> $flat: false
> $dark: false
>
> and compile the new final CSS
>
> For final use:
>
> With all this more settled, I'll try to separate primary and secondary
> rules from the rest, so you can apply
>
> * JewelLightFlatTheme + JewelPrimaryEmeralTheme + JewelSecondaryBlueTheme =
> to get a final look
>
> So combinations can be great here to have different flavors and people can
> choose what's better for their branding
>
> * The actual JewelTheme will be the "framework" to get the final generated
> CSSs (with this plan SASS will generate 3 separate CSS files)
> * We can provide some combinations, but it's up to the developer create the
> combinations we don't provide. I think it's reasonable.
>
> There's much more here, but I think it's ok for a first email about this.
> My main problems are with CSS compilation problems, but with Alex's help I
> expect to get over this soon, since each time I see less problems with CSS
> :)
>
> You can compile and test JewelExample to see this in action. There's so
> much work in lots of states for this initial set of components (normal,
> hover, active, disabled, ...). As you go from left to right, we have less
> things done. As I finish with this initial set (Button, TextButton,
> TextField, CheckBox, RadioButton, Slider), I'll go for more components.
>
> Let me know what do you think about all this :)
>
> Thanks!
>
> Carlos
>
>
>
>
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
Re: [Jewel] Work In progress screenshots
Posted by Olaf Krueger <ma...@olafkrueger.net>.
Amazing, Carlos... keep it up!!
I am still a silent observer here but I hope to be able to continue with the
"Try-it-now" stuff in April...
Thanks,
Olaf
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: [Jewel] Work In progress screenshots
Posted by Piotr Zarzycki <pi...@gmail.com>.
Looks great :)
Thanks!
2018-03-26 1:39 GMT+02:00 OmPrakash Muppirala <bi...@gmail.com>:
> Looks awesome, Carlos! Looking forward to use this in my apps :-D
>
> Thanks,
> Om
>
> On Sun, Mar 25, 2018 at 3:38 PM, Carlos Rovira <ca...@apache.org>
> wrote:
>
> > Hi!
> >
> > I was working hard this days and I think is time to share a screen shot
> > about Jewel actual state.
> >
> > I've plan to support 12 colors. The following is the color wheel
> >
> > https://snag.gy/u8Rrzv.jpg
> >
> > The names of normal colors are as expected: red, blue, green,....
> > But for intermediate colors, instead a composed name like yellow-green, I
> > prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
> > Topaz or Sapphire. All this continues the "Jewel" concept of the jewels
> or
> > gems embedded in the royal crown ;)
> >
> > A side from this colors that will be the contrast color (primary,
> > secondary, emphasized)
> >
> > We will have a normal-light theme:
> >
> > https://snag.gy/x3Pnmu.jpg (remember that's still unfinished)
> >
> > but you can have it flat :
> >
> > https://snag.gy/1WQ48U.jpg. (same here...)
> >
> > or instead of light, it can be dark
> >
> > https://snag.gy/EPSlZ1.jpg. (still needs more work in the dark colors)
> >
> > and flat-dark
> >
> > https://snag.gy/hBjzrS.jpg (this is maybe what needs more work of all)
> >
> > All this combined with the 12 wheel colors ;)
> >
> > Structure: I'm creating all of this with SASS vars in only one theme,
> what
> > makes it extremely convenient to work, since with only one color, I can
> > program the rest using color functions in SASS
> >
> > For example:
> >
> > border: 1px solid darken($button-color, 15%)
> > background: linear-gradient(lighten($button-color, 5%), darken(
> > $button-color, 5%))
> > box-shadow: inset 0 1px 0 lighten($button-color, 20%)
> >
> > for flat/normal or light/dark is the same, I only need to switch two
> vars:
> >
> > $flat: false
> > $dark: false
> >
> > and compile the new final CSS
> >
> > For final use:
> >
> > With all this more settled, I'll try to separate primary and secondary
> > rules from the rest, so you can apply
> >
> > * JewelLightFlatTheme + JewelPrimaryEmeralTheme +
> JewelSecondaryBlueTheme =
> > to get a final look
> >
> > So combinations can be great here to have different flavors and people
> can
> > choose what's better for their branding
> >
> > * The actual JewelTheme will be the "framework" to get the final
> generated
> > CSSs (with this plan SASS will generate 3 separate CSS files)
> > * We can provide some combinations, but it's up to the developer create
> the
> > combinations we don't provide. I think it's reasonable.
> >
> > There's much more here, but I think it's ok for a first email about this.
> > My main problems are with CSS compilation problems, but with Alex's help
> I
> > expect to get over this soon, since each time I see less problems with
> CSS
> > :)
> >
> > You can compile and test JewelExample to see this in action. There's so
> > much work in lots of states for this initial set of components (normal,
> > hover, active, disabled, ...). As you go from left to right, we have less
> > things done. As I finish with this initial set (Button, TextButton,
> > TextField, CheckBox, RadioButton, Slider), I'll go for more components.
> >
> > Let me know what do you think about all this :)
> >
> > Thanks!
> >
> > Carlos
> >
> >
> >
> >
> >
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
> >
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: [Jewel] Work In progress screenshots
Posted by OmPrakash Muppirala <bi...@gmail.com>.
Looks awesome, Carlos! Looking forward to use this in my apps :-D
Thanks,
Om
On Sun, Mar 25, 2018 at 3:38 PM, Carlos Rovira <ca...@apache.org>
wrote:
> Hi!
>
> I was working hard this days and I think is time to share a screen shot
> about Jewel actual state.
>
> I've plan to support 12 colors. The following is the color wheel
>
> https://snag.gy/u8Rrzv.jpg
>
> The names of normal colors are as expected: red, blue, green,....
> But for intermediate colors, instead a composed name like yellow-green, I
> prefer "gems" colors like (in that case) "Emerald". Others are Amethyst,
> Topaz or Sapphire. All this continues the "Jewel" concept of the jewels or
> gems embedded in the royal crown ;)
>
> A side from this colors that will be the contrast color (primary,
> secondary, emphasized)
>
> We will have a normal-light theme:
>
> https://snag.gy/x3Pnmu.jpg (remember that's still unfinished)
>
> but you can have it flat :
>
> https://snag.gy/1WQ48U.jpg. (same here...)
>
> or instead of light, it can be dark
>
> https://snag.gy/EPSlZ1.jpg. (still needs more work in the dark colors)
>
> and flat-dark
>
> https://snag.gy/hBjzrS.jpg (this is maybe what needs more work of all)
>
> All this combined with the 12 wheel colors ;)
>
> Structure: I'm creating all of this with SASS vars in only one theme, what
> makes it extremely convenient to work, since with only one color, I can
> program the rest using color functions in SASS
>
> For example:
>
> border: 1px solid darken($button-color, 15%)
> background: linear-gradient(lighten($button-color, 5%), darken(
> $button-color, 5%))
> box-shadow: inset 0 1px 0 lighten($button-color, 20%)
>
> for flat/normal or light/dark is the same, I only need to switch two vars:
>
> $flat: false
> $dark: false
>
> and compile the new final CSS
>
> For final use:
>
> With all this more settled, I'll try to separate primary and secondary
> rules from the rest, so you can apply
>
> * JewelLightFlatTheme + JewelPrimaryEmeralTheme + JewelSecondaryBlueTheme =
> to get a final look
>
> So combinations can be great here to have different flavors and people can
> choose what's better for their branding
>
> * The actual JewelTheme will be the "framework" to get the final generated
> CSSs (with this plan SASS will generate 3 separate CSS files)
> * We can provide some combinations, but it's up to the developer create the
> combinations we don't provide. I think it's reasonable.
>
> There's much more here, but I think it's ok for a first email about this.
> My main problems are with CSS compilation problems, but with Alex's help I
> expect to get over this soon, since each time I see less problems with CSS
> :)
>
> You can compile and test JewelExample to see this in action. There's so
> much work in lots of states for this initial set of components (normal,
> hover, active, disabled, ...). As you go from left to right, we have less
> things done. As I finish with this initial set (Button, TextButton,
> TextField, CheckBox, RadioButton, Slider), I'll go for more components.
>
> Let me know what do you think about all this :)
>
> Thanks!
>
> Carlos
>
>
>
>
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>