diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap index ee906c96..153f0cd8 100644 --- a/src/build/__snapshots__/snapthots.test.ts.snap +++ b/src/build/__snapshots__/snapthots.test.ts.snap @@ -90010,7 +90010,7 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` }, "elevation3": { "name": "--vkui--elevation3", - "value": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "value": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 16, 61, 0.28))", }, "elevation4": { "name": "--vkui--elevation4", @@ -92985,9 +92985,13 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_large_height", "value": "var(--vkui--size_button_large_height)", }, + "compact": { + "name": "--vkui--size_button_large_height--compact", + "value": "var(--vkui--size_button_large_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_button_large_height--regular", - "value": "var(--vkui--size_button_large_height--regular, 48px)", + "value": "var(--vkui--size_button_large_height--regular, 44px)", }, }, "sizeButtonMediumHeight": { @@ -92995,9 +92999,13 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_medium_height", "value": "var(--vkui--size_button_medium_height)", }, + "compact": { + "name": "--vkui--size_button_medium_height--compact", + "value": "var(--vkui--size_button_medium_height--compact, 32px)", + }, "regular": { "name": "--vkui--size_button_medium_height--regular", - "value": "var(--vkui--size_button_medium_height--regular, 40px)", + "value": "var(--vkui--size_button_medium_height--regular, 36px)", }, }, "sizeButtonMinimumWidth": { @@ -93065,9 +93073,13 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_small_height", "value": "var(--vkui--size_button_small_height)", }, + "compact": { + "name": "--vkui--size_button_small_height--compact", + "value": "var(--vkui--size_button_small_height--compact, 28px)", + }, "regular": { "name": "--vkui--size_button_small_height--regular", - "value": "var(--vkui--size_button_small_height--regular, 36px)", + "value": "var(--vkui--size_button_small_height--regular, 30px)", }, }, "sizeButtonTertiaryLargePaddingHorizontal": { @@ -93253,9 +93265,13 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_field_height", "value": "var(--vkui--size_field_height)", }, + "compact": { + "name": "--vkui--size_field_height--compact", + "value": "var(--vkui--size_field_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_field_height--regular", - "value": "var(--vkui--size_field_height--regular, 48px)", + "value": "var(--vkui--size_field_height--regular, 44px)", }, }, "sizeFieldHorizontalMargin": { @@ -94859,7 +94875,7 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 16, 61, 0.28)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -95578,10 +95594,12 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "regular": "20px", }, "sizeButtonLargeHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeButtonMediumHeight": { - "regular": "40px", + "compact": "32px", + "regular": "36px", }, "sizeButtonMinimumWidth": { "regular": "80px", @@ -95602,7 +95620,8 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -95658,7 +95677,8 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -96703,7 +96723,7 @@ exports[`shapshots media theme should match pseudo theme from CssVars 1`] = ` "elevation1": "var(--vkui--elevation1, 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation1InvertY": "var(--vkui--elevation1_invert_y, 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation2": "var(--vkui--elevation2, 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06))", - "elevation3": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "elevation3": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 16, 61, 0.28))", "elevation4": "var(--vkui--elevation4, 0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16))", "fontCaption1": { "regular": { @@ -97422,10 +97442,12 @@ exports[`shapshots media theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_button_icon_padding--regular, 20px)", }, "sizeButtonLargeHeight": { - "regular": "var(--vkui--size_button_large_height--regular, 48px)", + "compact": "var(--vkui--size_button_large_height--compact, 36px)", + "regular": "var(--vkui--size_button_large_height--regular, 44px)", }, "sizeButtonMediumHeight": { - "regular": "var(--vkui--size_button_medium_height--regular, 40px)", + "compact": "var(--vkui--size_button_medium_height--compact, 32px)", + "regular": "var(--vkui--size_button_medium_height--regular, 36px)", }, "sizeButtonMinimumWidth": { "regular": "var(--vkui--size_button_minimum_width--regular, 80px)", @@ -97446,7 +97468,8 @@ exports[`shapshots media theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_button_slider_width_pointer--regular, 16px)", }, "sizeButtonSmallHeight": { - "regular": "var(--vkui--size_button_small_height--regular, 36px)", + "compact": "var(--vkui--size_button_small_height--compact, 28px)", + "regular": "var(--vkui--size_button_small_height--regular, 30px)", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "var(--vkui--size_button_tertiary_large_padding_horizontal--regular, 16px)", @@ -97502,7 +97525,8 @@ exports[`shapshots media theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_dot_indicate--regular, 8px)", }, "sizeFieldHeight": { - "regular": "var(--vkui--size_field_height--regular, 48px)", + "compact": "var(--vkui--size_field_height--compact, 36px)", + "regular": "var(--vkui--size_field_height--regular, 44px)", }, "sizeFieldHorizontalMargin": { "compact": "var(--vkui--size_field_horizontal_margin--compact, 16px)", @@ -98547,7 +98571,7 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 16, 61, 0.28)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -99266,10 +99290,12 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "regular": 20, }, "sizeButtonLargeHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeButtonMediumHeight": { - "regular": 40, + "compact": 32, + "regular": 36, }, "sizeButtonMinimumWidth": { "regular": 80, @@ -99290,7 +99316,8 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -99346,7 +99373,8 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, @@ -101842,7 +101870,7 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` }, "elevation3": { "name": "--vkui--elevation3", - "value": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "value": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 0, 0, 0.40))", }, "elevation4": { "name": "--vkui--elevation4", @@ -104817,9 +104845,13 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_large_height", "value": "var(--vkui--size_button_large_height)", }, + "compact": { + "name": "--vkui--size_button_large_height--compact", + "value": "var(--vkui--size_button_large_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_button_large_height--regular", - "value": "var(--vkui--size_button_large_height--regular, 48px)", + "value": "var(--vkui--size_button_large_height--regular, 44px)", }, }, "sizeButtonMediumHeight": { @@ -104827,9 +104859,13 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_medium_height", "value": "var(--vkui--size_button_medium_height)", }, + "compact": { + "name": "--vkui--size_button_medium_height--compact", + "value": "var(--vkui--size_button_medium_height--compact, 32px)", + }, "regular": { "name": "--vkui--size_button_medium_height--regular", - "value": "var(--vkui--size_button_medium_height--regular, 40px)", + "value": "var(--vkui--size_button_medium_height--regular, 36px)", }, }, "sizeButtonMinimumWidth": { @@ -104897,9 +104933,13 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_small_height", "value": "var(--vkui--size_button_small_height)", }, + "compact": { + "name": "--vkui--size_button_small_height--compact", + "value": "var(--vkui--size_button_small_height--compact, 28px)", + }, "regular": { "name": "--vkui--size_button_small_height--regular", - "value": "var(--vkui--size_button_small_height--regular, 36px)", + "value": "var(--vkui--size_button_small_height--regular, 30px)", }, }, "sizeButtonTertiaryLargePaddingHorizontal": { @@ -105085,9 +105125,13 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_field_height", "value": "var(--vkui--size_field_height)", }, + "compact": { + "name": "--vkui--size_field_height--compact", + "value": "var(--vkui--size_field_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_field_height--regular", - "value": "var(--vkui--size_field_height--regular, 48px)", + "value": "var(--vkui--size_field_height--regular, 44px)", }, }, "sizeFieldHorizontalMargin": { @@ -106691,7 +106735,7 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 0, 0, 0.40)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -107410,10 +107454,12 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "regular": "20px", }, "sizeButtonLargeHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeButtonMediumHeight": { - "regular": "40px", + "compact": "32px", + "regular": "36px", }, "sizeButtonMinimumWidth": { "regular": "80px", @@ -107434,7 +107480,8 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -107490,7 +107537,8 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -108535,7 +108583,7 @@ exports[`shapshots mediaDark theme should match pseudo theme from CssVars 1`] = "elevation1": "var(--vkui--elevation1, 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation1InvertY": "var(--vkui--elevation1_invert_y, 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation2": "var(--vkui--elevation2, 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06))", - "elevation3": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "elevation3": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 0, 0, 0.40))", "elevation4": "var(--vkui--elevation4, 0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16))", "fontCaption1": { "regular": { @@ -109254,10 +109302,12 @@ exports[`shapshots mediaDark theme should match pseudo theme from CssVars 1`] = "regular": "var(--vkui--size_button_icon_padding--regular, 20px)", }, "sizeButtonLargeHeight": { - "regular": "var(--vkui--size_button_large_height--regular, 48px)", + "compact": "var(--vkui--size_button_large_height--compact, 36px)", + "regular": "var(--vkui--size_button_large_height--regular, 44px)", }, "sizeButtonMediumHeight": { - "regular": "var(--vkui--size_button_medium_height--regular, 40px)", + "compact": "var(--vkui--size_button_medium_height--compact, 32px)", + "regular": "var(--vkui--size_button_medium_height--regular, 36px)", }, "sizeButtonMinimumWidth": { "regular": "var(--vkui--size_button_minimum_width--regular, 80px)", @@ -109278,7 +109328,8 @@ exports[`shapshots mediaDark theme should match pseudo theme from CssVars 1`] = "regular": "var(--vkui--size_button_slider_width_pointer--regular, 16px)", }, "sizeButtonSmallHeight": { - "regular": "var(--vkui--size_button_small_height--regular, 36px)", + "compact": "var(--vkui--size_button_small_height--compact, 28px)", + "regular": "var(--vkui--size_button_small_height--regular, 30px)", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "var(--vkui--size_button_tertiary_large_padding_horizontal--regular, 16px)", @@ -109334,7 +109385,8 @@ exports[`shapshots mediaDark theme should match pseudo theme from CssVars 1`] = "regular": "var(--vkui--size_dot_indicate--regular, 8px)", }, "sizeFieldHeight": { - "regular": "var(--vkui--size_field_height--regular, 48px)", + "compact": "var(--vkui--size_field_height--compact, 36px)", + "regular": "var(--vkui--size_field_height--regular, 44px)", }, "sizeFieldHorizontalMargin": { "compact": "var(--vkui--size_field_horizontal_margin--compact, 16px)", @@ -110379,7 +110431,7 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 0, 0, 0.40)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -111098,10 +111150,12 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "regular": 20, }, "sizeButtonLargeHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeButtonMediumHeight": { - "regular": 40, + "compact": 32, + "regular": 36, }, "sizeButtonMinimumWidth": { "regular": 80, @@ -111122,7 +111176,8 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -111178,7 +111233,8 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, @@ -113688,7 +113744,7 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` }, "elevation3": { "name": "--vkui--elevation3", - "value": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "value": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 16, 61, 0.28))", }, "elevation4": { "name": "--vkui--elevation4", @@ -116663,9 +116719,13 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_large_height", "value": "var(--vkui--size_button_large_height)", }, + "compact": { + "name": "--vkui--size_button_large_height--compact", + "value": "var(--vkui--size_button_large_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_button_large_height--regular", - "value": "var(--vkui--size_button_large_height--regular, 48px)", + "value": "var(--vkui--size_button_large_height--regular, 44px)", }, }, "sizeButtonMediumHeight": { @@ -116673,9 +116733,13 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_medium_height", "value": "var(--vkui--size_button_medium_height)", }, + "compact": { + "name": "--vkui--size_button_medium_height--compact", + "value": "var(--vkui--size_button_medium_height--compact, 32px)", + }, "regular": { "name": "--vkui--size_button_medium_height--regular", - "value": "var(--vkui--size_button_medium_height--regular, 40px)", + "value": "var(--vkui--size_button_medium_height--regular, 36px)", }, }, "sizeButtonMinimumWidth": { @@ -116743,9 +116807,13 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_small_height", "value": "var(--vkui--size_button_small_height)", }, + "compact": { + "name": "--vkui--size_button_small_height--compact", + "value": "var(--vkui--size_button_small_height--compact, 28px)", + }, "regular": { "name": "--vkui--size_button_small_height--regular", - "value": "var(--vkui--size_button_small_height--regular, 36px)", + "value": "var(--vkui--size_button_small_height--regular, 30px)", }, }, "sizeButtonTertiaryLargePaddingHorizontal": { @@ -116931,9 +116999,13 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_field_height", "value": "var(--vkui--size_field_height)", }, + "compact": { + "name": "--vkui--size_field_height--compact", + "value": "var(--vkui--size_field_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_field_height--regular", - "value": "var(--vkui--size_field_height--regular, 48px)", + "value": "var(--vkui--size_field_height--regular, 44px)", }, }, "sizeFieldHorizontalMargin": { @@ -118534,7 +118606,7 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 16, 61, 0.28)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -119253,10 +119325,12 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "regular": "20px", }, "sizeButtonLargeHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeButtonMediumHeight": { - "regular": "40px", + "compact": "32px", + "regular": "36px", }, "sizeButtonMinimumWidth": { "regular": "80px", @@ -119277,7 +119351,8 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -119333,7 +119408,8 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -120381,7 +120457,7 @@ exports[`shapshots mycom theme should match pseudo theme from CssVars 1`] = ` "elevation1": "var(--vkui--elevation1, 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation1InvertY": "var(--vkui--elevation1_invert_y, 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation2": "var(--vkui--elevation2, 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06))", - "elevation3": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "elevation3": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 16, 61, 0.28))", "elevation4": "var(--vkui--elevation4, 0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16))", "fontCaption1": { "regular": { @@ -121100,10 +121176,12 @@ exports[`shapshots mycom theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_button_icon_padding--regular, 20px)", }, "sizeButtonLargeHeight": { - "regular": "var(--vkui--size_button_large_height--regular, 48px)", + "compact": "var(--vkui--size_button_large_height--compact, 36px)", + "regular": "var(--vkui--size_button_large_height--regular, 44px)", }, "sizeButtonMediumHeight": { - "regular": "var(--vkui--size_button_medium_height--regular, 40px)", + "compact": "var(--vkui--size_button_medium_height--compact, 32px)", + "regular": "var(--vkui--size_button_medium_height--regular, 36px)", }, "sizeButtonMinimumWidth": { "regular": "var(--vkui--size_button_minimum_width--regular, 80px)", @@ -121124,7 +121202,8 @@ exports[`shapshots mycom theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_button_slider_width_pointer--regular, 16px)", }, "sizeButtonSmallHeight": { - "regular": "var(--vkui--size_button_small_height--regular, 36px)", + "compact": "var(--vkui--size_button_small_height--compact, 28px)", + "regular": "var(--vkui--size_button_small_height--regular, 30px)", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "var(--vkui--size_button_tertiary_large_padding_horizontal--regular, 16px)", @@ -121180,7 +121259,8 @@ exports[`shapshots mycom theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_dot_indicate--regular, 8px)", }, "sizeFieldHeight": { - "regular": "var(--vkui--size_field_height--regular, 48px)", + "compact": "var(--vkui--size_field_height--compact, 36px)", + "regular": "var(--vkui--size_field_height--regular, 44px)", }, "sizeFieldHorizontalMargin": { "compact": "var(--vkui--size_field_horizontal_margin--compact, 16px)", @@ -122228,7 +122308,7 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 16, 61, 0.28)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -122947,10 +123027,12 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "regular": 20, }, "sizeButtonLargeHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeButtonMediumHeight": { - "regular": 40, + "compact": 32, + "regular": 36, }, "sizeButtonMinimumWidth": { "regular": 80, @@ -122971,7 +123053,8 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -123027,7 +123110,8 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, @@ -267370,7 +267454,7 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` }, "elevation3": { "name": "--vkui--elevation3", - "value": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "value": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 16, 61, 0.28))", }, "elevation4": { "name": "--vkui--elevation4", @@ -270345,9 +270429,13 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_large_height", "value": "var(--vkui--size_button_large_height)", }, + "compact": { + "name": "--vkui--size_button_large_height--compact", + "value": "var(--vkui--size_button_large_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_button_large_height--regular", - "value": "var(--vkui--size_button_large_height--regular, 48px)", + "value": "var(--vkui--size_button_large_height--regular, 44px)", }, }, "sizeButtonMediumHeight": { @@ -270355,9 +270443,13 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_medium_height", "value": "var(--vkui--size_button_medium_height)", }, + "compact": { + "name": "--vkui--size_button_medium_height--compact", + "value": "var(--vkui--size_button_medium_height--compact, 32px)", + }, "regular": { "name": "--vkui--size_button_medium_height--regular", - "value": "var(--vkui--size_button_medium_height--regular, 40px)", + "value": "var(--vkui--size_button_medium_height--regular, 36px)", }, }, "sizeButtonMinimumWidth": { @@ -270425,9 +270517,13 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_button_small_height", "value": "var(--vkui--size_button_small_height)", }, + "compact": { + "name": "--vkui--size_button_small_height--compact", + "value": "var(--vkui--size_button_small_height--compact, 28px)", + }, "regular": { "name": "--vkui--size_button_small_height--regular", - "value": "var(--vkui--size_button_small_height--regular, 36px)", + "value": "var(--vkui--size_button_small_height--regular, 30px)", }, }, "sizeButtonTertiaryLargePaddingHorizontal": { @@ -270613,9 +270709,13 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` "name": "--vkui--size_field_height", "value": "var(--vkui--size_field_height)", }, + "compact": { + "name": "--vkui--size_field_height--compact", + "value": "var(--vkui--size_field_height--compact, 36px)", + }, "regular": { "name": "--vkui--size_field_height--regular", - "value": "var(--vkui--size_field_height--regular, 48px)", + "value": "var(--vkui--size_field_height--regular, 44px)", }, }, "sizeFieldHorizontalMargin": { @@ -272224,7 +272324,7 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 16, 61, 0.28)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -272943,10 +273043,12 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "regular": "20px", }, "sizeButtonLargeHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeButtonMediumHeight": { - "regular": "40px", + "compact": "32px", + "regular": "36px", }, "sizeButtonMinimumWidth": { "regular": "80px", @@ -272967,7 +273069,8 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -273023,7 +273126,8 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -274073,7 +274177,7 @@ exports[`shapshots pharma theme should match pseudo theme from CssVars 1`] = ` "elevation1": "var(--vkui--elevation1, 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation1InvertY": "var(--vkui--elevation1_invert_y, 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08))", "elevation2": "var(--vkui--elevation2, 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06))", - "elevation3": "var(--vkui--elevation3, 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08))", + "elevation3": "var(--vkui--elevation3, 0px 16px 48px 0px rgba(0, 16, 61, 0.28))", "elevation4": "var(--vkui--elevation4, 0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16))", "fontCaption1": { "regular": { @@ -274792,10 +274896,12 @@ exports[`shapshots pharma theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_button_icon_padding--regular, 20px)", }, "sizeButtonLargeHeight": { - "regular": "var(--vkui--size_button_large_height--regular, 48px)", + "compact": "var(--vkui--size_button_large_height--compact, 36px)", + "regular": "var(--vkui--size_button_large_height--regular, 44px)", }, "sizeButtonMediumHeight": { - "regular": "var(--vkui--size_button_medium_height--regular, 40px)", + "compact": "var(--vkui--size_button_medium_height--compact, 32px)", + "regular": "var(--vkui--size_button_medium_height--regular, 36px)", }, "sizeButtonMinimumWidth": { "regular": "var(--vkui--size_button_minimum_width--regular, 80px)", @@ -274816,7 +274922,8 @@ exports[`shapshots pharma theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_button_slider_width_pointer--regular, 16px)", }, "sizeButtonSmallHeight": { - "regular": "var(--vkui--size_button_small_height--regular, 36px)", + "compact": "var(--vkui--size_button_small_height--compact, 28px)", + "regular": "var(--vkui--size_button_small_height--regular, 30px)", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "var(--vkui--size_button_tertiary_large_padding_horizontal--regular, 16px)", @@ -274872,7 +274979,8 @@ exports[`shapshots pharma theme should match pseudo theme from CssVars 1`] = ` "regular": "var(--vkui--size_dot_indicate--regular, 8px)", }, "sizeFieldHeight": { - "regular": "var(--vkui--size_field_height--regular, 48px)", + "compact": "var(--vkui--size_field_height--compact, 36px)", + "regular": "var(--vkui--size_field_height--regular, 44px)", }, "sizeFieldHorizontalMargin": { "compact": "var(--vkui--size_field_horizontal_margin--compact, 16px)", @@ -275922,7 +276030,7 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "elevation1": "0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation1InvertY": "0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)", "elevation2": "0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)", - "elevation3": "0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)", + "elevation3": "0px 16px 48px 0px rgba(0, 16, 61, 0.28)", "elevation4": "0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)", "fontCaption1": { "regular": { @@ -276641,10 +276749,12 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "regular": 20, }, "sizeButtonLargeHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeButtonMediumHeight": { - "regular": 40, + "compact": 32, + "regular": 36, }, "sizeButtonMinimumWidth": { "regular": 80, @@ -276665,7 +276775,8 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -276721,7 +276832,8 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, diff --git a/src/themeDescriptions/themes/media/index.ts b/src/themeDescriptions/themes/media/index.ts index 59b899c7..b73ab36f 100644 --- a/src/themeDescriptions/themes/media/index.ts +++ b/src/themeDescriptions/themes/media/index.ts @@ -7,7 +7,7 @@ import { helpers, projectColors, socialColors } from '@/themeDescriptions/common import { darkTheme, lightTheme } from '../../base/paradigm'; const { fontWeightBase3 } = lightTheme; -const { x0, x05, x2, x3, x4, x5, x6, x8, x10, x12 } = helpers; +const { x0, x05, x2, x3, x4, x5, x6, x8 } = helpers; const fontFamilyBase: Property.FontFamily = 'Inter, Helvetica, Arial, sans-serif'; const fontFamilyAccent: Property.FontFamily = `VKSansDisplay, MailSans, ${fontFamilyBase}`; @@ -508,17 +508,23 @@ export const mediaTheme: ThemeMediaDescription = { */ sizeFieldHeight: { - regular: x12, + regular: 44, + compact: 36, }, sizeButtonLargeHeight: { - regular: x12, + regular: 44, + compact: 36, }, + sizeButtonMediumHeight: { - regular: x10, + regular: 36, + compact: 32, }, + sizeButtonSmallHeight: { - regular: 36, + regular: 30, + compact: 28, }, sizeFieldWidthMin: { @@ -608,6 +614,25 @@ export const mediaTheme: ThemeMediaDescription = { regular: x4, }, + sizeButtonBaseSmallPaddingHorizontal: { + regular: 16, + }, + sizeButtonBaseMediumPaddingHorizontal: { + regular: 16, + }, + sizeButtonBaseLargePaddingHorizontal: { + regular: 20, + }, + sizeButtonBaseSmallPaddingHorizontalIcon: { + regular: 12, + }, + sizeButtonBaseMediumPaddingHorizontalIcon: { + regular: 12, + }, + sizeButtonBaseLargePaddingHorizontalIcon: { + regular: 16, + }, + /** * ОТСТУПЫ МЕЖДУ ЭЛЕМЕНТАМИ УПРАВЛЕНИЯ */ @@ -694,6 +719,8 @@ export const mediaTheme: ThemeMediaDescription = { sizeBadgeXL: { regular: 56, }, + + elevation3: '0px 16px 48px 0px rgba(0, 16, 61, 0.28)', }; export const mediaDarkTheme: ThemeMediaDescription = { @@ -704,4 +731,5 @@ export const mediaDarkTheme: ThemeMediaDescription = { ...mediaTheme.colors, ...darkTheme.colors, }, + elevation3: '0px 16px 48px 0px rgba(0, 0, 0, 0.40)', };