Примитивы

Card

Поверхность, приподнятая над холстом: --surface на шаг светлее --canvas в обеих темах, под ним — тень. elevation называет токен тени, а не саму тень: flat — это --shadow-1, а не её отсутствие. В тёмной теме все три токена переопределены на более плотный чёрный, потому что мягкая сине-серая тень, отделяющая карточку от белого холста, на почти чёрном не видна. Карточка с заголовком — самое частое, что из неё строят, поэтому для неё есть три класса — .aura-card__header, .aura-card__extra и .aura-card__footer, — а не слоты у компонента: они ставятся на ваши собственные <header> и <footer> и выходят обратно к краям карточки, чтобы линейка под заголовком доходила до обоих краёв, а не обрывалась внутри паддинга.

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

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

elevation="raised"

overlay

elevation="overlay"

Код

index.html

<div class="aura-grid" style="--aura-gap:var(--space-4);--cols-base:1;--cols-md:3;width:100%;">
  <div class="aura-card">
    <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
      <h3 class="aura-text aura-text--h3">flat</h3>
      <span class="aura-text aura-text--caption aura-text--muted">elevation="flat"</span>
    </div>
  </div>
  <div class="aura-card aura-card--raised">
    <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
      <h3 class="aura-text aura-text--h3">raised</h3>
      <span class="aura-text aura-text--caption aura-text--muted">elevation="raised"</span>
    </div>
  </div>
  <div class="aura-card aura-card--overlay">
    <div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
      <h3 class="aura-text aura-text--h3">overlay</h3>
      <span class="aura-text aura-text--caption aura-text--muted">elevation="overlay"</span>
    </div>
  </div>
</div>

Demo.tsx

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

const ELEVATIONS = ['flat', 'raised', 'overlay'] as const;

export default function Demo() {
  return (
    <Grid cols={{ base: 1, md: 3 }} style={{ width: '100%' }}>
      {ELEVATIONS.map((elevation) => (
        <Card key={elevation} elevation={elevation}>
          <Stack gap={2}>
            <Typography variant="h3">{elevation}</Typography>
            <Typography variant="caption" tone="muted">
              elevation="{elevation}"
            </Typography>
          </Stack>
        </Card>
      ))}
    </Grid>
  );
}

Demo.vue

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

<template>
  <Card elevation="raised">Contents</Card>
</template>

Demo.svelte

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

<Card elevation="raised">Contents</Card>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraCard],
  template: `<div auraCard elevation="raised">Contents</div>`,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию	Примечания
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`
…HTMLAttributesатрибуты	`HTMLAttributes<HTMLDivElement>`	—

Имя	Тип	По умолчанию	Примечания
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`
defaultслот	`Slot`	—

Имя	Тип	По умолчанию	Примечания
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`
childrenслот	`Snippet`	—

Имя	Тип	По умолчанию	Примечания
elevation	`'flat' \| 'raised' \| 'overlay'`	`'flat'`

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

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

Класс	Роль	Примечания
.aura-card	база	Обязательный. Без него модификатор не работает.
.aura-card--raised	модификатор
.aura-card--overlay	модификатор
.aura-card__header	элемент
.aura-card__extra	элемент
.aura-card__footer	элемент

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

components.css

паддинг: var(--card-pad)
радиус: var(--r3)
фон: var(--surface)
рамка: 1px solid var(--border)
flat: var(--shadow-1)
raised: var(--shadow-2)
overlay: var(--shadow-3)