feat: add info about css-vars

ru/toc.yaml

@@ -120,6 +120,8 @@ items:
                 href: tools/transform/settings.md
               - name: Подсветка кода
                 href: tools/transform/highlight.md
+              - name: Css variables
+                href: tools/transform/css-vars.md
           - name: Builder
             items:
               - name: Обзор

ru/tools/transform/css-vars.md

@@ -0,0 +1,52 @@
+# Css переменные
+
+Пакет предоставляет набор css переменных, которые вы можете переопределить исходя из своих потребностей
+
+
+Переменная | Значение
+----- | -----
+`--yfm-color-base` | <span style="display:block;background-color:var(--yfm-color-base-private);width=15px;height=15px;" />
+|
+`--yfm-color-text` | <span style="display:block;background-color:var(--yfm-color-text-private);width=15px;height=15px;" />
+`--yfm-color-link` | <span style="display:block;background-color:var(--yfm-color-link-private);width=15px;height=15px;" />
+`--yfm-color-link-hover` | <span style="display:block;background-color:var(--yfm-color-link-hover-private);width=15px;height=15px;" />
+|
+`--yfm-color-table` | <span style="display:block;background-color:var(--yfm-color-table-private);width=15px;height=15px;" />
+`--yfm-color-table-row-background` | <span style="display:block;background-color:var(--yfm-color-table-row-background-private);width=15px;height=15px;" />
+|
+`--yfm-color-border` | <span style="display:block;background-color:var(--yfm-color-border-private);width=15px;height=15px;" />
+`--yfm-color-accent` | <span style="display:block;background-color:var(--yfm-color-accent-private);width=15px;height=15px;" />
+|
+`--yfm-color-inline-code` | <span style="display:block;background-color:var(--yfm-color-inline-code-private);width=15px;height=15px;" />
+`--yfm-color-inline-code-background` | <span style="display:block;background-color:var(--yfm-color-inline-code-background-private);width=15px;height=15px;" />
+`--yfm-color-code-background` | <span style="display:block;background-color:var(--yfm-color-code-background-private);width=15px;height=15px;" />
+|
+`--yfm-color-hljs-background` | <span style="display:block;background-color:var(--yfm-color-hljs-background-private);width=15px;height=15px;" />
+`--yfm-color-hljs-subst` | <span style="display:block;background-color:var(--yfm-color-hljs-subst-private);width=15px;height=15px;" />
+`--yfm-color-hljs-comment` | <span style="display:block;background-color:var(--yfm-color-hljs-comment-private);width=15px;height=15px;" />
+`--yfm-color-hljs-deletion` | <span style="display:block;background-color:var(--yfm-color-hljs-deletion-private);width=15px;height=15px;" />
+`--yfm-color-hljs-section` | <span style="display:block;background-color:var(--yfm-color-hljs-section-private);width=15px;height=15px;" />
+`--yfm-color-hljs-pseudo` | <span style="display:block;background-color:var(--yfm-color-hljs-pseudo-private);width=15px;height=15px;" />
+`--yfm-color-hljs-literal` | <span style="display:block;background-color:var(--yfm-color-hljs-literal-private);width=15px;height=15px;" />
+`--yfm-color-hljs-addition` | <span style="display:block;background-color:var(--yfm-color-hljs-addition-private);width=15px;height=15px;" />
+`--yfm-color-hljs-meta` | <span style="display:block;background-color:var(--yfm-color-hljs-meta-private);width=15px;height=15px;" />
+`--yfm-color-hljs-meta-string` | <span style="display:block;background-color:var(--yfm-color-hljs-meta-string-private);width=15px;height=15px;" />
+|
+`--yfm-color-note-tip` | <span style="display:block;background-color:var(--yfm-color-note-tip-private);width=15px;height=15px;" />
+`--yfm-color-note-tip-background` | <span style="display:block;background-color:var(--yfm-color-note-tip-background-private);width=15px;height=15px;" />
+`--yfm-color-note-warning` | <span style="display:block;background-color:var(--yfm-color-note-warning-private);width=15px;height=15px;" />
+`--yfm-color-note-warning-background` | <span style="display:block;background-color:var(--yfm-color-note-warning-background-private);width=15px;height=15px;" />
+`--yfm-color-note-important` | <span style="display:block;background-color:var(--yfm-color-note-important-private);width=15px;height=15px;" />
+`--yfm-color-note-important-background` | <span style="display:block;background-color:var(--yfm-color-note-important-background-private);width=15px;height=15px;" />
+`--yfm-color-note-info-background` | <span style="display:block;background-color:var(--yfm-color-note-info-background-private);width=15px;height=15px;" />
+|
+`--yfm-color-term-title` | <span style="display:block;background-color:var(--yfm-color-term-title-private);width=15px;height=15px;" />
+`--yfm-color-term-title-hover` | <span style="display:block;background-color:var(--yfm-color-term-title-hover-private);width=15px;height=15px;" />
+`--yfm-color-term-dfn-background` | <span style="display:block;background-color:var(--yfm-color-term-dfn-background-private);width=15px;height=15px;" />
+`--yfm-color-term-dfn-shadow` | <span style="display:block;background-color:var(--yfm-color-term-dfn-shadow-private);width=15px;height=15px;" />
+`--yfm-color-term-dfn-pseudo-shadow` | <span style="display:block;background-color:var(--yfm-color-term-dfn-pseudo-shadow-private);width=15px;height=15px;" />
+|
+`--yfm-color-modal-content` | <span style="display:block;background-color:var(--yfm-color-modal-content-private);width=15px;height=15px;" />
+`--yfm-color-modal-actions-hover` | <span style="display:block;background-color:var(--yfm-color-modal-actions-hover-private);width=15px;height=15px;" />
+`--yfm-color-modal-wide-content` | <span style="display:block;background-color:var(--yfm-color-modal-wide-content-private);width=15px;height=15px;" />
+`--yfm-color-modal-wide-content-overlay` | <span style="display:block;background-color:var(--yfm-color-modal-wide-content-overlay-private);width=15px;height=15px;" />