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.
2. UX Engineer Formateur front
3. THEMISER design system 1
4. Un peu de contexte
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
7. 70M+ comptes utilisateurs 400+ employés dans 20+ pays 63 pays avec serveurs VPN 40+ nationalités
13. Proton Core Web Components system Design system
14. Proton Core Web Components system Design system ? ?
15. Un design system est un ensemble de composants interconnectés, partagés, et organisés de manière cohérente. ”
16. C’est quoi « thémiser » ? changer des couleurs, mais pas que…
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
18. La taxonomie est la pratique et la science de la catégorisation ou de la classification ”
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
20. Premier problème
22. 2 thèmes en 1
23. Sections séparées header / navigation main UI prominent UI standard
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
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
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
27. Sections imbriquées :root, .ui-standard { --css-variable: value; } .ui-prominent { --css-variable: overridden-value; }
28. Une couleur, de nombreux contextes
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
30. :root, .ui-standard { --text-norm: #0c0c14; --background-norm: white; } .ui-prominent { --text-norm: #ded7ff; --background-norm: #1b1340; } Une couche d’abstraction
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
32. Et les spécificités ?
33. selector { property: var(--custom-property); }
34. selector { property: var(--custom-property, declaration-value); } selector { property: var(--custom-property); }
35. selector { property: var(--custom-property, declaration-value); } selector { property: var(--custom-property, var(--custom-property)); } selector { property: var(--custom-property); }
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); }
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
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
39. --usage-location[-state]-impacted-property Convention de nommage
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
41. Et à l’utilisation ?
42. Valeur thémisable 3 cas d’usage Valeur themisable avec optionnelle Valeur statique commun rare exceptionnel
43. Démo ?
44. Et après ?
45. Thèmes personnalisés
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
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
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
49. 90% 80% base 10% 20% 30% teinte nuance minor 2 minor 1 major 1 major 2 major 3
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
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); }
52. Problème !
53. ✓ × default hover active default hover active
54. ✓ ✓ default hover active default hover active
55. --background-norm --background-norm thème clair thème sombre
56. Calcul pour thème clair Calcul pour thème sombre
57. base prominent CSS thème CSS base standard CSS calculs
58. Work in progress
59. Maîtriser les calculs
60. default hover active default hover active Laisser le choix du contraste
61. Démo ?
62. Merci. Matthieu Bué . UX Engineer . @twikito
63. recrute Core Web Engineering Manager, Core iOS Engineering Manager, and more…