Новая система токенов v3.0.0 (draft)

.github/actions/typecheck/action.yml

@@ -1,5 +1,5 @@
-name: Run Typecheck
-description: Run typecheck
+name: Run Typechecks
+description: Typecheck the project and check generated tokens
 
 runs:
   using: composite
@@ -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

MIGRATION.md

@@ -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 {
@@ -22,26 +18,25 @@ import {
 
 export const Root = () => (
   <ThemeContextProvider
-    fonts={{ primary: 'MyFont', secondary: 'MySecondaryFont' }}
+    fonts={{ heading: 'MyFont', base: 'MySecondaryFont' }}
     initialTheme={ThemeVariant.Light}
   >
     <App />
   </ThemeContextProvider>
 )
 ```
 
-Провайдер также принимает `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(...)`:
@@ -50,62 +45,51 @@ theme.fonts
 import { StyleSheet } from 'react-native-unistyles'
 
 const styles = StyleSheet.create(({ fonts }) => ({
-  title: { fontFamily: fonts.primary },
+  title: { fontFamily: fonts.fontFamily.heading },
 }))
 ```
 
-### `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
 

README.md

@@ -36,29 +36,25 @@ npm i @cdek-it/react-native-ui-kit
 
 UI kit использует следующие виды шрифтов.
 
-| Тип шрифта  | Используемые начертания                        | Рекомендуемый шрифт | Рекомендуемый аналог |
-| ----------- | ---------------------------------------------- | ------------------- | -------------------- |
-| `primary`   | – regular<br/>– demibold<br/>– demibold italic | TT Fellows          | Noto Sans            |
-| `secondary` | – regular<br/>– bold                           | Noto Sans           | —                    |
+| Тип шрифта | Используемые начертания                        | Рекомендуемый шрифт | Рекомендуемый аналог |
+| ---------- | ---------------------------------------------- | ------------------- | -------------------- |
+| `heading`  | – regular<br/>– demibold<br/>– demibold italic | TT Fellows          | Noto Sans            |
+| `base`     | – regular<br/>– bold                           | Noto Sans           | —                    |
 
 Исходники шрифтов не поставляются вместе с пакетом, их требуется подключать
-отдельно. После подключения шрифтов в проект, необходимо указать их в
-`ThemeContextProvider`.
+отдельно под именами, указанными в токенах.
 
 ```tsx
-<ThemeContextProvider
-  fonts={{ primary: 'MyFont', secondary: 'MySecondaryFont' }}
-/>
+<ThemeContextProvider fonts={{ heading: 'MyFont', base: 'MySecondaryFont' }} />
 ```
 
 После этого шрифты доступны через `useUnistyles().theme.fonts` или прямо в
 `StyleSheet.create(({ fonts }) => ...)`.
 
 `ThemeContextProvider` только настраивает темы и шрифты для `unistyles`.
-`ThemeContext` остается пустым и всегда имеет значение `null`.
-
-Провайдер также принимает `lightTheme` и `darkTheme`, если нужно переопределить
-темы целиком.
+`ThemeContext` остается пустым и всегда имеет значение `null`. Deprecated-формат
+`fonts={{ primary, secondary }}` временно сохраняется для обратной
+совместимости.
 
 ### Пример подключения шрифтов с помощью expo-fonts через плагин
 
@@ -160,6 +156,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
 
 Для использования данной библиотеки необходимо:

design-tokens/README.md

@@ -0,0 +1,6 @@
+# Design tokens
+
+`input/tokens.json` содержит входные токены из Figma, из которых генерируются
+токены проекта.
+
+Подробности: [генератор токенов](../scripts/token-generator/README.md).