Компоненты

Токены

Файлы цветов и размеров: JSON (мобильные), CSS, Tailwind 4.

Скачать токены

Цвета, шрифт, радиусы и размеры кита — в трёх файлах для других проектов. Файлы собираются из app/globals.css и tokens/scale.json: npm run tokens.

  • JSON — мобильное приложение (React Native, Flutter), Figmaкаждый вид × день/ночь, цвета #rrggbbumra.tokens.json
  • Обычные CSS-переменныепо <html data-app data-tema>umra.css
  • Тема Tailwind 4@theme + вариант tun: + видыtailwind-theme.css

Правила

  • Файлы не правятся вручную — измените globals.css и запустите npm run tokens.
  • npm run build останавливается, если токены устарели.
  • Мобильное приложение не понимает oklch — в JSON все цвета #rrggbb.

Текущий вид: crm · kun

Значения из JSON для вида и темы, выбранных вверху, показаны здесь.

Загрузка…

Отступы, тени и движение

Отступы с шагом 4 px. Теней мало: у карточки почти незаметная, у открытого списка и окна — глубже.

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

Один JSON — три платформы. Вид (crm · dashboard · market) и режим (kun · tun) — ключи.

React Native

import tokens from './umra.tokens.json';

const t = tokens.looks.crm[scheme === 'dark' ? 'tun' : 'kun'];
const styles = StyleSheet.create({
  button: {
    minHeight: tokens.size.touch,            // 44
    borderRadius: t.radius.base,              // 10
    paddingHorizontal: tokens.space['4'],     // 16
    backgroundColor: t.color['brand-blue'],   // #00583f
  },
  label: { color: t.color['on-brand'], fontSize: tokens.type.button.size, fontWeight: '700' },
});

Flutter

final json = jsonDecode(await rootBundle.loadString('assets/umra.tokens.json'));
final c = json['looks']['crm'][dark ? 'tun' : 'kun']['color'];
Color hex(String v) => Color(int.parse(v.substring(1), radix: 16) | 0xFF000000);

ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: hex(c['brand-blue']), brightness: dark ? Brightness.dark : Brightness.light),
  scaffoldBackgroundColor: hex(c['ground']),
);

Tailwind 4 (web)

/* app/globals.css */
@import 'tailwindcss';
@import './tailwind-theme.css';

<html data-app="crm" data-tema="kun">
<button className="bg-brand-blue text-on-brand rounded-base shadow-button min-h-[var(--size-touch)]">Saqlash</button>