[Style Manager] Styling the Color Palettes Cards

[ilincaroman]

Description

Color Palettes este prima componenta de stilizare din Style Manager pe care vrem sa o oferim clientilor. Dupa cum spune si numele, acesta se va ocupa strict de culori si are ca scop simplificarea experientei utilizatorului in ceea ce priveste alegerea paletei de culori a site-ului sau.

Design

Guidelines

👩‍🎨 Aceeasi paleta, teme diferite

• O paleta de culori reprezinta o baza pentru fiecare tema. Astfel, din cele 7 culori ale unei palete, fiecare tema defineste care dintre ele le foloseste in stilizarea elementelor. Spre exemplu, avem o paleta oarecare, iar Vasco preia doar 5 dintre culori (2 Color, 2 Dark, 1 Light), iar Hive doar 6 (1 Color, 3 Dark, 2 Light). Astfel:
• componenta de Color Palettes va avea doua sectiuni:
  • o lista de palete de culori predefinite de noi
  • controale pentru culorile care se afla in paleta curent selectata

    🎨 Paleta de culori

    Structura unei palete de culori

• Nume
• 7 culori, care sunt grupate in felul urmator:
  • 2 Color
  • 3 Dark
  • 2 Light

Un exemplu de configurare pentru o paleta numita "Vasco":

'vasco'  => array(
    'label'   => __( 'Vasco', 'customify' ),
        'options' => array(
            'sm_color_primary'   => '#38C3C8',
            'sm_color_secondary' => '#F59828',
            'sm_dark_primary'    => '#2b2b28',
            'sm_dark_secondary'  => '#2B3D39',
            'sm_dark_tertiary'   => '#65726F',
            'sm_light_primary'   => '#F5F6F1',
            'sm_light_secondary' => '#E6F7F7',
        ), 
)

State-urile unei palete de culori

• Default: va fi afisat numele si un mic hint/preview (acel "A" intr-un patrat). Fundalul etichetei cu numele + litera "A" vor prelua prima culoare de background (Primary Background), iar fundalul patratului va prelua prima culoare de accent (Primary Color)
• Hover: la hover vor aparea cele x culori pe care tema le suporta. Dupa exemplul de mai sus, Vasco va afisa 5 culori, iar Hive 6.
• Active: litera "A" din small preview se va transforma intr-un checkmark

  🖍 Controale pentru culorile unei palete

• controalele care vor aparea in aceasta sectiune vor fi doar cele suportate de tema. Revenind deci inapoi la exemplul de mai sus, Vasco va avea 5 controale, iar Hive 6
• Pentru o prima varianta vom lasa controalele pentru culori ca cele pe care le utilizam pana acum (Label + Color Picker), urmand sa lucram la gruparea lor intr-un mod mai coerent
• o data ce o culoare a unei palete curente este modificata, iar acea paleta nu se regaseste intre cele definite, aceasta devine o paleta Custom. In acest caz, paleta din lista de mai sus care era selectata va trece din state-ul Active in cel Default

Resources

InVision

[victor-panaite]

@ilincaroman @georgeolaru am facut push pe branch-ul 100-mock-color-palettes

Niste lucruri pe care le-am descoperit:

• [ ] Culoarea pentru 'A' nu cred ca merge hardcodata pentru ca apar niste cazuri ciudate.
• [ ] Culoarea textului nu functioneaza pentru toate background-urile de label
• [ ] Trebuie uploadate imagini de fundal pentru palette
• [ ] Box-shadow-ul inset de pe paleta cred ca e ciudat sau ceva nu am copiat eu bine din invision daca puteti sa aruncati un ochi
• [ ] Cred ca trebuie o tranzitie mai ok la hover
• [ ] Nu am gasit cum sa targetez checked state pentru a pune tick-mark-ul @vladolaru
• [ ] Trebuie uploadat un tick-mark
• [ ] @vladolaru am lasat cometariu in #104 cu exemplu de markup

[ilincaroman]

Imma go point by point 😁:

1. Culoarea pentru 'A' nu cred ca merge hardcodata pentru ca apar niste cazuri ciudate. Vad unele cazuri in care intradevar apar probleme. Ideea e ca fundalul etichetei ar trebui sa aiba aceeasi culoare cu cea a literei "A", adica primul background color. Spre exemplu aici sau aici vad trei culori: cea pentru patrat, cea pentru litera si cea pentru fundalul etichetei. Hai sa vedem cum ar merge dupa logica asta intai, dupa mai adjustam.
2. Culoarea textului nu functioneaza pentru toate background-urile de label Indeed, cred ca va trebui sa avem doua culori pentru text: dark (ce e acum) si light. Se poate masura un fel de contrast intre cele doua culori (cea de fundal si cea a textului) ca sa se decida daca se aplica dark sau light? Am in minte acest tool. As evita sa facem invert la background color, ar aparea cam multe nuante in labels.
3. Trebuie uploadate imagini de fundal pentru palette Ok, e ceva ce pot face si eu? Exista constrangeri, cum ar fi: dimensiunea imaginii, marimea fisierului?
4. Box-shadow-ul inset de pe paleta cred ca e ciudat sau ceva nu am copiat eu bine din invision daca puteti sa aruncati un ochi Cel din interior e doar unul din ele aplicat, sunt doua shadow-uri, see here. Unul cu y:0 si unul cu y:1, ambele cu rgba(0,0,0,0.15). Atata as avea de adaugat ca nu este nevoie de outer shadow :)
5. Cred ca trebuie o tranzitie mai ok la hover Indeed, poate mai incercam altceva. Ma gandeam la asa ceva, dar nu am timing-ul prea bun. Ma poti ajuta mai mult la asta? Ma gandesc la animatiile la bar charts atunci cand sunt incarcate and they load one by one. Also, tot in aceeasi tema, culorile ar trebui sa fie tot sub acel Inner Shadow.
6. Gradina lui Vlad :)
7. Trebuie uploadat un tick-mark Added here, sper ca procedai corect, am pus fisierul din Terminal.
8. Vladvladvlad :)

@victor-panaite Smecher 👍

[victor-panaite]

@ilincaroman la pct. 3 nu exista constrangeri de imagine pentru ca o folosesc ca background-image cu backgroud-size: cover, cred ca doar sa aibe dimensiune acceptabila pentru load rapid vs calitate. Nu stiu ce support avem acum pentru asta @vladolaru

[victor-panaite]

@ilincaroman la pct 4 poti sa arunci direct o privire la css in inspect sa imi zici ce trebuie sa modific? (cu screenshot eventul 😃)

[ilincaroman]

@victor-panaite Legat de punctul 4: And it shoud look like this, asa cum mi-o iesit mie :) Astept update in legatura cu celelalte :D

[victor-panaite]

@ilincaroman am facut push pe customify with some changes.

1. Am rezolvat culoarea pentru 'A'
2. Am gasit o metoda sa decid daca o culoare este dark sau light pe baza hex-code-ului. Deocamdata am folosit 'black' or 'white' dar putem alege niste culori mai fancy
3. Am schimbat box-shadow-ul
4. Am implementat tranzitia smechera pe care mi-ai dat-o ca exemplu

Restul still waiting for input de la @vladolaru

[georgeolaru]

@victor-panaite @ilincaroman am dat un push cu niste mici modificari la animatia de hover: https://github.com/pixelgrade/customify/commit/233702760f99af5b848d6da59cba5388c05fad69

Preview: https://cl.ly/2e3J073E1u1g

[razwan]

.pix_customizer_setting .customize-inside-control-row:before {
   ...
   pointer-events: none;

[ilincaroman]

@georgeolaru Am dat eu push, all good here, people, well done ✨

[georgeolaru]

@ilincaroman nu imi apare ca ai pus regula pointer-events — ai dat commit?

De asemenea ramane problema cu state-ul de "checked" care nu stiu daca e prins in alt issue.

[ilincaroman]

@georgeolaru pe 100-mock-color-palettes? Pe https://github.com/pixelgrade/customify/commit/8722900d78aefe5117e6dec8ea7a29628cc77918

[victor-panaite]

Am adaugat checked state, dar @ilincaroman trebuie uploaded din nou tick-ul pentru ca deocamdata e doar un patrat descentrat. Pot sa upload aici si il pun eu

[ilincaroman]

@victor-panaite Here's the checkmark. :)

[victor-panaite]

@ilincaroman done cu checkmark-ul

[ilincaroman]

@victor-panaite Well dooone, aici cred ca ii al clear, baietii! Sper ca nu ratez nimic, se inchide 🙌