Looks great :) Thanks!
2018-03-26 1:39 GMT+02:00 OmPrakash Muppirala <[email protected]>: > 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 <[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://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>*
