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 && (
+
+ )}
+
+
+ (
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/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/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 |