@gravity-ui/markdown-editor 15.25.0 → 15.27.0

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;
@@ -1084,6 +1661,13 @@ body :has(.g-md-resizable_resizing) {
   background: rgba(127, 127, 127, 0.8);
   transition: opacity 300ms ease-in 0s;
 }
+.ProseMirror-search-match {
+  background-color: var(--g-color-base-info-light);
+}
+
+.ProseMirror-active-search-match {
+  background-color: var(--g-color-base-info-heavy);
+}
 .g-md-editor.ProseMirror-focused .pm-node-selected {
   box-shadow: var(--g-color-text-info) 0 0 0 1px;
 }
@@ -1281,6 +1865,27 @@ body :has(.g-md-resizable_resizing) {
 .cm-file-upload-widget + .cm-file-upload-widget {
   margin-left: 2px;
 }
+.g-md-search-card {
+  width: 428px;
+}
+.g-md-search-card__row.g-md-search-card__row {
+  --gc-form-row-label-width: 86px;
+  --gc-form-row-field-height: 36px;
+}
+.g-md-search-compact {
+  display: flex;
+  align-items: center;
+  width: 428px;
+}
+.g-md-search-popup {
+  --g-popup-border-width: 0;
+  --g-popup-border-radius: 16px;
+  border-radius: 16px;
+}
+.g-md-search-popup_compact {
+  --g-popup-border-radius: var(--g-border-radius-l);
+  border-radius: var(--g-border-radius-l);
+}
 .ProseMirror .pm-h-folding-hidden,
 .yfm.ProseMirror .pm-h-folding-hidden {
   display: none;
@@ -1559,6 +2164,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;
@@ -1665,16 +2278,6 @@ body :has(.g-md-resizable_resizing) {
 .g-md-file-placeholder .yfm-file__icon {
   margin-right: 8px;
 }
-.g-md-search-card {
-  width: 450px;
-  padding: var(--g-spacing-2) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-4);
-}
-.g-md-search-card__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--g-spacing-1);
-}
 .g-md-gpt-dialog-loading-screen__header {
   display: flex;
   align-items: center;
@@ -1723,6 +2326,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;