Themiser un design system

Imaginez : vous êtes ingénieur UX chez Proton.
Vous avez en charge la communication entre l'équipe design et l'équipe de développeurs JS, et vous maintenez et faites évoluer un design system lié à un components system, utilisé sur quatre applications web riches en constante évolution, utilisés par des millions de gens chaque jour à travers le monde.
Vous proposez d'ajouter la fonctionnalité de thèmes visuels au nombre indéfini, parce que ça vous plairait bien en tant qu'utilisateur, que vous voudriez proposer un thème sombre, un thème contrasté plus accessible, et des thèmes farfelus, le Saint Graal étant de permettre à l'utilisateur final d'en créer avec un maximum de dix couleurs.

En tant que développeur, vous vous dites que ça va être chaud, mais qu'importe : vous aimez les challenges.
Bien sûr, c'est une très bonne idée rapidement validée ! Ok, mais comment ? C'est à cette question que je vais répondre : comment nous avons défini un langage commun entre designers et développeurs, une taxonomie éprouvée maintenant utilisée sur toutes les applications web de Proton, et une flexibilité poussée pour parer aux évolutions graphiques et aux demandes spécifiques.

Transcript

1. Bonsoir
   je suis matthieu.
   

   View Slide

2. UX Engineer
   Formateur front
   

   View Slide

3. THEMISER
   design
   system
   1
   

   View Slide

4. Un peu de contexte
   

   View Slide

5. View Slide

6. Un meilleur Internet où la vie privée est la valeur par
   défaut grâce à un écosystème de produits chiffrés
   proton.me/about
   

   View Slide

7. 70M+
   comptes
   utilisateurs
   400+
   employés
   dans 20+ pays
   63
   pays avec
   serveurs VPN
   40+
   nationalités
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. Proton Core Web
    Components system
    Design system
    

    View Slide

14. Proton Core Web
    Components system
    Design system
    ? ?
    

    View Slide

15. Un design system
    est un ensemble de
    composants
    interconnectés,
    partagés, et
    organisés de
    manière cohérente.
    ”
    

    View Slide

16. C’est quoi « thémiser » ?
    changer des couleurs, mais pas que…
    

    View Slide

17. design
    system
    CSS
    thème
    CSS
    design
    system
    SCSS
    design
    system
    SCSS
    design
    system
    SCSS
    design
    system
    SCSS
    design
    system
    SCSS
    thème
    CSS
    thème
    CSS
    thème
    CSS
    thème
    CSS
    

    View Slide

18. La taxonomie est la
    pratique et la
    science de la
    catégorisation ou de
    la classification
    ”
    

    View Slide

19. Plusieurs challenges
    Définir une
    taxonomie qui
    fonctionne
    réellement
    Définir
    Appliquer cette
    taxonomie
    partout dans le
    design system
    Appliquer Étendre Expliquer
    Créer plusieurs
    thèmes pour
    éprouver la
    taxonomie et
    ses applications
    Rendre cette
    taxonomie et son
    utilisation
    compréhensibles
    pour tous ceux
    qui l'utiliseront
    1 2 3 4
    

    View Slide

20. Premier problème
    

    View Slide

21. View Slide

22. 2 thèmes en 1
    

    View Slide

23. Sections séparées
    header / navigation main
    UI prominent UI standard
    

    View Slide

24. Sections séparées
    UI prominent UI standard
    color-1: value
    color-2: value
    color-3: value
    color-4: value
    color-5: value
    color-1: value
    color-2: value
    color-3: value
    color-4: value
    color-5: value
    

    View Slide

25. Sections séparées
    UI prominent UI standard
    color-1: value
    color-2: value
    color-3: value
    color-4: value
    color-5: value
    color-1: value
    color-2: value
    color-3: value
    color-4: value
    color-5: value
    

    View Slide

26. Sections imbriquées
    UI prominent
    comme surcharge
    UI standard par défaut
    color-1: overridden-value
    color-4: overridden-value
    color-5: overridden-value
    color-1: value
    color-2: value
    color-3: value
    color-4: value
    color-5: value
    

    View Slide

27. Sections imbriquées
    :root,
    .ui-standard {
    --css-variable: value;
    }
    .ui-prominent {
    --css-variable: overridden-value;
    }
    

    View Slide

28. Une couleur,
    de nombreux
    contextes
    

    View Slide

29. Une couleur sera utilisée n'importe où
    ● Ne doit pas faire référence au contexte
    ● Ne doit pas faire référence à la couleur elle-même
    ● Une abstraction de la couleur
    

    View Slide

30. :root,
    .ui-standard {
    --text-norm: #0c0c14;
    --background-norm: white;
    }
    .ui-prominent {
    --text-norm: #ded7ff;
    --background-norm: #1b1340;
    }
    Une couche d’abstraction
    

    View Slide

31. primary
    primary-contrast
    signal-danger
    signal-danger-hover
    signal-danger-active
    signal-danger-contrast
     
    signal-warning
    signal-warning-hover
    signal-warning-active
    signal-warning-contrast
     
    signal-success
    signal-success-hover
    signal-success-active
    signal-success-contrast
     
    signal-info
    signal-info-hover
    signal-info-active
    signal-info-contrast
    interaction-norm
    interaction-norm-hover
    interaction-norm-active
    interaction-norm-contrast
     
    interaction-weak
    interaction-weak-hover
    interaction-weak-active
     
    interaction-default
    interaction-default-hover
    interaction-default-active
     
    shadow-norm-opacity
    shadow-lifted-opacity
     
    backdrop-norm
    text-norm
    text-weak
    text-hint
    text-disabled
    text-invert
     
    field-norm
    field-hover
    field-disabled
     
    border-norm
    border-weak
     
    background-norm
    background-weak
    background-strong
    

    View Slide

32. Et les spécificités ?
    

    View Slide

33. selector {
    property: var(--custom-property);
    }
    

    View Slide

34. selector {
    property: var(--custom-property, declaration-value);
    }
    selector {
    property: var(--custom-property);
    }
    

    View Slide

35. selector {
    property: var(--custom-property, declaration-value);
    }
    selector {
    property: var(--custom-property, var(--custom-property));
    }
    selector {
    property: var(--custom-property);
    }
    

    View Slide

36. selector {
    property: var(--custom-property, declaration-value);
    }
    selector {
    property: var(--custom-property, var(--custom-property));
    }
    selector {
    property: var(--optional-var, var(--fallback-var));
    }
    selector {
    property: var(--custom-property);
    }
    

    View Slide

37. Permettre aux utilisateurs de modifier plus
    facilement les thèmes en injectant des css
    Deux objectifs
    Permettre l'adaptation de propriétés css pour
    certains thèmes dans des cas spécifiques
    

    View Slide

38. :root,
    .ui-standard,
    .ui-prominent {
    --email-item-read-text-color:
    var(--optional-email-item-read-text-color, var(--text-norm));
    }
    .email-item--read {
    color: var(--email-item-read-text-color);
    }
    Couche optionnelle dans un fichier de mapping
    Utilisation dans le fichier du composant
    :root,
    .ui-standard {
    --optional-email-item-read-text-color: var(--text-weak);
    }
    Déclaration dans le fichier de thème
    1
    2
    3
    

    View Slide

39. --usage-location[-state]-impacted-property
    Convention de nommage
    

    View Slide

40. link-norm
    link-hover
    link-active
    selection-background-color
    selection-text-color
    header-background-color
    sidebar-background-color
    navigation-current-item-marker-color
    navigation-current-item-background-color
    navigation-current-item-text-color
    main-box-shadow
    main-border-color
    navigation-item-count-background-color
    navigation-item-count-text-color
    toolbar-background-color
    toolbar-border-bottom-color
    toolbar-text-color
    toolbar-separator-color
    scrollbar-thumb-color
    scrollbar-thumb-hover-color
    tooltip-background-color
    tooltip-text-color
    email-item-unread-background-color
    email-item-unread-text-color
    email-item-unread-icon-background-color
    email-item-unread-icon-text-color
    email-item-read-background-color
    email-item-read-text-color
    email-item-read-icon-background-color
    email-item-read-icon-text-color
    email-item-selected-background-color
    email-item-selected-text-color
    email-item-selected-icon-background-color
    email-item-selected-icon-text-color
    email-message-view-background-color
    email-message-view-comfort-background-color
    field-background-color
    field-text-color
    field-placeholder-color
    field-hover-background-color
    field-hover-text-color
    field-focus-background-color
    field-focus-text-color
    field-disabled-background-color
    field-disabled-text-color
    select-background-color
    favorite-icon-color
    mark-background-color
    mark-text-color
    mark-font-weight
    modal-background-color
    modal-text-color
    file-preview-text-color
    file-preview-background-color
    mini-calendar-today-color
    border-radius
    shadow-norm
    shadow-lifted
    logo-text-proton-color
    logo-text-product-color
    logo-icon-text-color
    font-family
    Liste des optionnelles
    actuelles
    

    View Slide

41. Et à l’utilisation ?
    

    View Slide

42. Valeur
    thémisable
    3 cas d’usage
    Valeur
    themisable
    avec
    optionnelle
    Valeur
    statique
    commun rare exceptionnel
    

    View Slide

43. Démo ?
    

    View Slide

44. Et après ?
    

    View Slide

45. Thèmes personnalisés
    

    View Slide

46. primary
    primary-contrast
    signal-danger
    signal-danger-hover
    signal-danger-active
    signal-danger-contrast
     
    signal-warning
    signal-warning-hover
    signal-warning-active
    signal-warning-contrast
     
    signal-success
    signal-success-hover
    signal-success-active
    signal-success-contrast
     
    signal-info
    signal-info-hover
    signal-info-active
    signal-info-contrast
    interaction-norm
    interaction-norm-hover
    interaction-norm-active
    interaction-norm-contrast
     
    interaction-weak
    interaction-weak-hover
    interaction-weak-active
     
    interaction-default
    interaction-default-hover
    interaction-default-active
     
    shadow-norm-opacity
    shadow-lifted-opacity
     
    backdrop-norm
    text-norm
    text-weak
    text-hint
    text-disabled
    text-invert
     
    field-norm
    field-hover
    field-disabled
     
    border-norm
    border-weak
     
    background-norm
    background-weak
    background-strong
    

    View Slide

47. primary
    primary-contrast
    signal-danger
    signal-danger-hover
    signal-danger-active
    signal-danger-contrast
     
    signal-warning
    signal-warning-hover
    signal-warning-active
    signal-warning-contrast
     
    signal-success
    signal-success-hover
    signal-success-active
    signal-success-contrast
     
    signal-info
    signal-info-hover
    signal-info-active
    signal-info-contrast
    interaction-norm
    interaction-norm-hover
    interaction-norm-active
    interaction-norm-contrast
     
    interaction-weak
    interaction-weak-hover
    interaction-weak-active
     
    interaction-default
    interaction-default-hover
    interaction-default-active
     
    shadow-norm-opacity
    shadow-lifted-opacity
     
    backdrop-norm
    text-norm
    text-weak
    text-hint
    text-disabled
    text-invert
     
    field-norm
    field-hover
    field-disabled
     
    border-norm
    border-weak
     
    background-norm
    background-weak
    background-strong
    

    View Slide

48. primary
    primary-contrast
    signal-danger
    signal-danger-hover
    signal-danger-active
    signal-danger-contrast
     
    signal-warning
    signal-warning-hover
    signal-warning-active
    signal-warning-contrast
     
    signal-success
    signal-success-hover
    signal-success-active
    signal-success-contrast
     
    signal-info
    signal-info-hover
    signal-info-active
    signal-info-contrast
    interaction-norm
    interaction-norm-hover
    interaction-norm-active
    interaction-norm-contrast
     
    interaction-weak
    interaction-weak-hover
    interaction-weak-active
     
    interaction-default
    interaction-default-hover
    interaction-default-active
     
    shadow-norm-opacity
    shadow-lifted-opacity
     
    backdrop-norm
    text-norm
    text-weak
    text-hint
    text-disabled
    text-invert
     
    field-norm
    field-hover
    field-disabled
     
    border-norm
    border-weak
     
    background-norm
    background-weak
    background-strong
    

    View Slide

49. 90%
    80%
    base
    10%
    20%
    30%
    teinte
    nuance
    minor 2
    minor 1
    major 1
    major 2
    major 3
    

    View Slide

50. default
    hover
    active
    default
    hover
    active
    solid outlined
    minor 2
    minor 1
    major 1
    major 2
    major 3
    minor 2
    minor 1
    major 1
    major 2
    major 3
    

    View Slide

51. une couche de calcul
    :root,
    .ui-standard,
    .ui-prominent {
    --signal-danger-hover: var(--signal-danger-major-1);
    --signal-danger-active: var(--signal-danger-major-2);
    /* … */
    --interaction-norm-hover: var(--interaction-norm-major-1);
    --interaction-norm-active: var(--interaction-norm-major-2);
    }
    

    View Slide

52. Problème !
    

    View Slide

53. ✓ ×
    default
    hover
    active
    default
    hover
    active
    

    View Slide

54. ✓ ✓
    default
    hover
    active
    default
    hover
    active
    

    View Slide

55. --background-norm --background-norm
    thème clair thème sombre
    

    View Slide

56. Calcul pour
    thème clair
    Calcul
    pour
    thème
    sombre
    

    View Slide

57. base
    prominent
    CSS
    thème
    CSS
    base
    standard
    CSS calculs
    

    View Slide

58. Work in progress
    

    View Slide

59. Maîtriser les calculs
    

    View Slide

60. default
    hover
    active
    default
    hover
    active
    Laisser le choix du contraste
    

    View Slide

61. Démo ?
    

    View Slide

62. Merci.
    Matthieu Bué . UX Engineer . @twikito
    

    View Slide

63. recrute
    Core Web Engineering Manager,
    Core iOS Engineering Manager,
    and more…
    

    View Slide