# Дизайн-система Palantir Blueprint ## Palantir Blueprint Предпросмотр интерфейса дизайн-системы Фильтруйте по названию или типу, выбирайте набор данных, меняйте плотность строк и оформление, проверяйте заметку к проверке перед обновлением локального статуса. ## Palantir Blueprint Справочник по дизайн-системе Ядро Blueprint 6.21.0, опубликованное CSS, и нативные компоненты React. Здесь приведены отдельные значения токенов светлой темы; для тёмного оформления используйте тёмную тему библиотеки, а не инвертируйте значения вручную. В примере CSS отдельно отмечены решения по компоновке приложения. ### Цвета назначения и состояния взаимодействия | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bp-intent-primary-rest | #2d72d2 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-primary-hover | #215db0 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-primary-active | #184a90 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-primary-disabled | #4c90f0 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-primary-foreground | #ffffff | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-success-rest | #238551 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-success-hover | #1c6e42 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-success-active | #165a36 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-success-disabled | #32a467 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-success-foreground | #ffffff | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-warning-rest | #c87619 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-warning-hover | #935610 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-warning-active | #77450d | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-warning-disabled | #ec9a3c | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-warning-foreground | #111418 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-danger-rest | #cd4246 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-danger-hover | #ac2f33 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-danger-active | #8e292c | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-danger-disabled | #e76a6e | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-intent-danger-foreground | #ffffff | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | ### Шкала типографики и начертания | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bp-typography-size-body-x-small | 10px | Масштабы основного текста, меток и вспомогательных данных; не используйте мелкие метаданные как основной размер текста для чтения. | | --bp-typography-size-body-small | 12px | Масштабы основного текста, меток и вспомогательных данных; не используйте мелкие метаданные как основной размер текста для чтения. | | --bp-typography-size-body-medium | 14px | Масштабы основного текста, меток и вспомогательных данных; не используйте мелкие метаданные как основной размер текста для чтения. | | --bp-typography-size-body-large | 16px | Масштабы основного текста, меток и вспомогательных данных; не используйте мелкие метаданные как основной размер текста для чтения. | | --bp-typography-size-heading-small | 16px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-size-heading-medium | 20px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-size-heading-large | 24px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-size-heading-x-large | 28px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-size-heading-display | 46px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-size-code-small | 12px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-size-code-medium | 13px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-size-code-large | 14px | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-weight-default | 400 | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-weight-bold | 600 | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-line-height-default | 1.28581 | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | | --bp-typography-line-height-large | 1.5 | Применяйте роль на указанном уровне иерархии; для чисел в таблицах дополнительно можно использовать табличные цифры. | ### Фоновые поверхности, границы и семантический текст | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bp-surface-border-color-default | #5f6b7c1f | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-surface-border-color-strong | #5f6b7c40 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-surface-border-width | 1px | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-surface-border-radius | 4px | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-surface-spacing | 4px | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-surface-background-color-default-rest | #ffffff | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-surface-background-color-default-hover | #f6f7f9 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-typography-color-default-rest | #1c2127 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-typography-color-muted | #5f6b7c | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | ### Фокус и анимация | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --bp-emphasis-transition-duration | 100ms | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-emphasis-ease-default | cubic-bezier(0.4, 1, 0.75, 0.9) | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-emphasis-ease-bounce | cubic-bezier(0.54, 1.12, 0.38, 1.11) | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-emphasis-focus-color | #2d72d2 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-emphasis-focus-width | 2px | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-emphasis-focus-offset | 2px | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | | --bp-emphasis-motion-reduced | 0 | Используйте заданную семантическую роль; сочетания состояний и цветов переднего плана должны оставаться согласованными. | ### Нативные компоненты в рабочей области наборов данных | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | HTMLTable | striped · interactive · condensed | Нативная семантическая таблица; свойство condensed меняет плотность, но не данные. | | InputGroup | value · onChange · intent | Управляемый поиск и заметка к проверке; приложение задаёт намерение danger для невалидных данных. | | FormGroup | labelFor · helperText · intent | Свяжите поле с видимой меткой и объясните, почему заметка невалидна. | | HTMLSelect | options · value · onChange | Нативный элемент select для небольшого фиксированного набора типов данных. | | Tag | minimal · intent | Сопровождайте текст статуса оформлением success или warning. | | Button | intent="primary" · type="submit" | Сохраняйте локальный результат проверки с помощью настоящей формы; кнопки выбора остаются второстепенными. | | Switch | checked · onChange | Независимые элементы управления оформлением и плотностью. | | Callout | intent · title | Объясняйте отсутствие результатов или исход действия; не передавайте статус только с помощью цвета. | ## Palantir Blueprint Полное руководство по дизайн-системе Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система Palantir Blueprint: рабочая область для работы с данными ### Плотные элементы управления с чёткой последовательностью чтения > Blueprint полезна для экранов, объединяющих коллекцию, фильтры, статусы и контекстные действия. В примере таблица наборов данных расположена слева, а выбранная запись — справа. Так можно сравнивать записи, не открывая отдельную страницу для каждой. В панели сведений находится редактируемая заметка к проверке, а таблица служит для беглого просмотра. ### Используйте контракт пакета v6 Пример собран с @blueprintjs/core 6.21.0. Пространство имён CSS — bp6, а опубликованные семантические токены начинаются с --bp-. Таблица стилей bp5 не заменяет компоненты CSS версии v6. Импортируйте таблицу стилей пакета один раз в точке входа приложения, а правила компоновки приложения задавайте для отдельного класса. ## Дизайн-система Palantir Blueprint: назначение цветов и роли ### Отделяйте статус записи от её выбора Тег warning означает, что набор данных требует проверки; строка с основным оттенком показывает, что он выбран. Это независимые значения. При отметке записи как проверенной её метка и намерение меняются на success, а выбранным остаётся тот же набор данных. Для каждого статуса в таблице есть текст, поэтому смысл не зависит только от цвета. ### Ограничивайте тёмный режим уровнем компонентов В примере к обёртке добавлен класс bp6-dark, чтобы нативные компоненты применяли тёмные стили. Приведённые выше значения светлой темы — справочный снимок, а не указание переопределять стили каждого компонента. При добавлении портала, например Dialog, убедитесь, что его содержимое получает тот же контекст темы: обёртки, которая не содержит портал, недостаточно. ## Palantir Blueprint — типографика дизайн-системы для записей и метаданных ### Сначала изучите шкалу основного текста, затем выбирайте заголовки Опубликованные размеры основного текста: 10, 12, 14 и 16px; средний размер — 14px. Названия наборов данных набраны основным кеглем. Для идентификаторов и типов записей используется вспомогательный текст, а числовые количества записей набраны табличными цифрами, чтобы их было проще сравнивать при изменении значений. Руководство не рекомендует использовать 10px для основного содержимого. ### Создайте компактную иерархию в панели сведений В панели сведений используется заголовок размером 20px и список определений с идентификатором, владельцем, типом и количеством. Подписи и значения выровнены по стабильной двухколоночной сетке. Примечание к проверке отделено от этих сведений линией, чтобы действие не приняли за фильтр таблицы. ## Palantir Blueprint — таблица, фильтры и панель сведений дизайн-системы ### Сохраняйте семантику таблицы HTMLTable предоставляет нативную таблицу со стилями Blueprint. Кнопки в первой ячейке позволяют выбирать записи и доступны с клавиатуры; в примере обработчик строки, работающий только при нажатии указателем, не является единственным способом выбора. Свойство interactive включает подсветку строки при наведении, а condensed независимо от фильтрации переключает плотность. ### Сделайте поток управляемых данных наглядным Поиск и выбор типа формируют видимую коллекцию из одних и тех же локальных строк. Выбранная запись может оставаться в панели сведений, даже если фильтр скрывает её строку; тогда введённая заметка к проверке не исчезнет только из-за изменения фильтра коллекции. В производственном приложении это поведение следует определить и задокументировать, а не молча удалять изменения. 1. Найдите набор данных по отображаемому названию. 2. Сузьте ту же коллекцию с помощью выбора типа. 3. Нажмите кнопку с названием, чтобы загрузить запись в панель сведений. 4. Введите заметку к проверке и отправьте её для локальной проверки. ## Palantir Blueprint — интервалы, поверхности и плотность дизайн-системы ### Используйте меньшую единицу, не превращая каждый отступ в крошечный Опубликованный токен интервала для поверхностей — 4px. В рабочей области используются кратные значения: 12px между элементами фильтра, 20px между коллекцией и панелью сведений, 24px вокруг настольного примера. Это композиционные решения, показанные в CSS. Токен радиуса скругления 4px помогает сохранить сдержанную геометрию элементов управления и поверхностей. ### Сначала измените компоновку, а не убирайте подписи При контрольной точке приложения 800px из примера панель сведений перемещается под коллекцию. Фильтры переносятся на следующую строку, внутренний отступ основной области уменьшается до 16px, а для таблицы при необходимости появляется отдельная горизонтальная прокрутка. Эта контрольная точка относится к данной рабочей области и не представлена как официальная универсальная контрольная точка Blueprint. ## Palantir Blueprint — проверка и пустые состояния дизайн-системы ### Проверка данных — часть операции проверки записи При отправке пустой заметки для InputGroup и FormGroup задаётся намерение danger, отображается поясняющий вспомогательный текст, а фокус перемещается в поле. После ввода текста ошибка очищается. При успешной отправке изменяется только выбранная локальная запись, заметка очищается, а в Callout об успехе явно указано, что данные не отправлялись. ### Разместите способ восстановления рядом с пустой коллекцией Callout для состояния «Ничего не найдено» предлагает очистить фильтры. Он сбрасывает поисковый запрос и выбор типа, возвращая всю коллекцию. Строки не удаляются, панель сведений не изменяется. Следующие границы состояний заданы намеренно: - Выбор меняет отображаемую запись, а не статус её проверки. - Компактный режим меняет плотность, но не порядок записей. - Смена темы меняет внешний вид, но не текущие фильтры. - После успешной локальной проверки изменяется одна запись и отображается сообщение о результате. ## Palantir Blueprint — фокус и доступное использование компонентов дизайн-системы ### Добавьте подпись к каждому нативному элементу управления Для поиска InputGroup получает доступное имя, а для поля проверки — id, связанный с подписью. У HTMLSelect есть собственное имя, Switch отображает видимые подписи, а каждую запись можно открыть настоящей кнопкой. Используйте API этих библиотечных компонентов, а не заменяйте элементы управления стилизованными div. ### Сохраняйте видимую индикацию фокуса В справочнике пакета указаны ширина обводки фокуса 2px и смещение 2px. Индикация фокуса должна оставаться заметной на Card и выбранных строках. Пользователи клавиатуры должны иметь возможность последовательно перейти к фильтрам, кнопкам строк и форме проверки. Абзац состояния и Callout об успехе в примере сообщают о результатах, не перемещая читателя на другой экран. ## Palantir Blueprint — установка и границы приложения дизайн-системы ### Запустите тот же исходный код, что и в примере Ниже приведены полный исходный код App и приложение CSS. App монтируется в корневой элемент, созданный шаблоном Vite React. Установка закреплённой версии основного пакета предоставляет нативные компоненты и пакет CSS; для текстового примера не нужны скрытые ресурсы дизайн-системы. ### Дополните процесс проверки реальным механизмом сохранения Для производственной проверки нужны идентификаторы записей, разрешения, состояние ожидания и ответ с ошибкой. Эти задачи должны решаться в приложении с сохранением API FormGroup и намерений Blueprint. Не сообщайте об успешном сохранении до подтверждения от сервиса: в локальном примере такого утверждения намеренно нет. ## Palantir Blueprint — примеры компонентов дизайн-системы ### main.jsx — приложение для проверки наборов данных целиком Полная композиция из нативных компонентов: фильтрация, выбор, плотность, тема, проверка поля и локальный результат проверки. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { Button, Card, Callout, FormGroup, HTMLSelect, HTMLTable, InputGroup, Switch, Tag, } from "@blueprintjs/core"; import "@blueprintjs/core/lib/css/blueprint.css"; import "./blueprint.css"; const initial = [ { id: "D-1042", name: "Harbor sensors", type: "Telemetry", rows: "18,420", owner: "Maya", status: "Reviewed", }, { id: "D-1043", name: "Transit stops", type: "Reference", rows: "842", owner: "Alex", status: "Needs review", }, { id: "D-1044", name: "Water samples", type: "Field survey", rows: "2,608", owner: "Sam", status: "Reviewed", }, { id: "D-1045", name: "Street survey", type: "Field survey", rows: "4,120", owner: "Lee", status: "Needs review", }, ]; function App() { const [dark, setDark] = useState(false), [compact, setCompact] = useState(false), [query, setQuery] = useState(""), [rows, setRows] = useState(initial), [selected, setSelected] = useState(initial[1]), [note, setNote] = useState(""), [notice, setNotice] = useState(""), [error, setError] = useState(false), [type, setType] = useState("All"); const visible = rows.filter( (r) => r.name.toLowerCase().includes(query.toLowerCase()) && (type === "All" || r.type === type), ); function review(e) { e.preventDefault(); if (!note.trim()) { setError(true); document.getElementById("review-note").focus(); return; } const updated = { ...selected, status: "Reviewed" }; setRows(rows.map((r) => (r.id === selected.id ? updated : r))); setSelected(updated); setNotice( `${selected.name} marked reviewed in this local example. No data was sent.`, ); setNote(""); setError(false); } return (
BLUEPRINT · DATA WORKSPACE

Dataset review

Inspect a record and attach a review note.

setDark(e.target.checked)} />
setQuery(e.target.value)} /> setType(e.target.value)} options={["All", "Telemetry", "Reference", "Field survey"]} /> setCompact(e.target.checked)} />

{visible.length} matching datasets

Name Records Status {visible.map((r) => (
{!visible.length && ( Clear the search or choose a different dataset type. )} SELECTED DATASET

{selected.name}

Dataset ID
{selected.id}
Owner
{selected.owner}
Type
{selected.type}
Records
{selected.rows}
{ setNote(e.target.value); setError(false); }} />

Selection, filters and review notes exist only in this preview.

{notice && ( {notice} )}
); } createRoot(document.getElementById("root")).render(); ``` Справочник по коду - Сохраните этот код как src/main.jsx, а следующий пример — как src/blueprint.css. - Вызов createRoot использует корневой элемент из index.html шаблона Vite React. ### blueprint.css — адаптивная компоновка рабочей области Правила компоновки приложения дополняют импортированные нативные компоненты CSS. Контрольная точка 800px и панель сведений шириной 260px — явно заданные решения для этого примера. ``` * { box-sizing: border-box; } body { margin: 0; } .specimen { padding: 24px; background: #f6f7f9; color: #1c2127; font-size: 14px; } .specimen.bp6-dark { background: #252a31; color: #f6f7f9; } .specimen header { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 24px; } .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--bp-typography-color-muted); } h1.bp6-heading { margin: 8px 0; font-size: 28px; } .workbench { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; } .collection, .inspector { min-width: 0; } .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .toolbar > .bp6-input-group { flex: 1; min-width: 150px; } .toolbar .bp6-control { margin: 0; } .table-scroll { overflow: auto; } table td { vertical-align: middle !important; } .numeric { font-variant-numeric: tabular-nums; } tr.selected td { background: #2d72d20d !important; } .inspector h2 { font-size: 20px; margin-top: 12px; } .inspector dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; } .inspector dt { color: var(--bp-typography-color-muted); } .inspector dd { margin: 0; } .inspector form { border-top: 1px solid var(--bp-surface-border-color-default); padding-top: 20px; } .inspector p { margin: 16px 0 0; } .specimen > .bp6-callout { margin-top: 20px; } .specimen footer { font-size: 11px; margin-top: 24px; color: var(--bp-typography-color-muted); } @media (max-width: 800px) { .workbench { grid-template-columns: 1fr; } .specimen { padding: 16px; } .specimen header { align-items: start; } .toolbar { gap: 16px; } h1.bp6-heading { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } .bp6-dark .eyebrow, .bp6-dark .inspector dt, .bp6-dark footer { color: #abb3bf; } ``` Справочник по коду - Класс bp6-dark включает тему библиотеки; фон холста примера — CSS приложения. ## Palantir Blueprint — настройка AI-агента дизайн-системы ### Отправная точка для реализации Нативный пример был собран и запущен с помощью React 18.3.1 и Blueprint 6.21.0. Используйте версию Node.js, совместимую с выбранной вами версией Vite. Оба файла приложения приведены выше. ``` npm create vite@latest blueprint-review -- --template react cd blueprint-review npm install npm install react@18.3.1 react-dom@18.3.1 @blueprintjs/core@6.21.0 # Replace src/main.jsx and add src/blueprint.css using the complete examples. npm run dev ``` ### Запрос для вашего проекта ``` Создайте рабочую область для проверки наборов данных с помощью Blueprint 6.21.0. Изучите предоставленные токены и полный пример React/CSS. Сохраните нативные HTMLTable, InputGroup/FormGroup с подписями, Tags состояния и доступный с клавиатуры выбор строк. Не связывайте состояния фильтра, выбора, плотности, оформления и проверки. Добавляйте реальный сервис сохранения только после предоставления его API; отображайте состояния ожидания и ошибки, не теряя заметку. Сохраните адаптивную панель сведений и видимую индикацию фокуса. ``` ## Palantir Blueprint — источники и область применения дизайн-системы OpenDesign — руководство по приложению для Blueprint 6.21.0 с оригинальным примером проверки наборов данных, использующим настоящий пакет React. Названия наборов данных и результаты проверки — локальные примеры данных. Компоновка рабочей области реализована в коде приложения; справочные значения взяты из опубликованного пакета соответствующей версии. - Документация компонентов Blueprint Контракты нативных компонентов и примеры. - Опубликованные токены версии 6.21.0 Точные значения версий, использованные в справочных таблицах. - Исходный код Blueprint Реализация, история выпусков пакета и лицензия Apache. ## Palantir Blueprint — дополнительные ресурсы дизайн-системы ### Pega Bolt Изучите систему контента Bolt с брендингом Pega: гибкая типографика, раздельные горизонтальные и вертикальные отступы, а также композиция аккордеона на Twig для редакционной страницы с ресурсами. ### Porsche дизайн-система Изучите Porsche Design System v4: гибкие отступы, цветовые схемы CSS, типографика Porsche Next и конфигуратор с двумя вариантами. В примере приведены реальные выражения токенов и полный файл входа Vite с актуальными событиями сегментированного элемента управления. ### Red Hat PatternFly Создайте рабочую среду для операционных задач на PatternFly: семантические ссылки на токены, карточки услуг с возможностью выбора, множественный выбор с тремя состояниями, проверка охвата и полный встроенный код React. - [Справочник по реализации](https://blueprintjs.com/docs/#core/components/html-table) - [Источник](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css) - [Источник](https://blueprintjs.com/docs/#core/components) - [Справочник по коду](https://blueprintjs.com/docs/#core/components) - [Справочник по коду](https://blueprintjs.com/docs/#core/typography) - [Документация компонентов Blueprint Контракты нативных компонентов и примеры.](https://blueprintjs.com/docs/#core/components) - [Опубликованные токены версии 6.21.0 Точные значения версий, использованные в справочных таблицах.](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css) - [Исходный код Blueprint Реализация, история выпусков пакета и лицензия Apache.](https://github.com/palantir/blueprint)