@diplodoc/transform 4.63.8 → 4.64.0

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

package/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,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;
 

package/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 {

package/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,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 {

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

package/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 {

package/src/scss/_table.scss

@@ -44,7 +44,7 @@
     td::before,
     th::before {
         content: '';
-        background: var(--yfm-color-table-background);
+        background: var(--yfm-color-table-background, var(--yfm-color-table-background-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-head-background,
+            var(--yfm-color-table-head-background-private)
+        );
         position: absolute;
         inset: 0;
         z-index: -1;

package/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-pseudo-shadow-private)
+                );
         }
 
         &.open {

package/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);
@@ -37,10 +35,17 @@
     --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);
     --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);
 }

package/src/scss/yfm-base.scss

@@ -0,0 +1,3 @@
+@use 'base';
+@use 'yfm-only';
+@use 'modal';

package/src/scss/yfm.scss

@@ -1,6 +1,4 @@
-@use 'base';
-@use 'yfm-only';
-@use 'modal';
+@use 'yfm-base';
 
 @forward '@diplodoc/cut-extension/runtime';
 @forward '@diplodoc/file-extension/runtime';

package/src/scss/brand.scss

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