# Système de design Web Awesome ## Aperçu de l’interface du système de design Web Awesome Modifiez les échelles de rayon et d’espacement, changez l’apparence de l’exemple, sélectionnez une région et validez le nom d’un espace de travail local. ## Référence de conception du système de design Web Awesome Thème par défaut Web Awesome 3.14.0 CSS, examiné dans le package installé. Les entrées de couleur ci-dessous sont des alias sémantiques ; les références à la palette sont conservées au lieu d’être remplacées par des équivalents hexadécimaux supposés. Les exemples en pixels dérivés des échelles partent d’une racine de 16px et d’une échelle de 1. ### Rôles sémantiques des surfaces et du texte | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --wa-color-surface-default | white | Surface principale de l’exemple. | | --wa-color-surface-raised | white | Couche surélevée. | | --wa-color-surface-lowered | var(--wa-color-neutral-95) | Surface de lecture du code. | | --wa-color-surface-border | var(--wa-color-neutral-90) | Limite du conteneur. | | --wa-color-text-normal | var(--wa-color-neutral-10) | Texte normal. | | --wa-color-text-quiet | var(--wa-color-neutral-40) | Texte secondaire. | | --wa-color-text-link | var(--wa-color-brand-40) | Rôle de lien. | | --wa-color-brand-fill-loud | var(--wa-color-brand-50) | Aplat de marque fort. | | --wa-color-brand-on-loud | white | Texte sur un aplat de marque fort. | | --wa-color-brand-fill-quiet | var(--wa-color-brand-95) | Aplat discret de badge. | | --wa-color-brand-on-quiet | var(--wa-color-brand-40) | Texte sur un aplat de marque discret. | ### Espacement et formes | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --wa-space-scale | 1 | Multiplicateur utilisé par les jetons d’espacement. | | --wa-space-xs | calc(var(--wa-space-scale) * 0.5rem) | 8px avec l’échelle par défaut. | | --wa-space-s | calc(var(--wa-space-scale) * 0.75rem) | 12px avec l’échelle par défaut. | | --wa-space-m | calc(var(--wa-space-scale) * 1rem) | 16px avec l’échelle par défaut. | | --wa-space-l | calc(var(--wa-space-scale) * 1.5rem) | 24px avec l’échelle par défaut. | | --wa-space-xl | calc(var(--wa-space-scale) * 2rem) | 32px avec l’échelle par défaut. | | --wa-space-2xl | calc(var(--wa-space-scale) * 2.5rem) | 40px avec l’échelle par défaut. | | --wa-border-radius-scale | 1 | Multiplicateur utilisé par les rayons adaptables. | | --wa-border-radius-s | calc(var(--wa-border-radius-scale) * 0.1875rem) | 3px avec l’échelle par défaut. | | --wa-border-radius-m | calc(var(--wa-border-radius-scale) * 0.375rem) | 6px avec l’échelle par défaut. | | --wa-border-radius-l | calc(var(--wa-border-radius-scale) * 0.75rem) | 12px avec l’échelle par défaut. | ### Typographie | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --wa-font-family-body | ui-sans-serif, system-ui, sans-serif | Police système sans empattement pour le corps du texte. | | --wa-font-family-heading | var(--wa-font-family-body) | Alias de famille de polices pour les titres. | | --wa-font-family-code | ui-monospace, monospace | Lecture en police à chasse fixe. | | --wa-font-size-scale | 1 | Multiplicateur de l’échelle typographique. | | --wa-font-size-m | calc(1rem * var(--wa-font-size-scale)) | 16px avec une racine et une échelle par défaut. | | --wa-font-size-l | round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px) | 20px avec une racine et une échelle par défaut. | | --wa-font-size-xl | round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px) | 25px avec une racine et une échelle par défaut. | | --wa-font-size-2xl | round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px) | 32px avec une racine et une échelle par défaut. | | --wa-line-height-condensed | 1.2 | Titres et libellés condensés. | | --wa-line-height-normal | 1.6 | Hauteur de ligne normale pour la lecture. | ### Alias des contrôles de formulaire | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --wa-form-control-background-color | var(--wa-color-surface-default) | Alias de surface du champ de saisie. | | --wa-form-control-border-color | var(--wa-color-neutral-border-loud) | Rôle de délimitation du champ de saisie. | | --wa-form-control-border-radius | var(--wa-border-radius-m) | Alias du rayon du champ. | | --wa-form-control-label-color | var(--wa-color-text-normal) | Couleur accessible pour les libellés. | | --wa-form-control-hint-color | var(--wa-color-text-quiet) | Alias de couleur des indications. | ## Guide complet du système de design Web Awesome 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. ## Éléments personnalisés du système de design Web Awesome avec leur propre frontière de composant ### Éléments personnalisés avec leur propre frontière de composant > Web Awesome fournit des éléments personnalisés HTML enregistrés, sans imposer l’utilisation d’une application React. Après l’importation de wa-input ou de wa-select, l’élément peut être placé dans du HTML ordinaire et contrôlé à l’aide de ses propriétés et événements documentés. Cet atelier regroupe la version 3.14.0 et utilise uniquement les composants disponibles dans le package public. Les contrôles visibles sont les véritables éléments personnalisés, y compris leur implémentation dans le shadow DOM. L’en-tête, les sections et la zone de lecture qui les entourent sont propres à HTML. L’exemple permet ainsi d’observer quelles décisions de style franchissent la frontière du composant par l’intermédiaire des propriétés personnalisées héritées, et lesquelles relèvent de la composition de la page. Consultez la spécification associée ## Conserver les alias sémantiques de couleur du système de design Web Awesome ### Préserver les alias de couleurs sémantiques Le thème par défaut distingue les surfaces surélevées, normales et abaissées, le texte normal et discret, ainsi que plusieurs paires d’aplats de marque et de couleurs de premier plan associées. La zone de lecture des jetons utilise la surface abaissée, l’exemple principal la surface normale et le petit badge associe brand-fill-quiet à brand-on-quiet. Ces rôles restent pertinents lorsque l’apparence change. La référence conserve des alias tels que var(--wa-color-neutral-10) au lieu de convertir chaque rôle en valeur hexadécimale supposée. La palette peut changer tout en préservant la validité de l’affectation sémantique. Pour personnaliser une action de marque forte, tenez compte à la fois de l’aplat et de sa couleur de premier plan. Modifier l’un sans l’autre peut rendre le texte du bouton difficile à lire. Consultez la spécification associée ## Modifier l’échelle du système de design Web Awesome sans réécrire chaque composant ### Modifier l’échelle sans réécrire chaque composant Le sélecteur de rayon modifie --wa-border-radius-scale uniquement sur l’exemple. Avec une échelle de un, les rayons petits, moyens et grands par défaut correspondent à trois, six et douze pixels avec une racine de seize pixels. Une échelle de zéro rend carrés ces angles adaptables ; une échelle de deux les double. Les jetons pilule et cercle sont des notions distinctes et ne doivent pas être considérés comme dépendant de ce multiplicateur. Le sélecteur d’espacement modifie --wa-space-scale. Le rembourrage, les espacements et l’espace autour de la zone de lecture de l’exemple utilisent les jetons d’espacement officiels ; leurs proportions évoluent donc ensemble. Cela ne signifie pas que toutes les dimensions de chaque composant changent d’échelle : les dimensions des contrôles de composant suivent leurs propres relations entre jetons. Le panneau de réglage étant hors du périmètre, la comparaison reste stable pendant que l’exemple change. 1. Choisissez « Carré » et observez les angles du champ de saisie, du conteneur et de la zone de lecture. 2. Choisissez un espacement « Aéré » et comparez les espacements de l’exemple à ceux du panneau de réglage, qui restent inchangés. 3. Rétablissez les valeurs par défaut pour réinitialiser ensemble les deux multiplicateurs et l’apparence. Consultez la spécification associée ## Jetons typographiques et choix originaux de titres du système de design Web Awesome ### Jetons typographiques et choix de titres originaux La famille par défaut du corps du texte est ui-sans-serif, system-ui, sans-serif. La famille des titres reprend celle du corps du texte, tandis que le code utilise ui-monospace. Le jeton de hauteur de ligne normale vaut 1.6 ; celui de la hauteur condensée, 1.2. Le jeton typographique moyen correspond à un rem multiplié par font-size-scale, et les tailles supérieures utilisent des calculs arrondis. Le tableau présente ces expressions au lieu d’en masquer les dépendances. L’atelier utilise des titres de 34px et des titres de section de 23px ; le titre de la page est réduit lorsque le point de rupture local atteint 700px. Ces règles sont propres à la page. Les champs natifs conservent le style des libellés et des indications de la bibliothèque, ce qui permet de comparer une hiérarchie de page personnalisée à la typographie par défaut des composants. Consultez la spécification associée ## Valeurs initiales, propriétés et événements de modification du système de design Web Awesome ### Valeurs initiales, propriétés et événements de modification Chaque sélecteur contient des éléments wa-option aux valeurs stables. Les options par défaut utilisent selected, conformément aux recommandations actuelles des composants pour la sélection initiale. Les changements à l’exécution lisent la propriété value du sélecteur. Les contrôles du thème écoutent les événements change et mettent à jour les propriétés personnalisées de CSS ; ils n’extraient pas le texte des libellés d’option affichés. Le sélecteur de région est un champ de démonstration ordinaire ; il ne contrôle aucun service de stockage externe. La valeur sélectionnée est indiquée dans le message d’action local. L’interface ne laisse pas entendre que le choix de l’Europe alloue de l’espace de stockage. Cette distinction est importante lorsqu’une démonstration de composant réaliste reprend le vocabulaire d’un produit. Consultez la spécification associée ## Styliser avec des jetons et des parties documentées dans le système de design Web Awesome ### Appliquer des styles au moyen des jetons et des parties documentées Les sélecteurs descendants ordinaires ne permettent pas d’accéder librement à l’arbre d’ombre d’un composant. Cet exemple utilise des variables de thème héritées afin de coordonner l’arrière-plan, le texte et le rayon du champ avec le reste de HTML. Il s’agit d’une surface de stylisation prise en charge, et non d’une tentative de cibler le balisage interne généré. Pour les modifications propres à un composant, consultez les propriétés personnalisées CSS et les parties CSS documentées pour ce composant. Un sélecteur global ciblant les champs de saisie ne modifiera pas nécessairement le champ interne de wa-input. À l’inverse, placer une classe de thème ou une variable sur un ancêtre commun peut intentionnellement affecter de nombreux éléments personnalisés descendants ; il faut donc choisir soigneusement la portée. Consultez la spécification associée ## Mise à niveau du système de design Web Awesome, validation et résultats locaux ### Mise à niveau, validation et résultats locaux Du point de vue de la page, l’enregistrement des composants est asynchrone. L’exemple attend que customElements.whenDefined soit résolu pour les API utilisées, puis attend la mise à jour des sélecteurs avant de lire leurs valeurs initiales. Cela évite d’appliquer des valeurs par défaut à un élément qui n’a pas encore été mis à niveau d’une balise HTML inconnue vers sa classe de composant. L’action sur l’espace de travail utilise setCustomValidity et reportValidity sur wa-input. Un nom dont la longueur, après suppression des espaces superflus, est inférieure à deux caractères est refusé ; un événement input efface l’erreur personnalisée pour permettre une nouvelle tentative après correction. Le bouton Invite later désactivé utilise l’état natif désactivé du composant. Le texte d’état indique uniquement qu’un nom a été appliqué localement, et le code complet n’envoie aucune requête de création ou d’allocation d’espace de travail. - Les attributs label fournissent des libellés accessibles. - Les indications expliquent la contrainte sur le nom avant qu’une erreur ne survienne. - L’action désactivée reste inactive tout en indiquant son utilité. Consultez la spécification associée ## Importer le thème et les composants utilisés dans le système de design Web Awesome ### Importer le thème et les composants utilisés Installez @awesome.me/webawesome@3.14.0 dans une application Vite vanilla et utilisez le main.js fourni comme point d’entrée. La feuille de style du thème par défaut est obligatoire ; l’exemple ne charge volontairement pas le reset natif plus étendu ni le lot d’utilitaires, car la mise en page de la page est explicite CSS. Les imports enregistrent les cinq types de composants utilisés dans le balisage. Les modules npm dist sont destinés aux outils de bundling. La distribution dist-cdn est l’alternative pour le chargement direct de modules dans le navigateur, car les dépendances y sont regroupées différemment. Ne copiez pas un import dist dans une balise script classique en supposant que les dépendances bare seront résolues. Les composants qui nécessitent des ressources externes requièrent la configuration documentée du chemin de base ; cet exemple n’utilise pas d’icônes fournies par l’utilisateur et est regroupé pour fonctionner hors ligne. Consultez la spécification associée ## Composants publics et limites explicites des thèmes dans le système de design Web Awesome ### Composants publics et limites du thème clairement définies L’atelier présente le thème par défaut et les composants publics. Certains composants, motifs et ressources de design Web Awesome sont proposés dans l’offre Pro ; la page ne laisse donc pas entendre que l’installation du package public donne accès à tous les éléments du catalogue. Avant d’ajouter un composant comme dépendance obligatoire dans un système de design partagé, vérifiez qu’il est disponible. Un thème de produit réutilisable doit préciser les variables modifiées, leur portée et la manière dont les deux modes d’apparence sont vérifiés. L’atelier interactif illustre ce processus à petite échelle : le lecteur peut examiner les variables exactes qui ont été modifiées et comparer les composants natifs obtenus, plutôt que de se fier à une image de palette sans lien avec le résultat. Consultez la spécification associée ## Exemples de composants du système de design Web Awesome ### Balisage de l’atelier d’éléments personnalisés wa-select, wa-option, wa-input, wa-switch et wa-button natifs, associés à des éléments HTML sémantiques classiques. ```

WEB AWESOME / TOKEN WORKBENCH

See the theme cross the component boundary.

Change a scoped token and inspect native custom elements alongside ordinary HTML.

Theme controls

Square / 0Default / 1Rounder / 2Compact / 0.8Default / 1Relaxed / 1.25Dark appearanceRestore defaults

These controls change only the specimen. The editing controls keep their original dimensions.

COMPONENT PREVIEWFree components

Your next workspace

Form labels, field borders and actions inherit semantic tokens through the shadow boundary.

EuropeNorth AmericaAsia Pacific
Apply name locallyInvite later

No workspace is created by this specimen.

--wa-border-radius-scale: 1;
--wa-space-scale: 1;
``` Référence du code - Les choix initiaux sont définis avec l’attribut selected sur wa-option. - Seuls des composants gratuits sont utilisés. ### Imports complets et commandes de réglage des jetons Enregistre les composants, attend leur mise à niveau, modifie les propriétés personnalisées à portée limitée et applique une validation locale. ``` import '@awesome.me/webawesome/dist/styles/themes/default.css'; import '@awesome.me/webawesome/dist/components/button/button.js'; import '@awesome.me/webawesome/dist/components/input/input.js'; import '@awesome.me/webawesome/dist/components/select/select.js'; import '@awesome.me/webawesome/dist/components/option/option.js'; import '@awesome.me/webawesome/dist/components/switch/switch.js'; import './style.css'; const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;} Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()}); ``` Référence du code - whenDefined évite de lire un élément personnalisé API qui n’a pas été mis à niveau. - Le code importe uniquement les composants utilisés. ### Élément d’exemple à portée limitée CSS Les éléments HTML classiques utilisent les mêmes variables de thème héritées que les éléments personnalisés natifs. ``` *{box-sizing:border-box}body{margin:0;font-family:var(--wa-font-family-body);font-size:16px;line-height:var(--wa-line-height-normal);color:var(--wa-color-text-normal);background:#f5f6f8}.token-workbench{max-width:1100px;margin:auto;padding:32px}header{max-width:740px;margin-bottom:28px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em}h2{font-size:23px;line-height:1.25}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700}.workbench-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px}.controls{display:flex;flex-direction:column;gap:20px;padding:24px;background:white;border:1px solid #d9dde3;border-radius:12px}.controls h2{margin:0}.hint,footer{color:var(--wa-color-text-quiet);font-size:14px}.specimen{background:var(--wa-color-surface-default);color:var(--wa-color-text-normal);border:1px solid var(--wa-color-surface-border);border-radius:var(--wa-border-radius-l);padding:var(--wa-space-xl);display:flex;flex-direction:column;gap:var(--wa-space-l)}.specimen h2,.specimen p{margin:0}.sample-head,.sample-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--wa-space-s)}.sample-head{justify-content:space-between}.badge{font-size:10px;letter-spacing:.09em;font-weight:700;background:var(--wa-color-brand-fill-quiet);color:var(--wa-color-brand-on-quiet);padding:4px 8px;border-radius:var(--wa-border-radius-s)}.token-readout{background:var(--wa-color-surface-lowered);padding:var(--wa-space-m);border-radius:var(--wa-border-radius-m);font:13px/1.7 var(--wa-font-family-code);white-space:pre-wrap;overflow-wrap:anywhere}#result{font-size:13px}footer{margin-top:20px}@media(max-width:700px){.token-workbench{padding:20px 16px}.workbench-grid{grid-template-columns:1fr}.controls{padding:20px}h1{font-size:28px}.specimen{padding:var(--wa-space-l)}} ``` Référence du code - Le titre de l’atelier et le point de rupture de la mise en page sont des choix originaux. ### Document index.html complet Document racine Vite pour le main.js et la feuille de style fournis. ``` Web Awesome token workbench

WEB AWESOME / TOKEN WORKBENCH

See the theme cross the component boundary.

Change a scoped token and inspect native custom elements alongside ordinary HTML.

Theme controls

Square / 0Default / 1Rounder / 2Compact / 0.8Default / 1Relaxed / 1.25Dark appearanceRestore defaults

These controls change only the specimen. The editing controls keep their original dimensions.

COMPONENT PREVIEWFree components

Your next workspace

Form labels, field borders and actions inherit semantic tokens through the shadow boundary.

EuropeNorth AmericaAsia Pacific
Apply name locallyInvite later

No workspace is created by this specimen.

--wa-border-radius-scale: 1;
--wa-space-scale: 1;
``` Référence du code - Créez un projet Vite vanilla et utilisez les fichiers main.js et style.css complets présentés ci-dessus. ## Configuration de l’agent du système de design Web Awesome ### Point de départ de l’implémentation Les exemples complets de main.js, CSS et body reproduisent l’atelier avec un outil de bundling. La démo hors ligne est un bundle esbuild dans lequel le thème CSS est intégré. Aucun fournisseur React n’est requis. ``` // Create a Vite vanilla project, then install: // npm install @awesome.me/webawesome@3.14.0 // index.html: paste the complete workbench markup in body, // then add . // main.js: use the complete imports and token-controls example above. // style.css: use the complete scoped specimen CSS above. // Minimum registration pattern used by this example: import '@awesome.me/webawesome/dist/styles/themes/default.css'; import '@awesome.me/webawesome/dist/components/button/button.js'; import '@awesome.me/webawesome/dist/components/input/input.js'; import '@awesome.me/webawesome/dist/components/select/select.js'; import '@awesome.me/webawesome/dist/components/option/option.js'; import '@awesome.me/webawesome/dist/components/switch/switch.js'; // Do not duplicate these imports if using the complete main.js above. ``` ### Un prompt pour votre projet ``` Utilisez l’atelier de jetons à portée limitée Web Awesome 3.14.0 et enregistrez les éléments wa-select, wa-option, wa-input, wa-button et wa-switch fournis. Attendez la définition des composants et la résolution de updateComplete avant de lire les sélections initiales. Appliquez --wa-border-radius-scale et --wa-space-scale uniquement à la zone de l’exemple, et basculez sa classe wa-light/wa-dark sans modifier le reste de la page. Synchronisez l’affichage des valeurs des jetons avec les commandes natives et conservez les libellés. Utilisez l’atelier pour l’inspection, et non comme interface de gestion des appareils. ``` ## Sources et portée du système de design Web Awesome Composants publics et thème par défaut Web Awesome 3.14.0. Les choix de mise en page sont originaux ; l’application locale d’un nom ne crée aucun espace de travail ni stockage. - Installation npm/dist, dist-cdn et thème requis. - Jetons de design Catégories de jetons du thème. - Personnalisation Propriétés personnalisées et limites de l’ombre portée. - Select Options, valeurs et sélection initiale. - Input Validation API. - Switch Élément personnalisé booléen. ## Ressources associées au système de design Web Awesome ### Ariakit Ariakit fournit des composants React sans style, avec un état partagé explicite et des éléments accessibles combinables. Son combobox distingue la saisie de texte de la sélection validée, ce qui le rend utile pour les sélecteurs pilotés par la recherche ; le chercheur de références ci-dessous illustre cette distinction à l’aide de résultats regroupés et indisponibles. ### Bits UI Bits UI fournit des composants Svelte sans interface prédéfinie, composés à l’aide d’éléments natifs et de l’état de Svelte 5. L’exemple associe une case à cocher à état mixte calculé, des sections d’accordéon dépliables indépendamment et une boîte de dialogue de révision basée sur un portail, avec la configuration de style complète. ### Bootstrap Utilisez Bootstrap 5.3.8 avec son échelle d’espacement réelle, ses couleurs sémantiques, sa grille adaptative et ses API de composants. Essayez un formulaire de réservation fonctionnel, un récapitulatif des erreurs, un filtre de tableau, une fenêtre modale et un sélecteur de mode de couleur, puis réutilisez le code documenté. - [Référence de mise en œuvre](https://webawesome.com/docs/customizing) - [Source](https://webawesome.com/docs/tokens/) - [Consultez la spécification associée](https://webawesome.com/docs/usage) - [Consultez la spécification associée](https://webawesome.com/docs/tokens/) - [Consultez la spécification associée](https://webawesome.com/docs/customizing) - [Consultez la spécification associée](https://webawesome.com/docs/components/select/) - [Consultez la spécification associée](https://webawesome.com/docs/components/input/) - [Consultez la spécification associée](https://webawesome.com/docs/) - [Référence du code](https://webawesome.com/docs/components/select/) - [Référence du code](https://webawesome.com/docs) - [Référence du code](https://webawesome.com/docs/customizing) - [Référence du code](https://webawesome.com/) - [Installation npm/dist, dist-cdn et thème requis.](https://webawesome.com/docs/) - [Jetons de design Catégories de jetons du thème.](https://webawesome.com/docs/tokens/) - [Personnalisation Propriétés personnalisées et limites de l’ombre portée.](https://webawesome.com/docs/customizing) - [Select Options, valeurs et sélection initiale.](https://webawesome.com/docs/components/select/) - [Input Validation API.](https://webawesome.com/docs/components/input/) - [Switch Élément personnalisé booléen.](https://webawesome.com/docs/components/switch/)