diff --git a/.github/workflows/figma.yml b/.github/workflows/figma.yml index c2b99a73f..e376a6cd7 100644 --- a/.github/workflows/figma.yml +++ b/.github/workflows/figma.yml @@ -26,7 +26,7 @@ jobs: - run: yarn test -u - name: Create Pull Request - uses: peter-evans/create-pull-request@v6 + uses: peter-evans/create-pull-request@v7 with: token: ${{ secrets.DEVTOOLS_GITHUB_TOKEN }} title: Figma updates diff --git a/docs/docs.d.ts b/docs/docs.d.ts index 976923f62..573880f37 100644 --- a/docs/docs.d.ts +++ b/docs/docs.d.ts @@ -2,3 +2,9 @@ declare module '*.svg' { const content: any; export default content; } + +declare module '*.md' { + const content: any; + export default content; +} + diff --git a/docs/src/App.tsx b/docs/src/App.tsx index 8ed21fbb7..d18b3ec08 100644 --- a/docs/src/App.tsx +++ b/docs/src/App.tsx @@ -2,13 +2,63 @@ import '@vkontakte/vkui/dist/vkui.css'; import './styles/index.css'; import React, { FC } from 'react'; +import { + createBrowserRouter, + RouterProvider, + } from "react-router-dom"; import Main from '@/components/layouts/Main'; import Tokens from '@/pages/Tokens'; +import { Articles } from './pages/Articles'; + +import articleNewTheme from "./articles/NewTheme.md"; +import articleTokenHelpers from "./articles/TokenHelpers.md"; + +const articles = [ + { + title: "Темы", + }, + { + slug: "new-theme", + title: "Создание новой темы для проекта", + contents: articleNewTheme, + }, + { + title: "Токены", + }, + { + slug: "token-helpers", + title: "Хелпер-функции", + contents: articleTokenHelpers, + }, +]; + +const router = createBrowserRouter([ + { + path: "/", + element: , + }, + { + path: "/articles", + element: + }, + ...articles + .filter((article) => !!article.slug) + .map((article) => ( + { + path: `/articles/${article.slug}`, + element: + } + )), +]); + +router.subscribe(() => { + window.scrollTo(0, 0); +}); const App: FC = () => (
- +
); diff --git a/docs/articles/new-theme/INDEX.md b/docs/src/articles/NewTheme.md similarity index 96% rename from docs/articles/new-theme/INDEX.md rename to docs/src/articles/NewTheme.md index cb81e45d5..c542dc25e 100644 --- a/docs/articles/new-theme/INDEX.md +++ b/docs/src/articles/NewTheme.md @@ -1,4 +1,4 @@ -# Создание новой темы для вашего проекта +# Создание новой темы для проекта Если вы хотите использовать токены VKUI не только в связке с основной библиотекой, но и в произвольной вёрстке, у вас может возникнуть потребность расширения стандартного набора. @@ -14,7 +14,7 @@ Прежде, чем заводить свою тему, вам нужно ответить для себя на следующий вопрос: -_Какая из базовых тем будет являться основной для вашего проекта?_ +### Какая из базовых тем будет являться основной для вашего проекта? Выбор базовой темы влияет на внешний вид вашего проекта в тех местах, которые вы не поправите в своей теме. diff --git a/docs/src/articles/TokenHelpers.md b/docs/src/articles/TokenHelpers.md new file mode 100644 index 000000000..7bf468a7d --- /dev/null +++ b/docs/src/articles/TokenHelpers.md @@ -0,0 +1,211 @@ +# Хелпер-функции для токенов +Значения токенов бывают разные. Большинство токенов можно выразить либо числом (размеры), либо строкой (цвета, шрифты и прочее). + +Но иногда для правильной записи значений базовых типов недостаточно. Бывавет так, что в значении токена нужно сослаться +на другой токен, или сгенерировать значение токена по набору правил. + +Для этих целей в пакете `@vkontakte/vkui-tokens` предусмотрены **функции-хелперы**. Они выполняются на этапе +сборки темы и позволяют управлять тем, какие значения попадут в итоговые файлы. + +  + +## `alias` +Функция выполняет подстановку значения другого токена. + +Будьте осторожны с указанием токенов, которые сами являются ссылками. +Неправильно указанный токен может привезти к переполнению стека и крешу сборки! + +### Интерфейс +```typescript +function alias(token: string): TokenFunction; +``` + +### Параметры +* **token** — Имя токена. Можно использовать токены из текущей темы либо из всех тем, от которой наследуется текущая. + +### Пример +Исходный файл темы: + +```typescript +import { ParadigmThemeDescription } from '@/interfaces/namespaces/paradigm'; +import { lightTheme } from '@/themeDescriptions/base/paradigm'; +import { alias } from '@/build/helpers/tokenHelpers'; + +export const myCustomTheme: ParadigmThemeDescription = { + ...lightTheme, + sizeArrow: alias('sizeArrowPromo'), + sizeArrowPromo: { + regular: 8, + }, +}; +``` + +Итоговый файл с темой: + +```css +:root { + /* ... */ + --vkui--size_arrow--regular: 8px; + --vkui--size_arrow_promo--regular: 8px; + /* ... */ +} +``` + +  + +## `namedAlias` +Функция создаёт именованый алиас — runtime-ссылку на другой токен темы выполняет подстановку +fallback-значения этого токена. + +Будьте осторожны с указанием токенов, которые сами являются ссылками. +Неправильно указанный токен может привезти к переполнению стека и крешу сборки! + +### Интерфейс +```typescript +function namedAlias(token: string): NamedTokenFunction +``` + +### Параметры +* **token** — Имя токена. Можно использовать токены из текущей темы либо из всех тем, от которой наследуется текущая. + +### Пример +Исходный файл темы: + +```typescript +import { ParadigmThemeDescription } from '@/interfaces/namespaces/paradigm'; +import { lightTheme } from '@/themeDescriptions/base/paradigm'; +import { namedAlias } from '@/build/helpers/tokenHelpers'; + +export const myCustomTheme: ParadigmThemeDescription = { + ...lightTheme, + sizeArrow: namedAlias('sizeArrowPromo'), + sizeArrowPromo: { + regular: 8, + }, +}; +``` + +Итоговый файл с темой: + +```css +:root { + /* ... */ + --vkui--size_arrow--regular: var(--vkui--size_arrow_promo--regular, 8px); + --vkui--size_arrow_promo--regular: 8px; + /* ... */ +} +``` + +  + +## `staticRef` +Функция создаёт runtime-ссылку на другой токен темы. + +### Интерфейс +```typescript +function staticRef(value: Token): T; +``` + +### Параметры +* **token** — Имя токена. Можно использовать любые токены, которые находятся в контексте страницы. + +### Пример +Исходный файл темы: + +```typescript +import { ParadigmThemeDescription } from '@/interfaces/namespaces/paradigm'; +import { lightTheme } from '@/themeDescriptions/base/paradigm'; +import { staticRef } from '@/build/helpers/tokenHelpers'; + +export const myCustomTheme: ParadigmThemeDescription = { + ...lightTheme, + sizeArrow: staticRef('sizeArrowPromo'), + sizeArrowPromo: { + regular: 8, + }, +}; +``` + +Итоговый файл с темой: + +```css +:root { + /* ... */ + --vkui--size_arrow--regular: var(--vkui--size_arrow_promo--regular); + --vkui--size_arrow_promo--regular: 8px; + /* ... */ +} +``` + +  + +## `gradient` +Функция создаёт градиент из одного или нескольких цветов. + +Если передан один цвет, система сборки сгенериурет градиент из указанного цвета в прозрачный. При этом +градиент будет построен по точкам, указанным в файле `opacityMap.json`. + +Если передано два и более цветов, будет сгенерирован градиент между этими цветами с равномерной расстановкой точек. + +### Интерфейс +```typescript +export function gradient ( + ...stops: (Property.Color | NamedTokenFunction)[] +): TokenFunction; +``` + +### Параметры +* **stops** — Список точек градиента. Можно использовать цвета в строковом формате (rgba, hex) и именованые + алиасы, созданные с помощью хелпера `namedAlias`. + +### Пример +Исходный файл темы: + +```typescript +import { ParadigmThemeDescription } from '@/interfaces/namespaces/paradigm'; +import { lightTheme } from '@/themeDescriptions/base/paradigm'; +import { gradient, namedAlias } from '@/build/helpers/tokenHelpers'; + +export const myCustomTheme: ParadigmThemeDescription = { + ...lightTheme, + colorIconPrimary: 'rgba(64, 64, 64, 1)', + gradient: gradient(namedAlias('colorIconPrimary'), 'rgba(32, 32, 32, 1)'), +}; +``` + +Итоговый файл с темой: + +```css +:root { + /* ... */ + --vkui--color_icon_primary: rgba(64, 64, 64, 1); + --vkui--gradient: var(--vkui--color_icon_primary, rgba(64, 64, 64, 1)) 0%, rgba(32, 32, 32, 1) 100%; + /* ... */ +} +``` + +```json +{ + "gradient": { + "gradient": [ + { + "color": "rgba(64, 64, 64, 1)", + "token": "colorIconPrimary", + "step": 0, + "alpha": 1 + }, + { + "color": "rgba(32, 32, 32, 1)", + "token": "colorIconPrimary", + "step": 1, + "alpha": 1 + } + ] + }, + "other": { + "colorIconPrimary": { + "normal": "rgba(64, 64, 64, 1)" + } + } +} +``` \ No newline at end of file diff --git a/docs/src/components/layouts/shared/AsideMenu/AsideMenu.tsx b/docs/src/components/layouts/shared/AsideMenu/AsideMenu.tsx new file mode 100644 index 000000000..eeb32d7c7 --- /dev/null +++ b/docs/src/components/layouts/shared/AsideMenu/AsideMenu.tsx @@ -0,0 +1,48 @@ +import { Card, Spacing, Title } from '@vkontakte/vkui'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; + +export interface AsideMenuItem { + slug?: string; + title: string; +} + +export interface AsideMenuProps { + items?: AsideMenuItem[]; +} + +const defaultItems: AsideMenuItem[] = []; + +export function AsideMenu(props: AsideMenuProps) { + const items = props.items ?? defaultItems; + + return ( + + ); +} diff --git a/docs/src/components/pages/Tokens/TokensHeader.tsx b/docs/src/components/pages/Tokens/TokensHeader.tsx index 176087fa4..b5bd24766 100644 --- a/docs/src/components/pages/Tokens/TokensHeader.tsx +++ b/docs/src/components/pages/Tokens/TokensHeader.tsx @@ -1,5 +1,6 @@ -import { Icon16Linked } from '@vkontakte/icons'; +import { Icon16Linked, Icon16HelpOutline } from '@vkontakte/icons'; import { Link, Title, useAdaptivityWithJSMediaQueries } from '@vkontakte/vkui'; +import { Link as RouterLink } from 'react-router-dom'; import clsx from 'clsx'; import React, { FC } from 'react'; @@ -42,6 +43,14 @@ const TokensHeader: FC = () => { {version.text} +
+ + + + Документация + + +
diff --git a/docs/src/highlight/codeWidget.ts b/docs/src/highlight/codeWidget.ts new file mode 100644 index 000000000..9247e72f9 --- /dev/null +++ b/docs/src/highlight/codeWidget.ts @@ -0,0 +1,116 @@ +import { highlightConfig } from "./config"; + +function forEachCodeBlock(parent: HTMLElement, callback: (codeBlock: HTMLElement, language: string) => void) { + const codeBlocks = Array.from(parent.querySelectorAll(highlightConfig().codeSelector)); + + codeBlocks.forEach((codeBlock) => { + if (!(codeBlock instanceof HTMLElement)) { + return; + } + + const langClassName = Array.from(codeBlock.classList).find((className) => className.startsWith('language-')); + + if (langClassName) { + const language = langClassName.slice('language-'.length); + callback(codeBlock, language); + } + }); +} + +function switchLanguage(parent: HTMLElement, language: string) { + const allLanguageEls = Array.from(parent.querySelectorAll('[data-language]')); + + allLanguageEls.forEach((element) => { + if (element.getAttribute('data-language') === language) { + element.classList.add('code-tab-selected'); + } else { + element.classList.remove('code-tab-selected'); + } + }); +} + +function findDomParent(element: HTMLElement, selector: string, maxDepth = 5): HTMLElement | undefined { + let current: HTMLElement | null = element; + let count = 0; + + while (current && !current.matches(selector) && count < maxDepth) { + current = current.parentElement; + count++; + } + + if (current && !current.matches(selector) || !current) { + return undefined; + } + + return current; +} + +function handleTogglerClick(event: MouseEvent) { + if (!(event.target instanceof HTMLElement)) { + return; + } + + const language = event.target.getAttribute('data-language'); + + if (!language) { + return; + } + + const codeWidgetRoot = findDomParent(event.target, '.code-widget'); + + if (codeWidgetRoot) { + switchLanguage(codeWidgetRoot, language); + } +} + +/** + * Создаёт блок с переключателем нескольких языков и подсветкой синтаксиса + */ +export function createCodeWidget(...elements: HTMLElement[]) { + if (!elements.length || !elements[0].parentElement) { + return; + } + + const parentDiv = document.createElement('DIV'); + parentDiv.classList.add('code-widget'); + + elements[0].parentElement.replaceChild(parentDiv, elements[0]); + + for (const element of elements) { + parentDiv.appendChild(element); + } + + const languageToggler = document.createElement('DIV'); + parentDiv.insertBefore(languageToggler, parentDiv.firstChild); + + let firstLanguage: string | undefined; + + forEachCodeBlock(parentDiv, (codeBlock, language) => { + if (!firstLanguage) { + firstLanguage = language; + } + + codeBlock.setAttribute('data-language', language); + + const codeParent = codeBlock.parentElement; + + if (!codeParent) { + return; + } + + codeParent.classList.add('code-tab'); + + const languageButton = document.createElement('button'); + languageButton.innerText = language; + languageButton.classList.add('code-tab_button'); + languageButton.setAttribute('data-language', language); + + languageToggler.appendChild(languageButton); + }); + + languageToggler.addEventListener('click', handleTogglerClick); + + if (firstLanguage) { + switchLanguage(parentDiv, firstLanguage); + } +} \ No newline at end of file diff --git a/docs/src/highlight/config.ts b/docs/src/highlight/config.ts new file mode 100644 index 000000000..4533e6968 --- /dev/null +++ b/docs/src/highlight/config.ts @@ -0,0 +1,22 @@ +import 'highlight.js/styles/github.css'; + +import typescript from 'highlight.js/lib/languages/typescript'; +import css from 'highlight.js/lib/languages/css'; +import json from 'highlight.js/lib/languages/json'; + +interface HighlightLanguage { + name: string; + lib: (...args: any) => any; +} + +const languages: HighlightLanguage[] = [ + { name: 'typescript', lib: typescript }, + { name: 'json', lib: json }, + { name: 'css', lib: css }, +] + +const codeSelector = languages.map((language) => `code.language-${language.name}`).join(', '); + +export function highlightConfig() { + return { languages, codeSelector } as const; +} diff --git a/docs/src/highlight/highlight.ts b/docs/src/highlight/highlight.ts new file mode 100644 index 000000000..52dd90f0b --- /dev/null +++ b/docs/src/highlight/highlight.ts @@ -0,0 +1,62 @@ +import hljs from 'highlight.js/lib/core'; + +import { highlightConfig } from './config'; +import { createCodeWidget } from './codeWidget'; + +let hljsInitialized = false; + +function findChildIndex(element: HTMLElement): number { + // Вызывается в цикле, поэтому не копируем элементы из NodeList в массив + for (let i = 0; i < element.parentElement.children.length; i++) { + if (element.parentElement.children[i] === element) { + return i; + } + } + + return -1; +} + +/** + * Подсвечивает синтаксис во всех блков кода в переданном элементе + * Если в исходнике встречаются несколько подряд идущих блоков кода на разных языках, они объединяются в виджет + * с табами (см. файл codeWidget.ts) + */ +export function highlightCodeInElement(element: HTMLElement) { + if (!hljsInitialized) { + highlightConfig().languages.forEach((language) => hljs.registerLanguage(language.name, language.lib)); + hljsInitialized = true; + } + + const codeBlocks = Array.from(element.querySelectorAll(highlightConfig().codeSelector)); + + for (const codeBlock of codeBlocks) { + if (!(codeBlock instanceof HTMLElement)) { + continue; + } + + const codeParent = codeBlock.parentElement; + const codeParentIndex = findChildIndex(codeParent); + + codeBlock.innerHTML = hljs.highlightAuto(codeBlock.innerText).value; + + const prevCodeParent = codeParent.parentElement.children[codeParentIndex - 1] as HTMLElement; + + if (!prevCodeParent) { + break; + } + + const prevCodeBlock = prevCodeParent.querySelector(highlightConfig().codeSelector); + + if (prevCodeBlock instanceof HTMLElement) { + createCodeWidget(prevCodeParent, codeParent); + } + } + + const links = Array.from(element.querySelectorAll("a[href]")); + + for (const link of links) { + link.setAttribute("target", "_blank"); + } +} + + diff --git a/docs/src/pages/Articles.tsx b/docs/src/pages/Articles.tsx new file mode 100644 index 000000000..de75de50c --- /dev/null +++ b/docs/src/pages/Articles.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import 'highlight.js/styles/github.css'; + +import { AsideMenu, AsideMenuItem } from '@/components/layouts/shared/AsideMenu/AsideMenu'; +import { Spacing, useAdaptivityWithJSMediaQueries } from '@vkontakte/vkui'; +import { highlightCodeInElement } from '@/highlight/highlight'; + +export interface ArticlesProps { + items?: AsideMenuItem[]; + contentsHtml?: string; +} + +export function Articles(props: ArticlesProps) { + let articleContent = props.contentsHtml ?? ''; + const ref = React.useRef(undefined); + + const { viewWidth } = useAdaptivityWithJSMediaQueries(); + const isMobile = viewWidth <= 3; + + React.useEffect(() => { + highlightCodeInElement(ref.current); + }, [ref.current, articleContent]); + + return ( +
+ + + {isMobile && ( + + )} + +
+
+ ); +} diff --git a/docs/src/styles/articles.css b/docs/src/styles/articles.css new file mode 100644 index 000000000..7d4b777d1 --- /dev/null +++ b/docs/src/styles/articles.css @@ -0,0 +1,137 @@ + +.articles { + display: grid; + grid-template-columns: 300px 1fr; + gap: 48px; + + color: var(--vkui--color_text_primary); + + font-size: var(--vkui--font_text--font_size--regular); + line-height: var(--vkui--font_text--line_height--regular); + font-family: var(--vkui--font_text--font_family--regular); + font-weight: var(--vkui--font_text--font_weight--regular); +} + +.articles__mobile { + display: block; +} + +.aside-menu_card { + height: auto; + padding: var(--vkui--size_base_padding_horizontal--regular); + margin-top: 4px; + position: sticky; + top: 72px; +} + +.aside-menu_title { + text-align: center; +} + +.aside-menu-item { + margin-left: 20px; +} + +.articles-container { + max-width: calc(1144px - 300px - 48px); +} + +.articles__mobile .articles-container { + max-width: unset; +} + +.articles-container p { + font-size: var(--vkui--font_paragraph--font_size--regular); + line-height: var(--vkui--font_paragraph--line_height--regular); + font-family: var(--vkui--font_paragraph--font_family--regular); + font-weight: var(--vkui--font_paragraph--font_weight--regular); +} + +.articles-container h1 { + font-size: var(--vkui--font_title1--font_size--regular); + line-height: var(--vkui--font_title1--line_height--regular); + font-family: var(--vkui--font_title1--font_family--regular); + font-weight: var(--vkui--font_title1--font_weight--regular); +} + +.articles-container h2 { + font-size: var(--vkui--font_title2--font_size--regular); + line-height: var(--vkui--font_title2--line_height--regular); + font-family: var(--vkui--font_title2--font_family--regular); + font-weight: var(--vkui--font_title2--font_weight--regular); +} + +.articles-container h3 { + font-size: var(--vkui--font_title3--font_size--regular); + line-height: var(--vkui--font_title3--line_height--regular); + font-family: var(--vkui--font_title3--font_family--regular); + font-weight: var(--vkui--font_title3--font_weight--regular); +} + +.articles-container h3 { + font-size: var(--vkui--font_title3--font_size--regular); + line-height: var(--vkui--font_title3--line_height--regular); + font-family: var(--vkui--font_title3--font_family--regular); + font-weight: var(--vkui--font_title3--font_weight--regular); +} + +.articles a, .articles a:visited { + color: var(--vkui--color_text_link); + text-decoration: none; +} + +.articles a:hover { + color: var(--vkui--color_text_link--hover); + text-decoration: underline; +} + +.articles a:active { + color: var(--vkui--color_text_link--active); + text-decoration: underline; +} + +.articles-container code { + background-color: var(--vkui--color_background_secondary); + border-radius: var(--vkui--size_border_radius--regular); + padding: 4px; +} + +.articles-container pre code { + display: block; + padding: var(--vkui--size_base_padding_horizontal--regular) var(--vkui--size_base_padding_vertical--regular); + margin: var(--vkui--size_label_horizontal_margin--regular) 0; + overflow: auto; +} + +.code-tab [data-language] { + display: none; +} + +.code-tab [data-language].code-tab-selected { + display: block; +} + +.code-tab_button { + background: none; + border: 0 none; + cursor: pointer; + + color: var(--vkui--color_text_secondary); + + font-size: var(--vkui--font_text--font_size--regular); + line-height: var(--vkui--font_text--line_height--regular); + font-family: var(--vkui--font_text--font_family--regular); + font-weight: var(--vkui--font_text--font_weight--regular); +} + +.code-tab_button:hover { + color: var(--vkui--color_text_secondary--hover); +} + +.code-tab_button:active { + color: var(--vkui--color_text_secondary--active); +} + +.code-tab_button.code-tab-selected { + color: var(--vkui--color_text_primary); +} diff --git a/docs/src/styles/index.css b/docs/src/styles/index.css index 67f2a9970..788a562e9 100644 --- a/docs/src/styles/index.css +++ b/docs/src/styles/index.css @@ -1,5 +1,6 @@ @import 'flex.css'; @import 'space.css'; +@import 'articles.css'; .container { max-width: 1144px; diff --git a/docs/webpack/webpack.client.js b/docs/webpack/webpack.client.mjs similarity index 73% rename from docs/webpack/webpack.client.js rename to docs/webpack/webpack.client.mjs index 21d5ed62c..7fc5e6b41 100644 --- a/docs/webpack/webpack.client.js +++ b/docs/webpack/webpack.client.mjs @@ -1,12 +1,16 @@ -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WebpackNotifierPlugin = require('webpack-notifier'); -const TerserPlugin = require('terser-webpack-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const webpackConfig = require('./webpack.config'); +import path from 'path'; +import { fileURLToPath } from 'node:url'; + +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import WebpackNotifierPlugin from 'webpack-notifier'; +import TerserPlugin from 'terser-webpack-plugin'; +import { CleanWebpackPlugin } from 'clean-webpack-plugin'; +import CopyWebpackPlugin from 'copy-webpack-plugin'; +import webpackConfig from './webpack.config.mjs'; + +export default function (env, argv) { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); -module.exports = function (env, argv) { const watchMode = argv.liveReload || false; const modeEnv = argv.mode || 'development'; const isProd = modeEnv === 'production'; @@ -44,10 +48,10 @@ module.exports = function (env, argv) { output: { path: path.resolve(__dirname, '../dist'), filename: watchMode ? 'assets/[name].[hash].js' : 'assets/[name].[chunkhash].js', - publicPath: 'auto', + publicPath: '/', }, module: { - rules: [config.modules.ts, config.modules.css, config.modules.svg], + rules: [config.modules.ts, config.modules.css, config.modules.svg, config.modules.md], }, plugins: [ new CleanWebpackPlugin({ diff --git a/docs/webpack/webpack.config.js b/docs/webpack/webpack.config.mjs similarity index 58% rename from docs/webpack/webpack.config.js rename to docs/webpack/webpack.config.mjs index dbc8d438e..ec27f9110 100644 --- a/docs/webpack/webpack.config.js +++ b/docs/webpack/webpack.config.mjs @@ -1,6 +1,10 @@ -const path = require('path'); +import path from 'path'; +import RemarkHTML from 'remark-html'; +import { fileURLToPath } from 'node:url'; + +export default function () { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); -module.exports = function () { const modules = { ts: { test: /\.ts(x?)$/, @@ -32,6 +36,22 @@ module.exports = function () { }, ], }, + md: { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'remark-loader', + options: { + remarkOptions: { + plugins: [RemarkHTML], + }, + }, + }, + ], + }, }; const resolve = { diff --git a/package.json b/package.json index d7be05e40..2e8b8c4c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vkontakte/vkui-tokens", - "version": "4.54.0", + "version": "4.55.0", "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm", "license": "MIT", "homepage": "https://vkcom.github.io/vkui-tokens", @@ -25,8 +25,8 @@ "clear:dist": "find dist -regex '.*[^d]\\.ts' -delete", "open:coverage": "open .coverage/index.html", "styleguide": "sh ./tasks/styleguide.sh", - "docs:dev": "cd docs/webpack && webpack-dev-server --config webpack.client.js --mode development", - "docs:build": "cd docs/webpack && webpack --config webpack.client.js --mode production", + "docs:dev": "cd docs/webpack && webpack-dev-server --config webpack.client.mjs --mode development", + "docs:build": "cd docs/webpack && webpack --config webpack.client.mjs --mode production", "docs:prepare-data": "ts-node tasks/docs/prepareTokensData.ts", "pre-commit": "lint-staged" }, @@ -51,7 +51,7 @@ "@types/fs-extra": "11.0.4", "@types/lodash": "4.17.7", "@types/node": "18.11.10", - "@types/react": "18.3.5", + "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0", "@vkontakte/icons": "2.124.0", @@ -81,19 +81,26 @@ "eslint-plugin-sonarjs": "0.24.0", "eslint-plugin-unicorn": "51.0.1", "fs-extra": "11.2.0", + "highlight.js": "11.10.0", + "html-loader": "5.1.0", "html-webpack-plugin": "5.6.0", "husky": "9.1.4", "jest": "29.7.0", "jest-junit": "16.0.0", - "lint-staged": "15.2.9", + "lint-staged": "15.2.10", "lodash": "4.17.21", "prettier": "3.3.2", "react": "18.3.1", "react-dom": "18.3.1", + "react-router-dom": "6.26.2", + "remark": "15.0.1", + "remark-html": "16.0.1", + "remark-loader": "6.0.0", "rimraf": "5.0.7", "style-loader": "4.0.0", "terser-webpack-plugin": "5.3.10", - "ts-jest": "29.2.4", + "tree-sitter": "0.21.1", + "ts-jest": "29.2.5", "ts-loader": "9.5.1", "ts-morph": "20.0.0", "ts-node": "10.9.2", @@ -101,15 +108,19 @@ "tscpaths": "0.0.9", "type-fest": "4.26.1", "typescript": "5.2.2", - "typescript-eslint": "7.0.1", + "typescript-eslint": "7.7.1", "webpack": "5.94.0", "webpack-cli": "5.1.4", - "webpack-dev-server": "5.0.4", + "webpack-dev-server": "5.1.0", "webpack-notifier": "1.15.0" }, "engines": { "npm": ">=9.3.1", "yarn": ">=1.21.1 <2" }, - "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e", + "resolutions": { + "@types/node": "18.11.10", + "@types/react": "18.3.3" + } } diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap index b79959f27..af81a6292 100644 --- a/src/build/__snapshots__/snapthots.test.ts.snap +++ b/src/build/__snapshots__/snapthots.test.ts.snap @@ -2174,6 +2174,20 @@ exports[`shapshots calendar theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -7361,6 +7375,11 @@ exports[`shapshots calendar theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -9447,6 +9466,11 @@ exports[`shapshots calendar theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -11533,6 +11557,11 @@ exports[`shapshots calendar theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -15026,6 +15055,20 @@ exports[`shapshots calendarDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -20213,6 +20256,11 @@ exports[`shapshots calendarDark theme should match pixelify theme snapshot 1`] = "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -22299,6 +22347,11 @@ exports[`shapshots calendarDark theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -24385,6 +24438,11 @@ exports[`shapshots calendarDark theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -26128,6 +26186,20 @@ exports[`shapshots calls theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -30389,6 +30461,11 @@ exports[`shapshots calls theme should match pixelify theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -31762,6 +31839,11 @@ exports[`shapshots calls theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -33135,6 +33217,11 @@ exports[`shapshots calls theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -35783,6 +35870,20 @@ exports[`shapshots cloud theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -40904,6 +41005,11 @@ exports[`shapshots cloud theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -42771,6 +42877,11 @@ exports[`shapshots cloud theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -44638,6 +44749,11 @@ exports[`shapshots cloud theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -47420,6 +47536,20 @@ exports[`shapshots cloudDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -52415,6 +52545,11 @@ exports[`shapshots cloudDark theme should match pixelify theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -54243,6 +54378,11 @@ exports[`shapshots cloudDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -56071,6 +56211,11 @@ exports[`shapshots cloudDark theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -57772,6 +57917,20 @@ exports[`shapshots dobro theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -58377,15 +58536,15 @@ exports[`shapshots dobro theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -60950,6 +61109,11 @@ exports[`shapshots dobro theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -61166,9 +61330,9 @@ exports[`shapshots dobro theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -61995,6 +62159,11 @@ exports[`shapshots dobro theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -62211,9 +62380,9 @@ exports[`shapshots dobro theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -63040,6 +63209,11 @@ exports[`shapshots dobro theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -63256,9 +63430,9 @@ exports[`shapshots dobro theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -64325,6 +64499,20 @@ exports[`shapshots dobroDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -64930,15 +65118,15 @@ exports[`shapshots dobroDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -67507,6 +67695,11 @@ exports[`shapshots dobroDark theme should match pixelify theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -67723,9 +67916,9 @@ exports[`shapshots dobroDark theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -68553,6 +68746,11 @@ exports[`shapshots dobroDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -68769,9 +68967,9 @@ exports[`shapshots dobroDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -69599,6 +69797,11 @@ exports[`shapshots dobroDark theme should match root theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -69815,9 +70018,9 @@ exports[`shapshots dobroDark theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -70919,6 +71122,20 @@ exports[`shapshots home theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -75294,6 +75511,11 @@ exports[`shapshots home theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -76709,6 +76931,11 @@ exports[`shapshots home theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -78124,6 +78351,11 @@ exports[`shapshots home theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -79806,6 +80038,20 @@ exports[`shapshots homeDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -84177,6 +84423,11 @@ exports[`shapshots homeDark theme should match pixelify theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -85591,6 +85842,11 @@ exports[`shapshots homeDark theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -87005,6 +87261,11 @@ exports[`shapshots homeDark theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -88694,6 +88955,20 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -90560,7 +90835,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", @@ -93535,9 +93810,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": { @@ -93545,9 +93824,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": { @@ -93615,9 +93898,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": { @@ -93803,9 +94090,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": { @@ -94755,6 +95046,11 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -95419,7 +95715,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": { @@ -96138,10 +96434,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", @@ -96162,7 +96460,8 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -96218,7 +96517,8 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -96609,6 +96909,11 @@ exports[`shapshots media theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -97273,7 +97578,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": { @@ -97992,10 +98297,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)", @@ -98016,7 +98323,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)", @@ -98072,7 +98380,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)", @@ -98463,6 +98772,11 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -99127,7 +99441,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": { @@ -99846,10 +100160,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, @@ -99870,7 +100186,8 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -99926,7 +100243,8 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, @@ -100584,6 +100902,20 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -102450,7 +102782,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", @@ -105425,9 +105757,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": { @@ -105435,9 +105771,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": { @@ -105505,9 +105845,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": { @@ -105693,9 +106037,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": { @@ -106645,6 +106993,11 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -107309,7 +107662,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": { @@ -108028,10 +108381,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", @@ -108052,7 +108407,8 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -108108,7 +108464,8 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -108499,6 +108856,11 @@ exports[`shapshots mediaDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -109163,7 +109525,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": { @@ -109882,10 +110244,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)", @@ -109906,7 +110270,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)", @@ -109962,7 +110327,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)", @@ -110353,6 +110719,11 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -111017,7 +111388,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": { @@ -111736,10 +112107,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, @@ -111760,7 +112133,8 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -111816,7 +112190,8 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, @@ -112474,6 +112849,20 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -114354,7 +114743,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", @@ -117329,9 +117718,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": { @@ -117339,9 +117732,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": { @@ -117409,9 +117806,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": { @@ -117597,9 +117998,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": { @@ -118541,6 +118946,11 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -119210,7 +119620,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": { @@ -119929,10 +120339,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", @@ -119953,7 +120365,8 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -120009,7 +120422,8 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -120398,6 +120812,11 @@ exports[`shapshots mycom theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -121067,7 +121486,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": { @@ -121786,10 +122205,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)", @@ -121810,7 +122231,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)", @@ -121866,7 +122288,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)", @@ -122255,6 +122678,11 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -122924,7 +123352,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": { @@ -123643,10 +124071,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, @@ -123667,7 +124097,8 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -123723,7 +124154,8 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, @@ -124385,6 +124817,20 @@ exports[`shapshots octavius theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -131135,6 +131581,11 @@ exports[`shapshots octavius theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -133392,6 +133843,11 @@ exports[`shapshots octavius theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -135649,6 +136105,11 @@ exports[`shapshots octavius theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -138182,6 +138643,20 @@ exports[`shapshots octaviusCompact theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -144936,6 +145411,11 @@ exports[`shapshots octaviusCompact theme should match pixelify theme snapshot 1` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -147194,6 +147674,11 @@ exports[`shapshots octaviusCompact theme should match pseudo theme from CssVars "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -149452,6 +149937,11 @@ exports[`shapshots octaviusCompact theme should match root theme snapshot 1`] = "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -151986,6 +152476,20 @@ exports[`shapshots octaviusCompactDark theme should match cssVars snapshot 1`] = "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -158740,6 +159244,11 @@ exports[`shapshots octaviusCompactDark theme should match pixelify theme snapsho "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -160998,6 +161507,11 @@ exports[`shapshots octaviusCompactDark theme should match pseudo theme from CssV "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -163256,6 +163770,11 @@ exports[`shapshots octaviusCompactDark theme should match root theme snapshot 1` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -165790,6 +166309,20 @@ exports[`shapshots octaviusDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -172540,6 +173073,11 @@ exports[`shapshots octaviusDark theme should match pixelify theme snapshot 1`] = "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -174797,6 +175335,11 @@ exports[`shapshots octaviusDark theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -177054,6 +177597,11 @@ exports[`shapshots octaviusDark theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -179587,6 +180135,20 @@ exports[`shapshots octaviusVK theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -180416,15 +180978,15 @@ exports[`shapshots octaviusVK theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPaletteBlue1": { @@ -186289,6 +186851,11 @@ exports[`shapshots octaviusVK theme should match pixelify theme snapshot 1`] = ` "hover": "#E4E5E9", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -186585,9 +187152,9 @@ exports[`shapshots octaviusVK theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPaletteBlue1": { "active": "#264CEF", @@ -188529,6 +189096,11 @@ exports[`shapshots octaviusVK theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #E4E5E9)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -188825,9 +189397,9 @@ exports[`shapshots octaviusVK theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPaletteBlue1": { "active": "var(--vkui--color_palette_blue1--active, #264CEF)", @@ -190769,6 +191341,11 @@ exports[`shapshots octaviusVK theme should match root theme snapshot 1`] = ` "hover": "#E4E5E9", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -191065,9 +191642,9 @@ exports[`shapshots octaviusVK theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPaletteBlue1": { "active": "#264CEF", @@ -193285,6 +193862,20 @@ exports[`shapshots octaviusVKDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191A)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -194114,15 +194705,15 @@ exports[`shapshots octaviusVKDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPaletteBlue1": { @@ -199987,6 +200578,11 @@ exports[`shapshots octaviusVKDark theme should match pixelify theme snapshot 1`] "hover": "#2B2B2C", "normal": "#19191A", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -200283,9 +200879,9 @@ exports[`shapshots octaviusVKDark theme should match pixelify theme snapshot 1`] "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPaletteBlue1": { "active": "#3A5FFF", @@ -202227,6 +202823,11 @@ exports[`shapshots octaviusVKDark theme should match pseudo theme from CssVars 1 "hover": "var(--vkui--color_background_content--hover, #2B2B2C)", "normal": "var(--vkui--color_background_content, #19191A)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -202523,9 +203124,9 @@ exports[`shapshots octaviusVKDark theme should match pseudo theme from CssVars 1 "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPaletteBlue1": { "active": "var(--vkui--color_palette_blue1--active, #3A5FFF)", @@ -204467,6 +205068,11 @@ exports[`shapshots octaviusVKDark theme should match root theme snapshot 1`] = ` "hover": "#2B2B2C", "normal": "#19191A", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -204763,9 +205369,9 @@ exports[`shapshots octaviusVKDark theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPaletteBlue1": { "active": "#3A5FFF", @@ -206983,6 +207589,20 @@ exports[`shapshots octaviusWhite theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -213733,6 +214353,11 @@ exports[`shapshots octaviusWhite theme should match pixelify theme snapshot 1`] "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -215990,6 +216615,11 @@ exports[`shapshots octaviusWhite theme should match pseudo theme from CssVars 1` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -218247,6 +218877,11 @@ exports[`shapshots octaviusWhite theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -220780,6 +221415,20 @@ exports[`shapshots octaviusWhiteDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -227530,6 +228179,11 @@ exports[`shapshots octaviusWhiteDark theme should match pixelify theme snapshot "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -229787,6 +230441,11 @@ exports[`shapshots octaviusWhiteDark theme should match pseudo theme from CssVar "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -232044,6 +232703,11 @@ exports[`shapshots octaviusWhiteDark theme should match root theme snapshot 1`] "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -234559,6 +235223,20 @@ exports[`shapshots otvet theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -238694,6 +239372,11 @@ exports[`shapshots otvet theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -240020,6 +240703,11 @@ exports[`shapshots otvet theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -241346,6 +242034,11 @@ exports[`shapshots otvet theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -242939,6 +243632,20 @@ exports[`shapshots otvetDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #191919)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -247074,6 +247781,11 @@ exports[`shapshots otvetDark theme should match pixelify theme snapshot 1`] = ` "hover": "#2B2B2B", "normal": "#191919", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -248400,6 +249112,11 @@ exports[`shapshots otvetDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #2B2B2B)", "normal": "var(--vkui--color_background_content, #191919)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -249726,6 +250443,11 @@ exports[`shapshots otvetDark theme should match root theme snapshot 1`] = ` "hover": "#2B2B2B", "normal": "#191919", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -251323,6 +252045,20 @@ exports[`shapshots paradigmBase theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -255612,6 +256348,11 @@ exports[`shapshots paradigmBase theme should match pixelify theme snapshot 1`] = "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -256998,6 +257739,11 @@ exports[`shapshots paradigmBase theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -258384,6 +259130,11 @@ exports[`shapshots paradigmBase theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -260037,6 +260788,20 @@ exports[`shapshots paradigmBaseDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -264330,6 +265095,11 @@ exports[`shapshots paradigmBaseDark theme should match pixelify theme snapshot 1 "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -265717,6 +266487,11 @@ exports[`shapshots paradigmBaseDark theme should match pseudo theme from CssVars "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -267104,6 +267879,11 @@ exports[`shapshots paradigmBaseDark theme should match root theme snapshot 1`] = "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -268766,6 +269546,20 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -270646,7 +271440,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", @@ -273621,9 +274415,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": { @@ -273631,9 +274429,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": { @@ -273701,9 +274503,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": { @@ -273889,9 +274695,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": { @@ -274841,6 +275651,11 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -275510,7 +276325,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": { @@ -276229,10 +277044,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", @@ -276253,7 +277070,8 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "regular": "16px", }, "sizeButtonSmallHeight": { - "regular": "36px", + "compact": "28px", + "regular": "30px", }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": "16px", @@ -276309,7 +277127,8 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "regular": "8px", }, "sizeFieldHeight": { - "regular": "48px", + "compact": "36px", + "regular": "44px", }, "sizeFieldHorizontalMargin": { "compact": "16px", @@ -276700,6 +277519,11 @@ exports[`shapshots pharma theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -277369,7 +278193,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": { @@ -278088,10 +278912,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)", @@ -278112,7 +278938,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)", @@ -278168,7 +278995,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)", @@ -278559,6 +279387,11 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -279228,7 +280061,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": { @@ -279947,10 +280780,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, @@ -279971,7 +280806,8 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "regular": 16, }, "sizeButtonSmallHeight": { - "regular": 36, + "compact": 28, + "regular": 30, }, "sizeButtonTertiaryLargePaddingHorizontal": { "regular": 16, @@ -280027,7 +280863,8 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "regular": 8, }, "sizeFieldHeight": { - "regular": 48, + "compact": 36, + "regular": 44, }, "sizeFieldHorizontalMargin": { "compact": 16, @@ -280677,6 +281514,20 @@ exports[`shapshots portalUI theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -285286,6 +286137,11 @@ exports[`shapshots portalUI theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -286779,6 +287635,11 @@ exports[`shapshots portalUI theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -288272,6 +289133,11 @@ exports[`shapshots portalUI theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -290032,6 +290898,20 @@ exports[`shapshots portalUIDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -294637,6 +295517,11 @@ exports[`shapshots portalUIDark theme should match pixelify theme snapshot 1`] = "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -296129,6 +297014,11 @@ exports[`shapshots portalUIDark theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -297621,6 +298511,11 @@ exports[`shapshots portalUIDark theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -299396,6 +300291,20 @@ exports[`shapshots promo theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -304485,6 +305394,11 @@ exports[`shapshots promo theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -306111,6 +307025,11 @@ exports[`shapshots promo theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -307737,6 +308656,11 @@ exports[`shapshots promo theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -319652,6 +320576,20 @@ exports[`shapshots search theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -324947,6 +325885,11 @@ exports[`shapshots search theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -326589,6 +327532,11 @@ exports[`shapshots search theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -328231,6 +329179,11 @@ exports[`shapshots search theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -330140,6 +331093,20 @@ exports[`shapshots todo theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -334433,6 +335400,11 @@ exports[`shapshots todo theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -335820,6 +336792,11 @@ exports[`shapshots todo theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -337207,6 +338184,11 @@ exports[`shapshots todo theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -338809,6 +339791,20 @@ exports[`shapshots tutoria theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -339414,15 +340410,15 @@ exports[`shapshots tutoria theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -342507,6 +343503,11 @@ exports[`shapshots tutoria theme should match pixelify theme snapshot 1`] = ` "hover": "#F4F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#E9ECEF", "hover": "#F4F5F7", @@ -342723,9 +343724,9 @@ exports[`shapshots tutoria theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -343710,6 +344711,11 @@ exports[`shapshots tutoria theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F4F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #E9ECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F4F5F7)", @@ -343926,9 +344932,9 @@ exports[`shapshots tutoria theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -344913,6 +345919,11 @@ exports[`shapshots tutoria theme should match root theme snapshot 1`] = ` "hover": "#F4F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#E9ECEF", "hover": "#F4F5F7", @@ -345129,9 +346140,9 @@ exports[`shapshots tutoria theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -346356,6 +347367,20 @@ exports[`shapshots tutoriaDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #EBECEF)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #F5F5F7)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -346961,15 +347986,15 @@ exports[`shapshots tutoriaDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -350058,6 +351083,11 @@ exports[`shapshots tutoriaDark theme should match pixelify theme snapshot 1`] = "hover": "#18191B", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#EBECEF", + "hover": "#F5F5F7", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -350274,9 +351304,9 @@ exports[`shapshots tutoriaDark theme should match pixelify theme snapshot 1`] = "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#689EDD", @@ -351262,6 +352292,11 @@ exports[`shapshots tutoriaDark theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #18191B)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #EBECEF)", + "hover": "var(--vkui--color_background_content_inverse--hover, #F5F5F7)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -351478,9 +352513,9 @@ exports[`shapshots tutoriaDark theme should match pseudo theme from CssVars 1`] "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #689EDD)", @@ -352466,6 +353501,11 @@ exports[`shapshots tutoriaDark theme should match root theme snapshot 1`] = ` "hover": "#18191B", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#EBECEF", + "hover": "#F5F5F7", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -352682,9 +353722,9 @@ exports[`shapshots tutoriaDark theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#689EDD", @@ -353910,6 +354950,20 @@ exports[`shapshots vkAccessibility theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -354515,15 +355569,15 @@ exports[`shapshots vkAccessibility theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -357006,6 +358060,11 @@ exports[`shapshots vkAccessibility theme should match pixelify theme snapshot 1` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -357222,9 +358281,9 @@ exports[`shapshots vkAccessibility theme should match pixelify theme snapshot 1` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -358017,6 +359076,11 @@ exports[`shapshots vkAccessibility theme should match pseudo theme from CssVars "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -358233,9 +359297,9 @@ exports[`shapshots vkAccessibility theme should match pseudo theme from CssVars "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -359028,6 +360092,11 @@ exports[`shapshots vkAccessibility theme should match root theme snapshot 1`] = "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -359244,9 +360313,9 @@ exports[`shapshots vkAccessibility theme should match root theme snapshot 1`] = "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -360279,6 +361348,20 @@ exports[`shapshots vkAccessibilityDark theme should match cssVars snapshot 1`] = "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -360884,15 +361967,15 @@ exports[`shapshots vkAccessibilityDark theme should match cssVars snapshot 1`] = "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -363375,6 +364458,11 @@ exports[`shapshots vkAccessibilityDark theme should match pixelify theme snapsho "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -363591,9 +364679,9 @@ exports[`shapshots vkAccessibilityDark theme should match pixelify theme snapsho "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -364386,6 +365474,11 @@ exports[`shapshots vkAccessibilityDark theme should match pseudo theme from CssV "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -364602,9 +365695,9 @@ exports[`shapshots vkAccessibilityDark theme should match pseudo theme from CssV "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -365397,6 +366490,11 @@ exports[`shapshots vkAccessibilityDark theme should match root theme snapshot 1` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -365613,9 +366711,9 @@ exports[`shapshots vkAccessibilityDark theme should match root theme snapshot 1` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -366648,6 +367746,20 @@ exports[`shapshots vkAccessibilityIOS theme should match cssVars snapshot 1`] = "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -367253,15 +368365,15 @@ exports[`shapshots vkAccessibilityIOS theme should match cssVars snapshot 1`] = "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -369744,6 +370856,11 @@ exports[`shapshots vkAccessibilityIOS theme should match pixelify theme snapshot "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -369960,9 +371077,9 @@ exports[`shapshots vkAccessibilityIOS theme should match pixelify theme snapshot "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -370755,6 +371872,11 @@ exports[`shapshots vkAccessibilityIOS theme should match pseudo theme from CssVa "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -370971,9 +372093,9 @@ exports[`shapshots vkAccessibilityIOS theme should match pseudo theme from CssVa "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -371766,6 +372888,11 @@ exports[`shapshots vkAccessibilityIOS theme should match root theme snapshot 1`] "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -371982,9 +373109,9 @@ exports[`shapshots vkAccessibilityIOS theme should match root theme snapshot 1`] "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -373017,6 +374144,20 @@ exports[`shapshots vkAccessibilityIOSDark theme should match cssVars snapshot 1` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -373622,15 +374763,15 @@ exports[`shapshots vkAccessibilityIOSDark theme should match cssVars snapshot 1` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -376113,6 +377254,11 @@ exports[`shapshots vkAccessibilityIOSDark theme should match pixelify theme snap "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -376329,9 +377475,9 @@ exports[`shapshots vkAccessibilityIOSDark theme should match pixelify theme snap "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -377124,6 +378270,11 @@ exports[`shapshots vkAccessibilityIOSDark theme should match pseudo theme from C "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -377340,9 +378491,9 @@ exports[`shapshots vkAccessibilityIOSDark theme should match pseudo theme from C "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -378135,6 +379286,11 @@ exports[`shapshots vkAccessibilityIOSDark theme should match root theme snapshot "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -378351,9 +379507,9 @@ exports[`shapshots vkAccessibilityIOSDark theme should match root theme snapshot "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -379386,6 +380542,20 @@ exports[`shapshots vkBase theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -379991,15 +381161,15 @@ exports[`shapshots vkBase theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -382478,6 +383648,11 @@ exports[`shapshots vkBase theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -382694,9 +383869,9 @@ exports[`shapshots vkBase theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -383488,6 +384663,11 @@ exports[`shapshots vkBase theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -383704,9 +384884,9 @@ exports[`shapshots vkBase theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -384498,6 +385678,11 @@ exports[`shapshots vkBase theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -384714,9 +385899,9 @@ exports[`shapshots vkBase theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -385748,6 +386933,20 @@ exports[`shapshots vkBaseDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -386353,15 +387552,15 @@ exports[`shapshots vkBaseDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -388844,6 +390043,11 @@ exports[`shapshots vkBaseDark theme should match pixelify theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -389060,9 +390264,9 @@ exports[`shapshots vkBaseDark theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -389855,6 +391059,11 @@ exports[`shapshots vkBaseDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -390071,9 +391280,9 @@ exports[`shapshots vkBaseDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -390866,6 +392075,11 @@ exports[`shapshots vkBaseDark theme should match root theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -391082,9 +392296,9 @@ exports[`shapshots vkBaseDark theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -392117,6 +393331,20 @@ exports[`shapshots vkCom theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -392288,15 +393516,15 @@ exports[`shapshots vkCom theme should match cssVars snapshot 1`] = ` "colorBackgroundSecondaryAlpha": { "active": { "name": "--vkui--color_background_secondary_alpha--active", - "value": "var(--vkui--color_background_secondary_alpha--active, rgba(213, 226, 241, 0.99))", + "value": "var(--vkui--color_background_secondary_alpha--active, rgba(39, 63, 92, 0.15))", }, "hover": { "name": "--vkui--color_background_secondary_alpha--hover", - "value": "var(--vkui--color_background_secondary_alpha--hover, rgba(223, 234, 246, 0.99))", + "value": "var(--vkui--color_background_secondary_alpha--hover, rgba(39, 63, 92, 0.11))", }, "normal": { "name": "--vkui--color_background_secondary_alpha", - "value": "var(--vkui--color_background_secondary_alpha, rgba(235, 242, 250, 0.99))", + "value": "var(--vkui--color_background_secondary_alpha, rgba(39, 63, 92, 0.07))", }, }, "colorBackgroundTertiary": { @@ -395213,6 +396441,11 @@ exports[`shapshots vkCom theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -395274,9 +396507,9 @@ exports[`shapshots vkCom theme should match pixelify theme snapshot 1`] = ` "normal": "#F0F2F5", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(213, 226, 241, 0.99)", - "hover": "rgba(223, 234, 246, 0.99)", - "normal": "rgba(235, 242, 250, 0.99)", + "active": "rgba(39, 63, 92, 0.15)", + "hover": "rgba(39, 63, 92, 0.11)", + "normal": "rgba(39, 63, 92, 0.07)", }, "colorBackgroundTertiary": { "active": "#E6E8ED", @@ -396224,6 +397457,11 @@ exports[`shapshots vkCom theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -396285,9 +397523,9 @@ exports[`shapshots vkCom theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_background_secondary, #F0F2F5)", }, "colorBackgroundSecondaryAlpha": { - "active": "var(--vkui--color_background_secondary_alpha--active, rgba(213, 226, 241, 0.99))", - "hover": "var(--vkui--color_background_secondary_alpha--hover, rgba(223, 234, 246, 0.99))", - "normal": "var(--vkui--color_background_secondary_alpha, rgba(235, 242, 250, 0.99))", + "active": "var(--vkui--color_background_secondary_alpha--active, rgba(39, 63, 92, 0.15))", + "hover": "var(--vkui--color_background_secondary_alpha--hover, rgba(39, 63, 92, 0.11))", + "normal": "var(--vkui--color_background_secondary_alpha, rgba(39, 63, 92, 0.07))", }, "colorBackgroundTertiary": { "active": "var(--vkui--color_background_tertiary--active, #E6E8ED)", @@ -397235,6 +398473,11 @@ exports[`shapshots vkCom theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -397296,9 +398539,9 @@ exports[`shapshots vkCom theme should match root theme snapshot 1`] = ` "normal": "#F0F2F5", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(213, 226, 241, 0.99)", - "hover": "rgba(223, 234, 246, 0.99)", - "normal": "rgba(235, 242, 250, 0.99)", + "active": "rgba(39, 63, 92, 0.15)", + "hover": "rgba(39, 63, 92, 0.11)", + "normal": "rgba(39, 63, 92, 0.07)", }, "colorBackgroundTertiary": { "active": "#E6E8ED", @@ -398486,6 +399729,20 @@ exports[`shapshots vkComDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #222222)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -398657,7 +399914,7 @@ exports[`shapshots vkComDark theme should match cssVars snapshot 1`] = ` "colorBackgroundSecondaryAlpha": { "active": { "name": "--vkui--color_background_secondary_alpha--active", - "value": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.14))", + "value": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.16))", }, "hover": { "name": "--vkui--color_background_secondary_alpha--hover", @@ -398665,7 +399922,7 @@ exports[`shapshots vkComDark theme should match cssVars snapshot 1`] = ` }, "normal": { "name": "--vkui--color_background_secondary_alpha", - "value": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.10))", + "value": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.08))", }, }, "colorBackgroundTertiary": { @@ -400636,7 +401893,7 @@ exports[`shapshots vkComDark theme should match cssVars snapshot 1`] = ` }, "gradient": { "name": "--vkui--gradient", - "value": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%)", + "value": "var(--vkui--gradient, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%)", }, "gradientBlack": { "name": "--vkui--gradient_black", @@ -400644,7 +401901,7 @@ exports[`shapshots vkComDark theme should match cssVars snapshot 1`] = ` }, "gradientTint": { "name": "--vkui--gradient_tint", - "value": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%)", + "value": "var(--vkui--gradient_tint, rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%)", }, "gradientWhite": { "name": "--vkui--gradient_white", @@ -401582,6 +402839,11 @@ exports[`shapshots vkComDark theme should match pixelify theme snapshot 1`] = ` "hover": "#2B2B2B", "normal": "#222222", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -401643,9 +402905,9 @@ exports[`shapshots vkComDark theme should match pixelify theme snapshot 1`] = ` "normal": "#333333", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(255, 255, 255, 0.14)", + "active": "rgba(255, 255, 255, 0.16)", "hover": "rgba(255, 255, 255, 0.12)", - "normal": "rgba(255, 255, 255, 0.10)", + "normal": "rgba(255, 255, 255, 0.08)", }, "colorBackgroundTertiary": { "active": "#3A3A3A", @@ -402220,9 +403482,9 @@ exports[`shapshots vkComDark theme should match pixelify theme snapshot 1`] = ` "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%", + "gradient": "rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%", "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%", + "gradientTint": "rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%", "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, @@ -402593,6 +403855,11 @@ exports[`shapshots vkComDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #2B2B2B)", "normal": "var(--vkui--color_background_content, #222222)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -402654,9 +403921,9 @@ exports[`shapshots vkComDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_background_secondary, #333333)", }, "colorBackgroundSecondaryAlpha": { - "active": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.14))", + "active": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.16))", "hover": "var(--vkui--color_background_secondary_alpha--hover, rgba(255, 255, 255, 0.12))", - "normal": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.10))", + "normal": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.08))", }, "colorBackgroundTertiary": { "active": "var(--vkui--color_background_tertiary--active, #3A3A3A)", @@ -403231,9 +404498,9 @@ exports[`shapshots vkComDark theme should match pseudo theme from CssVars 1`] = "fontWeightBase1": "var(--vkui--font_weight_base1, 600)", "fontWeightBase2": "var(--vkui--font_weight_base2, 500)", "fontWeightBase3": "var(--vkui--font_weight_base3, 400)", - "gradient": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%)", + "gradient": "var(--vkui--gradient, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%)", "gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%)", - "gradientTint": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%)", + "gradientTint": "var(--vkui--gradient_tint, rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%)", "gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", "opacityDisable": "var(--vkui--opacity_disable, 0.4)", "opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)", @@ -403604,6 +404871,11 @@ exports[`shapshots vkComDark theme should match root theme snapshot 1`] = ` "hover": "#2B2B2B", "normal": "#222222", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -403665,9 +404937,9 @@ exports[`shapshots vkComDark theme should match root theme snapshot 1`] = ` "normal": "#333333", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(255, 255, 255, 0.14)", + "active": "rgba(255, 255, 255, 0.16)", "hover": "rgba(255, 255, 255, 0.12)", - "normal": "rgba(255, 255, 255, 0.10)", + "normal": "rgba(255, 255, 255, 0.08)", }, "colorBackgroundTertiary": { "active": "#3A3A3A", @@ -404242,9 +405514,9 @@ exports[`shapshots vkComDark theme should match root theme snapshot 1`] = ` "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%", + "gradient": "rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%", "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%", + "gradientTint": "rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%", "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, @@ -404855,6 +406127,20 @@ exports[`shapshots vkIOS theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -405460,15 +406746,15 @@ exports[`shapshots vkIOS theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -407951,6 +409237,11 @@ exports[`shapshots vkIOS theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -408167,9 +409458,9 @@ exports[`shapshots vkIOS theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -408962,6 +410253,11 @@ exports[`shapshots vkIOS theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -409178,9 +410474,9 @@ exports[`shapshots vkIOS theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -409973,6 +411269,11 @@ exports[`shapshots vkIOS theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -410189,9 +411490,9 @@ exports[`shapshots vkIOS theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -411224,6 +412525,20 @@ exports[`shapshots vkIOSDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -411829,15 +413144,15 @@ exports[`shapshots vkIOSDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -414320,6 +415635,11 @@ exports[`shapshots vkIOSDark theme should match pixelify theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -414536,9 +415856,9 @@ exports[`shapshots vkIOSDark theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -415331,6 +416651,11 @@ exports[`shapshots vkIOSDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -415547,9 +416872,9 @@ exports[`shapshots vkIOSDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -416342,6 +417667,11 @@ exports[`shapshots vkIOSDark theme should match root theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -416558,9 +417888,9 @@ exports[`shapshots vkIOSDark theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -417593,6 +418923,20 @@ exports[`shapshots vkIdOk theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -418198,15 +419542,15 @@ exports[`shapshots vkIdOk theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -420685,6 +422029,11 @@ exports[`shapshots vkIdOk theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -420901,9 +422250,9 @@ exports[`shapshots vkIdOk theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -421695,6 +423044,11 @@ exports[`shapshots vkIdOk theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -421911,9 +423265,9 @@ exports[`shapshots vkIdOk theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -422705,6 +424059,11 @@ exports[`shapshots vkIdOk theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -422921,9 +424280,9 @@ exports[`shapshots vkIdOk theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -423955,6 +425314,20 @@ exports[`shapshots vkIdOkDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -424560,15 +425933,15 @@ exports[`shapshots vkIdOkDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -427051,6 +428424,11 @@ exports[`shapshots vkIdOkDark theme should match pixelify theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -427267,9 +428645,9 @@ exports[`shapshots vkIdOkDark theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -428062,6 +429440,11 @@ exports[`shapshots vkIdOkDark theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -428278,9 +429661,9 @@ exports[`shapshots vkIdOkDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -429073,6 +430456,11 @@ exports[`shapshots vkIdOkDark theme should match root theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -429289,9 +430677,9 @@ exports[`shapshots vkIdOkDark theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -430324,6 +431712,20 @@ exports[`shapshots vkIdOkIOS theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -430929,15 +432331,15 @@ exports[`shapshots vkIdOkIOS theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -433420,6 +434822,11 @@ exports[`shapshots vkIdOkIOS theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -433636,9 +435043,9 @@ exports[`shapshots vkIdOkIOS theme should match pixelify theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -434431,6 +435838,11 @@ exports[`shapshots vkIdOkIOS theme should match pseudo theme from CssVars 1`] = "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -434647,9 +436059,9 @@ exports[`shapshots vkIdOkIOS theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -435442,6 +436854,11 @@ exports[`shapshots vkIdOkIOS theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -435658,9 +437075,9 @@ exports[`shapshots vkIdOkIOS theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -436693,6 +438110,20 @@ exports[`shapshots vkIdOkIOSDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -437298,15 +438729,15 @@ exports[`shapshots vkIdOkIOSDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -439789,6 +441220,11 @@ exports[`shapshots vkIdOkIOSDark theme should match pixelify theme snapshot 1`] "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -440005,9 +441441,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pixelify theme snapshot 1`] "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -440800,6 +442236,11 @@ exports[`shapshots vkIdOkIOSDark theme should match pseudo theme from CssVars 1` "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -441016,9 +442457,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pseudo theme from CssVars 1` "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -441811,6 +443252,11 @@ exports[`shapshots vkIdOkIOSDark theme should match root theme snapshot 1`] = ` "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -442027,9 +443473,9 @@ exports[`shapshots vkIdOkIOSDark theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -443062,6 +444508,20 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -443667,15 +445127,15 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -445324,19 +446784,19 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = ` }, "gradient": { "name": "--vkui--gradient", - "value": "var(--vkui--gradient, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", + "value": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%)", }, "gradientBlack": { "name": "--vkui--gradient_black", - "value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%)", + "value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)", }, "gradientTint": { "name": "--vkui--gradient_tint", - "value": "var(--vkui--gradient_tint, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.05) 15%, rgba(249, 249, 249, 0.2) 30%, rgba(249, 249, 249, 0.8) 70%, rgba(249, 249, 249, 0.95) 85%, rgba(249, 249, 249, 1) 100%)", + "value": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%)", }, "gradientWhite": { "name": "--vkui--gradient_white", - "value": "var(--vkui--gradient_white, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", + "value": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)", }, "opacityDisable": { "name": "--vkui--opacity_disable", @@ -446927,139 +448387,139 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = ` }, "vkontakteGradientAquamarineBlue": { "name": "--vkui--vkontakte_gradient_aquamarine_blue", - "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", + "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", }, "vkontakteGradientBlue": { "name": "--vkui--vkontakte_gradient_blue", - "value": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", + "value": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", }, "vkontakteGradientCandy": { "name": "--vkui--vkontakte_gradient_candy", - "value": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientCrimson": { "name": "--vkui--vkontakte_gradient_crimson", - "value": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", + "value": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", }, "vkontakteGradientDisco": { "name": "--vkui--vkontakte_gradient_disco", - "value": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", + "value": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", }, "vkontakteGradientEmerald": { "name": "--vkui--vkontakte_gradient_emerald", - "value": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", + "value": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", }, "vkontakteGradientFrost": { "name": "--vkui--vkontakte_gradient_frost", - "value": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", + "value": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", }, "vkontakteGradientGray": { "name": "--vkui--vkontakte_gradient_gray", - "value": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", + "value": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", }, "vkontakteGradientGreen": { "name": "--vkui--vkontakte_gradient_green", - "value": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", + "value": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", }, "vkontakteGradientHalloweenOrange": { "name": "--vkui--vkontakte_gradient_halloween_orange", - "value": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", + "value": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", }, "vkontakteGradientHalloweenViolet": { "name": "--vkui--vkontakte_gradient_halloween_violet", - "value": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", + "value": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", }, "vkontakteGradientLagoon": { "name": "--vkui--vkontakte_gradient_lagoon", - "value": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", + "value": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", }, "vkontakteGradientLavender": { "name": "--vkui--vkontakte_gradient_lavender", - "value": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", + "value": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", }, "vkontakteGradientMable": { "name": "--vkui--vkontakte_gradient_mable", - "value": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", + "value": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", }, "vkontakteGradientMarine": { "name": "--vkui--vkontakte_gradient_marine", - "value": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", + "value": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", }, "vkontakteGradientMidnight": { "name": "--vkui--vkontakte_gradient_midnight", - "value": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", + "value": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", }, "vkontakteGradientNewYear": { "name": "--vkui--vkontakte_gradient_new_year", - "value": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", + "value": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", }, "vkontakteGradientOrange": { "name": "--vkui--vkontakte_gradient_orange", - "value": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", + "value": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", }, "vkontakteGradientPink": { "name": "--vkui--vkontakte_gradient_pink", - "value": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientPurple": { "name": "--vkui--vkontakte_gradient_purple", - "value": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", + "value": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", }, "vkontakteGradientRaspberryPink": { "name": "--vkui--vkontakte_gradient_raspberry_pink", - "value": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", + "value": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", }, "vkontakteGradientRed": { "name": "--vkui--vkontakte_gradient_red", - "value": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", + "value": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", }, "vkontakteGradientRetrowave": { "name": "--vkui--vkontakte_gradient_retrowave", - "value": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", + "value": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", }, "vkontakteGradientSberkot": { "name": "--vkui--vkontakte_gradient_sberkot", - "value": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", + "value": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", }, "vkontakteGradientSunset": { "name": "--vkui--vkontakte_gradient_sunset", - "value": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientTurquoise": { "name": "--vkui--vkontakte_gradient_turquoise", - "value": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", + "value": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", }, "vkontakteGradientTwilight": { "name": "--vkui--vkontakte_gradient_twilight", - "value": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", + "value": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", }, "vkontakteGradientUnicorn": { "name": "--vkui--vkontakte_gradient_unicorn", - "value": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", + "value": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", }, "vkontakteGradientValentine": { "name": "--vkui--vkontakte_gradient_valentine", - "value": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", + "value": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", }, "vkontakteGradientViolet": { "name": "--vkui--vkontakte_gradient_violet", - "value": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", + "value": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", }, "vkontakteGradientWarmValentine": { "name": "--vkui--vkontakte_gradient_warm_valentine", - "value": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", + "value": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", }, "vkontakteGradientWomensDay": { "name": "--vkui--vkontakte_gradient_womens_day", - "value": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientYellow": { "name": "--vkui--vkontakte_gradient_yellow", - "value": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", + "value": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", }, "vkontakteGradientYellowBright": { "name": "--vkui--vkontakte_gradient_yellow_bright", - "value": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "value": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", }, "vkontakteImAttachTint": { "active": { @@ -447414,6 +448874,11 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1 "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -447630,9 +449095,9 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1 "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -448068,10 +449533,10 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1 "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", - "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.05) 15%, rgba(249, 249, 249, 0.2) 30%, rgba(249, 249, 249, 0.8) 70%, rgba(249, 249, 249, 0.95) 85%, rgba(249, 249, 249, 1) 100%", - "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", + "gradient": "var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%", + "gradientTint": "var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, "sizeArrow": { @@ -448589,40 +450054,40 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1 "hover": "#939CA9", "normal": "#99a2ad", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#2978D3", "hover": "#2B7CD9", @@ -448835,6 +450300,11 @@ exports[`shapshots vkontakteAndroid theme should match pseudo theme from CssVars "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -449051,9 +450521,9 @@ exports[`shapshots vkontakteAndroid theme should match pseudo theme from CssVars "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -449489,10 +450959,10 @@ exports[`shapshots vkontakteAndroid theme should match pseudo theme from CssVars "fontWeightBase1": "var(--vkui--font_weight_base1, 600)", "fontWeightBase2": "var(--vkui--font_weight_base2, 500)", "fontWeightBase3": "var(--vkui--font_weight_base3, 400)", - "gradient": "var(--vkui--gradient, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", - "gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%)", - "gradientTint": "var(--vkui--gradient_tint, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.05) 15%, rgba(249, 249, 249, 0.2) 30%, rgba(249, 249, 249, 0.8) 70%, rgba(249, 249, 249, 0.95) 85%, rgba(249, 249, 249, 1) 100%)", - "gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", + "gradient": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%)", + "gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)", + "gradientTint": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%)", + "gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)", "opacityDisable": "var(--vkui--opacity_disable, 0.4)", "opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)", "sizeArrow": { @@ -450010,40 +451480,40 @@ exports[`shapshots vkontakteAndroid theme should match pseudo theme from CssVars "hover": "var(--vkui--vkontakte_float_button_foreground--hover, #939CA9)", "normal": "var(--vkui--vkontakte_float_button_foreground, #99a2ad)", }, - "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", - "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", - "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", - "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", - "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", - "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", - "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", - "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", - "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", - "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", - "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", - "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", - "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", - "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", - "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", - "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", - "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", - "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", - "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", - "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", - "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", - "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", - "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", - "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", - "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", - "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", - "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", - "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", - "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", - "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", - "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", - "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", - "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", - "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", + "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", + "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", + "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", + "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", + "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", + "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", + "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", + "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", + "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", + "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", + "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", + "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", + "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", + "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", + "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", + "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", + "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", + "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", + "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", + "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", + "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", + "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", + "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", + "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", + "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", + "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", + "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", + "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", + "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", "vkontakteImAttachTint": { "active": "var(--vkui--vkontakte_im_attach_tint--active, #2978D3)", "hover": "var(--vkui--vkontakte_im_attach_tint--hover, #2B7CD9)", @@ -450256,6 +451726,11 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] = "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -450472,9 +451947,9 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] = "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -450910,10 +452385,10 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] = "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", - "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.05) 15%, rgba(249, 249, 249, 0.2) 30%, rgba(249, 249, 249, 0.8) 70%, rgba(249, 249, 249, 0.95) 85%, rgba(249, 249, 249, 1) 100%", - "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", + "gradient": "var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%", + "gradientTint": "var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, "sizeArrow": { @@ -451431,40 +452906,40 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] = "hover": "#939CA9", "normal": "#99a2ad", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#2978D3", "hover": "#2B7CD9", @@ -451917,6 +453392,20 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`] "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -452522,15 +454011,15 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`] "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -454179,19 +455668,19 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`] }, "gradient": { "name": "--vkui--gradient", - "value": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%)", + "value": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%)", }, "gradientBlack": { "name": "--vkui--gradient_black", - "value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%)", + "value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)", }, "gradientTint": { "name": "--vkui--gradient_tint", - "value": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%)", + "value": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%)", }, "gradientWhite": { "name": "--vkui--gradient_white", - "value": "var(--vkui--gradient_white, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", + "value": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)", }, "opacityDisable": { "name": "--vkui--opacity_disable", @@ -455782,139 +457271,139 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`] }, "vkontakteGradientAquamarineBlue": { "name": "--vkui--vkontakte_gradient_aquamarine_blue", - "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", + "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", }, "vkontakteGradientBlue": { "name": "--vkui--vkontakte_gradient_blue", - "value": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", + "value": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", }, "vkontakteGradientCandy": { "name": "--vkui--vkontakte_gradient_candy", - "value": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientCrimson": { "name": "--vkui--vkontakte_gradient_crimson", - "value": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", + "value": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", }, "vkontakteGradientDisco": { "name": "--vkui--vkontakte_gradient_disco", - "value": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", + "value": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", }, "vkontakteGradientEmerald": { "name": "--vkui--vkontakte_gradient_emerald", - "value": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", + "value": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", }, "vkontakteGradientFrost": { "name": "--vkui--vkontakte_gradient_frost", - "value": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", + "value": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", }, "vkontakteGradientGray": { "name": "--vkui--vkontakte_gradient_gray", - "value": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", + "value": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", }, "vkontakteGradientGreen": { "name": "--vkui--vkontakte_gradient_green", - "value": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", + "value": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", }, "vkontakteGradientHalloweenOrange": { "name": "--vkui--vkontakte_gradient_halloween_orange", - "value": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", + "value": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", }, "vkontakteGradientHalloweenViolet": { "name": "--vkui--vkontakte_gradient_halloween_violet", - "value": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", + "value": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", }, "vkontakteGradientLagoon": { "name": "--vkui--vkontakte_gradient_lagoon", - "value": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", + "value": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", }, "vkontakteGradientLavender": { "name": "--vkui--vkontakte_gradient_lavender", - "value": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", + "value": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", }, "vkontakteGradientMable": { "name": "--vkui--vkontakte_gradient_mable", - "value": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", + "value": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", }, "vkontakteGradientMarine": { "name": "--vkui--vkontakte_gradient_marine", - "value": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", + "value": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", }, "vkontakteGradientMidnight": { "name": "--vkui--vkontakte_gradient_midnight", - "value": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", + "value": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", }, "vkontakteGradientNewYear": { "name": "--vkui--vkontakte_gradient_new_year", - "value": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", + "value": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", }, "vkontakteGradientOrange": { "name": "--vkui--vkontakte_gradient_orange", - "value": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", + "value": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", }, "vkontakteGradientPink": { "name": "--vkui--vkontakte_gradient_pink", - "value": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientPurple": { "name": "--vkui--vkontakte_gradient_purple", - "value": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", + "value": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", }, "vkontakteGradientRaspberryPink": { "name": "--vkui--vkontakte_gradient_raspberry_pink", - "value": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", + "value": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", }, "vkontakteGradientRed": { "name": "--vkui--vkontakte_gradient_red", - "value": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", + "value": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", }, "vkontakteGradientRetrowave": { "name": "--vkui--vkontakte_gradient_retrowave", - "value": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", + "value": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", }, "vkontakteGradientSberkot": { "name": "--vkui--vkontakte_gradient_sberkot", - "value": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", + "value": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", }, "vkontakteGradientSunset": { "name": "--vkui--vkontakte_gradient_sunset", - "value": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientTurquoise": { "name": "--vkui--vkontakte_gradient_turquoise", - "value": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", + "value": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", }, "vkontakteGradientTwilight": { "name": "--vkui--vkontakte_gradient_twilight", - "value": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", + "value": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", }, "vkontakteGradientUnicorn": { "name": "--vkui--vkontakte_gradient_unicorn", - "value": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", + "value": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", }, "vkontakteGradientValentine": { "name": "--vkui--vkontakte_gradient_valentine", - "value": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", + "value": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", }, "vkontakteGradientViolet": { "name": "--vkui--vkontakte_gradient_violet", - "value": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", + "value": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", }, "vkontakteGradientWarmValentine": { "name": "--vkui--vkontakte_gradient_warm_valentine", - "value": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", + "value": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", }, "vkontakteGradientWomensDay": { "name": "--vkui--vkontakte_gradient_womens_day", - "value": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientYellow": { "name": "--vkui--vkontakte_gradient_yellow", - "value": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", + "value": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", }, "vkontakteGradientYellowBright": { "name": "--vkui--vkontakte_gradient_yellow_bright", - "value": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "value": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", }, "vkontakteImAttachTint": { "active": { @@ -456269,6 +457758,11 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -456485,9 +457979,9 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -456923,10 +458417,10 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%", - "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%", - "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", + "gradient": "var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%", + "gradientTint": "var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, "sizeArrow": { @@ -457444,40 +458938,40 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh "hover": "#ADB1B6", "normal": "#aaaeb3", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -457690,6 +459184,11 @@ exports[`shapshots vkontakteAndroidDark theme should match pseudo theme from Css "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -457906,9 +459405,9 @@ exports[`shapshots vkontakteAndroidDark theme should match pseudo theme from Css "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -458344,10 +459843,10 @@ exports[`shapshots vkontakteAndroidDark theme should match pseudo theme from Css "fontWeightBase1": "var(--vkui--font_weight_base1, 600)", "fontWeightBase2": "var(--vkui--font_weight_base2, 500)", "fontWeightBase3": "var(--vkui--font_weight_base3, 400)", - "gradient": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%)", - "gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%)", - "gradientTint": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%)", - "gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", + "gradient": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%)", + "gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)", + "gradientTint": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%)", + "gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)", "opacityDisable": "var(--vkui--opacity_disable, 0.4)", "opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)", "sizeArrow": { @@ -458865,40 +460364,40 @@ exports[`shapshots vkontakteAndroidDark theme should match pseudo theme from Css "hover": "var(--vkui--vkontakte_float_button_foreground--hover, #ADB1B6)", "normal": "var(--vkui--vkontakte_float_button_foreground, #aaaeb3)", }, - "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", - "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", - "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", - "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", - "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", - "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", - "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", - "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", - "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", - "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", - "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", - "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", - "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", - "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", - "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", - "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", - "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", - "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", - "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", - "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", - "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", - "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", - "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", - "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", - "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", - "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", - "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", - "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", - "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", - "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", - "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", - "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", - "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", - "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", + "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", + "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", + "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", + "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", + "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", + "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", + "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", + "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", + "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", + "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", + "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", + "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", + "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", + "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", + "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", + "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", + "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", + "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", + "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", + "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", + "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", + "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", + "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", + "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", + "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", + "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", + "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", + "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", + "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", "vkontakteImAttachTint": { "active": "var(--vkui--vkontakte_im_attach_tint--active, #D7D8DB)", "hover": "var(--vkui--vkontakte_im_attach_tint--hover, #EBEDF0)", @@ -459111,6 +460610,11 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1 "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -459327,9 +460831,9 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1 "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -459765,10 +461269,10 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1 "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%", - "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%", - "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", + "gradient": "var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%", + "gradientTint": "var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%", + "gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, "sizeArrow": { @@ -460286,40 +461790,40 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1 "hover": "#ADB1B6", "normal": "#aaaeb3", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -460772,6 +462276,20 @@ exports[`shapshots vkontakteCom theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -460943,15 +462461,15 @@ exports[`shapshots vkontakteCom theme should match cssVars snapshot 1`] = ` "colorBackgroundSecondaryAlpha": { "active": { "name": "--vkui--color_background_secondary_alpha--active", - "value": "var(--vkui--color_background_secondary_alpha--active, rgba(213, 226, 241, 0.99))", + "value": "var(--vkui--color_background_secondary_alpha--active, rgba(39, 63, 92, 0.15))", }, "hover": { "name": "--vkui--color_background_secondary_alpha--hover", - "value": "var(--vkui--color_background_secondary_alpha--hover, rgba(223, 234, 246, 0.99))", + "value": "var(--vkui--color_background_secondary_alpha--hover, rgba(39, 63, 92, 0.11))", }, "normal": { "name": "--vkui--color_background_secondary_alpha", - "value": "var(--vkui--color_background_secondary_alpha, rgba(235, 242, 250, 0.99))", + "value": "var(--vkui--color_background_secondary_alpha, rgba(39, 63, 92, 0.07))", }, }, "colorBackgroundTertiary": { @@ -464525,139 +466043,139 @@ exports[`shapshots vkontakteCom theme should match cssVars snapshot 1`] = ` }, "vkontakteGradientAquamarineBlue": { "name": "--vkui--vkontakte_gradient_aquamarine_blue", - "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", + "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", }, "vkontakteGradientBlue": { "name": "--vkui--vkontakte_gradient_blue", - "value": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", + "value": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", }, "vkontakteGradientCandy": { "name": "--vkui--vkontakte_gradient_candy", - "value": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientCrimson": { "name": "--vkui--vkontakte_gradient_crimson", - "value": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", + "value": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", }, "vkontakteGradientDisco": { "name": "--vkui--vkontakte_gradient_disco", - "value": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", + "value": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", }, "vkontakteGradientEmerald": { "name": "--vkui--vkontakte_gradient_emerald", - "value": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", + "value": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", }, "vkontakteGradientFrost": { "name": "--vkui--vkontakte_gradient_frost", - "value": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", + "value": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", }, "vkontakteGradientGray": { "name": "--vkui--vkontakte_gradient_gray", - "value": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", + "value": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", }, "vkontakteGradientGreen": { "name": "--vkui--vkontakte_gradient_green", - "value": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", + "value": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", }, "vkontakteGradientHalloweenOrange": { "name": "--vkui--vkontakte_gradient_halloween_orange", - "value": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", + "value": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", }, "vkontakteGradientHalloweenViolet": { "name": "--vkui--vkontakte_gradient_halloween_violet", - "value": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", + "value": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", }, "vkontakteGradientLagoon": { "name": "--vkui--vkontakte_gradient_lagoon", - "value": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", + "value": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", }, "vkontakteGradientLavender": { "name": "--vkui--vkontakte_gradient_lavender", - "value": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", + "value": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", }, "vkontakteGradientMable": { "name": "--vkui--vkontakte_gradient_mable", - "value": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", + "value": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", }, "vkontakteGradientMarine": { "name": "--vkui--vkontakte_gradient_marine", - "value": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", + "value": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", }, "vkontakteGradientMidnight": { "name": "--vkui--vkontakte_gradient_midnight", - "value": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", + "value": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", }, "vkontakteGradientNewYear": { "name": "--vkui--vkontakte_gradient_new_year", - "value": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", + "value": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", }, "vkontakteGradientOrange": { "name": "--vkui--vkontakte_gradient_orange", - "value": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", + "value": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", }, "vkontakteGradientPink": { "name": "--vkui--vkontakte_gradient_pink", - "value": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientPurple": { "name": "--vkui--vkontakte_gradient_purple", - "value": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", + "value": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", }, "vkontakteGradientRaspberryPink": { "name": "--vkui--vkontakte_gradient_raspberry_pink", - "value": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", + "value": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", }, "vkontakteGradientRed": { "name": "--vkui--vkontakte_gradient_red", - "value": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", + "value": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", }, "vkontakteGradientRetrowave": { "name": "--vkui--vkontakte_gradient_retrowave", - "value": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", + "value": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", }, "vkontakteGradientSberkot": { "name": "--vkui--vkontakte_gradient_sberkot", - "value": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", + "value": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", }, "vkontakteGradientSunset": { "name": "--vkui--vkontakte_gradient_sunset", - "value": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientTurquoise": { "name": "--vkui--vkontakte_gradient_turquoise", - "value": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", + "value": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", }, "vkontakteGradientTwilight": { "name": "--vkui--vkontakte_gradient_twilight", - "value": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", + "value": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", }, "vkontakteGradientUnicorn": { "name": "--vkui--vkontakte_gradient_unicorn", - "value": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", + "value": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", }, "vkontakteGradientValentine": { "name": "--vkui--vkontakte_gradient_valentine", - "value": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", + "value": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", }, "vkontakteGradientViolet": { "name": "--vkui--vkontakte_gradient_violet", - "value": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", + "value": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", }, "vkontakteGradientWarmValentine": { "name": "--vkui--vkontakte_gradient_warm_valentine", - "value": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", + "value": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", }, "vkontakteGradientWomensDay": { "name": "--vkui--vkontakte_gradient_womens_day", - "value": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientYellow": { "name": "--vkui--vkontakte_gradient_yellow", - "value": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", + "value": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", }, "vkontakteGradientYellowBright": { "name": "--vkui--vkontakte_gradient_yellow_bright", - "value": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "value": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", }, "vkontakteImAttachTint": { "active": { @@ -465012,6 +466530,11 @@ exports[`shapshots vkontakteCom theme should match pixelify theme snapshot 1`] = "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -465073,9 +466596,9 @@ exports[`shapshots vkontakteCom theme should match pixelify theme snapshot 1`] = "normal": "#F0F2F5", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(213, 226, 241, 0.99)", - "hover": "rgba(223, 234, 246, 0.99)", - "normal": "rgba(235, 242, 250, 0.99)", + "active": "rgba(39, 63, 92, 0.15)", + "hover": "rgba(39, 63, 92, 0.11)", + "normal": "rgba(39, 63, 92, 0.07)", }, "colorBackgroundTertiary": { "active": "#E6E8ED", @@ -466171,40 +467694,40 @@ exports[`shapshots vkontakteCom theme should match pixelify theme snapshot 1`] = "hover": "#939CA9", "normal": "#99a2ad", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#3F72B0", "hover": "#4177B5", @@ -466417,6 +467940,11 @@ exports[`shapshots vkontakteCom theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -466478,9 +468006,9 @@ exports[`shapshots vkontakteCom theme should match pseudo theme from CssVars 1`] "normal": "var(--vkui--color_background_secondary, #F0F2F5)", }, "colorBackgroundSecondaryAlpha": { - "active": "var(--vkui--color_background_secondary_alpha--active, rgba(213, 226, 241, 0.99))", - "hover": "var(--vkui--color_background_secondary_alpha--hover, rgba(223, 234, 246, 0.99))", - "normal": "var(--vkui--color_background_secondary_alpha, rgba(235, 242, 250, 0.99))", + "active": "var(--vkui--color_background_secondary_alpha--active, rgba(39, 63, 92, 0.15))", + "hover": "var(--vkui--color_background_secondary_alpha--hover, rgba(39, 63, 92, 0.11))", + "normal": "var(--vkui--color_background_secondary_alpha, rgba(39, 63, 92, 0.07))", }, "colorBackgroundTertiary": { "active": "var(--vkui--color_background_tertiary--active, #E6E8ED)", @@ -467576,40 +469104,40 @@ exports[`shapshots vkontakteCom theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--vkontakte_float_button_foreground--hover, #939CA9)", "normal": "var(--vkui--vkontakte_float_button_foreground, #99a2ad)", }, - "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", - "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", - "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", - "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", - "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", - "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", - "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", - "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", - "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", - "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", - "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", - "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", - "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", - "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", - "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", - "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", - "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", - "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", - "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", - "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", - "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", - "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", - "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", - "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", - "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", - "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", - "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", - "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", - "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", - "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", - "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", - "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", - "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", - "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", + "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", + "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", + "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", + "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", + "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", + "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", + "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", + "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", + "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", + "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", + "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", + "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", + "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", + "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", + "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", + "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", + "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", + "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", + "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", + "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", + "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", + "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", + "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", + "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", + "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", + "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", + "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", + "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", + "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", "vkontakteImAttachTint": { "active": "var(--vkui--vkontakte_im_attach_tint--active, #3F72B0)", "hover": "var(--vkui--vkontakte_im_attach_tint--hover, #4177B5)", @@ -467822,6 +469350,11 @@ exports[`shapshots vkontakteCom theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -467883,9 +469416,9 @@ exports[`shapshots vkontakteCom theme should match root theme snapshot 1`] = ` "normal": "#F0F2F5", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(213, 226, 241, 0.99)", - "hover": "rgba(223, 234, 246, 0.99)", - "normal": "rgba(235, 242, 250, 0.99)", + "active": "rgba(39, 63, 92, 0.15)", + "hover": "rgba(39, 63, 92, 0.11)", + "normal": "rgba(39, 63, 92, 0.07)", }, "colorBackgroundTertiary": { "active": "#E6E8ED", @@ -468981,40 +470514,40 @@ exports[`shapshots vkontakteCom theme should match root theme snapshot 1`] = ` "hover": "#939CA9", "normal": "#99a2ad", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#3F72B0", "hover": "#4177B5", @@ -469467,6 +471000,20 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #222222)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -469638,7 +471185,7 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` "colorBackgroundSecondaryAlpha": { "active": { "name": "--vkui--color_background_secondary_alpha--active", - "value": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.14))", + "value": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.16))", }, "hover": { "name": "--vkui--color_background_secondary_alpha--hover", @@ -469646,7 +471193,7 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` }, "normal": { "name": "--vkui--color_background_secondary_alpha", - "value": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.10))", + "value": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.08))", }, }, "colorBackgroundTertiary": { @@ -471617,7 +473164,7 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` }, "gradient": { "name": "--vkui--gradient", - "value": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%)", + "value": "var(--vkui--gradient, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%)", }, "gradientBlack": { "name": "--vkui--gradient_black", @@ -471625,7 +473172,7 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` }, "gradientTint": { "name": "--vkui--gradient_tint", - "value": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%)", + "value": "var(--vkui--gradient_tint, rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%)", }, "gradientWhite": { "name": "--vkui--gradient_white", @@ -473220,139 +474767,139 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` }, "vkontakteGradientAquamarineBlue": { "name": "--vkui--vkontakte_gradient_aquamarine_blue", - "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", + "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", }, "vkontakteGradientBlue": { "name": "--vkui--vkontakte_gradient_blue", - "value": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", + "value": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", }, "vkontakteGradientCandy": { "name": "--vkui--vkontakte_gradient_candy", - "value": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientCrimson": { "name": "--vkui--vkontakte_gradient_crimson", - "value": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", + "value": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", }, "vkontakteGradientDisco": { "name": "--vkui--vkontakte_gradient_disco", - "value": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", + "value": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", }, "vkontakteGradientEmerald": { "name": "--vkui--vkontakte_gradient_emerald", - "value": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", + "value": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", }, "vkontakteGradientFrost": { "name": "--vkui--vkontakte_gradient_frost", - "value": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", + "value": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", }, "vkontakteGradientGray": { "name": "--vkui--vkontakte_gradient_gray", - "value": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", + "value": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", }, "vkontakteGradientGreen": { "name": "--vkui--vkontakte_gradient_green", - "value": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", + "value": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", }, "vkontakteGradientHalloweenOrange": { "name": "--vkui--vkontakte_gradient_halloween_orange", - "value": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", + "value": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", }, "vkontakteGradientHalloweenViolet": { "name": "--vkui--vkontakte_gradient_halloween_violet", - "value": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", + "value": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", }, "vkontakteGradientLagoon": { "name": "--vkui--vkontakte_gradient_lagoon", - "value": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", + "value": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", }, "vkontakteGradientLavender": { "name": "--vkui--vkontakte_gradient_lavender", - "value": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", + "value": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", }, "vkontakteGradientMable": { "name": "--vkui--vkontakte_gradient_mable", - "value": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", + "value": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", }, "vkontakteGradientMarine": { "name": "--vkui--vkontakte_gradient_marine", - "value": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", + "value": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", }, "vkontakteGradientMidnight": { "name": "--vkui--vkontakte_gradient_midnight", - "value": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", + "value": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", }, "vkontakteGradientNewYear": { "name": "--vkui--vkontakte_gradient_new_year", - "value": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", + "value": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", }, "vkontakteGradientOrange": { "name": "--vkui--vkontakte_gradient_orange", - "value": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", + "value": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", }, "vkontakteGradientPink": { "name": "--vkui--vkontakte_gradient_pink", - "value": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientPurple": { "name": "--vkui--vkontakte_gradient_purple", - "value": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", + "value": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", }, "vkontakteGradientRaspberryPink": { "name": "--vkui--vkontakte_gradient_raspberry_pink", - "value": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", + "value": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", }, "vkontakteGradientRed": { "name": "--vkui--vkontakte_gradient_red", - "value": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", + "value": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", }, "vkontakteGradientRetrowave": { "name": "--vkui--vkontakte_gradient_retrowave", - "value": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", + "value": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", }, "vkontakteGradientSberkot": { "name": "--vkui--vkontakte_gradient_sberkot", - "value": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", + "value": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", }, "vkontakteGradientSunset": { "name": "--vkui--vkontakte_gradient_sunset", - "value": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientTurquoise": { "name": "--vkui--vkontakte_gradient_turquoise", - "value": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", + "value": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", }, "vkontakteGradientTwilight": { "name": "--vkui--vkontakte_gradient_twilight", - "value": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", + "value": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", }, "vkontakteGradientUnicorn": { "name": "--vkui--vkontakte_gradient_unicorn", - "value": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", + "value": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", }, "vkontakteGradientValentine": { "name": "--vkui--vkontakte_gradient_valentine", - "value": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", + "value": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", }, "vkontakteGradientViolet": { "name": "--vkui--vkontakte_gradient_violet", - "value": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", + "value": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", }, "vkontakteGradientWarmValentine": { "name": "--vkui--vkontakte_gradient_warm_valentine", - "value": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", + "value": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", }, "vkontakteGradientWomensDay": { "name": "--vkui--vkontakte_gradient_womens_day", - "value": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientYellow": { "name": "--vkui--vkontakte_gradient_yellow", - "value": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", + "value": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", }, "vkontakteGradientYellowBright": { "name": "--vkui--vkontakte_gradient_yellow_bright", - "value": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "value": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", }, "vkontakteImAttachTint": { "active": { @@ -473707,6 +475254,11 @@ exports[`shapshots vkontakteComDark theme should match pixelify theme snapshot 1 "hover": "#2B2B2B", "normal": "#222222", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -473768,9 +475320,9 @@ exports[`shapshots vkontakteComDark theme should match pixelify theme snapshot 1 "normal": "#333333", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(255, 255, 255, 0.14)", + "active": "rgba(255, 255, 255, 0.16)", "hover": "rgba(255, 255, 255, 0.12)", - "normal": "rgba(255, 255, 255, 0.10)", + "normal": "rgba(255, 255, 255, 0.08)", }, "colorBackgroundTertiary": { "active": "#3A3A3A", @@ -474345,9 +475897,9 @@ exports[`shapshots vkontakteComDark theme should match pixelify theme snapshot 1 "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%", + "gradient": "rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%", "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%", + "gradientTint": "rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%", "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, @@ -474866,40 +476418,40 @@ exports[`shapshots vkontakteComDark theme should match pixelify theme snapshot 1 "hover": "#B5B5B5", "normal": "#b2b2b2", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -475112,6 +476664,11 @@ exports[`shapshots vkontakteComDark theme should match pseudo theme from CssVars "hover": "var(--vkui--color_background_content--hover, #2B2B2B)", "normal": "var(--vkui--color_background_content, #222222)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -475173,9 +476730,9 @@ exports[`shapshots vkontakteComDark theme should match pseudo theme from CssVars "normal": "var(--vkui--color_background_secondary, #333333)", }, "colorBackgroundSecondaryAlpha": { - "active": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.14))", + "active": "var(--vkui--color_background_secondary_alpha--active, rgba(255, 255, 255, 0.16))", "hover": "var(--vkui--color_background_secondary_alpha--hover, rgba(255, 255, 255, 0.12))", - "normal": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.10))", + "normal": "var(--vkui--color_background_secondary_alpha, rgba(255, 255, 255, 0.08))", }, "colorBackgroundTertiary": { "active": "var(--vkui--color_background_tertiary--active, #3A3A3A)", @@ -475750,9 +477307,9 @@ exports[`shapshots vkontakteComDark theme should match pseudo theme from CssVars "fontWeightBase1": "var(--vkui--font_weight_base1, 600)", "fontWeightBase2": "var(--vkui--font_weight_base2, 500)", "fontWeightBase3": "var(--vkui--font_weight_base3, 400)", - "gradient": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%)", + "gradient": "var(--vkui--gradient, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%)", "gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%)", - "gradientTint": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%)", + "gradientTint": "var(--vkui--gradient_tint, rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%)", "gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%)", "opacityDisable": "var(--vkui--opacity_disable, 0.4)", "opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)", @@ -476271,40 +477828,40 @@ exports[`shapshots vkontakteComDark theme should match pseudo theme from CssVars "hover": "var(--vkui--vkontakte_float_button_foreground--hover, #B5B5B5)", "normal": "var(--vkui--vkontakte_float_button_foreground, #b2b2b2)", }, - "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", - "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", - "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", - "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", - "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", - "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", - "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", - "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", - "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", - "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", - "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", - "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", - "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", - "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", - "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", - "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", - "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", - "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", - "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", - "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", - "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", - "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", - "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", - "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", - "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", - "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", - "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", - "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", - "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", - "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", - "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", - "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", - "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", - "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", + "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", + "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", + "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", + "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", + "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", + "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", + "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", + "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", + "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", + "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", + "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", + "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", + "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", + "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", + "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", + "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", + "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", + "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", + "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", + "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", + "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", + "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", + "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", + "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", + "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", + "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", + "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", + "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", + "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", "vkontakteImAttachTint": { "active": "var(--vkui--vkontakte_im_attach_tint--active, #D7D8DB)", "hover": "var(--vkui--vkontakte_im_attach_tint--hover, #EBEDF0)", @@ -476517,6 +478074,11 @@ exports[`shapshots vkontakteComDark theme should match root theme snapshot 1`] = "hover": "#2B2B2B", "normal": "#222222", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -476578,9 +478140,9 @@ exports[`shapshots vkontakteComDark theme should match root theme snapshot 1`] = "normal": "#333333", }, "colorBackgroundSecondaryAlpha": { - "active": "rgba(255, 255, 255, 0.14)", + "active": "rgba(255, 255, 255, 0.16)", "hover": "rgba(255, 255, 255, 0.12)", - "normal": "rgba(255, 255, 255, 0.10)", + "normal": "rgba(255, 255, 255, 0.08)", }, "colorBackgroundTertiary": { "active": "#3A3A3A", @@ -477155,9 +478717,9 @@ exports[`shapshots vkontakteComDark theme should match root theme snapshot 1`] = "fontWeightBase1": 600, "fontWeightBase2": 500, "fontWeightBase3": 400, - "gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, rgba(25, 25, 26, 1) 100%", + "gradient": "rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.05) 15%, rgba(34, 34, 34, 0.2) 30%, rgba(34, 34, 34, 0.8) 70%, rgba(34, 34, 34, 0.95) 85%, rgba(34, 34, 34, 1) 100%", "gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%", - "gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, rgba(32, 32, 33, 1) 100%", + "gradientTint": "rgba(41, 41, 41, 0) 0%, rgba(41, 41, 41, 0.05) 15%, rgba(41, 41, 41, 0.2) 30%, rgba(41, 41, 41, 0.8) 70%, rgba(41, 41, 41, 0.95) 85%, rgba(41, 41, 41, 1) 100%", "gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%", "opacityDisable": 0.4, "opacityDisableAccessibility": 0.64, @@ -477676,40 +479238,40 @@ exports[`shapshots vkontakteComDark theme should match root theme snapshot 1`] = "hover": "#B5B5B5", "normal": "#b2b2b2", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -478162,6 +479724,20 @@ exports[`shapshots vkontakteIOS theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #ffffff)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #17181D)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #18191B)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #19191A)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -478767,15 +480343,15 @@ exports[`shapshots vkontakteIOS theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -481915,139 +483491,139 @@ exports[`shapshots vkontakteIOS theme should match cssVars snapshot 1`] = ` }, "vkontakteGradientAquamarineBlue": { "name": "--vkui--vkontakte_gradient_aquamarine_blue", - "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", + "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", }, "vkontakteGradientBlue": { "name": "--vkui--vkontakte_gradient_blue", - "value": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", + "value": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", }, "vkontakteGradientCandy": { "name": "--vkui--vkontakte_gradient_candy", - "value": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientCrimson": { "name": "--vkui--vkontakte_gradient_crimson", - "value": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", + "value": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", }, "vkontakteGradientDisco": { "name": "--vkui--vkontakte_gradient_disco", - "value": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", + "value": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", }, "vkontakteGradientEmerald": { "name": "--vkui--vkontakte_gradient_emerald", - "value": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", + "value": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", }, "vkontakteGradientFrost": { "name": "--vkui--vkontakte_gradient_frost", - "value": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", + "value": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", }, "vkontakteGradientGray": { "name": "--vkui--vkontakte_gradient_gray", - "value": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", + "value": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", }, "vkontakteGradientGreen": { "name": "--vkui--vkontakte_gradient_green", - "value": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", + "value": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", }, "vkontakteGradientHalloweenOrange": { "name": "--vkui--vkontakte_gradient_halloween_orange", - "value": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", + "value": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", }, "vkontakteGradientHalloweenViolet": { "name": "--vkui--vkontakte_gradient_halloween_violet", - "value": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", + "value": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", }, "vkontakteGradientLagoon": { "name": "--vkui--vkontakte_gradient_lagoon", - "value": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", + "value": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", }, "vkontakteGradientLavender": { "name": "--vkui--vkontakte_gradient_lavender", - "value": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", + "value": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", }, "vkontakteGradientMable": { "name": "--vkui--vkontakte_gradient_mable", - "value": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", + "value": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", }, "vkontakteGradientMarine": { "name": "--vkui--vkontakte_gradient_marine", - "value": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", + "value": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", }, "vkontakteGradientMidnight": { "name": "--vkui--vkontakte_gradient_midnight", - "value": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", + "value": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", }, "vkontakteGradientNewYear": { "name": "--vkui--vkontakte_gradient_new_year", - "value": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", + "value": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", }, "vkontakteGradientOrange": { "name": "--vkui--vkontakte_gradient_orange", - "value": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", + "value": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", }, "vkontakteGradientPink": { "name": "--vkui--vkontakte_gradient_pink", - "value": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientPurple": { "name": "--vkui--vkontakte_gradient_purple", - "value": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", + "value": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", }, "vkontakteGradientRaspberryPink": { "name": "--vkui--vkontakte_gradient_raspberry_pink", - "value": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", + "value": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", }, "vkontakteGradientRed": { "name": "--vkui--vkontakte_gradient_red", - "value": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", + "value": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", }, "vkontakteGradientRetrowave": { "name": "--vkui--vkontakte_gradient_retrowave", - "value": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", + "value": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", }, "vkontakteGradientSberkot": { "name": "--vkui--vkontakte_gradient_sberkot", - "value": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", + "value": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", }, "vkontakteGradientSunset": { "name": "--vkui--vkontakte_gradient_sunset", - "value": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientTurquoise": { "name": "--vkui--vkontakte_gradient_turquoise", - "value": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", + "value": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", }, "vkontakteGradientTwilight": { "name": "--vkui--vkontakte_gradient_twilight", - "value": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", + "value": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", }, "vkontakteGradientUnicorn": { "name": "--vkui--vkontakte_gradient_unicorn", - "value": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", + "value": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", }, "vkontakteGradientValentine": { "name": "--vkui--vkontakte_gradient_valentine", - "value": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", + "value": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", }, "vkontakteGradientViolet": { "name": "--vkui--vkontakte_gradient_violet", - "value": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", + "value": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", }, "vkontakteGradientWarmValentine": { "name": "--vkui--vkontakte_gradient_warm_valentine", - "value": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", + "value": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", }, "vkontakteGradientWomensDay": { "name": "--vkui--vkontakte_gradient_womens_day", - "value": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientYellow": { "name": "--vkui--vkontakte_gradient_yellow", - "value": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", + "value": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", }, "vkontakteGradientYellowBright": { "name": "--vkui--vkontakte_gradient_yellow_bright", - "value": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "value": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", }, "vkontakteImAttachTint": { "active": { @@ -482402,6 +483978,11 @@ exports[`shapshots vkontakteIOS theme should match pixelify theme snapshot 1`] = "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -482618,9 +484199,9 @@ exports[`shapshots vkontakteIOS theme should match pixelify theme snapshot 1`] = "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -483561,40 +485142,40 @@ exports[`shapshots vkontakteIOS theme should match pixelify theme snapshot 1`] = "hover": "#939CA9", "normal": "#99a2ad", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#2978D3", "hover": "#2B7CD9", @@ -483807,6 +485388,11 @@ exports[`shapshots vkontakteIOS theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #ffffff)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #17181D)", + "hover": "var(--vkui--color_background_content_inverse--hover, #18191B)", + "normal": "var(--vkui--color_background_content_inverse, #19191A)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -484023,9 +485609,9 @@ exports[`shapshots vkontakteIOS theme should match pseudo theme from CssVars 1`] "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(44, 45, 46, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(44, 45, 46, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(44, 45, 46, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #237EDD)", @@ -484966,40 +486552,40 @@ exports[`shapshots vkontakteIOS theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--vkontakte_float_button_foreground--hover, #939CA9)", "normal": "var(--vkui--vkontakte_float_button_foreground, #99a2ad)", }, - "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", - "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", - "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", - "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", - "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", - "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", - "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", - "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", - "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", - "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", - "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", - "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", - "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", - "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", - "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", - "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", - "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", - "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", - "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", - "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", - "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", - "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", - "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", - "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", - "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", - "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", - "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", - "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", - "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", - "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", - "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", - "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", - "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", - "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", + "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", + "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", + "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", + "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", + "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", + "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", + "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", + "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", + "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", + "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", + "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", + "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", + "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", + "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", + "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", + "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", + "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", + "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", + "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", + "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", + "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", + "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", + "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", + "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", + "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", + "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", + "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", + "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", + "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", "vkontakteImAttachTint": { "active": "var(--vkui--vkontakte_im_attach_tint--active, #2978D3)", "hover": "var(--vkui--vkontakte_im_attach_tint--hover, #2B7CD9)", @@ -485212,6 +486798,11 @@ exports[`shapshots vkontakteIOS theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#ffffff", }, + "colorBackgroundContentInverse": { + "active": "#17181D", + "hover": "#18191B", + "normal": "#19191A", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -485428,9 +487019,9 @@ exports[`shapshots vkontakteIOS theme should match root theme snapshot 1`] = ` "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(44, 45, 46, 0.58)", - "hover": "rgba(44, 45, 46, 0.54)", - "normal": "rgba(44, 45, 46, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#237EDD", @@ -486371,40 +487962,40 @@ exports[`shapshots vkontakteIOS theme should match root theme snapshot 1`] = ` "hover": "#939CA9", "normal": "#99a2ad", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#2978D3", "hover": "#2B7CD9", @@ -486857,6 +488448,20 @@ exports[`shapshots vkontakteIOSDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #19191a)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -487462,15 +489067,15 @@ exports[`shapshots vkontakteIOSDark theme should match cssVars snapshot 1`] = ` "colorOverlaySecondary": { "active": { "name": "--vkui--color_overlay_secondary--active", - "value": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", + "value": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", }, "hover": { "name": "--vkui--color_overlay_secondary--hover", - "value": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", + "value": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", }, "normal": { "name": "--vkui--color_overlay_secondary", - "value": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "value": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, }, "colorPanelHeaderIcon": { @@ -490610,139 +492215,139 @@ exports[`shapshots vkontakteIOSDark theme should match cssVars snapshot 1`] = ` }, "vkontakteGradientAquamarineBlue": { "name": "--vkui--vkontakte_gradient_aquamarine_blue", - "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", + "value": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", }, "vkontakteGradientBlue": { "name": "--vkui--vkontakte_gradient_blue", - "value": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", + "value": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", }, "vkontakteGradientCandy": { "name": "--vkui--vkontakte_gradient_candy", - "value": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientCrimson": { "name": "--vkui--vkontakte_gradient_crimson", - "value": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", + "value": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", }, "vkontakteGradientDisco": { "name": "--vkui--vkontakte_gradient_disco", - "value": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", + "value": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", }, "vkontakteGradientEmerald": { "name": "--vkui--vkontakte_gradient_emerald", - "value": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", + "value": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", }, "vkontakteGradientFrost": { "name": "--vkui--vkontakte_gradient_frost", - "value": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", + "value": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", }, "vkontakteGradientGray": { "name": "--vkui--vkontakte_gradient_gray", - "value": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", + "value": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", }, "vkontakteGradientGreen": { "name": "--vkui--vkontakte_gradient_green", - "value": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", + "value": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", }, "vkontakteGradientHalloweenOrange": { "name": "--vkui--vkontakte_gradient_halloween_orange", - "value": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", + "value": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", }, "vkontakteGradientHalloweenViolet": { "name": "--vkui--vkontakte_gradient_halloween_violet", - "value": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", + "value": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", }, "vkontakteGradientLagoon": { "name": "--vkui--vkontakte_gradient_lagoon", - "value": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", + "value": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", }, "vkontakteGradientLavender": { "name": "--vkui--vkontakte_gradient_lavender", - "value": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", + "value": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", }, "vkontakteGradientMable": { "name": "--vkui--vkontakte_gradient_mable", - "value": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", + "value": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", }, "vkontakteGradientMarine": { "name": "--vkui--vkontakte_gradient_marine", - "value": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", + "value": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", }, "vkontakteGradientMidnight": { "name": "--vkui--vkontakte_gradient_midnight", - "value": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", + "value": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", }, "vkontakteGradientNewYear": { "name": "--vkui--vkontakte_gradient_new_year", - "value": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", + "value": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", }, "vkontakteGradientOrange": { "name": "--vkui--vkontakte_gradient_orange", - "value": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", + "value": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", }, "vkontakteGradientPink": { "name": "--vkui--vkontakte_gradient_pink", - "value": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientPurple": { "name": "--vkui--vkontakte_gradient_purple", - "value": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", + "value": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", }, "vkontakteGradientRaspberryPink": { "name": "--vkui--vkontakte_gradient_raspberry_pink", - "value": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", + "value": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", }, "vkontakteGradientRed": { "name": "--vkui--vkontakte_gradient_red", - "value": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", + "value": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", }, "vkontakteGradientRetrowave": { "name": "--vkui--vkontakte_gradient_retrowave", - "value": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", + "value": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", }, "vkontakteGradientSberkot": { "name": "--vkui--vkontakte_gradient_sberkot", - "value": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", + "value": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", }, "vkontakteGradientSunset": { "name": "--vkui--vkontakte_gradient_sunset", - "value": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", + "value": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", }, "vkontakteGradientTurquoise": { "name": "--vkui--vkontakte_gradient_turquoise", - "value": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", + "value": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", }, "vkontakteGradientTwilight": { "name": "--vkui--vkontakte_gradient_twilight", - "value": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", + "value": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", }, "vkontakteGradientUnicorn": { "name": "--vkui--vkontakte_gradient_unicorn", - "value": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", + "value": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", }, "vkontakteGradientValentine": { "name": "--vkui--vkontakte_gradient_valentine", - "value": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", + "value": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", }, "vkontakteGradientViolet": { "name": "--vkui--vkontakte_gradient_violet", - "value": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", + "value": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", }, "vkontakteGradientWarmValentine": { "name": "--vkui--vkontakte_gradient_warm_valentine", - "value": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", + "value": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", }, "vkontakteGradientWomensDay": { "name": "--vkui--vkontakte_gradient_womens_day", - "value": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", + "value": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", }, "vkontakteGradientYellow": { "name": "--vkui--vkontakte_gradient_yellow", - "value": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", + "value": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", }, "vkontakteGradientYellowBright": { "name": "--vkui--vkontakte_gradient_yellow_bright", - "value": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "value": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", }, "vkontakteImAttachTint": { "active": { @@ -491097,6 +492702,11 @@ exports[`shapshots vkontakteIOSDark theme should match pixelify theme snapshot 1 "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -491313,9 +492923,9 @@ exports[`shapshots vkontakteIOSDark theme should match pixelify theme snapshot 1 "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -492256,40 +493866,40 @@ exports[`shapshots vkontakteIOSDark theme should match pixelify theme snapshot 1 "hover": "#ADB1B6", "normal": "#aaaeb3", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -492502,6 +494112,11 @@ exports[`shapshots vkontakteIOSDark theme should match pseudo theme from CssVars "hover": "var(--vkui--color_background_content--hover, #222223)", "normal": "var(--vkui--color_background_content, #19191a)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -492718,9 +494333,9 @@ exports[`shapshots vkontakteIOSDark theme should match pseudo theme from CssVars "normal": "var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.40))", }, "colorOverlaySecondary": { - "active": "var(--vkui--color_overlay_secondary--active, rgba(55, 56, 57, 0.58))", - "hover": "var(--vkui--color_overlay_secondary--hover, rgba(55, 56, 57, 0.54))", - "normal": "var(--vkui--color_overlay_secondary, rgba(55, 56, 57, 0.5))", + "active": "var(--vkui--color_overlay_secondary--active, rgba(0, 0, 0, 0.35))", + "hover": "var(--vkui--color_overlay_secondary--hover, rgba(0, 0, 0, 0.31))", + "normal": "var(--vkui--color_overlay_secondary, rgba(0, 0, 0, 0.27))", }, "colorPanelHeaderIcon": { "active": "var(--vkui--color_panel_header_icon--active, #7CB1ED)", @@ -493661,40 +495276,40 @@ exports[`shapshots vkontakteIOSDark theme should match pseudo theme from CssVars "hover": "var(--vkui--vkontakte_float_button_foreground--hover, #ADB1B6)", "normal": "var(--vkui--vkontakte_float_button_foreground, #aaaeb3)", }, - "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, #7DF1FA, #2BB4D6)", - "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, #66CCFF, #3F8AE0)", - "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, #FF99CC, #E52E6A)", - "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, #FF7373, #E53949, #BF1C38)", - "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, #FFB726, #FF2693, #8122E0, #2693FF)", - "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, #00D948, #0D8046)", - "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, #4FA0FF, #016CEA)", - "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, #C1CAD6, #878F99)", - "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, #6CD97E, #12B312)", - "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, #CB1E3B, #F05C44, #FFA000)", - "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, #FFA000, #CD4C4B, #792EC0)", - "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, #2BD9D9, #5C9CE6)", - "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, #928FFF, #4B47B2)", - "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, #D9F4FF, #D9F4FF)", - "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, #2EE54D, #0D7EFF)", - "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, #73D0FF, #3885E1, #0032A6)", - "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, #BB64E4, #805BD7, #2866D5)", - "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, #FFBF80, #E66B2E)", - "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, #FF8880, #E62E6B)", - "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, #A393F5, #735CE6)", - "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, #FF80D5, #E645B1)", - "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, #FF7583, #E62E40)", - "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, #30F2B1, #5967FF, #FF26A5)", - "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, #9DF19D, #31C2A7, #21A19A, #107F8C)", - "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, #FFD24D, #F26549, #E62E6B)", - "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, #8AE6E6, #12B3B3)", - "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, #FF4D87, #9F40FF, #3399FF)", - "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, #FF99CC, #A179F2, #5CA1E6)", - "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, #FF8A65, #F25383, #8F13DB)", - "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, #D3A6FF, #903FE0)", - "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, #F3386A, #FF819E)", - "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, #FF99CC, #E52E6A)", - "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, #FFC44D, #F07300)", - "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, #FFD54F, #E7A902)", + "vkontakteGradientAquamarineBlue": "var(--vkui--vkontakte_gradient_aquamarine_blue, rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%)", + "vkontakteGradientBlue": "var(--vkui--vkontakte_gradient_blue, rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%)", + "vkontakteGradientCandy": "var(--vkui--vkontakte_gradient_candy, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientCrimson": "var(--vkui--vkontakte_gradient_crimson, rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%)", + "vkontakteGradientDisco": "var(--vkui--vkontakte_gradient_disco, rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%)", + "vkontakteGradientEmerald": "var(--vkui--vkontakte_gradient_emerald, rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%)", + "vkontakteGradientFrost": "var(--vkui--vkontakte_gradient_frost, rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%)", + "vkontakteGradientGray": "var(--vkui--vkontakte_gradient_gray, rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%)", + "vkontakteGradientGreen": "var(--vkui--vkontakte_gradient_green, rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%)", + "vkontakteGradientHalloweenOrange": "var(--vkui--vkontakte_gradient_halloween_orange, rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%)", + "vkontakteGradientHalloweenViolet": "var(--vkui--vkontakte_gradient_halloween_violet, rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%)", + "vkontakteGradientLagoon": "var(--vkui--vkontakte_gradient_lagoon, rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%)", + "vkontakteGradientLavender": "var(--vkui--vkontakte_gradient_lavender, rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%)", + "vkontakteGradientMable": "var(--vkui--vkontakte_gradient_mable, rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%)", + "vkontakteGradientMarine": "var(--vkui--vkontakte_gradient_marine, rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%)", + "vkontakteGradientMidnight": "var(--vkui--vkontakte_gradient_midnight, rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%)", + "vkontakteGradientNewYear": "var(--vkui--vkontakte_gradient_new_year, rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%)", + "vkontakteGradientOrange": "var(--vkui--vkontakte_gradient_orange, rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%)", + "vkontakteGradientPink": "var(--vkui--vkontakte_gradient_pink, rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientPurple": "var(--vkui--vkontakte_gradient_purple, rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%)", + "vkontakteGradientRaspberryPink": "var(--vkui--vkontakte_gradient_raspberry_pink, rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%)", + "vkontakteGradientRed": "var(--vkui--vkontakte_gradient_red, rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%)", + "vkontakteGradientRetrowave": "var(--vkui--vkontakte_gradient_retrowave, rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%)", + "vkontakteGradientSberkot": "var(--vkui--vkontakte_gradient_sberkot, rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%)", + "vkontakteGradientSunset": "var(--vkui--vkontakte_gradient_sunset, rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%)", + "vkontakteGradientTurquoise": "var(--vkui--vkontakte_gradient_turquoise, rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%)", + "vkontakteGradientTwilight": "var(--vkui--vkontakte_gradient_twilight, rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%)", + "vkontakteGradientUnicorn": "var(--vkui--vkontakte_gradient_unicorn, rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%)", + "vkontakteGradientValentine": "var(--vkui--vkontakte_gradient_valentine, rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%)", + "vkontakteGradientViolet": "var(--vkui--vkontakte_gradient_violet, rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%)", + "vkontakteGradientWarmValentine": "var(--vkui--vkontakte_gradient_warm_valentine, rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%)", + "vkontakteGradientWomensDay": "var(--vkui--vkontakte_gradient_womens_day, rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%)", + "vkontakteGradientYellow": "var(--vkui--vkontakte_gradient_yellow, rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%)", + "vkontakteGradientYellowBright": "var(--vkui--vkontakte_gradient_yellow_bright, rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%)", "vkontakteImAttachTint": { "active": "var(--vkui--vkontakte_im_attach_tint--active, #D7D8DB)", "hover": "var(--vkui--vkontakte_im_attach_tint--hover, #EBEDF0)", @@ -493907,6 +495522,11 @@ exports[`shapshots vkontakteIOSDark theme should match root theme snapshot 1`] = "hover": "#222223", "normal": "#19191a", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -494123,9 +495743,9 @@ exports[`shapshots vkontakteIOSDark theme should match root theme snapshot 1`] = "normal": "rgba(0, 0, 0, 0.40)", }, "colorOverlaySecondary": { - "active": "rgba(55, 56, 57, 0.58)", - "hover": "rgba(55, 56, 57, 0.54)", - "normal": "rgba(55, 56, 57, 0.5)", + "active": "rgba(0, 0, 0, 0.35)", + "hover": "rgba(0, 0, 0, 0.31)", + "normal": "rgba(0, 0, 0, 0.27)", }, "colorPanelHeaderIcon": { "active": "#7CB1ED", @@ -495066,40 +496686,40 @@ exports[`shapshots vkontakteIOSDark theme should match root theme snapshot 1`] = "hover": "#ADB1B6", "normal": "#aaaeb3", }, - "vkontakteGradientAquamarineBlue": "#7DF1FA, #2BB4D6", - "vkontakteGradientBlue": "#66CCFF, #3F8AE0", - "vkontakteGradientCandy": "#FF99CC, #E52E6A", - "vkontakteGradientCrimson": "#FF7373, #E53949, #BF1C38", - "vkontakteGradientDisco": "#FFB726, #FF2693, #8122E0, #2693FF", - "vkontakteGradientEmerald": "#00D948, #0D8046", - "vkontakteGradientFrost": "#4FA0FF, #016CEA", - "vkontakteGradientGray": "#C1CAD6, #878F99", - "vkontakteGradientGreen": "#6CD97E, #12B312", - "vkontakteGradientHalloweenOrange": "#CB1E3B, #F05C44, #FFA000", - "vkontakteGradientHalloweenViolet": "#FFA000, #CD4C4B, #792EC0", - "vkontakteGradientLagoon": "#2BD9D9, #5C9CE6", - "vkontakteGradientLavender": "#928FFF, #4B47B2", - "vkontakteGradientMable": "#D9F4FF, #D9F4FF", - "vkontakteGradientMarine": "#2EE54D, #0D7EFF", - "vkontakteGradientMidnight": "#73D0FF, #3885E1, #0032A6", - "vkontakteGradientNewYear": "#BB64E4, #805BD7, #2866D5", - "vkontakteGradientOrange": "#FFBF80, #E66B2E", - "vkontakteGradientPink": "#FF8880, #E62E6B", - "vkontakteGradientPurple": "#A393F5, #735CE6", - "vkontakteGradientRaspberryPink": "#FF80D5, #E645B1", - "vkontakteGradientRed": "#FF7583, #E62E40", - "vkontakteGradientRetrowave": "#30F2B1, #5967FF, #FF26A5", - "vkontakteGradientSberkot": "#9DF19D, #31C2A7, #21A19A, #107F8C", - "vkontakteGradientSunset": "#FFD24D, #F26549, #E62E6B", - "vkontakteGradientTurquoise": "#8AE6E6, #12B3B3", - "vkontakteGradientTwilight": "#FF4D87, #9F40FF, #3399FF", - "vkontakteGradientUnicorn": "#FF99CC, #A179F2, #5CA1E6", - "vkontakteGradientValentine": "#FF8A65, #F25383, #8F13DB", - "vkontakteGradientViolet": "#D3A6FF, #903FE0", - "vkontakteGradientWarmValentine": "#F3386A, #FF819E", - "vkontakteGradientWomensDay": "#FF99CC, #E52E6A", - "vkontakteGradientYellow": "#FFC44D, #F07300", - "vkontakteGradientYellowBright": "#FFD54F, #E7A902", + "vkontakteGradientAquamarineBlue": "rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%", + "vkontakteGradientBlue": "rgba(102, 204, 255, 1) 0%, rgba(63, 138, 224, 1) 100%", + "vkontakteGradientCandy": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientCrimson": "rgba(255, 115, 115, 1) 0%, rgba(229, 57, 73, 1) 50%, rgba(191, 28, 56, 1) 100%", + "vkontakteGradientDisco": "rgba(255, 183, 38, 1) 0%, rgba(255, 38, 147, 1) 33%, rgba(129, 34, 224, 1) 67%, rgba(38, 147, 255, 1) 100%", + "vkontakteGradientEmerald": "rgba(0, 217, 72, 1) 0%, rgba(13, 128, 70, 1) 100%", + "vkontakteGradientFrost": "rgba(79, 160, 255, 1) 0%, rgba(1, 108, 234, 1) 100%", + "vkontakteGradientGray": "rgba(193, 202, 214, 1) 0%, rgba(135, 143, 153, 1) 100%", + "vkontakteGradientGreen": "rgba(108, 217, 126, 1) 0%, rgba(18, 179, 18, 1) 100%", + "vkontakteGradientHalloweenOrange": "rgba(203, 30, 59, 1) 0%, rgba(240, 92, 68, 1) 50%, rgba(255, 160, 0, 1) 100%", + "vkontakteGradientHalloweenViolet": "rgba(255, 160, 0, 1) 0%, rgba(205, 76, 75, 1) 50%, rgba(121, 46, 192, 1) 100%", + "vkontakteGradientLagoon": "rgba(43, 217, 217, 1) 0%, rgba(92, 156, 230, 1) 100%", + "vkontakteGradientLavender": "rgba(146, 143, 255, 1) 0%, rgba(75, 71, 178, 1) 100%", + "vkontakteGradientMable": "rgba(217, 244, 255, 1) 0%, rgba(217, 244, 255, 1) 100%", + "vkontakteGradientMarine": "rgba(46, 229, 77, 1) 0%, rgba(13, 126, 255, 1) 100%", + "vkontakteGradientMidnight": "rgba(115, 208, 255, 1) 0%, rgba(56, 133, 225, 1) 50%, rgba(0, 50, 166, 1) 100%", + "vkontakteGradientNewYear": "rgba(187, 100, 228, 1) 0%, rgba(128, 91, 215, 1) 50%, rgba(40, 102, 213, 1) 100%", + "vkontakteGradientOrange": "rgba(255, 191, 128, 1) 0%, rgba(230, 107, 46, 1) 100%", + "vkontakteGradientPink": "rgba(255, 136, 128, 1) 0%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientPurple": "rgba(163, 147, 245, 1) 0%, rgba(115, 92, 230, 1) 100%", + "vkontakteGradientRaspberryPink": "rgba(255, 128, 213, 1) 0%, rgba(230, 69, 177, 1) 100%", + "vkontakteGradientRed": "rgba(255, 117, 131, 1) 0%, rgba(230, 46, 64, 1) 100%", + "vkontakteGradientRetrowave": "rgba(48, 242, 177, 1) 0%, rgba(89, 103, 255, 1) 50%, rgba(255, 38, 165, 1) 100%", + "vkontakteGradientSberkot": "rgba(157, 241, 157, 1) 0%, rgba(49, 194, 167, 1) 33%, rgba(33, 161, 154, 1) 67%, rgba(16, 127, 140, 1) 100%", + "vkontakteGradientSunset": "rgba(255, 210, 77, 1) 0%, rgba(242, 101, 73, 1) 50%, rgba(230, 46, 107, 1) 100%", + "vkontakteGradientTurquoise": "rgba(138, 230, 230, 1) 0%, rgba(18, 179, 179, 1) 100%", + "vkontakteGradientTwilight": "rgba(255, 77, 135, 1) 0%, rgba(159, 64, 255, 1) 50%, rgba(51, 153, 255, 1) 100%", + "vkontakteGradientUnicorn": "rgba(255, 153, 204, 1) 0%, rgba(161, 121, 242, 1) 50%, rgba(92, 161, 230, 1) 100%", + "vkontakteGradientValentine": "rgba(255, 138, 101, 1) 0%, rgba(242, 83, 131, 1) 50%, rgba(143, 19, 219, 1) 100%", + "vkontakteGradientViolet": "rgba(211, 166, 255, 1) 0%, rgba(144, 63, 224, 1) 100%", + "vkontakteGradientWarmValentine": "rgba(243, 56, 106, 1) 0%, rgba(255, 129, 158, 1) 100%", + "vkontakteGradientWomensDay": "rgba(255, 153, 204, 1) 0%, rgba(229, 46, 106, 1) 100%", + "vkontakteGradientYellow": "rgba(255, 196, 77, 1) 0%, rgba(240, 115, 0, 1) 100%", + "vkontakteGradientYellowBright": "rgba(255, 213, 79, 1) 0%, rgba(231, 169, 2, 1) 100%", "vkontakteImAttachTint": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -495604,6 +497224,20 @@ exports[`shapshots widgets theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -499897,6 +501531,11 @@ exports[`shapshots widgets theme should match pixelify theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -501284,6 +502923,11 @@ exports[`shapshots widgets theme should match pseudo theme from CssVars 1`] = ` "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -502671,6 +504315,11 @@ exports[`shapshots widgets theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -504325,6 +505974,20 @@ exports[`shapshots widgetsDark theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -508618,6 +510281,11 @@ exports[`shapshots widgetsDark theme should match pixelify theme snapshot 1`] = "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -510005,6 +511673,11 @@ exports[`shapshots widgetsDark theme should match pseudo theme from CssVars 1`] "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -511392,6 +513065,11 @@ exports[`shapshots widgetsDark theme should match root theme snapshot 1`] = ` "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -513256,6 +514934,20 @@ exports[`shapshots workspaceAdmin theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #FFFFFF)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #202126)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #222225)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #232324)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -517688,6 +519380,11 @@ exports[`shapshots workspaceAdmin theme should match pixelify theme snapshot 1`] "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -519172,6 +520869,11 @@ exports[`shapshots workspaceAdmin theme should match pseudo theme from CssVars 1 "hover": "var(--vkui--color_background_content--hover, #F5F5F7)", "normal": "var(--vkui--color_background_content, #FFFFFF)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #202126)", + "hover": "var(--vkui--color_background_content_inverse--hover, #222225)", + "normal": "var(--vkui--color_background_content_inverse, #232324)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #EBECEF)", "hover": "var(--vkui--color_background_contrast--hover, #F5F5F7)", @@ -520656,6 +522358,11 @@ exports[`shapshots workspaceAdmin theme should match root theme snapshot 1`] = ` "hover": "#F5F5F7", "normal": "#FFFFFF", }, + "colorBackgroundContentInverse": { + "active": "#202126", + "hover": "#222225", + "normal": "#232324", + }, "colorBackgroundContrast": { "active": "#EBECEF", "hover": "#F5F5F7", @@ -522542,6 +524249,20 @@ exports[`shapshots workspaceAdminDark theme should match cssVars snapshot 1`] = "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -526974,6 +528695,11 @@ exports[`shapshots workspaceAdminDark theme should match pixelify theme snapshot "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -528458,6 +530184,11 @@ exports[`shapshots workspaceAdminDark theme should match pseudo theme from CssVa "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -529942,6 +531673,11 @@ exports[`shapshots workspaceAdminDark theme should match root theme snapshot 1`] "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -531618,6 +533354,20 @@ exports[`shapshots workspaceLandings theme should match cssVars snapshot 1`] = ` "value": "var(--vkui--color_background_content, #232324)", }, }, + "colorBackgroundContentInverse": { + "active": { + "name": "--vkui--color_background_content_inverse--active", + "value": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + }, + "hover": { + "name": "--vkui--color_background_content_inverse--hover", + "value": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + }, + "normal": { + "name": "--vkui--color_background_content_inverse", + "value": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, + }, "colorBackgroundContrast": { "active": { "name": "--vkui--color_background_contrast--active", @@ -535981,6 +537731,11 @@ exports[`shapshots workspaceLandings theme should match pixelify theme snapshot "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", @@ -537393,6 +539148,11 @@ exports[`shapshots workspaceLandings theme should match pseudo theme from CssVar "hover": "var(--vkui--color_background_content--hover, #2C2C2D)", "normal": "var(--vkui--color_background_content, #232324)", }, + "colorBackgroundContentInverse": { + "active": "var(--vkui--color_background_content_inverse--active, #D7D8DB)", + "hover": "var(--vkui--color_background_content_inverse--hover, #EBEDF0)", + "normal": "var(--vkui--color_background_content_inverse, #FFFFFF)", + }, "colorBackgroundContrast": { "active": "var(--vkui--color_background_contrast--active, #D7D8DB)", "hover": "var(--vkui--color_background_contrast--hover, #EBEDF0)", @@ -538805,6 +540565,11 @@ exports[`shapshots workspaceLandings theme should match root theme snapshot 1`] "hover": "#2C2C2D", "normal": "#232324", }, + "colorBackgroundContentInverse": { + "active": "#D7D8DB", + "hover": "#EBEDF0", + "normal": "#FFFFFF", + }, "colorBackgroundContrast": { "active": "#D7D8DB", "hover": "#EBEDF0", diff --git a/src/build/compilers/structJSON/compileStructJSON.test.ts b/src/build/compilers/structJSON/compileStructJSON.test.ts index 23d2bd489..86cd71c9b 100644 --- a/src/build/compilers/structJSON/compileStructJSON.test.ts +++ b/src/build/compilers/structJSON/compileStructJSON.test.ts @@ -3,11 +3,29 @@ import { describe, expect, it } from '@jest/globals'; import { compileStructJSON } from './compileStructJSON'; describe('compileJSON', () => { - it('should correct stringify', () => { + it('should stringify correctly', () => { const testData = { colorA: '#fff', colorsScheme: 'scheme', randomToken: 123, + gradientTest: + 'var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%', + gradientOneColor: [ + 'rgba(0, 0, 255, 0) 0%', + 'rgba(0, 0, 255, 0.05) 15%', + 'rgba(0, 0, 255, 0.2) 30%', + 'rgba(0, 0, 255, 0.8) 70%', + 'rgba(0, 0, 255, 0.95) 85%', + 'rgba(0, 0, 255, 1) 100%', + ].join(', '), + gradientOneVariable: [ + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%', + ].join(', '), }; expect(compileStructJSON(testData)).toBe( @@ -20,6 +38,92 @@ describe('compileJSON', () => { }, "other": { "randomToken": 123 + }, + "gradient": { + "gradientTest": [ + { + "color": "rgba(255, 255, 255, 1)", + "token": "colorBackgroundContent", + "step": 0, + "alpha": 1 + }, + { + "color": "rgba(0, 0, 0, 0)", + "step": 1, + "alpha": 0, + "token": "colorBackgroundContent" + } + ], + "gradientOneColor": [ + { + "color": "rgba(0, 0, 255, 0)", + "step": 0, + "alpha": 0 + }, + { + "color": "rgba(0, 0, 255, 0.05)", + "step": 0.15, + "alpha": 0.05 + }, + { + "color": "rgba(0, 0, 255, 0.2)", + "step": 0.3, + "alpha": 0.2 + }, + { + "color": "rgba(0, 0, 255, 0.8)", + "step": 0.7, + "alpha": 0.8 + }, + { + "color": "rgba(0, 0, 255, 0.95)", + "step": 0.85, + "alpha": 0.95 + }, + { + "color": "rgba(0, 0, 255, 1)", + "step": 1, + "alpha": 1 + } + ], + "gradientOneVariable": [ + { + "color": "rgba(0, 0, 255, 0)", + "token": "colorIconPrimary", + "step": 0, + "alpha": 0 + }, + { + "color": "rgba(0, 0, 255, 0.05)", + "token": "colorIconPrimary", + "step": 0.15, + "alpha": 0.05 + }, + { + "color": "rgba(0, 0, 255, 0.2)", + "token": "colorIconPrimary", + "step": 0.3, + "alpha": 0.2 + }, + { + "color": "rgba(0, 0, 255, 0.8)", + "token": "colorIconPrimary", + "step": 0.7, + "alpha": 0.8 + }, + { + "color": "rgba(0, 0, 255, 0.95)", + "token": "colorIconPrimary", + "step": 0.85, + "alpha": 0.95 + }, + { + "color": "rgba(0, 0, 255, 1)", + "token": "colorIconPrimary", + "step": 1, + "alpha": 1 + } + ] } }`, ); diff --git a/src/build/compilers/structJSON/compileStructJSON.ts b/src/build/compilers/structJSON/compileStructJSON.ts index 6e1b031a8..7b65b6725 100644 --- a/src/build/compilers/structJSON/compileStructJSON.ts +++ b/src/build/compilers/structJSON/compileStructJSON.ts @@ -1,3 +1,6 @@ +import Color from 'color'; + +import { convertSnakeToCamel } from '@/build/helpers/convertSnakeToCamel'; import type { Theme } from '@/interfaces/general'; export type ValuesOf = T[number]; @@ -18,6 +21,68 @@ const groups = [ 'other', ] as const; +interface StructGradientPoint { + color: string; + token?: string; + step?: number; + alpha?: number; +} + +function parseRawToken(rawToken: string): StructGradientPoint { + const percentMatch = rawToken.match(/\d+$/); + + const step = + percentMatch && percentMatch.length > 0 ? parseFloat(percentMatch[0]) / 100 : undefined; + + rawToken = rawToken.replace(/^,\s/g, '').replace(/\d+$/g, '').trim(); + + if (rawToken.startsWith('var(')) { + const varNameRaw = /^var\(([\w\-_]+)/.exec(rawToken); + + if (varNameRaw) { + const varName = varNameRaw[1]; + const varValue = rawToken.slice(varNameRaw[0].length, -1).trim().slice(1).trim(); + + return { + color: varValue, + token: convertSnakeToCamel(varName), + step, + alpha: new Color(varValue).alpha(), + }; + } + } + + return { + color: rawToken, + step, + alpha: new Color(rawToken).alpha(), + }; +} + +function compileStructGradients( + cssGradients: Record, +): Record { + const structGradients: Record = {}; + const keys = Object.keys(cssGradients); + + for (const key of keys) { + const rawPoints = cssGradients[key].split('%').slice(0, -1); + + structGradients[key] = rawPoints.map(parseRawToken).map((structToken, index, array) => { + if (index > 0 && !structToken.token) { + return { + ...structToken, + token: structToken.token ?? array[0].token, + }; + } + + return structToken; + }); + } + + return structGradients; +} + /** * Компилирует структурируемый json с темой */ @@ -34,5 +99,9 @@ export const compileStructJSON = (theme: T): string => { structTheme[group][key] = theme[key]; }); + if (structTheme['gradient']) { + structTheme['gradient'] = compileStructGradients(structTheme['gradient']); + } + return JSON.stringify(structTheme, null, '\t'); }; diff --git a/src/build/helpers/convertSnakeToCamel.test.ts b/src/build/helpers/convertSnakeToCamel.test.ts new file mode 100644 index 000000000..b3b746069 --- /dev/null +++ b/src/build/helpers/convertSnakeToCamel.test.ts @@ -0,0 +1,21 @@ +import { describe, expect, test } from '@jest/globals'; + +import { convertSnakeToCamel } from './convertSnakeToCamel'; + +describe('convertSnakeToCamel', () => { + test('convert empty string', () => { + expect(convertSnakeToCamel('')).toEqual(''); + }); + + test('replaces prefix', () => { + expect(convertSnakeToCamel('--vkui--')).toEqual(''); + }); + + test('replaces prefix and converts to lower case', () => { + expect(convertSnakeToCamel('--vkui--Test')).toEqual('test'); + }); + + test('replaces prefix and converts to camel case', () => { + expect(convertSnakeToCamel('--vkui--Test_var')).toEqual('testVar'); + }); +}); diff --git a/src/build/helpers/convertSnakeToCamel.ts b/src/build/helpers/convertSnakeToCamel.ts new file mode 100644 index 000000000..99e8aa29c --- /dev/null +++ b/src/build/helpers/convertSnakeToCamel.ts @@ -0,0 +1,9 @@ +/** + * snake_case -> camelCase + */ +export function convertSnakeToCamel(snake: string, prefix = 'vkui'): string { + return snake + .replace(new RegExp(`^--${prefix}--`), '') + .toLowerCase() + .replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', '')); +} diff --git a/src/build/helpers/getGradientPointsFromColor.ts b/src/build/helpers/getGradientPointsFromColor.ts index 9907c2f3b..81d6cc88f 100644 --- a/src/build/helpers/getGradientPointsFromColor.ts +++ b/src/build/helpers/getGradientPointsFromColor.ts @@ -3,20 +3,56 @@ import type { Property } from 'csstype'; import { GradientPoints } from '@/interfaces/general/gradients'; -// opacityMap.json требуется для android и ios клиентов +import { getVariableName } from '../themeProcessors/extractVarsNames/extractVarsNames'; import opacityMap from './opacityMap.json'; +export type OpacityPoints = [number, number][]; + +type GradientPointRaw = () => { + value: Property.Color; + key?: string; + prefix?: string; +}; + +export const defaultOpacityPoints: OpacityPoints = opacityMap as any; + +export function makeGradientPointRaw( + value: Property.Color, + key?: string, + prefix?: string, +): GradientPointRaw { + return () => ({ + value, + key, + prefix, + }); +} + export function getGradientPointsFromColor( - colorArg: Property.Color, + colorArg: Property.Color | GradientPointRaw, opacityMultiplier = 1, + opacityPoints: OpacityPoints = defaultOpacityPoints, ): GradientPoints { - const colorRGB: string = color(colorArg).rgb().array().join(', '); + const gradientPointData = typeof colorArg === 'function' ? colorArg() : { value: colorArg }; - return opacityMap + const colorRGB: string = color(gradientPointData.value).rgb().array().slice(0, 3).join(', '); + const colorAlpha = color(gradientPointData.value).alpha(); + + return opacityPoints .map(([pointOpacity, pointCoordinate]) => { - return `rgba(${colorRGB}, ${ - Math.round(pointOpacity * opacityMultiplier * 1000) / 1000 - }) ${pointCoordinate}%`; + const targetOpacity = colorAlpha * pointOpacity; + const colorValue = `rgba(${colorRGB}, ${Math.round(targetOpacity * opacityMultiplier * 1000) / 1000})`; + + if (typeof gradientPointData.key === 'string') { + const tokenName = getVariableName({ + key: gradientPointData.key, + prefix: gradientPointData.prefix, + }); + + return `var(${tokenName}, ${colorValue}) ${pointCoordinate}%`; + } + + return `${colorValue} ${pointCoordinate}%`; }) .join(', '); } diff --git a/src/build/helpers/tokenHelpers.test.ts b/src/build/helpers/tokenHelpers.test.ts index 107ca643a..14b8da1cc 100644 --- a/src/build/helpers/tokenHelpers.test.ts +++ b/src/build/helpers/tokenHelpers.test.ts @@ -1,6 +1,6 @@ import { describe, expect, test } from '@jest/globals'; -import { alias, staticRef } from '@/build/helpers/tokenHelpers'; +import { alias, gradient, namedAlias, staticRef } from '@/build/helpers/tokenHelpers'; describe('tokenHelpers', () => { describe('alias', () => { @@ -11,6 +11,17 @@ describe('tokenHelpers', () => { }); }); + describe('namedAlias', () => { + test('maps token to another token, preserving name', () => { + expect(namedAlias('sizeArrow')({ sizeArrow: { regular: 10 } })).toEqual([ + 'sizeArrow', + { + regular: 10, + }, + ]); + }); + }); + describe('staticRef', () => { test('returns static value', () => { expect(staticRef(10)).toEqual(10); @@ -22,4 +33,56 @@ describe('tokenHelpers', () => { ); }); }); + + describe('gradient', () => { + test('calculates gradient string from 1 color with value', () => { + const gradientToken = gradient('blue'); + const gradientValue = gradientToken({}); + + expect(gradientValue).toEqual( + [ + 'rgba(0, 0, 255, 0) 0%', + 'rgba(0, 0, 255, 0.05) 15%', + 'rgba(0, 0, 255, 0.2) 30%', + 'rgba(0, 0, 255, 0.8) 70%', + 'rgba(0, 0, 255, 0.95) 85%', + 'rgba(0, 0, 255, 1) 100%', + ].join(', '), + ); + }); + + test('calculates gradient string from 1 color with variable', () => { + const gradientToken = gradient(namedAlias('colorIconPrimary')); + const gradientValue = gradientToken({ colors: { colorIconPrimary: 'blue' } as any }); + + expect(gradientValue).toEqual( + [ + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%', + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%', + ].join(', '), + ); + }); + + test('calculates gradient string from 2 colors', () => { + const gradientToken = gradient(namedAlias('colorIconPrimary'), 'transparent'); + const gradientValue = gradientToken({ colors: { colorIconPrimary: 'blue' } as any }); + + expect(gradientValue).toEqual( + 'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%', + ); + }); + + test('calculates gradient string from 3 colors', () => { + const gradientToken = gradient('blue', 'black', 'red'); + const gradientValue = gradientToken({}); + + expect(gradientValue).toEqual( + 'rgba(0, 0, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%', + ); + }); + }); }); diff --git a/src/build/helpers/tokenHelpers.ts b/src/build/helpers/tokenHelpers.ts index 8f520a7ce..e7b012b2d 100644 --- a/src/build/helpers/tokenHelpers.ts +++ b/src/build/helpers/tokenHelpers.ts @@ -1,10 +1,48 @@ -import { ThemeGeneral } from '@/interfaces/general'; +import type { Property } from 'csstype'; + +import { ThemeDescription } from '@/interfaces/general'; import { Token } from '@/interfaces/general/tools/tokenValue'; -export function alias(token: string): (theme: Partial) => Token { - return (theme) => theme[token]; +import { + defaultOpacityPoints, + getGradientPointsFromColor, + makeGradientPointRaw, + OpacityPoints, +} from './getGradientPointsFromColor'; + +export type TokenFunction = (theme: Partial) => Token; +export type NamedTokenFunction = ( + theme: Partial, +) => [string | undefined, Token]; + +export type OpacityPoint = [number, number]; + +function readThemeToken(theme: any, token: string): Token { + return theme[token] ?? (theme['colors'] ?? {})[token]; } +/** + * Функция выполняет подстановку значения другого токена. + * @param token Имя токена. Можно использовать токены из текущей темы либо из всех тем, + * от которой наследуется текущая. + */ +export function alias(token: string): TokenFunction { + return (theme) => readThemeToken(theme, token); +} + +/** + * Функция создаёт runtime-ссылку на другой токен темы выполняет подстановку fallback-значения этого токена. + * @param token Имя токена. Можно использовать токены из текущей темы либо из всех тем, + * от которой наследуется текущая. + */ +export function namedAlias(token: string): NamedTokenFunction { + return (theme) => [token, readThemeToken(theme, token)]; +} + +/** + * Функция создаёт runtime-ссылку на другой токен темы. + * @param token Имя токена. Можно использовать любые токены, которые находятся в контексте страницы. + */ export function staticRef(value: Token): T { if (typeof value === 'function') { throw new Error('Cannot use callable token value in static ref'); @@ -12,3 +50,33 @@ export function staticRef(value: Token): T { return value; } + +function makeOpacityPoints(count: number): OpacityPoints { + const result: OpacityPoints = []; + + for (let i = 0; i < count; i++) { + const percent = Math.round(i * (1 / (count - 1)) * 100); + result.push([1, percent]); + } + + return result; +} + +export function gradient( + ...stops: (Property.Color | NamedTokenFunction)[] +): TokenFunction { + const opacityPoints = stops.length > 1 ? makeOpacityPoints(stops.length) : defaultOpacityPoints; + + return (theme) => { + return opacityPoints + .map(([pointOpacity, pointCoordinate], index) => { + const stop = stops[index] ?? stops[stops.length - 1]; + const [stopKey, stopValue] = typeof stop === 'function' ? stop(theme) : [undefined, stop]; + + const pointRaw = makeGradientPointRaw(stopValue, stopKey); + + return getGradientPointsFromColor(pointRaw, 1, [[pointOpacity, pointCoordinate]]); + }) + .join(', '); + }; +} diff --git a/src/build/themeProcessors/customMedia/customMedia.ts b/src/build/themeProcessors/customMedia/customMedia.ts index abee47bd8..09123046a 100644 --- a/src/build/themeProcessors/customMedia/customMedia.ts +++ b/src/build/themeProcessors/customMedia/customMedia.ts @@ -14,9 +14,7 @@ import { export const getUsingViewports = ( breakpoints: Breakpoints['breakpoints'], ): Vt => { - const usingViewports: Vt[number][] = [ - ...(Object.keys(breakpoints) as (keyof typeof breakpoints)[]), - ]; + const usingViewports: Vt[number][] = Object.keys(breakpoints) as (keyof typeof breakpoints)[]; return usingViewports.sort((a, b) => viewports.indexOf(a) > viewports.indexOf(b) ? 1 : -1, diff --git a/src/build/themeProcessors/extractGeneralTokens/extractGeneralTokens.ts b/src/build/themeProcessors/extractGeneralTokens/extractGeneralTokens.ts index 112ceba0c..122ca2422 100644 --- a/src/build/themeProcessors/extractGeneralTokens/extractGeneralTokens.ts +++ b/src/build/themeProcessors/extractGeneralTokens/extractGeneralTokens.ts @@ -18,7 +18,15 @@ export function extractGeneralTokens( const tokenValue = themeDescription[token]; if (typeof tokenValue === 'function') { - copyDescription[token] = tokenValue(themeDescription); + copyDescription[token] = tokenValue; + } + } + + for (const token of tokens) { + const tokenValue = copyDescription[token]; + + if (typeof tokenValue === 'function') { + copyDescription[token] = tokenValue(copyDescription); } } diff --git a/src/interfaces/general/colors/index.ts b/src/interfaces/general/colors/index.ts index 720e29ead..6c664acf9 100644 --- a/src/interfaces/general/colors/index.ts +++ b/src/interfaces/general/colors/index.ts @@ -75,6 +75,12 @@ export interface ColorsDescriptionStruct { */ colorBackgroundContent: ColorDescription; + /** + * @desc Цвет фона, противоположный фону контента. + * @tags color, background + */ + colorBackgroundContentInverse: ColorDescription; + /** * @desc Второстепенный цвет фона * @tags color, background diff --git a/src/interfaces/general/gradients/index.ts b/src/interfaces/general/gradients/index.ts index f694ff31d..611f9335d 100644 --- a/src/interfaces/general/gradients/index.ts +++ b/src/interfaces/general/gradients/index.ts @@ -1,4 +1,5 @@ -export type GradientPoints = string; +// TODO: Нормальный тип вместо unknown (поправить Type instantiation is excessively deep and possibly infinite) +export type GradientPoints = string | unknown; export interface Gradients { /** diff --git a/src/themeDescriptions/base/paradigm.ts b/src/themeDescriptions/base/paradigm.ts index ba265a6fa..9786b2d61 100644 --- a/src/themeDescriptions/base/paradigm.ts +++ b/src/themeDescriptions/base/paradigm.ts @@ -31,6 +31,7 @@ export const lightColors: ColorsDescription = { colorBackgroundAccentThemedAlpha: 'rgba(0, 119, 255, 0.2)', colorBackgroundAccentAlternative: '#FF9E00', colorBackgroundContent: '#FFFFFF', + colorBackgroundContentInverse: colorBackgroundContentDark, colorBackgroundSecondary: '#F0F1F3', colorBackgroundSecondaryAlpha: { normal: 'rgba(0, 16, 61, 0.06)', @@ -170,6 +171,7 @@ export const darkColors: ColorsDescription = { colorBackgroundAccentThemedAlpha: 'rgba(255, 255, 255, 0.2)', colorBackgroundAccentAlternative: '#FF9E00', colorBackgroundContent: colorBackgroundContentDark, + colorBackgroundContentInverse: '#FFFFFF', colorBackgroundSecondary: '#2A2A2B', colorBackgroundSecondaryAlpha: { normal: 'rgba(255, 255, 255, 0.12)', diff --git a/src/themeDescriptions/base/vk.ts b/src/themeDescriptions/base/vk.ts index e5096aa50..fa0d100c5 100644 --- a/src/themeDescriptions/base/vk.ts +++ b/src/themeDescriptions/base/vk.ts @@ -37,6 +37,10 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio }[colorsScheme], colorBackground: background.background, colorBackgroundContent: background.background_content, + colorBackgroundContentInverse: { + light: '#19191A', + dark: '#FFFFFF', + }[colorsScheme], colorBackgroundSecondary: background.background_secondary, colorBackgroundSecondaryAlpha: { light: { @@ -223,9 +227,10 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio // Other colorOverlayPrimary: other.overlay_primary, colorOverlaySecondary: { - light: 'rgba(44, 45, 46, 0.5)', - dark: 'rgba(55, 56, 57, 0.5)', - }[colorsScheme], + normal: 'rgba(0, 0, 0, 0.27)', + hover: 'rgba(0, 0, 0, 0.31)', + active: 'rgba(0, 0, 0, 0.35)', + }, colorAvatarOverlay: other.avatar_overlay_alpha, colorAvatarOverlayInverseAlpha: other.avatar_overlay_inverse_alpha, colorActionSheetText: other.action_sheet_text, diff --git a/src/themeDescriptions/themes/media/index.ts b/src/themeDescriptions/themes/media/index.ts index 59b899c79..b73ab36f9 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)', }; diff --git a/src/themeDescriptions/themes/vkCom/index.ts b/src/themeDescriptions/themes/vkCom/index.ts index b8a9475bb..23797d602 100644 --- a/src/themeDescriptions/themes/vkCom/index.ts +++ b/src/themeDescriptions/themes/vkCom/index.ts @@ -1,7 +1,9 @@ import { vkcom_dark, vkcom_light } from '@vkontakte/appearance/main.valette/scheme_web.json'; import lodash from 'lodash'; +import { getGradientPointsFromColor } from '@/build/helpers/getGradientPointsFromColor'; import { ColorsDescription } from '@/interfaces/general'; +import { Gradients } from '@/interfaces/general/gradients'; import { DeepPartial } from '@/interfaces/general/tools/utils'; import { ThemeVkComDescription } from '@/interfaces/themes/vkCom'; import { ThemeVkComDarkDescription } from '@/interfaces/themes/vkComDark'; @@ -32,11 +34,7 @@ const vkComColors = (theme: typeof vkcom_light) => ({ colorBackground: resolveColor(theme.colors.background_page), colorBackgroundContent: resolveColor(theme.colors.background_content), colorBackgroundSecondary: resolveColor(theme.colors.content_tint_background), - colorBackgroundSecondaryAlpha: { - normal: 'rgba(235, 242, 250, 0.99)', - hover: 'rgba(223, 234, 246, 0.99)', - active: 'rgba(213, 226, 241, 0.99)', - }, + colorBackgroundSecondaryAlpha: 'rgba(39, 63, 92, 0.07)', colorBackgroundTertiary: resolveColor(theme.colors.background_light), colorBackgroundContrast: resolveColor(theme.colors.media_overlay_button_background), // colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)', @@ -355,11 +353,7 @@ const vkComDarkColor: ColorsDescription = { active: '#CFD2D8', }, colorBackgroundAccentThemedAlpha: 'rgba(255, 255, 255, 0.2)', - colorBackgroundSecondaryAlpha: { - normal: 'rgba(255, 255, 255, 0.10)', - hover: 'rgba(255, 255, 255, 0.12)', - active: 'rgba(255, 255, 255, 0.14)', - }, + colorBackgroundSecondaryAlpha: 'rgba(255, 255, 255, 0.08)', colorBackgroundContrastThemed: '#323232', colorBackgroundModalInverse: '#FFFFFF', @@ -394,10 +388,16 @@ const vkComDarkColor: ColorsDescription = { }, }; +export const vkComDarkGradient: Gradients = { + ...darkGradient, + gradientTint: getGradientPointsFromColor(resolveColor(vkcom_dark.colors.background_light)), + gradient: getGradientPointsFromColor(resolveColor(vkcom_dark.colors.background_content)), +}; + export const vkComThemeDark: ThemeVkComDarkDescription = { ...vkComTheme, ...vkComDarkColor, - ...darkGradient, + ...vkComDarkGradient, ...darkElevation, themeName: 'vkComDark', themeNameBase: 'vkCom', diff --git a/src/themeDescriptions/themes/vkontakteAndroid/index.ts b/src/themeDescriptions/themes/vkontakteAndroid/index.ts index 77ba55b03..757153aa6 100644 --- a/src/themeDescriptions/themes/vkontakteAndroid/index.ts +++ b/src/themeDescriptions/themes/vkontakteAndroid/index.ts @@ -1,5 +1,7 @@ import lodash from 'lodash'; +import { gradient, namedAlias } from '@/build/helpers/tokenHelpers'; +import { Gradients } from '@/interfaces/general/gradients'; import { DeepPartial } from '@/interfaces/general/tools/utils'; import type { LocalVkontakteAndroidColorsDescriptionStruct, @@ -223,7 +225,19 @@ export const vkontakteLocalColorDark: LocalVkontakteAndroidColorsDescriptionStru const fontFamilyAccent = '"VK Sans Display", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif'; -const gradients: VkontakteAndroidGradients = { +function makeFunctionalGradients(source: T): T { + const keys = Object.keys(source); + const result: T = {} as any; + + for (const key of keys) { + const colors = source[key].split(', '); + result[key] = gradient(...colors); + } + + return result; +} + +const colorGradients: VkontakteAndroidGradients = makeFunctionalGradients({ vkontakteGradientAquamarineBlue: '#7DF1FA, #2BB4D6', vkontakteGradientBlue: '#66CCFF, #3F8AE0', vkontakteGradientCandy: '#FF99CC, #E52E6A', @@ -258,6 +272,13 @@ const gradients: VkontakteAndroidGradients = { vkontakteGradientSberkot: '#9DF19D, #31C2A7, #21A19A, #107F8C', vkontakteGradientMable: '#D9F4FF, #D9F4FF', vkontakteGradientWomensDay: '#FF99CC, #E52E6A', +}); + +const gradients: Gradients = { + gradient: gradient(namedAlias('colorBackgroundContent'), 'transparent'), + gradientTint: gradient(namedAlias('colorBackgroundTertiary'), 'transparent'), + gradientWhite: gradient('#FFFFFF', 'transparent'), + gradientBlack: gradient('#00000060', 'transparent'), }; export const vkontakteDisplayTitleFontsPartial: DeepPartial = { @@ -386,7 +407,7 @@ const androidFonts: typeof fonts = lodash.merge