From 9067d7211b5574370bce05a6fed57414faebcca3 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Tue, 7 Oct 2025 15:50:02 +0300
Subject: [PATCH 1/5] feat: del brand color for use diplodoc/themes in other
 proejcts

---
 .nvmrc                            |  2 +-
 scripts/build-static.mjs          |  3 +-
 scripts/package-build-configs.mjs | 38 ++++++++++++++++++++-
 src/scss/_anchor.scss             |  4 +--
 src/scss/_code.scss               |  5 ++-
 src/scss/_common.scss             | 48 +++++++++++++++-----------
 src/scss/_highlight.scss          | 20 +++++------
 src/scss/_inline-code.scss        | 14 ++++++--
 src/scss/_modal.scss              | 14 +++++---
 src/scss/_note.scss               | 18 +++++++---
 src/scss/_table.scss              |  7 ++--
 src/scss/_term.scss               | 18 +++++++---
 src/scss/brand.scss               | 56 -------------------------------
 src/scss/yfm.scss                 |  6 ++--
 14 files changed, 141 insertions(+), 112 deletions(-)
 delete mode 100644 src/scss/brand.scss

diff --git a/.nvmrc b/.nvmrc
index 25bf17fc..8fdd954d 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18
\ No newline at end of file
+22
\ No newline at end of file
diff --git a/scripts/build-static.mjs b/scripts/build-static.mjs
index 857fd953..454cdfd4 100755
--- a/scripts/build-static.mjs
+++ b/scripts/build-static.mjs
@@ -2,8 +2,9 @@
 
 import esbuild from 'esbuild';
 
-import {runChainsWith} from './package-build-configs.mjs';
+import {copyScssFiles, runChainsWith} from './package-build-configs.mjs';
 
 const executeBuild = (buildOptions) => esbuild.build(buildOptions);
 
 await runChainsWith(executeBuild);
+await copyScssFiles();
diff --git a/scripts/package-build-configs.mjs b/scripts/package-build-configs.mjs
index 6f2e09a4..d199a332 100644
--- a/scripts/package-build-configs.mjs
+++ b/scripts/package-build-configs.mjs
@@ -1,5 +1,7 @@
-import {dirname} from 'node:path';
+import {dirname, join} from 'node:path';
 import {createRequire} from 'node:module';
+import {copyFile, mkdir, readdir} from 'node:fs/promises';
+import {fileURLToPath} from 'node:url';
 import {sassPlugin} from 'esbuild-sass-plugin';
 import autoprefixer from 'autoprefixer';
 import postcssPresetEnv from 'postcss-preset-env';
@@ -7,6 +9,9 @@ import postcss from 'postcss';
 
 import tsconfigJson from '../tsconfig.json' with {type: 'json'};
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const projectRoot = join(__dirname, '..');
+
 /** @type {import('esbuild').BuildOptions}*/
 const common = {
     bundle: true,
@@ -148,6 +153,37 @@ const ScriptChains = [
 
 const StaticBuildChains = [...StyleChains, ...ScriptChains];
 
+// Recursively copy SCSS files from src to dest
+async function copyScssFilesRecursive(src, dest) {
+    const entries = await readdir(src, {withFileTypes: true});
+
+    await mkdir(dest, {recursive: true});
+
+    await Promise.all(
+        entries.map(async (entry) => {
+            const srcPath = join(src, entry.name);
+            const destPath = join(dest, entry.name);
+
+            if (entry.isDirectory()) {
+                await copyScssFilesRecursive(srcPath, destPath);
+            } else if (entry.isFile() && entry.name.endsWith('.scss')) {
+                await copyFile(srcPath, destPath);
+            }
+        }),
+    );
+}
+
+// Copy SCSS files to dist/scss
+export async function copyScssFiles() {
+    const srcScssDir = join(projectRoot, 'src', 'scss');
+    const distScssDir = join(projectRoot, 'dist', 'scss');
+
+    await copyScssFilesRecursive(srcScssDir, distScssDir);
+
+    // eslint-disable-next-line no-console
+    console.log('SCSS files copied to dist/scss');
+}
+
 export const runChainsWith = (block) =>
     Promise.all(
         StaticBuildChains.map((chainOrSingleBuild) =>
diff --git a/src/scss/_anchor.scss b/src/scss/_anchor.scss
index ba0146ce..91460682 100644
--- a/src/scss/_anchor.scss
+++ b/src/scss/_anchor.scss
@@ -8,14 +8,14 @@
         .yfm-clipboard-anchor {
             //reset default button style
             background: none;
-            color: var(--yfm-color-link);
+            color: var(--yfm-color-link, var(--yfm-color-link-private));
             border: none;
             padding: 0;
             font: inherit;
             cursor: pointer;
 
             &:hover {
-                color: var(--yfm-color-link-hover);
+                color: var(--yfm-color-link-hover, var(--yfm-color-link-hover-private));
             }
         }
 
diff --git a/src/scss/_code.scss b/src/scss/_code.scss
index 4f1642d5..46632d5a 100644
--- a/src/scss/_code.scss
+++ b/src/scss/_code.scss
@@ -47,7 +47,10 @@
 
             &:hover {
                 cursor: pointer;
-                background-color: var(--yfm-color-code-background-hovered-private);
+                background-color: var(
+                    --yfm-color-code-hovered-background,
+                    var(--yfm-color-code-background-hovered-private)
+                );
             }
         }
     }
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index 7ffe2171..6f79d0bf 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -1,7 +1,6 @@
 /* stylelint-disable declaration-no-important */
 
 @use 'private';
-@use 'brand';
 @use 'lists';
 
 @mixin removeMarginForEdgeChildren {
@@ -16,13 +15,12 @@
 
 .yfm {
     @include private.private-brand();
-    @include brand.brand();
 
     font-family: var(--yfm-font-family-sans);
     font-size: var(--yfm-font-size, 15px);
     line-height: var(--yfm-font-line-height, 20px);
     word-wrap: break-word;
-    color: var(--yfm-color-text);
+    color: var(--yfm-color-text, var(--yfm-color-text-private));
     tab-size: var(--yfm-tab-size, inherit);
 
     --yfm-font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono',
@@ -84,12 +82,12 @@
 
     a {
         background-color: transparent;
-        color: var(--yfm-color-link);
+        color: var(--yfm-color-link, var(--yfm-color-link-private));
         text-decoration: none;
 
         &:hover,
         &:active {
-            color: var(--yfm-color-link-hover);
+            color: var(--yfm-color-link-hover, var(--yfm-color-link-hover-private));
         }
 
         &:not([href]) {
@@ -124,7 +122,7 @@
 
     img {
         object-fit: contain;
-        background-color: var(--yfm-color-base);
+        background-color: var(--yfm-color-base, var(--yfm-color-base-private));
     }
 
     svg {
@@ -180,7 +178,7 @@
     }
 
     table {
-        color: var(--yfm-color-table);
+        color: var(--yfm-color-table, var(--yfm-color-table-private));
 
         display: inline-block;
         max-width: 100%;
@@ -190,14 +188,17 @@
         z-index: 1;
 
         box-sizing: border-box;
-        border: 1px solid var(--yfm-color-table-border);
+        border: 1px solid var(--yfm-color-border, var(--yfm-color-border-private));
         border-radius: 8px;
         border-collapse: collapse;
         border-spacing: 0;
-        background: var(--yfm-color-table-background);
+        background: var(--yfm-color-base, var(--yfm-color-base-private));
 
         thead {
-            background-color: var(--yfm-color-table-head-background);
+            background-color: var(
+                --yfm-color-table-row-background,
+                var(--yfm-color-table-row-background-private)
+            );
         }
 
         tr:first-child {
@@ -219,7 +220,7 @@
             padding: 10px 20px;
             overflow: hidden;
             text-overflow: ellipsis;
-            border: 1px solid var(--yfm-color-table-border);
+            border: 1px solid var(--yfm-color-border, var(--yfm-color-border-private));
 
             @include removeMarginForEdgeChildren();
         }
@@ -245,7 +246,10 @@
     }
 
     &:not(.yfm_no-stripe-table) table tr:nth-child(2n) {
-        background-color: var(--yfm-color-table-stripe-row-background);
+        background-color: var(
+            --yfm-color-table-row-background,
+            var(--yfm-color-table-row-background-private)
+        );
     }
 
     hr {
@@ -255,7 +259,7 @@
         margin: 1.5em 0;
         overflow: hidden;
 
-        background-color: var(--yfm-color-border);
+        background-color: var(--yfm-color-border, var(--yfm-color-border-private));
         border: none;
 
         &::before {
@@ -273,7 +277,7 @@
     blockquote {
         position: relative;
         padding-left: 12px;
-        border-left: 3px solid var(--yfm-color-accent);
+        border-left: 3px solid var(--yfm-color-accent, var(--yfm-color-accent-private));
 
         @include removeMarginForEdgeChildren();
     }
@@ -341,11 +345,14 @@
 
     code {
         padding: 0.1em 0.4em 0.15em;
-        background-color: var(--yfm-color-inline-code-background);
+        background-color: var(
+            --yfm-color-inline-code-background,
+            var(--yfm-color-inline-code-background-private)
+        );
         border-radius: 4px;
         font-size: 0.875em;
         white-space: pre-wrap;
-        color: var(--yfm-color-inline-code);
+        color: var(--yfm-color-inline-code, var(--yfm-color-inline-code-private));
         tab-size: var(--yfm-tab-size-code, inherit);
     }
 
@@ -369,7 +376,7 @@
         word-wrap: normal;
         background-color: transparent;
         border: 0;
-        color: var(--yfm-color-text);
+        color: var(--yfm-color-text, var(--yfm-color-text-private));
     }
 
     pre > code {
@@ -377,8 +384,11 @@
         padding: 16px;
         overflow: auto;
 
-        background-color: var(--yfm-color-code-background);
-        color: var(--yfm-color-text);
+        background-color: var(
+            --yfm-color-code-background,
+            var(--yfm-color-code-background-private)
+        );
+        color: var(--yfm-color-text, var(--yfm-color-text-private));
 
         white-space: pre;
 
diff --git a/src/scss/_highlight.scss b/src/scss/_highlight.scss
index ed9265dc..879cb3ca 100644
--- a/src/scss/_highlight.scss
+++ b/src/scss/_highlight.scss
@@ -3,16 +3,16 @@
         display: block;
         overflow-x: auto;
         padding: 16px;
-        background: var(--yfm-color-hljs-background);
+        background: var(--yfm-color-hljs-background, var(--yfm-color-hljs-background-private));
     }
 
     .hljs,
     .hljs-subst {
-        color: var(--yfm-color-hljs-subst);
+        color: var(--yfm-color-hljs-subst, var(--yfm-color-hljs-subst-private));
     }
 
     .hljs-comment {
-        color: var(--yfm-color-hljs-comment);
+        color: var(--yfm-color-hljs-comment, var(--yfm-color-hljs-comment-private));
     }
 
     .hljs-keyword,
@@ -32,12 +32,12 @@
     .hljs-quote,
     .hljs-template-tag,
     .hljs-deletion {
-        color: var(--yfm-color-hljs-deletion);
+        color: var(--yfm-color-hljs-deletion, var(--yfm-color-hljs-deletion-private));
     }
 
     .hljs-title,
     .hljs-section {
-        color: var(--yfm-color-hljs-section);
+        color: var(--yfm-color-hljs-section, var(--yfm-color-hljs-section-private));
         font-weight: bold;
     }
 
@@ -48,26 +48,26 @@
     .hljs-link,
     .hljs-selector-attr,
     .hljs-selector-pseudo {
-        color: var(--yfm-color-hljs-pseudo);
+        color: var(--yfm-color-hljs-pseudo, var(--yfm-color-hljs-pseudo-private));
     }
 
     .hljs-literal {
-        color: var(--yfm-color-hljs-literal);
+        color: var(--yfm-color-hljs-literal, var(--yfm-color-hljs-literal-private));
     }
 
     .hljs-built_in,
     .hljs-bullet,
     .hljs-code,
     .hljs-addition {
-        color: var(--yfm-color-hljs-addition);
+        color: var(--yfm-color-hljs-addition, var(--yfm-color-hljs-addition-private));
     }
 
     .hljs-meta {
-        color: var(--yfm-color-hljs-meta);
+        color: var(--yfm-color-hljs-meta, var(--yfm-color-hljs-meta-private));
     }
 
     .hljs-meta-string {
-        color: var(--yfm-color-hljs-meta-string);
+        color: var(--yfm-color-hljs-meta-string, var(--yfm-color-hljs-meta-string-private));
     }
 
     .hljs-emphasis {
diff --git a/src/scss/_inline-code.scss b/src/scss/_inline-code.scss
index 4a211fdc..9e0c926a 100644
--- a/src/scss/_inline-code.scss
+++ b/src/scss/_inline-code.scss
@@ -7,7 +7,10 @@
 
     padding: 10px;
 
-    background-color: var(--yfm-color-term-dfn-background);
+    background-color: var(
+        --yfm-color-term-dfn-background,
+        var(--yfm-color-term-dfn-background-private)
+    );
 
     font-size: inherit;
     line-height: inherit;
@@ -15,7 +18,8 @@
 
     border-radius: 4px;
 
-    box-shadow: 0 8px 20px var(--yfm-color-term-dfn-shadow);
+    box-shadow: 0 8px 20px
+        var(--yfm-color-term-dfn-shadow, var(--yfm-color-term-dfn-shadow-private));
     outline: none;
     width: fit-content;
 
@@ -34,7 +38,11 @@
         inset: 0;
 
         border-radius: inherit;
-        box-shadow: 0 0 0 1px var(--yfm-color-term-dfn-pseudo-shadow);
+        box-shadow: 0 0 0 1px
+            var(
+                --yfm-color-term-dfn-pseudo-shadow,
+                var(--yfm-color-term-dfn-presudo-shadow-private)
+            );
     }
 
     &.open {
diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss
index b0d8b46d..aed7b67e 100644
--- a/src/scss/_modal.scss
+++ b/src/scss/_modal.scss
@@ -21,7 +21,7 @@
 
     .wide-content-wrapper {
         z-index: 200;
-        background-color: var(--yfm-color-modal-content);
+        background-color: var(--yfm-color-modal-content, var(--yfm-color-modal-content-private));
         height: 90vh;
         width: 70vw;
         border-radius: 10px;
@@ -72,7 +72,10 @@
                 transition: background 300ms;
 
                 &:hover {
-                    background: var(--yfm-color-modal-actions-hover);
+                    background: var(
+                        --yfm-color-modal-actions-hover,
+                        var(--yfm-color-modal-actions-hover-private)
+                    );
                 }
             }
         }
@@ -100,7 +103,7 @@
     z-index: 100;
     padding: 6px;
     box-sizing: content-box;
-    color: var(--yfm-color-modal-wide-content);
+    color: var(--yfm-color-modal-wide-content, var(--yfm-color-modal-wide-content-private));
     cursor: pointer;
 
     & > svg {
@@ -116,6 +119,9 @@
     position: fixed;
     top: 0;
     left: 0;
-    background-color: var(--yfm-color-modal-wide-content-overlay);
+    background-color: var(
+        --yfm-color-modal-wide-content-overlay,
+        var(--yfm-color-modal-wide-content-overlay-private)
+    );
     opacity: 0.6;
 }
diff --git a/src/scss/_note.scss b/src/scss/_note.scss
index 25bf0fd2..6f42de02 100644
--- a/src/scss/_note.scss
+++ b/src/scss/_note.scss
@@ -51,10 +51,20 @@
     }
 
     $backgroundColors: (
-        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),
+        yfm-accent-info:
+            var(--yfm-color-note-info-background, var(--yfm-color-note-info-background-private)),
+        yfm-accent-tip:
+            var(--yfm-color-note-tip-background, var(--yfm-color-note-tip-background-private)),
+        yfm-accent-alert:
+            var(
+                --yfm-color-note-important-background,
+                var(--yfm-color-note-important-background-private)
+            ),
+        yfm-accent-warning:
+            var(
+                --yfm-color-note-warning-background,
+                var(--yfm-color-note-warning-background-private)
+            ),
     );
 
     @each $type, $color in $backgroundColors {
diff --git a/src/scss/_table.scss b/src/scss/_table.scss
index 34f8168b..e7f2cbb9 100644
--- a/src/scss/_table.scss
+++ b/src/scss/_table.scss
@@ -44,7 +44,7 @@
     td::before,
     th::before {
         content: '';
-        background: var(--yfm-color-table-background);
+        background: var(--yfm-color-base, var(--yfm-color-base-private));
         position: absolute;
         inset: 0;
         z-index: -2;
@@ -53,7 +53,10 @@
     td::after,
     th::after {
         content: '';
-        background: var(--yfm-color-table-head-background);
+        background: var(
+            --yfm-color-table-row-background,
+            var(--yfm-color-table-row-background-private)
+        );
         position: absolute;
         inset: 0;
         z-index: -1;
diff --git a/src/scss/_term.scss b/src/scss/_term.scss
index 05b5f612..c8c71dd0 100644
--- a/src/scss/_term.scss
+++ b/src/scss/_term.scss
@@ -1,6 +1,6 @@
 .yfm-term {
     &_title {
-        color: var(--yfm-color-term-title);
+        color: var(--yfm-color-term-title, var(--yfm-color-term-title-private));
         cursor: pointer;
 
         border-bottom: 1px dotted;
@@ -10,7 +10,7 @@
         font-style: normal;
 
         &:hover {
-            color: var(--yfm-color-term-title-hover);
+            color: var(--yfm-color-term-title-hover, var(--yfm-color-term-title-hover-private));
         }
     }
 
@@ -23,7 +23,10 @@
 
         padding: 10px;
 
-        background-color: var(--yfm-color-term-dfn-background);
+        background-color: var(
+            --yfm-color-term-dfn-background,
+            var(--yfm-color-term-dfn-background-private)
+        );
 
         font-size: inherit;
         line-height: inherit;
@@ -31,7 +34,8 @@
 
         border-radius: 4px;
 
-        box-shadow: 0 8px 20px var(--yfm-color-term-dfn-shadow);
+        box-shadow: 0 8px 20px
+            var(--yfm-color-term-dfn-shadow, var(--yfm-color-term-dfn-shadow-private));
         outline: none;
 
         width: fit-content;
@@ -50,7 +54,11 @@
             inset: 0;
 
             border-radius: inherit;
-            box-shadow: 0 0 0 1px var(--yfm-color-term-dfn-pseudo-shadow);
+            box-shadow: 0 0 0 1px
+                var(
+                    --yfm-color-term-dfn-pseudo-shadow,
+                    var(--yfm-color-term-dfn-presudo-shadow-private)
+                );
         }
 
         &.open {
diff --git a/src/scss/brand.scss b/src/scss/brand.scss
deleted file mode 100644
index a46aac02..00000000
--- a/src/scss/brand.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@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-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-code-hovered-background: var(--yfm-color-code-hovered-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: var(--yfm-color-note-info-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);
-
-    --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);
-
-    // table
-    --yfm-color-table: var(--yfm-color-table-private);
-    --yfm-color-table-border: var(--yfm-color-border);
-    --yfm-color-table-background: var(--yfm-color-base);
-    --yfm-color-table-head-background: var(--yfm-color-table-row-background);
-    --yfm-color-table-stripe-row-background: var(--yfm-color-table-row-background);
-    // TODO: next var is deprecated, need to remove later
-    --yfm-color-table-row-background: var(--yfm-color-table-row-background-private);
-}
diff --git a/src/scss/yfm.scss b/src/scss/yfm.scss
index ef277d43..b2574712 100644
--- a/src/scss/yfm.scss
+++ b/src/scss/yfm.scss
@@ -2,6 +2,6 @@
 @use 'yfm-only';
 @use 'modal';
 
-@forward '@diplodoc/cut-extension/runtime';
-@forward '@diplodoc/file-extension/runtime';
-@forward '@diplodoc/tabs-extension/runtime';
+@import '@diplodoc/cut-extension/runtime/styles.css';
+@import '@diplodoc/file-extension/runtime/styles.css';
+@import '@diplodoc/tabs-extension/runtime/styles.css';

From bd100875735b60a6553207ebc14bbe6248a51cc4 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Tue, 7 Oct 2025 16:35:07 +0300
Subject: [PATCH 2/5] feat: add yfm-base.scss file for correct theme using via
 css-tokens

---
 src/scss/yfm-base.scss | 3 +++
 src/scss/yfm.scss      | 4 +---
 2 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 src/scss/yfm-base.scss

diff --git a/src/scss/yfm-base.scss b/src/scss/yfm-base.scss
new file mode 100644
index 00000000..65437d95
--- /dev/null
+++ b/src/scss/yfm-base.scss
@@ -0,0 +1,3 @@
+@use 'base';
+@use 'yfm-only';
+@use 'modal';
diff --git a/src/scss/yfm.scss b/src/scss/yfm.scss
index b2574712..dcb045d3 100644
--- a/src/scss/yfm.scss
+++ b/src/scss/yfm.scss
@@ -1,6 +1,4 @@
-@use 'base';
-@use 'yfm-only';
-@use 'modal';
+@use 'yfm-base';
 
 @import '@diplodoc/cut-extension/runtime/styles.css';
 @import '@diplodoc/file-extension/runtime/styles.css';

From a520cf8321788ee5c115c3969d623bcfabe39218 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Tue, 7 Oct 2025 16:55:57 +0300
Subject: [PATCH 3/5] fix: revert forward for extensions

---
 src/scss/yfm.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/scss/yfm.scss b/src/scss/yfm.scss
index dcb045d3..4a29a033 100644
--- a/src/scss/yfm.scss
+++ b/src/scss/yfm.scss
@@ -1,5 +1,5 @@
 @use 'yfm-base';
 
-@import '@diplodoc/cut-extension/runtime/styles.css';
-@import '@diplodoc/file-extension/runtime/styles.css';
-@import '@diplodoc/tabs-extension/runtime/styles.css';
+@forward '@diplodoc/cut-extension/runtime';
+@forward '@diplodoc/file-extension/runtime';
+@forward '@diplodoc/tabs-extension/runtime';

From e13c02776fefd6290530e4ecd0fcbddd52d80bb8 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Tue, 21 Oct 2025 14:14:39 +0300
Subject: [PATCH 4/5] feat: add table private colors

---
 src/scss/_common.scss | 14 +++++++-------
 src/scss/_table.scss  |  6 +++---
 src/scss/private.scss |  9 +++++++--
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index 6f79d0bf..8f3d0582 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -188,16 +188,16 @@
         z-index: 1;
 
         box-sizing: border-box;
-        border: 1px solid var(--yfm-color-border, var(--yfm-color-border-private));
+        border: 1px solid var(--yfm-color-table-border, var(--yfm-color-table-border-private));
         border-radius: 8px;
         border-collapse: collapse;
         border-spacing: 0;
-        background: var(--yfm-color-base, var(--yfm-color-base-private));
+        background: var(--yfm-color-table-background, var(--yfm-color-table-background-private));
 
         thead {
             background-color: var(
-                --yfm-color-table-row-background,
-                var(--yfm-color-table-row-background-private)
+                --yfm-color-table-head-background,
+                var(--yfm-color-table-head-background-private)
             );
         }
 
@@ -220,7 +220,7 @@
             padding: 10px 20px;
             overflow: hidden;
             text-overflow: ellipsis;
-            border: 1px solid var(--yfm-color-border, var(--yfm-color-border-private));
+            border: 1px solid var(--yfm-color-table-border, var(--yfm-color-table-border-private));
 
             @include removeMarginForEdgeChildren();
         }
@@ -247,8 +247,8 @@
 
     &:not(.yfm_no-stripe-table) table tr:nth-child(2n) {
         background-color: var(
-            --yfm-color-table-row-background,
-            var(--yfm-color-table-row-background-private)
+            --yfm-color-table-stripe-row-background,
+            var(--yfm-color-table-stripe-row-background-private)
         );
     }
 
diff --git a/src/scss/_table.scss b/src/scss/_table.scss
index e7f2cbb9..a1000762 100644
--- a/src/scss/_table.scss
+++ b/src/scss/_table.scss
@@ -44,7 +44,7 @@
     td::before,
     th::before {
         content: '';
-        background: var(--yfm-color-base, var(--yfm-color-base-private));
+        background: var(--yfm-color-table-background, var(--yfm-color-table-background-private));
         position: absolute;
         inset: 0;
         z-index: -2;
@@ -54,8 +54,8 @@
     th::after {
         content: '';
         background: var(
-            --yfm-color-table-row-background,
-            var(--yfm-color-table-row-background-private)
+            --yfm-color-table-head-background,
+            var(--yfm-color-table-head-background-private)
         );
         position: absolute;
         inset: 0;
diff --git a/src/scss/private.scss b/src/scss/private.scss
index b13eeb41..e49e8294 100644
--- a/src/scss/private.scss
+++ b/src/scss/private.scss
@@ -3,9 +3,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);
@@ -43,4 +41,11 @@
     --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);
+
+    --yfm-color-table-private: #333;
+    --yfm-color-table-row-background-private: rgba(0, 0, 0, 0.02);
+    --yfm-color-table-border-private: rgba(0, 0, 0, 0.07);
+    --yfm-color-table-background-private: #ffffff;
+    --yfm-color-table-head-background-private: rgba(0, 0, 0, 0.02);
+    --yfm-color-table-stripe-row-background-private: rgba(0, 0, 0, 0.02);
 }

From 00cb11bd58805d1974bb7a3047ba2458c859ce20 Mon Sep 17 00:00:00 2001
From: ngorin <ngorin@yandex-team.ru>
Date: Fri, 14 Nov 2025 11:07:25 +0300
Subject: [PATCH 5/5] feat: fix typo in name

---
 src/scss/_inline-code.scss | 5 +----
 src/scss/_term.scss        | 2 +-
 src/scss/private.scss      | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/scss/_inline-code.scss b/src/scss/_inline-code.scss
index 9e0c926a..d22464f9 100644
--- a/src/scss/_inline-code.scss
+++ b/src/scss/_inline-code.scss
@@ -39,10 +39,7 @@
 
         border-radius: inherit;
         box-shadow: 0 0 0 1px
-            var(
-                --yfm-color-term-dfn-pseudo-shadow,
-                var(--yfm-color-term-dfn-presudo-shadow-private)
-            );
+            var(--yfm-color-term-dfn-pseudo-shadow, var(--yfm-color-term-dfn-pseudo-shadow-private));
     }
 
     &.open {
diff --git a/src/scss/_term.scss b/src/scss/_term.scss
index c8c71dd0..5fefb990 100644
--- a/src/scss/_term.scss
+++ b/src/scss/_term.scss
@@ -57,7 +57,7 @@
             box-shadow: 0 0 0 1px
                 var(
                     --yfm-color-term-dfn-pseudo-shadow,
-                    var(--yfm-color-term-dfn-presudo-shadow-private)
+                    var(--yfm-color-term-dfn-pseudo-shadow-private)
                 );
         }
 
diff --git a/src/scss/private.scss b/src/scss/private.scss
index e49e8294..3c1b2bed 100644
--- a/src/scss/private.scss
+++ b/src/scss/private.scss
@@ -35,7 +35,7 @@
     --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);
+    --yfm-color-term-dfn-pseudo-shadow-private: rgb(229, 229, 229);
 
     --yfm-color-modal-content-private: rgb(255, 255, 255);
     --yfm-color-modal-actions-hover-private: rgba(0, 0, 0, 0.05);