Руководство

С чего начать

Aura — это два слоя: пакет токенов, который везёт CSS, и тонкая библиотека компонентов на каждый фреймворк. Компоненты только раздают классы — весь визуал живёт в токенах, один раз и для всех.

1. Установка

# устанавливать нечего — подключите два стиля и пишите разметку
npm i @ilomee/aura-core

npm i @ilomee/aura-react @ilomee/aura-core react react-dom

npm i @ilomee/aura-vue @ilomee/aura-core vue

npm i @ilomee/aura-svelte @ilomee/aura-core svelte

npm i @ilomee/aura-angular @ilomee/aura-core @angular/core @angular/common

@ilomee/aura-core и ваш фреймворк — peer-зависимости: они не входят в этот пакет. На следующем шаге вы импортируете их напрямую, так что без них ничего не будет работать как надо.

2. Подключите стили — один раз

У компонентов нет собственных стилей — без этих импортов разметка будет верной, но совершенно неоформленной.

<link rel="stylesheet" href="node_modules/@ilomee/aura-core/dist/tokens.css" />
<link rel="stylesheet" href="node_modules/@ilomee/aura-core/dist/components.css" />
<link rel="stylesheet" href="node_modules/@ilomee/aura-core/dist/animations.css" /><!-- необязательно -->

import '@ilomee/aura-core/css';            // CSS-переменные — обязательно
import '@ilomee/aura-core/components.css'; // классы компонентов, раскладки и типографики — обязательно
import '@ilomee/aura-core/animations.css'; // необязательно

import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';
import '@ilomee/aura-core/animations.css'; // необязательно

import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';
import '@ilomee/aura-core/animations.css'; // необязательно

/* В "styles" из angular.json или в глобальном стиле. */
@import '@ilomee/aura-core/css';
@import '@ilomee/aura-core/components.css';
@import '@ilomee/aura-core/animations.css'; /* необязательно */

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

<html data-theme="light" data-accent="aqua">
  <div class="aura-stack" style="--aura-gap: var(--space-4)">
    <h1 class="aura-text aura-text--h1">Aura</h1>
    <button class="aura-btn aura-btn--primary">Get started</button>
    <button class="aura-btn">Cancel</button>
  </div>
</html>

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

export function App() {
  return (
    <AuraProvider defaultTheme="light" defaultAccent="aqua">
      <Stack gap={4}>
        <Typography variant="h1">Aura</Typography>
        <Button variant="primary">Get started</Button>
      </Stack>
    </AuraProvider>
  );
}

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

<template>
  <AuraProvider default-theme="light" default-accent="aqua">
    <Stack :gap="4">
      <Typography variant="h1">Aura</Typography>
      <Button variant="primary">Get started</Button>
    </Stack>
  </AuraProvider>
</template>

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

<AuraProvider theme="light" accent="aqua">
  <Stack gap={4}>
    <Typography variant="h1">Aura</Typography>
    <Button variant="primary">Get started</Button>
  </Stack>
</AuraProvider>

import { Component } from '@angular/core';
import { AuraTheme, AuraButton, AuraText, AuraStack } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AuraTheme, AuraButton, AuraText, AuraStack],
  template: `
    <div auraTheme theme="light" accent="aqua">
      <div auraStack [gap]="4">
        <h1 auraText variant="h1">Aura</h1>
        <button auraButton variant="primary">Get started</button>
      </div>
    </div>
  `,
})
export class AppComponent {}

Без библиотеки компонентов

Настоящий API — это классы. Если не хотите ставить пакет компонентов, подключите две таблицы стилей и напишите разметку сами — именно такую разметку и рендерит каждый фреймворковый пакет.

<html data-theme="dark" data-accent="iris">
  <button class="aura-btn aura-btn--primary">Create</button>
  <div class="aura-card aura-card--raised">…</div>
</html>

Дальше

Посмотреть компоненты Изучить токены Проверить покрытие