Great job Carlos. Keep it up.
________________________________ From: [email protected] <[email protected]> on behalf of Carlos Rovira <[email protected]> Sent: Monday, March 26, 2018 1:38:59 AM To: [email protected] 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
