@gravity-ui/markdown-editor 13.25.1 → 14.0.0

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/schema.js

@@ -56,6 +56,7 @@ export const getSchemaSpecs = (opts, placeholder) => {
             attrs: {
                 [TabsAttrs.class]: { default: 'yfm-tabs' },
                 [TabsAttrs.dataDiplodocGroup]: { default: 'unknown' },
+                [TabsAttrs.dataDiplodocVariant]: { default: 'regular' },
             },
             content: `${TabsNode.TabsList} ${TabsNode.TabPanel}+`,
             group: 'block',
@@ -84,6 +85,7 @@ export const getSchemaSpecs = (opts, placeholder) => {
             attrs: {
                 [TabsAttrs.class]: { default: 'yfm-tabs yfm-tabs-vertical' },
                 [TabsAttrs.dataDiplodocGroup]: { default: 'unknown' },
+                [TabsAttrs.dataDiplodocVariant]: { default: 'radio' },
             },
             content: `(${TabsNode.RadioTab} ${TabsNode.TabPanel})+`,
             group: 'block',

package/build/esm/extensions/yfm/YfmTabs/index.d.ts

@@ -1,4 +1,6 @@
+import '@diplodoc/tabs-extension/runtime';
 import type { Action, ExtensionAuto } from '../../../core';
+import '@diplodoc/tabs-extension/runtime/styles.css';
 export { TabsNode, tabType, tabsType, tabsListType, tabPanelType } from './YfmTabsSpecs';
 declare const actionName = "toYfmTabs";
 export declare const YfmTabs: ExtensionAuto;

package/build/esm/extensions/yfm/YfmTabs/index.js

@@ -1,8 +1,10 @@
+import '@diplodoc/tabs-extension/runtime';
 import { chainCommands } from 'prosemirror-commands';
 import { YfmTabsSpecs } from './YfmTabsSpecs';
 import { createYfmTabs } from './actions';
 import { dragAutoSwitch, joinBackwardToOpenTab, liftEmptyBlockFromTabPanel, removeTabWhenCursorAtTheStartOfTab, tabEnter, tabPanelArrowDown, } from './plugins';
 import { tabPanelView, tabView, vtabInputView, vtabView } from './views';
+import '@diplodoc/tabs-extension/runtime/styles.css';
 export { TabsNode, tabType, tabsType, tabsListType, tabPanelType } from './YfmTabsSpecs';
 const actionName = 'toYfmTabs';
 export const YfmTabs = (builder) => {

package/build/esm/markup/codemirror/index.d.ts

@@ -2,3 +2,4 @@ export type { CreateCodemirrorParams } from './create';
 export { createCodemirror } from './create';
 export { ReactRendererFacet } from './react-facet';
 export { getImageDimensions, IMG_MAX_HEIGHT } from './files-upload-plugin';
+export type { YfmLangOptions } from './yfm';

package/build/esm/markup/codemirror/search-plugin/plugin.d.ts

@@ -1,5 +1,6 @@
 import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
-import { EditorMode, EventMap } from '../../../bundle/Editor';
+import type { MarkdownEditorMode } from '../../../bundle';
+import type { EventMap } from '../../../bundle/Editor';
 import type { RendererItem } from '../../../extensions';
 import { Receiver } from '../../../utils';
 interface SearchQueryParams {
@@ -28,7 +29,7 @@ export declare const SearchPanelPlugin: (params: SearchPanelPluginParams) => Vie
     destroy(): void;
     setViewSearch(config: Partial<SearchQueryParams>): void;
     handleEditorModeChange({ mode }: {
-        mode: EditorMode;
+        mode: MarkdownEditorMode;
     }): void;
     handleChange(search: string): void;
     handleClose(): void;

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.25.1' !== 'undefined' ? '13.25.1' : 'unknown';
+export const VERSION = typeof '14.0.0' !== 'undefined' ? '14.0.0' : 'unknown';

package/build/styles.css

@@ -626,6 +626,87 @@
 .g-md-toolbar-colors__item-icon_color_default {
   color: var(--g-color-text-primary);
 }
+.math-inline {
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-complementary);
+  background-color: var(--g-color-base-misc-light);
+}
+.math-inline__sharp {
+  color: var(--g-color-text-hint);
+}
+.math-block {
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-complementary);
+}
+
+.math-block-container {
+  margin-bottom: 15px;
+}
+
+.math-error {
+  color: var(--g-color-text-danger);
+}
+
+.math-block-view.math-view-error {
+  display: flex;
+  justify-content: center;
+}
+
+.math-container.math-active .math-view {
+  display: none;
+}
+
+.math-block-container.math-active .math-block {
+  background-color: var(--g-color-base-misc-light);
+}
+.math-block-container.math-active .math-block::before, .math-block-container.math-active .math-block::after {
+  display: block;
+  content: "$$";
+  color: var(--g-color-text-hint);
+}
+
+.math-container:not(.math-active) {
+  --g-md-math-back-color: transparent;
+  --g-md-math-hover-color: var(--g-color-base-simple-hover);
+  position: relative;
+}
+.math-container:not(.math-active).math-container-error {
+  --g-md-math-back-color: var(--g-color-base-danger-light);
+  --g-md-math-hover-color: var(--g-color-base-danger-light-hover);
+}
+.math-container:not(.math-active)::before {
+  position: absolute;
+  z-index: -1;
+  inset: -2px;
+  content: "";
+  border-radius: var(--g-border-radius-s);
+  background-color: var(--g-md-math-back-color);
+  transition: background-color 0.15s linear;
+}
+.math-container:not(.math-active):hover {
+  cursor: pointer;
+}
+.math-container:not(.math-active):hover::before {
+  background-color: var(--g-md-math-hover-color);
+}
+.math-container:not(.math-active) .math-inline,
+.math-container:not(.math-active) .math-block {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+.math-container:not(.math-active) .g-md-MathHint {
+  display: none;
+}
+
+.g-md-MathHint_view_block {
+  float: right;
+}
+.g-md-MathHint_view_inline {
+  display: inline-block;
+  margin-right: 6px;
+}
 .ProseMirror {
   position: relative;
 }
@@ -943,87 +1024,6 @@ body :has(.g-md-resizable_resizing) {
 .yfm-colorify--violet {
   color: var(--yfm-colorify-violet);
 }
-.math-inline {
-  font-family: var(--g-font-family-monospace);
-  color: var(--g-color-text-complementary);
-  background-color: var(--g-color-base-misc-light);
-}
-.math-inline__sharp {
-  color: var(--g-color-text-hint);
-}
-.math-block {
-  font-family: var(--g-font-family-monospace);
-  color: var(--g-color-text-complementary);
-}
-
-.math-block-container {
-  margin-bottom: 15px;
-}
-
-.math-error {
-  color: var(--g-color-text-danger);
-}
-
-.math-block-view.math-view-error {
-  display: flex;
-  justify-content: center;
-}
-
-.math-container.math-active .math-view {
-  display: none;
-}
-
-.math-block-container.math-active .math-block {
-  background-color: var(--g-color-base-misc-light);
-}
-.math-block-container.math-active .math-block::before, .math-block-container.math-active .math-block::after {
-  display: block;
-  content: "$$";
-  color: var(--g-color-text-hint);
-}
-
-.math-container:not(.math-active) {
-  --g-md-math-back-color: transparent;
-  --g-md-math-hover-color: var(--g-color-base-simple-hover);
-  position: relative;
-}
-.math-container:not(.math-active).math-container-error {
-  --g-md-math-back-color: var(--g-color-base-danger-light);
-  --g-md-math-hover-color: var(--g-color-base-danger-light-hover);
-}
-.math-container:not(.math-active)::before {
-  position: absolute;
-  z-index: -1;
-  inset: -2px;
-  content: "";
-  border-radius: var(--g-border-radius-s);
-  background-color: var(--g-md-math-back-color);
-  transition: background-color 0.15s linear;
-}
-.math-container:not(.math-active):hover {
-  cursor: pointer;
-}
-.math-container:not(.math-active):hover::before {
-  background-color: var(--g-md-math-hover-color);
-}
-.math-container:not(.math-active) .math-inline,
-.math-container:not(.math-active) .math-block {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  opacity: 0;
-}
-.math-container:not(.math-active) .g-md-MathHint {
-  display: none;
-}
-
-.g-md-MathHint_view_block {
-  float: right;
-}
-.g-md-MathHint_view_inline {
-  display: inline-block;
-  margin-right: 6px;
-}
 .yfm.yfm-editor,
 .yfm.yfm-editor code,
 .yfm.yfm-editor pre > code,
@@ -1048,8 +1048,6 @@ body :has(.g-md-resizable_resizing) {
 .ProseMirror.yfm .yfm-cut {
   border: 1px dashed transparent;
   border-radius: var(--g-border-radius-s);
-  /* TODO: Remove this after updating @diplodoc/transform to version 4.19.0 or higher */
-  /* This ensures backward compatibility with earlier versions of cut-extension */
 }
 .ProseMirror.yfm .yfm-cut:hover {
   border-color: var(--g-color-line-generic);
@@ -1060,13 +1058,6 @@ body :has(.g-md-resizable_resizing) {
 .ProseMirror.yfm .yfm-cut .yfm-cut-title:focus {
   outline: 0;
 }
-.ProseMirror.yfm .yfm-cut .yfm-cut-title {
-  list-style: none;
-}
-.ProseMirror.yfm .yfm-cut .yfm-cut-title::-webkit-details-marker,
-.ProseMirror.yfm .yfm-cut .yfm-cut-title::marker {
-  display: none;
-}
 .yfm-editor .yfm-file {
   pointer-events: none;
 }
@@ -1149,6 +1140,57 @@ body :has(.g-md-resizable_resizing) {
 .cm-file-upload-widget + .cm-file-upload-widget {
   margin-left: 2px;
 }
+.pm-h-folding-hidden {
+  display: none;
+}
+
+.pm-h-folding-content {
+  padding-left: 28px;
+}
+
+.pm-h-folding-separator {
+  position: relative;
+}
+.pm-h-folding-separator::before {
+  position: absolute;
+  z-index: 1;
+  bottom: -4px;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  content: "";
+  background-color: var(--g-color-text-secondary);
+  mask-image: url('data:image/svg+xml;svg,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.25a.75.75 0 0 0 0 1.5h5.69l-2.72 2.72a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 0 0-1.06 1.06l2.72 2.72zm7.47 4.22a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 1 0-1.06 1.06L12.94 8z" clip-rule="evenodd"/></svg>');
+  mask-size: 12px;
+  transform: translateY(80%);
+}
+.pm-h-folding-separator::after {
+  position: absolute;
+  z-index: 1;
+  bottom: -8px;
+  left: 16px;
+  display: block;
+  width: calc(100% - 16px - 56px - 6px);
+  content: "";
+  border-top: 1px dashed var(--g-color-line-generic);
+}
+
+.pm-h-folding-label::after {
+  position: absolute;
+  z-index: 1;
+  right: 2px;
+  bottom: -6px;
+  display: block;
+  padding: 0 8px;
+  content: attr(data-value);
+  color: var(--g-color-text-misc);
+  border-radius: 4px;
+  background-color: var(--g-color-base-misc-medium-hover);
+  transform: translate(0, 50%);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
 .g-md-gpt-dialog-error-screen__content {
   display: flex;
   align-items: center;
@@ -1273,6 +1315,105 @@ body :has(.g-md-resizable_resizing) {
   pointer-events: all;
   box-shadow: -8px 2px 16px -4px var(--g-color-private-purple-150), 8px 2px 16px -4px var(--g-color-private-blue-150);
 }
+.g-md-Mermaid {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding: 2px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-Mermaid_edit {
+  display: flex;
+}
+.g-md-Mermaid__Preview {
+  flex: 1;
+}
+.g-md-Mermaid__Error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-Mermaid__Editor {
+  flex: 1;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-Mermaid__EditorPopover {
+  z-index: 1;
+  float: right;
+}
+.g-md-Mermaid__Controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}
+.g-md-yfm-html-block {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding-top: 28px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-yfm-html-block_editing {
+  display: flex;
+  padding-top: 0;
+  border: 0;
+}
+.g-md-yfm-html-block__label {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.g-md-yfm-html-block__menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.g-md-yfm-html-block__preview {
+  flex: 1;
+}
+.g-md-yfm-html-block__error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-yfm-html-block__editor {
+  flex: 1;
+  width: 50%;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-yfm-html-block__editor .g-text-area__content {
+  font-size: 1em;
+  color: var(--yfm-color-hljs-subst);
+  border: 0;
+  border-radius: var(--g-border-radius-m);
+  background: var(--yfm-color-hljs-background);
+  font-feature-settings: normal;
+}
+.g-md-yfm-html-block__editor .g-text-area__control.g-md-YfmHtmlBlockHelper {
+  font-family: var(--yfm-font-family-monospace);
+}
+.g-md-yfm-html-block__editor-popover {
+  z-index: 1;
+  float: right;
+}
+.g-md-yfm-html-block__controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}
+.g-md-yfm-html-block__content {
+  flex-grow: 1;
+}
+
+.g-root_theme_dark-hc .g-md-yfm-html-block_editing .g-text-area__content,
+.g-root_theme_dark .g-md-yfm-html-block_editing .g-text-area__content {
+  color: var(--g-color-text-primary);
+}
 .g-md-link-placeholder-widget {
   margin: 0 2px;
   pointer-events: none;
@@ -1328,57 +1469,6 @@ body :has(.g-md-resizable_resizing) {
   line-height: var(--g-text-code-inline-1-line-height);
   font-weight: var(--g-text-code-font-weight);
 }
-.pm-h-folding-hidden {
-  display: none;
-}
-
-.pm-h-folding-content {
-  padding-left: 28px;
-}
-
-.pm-h-folding-separator {
-  position: relative;
-}
-.pm-h-folding-separator::before {
-  position: absolute;
-  z-index: 1;
-  bottom: -4px;
-  left: 0;
-  width: 12px;
-  height: 12px;
-  content: "";
-  background-color: var(--g-color-text-secondary);
-  mask-image: url('data:image/svg+xml;svg,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.25a.75.75 0 0 0 0 1.5h5.69l-2.72 2.72a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 0 0-1.06 1.06l2.72 2.72zm7.47 4.22a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 1 0-1.06 1.06L12.94 8z" clip-rule="evenodd"/></svg>');
-  mask-size: 12px;
-  transform: translateY(80%);
-}
-.pm-h-folding-separator::after {
-  position: absolute;
-  z-index: 1;
-  bottom: -8px;
-  left: 16px;
-  display: block;
-  width: calc(100% - 16px - 56px - 6px);
-  content: "";
-  border-top: 1px dashed var(--g-color-line-generic);
-}
-
-.pm-h-folding-label::after {
-  position: absolute;
-  z-index: 1;
-  right: 2px;
-  bottom: -6px;
-  display: block;
-  padding: 0 8px;
-  content: attr(data-value);
-  color: var(--g-color-text-misc);
-  border-radius: 4px;
-  background-color: var(--g-color-base-misc-medium-hover);
-  transform: translate(0, 50%);
-  font-size: var(--g-text-body-1-font-size);
-  line-height: var(--g-text-body-1-line-height);
-  font-weight: var(--g-text-body-font-weight);
-}
 .g-md-image-skeleton {
   vertical-align: middle;
 }
@@ -1399,39 +1489,6 @@ body :has(.g-md-resizable_resizing) {
   line-height: var(--g-text-body-2-line-height);
   font-weight: var(--g-text-body-font-weight);
 }
-.g-md-Mermaid {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 15px;
-  padding: 2px;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: var(--g-border-radius-m);
-}
-.g-md-Mermaid_edit {
-  display: flex;
-}
-.g-md-Mermaid__Preview {
-  flex: 1;
-}
-.g-md-Mermaid__Error {
-  flex: 1;
-  font-family: var(--g-font-family-monospace);
-  color: var(--g-color-text-danger);
-}
-.g-md-Mermaid__Editor {
-  flex: 1;
-  white-space: nowrap;
-  caret-color: auto;
-}
-.g-md-Mermaid__EditorPopover {
-  z-index: 1;
-  float: right;
-}
-.g-md-Mermaid__Controls {
-  display: flex;
-  justify-content: end;
-  margin-top: 5px;
-}
 .yfm-cut-title .g-md-yfm-cut-title-inner {
   cursor: text;
 }
@@ -1460,72 +1517,6 @@ body :has(.g-md-resizable_resizing) {
 .g-md-file-placeholder .yfm-file__icon {
   margin-right: 8px;
 }
-.g-md-yfm-html-block {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 15px;
-  padding-top: 28px;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: var(--g-border-radius-m);
-}
-.g-md-yfm-html-block_editing {
-  display: flex;
-  padding-top: 0;
-  border: 0;
-}
-.g-md-yfm-html-block__label {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-}
-.g-md-yfm-html-block__menu {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-.g-md-yfm-html-block__preview {
-  flex: 1;
-}
-.g-md-yfm-html-block__error {
-  flex: 1;
-  font-family: var(--g-font-family-monospace);
-  color: var(--g-color-text-danger);
-}
-.g-md-yfm-html-block__editor {
-  flex: 1;
-  width: 50%;
-  white-space: nowrap;
-  caret-color: auto;
-}
-.g-md-yfm-html-block__editor .g-text-area__content {
-  font-size: 1em;
-  color: var(--yfm-color-hljs-subst);
-  border: 0;
-  border-radius: var(--g-border-radius-m);
-  background: var(--yfm-color-hljs-background);
-  font-feature-settings: normal;
-}
-.g-md-yfm-html-block__editor .g-text-area__control.g-md-YfmHtmlBlockHelper {
-  font-family: var(--yfm-font-family-monospace);
-}
-.g-md-yfm-html-block__editor-popover {
-  z-index: 1;
-  float: right;
-}
-.g-md-yfm-html-block__controls {
-  display: flex;
-  justify-content: end;
-  margin-top: 5px;
-}
-.g-md-yfm-html-block__content {
-  flex-grow: 1;
-}
-
-.g-root_theme_dark-hc .g-md-yfm-html-block_editing .g-text-area__content,
-.g-root_theme_dark .g-md-yfm-html-block_editing .g-text-area__content {
-  color: var(--g-color-text-primary);
-}
 .g-md-search-card {
   padding: var(--g-spacing-2) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-4);
 }
@@ -1614,7 +1605,7 @@ body :has(.g-md-resizable_resizing) {
   font-weight: 700;
 }
 .yfm .yfm-note > p {
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 .yfm .yfm-note > p:first-child::before {
   box-sizing: content-box;
@@ -1635,23 +1626,23 @@ body :has(.g-md-resizable_resizing) {
 .yfm .yfm-note.yfm-accent-tip > p:first-child::before {
   content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(86,189,103)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
 }
-.yfm .yfm-note.yfm-accent-alert > p:first-child::before {
-  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(255,70,69)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
-}
 .yfm .yfm-note.yfm-accent-warning > p:first-child::before {
   content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(241,149,24)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
 }
+.yfm .yfm-note.yfm-accent-alert > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(255,70,69)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
 .yfm .yfm-note.yfm-accent-info {
-  background: rgba(2, 123, 243, 0.08);
+  background: var(--yfm-color-note-info-background);
 }
 .yfm .yfm-note.yfm-accent-tip {
-  background: rgba(63, 201, 46, 0.1);
+  background: var(--yfm-color-note-tip-background);
 }
 .yfm .yfm-note.yfm-accent-alert {
-  background: rgba(235, 50, 38, 0.08);
+  background: var(--yfm-color-note-important-background);
 }
 .yfm .yfm-note.yfm-accent-warning {
-  background: rgba(255, 136, 0, 0.15);
+  background: var(--yfm-color-note-warning-background);
 }
 
 .g-md-yfm-note-toolbar {
@@ -1659,16 +1650,16 @@ body :has(.g-md-resizable_resizing) {
 }
 
 .g-md-toolbar-group__s-button_id_note-type-tip {
-  color: #56bd67;
+  color: var(--yfm-color-note-tip);
 }
 .g-md-toolbar-group__s-button_id_note-type-info {
-  color: #027bf3;
+  color: var(--yfm-color-note-info);
 }
 .g-md-toolbar-group__s-button_id_note-type-alert {
-  color: #ff4645;
+  color: var(--yfm-color-note-important);
 }
 .g-md-toolbar-group__s-button_id_note-type-warning {
-  color: #f19518;
+  color: var(--yfm-color-note-warning);
 }
 .g-md-table-view__hack-strip {
   position: absolute;