Программное обеспечение для совместной работы · Новый ресурс
Дизайн-система Atlassian.
Создайте доску планирования задач с семантическими токенами Atlassian, шкалой отступов с шагом восемь пикселей, реальными API Button, Lozenge и Toggle и необходимой настройкой стилизации Compiled. Откройте задачу, отфильтруйте доску и переместите локальный рабочий элемент, не путая выбор со статусом.
Руководство OpenDesign9 глав46 справочных материаловАвторское руководство по приложению
01
Предварительный просмотр интерфейса дизайн-система Atlassian
Просматривайте задачи, фильтруйте их по ответственному и меняйте локальное состояние рабочего процесса. Статус и выбор элемента не зависят друг от друга.
Интерпретация HTML/CSS с проверенными значениями отступов и формы, иллюстративной палитрой и системным шрифтом в качестве запасного варианта; это не Jira и не среда выполнения Atlaskit. · Справочник по реализации
02
Справочник по дизайну дизайн-система Atlassian
В коде используйте точные имена семантических токенов. В официальном справочнике для палитры приведены псевдонимы, которые различаются для светлой и тёмной темы; поэтому здесь указаны псевдонимы, а не выдуманное постоянное значение hex. Числовые значения отступов и радиусов взяты из документированных шкал. Цвета hex в предварительном просмотре иллюстративны и не являются экспортом токенов.
Общедоступные пакеты ADS дизайн-система Atlassian и фактические требования к оформлению
Одного импорта компонента недостаточно для интеграции
Компоненты Atlassian Design System публикуются в пакетах @atlaskit, однако каталог Atlaskit также включает пакеты для конкретных приложений. В этом примере выбраны три задокументированных примитива: Button, Lozenge и Toggle, а также токены и сброс стилей CSS. Модель данных намеренно локальная. Эти импорты не обеспечивают проверку прав доступа к задачам Jira, логику спринтов или подключение к серверной части.
В актуальном руководстве по настройке для приложений, использующих пакеты платформы, требуется интеграция Compiled, даже если приложение само не создаёт стили Compiled. Поэтому конфигурация Parcel входит в пример. Импортированный компонент Button без настройки сборщика может отображаться со стилями не полностью или в неверном порядке. Это функциональная проблема интеграции, а не косметическая мелочь.
Дизайн-система Atlassian Используйте семантические токены вместо догадок о палитре
Токен описывает назначение
token("color.text") задаёт основной цвет текста, а token("color.text.subtle") — вторичную информацию. Для выбранного текста используется отдельная роль, не та, что для текста предупреждения об опасности. Основная область доски использует elevation.surface, а область группировки — elevation.surface.sunken. Эти решения остаются понятными при смене темы, поскольку их названия отражают назначение.
В официальном каталоге для этих ролей указаны псевдонимы палитры для светлой и тёмной темы. В справочной таблице сохранена эта информация, а не обещано одно неизменное значение hex. Во встроенном примере используется иллюстративная палитра, что отдельно отмечено. Цвета делают локальный пример разборчивым, но не заменяют источник истины для рабочей темы Atlaskit.
Дизайн-система Atlassian Основа в восемь пикселей и продуманные дробные шаги
Читайте суффикс как процентное значение
space.100 — это 8px; space.200 — 16px; space.025 — 2px. В шкале есть дробные шаги, поскольку для небольших промежутков и оптического выравнивания нужна большая точность, чем дают целые значения, кратные восьми пикселям. Для крупных блоков на доске используется space.300, а между соседними элементами — space.150. Вызов токена возвращает значение CSS с учётом темы, а не число для произвольных арифметических операций JavaScript.
Для одинаковых взаимосвязей используйте одинаковые отступы. Расстояние между ключом задачи и её названием должно быть меньше, чем между списком задач и панелью сведений. Токены отрицательных отступов существуют, но в обычной компоновке доски они не нужны. Плотный рабочий интерфейс должен становиться просторнее за счёт композиции, а не наложения несвязанных элементов друг на друга.
Дизайн-система Atlassian Токены типографики — это полные объявления шрифтов
Не указывайте font.body в font-size
В каталоге явно заданы составные токены шрифтов для свойства CSS font. В примере для заголовка страницы используется font.heading.large, а для заголовка сведений — font.heading.medium. Если использовать один из этих токенов как fontSize, его назначение будет утрачено. Роль body подходит для кратких описаний задач, а для длинных описаний можно использовать font.body.large, если компоновка располагает к чтению.
В текущем приложении используются шрифты Atlassian Sans и Atlassian Mono. В основе Sans лежит Inter Variable, а Mono — JetBrains Mono. Это важно при описании системы, однако в этой автономной демонстрации шрифты не распространяются: вместо них используется системный шрифт, о чём прямо сказано. При внедрении в рабочий продукт используйте поддерживаемый способ доставки шрифтов и соблюдайте условия лицензирования, а не присваивайте произвольному шрифту другое имя.
Дизайн-система Atlassian Используйте форму и тень, чтобы обозначить рабочую поверхность
Карточка приподнята, потому что она представляет собой объект
В справочнике различаются утопленная группирующая поверхность, приподнятые карточки и поверхности наложения. Перемещаемый элемент работы концептуально относится к приподнятому слою, а колонка доски объединяет такие элементы. Панели сведений, которая является частью обычной страницы, не обязательно нужна тень, характерная для наложения. Сочетайте роли поверхностей и теней только тогда, когда важно передать высоту.
Среди актуальных имён форм есть radius.xsmall для 2px, radius.small для 4px и radius.medium для 6px. Это не прежнее написание border.radius, которое разработчик мог запомнить из другой системы. В таблице приведены точные имена. Используйте встроенное оформление нативных элементов управления; к пользовательским внешним контейнерам можно применить соответствующую роль, не переопределяя внутренние сгенерированные классы.
Дизайн-система Atlassian Выбор задачи — не то же самое, что переход задачи в другое состояние
Осознанно выбирайте оформление и состояние
Проверенный импорт Button: @atlaskit/button/default/button. appearance="primary" выделяет основное действие, а isSelected отмечает текущую задачу в этом компактном нативном примере. Нажатие меняет только выбранную для просмотра задачу. Для изменения состояния рабочего процесса используется отдельный элемент управления. Так выбор строки не запускает и не завершает работу незаметно для пользователя.
В API также предусмотрены isLoading, isDisabled, spacing="compact" и shouldFitContainer. Состояние загрузки означает, что операция выполняется, а не обозначает постоянный статус задачи. Для отключённого действия нужна понятная причина: при навигации с клавиатуры отключённые элементы могут пропускаться. Поэтому в автономной доске элементы управления просмотром остаются доступными, а текущее локальное состояние можно проверить напрямую.
Дизайн-система Atlassian Lozenge и Toggle обозначают разные типы состояния
Статус — не режим взаимодействия
Варианты оформления Lozenge включают information, danger и success; в примере они соответствуют статусам «В работе», «Заблокирована» и «Готово». Смысл передают слова, а цвет служит дополнительным сигналом. Заблокированная задача остаётся заблокированной и после выбора. Для фильтра по исполнителю используется Toggle со свойствами isChecked и onChange: это логическое значение меняет состав отображаемых задач, а не состояние какой-либо задачи.
Локальный переключатель статуса намеренно сделан простым и не подразумевает реальную модель разрешений. Для перехода задачи в рабочей среде могут потребоваться причина, роль пользователя или ответ сервиса. Логику авторизации следует держать вне Lozenge и показывать подтверждённый результат, только когда его установит сервис.
Выбор указывает, какая задача открыта для просмотра.
Состояние рабочего процесса описывает сам элемент работы.
Фильтр по исполнителю меняет набор видимых задач, но не исполнителя.
Дизайн-система Atlassian Задайте тему до отображения пользовательских поверхностей с токенами
Глобальная тема загружается асинхронно
setGlobalTheme обновляет атрибуты темы документа и загружает выбранную тему CSS. В точке входа отрисовка доски начинается после завершения этой операции. Светлая и тёмная темы задаются явно; при первом запуске активна светлая. Настоящий элемент управления предпочтениями может менять colorMode через тот же API, вместо того чтобы подменять цвета случайными встроенными значениями.
Текущие параметры пользовательского брендинга помечены как alpha и используют UNSAFE API. В этом руководстве не используется нестабильный способ только ради перекраски примера. Сначала используйте стабильный контракт семантической темы, а экспериментальную настройку оценивайте отдельно как решение по зависимостям.
Дизайн-система Atlassian Проверьте реальный сценарий просмотра задач
Используйте предоставленные файлы вместе
Для нативного примера нужны JSX-файл входа, импорт сброса стилей CSS и оба файла конфигурации Parcel. В нём предусмотрены список задач, выбор задачи, фильтр по исполнителю, сопоставление статусов и динамическое сообщение о результате. Автономная демонстрация развивает эту композицию колонками и панелью сведений, но остаётся явно обозначенной интерпретацией HTML. Ни один пример не подключается к Jira.
Если фильтр скрывает выбранную задачу, нативный пример намеренно сохраняет её сведения. Пользователь может продолжить просмотр объекта, не переключаясь незаметно на другую задачу. В рабочем продукте можно выбрать другую политику, но её следует объяснить и при этом сохранить осмысленное положение фокуса. Проверьте поведение как на узком экране, так и при отображении всех колонок.
Откройте WEB-18, затем выберите другую задачу, не меняя её состояние рабочего процесса.
Включите фильтр по исполнителю и проверьте, какие задачи остаются видимыми.
Измените локальный статус выбранной задачи и убедитесь, что текст статуса и колонка совпадают.
Вернитесь к доске без фильтров и убедитесь, что задача та же, а её состояние обновлено.
Сохраните полный документ как index.html и откройте его в браузере. Интерпретация HTML/CSS с проверенными значениями отступов и форм, иллюстративной палитрой цветов и системным шрифтом в качестве запасного варианта; это не Jira и не среда выполнения нативного Atlaskit.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Issue board — Atlassian interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#172b4d;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit}button{cursor:pointer}header{padding:16px 24px;border-bottom:1px solid #dfe1e6;display:flex;align-items:center;justify-content:space-between;gap:16px}header strong{font-size:18px}.logo{color:#0c66e4;margin-right:12px}button{border:0;border-radius:4px;background:#f1f2f4;color:#172b4d;padding:8px 12px}button:hover{background:#dcdfe4}button:focus-visible,select:focus-visible{outline:3px solid #0c66e4;outline-offset:2px}.primary{background:#0c66e4;color:white}.primary:hover{background:#0055cc}main{padding:24px}.crumb{color:#626f86;font-size:12px}h1{font-size:24px;line-height:32px;margin:8px 0 16px}.tools{display:flex;align-items:center;gap:12px;margin-bottom:24px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.column{background:#f7f8f9;min-height:280px;padding:8px;border-radius:6px}.column h2{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#626f86;margin:8px 4px 16px}.issue{text-align:left;background:white;box-shadow:0 1px 2px #091e4240;width:100%;margin-bottom:8px;padding:12px;display:block;border:2px solid transparent}.issue[aria-pressed=true]{border-color:#0c66e4}.issue:hover{background:#fff;border-color:#85b8ff}.issue strong{display:block;font-weight:500;min-height:46px}.meta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:11px;color:#626f86}.avatar{display:inline-grid;place-items:center;width:24px;height:24px;background:#dfe1e6;border-radius:50%;font-weight:600}.tag{font-size:11px;line-height:18px;padding:1px 5px;font-weight:700;border-radius:3px;display:inline-block;background:#dfe1e6}.tag[data-status="In progress"]{background:#e9f2ff;color:#0055cc}.tag[data-status=Blocked]{background:#ffedeb;color:#ae2a19}.tag[data-status=Done]{background:#dcfff1;color:#216e4e}aside{border-left:1px solid #dfe1e6;padding-left:24px}aside h2{font-size:18px;line-height:26px;margin:12px 0 24px}dl{margin:0}dt{font-weight:600;margin:20px 0 8px}dd{margin:0}select{padding:8px;border:1px solid #8590a2;border-radius:4px;background:white;color:#172b4d;max-width:100%}.empty{padding:12px;color:#626f86;font-size:12px}footer{border-top:1px solid #dfe1e6;padding:16px 24px;color:#626f86;font-size:11px}#announcement{min-height:20px;color:#44546f;margin-top:16px}@media(max-width:720px){main{padding:16px}.layout{grid-template-columns:1fr}.board{grid-template-columns:1fr}.column{min-height:100px}aside{border-left:0;border-top:1px solid #dfe1e6;padding:16px 0 0}.issue strong{min-height:0}header{padding:16px}.tools{flex-wrap:wrap}}
</style><header><strong><span class="logo">▲</span>Product delivery</strong><span class="tag">LOCAL DEMO</span></header><main><div class="crumb">Projects / Website / Board</div><h1>Website release</h1><div class="tools"><label><input type="checkbox" id="mine"> Only Maya’s issues</label><button id="reset">Reset board</button></div><div class="layout"><section class="board" aria-label="Issues by status" id="board"></section><aside aria-label="Selected issue"><span id="key" class="crumb"></span><h2 id="title"></h2><span id="badge" class="tag"></span><dl><dt>Assignee</dt><dd id="owner"></dd><dt>Description</dt><dd id="description"></dd><dt><label for="status">Move issue to</label></dt><dd><select id="status"><option>To do</option><option>In progress</option><option>Blocked</option><option>Done</option></select></dd></dl><p id="announcement" role="status"></p></aside></div></main><footer>Independent HTML/CSS interpretation of Atlassian spacing, semantic status and persistent issue selection. System font and sample colors; no Jira connection.</footer><script>
const initial=[{id:'WEB-18',title:'Audit navigation labels',owner:'Maya Chen',status:'To do',description:'Review the wording of top-level links and check that each label describes its destination.'},{id:'WEB-21',title:'Connect locale switcher',owner:'Theo Park',status:'In progress',description:'Keep the current resource selected when a reader switches between supported languages.'},{id:'WEB-24',title:'Resolve missing image credits',owner:'Maya Chen',status:'Blocked',description:'The launch requires confirmation of the source and permitted use of two editorial images.'}];let issues=structuredClone(initial),selected='WEB-21';const board=document.querySelector('#board'),status=document.querySelector('#status');
function render(){board.replaceChildren();for(const state of ['To do','In progress','Blocked / Done']){const col=document.createElement('section');col.className='column';const entries=issues.filter(x=>(state==='Blocked / Done'?['Blocked','Done'].includes(x.status):x.status===state)&&(!document.querySelector('#mine').checked||x.owner==='Maya Chen'));const h=document.createElement('h2');h.textContent=state+' · '+entries.length;col.append(h);for(const issue of entries){const b=document.createElement('button');b.className='issue';b.setAttribute('aria-pressed',String(selected===issue.id));const t=document.createElement('strong');t.textContent=issue.title;const meta=document.createElement('span');meta.className='meta';meta.textContent=issue.id;const av=document.createElement('span');av.className='avatar';av.textContent=issue.owner.split(' ').map(x=>x[0]).join('');av.title=issue.owner;meta.append(av);b.append(t,meta);b.onclick=()=>{selected=issue.id;render();document.querySelector('#announcement').textContent='Selected '+issue.id};col.append(b)}if(!entries.length){const p=document.createElement('p');p.className='empty';p.textContent='No matching issues';col.append(p)}board.append(col)}const item=issues.find(x=>x.id===selected);document.querySelector('#key').textContent=item.id;document.querySelector('#title').textContent=item.title;document.querySelector('#owner').textContent=item.owner;document.querySelector('#description').textContent=item.description;const badge=document.querySelector('#badge');badge.textContent=item.status;badge.dataset.status=item.status;status.value=item.status}
status.onchange=()=>{const i=issues.find(x=>x.id===selected);i.status=status.value;render();document.querySelector('#announcement').textContent=i.id+' moved to '+i.status+' in this local board.'};document.querySelector('#mine').onchange=render;document.querySelector('#reset').onclick=()=>{issues=structuredClone(initial);selected='WEB-21';document.querySelector('#mine').checked=false;render();document.querySelector('#announcement').textContent='Board reset.'};render();
</script></html>
Переходы задач затрагивают только демонстрационную доску. В этой записи HTML не проверяется конфигурация сборки Compiled, необходимая для отдельной реализации Atlaskit.
Полный пример нативной реализации
Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
Полная логика доски React и необходимые фрагменты конфигурации приведены ниже. Используйте Parcel с интеграцией Compiled: для текущих пакетов недостаточно импортировать только сброс стилей CSS. Сборка нативных пакетов не заявляется в качестве проверенной в этом локальном прототипе.
Parcel должен обрабатывать распространяемые стили Compiled
Создайте файл .parcelrc в корне проекта. Запустите Parcel с его точкой входа HTML после установки зависимостей, перечисленных в инструкции по настройке.
openIssueDetail — обработчик приложения; полная настройка демонстрирует состояние выбора.
Не оформляйте метку статуса как меню, если она не запускает переход между состояниями.
04
Дизайн-система Atlassian Настройка агента
Отправная точка для реализации
Полная логика доски React и необходимые фрагменты конфигурации приведены ниже. Используйте Parcel с интеграцией Compiled: для текущих пакетов недостаточно импортировать только сброс стилей CSS. Сборка нативных пакетов не заявляется в качестве проверенной в этом локальном прототипе.
jsx
// Existing React 18 project; use the Parcel configuration examples below.
// npm install @atlaskit/css-reset @atlaskit/tokens @atlaskit/button @atlaskit/lozenge @atlaskit/toggle
// npm install --save-dev parcel @compiled/parcel-config
// src/main.jsx; HTML entry contains <div id="root"></div> and a module script pointing here.
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import '@atlaskit/css-reset';
import {token, setGlobalTheme} from '@atlaskit/tokens';
import Button from '@atlaskit/button/default/button';
import Lozenge from '@atlaskit/lozenge/lozenge';
import Toggle from '@atlaskit/toggle';
const initial = [
{id:'WEB-18',title:'Clarify first-project copy',owner:'Maya',status:'To do'},
{id:'WEB-21',title:'Review keyboard path',owner:'Alex',status:'In progress'},
{id:'WEB-24',title:'Resolve missing illustrations',owner:'Maya',status:'Blocked'}
];
const appearance = {'To do':'default','In progress':'information','Blocked':'danger','Done':'success'};
function Board() {
const [issues,setIssues]=React.useState(initial);
const [selected,setSelected]=React.useState('WEB-18');
const [mine,setMine]=React.useState(false);
const [notice,setNotice]=React.useState('');
const issue=issues.find(i=>i.id===selected);
return <main style={{padding:token('space.300'),color:token('color.text'),background:token('elevation.surface')}}>
<h1 style={{font:token('font.heading.large')}}>Onboarding improvements</h1>
<label htmlFor="mine">Assigned to Maya</label>
<Toggle id="mine" isChecked={mine} onChange={e=>setMine(e.currentTarget.checked)}/>
<div style={{display:'flex',flexWrap:'wrap',gap:token('space.300'),marginTop:token('space.200')}}>
<ul style={{flex:'1 1 280px',listStyle:'none',padding:0}}>
{issues.filter(i=>!mine||i.owner==='Maya').map(i=><li key={i.id} style={{marginBottom:token('space.150')}}>
<Button isSelected={i.id===selected} onClick={()=>setSelected(i.id)}>{i.id}: {i.title}</Button>
{' '}<Lozenge appearance={appearance[i.status]}>{i.status}</Lozenge>
</li>)}
</ul>
<section aria-label="Issue details" style={{flex:'1 1 280px',padding:token('space.200'),background:token('elevation.surface.sunken')}}>
<h2 style={{font:token('font.heading.medium')}}>{issue.id}: {issue.title}</h2>
<p>Owner: {issue.owner}</p>
<label htmlFor="status">Workflow state</label>{' '}
<select id="status" value={issue.status} onChange={event=>{
const status=event.target.value;
setIssues(items=>items.map(i=>i.id===issue.id?{...i,status}:i));
setNotice(`${issue.id} moved to ${status} in this local example.`);
}}>{Object.keys(appearance).map(s=><option key={s}>{s}</option>)}</select>
<p>This local demonstration has no Jira connection or permission rules.</p>
</section>
</div><p role="status">{notice}</p>
</main>;
}
async function start(){
await setGlobalTheme({light:'light',dark:'dark',colorMode:'light'});
createRoot(document.getElementById('root')).render(<Board/>);
}
start();
Запрос для вашего проекта
Промпт для AI-агента
Создайте предоставленный пример доски из 18 задач Atlassian React с токенами @atlaskit, сбросом стилей CSS и документированной интеграцией Compiled для Parcel. Используйте семантические токены, сокращённые роли шрифтов и проверенные импорты Button/Lozenge/Toggle. Не смешивайте выбор задачи, фильтрацию по исполнителю и состояние рабочего процесса. Сохраняйте контекст выбранной задачи, сообщайте о локальных изменениях и не заявляйте о подключении к Jira или реальных разрешениях.
05
Дизайн-система Atlassian Источники и область применения
OpenDesign обзор общедоступных пакетов Atlassian Design System React, сверенный со связанной документацией в октябре 2026 года. Встроенная доска — это интерпретация HTML/CSS с иллюстративными значениями цветов и вымышленными задачами, а не Jira и не среда выполнения нативного Atlaskit. Доступ к общедоступным пакетам не означает неограниченных прав на бренд Atlassian или права на ту же поддержку, что и для внутренних пользователей.
