Themiser un design system

Slide 1

Slide 1 text

Bonsoir je suis matthieu.

Slide 2

Slide 2 text

UX Engineer Formateur front

Slide 3

Slide 3 text

THEMISER design system 1

Slide 4

Slide 4 text

Un peu de contexte

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Proton Core Web Components system Design system

Slide 14

Slide 14 text

Proton Core Web Components system Design system ? ?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

La taxonomie est la pratique et la science de la catégorisation ou de la classiﬁcation ”

Slide 19

Slide 19 text

Plusieurs challenges Déﬁnir une taxonomie qui fonctionne réellement Déﬁnir 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

Slide 20

Slide 20 text

Premier problème

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

2 thèmes en 1

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Une couleur, de nombreux contextes

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Et les spécificités ?

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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); }

Slide 37

Slide 37 text

Permettre aux utilisateurs de modiﬁer 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éciﬁques

Slide 38

Slide 38 text

: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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Et à l’utilisation ?

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Démo ?

Slide 44

Slide 44 text

Et après ?

Slide 45

Slide 45 text

Thèmes personnalisés

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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); }