That looks really nice. Great job! ‹peter On 3/25/18, 6:38 PM, "carlos.rov...@gmail.com on behalf of Carlos Rovira" <carlos.rov...@gmail.com on behalf of carlosrov...@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
