royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Carlos Rovira <>
Subject [Jewel] Work In progress screenshots
Date Sun, 25 Mar 2018 22:38:59 GMT

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

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: (remember that's still unfinished)

but you can have it flat : (same here...)

or instead of light, it can be dark (still needs more work in the dark colors)

and flat-dark (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 :)



Carlos Rovira

  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message