@dxtmisha/wiki 0.39.5 → 0.39.6

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

@@ -1,171 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Font'/>
-
-# Font
-
-A set of SCSS mixins for managing typography and text styles with CSS Custom Properties support.
-
-**How it works:** The system provides mixins for text styling with automatic RTL support through dir integration. Text alignment mixins automatically invert for RTL layouts. CSS custom properties are used for font-size, line-height, and paragraph spacing, allowing dynamic theming and responsive typography.
-
-## Initialization Mixins
-
-### `initParagraphSpacing`
-
-Initializes paragraph spacing system for consecutive paragraphs.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-@include initParagraphSpacing;
-// p + p { padding-top: var(--sys-paragraph-spacing, 0); }
-```
-
-## Typography Mixins
-
-### `fontSize`
-
-Sets font size with CSS custom property.
-
-**Parameters:**
-- `$value` — font size value
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include fontSize(16px);
-}
-```
-
-### `lineHeight`
-
-Sets line height with CSS custom property.
-
-**Parameters:**
-- `$value` — line height value
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include lineHeight(1.5);
-}
-```
-
-### `paragraphSpacing`
-
-Sets spacing between consecutive paragraphs.
-
-**Parameters:**
-- `$value` — spacing value
-
-**Returns:** `void`
-
-```scss
-.content {
-  @include paragraphSpacing(1em);
-}
-```
-
-## Text Alignment Mixins
-
-### `textAlign`
-
-Sets text alignment with automatic RTL support.
-
-**Parameters:**
-- `$value` — alignment value ('left', 'right', 'center', 'justify')
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include textAlign('left'); // auto-inverts for RTL
-}
-```
-
-### `textCase`
-
-Sets text transformation.
-
-**Parameters:**
-- `$value` — text-transform value ('uppercase', 'lowercase', 'capitalize', 'none')
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include textCase('uppercase');
-}
-```
-
-## Text Overflow Mixins
-
-### `textOverflow`
-
-Sets text overflow behavior.
-
-**Parameters:**
-- `$value` — overflow value ('truncate', 'ellipsis', 'clip')
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include textOverflow('truncate');
-}
-```
-
-### `truncate`
-
-Truncates text with ellipsis on single line.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include truncate;
-  // overflow: hidden;
-  // text-overflow: ellipsis;
-  // white-space: nowrap;
-}
-```
-
-### `clamp`
-
-Limits text to specified number of lines with ellipsis.
-
-**Parameters:**
-- `$clamp` — number of lines
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include clamp(3);
-  // -webkit-line-clamp: 3;
-}
-```
-
-## Utility Mixins
-
-### `textSelectNone`
-
-Disables text selection.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.text {
-  @include textSelectNone;
-  // user-select: none;
-}
-```
-

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

@@ -1,115 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Margin'/>
-
-# Margin
-
-A set of SCSS mixins for managing margins with CSS Custom Properties support.
-
-## Mixins
-
-### `margin`
-
-Sets margin on all sides.
-
-**Parameters:**
-- `$value` — margin value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include margin(16px);
-}
-```
-
-### `marginX`
-
-Sets horizontal margins (left and right).
-
-**Parameters:**
-- `$value` — margin value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include marginX(16px);
-}
-```
-
-### `marginY`
-
-Sets vertical margins (top and bottom).
-
-**Parameters:**
-- `$value` — margin value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include marginY(16px);
-}
-```
-
-### `marginLeft`
-
-Sets left margin with RTL support via margin-inline-start.
-
-**Parameters:**
-- `$value` — margin value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include marginLeft(16px);
-}
-```
-
-### `marginRight`
-
-Sets right margin with RTL support via margin-inline-end.
-
-**Parameters:**
-- `$value` — margin value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include marginRight(16px);
-}
-```
-
-### `marginTop`
-
-Sets top margin.
-
-**Parameters:**
-- `$value` — margin value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include marginTop(16px);
-}
-```
-
-### `marginBottom`
-
-Sets bottom margin.
-
-**Parameters:**
-- `$value` — margin value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include marginBottom(16px);
-}
-```
-

package/src/media/styles/en/media.mdx

@@ -1,133 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Media'/>
-
-# Media
-
-A set of SCSS functions and mixins for managing media queries and container queries with CSS Custom Properties support.
-
-**How it works:** The system uses design-specific breakpoint values stored in `variables.$designsMedia` map. The `media()` function retrieves breakpoint values based on current design system. Mixins provide convenient wrappers for media queries and container queries, automatically handling min/max width calculations and range queries.
-
-## Functions
-
-### `media`
-
-Returns breakpoint value for media queries.
-
-**Parameters:**
-- `$width` — size name (e.g., 'sm', 'md', 'lg')
-
-**Returns:** `String`
-
-```scss
-$breakpoint: media('md'); // returns breakpoint value
-```
-
-## Media Query Mixins
-
-### `mediaMinWidth`
-
-Creates media query with minimum width breakpoint.
-
-**Parameters:**
-- `$width` — size name
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include mediaMinWidth('md') {
-    display: block;
-  }
-}
-```
-
-### `mediaMaxWidth`
-
-Creates media query with maximum width breakpoint.
-
-**Parameters:**
-- `$width` — size name
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include mediaMaxWidth('md') {
-    display: none;
-  }
-}
-```
-
-### `mediaMinMaxWidth`
-
-Creates media query with min and max width range.
-
-**Parameters:**
-- `$min` — minimum size name
-- `$max` — maximum size name
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include mediaMinMaxWidth('sm', 'lg') {
-    padding: 16px;
-  }
-}
-```
-
-## Container Query Mixins
-
-### `containerMinWidth`
-
-Creates container query with minimum width breakpoint.
-
-**Parameters:**
-- `$width` — size name
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include containerMinWidth('md') {
-    display: grid;
-  }
-}
-```
-
-### `containerMaxWidth`
-
-Creates container query with maximum width breakpoint.
-
-**Parameters:**
-- `$width` — size name
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include containerMaxWidth('md') {
-    display: flex;
-  }
-}
-```
-
-### `containerMinMaxWidth`
-
-Creates container query with min and max width range.
-
-**Parameters:**
-- `$min` — minimum size name
-- `$max` — maximum size name
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include containerMinMaxWidth('sm', 'lg') {
-    gap: 16px;
-  }
-}
-```
-

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

@@ -1,115 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Padding'/>
-
-# Padding
-
-A set of SCSS mixins for managing paddings with CSS Custom Properties support.
-
-## Mixins
-
-### `padding`
-
-Sets padding on all sides.
-
-**Parameters:**
-- `$value` — padding value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include padding(16px);
-}
-```
-
-### `paddingX`
-
-Sets horizontal paddings (left and right).
-
-**Parameters:**
-- `$value` — padding value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include paddingX(16px);
-}
-```
-
-### `paddingY`
-
-Sets vertical paddings (top and bottom).
-
-**Parameters:**
-- `$value` — padding value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include paddingY(16px);
-}
-```
-
-### `paddingLeft`
-
-Sets left padding with RTL support via padding-inline-start.
-
-**Parameters:**
-- `$value` — padding value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include paddingLeft(16px);
-}
-```
-
-### `paddingRight`
-
-Sets right padding with RTL support via padding-inline-end.
-
-**Parameters:**
-- `$value` — padding value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include paddingRight(16px);
-}
-```
-
-### `paddingTop`
-
-Sets top padding.
-
-**Parameters:**
-- `$value` — padding value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include paddingTop(16px);
-}
-```
-
-### `paddingBottom`
-
-Sets bottom padding.
-
-**Parameters:**
-- `$value` — padding value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include paddingBottom(16px);
-}
-```
-

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

@@ -1,183 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Position'/>
-
-# Position
-
-A set of SCSS mixins for managing element positioning with CSS Custom Properties support.
-
-**How it works:** The system provides convenient mixins for positioning elements with automatic RTL support through CSS Logical Properties (inset-inline-start/end). Position mixins combine multiple positioning properties into single declarations, reducing code repetition. The `absolute*` mixins automatically set position: absolute and apply positioning values in one call.
-
-## Basic Position Mixins
-
-### `inset`
-
-Sets inset property on all sides.
-
-**Parameters:**
-- `$value: 0` — inset value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include inset(16px);
-}
-```
-
-### `horizon`
-
-Sets horizontal positioning (left and right).
-
-**Parameters:**
-- `$value: 0` — position value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include horizon(16px);
-}
-```
-
-### `vertically`
-
-Sets vertical positioning (top and bottom).
-
-**Parameters:**
-- `$value: 0` — position value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include vertically(16px);
-}
-```
-
-## Edge Position Mixins
-
-### `top`
-
-Sets top position and resets horizontal edges to 0.
-
-**Parameters:**
-- `$value: 0` — top value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include top(16px);
-}
-```
-
-### `bottom`
-
-Sets bottom position and resets horizontal edges to 0.
-
-**Parameters:**
-- `$value: 0` — bottom value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include bottom(16px);
-}
-```
-
-### `left`
-
-Sets left position with RTL support via inset-inline-start.
-
-**Parameters:**
-- `$value: 0px` — left value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include left(16px);
-}
-```
-
-### `right`
-
-Sets right position with RTL support via inset-inline-end.
-
-**Parameters:**
-- `$value: 0px` — right value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include right(16px);
-}
-```
-
-## Absolute Position Mixins
-
-### `absolute`
-
-Sets position: absolute with inset value.
-
-**Parameters:**
-- `$value: 0` — inset value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include absolute(16px);
-}
-```
-
-### `absoluteTop`
-
-Sets position: absolute with top and horizontal positioning.
-
-**Parameters:**
-- `$value: 0` — top value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include absoluteTop(16px);
-}
-```
-
-### `absoluteBottom`
-
-Sets position: absolute with bottom and horizontal positioning.
-
-**Parameters:**
-- `$value: 0` — bottom value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include absoluteBottom(16px);
-}
-```
-
-### `absoluteAfter`
-
-Sets position: relative and creates absolutely positioned ::after pseudo-element.
-
-**Parameters:**
-- `$value: 0` — inset value for ::after
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include absoluteAfter(0) {
-    background: red;
-  }
-}
-```
-