@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/hero/_base.scss

@@ -0,0 +1,182 @@
+// ============================================
+// HERO — BASE
+// local/common/theme-moexp/src/scss/abstracts/hero/_base.scss
+// ============================================
+
+////
+/// Базовые миксины Hero-секции
+/// @group hero
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../spacing";
+@use "../breakpoints";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// HERO BASE (секция)
+// ─────────────────────────────────────────
+
+/// Базовые стили Hero-секции
+/// Включает overflow: hidden и position: relative
+/// @example scss
+///   .hero {
+///     @include hero-base;
+///   }
+/// @output overflow: hidden, position: relative
+/// @group hero
+/// @access public
+@mixin hero-base {
+  position: relative;
+  overflow: hidden;
+}
+
+// ─────────────────────────────────────────
+// HERO CONTAINER (внутренний контейнер)
+// ─────────────────────────────────────────
+
+/// Контейнер контента Hero
+/// Ограничивает ширину и задаёт z-index
+/// @param {Length} $max-width [$hero-container-max-width] - Максимальная ширина
+/// @param {Length} $padding-y [$hero-container-padding-y] - Вертикальные отступы
+/// @param {Number} $z-index [$hero-content-z-index] - z-index контента
+/// @example scss
+///   .hero__container {
+///     @include hero-container;
+///   }
+/// @example scss - Кастомная ширина
+///   .hero__container {
+///     @include hero-container(60rem, 3rem);
+///   }
+/// @output max-width, padding, position, z-index
+/// @group hero
+/// @access public
+@mixin hero-container($max-width: $hero-container-max-width, $padding-y: $hero-container-padding-y, $z-index: $hero-content-z-index) {
+  position: relative;
+  z-index: $z-index;
+  max-width: $max-width;
+  padding: $padding-y 0;
+}
+
+// ─────────────────────────────────────────
+// HERO ACTIONS (кнопки)
+// ─────────────────────────────────────────
+
+/// Контейнер кнопок Hero
+/// Flex с gap и fallback, адаптивная ширина кнопок
+/// @param {Length} $gap [spacing.$gap-md] - Отступ между кнопками
+/// @param {String} $btn-selector [".btn"] - Селектор кнопок для fallback
+/// @require {mixin} mixins.flex-gap
+/// @require {mixin} breakpoints.sm-down
+/// @example scss
+///   .hero__actions {
+///     @include hero-actions;
+///   }
+/// @example scss - Кастомный gap
+///   .hero__actions {
+///     @include hero-actions(spacing.$gap-lg, ".hero__btn");
+///   }
+/// @output flex, flex-wrap, gap с fallback
+/// @group hero
+/// @access public
+@mixin hero-actions($gap: spacing.$gap-md, $btn-selector: ".btn") {
+  display: flex;
+  flex-wrap: wrap;
+  @include mixins.flex-gap($gap, both, $btn-selector);
+}
+
+/// Кнопка Hero (модификатор для адаптива)
+/// На мобильных — 100% ширина
+/// @require {mixin} breakpoints.sm-down
+/// @example scss
+///   .hero__actions-btn {
+///     @include hero-actions-btn;
+///   }
+/// @output width: 100% на sm и меньше
+/// @group hero
+/// @access public
+@mixin hero-actions-btn {
+  @include breakpoints.sm-down {
+    width: 100%;
+  }
+}
+
+// ─────────────────────────────────────────
+// HERO BACKGROUND (picture)
+// ─────────────────────────────────────────
+
+/// Фоновое изображение Hero (picture элемент)
+/// @param {Number} $z-index [$hero-bg-z-index] - z-index
+/// @param {String} $position [$hero-bg-position] - object-position
+/// @require {mixin} mixins.bg-picture
+/// @example scss
+///   .hero__bg {
+///     @include hero-bg;
+///   }
+/// @example scss - Кастомная позиция
+///   .hero__bg {
+///     @include hero-bg(0, center top);
+///   }
+/// @output Абсолютное позиционирование с object-fit: cover
+/// @group hero
+/// @access public
+@mixin hero-bg($z-index: $hero-bg-z-index, $position: $hero-bg-position) {
+  @include mixins.bg-picture($z-index, $position);
+}
+
+// ─────────────────────────────────────────
+// HERO OVERLAY (градиент)
+// ─────────────────────────────────────────
+
+/// Gradient overlay для Hero
+/// Применяется к ::after псевдоэлементу
+/// @param {String} $color [$hero-overlay-color] - Цвет градиента
+/// @param {Number} $z-index [$hero-overlay-z-index] - z-index
+/// @require {mixin} mixins.gradient-overlay-right
+/// @example scss
+///   .hero::after {
+///     @include hero-overlay;
+///   }
+/// @example scss - Кастомный цвет
+///   .hero::after {
+///     @include hero-overlay(accent);
+///   }
+/// @output content, position, inset, z-index, gradient
+/// @group hero
+/// @access public
+@mixin hero-overlay($color: $hero-overlay-color, $z-index: $hero-overlay-z-index) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: $z-index;
+  @include mixins.gradient-overlay-right($color);
+}
+
+// ─────────────────────────────────────────
+// HERO COMPOSITE (всё вместе)
+// ─────────────────────────────────────────
+
+/// Полный набор стилей Hero-секции
+/// Комбинирует hero-base + overlay
+/// @param {String} $overlay-color [$hero-overlay-color] - Цвет overlay
+/// @require {mixin} hero-base
+/// @require {mixin} hero-overlay
+/// @example scss
+///   .hero {
+///     @include hero($overlay-color: primary);
+///
+///     &__container { @include hero-container; }
+///     &__bg { @include hero-bg; }
+///     &__actions { @include hero-actions; }
+///   }
+/// @output Полная структура Hero с overlay
+/// @group hero
+/// @access public
+@mixin hero($overlay-color: $hero-overlay-color) {
+  @include hero-base;
+
+  &::after {
+    @include hero-overlay($overlay-color);
+  }
+}

package/scss/abstracts/hero/_index.scss

@@ -0,0 +1,23 @@
+// ============================================
+// HERO — INDEX
+// local/common/theme-moexp/src/scss/abstracts/hero/_index.scss
+// ============================================
+
+////
+/// Точка входа модуля Hero-секции
+/// Экспортирует все переменные и миксины
+/// @group hero
+/// @author MOEXP Team
+////
+
+// ─────────────────────────────────────────
+// EXPORTS
+// ─────────────────────────────────────────
+
+/// Переменные Hero
+/// @see hero/_variables.scss
+@forward "variables";
+
+/// Базовые миксины
+/// @see hero/_base.scss
+@forward "base";

package/scss/abstracts/hero/_variables.scss

@@ -0,0 +1,59 @@
+// ============================================
+// HERO — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/hero/_variables.scss
+// ============================================
+
+////
+/// Переменные для Hero-секции
+/// @group hero
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+
+// ─────────────────────────────────────────
+// CONTAINER
+// ─────────────────────────────────────────
+
+/// Максимальная ширина контента Hero
+/// @type Length
+/// @group hero
+$hero-container-max-width: 48rem !default;
+
+/// Вертикальный padding контейнера
+/// @type Length
+/// @group hero
+$hero-container-padding-y: spacing.$spacing-lg !default;
+
+/// z-index контента (над overlay)
+/// @type Number
+/// @group hero
+$hero-content-z-index: 2 !default;
+
+// ─────────────────────────────────────────
+// BACKGROUND
+// ─────────────────────────────────────────
+
+/// z-index фонового изображения
+/// @type Number
+/// @group hero
+$hero-bg-z-index: 0 !default;
+
+/// Позиция фона по умолчанию
+/// @type String
+/// @group hero
+$hero-bg-position: bottom center !default;
+
+// ─────────────────────────────────────────
+// OVERLAY
+// ─────────────────────────────────────────
+
+/// z-index overlay (между bg и контентом)
+/// @type Number
+/// @group hero
+$hero-overlay-z-index: 1 !default;
+
+/// Цвет overlay по умолчанию
+/// @type String
+/// @group hero
+$hero-overlay-color: primary !default;

package/scss/abstracts/info-card/_base.scss

@@ -0,0 +1,152 @@
+// ============================================
+// INFO CARD — BASE
+// local/common/theme-moexp/src/scss/abstracts/info-card/_base.scss
+// ============================================
+
+////
+/// Базовые миксины info-card
+/// @group info-card-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../radius";
+@use "../../font-vars" as fonts;
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// CONTAINER
+// ─────────────────────────────────────────
+
+/// Базовые стили контейнера
+/// @output Стили карточки
+/// @group info-card-base
+@mixin base {
+  padding: $padding;
+
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded(sm);
+}
+
+// ─────────────────────────────────────────
+// TITLE
+// ─────────────────────────────────────────
+
+/// Заголовок карточки
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $font-family [fonts.$font-golos-text] - Шрифт
+/// @output Стили заголовка
+/// @group info-card-base
+@mixin title($color: foreground, $font-family: fonts.$font-golos-text) {
+  margin: 0 0 $title-margin-bottom;
+  font-family: $font-family;
+  font-size: typography.$font-size-base;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-snug;
+
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// HIGHLIGHT
+// ─────────────────────────────────────────
+
+/// Акцентное значение (телефон, цена и т.д.)
+/// @param {String} $color [accent] - Цвет текста
+/// @param {String} $font-family [fonts.$font-golos-text] - Шрифт
+/// @output Стили акцентного значения
+/// @group info-card-base
+@mixin highlight($color: accent, $font-family: fonts.$font-golos-text) {
+  display: inline-block;
+  margin: 0 0 $highlight-margin-bottom;
+  font-family: $font-family;
+  font-size: typography.$font-size-base;
+  font-weight: typography.$font-weight-bold;
+  line-height: typography.$line-height-snug;
+
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// SUBTITLE
+// ─────────────────────────────────────────
+
+/// Подзаголовок секции
+/// @param {String} $color [foreground] - Цвет текста
+/// @output Стили подзаголовка
+/// @group info-card-base
+@mixin subtitle($color: foreground) {
+  margin: 0 0 $subtitle-margin-bottom;
+  font-size: typography.$font-size-sm;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-normal;
+
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// LIST
+// ─────────────────────────────────────────
+
+/// Список элементов с fallback для gap
+/// @output Flex column с gap
+/// @group info-card-base
+@mixin list {
+  display: flex;
+  flex-direction: column;
+
+  // Fallback для gap
+  > * {
+    margin-bottom: $list-gap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Modern gap
+  @supports (gap: 1px) {
+    gap: $list-gap;
+
+    > * {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// ITEM
+// ─────────────────────────────────────────
+
+/// Элемент списка
+/// @output Стили элемента
+/// @group info-card-base
+@mixin item {
+  font-size: typography.$font-size-sm;
+}
+
+/// Описание элемента (label)
+/// @param {String} $color [foreground-muted] - Цвет текста
+/// @output Стили описания
+/// @group info-card-base
+@mixin label($color: foreground-muted) {
+  margin: 0;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-normal;
+
+  @include mixins.text-color($color);
+}
+
+/// Значение элемента
+/// @param {String} $color [foreground] - Цвет текста
+/// @output Стили значения
+/// @group info-card-base
+@mixin value($color: foreground) {
+  margin: 0;
+  line-height: typography.$line-height-snug;
+
+  @include mixins.text-color($color);
+}

package/scss/abstracts/info-card/_index.scss

@@ -0,0 +1,12 @@
+// ============================================
+// INFO CARD — INDEX
+// local/common/theme-moexp/src/scss/abstracts/info-card/_index.scss
+// ============================================
+
+////
+/// Экспорт модуля info-card
+/// @group info-card
+////
+
+@forward "variables";
+@forward "base";

package/scss/abstracts/info-card/_variables.scss

@@ -0,0 +1,44 @@
+// ============================================
+// INFO CARD — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/info-card/_variables.scss
+// ============================================
+
+////
+/// Переменные компонента info-card
+/// @group info-card-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+@use "../typography";
+@use "../radius";
+
+/// Padding карточки
+/// @type Number
+/// @group info-card-variables
+$padding: spacing.$spacing-lg !default;
+
+/// Скругление
+/// @type Number
+/// @group info-card-variables
+$border-radius: radius.$radius-sm !default;
+
+/// Отступ после заголовка
+/// @type Number
+/// @group info-card-variables
+$title-margin-bottom: spacing.$spacing-md !default;
+
+/// Отступ после highlight
+/// @type Number
+/// @group info-card-variables
+$highlight-margin-bottom: spacing.$spacing-md !default;
+
+/// Отступ после subtitle
+/// @type Number
+/// @group info-card-variables
+$subtitle-margin-bottom: spacing.$spacing-sm !default;
+
+/// Gap между элементами списка
+/// @type Number
+/// @group info-card-variables
+$list-gap: spacing.$spacing-sm !default;

package/scss/abstracts/news-card/_base.scss

@@ -0,0 +1,143 @@
+// ============================================
+// NEWS CARD — BASE
+// local/common/theme-moexp/src/scss/abstracts/news-card/_base.scss
+// ============================================
+
+////
+/// Базовые миксины для карточек новостей
+/// Общие стили для featured и compact
+/// @group news-card
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../radius";
+@use "../spacing";
+@use "../typography";
+@use "../animations";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// CONTAINER (ссылка-обёртка)
+// ─────────────────────────────────────────
+
+/// Базовые стили контейнера карточки (элемент <a>)
+/// @group news-card
+/// @access public
+@mixin news-card-base {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded(lg);
+  @include mixins.shadow-sm;
+
+  cursor: pointer;
+
+  @include animations.transition((box-shadow, border-color), $news-card-transition, animations.$ease-in-out);
+
+  &:hover {
+    @include mixins.shadow-xl;
+    @include mixins.border-color-hsl(accent, 0.5);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring(ring);
+  }
+}
+
+// ─────────────────────────────────────────
+// CONTENT
+// ─────────────────────────────────────────
+
+/// Контент карточки
+/// @param {Number} $padding [$news-card-padding] - Padding
+/// @group news-card
+/// @access public
+@mixin news-card-content($padding: $news-card-padding) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: $padding;
+}
+
+// ─────────────────────────────────────────
+// META (дата, категория)
+// ─────────────────────────────────────────
+
+/// Мета-информация карточки
+/// @param {String} $color [accent-on-light] - Цвет текста
+/// @group news-card
+/// @access public
+@mixin news-card-meta($color: accent-on-light) {
+  display: flex;
+  align-items: center;
+  gap: spacing.$gap-xs;
+  margin-bottom: spacing.$spacing-md;
+
+  @include mixins.text-color($color);
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  span {
+    font-size: typography.$font-size-base;
+    font-weight: typography.$font-weight-medium;
+  }
+}
+
+// ─────────────────────────────────────────
+// TITLE
+// ─────────────────────────────────────────
+
+/// Заголовок карточки с hover
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $hover-color [accent] - Цвет при hover
+/// @param {String} $size [2xl] - Размер шрифта (2xl, xl, lg)
+/// @param {String} $parent-selector - Селектор родителя для hover
+/// @group news-card
+/// @access public
+@mixin news-card-title($color: foreground, $hover-color: accent, $size: 2xl, $parent-selector: null) {
+  font-weight: typography.$font-weight-bold;
+  line-height: typography.$line-height-tight;
+  margin-bottom: spacing.$spacing-md;
+
+  @if $size == 2xl {
+    font-size: typography.$font-size-2xl;
+  } @else if $size == xl {
+    font-size: typography.$font-size-xl;
+  } @else {
+    font-size: typography.$font-size-lg;
+  }
+
+  @include mixins.text-color($color);
+  @include animations.transition(color, $news-card-transition);
+
+  @if $parent-selector {
+    #{$parent-selector}:hover & {
+      @include mixins.text-color($hover-color);
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// DESCRIPTION
+// ─────────────────────────────────────────
+
+/// Описание карточки
+/// @param {String} $color [foreground-muted] - Цвет текста
+/// @group news-card
+/// @access public
+@mixin news-card-description($color: foreground-muted) {
+  font-size: typography.$font-size-base;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color);
+}

package/scss/abstracts/news-card/_compact.scss

@@ -0,0 +1,24 @@
+// ============================================
+// NEWS CARD — COMPACT
+// local/common/theme-moexp/src/scss/abstracts/news-card/_compact.scss
+// ============================================
+
+////
+/// Compact карточка новости (без изображения)
+/// @group news-card-compact
+/// @author MOEXP Team
+////
+
+@use "variables" as *;
+@use "base" as *;
+
+// ─────────────────────────────────────────
+// CONTENT
+// ─────────────────────────────────────────
+
+/// Контент compact карточки (меньший padding)
+/// @group news-card-compact
+/// @access public
+@mixin news-card-compact-content {
+  @include news-card-content($news-card-compact-padding);
+}