Design System

Справочник всех компонентов UI, используемых на сайте techinterview.space

Цвета

Фоновые цвета

--warm-bg-primary

--warm-bg-secondary

--warm-bg-tertiary

--warm-bg-accent

--warm-bg-elevated

Акцентные цвета

--warm-accent-primaryTerracotta

--warm-accent-secondarySage

--warm-accent-tertiaryGold

--warm-accent-softOrange

Семантические цвета

--warm-danger

--warm-warning

--warm-success

--warm-info

Типографика

Заголовки (Lora)

Heading 1 - Главный заголовок

Heading 2 - Заголовок раздела

Heading 3 - Подзаголовок

Heading 4 - Заголовок блока

Heading 5 - Малый заголовок

Heading 6 - Мини-заголовок

Display заголовки

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Текст (Nunito)

Обычный параграф текста. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lead текст - более крупный и выделенный параграф для важной информации.

Small текст - для примечаний и мелких деталей.

Bold текст и italic текст

Цвета текста

text-warm-primary - Основной текст

text-warm-secondary - Вторичный текст

text-warm-muted - Приглушённый текст

text-warm-heading - Заголовки

text-accent-primary - Акцентный (Terracotta)

text-accent-secondary - Акцентный (Sage)

Кнопки

Основные кнопки

Outline кнопки

Размеры кнопок

Состояния кнопок

Link-style кнопки

Alerts

Danger! Это alert-danger для ошибок и критических сообщений.

Warning! Это alert-warning для предупреждений.

Success! Это alert-success для успешных действий.

Info! Это alert-info для информационных сообщений.

Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

Cards

Простая карточка

Базовая карточка с телом.

Header

Карточка с header

Карточка с заголовком сверху.

Карточка с footer

Карточка с подвалом.

Footer content

Интерактивные эффекты

hover-lift

Поднимается при наведении.

increasable-on-hover

Увеличивается при наведении.

Формы

Text Input

Email Input

Password

Disabled Input

Select

Textarea

Checkbox опция

Radio опция 1

Radio опция 2

Таблицы

#	Имя	Email	Роль	Статус
1	Иван Иванов	ivan@example.com	Admin	Active
2	Петр Петров	petr@example.com	User	Active
3	Анна Сидорова	anna@example.com	User	Inactive

Spinners

Loading GIFs

Анимированные индикаторы загрузки. Показываются случайным образом в зависимости от чётности текущего часа (чётный час — собака, нечётный — кот).

loading_cat.gif

Использование

Используйте компонент app-loading-spinner:

<app-loading-spinner></app-loading-spinner>

Иконки (Bootstrap Icons)

bi-house-fill

bi-person-fill

bi-gear-fill

bi-search

bi-bell-fill

bi-envelope-fill

bi-check-circle-fill

bi-x-circle-fill

bi-exclamation-triangle-fill

bi-info-circle-fill

bi-trash-fill

bi-pencil-fill

bi-plus-circle-fill

bi-arrow-right

bi-box-arrow-up-right

bi-sun-fill

bi-moon-fill

bi-github

bi-telegram

bi-linkedin

Полный список иконок: icons.getbootstrap.com

Код

Inline code

Используйте тег <code> для инлайн-кода, например: npm install

Code block

function greet(name: string): string {
  return `Hello, ${name}!`;
}

Spacing

SCSS переменные для отступов:

$space-1 = 0.25rem (4px)
$space-2 = 0.5rem (8px)
$space-3 = 0.75rem (12px)
$space-4 = 1rem (16px)
$space-5 = 1.5rem (24px)
$space-6 = 2rem (32px)
$space-7 = 2.5rem (40px)
$space-8 = 3rem (48px)
$space-9 = 4rem (64px)
$space-10 = 5rem (80px)

Border Radius

$radius-sm (6px)

$radius-md (10px)

$radius-lg (16px)

$radius-xl (24px)

$radius-full