Изучите фактические публичные токены цвета, интервалов, продуктовой типографики и границ в Seeds на примере полноценной редакторской очереди: с выбором нескольких элементов, пустыми состояниями после фильтрации и отменой действия.
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--100
2px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--200
4px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--300
8px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--350
12px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--400
16px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--450
24px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--500
32px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
--space-size--600
40px
Настоящие пиксельные токены CSS. В пакете также есть эквиваленты в rem, рассчитанные исходя из базового размера 18px; не следует считать, что они рассчитаны на 16px.
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-font-size--100
11px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-font-size--200
13px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-font-size--300
16px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-font-size--400
18px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-font-size--500
21px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-font-size--600
24px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-font-size--700
32px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-line-height--300
24px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
--typography-line-height--500
29.333333333333332px
Опубликованные значения пакета типографики. В примере продукта используется системное семейство шрифтов, а не фирменный шрифт Proxima Nova для маркетинговых материалов.
Токены продукта и область действия среды выполнения дизайн-системы Sprout Social Seeds
Используйте основы продукта
Seeds разделяет типографику продукта и фирменную типографику. В очереди используется фактический токен семейства системных шрифтов из общедоступного пакета типографики вместе с опубликованными токенами цвета, отступов и границ. Маркетинговый шрифт не загружается, поэтому пример не выдаёт себя за воспроизведение продуктовой системы. Версии пакетов зафиксированы в настройках, чтобы справочник и пример можно было сопоставить.
Разделяйте токены и компоненты
Загрузка пакетов токенов Seeds предоставляет переменные, но не создаёт редактор публикаций или дерево компонентов React. Карточки, логика выделения и локальное действие проверки в этом примере — оригинальный код OpenDesign. На странице он прямо обозначен как реализация на основе токенов. Для интеграции нативных компонентов Seeds React требуются отдельные инструкции, доступные в официальных ресурсах компонентов.
Справочник по палитре, отступам и типографике дизайн-системы Sprout Social Seeds
Используйте точные имена токенов
В справочник включены реальные экспортируемые имена, например --space-size--350 для 12px и --border-radius-600 для 8px. Эти имена нельзя вывести, просто умножив значение на шкале. CSS напрямую импортирует файлы токенов и использует их переменные, поэтому можно проследить связь между отображаемым значением и закреплённым дистрибутивом, а не полагаться на предположительную палитру.
Учитывайте базовый размер для rem
В пакете отступов доступны значения в пикселях и rem. Например, шаг 16px также представлен как 0.8888888888888888rem, что соответствует базовому размеру 18px. В примере используются пиксельные формы токенов, чтобы явно задать предполагаемые отступы. Если без проверки подставить значения rem в корневой размер 16px, плотность изменится, а не сохранится.
Редакционные карточки и контекст проверки в дизайн-системе Sprout Social Seeds
Сделайте каждую карточку полезной ещё до взаимодействия
У каждой карточки есть канал, статус, оригинальный заголовок и короткая публикация с полным текстом. В дополнительном раскрывающемся блоке приведены критерии проверки. Контент вымышлен и создан для упражнений; рабочее пространство не связано с аккаунтами в социальных сетях. Благодаря этому карточка выглядит правдоподобно и при этом не создаёт впечатления, будто она предоставляет доступ к настоящим публикациям или аналитике.
Не позволяйте акцентам фирменной палитры мешать чтению
Синий обозначает действие проверки в оригинальной очереди, а зелёный сопровождает текст «Готово к проверке». Это назначение ролей — решение, принятое для приложения с использованием настоящих цветов палитры. Статус всегда указан текстом, поэтому его значение не зависит от восприятия цвета. Границы и отступы разделяют три публикации, не подменяя читаемый контент декоративными заглушками.
Выделение видимых элементов и смешанное состояние в дизайн-системе Sprout Social Seeds
Применяйте массовое выделение только к текущему представлению
Действие «Выбрать видимые публикации» применяется к отфильтрованному набору. Если выбрать только одну из нескольких видимых карточек, флажок массового выбора перейдёт в нативное промежуточное состояние. При смене фильтра выделение сбрасывается, поэтому последующее действие не затронет скрытую запись. В счётчике отображаются и количество видимых элементов, и количество выбранных.
Массовое выделение применяется только к видимым записям.
Для смешанного выделения используется нативное свойство indeterminate.
При смене фильтра выделение сбрасывается.
Доступность действия зависит от статуса выбранных черновиков.
Разрешайте только осмысленные действия
Пустые состояния после фильтрации и отмена действий в дизайн-системе Sprout Social Seeds
Сохраняйте возможность восстановить очередь, даже если она пуста
Если отметить как готовые к проверке все видимые черновики при активном фильтре «Черновики», результаты закономерно исчезнут. В пустом состоянии поясняется, что записи по-прежнему существуют, и предлагается показать все публикации. Для известного локального результата не отображается индикатор загрузки и не имитируется сетевой сбой. Различие между отсутствием совпадений и отсутствием записей остаётся понятным.
Отменяйте последнее фактическое изменение
Приложение сохраняет предыдущий статус только для записей, изменённых последним действием проверки. Отмена восстанавливает эти значения, обновляет текущее представление и возвращает фокус к фильтру. Она не сбрасывает несвязанные записи и не притворяется, что отменяет публикацию в социальной сети. Следующая пакетная операция заменяет единственную доступную операцию отмены — это соответствует подписи «Отменить последнее изменение».
Полноценная запускаемая очередь и проверки в дизайн-системе Sprout Social Seeds
Используйте все четыре дистрибутива токенов
Исходный файл подключает цвета, отступы, типографику и границы CSS перед оригинальной таблицей стилей композиции. Сохраните полные файлы main.js, seeds.css и оболочку HTML вместе. Предпросмотр включает те же общедоступные значения и код приложения, без удалённых шрифтов и серверной части. Точные версии пакетов указаны в команде установки.
Установите четыре пакета токенов Seeds с фиксированными версиями.
Сохраните предоставленные точку входа, CSS и корневой HTML.
Прежде чем менять фильтр, проверьте смешанное состояние выбора.
Проверьте восстановление после пустой выдачи и отмену пакетного изменения после проверки.
Проверьте сочетание состояний
Выберите одну публикацию и проверьте смешанное состояние массового выбора. Переключитесь на черновики и убедитесь, что выбор сброшен. Выберите отображаемые черновики, отметьте их как готовые и проверьте пустую выдачу. Отмените действие и убедитесь, что два черновика вернулись, затем отобразите все публикации. На экране телефона карточки выстраиваются в одну колонку для чтения, а метки и элементы управления проверкой остаются доступными.
Примеры компонентов дизайн-системы Sprout Social Seeds
main.js — полная очередь редакционных материалов
Исходные данные, фильтр, смешанный выбор, пакетное изменение и отмена.
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();
Настройка агента дизайн-системы Sprout Social Seeds
Отправная точка для реализации
Это общедоступные пакеты токенов. Полное приложение для проверки — оригинальный код, приведённый выше.
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
Запрос для вашего проекта
Промпт для AI-агента
Создайте предоставленную очередь редакционных материалов с помощью общедоступных пакетов токенов Seeds CSS с фиксированными версиями. Сохраните настоящие имена токенов, типографику системного продукта, выбор только видимых элементов, встроенное смешанное состояние, пакетное обновление только черновиков, восстановление после пустой выдачи и отмену одним действием. Оставьте исходные примеры содержимого и не создавайте впечатление, что подключена учётная запись социальной сети или выполняется публикация.
05
Источники и область применения дизайн-системы Sprout Social Seeds
Оригинальное приложение OpenDesign, использующее опубликованные пакеты токенов Seeds. Карточки и рабочий процесс проверки — оригинальные HTML/JavaScript, а не встроенные компоненты Seeds React. Учётная запись социальной сети не подключена, публикации не выполняются.
