Improve material color and fonts

[korgan00]

I was using your library to create a web. It main color is orange.
I was looking at oranges at material design in google page and some colors convinced me.
When i used it with the library i noticed that "Orange" color and "Amber" color uses a light font color (darkbg-text) and Google material oficial uses a dark font color (lightbg-text). It is a bit unreadable,
I was thinking on a solution looking at current code.
I dont know so much about less but i think that something like this could work:

In "_mixins.less":

.background-variations(@extra) {

    .background-variations-factory(@material-color) {
        .background-variations-factory-deep(@material-color-number) {
            &-material-@{material-color}-@{material-color-number} {
                background-color: @@{material-color}-@{material-color-number};
                color:  @@{material-color}-@{material-color-number}-text;
            }
        }

        .background-variations-factory-deep("50");
        .background-variations-factory-deep("100");
        .background-variations-factory-deep("200");
        .background-variations-factory-deep("300");
        .background-variations-factory-deep("400");
        .background-variations-factory-deep("500");
        .background-variations-factory-deep("600");
        .background-variations-factory-deep("700");
        .background-variations-factory-deep("800");
        .background-variations-factory-deep("900");
        .background-variations-factory-deep("A100");
        .background-variations-factory-deep("A200");
        .background-variations-factory-deep("A400");
        .background-variations-factory-deep("A700");
    }
    .background-variations-factory("red");
    .background-variations-factory("pink");
    .background-variations-factory("purple");
    .background-variations-factory("deeppurple");
    .background-variations-factory("indigo");
    .background-variations-factory("blue");
    .background-variations-factory("lightblue");
    .background-variations-factory("cyan");
    .background-variations-factory("teal");
    .background-variations-factory("lightgreen");
    .background-variations-factory("lightyellow");
    .background-variations-factory("orange");
    .background-variations-factory("deeporange");
    .background-variations-factory("grey");
    .background-variations-factory("bluegrey");
    .background-variations-factory("brown");
    .background-variations-factory("lightgrey");
}

In "_variables.less" where red, pink, purple... are:

@red: #F44336;          @red-text: @darkbg-text;
@red-50: #FFEBEE;       @red-50-text: @lightbg-text;
@red-100: #FFCDD2;      @red-100-text: @lightbg-text;
@red-200: #EF9A9A;      @red-200-text: @lightbg-text;
@red-300: #E57373;      @red-300-text: @lightbg-text;
@red-400: #EF5350;      @red-400-text: @lightbg-text;
@red-500: #F44336;      @red-500-text: @darkbg-text;
@red-600: #E53935;      @red-600-text: @darkbg-text;
@red-700: #D32F2F;      @red-700-text: @darkbg-text;
@red-800: #C62828;      @red-800-text: @darkbg-text;
@red-900: #B71C1C;      @red-900-text: @darkbg-text;
@red-A100: #FF8A80;     @red-A100-text: @lightbg-text;
@red-A200: #FF5252;     @red-A200-text: @darkbg-text;
@red-A400: #FF1744;     @red-A400-text: @darkbg-text;
@red-A700: #D50000;     @red-A700-text: @darkbg-text;

@pink: #E91E63;         @pink-text: @darkbg-text;
@pink-50: #FCE4EC;      @pink-50-text: @lightbg-text;
@pink-100: #F8BBD0;     @pink-100-text: @lightbg-text;
@pink-200: #F48FB1;     @pink-200-text: @lightbg-text;
@pink-300: #F06292;     @pink-300-text: @lightbg-text;
@pink-400: #EC407A;     @pink-400-text: @lightbg-text;
@pink-500: #E91E63;     @pink-500-text: @darkbg-text;
@pink-600: #D81B60;     @pink-600-text: @darkbg-text;
@pink-700: #C2185B;     @pink-700-text: @darkbg-text;
@pink-800: #AD1457;     @pink-800-text: @darkbg-text;
@pink-900: #880E4F;     @pink-900-text: @darkbg-text;
@pink-A100: #FF8A80;    @pink-A100-text: @lightbg-text;
@pink-A200: #FF5252;    @pink-A200-text: @darkbg-text;
@pink-A400: #FF1744;    @pink-A400-text: @darkbg-text;
@pink-A700: #D50000;    @pink-A700-text: @darkbg-text;
....

and so on...

Then .background-variations(@extra) should be called on each element with a non transparent background.

It will compile? should i add something else to get it working? should i finish the work and make a pull request?

Sorry if u cant understand something. I dont speak a very good english.

Thanks for reading!

[FezVrasta]

should this replace the current .variations mixin?

[FezVrasta]

To get the font color we could use this:

.text {
    color: contrast(@material-color, @lightbg-text, @darkbg-text);
}

[korgan00]

It shouldnt replace it but maybe could be merged to complete variations mixin. My function doesnt cover transparent background case.

(About contrast) Interesting function. Didnt know it. It is a great solution for text color, anyway could be interesting to have 14 variations of each material colors.

[FezVrasta]

yes in fact it would be a great improvement.
I'd like to implement your solution, I'm not a LESS guru so feel free to send a PR.

Let me try to figure out what we need and we can proceed with a PR

[FezVrasta]

Just some thing to follow:

1. There should be a mixin to set background and font color (like the one you have proposed)
2. There should be a mixin to set a custom property (without set the font color). This will be used to set things like border color, color and other parts (used for checkboxes, radios and other elements)
3. use the contrast mixin to set the text color
4. You should support -default -primary - success -info -warning and -danger variations.

The main problem here is that every element has usually a different color for the default style. For example: buttons are transparent, wells are white, and so on.
We'll hardcode the default color and then override it with the classes generated by this mixin.

If you need any help please let me know and I'll try to help you.

[FezVrasta]

@korgan00 are you still available for a PR or should I write it by myself?

[korgan00]

Im a bit busy. But if u dont hurry i could do it in weekend. Ill use free time on it

[FezVrasta]

okay thanks, I'm preparing an updated list of material colors (the one you have used is outdated), I'll release it in some minutes.

[FezVrasta]

Here the list:

https://github.com/FezVrasta/bootstrap-material-design/blob/master/less/_colors.less

[korgan00]

Ok!! Thx! I will try to do something today!

[FezVrasta]

great :)

[korgan00]

I have an aproximation in my repository: https://github.com/korgan00/bootstrap-material-design/tree/material-colors-implementation

[FezVrasta]

wow! looks neat!

Now we miss the modification for the .variations mixin, we need it to just set the color of the specified attribute. After that I'll try to optimize the current LESS source so that the compiled CSS has better performances.

This mixin is awesome :) Thanks!

[korgan00]

I think mixin is complete.
This doesnt resolve navbar readability because font color on navbar is preset in many classes and pseudoclasses.
May be, it could be resolved with color: inherit; or something like that.

[FezVrasta]

yes the navbar CSS sucks...

[korgan00]

Hi, i didnt see the best way to fix that without changing many things, inherit doesnt work as i hope.
I was thiniking on functional programming. Less has the feature:
http://lesscss.org/features/#detached-rulesets-feature

We can build something like the .variations mixin but so much improved. It would be used as:

.material-variations({ 
    background-color: @material-color 
    border-color: @font-color 
    color: @font-color 
    .disabled > a {
        &,
        &:hover,
        &:focus {
            color: multiply(@font-color, #888888); //if black it will be dark-grey, if white it will be light-grey
            background-color: @material-color;
        }
    }
});`

A function should be passed as parameter. That funcion scope can use a set of variables to define every thing that depends on the material.

Waiting for ur answer. Tell me what should i do, i dont want to do same work as you 😃

[FezVrasta]

ping @korgan00

Any update on this? We need just to fix the navbar to release this awesome improvement :(

[korgan00]

I was working yesterday on it. And i found new problems... xD.
I make the awesome mixin, but css file weight has grown too much, i think it is very optimizable and should not be a problem later. The real problem is that i dont know how to change placeholder color!! i search on the internet but solutions doesnt apply correctly on it. Im thinking in other possible solutions, like not to use placeholder and use a special floating label or something like that, but it doesnt like me too much.
If u know how to change placeholder text color in project's navbar, pls put here an example and i will get working.

I will try to fit everything , optimize weight a bit and push to my repository this evening if its possible (in about 9 or 10 hours) so you can see the new mixin file and how it should be applyed.

[FezVrasta]

Here an example:

http://codepen.io/FezVrasta/pen/zxBjvM

Note that I use auto prefixer, the same tool used on this project to add vendor specific prefixes.

[korgan00]

i tryed that but it doesnt work for me. i will commit so u can try it, may be i am clumsy :P.

[korgan00]

i just see whats the problem!!!!
There is an !important word in index.html that overrides my input::placeholder arrrgggg, so many time wasted!!! xDDD
ok, i think i got it!, i will push in a while.

[korgan00]

ok, there is another problem, i think welljumbo is overdefined and make conflict with deeper elements. Well jumbo defines inputs inside him... a input should be autodefined i think...
Some elements should be reevaluated
I will commit and make a pull request, keep that in mind!