From 54b3aaa53b055eb0ebf8288513c52d285130810c Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Thu, 14 Nov 2024 18:10:18 +0300
Subject: [PATCH] feat: add examples

---
 ru/toc.yaml                    |  4 ++--
 ru/tools/transform/css-vars.md | 42 ++++++++++++++++------------------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/ru/toc.yaml b/ru/toc.yaml
index 26b1577..861b338 100644
--- a/ru/toc.yaml
+++ b/ru/toc.yaml
@@ -39,7 +39,7 @@ items:
       - name: Быстрый старт
         href: how-it-work.md
       - name: Тестовый шаблон
-        href: static-template.md      
+        href: static-template.md
   - name: Настройка личного домена
     href: personal-domain-ya-cloud.md
   - name: Yandex Flavored Markdown
@@ -120,7 +120,7 @@ items:
                 href: tools/transform/settings.md
               - name: Подсветка кода
                 href: tools/transform/highlight.md
-              - name: Css variables
+              - name: CSS переменные
                 href: tools/transform/css-vars.md
           - name: Builder
             items:
diff --git a/ru/tools/transform/css-vars.md b/ru/tools/transform/css-vars.md
index a676e98..7bb7ad4 100644
--- a/ru/tools/transform/css-vars.md
+++ b/ru/tools/transform/css-vars.md
@@ -1,26 +1,24 @@
-# Css переменные
+# CSS переменные
 
 Пакет предоставляет набор css переменных, которые вы можете переопределить исходя из своих потребностей
 
 
-Переменная | Значение
------ | -----
-`--yfm-color-base` | <span style="display:block;background-color:var(--yfm-color-base-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
-`--yfm-color-text` | <span style="display:block;background-color:var(--yfm-color-text-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-`--yfm-color-link` | <span style="display:block;background-color:var(--yfm-color-link-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-`--yfm-color-link-hover` | <span style="display:block;background-color:var(--yfm-color-link-hover-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
-`--yfm-color-table` | <span style="display:block;background-color:var(--yfm-color-table-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-`--yfm-color-table-row-background` | <span style="display:block;background-color:var(--yfm-color-table-row-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
-`--yfm-color-border` | <span style="display:block;background-color:var(--yfm-color-border-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-`--yfm-color-accent` | <span style="display:block;background-color:var(--yfm-color-accent-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
-`--yfm-color-inline-code` | <span style="display:block;background-color:var(--yfm-color-inline-code-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-`--yfm-color-inline-code-background` | <span style="display:block;background-color:var(--yfm-color-inline-code-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-`--yfm-color-code-background` | <span style="display:block;background-color:var(--yfm-color-code-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
+| Переменная | Значение по умолчанию | Пример |
+| :--------- | :-------------------: | :----- |
+| _common_ | | |
+|`--yfm-color-base` | <span style="display:block;background-color:var(--yfm-color-base-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Background-color у таблиц, можно смотреть на примере этой |
+`--yfm-color-text` | <span style="display:block;background-color:var(--yfm-color-text-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | В `.yfm` классе дефолтный color |
+`--yfm-color-link` | <span style="display:block;background-color:var(--yfm-color-link-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Любая ссылка `<a>` |
+`--yfm-color-link-hover` | <span style="display:block;background-color:var(--yfm-color-link-hover-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Hover состояние ссылки `<a>` |
+`--yfm-color-table` | <span style="display:block;background-color:var(--yfm-color-table-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Дефолтный color в таблице |
+`--yfm-color-table-row-background` | <span style="display:block;background-color:var(--yfm-color-table-row-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Background-color для каждой второй строки в таблице |
+`--yfm-color-border` | <span style="display:block;background-color:var(--yfm-color-border-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Границы таблицы |
+`--yfm-color-accent` | <span style="display:block;background-color:var(--yfm-color-accent-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Цвет для тега `<hr>` или левая граница цитаты |
+| _code_ | | |
+`--yfm-color-inline-code` | <span style="display:block;background-color:var(--yfm-color-inline-code-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Цвет в блоке [code](../../syntax/code.md)|
+`--yfm-color-inline-code-background` | <span style="display:block;background-color:var(--yfm-color-inline-code-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Background-color блока [inline-code](../../syntax/code.md#inline) |
+`--yfm-color-code-background` | <span style="display:block;background-color:var(--yfm-color-code-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" /> | Background-color блока [code](../../syntax/code.md#block) |
+| _hljs_ | | |
 `--yfm-color-hljs-background` | <span style="display:block;background-color:var(--yfm-color-hljs-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-hljs-subst` | <span style="display:block;background-color:var(--yfm-color-hljs-subst-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-hljs-comment` | <span style="display:block;background-color:var(--yfm-color-hljs-comment-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
@@ -31,7 +29,7 @@
 `--yfm-color-hljs-addition` | <span style="display:block;background-color:var(--yfm-color-hljs-addition-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-hljs-meta` | <span style="display:block;background-color:var(--yfm-color-hljs-meta-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-hljs-meta-string` | <span style="display:block;background-color:var(--yfm-color-hljs-meta-string-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
+| _note_ | | Примеры можно посмотреть на [странице](../../syntax/notes.md) документации заметок|
 `--yfm-color-note-tip` | <span style="display:block;background-color:var(--yfm-color-note-tip-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-note-tip-background` | <span style="display:block;background-color:var(--yfm-color-note-tip-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-note-warning` | <span style="display:block;background-color:var(--yfm-color-note-warning-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
@@ -39,13 +37,13 @@
 `--yfm-color-note-important` | <span style="display:block;background-color:var(--yfm-color-note-important-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-note-important-background` | <span style="display:block;background-color:var(--yfm-color-note-important-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-note-info-background` | <span style="display:block;background-color:var(--yfm-color-note-info-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
+| _term_ | | Примеры можно посмотреть на [странице](../../syntax/term.md) документации всплывающих подсказок|
 `--yfm-color-term-title` | <span style="display:block;background-color:var(--yfm-color-term-title-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-term-title-hover` | <span style="display:block;background-color:var(--yfm-color-term-title-hover-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-term-dfn-background` | <span style="display:block;background-color:var(--yfm-color-term-dfn-background-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-term-dfn-shadow` | <span style="display:block;background-color:var(--yfm-color-term-dfn-shadow-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-term-dfn-pseudo-shadow` | <span style="display:block;background-color:var(--yfm-color-term-dfn-pseudo-shadow-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
-|
+| _modal_ | | |
 `--yfm-color-modal-content` | <span style="display:block;background-color:var(--yfm-color-modal-content-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-modal-actions-hover` | <span style="display:block;background-color:var(--yfm-color-modal-actions-hover-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />
 `--yfm-color-modal-wide-content` | <span style="display:block;background-color:var(--yfm-color-modal-wide-content-private);width:20px;height:20px;border: 0.5px solid black;border-radius: 50%;" />