From d9b2284d33b79c934746041060560ae177fa1668 Mon Sep 17 00:00:00 2001 From: Nikita Gorin <36075690+NikitaCG@users.noreply.github.com> Date: Mon, 23 Sep 2024 14:09:57 +0300 Subject: [PATCH] feat: add css-api (#515) * feat: create css-api for all styles without modal * feat: add css-api * feat: add css-api -fix readme * feat: add css-api - fix comment about imports --- README.md | 54 +++++++------- README.ru.md | 57 +++++++------- src/scss/_common.scss | 106 +++++++++++++++------------ src/scss/_cut.scss | 2 +- src/scss/_file.scss | 6 +- src/scss/_highlight.scss | 16 ---- src/scss/_modal.scss | 28 +++---- src/scss/_note.scss | 30 +++----- src/scss/_term.scss | 15 ++-- src/scss/_variables.scss | 16 ---- src/scss/brand.scss | 48 ++++++++++++ src/scss/private.scss | 44 +++++++++++ src/transform/plugins/file/README.md | 82 +++++++++++++++++---- 13 files changed, 309 insertions(+), 195 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/README.md b/README.md index e7eb8ba9..5c8d6a6f 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,14 @@ 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}); ``` ## License MIT - diff --git a/README.ru.md b/README.ru.md index 741974fd..6466fe96 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,15 +63,14 @@ 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}); ``` - ## License MIT diff --git a/src/scss/_common.scss b/src/scss/_common.scss index 7dc34e7a..1d2bfd7e 100644 --- a/src/scss/_common.scss +++ b/src/scss/_common.scss @@ -1,4 +1,7 @@ -@import 'variables'; +/* stylelint-disable declaration-no-important */ + +@import 'private'; +@import 'brand'; @mixin removeMarginForEdgeChildren { & > *:first-child { @@ -11,11 +14,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; @@ -29,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; } @@ -66,41 +77,42 @@ a { background-color: transparent; - color: $linkColor; + color: var(--yfm-color-link); text-decoration: none; - &:hover, &:active { - color: $linkHoverColor; + &: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; } } img { object-fit: contain; - background-color: $baseColor; + background-color: var(--yfm-color-base); } svg { @@ -122,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; } @@ -157,7 +171,7 @@ } table { - color: #333; + color: var(--yfm-color-table); display: inline-block; max-width: 100%; @@ -167,34 +181,37 @@ 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; + 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; - border: 1px solid $borderColor; + border: 1px solid var(--yfm-color-border); @include removeMarginForEdgeChildren(); } @@ -209,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; } } @@ -224,7 +243,7 @@ margin: 1.5em 0; overflow: hidden; - background-color: $borderColor; + background-color: var(--yfm-color-border); border: none; &::before { @@ -242,7 +261,7 @@ blockquote { position: relative; padding-left: 12px; - border-left: 3px solid $accentColor; + border-left: 3px solid var(--yfm-color-accent); @include removeMarginForEdgeChildren(); } @@ -275,7 +294,8 @@ } } - ul, ol { + ul, + ol { padding-left: 2.2em; } @@ -321,11 +341,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 +364,7 @@ word-wrap: normal; background-color: transparent; border: 0; - color: $textColor; + color: var(--yfm-color-text); } pre > code { @@ -352,13 +372,14 @@ padding: 16px; overflow: auto; - background-color: $codeBackgroundColor; - color: $textColor; + background-color: var(--yfm-color-code-background); + color: var(--yfm-color-text); white-space: pre; } - sup, sub { + sup, + sub { line-height: 0; } @@ -388,17 +409,8 @@ 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'; + --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..f34639a7 100644 --- a/src/scss/_cut.scss +++ b/src/scss/_cut.scss @@ -14,7 +14,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..52339938 100644 --- a/src/scss/_file.scss +++ b/src/scss/_file.scss @@ -1,6 +1,4 @@ -@import 'variables'; - -$defaultIcon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg=="); +$defaultIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg=='); /** Public CSS variables: @@ -18,7 +16,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..ed9265dc 100644 --- a/src/scss/_highlight.scss +++ b/src/scss/_highlight.scss @@ -1,26 +1,20 @@ -@import 'variables'; - .yfm { .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); } - .hljs-keyword, .hljs-attribute, .hljs-selector-tag, @@ -38,13 +32,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 +48,10 @@ .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,22 +59,17 @@ .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); } - .hljs-emphasis { font-style: italic; } diff --git a/src/scss/_modal.scss b/src/scss/_modal.scss index 1da44b05..b0d8b46d 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,14 +21,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%; @@ -44,23 +46,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 { @@ -70,12 +72,12 @@ transition: background 300ms; &:hover { - background: var(--g-color-base-simple-hover); + background: var(--yfm-color-modal-actions-hover); } } - } + } } -} +} .wide-element-wrapper { display: flex; @@ -98,7 +100,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 { @@ -114,6 +116,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/_note.scss b/src/scss/_note.scss index e499c248..b2626332 100644 --- a/src/scss/_note.scss +++ b/src/scss/_note.scss @@ -1,15 +1,3 @@ -@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); - .yfm .yfm-note { max-width: 1296px; margin: 20px 0; @@ -21,7 +9,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08); } & > p { - margin: 0 0 10px 0; + margin: 0 0 10px; &:first-child { &::before { @@ -42,10 +30,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 +47,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..97b11e73 100644 --- a/src/scss/_term.scss +++ b/src/scss/_term.scss @@ -1,6 +1,6 @@ .yfm-term { &_title { - color: #027bf3; + color: var(--yfm-color-term-title); cursor: pointer; border-bottom: 1px dotted; @@ -10,7 +10,7 @@ font-style: normal; &:hover { - color: #004080; + color: var(--yfm-color-term-title-hover); } } @@ -32,7 +32,7 @@ padding: 10px; - background-color: rgb(255, 255, 255); + background-color: var(--yfm-color-term-dfn-background); font-size: inherit; line-height: inherit; @@ -40,20 +40,17 @@ 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 { 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 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..cc0a5f8c --- /dev/null +++ b/src/scss/brand.scss @@ -0,0 +1,48 @@ +@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); + + --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 new file mode 100644 index 00000000..942f8fc7 --- /dev/null +++ b/src/scss/private.scss @@ -0,0 +1,44 @@ +@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); + + --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); +} 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`