Examinez les véritables tokens publics de Seeds pour les couleurs, l’espacement, la typographie des produits et les bordures dans une file complète de révision éditoriale, avec sélection mixte, états vides après filtrage et annulation.
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--100
2px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--200
4px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--300
8px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--350
12px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--400
16px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--450
24px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--500
32px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
--space-size--600
40px
Véritables jetons en pixels de CSS. Le package fournit aussi des équivalents en rem calculés sur une base de 18 px ; ne supposez pas une conversion sur une base de 16 px.
Jetons de produit et périmètre de l’environnement d’exécution du système de design Sprout Social Seeds
Utilisez les fondations du produit
Seeds distingue la typographie du produit de celle de la marque. La file d’attente utilise le véritable jeton de famille de polices système du package typographique public, ainsi que les jetons publiés de couleur, d’espacement et de bordure. Elle ne charge pas une police de marque destinée au marketing en prétendant reproduire le système du produit. Les versions des packages sont verrouillées dans la configuration afin que la référence et l’exemple restent comparables.
Distinguez les jetons des composants
Le chargement des packages de jetons Seeds expose des variables ; il ne crée ni éditeur de publication ni arborescence de composants React. Les cartes, la logique de sélection et l’action locale de révision de cette étude sont du code OpenDesign original. La page désigne délibérément cette approche comme une implémentation fondée sur des jetons. Les composants natifs React de Seeds ont leurs propres exigences d’intégration, décrites dans les ressources officielles sur les composants.
Références de palette, d’espacement et de typographie du système de design Sprout Social Seeds
Utilisez les noms exacts des jetons
La référence comprend des noms réellement exportés, tels que --space-size--350 pour 12 px et --border-radius-600 pour 8 px. Impossible de déduire ces noms en multipliant une valeur de l’échelle. CSS importe directement les fichiers de jetons et utilise leurs variables ; il est donc possible de retrouver la valeur affichée dans la distribution verrouillée, au lieu de s’appuyer sur une palette supposée.
Tenez compte de la base rem
Le package d’espacement fournit des valeurs en pixels et en rem. Par exemple, le pas de 16 px est aussi représenté par 0.8888888888888888rem, sur la base de 18 px. L’étude utilise les valeurs des jetons en pixels pour rendre l’espacement prévu explicite. Remplacer ces valeurs par des rem sans discernement sur une racine de 16 px modifierait la densité au lieu de la préserver.
Cartes éditoriales et contexte de révision du système de design Sprout Social Seeds
Rendez chaque carte utile avant toute interaction
Chaque carte comporte un canal, un état, un titre original et une courte publication complète. Une section secondaire dépliable présente les critères de révision. Le contenu est un exercice fictif et l’espace de travail n’est relié à aucun compte social. Chaque carte peut ainsi présenter une tâche crédible sans laisser entendre qu’elle donne accès à de véritables publications ou à des statistiques.
Faites en sorte que les accents de la marque restent discrets face au contenu
Le bleu identifie l’action de validation de la file d’attente d’origine, tandis que le vert accompagne le texte « Prêt à être relu ». Ces rôles sont des choix de l’application qui s’appuient sur de vraies couleurs de la palette. Le statut est toujours indiqué en toutes lettres : sa signification ne dépend donc pas de la couleur. Les bordures et l’espacement séparent les trois publications sans remplacer un contenu lisible par des éléments décoratifs fictifs.
Système de design Sprout Social Seeds — sélection visible et état mixte
Limiter la sélection multiple à la vue actuelle
La commande « Sélectionner les publications visibles » s’applique à l’ensemble filtré. Si une seule carte est sélectionnée parmi plusieurs cartes visibles, la case de sélection multiple prend son état indéterminé natif. Lorsque le filtre change, la sélection est effacée afin qu’une action ultérieure ne puisse pas modifier un enregistrement masqué. Le nombre affiché indique à la fois le nombre de résultats visibles et le nombre d’éléments sélectionnés.
La sélection multiple s’applique uniquement aux enregistrements visibles.
Une sélection mixte utilise la propriété native indeterminate.
Tout changement de filtre efface la sélection.
L’état des actions est calculé à partir des brouillons sélectionnés.
N’activer qu’une action pertinente
Système de design Sprout Social Seeds — états vides filtrés et annulation
Permettre de revenir à une file vide
Lorsque tous les brouillons visibles sont marqués comme prêts pendant que le filtre « Brouillons » est actif, le résultat est naturellement vide. L’état vide explique que les enregistrements existent toujours et propose la commande « Afficher toutes les publications ». Il n’affiche ni indicateur de chargement ni fausse erreur réseau pour un résultat local connu. La différence entre l’absence de résultats et l’absence d’enregistrements reste claire.
Annuler uniquement la dernière modification réelle
L’application conserve le statut précédent uniquement pour les enregistrements modifiés lors de la dernière action de validation. La commande « Annuler » restaure ces valeurs, actualise la vue actuelle et redonne le focus au filtre. Elle ne réinitialise pas les autres enregistrements et ne prétend pas annuler la publication d’une publication sur un réseau social. Une nouvelle opération groupée remplace la seule annulation disponible, conformément au libellé « Annuler la dernière modification ».
Système de design Sprout Social Seeds — file d’attente exécutable complète et vérifications
Utiliser les quatre distributions de jetons
Le code source importe les jetons de couleur, d’espacement, de typographie et de bordure CSS avant la feuille de styles de composition d’origine. Enregistrez ensemble les fichiers complets main.js, seeds.css et la coquille HTML. L’aperçu regroupe ces mêmes valeurs publiques et le code de l’application, sans polices distantes ni serveur dorsal. Les versions exactes des packages figurent dans la commande d’installation.
Installez les quatre packages de jetons Seeds avec leurs versions figées.
Enregistrez le point d’entrée fourni, CSS et l’élément racine HTML.
Testez la sélection mixte avant de changer le filtre.
Vérifiez le retour après un résultat filtré vide et l’annulation après une validation groupée.
Tester différentes combinaisons d’états
Sélectionnez une publication et vérifiez l’état mixte de la sélection multiple. Passez au filtre « Brouillons » et vérifiez que la sélection est effacée. Sélectionnez les brouillons visibles, marquez-les comme prêts et examinez le résultat vide. Annulez et confirmez que les deux brouillons réapparaissent, puis affichez toutes les publications. Sur un écran de téléphone, les cartes s’organisent en une seule colonne de lecture, tandis que les libellés et les commandes de validation restent accessibles.
Système de design Sprout Social Seeds — exemples de composants
main.js — file d’attente éditoriale complète
Données d’origine, filtre, sélection mixte, modification groupée et annulation.
javascript
import '@sproutsocial/seeds-color/dist/seeds-color.css';
import '@sproutsocial/seeds-space/dist/seeds-space.css';
import '@sproutsocial/seeds-typography/dist/seeds-typography.css';
import '@sproutsocial/seeds-border/dist/seeds-border.css';
import './seeds.css';
let items=[{id:'p1',title:'A clearer first step',channel:'Team updates',copy:'A useful guide starts with the task someone needs to complete. This week, we are revisiting the first step in our workshop toolkit.',status:'Draft'},{id:'p2',title:'Room for different perspectives',channel:'Community notes',copy:'Good workshop preparation creates more than an agenda. It gives people time to think and more than one way to contribute.',status:'Draft'},{id:'p3',title:'From notes to next actions',channel:'Team updates',copy:'Close a conversation with a decision, an owner and a date to look again. Keep open questions visible alongside the agreed next step.',status:'Ready for review'}];let chosen=new Set(),previous=null;
document.querySelector('#root').innerHTML=`<main><header><div><p class="eyebrow">OpenDesign · Editorial practice</p><h1>A small queue, ready for a closer look</h1><p>Prepare original sample posts for review. This workspace does not connect to social accounts or publish content.</p></div><span class="badge">3 sample posts</span></header><section class="filters" aria-label="Queue controls"><label>Status <select id="filter"><option>All posts</option><option>Draft</option><option>Ready for review</option></select></label><label class="select-all"><input type="checkbox" id="all">Select visible posts</label><button id="review" disabled>Mark ready for review</button></section><p id="count" role="status"></p><div id="posts"></div><section id="empty" hidden><h2>No posts in this view</h2><p>Your sample posts remain available in the full queue.</p><button id="clear">Show all posts</button></section><div id="notice" hidden><p id="message" role="status"></p><button id="undo">Undo last change</button></div><footer>Uses the published Seeds color, space, typography and border token packages. The post cards, selection model and local review action are original OpenDesign code, not Sprout Social’s application or native React components.</footer></main>`;
function visible(){let value=document.querySelector('#filter').value;return items.filter(x=>value==='All posts'||x.status===value)}
function updateSelection(){let rows=visible(),selected=rows.filter(x=>chosen.has(x.id));const all=document.querySelector('#all');all.checked=rows.length>0&&selected.length===rows.length;all.indeterminate=selected.length>0&&selected.length<rows.length;all.disabled=!rows.length;document.querySelector('#review').disabled=!selected.some(x=>x.status==='Draft');document.querySelector('#count').textContent=`${rows.length} posts shown · ${selected.length} selected`;}
function render(){let rows=visible();chosen=new Set([...chosen].filter(id=>rows.some(x=>x.id===id)));const root=document.querySelector('#posts');root.replaceChildren(...rows.map(x=>{let a=document.createElement('article');a.innerHTML=`<div class="post-head"><label><input type="checkbox" data-id="${x.id}" aria-label="Select ${x.title}" ${chosen.has(x.id)?'checked':''}><span class="channel">${x.channel}</span></label><span class="status ${x.status==='Draft'?'draft':'ready'}">${x.status}</span></div><h2>${x.title}</h2><p class="copy">${x.copy}</p><details><summary>Review checklist</summary><ul><li>The first sentence makes the subject clear.</li><li>The wording describes a real next step.</li><li>The post does not promise an unavailable feature.</li></ul></details>`;a.querySelector('input').onchange=e=>{e.target.checked?chosen.add(x.id):chosen.delete(x.id);updateSelection()};return a}));document.querySelector('#empty').hidden=rows.length>0;updateSelection();}
document.querySelector('#filter').onchange=()=>{chosen.clear();render()};document.querySelector('#all').onchange=e=>{chosen=new Set(e.target.checked?visible().map(x=>x.id):[]);render()};document.querySelector('#review').onclick=()=>{let changed=items.filter(x=>chosen.has(x.id)&&x.status==='Draft');if(!changed.length)return;previous=changed.map(x=>({id:x.id,status:x.status}));changed.forEach(x=>x.status='Ready for review');chosen.clear();render();document.querySelector('#notice').hidden=false;document.querySelector('#message').textContent=`${changed.length} ${changed.length===1?'post marked':'posts marked'} ready for review locally. Nothing was published.`;};document.querySelector('#undo').onclick=()=>{previous?.forEach(p=>{items.find(x=>x.id===p.id).status=p.status});previous=null;render();document.querySelector('#notice').hidden=true;document.querySelector('#filter').focus()};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All posts';render();document.querySelector('#filter').focus()};render();
Remplacez le fichier index.html racine de Vite par ce fichier.
04
Configuration de l’agent pour le système de design Sprout Social Seeds
Point de départ de l’implémentation
Il s’agit de packages de jetons publics. L’application de validation complète est constituée du code d’origine fourni ci-dessus.
sh
npm create vite@latest seeds-review -- --template vanilla
cd seeds-review
npm install
npm install @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected] @sproutsocial/[email protected]
# Save index.html at root; main.js and seeds.css in src.
npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Construisez la file d’attente éditoriale fournie à l’aide des packages publics de jetons Seeds, dont les versions sont figées dans CSS. Conservez les noms réels des jetons, la typographie système du produit, la sélection limitée aux éléments visibles, l’état mixte natif, les mises à jour groupées réservées aux brouillons, la possibilité de revenir d’un état vide et l’annulation en une étape. Gardez le contenu d’exemple d’origine et ne laissez jamais entendre qu’un compte social est connecté ou qu’une publication a été effectuée.
05
Système de design Sprout Social Seeds — sources et périmètre
Une application OpenDesign d’origine qui utilise les packages de jetons Seeds publiés. Les cartes et le flux de validation sont des éléments originaux HTML/JavaScript, et non des composants natifs Seeds React. Aucun compte social n’est connecté et rien n’est publié.
