# Дизайн-система Designsystemet ## Предпросмотр интерфейса дизайн-системы Designsystemet Используйте встроенный счётчик символов, меняйте тему и размер, сохраняйте или сбрасывайте результат проверки в зависимости от внесённых изменений. ## Справочник по дизайн-системе Designsystemet Экспорт темы по умолчанию и встроенная реализация ds-field из @digdir/designsystemet-css/web 1.23.0. В строках с цветами явно указаны значения для светлого режима. ### Акцентные роли светлой темы по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ds-color-accent-background-default | #fff | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-background-tinted | #eef4fa | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-surface-tinted | #ddeaf6 | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-surface-hover | #c7ddf0 | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-border-subtle | #99c0e3 | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-border-default | #2a7cc5 | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-text-default | #002c54 | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-base-default | #0062ba | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-base-hover | #004f96 | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-base-active | #003d75 | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | | --ds-color-accent-base-contrast-default | #fff | Фактическая роль светлой темы по умолчанию в версии 1.23.0. Для тёмной схемы среды выполнения используются отдельные значения ролей. | ### Нейтральные роли светлой темы по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-background-tinted | #f3f3f4 | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-surface-default | #fff | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-surface-tinted | #e8e8e9 | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-border-subtle | #bbbcbd | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-text-subtle | #5b5d60 | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-text-default | #292c30 | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-base-default | #24272b | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | | --ds-color-neutral-base-contrast-default | #fff | Используйте нейтральные роли для вспомогательных поверхностей и текста, не приписывая им без необходимости значение статуса. | ### Основы режимов размера и типографики | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-size-mode-font-size--md | 1.125 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-size-mode-font-size--lg | 1.3125 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-size-base | 18 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-font-family | Inter | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-font-weight-regular | 400 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-font-weight-medium | 500 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-font-weight-semibold | 600 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-line-height-sm | 1.3 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-line-height-md | 1.5 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-line-height-lg | 1.7 | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-border-radius-base | 0.25rem | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | Фактическое экспортированное скалярное значение или выражение. Используйте режимы data-size, а не считайте каждое скалярное значение числом пикселей. | ## Полное руководство по дизайн-системе Designsystemet Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Поведение дизайн-системы Designsystemet, CSS и пакеты тем ### Подключайте три части в правильном порядке > Designsystemet разделяет независимое от фреймворка поведение, CSS компонентов и значения темы. В этом примере закреплены версии designsystemet-web и designsystemet-css 1.23.0; сначала импортируется CSS, затем тема по умолчанию, после чего поведение регистрируется один раз. Стилизованное поле без пакета поведения — это не та же реализация, что показанный здесь связанный ds-field. ### Используйте актуальный контракт plain-HTML В примере ds-field оборачивает обычные элементы input, textarea и select с классами ds-input. Так сохраняются нативные элементы форм, а пакет связывает подписи и описания. Здесь не скопирована устаревшая реализация поля API только на React. Полный исходный код содержит корректные импорты пакетов и логику проверки при просмотре из исходного приложения. ## Цветовая схема и режимы размера дизайн-системы Designsystemet ### Меняйте оформление с помощью атрибутов data На корневом элементе страницы устанавливается data-color-scheme со значением light или dark. Тема задаёт соответствующие семантические цвета, а значения полей формы остаются неизменными. В таблице параметров явно указаны значения светлой темы по умолчанию; в ней не утверждается, что те же цвета в формате hex применяются в тёмном режиме. Кнопка переключения оформления описывает действие, которое будет выполнено при нажатии. ### Применяйте режим размера ко всей системе Элемент управления размером текста меняет data-size между sm, md и lg. Так меняется режим размера темы, а не только масштаб заголовка. Опубликованные коэффициенты режимов — 1, 1.125 и 1.3125; они участвуют в формулах токенов и не означают, что каждому элементу управления следует задать такой размер в пикселях. В примере проверяется крупный режим как на телефоне, так и на настольном компьютере. ## Inter и семантическая типографика дизайн-системы Designsystemet ### Подключите нужные начертания В предпросмотре используются Inter 400, 500 и 600, а также задокументированная функция шрифта cv05 для формы строчной буквы l. На странице применяются нативные классы заголовков и абзацев, поэтому насыщенность шрифта и высота строки соответствуют теме. Фиксированная аннотация размером 14px — это вспомогательная подпись, заданная автором и явно вынесенная за пределы основной интерактивной шкалы. ### Размещайте вспомогательные пояснения рядом с элементом управления Подсказка к заголовку объясняет назначение подписи, а подсказка к результату описывает ожидаемое содержимое. Они остаются рядом со своими элементами управления и связываются через ds-field. Дополнительные рекомендации размещены на отдельной карточке, которая следует за формой на узких экранах. Для показа инструкций не требуется наведение указателя. ## Автоматические связи и обратная связь по количеству символов в дизайн-системе Designsystemet ### Поручите ds-field связать один элемент управления Каждый ds-field содержит один элемент управления типа input, его подпись и необязательные описания data-field. Пакет назначает идентификаторы и создаёт связи между подписью и описаниями. Если сгруппировать в одном ds-field несвязанные элементы управления, автоматический контракт станет неоднозначным. Для группы используйте fieldset, а не считайте эту обёртку универсальным контейнером формы. - В каждом ds-field должен быть один элемент управления типа input. - Используйте описания data-field для связанных вспомогательных пояснений. - Поручите встроенному наблюдателю управлять идентификаторами и связями described-by. ### Учитывайте, что именно считает счётчик Встроенный счётчик использует data-limit, data-under и data-over; вместо %d подставляется число оставшихся или превышенных символов. В версии 1.23.0 он вычисляет длину строки JavaScript и предоставляет обратную связь через data-label/data-state, в том числе состояние invalid при превышении лимита. Это не гарантирует подсчёт графем для любых эмодзи. Ограничение в 140 символов — правило для текста в этом примере, а не официальное требование Designsystemet к содержимому. ## Проверка приложения и состояние просмотра в дизайн-системе Designsystemet ### Проверяйте требования сценария отдельно Приложение требует непустые заголовок задачи и описание результата, а также отклоняет результат, превышающий лимит примера. После показа понятного сообщения приложение переводит фокус на соответствующее поле. Встроенный счётчик показывает длину, а обработчик отправки применяет локальное правило проверки при просмотре. Атрибут maxlength не обрезает вставленный текст незаметно для пользователя. ### Сохраняйте данные при смене оформления После успешной проверки при просмотре заголовок и описание результата показываются как текст. Изменение любого из этих полей очищает результат; изменение оформления или размера сохраняет его, поскольку эти элементы управления не меняют описание задачи. Это намеренное различие проверено. Данные никуда не отправляются в сервис управления проектами, и в предпросмотре не утверждается, что внешняя задача была создана. ## Полная реализация встроенных полей дизайн-системы Designsystemet ### Воспроизведите пример для указанной версии Создайте проект Vite на vanilla JavaScript, установите два пакета Designsystemet с закреплёнными версиями и Inter, затем сохраните полный файл entry и digdir.css. Не удаляйте корневой элемент для монтирования. Исходный код включает регистрацию, порядок подключения тем, разметку счётчика, элементы управления оформлением и все переходы логики проверки при просмотре. В локальном предпросмотре используется тот же встроенный наблюдатель полей, а не его нарисованная вручную имитация. 1. Подключите поведение один раз, затем CSS компонента и тему по умолчанию. 2. Загрузите Inter 400, 500 и 600 и сохраните полный entry/CSS. 3. Проверьте счётчик при превышении лимита и исправьте описание результата. 4. Выполните просмотр, измените размер и оформление, затем отредактируйте текст, чтобы очистить результат. ### Проверьте работу при превышении лимита и восстановлении Вставьте в поле результата 150 обычных символов и убедитесь, что отображается превышение лимита на десять символов. Просмотр должен быть отклонён. Замените текст кратким описанием результата и выполните просмотр успешно, затем смените тёмный режим и размер текста, не теряя результат. Отредактируйте заголовок и убедитесь, что прежний результат проверки очищен. Проверьте видимость фокуса и перенос строк при каждой ширине области просмотра. ## Примеры компонентов дизайн-системы Designsystemet ### main.js — исследование полей и тем со встроенным поведением Полный редактор, настоящая разметка счётчика, элементы управления оформлением и размером, а также локальная проверка при просмотре. ``` import '@digdir/designsystemet-web'; import '@digdir/designsystemet-css'; import '@digdir/designsystemet-css/theme'; import '@fontsource/inter/latin-400.css'; import '@fontsource/inter/latin-500.css'; import '@fontsource/inter/latin-600.css'; import './digdir.css'; document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()}); ``` Справочник по коду - В select применяется актуальное оформление ds-input внутри ds-field. Обратной связью счётчика управляет встроенный наблюдатель. ### digdir.css — оригинальная адаптивная композиция Макет на основе встроенной темы, включая настройку функции Inter. ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` Справочник по коду - Смена темы и размера сохраняет введённые значения; проверка сбрасывается только после изменения содержимого. ## Настройка агента дизайн-системы Designsystemet ### Отправная точка для реализации Связи встроенных меток, состояние счётчика, восстановление после ошибок проверки и смена размера в светлой и тёмной темах протестированы в настоящем браузере. ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### Запрос для вашего проекта ``` Создайте редактор краткого описания, соблюдая поведение Designsystemet 1.23.0, CSS и тему default в правильном порядке. Используйте ds-field с одним встроенным элементом управления, фактическими атрибутами счётчика data-field и начертаниями Inter. Сохраняйте результат проверки при смене оформления и размера, сбрасывайте его при изменении содержимого и соблюдайте исходное ограничение в 140 символов, не обрезая вставленный текст. ``` ## Источники и область применения дизайн-системы Designsystemet Локальный редактор, созданный OpenDesign с использованием Designsystemet CSS и веб-поведения версии 1.23.0. Тема default и наблюдатель полей — встроенные; содержимое краткого описания, ограничение в 140 символов и процесс проверки — оригинальные. - Настройка и порядок подключения темы Встроенное поведение, CSS, настройка темы и шрифтов. - Основы темы Точки входа для размеров, цветов и типографики. - Публичная реализация Версионированный наблюдатель ds-field и сгенерированная тема. - Область применения системы Область применения общих компонентов и рекомендаций. ## Связанные ресурсы дизайн-системы Designsystemet ### DSFR Изучите характерные для дизайн-системы французского государства типографику, сетку и аккордеон API в рамках её институционального назначения. Сравните поведение связанных и независимых раскрывающихся элементов на нейтральном учебном примере. ### Europa Component Library Изучите цветовые, типографические и интервальные роли Europa EC на примере полноценного задания с нативным аккордеоном: поддержка клавиатуры, раскрытие всех пунктов и понятный резервный вариант без JavaScript. ### gov.cz дизайн-система Изучите настоящие цветовые роли, слоты карточек и нативную пагинацию Gov Design System CE на примере полноценного инструментария для чтения шести ресурсов с явным управлением фокусом и состоянием страницы. - [Справочник по реализации](https://designsystemet.no/en/fundamentals/code/setup) - [Источник](https://github.com/digdir/designsystemet) - [Справочник по коду](https://designsystemet.no/en/fundamentals/code/setup) - [Настройка и порядок подключения темы Встроенное поведение, CSS, настройка темы и шрифтов.](https://designsystemet.no/en/fundamentals/code/setup) - [Основы темы Точки входа для размеров, цветов и типографики.](https://designsystemet.no/en/fundamentals) - [Публичная реализация Версионированный наблюдатель ds-field и сгенерированная тема.](https://github.com/digdir/designsystemet) - [Область применения системы Область применения общих компонентов и рекомендаций.](https://designsystemet.no/en/intro)