-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1110 from VKCOM/qurle/feat/lego-theme
- Loading branch information
Showing
14 changed files
with
32,280 additions
and
16 deletions.
There are no files selected for viewing
30,738 changes: 30,738 additions & 0 deletions
30,738
src/build/__snapshots__/snapthots.test.ts.snap
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { ThemeCssVars } from '@/interfaces/general'; | ||
| import { | ||
| ColorDescription, | ||
| ColorsDescriptionStruct, | ||
| ColorWithStates, | ||
| } from '@/interfaces/general/colors'; | ||
| import { | ||
| LocalVkontakteAndroidColorsDescriptionStruct, | ||
| ThemeVkontakteAndroid, | ||
| ThemeVkontakteAndroidDescription, | ||
| } from '@/interfaces/themes/vkontakteAndroid'; | ||
|
|
||
| // Описание локальных цветов | ||
| export interface LocalLegoAndroidColorsDescriptionStruct { | ||
| colorStrokePrimary: ColorDescription; | ||
| } | ||
|
|
||
| // Резолв локальных цветов | ||
| export type LegoAndroidLocalColors = { | ||
| [key in keyof LocalLegoAndroidColorsDescriptionStruct]: ColorWithStates; | ||
| }; | ||
|
|
||
| // Эскпорт интерфейсов описанной + наследованной темы | ||
| export interface ThemeLegoAndroid extends ThemeVkontakteAndroid, LegoAndroidLocalColors {} | ||
| export interface ThemeLegoAndroidDescription extends ThemeVkontakteAndroidDescription { | ||
| colors: LocalLegoAndroidColorsDescriptionStruct & | ||
| LocalVkontakteAndroidColorsDescriptionStruct & | ||
| ColorsDescriptionStruct; | ||
| } | ||
| export interface ThemeLegoAndroidCssVars extends ThemeCssVars<ThemeLegoAndroid> {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| // Реэкспорт интерфейсов, так как набор переменных в тёмной теме такой же | ||
| export { | ||
| ThemeLegoAndroid as ThemeLegoAndroidDark, | ||
| ThemeLegoAndroidCssVars as ThemeLegoAndroidDarkCssVars, | ||
| ThemeLegoAndroidDescription as ThemeLegoAndroidDarkDescription, | ||
| } from '@/interfaces/themes/legoAndroid'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { ThemeCssVars } from '@/interfaces/general'; | ||
| import { | ||
| ColorDescription, | ||
| ColorsDescriptionStruct, | ||
| ColorWithStates, | ||
| } from '@/interfaces/general/colors'; | ||
| import { ThemeVkIOS, ThemeVkIOSDescription } from '@/interfaces/themes/vkIOS'; | ||
|
|
||
| // Описание локальных цветов | ||
| export interface LocalLegoIOSColorsDescriptionStruct { | ||
| colorStrokePrimary: ColorDescription; | ||
| } | ||
|
|
||
| // Резолв локальных цветов | ||
| export type LegoIOSLocalColors = { | ||
| [key in keyof LocalLegoIOSColorsDescriptionStruct]: ColorWithStates; | ||
| }; | ||
|
|
||
| // Эскпорт интерфейсов описанной + наследованной темы | ||
| export interface ThemeLegoIOS extends ThemeVkIOS, LegoIOSLocalColors {} | ||
| export interface ThemeLegoIOSDescription extends ThemeVkIOSDescription { | ||
| colors: LocalLegoIOSColorsDescriptionStruct & ColorsDescriptionStruct; | ||
| } | ||
| export interface ThemeLegoIOSCssVars extends ThemeCssVars<ThemeLegoIOS> {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export { | ||
| ThemeLegoIOS as ThemeLegoIOSDark, | ||
| ThemeLegoIOSCssVars as ThemeLegoIOSDarkCssVars, | ||
| ThemeLegoIOSDescription as ThemeLegoIOSDarkDescription, | ||
| } from '@/interfaces/themes/legoIOS'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,5 @@ | ||
| import { | ||
| ThemeVkontakteAndroid, | ||
| ThemeVkontakteAndroidCssVars, | ||
| ThemeVkontakteAndroidDescription, | ||
| export { | ||
| ThemeVkontakteAndroid as ThemeVkontakteIOS, | ||
| ThemeVkontakteAndroidCssVars as ThemeVkontakteIOSCssVars, | ||
| ThemeVkontakteAndroidDescription as ThemeVkontakteIOSDescription, | ||
| } from '@/interfaces/themes/vkontakteAndroid'; | ||
|
|
||
| export type ThemeVkontakteIOS = ThemeVkontakteAndroid; | ||
| export type ThemeVkontakteIOSDescription = ThemeVkontakteAndroidDescription; | ||
| export type ThemeVkontakteIOSCssVars = ThemeVkontakteAndroidCssVars; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,5 @@ | ||
| import { | ||
| ThemeVkontakteIOS, | ||
| ThemeVkontakteIOSCssVars, | ||
| ThemeVkontakteIOSDescription, | ||
| export { | ||
| ThemeVkontakteIOS as ThemeVkontakteIOSDark, | ||
| ThemeVkontakteIOSCssVars as ThemeVkontakteIOSDarkCssVars, | ||
| ThemeVkontakteIOSDescription as ThemeVkontakteIOSDarkDescription, | ||
| } from '@/interfaces/themes/vkontakteIOS'; | ||
|
|
||
| export type ThemeVkontakteIOSDark = ThemeVkontakteIOS; | ||
| export type ThemeVkontakteIOSDarkDescription = ThemeVkontakteIOSDescription; | ||
| export type ThemeVkontakteIOSDarkCssVars = ThemeVkontakteIOSCssVars; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { ThemeLegoAndroidDescription } from '@/interfaces/themes/legoAndroid'; | ||
| import { ThemeLegoAndroidDarkDescription } from '@/interfaces/themes/legoAndroidDark'; | ||
| import { | ||
| vkontakteAndroidTheme, | ||
| vkontakteAndroidThemeDark, | ||
| } from '@/themeDescriptions/themes/vkontakteAndroid'; | ||
|
|
||
| import figma from './figma.json'; | ||
| import { overwriteFromFigmaJSON } from './helpers/overwriteFromFigmaJSON'; | ||
|
|
||
| export const legoAndroidTheme: ThemeLegoAndroidDescription = { | ||
| ...vkontakteAndroidTheme, // импорт светлой базовой темы | ||
|
|
||
| themeName: 'legoAndroid', // название текущей темы | ||
| themeNameBase: 'legoAndroid', // название светлой (базовой) темы | ||
| themeInheritsFrom: 'vkontakteAndroid', // название родительской темы | ||
|
|
||
| colors: { | ||
| // Импорт изначальных токенов | ||
| ...vkontakteAndroidTheme.colors, | ||
| // Переопределение токенов, которые есть в figma.json | ||
| ...overwriteFromFigmaJSON(vkontakteAndroidTheme.colors, 'appearance', 'light', figma), | ||
| // Здесь нужно прописать другие цвета с особыми различиями нейминга | ||
| // А также локальные цвета, используемые только в этой теме | ||
| // Или цвета, которые не выгружаются из фигмы, но переопределяются в этой теме | ||
| colorStrokePrimary: figma.appearance.strokePrimary.light, | ||
| }, | ||
| // Изменённые не-цвета | ||
| sizeBasePaddingHorizontal: { | ||
| regular: figma.tokens.sizeBasePaddingHorizontal.android, | ||
| }, | ||
| // Фигма использует целые проценты, а не сотые единицы | ||
| // Поэтому здесь нужно поделить на 100 | ||
| // Округление пока не стал писать | ||
| opacityDisable: figma.tokens.opacityDisabled.android / 100, | ||
| opacityDisableAccessibility: figma.tokens.opacityDisabled.android / 100, | ||
| }; | ||
|
|
||
| export const legoAndroidThemeDark: ThemeLegoAndroidDarkDescription = { | ||
| ...legoAndroidTheme, // Импорт светлой версии текущей темы, | ||
| ...vkontakteAndroidThemeDark, // Импорт тёмной базовой темы | ||
|
|
||
| themeName: 'legoAndroidDark', // название текущей темы | ||
| themeNameBase: 'legoAndroid', // название светлой (базовой) темы | ||
| themeInheritsFrom: 'vkontakteAndroidDark', // название родительской темы | ||
| colorsScheme: 'dark', // название схемы (светлая — по умолчанию) | ||
|
|
||
| colors: { | ||
| ...vkontakteAndroidThemeDark.colors, | ||
| // Переопределение токенов, которые есть в figma.json | ||
| // То же самое, что в светлой теме, но ссылаемся на figmaToken.dark вместо light | ||
| ...overwriteFromFigmaJSON(vkontakteAndroidTheme.colors, 'appearance', 'dark', figma), | ||
| // Здесь нужно прописать другие цвета с особыми различиями нейминга | ||
| // А также локальные цвета, используемые только в этой теме | ||
| // Или цвета, которые не выгружаются из фигмы, но переопределяются в этой теме | ||
| colorStrokePrimary: figma.appearance.strokePrimary.dark, | ||
| }, | ||
| }; |
Oops, something went wrong.