Whoah! That’s pretty awesome! Harbs
> On Mar 26, 2018, at 1:38 AM, 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
