Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Themiser un design system

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.

Matthieu Bué

October 07, 2022
Tweet

More Decks by Matthieu Bué

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. La taxonomie est la pratique et la science de la

    catégorisation ou de la classification ”
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. :root, .ui-standard { --text-norm: #0c0c14; --background-norm: white; } .ui-prominent {

    --text-norm: #ded7ff; --background-norm: #1b1340; } Une couche d’abstraction
  10. 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
  11. selector { property: var(--custom-property, declaration-value); } selector { property: var(--custom-property,

    var(--custom-property)); } selector { property: var(--custom-property); }
  12. 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); }
  13. 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
  14. :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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 90% 80% base 10% 20% 30% teinte nuance minor 2

    minor 1 major 1 major 2 major 3
  20. 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
  21. 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); }