From 25fa2855234c6dc9ddad3ae665adbd6dbf0db9f4 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Tue, 10 Sep 2024 18:35:23 +0300
Subject: [PATCH 1/4] feat: create css-api for all styles without modal

---
 src/scss/_common.scss    | 50 ++++++++++++++++++----------------------
 src/scss/_cut.scss       |  8 ++++++-
 src/scss/_file.scss      |  9 ++++++--
 src/scss/_highlight.scss | 16 ++++---------
 src/scss/_modal.scss     |  6 +++--
 src/scss/_note.scss      | 32 +++++++++++--------------
 src/scss/_term.scss      | 16 +++++++++----
 src/scss/_variables.scss | 16 -------------
 src/scss/brand.scss      | 43 ++++++++++++++++++++++++++++++++++
 src/scss/private.scss    | 35 ++++++++++++++++++++++++++++
 10 files changed, 147 insertions(+), 84 deletions(-)
 delete mode 100644 src/scss/_variables.scss
 create mode 100644 src/scss/brand.scss
 create mode 100644 src/scss/private.scss

diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index 7dc34e7a..b2841caa 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -1,4 +1,6 @@
-@import 'variables';
+/* stylelint-disable declaration-no-important */
+@import 'private';
+@import 'brand';
 
 @mixin removeMarginForEdgeChildren {
     & > *:first-child {
@@ -11,11 +13,14 @@
 }
 
 .yfm {
+    @include private-brand();
+    @include brand();
+
     font-family: var(--yfm-font-family-sans);
     font-size: 15px;
     line-height: 20px;
     word-wrap: break-word;
-    color: $textColor;
+    color: var(--yfm-color-text);
 
     * {
         box-sizing: border-box;
@@ -66,11 +71,11 @@
 
     a {
         background-color: transparent;
-        color: $linkColor;
+        color: var(--yfm-color-link);
         text-decoration: none;
 
         &:hover, &:active {
-            color: $linkHoverColor;
+            color: var(--yfm-color-link-hover);
         }
 
         &:not([href]) {
@@ -100,7 +105,7 @@
 
     img {
         object-fit: contain;
-        background-color: $baseColor;
+        background-color: var(--yfm-color-base);
     }
 
     svg {
@@ -157,7 +162,7 @@
     }
 
     table {
-        color: #333;
+        color: var(--yfm-color-table);
 
         display: inline-block;
         max-width: 100%;
@@ -167,14 +172,14 @@
         z-index: 1;
 
         box-sizing: border-box;
-        border: 1px solid $borderColor;
+        border: 1px solid var(--yfm-color-border);
         border-radius: 8px;
         border-collapse: collapse;
         border-spacing: 0;
-        background: $baseColor;
+        background: var(--yfm-color-base);
 
         thead, tr:nth-child(2n) {
-            background-color: $tableRowBackgroundColor;
+            background-color: var(--yfm-color-table-row-background);
         }
 
         tr:first-child {
@@ -194,7 +199,7 @@
             padding: 10px 20px;
             overflow: hidden;
             text-overflow: ellipsis;
-            border: 1px solid $borderColor;
+            border: 1px solid var(--yfm-color-border);
 
             @include removeMarginForEdgeChildren();
         }
@@ -224,7 +229,7 @@
         margin: 1.5em 0;
         overflow: hidden;
 
-        background-color: $borderColor;
+        background-color: var(--yfm-color-border);
         border: none;
 
         &::before {
@@ -242,7 +247,7 @@
     blockquote {
         position: relative;
         padding-left: 12px;
-        border-left: 3px solid $accentColor;
+        border-left: 3px solid var(--yfm-color-accent);
 
         @include removeMarginForEdgeChildren();
     }
@@ -321,11 +326,11 @@
 
     code {
         padding: 0.1em 0.4em 0.15em;
-        background-color: $inlineCodeBackgroundColor;
+        background-color: var(--yfm-color-inline-code-background);
         border-radius: 4px;
         font-size: 0.875em;
         white-space: pre-wrap;
-        color: $inlineCodeColor;
+        color: var(--yfm-color-inline-code);
     }
 
     pre {
@@ -344,7 +349,7 @@
         word-wrap: normal;
         background-color: transparent;
         border: 0;
-        color: $textColor;
+        color: var(--yfm-color-text);
     }
 
     pre > code {
@@ -352,8 +357,8 @@
         padding: 16px;
         overflow: auto;
 
-        background-color: $codeBackgroundColor;
-        color: $textColor;
+        background-color: var(--yfm-color-code-background);
+        color: var(--yfm-color-text);
 
         white-space: pre;
     }
@@ -388,17 +393,6 @@
         user-select: none;
     }
 
-    // highlight.js colors
-    --yfm-color-hljs-background: #{$codeBackgroundColor};
-    --yfm-color-hljs-subst: #444;
-    --yfm-color-hljs-comment: #888888;
-    --yfm-color-hljs-deletion: #880000;
-    --yfm-color-hljs-section: #880000;
-    --yfm-color-hljs-pseudo: #BC6060;
-    --yfm-color-hljs-literal: #78A960;
-    --yfm-color-hljs-addition: #397300;
-    --yfm-color-hljs-meta: #1f7199;
-    --yfm-color-hljs-meta-string: #4d99bf;
     --yfm-font-family-monospace: "Menlo", "Monaco", "Consolas", "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace;
     --yfm-font-family-sans: 'Segoe UI', Arial, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
diff --git a/src/scss/_cut.scss b/src/scss/_cut.scss
index c040c6dd..9d8aa461 100644
--- a/src/scss/_cut.scss
+++ b/src/scss/_cut.scss
@@ -1,4 +1,10 @@
+@import 'private';
+@import 'brand';
+
 .yfm-cut {
+    @include private-brand();
+    @include brand();
+
     $class: &;
     margin-bottom: 15px;
 
@@ -14,7 +20,7 @@
         }
 
         &:focus {
-            outline-color: $accentColor;
+            outline-color: var(--yfm-color-accent);
         }
 
         &:before {
diff --git a/src/scss/_file.scss b/src/scss/_file.scss
index 9166fd35..b0eb1214 100644
--- a/src/scss/_file.scss
+++ b/src/scss/_file.scss
@@ -1,4 +1,6 @@
-@import 'variables';
+@import 'private';
+@import 'brand';
+
 
 $defaultIcon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg==");
 
@@ -9,6 +11,9 @@ $defaultIcon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 */
 
 .yfm-file {
+    @include private-brand();
+    @include brand();
+
     &__icon {
         ---yfm-file-icon-img: var(--yfm-file-icon, #{$defaultIcon});
 
@@ -18,7 +23,7 @@ $defaultIcon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
         width: 16px;
         margin: 0 2px;
 
-        color: var(--yfm-file-icon-color, #{$textColor});
+        color: var(--yfm-file-icon-color, --yfm-color-text);
         background-color: currentColor;
         background-repeat: no-repeat;
         background-position: 50%;
diff --git a/src/scss/_highlight.scss b/src/scss/_highlight.scss
index e26e15b6..70eb379b 100644
--- a/src/scss/_highlight.scss
+++ b/src/scss/_highlight.scss
@@ -1,22 +1,23 @@
-@import 'variables';
+@import 'private';
+@import 'brand';
 
 .yfm {
+    @include private-brand();
+    @include brand();
+
     .hljs {
         display: block;
         overflow-x: auto;
         padding: 16px;
-        background: $codeBackgroundColor;
         background: var(--yfm-color-hljs-background);
     }
 
     .hljs,
     .hljs-subst {
-        color: #444;
         color: var(--yfm-color-hljs-subst);
     }
 
     .hljs-comment {
-        color: #888888;
         color: var(--yfm-color-hljs-comment);
     }
 
@@ -38,13 +39,11 @@
     .hljs-quote,
     .hljs-template-tag,
     .hljs-deletion {
-        color: #880000;
         color: var(--yfm-color-hljs-deletion);
     }
 
     .hljs-title,
     .hljs-section {
-        color: #880000;
         color: var(--yfm-color-hljs-section);
         font-weight: bold;
     }
@@ -56,13 +55,11 @@
     .hljs-link,
     .hljs-selector-attr,
     .hljs-selector-pseudo {
-        color: #BC6060;
         color: var(--yfm-color-hljs-pseudo);
     }
 
 
     .hljs-literal {
-        color: #78A960;
         color: var(--yfm-color-hljs-literal);
     }
 
@@ -70,18 +67,15 @@
     .hljs-bullet,
     .hljs-code,
     .hljs-addition {
-        color: #397300;
         color: var(--yfm-color-hljs-addition);
     }
 
 
     .hljs-meta {
-        color: #1f7199;
         color: var(--yfm-color-hljs-meta);
     }
 
     .hljs-meta-string {
-        color: #4d99bf;
         color: var(--yfm-color-hljs-meta-string);
     }
 
diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
index 1da44b05..f246f717 100644
--- a/src/scss/_modal.scss
+++ b/src/scss/_modal.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable declaration-no-important */
+
 .wide-container {
     position: fixed;
     width: 100vw;
@@ -19,7 +21,7 @@
 
     .wide-content-wrapper {
         z-index: 200;
-        background-color: var(--g-color-base-background);   
+        background-color: var(--g-color-base-background);
         height: 90vh;
         width: 70vw;
         border-radius: 10px;
@@ -75,7 +77,7 @@
             }
        }
     }
-}   
+}
 
 .wide-element-wrapper {
     display: flex;
diff --git a/src/scss/_note.scss b/src/scss/_note.scss
index e499c248..e70fb69b 100644
--- a/src/scss/_note.scss
+++ b/src/scss/_note.scss
@@ -1,16 +1,10 @@
-@import 'variables';
-
-$infoColor: $accentColor;
-$tipColor: #56bd67;
-$warningColor: #f19518;
-$importantColor: #ff4645;
-
-$infoBackgroundColor: rgba(2, 123, 243, 0.08);
-$tipBackgroundColor: rgba(63, 201, 46, 0.1);
-$warningBackgroundColor: rgba(255, 136, 0, 0.15);
-$importantBackgroundColor: rgba(235, 50, 38, 0.08);
+@import 'private';
+@import 'brand';
 
 .yfm .yfm-note {
+    @include private-brand();
+    @include brand();
+
     max-width: 1296px;
     margin: 20px 0;
     padding: 20px 20px 20px 64px;
@@ -42,10 +36,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     $colors: (
-        yfm-accent-info: $infoColor,
-        yfm-accent-tip: $tipColor,
-        yfm-accent-alert: $importantColor,
-        yfm-accent-warning: $warningColor
+        yfm-accent-info: var(--yfm-color-accent),
+        yfm-accent-tip: var(--yfm-color-note-tip),
+        yfm-accent-alert: var(--yfm-color-note-important),
+        yfm-accent-warning: var(--yfm-color-note-warning),
     );
 
     @each $type, $color in $colors {
@@ -59,10 +53,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     $backgroundColors: (
-        yfm-accent-info: $infoBackgroundColor,
-        yfm-accent-tip: $tipBackgroundColor,
-        yfm-accent-alert: $importantBackgroundColor,
-        yfm-accent-warning: $warningBackgroundColor
+        yfm-accent-info: var(--yfm-color-note-info-background),
+        yfm-accent-tip: var(--yfm-color-note-tip-background),
+        yfm-accent-alert: var(--yfm-color-note-important-background),
+        yfm-accent-warning: var(--yfm-color-note-warning-background),
     );
 
     @each $type, $color in $backgroundColors {
diff --git a/src/scss/_term.scss b/src/scss/_term.scss
index 46eecb39..a342e85f 100644
--- a/src/scss/_term.scss
+++ b/src/scss/_term.scss
@@ -1,6 +1,12 @@
+@import 'private';
+@import 'brand';
+
 .yfm-term {
+    @include private-brand();
+    @include brand();
+
     &_title {
-        color: #027bf3;
+        color: var(--yfm-color-term-title);
         cursor: pointer;
 
         border-bottom: 1px dotted;
@@ -10,7 +16,7 @@
         font-style: normal;
 
         &:hover {
-            color: #004080;
+            color: var(--yfm-color-term-title-hover);
         }
     }
 
@@ -32,7 +38,7 @@
 
         padding: 10px;
 
-        background-color: rgb(255, 255, 255);
+        background-color: var(--yfm-color-term-dfn-background);
 
         font-size: inherit;
         line-height: inherit;
@@ -40,7 +46,7 @@
 
         border-radius: 4px;
 
-        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        box-shadow: 0 8px 20px var(--yfm-color-term-dfn-shadow);
         outline: none;
 
         &::before {
@@ -53,7 +59,7 @@
             left: 0;
 
             border-radius: inherit;
-            box-shadow: 0 0 0 1px rgb(229, 229, 229);
+            box-shadow: 0 0 0 1px var(--yfm-color-term-dfn-pseudo-shadow);
         }
 
         &.open {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
deleted file mode 100644
index e5a13ee9..00000000
--- a/src/scss/_variables.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-$baseColor: #ffffff;
-$accentColor: #027bf3;
-
-$textColor: rgba(0, 0, 0, 0.7);
-$borderColor: rgba(0, 0, 0, 0.07);
-$backgroundColor: rgba(0, 0, 0, 0.02);
-
-$inlineCodeColor: rgba(59, 96, 128, 1);
-$inlineCodeBackgroundColor: rgba(107, 132, 153, 0.12);
-
-$codeBackgroundColor: rgba(107, 132, 153, 0.12);
-
-$tableRowBackgroundColor: rgba(0, 0, 0, 0.02);
-
-$linkColor: $accentColor;
-$linkHoverColor: #004080;
diff --git a/src/scss/brand.scss b/src/scss/brand.scss
new file mode 100644
index 00000000..0628aeb2
--- /dev/null
+++ b/src/scss/brand.scss
@@ -0,0 +1,43 @@
+@mixin brand {
+    --yfm-color-base: var(--yfm-color-base-private);
+
+    --yfm-color-text: var(--yfm-color-text-private);
+    --yfm-color-link: var(--yfm-color-link-private);
+    --yfm-color-link-hover: var(--yfm-color-link-hover-private);
+
+    --yfm-color-table: var(--yfm-color-table-private);
+    --yfm-color-table-row-background: var(--yfm-color-table-row-background-private);
+
+    --yfm-color-border: var(--yfm-color-border-private);
+
+    --yfm-color-accent: var(--yfm-color-accent-private);
+
+    --yfm-color-inline-code: var(--yfm-color-inline-code-private);
+    --yfm-color-inline-code-background: var(--yfm-color-inline-code-background-private);
+    --yfm-color-code-background: var(--yfm-color-code-background-private);
+
+    --yfm-color-hljs-background: var(--yfm-color-hljs-background-private);
+    --yfm-color-hljs-subst: var(--yfm-color-hljs-subst-private);
+    --yfm-color-hljs-comment: var(--yfm-color-hljs-comment-private);
+    --yfm-color-hljs-deletion: var(--yfm-color-hljs-deletion-private);
+    --yfm-color-hljs-section: var(--yfm-color-hljs-section-private);
+    --yfm-color-hljs-pseudo: var(--yfm-color-hljs-pseudo-private);
+    --yfm-color-hljs-literal: var(--yfm-color-hljs-literal-private);
+    --yfm-color-hljs-addition: var(--yfm-color-hljs-addition-private);
+    --yfm-color-hljs-meta: var(--yfm-color-hljs-meta-private);
+    --yfm-color-hljs-meta-string: var(--yfm-color-hljs-meta-string-private);
+
+    --yfm-color-note-tip: var(--yfm-color-note-tip-private);
+    --yfm-color-note-tip-background: var(--yfm-color-note-tip-background-private);
+    --yfm-color-note-warning: var(--yfm-color-note-warning-private);
+    --yfm-color-note-warning-background: var(--yfm-color-note-warning-background-private);
+    --yfm-color-note-important: var(--yfm-color-note-important-private);
+    --yfm-color-note-important-background: var(--yfm-color-note-important-background-private);
+    --yfm-color-note-info-background: var(--yfm-color-note-info-background-private);
+
+    --yfm-color-term-title: var(--yfm-color-term-title-private);
+    --yfm-color-term-title-hover: var(--yfm-color-term-title-hover-private);
+    --yfm-color-term-dfn-background: var(--yfm-color-term-dfn-background-private);
+    --yfm-color-term-dfn-shadow: var(--yfm-color-term-dfn-shadow-private);
+    --yfm-color-term-dfn-pseudo-shadow: var(--yfm-color-term-dfn-presudo-shadow-private);
+}
\ No newline at end of file
diff --git a/src/scss/private.scss b/src/scss/private.scss
new file mode 100644
index 00000000..fa395c3e
--- /dev/null
+++ b/src/scss/private.scss
@@ -0,0 +1,35 @@
+@mixin private-brand {
+    --yfm-color-text-private: rgba(0, 0, 0, 0.7);
+    --yfm-color-link-private: #027bf3;
+    --yfm-color-link-hover-private: #004080;
+    --yfm-color-base-private: #ffffff;
+    --yfm-color-table-private: #333;
+    --yfm-color-border-private: rgba(0, 0, 0, 0.07);
+    --yfm-color-table-row-background-private: rgba(0, 0, 0, 0.02);
+    --yfm-color-accent-private: #027bf3;
+    --yfm-color-inline-code-private: rgba(59, 96, 128, 1);
+    --yfm-color-inline-code-background-private: rgba(107, 132, 153, 0.12);
+    --yfm-color-code-background-private: rgba(107, 132, 153, 0.12);
+    --yfm-color-hljs-background-private: rgba(107, 132, 153, 0.12);
+    --yfm-color-hljs-subst-private: #444;
+    --yfm-color-hljs-comment-private: #888888;
+    --yfm-color-hljs-deletion-private: #880000;
+    --yfm-color-hljs-section-private: #880000;
+    --yfm-color-hljs-pseudo-private: #BC6060;
+    --yfm-color-hljs-literal-private: #78A960;
+    --yfm-color-hljs-addition-private: #397300;
+    --yfm-color-hljs-meta-private: #1f7199;
+    --yfm-color-hljs-meta-string-private: #4d99bf;
+    --yfm-color-note-tip-private: #56bd67;
+    --yfm-color-note-tip-background-private: rgba(63, 201, 46, 0.1);
+    --yfm-color-note-warning-private: #f19518;
+    --yfm-color-note-warning-background-private: rgba(255, 136, 0, 0.15);
+    --yfm-color-note-important-private: #ff4645;
+    --yfm-color-note-important-background-private: rgba(235, 50, 38, 0.08);
+    --yfm-color-note-info-background-private: rgba(2, 123, 243, 0.08);
+    --yfm-color-term-title-private: #027bf3;
+    --yfm-color-term-title-hover-private: #004080;
+    --yfm-color-term-dfn-background-private: rgb(255, 255, 255);
+    --yfm-color-term-dfn-shadow-private: rgba(0, 0, 0, 0.15);
+    --yfm-color-term-dfn-presudo-shadow-private: rgb(229, 229, 229);
+}
\ No newline at end of file

From 67d233afff8bb5c3d987606d3092cadd6d97fac3 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Thu, 19 Sep 2024 15:03:00 +0300
Subject: [PATCH 2/4] feat: add css-api

---
 README.md             | 104 ++++++++++++++++++++++++++++++-----------
 README.ru.md          | 105 +++++++++++++++++++++++++++++++-----------
 src/scss/_modal.scss  |  30 +++++++-----
 src/scss/brand.scss   |   7 ++-
 src/scss/private.scss |  15 ++++--
 5 files changed, 192 insertions(+), 69 deletions(-)

diff --git a/README.md b/README.md
index e7eb8ba9..b4e86efe 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 **english** | [русский](https://github.com/yandex-cloud/yfm-transform/blob/master/README.ru.md)
-- - -
+
+---
 
 [![NPM version](https://img.shields.io/npm/v/@diplodoc/transform.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/transform)
 
@@ -11,49 +12,49 @@ Use it in your code to work with text during program execution. For example, to
 
 1. Install a package:
 
-    ```shell
-    npm i @diplodoc/transform
-    ```
+   ```shell
+   npm i @diplodoc/transform
+   ```
 
 1. Add the package in your code using the `require()` or `import()` function:
 
-    ```javascript
-    const transform = require('@diplodoc/transform');
-    ```
+   ```javascript
+   const transform = require('@diplodoc/transform');
+   ```
 
 1. To ensure text is displayed properly, add CSS styles and client scripts to the project:
 
-     ```css
-     @import '~@diplodoc/transform/dist/css/yfm.css';
-     ```
+   ```css
+   @import '~@diplodoc/transform/dist/css/yfm.css';
+   ```
 
-     ```javascript
-     import '@diplodoc/transform/dist/js/yfm';
-     ```
+   ```javascript
+   import '@diplodoc/transform/dist/js/yfm';
+   ```
 
 ## Usage {#use}
 
 The package provides the `transform()` function:
 
-* Input data: [Settings](settings.md) and a string with YFM.
-* Returned value: An object with the `result` and `logs` fields.
+- Input data: [Settings](settings.md) and a string with YFM.
+- Returned value: An object with the `result` and `logs` fields.
 
 ### Result field
 
 `result`: Resulting object, contains the fields:
 
-* `html`: A line with HTML.
-* `meta`: [Metadata](../../syntax/meta.md#meta) from the transmitted content.
-* `title`: The document title. Returned if `extractTitle = true` or `needTitle = true`.
-* `headings`: A list of document headers.
+- `html`: A line with HTML.
+- `meta`: [Metadata](../../syntax/meta.md#meta) from the transmitted content.
+- `title`: The document title. Returned if `extractTitle = true` or `needTitle = true`.
+- `headings`: A list of document headers.
 
 ### Logs field
 
 `logs`: Information about the transformation process, includes arrays:
 
-* `error`: Errors.
-* `warn`: Warnings.
-* `info`: Additional information.
+- `error`: Errors.
+- `warn`: Warnings.
+- `info`: Additional information.
 
 ### Example of a function invocation
 
@@ -62,15 +63,64 @@ const fs = require('fs');
 const transform = require('@diplodoc/transform');
 
 const content = fs.readFileSync(filePath, 'utf');
-const vars = { user: { name: 'Alice' } };
+const vars = {user: {name: 'Alice'}};
 
 const {
-    result: {html, meta, title, headings},
-    logs,
-    } = transform(content, {vars});
+  result: {html, meta, title, headings},
+  logs,
+} = transform(content, {vars});
 ```
 
+### CSS-API
+
+    // common
+    --yfm-color-base
+    --yfm-color-text
+    --yfm-color-link
+    --yfm-color-link-hover
+    --yfm-color-table
+    --yfm-color-table-row-background
+    --yfm-color-border
+    --yfm-color-accent
+
+    // code
+    --yfm-color-inline-code
+    --yfm-color-inline-code-background
+    --yfm-color-code-background
+
+    // hightlight
+    --yfm-color-hljs-background
+    --yfm-color-hljs-subst
+    --yfm-color-hljs-comment
+    --yfm-color-hljs-deletion
+    --yfm-color-hljs-section
+    --yfm-color-hljs-pseudo
+    --yfm-color-hljs-literal
+    --yfm-color-hljs-addition
+    --yfm-color-hljs-meta
+    --yfm-color-hljs-meta-string
+
+    // note
+    --yfm-color-note-tip
+    --yfm-color-note-tip-background
+    --yfm-color-note-warning
+    --yfm-color-note-warning-background
+    --yfm-color-note-important-background
+    --yfm-color-note-info-background
+
+    // term
+    --yfm-color-term-title
+    --yfm-color-term-title-hover
+    --yfm-color-term-dfn-background
+    --yfm-color-term-dfn-shadow
+    --yfm-color-term-dfn-pseudo-shadow
+
+    // modal
+    --yfm-color-modal-content
+    --yfm-color-modal-actions-hover
+    --yfm-color-modal-wide-content
+    --yfm-color-modal-wide-content-overlay
+
 ## License
 
 MIT
-
diff --git a/README.ru.md b/README.ru.md
index 741974fd..b8c09b4b 100644
--- a/README.ru.md
+++ b/README.ru.md
@@ -1,5 +1,6 @@
 **русский** | [english](https://github.com/yandex-cloud/yfm-transform/blob/master/README.md)
-- - -
+
+---
 
 [![NPM version](https://img.shields.io/npm/v/@diplodoc/transform.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/transform)
 
@@ -11,46 +12,49 @@
 
 1. Установите пакет:
 
-    ```shell
-    npm i @diplodoc/transform
-    ```
+   ```shell
+   npm i @diplodoc/transform
+   ```
 
 1. Подключите пакет в своем коде, используя функцию `require()` или `import()`:
 
-    ```javascript
-    const transform = require('@diplodoc/transform');
-    ```
+   ```javascript
+   const transform = require('@diplodoc/transform');
+   ```
 
 1. Для корректного отображения подключите в проект CSS-стили и клиентские скрипты:
 
-     ```css
-     @import '~@diplodoc/transform/dist/css/yfm.css';
-     ```
+   ```css
+   @import '~@diplodoc/transform/dist/css/yfm.css';
+   ```
 
-     ```javascript
-     import '@diplodoc/transform/dist/js/yfm';
-     ```
+   ```javascript
+   import '@diplodoc/transform/dist/js/yfm';
+   ```
 
 ## Использование {#use}
 
 Пакет предоставляет функцию `transform()`:
-* входные данные — строка с YFM и [настройки](settings.md);
-* возвращаемое значение — объект с полями `result` и `logs`.
+
+- входные данные — строка с YFM и [настройки](settings.md);
+- возвращаемое значение — объект с полями `result` и `logs`.
 
 ### Поле result
 
 `result` — объект результата, содержит поля:
-* `html` — строка с HTML.
-* `meta` — [метаданные](../../syntax/meta.md#meta) из переданного контента.
-* `title` — заголовок документа. Возвращается, если заданы настройки `extractTitle = true` или `needTitle = true`.
-* `headings` — список заголовков документа.
+
+- `html` — строка с HTML.
+- `meta` — [метаданные](../../syntax/meta.md#meta) из переданного контента.
+- `title` — заголовок документа. Возвращается, если заданы настройки `extractTitle = true` или `needTitle = true`.
+- `headings` — список заголовков документа.
 
 ### Поле logs
 
 `logs` — информация о процессе трансформации, включает массивы:
-* `error` — ошибки.
-* `warn` — предупреждения.
-* `info` — дополнительная информация.
+
+- `error` — ошибки.
+- `warn` — предупреждения.
+- `info` — дополнительная информация.
 
 ### Пример вызова функции
 
@@ -59,14 +63,63 @@ const fs = require('fs');
 const transform = require('@diplodoc/transform');
 
 const content = fs.readFileSync(filePath, 'utf');
-const vars = { user: { name: 'Alice' } };
+const vars = {user: {name: 'Alice'}};
 
 const {
-    result: {html, meta, title, headings},
-    logs,
-    } = transform(content, {vars});
+  result: {html, meta, title, headings},
+  logs,
+} = transform(content, {vars});
 ```
 
+### CSS-API
+
+    // common
+    --yfm-color-base
+    --yfm-color-text
+    --yfm-color-link
+    --yfm-color-link-hover
+    --yfm-color-table
+    --yfm-color-table-row-background
+    --yfm-color-border
+    --yfm-color-accent
+
+    // code
+    --yfm-color-inline-code
+    --yfm-color-inline-code-background
+    --yfm-color-code-background
+
+    // hightlight
+    --yfm-color-hljs-background
+    --yfm-color-hljs-subst
+    --yfm-color-hljs-comment
+    --yfm-color-hljs-deletion
+    --yfm-color-hljs-section
+    --yfm-color-hljs-pseudo
+    --yfm-color-hljs-literal
+    --yfm-color-hljs-addition
+    --yfm-color-hljs-meta
+    --yfm-color-hljs-meta-string
+
+    // note
+    --yfm-color-note-tip
+    --yfm-color-note-tip-background
+    --yfm-color-note-warning
+    --yfm-color-note-warning-background
+    --yfm-color-note-important-background
+    --yfm-color-note-info-background
+
+    // term
+    --yfm-color-term-title
+    --yfm-color-term-title-hover
+    --yfm-color-term-dfn-background
+    --yfm-color-term-dfn-shadow
+    --yfm-color-term-dfn-pseudo-shadow
+
+    // modal
+    --yfm-color-modal-content
+    --yfm-color-modal-actions-hover
+    --yfm-color-modal-wide-content
+    --yfm-color-modal-wide-content-overlay
 
 ## License
 
diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
index f246f717..9eeb7255 100644
--- a/src/scss/_modal.scss
+++ b/src/scss/_modal.scss
@@ -1,6 +1,12 @@
 /* stylelint-disable declaration-no-important */
 
+@import 'private';
+@import 'brand';
+
 .wide-container {
+    @include private-brand();
+    @include brand();
+
     position: fixed;
     width: 100vw;
     height: 100vh;
@@ -21,14 +27,14 @@
 
     .wide-content-wrapper {
         z-index: 200;
-        background-color: var(--g-color-base-background);
+        background-color: var(--yfm-color-modal-content);
         height: 90vh;
         width: 70vw;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
 
-       .wide-content {
+        .wide-content {
             height: 95%;
             width: 100%;
 
@@ -46,23 +52,23 @@
                 display: table;
                 width: 100%;
             }
-       }
+        }
 
-       .wide-toolbar {
+        .wide-toolbar {
             display: flex;
             flex-direction: row;
             width: 100%;
             justify-content: space-between;
             align-items: center;
             padding: 10px 12px;
-       }
+        }
 
-       .wide-entity-name {
+        .wide-entity-name {
             margin: 0;
             font-size: 18px;
-       }
+        }
 
-       .wide-actions {
+        .wide-actions {
             align-self: flex-end;
 
             .close-action {
@@ -72,10 +78,10 @@
                 transition: background 300ms;
 
                 &:hover {
-                    background: var(--g-color-base-simple-hover);
+                    background: var(--yfm-color-modal-actions-hover);
                 }
             }
-       }
+        }
     }
 }
 
@@ -100,7 +106,7 @@
     z-index: 100;
     padding: 6px;
     box-sizing: content-box;
-    color: var(--g-color-text-primary);
+    color: var(--yfm-color-modal-wide-content);
     cursor: pointer;
 
     & > svg {
@@ -116,6 +122,6 @@
     position: fixed;
     top: 0;
     left: 0;
-    background-color: black;
+    background-color: var(--yfm-color-modal-wide-content-overlay);
     opacity: 0.6;
 }
diff --git a/src/scss/brand.scss b/src/scss/brand.scss
index 0628aeb2..cc0a5f8c 100644
--- a/src/scss/brand.scss
+++ b/src/scss/brand.scss
@@ -40,4 +40,9 @@
     --yfm-color-term-dfn-background: var(--yfm-color-term-dfn-background-private);
     --yfm-color-term-dfn-shadow: var(--yfm-color-term-dfn-shadow-private);
     --yfm-color-term-dfn-pseudo-shadow: var(--yfm-color-term-dfn-presudo-shadow-private);
-}
\ No newline at end of file
+
+    --yfm-color-modal-content: var(--yfm-color-modal-content-private);
+    --yfm-color-modal-actions-hover: var(--yfm-color-modal-actions-hover-private);
+    --yfm-color-modal-wide-content: var(--yfm-color-modal-wide-content-private);
+    --yfm-color-modal-wide-content-overlay: var(--yfm-color-modal-wide-content-overlay-private);
+}
diff --git a/src/scss/private.scss b/src/scss/private.scss
index fa395c3e..942f8fc7 100644
--- a/src/scss/private.scss
+++ b/src/scss/private.scss
@@ -7,19 +7,22 @@
     --yfm-color-border-private: rgba(0, 0, 0, 0.07);
     --yfm-color-table-row-background-private: rgba(0, 0, 0, 0.02);
     --yfm-color-accent-private: #027bf3;
+
     --yfm-color-inline-code-private: rgba(59, 96, 128, 1);
     --yfm-color-inline-code-background-private: rgba(107, 132, 153, 0.12);
     --yfm-color-code-background-private: rgba(107, 132, 153, 0.12);
+
     --yfm-color-hljs-background-private: rgba(107, 132, 153, 0.12);
     --yfm-color-hljs-subst-private: #444;
     --yfm-color-hljs-comment-private: #888888;
     --yfm-color-hljs-deletion-private: #880000;
     --yfm-color-hljs-section-private: #880000;
-    --yfm-color-hljs-pseudo-private: #BC6060;
-    --yfm-color-hljs-literal-private: #78A960;
+    --yfm-color-hljs-pseudo-private: #bc6060;
+    --yfm-color-hljs-literal-private: #78a960;
     --yfm-color-hljs-addition-private: #397300;
     --yfm-color-hljs-meta-private: #1f7199;
     --yfm-color-hljs-meta-string-private: #4d99bf;
+
     --yfm-color-note-tip-private: #56bd67;
     --yfm-color-note-tip-background-private: rgba(63, 201, 46, 0.1);
     --yfm-color-note-warning-private: #f19518;
@@ -27,9 +30,15 @@
     --yfm-color-note-important-private: #ff4645;
     --yfm-color-note-important-background-private: rgba(235, 50, 38, 0.08);
     --yfm-color-note-info-background-private: rgba(2, 123, 243, 0.08);
+
     --yfm-color-term-title-private: #027bf3;
     --yfm-color-term-title-hover-private: #004080;
     --yfm-color-term-dfn-background-private: rgb(255, 255, 255);
     --yfm-color-term-dfn-shadow-private: rgba(0, 0, 0, 0.15);
     --yfm-color-term-dfn-presudo-shadow-private: rgb(229, 229, 229);
-}
\ No newline at end of file
+
+    --yfm-color-modal-content-private: rgb(255, 255, 255);
+    --yfm-color-modal-actions-hover-private: rgba(0, 0, 0, 0.05);
+    --yfm-color-modal-wide-content-private: rgba(0, 0, 0, 0.85);
+    --yfm-color-modal-wide-content-overlay-private: rgb(0, 0, 0);
+}

From a0f80c90e603f5ce23ef498f2e7c7ffd03d903ee Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Thu, 19 Sep 2024 15:20:43 +0300
Subject: [PATCH 3/4] feat: add css-api -fix readme

---
 README.md                            | 50 -----------------
 README.ru.md                         | 50 -----------------
 src/scss/_file.scss                  |  3 +-
 src/transform/plugins/file/README.md | 82 +++++++++++++++++++++++-----
 4 files changed, 69 insertions(+), 116 deletions(-)

diff --git a/README.md b/README.md
index b4e86efe..5c8d6a6f 100644
--- a/README.md
+++ b/README.md
@@ -71,56 +71,6 @@ const {
 } = transform(content, {vars});
 ```
 
-### CSS-API
-
-    // common
-    --yfm-color-base
-    --yfm-color-text
-    --yfm-color-link
-    --yfm-color-link-hover
-    --yfm-color-table
-    --yfm-color-table-row-background
-    --yfm-color-border
-    --yfm-color-accent
-
-    // code
-    --yfm-color-inline-code
-    --yfm-color-inline-code-background
-    --yfm-color-code-background
-
-    // hightlight
-    --yfm-color-hljs-background
-    --yfm-color-hljs-subst
-    --yfm-color-hljs-comment
-    --yfm-color-hljs-deletion
-    --yfm-color-hljs-section
-    --yfm-color-hljs-pseudo
-    --yfm-color-hljs-literal
-    --yfm-color-hljs-addition
-    --yfm-color-hljs-meta
-    --yfm-color-hljs-meta-string
-
-    // note
-    --yfm-color-note-tip
-    --yfm-color-note-tip-background
-    --yfm-color-note-warning
-    --yfm-color-note-warning-background
-    --yfm-color-note-important-background
-    --yfm-color-note-info-background
-
-    // term
-    --yfm-color-term-title
-    --yfm-color-term-title-hover
-    --yfm-color-term-dfn-background
-    --yfm-color-term-dfn-shadow
-    --yfm-color-term-dfn-pseudo-shadow
-
-    // modal
-    --yfm-color-modal-content
-    --yfm-color-modal-actions-hover
-    --yfm-color-modal-wide-content
-    --yfm-color-modal-wide-content-overlay
-
 ## License
 
 MIT
diff --git a/README.ru.md b/README.ru.md
index b8c09b4b..6466fe96 100644
--- a/README.ru.md
+++ b/README.ru.md
@@ -71,56 +71,6 @@ const {
 } = transform(content, {vars});
 ```
 
-### CSS-API
-
-    // common
-    --yfm-color-base
-    --yfm-color-text
-    --yfm-color-link
-    --yfm-color-link-hover
-    --yfm-color-table
-    --yfm-color-table-row-background
-    --yfm-color-border
-    --yfm-color-accent
-
-    // code
-    --yfm-color-inline-code
-    --yfm-color-inline-code-background
-    --yfm-color-code-background
-
-    // hightlight
-    --yfm-color-hljs-background
-    --yfm-color-hljs-subst
-    --yfm-color-hljs-comment
-    --yfm-color-hljs-deletion
-    --yfm-color-hljs-section
-    --yfm-color-hljs-pseudo
-    --yfm-color-hljs-literal
-    --yfm-color-hljs-addition
-    --yfm-color-hljs-meta
-    --yfm-color-hljs-meta-string
-
-    // note
-    --yfm-color-note-tip
-    --yfm-color-note-tip-background
-    --yfm-color-note-warning
-    --yfm-color-note-warning-background
-    --yfm-color-note-important-background
-    --yfm-color-note-info-background
-
-    // term
-    --yfm-color-term-title
-    --yfm-color-term-title-hover
-    --yfm-color-term-dfn-background
-    --yfm-color-term-dfn-shadow
-    --yfm-color-term-dfn-pseudo-shadow
-
-    // modal
-    --yfm-color-modal-content
-    --yfm-color-modal-actions-hover
-    --yfm-color-modal-wide-content
-    --yfm-color-modal-wide-content-overlay
-
 ## License
 
 MIT
diff --git a/src/scss/_file.scss b/src/scss/_file.scss
index b0eb1214..d0cb6596 100644
--- a/src/scss/_file.scss
+++ b/src/scss/_file.scss
@@ -1,8 +1,7 @@
 @import 'private';
 @import 'brand';
 
-
-$defaultIcon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg==");
+$defaultIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg==');
 
 /**
     Public CSS variables:
diff --git a/src/transform/plugins/file/README.md b/src/transform/plugins/file/README.md
index 6d8d6979..953414f6 100644
--- a/src/transform/plugins/file/README.md
+++ b/src/transform/plugins/file/README.md
@@ -10,25 +10,79 @@
 
 ## Attributes
 
-|Name|Required|Description|
-|---|---|---|
-|`src`|yes|URL of the file. Will be mapped to [`href` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href)|
-|`name`|yes|Name of the file. Will be mapped to [`download` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download)|
-|`lang`|-|Language of the file content. Will be mapped to [`hreflang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang)|
-|`referrerpolicy`|-|[`referrerpolicy` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy)|
-|`rel`|-|[`rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel)|
-|`target`|-|[`target` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)|
-|`type`|-|[`type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-type)|
+| Name             | Required | Description                                                                                                                                       |
+| ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`            | yes      | URL of the file. Will be mapped to [`href` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href)                      |
+| `name`           | yes      | Name of the file. Will be mapped to [`download` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download)             |
+| `lang`           | -        | Language of the file content. Will be mapped to [`hreflang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang) |
+| `referrerpolicy` | -        | [`referrerpolicy` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy)                                     |
+| `rel`            | -        | [`rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel)                                                           |
+| `target`         | -        | [`target` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)                                                     |
+| `type`           | -        | [`type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-type)                                                         |
 
 > _Note: other attributes will be ignored_
 
 ## Plugin options
 
-|Name|Type|Description|
-|---|---|---|
-|`fileExtraAttrs`|`[string, string][]`|Adds additional attributes to rendered hyperlink|
+| Name             | Type                 | Description                                      |
+| ---------------- | -------------------- | ------------------------------------------------ |
+| `fileExtraAttrs` | `[string, string][]` | Adds additional attributes to rendered hyperlink |
 
 ## CSS public variables
 
-* `--yfm-file-icon` – sets custom file icon image
-* `--yfm-file-icon-color` – sets custom file icon color
+- `--yfm-file-icon` – sets custom file icon image
+- `--yfm-file-icon-color` – sets custom file icon color
+
+  _common_
+
+- `--yfm-color-text`
+- `--yfm-color-link`
+- `--yfm-color-base`
+- `--yfm-color-link-hover`
+- `--yfm-color-table`
+- `--yfm-color-table-row-background`
+- `--yfm-color-border`
+- `--yfm-color-accent`
+
+  _code_
+
+- `--yfm-color-inline-code`
+- `--yfm-color-inline-code-background`
+- `--yfm-color-code-background`
+
+  _hightlight_
+
+- `--yfm-color-hljs-background`
+- `--yfm-color-hljs-subst`
+- `--yfm-color-hljs-comment`
+- `--yfm-color-hljs-deletion`
+- `--yfm-color-hljs-section`
+- `--yfm-color-hljs-pseudo`
+- `--yfm-color-hljs-literal`
+- `--yfm-color-hljs-addition`
+- `--yfm-color-hljs-meta`
+- `--yfm-color-hljs-meta-string`
+
+  _note_
+
+- `--yfm-color-note-tip`
+- `--yfm-color-note-tip-background`
+- `--yfm-color-note-warning`
+- `--yfm-color-note-warning-background`
+- `--yfm-color-note-important-background`
+- `--yfm-color-note-info-background`
+
+  _term_
+
+- `--yfm-color-term-title`
+- `--yfm-color-term-title-hover`
+- `--yfm-color-term-dfn-background`
+- `--yfm-color-term-dfn-shadow`
+- `--yfm-color-term-dfn-pseudo-shadow`
+
+  _modal_
+
+- `--yfm-color-modal-content`
+- `--yfm-color-modal-actions-hover`
+- `--yfm-color-modal-wide-content`
+- `--yfm-color-modal-wide-content-overlay`

From 4a8c54902868586c5b7cc9ae893e1d0e1ca4d0c6 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Fri, 20 Sep 2024 11:15:12 +0300
Subject: [PATCH 4/4] feat: add css-api - fix comment about imports

---
 src/scss/_common.scss    | 56 ++++++++++++++++++++++++++--------------
 src/scss/_cut.scss       |  6 -----
 src/scss/_file.scss      |  6 -----
 src/scss/_highlight.scss | 10 -------
 src/scss/_modal.scss     |  6 -----
 src/scss/_note.scss      |  8 +-----
 src/scss/_term.scss      | 11 +-------
 7 files changed, 39 insertions(+), 64 deletions(-)

diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index b2841caa..1d2bfd7e 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -1,4 +1,5 @@
 /* stylelint-disable declaration-no-important */
+
 @import 'private';
 @import 'brand';
 
@@ -34,7 +35,12 @@
         margin-bottom: 0 !important;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         margin-bottom: 15px;
         font-weight: 500;
     }
@@ -74,31 +80,32 @@
         color: var(--yfm-color-link);
         text-decoration: none;
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
             color: var(--yfm-color-link-hover);
         }
 
         &:not([href]) {
             color: inherit;
         }
-
     }
 
     strong {
         font-weight: 700;
     }
 
-    img, svg {
+    img,
+    svg {
         box-sizing: content-box;
         max-width: 100%;
         border: none;
         vertical-align: middle;
 
-        &[align=right] {
+        &[align='right'] {
             padding-left: 20px;
         }
 
-        &[align=left] {
+        &[align='left'] {
             padding-right: 20px;
         }
     }
@@ -127,10 +134,12 @@
     dl,
     table,
     pre {
-        margin: 0 0 15px 0;
+        margin: 0 0 15px;
     }
 
-    ul, ol, dl {
+    ul,
+    ol,
+    dl {
         & pre {
             margin-top: 15px;
         }
@@ -178,24 +187,27 @@
         border-spacing: 0;
         background: var(--yfm-color-base);
 
-        thead, tr:nth-child(2n) {
+        thead,
+        tr:nth-child(2n) {
             background-color: var(--yfm-color-table-row-background);
         }
 
         tr:first-child {
-            td, th {
+            td,
+            th {
                 border-top: none;
             }
         }
 
         tr:last-child {
-            td, th {
+            td,
+            th {
                 border-bottom: none;
             }
         }
 
-
-        th, td {
+        th,
+        td {
             padding: 10px 20px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -214,10 +226,12 @@
             text-align: left;
         }
 
-        tr td:first-child, tr th:first-child {
+        tr td:first-child,
+        tr th:first-child {
             border-left: none;
         }
-        tr td:last-child, tr th:last-child {
+        tr td:last-child,
+        tr th:last-child {
             border-right: none;
         }
     }
@@ -280,7 +294,8 @@
         }
     }
 
-    ul, ol {
+    ul,
+    ol {
         padding-left: 2.2em;
     }
 
@@ -363,7 +378,8 @@
         white-space: pre;
     }
 
-    sup, sub {
+    sup,
+    sub {
         line-height: 0;
     }
 
@@ -393,6 +409,8 @@
         user-select: none;
     }
 
-    --yfm-font-family-monospace: "Menlo", "Monaco", "Consolas", "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace;
-    --yfm-font-family-sans: 'Segoe UI', Arial, Helvetica, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    --yfm-font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono',
+        'DejaVu Sans Mono', 'Courier New', 'Courier', monospace;
+    --yfm-font-family-sans: 'Segoe UI', arial, helvetica, sans-serif, 'Apple Color Emoji',
+        'Segoe UI Emoji', 'Segoe UI Symbol';
 }
diff --git a/src/scss/_cut.scss b/src/scss/_cut.scss
index 9d8aa461..f34639a7 100644
--- a/src/scss/_cut.scss
+++ b/src/scss/_cut.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm-cut {
-    @include private-brand();
-    @include brand();
-
     $class: &;
     margin-bottom: 15px;
 
diff --git a/src/scss/_file.scss b/src/scss/_file.scss
index d0cb6596..52339938 100644
--- a/src/scss/_file.scss
+++ b/src/scss/_file.scss
@@ -1,6 +1,3 @@
-@import 'private';
-@import 'brand';
-
 $defaultIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg==');
 
 /**
@@ -10,9 +7,6 @@ $defaultIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 */
 
 .yfm-file {
-    @include private-brand();
-    @include brand();
-
     &__icon {
         ---yfm-file-icon-img: var(--yfm-file-icon, #{$defaultIcon});
 
diff --git a/src/scss/_highlight.scss b/src/scss/_highlight.scss
index 70eb379b..ed9265dc 100644
--- a/src/scss/_highlight.scss
+++ b/src/scss/_highlight.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm {
-    @include private-brand();
-    @include brand();
-
     .hljs {
         display: block;
         overflow-x: auto;
@@ -21,7 +15,6 @@
         color: var(--yfm-color-hljs-comment);
     }
 
-
     .hljs-keyword,
     .hljs-attribute,
     .hljs-selector-tag,
@@ -58,7 +51,6 @@
         color: var(--yfm-color-hljs-pseudo);
     }
 
-
     .hljs-literal {
         color: var(--yfm-color-hljs-literal);
     }
@@ -70,7 +62,6 @@
         color: var(--yfm-color-hljs-addition);
     }
 
-
     .hljs-meta {
         color: var(--yfm-color-hljs-meta);
     }
@@ -79,7 +70,6 @@
         color: var(--yfm-color-hljs-meta-string);
     }
 
-
     .hljs-emphasis {
         font-style: italic;
     }
diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
index 9eeb7255..b0d8b46d 100644
--- a/src/scss/_modal.scss
+++ b/src/scss/_modal.scss
@@ -1,12 +1,6 @@
 /* stylelint-disable declaration-no-important */
 
-@import 'private';
-@import 'brand';
-
 .wide-container {
-    @include private-brand();
-    @include brand();
-
     position: fixed;
     width: 100vw;
     height: 100vh;
diff --git a/src/scss/_note.scss b/src/scss/_note.scss
index e70fb69b..b2626332 100644
--- a/src/scss/_note.scss
+++ b/src/scss/_note.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm .yfm-note {
-    @include private-brand();
-    @include brand();
-
     max-width: 1296px;
     margin: 20px 0;
     padding: 20px 20px 20px 64px;
@@ -15,7 +9,7 @@
     }
 
     & > p {
-        margin: 0 0 10px 0;
+        margin: 0 0 10px;
 
         &:first-child {
             &::before {
diff --git a/src/scss/_term.scss b/src/scss/_term.scss
index a342e85f..97b11e73 100644
--- a/src/scss/_term.scss
+++ b/src/scss/_term.scss
@@ -1,10 +1,4 @@
-@import 'private';
-@import 'brand';
-
 .yfm-term {
-    @include private-brand();
-    @include brand();
-
     &_title {
         color: var(--yfm-color-term-title);
         cursor: pointer;
@@ -53,10 +47,7 @@
             content: '';
             position: absolute;
             z-index: -1;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset: 0;
 
             border-radius: inherit;
             box-shadow: 0 0 0 1px var(--yfm-color-term-dfn-pseudo-shadow);