@gravity-ui/markdown-editor 15.25.0 → 15.27.0

package/build/esm/modules/search/index.js

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./components/SearchPopup.js";
+export { SearchQA } from "./qa.js";
+//# sourceMappingURL=index.js.map

package/build/esm/modules/search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["modules/search/index.ts"],"names":[],"mappings":"AAAA,2BAAwB;AACxB,4CAAyC;AACzC,OAAO,EAAC,QAAQ,EAAC,gBAAa","sourcesContent":["export * from './types';\nexport * from './components/SearchPopup';\nexport {SearchQA} from './qa';\n"]}

package/build/esm/modules/search/qa.d.ts

@@ -0,0 +1,14 @@
+export declare const SearchQA: {
+    readonly Panel: "g-md-search-panel";
+    readonly Counter: "g-md-search-counter";
+    readonly NextBtn: "g-md-search-next-btn";
+    readonly PrevBtn: "g-md-search-prev-btn";
+    readonly FindInput: "g-md-search-find-input";
+    readonly ReplaceInput: "g-md-search-replace-input";
+    readonly ReplaceBtn: "g-md-search-replace-btn";
+    readonly ReplaceAllBtn: "g-md-search-replace-all-btn";
+    readonly ExpandBtn: "g-md-search-expand-btn";
+    readonly CaseSensitiveCheck: "g-md-search-case-sensitive-check";
+    readonly WholeWordCheck: "g-md-search-whole-word-check";
+    readonly CloseBtn: "g-md-search-close-btn";
+};

package/build/esm/modules/search/qa.js

@@ -0,0 +1,15 @@
+export const SearchQA = {
+    Panel: 'g-md-search-panel',
+    Counter: 'g-md-search-counter',
+    NextBtn: 'g-md-search-next-btn',
+    PrevBtn: 'g-md-search-prev-btn',
+    FindInput: 'g-md-search-find-input',
+    ReplaceInput: 'g-md-search-replace-input',
+    ReplaceBtn: 'g-md-search-replace-btn',
+    ReplaceAllBtn: 'g-md-search-replace-all-btn',
+    ExpandBtn: 'g-md-search-expand-btn',
+    CaseSensitiveCheck: 'g-md-search-case-sensitive-check',
+    WholeWordCheck: 'g-md-search-whole-word-check',
+    CloseBtn: 'g-md-search-close-btn',
+};
+//# sourceMappingURL=qa.js.map

package/build/esm/modules/search/qa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qa.js","sourceRoot":"../../../../src","sources":["modules/search/qa.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,KAAK,EAAE,mBAAmB;IAC1B,OAAO,EAAE,qBAAqB;IAC9B,OAAO,EAAE,sBAAsB;IAC/B,OAAO,EAAE,sBAAsB;IAC/B,SAAS,EAAE,wBAAwB;IACnC,YAAY,EAAE,2BAA2B;IACzC,UAAU,EAAE,yBAAyB;IACrC,aAAa,EAAE,6BAA6B;IAC5C,SAAS,EAAE,wBAAwB;IACnC,kBAAkB,EAAE,kCAAkC;IACtD,cAAc,EAAE,8BAA8B;IAC9C,QAAQ,EAAE,uBAAuB;CAC3B,CAAC","sourcesContent":["export const SearchQA = {\n    Panel: 'g-md-search-panel',\n    Counter: 'g-md-search-counter',\n    NextBtn: 'g-md-search-next-btn',\n    PrevBtn: 'g-md-search-prev-btn',\n    FindInput: 'g-md-search-find-input',\n    ReplaceInput: 'g-md-search-replace-input',\n    ReplaceBtn: 'g-md-search-replace-btn',\n    ReplaceAllBtn: 'g-md-search-replace-all-btn',\n    ExpandBtn: 'g-md-search-expand-btn',\n    CaseSensitiveCheck: 'g-md-search-case-sensitive-check',\n    WholeWordCheck: 'g-md-search-whole-word-check',\n    CloseBtn: 'g-md-search-close-btn',\n} as const;\n"]}

package/build/esm/modules/search/types.d.ts

@@ -0,0 +1,10 @@
+export type SearchState = {
+    search: string;
+    replace: string;
+    caseSensitive: boolean;
+    wholeWord: boolean;
+};
+export type SearchCounter = {
+    current: number;
+    total: number;
+};

package/build/esm/modules/search/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/esm/modules/search/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["modules/search/types.ts"],"names":[],"mappings":"","sourcesContent":["export type SearchState = {\n    search: string;\n    replace: string;\n    caseSensitive: boolean;\n    wholeWord: boolean;\n};\n\nexport type SearchCounter = {\n    current: number;\n    total: number;\n};\n"]}

package/build/esm/react-utils/useAutoFocus.d.ts

@@ -1,2 +1,2 @@
 import { type RefObject } from 'react';
-export declare const useAutoFocus: (nodeRef: RefObject<HTMLElement>, dependencies?: unknown[]) => void;
+export declare function useAutoFocus<T extends HTMLElement>(ref: RefObject<T>, dependencies?: unknown[], timeout?: number): void;

package/build/esm/react-utils/useAutoFocus.js

@@ -1,15 +1,14 @@
 import { useEffect } from 'react';
-export const useAutoFocus = (nodeRef, dependencies = []) => {
+export function useAutoFocus(ref, dependencies = [], timeout = 0) {
     useEffect(() => {
-        const { current: anchor } = nodeRef;
-        const timeout = setTimeout(() => {
-            anchor?.focus();
-        });
+        const timeoutId = setTimeout(() => {
+            ref.current?.focus();
+        }, timeout);
         return () => {
-            clearTimeout(timeout);
+            clearTimeout(timeoutId);
         };
         // https://github.com/facebook/react/issues/23392#issuecomment-1055610198
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [nodeRef.current, ...dependencies]);
-};
+    }, dependencies);
+}
 //# sourceMappingURL=useAutoFocus.js.map

package/build/esm/react-utils/useAutoFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoFocus.js","sourceRoot":"../../../src","sources":["react-utils/useAutoFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAA+B,EAAE,eAA0B,EAAE,EAAE,EAAE;IAC1F,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,EAAC,OAAO,EAAE,MAAM,EAAC,GAAG,OAAO,CAAC;QAClC,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,MAAM,EAAE,KAAK,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACR,YAAY,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC,CAAC;QACF,yEAAyE;QACzE,uDAAuD;IAC3D,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;AAC3C,CAAC,CAAC","sourcesContent":["import {type RefObject, useEffect} from 'react';\n\nexport const useAutoFocus = (nodeRef: RefObject<HTMLElement>, dependencies: unknown[] = []) => {\n    useEffect(() => {\n        const {current: anchor} = nodeRef;\n        const timeout = setTimeout(() => {\n            anchor?.focus();\n        });\n\n        return () => {\n            clearTimeout(timeout);\n        };\n        // https://github.com/facebook/react/issues/23392#issuecomment-1055610198\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [nodeRef.current, ...dependencies]);\n};\n"]}
+{"version":3,"file":"useAutoFocus.js","sourceRoot":"../../../src","sources":["react-utils/useAutoFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhD,MAAM,UAAU,YAAY,CACxB,GAAiB,EACjB,eAA0B,EAAE,EAC5B,OAAO,GAAG,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QACzB,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,OAAO,GAAG,EAAE;YACR,YAAY,CAAC,SAAS,CAAC,CAAC;QAC5B,CAAC,CAAC;QACF,yEAAyE;QACzE,uDAAuD;IAC3D,CAAC,EAAE,YAAY,CAAC,CAAC;AACrB,CAAC","sourcesContent":["import {type RefObject, useEffect} from 'react';\n\nexport function useAutoFocus<T extends HTMLElement>(\n    ref: RefObject<T>,\n    dependencies: unknown[] = [],\n    timeout = 0,\n) {\n    useEffect(() => {\n        const timeoutId = setTimeout(() => {\n            ref.current?.focus();\n        }, timeout);\n\n        return () => {\n            clearTimeout(timeoutId);\n        };\n        // https://github.com/facebook/react/issues/23392#issuecomment-1055610198\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, dependencies);\n}\n"]}

package/build/esm/styles/styles.css

@@ -23,6 +23,295 @@
   --yfm-colorify-violet: var(--yfm-color-text-violet);
 }
 
+.yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+
+.yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+
+.yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+
+.yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+
+.g-root_theme_light .yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+
+.g-root_theme_light-hc .yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+
+.g-root_theme_dark .yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+.g-root_theme_dark .yfm table[sticky-header] th::before {
+  background: var(--yfm-color-base);
+}
+.g-root_theme_dark .yfm .yfm-cut-title:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==");
+}
+.g-root_theme_dark .yfm .yfm-tabs-accordion .yfm-tab:after {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==");
+}
+
+.g-root_theme_dark-hc .yfm {
+  --yfm-color-base: var(--g-color-base-background);
+  --yfm-color-text: var(--g-color-text-primary);
+  --yfm-color-link: var(--g-color-text-link);
+  --yfm-color-link-hover: var(--g-color-text-link-hover);
+  --yfm-color-border: var(--g-color-line-generic);
+  --yfm-color-accent: var(--g-color-line-brand);
+  --yfm-color-inline-code: var(--g-color-text-misc);
+  --yfm-color-inline-code-background: var(--g-color-base-misc-light);
+  --yfm-color-code-background: var(--g-color-base-misc-light);
+  --yfm-color-note-tip: var(--g-color-text-positive);
+  --yfm-color-note-tip-background: var(--g-color-base-positive-light);
+  --yfm-color-note-warning: var(--g-color-text-warning);
+  --yfm-color-note-warning-background: var(--g-color-base-warning-light);
+  --yfm-color-note-important: var(--g-color-text-danger);
+  --yfm-color-note-important-background: var(--g-color-base-danger-light);
+  --yfm-color-note-info: var(--g-color-text-info);
+  --yfm-color-note-info-background: var(--g-color-base-info-light);
+  --yfm-color-term-title: var(--g-color-text-brand);
+  --yfm-color-term-title-hover: var(--g-color-text-brand-heavy);
+  --yfm-color-term-dfn-background: var(--g-color-base-float);
+  --yfm-color-term-dfn-shadow: var(--g-color-sfx-shadow);
+  --yfm-color-term-dfn-pseudo-shadow: var(--g-color-line-generic);
+  --yfm-color-modal-content: var(--g-color-base-modal);
+  --yfm-color-modal-actions-hover: var(--g-color-base-simple-hover);
+  --yfm-color-modal-wide-content: var(--g-color-text-primary);
+  --yfm-color-modal-wide-content-overlay: var(--g-color-sfx-veil);
+  --yfm-color-table: var(--g-color-text-primary);
+  --yfm-color-table-row-background: var(--g-color-base-generic);
+  --yfm-color-table-border: var(--g-color-line-generic);
+  --yfm-color-table-background: var(--g-color-base-background);
+  --yfm-color-table-head-background: var(--g-color-base-generic);
+  --yfm-color-table-stripe-row-background: var(--g-color-base-generic);
+}
+
 /*
  TDOD: delete it after https://github.com/diplodoc-platform/transform/pull/708
  fix spacing for last paragraph and empty paragraphs with cursor (override YFM style)