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 <[email protected]>: > That looks really nice. Great job! > ‹peter > > On 3/25/18, 6:38 PM, "[email protected] on behalf of Carlos Rovira" > <[email protected] on behalf of [email protected]> 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
