@dxtmisha/wiki 0.24.2 → 0.24.3

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

@@ -0,0 +1,171 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,183 @@
+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;
+  }
+}
+```
+