diff --git a/docs/tokens-migration.md b/docs/tokens-migration.md new file mode 100644 index 00000000..b74f5c1c --- /dev/null +++ b/docs/tokens-migration.md @@ -0,0 +1,289 @@ +# Миграция компонентов на токены из `tokens.json` + +Документ описывает работу в ветке `feature/tokens-migration-cleanup`, +ответвлённой от `feature/components-token-migration` (PR #56, коммит +`1b00580a`). + +Файл не попадает в публикуемый пакет: `docs` перечислен в `.npmignore`, а +`package.json` публикует только `dist`. + +## Зачем + +PR #56 перевёл компоненты на неймспейс `components.*` и оставил в коде 157 +комментариев `TODO(tokens-migration)` — мест, где компонент не получил нужного +токена либо получил значение, расходящееся с новой базой. Эта ветка разбирает +их: **157 → 0**. + +Формат комментария: + +``` +// TODO(tokens-migration): reason=missing; legacy=<путь в коде>; value=<значение> +// TODO(tokens-migration): reason=value-mismatch; legacy=<путь>; value=<текущее>; target=<целевой токен>; targetValue=<целевое> +``` + +Важная особенность: при `reason=missing` поле `legacy` называет **не** +отсутствующий токен, а тот, что фактически используется. Прочтение «токена нет в +Figma» ошибочно — проверка резолвом показала, что все названные в TODO токены +существуют. + +## Ключевая находка: две базы `rem` + +Расхождения значений объясняются одной причиной. Legacy-ассеты +(`src/theme/assets/*.json`, лежат в репозитории с первого коммита, ноябрь 2025) +построены на `1rem = 14px`. `design-tokens/input/tokens.json` хранит значения в +`rem`, и генератор считает их при `1rem = 16px`. + +Это подтверждается снимком Figma (`passport.md` из выгрузки дизайн-системы), где +те же ключи токенов имеют значения ровно в `0.875` раза меньше: + +| Токен | Figma (база 14) | `tokens.json` (база 16) | +| -------------- | --------------: | ----------------------: | +| `fontSize/300` | 14 | 16 | +| `fontSize/500` | 17.5 | 20 | +| `fontSize/650` | 26.25 | 30 | + +Решение по базе 16px принято владельцем дизайн-системы. + +## Что изменилось + +### Генератор токенов + +`scripts/token-generator` теперь выводит пятый файл — +`src/theme/tokens/fonts.json` с группой `primitive.fonts` (`fontFamily`, +`fontSize`, `lineHeight`, `fontWeight`, `letterSpacing`). Значения +нормализованы: `rem` пересчитан в px. + +Отсутствие `primitive.fonts` во входных токенах — ошибка генерации: тема без +шрифтов нерабочая. + +Добавлен ревизор `yarn tokens:audit`: разбирает все `TODO(tokens-migration)` и +резолвит каждый `legacy`-путь в сгенерированных токенах и legacy-ассетах. +Показывает, существует ли токен и расходится ли значение. Первый прогон дал +ровно тот же состав из 157 позиций, что и ручная выгрузка, — парсер сверен. + +### Тема + +```ts +export const lightTheme: ThemeType = { + semantic: lightSemanticTokens, // из tokens.json + components: lightComponentTokens, // из tokens.json + theme: { ...lightThemeAssets, InputSize, ModalSize, custom }, // legacy + ...commonTheme, // primitive.fonts из tokens.json + legacy-остатки +} +``` + +Появился неймспейс `primitive.fonts`. Публичный `fonts: { primary, secondary }` +не изменился, но теперь собирается из токенов: `heading → primary`, +`base → secondary`. Хардкод `{ primary: 'TT Fellows', secondary: 'Noto Sans' }` +из `lightTheme.ts` и `darkTheme.ts` убран. + +В `types.ts` добавлен тип `FontPrimitives`: JSON отдаёт `fontWeight` как +`number`, а `TextStyle` требует литеральный тип, поэтому приведение сделано в +одном месте. + +### Типографика + +| Свойство | Было | Стало | Источник | +| ---------------------- | ---------------------: | ---------------------: | ---------------------------------------- | +| `text-xs` | 10.5 | 12 | `fontSize[100]` | +| `text-sm` (TT Fellows) | 12.25 | 12 | `fontSize[100]` | +| `text-sm` (Noto Sans) | 12.25 | 14 | `fontSize[200]` | +| `text-base` | 14 | 16 | `fontSize[300]` | +| `text-lg` | 15.75 | 18 | `fontSize[400]` | +| `text-xl` | 17.5 | 20 | `fontSize[500]` | +| `text-2xl` | 21 | 24 | `fontSize[600]` | +| `text-3xl` | 26.25 | 30 | `fontSize[650]` | +| `lineHeight` | 15 / 18 / 20 / 21 / 24 | 18 / 20 / 22 / 24 / 28 | `lineHeight[300…600]` | +| `letterSpacing` | −0.25 / −0.5 | −0.32 / −0.48 | `letterSpacing[200]`, `[400]` | +| `fontWeight` | 400 / 600 / 700 | те же | `fontWeight.regular / .demibold / .bold` | + +`text-sm` разведён по шрифту не произвольно: карта `ds-typography.json` +фиксирует, что этот ключ резолвится в разные размеры для акцентного и базового +шрифтов. Затронуты `ButtonLabel`, `ToggleButton`, `SelectButtonItem`, +`useInputStyles`, `Title` (акцентный) и `Body`, `Caption`, `Subtitle`, +`Service`, `Anchor` (базовый). + +`fontWeight` в снапшотах сменил тип со строки `"400"` на число `400` — React +Native принимает оба, рендер идентичен. + +### Отступы, рамки, скругления + +Переведены с legacy-ассетов на `semantic.dimension`: + +| Было | Стало | Токен | +| ----------------------------------- | ----: | ------------------- | +| `spacing.Gap['gap-1']` 3.5 | 4 | `space[100]` | +| `spacing.Gap['gap-2']` 7 | 8 | `space[200]` | +| `spacing.Padding['p-4']` 14 | 14 | `space[400]` | +| `spacing.Padding['p-6']` 21 | 20 | `space[600]` | +| `border.Width.border` 1 | 1 | `borderWidth[100]` | +| `border.Width['border-3']` 3 | 4 | `borderWidth[300]` | +| `border.Radius['rounded-full']` 100 | 1600 | `borderRadius.max` | +| `border.Radius['rounded-xl']` 10.5 | 10 | `borderRadius[300]` | + +### Компонентные токены + +41 обращение переведено на токены, названные в поле `target` самих комментариев. +Из них изменяют внешний вид не из-за базы `rem`, а по существу: + +| Компонент | Свойство | Было | Стало | +| -------------- | ---------------------- | -------: | ----: | +| `Badge` | `borderRadius` | 100 | 8 | +| `ProgressBar` | `borderRadius` | 100 | 14 | +| `Skeleton` | `borderRadius` | 7 | 14 | +| `Accordion` | `content.paddingRight` | 0 | 24 | +| `Message` | `content.paddingLeft` | 17.5 | 14 | +| `SelectButton` | `gap` | 7 / 10.5 | 4 | +| `ToggleButton` | `gap`, `paddingRight` | 10.5 | 14 | + +### Устранённые заимствования + +`Chip`, `Tabs`, `InputGroupAddon`, `InputTextBase` и `MenuItem` брали +disabled-палитру у кнопки (`components.button.extend.disabled*`). В +`tokens.json` эти токены сами являются ссылками на роли: + +```json +"disabledBackground": "{color.bg.neutral.weak.disabled}", +"disabledColor": "{color.fg.muted}" +``` + +Генератор резолвит ссылку и записывает конкретный цвет, поэтому связь с ролью +терялась. Компоненты переведены на роли напрямую — теперь изменение кнопки не +затрагивает пять чужих компонентов. Значения не изменились. + +Цвет вторичного текста (`typography.Color.Common['text-color-secondary']`, 5 +мест) переведён на `semantic.colorScheme.color.fg.muted`. В светлой теме +значение то же (`#85888e`), в тёмной раньше было такое же, теперь `#a2a5a9` — +появилась тема-зависимость, которой не было. + +### Узаконенные обращения + +Часть комментариев помечала проблему, которой нет. Они сняты и заменены +обоснованием прямо в коде: + +- **`Typography` (10)** — обращается к `semantic.color.fg.*` минуя слой + `components`. Цвет текста и есть семантическая роль; компонента `typography` в + `tokens.json` нет. +- **`InputOtp` (5)** — использует `components.inputtext.root.*`. Поле OTP должно + выглядеть как обычное поле ввода, собственные токены `inputotp` описывают + только отличия. Тот же приём в пресете PrimeUIX lara, где `inputotp` задаёт + лишь `gap` и `width`. +- **`transparent` (3)** — в `Chip` и `MenuItem` литерал оставлен: у `chip.root` + нет `borderColor`, у `menu.item` нет `background`, прозрачность не выражена + semantic-токеном. У кнопки для варианта `link` токен нашёлся — + `button.extend.extLink.background`. + +### Размеры полей и последние цветовые роли + +Высоты `InputSize` заданы целыми `rem`: `35 = 2.5rem`, `49 = 3.5rem`, +`56 = 4rem` при базе 14. При базе 16 это `40 / 56 / 64`, и все три значения есть +в `dimension.size`: + +| Место | Было | Стало | Токен | +| ---------------------------------- | ------------------: | ----: | ------------------------------- | +| `useInputStyles` `base` | 35 | 40 | `dimension.size[1100]` | +| `useInputStyles` `large` | 49 | 56 | `size[1300]` | +| `useInputStyles` `xlarge` | 56 | 64 | `size[1400]` | +| `Tabs/TabItem` высота | `badge.root.height` | 24 | `size[700]` | +| `ToggleButton` `paddingHorizontal` | `theme.Button.*` 14 | 14 | `togglebutton.root.paddingLeft` | + +Те же высоты были продублированы числами в `ToggleButton` и `SelectButtonItem` — +переведены вместе с полями, иначе компоненты разъехались бы. + +| Место | Было | Стало (light / dark) | Токен | +| ------------------------------- | ----------------------- | -------------------- | ------------------------------ | +| `ProgressSpinner` | `global.Neutrals.White` | `#ffffff / #ffffff` | `fg.on.fill.default` | +| `Chip` граница success | `#77f48a` фиксированный | `#1dc831 / #77f48a` | `border.status.success.strong` | +| `SelectButton` disabled-граница | `#a2a5a9 / #56595f` | `#cecfd2 / #56595f` | `border.neutral.strong` | + +Для `SelectButton` точной пары в semantic не нашлось: тёмная тема совпадает, +светлая стала светлее. + +## Комментариев `TODO(tokens-migration)` не осталось + +Последние две позиции — `SelectButton` и `SelectButtonItem`, цвет невыбранного +пункта через `semantic.colorScheme.color.fg.muted` — узаконены так же, как +`Typography`: обращение оставлено, комментарий заменён обоснованием. + +Наблюдение для дизайна: одно и то же `#85888e` приходит тремя путями — +`semantic.fg.muted` в `SelectButton`, `components.tabs.tab.color` в `Tabs`, +`components.menu.item.color` в `Menu`. Похоже на общую роль «неактивный элемент +выбора», а не на повод завести четвёртый компонентный токен. В самом +`SelectButtonItem` есть и третье употребление `fg.muted` (в `uniProps` иконки), +которое разметка не покрывала, — при заведении токена менять нужно три места. + +Счётчик `yarn tokens:audit` показывает `0`, но это не значит «всё на +`tokens.json`»: разметка не покрывала числовые литералы и legacy-неймспейсы в +публичном `ThemeType` (см. разделы ниже). + +### Цвета сверх разметки + +Комментариев на них не было, переведены по решению владельца дизайн-системы: + +| Место | Было | Стало | +| ---------------------------------- | ------------------------------------ | ------------------------------------------------- | +| `Typography.Service`, `Anchor` (7) | `typography.Color.Service.*` | `fg.status.*.default` | +| `Timer`, `TimerFlip` (2) | `typography.Color.Surface[0]` | `fg.active` | +| `ListBase` (2) | `theme.Surface`, `background.Common` | `border.neutral.default`, `bg.neutral.weak.hover` | +| `opacity: 0.6` / `0.2` (14) | литералы | `effects.opacity[60]` / `[20]` | + +Сервисные цвета сместились с «600»-оттенков на «500»: `text-info` +`#1e76cd → #4496e8` и аналогично для остальных статусов. Это единственная из +четырёх строк, которая меняет вид. + +## Не тронуто намеренно + +**Числовые литералы `opacity: 0` и `opacity: 1`** (4 места) — это логика «скрыто +/ видно», а не решение дизайна, хотя ключи в `effects.opacity` есть. + +**Анимация курсора в `InputOtpItem`** — объявлена вне `StyleSheet.create`, +потому что `Animated.Text` из reanimated не принимает Unistyles-стиль. Токены +импортируются из сгенерированного файла напрямую: шкала непрозрачности одинакова +в обеих темах. + +**Остальные числовые литералы** (около 25: `width`/`height` иконок, `minHeight` +в `InputOtp`, `marginBottom` курсора) — на них не было комментариев `TODO`, в +счётчик 157 они не входили. Требуют разбора поштучно: у части есть компонентный +`iconSize`, у части нет. + +**Размеры иконок на шрифтовой шкале.** `typography.Size` местами задавал не +шрифт, а размер иконки. Где в `tokens.json` есть `iconSize`, обращение +переведено на него; где нет — иконка осталась на `primitive.fonts.fontSize`. + +## Структурный риск + +Генератор покрывает `semantic`, `components` и `primitive.fonts`. Неймспейс +`theme.*` (`assets/themeLight.json`, `InputSize`, `ModalSize`, `custom`) +обновляется руками и с `tokens.json` не связан. Подмена входного файла его не +затронет, и расхождение обнаружится не при генерации, а глазами в интерфейсе — +тем же путём, каким возникли исходные 157 комментариев. + +`src/theme/assets/DEPRECATED_TOKENS.md` фиксирует, что `theme.Button.*`, +`theme.Form.inputSwitch.*` и `theme.General.primaryColor` входят в публичный +`ThemeType`, поэтому их удаление — breaking change. + +Отдельно: даже там, где UI Kit больше не использует legacy-неймспейс, он +остаётся в публичном `ThemeType` и доступен потребителям библиотеки — +`background`, `colors`, `border`, `effects`, `global`, `sizing`, `spacing`, +`typography`, `theme`, `custom`, `shadow`. Внутренняя миграция их не убирает. + +## Проверка + +``` +yarn tokens:audit # разбор оставшихся TODO +yarn tokens:validate # типы генератора + актуальность сгенерированных токенов +yarn tsc --noEmit +yarn lint:check +yarn jest +``` + +На момент последнего коммита: `tsc` без ошибок, `eslint` без ошибок, +сгенерированные токены актуальны, 1712 тестов проходят. + +**Снапшоты обновлены полностью** — метрики изменились почти везде. Отдельно +стоит знать: три набора (`Avatar`, `DialogHeader`, `ListBase`, 17 тестов) падали +ещё до начала этой работы, на исходном коммите ветки PR — снапшоты там не были +перегенерированы автором. При обновлении они перезаписаны вместе со всеми, то +есть тот долг не разобран, а зафиксирован. + +Изменения затронули 50 файлов кода и 30 файлов снапшотов. diff --git a/package.json b/package.json index d7d3233e..d92438ed 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "tokens:check": "ts-node --transpile-only --project scripts/token-generator/tsconfig.json scripts/token-generator/build.ts --check", "tokens:typecheck": "tsc --noEmit -p scripts/token-generator/tsconfig.json", "tokens:validate": "yarn tokens:typecheck && yarn tokens:check", + "tokens:audit": "ts-node --transpile-only --project scripts/token-generator/tsconfig.json scripts/token-generator/audit.ts", "doctor": "expo-doctor", "check": "expo install --check", "lint:check": "eslint --cache .", diff --git a/scripts/token-generator/README.md b/scripts/token-generator/README.md index 5894c4b8..bb94f453 100644 --- a/scripts/token-generator/README.md +++ b/scripts/token-generator/README.md @@ -31,10 +31,11 @@ Semantic-токены доступны потребителям библиоте ## Результат генерации -Из `design-tokens/input/tokens.json` создаются четыре файла: +Из `design-tokens/input/tokens.json` создаются пять файлов: ```text src/theme/tokens +├── fonts.json ├── semantic │ ├── light.json │ └── dark.json @@ -43,6 +44,12 @@ src/theme/tokens └── dark.json ``` +`fonts.json` собирается из `primitive.fonts.fontFamily` и не зависит от цветовой +схемы, поэтому файл один на обе темы. Публичный `FontsConfig` оперирует ролями +`primary` и `secondary`, поэтому `commonTheme` отображает `heading` в `primary`, +а `base` — в `secondary`. Отсутствие `primitive.fonts.fontFamily` во входных +токенах — ошибка генерации. + Для каждого выходного файла выбирается соответствующая ветка `colorScheme.light` или `colorScheme.dark`. Ключ `colorScheme` сохраняется, а уровень `light`/`dark` удаляется: @@ -55,8 +62,9 @@ components.button.colorScheme.light.outlined → components/light.json: button.colorScheme.outlined ``` -`primitive` нужен только для подстановки ссылок и не записывается в результат. -Light- и dark-файлы должны иметь одинаковую структуру и типы значений. +`primitive` нужен для подстановки ссылок и в результат не записывается — +единственное исключение `fonts.fontFamily`, попадающий в `fonts.json`. Light- и +dark-файлы должны иметь одинаковую структуру и типы значений. ## Преобразование значений diff --git a/scripts/token-generator/__tests__/audit.test.ts b/scripts/token-generator/__tests__/audit.test.ts new file mode 100644 index 00000000..27581253 --- /dev/null +++ b/scripts/token-generator/__tests__/audit.test.ts @@ -0,0 +1,149 @@ +import { mkdtempSync, mkdirSync, writeFileSync, rmSync } from 'node:fs' +import { tmpdir } from 'node:os' +import { join } from 'node:path' + +import { + auditTodos, + collectTodos, + parseTodo, + resolveLegacyPath, +} from '../audit' + +describe('parseTodo', () => { + test('разбирает поля комментария', () => { + const todo = parseTodo( + '// TODO(tokens-migration): reason=value-mismatch; legacy=spacing.Gap.gap-2; value=7; target=components.accordion.extend.extHeader.gap; targetValue=8', + 'src/components/Accordion/Accordion.tsx', + 168 + ) + + expect(todo).toStrictEqual({ + file: 'src/components/Accordion/Accordion.tsx', + line: 168, + reason: 'value-mismatch', + legacy: 'spacing.Gap.gap-2', + value: '7', + light: '', + dark: '', + target: 'components.accordion.extend.extHeader.gap', + targetValue: '8', + }) + }) + + test('разбирает цветовые пары light/dark', () => { + expect( + parseTodo( + '// TODO(tokens-migration): reason=missing; legacy=components.button.extend.disabledColor; light=#85888e; dark=#a2a5a9', + 'file.tsx', + 1 + ) + ).toMatchObject({ light: '#85888e', dark: '#a2a5a9', value: '' }) + }) + + test('игнорирует строки без маркера и без legacy', () => { + expect(parseTodo('const gap = 8', 'file.tsx', 1)).toBeNull() + expect( + parseTodo('// TODO(tokens-migration): reason=missing', 'file.tsx', 1) + ).toBeNull() + }) +}) + +describe('resolveLegacyPath', () => { + test('находит сгенерированные component- и semantic-токены', () => { + expect( + resolveLegacyPath('components.button.extend.disabledColor') + ).toBeDefined() + expect( + resolveLegacyPath('semantic.colorScheme.color.fg.muted') + ).toBeDefined() + }) + + test('находит поддеревья theme, подмешанные отдельно от themeLight.json', () => { + expect(resolveLegacyPath('theme.InputSize.base.min-height')).toBe(35) + }) + + test('возвращает undefined для неймспейсов вне пайплайна', () => { + expect(resolveLegacyPath('fonts.primary')).toBeUndefined() + expect(resolveLegacyPath('hardcode.transparent')).toBeUndefined() + }) +}) + +describe('auditTodos', () => { + test('классифицирует TODO по резолву legacy-пути', () => { + const [existing, mismatched, outside] = auditTodos([ + { + file: 'a.tsx', + line: 1, + reason: 'missing', + legacy: 'theme.InputSize.base.min-height', + value: '35', + light: '', + dark: '', + target: '', + targetValue: '', + }, + { + file: 'b.tsx', + line: 2, + reason: 'value-mismatch', + legacy: 'theme.InputSize.base.min-height', + value: '35', + light: '', + dark: '', + target: '', + targetValue: '99', + }, + { + file: 'c.tsx', + line: 3, + reason: 'missing', + legacy: 'hardcode.transparent', + value: 'transparent', + light: '', + dark: '', + target: '', + targetValue: '', + }, + ]) + + expect(existing.status).toBe('токен есть') + expect(mismatched.status).toBe('значение расходится') + expect(outside.status).toBe('вне пайплайна') + }) +}) + +describe('collectTodos', () => { + test('обходит вложенные каталоги и собирает комментарии', () => { + const directory = mkdtempSync(join(tmpdir(), 'tokens-audit-')) + + try { + mkdirSync(join(directory, 'nested')) + writeFileSync( + join(directory, 'Component.tsx'), + '// TODO(tokens-migration): reason=missing; legacy=spacing.Gap.gap-2; value=7\nconst gap = 7\n' + ) + writeFileSync( + join(directory, 'nested', 'useStyles.ts'), + 'const size = 1\n// TODO(tokens-migration): reason=missing; legacy=border.Width.border; value=1\n' + ) + writeFileSync(join(directory, 'readme.md'), 'TODO(tokens-migration): x') + + const todos = collectTodos(directory) + + expect(todos).toHaveLength(2) + expect(todos.map((todo) => todo.legacy).sort()).toStrictEqual([ + 'border.Width.border', + 'spacing.Gap.gap-2', + ]) + expect(todos.map((todo) => todo.line).sort()).toStrictEqual([1, 2]) + } finally { + rmSync(directory, { recursive: true, force: true }) + } + }) + + test('в исходниках компонентов не осталось неразобранных комментариев', () => { + expect(collectTodos(`${__dirname}/../../../src/components`)).toStrictEqual( + [] + ) + }) +}) diff --git a/scripts/token-generator/__tests__/compiler.test.ts b/scripts/token-generator/__tests__/compiler.test.ts index a32d2611..f0e68a04 100644 --- a/scripts/token-generator/__tests__/compiler.test.ts +++ b/scripts/token-generator/__tests__/compiler.test.ts @@ -22,6 +22,7 @@ import { parseBoxShorthand, } from '../core/normalization' import { resolveReferences } from '../core/resolution' +import { resolvePath } from '../core/tree' import { isTokenTree, type CompiledTokens, @@ -240,6 +241,7 @@ describe('token compiler', () => { primitive: { sizing: { small: '0.5rem', base: '1rem' }, motion: { fast: '150ms' }, + fonts: { fontFamily: { base: 'Noto Sans', heading: 'TT Fellows' } }, }, semantic: { dimension: { @@ -320,6 +322,7 @@ describe('token compiler', () => { primitive: { sizing: { focusRing: '0.25rem' }, colors: { focus: '#d4fedc' }, + fonts: { fontFamily: { base: 'Noto Sans', heading: 'TT Fellows' } }, }, semantic: { dimension: { @@ -402,8 +405,28 @@ describe('production input tokens', () => { expect(tokenFiles).toStrictEqual(['tokens.json']) }) + test('выводит шрифтовые примитивы с нормализованными значениями', () => { + const primitive = source.primitive + + if (!isTokenTree(primitive)) throw new Error('Expected primitive tokens') + + const input = resolvePath(primitive, 'fonts') + + if (!isTokenTree(input)) throw new Error('Expected font primitives') + + expect(Object.keys(compiled.fonts)).toStrictEqual(Object.keys(input)) + expect(compiled.fonts.fontFamily).toStrictEqual(input.fontFamily) + // rem пересчитан в px: "1rem" -> 16 + expect(resolvePath(compiled.fonts, 'fontSize.300')).toBe(16) + expect(JSON.stringify(compiled.fonts)).not.toMatch(/rem/) + }) + test('не экспортирует primitive и убирает разделение тем из colorScheme', () => { - expect(Object.keys(compiled)).toStrictEqual(['semantic', 'components']) + expect(Object.keys(compiled)).toStrictEqual([ + 'semantic', + 'components', + 'fonts', + ]) expect(compiled).not.toHaveProperty('primitive') const inputComponents = source.components @@ -443,7 +466,9 @@ describe('production input tokens', () => { test('содержит только целевые файлы', () => { const tokenFiles = listJsonFiles(TOKENS_DIRECTORY) const expectedFiles = Object.values(OUTPUT_FILES) - .flatMap((group) => Object.values(group)) + .flatMap((group) => + typeof group === 'string' ? [group] : Object.values(group) + ) .sort() expect(tokenFiles).toStrictEqual(expectedFiles) @@ -546,7 +571,9 @@ describe('production input tokens', () => { expect(listJsonFiles(temporaryDirectory)).toStrictEqual( Object.values(OUTPUT_FILES) - .flatMap((group) => Object.values(group)) + .flatMap((group) => + typeof group === 'string' ? [group] : Object.values(group) + ) .sort() ) expect( diff --git a/scripts/token-generator/audit.ts b/scripts/token-generator/audit.ts new file mode 100644 index 00000000..bf59793e --- /dev/null +++ b/scripts/token-generator/audit.ts @@ -0,0 +1,245 @@ +import { readFileSync, readdirSync } from 'node:fs' +import { join, relative, resolve } from 'node:path' + +import { loadTokenTree } from './io' + +const SOURCE_DIRECTORY = resolve(__dirname, '../../src') +const THEME_DIRECTORY = resolve(__dirname, '../../src/theme') +const TODO_MARKER = 'TODO(tokens-migration)' +const SOURCE_EXTENSIONS = ['.ts', '.tsx'] + +/** + * Неймспейс legacy-пути -> файл, в котором этот путь нужно искать. + * Резолвим по light-варианту: dark отличается значениями, но не структурой. + */ +const NAMESPACE_SOURCES: Record = { + components: join(THEME_DIRECTORY, 'tokens/components/light.json'), + semantic: join(THEME_DIRECTORY, 'tokens/semantic/light.json'), + theme: join(THEME_DIRECTORY, 'assets/themeLight.json'), + spacing: join(THEME_DIRECTORY, 'assets/spacing.json'), + typography: join(THEME_DIRECTORY, 'assets/typography.json'), + border: join(THEME_DIRECTORY, 'assets/border.json'), + sizing: join(THEME_DIRECTORY, 'assets/sizing.json'), + global: join(THEME_DIRECTORY, 'assets/global.json'), + background: join(THEME_DIRECTORY, 'assets/background.json'), +} + +/** Неймспейсы вне пайплайна токенов: резолвить нечем, нужно решение. */ +const UNRESOLVABLE_NAMESPACES = new Set(['fonts', 'hardcode']) + +/** + * Поддеревья theme.*, которые подмешиваются в тему отдельно от themeLight.json + * (см. lightTheme.ts) и лежат в каталоге по файлу на размер. + */ +const THEME_SUBTREE_DIRECTORIES = new Set(['InputSize', 'ModalSize']) + +export type TodoStatus = + | 'токен есть' + | 'значение расходится' + | 'токена нет' + | 'вне пайплайна' + +export interface TodoComment { + file: string + line: number + reason: string + legacy: string + value: string + light: string + dark: string + target: string + targetValue: string +} + +export interface AuditedTodo extends TodoComment { + status: TodoStatus + actual: string +} + +const FIELD_PATTERN = /(?\w+)=(?[^;]+)/g + +export const parseTodo = ( + text: string, + file: string, + line: number +): TodoComment | null => { + const markerIndex = text.indexOf(TODO_MARKER) + + if (markerIndex === -1) return null + + const fields: Record = {} + + for (const match of text + .slice(markerIndex + TODO_MARKER.length) + .matchAll(FIELD_PATTERN)) { + const { key, value } = match.groups ?? {} + + if (key && value !== undefined) fields[key] = value.trim() + } + + if (!fields.legacy) return null + + return { + file, + line, + reason: fields.reason ?? '', + legacy: fields.legacy, + value: fields.value ?? '', + light: fields.light ?? '', + dark: fields.dark ?? '', + target: fields.target ?? '', + targetValue: fields.targetValue ?? '', + } +} + +const findSourceFiles = (directory: string): string[] => + readdirSync(directory, { withFileTypes: true }) + .flatMap((entry) => { + const entryPath = join(directory, entry.name) + + if (entry.isDirectory()) return findSourceFiles(entryPath) + + return entry.isFile() && + SOURCE_EXTENSIONS.some((extension) => entry.name.endsWith(extension)) + ? [entryPath] + : [] + }) + .sort() + +export const collectTodos = (directory: string): TodoComment[] => + findSourceFiles(directory).flatMap((filePath) => + readFileSync(filePath, 'utf8') + .split('\n') + .flatMap((text, index) => { + const todo = parseTodo( + text, + relative(resolve(__dirname, '../..'), filePath), + index + 1 + ) + + return todo ? [todo] : [] + }) + ) + +const treeCache = new Map() + +const readTree = (filePath: string): unknown => { + if (!treeCache.has(filePath)) treeCache.set(filePath, loadTokenTree(filePath)) + + return treeCache.get(filePath) +} + +const readPath = (tree: unknown, segments: string[]): unknown => + segments.reduce( + (node, segment) => + node !== null && typeof node === 'object' && segment in node + ? (node as Record)[segment] + : undefined, + tree + ) + +export const resolveLegacyPath = (legacy: string): unknown => { + const [namespace, ...segments] = legacy.split('.') + + if (namespace === 'theme' && THEME_SUBTREE_DIRECTORIES.has(segments[0])) { + const [subtree, size, ...rest] = segments + const sizeFile = join(THEME_DIRECTORY, 'assets', subtree, `${size}.json`) + + return readPath(readTree(sizeFile), rest) + } + + const sourceFile = NAMESPACE_SOURCES[namespace] + + if (!sourceFile) return undefined + + return readPath(readTree(sourceFile), segments) +} + +const auditTodo = (todo: TodoComment): AuditedTodo => { + const [namespace] = todo.legacy.split('.') + + if (UNRESOLVABLE_NAMESPACES.has(namespace)) { + return { ...todo, status: 'вне пайплайна', actual: '' } + } + + const actual = resolveLegacyPath(todo.legacy) + + if (actual === undefined) return { ...todo, status: 'токена нет', actual: '' } + + const actualText = String(actual) + const expected = todo.targetValue || todo.value + + return { + ...todo, + actual: actualText, + status: + expected && actualText !== expected + ? 'значение расходится' + : 'токен есть', + } +} + +export const auditTodos = (todos: TodoComment[]): AuditedTodo[] => + todos.map(auditTodo) + +const formatReport = (audited: AuditedTodo[]): string => { + const byStatus = new Map() + + for (const todo of audited) { + byStatus.set(todo.status, [...(byStatus.get(todo.status) ?? []), todo]) + } + + const sections = [...byStatus.entries()].map(([status, todos]) => { + const rows = todos.map((todo) => { + const expectation = todo.targetValue + ? ` (ожидалось ${todo.targetValue})` + : '' + + return ` ${todo.file}:${todo.line}\n ${todo.legacy} -> ${todo.actual || '—'}${expectation}` + }) + + return `${status.toUpperCase()} — ${todos.length}\n${rows.join('\n')}` + }) + + const summary = [...byStatus.entries()] + .map(([status, todos]) => ` ${status}: ${todos.length}`) + .join('\n') + + return `${sections.join('\n\n')}\n\nВсего TODO: ${audited.length}\n${summary}` +} + +const HELP = `Использование: + yarn tokens:audit [--summary] + +Проверяет комментарии ${TODO_MARKER} в src/: резолвит legacy-путь каждого TODO +в сгенерированных токенах и legacy-ассетах темы. + +Опции: + --summary только сводка по статусам + --help показать эту справку` + +export const run = (arguments_: string[]): void => { + if (arguments_.includes('--help')) { + console.log(HELP) + + return + } + + const audited = auditTodos(collectTodos(SOURCE_DIRECTORY)) + const report = formatReport(audited) + + console.log( + arguments_.includes('--summary') + ? report.slice(report.indexOf('Всего TODO:')) + : report + ) +} + +if (require.main === module) { + try { + run(process.argv.slice(2)) + } catch (error: unknown) { + console.error(error instanceof Error ? error.message : String(error)) + process.exitCode = 1 + } +} diff --git a/scripts/token-generator/core/compiler.ts b/scripts/token-generator/core/compiler.ts index 1c57644a..c342df1b 100644 --- a/scripts/token-generator/core/compiler.ts +++ b/scripts/token-generator/core/compiler.ts @@ -180,6 +180,29 @@ const compileScheme = ( } } +/** + * Шрифтовые примитивы — единственная часть primitive, попадающая в результат: + * семейства, размеры, интерлиньяж и начертания нужны компонентам напрямую, + * потому что отдельного component-токена типографики в источнике нет. + */ +const compileFonts = (primitive: TokenTree): TokenTree => { + const fonts = resolvePath(primitive, 'fonts') + + if (!isTokenTree(fonts)) { + throw new Error('Expected an object at "primitive.fonts"') + } + + const normalized = normalizeTree(mergeTrees({}, fonts), 'fonts') + + if (!isTokenTree(normalized)) { + throw new Error('Expected normalized font primitives') + } + + assertValidOutput(normalized, 'fonts') + + return normalized +} + export const compileTokens = (source: TokenTree): CompiledTokens => { const primitive = getGroup(source, 'primitive') const semanticSource = getGroup(source, 'semantic') @@ -202,5 +225,5 @@ export const compileTokens = (source: TokenTree): CompiledTokens => { assertSameShape(semantic.light, semantic.dark) assertSameShape(components.light, components.dark) - return { semantic, components } + return { semantic, components, fonts: compileFonts(primitive) } } diff --git a/scripts/token-generator/core/types.ts b/scripts/token-generator/core/types.ts index 2c98a251..419ccb43 100644 --- a/scripts/token-generator/core/types.ts +++ b/scripts/token-generator/core/types.ts @@ -15,6 +15,8 @@ export interface BoxEdges { export interface CompiledTokens { semantic: ThemeTokens components: ThemeTokens + /** Семейства шрифтов: не зависят от цветовой схемы, файл один на обе темы. */ + fonts: TokenTree } export interface ThemeTokens { diff --git a/scripts/token-generator/io.ts b/scripts/token-generator/io.ts index 301d159c..8623e298 100644 --- a/scripts/token-generator/io.ts +++ b/scripts/token-generator/io.ts @@ -21,6 +21,7 @@ export const OUTPUT_FILES = { light: join('components', 'light.json'), dark: join('components', 'dark.json'), }, + fonts: 'fonts.json', } as const export const parseTokenTree = ( @@ -49,6 +50,7 @@ const outputEntries = ( [OUTPUT_FILES.semantic.dark, compiled.semantic.dark], [OUTPUT_FILES.components.light, compiled.components.light], [OUTPUT_FILES.components.dark, compiled.components.dark], + [OUTPUT_FILES.fonts, compiled.fonts], ] export const writeGeneratedTokens = ( diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 76ffb39e..40791b04 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -109,8 +109,8 @@ export const Accordion: React.FC = ({ ({ - color: theme.Panel.Accordion.accordionHeaderTextColor, + uniProps={({ components }) => ({ + color: components.accordion.header.color, })} /> @@ -119,8 +119,8 @@ export const Accordion: React.FC = ({ {...styles.icon} source={Icon} testID={AccordionTestIds.icon} - uniProps={({ theme }) => ({ - color: theme.Panel.Accordion.accordionHeaderTextColor, + uniProps={({ components }) => ({ + color: components.accordion.header.color, })} /> ) : null} @@ -159,36 +159,44 @@ export const AccordionTestIds = { separator: 'Separator', } -const styles = StyleSheet.create(({ theme, fonts }) => ({ - component: { width: '100%' }, - header: { - paddingVertical: theme.Panel.Accordion.accordionHeaderPaddingTopBottom, - gap: 7, - flexDirection: 'row', - alignItems: 'center', - backgroundColor: theme.Panel.Accordion.accordionHeaderBg, - }, - icon: { width: 17.5, height: 17.5 }, - title: { - fontSize: 15.75, - includeFontPadding: false, - verticalAlign: 'middle', - fontWeight: 700, - color: theme.Panel.Accordion.accordionHeaderTextColor, - fontFamily: fonts.secondary, - }, - contentAnimated: { overflow: 'hidden' }, - contentWrapper: { - position: 'absolute', - width: '100%', - paddingLeft: theme.Panel.Accordion.accordionContentPaddingLeft, - paddingTop: theme.Panel.Accordion.accordionContentPaddingTop, - paddingRight: theme.Panel.Accordion.accordionContentPaddingRight, - paddingBottom: theme.Panel.Accordion.accordionContentPaddingBottom, - }, - separator: { - borderTopColor: theme.Panel.Accordion.accordionHeaderBorderColor, - borderTopWidth: 1, - }, - disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, -})) +const styles = StyleSheet.create( + ({ semantic, primitive, components, fonts }) => ({ + component: { width: '100%' }, + header: { + paddingVertical: semantic.dimension.space[400], + gap: components.accordion.extend.extHeader.gap, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: components.accordion.colorScheme.header.background, + }, + icon: { + width: components.accordion.extend.extHeader.iconSize, + height: components.accordion.extend.extHeader.iconSize, + }, + title: { + fontSize: primitive.fonts.fontSize[400], + includeFontPadding: false, + verticalAlign: 'middle', + fontWeight: primitive.fonts.fontWeight.bold, + color: components.accordion.header.color, + fontFamily: fonts.secondary, + }, + contentAnimated: { overflow: 'hidden' }, + contentWrapper: { + position: 'absolute', + width: '100%', + paddingLeft: components.accordion.content.paddingLeft, + paddingTop: semantic.dimension.space.none, + paddingRight: components.accordion.content.paddingRight, + paddingBottom: semantic.dimension.space[400], + }, + separator: { + borderTopColor: components.accordion.panel.borderColor, + borderTopWidth: 1, + }, + disabled: { + mixBlendMode: 'luminosity', + opacity: semantic.effects.opacity[60], + }, + }) +) diff --git a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap index 04669b17..a1483e18 100644 --- a/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap +++ b/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap @@ -8,7 +8,7 @@ exports[`Accordion Header elements maximal 1`] = ` "width": "100%", }, { - "borderTopColor": "#e2e2e4", + "borderTopColor": "#cecfd2", "borderTopWidth": 1, }, ] @@ -51,9 +51,9 @@ exports[`Accordion Header elements maximal 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, + "gap": 8, "paddingVertical": 14, }, {}, @@ -95,15 +95,15 @@ exports[`Accordion Header elements maximal 1`] = ` > ( height={iconSize} source={Icon} testID={AvatarTestId.icon} - uniProps={({ theme }) => ({ - color: iconColor ?? theme.Misc.Avatar.avatarTextColor, + uniProps={({ components }) => ({ + color: iconColor ?? components.avatar.root.color, })} width={iconSize} /> @@ -257,30 +257,30 @@ export const Avatar = memo( } ) -const styles = StyleSheet.create(({ theme, border, typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, components, fonts }) => ({ container: { justifyContent: 'center', alignItems: 'center', - borderRadius: theme.General.borderRadiusXL, - borderWidth: 1, - borderColor: theme.Misc.Avatar.avatarBorderColor, - backgroundColor: theme.Misc.Avatar.avatarBg, + borderRadius: components.avatar.root.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], + borderColor: components.avatar.extend.borderColor, + backgroundColor: components.avatar.root.background, overflow: 'hidden', }, - backgroundFill: { backgroundColor: theme.Misc.Avatar.avatarBg }, - circle: { borderRadius: border.Radius['rounded-full'] }, + backgroundFill: { backgroundColor: components.avatar.root.background }, + circle: { borderRadius: components.avatar.extend.circle.borderRadius }, text: { - fontSize: typography.Size['text-base'], + fontSize: components.avatar.root.fontSize, textTransform: 'uppercase', - color: theme.Misc.Avatar.avatarTextColor, + color: components.avatar.root.color, includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, }, badgeContainer: { position: 'absolute', right: 0, top: -7 }, badgeMeasureContainer: { alignSelf: 'flex-start' }, - icon: { width: typography.Size['text-base'] }, - iconXLarge: { width: typography.Size['text-2xl'] }, + icon: { width: components.avatar.icon.size }, + iconXLarge: { width: components.avatar.xl.icon.size }, })) export const AvatarTestId = { diff --git a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 81e73a20..49469718 100644 --- a/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -11,8 +11,8 @@ exports[`Avatar component tests Size: custom, shape: circle, type: icon, with cu { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -25,7 +25,7 @@ exports[`Avatar component tests Size: custom, shape: circle, type: icon, with cu "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -149,8 +149,8 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "#e2e2e4", - "borderRadius": 10.5, + "borderColor": "#cecfd2", + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", "overflow": "hidden", @@ -163,7 +163,7 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, + "borderRadius": 1600, }, undefined, ] @@ -172,15 +172,15 @@ exports[`Avatar component tests Size: large, shape: circle, type: icon 1`] = ` > ( } ) -const badgeStyles = StyleSheet.create( - ({ theme, border, typography, fonts }) => ({ - container: { alignItems: 'flex-start' }, - dot: { - variants: { - severity: { - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, - info: { - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, - }, - success: { - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, - }, - warning: { - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, - }, - danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, - }, +const badgeStyles = StyleSheet.create(({ semantic, components, fonts }) => ({ + container: { alignItems: 'flex-start' }, + dot: { + variants: { + severity: { + basic: { + backgroundColor: components.badge.colorScheme.primary.background, + }, + info: { + backgroundColor: components.badge.extend.extDot.info.background, + }, + success: { + backgroundColor: components.badge.extend.extDot.success.background, + }, + warning: { + backgroundColor: components.badge.extend.extDot.warn.background, + }, + danger: { + backgroundColor: components.badge.extend.extDot.danger.background, }, }, }, - dotShape: { - width: theme.Misc.Badge.badgeDotSize, - height: theme.Misc.Badge.badgeDotSize, - borderRadius: border.Radius['rounded-full'], - }, - textBadgeContainer: { - height: theme.Misc.Badge.badgeHeight, - paddingHorizontal: theme.Misc.Tag.tagPadding, - justifyContent: 'center', - borderRadius: border.Radius['rounded-full'], - }, - textBadge: { - color: theme.Misc.Badge.badgeTextColor, - fontSize: typography.Size['text-xs'], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - }, - hiddenContainer: { - width: Dimensions.get('window').width, - height: 0, - flexDirection: 'row', - position: 'absolute', - }, - }) -) + }, + dotShape: { + width: components.badge.dot.size, + height: components.badge.dot.size, + borderRadius: components.badge.root.borderRadius, + }, + textBadgeContainer: { + height: components.badge.root.height, + paddingHorizontal: components.badge.root.padding, + justifyContent: 'center', + borderRadius: semantic.dimension.borderRadius.max, + }, + textBadge: { + color: components.badge.colorScheme.primary.color, + fontSize: components.badge.root.fontSize, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.primary, + }, + hiddenContainer: { + width: Dimensions.get('window').width, + height: 0, + flexDirection: 'row', + position: 'absolute', + }, +})) diff --git a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap index e4b181ae..c728269d 100644 --- a/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/src/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -18,9 +18,9 @@ exports[`Badge component tests dot, severity: basic 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -43,12 +43,12 @@ exports[`Badge component tests dot, severity: danger 1`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -71,12 +71,12 @@ exports[`Badge component tests dot, severity: info 1`] = ` style={ [ { - "backgroundColor": "#aad7fb", + "backgroundColor": "#77baf4", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -99,12 +99,12 @@ exports[`Badge component tests dot, severity: success 1`] = ` style={ [ { - "backgroundColor": "#aafbb7", + "backgroundColor": "#77f48a", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -127,12 +127,12 @@ exports[`Badge component tests dot, severity: warning 1`] = ` style={ [ { - "backgroundColor": "#fddeaa", + "backgroundColor": "#facb75", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } @@ -158,10 +158,10 @@ exports[`Badge component tests severity: basic 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -171,9 +171,9 @@ exports[`Badge component tests severity: basic 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -206,9 +206,9 @@ exports[`Badge component tests severity: basic 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -236,13 +236,13 @@ exports[`Badge component tests severity: basic 2`] = ` style={ [ { - "backgroundColor": "#aad7fb", + "backgroundColor": "#77baf4", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -252,9 +252,9 @@ exports[`Badge component tests severity: basic 2`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -287,9 +287,9 @@ exports[`Badge component tests severity: basic 2`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -317,13 +317,13 @@ exports[`Badge component tests severity: basic 3`] = ` style={ [ { - "backgroundColor": "#aafbb7", + "backgroundColor": "#77f48a", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -333,9 +333,9 @@ exports[`Badge component tests severity: basic 3`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -368,9 +368,9 @@ exports[`Badge component tests severity: basic 3`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -398,13 +398,13 @@ exports[`Badge component tests severity: basic 4`] = ` style={ [ { - "backgroundColor": "#fddeaa", + "backgroundColor": "#facb75", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -414,9 +414,9 @@ exports[`Badge component tests severity: basic 4`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -449,9 +449,9 @@ exports[`Badge component tests severity: basic 4`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -479,13 +479,13 @@ exports[`Badge component tests severity: basic 5`] = ` style={ [ { - "backgroundColor": "#fbacaa", + "backgroundColor": "#f47f77", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -495,9 +495,9 @@ exports[`Badge component tests severity: basic 5`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -530,9 +530,9 @@ exports[`Badge component tests severity: basic 5`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -563,10 +563,10 @@ exports[`Badge component tests severity: default 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -576,9 +576,9 @@ exports[`Badge component tests severity: default 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -611,9 +611,9 @@ exports[`Badge component tests severity: default 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -646,9 +646,9 @@ exports[`Badge component tests with custom style 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 7, - "width": 7, + "borderRadius": 8, + "height": 8, + "width": 8, }, ] } diff --git a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 2a91e4a6..61172500 100644 --- a/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -37,17 +37,15 @@ exports[`Button component tests Button default props 1`] = ` { "alignItems": "center", "backgroundColor": "#44e858", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 10.5, + "borderColor": "transparent", + "borderRadius": 14, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 35, + "gap": 8, + "height": "auto", "justifyContent": "center", - "maxHeight": 35, - "minHeight": 35, "paddingHorizontal": 14, - "paddingVertical": 0, + "paddingVertical": 8, }, false, ] @@ -56,9 +54,9 @@ exports[`Button component tests Button default props 1`] = ` ({ - indicator: { - color: theme.Button.Disabled.disabledButtonTextColor, - variants: { - size: { - xlarge: { height: 21 }, - large: { height: 21 }, - base: { height: 17.5 }, - small: { height: 14 }, +const buttonActivityIndicatorStyles = StyleSheet.create( + ({ components: { button } }) => ({ + indicator: { + color: button.extend.disabledColor, + variants: { + size: { + xlarge: { height: 21 }, + large: { height: 21 }, + base: { height: 17.5 }, + small: { height: 14 }, + }, }, }, - }, -})) + }) +) diff --git a/src/components/Button/utils/ButtonContainer.tsx b/src/components/Button/utils/ButtonContainer.tsx index 682cc8ed..0f6671a8 100644 --- a/src/components/Button/utils/ButtonContainer.tsx +++ b/src/components/Button/utils/ButtonContainer.tsx @@ -80,96 +80,91 @@ const ButtonContainerComponent = ({ export const ButtonContainer = genericMemo(ButtonContainerComponent) +// `transparent` здесь — отсутствие фона или границы, а не цвет дизайн-системы: +// прозрачность не выражена ни semantic-токеном, ни свойствами button.extend.extText. const buttonContainerStyles = StyleSheet.create( - ({ theme, border, spacing, sizing }) => ({ + ({ semantic, components: { button } }) => ({ container: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', - borderWidth: border.Width.border, + borderWidth: button.extend.borderWidth, variants: { size: { xlarge: { - paddingHorizontal: spacing.Padding['p-6'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightXL, - minHeight: theme.Button.Common.buttonHeightXL, - maxHeight: theme.Button.Common.buttonHeightXL, - gap: spacing.Gap['gap-3'], - borderRadius: theme.General.borderRadius2XL, + paddingHorizontal: button.extend.extXlg.paddingX, + paddingVertical: button.extend.extXlg.paddingY, + height: button.extend.extXlg.height, + minHeight: button.extend.extXlg.height, + maxHeight: button.extend.extXlg.height, + gap: button.extend.extXlg.gap, + borderRadius: button.extend.extXlg.borderRadius, }, large: { - paddingHorizontal: spacing.Padding['p-6'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightLG, - minHeight: theme.Button.Common.buttonHeightLG, - maxHeight: theme.Button.Common.buttonHeightLG, - gap: spacing.Gap['gap-3'], - borderRadius: theme.General.borderRadius2XL, + paddingHorizontal: button.root.lg.paddingX, + paddingVertical: button.root.lg.paddingY, + height: button.extend.extLg.height, + minHeight: button.extend.extLg.height, + maxHeight: button.extend.extLg.height, + gap: button.extend.extLg.gap, + borderRadius: button.extend.extLg.borderRadius, }, base: { - paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeight, - minHeight: theme.Button.Common.buttonHeight, - maxHeight: theme.Button.Common.buttonHeight, - gap: theme.General.inlineSpacing, - borderRadius: theme.General.borderRadiusXL, + paddingHorizontal: button.root.paddingX, + paddingVertical: button.root.paddingY, + height: 'auto', + gap: button.root.gap, + borderRadius: button.root.borderRadius, }, small: { - paddingHorizontal: spacing.Padding['p-3'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - height: theme.Button.Common.buttonHeightSM, - minHeight: theme.Button.Common.buttonHeightSM, - maxHeight: theme.Button.Common.buttonHeightSM, - gap: theme.General.inlineSpacing, - borderRadius: theme.General.borderRadiusXL, + paddingHorizontal: button.root.sm.paddingX, + paddingVertical: button.root.sm.paddingY, + height: 'auto', + gap: button.extend.extSm.gap, + borderRadius: button.extend.extSm.borderRadius, }, }, shape: { square: {}, - circle: { borderRadius: border.Radius['rounded-full'] }, + circle: { borderRadius: button.root.roundedBorderRadius }, }, variant: { primary: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonBg, + borderColor: button.colorScheme.root.primary.borderColor, + backgroundColor: button.colorScheme.root.primary.background, }, secondary: { - borderColor: theme.Button.Primary.secondaryButtonBorderColor, - backgroundColor: theme.Button.Primary.secondaryButtonBg, + borderColor: button.colorScheme.root.secondary.borderColor, + backgroundColor: button.colorScheme.root.secondary.background, }, tertiary: { - borderColor: theme.Button.Secondary.helpButtonBorderColor, - backgroundColor: theme.Button.Secondary.helpButtonBg, - }, - text: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: button.colorScheme.root.contrast.borderColor, + backgroundColor: button.colorScheme.root.contrast.background, }, + text: { borderColor: 'transparent', backgroundColor: 'transparent' }, link: { - paddingHorizontal: 0, - paddingVertical: spacing.Padding['p-1'], + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space[100], height: 'auto', minHeight: 'auto', - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: 'transparent', + backgroundColor: button.extend.extLink.background, }, basic: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonBg, + borderColor: button.colorScheme.root.primary.borderColor, + backgroundColor: button.colorScheme.root.primary.background, }, outlined: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: button.colorScheme.outlined.primary.borderColor, + backgroundColor: 'transparent', }, }, severity: { info: {}, success: {}, warning: {}, danger: {} }, pressed: { true: {}, false: {} }, disabled: { true: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, + backgroundColor: button.extend.disabledBackground, + borderColor: 'transparent', }, false: {}, }, @@ -181,40 +176,40 @@ const buttonContainerStyles = StyleSheet.create( variant: 'primary', pressed: 'true', styles: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Brand.buttonHoverBg, + borderColor: button.colorScheme.root.primary.hoverBorderColor, + backgroundColor: button.colorScheme.root.primary.hoverBackground, }, }, { variant: 'secondary', pressed: 'true', styles: { - borderColor: theme.Button.Primary.secondaryButtonHoverBorderColor, - backgroundColor: theme.Button.Primary.secondaryButtonHoverBg, + borderColor: button.colorScheme.root.secondary.hoverBorderColor, + backgroundColor: button.colorScheme.root.secondary.hoverBackground, }, }, { variant: 'tertiary', pressed: 'true', styles: { - borderColor: theme.Button.Secondary.helpButtonHoverBorderColor, - backgroundColor: theme.Button.Secondary.helpButtonHoverBg, + borderColor: button.colorScheme.root.contrast.hoverBorderColor, + backgroundColor: button.colorScheme.root.contrast.hoverBackground, }, }, { variant: 'text', pressed: 'true', styles: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.primary.hoverBackground, }, }, { variant: 'link', disabled: 'true', styles: { - borderColor: theme.Button.Brand.buttonBorderColor, - backgroundColor: theme.Button.Text.textButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, @@ -223,118 +218,96 @@ const buttonContainerStyles = StyleSheet.create( variant: 'basic', severity: 'info', styles: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, + borderColor: button.colorScheme.root.info.borderColor, + backgroundColor: button.colorScheme.root.info.background, }, }, { variant: 'outlined', severity: 'info', styles: { - borderColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonBg, + borderColor: button.colorScheme.outlined.info.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'info', styles: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, { variant: 'basic', severity: 'success', styles: { - borderColor: - theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, + borderColor: button.colorScheme.root.success.borderColor, + backgroundColor: button.colorScheme.root.success.background, }, }, { variant: 'outlined', severity: 'success', styles: { - borderColor: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Outlined.successOutlinedButtonBg, + borderColor: button.colorScheme.outlined.success.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'success', styles: { - borderColor: - theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Text.successTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, { variant: 'basic', severity: 'warning', styles: { - borderColor: - theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, + borderColor: button.colorScheme.root.warn.borderColor, + backgroundColor: button.colorScheme.root.warn.background, }, }, { variant: 'outlined', severity: 'warning', styles: { - borderColor: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Outlined.warningOutlinedButtonBg, + borderColor: button.colorScheme.outlined.warn.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'warning', styles: { - borderColor: - theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Text.warningTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, { variant: 'basic', severity: 'danger', styles: { - borderColor: - theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, + borderColor: button.colorScheme.root.danger.borderColor, + backgroundColor: button.colorScheme.root.danger.background, }, }, { variant: 'outlined', severity: 'danger', styles: { - borderColor: - theme.Button.Severity.Danger.Outlined - .dangerOutlinedButtonBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBg, + borderColor: button.colorScheme.outlined.danger.borderColor, + backgroundColor: 'transparent', }, }, { variant: 'text', severity: 'danger', styles: { - borderColor: - theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Text.dangerTextButtonBg, + borderColor: 'transparent', + backgroundColor: 'transparent', }, }, @@ -344,8 +317,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'info', pressed: 'true', styles: { - borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor, - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonHoverBg, + borderColor: button.colorScheme.root.info.hoverBorderColor, + backgroundColor: button.colorScheme.root.info.hoverBackground, }, }, { @@ -353,11 +326,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'info', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Info.Outlined - .infoOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBg, + borderColor: button.colorScheme.outlined.info.borderColor, + backgroundColor: button.colorScheme.outlined.info.hoverBackground, }, }, { @@ -365,9 +335,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'info', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Info.Text.infoTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.info.hoverBackground, }, }, { @@ -375,10 +344,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'success', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Success.Basic.successButtonBorderColor, - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonHoverBg, + borderColor: button.colorScheme.root.success.hoverBorderColor, + backgroundColor: button.colorScheme.root.success.hoverBackground, }, }, { @@ -386,12 +353,9 @@ const buttonContainerStyles = StyleSheet.create( severity: 'success', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonHoverBorderColor, + borderColor: button.colorScheme.outlined.success.borderColor, backgroundColor: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonHoverBg, + button.colorScheme.outlined.success.hoverBackground, }, }, { @@ -399,9 +363,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'success', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Success.Text.successTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.success.hoverBackground, }, }, { @@ -409,10 +372,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'warning', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Warning.Basic.warningButtonBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonHoverBg, + borderColor: button.colorScheme.root.warn.hoverBorderColor, + backgroundColor: button.colorScheme.root.warn.hoverBackground, }, }, { @@ -420,12 +381,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'warning', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonHoverBg, + borderColor: button.colorScheme.outlined.warn.borderColor, + backgroundColor: button.colorScheme.outlined.warn.hoverBackground, }, }, { @@ -433,9 +390,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'warning', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Warning.Text.warningTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.warn.hoverBackground, }, }, { @@ -443,10 +399,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'danger', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Danger.Basic.dangerButtonBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Basic.dangerButtonHoverBg, + borderColor: button.colorScheme.root.danger.hoverBorderColor, + backgroundColor: button.colorScheme.root.danger.hoverBackground, }, }, { @@ -454,11 +408,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'danger', pressed: 'true', styles: { - borderColor: - theme.Button.Severity.Danger.Outlined - .dangerOutlinedButtonHoverBorderColor, - backgroundColor: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonHoverBg, + borderColor: button.colorScheme.outlined.danger.borderColor, + backgroundColor: button.colorScheme.outlined.danger.hoverBackground, }, }, { @@ -466,9 +417,8 @@ const buttonContainerStyles = StyleSheet.create( severity: 'danger', pressed: 'true', styles: { - borderColor: theme.Surface['surface-transparent'], - backgroundColor: - theme.Button.Severity.Danger.Text.dangerTextButtonHoverBg, + borderColor: 'transparent', + backgroundColor: button.colorScheme.text.danger.hoverBackground, }, }, @@ -478,11 +428,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'xlarge', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: sizing.Height['h-2'], - minHeight: sizing.Height['h-2'], - maxHeight: sizing.Height['h-2'], + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], + height: button.extend.extLink.xlg.iconOnlyWidth, + minHeight: button.extend.extLink.xlg.iconOnlyWidth, + maxHeight: button.extend.extLink.xlg.iconOnlyWidth, }, }, { @@ -490,11 +440,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'large', styles: { - paddingHorizontal: spacing.Gap['gap-0'], - paddingVertical: spacing.Gap['gap-0'], - height: 24.5, - minHeight: 24.5, - maxHeight: 24.5, + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space.none, + height: button.extend.extLink.lg.iconOnlyWidth, + minHeight: button.extend.extLink.lg.iconOnlyWidth, + maxHeight: button.extend.extLink.lg.iconOnlyWidth, }, }, { @@ -502,11 +452,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'base', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: 21.5, - minHeight: 21.5, - maxHeight: 21.5, + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], + height: button.extend.extLink.base.iconOnlyWidth, + minHeight: button.extend.extLink.base.iconOnlyWidth, + maxHeight: button.extend.extLink.base.iconOnlyWidth, }, }, { @@ -514,11 +464,11 @@ const buttonContainerStyles = StyleSheet.create( iconOnly: 'true', size: 'small', styles: { - paddingHorizontal: spacing.Gap['gap-1'], - paddingVertical: spacing.Gap['gap-1'], - height: sizing.Height['h-1'], - minHeight: sizing.Height['h-2'], - maxHeight: sizing.Height['h-2'], + paddingHorizontal: semantic.dimension.space[100], + paddingVertical: semantic.dimension.space[100], + height: button.extend.extLink.sm.iconOnlyWidth, + minHeight: button.extend.extLink.sm.iconOnlyWidth, + maxHeight: button.extend.extLink.sm.iconOnlyWidth, }, }, ], diff --git a/src/components/Button/utils/ButtonIcon.tsx b/src/components/Button/utils/ButtonIcon.tsx index 9dcb9c6c..318e95f4 100644 --- a/src/components/Button/utils/ButtonIcon.tsx +++ b/src/components/Button/utils/ButtonIcon.tsx @@ -48,140 +48,111 @@ const ButtonIconComponent = ({ export const ButtonIcon = genericMemo(ButtonIconComponent) -const buttonIconStyles = StyleSheet.create(({ theme, typography }) => ({ - icon: { - variants: { - size: { - xlarge: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], +const buttonIconStyles = StyleSheet.create( + ({ semantic, components: { button } }) => ({ + icon: { + variants: { + size: { + xlarge: { + height: button.extend.iconSize.lg, + width: button.extend.iconSize.lg, + }, + large: { + height: button.extend.iconSize.lg, + width: button.extend.iconSize.lg, + }, + base: { + height: button.extend.iconSize.md, + width: button.extend.iconSize.md, + }, + small: { + height: button.extend.iconSize.sm, + width: button.extend.iconSize.sm, + }, }, - large: { - height: typography.Size['text-2xl'], - width: typography.Size['text-2xl'], + variant: { + primary: { color: button.colorScheme.root.primary.color }, + secondary: { color: button.colorScheme.root.secondary.color }, + tertiary: { color: button.colorScheme.root.contrast.color }, + text: { color: button.colorScheme.text.primary.color }, + link: { color: button.colorScheme.link.color }, + basic: { color: button.colorScheme.root.primary.color }, + outlined: { color: button.colorScheme.outlined.primary.color }, }, - base: { - height: typography.Size['text-xl'], - width: typography.Size['text-xl'], + severity: { info: {}, success: {}, warning: {}, danger: {} }, + pressed: { true: {}, false: {} }, + disabled: { true: { color: button.extend.disabledColor }, false: {} }, + }, + compoundVariants: [ + // link pressed + { + variant: 'link', + pressed: 'true', + styles: { color: semantic.colorScheme.color.fg.muted }, }, - small: { - height: typography.Size['text-base'], - width: typography.Size['text-base'], - }, - }, - variant: { - primary: { color: theme.Button.Brand.buttonTextColor }, - secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, - tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, - text: { color: theme.Button.Text.textButtonTextColor }, - link: { color: theme.Button.Text.textButtonTextColor }, - basic: { color: theme.Button.Brand.buttonTextColor }, - outlined: { color: theme.Button.Brand.buttonTextColor }, - }, - severity: { info: {}, success: {}, warning: {}, danger: {} }, - pressed: { true: {}, false: {} }, - disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, - false: {}, - }, - }, - compoundVariants: [ - // link pressed - { - variant: 'link', - pressed: 'true', - styles: { color: typography.Color.Common['text-color-secondary'] }, - }, - // severity icon colors - { - variant: 'basic', - severity: 'info', - styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, - }, - { - variant: 'outlined', - severity: 'info', - styles: { - color: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, + // severity icon colors + { + variant: 'basic', + severity: 'info', + styles: { color: button.colorScheme.root.info.color }, }, - }, - { - variant: 'text', - severity: 'info', - styles: { - color: theme.Button.Severity.Info.Text.infoTextButtonTextColor, + { + variant: 'outlined', + severity: 'info', + styles: { color: button.colorScheme.outlined.info.color }, }, - }, - { - variant: 'basic', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Basic.successButtonTextColor, + { + variant: 'text', + severity: 'info', + styles: { color: button.colorScheme.text.info.color }, }, - }, - { - variant: 'outlined', - severity: 'success', - styles: { - color: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'success', + styles: { color: button.colorScheme.root.success.color }, }, - }, - { - variant: 'text', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Text.successTextButtonTextColor, + { + variant: 'outlined', + severity: 'success', + styles: { color: button.colorScheme.outlined.success.color }, }, - }, - { - variant: 'basic', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Basic.warningButtonTextColor, + { + variant: 'text', + severity: 'success', + styles: { color: button.colorScheme.text.success.color }, }, - }, - { - variant: 'outlined', - severity: 'warning', - styles: { - color: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'warning', + styles: { color: button.colorScheme.root.warn.color }, }, - }, - { - variant: 'text', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, + { + variant: 'outlined', + severity: 'warning', + styles: { color: button.colorScheme.outlined.warn.color }, }, - }, - { - variant: 'basic', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor, + { + variant: 'text', + severity: 'warning', + styles: { color: button.colorScheme.text.warn.color }, }, - }, - { - variant: 'outlined', - severity: 'danger', - styles: { - color: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'danger', + styles: { color: button.colorScheme.root.danger.color }, }, - }, - { - variant: 'text', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor, + { + variant: 'outlined', + severity: 'danger', + styles: { color: button.colorScheme.outlined.danger.color }, }, - }, - ], - }, -})) + { + variant: 'text', + severity: 'danger', + styles: { color: button.colorScheme.text.danger.color }, + }, + ], + }, + }) +) diff --git a/src/components/Button/utils/ButtonLabel.tsx b/src/components/Button/utils/ButtonLabel.tsx index 5b541a60..a4a0788a 100644 --- a/src/components/Button/utils/ButtonLabel.tsx +++ b/src/components/Button/utils/ButtonLabel.tsx @@ -48,132 +48,103 @@ const ButtonLabelComponent = ({ export const ButtonLabel = genericMemo(ButtonLabelComponent) -const buttonLabelStyles = StyleSheet.create(({ theme, typography, fonts }) => ({ - label: { - fontWeight: 600, - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - variants: { - size: { - xlarge: { fontSize: typography.Size['text-xl'] }, - large: { fontSize: typography.Size['text-xl'] }, - base: { fontSize: typography.Size['text-base'] }, - small: { fontSize: typography.Size['text-sm'] }, - }, - variant: { - primary: { color: theme.Button.Brand.buttonTextColor }, - secondary: { color: theme.Button.Primary.secondaryButtonTextColor }, - tertiary: { color: theme.Button.Secondary.helpButtonTextColor }, - text: { color: theme.Button.Text.textButtonTextColor }, - link: { color: theme.Button.Text.textButtonTextColor }, - basic: { color: theme.Button.Brand.buttonTextColor }, - outlined: { color: theme.Button.Brand.buttonTextColor }, - }, - severity: { info: {}, success: {}, warning: {}, danger: {} }, - pressed: { true: {}, false: {} }, - disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, - false: {}, - }, - }, - compoundVariants: [ - // link pressed color change - { - variant: 'link', - pressed: 'true', - styles: { color: typography.Color.Common['text-color-secondary'] }, - }, +const buttonLabelStyles = StyleSheet.create( + ({ semantic, primitive, components: { button }, fonts }) => ({ + label: { + fontWeight: primitive.fonts.fontWeight.demibold, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.primary, + variants: { + size: { + xlarge: { fontSize: primitive.fonts.fontSize[500] }, + large: { fontSize: primitive.fonts.fontSize[500] }, + base: { fontSize: primitive.fonts.fontSize[300] }, + small: { fontSize: primitive.fonts.fontSize[100] }, + }, + variant: { + primary: { color: button.colorScheme.root.primary.color }, + secondary: { color: button.colorScheme.root.secondary.color }, + tertiary: { color: button.colorScheme.root.contrast.color }, + text: { color: button.colorScheme.text.primary.color }, + link: { color: button.colorScheme.link.color }, + basic: { color: button.colorScheme.root.primary.color }, + outlined: { color: button.colorScheme.outlined.primary.color }, + }, + severity: { info: {}, success: {}, warning: {}, danger: {} }, + pressed: { true: {}, false: {} }, + disabled: { true: { color: button.extend.disabledColor }, false: {} }, + }, + compoundVariants: [ + // link pressed color change + { + variant: 'link', + pressed: 'true', + styles: { color: semantic.colorScheme.color.fg.muted }, + }, - // severity label colors - { - variant: 'basic', - severity: 'info', - styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor }, - }, - { - variant: 'outlined', - severity: 'info', - styles: { - color: - theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor, + // severity label colors + { + variant: 'basic', + severity: 'info', + styles: { color: button.colorScheme.root.info.color }, }, - }, - { - variant: 'text', - severity: 'info', - styles: { - color: theme.Button.Severity.Info.Text.infoTextButtonTextColor, + { + variant: 'outlined', + severity: 'info', + styles: { color: button.colorScheme.outlined.info.color }, }, - }, - { - variant: 'basic', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Basic.successButtonTextColor, + { + variant: 'text', + severity: 'info', + styles: { color: button.colorScheme.text.info.color }, }, - }, - { - variant: 'outlined', - severity: 'success', - styles: { - color: - theme.Button.Severity.Success.Outlined - .successOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'success', + styles: { color: button.colorScheme.root.success.color }, }, - }, - { - variant: 'text', - severity: 'success', - styles: { - color: theme.Button.Severity.Success.Text.successTextButtonTextColor, + { + variant: 'outlined', + severity: 'success', + styles: { color: button.colorScheme.outlined.success.color }, }, - }, - { - variant: 'basic', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Basic.warningButtonTextColor, + { + variant: 'text', + severity: 'success', + styles: { color: button.colorScheme.text.success.color }, }, - }, - { - variant: 'outlined', - severity: 'warning', - styles: { - color: - theme.Button.Severity.Warning.Outlined - .warningOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'warning', + styles: { color: button.colorScheme.root.warn.color }, }, - }, - { - variant: 'text', - severity: 'warning', - styles: { - color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor, + { + variant: 'outlined', + severity: 'warning', + styles: { color: button.colorScheme.outlined.warn.color }, }, - }, - { - variant: 'basic', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor, + { + variant: 'text', + severity: 'warning', + styles: { color: button.colorScheme.text.warn.color }, }, - }, - { - variant: 'outlined', - severity: 'danger', - styles: { - color: - theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor, + { + variant: 'basic', + severity: 'danger', + styles: { color: button.colorScheme.root.danger.color }, }, - }, - { - variant: 'text', - severity: 'danger', - styles: { - color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor, + { + variant: 'outlined', + severity: 'danger', + styles: { color: button.colorScheme.outlined.danger.color }, }, - }, - ], - }, -})) + { + variant: 'text', + severity: 'danger', + styles: { color: button.colorScheme.text.danger.color }, + }, + ], + }, + }) +) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 41a89bf7..fc5c231d 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -97,8 +97,8 @@ export const Checkbox = memo( ({ - color: theme.Form.Checkbox.checkboxIconActiveColor, + uniProps={({ components }) => ({ + color: components.checkbox.icon.checkedColor, })} /> ) : null} @@ -107,57 +107,52 @@ export const Checkbox = memo( } ) -const styles = StyleSheet.create(({ theme, border, sizing }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ container: { justifyContent: 'center', alignItems: 'center', - width: theme.Form.Checkbox.checkboxWidth, - height: theme.Form.Checkbox.checkboxHeight, + width: components.checkbox.root.width, + height: components.checkbox.root.height, }, background: { ...RNStyleSheet.absoluteFillObject }, backgroundState: { - borderRadius: border.Radius['rounded-lg'], - borderWidth: border.Width.border, + borderRadius: components.checkbox.root.borderRadius, + borderWidth: components.checkbox.root.extend.borderWidth, variants: { filled: { true: { - backgroundColor: theme.Form.Checkbox.checkboxActiveBg, - borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, + backgroundColor: components.checkbox.root.checkedBackground, + borderColor: components.checkbox.root.checkedBorderColor, }, false: { - backgroundColor: theme.Form.InputText.inputBg, - borderColor: theme.Form.InputText.inputBorderColor, + backgroundColor: components.checkbox.root.background, + borderColor: components.checkbox.root.borderColor, }, }, pressed: { - true: { borderColor: theme.Form.InputText.inputHoverBorderColor }, + true: { borderColor: components.checkbox.root.hoverBorderColor }, false: {}, }, state: { - danger: { - borderColor: theme.Form.InputText.inputErrorBorderColor, - outlineStyle: 'solid', - outlineColor: theme.General.focusOutlineErrorColor, - outlineWidth: Math.round(theme.General.focusShadowWidth), - }, + danger: { borderColor: components.checkbox.root.invalidBorderColor }, }, - disabled: { true: { outlineWidth: 0 }, false: {} }, + disabled: { true: {}, false: {} }, }, compoundVariants: [ { filled: 'true', pressed: 'true', styles: { - backgroundColor: theme.Form.Checkbox.checkboxActiveHoverBg, - borderColor: theme.Form.Checkbox.checkboxActiveHoverBorderColor, + backgroundColor: components.checkbox.root.checkedHoverBackground, + borderColor: components.checkbox.root.checkedHoverBorderColor, }, }, { filled: 'false', disabled: 'true', styles: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Form.InputText.inputBorderColor, + backgroundColor: components.checkbox.root.disabledBackground, + borderColor: components.checkbox.root.borderColor, mixBlendMode: 'luminosity', }, }, @@ -165,12 +160,12 @@ const styles = StyleSheet.create(({ theme, border, sizing }) => ({ filled: 'true', disabled: 'true', styles: { - borderColor: theme.Form.Checkbox.checkboxActiveBorderColor, - opacity: 0.2, + borderColor: components.checkbox.root.checkedBorderColor, + opacity: semantic.effects.opacity[20], mixBlendMode: 'luminosity', }, }, ], }, - icon: { height: sizing.Height['h-1'], width: sizing.Width['w-1'] }, + icon: { height: 14, width: 14 }, })) diff --git a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap index 872efcb8..11e41577 100644 --- a/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap @@ -36,9 +36,9 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -55,12 +55,9 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f }, { "backgroundColor": "#ffffff", - "borderColor": "#db3424", - "borderRadius": 7, + "borderColor": "#f47f77", + "borderRadius": 8, "borderWidth": 1, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, }, ] } @@ -104,9 +101,9 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -124,7 +121,7 @@ exports[`Checkbox snapshots checked = false, indeterminate = false, disabled = f { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] @@ -169,9 +166,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -188,12 +185,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa }, { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 7, + "borderColor": "#f47f77", + "borderRadius": 8, "borderWidth": 1, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, }, ] } @@ -316,9 +310,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -336,7 +330,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = false, disabled = fa { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] @@ -460,9 +454,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -479,12 +473,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal }, { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 7, + "borderColor": "#f47f77", + "borderRadius": 8, "borderWidth": 1, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 4, }, ] } @@ -607,9 +598,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -627,7 +618,7 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = fal { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] @@ -751,9 +742,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -771,13 +762,10 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, "mixBlendMode": "luminosity", "opacity": 0.2, - "outlineColor": "#fff0f0", - "outlineStyle": "solid", - "outlineWidth": 0, }, ] } @@ -900,9 +888,9 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -920,11 +908,10 @@ exports[`Checkbox snapshots checked = true, indeterminate = true, disabled = tru { "backgroundColor": "#2b2e33", "borderColor": "#2b2e33", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, "mixBlendMode": "luminosity", "opacity": 0.2, - "outlineWidth": 0, }, ] } @@ -1047,9 +1034,9 @@ exports[`Checkbox snapshots default 1`] = ` style={ { "alignItems": "center", - "height": 21, + "height": 24, "justifyContent": "center", - "width": 21, + "width": 24, } } testID="CheckboxButton_Pressable" @@ -1067,7 +1054,7 @@ exports[`Checkbox snapshots default 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 7, + "borderRadius": 8, "borderWidth": 1, }, ] diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 921f630b..6c83414e 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -44,10 +44,10 @@ export const Chip = memo( showIcon = true, ...rest }) => { - const iconUniProps = ({ theme }: ThemeType) => ({ + const iconUniProps = ({ components, semantic }: ThemeType) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonTextColor - : theme.Misc.Chip.chipTextColor, + ? semantic.colorScheme.color.fg.muted + : components.chip.colorScheme.root.color, }) return ( @@ -83,10 +83,10 @@ export const Chip = memo( {...styles.icon} source={IconX} style={pressed ? styles.pressedClose : null} - uniProps={({ theme }) => ({ + uniProps={({ components, semantic }) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonTextColor - : theme.Misc.Chip.chipTextColor, + ? semantic.colorScheme.color.fg.muted + : components.chip.colorScheme.root.color, })} /> )} @@ -97,48 +97,57 @@ export const Chip = memo( } ) -const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ - chip: { - height: theme.Misc.Chip.chipHeight, - alignSelf: 'flex-start', - justifyContent: 'center', - alignItems: 'center', - flexDirection: 'row', - gap: theme.General.inlineSpacing, +// `transparent` здесь — отсутствие границы, а не цвет дизайн-системы: +// у chip.root нет borderColor, прозрачность не выражена semantic-токеном. +const styles = StyleSheet.create( + ({ + primitive, + components, + semantic, + + fonts, + }) => ({ + chip: { + alignSelf: 'flex-start', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'row', + gap: components.chip.root.gap, - paddingHorizontal: theme.Misc.Chip.chipPaddingLeftRight, - paddingVertical: theme.Misc.Chip.chipPaddingTopBottom, + paddingHorizontal: components.chip.root.paddingX, + paddingVertical: components.chip.root.paddingY, - borderRadius: theme.Misc.Chip.chipBorderRadius, - borderWidth: border.Width.border, + borderRadius: components.chip.root.borderRadius, + borderWidth: components.chip.extend.borderWidth, - backgroundColor: theme.Misc.Chip.chipBg, - borderColor: theme.Misc.Chip.chipBorderColor, - }, - disabledChip: { - backgroundColor: theme.Button.Disabled.disabledButtonBg, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - opacity: 0.6, - mixBlendMode: 'luminosity', - }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, - text: { - fontSize: typography.Size['text-base'], - verticalAlign: 'middle', - color: theme.Misc.Chip.chipTextColor, - includeFontPadding: false, - fontFamily: fonts.secondary, - }, - disabledText: { color: theme.General.textSecondaryColor }, - pressedClose: { - borderWidth: border.Width['border-3'], - borderColor: border.Color.Service['border-success'][400], - borderRadius: border.Radius['rounded-full'], - }, -})) + backgroundColor: components.chip.colorScheme.root.background, + borderColor: components.chip.extend.borderColor, + }, + disabledChip: { + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, + borderColor: 'transparent', + opacity: semantic.effects.opacity[60], + mixBlendMode: 'luminosity', + }, + icon: { + width: components.chip.icon.size, + height: components.chip.icon.size, + }, + text: { + fontSize: primitive.fonts.fontSize[300], + verticalAlign: 'middle', + color: components.chip.colorScheme.root.color, + includeFontPadding: false, + fontFamily: fonts.secondary, + }, + disabledText: { color: semantic.colorScheme.color.fg.muted }, + pressedClose: { + borderWidth: semantic.dimension.borderWidth[300], + borderColor: semantic.colorScheme.color.border.status.success.strong, + borderRadius: semantic.dimension.borderRadius.max, + }, + }) +) export enum TestId { Container = 'Chip_Container', diff --git a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index d7fe5652..6df9070f 100644 --- a/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -42,16 +42,15 @@ exports[`Chip component tests { { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#f0f0f1", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "#e2e2e4", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 24.5, + "gap": 8, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -63,9 +62,9 @@ exports[`Chip component tests { style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -120,16 +119,15 @@ exports[`Chip component tests { { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "#f0f0f1", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "#e2e2e4", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 24.5, + "gap": 8, "justifyContent": "center", - "paddingHorizontal": 7, - "paddingVertical": 0, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -138,15 +136,15 @@ exports[`Chip component tests { > = ({ ) } -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ root: { - backgroundColor: theme.Overlay.Dialog.Header.dialogHeaderBg, - borderColor: theme.Overlay.Overlay.overlayContentBorderColor, - borderRadius: theme.General.borderRadius2XL, - }, - body: { - paddingVertical: theme.Overlay.Dialog.Body.dialogContentPaddingTopBottom, - paddingHorizontal: theme.Overlay.Dialog.Body.dialogContentPaddingLeftRight, + backgroundColor: components.dialog.root.background, + borderColor: components.dialog.root.borderColor, + borderRadius: components.dialog.root.borderRadius, }, + body: { padding: components.dialog.content.padding }, footer: { - paddingBottom: theme.Overlay.Dialog.Footer.dialogFooterPaddingLeftRight, - paddingHorizontal: theme.Overlay.Dialog.Footer.dialogFooterPaddingLeftRight, + paddingTop: components.dialog.footer.paddingTop, + paddingBottom: components.dialog.footer.paddingBottom, + paddingHorizontal: components.dialog.footer.paddingLeft, }, })) diff --git a/src/components/Dialog/DialogHeader.tsx b/src/components/Dialog/DialogHeader.tsx index f6dd8042..ba570a31 100644 --- a/src/components/Dialog/DialogHeader.tsx +++ b/src/components/Dialog/DialogHeader.tsx @@ -46,13 +46,13 @@ export const DialogHeader = ({ ({ + uniProps={({ semantic }) => ({ color: { - danger: t.Color.Service['text-danger'], - warning: t.Color.Service['text-warning'], - info: t.Color.Service['text-info'], - success: t.Color.Service['text-success'], - help: t.Color.Service['text-help'], + danger: semantic.colorScheme.color.fg.status.danger.default, + warning: semantic.colorScheme.color.fg.status.warning.default, + info: semantic.colorScheme.color.fg.status.info.default, + success: semantic.colorScheme.color.fg.status.success.default, + help: semantic.colorScheme.color.fg.status.help.default, }[severity], })} /> @@ -75,8 +75,8 @@ export const DialogHeader = ({ ({ - color: theme.General.actionIconColor, + uniProps={({ components }) => ({ + color: components.dialog.root.color, })} /> @@ -88,27 +88,28 @@ export const DialogHeader = ({ ) } -const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ text: { flex: 1 }, header: { flexDirection: 'row', - gap: spacing.Gap['gap-4'], + gap: components.dialog.header.gap, alignItems: 'center', - paddingBottom: theme.Overlay.Dialog.Header.dialogHeaderPaddingTopBottom, - padding: theme.Overlay.Dialog.Header.dialogHeaderPaddingLeftRight, + paddingTop: components.dialog.header.paddingTop, + paddingBottom: components.dialog.header.paddingBottom, + paddingHorizontal: components.dialog.header.paddingLeft, }, closeTouchable: { padding: 8 }, separator: { - height: border.Width.border, - backgroundColor: theme.Overlay.Overlay.overlayContentBorderColor, + height: semantic.dimension.borderWidth[100], + backgroundColor: components.dialog.root.borderColor, }, closeIcon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, severityIcon: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: semantic.dimension.size[700], + height: semantic.dimension.size[700], }, })) diff --git a/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index 77efd620..8fd76ec3 100644 --- a/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -128,7 +128,7 @@ exports[`Dialog component tests basic dialog with title, body and footer 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#e2e2e4", - "borderRadius": 14, + "borderRadius": 1600, }, { "maxHeight": 1234, @@ -143,8 +143,7 @@ exports[`Dialog component tests basic dialog with title, body and footer 1`] = ` @@ -155,8 +154,9 @@ exports[`Dialog component tests basic dialog with title, body and footer 1`] = ` diff --git a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap index 5bc35562..92567dca 100644 --- a/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap +++ b/src/components/Dialog/__tests__/__snapshots__/DialogHeader.test.tsx.snap @@ -7,23 +7,24 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": "dange { "alignItems": "center", "flexDirection": "row", - "gap": 14, - "padding": 21, + "gap": 8, "paddingBottom": 14, + "paddingHorizontal": 24, + "paddingTop": 24, } } > @@ -1526,14 +1532,14 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", }, { - "fontSize": 15.75, + "fontSize": 18, }, { "flex": 1, @@ -1582,15 +1588,15 @@ exports[`DialogHeader {"onClose": [Function mockConstructor], "severity": undefi > @@ -2526,14 +2538,14 @@ exports[`DialogHeader {"onClose": undefined, "severity": undefined, "title": "Di style={ [ { - "color": "#181a1f", + "color": "#2b2e33", "fontFamily": "TT Fellows", "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", }, { - "fontSize": 15.75, + "fontSize": 18, }, { "flex": 1, diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index f12c2367..460e2ccc 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -111,8 +111,8 @@ export const Divider = memo( ({ - color: theme.General.textSecondaryColor, + uniProps={({ components }) => ({ + color: components.divider.content.color, })} /> ) : null} @@ -133,15 +133,15 @@ export const Divider = memo( } ) -const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ container: { - minHeight: sizing.Height['h-2'], + minHeight: semantic.dimension.size[800], flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, containerVertical: { - minWidth: sizing.Width['w-2'], + minWidth: semantic.dimension.size[800], flexDirection: 'column', flexGrow: 1, alignSelf: 'flex-start', @@ -150,7 +150,7 @@ const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ containerColumnReverse: { flexDirection: 'column-reverse' }, lineContainer: { flexGrow: 1, - flexBasis: spacing.Gap['gap-4'], + flexBasis: semantic.dimension.space[400], width: 1, height: 1, overflow: 'hidden', @@ -159,25 +159,25 @@ const styles = StyleSheet.create(({ spacing, theme, sizing, typography }) => ({ line: { width: '100%', height: '100%', - borderWidth: 1, - borderColor: theme.General.dividerColor, + borderWidth: semantic.dimension.borderWidth[100], + borderColor: components.divider.root.borderColor, }, lineDash: { borderStyle: 'dashed' }, content: { flexShrink: 1, flexDirection: 'row', alignItems: 'center', - paddingHorizontal: theme.General.inlineSpacing, - gap: spacing.Gap['gap-2'], - backgroundColor: theme.Panel.Panel.Body.panelContentBg, + paddingHorizontal: semantic.dimension.space[200], + gap: components.divider.extend.content.gap, + backgroundColor: components.divider.content.background, }, contentVertical: { - paddingHorizontal: 0, - paddingVertical: theme.General.inlineSpacing, + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space[200], }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: components.divider.extend.iconSize, + height: components.divider.extend.iconSize, }, text: { flexShrink: 1 }, })) diff --git a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap index 59628323..a632247d 100644 --- a/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap +++ b/src/components/Divider/__tests__/__snapshots__/Divider.test.tsx.snap @@ -102,11 +102,11 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho [ { "alignItems": "center", - "backgroundColor": "#f0f0f1", + "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, - "gap": 7, - "paddingHorizontal": 7, + "gap": 8, + "paddingHorizontal": 8, }, false, ] @@ -117,9 +117,9 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "horizontal", "sho [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -273,30 +273,30 @@ exports[`Divider {"Icon": [Object], "align": "end", "layout": "vertical", "text" [ { "alignItems": "center", - "backgroundColor": "#f0f0f1", + "backgroundColor": "#ffffff", "flexDirection": "row", "flexShrink": 1, - "gap": 7, - "paddingHorizontal": 7, + "gap": 8, + "paddingHorizontal": 8, }, { "paddingHorizontal": 0, - "paddingVertical": 7, + "paddingVertical": 8, }, ] } > ( ({ - color: theme.Form.InputGroup.inputGroupTextColor, + uniProps={({ components }) => ({ + color: components.inputgroup.colorScheme.addon.color, })} /> )} @@ -51,40 +51,41 @@ export const InputGroupAddon = memo( } ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ - container: { - paddingVertical: theme.Form.InputText.inputPaddingTopBottom, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, - justifyContent: 'center', - borderRadius: theme.General.borderRadiusXL, - borderWidth: 1, - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Form.InputGroup.inputGroupBg, - }, - left: { - borderRightWidth: 0, - // При меньших значениях возникает баг рендера - borderTopRightRadius: 0.2, - borderBottomRightRadius: 0.2, - }, - right: { - borderLeftWidth: 0, - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }, - disabled: { - opacity: 0.6, - backgroundColor: theme.Button.Disabled.disabledButtonBg, - }, - text: { - fontSize: typography.Size['text-base'], - color: theme.Form.InputGroup.inputGroupTextColor, - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.secondary, - }, - icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], - }, -})) +const styles = StyleSheet.create( + ({ primitive, components, semantic, fonts }) => ({ + container: { + padding: components.inputgroup.addon.padding, + justifyContent: 'center', + borderRadius: components.inputgroup.addon.borderRadius, + borderWidth: components.inputgroup.extend.borderWidth, + borderColor: components.inputgroup.colorScheme.addon.borderColor, + backgroundColor: components.inputgroup.colorScheme.addon.background, + }, + left: { + borderRightWidth: 0, + // При меньших значениях возникает баг рендера + borderTopRightRadius: 0.2, + borderBottomRightRadius: 0.2, + }, + right: { + borderLeftWidth: 0, + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + disabled: { + opacity: semantic.effects.opacity[60], + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, + }, + text: { + fontSize: primitive.fonts.fontSize[300], + color: components.inputgroup.colorScheme.addon.color, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.secondary, + }, + icon: { + width: components.inputgroup.extend.iconSize, + height: components.inputgroup.extend.iconSize, + }, + }) +) diff --git a/src/components/Input/InputOtp/InputOtp.tsx b/src/components/Input/InputOtp/InputOtp.tsx index a43155c3..3923463b 100644 --- a/src/components/Input/InputOtp/InputOtp.tsx +++ b/src/components/Input/InputOtp/InputOtp.tsx @@ -155,10 +155,10 @@ export const InputOtp = memo( } ) -const styles = StyleSheet.create(({ spacing }) => ({ +const styles = StyleSheet.create(({ semantic }) => ({ container: {}, - content: { flexDirection: 'row', gap: spacing.Gap['gap-2'] }, + content: { flexDirection: 'row', gap: semantic.dimension.space[200] }, input: { position: 'absolute', width: 1, height: 1, opacity: 0 }, })) diff --git a/src/components/Input/InputOtp/InputOtpItem.tsx b/src/components/Input/InputOtp/InputOtpItem.tsx index 0e685314..3073f92f 100644 --- a/src/components/Input/InputOtp/InputOtpItem.tsx +++ b/src/components/Input/InputOtp/InputOtpItem.tsx @@ -5,6 +5,8 @@ import Animated, { type AnimatedStyle } from 'react-native-reanimated' import { StyleSheet } from 'react-native-unistyles' +import { effects } from '../../../theme/tokens/semantic/light.json' + export interface InputOtpItemProps extends Pick { value?: string error: boolean @@ -15,8 +17,14 @@ export interface InputOtpItemProps extends Pick { const CURSOR_ANIMATION_DURATION = 500 +// Анимация не может жить в StyleSheet.create: Animated.Text из reanimated не +// принимает Unistyles-стиль. Шкала непрозрачности одинакова в обеих темах, +// поэтому токены берутся из сгенерированного файла напрямую. const cursorAnimationStyle = { - animationName: { from: { opacity: 1 }, to: { opacity: 0.2 } }, + animationName: { + from: { opacity: effects.opacity[100] }, + to: { opacity: effects.opacity[20] }, + }, animationDuration: CURSOR_ANIMATION_DURATION, animationDirection: 'alternate', animationIterationCount: 'infinite', @@ -60,33 +68,40 @@ export const InputOtpItem = memo( } ) -const styles = StyleSheet.create(({ theme, border, fonts, typography }) => ({ - container: { - minHeight: theme.Button.Common.buttonHeight, - minWidth: theme.Button.Common.buttonHeight, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, - paddingVertical: theme.Form.InputText.inputPaddingTopBottom, - borderBottomWidth: border.Width.border, - borderColor: theme.Form.InputText.inputBorderColor, - alignItems: 'center', - justifyContent: 'center', - }, +// Рамка, цвет и отступы намеренно берутся у inputtext: поле OTP должно выглядеть +// как обычное поле ввода. Собственные токены inputotp описывают только отличия — +// тот же приём, что в пресете PrimeUIX lara, где inputotp задаёт лишь gap и width. +const styles = StyleSheet.create( + ({ semantic, primitive, components, fonts }) => ({ + container: { + minHeight: components.inputotp.extend.height, + minWidth: components.inputotp.extend.height, + paddingHorizontal: components.inputtext.root.paddingX, + borderBottomWidth: components.inputotp.extend.borderWidth, + borderColor: components.inputtext.root.borderColor, + alignItems: 'center', + justifyContent: 'center', + }, - textRow: { flexDirection: 'row', alignItems: 'center' }, + textRow: { flexDirection: 'row', alignItems: 'center' }, - text: { - fontSize: typography.Size['text-2xl'], - fontFamily: fonts.primary, - fontWeight: '400', - color: theme.Form.InputText.inputTextColor, - includeFontPadding: false, - }, + text: { + fontSize: primitive.fonts.fontSize[600], + fontFamily: fonts.primary, + fontWeight: primitive.fonts.fontWeight.regular, + color: components.inputtext.root.color, + includeFontPadding: false, + }, - pressed: { borderColor: theme.Form.InputText.inputHoverBorderColor }, + pressed: { borderColor: components.inputtext.root.hoverBorderColor }, - error: { borderColor: theme.Form.InputText.inputErrorBorderColor }, + error: { borderColor: components.inputtext.root.invalidBorderColor }, - disabled: { mixBlendMode: 'luminosity', opacity: 0.6 }, + disabled: { + mixBlendMode: 'luminosity', + opacity: semantic.effects.opacity[60], + }, - cursor: { color: theme.Form.InputText.inputTextColor, marginBottom: 3 }, -})) + cursor: { color: components.inputtext.root.color, marginBottom: 3 }, + }) +) diff --git a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap index c48a2c5d..e07be575 100644 --- a/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap +++ b/src/components/Input/InputOtp/__tests__/__snapshots__/InputOtp.test.tsx.snap @@ -37,7 +37,7 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -49,10 +49,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -63,10 +62,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -176,10 +174,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -190,10 +187,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -305,10 +301,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -319,10 +314,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -436,10 +430,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -452,10 +445,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -567,10 +559,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -583,10 +574,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -700,10 +690,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -716,10 +705,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - false, p @@ -835,10 +823,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -852,10 +839,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -968,10 +954,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -985,10 +970,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1103,10 +1087,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -1120,10 +1103,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1240,10 +1222,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -1259,10 +1240,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1377,10 +1357,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -1396,10 +1375,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1516,10 +1494,9 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -1535,10 +1512,10 @@ exports[`InputOtp component tests length - 2, error - false, disabled - true, pr @@ -1657,13 +1633,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -1673,10 +1648,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -1788,13 +1762,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -1804,10 +1777,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -1921,13 +1893,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -1937,10 +1908,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2056,13 +2026,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2074,10 +2043,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2191,13 +2159,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2209,10 +2176,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2328,13 +2294,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2346,10 +2311,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - false, pr @@ -2467,13 +2431,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -2486,10 +2449,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -2604,13 +2566,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -2623,10 +2584,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -2743,13 +2703,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -2762,10 +2721,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -2884,13 +2842,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -2905,10 +2862,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -3025,13 +2981,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -3046,10 +3001,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -3168,13 +3122,12 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -3189,10 +3142,10 @@ exports[`InputOtp component tests length - 2, error - true, disabled - true, pre @@ -3313,10 +3265,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -3327,10 +3278,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -3504,10 +3452,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -3518,10 +3465,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -3697,10 +3641,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -3711,10 +3654,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -3892,10 +3832,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -3908,10 +3847,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -4091,10 +4027,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -4107,10 +4042,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -4292,10 +4224,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -4308,10 +4239,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - false, p @@ -4495,10 +4423,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -4512,10 +4439,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -4698,10 +4622,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -4715,10 +4638,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -4903,10 +4823,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -4920,10 +4839,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5110,10 +5026,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -5129,10 +5044,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5321,10 +5233,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -5340,10 +5251,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5534,10 +5442,9 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -5553,10 +5460,10 @@ exports[`InputOtp component tests length - 4, error - false, disabled - true, pr @@ -5749,13 +5653,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -5765,10 +5668,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -5948,13 +5848,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -5964,10 +5863,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6149,13 +6045,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -6165,10 +6060,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6352,13 +6244,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -6370,10 +6261,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6559,13 +6447,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -6577,10 +6464,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6768,13 +6652,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -6786,10 +6669,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - false, pr @@ -6979,13 +6859,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -6998,10 +6877,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7190,13 +7066,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -7209,10 +7084,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7403,13 +7275,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -7422,10 +7293,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7618,13 +7486,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -7639,10 +7506,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -7837,13 +7701,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -7858,10 +7721,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -8058,13 +7918,12 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -8079,10 +7938,10 @@ exports[`InputOtp component tests length - 4, error - true, disabled - true, pre @@ -8281,10 +8137,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -8295,10 +8150,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -8600,10 +8448,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -8614,10 +8461,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -8921,10 +8761,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -8935,10 +8774,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -9244,10 +9076,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -9260,10 +9091,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -9579,10 +9403,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -9595,10 +9418,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -9916,10 +9732,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -9932,10 +9747,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - false, p @@ -10255,10 +10063,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -10272,10 +10079,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -10598,10 +10398,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -10615,10 +10414,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -10943,10 +10735,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, false, @@ -10960,10 +10751,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -11290,10 +11074,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -11309,10 +11092,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -11649,10 +11425,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -11668,10 +11443,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -12010,10 +11778,9 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, false, { @@ -12029,10 +11796,10 @@ exports[`InputOtp component tests length - 8, error - false, disabled - true, pr @@ -12373,13 +12133,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -12389,10 +12148,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -12708,13 +12460,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -12724,10 +12475,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -13045,13 +12789,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, false, @@ -13061,10 +12804,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -13384,13 +13120,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -13402,10 +13137,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -13735,13 +13463,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -13753,10 +13480,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -14088,13 +13808,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -14106,10 +13825,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - false, pr @@ -14443,13 +14155,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -14462,10 +14173,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -14802,13 +14506,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -14821,10 +14524,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -15163,13 +14859,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, false, { @@ -15182,10 +14877,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -15526,13 +15214,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -15547,10 +15234,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -15901,13 +15581,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -15922,10 +15601,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -16278,13 +15950,12 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre "borderBottomWidth": 1, "borderColor": "#cecfd2", "justifyContent": "center", - "minHeight": 35, - "minWidth": 35, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "minHeight": 40, + "minWidth": 40, + "paddingHorizontal": 14, }, { - "borderColor": "#db3424", + "borderColor": "#f47f77", }, { "borderColor": "#1dc831", @@ -16299,10 +15970,10 @@ exports[`InputOtp component tests length - 8, error - true, disabled - true, pre @@ -52,25 +52,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", + "backgroundColor": ""#a2a5a9"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", + "backgroundColor": "#a2a5a9", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -90,24 +90,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -149,8 +149,8 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -168,25 +168,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", + "backgroundColor": ""#a2a5a9"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", + "backgroundColor": "#a2a5a9", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -206,24 +206,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -265,8 +265,8 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -284,25 +284,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -322,24 +322,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -381,8 +381,8 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -400,25 +400,25 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -438,24 +438,24 @@ exports[`InputSwitch component tests checked - false, danger - false, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -497,8 +497,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -516,25 +516,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "backgroundColor": ""#a2a5a9"", + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", - "borderColor": "#db3424", - "borderRadius": 100, + "backgroundColor": "#a2a5a9", + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -554,24 +554,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -613,8 +613,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -632,25 +632,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#85888e"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "backgroundColor": ""#a2a5a9"", + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#85888e", - "borderColor": "#db3424", - "borderRadius": 100, + "backgroundColor": "#a2a5a9", + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -670,24 +670,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -729,8 +729,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -748,25 +748,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -786,24 +786,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -845,8 +845,8 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -864,25 +864,25 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - } jestInlineStyle={ { - "backgroundColor": ""#DFDFDF"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#DFDFDF", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -902,24 +902,24 @@ exports[`InputSwitch component tests checked - false, danger - true, disabled - jestInlineStyle={ { "backgroundColor": ""#ffffff"", - "borderRadius": 100, - "height": 14, - "left": "2.5", + "borderRadius": 1600, + "height": 16, + "left": "3", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { "backgroundColor": "#ffffff", - "borderRadius": 100, - "height": 14, - "left": 2.5, + "borderRadius": 1600, + "height": 16, + "left": 3, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -961,8 +961,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -982,11 +982,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": ""#2b2e33"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ @@ -994,11 +994,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": "#2b2e33", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1017,25 +1017,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1077,8 +1077,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1098,11 +1098,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": ""#2b2e33"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ @@ -1110,11 +1110,11 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - { "backgroundColor": "#2b2e33", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1133,25 +1133,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1193,8 +1193,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1212,25 +1212,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1249,25 +1249,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1309,8 +1309,8 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1328,25 +1328,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1365,25 +1365,25 @@ exports[`InputSwitch component tests checked - true, danger - false, disabled - } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1425,8 +1425,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1445,24 +1445,24 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f jestInlineStyle={ { "backgroundColor": ""#2b2e33"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 100, + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1481,25 +1481,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1541,8 +1541,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1561,24 +1561,24 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f jestInlineStyle={ { "backgroundColor": ""#2b2e33"", - "borderColor": ""#db3424"", - "borderRadius": 100, + "borderColor": ""#f47f77"", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { "backgroundColor": "#2b2e33", - "borderColor": "#db3424", - "borderRadius": 100, + "borderColor": "#f47f77", + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1597,25 +1597,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - f } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1657,8 +1657,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1676,25 +1676,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1713,25 +1713,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } @@ -1773,8 +1773,8 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t onStartShouldSetResponder={[Function]} style={ { - "height": 21, - "width": 35, + "height": 24, + "width": 40, } } > @@ -1792,25 +1792,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#9A9A9A"", + "backgroundColor": ""#e2e2e4"", "borderColor": ""transparent"", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, } } style={ [ { - "backgroundColor": "#9A9A9A", + "backgroundColor": "#e2e2e4", "borderColor": "transparent", - "borderRadius": 100, + "borderRadius": 1600, "borderWidth": 1, - "height": 21, - "padding": 3.5, - "width": 35, + "height": 24, + "padding": 4, + "width": 40, }, ] } @@ -1829,25 +1829,25 @@ exports[`InputSwitch component tests checked - true, danger - true, disabled - t } jestInlineStyle={ { - "backgroundColor": ""#fafafa"", - "borderRadius": 100, - "height": 14, - "left": "16.5", + "backgroundColor": ""#ffffff"", + "borderRadius": 1600, + "height": 16, + "left": "19", "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, } } style={ [ { - "backgroundColor": "#fafafa", - "borderRadius": 100, - "height": 14, - "left": 16.5, + "backgroundColor": "#ffffff", + "borderRadius": 1600, + "height": 16, + "left": 19, "position": "absolute", - "top": 2.5, - "width": 14, + "top": 3, + "width": 16, }, ] } diff --git a/src/components/Input/InputSwitch/styles/useHandleStyles.ts b/src/components/Input/InputSwitch/styles/useHandleStyles.ts index 1349cbc2..93287f19 100644 --- a/src/components/Input/InputSwitch/styles/useHandleStyles.ts +++ b/src/components/Input/InputSwitch/styles/useHandleStyles.ts @@ -48,27 +48,27 @@ export const useHandleStyles = (checked: boolean) => { return { handleStyle } } -const handleStyles = StyleSheet.create(({ theme, border }) => ({ +const handleStyles = StyleSheet.create(({ components: { toggleswitch } }) => ({ handle: { - height: theme.Form.inputSwitch.inputSwitchHandleHeight, - width: theme.Form.inputSwitch.inputSwitchHandleWidth, - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOffBg, + height: toggleswitch.handle.size, + width: toggleswitch.handle.size, + borderRadius: toggleswitch.handle.borderRadius, + backgroundColor: toggleswitch.colorScheme.handle.background, position: 'absolute', - top: theme.Form.inputSwitch.inputSwitchSliderPadding - border.Width.border, + top: toggleswitch.root.gap - toggleswitch.root.borderWidth, }, handleOff: { - backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOffBg, - left: theme.Form.inputSwitch.inputSwitchSliderPadding - border.Width.border, + backgroundColor: toggleswitch.colorScheme.handle.background, + left: toggleswitch.root.gap - toggleswitch.root.borderWidth, }, handleOn: { - backgroundColor: theme.Form.inputSwitch.inputSwitchHandleOnBg, + backgroundColor: toggleswitch.colorScheme.handle.checkedBackground, left: - theme.Form.inputSwitch.inputSwitchWidth - - theme.Form.inputSwitch.inputSwitchSliderPadding - - theme.Form.inputSwitch.inputSwitchHandleWidth - - 1, + toggleswitch.root.width - + toggleswitch.root.gap - + toggleswitch.handle.size - + toggleswitch.root.borderWidth, }, })) diff --git a/src/components/Input/InputSwitch/styles/useSliderStyles.ts b/src/components/Input/InputSwitch/styles/useSliderStyles.ts index 8739c29b..4741e796 100644 --- a/src/components/Input/InputSwitch/styles/useSliderStyles.ts +++ b/src/components/Input/InputSwitch/styles/useSliderStyles.ts @@ -102,45 +102,43 @@ export const useSliderStyles = ( } } -const switchStyles = StyleSheet.create(({ theme, border }) => ({ +const switchStyles = StyleSheet.create(({ components: { toggleswitch } }) => ({ container: { - height: theme.Form.inputSwitch.inputSwitchHeight, - width: theme.Form.inputSwitch.inputSwitchWidth, + height: toggleswitch.root.height, + width: toggleswitch.root.width, }, slider: { - padding: theme.Form.inputSwitch.inputSwitchSliderPadding, - height: theme.Form.inputSwitch.inputSwitchHeight, - width: theme.Form.inputSwitch.inputSwitchWidth, - borderRadius: border.Radius['rounded-full'], - borderWidth: border.Width.border, + padding: toggleswitch.root.gap, + height: toggleswitch.root.height, + width: toggleswitch.root.width, + borderRadius: toggleswitch.root.borderRadius, + borderWidth: toggleswitch.root.borderWidth, }, - sliderOff: { backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOffBg }, + sliderOff: { backgroundColor: toggleswitch.colorScheme.root.background }, - sliderOn: { backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOnBg }, + sliderOn: { + backgroundColor: toggleswitch.colorScheme.root.checkedBackground, + }, sliderPressed: { - backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOffHoverBg, + backgroundColor: toggleswitch.colorScheme.root.hoverBackground, }, sliderOnPressed: { - backgroundColor: theme.Form.inputSwitch.inputSwitchSliderOnHoverBg, + backgroundColor: toggleswitch.colorScheme.root.checkedHoverBackground, }, sliderDisabled: { - backgroundColor: theme.custom.inputSwitch.inputSwitchSliderOffDisabledBg, + backgroundColor: toggleswitch.colorScheme.root.disabledBackground, }, sliderOnDisabled: { - backgroundColor: theme.custom.inputSwitch.inputSwitchSliderOnDisabledBg, + backgroundColor: toggleswitch.colorScheme.root.disabledBackground, }, - sliderNoDanger: { borderColor: 'transparent' }, + sliderNoDanger: { borderColor: toggleswitch.root.borderColor }, - sliderDanger: { - borderColor: theme.Form.InputText.inputErrorBorderColor, - outlineColor: theme.General.focusOutlineErrorColor, - outlineWidth: Math.round(theme.General.focusShadowWidth), - }, + sliderDanger: { borderColor: toggleswitch.root.invalidBorderColor }, })) diff --git a/src/components/Input/InputTextBase/InputTextBase.tsx b/src/components/Input/InputTextBase/InputTextBase.tsx index 4809b81e..2e1db316 100644 --- a/src/components/Input/InputTextBase/InputTextBase.tsx +++ b/src/components/Input/InputTextBase/InputTextBase.tsx @@ -52,8 +52,8 @@ interface PrivateInputTextBaseProps { * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev * @see InputText */ -const inputIconUniProps = ({ theme }: ThemeType) => ({ - color: theme.Form.InputText.inputIconColor, +const inputIconUniProps = ({ components }: ThemeType) => ({ + color: components.inputtext.root.color, }) export const InputTextBase = memo< @@ -306,7 +306,6 @@ export const InputTextBase = memo< isFocused && styles.containerFocused, containerStyle, state === 'danger' && styles.danger, - state === 'danger' && isFocused && styles.dangerFocused, disabled && styles.disabled, ]} testID={makeTestId(InputTextBaseTestId.pressableContainer)} diff --git a/src/components/Input/InputTextBase/useInputStyles.ts b/src/components/Input/InputTextBase/useInputStyles.ts index 0d751e34..f26f1871 100644 --- a/src/components/Input/InputTextBase/useInputStyles.ts +++ b/src/components/Input/InputTextBase/useInputStyles.ts @@ -18,37 +18,38 @@ export const useInputContainerMinHeight = ( return { minHeight } } -const containerMinHeight = StyleSheet.create(({ theme }) => ({ - base: { minHeight: theme.InputSize.base['min-height'] }, - large: { minHeight: theme.InputSize.large['min-height'] }, - xlarge: { minHeight: theme.InputSize.xlarge['min-height'] }, +const containerMinHeight = StyleSheet.create(({ semantic }) => ({ + base: { minHeight: semantic.dimension.size[1100] }, + large: { minHeight: semantic.dimension.size[1300] }, + xlarge: { minHeight: semantic.dimension.size[1400] }, })) export const inputStyles = StyleSheet.create( - ({ theme, border, typography, spacing, fonts }) => ({ + ({ + primitive, + components, + semantic, + + fonts, + }) => ({ container: { flexDirection: 'row', - borderWidth: border.Width.border, - borderRadius: border.Radius['rounded-xl'], - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Form.InputText.inputBg, + borderWidth: semantic.dimension.borderWidth[100], + borderRadius: components.inputtext.root.borderRadius, + borderColor: components.inputtext.root.borderColor, + backgroundColor: components.inputtext.root.background, }, containerFocused: { - outlineColor: theme.General.focusOutlineColor, - outlineWidth: Math.round(theme.General.focusShadowWidth), - borderColor: theme.General.focusBorderColor, - }, - containerFloatLabel: { - minHeight: theme.Button.Common.buttonHeightXL, - maxHeight: theme.Button.Common.buttonHeightXL, - height: theme.Button.Common.buttonHeightXL, + outlineColor: components.inputtext.root.focusRing.color, + outlineWidth: components.inputtext.root.focusRing.width, + borderColor: components.inputtext.root.focusBorderColor, }, - danger: { borderColor: theme.Form.InputText.inputErrorBorderColor }, - dangerFocused: { outlineColor: theme.General.focusOutlineErrorColor }, + containerFloatLabel: { minHeight: 56, maxHeight: 56, height: 56 }, + danger: { borderColor: components.inputtext.root.invalidBorderColor }, disabled: { - opacity: 0.6, - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, + opacity: semantic.effects.opacity[60], + borderColor: components.inputtext.root.borderColor, + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, }, inputContainer: { flex: 1, @@ -56,8 +57,8 @@ export const inputStyles = StyleSheet.create( justifyContent: 'center', }, input: { - padding: 0, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, + padding: semantic.dimension.space.none, + paddingHorizontal: components.inputtext.root.paddingX, position: 'absolute', left: 0, right: 0, @@ -67,40 +68,36 @@ export const inputStyles = StyleSheet.create( inputWithRightContent: { paddingRight: 0 }, floatLabelInput: { flex: 1, - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, + paddingHorizontal: components.inputtext.root.paddingX, paddingTop: 26, paddingBottom: 12, - borderRadius: border.Radius['rounded-xl'], + borderRadius: semantic.dimension.borderRadius[300], overflow: 'hidden', }, inputFont: { - fontSize: typography.Size['text-base'], - color: theme.Form.InputText.inputTextColor, + fontSize: primitive.fonts.fontSize[300], + color: components.inputtext.root.color, includeFontPadding: false, fontFamily: fonts.secondary, verticalAlign: 'middle', }, - placeholder: { - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, - }, - placeholderTextColor: { - color: theme.Form.InputText.inputPlaceholderTextColor, - }, + placeholder: { paddingHorizontal: components.inputtext.root.paddingX }, + placeholderTextColor: { color: components.inputtext.root.placeholderColor }, rightContainer: { flexDirection: 'row', - paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight, - gap: theme.Form.InputText.inputPaddingLeftRight, + paddingHorizontal: components.inputtext.root.paddingX, + gap: components.inputtext.root.paddingX, overflow: 'hidden', alignItems: 'center', }, rightButtonContainer: { justifyContent: 'center' }, iconSize: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: components.inputtext.extend.iconSize, + height: components.inputtext.extend.iconSize, }, iconSizeFloatLabel: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: components.inputtext.extend.iconSize, + height: components.inputtext.extend.iconSize, }, label: { @@ -108,18 +105,18 @@ export const inputStyles = StyleSheet.create( left: 7, right: 7, top: 19, - paddingVertical: 0, - paddingLeft: spacing.Padding['p-1'], - paddingRight: spacing.Padding['p-2'], - color: typography.Color.Common['text-color-secondary'], + paddingVertical: semantic.dimension.space.none, + paddingLeft: semantic.dimension.space[100], + paddingRight: semantic.dimension.space[200], + color: semantic.colorScheme.color.fg.muted, includeFontPadding: false, verticalAlign: 'middle', - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], fontFamily: fonts.secondary, }, labelReducedSize: { - fontSize: typography.Size['text-sm'], - paddingVertical: spacing.Padding['p-1'], + fontSize: primitive.fonts.fontSize[100], + paddingVertical: semantic.dimension.space[100], top: 7, fontFamily: fonts.primary, }, diff --git a/src/components/Input/__tests__/InputTextBase.test.tsx b/src/components/Input/__tests__/InputTextBase.test.tsx index 904989c6..6b737e8e 100644 --- a/src/components/Input/__tests__/InputTextBase.test.tsx +++ b/src/components/Input/__tests__/InputTextBase.test.tsx @@ -190,7 +190,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.base['min-height'], + minHeight: lightTheme.semantic.dimension.size[1100], }) }) @@ -198,7 +198,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.base['min-height'], + minHeight: lightTheme.semantic.dimension.size[1100], }) }) @@ -206,7 +206,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.large['min-height'], + minHeight: lightTheme.semantic.dimension.size[1300], }) }) @@ -214,7 +214,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.xlarge['min-height'], + minHeight: lightTheme.semantic.dimension.size[1400], }) }) @@ -222,7 +222,7 @@ describe('InputTextBase component functionality tests', () => { const { getByTestId } = render() expect(getByTestId(containerTestId)).toHaveStyle({ - minHeight: lightTheme.theme.InputSize.base['min-height'], + minHeight: lightTheme.semantic.dimension.size[1100], }) }) diff --git a/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap b/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap index e751df44..4ea15dc6 100644 --- a/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap +++ b/src/components/Input/__tests__/__snapshots__/InputGroupAddon.test.tsx.snap @@ -8,11 +8,10 @@ exports[`InputGroup component tests content: icon, position: right 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#cecfd2", - "borderRadius": 10.5, + "borderRadius": 14, "borderWidth": 1, "justifyContent": "center", - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "padding": 14, }, { "borderBottomLeftRadius": 0, @@ -26,11 +25,11 @@ exports[`InputGroup component tests content: icon, position: right 1`] = ` > ({ - container: { - flexDirection: 'row', - paddingLeft: spacing.Padding['p-4'], - gap: spacing.Padding['p-4'], - alignItems: 'center', - }, - pressed: { backgroundColor: background.Common['bg-surface-ground-hover'] }, - disabled: { opacity: 0.6 }, - leftIcon: { paddingVertical: spacing.Padding['p-4'] }, - content: { - flex: 1, - flexDirection: 'row', - justifyContent: 'space-between', - paddingVertical: spacing.Padding['p-2'], - paddingEnd: spacing.Padding['p-4'], - gap: spacing.Gap['gap-4'], - }, - labelContainer: { - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-2'], - flex: 1, - }, - titleContainer: { gap: spacing.Gap['gap-1'] }, - extraContainer: { paddingVertical: spacing.Padding['p-2'] }, - icon: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], - }, - rightSection: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: spacing.Padding['p-2'], - gap: spacing.Gap['gap-4'], - }, - divider: { - borderTopColor: theme.Surface['surface-border'], - borderTopWidth: 1, - }, - }) -) +const styles = StyleSheet.create(({ semantic }) => ({ + container: { + flexDirection: 'row', + paddingLeft: semantic.dimension.space[400], + gap: semantic.dimension.space[400], + alignItems: 'center', + }, + pressed: { + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.hover, + }, + disabled: { opacity: semantic.effects.opacity[60] }, + leftIcon: { paddingVertical: semantic.dimension.space[400] }, + content: { + flex: 1, + flexDirection: 'row', + justifyContent: 'space-between', + paddingVertical: semantic.dimension.space[200], + paddingEnd: semantic.dimension.space[400], + gap: semantic.dimension.space[400], + }, + labelContainer: { + paddingVertical: semantic.dimension.space[200], + gap: semantic.dimension.space[200], + flex: 1, + }, + titleContainer: { gap: semantic.dimension.space[100] }, + extraContainer: { paddingVertical: semantic.dimension.space[200] }, + icon: { + width: semantic.dimension.size[700], + height: semantic.dimension.size[700], + }, + rightSection: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: semantic.dimension.space[200], + gap: semantic.dimension.space[400], + }, + divider: { + borderTopColor: semantic.colorScheme.color.border.neutral.default, + borderTopWidth: 1, + }, +})) diff --git a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap index 323012bf..0b16ef10 100644 --- a/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap +++ b/src/components/List/Base/__tests__/__snapshots__/ListBase.test.tsx.snap @@ -66,11 +66,11 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` > @@ -281,9 +281,9 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -300,7 +300,7 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` @@ -309,16 +309,16 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -335,10 +335,10 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -361,14 +361,14 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -450,11 +450,11 @@ exports[`ListBase tests ListBase centered and full divider 1`] = ` @@ -836,9 +836,9 @@ exports[`ListBase tests ListBase full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -855,7 +855,7 @@ exports[`ListBase tests ListBase full disabled 1`] = ` @@ -864,16 +864,16 @@ exports[`ListBase tests ListBase full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -890,10 +890,10 @@ exports[`ListBase tests ListBase full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -916,14 +916,14 @@ exports[`ListBase tests ListBase full disabled 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -1005,11 +1005,11 @@ exports[`ListBase tests ListBase full disabled 1`] = ` @@ -1398,9 +1398,9 @@ exports[`ListBase tests ListBase maximal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 10.5, + "fontSize": 12, "fontWeight": 700, - "lineHeight": 15, + "lineHeight": 18, "textTransform": "uppercase", }, { @@ -1417,7 +1417,7 @@ exports[`ListBase tests ListBase maximal config 1`] = ` @@ -1426,16 +1426,16 @@ exports[`ListBase tests ListBase maximal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -1452,10 +1452,10 @@ exports[`ListBase tests ListBase maximal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -1478,14 +1478,14 @@ exports[`ListBase tests ListBase maximal config 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } > @@ -1567,11 +1567,11 @@ exports[`ListBase tests ListBase maximal config 1`] = ` @@ -1760,16 +1760,16 @@ exports[`ListBase tests ListBase minimal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, undefined, undefined, @@ -1789,7 +1789,7 @@ exports[`ListBase tests ListBase minimal config 1`] = ` "alignItems": "center", "flexDirection": "row", "gap": 14, - "paddingVertical": 7, + "paddingVertical": 8, } } /> diff --git a/src/components/MenuItem/MenuItemAccessory.tsx b/src/components/MenuItem/MenuItemAccessory.tsx index 958f8e44..231ba8e4 100644 --- a/src/components/MenuItem/MenuItemAccessory.tsx +++ b/src/components/MenuItem/MenuItemAccessory.tsx @@ -29,8 +29,8 @@ export const MenuItemAccessory = memo( ({ - color: theme.Menu.Item.menuitemIconColor, + uniProps={({ components }) => ({ + color: components.menu.item.icon.color, })} /> @@ -38,10 +38,10 @@ export const MenuItemAccessory = memo( } ) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ container: { justifyContent: 'center' }, icon: { - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, }, })) diff --git a/src/components/MenuItem/Template/MenuItemTemplate.tsx b/src/components/MenuItem/Template/MenuItemTemplate.tsx index fb2d4c05..f6733949 100644 --- a/src/components/MenuItem/Template/MenuItemTemplate.tsx +++ b/src/components/MenuItem/Template/MenuItemTemplate.tsx @@ -133,45 +133,47 @@ export const MenuItemTemplate = memo( } ) -const styles = StyleSheet.create(({ theme, spacing, typography, border }) => ({ +// `transparent` здесь — отсутствие фона и границы, а не цвет дизайн-системы: +// у menu.item нет background и borderColor, прозрачность не выражена semantic-токеном. +const styles = StyleSheet.create(({ components, semantic }) => ({ container: { - borderColor: theme.Menu.Item.menuitemBorderColor, - borderWidth: border.Width.border, - borderRadius: theme.Menu.Item.menuitemBorderRadius, - backgroundColor: theme.Menu.Item.menuitemBg, + borderColor: 'transparent', + borderWidth: semantic.dimension.borderWidth[100], + borderRadius: components.menu.item.borderRadius, + backgroundColor: 'transparent', }, - containerPressed: { backgroundColor: theme.Menu.Item.menuitemHoverBg }, + containerPressed: { backgroundColor: components.menu.item.focusBackground }, containerDisabled: { - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, - opacity: 0.6, + borderColor: 'transparent', + backgroundColor: semantic.colorScheme.color.bg.neutral.weak.disabled, + opacity: semantic.effects.opacity[60], }, separator: { borderTopWidth: 1, - borderTopColor: theme.Menu.Overlay.overlayMenuBorderColor, - paddingTop: theme.Menu.Common.menuSeparatorMarginTopBottom, + borderTopColor: components.menu.separator.borderColor, + paddingTop: components.menu.extend.extItem.caption.gap, }, contentContainer: { flexDirection: 'row', alignItems: 'center', - gap: theme.General.inlineSpacing, - paddingHorizontal: theme.Menu.Item.menuitemPaddingLeftRight, - paddingVertical: theme.Menu.Item.menuitemPaddingTopBottom, + gap: components.menu.item.gap, + paddingHorizontal: components.menu.item.paddingLeft, + paddingVertical: components.menu.item.paddingTop, }, accessory: { - color: theme.Menu.Item.menuitemIconColor, - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, + color: components.menu.item.icon.color, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, }, templateContainer: { flexDirection: 'row', - gap: spacing.Gap['gap-2'], + gap: semantic.dimension.space[200], flex: 1, }, icon: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], - color: theme.Menu.Item.menuitemIconColor, + width: components.menu.extend.iconSize, + height: components.menu.extend.iconSize, + color: components.menu.item.icon.color, }, - textContainer: { gap: spacing.Gap['gap-1'], flex: 1 }, + textContainer: { gap: semantic.dimension.space[100], flex: 1 }, })) diff --git a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap index bc4546e9..ffadc7b0 100644 --- a/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap +++ b/src/components/MenuItem/Template/__tests__/__snapshots__/MenuItemTemplate.test.tsx.snap @@ -6,7 +6,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "borderTopColor": "#e2e2e4", "borderTopWidth": 1, - "paddingTop": 3.5, + "paddingTop": 4, } } > @@ -45,16 +45,16 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, undefined, { "backgroundColor": "#e2e2e4", - "borderColor": "#a2a5a9", + "borderColor": "transparent", "opacity": 0.6, }, ] @@ -66,9 +66,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -77,7 +77,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -92,15 +92,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` @@ -242,20 +242,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -271,10 +271,10 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -396,15 +396,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate full disabled 1`] = ` > @@ -592,7 +592,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -600,7 +600,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -609,20 +609,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate minimal config 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -679,9 +679,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -696,9 +696,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -711,15 +711,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` > @@ -802,7 +802,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -811,20 +811,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -840,10 +840,10 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { @@ -869,15 +869,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate prefix,suffix = right 1`] = ` > @@ -1019,7 +1019,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1034,11 +1034,11 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` @@ -1149,20 +1149,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with colored icon 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1219,9 +1219,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1236,9 +1236,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1247,7 +1247,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1255,7 +1255,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1264,20 +1264,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with extra 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1430,9 +1430,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1447,9 +1447,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1458,7 +1458,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1473,15 +1473,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` @@ -1588,20 +1588,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1658,9 +1658,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1675,9 +1675,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1686,7 +1686,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1701,15 +1701,15 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` @@ -1851,20 +1851,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with icon and badge 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -1921,9 +1921,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -1941,9 +1941,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -1952,7 +1952,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -1960,7 +1960,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1969,20 +1969,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with padding 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, @@ -2006,7 +2006,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "borderTopColor": "#e2e2e4", "borderTopWidth": 1, - "paddingTop": 3.5, + "paddingTop": 4, } } > @@ -2045,9 +2045,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` style={ [ { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 7, + "backgroundColor": "transparent", + "borderColor": "transparent", + "borderRadius": 8, "borderWidth": 1, }, false, @@ -2062,9 +2062,9 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, - "paddingHorizontal": 10.5, - "paddingVertical": 7, + "gap": 8, + "paddingHorizontal": 14, + "paddingVertical": 8, } } > @@ -2073,7 +2073,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` { "flex": 1, "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2081,7 +2081,7 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` style={ { "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -2090,20 +2090,20 @@ exports[`MenuItemTemplate tests MenuItemTemplate with separator 1`] = ` [ { "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, - "lineHeight": 20, + "lineHeight": 22, "verticalAlign": "middle", }, { "fontWeight": 400, }, { - "color": "#181a1f", + "color": "#2b2e33", }, { - "fontSize": 12.25, - "lineHeight": 18, + "fontSize": 14, + "lineHeight": 20, }, undefined, undefined, diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 728468fa..8af1a16a 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -88,12 +88,12 @@ type MessageSeverityKey = NonNullable const messageIconColor: Record< MessageSeverityKey, - (t: ThemeType['theme']) => string + (t: ThemeType['components']) => string > = { - info: (t) => t.Message.Severities.Info.infoMessageIconColor, - success: (t) => t.Message.Severities.Success.successMessageIconColor, - warning: (t) => t.Message.Severities.Warning.warningMessageIconColor, - danger: (t) => t.Message.Severities.Danger.dangerMessageIconColor, + info: (t) => t.message.extend.extInfo.color, + success: (t) => t.message.extend.extSuccess.color, + warning: (t) => t.message.extend.extWarn.color, + danger: (t) => t.message.extend.extError.color, } /** @@ -180,8 +180,8 @@ export const Message = memo( {...messageStyles.iconSize} source={Icon} testID={TestId.Icon} - uniProps={({ theme }) => ({ - color: messageIconColor[severity](theme), + uniProps={({ components }) => ({ + color: messageIconColor[severity](components), })} /> ) @@ -218,73 +218,66 @@ export const Message = memo( } ) -const messageStyles = StyleSheet.create( - ({ theme, typography, spacing, border }) => ({ - container: { - borderRadius: theme.General.borderRadiusXL, - borderWidth: border.Width.border, - overflow: 'hidden', - variants: { - severity: { - info: { - borderColor: theme.Message.Severities.Info.infoMessageBorderColor, - backgroundColor: theme.Message.Severities.Info.infoMessageBg, - }, - success: { - borderColor: - theme.Message.Severities.Success.successMessageBorderColor, - backgroundColor: theme.Message.Severities.Success.successMessageBg, - }, - warning: { - borderColor: - theme.Message.Severities.Warning.warningMessageBorderColor, - backgroundColor: theme.Message.Severities.Warning.warningMessageBg, - }, - danger: { - borderColor: - theme.Message.Severities.Danger.dangerMessageBorderColor, - backgroundColor: theme.Message.Severities.Danger.dangerMessageBg, - }, +const messageStyles = StyleSheet.create(({ semantic, components }) => ({ + container: { + borderRadius: components.message.root.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], + overflow: 'hidden', + variants: { + severity: { + info: { + borderColor: components.message.colorScheme.info.borderColor, + backgroundColor: components.message.colorScheme.info.background, + }, + success: { + borderColor: components.message.colorScheme.success.borderColor, + backgroundColor: components.message.colorScheme.success.background, + }, + warning: { + borderColor: components.message.colorScheme.warn.borderColor, + backgroundColor: components.message.colorScheme.warn.background, + }, + danger: { + borderColor: components.message.colorScheme.error.borderColor, + backgroundColor: components.message.colorScheme.error.background, }, }, }, - content: { - flexGrow: 1, - borderLeftWidth: border.Width['border-3'] - border.Width.border, - padding: spacing.Padding['p-4'], - paddingLeft: spacing.Padding['p-5'], - gap: spacing.Gap['gap-4'], - variants: { - severity: { - info: { - borderColor: theme.Message.Severities.Info.infoMessageIconColor, - }, - success: { - borderColor: - theme.Message.Severities.Success.successMessageIconColor, - }, - warning: { - borderColor: - theme.Message.Severities.Warning.warningMessageIconColor, - }, - danger: { - borderColor: theme.Message.Severities.Danger.dangerMessageIconColor, - }, + }, + content: { + flexGrow: 1, + borderLeftWidth: + components.message.extend.extAccentLine.width - + semantic.dimension.borderWidth[100], + padding: semantic.dimension.space[400], + paddingLeft: components.message.content.padding, + gap: semantic.dimension.space[400], + variants: { + severity: { + info: { borderColor: components.message.colorScheme.info.borderColor }, + success: { + borderColor: components.message.colorScheme.success.borderColor, + }, + warning: { + borderColor: components.message.colorScheme.warn.borderColor, + }, + danger: { + borderColor: components.message.colorScheme.error.borderColor, }, }, }, - titleRow: { flexDirection: 'row', gap: spacing.Gap['gap-4'] }, - titleTextContainer: { - flex: 1, - alignSelf: 'center', - gap: spacing.Gap['gap-1'], - }, - iconSize: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], - }, - }) -) + }, + titleRow: { flexDirection: 'row', gap: semantic.dimension.space[400] }, + titleTextContainer: { + flex: 1, + alignSelf: 'center', + gap: components.message.extend.extText.gap, + }, + iconSize: { + width: components.message.icon.size, + height: components.message.icon.size, + }, +})) export enum TestId { Container = 'MessageContainer', diff --git a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap index 06eed4f8..26df81f9 100644 --- a/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap +++ b/src/components/Message/__tests__/__snapshots__/Message.test.tsx.snap @@ -7,8 +7,8 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -21,11 +21,11 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -45,7 +45,7 @@ exports[`Message {"Icon": [Object], "timerValue": 5} 1`] = ` { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -69,8 +69,8 @@ exports[`Message {"Icon": [Object]} 1`] = ` [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -83,11 +83,11 @@ exports[`Message {"Icon": [Object]} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -101,11 +101,11 @@ exports[`Message {"Icon": [Object]} 1`] = ` > @@ -230,8 +230,8 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -246,11 +246,11 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -264,11 +264,11 @@ exports[`Message {"body": [Object], "caption": "caption", "severity": "info", "s > @@ -428,8 +428,8 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 [ { "backgroundColor": "#fffdfa", - "borderColor": "#ffeed4", - "borderRadius": 10.5, + "borderColor": "#f5b83d", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -442,11 +442,11 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 style={ { "borderColor": "#f5b83d", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -460,11 +460,11 @@ exports[`Message {"body": [Object], "footer": [Object], "severity": "warning"} 1 > @@ -622,8 +622,8 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio [ { "backgroundColor": "#fafffb", - "borderColor": "#d4fedc", - "borderRadius": 10.5, + "borderColor": "#44e858", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -636,11 +636,11 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio style={ { "borderColor": "#44e858", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -654,11 +654,11 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio > @@ -806,18 +806,16 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "#44e858", - "borderRadius": 10.5, + "backgroundColor": "transparent", + "borderColor": "#1dc831", + "borderRadius": 14, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 28, + "gap": 8, + "height": "auto", "justifyContent": "center", - "maxHeight": 28, - "minHeight": 28, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "paddingHorizontal": 14, + "paddingVertical": 8, }, false, ] @@ -827,9 +825,9 @@ exports[`Message {"closeLabel": "Close", "footer": [Object], "onClose": [Functio @@ -887,11 +885,11 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se > @@ -1039,18 +1037,16 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", - "borderColor": "#44e858", - "borderRadius": 10.5, + "backgroundColor": "transparent", + "borderColor": "#1dc831", + "borderRadius": 14, "borderWidth": 1, "flexDirection": "row", - "gap": 7, - "height": 28, + "gap": 8, + "height": "auto", "justifyContent": "center", - "maxHeight": 28, - "minHeight": 28, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "paddingHorizontal": 14, + "paddingVertical": 8, }, { "aspectRatio": 1, @@ -1061,15 +1057,15 @@ exports[`Message {"footer": [Object], "onClose": [Function mockConstructor], "se > @@ -1209,11 +1205,11 @@ exports[`Message {"hiddenIcon": false} 1`] = ` > @@ -1361,8 +1357,8 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -1375,11 +1371,11 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1400,7 +1396,7 @@ exports[`Message {"onTimerFinish": [Function mockConstructor], "timerValue": 5} { "alignSelf": "center", "flex": 1, - "gap": 3.5, + "gap": 4, } } > @@ -1424,8 +1420,8 @@ exports[`Message {"severity": "danger"} 1`] = ` [ { "backgroundColor": "#fffafa", - "borderColor": "#fed4d4", - "borderRadius": 10.5, + "borderColor": "#e85244", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -1438,11 +1434,11 @@ exports[`Message {"severity": "danger"} 1`] = ` style={ { "borderColor": "#e85244", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1456,11 +1452,11 @@ exports[`Message {"severity": "danger"} 1`] = ` > @@ -1608,8 +1604,8 @@ exports[`Message {} 1`] = ` [ { "backgroundColor": "#fafdff", - "borderColor": "#d4ecfe", - "borderRadius": 10.5, + "borderColor": "#4496e8", + "borderRadius": 14, "borderWidth": 1, "overflow": "hidden", }, @@ -1622,11 +1618,11 @@ exports[`Message {} 1`] = ` style={ { "borderColor": "#4496e8", - "borderLeftWidth": 2, + "borderLeftWidth": 3, "flexGrow": 1, "gap": 14, "padding": 14, - "paddingLeft": 17.5, + "paddingLeft": 14, } } > @@ -1640,11 +1636,11 @@ exports[`Message {} 1`] = ` > diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 2b4630e6..b5f1c0a3 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -89,27 +89,27 @@ export const ProgressBar = memo( } ) -const styles = StyleSheet.create(({ theme, typography, border, fonts }) => ({ +const styles = StyleSheet.create(({ components, fonts }) => ({ container: { - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Misc.ProgressBar.progressBarBg, + borderRadius: components.progressbar.root.borderRadius, + backgroundColor: components.progressbar.root.background, overflow: 'hidden', }, indicator: { alignItems: 'center', justifyContent: 'center', - backgroundColor: theme.Misc.ProgressBar.progressBarValueBg, + backgroundColor: components.progressbar.value.background, height: '100%', overflow: 'hidden', }, - containerShowValue: { height: theme.Misc.ProgressBar.progressBarHeight }, + containerShowValue: { height: components.progressbar.root.height }, indicatorText: { - fontSize: typography.Size['text-xs'], + fontSize: components.progressbar.label.fontSize, textAlign: 'center', - color: theme.Misc.ProgressBar.progressBarValueTextColor, + color: components.progressbar.label.color, fontFamily: fonts.primary, }, })) diff --git a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap index f5afd78f..97a74194 100644 --- a/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -7,7 +7,7 @@ exports[`ProgressBar component test value - -50, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -69,7 +69,7 @@ exports[`ProgressBar component test value - -50, showValue - false, style - {"he [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -131,7 +131,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei [ { "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 14, "overflow": "hidden", }, { @@ -139,7 +139,7 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei "width": 100, }, { - "height": 14, + "height": 16, }, ] } @@ -188,9 +188,9 @@ exports[`ProgressBar component test value - -50, showValue - true, style - {"hei ( } ) -const styles = StyleSheet.create(({ theme, global }) => ({ - primary: { color: theme.General.primaryColor }, - white: { color: global.Neutrals.White['white-100'] }, -})) +const styles = StyleSheet.create( + ({ semantic, components: { progressspinner } }) => ({ + primary: { color: progressspinner.colorScheme.root.colorOne }, + white: { color: semantic.colorScheme.color.fg.on.fill.default }, + }) +) enum TestId { ProgressSpinner = 'ProgressSpinner', diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx index 8eb0e7a6..a476ccb1 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/RadioButton/RadioButton.tsx @@ -52,7 +52,6 @@ export const RadioButton = memo( return ( - ( } ) -const radioStyles = StyleSheet.create(({ theme, border }) => ({ +const radioStyles = StyleSheet.create(({ semantic, components }) => ({ container: { - width: theme.Form.RadioButton.radiobuttonWidth, - height: theme.Form.RadioButton.radiobuttonHeight, - borderRadius: border.Radius['rounded-full'], - borderWidth: 1, + width: components.radiobutton.root.width, + height: components.radiobutton.root.height, + borderRadius: semantic.dimension.borderRadius.max, + borderWidth: semantic.dimension.borderWidth[100], alignItems: 'center', justifyContent: 'center', transitionProperty: ['borderColor', 'backgroundColor'], @@ -82,20 +81,20 @@ const radioStyles = StyleSheet.create(({ theme, border }) => ({ variants: { checked: { true: { - borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + borderColor: components.radiobutton.root.checkedBorderColor, + backgroundColor: components.radiobutton.root.checkedBackground, }, false: { - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Form.InputText.inputBg, + borderColor: components.radiobutton.root.borderColor, + backgroundColor: components.radiobutton.root.background, }, }, pressed: { true: {}, false: {} }, disabled: { true: { - borderColor: theme.Form.InputText.inputBorderColor, - backgroundColor: theme.Button.Disabled.disabledButtonBg, - opacity: 0.6, + borderColor: components.radiobutton.root.borderColor, + backgroundColor: components.radiobutton.root.disabledBackground, + opacity: semantic.effects.opacity[60], }, false: {}, }, @@ -106,59 +105,38 @@ const radioStyles = StyleSheet.create(({ theme, border }) => ({ checked: 'true', pressed: 'true', styles: { - borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveHoverBg, + borderColor: components.radiobutton.root.checkedHoverBorderColor, + backgroundColor: components.radiobutton.root.checkedHoverBackground, }, }, { checked: 'true', disabled: 'true', styles: { - borderColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, - backgroundColor: theme.Form.RadioButton.radiobuttonActiveBorderColor, + borderColor: components.radiobutton.root.checkedBorderColor, + backgroundColor: components.radiobutton.root.checkedBackground, }, }, { state: 'danger', disabled: 'false', checked: 'false', - styles: { borderColor: theme.Form.InputText.inputErrorBorderColor }, + styles: { borderColor: components.radiobutton.root.invalidBorderColor }, }, { checked: 'false', pressed: 'true', - styles: { - borderColor: theme.Form.RadioButton.radiobuttonActiveHoverBorderColor, - }, + styles: { borderColor: components.radiobutton.root.hoverBorderColor }, }, ], }, center: { - width: theme.Form.RadioButton.radiobuttonIconSize, - height: theme.Form.RadioButton.radiobuttonIconSize, - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.Form.InputText.inputBg, + width: components.radiobutton.icon.size, + height: components.radiobutton.icon.size, + borderRadius: semantic.dimension.borderRadius.max, + backgroundColor: components.radiobutton.root.background, transitionProperty: ['opacity'], transitionDuration: 100, variants: { checked: { false: { opacity: 0 }, true: { opacity: 1 } } }, }, - outline: { - position: 'absolute', - top: -theme.General.focusShadowWidth, - left: -theme.General.focusShadowWidth, - width: - theme.Form.RadioButton.radiobuttonWidth + - theme.General.focusShadowWidth * 2, - height: - theme.Form.RadioButton.radiobuttonHeight + - theme.General.focusShadowWidth * 2, - borderRadius: border.Radius['rounded-full'], - backgroundColor: theme.General.focusOutlineErrorColor, - transitionProperty: 'opacity', - transitionDuration: 100, - variants: { - state: { danger: { opacity: 1 }, default: { opacity: 0 } }, - disabled: { true: { opacity: 0 } }, - }, - }, })) diff --git a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap index cb279583..43b79c4b 100644 --- a/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap +++ b/src/components/RadioButton/__tests__/__snapshots__/RadioButton.test.tsx.snap @@ -2,48 +2,6 @@ exports[`RadioButton snapshots checked = false, disabled = false, state = danger 1`] = ` - - - - - - - ( } ) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ container: { flexDirection: 'row', - gap: theme.General.inlineSpacing, + gap: components.rating.root.gap, alignItems: 'center', }, })) diff --git a/src/components/Rating/RatingClear.tsx b/src/components/Rating/RatingClear.tsx index 5c6d47c1..28bfe5ac 100644 --- a/src/components/Rating/RatingClear.tsx +++ b/src/components/Rating/RatingClear.tsx @@ -32,12 +32,12 @@ export const RatingClear = memo(({ ...rest }) => { ({ + uniProps={({ components }) => ({ color: disabled - ? theme.custom.rating.ratingCancelIconDisabledColor + ? components.rating.icon.color : pressed - ? theme.Form.Rating.ratingCancelIconHoverColor - : theme.Form.Rating.ratingCancelIconColor, + ? components.rating.icon.hoverColor + : components.rating.icon.color, })} /> )} @@ -45,9 +45,9 @@ export const RatingClear = memo(({ ...rest }) => { ) }) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ icon: { - height: theme.Form.Rating.ratingIconFontSize, - width: theme.Form.Rating.ratingIconFontSize, + height: components.rating.icon.size, + width: components.rating.icon.size, }, })) diff --git a/src/components/Rating/RatingItem.tsx b/src/components/Rating/RatingItem.tsx index 92fffb31..0cdc6951 100644 --- a/src/components/Rating/RatingItem.tsx +++ b/src/components/Rating/RatingItem.tsx @@ -41,25 +41,25 @@ export const RatingItem = memo(({ checked, ...rest }) => { {...styles.icon} fillOpacity={checked ? 1 : 0} source={Icon} - uniProps={({ theme }) => { + uniProps={({ components }) => { const color = disabled ? checked - ? theme.custom.rating.ratingStarIconOnDisabledColor - : theme.custom.rating.ratingStarIconOffDisabledColor + ? components.rating.icon.activeColor + : components.rating.icon.color : pressed - ? theme.Form.Rating.ratingStarIconHoverColor + ? components.rating.icon.hoverColor : checked - ? theme.Form.Rating.ratingStarIconOnColor - : theme.Form.Rating.ratingStarIconOffColor + ? components.rating.icon.activeColor + : components.rating.icon.color return { color, fill: checked ? disabled - ? theme.custom.rating.ratingStarIconOnDisabledColor + ? components.rating.icon.activeColor : pressed - ? theme.Form.Rating.ratingStarIconHoverColor - : theme.Form.Rating.ratingStarIconOnColor + ? components.rating.icon.hoverColor + : components.rating.icon.activeColor : undefined, } }} @@ -69,9 +69,9 @@ export const RatingItem = memo(({ checked, ...rest }) => { ) }) -const styles = StyleSheet.create(({ theme }) => ({ +const styles = StyleSheet.create(({ components }) => ({ icon: { - height: theme.Form.Rating.ratingIconFontSize, - width: theme.Form.Rating.ratingIconFontSize, + height: components.rating.icon.size, + width: components.rating.icon.size, }, })) diff --git a/src/components/Rating/RatingItemContainer.tsx b/src/components/Rating/RatingItemContainer.tsx index 3776dbc7..c39eceff 100644 --- a/src/components/Rating/RatingItemContainer.tsx +++ b/src/components/Rating/RatingItemContainer.tsx @@ -55,16 +55,13 @@ export const RatingItemContainer = memo( } ) -const styles = StyleSheet.create(({ theme, sizing }) => ({ +const styles = StyleSheet.create(({ components }) => ({ container: { alignItems: 'center', justifyContent: 'center', - width: theme.Form.Rating.ratingIconFontSize, - height: theme.Form.Rating.ratingIconFontSize, + width: components.rating.icon.size, + height: components.rating.icon.size, }, - containerWithPaddings: { - width: sizing.Width['w-3'], - height: sizing.Height['h-3'], - }, + containerWithPaddings: { width: 42, height: 42 }, })) diff --git a/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap b/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap index 9a97587d..19ba0f8e 100644 --- a/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap +++ b/src/components/Rating/__tests__/__snapshots__/Rating.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Rating component tests renders correctly with default props 1`] = ` { "alignItems": "center", "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -44,9 +44,9 @@ exports[`Rating component tests renders correctly with default props 1`] = ` [ { "alignItems": "center", - "height": 17.5, + "height": 24, "justifyContent": "center", - "width": 17.5, + "width": 24, }, false, ] @@ -55,11 +55,11 @@ exports[`Rating component tests renders correctly with default props 1`] = ` > @@ -827,9 +827,9 @@ exports[`Rating component tests renders the correct number of checked items - $r [ { "alignItems": "center", - "height": 17.5, + "height": 24, "justifyContent": "center", - "width": 17.5, + "width": 24, }, false, ] @@ -838,11 +838,11 @@ exports[`Rating component tests renders the correct number of checked items - $r > @@ -1610,9 +1610,9 @@ exports[`Rating component tests renders the correct number of checked items - $r [ { "alignItems": "center", - "height": 17.5, + "height": 24, "justifyContent": "center", - "width": 17.5, + "width": 24, }, false, ] @@ -1621,11 +1621,11 @@ exports[`Rating component tests renders the correct number of checked items - $r > ((props) => ( )) -const styles = StyleSheet.create(({ theme }) => ({ +// Осознанный обход слоя components: цвет невыбранного пункта — семантическая +// роль «приглушённый текст». Собственного токена у selectbutton нет, а то же +// значение приходит в tabs.tab.color и menu.item.color. +const styles = StyleSheet.create(({ components, semantic }) => ({ container: { flexDirection: 'row', - padding: theme.Form.SelectButton.selectButtonGroupPadding, - gap: theme.Form.SelectButton.selectButtonGroupPadding, - borderRadius: theme.General.borderRadiusXL, - backgroundColor: theme.Form.SelectButton.selectButtonGroupBg, + padding: components.selectbutton.extend.paddingX, + gap: components.selectbutton.extend.paddingX, + borderRadius: components.selectbutton.root.borderRadius, + backgroundColor: components.selectbutton.colorScheme.extend.background, }, frame: { position: 'absolute', - top: theme.Form.SelectButton.selectButtonGroupPadding, - bottom: theme.Form.SelectButton.selectButtonGroupPadding, - left: theme.Form.SelectButton.selectButtonGroupPadding, - borderRadius: theme.Form.SelectButton.selectButtonBorderRadius, - backgroundColor: theme.Form.SelectButton.selectButtonActiveBg, + top: components.selectbutton.extend.paddingY, + bottom: components.selectbutton.extend.paddingY, + left: components.selectbutton.extend.paddingX, + borderRadius: components.selectbutton.extend.ext.borderRadius, + backgroundColor: components.selectbutton.extend.checkedBackground, zIndex: -1, }, - textColor: { color: theme.Form.SelectButton.selectButtonTextColor }, - checkedTextColor: { - color: theme.Form.SelectButton.selectButtonIconActiveColor, - }, + textColor: { color: semantic.colorScheme.color.fg.muted }, + checkedTextColor: { color: components.selectbutton.extend.checkedColor }, })) diff --git a/src/components/SelectButton/SelectButtonItem.tsx b/src/components/SelectButton/SelectButtonItem.tsx index 4c8ca4e6..2d8283ee 100644 --- a/src/components/SelectButton/SelectButtonItem.tsx +++ b/src/components/SelectButton/SelectButtonItem.tsx @@ -127,12 +127,12 @@ export const SelectButtonItem = memo( {...iconSize} source={Icon} testID='SelectButtonItem_Icon' - uniProps={({ theme }) => ({ + uniProps={({ components, semantic }) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonBorderColor + ? semantic.colorScheme.color.border.neutral.strong : isSelected - ? theme.Form.SelectButton.selectButtonIconActiveColor - : theme.Form.SelectButton.selectButtonTextColor, + ? components.selectbutton.extend.checkedColor + : semantic.colorScheme.color.fg.muted, })} /> ) : null} @@ -153,56 +153,71 @@ export const SelectButtonItem = memo( } ) +// Осознанный обход слоя components: цвет невыбранного пункта — семантическая +// роль «приглушённый текст». Собственного токена у selectbutton нет, а то же +// значение приходит в tabs.tab.color и menu.item.color. const styles = StyleSheet.create( - ({ theme, typography, border, spacing, fonts }) => ({ + ({ + primitive, + components, + semantic, + + fonts, + }) => ({ container: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - gap: theme.General.inlineSpacing, - borderWidth: border.Width.border, + gap: components.selectbutton.extend.gap, + borderWidth: semantic.dimension.borderWidth[100], borderColor: 'transparent', }, - small: { height: theme.Button.Common.buttonHeightSM }, - base: { height: theme.Button.Common.buttonHeight }, + small: { height: semantic.dimension.size[800] }, + base: { height: semantic.dimension.size[1100] }, large: { - height: theme.Button.Common.buttonHeightLG, - gap: spacing.Gap['gap-3'], + height: semantic.dimension.size[1300], + gap: components.selectbutton.extend.gap, }, xlarge: { - height: theme.Button.Common.buttonHeightXL, - gap: spacing.Gap['gap-3'], + height: semantic.dimension.size[1400], + gap: components.selectbutton.extend.gap, }, disabledContainer: { - borderRadius: theme.Form.SelectButton.selectButtonBorderRadius, - borderWidth: 1, - borderColor: theme.Button.Disabled.disabledButtonBorderColor, + borderRadius: components.selectbutton.extend.ext.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], + borderColor: semantic.colorScheme.color.border.neutral.strong, }, iconSmall: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: components.selectbutton.extend.iconSize.sm, + height: components.selectbutton.extend.iconSize.sm, }, iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: components.selectbutton.extend.iconSize.md, + height: components.selectbutton.extend.iconSize.md, }, iconLarge: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: components.selectbutton.extend.iconSize.lg, + height: components.selectbutton.extend.iconSize.lg, + }, + // Токена iconSize для xlarge в дизайн-системе нет — размер взят semantic-ролью. + iconXLarge: { + width: semantic.dimension.size[800], + height: semantic.dimension.size[800], }, - iconXLarge: { width: 28, height: 28 }, - label: { flexShrink: 1, fontWeight: 600, fontFamily: fonts.primary }, - labelSmall: { fontSize: typography.Size['text-sm'] }, - labelBase: { fontSize: typography.Size['text-base'] }, - labelLarge: { fontSize: typography.Size['text-xl'] }, - labelXLarge: { fontSize: typography.Size['text-2xl'] }, - textColor: { color: theme.Form.SelectButton.selectButtonTextColor }, - checkedTextColor: { - color: theme.Form.SelectButton.selectButtonIconActiveColor, + label: { + flexShrink: 1, + fontWeight: primitive.fonts.fontWeight.demibold, + fontFamily: fonts.primary, }, + labelSmall: { fontSize: primitive.fonts.fontSize[100] }, + labelBase: { fontSize: primitive.fonts.fontSize[300] }, + labelLarge: { fontSize: primitive.fonts.fontSize[500] }, + labelXLarge: { fontSize: primitive.fonts.fontSize[600] }, + textColor: { color: semantic.colorScheme.color.fg.muted }, + checkedTextColor: { color: components.selectbutton.extend.checkedColor }, disabledTextColor: { - color: theme.Button.Disabled.disabledButtonBorderColor, + color: semantic.colorScheme.color.border.neutral.strong, }, }) ) diff --git a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx index c0a9806a..0abd689e 100644 --- a/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx +++ b/src/components/SelectButton/__tests__/SelectButtonItem.test.tsx @@ -63,30 +63,30 @@ const sizeCases: Array<{ { name: 'маленький', size: 'small', - height: lightTheme.theme.Button.Common.buttonHeightSM, - iconSize: lightTheme.typography.Size['text-base'], - fontSize: lightTheme.typography.Size['text-sm'], + height: lightTheme.semantic.dimension.size[800], + iconSize: lightTheme.primitive.fonts.fontSize[300], + fontSize: lightTheme.primitive.fonts.fontSize[100], }, { name: 'базовый', size: 'base', - height: lightTheme.theme.Button.Common.buttonHeight, - iconSize: lightTheme.typography.Size['text-xl'], - fontSize: lightTheme.typography.Size['text-base'], + height: lightTheme.semantic.dimension.size[1100], + iconSize: lightTheme.primitive.fonts.fontSize[500], + fontSize: lightTheme.primitive.fonts.fontSize[300], }, { name: 'большой', size: 'large', - height: lightTheme.theme.Button.Common.buttonHeightLG, - iconSize: lightTheme.typography.Size['text-2xl'], - fontSize: lightTheme.typography.Size['text-xl'], + height: lightTheme.semantic.dimension.size[1300], + iconSize: lightTheme.primitive.fonts.fontSize[600], + fontSize: lightTheme.primitive.fonts.fontSize[500], }, { name: 'самый большой', size: 'xlarge', - height: lightTheme.theme.Button.Common.buttonHeightXL, + height: lightTheme.semantic.dimension.size[1400], iconSize: 28, - fontSize: lightTheme.typography.Size['text-2xl'], + fontSize: lightTheme.primitive.fonts.fontSize[600], }, ] @@ -192,12 +192,10 @@ describe('SelectButtonItem', () => { await waitFor(() => { expect(icon).toHaveProp( 'stroke', - lightTheme.theme.Form.SelectButton.selectButtonIconActiveColor + lightTheme.components.selectbutton.extend.checkedColor ) expect(text).toHaveAnimatedStyle({ - color: toRgba( - lightTheme.theme.Form.SelectButton.selectButtonIconActiveColor - ), + color: toRgba(lightTheme.components.selectbutton.extend.checkedColor), }) }) @@ -207,12 +205,10 @@ describe('SelectButtonItem', () => { await waitFor(() => { expect(icon).toHaveProp( 'stroke', - lightTheme.theme.Form.SelectButton.selectButtonTextColor + lightTheme.semantic.colorScheme.color.fg.muted ) expect(text).toHaveAnimatedStyle({ - color: toRgba( - lightTheme.theme.Form.SelectButton.selectButtonTextColor - ), + color: toRgba(lightTheme.semantic.colorScheme.color.fg.muted), }) }) }) diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx index 1aa52ffe..3e0813d7 100644 --- a/src/components/Skeleton/Skeleton.tsx +++ b/src/components/Skeleton/Skeleton.tsx @@ -87,14 +87,16 @@ export const Skeleton = memo(({ style, testID, ...rest }) => { ) }) -const styles = StyleSheet.create(({ border, theme }) => ({ +const styles = StyleSheet.create(({ components: { skeleton } }) => ({ container: { - borderRadius: border.Radius['rounded-lg'], + borderRadius: skeleton.root.borderRadius, overflow: 'hidden', - backgroundColor: theme.Misc.Skeleton.skeletonBg, + backgroundColor: skeleton.colorScheme.root.background, }, gradientContainer: { position: 'absolute', height: '100%' }, - gradientColor: { backgroundColor: theme.Misc.Skeleton.skeletonAnimationBg }, + gradientColor: { + backgroundColor: skeleton.colorScheme.root.animationBackground, + }, })) export const SkeletonTestId = { diff --git a/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap b/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap index 2da3ca1f..14b2bb9d 100644 --- a/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap +++ b/src/components/Skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Skeleton 50% animation 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { @@ -100,7 +100,7 @@ exports[`Skeleton 50% animation 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] @@ -144,7 +144,7 @@ exports[`Skeleton 100% animation 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { @@ -237,7 +237,7 @@ exports[`Skeleton 100% animation 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] @@ -281,7 +281,7 @@ exports[`Skeleton before animation started: before animation started 1`] = ` [ { "backgroundColor": "#e2e2e4", - "borderRadius": 7, + "borderRadius": 14, "overflow": "hidden", }, { @@ -374,7 +374,7 @@ exports[`Skeleton before animation started: before animation started 1`] = ` 0, 1726145252, 0.5, - 1728053247, + 1727066353, 1, 1726145252, ] diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx index 8195b651..e9e9686f 100644 --- a/src/components/Slider/Slider.tsx +++ b/src/components/Slider/Slider.tsx @@ -252,7 +252,7 @@ export const Slider = memo( } ) -const styles = StyleSheet.create(({ theme, border }) => { +const styles = StyleSheet.create(({ semantic, components }) => { return { container: { width: '100%', @@ -260,33 +260,36 @@ const styles = StyleSheet.create(({ theme, border }) => { alignItems: 'center', }, track: { - height: theme.Form.Slider.sliderHorizontalHeight, - backgroundColor: theme.Form.Slider.sliderBg, - borderRadius: theme.Form.Slider.sliderHandleBorderRadius, + height: components.slider.track.size, + backgroundColor: components.slider.track.background, + borderRadius: components.slider.track.borderRadius, position: 'relative', width: '100%', justifyContent: 'center', }, line: { - height: theme.Form.Slider.sliderHorizontalHeight, - borderRadius: theme.Form.Slider.sliderHandleBorderRadius, + height: components.slider.track.size, + borderRadius: components.slider.track.borderRadius, position: 'absolute', - backgroundColor: theme.Form.Slider.sliderRangeBg, + backgroundColor: components.slider.range.background, }, point: { - width: theme.Form.Slider.sliderHandleWidth, - height: theme.Form.Slider.sliderHandleHeight, - borderRadius: theme.Form.Slider.sliderHandleHeight / 2, + width: components.slider.handle.width, + height: components.slider.handle.height, + borderRadius: components.slider.handle.borderRadius, position: 'absolute', - backgroundColor: theme.Form.Slider.sliderHandleBg, - borderWidth: border.Width['border-3'], - borderColor: theme.Form.Slider.sliderHandleBorder, + backgroundColor: components.slider.colorScheme.handle.content.background, + borderWidth: semantic.dimension.borderWidth[300], + borderColor: components.slider.handle.background, }, - disabled: { opacity: 0.6, mixBlendMode: 'luminosity' }, + disabled: { + opacity: semantic.effects.opacity[60], + mixBlendMode: 'luminosity', + }, - hovered: { backgroundColor: theme.Form.Slider.sliderHandleHoverBg }, + hovered: { backgroundColor: components.slider.handle.hoverBackground }, } }) diff --git a/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap index 0a400845..9079a675 100644 --- a/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/src/components/Slider/__tests__/__snapshots__/Slider.test.tsx.snap @@ -19,7 +19,7 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -37,7 +37,7 @@ exports[`Slider snapshots default 1`] = ` { "value": { "left": 0, - "width": 8.75, + "width": 10, }, } } @@ -47,7 +47,7 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -59,13 +59,13 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { "left": 0, - "width": 8.75, + "width": 10, }, ] } @@ -94,11 +94,11 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -110,11 +110,11 @@ exports[`Slider snapshots default 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -150,7 +150,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -168,7 +168,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "value": { "left": 0, - "width": 8.75, + "width": 10, }, } } @@ -178,7 +178,7 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -190,13 +190,13 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { "left": 0, - "width": 8.75, + "width": 10, }, ] } @@ -225,11 +225,11 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -241,11 +241,11 @@ exports[`Slider snapshots disabled = false, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -281,7 +281,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -298,7 +298,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -309,7 +309,7 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -321,12 +321,12 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -356,11 +356,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -372,11 +372,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -413,11 +413,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -429,11 +429,11 @@ exports[`Slider snapshots disabled = false, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -469,7 +469,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -486,7 +486,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -497,7 +497,7 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -509,12 +509,12 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -544,11 +544,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -560,11 +560,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -601,11 +601,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -617,11 +617,11 @@ exports[`Slider snapshots disabled = false, range = true, maxPointerValueInit = { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -660,7 +660,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -678,7 +678,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "value": { "left": 0, - "width": 8.75, + "width": 10, }, } } @@ -688,7 +688,7 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -700,13 +700,13 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { "left": 0, - "width": 8.75, + "width": 10, }, ] } @@ -735,11 +735,11 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -751,11 +751,11 @@ exports[`Slider snapshots disabled = true, range = false 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -794,7 +794,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -811,7 +811,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -822,7 +822,7 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -834,12 +834,12 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -869,11 +869,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -885,11 +885,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -926,11 +926,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -942,11 +942,11 @@ exports[`Slider snapshots disabled = true, range = true 1`] = ` { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -985,7 +985,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#e2e2e4", "borderRadius": 14, - "height": 3.5, + "height": 4, "justifyContent": "center", "position": "relative", "width": "100%", @@ -1002,7 +1002,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 jestAnimatedStyle={ { "value": { - "left": 8.75, + "left": 10, "width": 0, }, } @@ -1013,7 +1013,7 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, @@ -1025,12 +1025,12 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#2b2e33", "borderRadius": 14, - "height": 3.5, + "height": 4, "position": "absolute", }, false, { - "left": 8.75, + "left": 10, "width": 0, }, ] @@ -1060,11 +1060,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -1076,11 +1076,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { @@ -1117,11 +1117,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, ], @@ -1133,11 +1133,11 @@ exports[`Slider snapshots disabled = true, range = true, maxPointerValueInit = 8 { "backgroundColor": "#ffffff", "borderColor": "#2b2e33", - "borderRadius": 8.75, - "borderWidth": 3, - "height": 17.5, + "borderRadius": 1600, + "borderWidth": 4, + "height": 20, "position": "absolute", - "width": 17.5, + "width": 20, }, false, { diff --git a/src/components/Tabs/TabItem/TabItem.tsx b/src/components/Tabs/TabItem/TabItem.tsx index 71168592..bde21a35 100644 --- a/src/components/Tabs/TabItem/TabItem.tsx +++ b/src/components/Tabs/TabItem/TabItem.tsx @@ -56,14 +56,14 @@ export const TabItem = memo( ({ + uniProps={({ components, semantic }) => ({ color: disabled - ? theme.Button.Disabled.disabledButtonTextColor + ? semantic.colorScheme.color.fg.muted : pressed - ? theme.Panel.TabView.tabviewHeaderHoverTextColor + ? components.tabs.tab.hoverColor : active - ? theme.Panel.TabView.tabviewHeaderActiveTextColor - : theme.Panel.TabView.tabviewHeaderTextColor, + ? components.tabs.tab.activeColor + : components.tabs.tab.color, })} /> ) : null} @@ -86,43 +86,46 @@ export const TabItem = memo( } ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ - container: { - alignItems: 'center', - flexDirection: 'row', - - height: - theme.Misc.Badge.badgeHeight + - theme.Panel.TabView.tabviewHeaderPaddingTopBottom * 2, - gap: theme.General.inlineSpacing, - paddingHorizontal: theme.Panel.TabView.tabviewHeaderPaddingLeftRight, - paddingVertical: theme.Panel.TabView.tabviewHeaderPaddingTopBottom, - - backgroundColor: theme.Panel.TabView.tabviewHeaderBg, - }, - pressedContainer: { - backgroundColor: theme.Panel.TabView.tabviewHeaderHoverBg, - }, - activeContainer: { - backgroundColor: theme.Panel.TabView.tabviewHeaderActiveBg, - }, - disabledContainer: { opacity: 0.6, mixBlendMode: 'luminosity' }, - icon: { - width: theme.Menu.Item.menuitemSubmenuIconFontSize, - height: theme.Menu.Item.menuitemSubmenuIconFontSize, - }, - text: { - fontFamily: fonts.primary, - fontSize: typography.Size['text-base'], - verticalAlign: 'middle', - includeFontPadding: false, - - color: theme.Panel.TabView.tabviewHeaderTextColor, - }, - pressedText: { color: theme.Panel.TabView.tabviewHeaderHoverTextColor }, - activeText: { color: theme.Panel.TabView.tabviewHeaderActiveTextColor }, - disabledText: { color: theme.Button.Disabled.disabledButtonTextColor }, -})) +const styles = StyleSheet.create( + ({ primitive, components, semantic, fonts }) => ({ + container: { + alignItems: 'center', + flexDirection: 'row', + + height: semantic.dimension.size[700] + components.tabs.tab.padding * 2, + gap: components.tabs.tab.gap, + paddingHorizontal: components.tabs.tab.padding, + paddingVertical: components.tabs.tab.padding, + + backgroundColor: components.tabs.colorScheme.tab.background, + }, + pressedContainer: { + backgroundColor: components.tabs.colorScheme.tab.hoverBackground, + }, + activeContainer: { + backgroundColor: components.tabs.colorScheme.tab.activeBackground, + }, + disabledContainer: { + opacity: semantic.effects.opacity[60], + mixBlendMode: 'luminosity', + }, + icon: { + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], + }, + text: { + fontFamily: fonts.primary, + fontSize: primitive.fonts.fontSize[300], + verticalAlign: 'middle', + includeFontPadding: false, + + color: components.tabs.tab.color, + }, + pressedText: { color: components.tabs.tab.hoverColor }, + activeText: { color: components.tabs.tab.activeColor }, + disabledText: { color: semantic.colorScheme.color.fg.muted }, + }) +) export enum TestId { Container = 'TabItem_Container', diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 497546b6..1e9f2ecf 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -91,19 +91,19 @@ export const Tabs = memo( } ) -const styles = StyleSheet.create(({ theme, border }) => ({ +const styles = StyleSheet.create(({ semantic, components }) => ({ container: { flexDirection: 'row', - gap: theme.Panel.TabView.tabviewHeaderSpacing, + gap: components.tabs.tab.margin, - borderBottomWidth: border.Width.border, - borderColor: theme.Panel.TabView.tabviewNavBorderColor, + borderBottomWidth: semantic.dimension.borderWidth[100], + borderColor: components.tabs.tablist.borderColor, }, line: { position: 'absolute', bottom: 0, - height: border.Width['border-2'], + height: semantic.dimension.borderWidth[200], - backgroundColor: theme.Panel.TabView.tabviewHeaderActiveBorderColor, + backgroundColor: components.tabs.activeBar.background, }, })) diff --git a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index 70574bf1..e4a3b881 100644 --- a/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -39,16 +39,16 @@ exports[`TabItem component tests active: label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, undefined, ] @@ -61,12 +61,12 @@ exports[`TabItem component tests active: label 1`] = ` { "color": "#85888e", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, undefined, @@ -118,16 +118,16 @@ exports[`TabItem component tests active: label, badge 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, undefined, ] @@ -140,12 +140,12 @@ exports[`TabItem component tests active: label, badge 1`] = ` { "color": "#85888e", "fontFamily": "TT Fellows", - "fontSize": 14, + "fontSize": 16, "includeFontPadding": false, "verticalAlign": "middle", }, { - "color": "#000000", + "color": "#2b2e33", }, false, undefined, @@ -171,10 +171,10 @@ exports[`TabItem component tests active: label, badge 1`] = ` "backgroundColor": "#44e858", }, { - "borderRadius": 100, - "height": 21, + "borderRadius": 1600, + "height": 24, "justifyContent": "center", - "paddingHorizontal": 7, + "paddingHorizontal": 8, }, ] } @@ -184,9 +184,9 @@ exports[`TabItem component tests active: label, badge 1`] = ` style={ [ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", }, @@ -219,9 +219,9 @@ exports[`TabItem component tests active: label, badge 1`] = ` onLayout={[Function]} style={ { - "color": "#000000", + "color": "#2b2e33", "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -275,16 +275,16 @@ exports[`TabItem component tests active: label, icon 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, undefined, ] @@ -292,15 +292,15 @@ exports[`TabItem component tests active: label, icon 1`] = ` > @@ -2160,16 +2160,16 @@ exports[`Tabs component tests disabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, { "mixBlendMode": "luminosity", @@ -2180,11 +2180,11 @@ exports[`Tabs component tests disabled 1`] = ` > @@ -2632,16 +2632,16 @@ exports[`Tabs component tests normal 1`] = ` [ { "alignItems": "center", - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", "flexDirection": "row", - "gap": 7, - "height": 49, - "paddingHorizontal": 0, + "gap": 8, + "height": 52, + "paddingHorizontal": 14, "paddingVertical": 14, }, false, { - "backgroundColor": "rgba(255, 255, 255, 0.0001)", + "backgroundColor": "transparent", }, false, ] @@ -2649,15 +2649,15 @@ exports[`Tabs component tests normal 1`] = ` > -const tagIconColor: Record string> = { - basic: (t) => t.Misc.Badge.badgeTextColor, - info: (t) => t.Misc.Badge.badgeInfoTextColor, - success: (t) => t.Misc.Badge.badgeSuccessTextColor, - warning: (t) => t.Misc.Badge.badgeWarningTextColor, - danger: (t) => t.Misc.Badge.badgeDangerTextColor, - secondary: (t) => t.Misc.Badge.badgeTextColor, +const tagIconColor: Record< + TagSeverity, + (t: ThemeType['components']) => string +> = { + basic: (t) => t.tag.colorScheme.primary.color, + info: (t) => t.tag.colorScheme.info.color, + success: (t) => t.tag.colorScheme.success.color, + warning: (t) => t.tag.colorScheme.warn.color, + danger: (t) => t.tag.colorScheme.danger.color, + secondary: (t) => t.tag.colorScheme.secondary.color, } /** @@ -79,8 +82,8 @@ export const Tag = memo( {...tagStyles.icon} source={Icon} testID={TagTestId.icon} - uniProps={({ theme }) => ({ - color: tagIconColor[severity](theme), + uniProps={({ components }) => ({ + color: tagIconColor[severity](components), })} /> ) : null} @@ -97,61 +100,56 @@ export const Tag = memo( } ) -const tagStyles = StyleSheet.create( - ({ theme, border, spacing, typography, fonts }) => ({ - container: { - alignSelf: 'flex-start', - flexDirection: 'row', - alignItems: 'center', - gap: spacing.Gap['gap-1'], - paddingHorizontal: theme.Misc.Tag.tagPadding, - height: theme.Misc.Tag.tagHeight, - borderRadius: border.Radius['rounded-lg'], - variants: { - severity: { - basic: { backgroundColor: theme.Misc.Badge.badgeBg }, - info: { - backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg, - }, - success: { - backgroundColor: - theme.Button.Severity.Success.Basic.successButtonBg, - }, - warning: { - backgroundColor: - theme.Button.Severity.Warning.Basic.warningButtonBg, - }, - danger: { - backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg, - }, - secondary: { backgroundColor: theme.Surface['surface-border'] }, +const tagStyles = StyleSheet.create(({ components, fonts }) => ({ + container: { + alignSelf: 'flex-start', + flexDirection: 'row', + alignItems: 'center', + gap: components.tag.root.gap, + paddingHorizontal: components.tag.root.paddingLeft, + paddingVertical: components.tag.root.paddingTop, + borderRadius: components.tag.root.borderRadius, + variants: { + severity: { + basic: { + backgroundColor: components.tag.colorScheme.primary.background, + }, + info: { backgroundColor: components.tag.colorScheme.info.background }, + success: { + backgroundColor: components.tag.colorScheme.success.background, + }, + warning: { + backgroundColor: components.tag.colorScheme.warn.background, + }, + danger: { + backgroundColor: components.tag.colorScheme.danger.background, + }, + secondary: { + backgroundColor: components.tag.colorScheme.secondary.background, }, }, }, - roundedContainer: { borderRadius: border.Radius['rounded-full'] }, - icon: { - width: theme.Misc.Tag.tagFontSize, - height: theme.Misc.Tag.tagFontSize, - }, - text: { - flexShrink: 1, - fontSize: typography.Size['text-xs'], - includeFontPadding: false, - verticalAlign: 'middle', - fontFamily: fonts.primary, - variants: { - severity: { - basic: { color: theme.Misc.Badge.badgeTextColor }, - info: { color: theme.Misc.Badge.badgeInfoTextColor }, - success: { color: theme.Misc.Badge.badgeSuccessTextColor }, - warning: { color: theme.Misc.Badge.badgeWarningTextColor }, - danger: { color: theme.Misc.Badge.badgeDangerTextColor }, - secondary: { color: theme.Misc.Badge.badgeTextColor }, - }, + }, + roundedContainer: { borderRadius: components.tag.root.roundedBorderRadius }, + icon: { width: components.tag.icon.size, height: components.tag.icon.size }, + text: { + flexShrink: 1, + fontSize: components.tag.root.fontSize, + includeFontPadding: false, + verticalAlign: 'middle', + fontFamily: fonts.primary, + variants: { + severity: { + basic: { color: components.tag.colorScheme.primary.color }, + info: { color: components.tag.colorScheme.info.color }, + success: { color: components.tag.colorScheme.success.color }, + warning: { color: components.tag.colorScheme.warn.color }, + danger: { color: components.tag.colorScheme.danger.color }, + secondary: { color: components.tag.colorScheme.secondary.color }, }, }, - }) -) + }, +})) export const TagTestId = { root: 'Tag', diff --git a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap index d41f7d70..ff2517c9 100644 --- a/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/src/components/Tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -11,11 +11,11 @@ exports[`Tag snapshot: default 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#44e858", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "height": 21, - "paddingHorizontal": 7, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, undefined, ] @@ -26,10 +26,10 @@ exports[`Tag snapshot: default 1`] = ` numberOfLines={1} style={ { - "color": "#000000", + "color": "#2b2e33", "flexShrink": 1, "fontFamily": "TT Fellows", - "fontSize": 10.5, + "fontSize": 12, "includeFontPadding": false, "verticalAlign": "middle", } @@ -53,14 +53,14 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#44e858", - "borderRadius": 7, + "borderRadius": 8, "flexDirection": "row", - "gap": 3.5, - "height": 21, - "paddingHorizontal": 7, + "gap": 4, + "paddingHorizontal": 8, + "paddingVertical": 4, }, { - "borderRadius": 100, + "borderRadius": 1600, }, ] } @@ -68,15 +68,15 @@ exports[`Tag snapshot: severity = basic, rounded = true, with Icon 1`] = ` > (({ countFrom, onFinish }) => { ) }) -const styles = StyleSheet.create(({ typography }) => ({ +const styles = StyleSheet.create(({ semantic }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, @@ -111,7 +111,7 @@ const styles = StyleSheet.create(({ typography }) => ({ width: COUNTER_SIZE, height: COUNTER_SIZE, }, - circle: { color: typography.Color.Surface['text-surface-0'] }, + circle: { color: semantic.colorScheme.color.fg.active }, })) export enum TestId { diff --git a/src/components/Timer/TimerFlip.tsx b/src/components/Timer/TimerFlip.tsx index 88c72ad9..11a87b99 100644 --- a/src/components/Timer/TimerFlip.tsx +++ b/src/components/Timer/TimerFlip.tsx @@ -64,7 +64,7 @@ export const TimerFlip = memo(({ value, duration = 300 }) => { ) }) -const styles = StyleSheet.create(({ typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ container: { overflow: 'hidden', width: COUNTER_SIZE, @@ -81,11 +81,11 @@ const styles = StyleSheet.create(({ typography, fonts }) => ({ position: 'absolute', }, text: { - fontSize: typography.Size['text-base'], - fontWeight: 700, + fontSize: primitive.fonts.fontSize[300], + fontWeight: primitive.fonts.fontWeight.bold, includeFontPadding: false, verticalAlign: 'middle', - color: typography.Color.Surface['text-surface-0'], + color: semantic.colorScheme.color.fg.active, fontFamily: fonts.secondary, }, })) diff --git a/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap b/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap index f5235f08..b7bbf37d 100644 --- a/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap +++ b/src/components/Timer/__tests__/__snapshots__/Timer.test.tsx.snap @@ -158,7 +158,7 @@ exports[`Timer should reset timer on changing countFrom prop: after 1 s 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -223,7 +223,7 @@ exports[`Timer should reset timer on changing countFrom prop: after 1 s 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -395,7 +395,7 @@ exports[`Timer should reset timer on changing countFrom prop: after reset 1`] = { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -460,7 +460,7 @@ exports[`Timer should reset timer on changing countFrom prop: after reset 1`] = { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -632,7 +632,7 @@ exports[`Timer snapshot: before start 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -697,7 +697,7 @@ exports[`Timer snapshot: before start 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -869,7 +869,7 @@ exports[`Timer snapshot: on finish 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", @@ -934,7 +934,7 @@ exports[`Timer snapshot: on finish 1`] = ` { "color": "#181a1f", "fontFamily": "Noto Sans", - "fontSize": 14, + "fontSize": 16, "fontWeight": 700, "includeFontPadding": false, "verticalAlign": "middle", diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx index b8e0e140..8f40c522 100644 --- a/src/components/ToggleButton/ToggleButton.tsx +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -120,29 +120,33 @@ export const ToggleButton = memo( ) const toggleStyles = StyleSheet.create( - ({ theme, spacing, border, fonts, typography }) => ({ + ({ semantic, primitive, components, fonts }) => ({ container: { alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], - borderWidth: border.Width.border, + borderRadius: components.togglebutton.root.borderRadius, + borderWidth: semantic.dimension.borderWidth[100], overflow: 'hidden', variants: { checked: { true: { - borderColor: theme.Form.ToggleButton.toggleButtonActiveBorderColor, + borderColor: + components.togglebutton.colorScheme.root.checkedBorderColor, }, false: { - borderColor: theme.Form.ToggleButton.toggleButtonBorderColor, + borderColor: components.togglebutton.colorScheme.root.borderColor, }, }, pressed: { - true: { borderColor: theme.Form.ToggleButton.toggleButtonHoverBg }, + true: { + borderColor: components.togglebutton.extend.hoverBorderColor, + }, false: {}, }, disabled: { true: { - borderColor: theme.Button.Disabled.disabledButtonBorderColor, - opacity: 0.6, + borderColor: + components.togglebutton.colorScheme.root.disabledBorderColor, + opacity: semantic.effects.opacity[60], }, false: {}, }, @@ -152,8 +156,7 @@ const toggleStyles = StyleSheet.create( checked: 'true', pressed: 'true', styles: { - borderColor: - theme.Form.ToggleButton.toggleButtonActiveHoverBorderColor, + borderColor: components.togglebutton.extend.checkedHoverBorderColor, }, }, ], @@ -162,39 +165,47 @@ const toggleStyles = StyleSheet.create( flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', - borderRadius: border.Radius['rounded-full'], - paddingVertical: theme.Button.Common.buttonPaddingTopBottom, - paddingHorizontal: spacing.Padding['p-6'], - gap: spacing.Gap['gap-3'], + borderRadius: components.togglebutton.root.borderRadius, + paddingVertical: components.togglebutton.root.paddingTop, + paddingHorizontal: semantic.dimension.space[600], + gap: components.togglebutton.extend.ext.gap, variants: { size: { - xlarge: { minHeight: theme.Button.Common.buttonHeightXL }, - large: { minHeight: theme.Button.Common.buttonHeightLG }, + xlarge: { minHeight: semantic.dimension.size[1400] }, + large: { minHeight: semantic.dimension.size[1300] }, base: { - minHeight: theme.Button.Common.buttonHeight, - paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight, - gap: theme.General.inlineSpacing, + minHeight: semantic.dimension.size[1100], + paddingHorizontal: components.togglebutton.root.paddingLeft, + gap: components.togglebutton.root.gap, }, small: { - minHeight: theme.Button.Common.buttonHeightSM, - paddingHorizontal: spacing.Padding['p-3'], - gap: theme.General.inlineSpacing, + minHeight: semantic.dimension.size[800], + paddingHorizontal: components.togglebutton.root.sm.paddingRight, + gap: components.togglebutton.root.gap, }, }, checked: { true: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveBg, + backgroundColor: + components.togglebutton.colorScheme.root.checkedBackground, + }, + false: { + backgroundColor: + components.togglebutton.colorScheme.root.background, }, - false: { backgroundColor: theme.Form.ToggleButton.toggleButtonBg }, }, pressed: { true: { - backgroundColor: theme.Form.ToggleButton.toggleButtonHoverBg, + backgroundColor: + components.togglebutton.colorScheme.root.hoverBackground, }, false: {}, }, disabled: { - true: { backgroundColor: theme.Button.Disabled.disabledButtonBg }, + true: { + backgroundColor: + components.togglebutton.colorScheme.root.disabledBackground, + }, false: {}, }, }, @@ -203,47 +214,53 @@ const toggleStyles = StyleSheet.create( checked: 'true', pressed: 'true', styles: { - backgroundColor: theme.Form.ToggleButton.toggleButtonActiveHoverBg, + backgroundColor: + components.togglebutton.extend.checkedHoverBackground, }, }, ], }, iconOnly: { aspectRatio: 1, - paddingHorizontal: 0, - paddingVertical: 0, + paddingHorizontal: semantic.dimension.space.none, + paddingVertical: semantic.dimension.space.none, justifyContent: 'center', }, icon: { variants: { size: { xlarge: { - width: typography.Size['text-4xl'], - height: typography.Size['text-4xl'], + // Токена iconSize.xlg в дизайн-системе нет — размер взят semantic-ролью. + width: semantic.dimension.size[1000], + height: semantic.dimension.size[1000], }, large: { - width: typography.Size['text-2xl'], - height: typography.Size['text-2xl'], + width: components.togglebutton.extend.iconSize.lg, + height: components.togglebutton.extend.iconSize.lg, }, base: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: components.togglebutton.extend.iconSize.md, + height: components.togglebutton.extend.iconSize.md, }, small: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: components.togglebutton.extend.iconSize.sm, + height: components.togglebutton.extend.iconSize.sm, }, }, checked: { - true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, - false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.checkedColor, + }, + false: { color: components.togglebutton.colorScheme.root.color }, }, pressed: { - true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, + true: { color: components.togglebutton.colorScheme.root.hoverColor }, false: {}, }, disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.disabledColor, + }, false: {}, }, }, @@ -251,35 +268,37 @@ const toggleStyles = StyleSheet.create( { checked: 'true', pressed: 'true', - styles: { - color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, - }, + styles: { color: components.togglebutton.extend.checkedHoverColor }, }, ], }, label: { flexShrink: 1, fontFamily: fonts.primary, - fontWeight: '600', + fontWeight: primitive.fonts.fontWeight.demibold, includeFontPadding: false, verticalAlign: 'middle', variants: { size: { - xlarge: { fontSize: typography.Size['text-2xl'] }, - large: { fontSize: typography.Size['text-xl'] }, - base: { fontSize: typography.Size['text-base'] }, - small: { fontSize: typography.Size['text-sm'] }, + xlarge: { fontSize: primitive.fonts.fontSize[600] }, + large: { fontSize: primitive.fonts.fontSize[500] }, + base: { fontSize: primitive.fonts.fontSize[300] }, + small: { fontSize: primitive.fonts.fontSize[100] }, }, checked: { - true: { color: theme.Form.ToggleButton.toggleButtonActiveTextColor }, - false: { color: theme.Form.ToggleButton.toggleButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.checkedColor, + }, + false: { color: components.togglebutton.colorScheme.root.color }, }, pressed: { - true: { color: theme.Form.ToggleButton.toggleButtonHoverTextColor }, + true: { color: components.togglebutton.colorScheme.root.hoverColor }, false: {}, }, disabled: { - true: { color: theme.Button.Disabled.disabledButtonTextColor }, + true: { + color: components.togglebutton.colorScheme.root.disabledColor, + }, false: {}, }, }, @@ -287,9 +306,7 @@ const toggleStyles = StyleSheet.create( { checked: 'true', pressed: 'true', - styles: { - color: theme.Form.ToggleButton.toggleButtonTextActiveHoverColor, - }, + styles: { color: components.togglebutton.extend.checkedHoverColor }, }, ], }, diff --git a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 213d712b..6f1ddbaa 100644 --- a/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/ToggleButton/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -10,8 +10,8 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa [ { "alignSelf": "flex-start", - "borderColor": "rgba(255, 255, 255, 0.0001)", - "borderRadius": 100, + "borderColor": "#e2e2e4", + "borderRadius": 1600, "borderWidth": 1, "overflow": "hidden", }, @@ -27,12 +27,12 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#e2e2e4", - "borderRadius": 100, + "borderRadius": 1600, "flexDirection": "row", - "gap": 7, + "gap": 8, "minHeight": 28, - "paddingHorizontal": 10.5, - "paddingVertical": 0, + "paddingHorizontal": 14, + "paddingVertical": 8, }, false, ] @@ -41,15 +41,15 @@ exports[`ToggleButton snapshots checked = false, disabled = false, iconOnly = fa > ({ + const iconUniProps = ({ semantic }: ThemeType) => ({ color: visited - ? t.Color.Service['text-help'] - : t.Color.Service['text-info'], + ? semantic.colorScheme.color.fg.status.help.default + : semantic.colorScheme.color.fg.status.info.default, }) return ( @@ -133,35 +133,35 @@ export const Anchor = memo( } ) -const styles = StyleSheet.create(({ spacing, typography, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ container: { flexDirection: 'row', alignItems: 'center' }, text: { flexShrink: 1, - fontSize: typography.Size['text-sm'], + fontSize: primitive.fonts.fontSize[200], includeFontPadding: false, verticalAlign: 'middle', - color: typography.Color.Service['text-info'], + color: semantic.colorScheme.color.fg.status.info.default, fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], }, underlined: { textDecorationLine: 'underline' }, base: { - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], lineHeight: undefined, - letterSpacing: 0, + letterSpacing: primitive.fonts.letterSpacing[500], }, - visited: { color: typography.Color.Service['text-help'] }, + visited: { color: semantic.colorScheme.color.fg.status.help.default }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, - leftIconContainer: { paddingRight: spacing.Padding['p-2'] }, - rightIconContainer: { paddingLeft: spacing.Padding['p-2'] }, + leftIconContainer: { paddingRight: semantic.dimension.space[200] }, + rightIconContainer: { paddingLeft: semantic.dimension.space[200] }, })) export const AnchorTestId = { diff --git a/src/components/Typography/Body.tsx b/src/components/Typography/Body.tsx index f223873e..ba950105 100644 --- a/src/components/Typography/Body.tsx +++ b/src/components/Typography/Body.tsx @@ -36,21 +36,29 @@ export const Body = ({ ) } -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-base'], + fontSize: primitive.fonts.fontSize[300], includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, - lineHeight: 20, + lineHeight: primitive.fonts.lineHeight[450], }, - regular: { fontWeight: 400 }, - bold: { fontWeight: 700, letterSpacing: -0.5 }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, - base: { fontSize: typography.Size['text-sm'], lineHeight: 18 }, - paragraph: { lineHeight: 24 }, - paragraphBase: { lineHeight: 21 }, - disabled: { opacity: 0.6 }, + regular: { fontWeight: primitive.fonts.fontWeight.regular }, + bold: { + fontWeight: primitive.fonts.fontWeight.bold, + letterSpacing: primitive.fonts.letterSpacing[400], + }, + default: { color: semantic.colorScheme.color.fg.default }, + primary: { color: semantic.colorScheme.color.fg.brand.default }, + secondary: { color: semantic.colorScheme.color.fg.muted }, + base: { + fontSize: primitive.fonts.fontSize[200], + lineHeight: primitive.fonts.lineHeight[400], + }, + paragraph: { lineHeight: primitive.fonts.lineHeight[600] }, + paragraphBase: { lineHeight: primitive.fonts.lineHeight[500] }, + disabled: { opacity: semantic.effects.opacity[60] }, })) diff --git a/src/components/Typography/Caption.tsx b/src/components/Typography/Caption.tsx index 7795843a..6b041640 100644 --- a/src/components/Typography/Caption.tsx +++ b/src/components/Typography/Caption.tsx @@ -39,11 +39,11 @@ export const Caption = ({ {...styles.icon} source={Icon} testID={CaptionTestId.icon} - uniProps={({ theme }) => ({ + uniProps={({ semantic }) => ({ color: { - default: theme.General.textColor, - primary: theme.General.primaryColor, - secondary: theme.General.textSecondaryColor, + default: semantic.colorScheme.color.fg.default, + primary: semantic.colorScheme.color.fg.brand.default, + secondary: semantic.colorScheme.color.fg.muted, }[color], })} /> @@ -57,23 +57,28 @@ export const Caption = ({ const CaptionTestId = { text: 'CaptionText', icon: 'CaptionIcon' } -const styles = StyleSheet.create(({ theme, spacing, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-sm'], + fontSize: primitive.fonts.fontSize[200], includeFontPadding: false, verticalAlign: 'middle', fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], }, textWithIcon: { flexShrink: 1 }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, - disabled: { opacity: 0.6 }, - withIconContainer: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + default: { color: semantic.colorScheme.color.fg.default }, + primary: { color: semantic.colorScheme.color.fg.brand.default }, + secondary: { color: semantic.colorScheme.color.fg.muted }, + disabled: { opacity: semantic.effects.opacity[60] }, + withIconContainer: { + flexDirection: 'row', + gap: semantic.dimension.space[100], + }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, })) diff --git a/src/components/Typography/Service.tsx b/src/components/Typography/Service.tsx index 78ea369e..e09cf963 100644 --- a/src/components/Typography/Service.tsx +++ b/src/components/Typography/Service.tsx @@ -69,13 +69,13 @@ export const Service = ({ ({ + uniProps={({ semantic }) => ({ color: { - danger: t.Color.Service['text-danger'], - warning: t.Color.Service['text-warning'], - success: t.Color.Service['text-success'], - info: t.Color.Service['text-info'], - help: t.Color.Service['text-help'], + danger: semantic.colorScheme.color.fg.status.danger.default, + warning: semantic.colorScheme.color.fg.status.warning.default, + success: semantic.colorScheme.color.fg.status.success.default, + info: semantic.colorScheme.color.fg.status.info.default, + help: semantic.colorScheme.color.fg.status.help.default, }[variant], })} /> @@ -85,34 +85,34 @@ export const Service = ({ ) } -const styles = StyleSheet.create(({ typography, spacing, fonts }) => ({ +const styles = StyleSheet.create(({ semantic, primitive, fonts }) => ({ iconBase: { - width: typography.Size['text-xl'], - height: typography.Size['text-xl'], + width: semantic.dimension.size[600], + height: semantic.dimension.size[600], }, icon: { - width: typography.Size['text-base'], - height: typography.Size['text-base'], + width: semantic.dimension.size[450], + height: semantic.dimension.size[450], }, - containerBase: { flexDirection: 'row', gap: spacing.Gap['gap-2'] }, - container: { flexDirection: 'row', gap: spacing.Gap['gap-1'] }, + containerBase: { flexDirection: 'row', gap: semantic.dimension.space[200] }, + container: { flexDirection: 'row', gap: semantic.dimension.space[100] }, textCommon: { includeFontPadding: false, verticalAlign: 'middle', flexShrink: 1, - fontWeight: 400, - fontSize: typography.Size['text-sm'], + fontWeight: primitive.fonts.fontWeight.regular, + fontSize: primitive.fonts.fontSize[200], fontFamily: fonts.secondary, - lineHeight: 15, - letterSpacing: -0.25, + lineHeight: primitive.fonts.lineHeight[300], + letterSpacing: primitive.fonts.letterSpacing[200], }, - textBase: { lineHeight: undefined, fontSize: typography.Size['text-base'] }, + textBase: { lineHeight: undefined, fontSize: primitive.fonts.fontSize[300] }, - warning: { color: typography.Color.Service['text-warning'] }, - success: { color: typography.Color.Service['text-success'] }, - info: { color: typography.Color.Service['text-info'] }, - help: { color: typography.Color.Service['text-help'] }, - danger: { color: typography.Color.Service['text-danger'] }, + warning: { color: semantic.colorScheme.color.fg.status.warning.default }, + success: { color: semantic.colorScheme.color.fg.status.success.default }, + info: { color: semantic.colorScheme.color.fg.status.info.default }, + help: { color: semantic.colorScheme.color.fg.status.help.default }, + danger: { color: semantic.colorScheme.color.fg.status.danger.default }, })) diff --git a/src/components/Typography/Subtitle.tsx b/src/components/Typography/Subtitle.tsx index 99ff640b..b2234cdb 100644 --- a/src/components/Typography/Subtitle.tsx +++ b/src/components/Typography/Subtitle.tsx @@ -30,16 +30,21 @@ export const Subtitle = memo( ) ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { - fontSize: typography.Size['text-xs'], - fontWeight: 700, + fontSize: primitive.fonts.fontSize[100], + fontWeight: primitive.fonts.fontWeight.bold, textTransform: 'uppercase', fontFamily: fonts.secondary, - lineHeight: 15, + lineHeight: primitive.fonts.lineHeight[300], }, - base: { lineHeight: 18, fontSize: typography.Size['text-sm'] }, - default: { color: theme.General.textColor }, - primary: { color: theme.General.primaryColor }, - secondary: { color: theme.General.textSecondaryColor }, + base: { + lineHeight: primitive.fonts.lineHeight[400], + fontSize: primitive.fonts.fontSize[200], + }, + default: { color: semantic.colorScheme.color.fg.default }, + primary: { color: semantic.colorScheme.color.fg.brand.default }, + secondary: { color: semantic.colorScheme.color.fg.muted }, })) diff --git a/src/components/Typography/Title.tsx b/src/components/Typography/Title.tsx index de6dd6d0..d78e548e 100644 --- a/src/components/Typography/Title.tsx +++ b/src/components/Typography/Title.tsx @@ -10,21 +10,23 @@ export const Title = ({ level, style, ...other }: TitleProps) => ( ) -const styles = StyleSheet.create(({ theme, typography, fonts }) => ({ +// Осознанный обход слоя components: цвет текста — семантическая роль, и своего +// токена у Typography нет (компонент отсутствует в tokens.json). +const styles = StyleSheet.create(({ primitive, semantic, fonts }) => ({ text: { - color: theme.General.textColor, + color: semantic.colorScheme.color.fg.default, fontFamily: fonts.primary, - fontWeight: 700, + fontWeight: primitive.fonts.fontWeight.bold, includeFontPadding: false, verticalAlign: 'middle', }, - d1: { fontSize: typography.Size['text-5xl'] }, - d2: { fontSize: typography.Size['text-4xl'] }, - d3: { fontSize: typography.Size['text-3xl'] }, - h1: { fontSize: typography.Size['text-2xl'] }, - h2: { fontSize: typography.Size['text-xl'] }, - h3: { fontSize: typography.Size['text-lg'] }, - h4: { fontSize: typography.Size['text-base'] }, - h5: { fontSize: typography.Size['text-sm'] }, - h6: { fontSize: typography.Size['text-xs'] }, + d1: { fontSize: primitive.fonts.fontSize[750] }, + d2: { fontSize: primitive.fonts.fontSize[700] }, + d3: { fontSize: primitive.fonts.fontSize[650] }, + h1: { fontSize: primitive.fonts.fontSize[600] }, + h2: { fontSize: primitive.fonts.fontSize[500] }, + h3: { fontSize: primitive.fonts.fontSize[400] }, + h4: { fontSize: primitive.fonts.fontSize[300] }, + h5: { fontSize: primitive.fonts.fontSize[100] }, + h6: { fontSize: primitive.fonts.fontSize[100] }, })) diff --git a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap index 53bf9367..1d37bed1 100644 --- a/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/src/components/Typography/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -17,13 +17,13 @@ exports[`Body component tests default props 1`] = ` style={ [ { - "color": "#1e76cd", + "color": "#4496e8", "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, @@ -82,22 +82,22 @@ exports[`Body component tests левая иконка, base, visited, testID = C onStartShouldSetResponder={[Function]} style={ { - "paddingRight": 7, + "paddingRight": 8, } } testID="AnchorLeftPressable" > @@ -15,16 +15,16 @@ exports[`Service component tests base = false, showIcon = false, variant = dange { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -39,7 +39,7 @@ exports[`Service component tests base = false, showIcon = false, variant = dange style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -49,16 +49,16 @@ exports[`Service component tests base = false, showIcon = false, variant = dange { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -73,7 +73,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -83,16 +83,16 @@ exports[`Service component tests base = false, showIcon = false, variant = help { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -107,7 +107,7 @@ exports[`Service component tests base = false, showIcon = false, variant = help style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -117,16 +117,16 @@ exports[`Service component tests base = false, showIcon = false, variant = help { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -141,7 +141,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -151,16 +151,16 @@ exports[`Service component tests base = false, showIcon = false, variant = info { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -175,7 +175,7 @@ exports[`Service component tests base = false, showIcon = false, variant = info style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -185,16 +185,16 @@ exports[`Service component tests base = false, showIcon = false, variant = info { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -209,7 +209,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -219,16 +219,16 @@ exports[`Service component tests base = false, showIcon = false, variant = succe { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -243,7 +243,7 @@ exports[`Service component tests base = false, showIcon = false, variant = succe style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -253,16 +253,16 @@ exports[`Service component tests base = false, showIcon = false, variant = succe { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -277,7 +277,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -287,16 +287,16 @@ exports[`Service component tests base = false, showIcon = false, variant = warni { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -311,7 +311,7 @@ exports[`Service component tests base = false, showIcon = false, variant = warni style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -321,16 +321,16 @@ exports[`Service component tests base = false, showIcon = false, variant = warni { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, false, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -345,21 +345,21 @@ exports[`Service component tests base = false, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 3.5, + "gap": 4, } } > @@ -2359,19 +2359,19 @@ exports[`Service component tests base = true, showIcon = false, variant = danger { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -2386,7 +2386,7 @@ exports[`Service component tests base = true, showIcon = false, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2396,19 +2396,19 @@ exports[`Service component tests base = true, showIcon = false, variant = danger { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#db3424", + "color": "#e85244", }, ] } @@ -2423,7 +2423,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 1 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2433,19 +2433,19 @@ exports[`Service component tests base = true, showIcon = false, variant = help 1 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -2460,7 +2460,7 @@ exports[`Service component tests base = true, showIcon = false, variant = help 2 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2470,19 +2470,19 @@ exports[`Service component tests base = true, showIcon = false, variant = help 2 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#9457ea", + "color": "#a855f7", }, ] } @@ -2497,7 +2497,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 1 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2507,19 +2507,19 @@ exports[`Service component tests base = true, showIcon = false, variant = info 1 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -2534,7 +2534,7 @@ exports[`Service component tests base = true, showIcon = false, variant = info 2 style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2544,19 +2544,19 @@ exports[`Service component tests base = true, showIcon = false, variant = info 2 { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#1e76cd", + "color": "#4496e8", }, ] } @@ -2571,7 +2571,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2581,19 +2581,19 @@ exports[`Service component tests base = true, showIcon = false, variant = succes { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -2608,7 +2608,7 @@ exports[`Service component tests base = true, showIcon = false, variant = succes style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2618,19 +2618,19 @@ exports[`Service component tests base = true, showIcon = false, variant = succes { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#168322", + "color": "#44e858", }, ] } @@ -2645,7 +2645,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2655,19 +2655,19 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2682,7 +2682,7 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > @@ -2692,19 +2692,19 @@ exports[`Service component tests base = true, showIcon = false, variant = warnin { "flexShrink": 1, "fontFamily": "Noto Sans", - "fontSize": 12.25, + "fontSize": 14, "fontWeight": 400, "includeFontPadding": false, - "letterSpacing": -0.25, - "lineHeight": 15, + "letterSpacing": -0.32, + "lineHeight": 18, "verticalAlign": "middle", }, { - "fontSize": 14, + "fontSize": 16, "lineHeight": undefined, }, { - "color": "#dc9710", + "color": "#f5b83d", }, ] } @@ -2719,21 +2719,21 @@ exports[`Service component tests base = true, showIcon = true, variant = danger style={ { "flexDirection": "row", - "gap": 7, + "gap": 8, } } > { expect(lightTheme.components).toBe(lightComponentTokens) expect(darkTheme.components).toBe(darkComponentTokens) }) + + test('шрифты берутся из токенов: primary — heading, secondary — base', () => { + const expected = { + primary: fontTokens.fontFamily.heading, + secondary: fontTokens.fontFamily.base, + } + + expect(lightTheme.fonts).toStrictEqual(expected) + expect(darkTheme.fonts).toStrictEqual(expected) + expect(lightTheme.fonts.primary).toBe('TT Fellows') + expect(lightTheme.fonts.secondary).toBe('Noto Sans') + }) + + test('шрифтовые примитивы доступны в теме', () => { + expect(lightTheme.primitive.fonts).toBe(fontTokens) + expect(darkTheme.primitive.fonts).toBe(fontTokens) + expect(lightTheme.primitive.fonts.fontSize[300]).toBe(16) + }) }) diff --git a/src/theme/assets/DEPRECATED_TOKENS.md b/src/theme/assets/DEPRECATED_TOKENS.md new file mode 100644 index 00000000..74376931 --- /dev/null +++ b/src/theme/assets/DEPRECATED_TOKENS.md @@ -0,0 +1,11 @@ +# Legacy-токены + +Токены ниже сохраняются в `assets`, пока они входят в публичные `lightTheme`, +`darkTheme` и `ThemeType`. Удалять их можно после миграции всех внутренних +потребителей и только как breaking change. + +| Миграция | Legacy-пути | Замена | Статус | +| --------------- | -------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------- | +| Button | `theme.Button.*` | `components.button` | Namespace ещё используется другими компонентами | +| InputSwitch | `theme.Form.inputSwitch.*`, `theme.custom.inputSwitch.*` | `components.toggleswitch` | Внутри UI Kit больше не используются, кандидаты на удаление | +| ProgressSpinner | `theme.General.primaryColor` | `components.progressspinner` | Общий токен ещё используется другими компонентами | diff --git a/src/theme/commonTheme.ts b/src/theme/commonTheme.ts index 8add2156..57f304ab 100644 --- a/src/theme/commonTheme.ts +++ b/src/theme/commonTheme.ts @@ -8,6 +8,12 @@ import { shadow } from './assets/shadow' import sizing from './assets/sizing.json' import spacing from './assets/spacing.json' import typography from './assets/typography.json' +import fontTokens from './tokens/fonts.json' +import type { FontPrimitives } from './types' + +// JSON отдаёт fontWeight как number, а TextStyle требует литеральный тип. +// Значения совпадают, различается только их представление в типах. +const fonts = fontTokens as FontPrimitives export const commonTheme = { background, @@ -20,4 +26,10 @@ export const commonTheme = { typography, custom: customCommon, shadow, + primitive: { fonts }, + // Публичный FontsConfig оперирует ролями primary/secondary, токены — base/heading. + fonts: { + primary: fonts.fontFamily.heading, + secondary: fonts.fontFamily.base, + }, } diff --git a/src/theme/darkTheme.ts b/src/theme/darkTheme.ts index aa8bf3f0..bae0c05f 100644 --- a/src/theme/darkTheme.ts +++ b/src/theme/darkTheme.ts @@ -12,5 +12,4 @@ export const darkTheme: ThemeType = { components: darkComponentTokens, theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark }, ...commonTheme, - fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, } diff --git a/src/theme/lightTheme.ts b/src/theme/lightTheme.ts index b91a6008..20d31b2d 100644 --- a/src/theme/lightTheme.ts +++ b/src/theme/lightTheme.ts @@ -12,5 +12,4 @@ export const lightTheme: ThemeType = { components: lightComponentTokens, theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight }, ...commonTheme, - fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, } diff --git a/src/theme/tokens/fonts.json b/src/theme/tokens/fonts.json new file mode 100644 index 00000000..bec6ffbc --- /dev/null +++ b/src/theme/tokens/fonts.json @@ -0,0 +1,45 @@ +{ + "fontFamily": { "base": "Noto Sans", "heading": "TT Fellows" }, + "fontWeight": { "regular": 400, "medium": 500, "demibold": 600, "bold": 700 }, + "fontSize": { + "100": 12, + "200": 14, + "300": 16, + "400": 18, + "500": 20, + "600": 24, + "650": 30, + "700": 36, + "750": 48, + "800": 60, + "900": 72, + "1000": 96 + }, + "lineHeight": { + "100": 12, + "150": 14, + "200": 14, + "250": 16, + "300": 18, + "350": 18, + "400": 20, + "450": 22, + "500": 24, + "550": 26, + "600": 28, + "700": 30, + "800": 36, + "850": 38, + "900": 44, + "1000": 54, + "none": 1, + "auto": "auto" + }, + "letterSpacing": { + "200": -0.32, + "400": -0.48, + "500": 0, + "600": 0.32, + "700": 0.48 + } +} diff --git a/src/theme/types.ts b/src/theme/types.ts index 7cc9d2dc..05bbdb7d 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -1,3 +1,5 @@ +import type { TextStyle } from 'react-native' + import type { InputSize } from './assets/InputSize' import type { ModalSize } from './assets/ModalSize' import type background from './assets/background.json' @@ -13,9 +15,12 @@ import type spacing from './assets/spacing.json' import type lightTheme from './assets/themeLight.json' import type typography from './assets/typography.json' import type lightComponentTokens from './tokens/components/light.json' +import type fontTokens from './tokens/fonts.json' import type lightSemanticTokens from './tokens/semantic/light.json' export interface ThemeType { + /** Шрифтовые примитивы из tokens.json: размеры, интерлиньяж, начертания. */ + primitive: { fonts: FontPrimitives } background: typeof background colors: { primary: typeof primaryColors } border: typeof border @@ -41,6 +46,17 @@ export enum ThemeVariant { Dark = 'Dark', } +/** + * Начертания в токенах — числа, а TextStyle требует литеральный тип, + * поэтому fontWeight переопределяется типом React Native. + */ +export type FontPrimitives = Omit & { + fontWeight: Record< + keyof typeof fontTokens.fontWeight, + TextStyle['fontWeight'] + > +} + export interface FontsConfig { primary: string secondary: string