# Système de design Zendesk Garden

## Aperçu de l’interface du système de design Zendesk Garden

Modifiez la visibilité de la réponse, vérifiez un court brouillon, enregistrez un instantané local et préparez le brouillon suivant.

## Référence de conception du système de design Zendesk Garden

ThemeProvider, Buttons et Forms de Native Garden 9.16.1 React ; processus de rédaction local original.

### Contrôler l’arrondi

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| borderRadii.sm | 2px | Choisissez la forme selon le rôle du composant ; l’arrondi moyen par défaut n’est pas une forme de pilule. |
| borderRadii.md | 4px | Choisissez la forme selon le rôle du composant ; l’arrondi moyen par défaut n’est pas une forme de pilule. |
| borderRadii.lg | 8px | Choisissez la forme selon le rôle du composant ; l’arrondi moyen par défaut n’est pas une forme de pilule. |
### Points de rupture adaptatifs

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| breakpoints.xs | 0px | Points de rupture du thème ; ils ne garantissent pas que l’application change chaque zone à chaque étape. |
| breakpoints.sm | 576px | Points de rupture du thème ; ils ne garantissent pas que l’application change chaque zone à chaque étape. |
| breakpoints.md | 768px | Points de rupture du thème ; ils ne garantissent pas que l’application change chaque zone à chaque étape. |
| breakpoints.lg | 992px | Points de rupture du thème ; ils ne garantissent pas que l’application change chaque zone à chaque étape. |
| breakpoints.xl | 1200px | Points de rupture du thème ; ils ne garantissent pas que l’application change chaque zone à chaque étape. |
### Tailles de texte

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| fontSizes.xs | 10px | Conservez des rôles distincts pour le corps de texte, les libellés, les métadonnées et les titres. |
| fontSizes.sm | 12px | Conservez des rôles distincts pour le corps de texte, les libellés, les métadonnées et les titres. |
| fontSizes.md | 14px | Conservez des rôles distincts pour le corps de texte, les libellés, les métadonnées et les titres. |
| fontSizes.lg | 18px | Conservez des rôles distincts pour le corps de texte, les libellés, les métadonnées et les titres. |
| fontSizes.xl | 22px | Conservez des rôles distincts pour le corps de texte, les libellés, les métadonnées et les titres. |
| fontSizes.xxl | 26px | Conservez des rôles distincts pour le corps de texte, les libellés, les métadonnées et les titres. |
| fontSizes.xxxl | 36px | Conservez des rôles distincts pour le corps de texte, les libellés, les métadonnées et les titres. |
### Hauteurs de ligne

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| lineHeights.sm | 16px | À utiliser avec le rôle de texte ; ne déduisez pas toutes les hauteurs de ligne de la taille de police. |
| lineHeights.md | 20px | À utiliser avec le rôle de texte ; ne déduisez pas toutes les hauteurs de ligne de la taille de police. |
| lineHeights.lg | 24px | À utiliser avec le rôle de texte ; ne déduisez pas toutes les hauteurs de ligne de la taille de police. |
| lineHeights.xl | 28px | À utiliser avec le rôle de texte ; ne déduisez pas toutes les hauteurs de ligne de la taille de police. |
| lineHeights.xxl | 32px | À utiliser avec le rôle de texte ; ne déduisez pas toutes les hauteurs de ligne de la taille de police. |
| lineHeights.xxxl | 44px | À utiliser avec le rôle de texte ; ne déduisez pas toutes les hauteurs de ligne de la taille de police. |
### Paliers d’espacement

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| space.base | 4 | Valeurs d’espacement du thème pour un rythme régulier. |
| space.xxs | 4px | Valeurs d’espacement du thème pour un rythme régulier. |
| space.xs | 8px | Valeurs d’espacement du thème pour un rythme régulier. |
| space.sm | 12px | Valeurs d’espacement du thème pour un rythme régulier. |
| space.md | 20px | Valeurs d’espacement du thème pour un rythme régulier. |
| space.lg | 32px | Valeurs d’espacement du thème pour un rythme régulier. |
| space.xl | 40px | Valeurs d’espacement du thème pour un rythme régulier. |
| space.xxl | 48px | Valeurs d’espacement du thème pour un rythme régulier. |
### Mappage des rôles sémantiques clairs

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| colors.variables.light.background.default | palette.white | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.background.subtle | neutralHue.100 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.background.danger | dangerHue.100 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.background.primaryEmphasis | primaryHue.700 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.foreground.default | neutralHue.900 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.foreground.subtle | neutralHue.700 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.foreground.onEmphasis | palette.white | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.foreground.primary | primaryHue.700 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.foreground.danger | dangerHue.700 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.border.default | neutralHue.300 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.border.subtle | neutralHue.200 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.border.danger | dangerHue.300 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
| colors.variables.light.border.primaryEmphasis | primaryHue.700 | Alias de rôle du thème ; résolvez-le à partir de la teinte et de la palette sélectionnées, plutôt que de traiter l’alias comme une couleur CSS. |
## Guide complet du système de design Zendesk Garden

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Structure de l’espace de travail du système de design Zendesk Garden

### Gardez la demande du client sous les yeux

> Un éditeur de réponse pour le support doit afficher assez de contexte pour éviter une réponse soignée, mais hors sujet. Cet exemple place la demande du client au-dessus du brouillon, avec le demandeur, l’organisation et le sujet à côté. L’interface est suffisamment dense pour comparer le nouveau texte à la question d’origine sans changer d’écran.

### Séparez l’historique du brouillon actif

Les entrées enregistrées localement apparaissent au-dessus de l’éditeur, avec une indication explicite de leur visibilité. Le brouillon actif reste dans le Textarea natif. L’enregistrement ajoute un instantané et vide ce champ, afin que les modifications ultérieures ne réécrivent pas silencieusement une note déjà enregistrée.

## Rôles et palette du thème du système de design Zendesk Garden

### Consultez les alias avant de copier les couleurs

Dans Garden 9 DEFAULT_THEME, les rôles sémantiques sont associés à des familles de teintes et à des valeurs numérotées de la palette. Un rôle tel que background.primaryEmphasis n’est pas une valeur hexadécimale littérale. Le tableau de référence conserve ces alias : un thème personnalisé peut ainsi changer la teinte principale sans laisser de fragments bleus codés en dur dans les contrôles natifs.

### Assurez la compatibilité des zones personnalisées avec le fournisseur de thème

ThemeProvider fournit le style des composants natifs. Cet exemple utilise DEFAULT_THEME et un espace de travail personnalisé clair assorti ; il n’ajoute pas de faux bouton de mode sombre qui ne ferait que modifier l’arrière-plan environnant. Si vous ajoutez la prise en charge de color-scheme, adaptez les couleurs personnalisées des messages et de la barre latérale en même temps que celles du fournisseur.

## Typographie et densité du système de design Zendesk Garden

### Gardez le texte de travail en 14px lisible

Le thème par défaut propose un rôle moyen de 14px avec une hauteur de ligne moyenne de 20px, ainsi que des rôles distincts de 12px pour le texte secondaire et de 18px pour les titres. L’exemple utilise un titre de ticket de 26px et des métadonnées de contexte plus petites. Le message d’origine du client et les notes enregistrées restent en texte courant plutôt que d’être réduits à des libellés.

### Laissez les longues réponses revenir naturellement à la ligne

Le texte enregistré conserve les sauts de ligne et permet aux mots longs de revenir à la ligne. Même sur un écran mobile étroit, la note complète reste visible sans défilement horizontal. L’éditeur s’agrandit verticalement grâce à son textarea, au lieu de transformer tout l’historique des messages en zone de défilement interne.

## Composition des champs et des boutons du système de design Zendesk Garden

### Associez le libellé, l’aide et l’erreur

Le composant Field natif regroupe Label, Hint, Textarea et le composant Message conditionnel. La propriété de validation modifie l’apparence du textarea lorsque la règle de longueur minimale définie par l’application n’est pas respectée. Cette approche suit la composition du composant, au lieu d’appliquer une couleur d’erreur à un paragraphe sans rapport situé en dehors du champ.

### Prévoyez un contrôle distinct pour la visibilité

Un Select natif permet de choisir entre Public reply et Internal note. Le libellé et l’aide s’adaptent au mode, qui est également conservé dans l’instantané enregistré. Dans les deux cas, l’action reste Save local draft, ce qui indique clairement que choisir Public reply n’envoie pas de message.

## État du brouillon et historique local du système de design Zendesk Garden

### Validez avant d’ajouter un message

L’application exige au moins douze caractères après suppression des espaces en début et en fin de texte. En cas d’échec, le brouillon est conservé, un message s’affiche dans le champ et le focus est placé sur le textarea. Une modification efface l’erreur devenue obsolète ; la soumission suivante vérifie à nouveau le texte actuel. Cette règle relève du comportement de l’application, et non d’une valeur par défaut non documentée de Garden.

### Distinguez visuellement les notes internes

Les entrées internes ont un arrière-plan personnalisé chaleureux et portent le libellé explicite Internal note draft. Les entrées publiques utilisent la surface normale. Les deux indiquent explicitement Not sent. Cette distinction présente le contexte de visibilité sans imiter une conversation Zendesk en direct ni laisser entendre qu’une autre personne a reçu quoi que ce soit.

## Zones de travail adaptatives du système de design Zendesk Garden

### Placez le contexte sous la tâche principale

Au point de rupture de l’application, le contexte du ticket passe sous la conversation et l’éditeur. L’ordre des éléments dans le document reste inchangé. Sur un téléphone, le contrôle de visibilité occupe toute la largeur disponible et la rangée d’actions passe à la ligne afin que le texte des boutons ne soit pas comprimé.

### Utilisez des arrondis modérés et des séparateurs fins

Les contrôles natifs utilisent l’échelle d’arrondi de 2px, 4px et 8px. Les panneaux de message personnalisés ont des angles de 4px et des bordures discrètes. Réservez l’accentuation visuelle la plus forte à l’action active et à l’état de validation, plutôt que d’ajouter des ombres autour de chaque message.

## Validation et récupération au clavier du système de design Zendesk Garden

### Testez l’ensemble du processus de rédaction

Un test utile commence par une soumission invalide, puis vérifie que la saisie, le changement de visibilité, l’enregistrement et l’effacement restent compréhensibles. Le code source utilise un React ref pour rétablir le focus après une erreur ou une action d’effacement. Le nombre de résultats est annoncé dans une région d’état.

1. Soumettez un court brouillon et observez l’erreur de champ.

2. Choisissez « Note interne », rédigez une note utile et enregistrez-la.

3. Effacez un brouillon ultérieur et vérifiez que l’instantané local enregistré est conservé.

### Préserver un ordre de lecture stable

La demande précède le brouillon, et les nouveaux instantanés locaux enregistrés restent dans l’ordre chronologique. Les boutons natifs présentent leurs actions sous forme de texte. Aucun raccourci clavier ni comportement d’envoi automatique n’est dissimulé dans le composeur, et le choix de visibilité reste une liste déroulante avec libellé.

## Intégration du système de design Zendesk Garden React

### Installer des versions de packages compatibles

Cet exemple fixe les versions du thème, des boutons et des formulaires à 9.16.1 et utilise React 18 avec styled-components. Mélanger des versions plus anciennes des packages Garden peut créer des attentes incompatibles concernant le thème. Le fichier JSX complet comprend le fournisseur, la composition des champs et l’état local, tandis que le fichier CSS ne contient que la mise en page définie par l’application.

- @zendeskgarden/react-theming 9.16.1

- @zendeskgarden/react-buttons 9.16.1

- @zendeskgarden/react-forms 9.16.1

### Étendre uniquement la couche de service manquante

Pour en faire un véritable outil d’assistance, ajoutez des données de tickets autorisées, des contrôles d’accès et une fonctionnalité d’envoi/de brouillon vérifiée API, avec gestion des états en attente et des erreurs. Conservez le fonctionnement des instantanés locaux tant que ces réponses ne sont pas disponibles. Ne remplacez pas le libellé du bouton par « Envoyer » simplement parce que la validation du formulaire réussit.

## Exemples de composants du système de conception Zendesk Garden

### main.jsx — exemple complet fonctionnel

Rédigez une réponse en gardant le contexte du client à l’écran. Le code source ci-dessous est le fichier React complet, avec toute la gestion de l’état et la validation.

```
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider, DEFAULT_THEME } from "@zendeskgarden/react-theming";
import { Button } from "@zendeskgarden/react-buttons";
import {
  Field,
  Label,
  Textarea,
  Hint,
  Message,
  Select,
} from "@zendeskgarden/react-forms";
import "./garden.css";
function App() {
  const [mode, setMode] = useState("public"),
    [text, setText] = useState(""),
    [error, setError] = useState(false),
    [items, setItems] = useState([]);
  const ref = useRef();
  function submit(e) {
    e.preventDefault();
    if (text.trim().length < 12) {
      setError(true);
      ref.current.focus();
      return;
    }
    setItems([...items, { mode, text: text.trim() }]);
    setText("");
    setError(false);
  }
  return (
    <ThemeProvider theme={DEFAULT_THEME}>
      <main className="garden-workspace">
        <header>
          <span>SUPPORT WORKSPACE / FICTIONAL TICKET</span>
          <h1>Help with an invoice address</h1>
          <p>Ticket #1028 · Nadia Walker · Email channel</p>
        </header>
        <div className="garden-grid">
          <section>
            <div className="message customer">
              <strong>Nadia Walker</strong>
              <small>Customer · example message</small>
              <p>
                Could you update the company address on our next invoice? The
                billing contact has changed.
              </p>
            </div>
            {items.map((i, n) => (
              <article className={"message " + i.mode} key={n}>
                <strong>
                  {i.mode === "public"
                    ? "Public reply draft"
                    : "Internal note draft"}
                </strong>
                <small>Saved locally · not sent</small>
                <p>{i.text}</p>
              </article>
            ))}
            <form onSubmit={submit} noValidate>
              <div className="composer-head">
                <h2>Compose a draft</h2>
                <Field>
                  <Label>Visibility</Label>
                  <Select
                    value={mode}
                    onChange={(e) => setMode(e.target.value)}
                  >
                    <option value="public">Public reply</option>
                    <option value="internal">Internal note</option>
                  </Select>
                </Field>
              </div>
              <Field>
                <Label>
                  {mode === "public" ? "Reply text" : "Internal note"}
                </Label>
                <Hint>
                  {mode === "public"
                    ? "Prepared for the customer; this demo will not send it."
                    : "Internal context for the support team; saved only in this page."}
                </Hint>
                <Textarea
                  ref={ref}
                  value={text}
                  rows={5}
                  validation={error ? "error" : undefined}
                  onChange={(e) => {
                    setText(e.target.value);
                    setError(false);
                  }}
                />
                {error && (
                  <Message validation="error">
                    Write at least 12 characters.
                  </Message>
                )}
              </Field>
              <div className="composer-actions">
                <span>{text.length} characters</span>
                <Button
                  type="button"
                  onClick={() => {
                    setText("");
                    setError(false);
                    ref.current.focus();
                  }}
                >
                  Clear draft
                </Button>
                <Button isPrimary type="submit">
                  Save local draft
                </Button>
              </div>
            </form>
            <p role="status">
              {items.length > 0
                ? `${items.length} draft${items.length === 1 ? "" : "s"} saved locally. No message sent.`
                : ""}
            </p>
          </section>
          <aside>
            <h2>Ticket context</h2>
            <dl>
              <dt>Requester</dt>
              <dd>Nadia Walker</dd>
              <dt>Organization</dt>
              <dd>Northstar Studio</dd>
              <dt>Priority</dt>
              <dd>Normal</dd>
              <dt>Topic</dt>
              <dd>Billing details</dd>
            </dl>
            <div className="context-note">
              <h3>Before replying</h3>
              <ul>
                <li>Confirm the billing contact.</li>
                <li>Keep invoice identifiers out of public examples.</li>
                <li>State whether the change affects future invoices.</li>
              </ul>
            </div>
          </aside>
        </div>
        <footer>
          Native Garden 9.16.1 React components. Original local drafting
          workflow; no Zendesk connection.
        </footer>
      </main>
    </ThemeProvider>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Référence du code

- Créez un projet Vite React, conservez <div id="root"></div> et chargez ce fichier comme src/main.jsx.

### garden.css — composition adaptative d’origine

Mise en page de l’application construite autour des composants natifs.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    14px/1.5 system-ui,
    sans-serif;
  color: #293239;
  background: #f8f9f9;
}
.garden-workspace header {
  padding: 24px 32px;
  background: white;
  border-bottom: 1px solid #d8dcde;
}
.garden-workspace header span {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #5c6970;
}
.garden-workspace h1 {
  font-size: 26px;
  line-height: 1.3;
  margin: 8px 0;
}
.garden-workspace header p {
  color: #5c6970;
  margin: 0;
}
.garden-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  padding: 24px 32px;
}
.message {
  padding: 20px;
  background: white;
  border: 1px solid #d8dcde;
  border-radius: 4px;
  margin-bottom: 16px;
}
.message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 12px 0 0;
}
.message small {
  display: block;
  color: #5c6970;
  margin-top: 4px;
}
.message.internal {
  background: #fff8ed;
  border-color: #e7ce99;
}
form {
  padding: 24px;
  background: white;
  border: 1px solid #d8dcde;
  border-radius: 4px;
}
.composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.composer-head > div {
  max-width: 220px;
}
.garden-workspace h2 {
  font-size: 18px;
  margin: 0 0 12px;
}
.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.composer-actions span {
  font-size: 12px;
  color: #5c6970;
  margin-right: auto;
}
.garden-grid aside {
  background: white;
  border: 1px solid #d8dcde;
  border-radius: 4px;
  padding: 20px;
  align-self: start;
}
dl {
  margin: 0;
}
dt {
  font-size: 12px;
  color: #5c6970;
  margin-top: 16px;
}
dd {
  margin: 4px 0 0;
  font-weight: 600;
}
.context-note {
  margin-top: 24px;
  border-top: 1px solid #e8eaec;
  padding-top: 16px;
}
.context-note h3 {
  font-size: 14px;
}
.context-note ul {
  padding-left: 18px;
  font-size: 12px;
}
.context-note li {
  margin: 8px 0;
}
footer {
  padding: 16px 32px;
  font-size: 12px;
  color: #5c6970;
  border-top: 1px solid #d8dcde;
  background: white;
}
@media (max-width: 850px) {
  .garden-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .garden-grid {
    padding: 16px;
  }
  .garden-workspace header {
    padding: 20px 16px;
  }
  .composer-head {
    display: block;
  }
  .composer-head > div {
    max-width: none;
  }
  .composer-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .composer-actions span {
    width: 100%;
  }
  form {
    padding: 16px;
  }
}
```

Référence du code

- Enregistrez ce fichier à côté de main.jsx. Ces règles de composition personnalisées se distinguent de la référence des jetons de la bibliothèque.

## Configuration de l’agent d’IA du système de conception Zendesk Garden

### Point de départ de l’implémentation

L’exemple natif épinglé a été assemblé et vérifié localement dans un navigateur. Cet exemple utilise uniquement l’état local de l’application.

```
npm create vite@latest garden-draft -- --template react
cd garden-draft
npm install
npm install react@18.3.1 react-dom@18.3.1 styled-components @zendeskgarden/react-theming@9.16.1 @zendeskgarden/react-buttons@9.16.1 @zendeskgarden/react-forms@9.16.1
# Replace src/main.jsx and add src/garden.css.
npm run dev
```

### Un prompt pour votre projet

```
Créez un composeur d’assistance Garden en utilisant la composition native Field/Label/Hint/Textarea/Message. Conservez le choix de visibilité dans chaque instantané de brouillon enregistré, validez avant l’ajout, préservez le contexte du client et distinguez l’enregistrement local de l’envoi. Utilisez les rôles de thème exacts et le code source complet présent ici.
```

## Sources et périmètre du système de conception Zendesk Garden

Guide de l’application OpenDesign. Les composants natifs de Garden affichent l’exemple ; le contenu fictif des tickets et les brouillons locaux ne sont pas connectés à Zendesk et n’envoient aucun message.

- Formulaires Garden Composition native de Field, Label et de la validation.

- Boutons Garden Variantes d’action et tailles prises en charge.

- Source du thème DEFAULT_THEME, palette et échelles.

## Ressources connexes du système de conception Zendesk Garden

### Adeo Mozaic

Créez une interface pratique de contrôle des quantités avec l’unité magique de 16 px de Mozaic, des commandes assorties de 48 px, de véritables imports SCSS et des classes BEM. Le planificateur de rayonnage permet d’observer les limites, les erreurs typées et un récapitulatif local des matériaux.

### Adobe Spectrum

Étudiez React Spectrum v3 à l’aide d’un tableau de ressources créatives sélectionnables et d’un inspecteur de préréglages d’exportation. Découvrez les thèmes Provider, l’échelle des champs de saisie, les propriétés de style prises en charge, les collections indexées et les différences entre v3 et la nouvelle implémentation Spectrum 2.

### Alaska Airlines Auro

Explorez le thème Alaska d’Auro à travers de véritables jetons sémantiques de couleur et de typographie, une typographie fondée sur des classes et le composant de vol natif. Deux vols fictifs d’origine illustrent le filtrage et la sélection locaux sans représenter l’inventaire ni les réservations d’une compagnie aérienne.


- [Référence de mise en œuvre](https://garden.zendesk.com/components/input/)
- [Source](https://github.com/zendeskgarden/react-components/tree/main/packages/theming)
- [Référence du code](https://garden.zendesk.com/components/input/)
- [Formulaires Garden Composition native de Field, Label et de la validation.](https://garden.zendesk.com/components/input/)
- [Boutons Garden Variantes d’action et tailles prises en charge.](https://garden.zendesk.com/components/button/)
- [Source du thème DEFAULT_THEME, palette et échelles.](https://github.com/zendeskgarden/react-components/tree/main/packages/theming)