Code

Code — примитив встроенного кода.

Обзор

Code добавляет компактную встроенную подложку поверх общей модели Text.

Публичные CSS-переменные

pnpm add @vega-ui/react

Переменная	Значение	Влияет на
семейство шрифтов встроенного кодакорень		В этом состоянии изменений не видно
заливка фонакорень		В этом состоянии изменений не видно
цвет текста кодасопоставление `--t-color`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Корень задаёт:

запасной моноширинный шрифт через --code-font-family
background-color: var(--fills-secondary)
--t-color: var(--label-secondary) для наследуемого цвета текста

Взаимодействие состояний и вариантов

Code не определяет собственных вариантов состояния.
Внешний вид меняется в основном за счёт наследуемых размеров Text и глобальных токенов темы.

Примеры

Размер внутри окружающего текста

У Code свой size, по умолчанию 3, и размер окружающего текста он не наследует. Передавайте тот же size, что у окружающего Text или Heading, чтобы плашка совпадала со строкой.

LTRRTL

inline-code-token.tsx · 17 строк

import { Code, Heading, Text } from '@vega-ui/react';

export default function InlineCodeToken() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)' }}>
      <Text size={2}>
        Default size inside small text: <Code>workspace_slug</Code>
      </Text>
      <Text size={2}>
        Matched to the text: <Code size={2}>workspace_slug</Code>
      </Text>
      <Heading as='h3' size={6}>

Не переопределяйте

не убирайте семантику кода, оставляя только оформление плашки
не используйте низкоконтрастные сочетания фона и текста
не навязывайте блочную раскладку для длинных фрагментов — переходите на полноценный компонент блока кода