@diplodoc/transform 4.63.8 → 4.64.0

package/dist/scss/_lists.scss

@@ -0,0 +1,77 @@
+@use 'sass:list';
+@use 'sass:string';
+
+@function get-counter-ident($depth) {
+    $ident: hier-list-item;
+
+    @for $i from 0 to $depth {
+        $ident: sub-#{$ident};
+    }
+
+    @return $ident;
+}
+
+@function get-selector($depth) {
+    $selector: ol;
+
+    @for $i from 0 to $depth {
+        $selector: '#{$selector} > li > ol';
+    }
+
+    @return $selector;
+}
+
+@function get-marker-content($idents) {
+    $length: list.length($idents);
+    $content: '';
+
+    @for $i from 1 through $length {
+        @if $i > 1 {
+            $content: '#{$content} "."';
+        }
+
+        $content: '#{$content} counter(#{list.nth($idents, $i)})';
+    }
+
+    @return #{$content} '. ';
+}
+
+@mixin hier-list($max-depth) {
+    $ident-path: ();
+
+    @for $i from 0 through $max-depth {
+        $ident: get-counter-ident($i);
+        $ident-path: list.append($ident-path, $ident);
+
+        & #{get-selector($i)} {
+            --hier-list-start: 0;
+            counter-reset: #{$ident} var(--hier-list-start);
+
+            & > li {
+                counter-increment: $ident;
+
+                &::marker {
+                    content: get-marker-content($ident-path);
+                }
+            }
+        }
+    }
+}
+
+.yfm {
+    @include hier-list(5);
+
+    &.yfm_no-list-reset ol,
+    ol.yfm_no-list-reset,
+    .yfm_no-list-reset ol {
+        counter-reset: list-item;
+
+        & li {
+            counter-increment: unset;
+
+            &::marker {
+                content: unset;
+            }
+        }
+    }
+}

package/dist/scss/_modal.scss

@@ -0,0 +1,127 @@
+/* stylelint-disable declaration-no-important */
+
+.wide-container {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0px;
+    left: 0px;
+    z-index: 200;
+
+    &.dc-doc-page {
+        max-width: 100% !important;
+    }
+
+    .wide-content-viewer {
+        visibility: hidden;
+    }
+
+    .wide-content-wrapper {
+        z-index: 200;
+        background-color: var(--yfm-color-modal-content, var(--yfm-color-modal-content-private));
+        height: 90vh;
+        width: 70vw;
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+
+        .wide-content {
+            height: 95%;
+            width: 100%;
+
+            .wide-inner-element {
+                max-width: 100%;
+                width: 100%;
+                height: 100%;
+            }
+
+            table {
+                border-radius: 0px;
+            }
+
+            .wide-thead-content {
+                display: table;
+                width: 100%;
+            }
+        }
+
+        .wide-toolbar {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 12px;
+        }
+
+        .wide-entity-name {
+            margin: 0;
+            font-size: 18px;
+        }
+
+        .wide-actions {
+            align-self: flex-end;
+
+            .close-action {
+                cursor: pointer;
+                border-radius: 3px;
+
+                transition: background 300ms;
+
+                &:hover {
+                    background: var(
+                        --yfm-color-modal-actions-hover,
+                        var(--yfm-color-modal-actions-hover-private)
+                    );
+                }
+            }
+        }
+    }
+}
+
+.wide-element-wrapper {
+    display: flex;
+    gap: 30px;
+    position: relative;
+
+    &:hover > .wide-content-viewer {
+        visibility: visible;
+    }
+
+    .wide-inner-element {
+        max-width: 700px;
+    }
+}
+
+.wide-content-viewer {
+    visibility: hidden;
+    width: 30px;
+    height: 30px;
+    z-index: 100;
+    padding: 6px;
+    box-sizing: content-box;
+    color: var(--yfm-color-modal-wide-content, var(--yfm-color-modal-wide-content-private));
+    cursor: pointer;
+
+    & > svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.wide-content-overlay {
+    z-index: 100;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(
+        --yfm-color-modal-wide-content-overlay,
+        var(--yfm-color-modal-wide-content-overlay-private)
+    );
+    opacity: 0.6;
+}

package/dist/scss/_note.scss

@@ -0,0 +1,75 @@
+@use 'sass:color';
+
+.yfm .yfm-note {
+    max-width: 1296px;
+    margin: 20px 0;
+    padding: 20px 20px 20px 64px;
+    border-radius: 10px;
+
+    .yfm-note-title {
+        font-weight: 700;
+    }
+
+    & > * {
+        margin: 0 0 10px;
+
+        &:first-child {
+            &::before {
+                box-sizing: content-box;
+                display: block;
+                width: 24px;
+                height: 24px;
+                margin-top: -2px;
+                margin-left: -44px;
+                padding-right: 20px;
+                float: left;
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // @todo replace with variables
+
+    $colors: (
+        yfm-accent-info: #027bf3,
+        yfm-accent-tip: #56bd67,
+        yfm-accent-warning: #f19518,
+        yfm-accent-alert: #ff4645,
+    );
+
+    @each $type, $color in $colors {
+        &.#{$type} > :first-child::before {
+            $r: color.channel($color, 'red', $space: rgb);
+            $g: color.channel($color, 'green', $space: rgb);
+            $b: color.channel($color, 'blue', $space: rgb);
+            $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')';
+            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+        }
+    }
+
+    $backgroundColors: (
+        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 {
+        &.#{$type} {
+            background: $color;
+        }
+    }
+}

package/dist/scss/_table.scss

@@ -0,0 +1,81 @@
+.yfm table td {
+    &.cell-align-top-left,
+    &.cell-align-bottom-left {
+        text-align: start;
+    }
+
+    &.cell-align-top-center,
+    &.cell-align-center {
+        text-align: center;
+    }
+
+    &.cell-align-top-right,
+    &.cell-align-bottom-right {
+        text-align: end;
+    }
+
+    &.cell-align-top-left,
+    &.cell-align-top-center,
+    &.cell-align-top-right {
+        vertical-align: top;
+    }
+
+    &.cell-align-center {
+        vertical-align: middle;
+    }
+
+    &.cell-align-bottom-left,
+    &.cell-align-bottom-right {
+        vertical-align: bottom;
+    }
+}
+
+@mixin yfm-sticky-header-row {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+
+    td,
+    th {
+        position: relative;
+        z-index: 0;
+    }
+
+    td::before,
+    th::before {
+        content: '';
+        background: var(--yfm-color-table-background, var(--yfm-color-table-background-private));
+        position: absolute;
+        inset: 0;
+        z-index: -2;
+    }
+
+    td::after,
+    th::after {
+        content: '';
+        background: var(
+            --yfm-color-table-head-background,
+            var(--yfm-color-table-head-background-private)
+        );
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+    }
+}
+
+.yfm table[sticky-header] {
+    position: relative;
+
+    thead {
+        @include yfm-sticky-header-row;
+    }
+
+    &:not(:has(thead)) {
+        tbody > tr:first-child,
+        > tr:first-child {
+            @include yfm-sticky-header-row;
+        }
+    }
+
+    max-height: 70vh;
+}

package/dist/scss/_term.scss

@@ -0,0 +1,84 @@
+.yfm-term {
+    &_title {
+        color: var(--yfm-color-term-title, var(--yfm-color-term-title-private));
+        cursor: pointer;
+
+        border-bottom: 1px dotted;
+
+        font-size: inherit;
+        line-height: inherit;
+        font-style: normal;
+
+        &:hover {
+            color: var(--yfm-color-term-title-hover, var(--yfm-color-term-title-hover-private));
+        }
+    }
+
+    &_dfn {
+        position: absolute;
+        z-index: 100;
+
+        visibility: hidden;
+        opacity: 0;
+
+        padding: 10px;
+
+        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, var(--yfm-color-term-dfn-shadow-private));
+        outline: none;
+
+        width: fit-content;
+        max-width: 450px;
+
+        @media screen and (max-width: 600px) {
+            & {
+                max-width: 80%;
+            }
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: -1;
+            inset: 0;
+
+            border-radius: inherit;
+            box-shadow: 0 0 0 1px
+                var(
+                    --yfm-color-term-dfn-pseudo-shadow,
+                    var(--yfm-color-term-dfn-pseudo-shadow-private)
+                );
+        }
+
+        &.open {
+            visibility: visible;
+
+            animation-name: popup;
+            animation-duration: 0.1s;
+            animation-timing-function: ease-out;
+            animation-fill-mode: forwards;
+
+            @keyframes popup {
+                0% {
+                    opacity: 0;
+                    transform: translateY(10px);
+                }
+                100% {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        }
+    }
+}

package/dist/scss/_yfm-only.scss

@@ -0,0 +1,13 @@
+/**
+    Note: This file excludes "cut", "file" and "tabs" as they are handled separately
+    in dedicated extensions (packages). In the future, "note", "term", "katex"
+    and "table" will also be excluded from this file and moved to yfm.scss,
+    once they are moved to separate packages. Direct usage is not recommended,
+    as the file is subject to changes without prior notice.
+ */
+
+@use 'note';
+@use 'katex';
+@use 'table';
+@use 'term';
+@use 'inline-code';

package/dist/scss/base.scss

@@ -0,0 +1,4 @@
+@use 'common';
+@use 'anchor';
+@use 'highlight';
+@use 'code';

package/dist/scss/print/code.scss

@@ -0,0 +1,9 @@
+@media print {
+    .yfm {
+        .yfm-clipboard {
+            & > pre > code {
+                white-space: pre-wrap;
+            }
+        }
+    }
+}

package/dist/scss/print/common.scss

@@ -0,0 +1,13 @@
+@media print {
+    .yfm {
+        .yfm-page__delimeter {
+            display: none;
+        }
+
+        h1, h2 {
+            &[data-original-article] {
+                page-break-before: always;
+            }
+        }
+    }
+}

package/dist/scss/print/cut.scss

@@ -0,0 +1,19 @@
+@media print {
+    .yfm {
+        .yfm-cut {
+            &-title {
+                padding-left: 0;
+
+                &:before {
+                    display: none;
+                }
+            }
+
+            &-content {
+                height: auto;
+                display: block;
+                padding: 5px 0 15px 30px;
+            }
+        }
+    }
+}

package/dist/scss/print/iframe.scss

@@ -0,0 +1,5 @@
+@media print {
+    .yfm iframe {
+        display: none;
+    }
+}

package/dist/scss/print/note.scss

@@ -0,0 +1,7 @@
+@media print {
+    .yfm {
+        .yfm-note {
+            page-break-inside: avoid;
+        }
+    }
+}

package/dist/scss/print/table.scss

@@ -0,0 +1,24 @@
+.yfm {
+    .yfm-table-container {
+        position: relative;
+
+        & > table {
+            overflow: initial;
+            position: absolute;
+            top: 0;
+            left: 0;
+            max-width: initial;
+            transform-origin: top left;
+
+            thead {
+                display: table-row-group;
+            }
+
+            th, td {
+                page-break-inside: avoid;
+                white-space: pre-wrap;
+                text-overflow: initial;
+            }
+        }
+    }
+}

package/dist/scss/print/tabs.scss

@@ -0,0 +1,26 @@
+@media print {
+    .yfm {
+        .yfm-tab {
+            &-list {
+                display: none;
+            }
+
+            &-panel {
+                visibility: visible;
+                height: auto;
+                display: block;
+            }
+
+            &-panel:before {
+                content: attr(data-title);
+                margin-bottom: -1px;
+                margin-right: 20px;
+                border-bottom: 2px solid transparent;
+                line-height: 33px;
+                font-weight: 700;
+                outline: 0;
+                cursor: pointer;
+            }
+        }
+    }
+}

package/dist/scss/print/term.scss

@@ -0,0 +1,10 @@
+@media print {
+    .yfm {
+        .yfm-term {
+            &_title {
+                color: currentColor;
+                border-bottom: none;
+            }
+        }
+    }
+}

package/dist/scss/print.scss

@@ -0,0 +1,8 @@
+@use 'print/code';
+@use 'print/common';
+@use 'print/cut';
+@use 'print/note';
+@use 'print/table';
+@use 'print/tabs';
+@use 'print/term';
+@use 'print/iframe';

package/dist/scss/private.scss

@@ -0,0 +1,51 @@
+@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-border-private: rgba(0, 0, 0, 0.07);
+    --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-code-background-hovered-private: rgba(107, 132, 153, 0.2);
+
+    --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-private: #027bf3;
+    --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-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/dist/scss/yfm-base.scss

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

package/dist/scss/yfm.scss

@@ -0,0 +1,5 @@
+@use 'yfm-base';
+
+@forward '@diplodoc/cut-extension/runtime';
+@forward '@diplodoc/file-extension/runtime';
+@forward '@diplodoc/tabs-extension/runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diplodoc/transform",
-  "version": "4.63.8",
+  "version": "4.64.0",
   "description": "A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML",
   "keywords": [
     "markdown",

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