@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/functional/styles/color/outlineAsColor/outlineAsColor.ru.mdx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/styles/color/outlineAsColor - Контур по цвету'/>
+
+# `outlineAsColor`
+
+Миксин устанавливает свойство `outline-color` в соответствии с текущим системным цветом текста (`--sys-color`).
+
+**Параметры:**
+- Нет.
+
+## Пример
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-follows-text {
+  @include styles.outlineAsColor;
+}
+```

package/src/media/functional/styles/color/outlineAsColor/outlineAsColor.vi.mdx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/styles/color/outlineAsColor - Đường viền theo màu'/>
+
+# `outlineAsColor`
+
+Mixin thiết lập thuộc tính `outline-color` để khớp với màu văn bản hệ thống hiện tại (`--sys-color`).
+
+**Tham số:**
+- Không.
+
+## Ví dụ
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-follows-text {
+  @include styles.outlineAsColor;
+}
+```

package/src/media/functional/styles/color/outlineColor/outlineColor.en.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/styles/color/outlineColor - Set outline color'/>
+
+# `outlineColor`
+
+The mixin sets the `outline-color` property using the design system's variables, allowing for dynamic updates and opacity control.
+
+**Parameters:**
+- `$color: Color | String` — color value, `'as-color'`, or `'init'`.
+- `$opacity: Number | null` [null] — optional opacity level [0..1].
+- `$important: Boolean` [false] — if `true`, adds `!important`.
+
+## Example
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-primary {
+  @include styles.outlineColor(styles.getColor('primary'), 0.8);
+}
+
+.outline-reset {
+  @include styles.outlineColor('init');
+}
+```

package/src/media/functional/styles/color/outlineColor/outlineColor.ru.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/styles/color/outlineColor - Цвет контура'/>
+
+# `outlineColor`
+
+Миксин устанавливает свойство `outline-color`, используя переменные дизайн-системы, что позволяет обеспечить динамическое обновление и контроль прозрачности.
+
+**Параметры:**
+- `$color: Color | String` — значение цвета, `'as-color'` или `'init'`.
+- `$opacity: Number | null` [null] — необязательный уровень прозрачности [0..1].
+- `$important: Boolean` [false] — если `true`, добавляет `!important`.
+
+## Пример
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-primary {
+  @include styles.outlineColor(styles.getColor('primary'), 0.8);
+}
+
+.outline-reset {
+  @include styles.outlineColor('init');
+}
+```

package/src/media/functional/styles/color/outlineColor/outlineColor.vi.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/styles/color/outlineColor - Màu đường viền'/>
+
+# `outlineColor`
+
+Mixin thiết lập thuộc tính `outline-color` bằng cách sử dụng các biến của hệ thống thiết kế, cho phép cập nhật động và kiểm soát độ mờ.
+
+**Tham số:**
+- `$color: Color | String` — giá trị màu, `'as-color'`, hoặc `'init'`.
+- `$opacity: Number | null` [null] — mức độ mờ tùy chọn [0..1].
+- `$important: Boolean` [false] — nếu `true`, thêm `!important`.
+
+## Ví dụ
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-primary {
+  @include styles.outlineColor(styles.getColor('primary'), 0.8);
+}
+
+.outline-reset {
+  @include styles.outlineColor('init');
+}
+```

package/src/media/functional/styles/color/outlineInit/outlineInit.en.mdx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/styles/color/outlineInit - Apply outline color'/>
+
+# `outlineInit`
+
+The mixin applies the current computed system color to the `outline-color` property.
+
+**Parameters:**
+- `$important: Boolean` [false] — if `true`, adds `!important`.
+
+## Example
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-update {
+  @include styles.outlineInit;
+}
+
+.outline-force {
+  @include styles.outlineInit(true);
+}
+```

package/src/media/functional/styles/color/outlineInit/outlineInit.ru.mdx

@@ -0,0 +1,24 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/styles/color/outlineInit - Применить контур'/>
+
+# `outlineInit`
+
+Миксин применяет текущий вычисленный системный цвет к свойству `outline-color`.
+
+**Параметры:**
+- `$important: Boolean` [false] — если `true`, добавляет `!important`.
+
+## Пример
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-update {
+  @include styles.outlineInit;
+}
+
+.outline-force {
+  @include styles.outlineInit(true);
+}
+```

package/src/media/functional/styles/color/outlineOpacity/outlineOpacity.en.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/styles/color/outlineOpacity - Set outline opacity'/>
+
+# `outlineOpacity`
+
+The mixin sets the `--sys-outline-opacity` variable, allowing for independent control of outline transparency.
+
+**Parameters:**
+- `$opacity: Number | String` — transparency value [0..1] or CSS variable.
+- `$important: Boolean` [false] — if `true`, adds `!important`.
+- `$init: Boolean` [false] — if `true`, immediately applies the `outline-color` property.
+
+## Example
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-faded {
+  @include styles.outlineOpacity(0.5);
+}
+
+.outline-faded-important {
+  @include styles.outlineOpacity(var(--my-opacity), true, true);
+}
+```

package/src/media/functional/styles/color/outlineOpacity/outlineOpacity.ru.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/styles/color/outlineOpacity - Прозрачность контура'/>
+
+# `outlineOpacity`
+
+Миксин устанавливает переменную `--sys-outline-opacity`, обеспечивая независимый контроль прозрачности контура.
+
+**Параметры:**
+- `$opacity: Number | String` — значение прозрачности [0..1] или переменная CSS.
+- `$important: Boolean` [false] — если `true`, добавляет `!important`.
+- `$init: Boolean` [false] — если `true`, немедленно применяет свойство `outline-color`.
+
+## Пример
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-faded {
+  @include styles.outlineOpacity(0.5);
+}
+
+.outline-faded-important {
+  @include styles.outlineOpacity(var(--my-opacity), true, true);
+}
+```

package/src/media/functional/styles/color/outlineOpacity/outlineOpacity.vi.mdx

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/styles/color/outlineOpacity - Độ mờ đường viền'/>
+
+# `outlineOpacity`
+
+Mixin này thiết lập biến `--sys-outline-opacity`, cho phép kiểm soát tính trong suốt của đường viền ngoài (outline) một cách độc lập.
+
+**Tham số:**
+- `$opacity: Number | String` — giá trị trong suốt [0..1] hoặc biến CSS.
+- `$important: Boolean` [false] — nếu `true`, thêm `!important`.
+- `$init: Boolean` [false] — nếu `true`, sẽ áp dụng ngay thuộc tính `outline-color`.
+
+## Ví dụ
+
+```scss
+@use '@dxtmisha/styles';
+
+.outline-faded {
+  @include styles.outlineOpacity(0.5);
+}
+
+.outline-faded-important {
+  @include styles.outlineOpacity(var(--my-opacity), true, true);
+}
+```

package/src/media/functional/styles/color/palette/palette.en.mdx

@@ -0,0 +1,93 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/styles/color/# Using Palettes'/>
+
+# Using Palettes
+
+Palette mixins are the primary tool for working with semantic and system colors in DxtUI. They exist to **automatically support CSS variable routing**, allowing you to dynamically swap out themes and component color palettes on the fly without breaking the original design's contrast ratio.
+
+When building components with the design system, instead of using standard `backgroundColor()` functions, you use the specialized palette equivalent:
+
+```scss
+@use '@dxtmisha/styles';
+
+.my-button {
+  // Applying the system 'primary' color
+  @include styles.paletteBackgroundColor('--d1-sys-palette-primary');
+}
+```
+
+Using the `palette` mixin prefix ensures that the component's color will properly react to any active overrides in the color scheme, such as switching from a blue global structure class to a yellow one.
+
+## Available Palette Mixins
+
+Below is the list of key mixins that all operate on this identical principle. As their sole parameter, they accept a **string representing the name of the system CSS variable**.
+
+- `paletteColor()` — Sets the text color (`color`).
+- `paletteBackgroundColor()` — Sets the background fill (`background-color`).
+- `paletteBorderColor()` — Sets the border (`border-color`).
+- `paletteOutlineColor()` — Sets an external outline (`outline-color`).
+- `paletteFill()` — Sets vector SVG fill regions (`fill`).
+- `paletteStroke()` — Sets vector SVG line strokes (`stroke`).
+
+### Example using multiple mixins together:
+
+```scss
+.card-alert {
+  // Text will inherit the system error color
+  @include styles.paletteColor('--d1-sys-palette-error');
+  
+  // The background becomes the baseline surface color
+  @include styles.paletteBackgroundColor('--d1-sys-palette-surface');
+  
+  // The border will match the system outline configuration
+  @include styles.paletteBorderColor('--d1-sys-palette-outline');
+}
+```
+
+---
+
+## How it Works Under the Hood (Routing Architecture)
+
+To fully exploit the potential of `palette` mixins, it helps to understand how the SCSS compiler processes these strings during build-time. The architecture is explicitly designed so you never have to author additional boilerplate CSS for theme overrides.
+
+### Step 1: System Variables and Basic Shade Weights
+First, a configuration registry (`properties.scss`) dictates that a semantic name (like `primary`) mathematically correlates to a specific contrast "weight" for both light and dark modes.
+
+For example, the semantic `primary` color in the light theme always translates to a contrast tier of **`600`**. By default, this tier links to a pure Blue (`--d1-ref-palette-blue-600`).
+
+### Step 2: Mixin Compilation
+When you invoke `paletteBackgroundColor('--d1-sys-palette-primary')`, the SCSS preprocessor intercepts this string and checks it against the registry layer. 
+
+Rather than returning a flat blue color hex, the compiler yields a **smart cascading CSS variable pointer** that intrinsically locks your background to the `600` "basic" intensity:
+
+```css
+/* A simplified look at the generated CSS output: */
+background-color: var(--d1-palette-basic600, var(--d1-sys-palette-primary));
+```
+
+### Step 3: Changing the Palette via HTML (DOM)
+Let's imagine you wrap this component inside an HTML container designated with a completely different palette class:
+
+```html
+<div class="d1-palette--yellow">
+  <button class="my-button">Click Me</button>
+</div>
+```
+
+The `.d1-palette--yellow` class locally intercepts the generic baseline variable `--d1-palette-basic600`. Suddenly, `basic600` is repointed structurally to output a tier-600 Yellow (`--d1-ref-palette-yellow-600`).
+
+Because your button was already anchored to `basic600` dynamically via the `paletteBackgroundColor` mixin, the element's actual surface color swaps immediately to Yellow.
+
+**The Major Benefit:** 
+The actual weight intensity strictly remains at `600`. This signifies that the mathematical contrast ratio remaining between white button text and its background stays perfect and entirely legible. The developer writes absolutely zero CSS exception rules (like `.d1-palette--yellow .my-button { ... }`) to manually "re-theme" components—everything behaves entirely autonomously based on native routing.
+
+## Difference Between Base Mixins and Palettes
+
+It is important to understand the fundamental difference in their logic:
+
+- **Base Mixins (`backgroundColor`, `color`, etc.)**
+  These accept a **specific value** (HEX, RGB, or the result of a `getColor` function). These mixins set the color "as is". While they support system opacity, the color itself remains static. If you pass a blue color via `getColor('primary')`, it will stay blue even if you add a yellow palette class to the parent.
+
+- **Palette Mixins (`paletteBackgroundColor`, `paletteColor`, etc.)**
+  These accept a **string key** (the name of a system variable, e.g., `'--d1-sys-palette-primary'`). These mixins do not set the color directly; instead, they create a **dynamic route** to palette variables (the `basic` level). This is precisely what allows the component to instantly "re-color" itself when the palette class is changed in the DOM, while maintaining the required contrast level.

package/src/media/functional/styles/color/palette/palette.ru.mdx

@@ -0,0 +1,93 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/styles/color/# Использование палитр'/>
+
+# Использование палитр
+
+Миксины палитр — это основной инструмент для работы с семантическими и системными цветами в DxtUI. Их главное назначение заключается в том, чтобы **автоматически поддерживать маршрутизацию CSS-переменных**, позволяя динамически менять темы и цветовые палитры компонентов "на лету", не нарушая изначальную контрастность дизайна.
+
+Вместо базового свойства `backgroundColor()`, при работе с дизайн-системой вы используете специальный миксин:
+
+```scss
+@use '@dxtmisha/styles';
+
+.my-button {
+  // Применяем системный цвет 'primary'
+  @include styles.paletteBackgroundColor('--d1-sys-palette-primary');
+}
+```
+
+Тандом использования префикса `palette` гарантирует, что цвет компонента будет правильно реагировать на все изменения цветовой схемы, например, при переключении глобального класса палитры с синей на желтую.
+
+## Доступные миксины палитр
+
+Ниже представлены ключевые миксины, работающие по идентичному принципу. В качестве единственного аргумента они принимают **строковое название системной CSS-переменной**.
+
+- `paletteColor()` — Устанавливает цвет текста (`color`).
+- `paletteBackgroundColor()` — Устанавливает цвет фона (`background-color`).
+- `paletteBorderColor()` — Устанавливает цвет рамки (`border-color`).
+- `paletteOutlineColor()` — Устанавливает цвет внешнего контура (`outline-color`).
+- `paletteFill()` — Заливает векторные SVG-элементы (`fill`).
+- `paletteStroke()` — Устанавливает цвет обводки SVG-элементов (`stroke`).
+
+### Пример использования нескольких миксинов:
+
+```scss
+.card-alert {
+  // Текст принимает системный цвет ошибки (красный)
+  @include styles.paletteColor('--d1-sys-palette-error');
+  
+  // Фон принимает цвет поверхности
+  @include styles.paletteBackgroundColor('--d1-sys-palette-surface');
+  
+  // Рамка принимает цвет рамки
+  @include styles.paletteBorderColor('--d1-sys-palette-outline');
+}
+```
+
+---
+
+## Как это работает? (Архитектура маршрутизации)
+
+Чтобы понять всю мощь миксинов `palette`, нужно взглянуть на то, как обрабатываются SCSS-строки во время сборки кода. Архитектура построена так, чтобы вам больше никогда не приходилось писать дополнительный CSS для переопределения цветов.
+
+### Шаг 1: Системные переменные и базовые веса
+Для начала, в файле конфигурации(`properties.scss`) задан реестр, который сопоставляет семантическое имя (например, `primary`) с конкретным "базовым весом" контрастности для светлой и темной тем.
+
+Например, системный цвет `primary` в светлой теме всегда соответствует уровню плотности **`600`**. По умолчанию этот уровень привязан к синему цвету (`--d1-ref-palette-blue-600`).
+
+### Шаг 2: Компиляция миксина
+Когда вы вызываете миксин `paletteBackgroundColor('--d1-sys-palette-primary')`, препроцессор SCSS пропускает вашу строку через этот реестр. 
+
+Вместо того чтобы просто вернуть синий цвет, он генерирует **умную каскадную CSS-переменную**, которая жестко привязывает цвет фона к "базовому" уровню `600`:
+
+```css
+/* Упрощенный пример сгенерированного CSS: */
+background-color: var(--d1-palette-basic600, var(--d1-sys-palette-primary));
+```
+
+### Шаг 3: Смена палитры через HTML (DOM)
+Представим, что мы оборачиваем наш компонент в HTML-контейнер и добавляем класс другой палитры:
+
+```html
+<div class="d1-palette--yellow">
+  <button class="my-button">Нажми меня</button>
+</div>
+```
+
+Класс `.d1-palette--yellow` переопределяет переменную `--d1-palette-basic600` на локальном уровне: теперь она ссылается на желтый цвет плотности `600` (`--d1-ref-palette-yellow-600`).
+
+Так как наша кнопка через миксин `paletteBackgroundColor` сгенерировала и привязала себя напрямую к `basic600`, её фон моментально перекрасится в желтый.
+
+**Главное преимущество:** 
+Плотность цвета осталась ровно `600`. Это означает, что контрастность между белым текстом кнопки и её желтым фоном останется математически идеальной и выверенной. Разработчику не нужно писать ни строчки CSS (`.d1-palette--yellow .my-button { ... }`), чтобы перекрасить компонент вручную — всё происходит автоматически с помощью маршрутизации SCSS-переменных.
+
+## Различие между базовыми миксинами и палитрами
+
+Важно понимать принципиальную разницу в их логике:
+
+- **Базовые миксины (`backgroundColor`, `color` и др.)**
+  Они принимают **конкретное значение** (HEX, RGB или результат функции `getColor`). Эти миксины устанавливают цвет "как есть". Да, они поддерживают системную прозрачность, но сам цвет остается статичным. Если вы передали синий цвет через `getColor('primary')`, он останется синим, даже если вы добавите класс желтой палитры на родителя.
+
+- **Миксины палитр (`paletteBackgroundColor`, `paletteColor` и др.)**
+  Они принимают **строку-ключ** (название системной переменной, например `'--d1-sys-palette-primary'`). Эти миксины не устанавливают цвет напрямую, а создают **динамический маршрут** к переменным палитры (уровень `basic`). Именно это позволяет компоненту мгновенно "перекрашиваться" при смене класса палитры в DOM, сохраняя при этом нужный уровень контрастности.

package/src/media/functional/styles/color/palette/palette.vi.mdx

@@ -0,0 +1,93 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/styles/color/# Sử dụng Palette'/>
+
+# Sử dụng Bảng màu (Palette)
+
+Các mixin Palette là vũ khí trọng tâm để làm việc với các hệ màu sắc ngữ nghĩa và màu hệ thống trong DxtUI. Mục tiêu tối thượng của chúng là **tự động hóa khả năng định tuyến chuỗi Biến CSS (CSS variable routing)**. Vai trò cung cấp khả năng hoán đổi theme giao diện màu sắc của component ngay tức thì mà không hề làm phá vỡ đi tỷ lệ tương phản sắc độ ban đầu.
+
+Khi xây dựng component thuộc hệ thống thiết kế này, thay vì gọi hàm CSS thụ động `backgroundColor()` thông thường, bạn mang vào trong SCSS Mixin dòng định dạng gốc thuộc họ Palette:
+
+```scss
+@use '@dxtmisha/styles';
+
+.my-button {
+  // Áp dụng gán màu 'primary' của hệ thống
+  @include styles.paletteBackgroundColor('--d1-sys-palette-primary');
+}
+```
+
+Sức mạnh của tiền tố mixin hệ `palette` là để cấp chứng chỉ bảo hiểm cho việc Component này sẽ biết tự động điều hướng màu sắc theo mọi can thiệp ngoại vi - điển hình như khi bạn gán class đổi bảng màu tổng từ cấu trúc Xanh Blue sang Vàng Yellow trên một div ở ngoài.
+
+## Các Mixin Palette Thường trực
+
+Bên dưới là danh mục các hàm Mixin trung tâm có chung cấu trúc nguyên lý vận hành giống hệt nhau. Lệnh sẽ thu nạp tham số duy nhất là **một chuỗi ký tự diễn tả đích danh Biến Hệ thống CSS**.
+
+- `paletteColor()` — Kéo mã màu vào Text dòng chữ (`color`).
+- `paletteBackgroundColor()` — Trát màu vào khối phông Nền (`background-color`).
+- `paletteBorderColor()` — Trát màu vào Đường viền khung (`border-color`).
+- `paletteOutlineColor()` — Trát màu viền khung highlight báo nét (`outline-color`).
+- `paletteFill()` — Đổ màu kín vector lõi SVG (`fill`).
+- `paletteStroke()` — Viền chỉ dệt đường theo vector SVG dẻo (`stroke`).
+
+### Ví dụ Mixin gọi hội đồng:
+
+```scss
+.card-alert {
+  // Nét chữ hấp thụ gam màu 'cảnh báo Lỗi' từ hệ thống
+  @include styles.paletteColor('--d1-sys-palette-error');
+  
+  // Khối nền tảng lót đáy thụ hưởng màu mặt phẳng (Surface)
+  @include styles.paletteBackgroundColor('--d1-sys-palette-surface');
+  
+  // Viền biên tự nhận màu khung chìm tự nhiên
+  @include styles.paletteBorderColor('--d1-sys-palette-outline');
+}
+```
+
+---
+
+## Luồng Giao thông Chạy Ngầm Bằng Cách Nào? (Cơ Chế Rooting)
+
+Để thông được não khi áp dụng mixin `palette` trong ứng dụng của mình, bạn bắt buộc cần theo dõi cách SCSS compiler đọc mảng chữ chuỗi (string) như một cỗ máy thông minh ở phần biên dịch Code ra sao. Kiến trúc được gọt giũa tỉ mỉ có nghĩa bạn tuyệt đối không phải hì hục cắm đầu gõ thêm cả thúng code CSS để Override bắt giao diện chuyển bóng.
+
+### Bước 1: Khai báo Biến Hệ thống và Trị số Trọng lực Sáng/Tối (Shade Weights)
+Tiền đề, cuốn sổ config (`properties.scss`) tuyên bố các Cụm từ ngữ nghĩa (như `primary`) ứng với một Trị số Đo lường độ Tương phản chuẩn xác giữa màn sáng/tối.
+
+Ví dụ, ngữ nghĩa mã `primary` của ánh sáng trắng mặc định bám rễ vĩnh viễn ở cấp cường độ **`600`**. Do chưa đổi màu mới, cấp cường độ này đương nhiên đổ bóng sang màu Xanh Lam Basic (`--d1-ref-palette-blue-600`).
+
+### Bước 2: Build Hàm Trình Biên Dịch 
+Đúng khoảnh khắc bạn nhập lệnh gõ `paletteBackgroundColor('--d1-sys-palette-primary')`, trạm gác SCSS preprocessor chẹn đứng chuỗi String này để móc ra chiếu với Danh bạ nội quy.
+
+Thay vì trả ra luôn luôn mã HEX màu Xanh Lam trơ trụi. Nó vặn vẹo dòng biến xuất ra **một cụm mã chuỗi CSS biến Fallback tầng tầng lớp lớp**. Lòng cốt để Móc lốp nối cứng cường độ background của mảng đó luôn phải chĩa chính diện về chốt cường tráng `600`:
+
+```css
+/* Tóm gọn lại cho bạn dễ hình dung đoạn code cuối cùng sau compiler: */
+background-color: var(--d1-palette-basic600, var(--d1-sys-palette-primary));
+```
+
+### Bước 3: Đánh Chặn Bẻ Lái ngay trong HTML (DOM Override)
+Thử hình dung đoạn Button bọc trên được lọt gọn vào một mảng DOM Container to đùng treo nhãn báo bảng MÀU VÀNG:
+
+```html
+<div class="d1-palette--yellow">
+  <button class="my-button">Nhấn Vô</button>
+</div>
+```
+
+Chính cái bộ Thẻ Class `.d1-palette--yellow` sinh ra để vặn nọc cục biến cơ sở bơ vơ mang tên `--d1-palette-basic600`. Giờ phút này, `basic600` chệch bánh ray, chạy vào tông Vàng cấp độ `600` (`--d1-ref-palette-yellow-600`).
+
+Chỉ nhờ cái phím còi mà cục Component đã tự quấn thân với đầu trỏ lưới liên lạc `basic600` thông qua dòng Mixin gốc, nền Button lập tức bơi ngay trong sắc Vàng Hoàng Gia Yellow-600.
+
+**Đẳng Cấp Của Hệ Thống:** 
+Cường độ Màu (Shade) ghim chặt ở neo cấp `600`. Ngụ ý rằng bài toán mâu thuẫn Trắng-Vàng, Trắng-Xanh lam không hề bị méo hay chói mắt, khoảng trống độ Tương phải của màu đã được máy toán tự thân khắc chế cân xứng tuyệt phẩm tinh tế mọi góc độ. Coder thảnh thơi nhàn nhã tay mà không cần viết lệnh củ chuối đại loại như `.d1-palette--yellow .my-button { ... }` bẻ màu thủ công rườm rà - Vì đã có Auto Routing chèo lái con tàu DxtUI.
+
+## Sự khác biệt giữa Mixin cơ bản và Palette
+
+Điều quan trọng là phải hiểu sự khác biệt cơ bản trong logic của chúng:
+
+- **Mixin cơ bản (`backgroundColor`, `color`, v.v.)**
+  Chúng chấp nhận một **giá trị cụ thể** (HEX, RGB hoặc kết quả của hàm `getColor`). Các mixin này thiết lập màu "nguyên trạng". Mặc dù chúng hỗ trợ độ mờ hệ thống, bản thân màu sắc vẫn ở trạng thái tĩnh. Nếu bạn truyền màu xanh lam qua `getColor ('primary')`, nó sẽ vẫn là màu xanh lam ngay cả khi bạn thêm lớp bảng màu vàng vào thẻ cha.
+
+- **Mixin Palette (`paletteBackgroundColor`, `paletteColor`, v.v.)**
+  Chúng chấp nhận một **khóa chuỗi** (tên của biến hệ thống, ví dụ: `'--d1-sys-palette-primary'`). Các mixin này không thiết lập màu trực tiếp; thay vào đó, chúng tạo ra một **lộ trình động** tới các biến bảng màu (cấp độ `basic`). Đây chính xác là những gì cho phép thành phần ngay lập tức "tự đổi màu" khi lớp bảng màu được thay đổi trong DOM, trong khi vẫn duy trì mức độ tương phản cần thiết.

package/src/media/functional/styles/color/paletteBackground/paletteBackground.en.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/styles/color/paletteBackground - Palette background color'/>
+
+# `paletteBackground`
+
+The mixin sets the `background-color` by generating a search chain across the specified palette variables.
+
+**Parameters:**
+- `$palette: List | String` — list of palette variable names to search.
+- `$color: Color | String` — fallback color if no palette variables are defined.
+- `$opacity: Number | null` [null] — optional opacity level [0..1].
+- `$important: Boolean` [false] — if `true`, adds `!important`.
+
+## Example
+
+```scss
+@use '@dxtmisha/styles';
+
+.bg-themed {
+  @include styles.paletteBackground(('theme-surface', 'sys-surface'), #ffffff);
+}
+```

package/src/media/functional/styles/color/paletteBackground/paletteBackground.ru.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/styles/color/paletteBackground - Фон из палитры'/>
+
+# `paletteBackground`
+
+Миксин устанавливает `background-color`, генерируя цепочку поиска по указанным переменным палитры.
+
+**Параметры:**
+- `$palette: List | String` — список имен переменных палитры для поиска.
+- `$color: Color | String` — резервный цвет, если переменные палитры не определены.
+- `$opacity: Number | null` [null] — необязательный уровень прозрачности [0..1].
+- `$important: Boolean` [false] — если `true`, добавляет `!important`.
+
+## Пример
+
+```scss
+@use '@dxtmisha/styles';
+
+.bg-themed {
+  @include styles.paletteBackground(('theme-surface', 'sys-surface'), #ffffff);
+}
+```

package/src/media/functional/styles/color/paletteBackground/paletteBackground.vi.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/styles/color/paletteBackground - Nền bảng màu'/>
+
+# `paletteBackground`
+
+Mixin thiết lập `background-color` bằng cách tạo chuỗi tìm kiếm qua các biến bảng màu đã chỉ định.
+
+**Tham số:**
+- `$palette: List | String` — danh sách tên biến bảng màu để tìm kiếm.
+- `$color: Color | String` — màu dự phòng nếu không có biến bảng màu nào được xác định.
+- `$opacity: Number | null` [null] — mức độ mờ tùy chọn [0..1].
+- `$important: Boolean` [false] — nếu `true`, thêm `!important`.
+
+## Ví dụ
+
+```scss
+@use '@dxtmisha/styles';
+
+.bg-themed {
+  @include styles.paletteBackground(('theme-surface', 'sys-surface'), #ffffff);
+}
+```

package/src/media/functional/styles/color/paletteBorder/paletteBorder.en.mdx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/styles/color/paletteBorder - Palette border color'/>
+
+# `paletteBorder`
+
+The mixin sets the `border-color` by generating a search chain across the specified palette variables.
+
+**Parameters:**
+- `$palette: List | String` — list of palette variable names to search.
+- `$color: Color | String` — fallback color if no palette variables are defined.
+- `$opacity: Number | null` [null] — optional opacity level [0..1].
+- `$important: Boolean` [false] — if `true`, adds `!important`.
+
+## Example
+
+```scss
+@use '@dxtmisha/styles';
+
+.border-themed {
+  @include styles.paletteBorder(('theme-border', 'sys-border'), #cccccc);
+}
+```