Сайт
.theme-dark- Фон
--color-canvas- Поверхность
--color-surface- Текст
--color-ink- Вторичный
--color-ink-muted- Акцент
--color-accent- Код
--color-code
Текст на фоне карточки
- Основной текст
- Вторичный текст
- Акцентный текст
Дизайн-система
Цвет, типографика и компоненты сайта Orchid.
Живые образцы из действующих стилей.
Назначение и приоритет
Сайт помогает понять Orchid и начать работу. В документации главное — чтение и поиск ответов.
Целевой переход. Documentation и Browse Issues ведут к задаче раздела.
Навигация. Меню, оглавление и подвал помогают найти нужное место.
Вспомогательное действие. Suggest Edit помогает исправить статью, не отвлекая от чтения.
- Мышь и трекпад
- Спокойное наведение и отклик нажатия.
- Касание
- Нажатие без оставшейся подсветки наведения.
- Клавиатура
- Отчётливый контур текущей цели, включая внешнюю клавиатуру.
- Поиск и текущее положение
- Поиск документации доступен в десктопной шапке. Ввод обозначен кареткой и границей; текущий раздел отмечен постоянно.
Документация
.theme-paper- Фон
--color-canvas- Поверхность
--color-surface- Текст
--color-ink- Вторичный
--color-ink-muted- Акцент
--color-accent- Код
--color-code
Текст на фоне карточки
- Основной текст
- Вторичный текст
- Акцентный текст
Семантические имена общие. Значения меняются вместе с контекстом и читаются из CSS.
Контраст рассчитан по цветам текста и фона этих карточек. Ориентир для обычного текста — 4,5:1. Градиенты и состояния элементов проверяются отдельно в своём контексте.
Типографика
На главной ↗Главный заголовок
.displayEnhance your Laravel
Заголовок карточки
.headingQuick Start
Вводный текст
.intro-textFocus on what matters most.
Основной текст
bodyBuild your application with Orchid.
Подпись
smallEnglish / Russian
Интерфейс
--font-sansСтек шрифтов
Код
--font-monoСтек шрифтов
Геометрия
Сетка главной ↗- Текст
--space-2 - Короткие отступы и меню
- Базовый
--space-4 - Абзацы и шапка
- Сетка
--space-5 - Обычный промежуток сетки
- Компонент
--space-7 - Отступ карточки на широком экране
Примеры отступов. Сетка и внутренние поля адаптируются к ширине экрана.
- Карточка
--radius-card - Шапка
--radius-header - Контейнер
--measure-shell - Тень карточки
--shadow-card
Действия
В сообществе ↗Перейти к документации
.buttonОсновной путь из шапки к началу работы.
Обратиться к сообществу
.buttonРавнозначные переходы к спискам GitHub.
Текстовое действие
.actionВспомогательное действие Suggest Edit
.button.quiet<x-docs-edit :href="$edit" />Помогает исправить статью на GitHub. На широком экране находится рядом с заголовком; на узком экране скрыто.
- Фокус
--focus-width - Отклик
--duration-feedback
- Нейтральная кнопка
.button - Наведение и нажатие меняют фон и границу. Клавиатурный фокус обозначен контуром.
- Текстовое действие
.action - Акцент и подчеркивание появляются при наведении, нажатии и клавиатурном фокусе.
- Вспомогательное действие
.button.quiet - Без постоянной заливки. Наведение и нажатие усиливают текст и фон; фокус обозначен контуром.
- Ссылка в тексте статьи
.article p > a - Подчеркивание сохраняется. Наведение и нажатие добавляют цветовой акцент; фокус обозначен контуром.
Карточки
На главной ↗Quick Start
Build a task list application and learn the basics of Orchid.
Документация
Страница Screens ↗Статья: заголовок, навигация и вспомогательная ссылка Suggest Edit. На узком экране ссылка скрыта.
Screens
Suggest EditScreens are responsible for displaying information and processing user actions. Each screen has a query() method and a layout() method.
A screen describes the data and layout of a page.
public function query(): array
{
return ['name' => 'Orchid'];
}Screen methods
| Method | Purpose |
|---|---|
query() | Prepare the data. |
layout() | Define the page layout. |
Бренд
На главной ↗
Логотип/img/next/logo-full.svg
Say goodbye
Фирменный градиент.text-accent · --gradient-accent
Превью интерфейса на главной ↗ использует реальный скриншот. Ссылка открывает исходное изображение для просмотра деталей.