From 91da09172e43cec6f2a8c2e6bc0b36ba96ef16db Mon Sep 17 00:00:00 2001 From: "g.andrievskii" Date: Thu, 21 Jul 2022 15:16:04 +0300 Subject: [PATCH] vkui search theme typography update --- .../__snapshots__/snapthots.test.ts.snap | 232 +++++++++++++----- src/interfaces/themes/search/index.ts | 6 +- src/themeDescriptions/themes/search/index.ts | 6 +- 3 files changed, 178 insertions(+), 66 deletions(-) diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap index 4230f5cf..101864f6 100644 --- a/src/build/__snapshots__/snapthots.test.ts.snap +++ b/src/build/__snapshots__/snapthots.test.ts.snap @@ -194513,6 +194513,44 @@ Object { }, }, }, + "searchFontSearchExtraHeadline": Object { + "auto": Object { + "fontFamily": Object { + "name": "--vkui--search_font_search_extra_headline--font_family", + "value": "var(--vkui--search_font_search_extra_headline--font_family)", + }, + "fontSize": Object { + "name": "--vkui--search_font_search_extra_headline--font_size", + "value": "var(--vkui--search_font_search_extra_headline--font_size)", + }, + "fontWeight": Object { + "name": "--vkui--search_font_search_extra_headline--font_weight", + "value": "var(--vkui--search_font_search_extra_headline--font_weight)", + }, + "lineHeight": Object { + "name": "--vkui--search_font_search_extra_headline--line_height", + "value": "var(--vkui--search_font_search_extra_headline--line_height)", + }, + }, + "regular": Object { + "fontFamily": Object { + "name": "--vkui--search_font_search_extra_headline--font_family--regular", + "value": "var(--vkui--search_font_search_extra_headline--font_family--regular, Arial, sans-serif)", + }, + "fontSize": Object { + "name": "--vkui--search_font_search_extra_headline--font_size--regular", + "value": "var(--vkui--search_font_search_extra_headline--font_size--regular, 24px)", + }, + "fontWeight": Object { + "name": "--vkui--search_font_search_extra_headline--font_weight--regular", + "value": "var(--vkui--search_font_search_extra_headline--font_weight--regular, 700)", + }, + "lineHeight": Object { + "name": "--vkui--search_font_search_extra_headline--line_height--regular", + "value": "var(--vkui--search_font_search_extra_headline--line_height--regular, 28px)", + }, + }, + }, "searchFontSearchFootnoteBold": Object { "auto": Object { "fontFamily": Object { @@ -194628,80 +194666,114 @@ Object { }, }, "searchFontSearchTextBold": Object { - "compact": Object { + "auto": Object { "fontFamily": Object { - "name": "--vkui--search_font_search_text_bold--compact--font_family", - "value": "var(--vkui--search_font_search_text_bold--compact--font_family, Arial, sans-serif)", + "name": "--vkui--search_font_search_text_bold--font_family", + "value": "var(--vkui--search_font_search_text_bold--font_family)", }, "fontSize": Object { - "name": "--vkui--search_font_search_text_bold--compact--font_size", - "value": "var(--vkui--search_font_search_text_bold--compact--font_size, 15px)", + "name": "--vkui--search_font_search_text_bold--font_size", + "value": "var(--vkui--search_font_search_text_bold--font_size)", }, "fontWeight": Object { - "name": "--vkui--search_font_search_text_bold--compact--font_weight", - "value": "var(--vkui--search_font_search_text_bold--compact--font_weight, 700)", + "name": "--vkui--search_font_search_text_bold--font_weight", + "value": "var(--vkui--search_font_search_text_bold--font_weight)", }, "lineHeight": Object { - "name": "--vkui--search_font_search_text_bold--compact--line_height", - "value": "var(--vkui--search_font_search_text_bold--compact--line_height, 20px)", + "name": "--vkui--search_font_search_text_bold--line_height", + "value": "var(--vkui--search_font_search_text_bold--line_height)", }, }, - }, - "searchFontSearchTextMailSans": Object { "compact": Object { "fontFamily": Object { - "name": "--vkui--search_font_search_text_mail_sans--compact--font_family", - "value": "var(--vkui--search_font_search_text_mail_sans--compact--font_family, Arial, sans-serif)", + "name": "--vkui--search_font_search_text_bold--font_family--compact", + "value": "var(--vkui--search_font_search_text_bold--font_family--compact, Arial, sans-serif)", + }, + "fontSize": Object { + "name": "--vkui--search_font_search_text_bold--font_size--compact", + "value": "var(--vkui--search_font_search_text_bold--font_size--compact, 15px)", + }, + "fontWeight": Object { + "name": "--vkui--search_font_search_text_bold--font_weight--compact", + "value": "var(--vkui--search_font_search_text_bold--font_weight--compact, 700)", + }, + "lineHeight": Object { + "name": "--vkui--search_font_search_text_bold--line_height--compact", + "value": "var(--vkui--search_font_search_text_bold--line_height--compact, 20px)", + }, + }, + "regular": Object { + "fontFamily": Object { + "name": "--vkui--search_font_search_text_bold--font_family--regular", + "value": "var(--vkui--search_font_search_text_bold--font_family--regular, Helvetica, Arial, sans-serif)", }, "fontSize": Object { - "name": "--vkui--search_font_search_text_mail_sans--compact--font_size", - "value": "var(--vkui--search_font_search_text_mail_sans--compact--font_size, 15px)", + "name": "--vkui--search_font_search_text_bold--font_size--regular", + "value": "var(--vkui--search_font_search_text_bold--font_size--regular, 16px)", }, "fontWeight": Object { - "name": "--vkui--search_font_search_text_mail_sans--compact--font_weight", - "value": "var(--vkui--search_font_search_text_mail_sans--compact--font_weight, 400)", + "name": "--vkui--search_font_search_text_bold--font_weight--regular", + "value": "var(--vkui--search_font_search_text_bold--font_weight--regular, 400)", }, "lineHeight": Object { - "name": "--vkui--search_font_search_text_mail_sans--compact--line_height", - "value": "var(--vkui--search_font_search_text_mail_sans--compact--line_height, 20px)", + "name": "--vkui--search_font_search_text_bold--line_height--regular", + "value": "var(--vkui--search_font_search_text_bold--line_height--regular, 20px)", }, }, }, - "searchFontSearchTitle1": Object { + "searchFontSearchTextMailSans": Object { "auto": Object { "fontFamily": Object { - "name": "--vkui--search_font_search_title1--font_family", - "value": "var(--vkui--search_font_search_title1--font_family)", + "name": "--vkui--search_font_search_text_mail_sans--font_family", + "value": "var(--vkui--search_font_search_text_mail_sans--font_family)", }, "fontSize": Object { - "name": "--vkui--search_font_search_title1--font_size", - "value": "var(--vkui--search_font_search_title1--font_size)", + "name": "--vkui--search_font_search_text_mail_sans--font_size", + "value": "var(--vkui--search_font_search_text_mail_sans--font_size)", }, "fontWeight": Object { - "name": "--vkui--search_font_search_title1--font_weight", - "value": "var(--vkui--search_font_search_title1--font_weight)", + "name": "--vkui--search_font_search_text_mail_sans--font_weight", + "value": "var(--vkui--search_font_search_text_mail_sans--font_weight)", }, "lineHeight": Object { - "name": "--vkui--search_font_search_title1--line_height", - "value": "var(--vkui--search_font_search_title1--line_height)", + "name": "--vkui--search_font_search_text_mail_sans--line_height", + "value": "var(--vkui--search_font_search_text_mail_sans--line_height)", + }, + }, + "compact": Object { + "fontFamily": Object { + "name": "--vkui--search_font_search_text_mail_sans--font_family--compact", + "value": "var(--vkui--search_font_search_text_mail_sans--font_family--compact, Arial, sans-serif)", + }, + "fontSize": Object { + "name": "--vkui--search_font_search_text_mail_sans--font_size--compact", + "value": "var(--vkui--search_font_search_text_mail_sans--font_size--compact, 15px)", + }, + "fontWeight": Object { + "name": "--vkui--search_font_search_text_mail_sans--font_weight--compact", + "value": "var(--vkui--search_font_search_text_mail_sans--font_weight--compact, 400)", + }, + "lineHeight": Object { + "name": "--vkui--search_font_search_text_mail_sans--line_height--compact", + "value": "var(--vkui--search_font_search_text_mail_sans--line_height--compact, 20px)", }, }, "regular": Object { "fontFamily": Object { - "name": "--vkui--search_font_search_title1--font_family--regular", - "value": "var(--vkui--search_font_search_title1--font_family--regular, Arial, sans-serif)", + "name": "--vkui--search_font_search_text_mail_sans--font_family--regular", + "value": "var(--vkui--search_font_search_text_mail_sans--font_family--regular, Helvetica, Arial, sans-serif)", }, "fontSize": Object { - "name": "--vkui--search_font_search_title1--font_size--regular", - "value": "var(--vkui--search_font_search_title1--font_size--regular, 24px)", + "name": "--vkui--search_font_search_text_mail_sans--font_size--regular", + "value": "var(--vkui--search_font_search_text_mail_sans--font_size--regular, 16px)", }, "fontWeight": Object { - "name": "--vkui--search_font_search_title1--font_weight--regular", - "value": "var(--vkui--search_font_search_title1--font_weight--regular, 700)", + "name": "--vkui--search_font_search_text_mail_sans--font_weight--regular", + "value": "var(--vkui--search_font_search_text_mail_sans--font_weight--regular, 400)", }, "lineHeight": Object { - "name": "--vkui--search_font_search_title1--line_height--regular", - "value": "var(--vkui--search_font_search_title1--line_height--regular, 28px)", + "name": "--vkui--search_font_search_text_mail_sans--line_height--regular", + "value": "var(--vkui--search_font_search_text_mail_sans--line_height--regular, 20px)", }, }, }, @@ -196851,6 +196923,14 @@ Object { "lineHeight": "16px", }, }, + "searchFontSearchExtraHeadline": Object { + "regular": Object { + "fontFamily": "Arial, sans-serif", + "fontSize": "24px", + "fontWeight": 700, + "lineHeight": "28px", + }, + }, "searchFontSearchFootnoteBold": Object { "regular": Object { "fontFamily": "Arial, sans-serif", @@ -196882,6 +196962,12 @@ Object { "fontWeight": 700, "lineHeight": "20px", }, + "regular": Object { + "fontFamily": "Helvetica, Arial, sans-serif", + "fontSize": "16px", + "fontWeight": 400, + "lineHeight": "20px", + }, }, "searchFontSearchTextMailSans": Object { "compact": Object { @@ -196890,13 +196976,11 @@ Object { "fontWeight": 400, "lineHeight": "20px", }, - }, - "searchFontSearchTitle1": Object { "regular": Object { - "fontFamily": "Arial, sans-serif", - "fontSize": "24px", - "fontWeight": 700, - "lineHeight": "28px", + "fontFamily": "Helvetica, Arial, sans-serif", + "fontSize": "16px", + "fontWeight": 400, + "lineHeight": "20px", }, }, "searchFontSearchTitle4": Object { @@ -198057,6 +198141,14 @@ Object { "lineHeight": "var(--vkui--search_font_search_caption2_mail_sans--line_height--regular, 16px)", }, }, + "searchFontSearchExtraHeadline": Object { + "regular": Object { + "fontFamily": "var(--vkui--search_font_search_extra_headline--font_family--regular, Arial, sans-serif)", + "fontSize": "var(--vkui--search_font_search_extra_headline--font_size--regular, 24px)", + "fontWeight": "var(--vkui--search_font_search_extra_headline--font_weight--regular, 700)", + "lineHeight": "var(--vkui--search_font_search_extra_headline--line_height--regular, 28px)", + }, + }, "searchFontSearchFootnoteBold": Object { "regular": Object { "fontFamily": "var(--vkui--search_font_search_footnote_bold--font_family--regular, Arial, sans-serif)", @@ -198083,26 +198175,30 @@ Object { }, "searchFontSearchTextBold": Object { "compact": Object { - "fontFamily": "var(--vkui--search_font_search_text_bold--compact--font_family, Arial, sans-serif)", - "fontSize": "var(--vkui--search_font_search_text_bold--compact--font_size, 15px)", - "fontWeight": "var(--vkui--search_font_search_text_bold--compact--font_weight, 700)", - "lineHeight": "var(--vkui--search_font_search_text_bold--compact--line_height, 20px)", + "fontFamily": "var(--vkui--search_font_search_text_bold--font_family--compact, Arial, sans-serif)", + "fontSize": "var(--vkui--search_font_search_text_bold--font_size--compact, 15px)", + "fontWeight": "var(--vkui--search_font_search_text_bold--font_weight--compact, 700)", + "lineHeight": "var(--vkui--search_font_search_text_bold--line_height--compact, 20px)", + }, + "regular": Object { + "fontFamily": "var(--vkui--search_font_search_text_bold--font_family--regular, Helvetica, Arial, sans-serif)", + "fontSize": "var(--vkui--search_font_search_text_bold--font_size--regular, 16px)", + "fontWeight": "var(--vkui--search_font_search_text_bold--font_weight--regular, 400)", + "lineHeight": "var(--vkui--search_font_search_text_bold--line_height--regular, 20px)", }, }, "searchFontSearchTextMailSans": Object { "compact": Object { - "fontFamily": "var(--vkui--search_font_search_text_mail_sans--compact--font_family, Arial, sans-serif)", - "fontSize": "var(--vkui--search_font_search_text_mail_sans--compact--font_size, 15px)", - "fontWeight": "var(--vkui--search_font_search_text_mail_sans--compact--font_weight, 400)", - "lineHeight": "var(--vkui--search_font_search_text_mail_sans--compact--line_height, 20px)", + "fontFamily": "var(--vkui--search_font_search_text_mail_sans--font_family--compact, Arial, sans-serif)", + "fontSize": "var(--vkui--search_font_search_text_mail_sans--font_size--compact, 15px)", + "fontWeight": "var(--vkui--search_font_search_text_mail_sans--font_weight--compact, 400)", + "lineHeight": "var(--vkui--search_font_search_text_mail_sans--line_height--compact, 20px)", }, - }, - "searchFontSearchTitle1": Object { "regular": Object { - "fontFamily": "var(--vkui--search_font_search_title1--font_family--regular, Arial, sans-serif)", - "fontSize": "var(--vkui--search_font_search_title1--font_size--regular, 24px)", - "fontWeight": "var(--vkui--search_font_search_title1--font_weight--regular, 700)", - "lineHeight": "var(--vkui--search_font_search_title1--line_height--regular, 28px)", + "fontFamily": "var(--vkui--search_font_search_text_mail_sans--font_family--regular, Helvetica, Arial, sans-serif)", + "fontSize": "var(--vkui--search_font_search_text_mail_sans--font_size--regular, 16px)", + "fontWeight": "var(--vkui--search_font_search_text_mail_sans--font_weight--regular, 400)", + "lineHeight": "var(--vkui--search_font_search_text_mail_sans--line_height--regular, 20px)", }, }, "searchFontSearchTitle4": Object { @@ -199263,6 +199359,14 @@ Object { "lineHeight": 16, }, }, + "searchFontSearchExtraHeadline": Object { + "regular": Object { + "fontFamily": "Arial, sans-serif", + "fontSize": 24, + "fontWeight": 700, + "lineHeight": 28, + }, + }, "searchFontSearchFootnoteBold": Object { "regular": Object { "fontFamily": "Arial, sans-serif", @@ -199294,6 +199398,12 @@ Object { "fontWeight": 700, "lineHeight": 20, }, + "regular": Object { + "fontFamily": "Helvetica, Arial, sans-serif", + "fontSize": 16, + "fontWeight": 400, + "lineHeight": 20, + }, }, "searchFontSearchTextMailSans": Object { "compact": Object { @@ -199302,13 +199412,11 @@ Object { "fontWeight": 400, "lineHeight": 20, }, - }, - "searchFontSearchTitle1": Object { "regular": Object { - "fontFamily": "Arial, sans-serif", - "fontSize": 24, - "fontWeight": 700, - "lineHeight": 28, + "fontFamily": "Helvetica, Arial, sans-serif", + "fontSize": 16, + "fontWeight": 400, + "lineHeight": 20, }, }, "searchFontSearchTitle4": Object { diff --git a/src/interfaces/themes/search/index.ts b/src/interfaces/themes/search/index.ts index 2f49bf0c..0e772200 100644 --- a/src/interfaces/themes/search/index.ts +++ b/src/interfaces/themes/search/index.ts @@ -28,7 +28,7 @@ export type SearchLocalElevations = { }; export type SearchLocalFonts = { - searchFontSearchTitle1: Adaptive; + searchFontSearchExtraHeadline: Adaptive; searchFontSearchTitle4: Adaptive; searchFontSearchTitle4Bold: Adaptive; searchFontSearchSubheadBold: Adaptive; @@ -37,8 +37,8 @@ export type SearchLocalFonts = { searchFontSearchCaption1Bold: Adaptive; searchFontSearchCaption1MailSans: Adaptive; searchFontSearchCaption2MailSans: Adaptive; - searchFontSearchTextBold: Partial>; - searchFontSearchTextMailSans: Partial>; + searchFontSearchTextBold: Adaptive; + searchFontSearchTextMailSans: Adaptive; }; export interface LocalSearchColorsDescriptionStruct { diff --git a/src/themeDescriptions/themes/search/index.ts b/src/themeDescriptions/themes/search/index.ts index c93532f7..faa941ef 100644 --- a/src/themeDescriptions/themes/search/index.ts +++ b/src/themeDescriptions/themes/search/index.ts @@ -1,3 +1,5 @@ +import {Adaptive} from '@/interfaces/general/tools'; +import {Font} from '@/interfaces/general/typography'; import {ThemeSearchDescription} from '@/interfaces/themes/search'; import {lightTheme} from '@/themeDescriptions/base/paradigm'; @@ -31,7 +33,7 @@ export const searchTheme: ThemeSearchDescription = { sizeBorderRadius: { regular: 8, }, - searchFontSearchTitle1: { + searchFontSearchExtraHeadline: { regular: { fontSize: 24, lineHeight: 28, @@ -104,6 +106,7 @@ export const searchTheme: ThemeSearchDescription = { }, }, searchFontSearchTextBold: { + ...(lightTheme.fontText as Adaptive), compact: { fontSize: 15, lineHeight: 20, @@ -112,6 +115,7 @@ export const searchTheme: ThemeSearchDescription = { }, }, searchFontSearchTextMailSans: { + ...(lightTheme.fontText as Adaptive), compact: { fontSize: 15, lineHeight: 20,