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)
-- - -
+
+---
[](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)
-- - -
+
+---
[](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`