Примитивы

01

Typography

Карта шрифтов. Берёт размер, начертание, трекинг и интерлиньяж из шкалы токенов и рендерит осмысленный элемент под каждый вариант (h1 для h1, p для body, code для mono).

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overline const tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overlineconst tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overline const tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overlineconst tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overlineconst tokens = 'shared'

Код

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
  <h1 class="aura-text aura-text--display">Display</h1>
  <h1 class="aura-text aura-text--h1">Heading 1</h1>
  <h3 class="aura-text aura-text--h3">Heading 3</h3>
  <p class="aura-text aura-text--body">Body copy — the default variant.</p>
  <p class="aura-text aura-text--body aura-text--muted">Muted body copy for secondary information.</p>
  <span class="aura-text aura-text--overline aura-text--faint">Overline</span>
  <code class="aura-text aura-text--mono">const tokens = 'shared'</code>
</div>

Demo.tsx

import { Stack, Typography } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Stack gap={2}>
      <Typography variant="display">Display</Typography>
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="body">Body copy — the default variant.</Typography>
      <Typography variant="body" tone="muted">
        Muted body copy for secondary information.
      </Typography>
      <Typography variant="overline" tone="faint">
        Overline
      </Typography>
      <Typography variant="mono">const tokens = 'shared'</Typography>
    </Stack>
  );
}

Demo.vue

<script setup lang="ts">
import { Typography } from '@ilomee/aura-vue';
</script>

<template>
  <Typography variant="h2">Aura</Typography>
  <Typography tone="muted" :lines="2">Clamped to two lines…</Typography>
</template>

Demo.svelte

<script lang="ts">
  import { Typography } from '@ilomee/aura-svelte';
</script>

<Typography variant="h2">Aura</Typography>
<Typography tone="muted" lines={2}>Clamped to two lines…</Typography>

Используется как [auraText] — директива, которую вы вешаете на свой элемент.

demo.component.ts

import { AuraText } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraText],
  template: `
    <h2 auraText variant="h2">Aura</h2>
    <p auraText tone="muted">Muted body copy.</p>
    <p auraText tone="muted" [lines]="2">Clamped to two lines…</p>
  `,
})
export class DemoComponent {}

Это директива — элемент выбираете вы, поэтому входа as нет.

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
variant	`'display' \| 'h1' \| 'h2' \| 'h3' \| 'bodyL' \| 'body' \| 'caption' \| 'overline' \| 'mono'`	`'body'`
as	`ElementType`	—	Заменить элемент, выбранный под вариант.
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`	Многоточие в одну строку.
lines	`number`	—	Обрезать до N строк.

Имя	Тип	По умолчанию	Примечания
variant	`TypeVariant`	`'body'`
as	`string`	—
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`
lines	`number`	—
defaultслот	`Slot`	—	Текстовое содержимое.

Имя	Тип	По умолчанию	Примечания
variant	`TypeVariant`	`'body'`
as	`string`	—
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`
lines	`number`	—
loading	`boolean`	`false`	Идёт работа: кнопка становится `disabled` и `aria-busy` и получает спиннер перед подписью. Рядом со словами, а не вместо них, — чтобы кнопка не меняла ширину ровно в тот момент, когда перестаёт быть нажимаемой.
childrenслот	`Snippet`	—

Имя	Тип	По умолчанию	Примечания
variant	`TypeVariant`	`'body'`
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`
lines	`number`	—

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-text	база	Обязательный. Без него модификатор не работает.
.aura-text--<variant>	модификатор
.aura-text--muted	модификатор
.aura-text--truncate	модификатор
.aura-text--clamp	модификатор

Токены и правила

components.css

шкала: display · h1 · h2 · h3 · bodyL · body · caption · overline · mono
шрифт: var(--font) · var(--mono)
тона: --muted · --faint
источник: tokens/typography.json