@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/styles/ru/font.mdx

@@ -0,0 +1,171 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Font'/>
+
+# Font
+
+Набор SCSS миксинов для управления типографикой и стилями текста с поддержкой CSS Custom Properties.
+
+**Как это работает:** Система предоставляет миксины для стилизации текста с автоматической поддержкой RTL через интеграцию с dir. Миксины выравнивания текста автоматически инвертируются для RTL-раскладок. CSS custom properties используются для font-size, line-height и paragraph spacing, позволяя динамическое изменение темы и адаптивную типографику.
+
+## Миксины инициализации
+
+### `initParagraphSpacing`
+
+Инициализирует систему отступов между последовательными параграфами.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+@include initParagraphSpacing;
+// p + p { padding-top: var(--sys-paragraph-spacing, 0); }
+```
+
+## Миксины типографики
+
+### `fontSize`
+
+Устанавливает размер шрифта с CSS custom property.
+
+**Параметры:**
+- `$value` — значение размера шрифта
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include fontSize(16px);
+}
+```
+
+### `lineHeight`
+
+Устанавливает межстрочный интервал с CSS custom property.
+
+**Параметры:**
+- `$value` — значение межстрочного интервала
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include lineHeight(1.5);
+}
+```
+
+### `paragraphSpacing`
+
+Устанавливает отступ между последовательными параграфами.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.content {
+  @include paragraphSpacing(1em);
+}
+```
+
+## Миксины выравнивания текста
+
+### `textAlign`
+
+Устанавливает выравнивание текста с автоматической поддержкой RTL.
+
+**Параметры:**
+- `$value` — значение выравнивания ('left', 'right', 'center', 'justify')
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include textAlign('left'); // автоматически инвертируется для RTL
+}
+```
+
+### `textCase`
+
+Устанавливает преобразование текста.
+
+**Параметры:**
+- `$value` — значение text-transform ('uppercase', 'lowercase', 'capitalize', 'none')
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include textCase('uppercase');
+}
+```
+
+## Миксины переполнения текста
+
+### `textOverflow`
+
+Устанавливает поведение при переполнении текста.
+
+**Параметры:**
+- `$value` — значение переполнения ('truncate', 'ellipsis', 'clip')
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include textOverflow('truncate');
+}
+```
+
+### `truncate`
+
+Обрезает текст с многоточием на одной строке.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include truncate;
+  // overflow: hidden;
+  // text-overflow: ellipsis;
+  // white-space: nowrap;
+}
+```
+
+### `clamp`
+
+Ограничивает текст указанным количеством строк с многоточием.
+
+**Параметры:**
+- `$clamp` — количество строк
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include clamp(3);
+  // -webkit-line-clamp: 3;
+}
+```
+
+## Утилитарные миксины
+
+### `textSelectNone`
+
+Отключает выделение текста.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.text {
+  @include textSelectNone;
+  // user-select: none;
+}
+```
+

package/src/media/styles/ru/margin.mdx

@@ -0,0 +1,115 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Margin'/>
+
+# Margin
+
+Набор SCSS миксинов для управления внешними отступами с поддержкой CSS Custom Properties.
+
+## Миксины
+
+### `margin`
+
+Устанавливает отступы со всех сторон.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include margin(16px);
+}
+```
+
+### `marginX`
+
+Устанавливает горизонтальные отступы (слева и справа).
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include marginX(16px);
+}
+```
+
+### `marginY`
+
+Устанавливает вертикальные отступы (сверху и снизу).
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include marginY(16px);
+}
+```
+
+### `marginLeft`
+
+Устанавливает левый отступ с поддержкой RTL через margin-inline-start.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include marginLeft(16px);
+}
+```
+
+### `marginRight`
+
+Устанавливает правый отступ с поддержкой RTL через margin-inline-end.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include marginRight(16px);
+}
+```
+
+### `marginTop`
+
+Устанавливает верхний отступ.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include marginTop(16px);
+}
+```
+
+### `marginBottom`
+
+Устанавливает нижний отступ.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include marginBottom(16px);
+}
+```
+

package/src/media/styles/ru/media.mdx

@@ -0,0 +1,133 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Media'/>
+
+# Media
+
+Набор SCSS функций и миксинов для управления медиа-запросами и контейнерными запросами с поддержкой CSS Custom Properties.
+
+**Как это работает:** Система использует значения контрольных точек, специфичных для дизайна, хранящиеся в карте `variables.$designsMedia`. Функция `media()` извлекает значения контрольных точек на основе текущей дизайн-системы. Миксины предоставляют удобные обертки для медиа-запросов и контейнерных запросов, автоматически обрабатывая расчеты min/max ширины и диапазонные запросы.
+
+## Функции
+
+### `media`
+
+Возвращает значение контрольной точки для медиа-запросов.
+
+**Параметры:**
+- `$width` — название размера (например, 'sm', 'md', 'lg')
+
+**Возвращает:** `String`
+
+```scss
+$breakpoint: media('md'); // возвращает значение контрольной точки
+```
+
+## Миксины медиа-запросов
+
+### `mediaMinWidth`
+
+Создает медиа-запрос с минимальной шириной контрольной точки.
+
+**Параметры:**
+- `$width` — название размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include mediaMinWidth('md') {
+    display: block;
+  }
+}
+```
+
+### `mediaMaxWidth`
+
+Создает медиа-запрос с максимальной шириной контрольной точки.
+
+**Параметры:**
+- `$width` — название размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include mediaMaxWidth('md') {
+    display: none;
+  }
+}
+```
+
+### `mediaMinMaxWidth`
+
+Создает медиа-запрос с диапазоном минимальной и максимальной ширины.
+
+**Параметры:**
+- `$min` — название минимального размера
+- `$max` — название максимального размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include mediaMinMaxWidth('sm', 'lg') {
+    padding: 16px;
+  }
+}
+```
+
+## Миксины контейнерных запросов
+
+### `containerMinWidth`
+
+Создает контейнерный запрос с минимальной шириной контрольной точки.
+
+**Параметры:**
+- `$width` — название размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include containerMinWidth('md') {
+    display: grid;
+  }
+}
+```
+
+### `containerMaxWidth`
+
+Создает контейнерный запрос с максимальной шириной контрольной точки.
+
+**Параметры:**
+- `$width` — название размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include containerMaxWidth('md') {
+    display: flex;
+  }
+}
+```
+
+### `containerMinMaxWidth`
+
+Создает контейнерный запрос с диапазоном минимальной и максимальной ширины.
+
+**Параметры:**
+- `$min` — название минимального размера
+- `$max` — название максимального размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include containerMinMaxWidth('sm', 'lg') {
+    gap: 16px;
+  }
+}
+```
+

package/src/media/styles/ru/padding.mdx

@@ -0,0 +1,115 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Padding'/>
+
+# Padding
+
+Набор SCSS миксинов для управления внутренними отступами с поддержкой CSS Custom Properties.
+
+## Миксины
+
+### `padding`
+
+Устанавливает отступы со всех сторон.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include padding(16px);
+}
+```
+
+### `paddingX`
+
+Устанавливает горизонтальные отступы (слева и справа).
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include paddingX(16px);
+}
+```
+
+### `paddingY`
+
+Устанавливает вертикальные отступы (сверху и снизу).
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include paddingY(16px);
+}
+```
+
+### `paddingLeft`
+
+Устанавливает левый отступ с поддержкой RTL через padding-inline-start.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include paddingLeft(16px);
+}
+```
+
+### `paddingRight`
+
+Устанавливает правый отступ с поддержкой RTL через padding-inline-end.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include paddingRight(16px);
+}
+```
+
+### `paddingTop`
+
+Устанавливает верхний отступ.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include paddingTop(16px);
+}
+```
+
+### `paddingBottom`
+
+Устанавливает нижний отступ.
+
+**Параметры:**
+- `$value` — значение отступа
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include paddingBottom(16px);
+}
+```
+

package/src/media/styles/ru/position.mdx

@@ -0,0 +1,183 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Position'/>
+
+# Position
+
+Набор SCSS миксинов для управления позиционированием элементов с поддержкой CSS Custom Properties.
+
+**Как это работает:** Система предоставляет удобные миксины для позиционирования элементов с автоматической поддержкой RTL через CSS Logical Properties (inset-inline-start/end). Миксины позиционирования объединяют несколько свойств позиционирования в одно объявление, уменьшая дублирование кода. Миксины `absolute*` автоматически устанавливают position: absolute и применяют значения позиционирования в одном вызове.
+
+## Базовые миксины позиционирования
+
+### `inset`
+
+Устанавливает свойство inset со всех сторон.
+
+**Параметры:**
+- `$value: 0` — значение inset
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include inset(16px);
+}
+```
+
+### `horizon`
+
+Устанавливает горизонтальное позиционирование (left и right).
+
+**Параметры:**
+- `$value: 0` — значение позиции
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include horizon(16px);
+}
+```
+
+### `vertically`
+
+Устанавливает вертикальное позиционирование (top и bottom).
+
+**Параметры:**
+- `$value: 0` — значение позиции
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include vertically(16px);
+}
+```
+
+## Миксины краевого позиционирования
+
+### `top`
+
+Устанавливает верхнюю позицию и сбрасывает горизонтальные края в 0.
+
+**Параметры:**
+- `$value: 0` — значение top
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include top(16px);
+}
+```
+
+### `bottom`
+
+Устанавливает нижнюю позицию и сбрасывает горизонтальные края в 0.
+
+**Параметры:**
+- `$value: 0` — значение bottom
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include bottom(16px);
+}
+```
+
+### `left`
+
+Устанавливает левую позицию с поддержкой RTL через inset-inline-start.
+
+**Параметры:**
+- `$value: 0px` — значение left
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include left(16px);
+}
+```
+
+### `right`
+
+Устанавливает правую позицию с поддержкой RTL через inset-inline-end.
+
+**Параметры:**
+- `$value: 0px` — значение right
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include right(16px);
+}
+```
+
+## Миксины абсолютного позиционирования
+
+### `absolute`
+
+Устанавливает position: absolute со значением inset.
+
+**Параметры:**
+- `$value: 0` — значение inset
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include absolute(16px);
+}
+```
+
+### `absoluteTop`
+
+Устанавливает position: absolute с верхним и горизонтальным позиционированием.
+
+**Параметры:**
+- `$value: 0` — значение top
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include absoluteTop(16px);
+}
+```
+
+### `absoluteBottom`
+
+Устанавливает position: absolute с нижним и горизонтальным позиционированием.
+
+**Параметры:**
+- `$value: 0` — значение bottom
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include absoluteBottom(16px);
+}
+```
+
+### `absoluteAfter`
+
+Устанавливает position: relative и создает абсолютно позиционированный псевдоэлемент ::after.
+
+**Параметры:**
+- `$value: 0` — значение inset для ::after
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include absoluteAfter(0) {
+    background: red;
+  }
+}
+```
+