@dxtmisha/wiki 0.24.2 → 0.24.3

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

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Content'/>
+
+# Content
+
+Набор SCSS миксинов для управления видимостью контента с поддержкой CSS Custom Properties.
+
+## Миксины
+
+### `contentVisibility`
+
+Устанавливает свойство `content-visibility` с опциональным fallback для браузеров без поддержки.
+
+**Параметры:**
+- `$value` — значение content-visibility ('auto', 'hidden', 'visible')
+- `$display: null` — fallback значение display
+
+**Возвращает:** `void`
+
+```scss
+.list-item {
+  @include contentVisibility('auto');
+}
+
+.hidden-section {
+  @include contentVisibility('hidden', none);
+}
+```
+

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

@@ -0,0 +1,233 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Dimension'/>
+
+# Dimension
+
+Набор SCSS функций и миксинов для управления размерами с поддержкой CSS Custom Properties.
+
+## Функции
+
+### `getWidthByRatio`
+
+Возвращает ширину на основе значений соотношения сторон.
+
+**Параметры:**
+- `$value` — строка соотношения сторон (например, '16/9')
+
+**Возвращает:** `String`
+
+```scss
+$width: getWidthByRatio('16/9'); // "16"
+```
+
+### `getHeightByRatio`
+
+Возвращает высоту на основе значений соотношения сторон.
+
+**Параметры:**
+- `$value` — строка соотношения сторон (например, '16/9')
+
+**Возвращает:** `String`
+
+```scss
+$height: getHeightByRatio('16/9'); // "9"
+```
+
+## Миксины
+
+### `width`
+
+Устанавливает ширину с CSS custom property.
+
+**Параметры:**
+- `$value` — значение ширины
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include width(200px);
+}
+```
+
+### `height`
+
+Устанавливает высоту с CSS custom property.
+
+**Параметры:**
+- `$value` — значение высоты
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include height(100px);
+}
+```
+
+### `widthDevice`
+
+Устанавливает ширину с использованием device viewport width (dvw).
+
+**Параметры:**
+- `$value` — значение ширины в единицах dvw
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include widthDevice(100);
+}
+```
+
+### `heightDevice`
+
+Устанавливает высоту с использованием device viewport height (dvh).
+
+**Параметры:**
+- `$value` — значение высоты в единицах dvh
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include heightDevice(100);
+}
+```
+
+### `maxWidthDevice`
+
+Устанавливает max-width с использованием device viewport width (dvw).
+
+**Параметры:**
+- `$value` — значение max-width в единицах dvw
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include maxWidthDevice(90);
+}
+```
+
+### `maxHeightDevice`
+
+Устанавливает max-height с использованием device viewport height (dvh).
+
+**Параметры:**
+- `$value` — значение max-height в единицах dvh
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include maxHeightDevice(80);
+}
+```
+
+### `widthBasis`
+
+Устанавливает ширину с flex-basis и ограничением max-width.
+
+**Параметры:**
+- `$value` — значение ширины
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include widthBasis(300px);
+}
+```
+
+### `heightBasis`
+
+Устанавливает высоту с flex-basis и ограничением max-height.
+
+**Параметры:**
+- `$value` — значение высоты
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include heightBasis(200px);
+}
+```
+
+### `aspectRatio`
+
+Устанавливает соотношение сторон.
+
+**Параметры:**
+- `$value` — значение соотношения сторон
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include aspectRatio(16/9);
+}
+```
+
+### `aspectRatioWidth`
+
+Устанавливает соотношение сторон (псевдоним для aspectRatio).
+
+**Параметры:**
+- `$value` — значение соотношения сторон
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include aspectRatioWidth(16/9);
+}
+```
+
+### `aspectRatioHeight`
+
+Устанавливает соотношение сторон (псевдоним для aspectRatio).
+
+**Параметры:**
+- `$value` — значение соотношения сторон
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include aspectRatioHeight(4/3);
+}
+```
+
+### `squared`
+
+Создает квадратный элемент с соотношением сторон 1:1.
+
+**Параметры:**
+- `$value` — значение размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include squared(100px);
+}
+```
+
+### `circle`
+
+Создает круглый элемент.
+
+**Параметры:**
+- `$value` — значение размера
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include circle(50px);
+}
+```
+

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

@@ -0,0 +1,193 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Dir'/>
+
+# Dir
+
+Набор SCSS функций и миксинов для управления направлением текста (LTR/RTL) с поддержкой CSS Custom Properties.
+
+**Как это работает:** Система использует CSS custom properties для управления двунаправленным текстом. По умолчанию установлен LTR (слева направо). При применении `html[dir="rtl"]` или класса `.dir-rtl` все переменные направления автоматически инвертируются, обеспечивая поддержку RTL без дублирования кода.
+
+## Миксины инициализации
+
+### `initDir`
+
+Инициализирует систему направлений с CSS custom properties для поддержки LTR и RTL.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+@include initDir;
+```
+
+### `dirToRtl`
+
+Применяет стили для RTL (справа налево) направления.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+html[dir="rtl"] {
+  @include dirToRtl;
+}
+```
+
+## Функции валидации
+
+### `isDir`
+
+Возвращает множитель направления (1 для LTR, -1 для RTL).
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+$dir: isDir(); // var(--d-dir, 1)
+```
+
+### `isDirLeft`
+
+Проверяет, является ли текущее направление выровненным по левому краю.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+$isLeft: isDirLeft(); // var(--d-dir-left, 1)
+```
+
+### `isDirRight`
+
+Проверяет, является ли текущее направление выровненным по правому краю.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+$isRight: isDirRight(); // var(--d-dir-right, 0)
+```
+
+## Функции направления
+
+### `dirLeft`
+
+Возвращает значение выравнивания текста для левой стороны.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+text-align: dirLeft(); // left (LTR) или right (RTL)
+```
+
+### `dirRight`
+
+Возвращает значение выравнивания текста для правой стороны.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+text-align: dirRight(); // right (LTR) или left (RTL)
+```
+
+### `dirLeftAuto`
+
+Возвращает значение 'auto' для свойства left.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+left: dirLeftAuto(); // auto (LTR) или unset (RTL)
+```
+
+### `dirRightAuto`
+
+Возвращает значение 'auto' для свойства right.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+right: dirRightAuto(); // unset (LTR) или auto (RTL)
+```
+
+### `dirFlexLeft`
+
+Возвращает значение flex-выравнивания для левой стороны.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+justify-content: dirFlexLeft(); // flex-start (LTR) или flex-end (RTL)
+```
+
+### `dirFlexRight`
+
+Возвращает значение flex-выравнивания для правой стороны.
+
+**Параметры:** нет
+
+**Возвращает:** `String`
+
+```scss
+justify-content: dirFlexRight(); // flex-end (LTR) или flex-start (RTL)
+```
+
+## Функции позиционирования
+
+### `dirToLeft`
+
+Вычисляет значение позиции для свойства left в зависимости от направления.
+
+**Параметры:**
+- `$left` — переменная левой позиции
+- `$right` — переменная правой позиции
+
+**Возвращает:** `String`
+
+```scss
+left: dirToLeft(--pos-left, --pos-right);
+```
+
+### `dirToRight`
+
+Вычисляет значение позиции для свойства right в зависимости от направления.
+
+**Параметры:**
+- `$left` — переменная левой позиции
+- `$right` — переменная правой позиции
+
+**Возвращает:** `String`
+
+```scss
+right: dirToRight(--pos-left, --pos-right);
+```
+
+### `dirOrder`
+
+Вычисляет значение order на основе множителя направления.
+
+**Параметры:**
+- `$value` — значение order
+
+**Возвращает:** `String`
+
+```scss
+order: dirOrder(2); // 3 (LTR) или 999997 (RTL)
+```
+

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

@@ -0,0 +1,249 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Flex'/>
+
+# Flex
+
+Набор SCSS миксинов для работы с flexbox-раскладками с поддержкой CSS Custom Properties.
+
+**Как это работает:** Система предоставляет удобные миксины для распространенных паттернов flexbox. Каждый миксин объединяет несколько свойств flexbox в одно объявление, уменьшая дублирование кода. Миксины поддерживают как стандартные flex-контейнеры, так и inline-flex варианты, с автоматическими пресетами выравнивания для горизонтальных/вертикальных раскладок.
+
+## Базовые миксины
+
+### `flex`
+
+Устанавливает display: flex.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flex;
+}
+```
+
+### `flexInline`
+
+Устанавливает display: inline-flex.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexInline;
+}
+```
+
+## Миксины выравнивания
+
+### `flexX`
+
+Создает горизонтальный flex-контейнер с центрированными элементами.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexX;
+  // display: flex;
+  // align-items: center;
+}
+```
+
+### `flexY`
+
+Создает вертикальный flex-контейнер с центрированными элементами.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexY;
+  // display: flex;
+  // align-items: center;
+  // flex-flow: column;
+}
+```
+
+### `flexStretchX`
+
+Создает горизонтальный flex-контейнер с растянутыми элементами.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexStretchX;
+  // display: flex;
+  // align-items: stretch;
+}
+```
+
+### `flexStretchY`
+
+Создает вертикальный flex-контейнер с растянутыми элементами.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexStretchY;
+  // display: flex;
+  // align-items: stretch;
+  // flex-flow: column;
+}
+```
+
+### `flexCenter`
+
+Создает центрированный flex-контейнер (по обеим осям).
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexCenter;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+}
+```
+
+### `flexBetween`
+
+Создает flex-контейнер с выравниванием space-between.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexBetween;
+  // display: flex;
+  // align-items: center;
+  // justify-content: space-between;
+}
+```
+
+## Миксины inline-flex
+
+### `flexInlineX`
+
+Создает горизонтальный inline-flex контейнер с центрированными элементами.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexInlineX;
+}
+```
+
+### `flexInlineY`
+
+Создает вертикальный inline-flex контейнер с центрированными элементами.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexInlineY;
+}
+```
+
+### `flexInlineCenter`
+
+Создает центрированный inline-flex контейнер (по обеим осям).
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexInlineCenter;
+}
+```
+
+### `flexInlineBetween`
+
+Создает inline-flex контейнер с выравниванием space-between.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexInlineBetween;
+}
+```
+
+## Утилитарные миксины
+
+### `justifyContent`
+
+Устанавливает свойство justify-content.
+
+**Параметры:**
+- `$value` — значение justify-content
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include justifyContent(center);
+}
+```
+
+### `flexPosition`
+
+Применяет flex-раскладку на основе значения пресета.
+
+**Параметры:**
+- `$value` — имя пресета ('x', 'y', 'center', 'between', 'inline-x', 'inline-y', 'inline-center', 'inline-between')
+
+**Возвращает:** `void`
+
+```scss
+.container {
+  @include flexPosition('center');
+}
+```
+
+### `flexDynamic`
+
+Создает гибкий элемент, который растет и сжимается.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.item {
+  @include flexDynamic;
+  // flex-basis: 1px;
+  // flex-grow: 1;
+  // flex-shrink: 1;
+}
+```
+