@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/_patterns.scss

@@ -0,0 +1,657 @@
+// ============================================
+// DECORATIVE PATTERNS
+// local\common\theme-moexp\src\scss\abstracts\_patterns.scss
+// ============================================
+
+////
+/// Декоративные CSS-паттерны для фоновых эффектов
+/// @group patterns
+/// @author SUSPENDED
+/// @since 1.0.0
+////
+
+@use "sass:math";
+@use "colors";
+
+// ─────────────────────────────────────────
+// БАЗОВЫЙ OVERLAY
+// ─────────────────────────────────────────
+
+/// Базовый абсолютный overlay для всех паттернов
+///
+/// Создаёт абсолютно позиционированный слой, который растягивается
+/// на весь родительский контейнер. Используется как основа для
+/// всех декоративных паттернов.
+///
+/// @param {Number} $opacity [0.05] - Прозрачность слоя (0-1)
+/// @param {Number} $z-index [0] - Порядок наложения слоя
+///
+/// @output Свойства позиционирования и прозрачности
+///
+/// @example scss - Базовое использование
+///   .overlay {
+///     @include pattern-overlay(0.1, 1);
+///   }
+///
+/// @example css - Результат компиляции
+///   .overlay {
+///     position: absolute;
+///     inset: 0;
+///     opacity: 0.1;
+///     z-index: 1;
+///     pointer-events: none;
+///   }
+///
+/// @access public
+@mixin pattern-overlay($opacity: 0.05, $z-index: 0) {
+  position: absolute;
+  inset: 0;
+  opacity: $opacity;
+  z-index: $z-index;
+  pointer-events: none;
+}
+
+// ─────────────────────────────────────────
+// DIAGONAL STRIPES (диагональные полосы)
+// ─────────────────────────────────────────
+
+/// Диагональные полосы с произвольным цветом
+///
+/// Создаёт паттерн из диагональных полос с помощью
+/// `repeating-linear-gradient`. Полосы занимают 50% от размера цикла.
+///
+/// @param {Number} $size [70px] - Ширина полного цикла (полоса + пробел)
+/// @param {Angle} $angle [45deg] - Угол наклона полос
+/// @param {Color} $color [currentcolor] - Цвет полос
+/// @param {Number} $opacity [0.05] - Прозрачность паттерна (0-1)
+///
+/// @output Абсолютно позиционированный элемент с полосатым фоном
+///
+/// @require {mixin} pattern-overlay
+/// @require {function} math.div - Sass math модуль
+///
+/// @example scss - Стандартные полосы
+///   .hero::before {
+///     content: "";
+///     @include pattern-stripes-diagonal();
+///   }
+///
+/// @example scss - Красные широкие полосы под углом
+///   .banner::before {
+///     content: "";
+///     @include pattern-stripes-diagonal(100px, 60deg, #ff0000, 0.1);
+///   }
+///
+/// @see pattern-stripes-diagonal-hsl
+/// @see pattern-stripes
+/// @access public
+@mixin pattern-stripes-diagonal($size: 70px, $angle: 45deg, $color: currentcolor, $opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  $half: math.div($size, 2);
+
+  background-image: repeating-linear-gradient($angle, transparent, transparent $half, $color $half, $color $size);
+}
+
+/// Диагональные полосы с HSL цветом из темы
+///
+/// Версия `pattern-stripes-diagonal` с поддержкой CSS Custom Properties.
+/// Использует функции из модуля `colors` для получения цветов из палитры.
+/// Генерирует fallback для старых браузеров.
+///
+/// @param {String} $color-name [foreground] - Имя цвета из палитры темы
+/// @param {Number} $size [70px] - Ширина полного цикла
+/// @param {Angle} $angle [45deg] - Угол наклона полос
+/// @param {Number} $opacity [0.05] - Прозрачность паттерна (0-1)
+///
+/// @output Элемент с полосатым фоном и CSS-переменными
+///
+/// @require {mixin} pattern-overlay
+/// @require {function} colors.color-static - Статический цвет (fallback)
+/// @require {function} colors.color-var - CSS-переменная цвета
+/// @require {function} math.div
+///
+/// @example scss - Полосы основного цвета
+///   .card::before {
+///     content: "";
+///     @include pattern-stripes-diagonal-hsl(primary);
+///   }
+///
+/// @example scss - Полосы акцентного цвета
+///   .feature::before {
+///     content: "";
+///     @include pattern-stripes-diagonal-hsl(accent, 50px, 30deg, 0.08);
+///   }
+///
+/// @see pattern-stripes-diagonal
+/// @see pattern-stripes-themed
+/// @access public
+@mixin pattern-stripes-diagonal-hsl($color-name: foreground, $size: 70px, $angle: 45deg, $opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  $half: math.div($size, 2);
+
+  // Fallback для старых браузеров
+  background-image: repeating-linear-gradient($angle, transparent, transparent $half, colors.color-static($color-name) $half, colors.color-static($color-name) $size);
+
+  // Modern браузеры с CSS Custom Properties
+  background-image: repeating-linear-gradient($angle, transparent, transparent $half, colors.color-var($color-name) $half, colors.color-var($color-name) $size);
+}
+
+// ─────────────────────────────────────────
+// ГОТОВЫЕ ВАРИАНТЫ
+// ─────────────────────────────────────────
+
+/// Стандартные диагональные полосы
+///
+/// Готовый пресет: 70px цикл, 45° угол, currentcolor, 5% прозрачность.
+/// Идеально подходит для hero-секций и карточек.
+///
+/// @output Полосатый паттерн со стандартными настройками
+///
+/// @require {mixin} pattern-stripes-diagonal
+///
+/// @example scss - Быстрое применение
+///   .hero::before {
+///     content: "";
+///     @include pattern-stripes;
+///   }
+///
+/// @see pattern-stripes-themed
+/// @see pattern-stripes-thin
+/// @see pattern-stripes-wide
+/// @access public
+@mixin pattern-stripes {
+  @include pattern-stripes-diagonal(70px, 45deg, currentcolor, 0.05);
+}
+
+/// Стандартные полосы с цветом из темы
+///
+/// Готовый пресет с поддержкой CSS Custom Properties.
+///
+/// @param {String} $color [foreground] - Имя цвета из палитры
+///
+/// @output Полосатый паттерн с темизируемым цветом
+///
+/// @require {mixin} pattern-stripes-diagonal-hsl
+///
+/// @example scss - С основным цветом
+///   .card::before {
+///     content: "";
+///     @include pattern-stripes-themed(primary);
+///   }
+///
+/// @see pattern-stripes
+/// @access public
+@mixin pattern-stripes-themed($color: foreground) {
+  @include pattern-stripes-diagonal-hsl($color, 70px, 45deg, 0.05);
+}
+
+/// Тонкие диагональные полосы
+///
+/// Пресет с узкими полосами (20px цикл). Подходит для subtle-эффектов.
+///
+/// @param {Color} $color [currentcolor] - Цвет полос
+/// @param {Number} $opacity [0.05] - Прозрачность (0-1)
+///
+/// @output Паттерн с тонкими полосами
+///
+/// @require {mixin} pattern-stripes-diagonal
+///
+/// @example scss - Тонкие полосы на карточке
+///   .subtle-card::before {
+///     content: "";
+///     @include pattern-stripes-thin(#333, 0.03);
+///   }
+///
+/// @see pattern-stripes
+/// @see pattern-stripes-wide
+/// @access public
+@mixin pattern-stripes-thin($color: currentcolor, $opacity: 0.05) {
+  @include pattern-stripes-diagonal(20px, 45deg, $color, $opacity);
+}
+
+/// Широкие диагональные полосы
+///
+/// Пресет с широкими полосами (120px цикл). Для крупных секций.
+///
+/// @param {Color} $color [currentcolor] - Цвет полос
+/// @param {Number} $opacity [0.05] - Прозрачность (0-1)
+///
+/// @output Паттерн с широкими полосами
+///
+/// @require {mixin} pattern-stripes-diagonal
+///
+/// @example scss - Широкие полосы на hero
+///   .hero-large::before {
+///     content: "";
+///     @include pattern-stripes-wide(white, 0.08);
+///   }
+///
+/// @see pattern-stripes
+/// @see pattern-stripes-thin
+/// @access public
+@mixin pattern-stripes-wide($color: currentcolor, $opacity: 0.05) {
+  @include pattern-stripes-diagonal(120px, 45deg, $color, $opacity);
+}
+
+/// Горизонтальные полосы
+///
+/// Паттерн с горизонтальными полосами (угол 0°).
+///
+/// @param {Number} $size [40px] - Ширина полного цикла
+/// @param {Color} $color [currentcolor] - Цвет полос
+/// @param {Number} $opacity [0.05] - Прозрачность (0-1)
+///
+/// @output Паттерн с горизонтальными полосами
+///
+/// @require {mixin} pattern-overlay
+/// @require {function} math.div
+///
+/// @example scss - Горизонтальные линии
+///   .lined-bg::before {
+///     content: "";
+///     @include pattern-stripes-horizontal(30px, #000, 0.1);
+///   }
+///
+/// @see pattern-stripes-vertical
+/// @access public
+@mixin pattern-stripes-horizontal($size: 40px, $color: currentcolor, $opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  $half: math.div($size, 2);
+
+  background-image: repeating-linear-gradient(0deg, transparent, transparent $half, $color $half, $color $size);
+}
+
+/// Вертикальные полосы
+///
+/// Паттерн с вертикальными полосами (угол 90°).
+///
+/// @param {Number} $size [40px] - Ширина полного цикла
+/// @param {Color} $color [currentcolor] - Цвет полос
+/// @param {Number} $opacity [0.05] - Прозрачность (0-1)
+///
+/// @output Паттерн с вертикальными полосами
+///
+/// @require {mixin} pattern-overlay
+/// @require {function} math.div
+///
+/// @example scss - Вертикальные линии
+///   .column-bg::before {
+///     content: "";
+///     @include pattern-stripes-vertical(50px);
+///   }
+///
+/// @see pattern-stripes-horizontal
+/// @access public
+@mixin pattern-stripes-vertical($size: 40px, $color: currentcolor, $opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  $half: math.div($size, 2);
+
+  background-image: repeating-linear-gradient(90deg, transparent, transparent $half, $color $half, $color $size);
+}
+
+// ─────────────────────────────────────────
+// DOTS (точки)
+// ─────────────────────────────────────────
+
+/// Точечный паттерн
+///
+/// Создаёт регулярную сетку точек с помощью `radial-gradient`.
+///
+/// @param {Number} $size [20px] - Расстояние между центрами точек
+/// @param {Number} $dot-size [2px] - Радиус точки
+/// @param {Color} $color [currentcolor] - Цвет точек
+/// @param {Number} $opacity [0.1] - Прозрачность паттерна (0-1)
+///
+/// @output Точечный фоновый паттерн
+///
+/// @require {mixin} pattern-overlay
+///
+/// @example scss - Стандартные точки
+///   .dotted::before {
+///     content: "";
+///     @include pattern-dots();
+///   }
+///
+/// @example scss - Крупные редкие точки
+///   .sparse-dots::before {
+///     content: "";
+///     @include pattern-dots(40px, 4px, #333, 0.15);
+///   }
+///
+/// @see pattern-dots-hsl
+/// @see pattern-dots-pseudo
+/// @access public
+@mixin pattern-dots($size: 20px, $dot-size: 2px, $color: currentcolor, $opacity: 0.1) {
+  @include pattern-overlay($opacity);
+
+  background-image: radial-gradient(circle, $color $dot-size, transparent $dot-size);
+  background-size: $size $size;
+}
+
+/// Точечный паттерн с HSL цветом из темы
+///
+/// Версия `pattern-dots` с поддержкой CSS Custom Properties.
+///
+/// @param {String} $color-name [foreground] - Имя цвета из палитры
+/// @param {Number} $size [20px] - Расстояние между центрами точек
+/// @param {Number} $dot-size [2px] - Радиус точки
+/// @param {Number} $opacity [0.1] - Прозрачность паттерна (0-1)
+///
+/// @output Точечный паттерн с CSS-переменными
+///
+/// @require {mixin} pattern-overlay
+/// @require {function} colors.color-static
+/// @require {function} colors.color-var
+///
+/// @example scss - Точки акцентного цвета
+///   .accent-dots::before {
+///     content: "";
+///     @include pattern-dots-hsl(accent, 15px, 3px, 0.2);
+///   }
+///
+/// @see pattern-dots
+/// @access public
+@mixin pattern-dots-hsl($color-name: foreground, $size: 20px, $dot-size: 2px, $opacity: 0.1) {
+  @include pattern-overlay($opacity);
+
+  // Fallback
+  background-image: radial-gradient(circle, colors.color-static($color-name) $dot-size, transparent $dot-size);
+  // Modern
+  background-image: radial-gradient(circle, colors.color-var($color-name) $dot-size, transparent $dot-size);
+  background-size: $size $size;
+}
+
+// ─────────────────────────────────────────
+// GRID (сетка)
+// ─────────────────────────────────────────
+
+/// Сетка (клетчатый паттерн)
+///
+/// Создаёт сетку из пересекающихся линий.
+///
+/// @param {Number} $size [40px] - Размер ячейки сетки
+/// @param {Number} $line-width [1px] - Толщина линий
+/// @param {Color} $color [currentcolor] - Цвет линий
+/// @param {Number} $opacity [0.05] - Прозрачность паттерна (0-1)
+///
+/// @output Сетчатый фоновый паттерн
+///
+/// @require {mixin} pattern-overlay
+///
+/// @example scss - Стандартная сетка
+///   .grid-bg::before {
+///     content: "";
+///     @include pattern-grid();
+///   }
+///
+/// @example scss - Крупная сетка с толстыми линиями
+///   .blueprint::before {
+///     content: "";
+///     @include pattern-grid(80px, 2px, #0066cc, 0.2);
+///   }
+///
+/// @see pattern-grid-hsl
+/// @see pattern-grid-pseudo
+/// @access public
+@mixin pattern-grid($size: 40px, $line-width: 1px, $color: currentcolor, $opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  background-image: linear-gradient($color $line-width, transparent $line-width), linear-gradient(90deg, $color $line-width, transparent $line-width);
+  background-size: $size $size;
+}
+
+/// Сетка с HSL цветом из темы
+///
+/// Версия `pattern-grid` с поддержкой CSS Custom Properties.
+///
+/// @param {String} $color-name [foreground] - Имя цвета из палитры
+/// @param {Number} $size [40px] - Размер ячейки
+/// @param {Number} $line-width [1px] - Толщина линий
+/// @param {Number} $opacity [0.05] - Прозрачность (0-1)
+///
+/// @output Сетчатый паттерн с CSS-переменными
+///
+/// @require {mixin} pattern-overlay
+/// @require {function} colors.color-static
+/// @require {function} colors.color-var
+///
+/// @example scss - Сетка основного цвета
+///   .themed-grid::before {
+///     content: "";
+///     @include pattern-grid-hsl(primary, 60px);
+///   }
+///
+/// @see pattern-grid
+/// @access public
+@mixin pattern-grid-hsl($color-name: foreground, $size: 40px, $line-width: 1px, $opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  // Fallback
+  background-image: linear-gradient(colors.color-static($color-name) $line-width, transparent $line-width),
+    linear-gradient(90deg, colors.color-static($color-name) $line-width, transparent $line-width);
+  // Modern
+  background-image: linear-gradient(colors.color-var($color-name) $line-width, transparent $line-width), linear-gradient(90deg, colors.color-var($color-name) $line-width, transparent $line-width);
+  background-size: $size $size;
+}
+
+// ─────────────────────────────────────────
+// CHECKERBOARD (шахматка)
+// ─────────────────────────────────────────
+
+/// Шахматный паттерн
+///
+/// Создаёт классический шахматный узор из чередующихся квадратов.
+/// Реализован через комбинацию четырёх градиентов под углом 45°.
+///
+/// @param {Number} $size [40px] - Размер одного квадрата
+/// @param {Color} $color [currentcolor] - Цвет заполненных квадратов
+/// @param {Number} $opacity [0.05] - Прозрачность паттерна (0-1)
+///
+/// @output Шахматный фоновый паттерн
+///
+/// @require {mixin} pattern-overlay
+/// @require {function} math.div
+///
+/// @example scss - Стандартная шахматка
+///   .chess::before {
+///     content: "";
+///     @include pattern-checkerboard();
+///   }
+///
+/// @example scss - Крупная цветная шахматка
+///   .retro::before {
+///     content: "";
+///     @include pattern-checkerboard(60px, #ff6600, 0.15);
+///   }
+///
+/// @access public
+@mixin pattern-checkerboard($size: 40px, $color: currentcolor, $opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  $half: math.div($size, 2);
+
+  background-image: linear-gradient(45deg, $color 25%, transparent 25%), linear-gradient(-45deg, $color 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $color 75%),
+    linear-gradient(-45deg, transparent 75%, $color 75%);
+  background-size: $size $size;
+  background-position: 0 0, 0 $half, $half (-$half), (-$half) 0;
+}
+
+// ─────────────────────────────────────────
+// NOISE (шум) — через SVG
+// ─────────────────────────────────────────
+
+/// Шум/зернистость через SVG
+///
+/// Добавляет текстуру шума с помощью inline SVG с `feTurbulence`.
+/// Отлично подходит для придания "живости" однотонным фонам.
+///
+/// @param {Number} $opacity [0.05] - Прозрачность шума (0-1)
+///
+/// @output SVG-шум в качестве фона
+///
+/// @require {mixin} pattern-overlay
+///
+/// @example scss - Добавление шума к секции
+///   .textured::before {
+///     content: "";
+///     @include pattern-noise(0.08);
+///   }
+///
+/// @example scss - Легкий шум для карточки
+///   .card::after {
+///     content: "";
+///     @include pattern-noise(0.03);
+///   }
+///
+/// @access public
+@mixin pattern-noise($opacity: 0.05) {
+  @include pattern-overlay($opacity);
+
+  // Base64 encoded SVG noise
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+}
+
+// ─────────────────────────────────────────
+// CONTAINER MIXIN (для родителя)
+// ─────────────────────────────────────────
+
+/// Подготовка контейнера для паттерна
+///
+/// Добавляет необходимые стили к родительскому элементу,
+/// чтобы паттерн корректно позиционировался внутри.
+///
+/// @output Стили позиционирования контейнера
+///
+/// @example scss - Подготовка секции для паттерна
+///   .hero {
+///     @include pattern-container;
+///     background: var(--color-primary);
+///
+///     &::before {
+///       content: "";
+///       @include pattern-stripes;
+///     }
+///   }
+///
+/// @example html - HTML структура
+///   <section class="hero">
+///     <div class="hero__content">...</div>
+///   </section>
+///
+/// @access public
+@mixin pattern-container {
+  position: relative;
+  overflow: hidden;
+}
+
+// ─────────────────────────────────────────
+// КОМБИНИРОВАННЫЕ (с псевдоэлементом)
+// ─────────────────────────────────────────
+
+/// Полосы через псевдоэлемент
+///
+/// Автономный миксин, который добавляет паттерн полос через
+/// псевдоэлемент. Не требует отдельного HTML-элемента.
+/// Автоматически настраивает родителя.
+///
+/// @param {String} $pseudo [before] - Псевдоэлемент: `before` или `after`
+/// @param {Number} $size [70px] - Ширина цикла полос
+/// @param {Color} $color [currentcolor] - Цвет полос
+/// @param {Number} $opacity [0.05] - Прозрачность (0-1)
+///
+/// @output Стили родителя и псевдоэлемента с полосами
+///
+/// @require {mixin} pattern-stripes-diagonal
+///
+/// @example scss - Полосы через ::before
+///   .hero {
+///     @include pattern-stripes-pseudo;
+///     background: navy;
+///   }
+///
+/// @example scss - Полосы через ::after
+///   .card {
+///     @include pattern-stripes-pseudo(after, 50px, white, 0.1);
+///   }
+///
+/// @see pattern-dots-pseudo
+/// @see pattern-grid-pseudo
+/// @access public
+@mixin pattern-stripes-pseudo($pseudo: before, $size: 70px, $color: currentcolor, $opacity: 0.05) {
+  position: relative;
+  overflow: hidden;
+
+  &::#{$pseudo} {
+    content: "";
+    @include pattern-stripes-diagonal($size, 45deg, $color, $opacity);
+  }
+}
+
+/// Точки через псевдоэлемент
+///
+/// Автономный миксин для точечного паттерна через псевдоэлемент.
+///
+/// @param {String} $pseudo [before] - Псевдоэлемент: `before` или `after`
+/// @param {Number} $size [20px] - Расстояние между точками
+/// @param {Number} $dot-size [2px] - Радиус точки
+/// @param {Color} $color [currentcolor] - Цвет точек
+/// @param {Number} $opacity [0.1] - Прозрачность (0-1)
+///
+/// @output Стили родителя и псевдоэлемента с точками
+///
+/// @require {mixin} pattern-dots
+///
+/// @example scss - Точки на карточке
+///   .feature-card {
+///     @include pattern-dots-pseudo(before, 15px, 3px, #000, 0.08);
+///   }
+///
+/// @see pattern-stripes-pseudo
+/// @see pattern-grid-pseudo
+/// @access public
+@mixin pattern-dots-pseudo($pseudo: before, $size: 20px, $dot-size: 2px, $color: currentcolor, $opacity: 0.1) {
+  position: relative;
+  overflow: hidden;
+
+  &::#{$pseudo} {
+    content: "";
+    @include pattern-dots($size, $dot-size, $color, $opacity);
+  }
+}
+
+/// Сетка через псевдоэлемент
+///
+/// Автономный миксин для сетчатого паттерна через псевдоэлемент.
+///
+/// @param {String} $pseudo [before] - Псевдоэлемент: `before` или `after`
+/// @param {Number} $size [40px] - Размер ячейки сетки
+/// @param {Number} $line-width [1px] - Толщина линий
+/// @param {Color} $color [currentcolor] - Цвет линий
+/// @param {Number} $opacity [0.05] - Прозрачность (0-1)
+///
+/// @output Стили родителя и псевдоэлемента с сеткой
+///
+/// @require {mixin} pattern-grid
+///
+/// @example scss - Сетка-чертёж
+///   .blueprint-section {
+///     @include pattern-grid-pseudo(after, 50px, 1px, #0088ff, 0.15);
+///     background: #001133;
+///   }
+///
+/// @see pattern-stripes-pseudo
+/// @see pattern-dots-pseudo
+/// @access public
+@mixin pattern-grid-pseudo($pseudo: before, $size: 40px, $line-width: 1px, $color: currentcolor, $opacity: 0.05) {
+  position: relative;
+  overflow: hidden;
+
+  &::#{$pseudo} {
+    content: "";
+    @include pattern-grid($size, $line-width, $color, $opacity);
+  }
+}