@gravity-ui/markdown-editor 15.24.1 → 15.26.1

package/build/styles.css

@@ -302,6 +302,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)
@@ -338,6 +627,294 @@
 .g-root .yfm:not(.yfm_only-light) {
   --yfm-file-icon-color: var(--g-color-text-primary);
 }
+.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);
+}
 .g-md-flex-toolbar {
   position: relative;
   height: 28px;
@@ -1559,6 +2136,14 @@ body :has(.g-md-resizable_resizing) {
 .g-root_theme_dark .g-md-yfm-html-block_editing .g-text-area__content {
   color: var(--g-color-text-primary);
 }
+.yfm.ProseMirror .hljs.show-line-numbers {
+  display: flex;
+  white-space: pre;
+}
+
+.yfm.ProseMirror pre > code > .yfm-line-numbers > .yfm-line-number {
+  display: block;
+}
 .g-md-link-placeholder-widget {
   margin: 0 2px;
   pointer-events: none;
@@ -1723,6 +2308,10 @@ body :has(.g-md-resizable_resizing) {
 .g-md-code-block__select-button {
   margin: auto 0;
 }
+
+.g-md-code-block__show-line-numbers {
+  margin: auto 0;
+}
 .table-cell-floating-button.g-button {
   height: 28px;
   line-height: 28px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "15.24.1",
+  "version": "15.26.1",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -221,21 +221,22 @@
     "uuid": "11.0.5"
   },
   "devDependencies": {
-    "@diplodoc/cut-extension": "^0.6.1",
-    "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "2.7.1",
-    "@diplodoc/latex-extension": "1.0.3",
-    "@diplodoc/mermaid-extension": "1.2.1",
+    "@diplodoc/cut-extension": "^1.1.0",
+    "@diplodoc/folding-headings-extension": "^0.1.2",
+    "@diplodoc/html-extension": "^2.9.1",
+    "@diplodoc/latex-extension": "^1.4.1",
+    "@diplodoc/mermaid-extension": "^1.4.0",
     "@diplodoc/quote-link-extension": "0.1.3",
-    "@diplodoc/tabs-extension": "^3.5.1",
-    "@diplodoc/transform": "^4.58.0",
+    "@diplodoc/tabs-extension": "^3.7.5",
+    "@diplodoc/themes": "^1.0.0",
+    "@diplodoc/transform": "^4.65.0",
     "@gravity-ui/components": "4.10.0",
     "@gravity-ui/eslint-config": "3.3.0",
     "@gravity-ui/gulp-utils": "1.0.3",
     "@gravity-ui/prettier-config": "1.1.0",
     "@gravity-ui/stylelint-config": "4.0.1",
     "@gravity-ui/tsconfig": "1.0.0",
-    "@gravity-ui/uikit": "7.10.0",
+    "@gravity-ui/uikit": "^7.13.1",
     "@playwright/experimental-ct-react": "1.49.0",
     "@playwright/test": "1.49.0",
     "@storybook/addon-docs": "8.4.1",