Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f221698
feat: добавлен генератор дизайн-токенов
fabulous-unicorn Jul 30, 2026
bc267e5
ci: добавлены проверки дизайн-токенов
fabulous-unicorn Jul 30, 2026
ff805ce
feat: добавлены и подключены дизайн-токены
fabulous-unicorn Jul 30, 2026
2f891ed
fix: исправлена нормализация радиусов в токенах
fabulous-unicorn Jul 30, 2026
d19cc66
fix: доработан генератор дизайн-токенов
fabulous-unicorn Jul 31, 2026
5340e84
chore: исправлены команды проверки дизайн-токенов
fabulous-unicorn Jul 31, 2026
a8b384b
feat: добавлена поддержка focusRing-токенов
fabulous-unicorn Jul 31, 2026
988f299
feat: добавлена поддержка токенов анимации
fabulous-unicorn Jul 31, 2026
3ccff4a
feat: добавлена генерация токенов шрифтов
fabulous-unicorn Aug 3, 2026
d5423b1
refactor(tokens): разделены semantic-токены
fabulous-unicorn Aug 4, 2026
bf04fcf
refactor(tokens): component-токены скрыты из публичного API
fabulous-unicorn Aug 4, 2026
4a02893
docs: актуализирована документация тем и токенов
fabulous-unicorn Aug 4, 2026
fa88f40
refactor(tokens): объединены проверка и форматирование генерации
fabulous-unicorn Aug 4, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions .github/actions/typecheck/action.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: Run Typecheck
description: Run typecheck
name: Run Typechecks
description: Typecheck the project and check generated tokens

runs:
using: composite
Expand All @@ -9,3 +9,11 @@ runs:
- name: Run Typecheck
shell: bash
run: yarn tsc --noEmit

- name: Typecheck Token Generator
shell: bash
run: yarn tokens:typecheck

- name: Check Generated Tokens
shell: bash
run: yarn tokens:check
86 changes: 35 additions & 51 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
# Миграция на Unistyles V3

Стили переведены на `react-native-unistyles`. `ThemeContextProvider` доступен
как внешний конфигуратор тем и шрифтов, но чтение темы и шрифтов теперь идет
через API `unistyles`.
Стили переведены на `react-native-unistyles`. UI kit предоставляет провайдер и
хуки для настройки темы и шрифтов, а стили создаются через API `unistyles`.

## Изменения

### `ThemeContextProvider` — доступен
### Настройка темы и шрифтов

UI kit по-прежнему использует `react-native-unistyles` внутри, но для внешнего
потребителя снова доступен `ThemeContextProvider` как единая точка конфигурации
тем и шрифтов.

Если приложению нужны кастомные шрифты, настройте их через провайдер:
Оберните приложение в `ThemeContextProvider`. Через `initialTheme` задаётся
начальная тема, через `fonts` — используемые семейства шрифтов:

```tsx
import {
Expand All @@ -30,18 +26,17 @@ export const Root = () => (
)
```

Провайдер также принимает `lightTheme` и `darkTheme`, если нужно передать
полностью кастомные темы.
Провайдер не принимает пользовательские объекты тем. Он настраивает
зарегистрированные внутри UI kit темы `light` и `dark`.

### `useFonts`

Используйте `useUnistyles`:
Для получения настроенных шрифтов используйте экспортируемый UI kit хук:

```tsx
import { useUnistyles } from '@cdek-it/react-native-ui-kit'
import { useFonts } from '@cdek-it/react-native-ui-kit'

const { theme } = useUnistyles()
theme.fonts
const fonts = useFonts()
```

Или прямо в стилях через `StyleSheet.create(...)`:
Expand All @@ -54,58 +49,47 @@ const styles = StyleSheet.create(({ fonts }) => ({
}))
```

### `useTheme()` / `useChangeTheme()`
### Чтение и переключение темы

Для чтения и переключения темы используйте публичные хуки UI kit:

```tsx
import {
ThemeVariant,
useChangeTheme,
useTheme,
} from '@cdek-it/react-native-ui-kit'

const theme = useTheme()
const changeTheme = useChangeTheme()

`ThemeContextProvider` больше не является источником `theme/fonts` через React
context. Он только конфигурирует `react-native-unistyles`.
changeTheme(ThemeVariant.Dark)
```

- `useTheme()` читает `UnistylesRuntime.themeName`
- `useFonts()` читает `useUnistyles().theme.fonts`
- `ThemeContext` остается пустым и имеет значение `null`
- `useChangeTheme()` всегда вызывает `UnistylesRuntime.setTheme(...)`
`ThemeContextProvider` не хранит тему и шрифты в React Context: `ThemeContext`
имеет значение `null`, а источником состояния остаётся Unistyles.

### `makeStyles` — removed

Используйте `StyleSheet.create(...)`:

```tsx
import { StyleSheet } from '@cdek-it/react-native-ui-kit'
import { StyleSheet } from 'react-native-unistyles'

const styles = StyleSheet.create((theme) => ({
container: { backgroundColor: theme.Button.Brand.buttonBg },
const styles = StyleSheet.create(({ semantic }) => ({
container: {
backgroundColor: semantic.colorScheme.color.bg.surface.default.default,
},
}))
```

`makeStyles` использует `useUnistyles()`, что вызывает React-ререндеры при смене
темы. `StyleSheet.create(...)` — нативный путь, обновляет стили **без**
ререндеров.

SDK реэкспортирует `StyleSheet`, `useUnistyles`, `UnistylesRuntime` и
`withUnistyles`, поэтому потребителям не нужно импортировать
`react-native-unistyles` напрямую.

### `useTheme()` — removed

```tsx
import { UnistylesRuntime, useUnistyles } from '@cdek-it/react-native-ui-kit'

const themeName = UnistylesRuntime.themeName // 'light' | 'dark'
```

Для реактивного поведения используйте `useUnistyles()`:

```tsx
const { rt } = useUnistyles()
rt.themeName
```

### `useChangeTheme()` — removed

```tsx
import { UnistylesRuntime } from '@cdek-it/react-native-ui-kit'

UnistylesRuntime.setTheme('dark')
```
UI kit не реэкспортирует `StyleSheet`, `useUnistyles`, `UnistylesRuntime` и
`withUnistyles`. Если они нужны приложению напрямую, импортируйте их из
`react-native-unistyles`.

## ESLint Правила для Unistyles

Expand Down
16 changes: 12 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,9 @@ UI kit использует следующие виды шрифтов.
После этого шрифты доступны через `useUnistyles().theme.fonts` или прямо в
`StyleSheet.create(({ fonts }) => ...)`.

`ThemeContextProvider` только настраивает темы и шрифты для `unistyles`.
`ThemeContextProvider` настраивает активную тему и шрифты для `unistyles`.
`ThemeContext` остается пустым и всегда имеет значение `null`.

Провайдер также принимает `lightTheme` и `darkTheme`, если нужно переопределить
темы целиком.

### Пример подключения шрифтов с помощью expo-fonts через плагин

```ts
Expand Down Expand Up @@ -160,6 +157,17 @@ UI kit использует следующие виды шрифтов.
</array>
```

## Токены анимации

Длительность анимации хранится в `semanticTokens` числом в миллисекундах.
Easing-токен нужно передать в Reanimated через публичный адаптер:

```ts
import { semanticTokens, toEasing } from '@cdek-it/react-native-ui-kit'

const easing = toEasing(semanticTokens.effects.transition.easing.standard)
```

## Dependencies

Для использования данной библиотеки необходимо:
Expand Down
6 changes: 6 additions & 0 deletions design-tokens/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Design tokens

`input/tokens.json` содержит входные токены из Figma, из которых генерируются
токены проекта.

Подробности: [генератор токенов](../scripts/token-generator/README.md).
Loading
Loading