feat: del brand color for use diplodoc/themes in other proejcts

.nvmrc

@@ -1 +1 @@
-18
+22

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();

scripts/package-build-configs.mjs

@@ -1,12 +1,17 @@
-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';
 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) =>

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));
             }
         }
 

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)
+                );
             }
         }
     }

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-table-border, var(--yfm-color-table-border-private));
         border-radius: 8px;
         border-collapse: collapse;
         border-spacing: 0;
-        background: var(--yfm-color-table-background);
+        background: var(--yfm-color-table-background, var(--yfm-color-table-background-private));
 
         thead {
-            background-color: var(--yfm-color-table-head-background);
+            background-color: var(
+                --yfm-color-table-head-background,
+                var(--yfm-color-table-head-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-table-border, var(--yfm-color-table-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-stripe-row-background,
+            var(--yfm-color-table-stripe-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,16 +376,19 @@
         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 {
         display: block;
         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;
 

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 {

src/scss/_inline-code.scss

@@ -7,15 +7,19 @@
 
     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;
     font-style: normal;
 
     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,8 @@
         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-pseudo-shadow-private));
     }
 
     &.open {

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;
 }