@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/section-title/_base.scss

@@ -0,0 +1,127 @@
+// ============================================
+// SECTION TITLE — BASE
+// local/common/theme-moexp/src/scss/abstracts/section-title/_base.scss
+// ============================================
+
+////
+/// Базовые миксины section-title
+/// @group section-title-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../breakpoints";
+@use "../../font-vars" as fonts;
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// БАЗОВЫЕ МИКСИНЫ
+// ─────────────────────────────────────────
+
+/// Базовые стили контейнера section-title
+/// @param {String} $align [center] - Выравнивание: center, left, right
+/// @output Flex column с выравниванием
+/// @group section-title-base
+@mixin base($align: center) {
+  display: flex;
+  flex-direction: column;
+  text-align: $align;
+  gap: $gap;
+  margin-bottom: $margin-bottom;
+
+  @if $align == center {
+    align-items: center;
+  } @else if $align == right {
+    align-items: flex-end;
+  } @else {
+    align-items: flex-start;
+  }
+}
+
+/// Стили для slogan (надзаголовок)
+/// @param {String} $color [foreground-muted] - Цвет текста
+/// @output Uppercase текст с letter-spacing
+/// @group section-title-base
+@mixin slogan($color: foreground-muted) {
+  font-size: typography.$font-size-sm;
+  font-weight: typography.$font-weight-medium;
+  line-height: typography.$line-height-normal;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-xs;
+  }
+}
+
+/// Стили для title (h2)
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $font-family [fonts.$font-literata] - Семейство шрифта
+/// @output Заголовок секции
+/// @group section-title-base
+@mixin title($color: foreground, $font-family: fonts.$font-literata) {
+  font-family: $font-family;
+  font-size: typography.$font-size-4xl;
+  font-weight: typography.$font-weight-bold;
+  line-height: typography.$line-height-tight;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-3xl;
+  }
+}
+
+/// Стили для subtitle (h3)
+/// @param {String} $color [foreground] - Цвет текста
+/// @output Подзаголовок секции
+/// @group section-title-base
+@mixin subtitle($color: foreground) {
+  font-size: typography.$font-size-lg;
+  font-weight: typography.$font-weight-normal;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-base;
+  }
+}
+
+// ─────────────────────────────────────────
+// МОДИФИКАТОРЫ
+// ─────────────────────────────────────────
+
+/// Выравнивание влево
+/// @output text-align: left, align-items: flex-start
+/// @group section-title-base
+@mixin align-left {
+  text-align: left;
+  align-items: flex-start;
+}
+
+/// Выравнивание вправо
+/// @output text-align: right, align-items: flex-end
+/// @group section-title-base
+@mixin align-right {
+  text-align: right;
+  align-items: flex-end;
+}
+
+/// Компактный вариант (уменьшенный отступ)
+/// @output margin-bottom: $margin-bottom-compact
+/// @group section-title-base
+@mixin compact {
+  margin-bottom: $margin-bottom-compact;
+}
+
+/// Без отступа снизу
+/// @output margin-bottom: 0
+/// @group section-title-base
+@mixin no-margin {
+  margin-bottom: 0;
+}

package/scss/abstracts/section-title/_index.scss

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

package/scss/abstracts/section-title/_variables.scss

@@ -0,0 +1,27 @@
+// ============================================
+// SECTION TITLE — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/section-title/_variables.scss
+// ============================================
+
+////
+/// Переменные компонента section-title
+/// @group section-title-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+
+/// Отступ между элементами заголовка
+/// @type Number
+/// @group section-title-variables
+$gap: spacing.$gap-sm !default;
+
+/// Отступ снизу компонента
+/// @type Number
+/// @group section-title-variables
+$margin-bottom: spacing.$spacing-xl !default;
+
+/// Уменьшенный отступ (compact)
+/// @type Number
+/// @group section-title-variables
+$margin-bottom-compact: spacing.$spacing-lg !default;

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

@@ -0,0 +1,77 @@
+// ============================================
+// SERVICE CARD — BASE
+// local/common/theme-moexp/src/scss/abstracts/service-card/_base.scss
+// ============================================
+
+////
+/// Базовые миксины карточки услуги
+/// @group service-card-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../animations";
+@use "../cards";
+@use "../../font-vars" as fonts;
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// БАЗОВЫЕ МИКСИНЫ
+// ─────────────────────────────────────────
+
+/// Базовые стили карточки услуги
+/// @output Интерактивная карточка
+/// @group service-card-base
+@mixin base {
+  @include cards.card-interactive;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+
+  &:focus-visible {
+    @include mixins.focus-ring(ring);
+  }
+}
+
+/// Иконка карточки
+/// @param {String} $color [accent] - Цвет иконки
+/// @output Стили иконки
+/// @group service-card-base
+@mixin icon($color: accent) {
+  width: $icon-size;
+  height: $icon-size;
+  margin-bottom: spacing.$spacing-md;
+  flex-shrink: 0;
+
+  @include mixins.text-color($color);
+}
+
+/// Заголовок карточки
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $font-family [fonts.$font-literata] - Шрифт
+/// @output Стили заголовка
+/// @group service-card-base
+@mixin title($color: foreground, $font-family: fonts.$font-literata) {
+  font-family: $font-family;
+  font-size: typography.$font-size-lg;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-snug;
+  margin-bottom: spacing.$spacing-sm;
+
+  @include mixins.text-color($color);
+  @include animations.transition(color);
+}
+
+/// Описание карточки
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {Number} $alpha [0.8] - Прозрачность
+/// @output Стили описания
+/// @group service-card-base
+@mixin description($color: foreground, $alpha: 0.8) {
+  font-size: typography.$font-size-sm;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color, $alpha);
+}

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

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

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

@@ -0,0 +1,23 @@
+// ============================================
+// SERVICE CARD — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/service-card/_variables.scss
+// ============================================
+
+////
+/// Переменные карточки услуги
+/// @group service-card-variables
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+
+/// Размер иконки
+/// @type Number
+/// @group service-card-variables
+$icon-size: typography.$font-size-5xl !default;
+
+/// Padding карточки
+/// @type Number
+/// @group service-card-variables
+$padding: spacing.$spacing-lg !default;

package/scss/abstracts/sidebar-menu/_base.scss

@@ -0,0 +1,148 @@
+// ============================================
+// SIDEBAR MENU — BASE
+// local/common/theme-moexp/src/scss/abstracts/sidebar-menu/_base.scss
+// ============================================
+
+////
+/// Базовые миксины sidebar-menu
+/// @group sidebar-menu-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../radius";
+@use "../animations";
+@use "../../font-vars" as fonts;
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// CONTAINER
+// ─────────────────────────────────────────
+
+/// Базовые стили контейнера
+/// @output Стили обёртки меню
+/// @group sidebar-menu-base
+@mixin base {
+  overflow: hidden;
+
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded(sm);
+}
+
+// ─────────────────────────────────────────
+// HEADER
+// ─────────────────────────────────────────
+
+/// Стили заголовка
+/// @param {String} $bg [primary] - Фон заголовка
+/// @output Стили шапки меню
+/// @group sidebar-menu-base
+@mixin header($bg: primary) {
+  padding: $header-padding-y $header-padding-x;
+
+  @include mixins.bg-color($bg);
+}
+
+/// Стили заголовка (h3)
+/// @param {String} $color [primary-foreground] - Цвет текста
+/// @param {String} $font-family [fonts.$font-golos-text] - Шрифт
+/// @output Стили текста заголовка
+/// @group sidebar-menu-base
+@mixin title($color: primary-foreground, $font-family: fonts.$font-golos-text) {
+  margin: 0;
+  font-family: $font-family;
+  font-size: typography.$font-size-sm;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-normal;
+
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// NAV
+// ─────────────────────────────────────────
+
+/// Стили навигации
+/// @output Padding контейнера nav
+/// @group sidebar-menu-base
+@mixin nav {
+  padding: $nav-padding-y 0;
+}
+
+/// Стили списка
+/// @output Reset для ul
+/// @group sidebar-menu-base
+@mixin list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/// Стили элемента списка
+/// @output Стили li
+/// @group sidebar-menu-base
+@mixin item {
+  // Пустой, для расширения при необходимости
+}
+
+// ─────────────────────────────────────────
+// LINK
+// ─────────────────────────────────────────
+
+/// Стили ссылки
+/// @param {String} $color [foreground-body] - Цвет текста
+/// @param {String} $hover-bg [background-section] - Фон при hover
+/// @param {String} $hover-color [accent] - Цвет текста при hover
+/// @param {String} $border-color [accent] - Цвет левой границы при hover
+/// @output Стили ссылки с hover и transition
+/// @group sidebar-menu-base
+@mixin link($color: foreground-body, $hover-bg: background-section, $hover-color: accent, $border-color: accent) {
+  display: block;
+  padding: $link-padding-y $link-padding-x;
+
+  font-size: typography.$font-size-sm;
+  line-height: typography.$line-height-relaxed;
+  text-decoration: none;
+
+  border-left: $link-border-width solid transparent;
+
+  @include mixins.text-color($color);
+
+  // Fallback transition
+  transition:
+    color $transition-duration ease-out,
+    background-color $transition-duration ease-out,
+    border-color $transition-duration ease-out;
+
+  // Modern transition
+  @supports (transition-behavior: allow-discrete) {
+    @include animations.transition((color, background-color, border-color), $transition-duration);
+  }
+
+  &:hover {
+    @include mixins.bg-color($hover-bg);
+    @include mixins.text-color($hover-color);
+    @include mixins.border-color-hsl($border-color);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring(ring, 2px, -2px);
+  }
+}
+
+/// Стили активной ссылки
+/// @param {String} $bg [background-section] - Фон
+/// @param {String} $color [accent] - Цвет текста
+/// @param {String} $border-color [accent] - Цвет левой границы
+/// @output Стили для aria-current="page"
+/// @group sidebar-menu-base
+@mixin link-active($bg: background-section, $color: accent, $border-color: accent) {
+  @include mixins.bg-color($bg);
+  @include mixins.text-color($color);
+  @include mixins.border-color-hsl($border-color);
+
+  pointer-events: none;
+}

package/scss/abstracts/sidebar-menu/_index.scss

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

package/scss/abstracts/sidebar-menu/_variables.scss

@@ -0,0 +1,55 @@
+// ============================================
+// SIDEBAR MENU — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/sidebar-menu/_variables.scss
+// ============================================
+
+////
+/// Переменные компонента sidebar-menu
+/// @group sidebar-menu-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+@use "../typography";
+@use "../animations";
+@use "../radius";
+
+/// Скругление контейнера
+/// @type Number
+/// @group sidebar-menu-variables
+$border-radius: radius.$radius-sm !default;
+
+/// Padding заголовка (X)
+/// @type Number
+/// @group sidebar-menu-variables
+$header-padding-x: spacing.$spacing-md !default;
+
+/// Padding заголовка (Y)
+/// @type Number
+/// @group sidebar-menu-variables
+$header-padding-y: spacing.$spacing-sm !default;
+
+/// Padding навигации (Y)
+/// @type Number
+/// @group sidebar-menu-variables
+$nav-padding-y: spacing.$spacing-sm !default;
+
+/// Padding ссылки (X)
+/// @type Number
+/// @group sidebar-menu-variables
+$link-padding-x: spacing.$spacing-md !default;
+
+/// Padding ссылки (Y)
+/// @type Number
+/// @group sidebar-menu-variables
+$link-padding-y: spacing.$spacing-sm !default;
+
+/// Толщина левой границы ссылки
+/// @type Number
+/// @group sidebar-menu-variables
+$link-border-width: 2px !default;
+
+/// Transition duration
+/// @type Number
+/// @group sidebar-menu-variables
+$transition-duration: animations.$duration-fast !default;

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

@@ -0,0 +1,99 @@
+// ============================================
+// STATS CARD — BASE
+// local/common/theme-moexp/src/scss/abstracts/stats-card/_base.scss
+// ============================================
+
+////
+/// Базовые миксины карточки статистики
+/// @group stats-card-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../breakpoints";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// БАЗОВЫЕ МИКСИНЫ
+// ─────────────────────────────────────────
+
+/// Базовые стили карточки (обёртка)
+/// @output Стили контейнера с относительным позиционированием
+/// @group stats-card-base
+@mixin base {
+  position: relative;
+  padding-left: $offset;
+  padding-top: $offset;
+}
+
+/// Иконка карточки
+/// @param {String} $color [primary] - Цвет иконки
+/// @output Стили иконки с абсолютным позиционированием
+/// @group stats-card-base
+@mixin icon($color: primary) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+
+  width: $icon-size;
+  height: $icon-size;
+
+  @include mixins.text-color($color);
+}
+
+/// Контент карточки
+/// @param {String} $bg-color [background-section] - Фон
+/// @output Стили контента с backdrop-filter
+/// @group stats-card-base
+@mixin content($bg-color: background-section) {
+  height: 100%;
+  padding: $padding;
+  border-radius: $radius;
+
+  @include mixins.bg-color($bg-color);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+/// Число/значение
+/// @param {String} $color [accent] - Цвет числа
+/// @output Стили крупного числа
+/// @group stats-card-base
+@mixin value($color: accent) {
+  display: block;
+  margin-bottom: spacing.$spacing-sm;
+
+  font-size: typography.$font-size-4xl;
+  font-weight: typography.$font-weight-extrabold;
+  line-height: typography.$line-height-none;
+
+  background-color: transparent;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.xl-down {
+    font-size: typography.$font-size-3xl;
+  }
+
+  @include breakpoints.lg-down {
+    font-size: typography.$font-size-2xl;
+  }
+}
+
+/// Описание
+/// @param {String} $color [foreground] - Цвет текста
+/// @output Стили описания
+/// @group stats-card-base
+@mixin description($color: foreground) {
+  font-size: typography.$font-size-lg;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.lg-down {
+    font-size: typography.$font-size-base;
+  }
+}

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

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

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

@@ -0,0 +1,32 @@
+// ============================================
+// STATS CARD — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/stats-card/_variables.scss
+// ============================================
+
+////
+/// Переменные карточки статистики
+/// @group stats-card-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+
+/// Размер иконки
+/// @type Number
+/// @group stats-card-variables
+$icon-size: 7rem !default;
+
+/// Отступ карточки от иконки (top, left)
+/// @type Number
+/// @group stats-card-variables
+$offset: 3rem !default;
+
+/// Padding контента
+/// @type List
+/// @group stats-card-variables
+$padding: spacing.$spacing-3xl spacing.$spacing-lg !default;
+
+/// Скругления карточки (асимметричные)
+/// @type List
+/// @group stats-card-variables
+$radius: spacing.$spacing-2xl spacing.$spacing-md spacing.$spacing-2xl spacing.$spacing-md !default;