@mr.slonn/my-scss-theme 1.0.0

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

@@ -0,0 +1,83 @@
+// ============================================
+// NEWS CARD — FEATURED
+// local/common/theme-moexp/src/scss/abstracts/news-card/_featured.scss
+// ============================================
+
+////
+/// Featured карточка новости (с изображением)
+/// Горизонтальная раскладка на десктопе
+/// @group news-card-featured
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../animations";
+@use "../breakpoints";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// GRID (вложенный контейнер)
+// ─────────────────────────────────────────
+
+/// Grid layout — применяется к __grid, НЕ к контейнеру
+/// @param {String} $image-position [left] - Позиция изображения
+/// @group news-card-featured
+/// @access public
+@mixin news-card-featured-grid($image-position: left) {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+
+  @include breakpoints.md {
+    grid-template-columns: 1fr 1fr;
+
+    @if $image-position == right {
+      > *:first-child {
+        order: 2;
+      }
+      > *:last-child {
+        order: 1;
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// IMAGE WRAPPER
+// ─────────────────────────────────────────
+
+/// Обёртка изображения
+/// @group news-card-featured
+/// @access public
+@mixin news-card-featured-image-wrap {
+  position: relative;
+  height: $news-card-featured-image-height;
+  overflow: hidden;
+
+  @include breakpoints.md {
+    height: auto;
+    min-height: $news-card-featured-image-height;
+  }
+}
+
+// ─────────────────────────────────────────
+// IMAGE
+// ─────────────────────────────────────────
+
+/// Изображение с hover эффектом
+/// @param {String} $parent-selector - Селектор родителя для hover
+/// @group news-card-featured
+/// @access public
+@mixin news-card-featured-image($parent-selector: null) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  @include animations.transition(transform, $news-card-transition, animations.$ease-out);
+
+  @if $parent-selector {
+    #{$parent-selector}:hover & {
+      transform: scale(1.05);
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+// ============================================
+// NEWS CARD — INDEX
+// local/common/theme-moexp/src/scss/abstracts/news-card/_index.scss
+// ============================================
+
+////
+/// Точка входа модуля карточек новостей
+/// Экспортирует все переменные и миксины
+/// @group news-card
+/// @author MOEXP Team
+////
+
+// ─────────────────────────────────────────
+// EXPORTS
+// ─────────────────────────────────────────
+
+/// Переменные
+/// @see news-card/_variables.scss
+@forward "variables";
+
+/// Базовые миксины
+/// @see news-card/_base.scss
+@forward "base";
+
+/// Featured (с изображением)
+/// @see news-card/_featured.scss
+@forward "featured";
+
+/// Compact (без изображения)
+/// @see news-card/_compact.scss
+@forward "compact";

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

@@ -0,0 +1,44 @@
+// ============================================
+// NEWS CARD — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/news-card/_variables.scss
+// ============================================
+
+////
+/// Переменные для карточек новостей
+/// @group news-card
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+
+// ─────────────────────────────────────────
+// ОБЩИЕ
+// ─────────────────────────────────────────
+
+/// Transition duration
+/// @type Number
+/// @group news-card
+$news-card-transition: 300ms !default;
+
+/// Padding контента
+/// @type Number
+/// @group news-card
+$news-card-padding: spacing.$spacing-xl !default;
+
+// ─────────────────────────────────────────
+// FEATURED (с изображением)
+// ─────────────────────────────────────────
+
+/// Высота изображения featured
+/// @type Number
+/// @group news-card
+$news-card-featured-image-height: 16rem !default;
+
+// ─────────────────────────────────────────
+// COMPACT (без изображения)
+// ─────────────────────────────────────────
+
+/// Padding compact карточки
+/// @type Number
+/// @group news-card
+$news-card-compact-padding: spacing.$spacing-lg !default;

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

@@ -0,0 +1,109 @@
+// ============================================
+// PROJECT CARD — BASE
+// local/common/theme-moexp/src/scss/abstracts/project-card/_base.scss
+// ============================================
+
+////
+/// Базовые миксины карточки проекта
+/// @group project-card-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../radius";
+@use "../animations";
+@use "../cards";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// БАЗОВЫЕ МИКСИНЫ
+// ─────────────────────────────────────────
+
+/// Базовые стили карточки
+/// @output Стили контейнера
+/// @group project-card-base
+@mixin base {
+  @include cards.card-vertical;
+
+  &:focus-visible {
+    @include mixins.focus-ring(ring);
+  }
+}
+
+/// Badge года
+/// @param {String} $bg-color [background-section] - Фон
+/// @param {String} $text-color [foreground-muted] - Цвет текста
+/// @output Стили badge
+/// @group project-card-base
+@mixin year($bg-color: background-section, $text-color: foreground-muted) {
+  position: absolute;
+  top: spacing.$spacing-lg;
+  left: spacing.$spacing-lg;
+  z-index: 1;
+
+  padding: spacing.$spacing-xs spacing.$spacing-sm;
+
+  font-size: typography.$font-size-xs;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-normal;
+
+  @include mixins.bg-color($bg-color);
+  @include mixins.text-color($text-color);
+  @include radius.rounded(sm);
+}
+
+/// Обёртка изображения
+/// @param {Number} $height [$image-height] - Высота
+/// @output Стили контейнера изображения
+/// @group project-card-base
+@mixin image-wrap($height: $image-height) {
+  @include cards.card-vertical-image-wrap($height);
+}
+
+/// Изображение с hover
+/// @output Стили изображения
+/// @group project-card-base
+@mixin image {
+  @include cards.image-cover;
+
+  @include animations.transition(transform, $transition, animations.$ease-out);
+}
+
+/// Контент карточки
+/// @output Padding контента
+/// @group project-card-base
+@mixin content {
+  @include cards.card-vertical-content;
+}
+
+/// Мета-информация (локация)
+/// @param {String} $color [accent-on-light] - Цвет
+/// @output Стили meta
+/// @group project-card-base
+@mixin meta($color: accent-on-light) {
+  @include cards.card-vertical-meta($color);
+}
+
+/// Заголовок с hover
+/// @param {String} $color [foreground] - Цвет
+/// @param {String} $hover-color [accent-on-light] - Цвет при hover
+/// @output Стили заголовка
+/// @group project-card-base
+@mixin title($color: foreground, $hover-color: accent-on-light) {
+  @include cards.card-vertical-title($color, $hover-color);
+
+  span {
+    font-weight: typography.$font-weight-bold;
+  }
+}
+
+/// Описание
+/// @param {String} $color [foreground-muted] - Цвет
+/// @param {Number} $lines [2] - Количество строк для truncate
+/// @output Стили описания
+/// @group project-card-base
+@mixin description($color: foreground-muted, $lines: 2) {
+  @include cards.card-vertical-description($color, $lines);
+}

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

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

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

@@ -0,0 +1,20 @@
+// ============================================
+// PROJECT CARD — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/project-card/_variables.scss
+// ============================================
+
+////
+/// Переменные карточки проекта
+/// @group project-card-variables
+/// @author MOEXP Team
+////
+
+/// Высота изображения
+/// @type Number
+/// @group project-card-variables
+$image-height: 12rem !default;
+
+/// Transition duration
+/// @type Number
+/// @group project-card-variables
+$transition: 300ms !default;

package/scss/abstracts/search-form/_base.scss

@@ -0,0 +1,132 @@
+// ============================================
+// SEARCH FORM — BASE
+// local/common/theme-moexp/src/scss/abstracts/search-form/_base.scss
+// ============================================
+
+////
+/// Базовые миксины формы поиска
+/// Структура контейнера, input и button
+/// @group search-form
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+@use "../typography";
+@use "../radius";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// CONTAINER
+// ─────────────────────────────────────────
+
+/// Базовая структура контейнера формы поиска
+/// Устанавливает размеры и relative positioning для абсолютной кнопки
+///
+/// @param {Length} $width [$search-form-width] - Ширина формы
+/// @param {Length} $height [$search-form-height] - Высота формы
+/// @example scss
+///   .my-search {
+///     @include search-form-base;
+///   }
+/// @example scss - Кастомные размеры
+///   .my-search {
+///     @include search-form-base(20rem, 3rem);
+///   }
+/// @output position, width, height
+/// @group search-form
+/// @access public
+@mixin search-form-base($width: $search-form-width, $height: $search-form-height) {
+  position: relative;
+  width: $width;
+  height: $height;
+
+  // Доступность: минимальный размер touch target
+  min-height: 44px;
+}
+
+// ─────────────────────────────────────────
+// INPUT
+// ─────────────────────────────────────────
+
+/// Базовые стили поля ввода поиска
+/// Input занимает 100% размеров контейнера
+///
+/// @example scss
+///   .my-search__input {
+///     @include search-form-input-base;
+///   }
+/// @output width: 100%, height: 100%, padding, font-size, border-radius
+/// @group search-form
+/// @access public
+@mixin search-form-input-base {
+  // Занимаем всё пространство формы
+  width: 100%;
+  height: 100%;
+
+  // Отступы
+  padding-left: spacing.$spacing-md;
+  padding-right: $search-form-icon-offset + $search-form-icon-size + 0.5rem;
+
+  // Типографика
+  font-size: typography.$font-size-sm;
+
+  // Скругление
+  border-radius: radius.$radius-sm;
+
+  // Убираем стандартные стили
+  appearance: none;
+  -webkit-appearance: none;
+
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+// ─────────────────────────────────────────
+// BUTTON
+// ─────────────────────────────────────────
+
+/// Базовые стили кнопки поиска (иконка)
+/// Позиционирование и размеры SVG
+///
+/// @example scss
+///   .my-search__button {
+///     @include search-form-button-base;
+///   }
+/// @output position, размеры, сброс стилей кнопки
+/// @group search-form
+/// @access public
+@mixin search-form-button-base {
+  position: absolute;
+  right: $search-form-icon-offset;
+  top: 50%;
+  transform: translateY(-50%);
+
+  // Сброс стилей кнопки
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  // Доступность: минимальный размер touch target
+  // Увеличиваем кликабельную область
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 44px;
+    height: 44px;
+  }
+
+  svg {
+    width: $search-form-icon-size;
+    height: $search-form-icon-size;
+    fill: currentColor;
+    display: block;
+  }
+}

package/scss/abstracts/search-form/_composite.scss

@@ -0,0 +1,54 @@
+// ============================================
+// SEARCH FORM — COMPOSITE
+// local/common/theme-moexp/src/scss/abstracts/search-form/_composite.scss
+// ============================================
+
+////
+/// Комбинированные миксины формы поиска
+/// Быстрое создание полной формы одним вызовом
+/// @group search-form
+/// @author MOEXP Team
+////
+
+@use "variables" as *;
+@use "base" as *;
+@use "theme" as *;
+
+// ─────────────────────────────────────────
+// FULL SEARCH FORM
+// ─────────────────────────────────────────
+
+/// Полный набор стилей для контейнера формы поиска
+/// Комбинирует base + структуру для input и button
+///
+/// @param {String} $color - Имя цвета темы
+/// @param {Length} $width [$search-form-width] - Ширина формы
+/// @param {Length} $height [$search-form-height] - Высота формы
+/// @example scss - Быстрое создание формы
+///   .header__search-form {
+///     @include search-form($color: primary-foreground);
+///   }
+/// @example scss - Кастомные размеры
+///   .hero__search-form {
+///     @include search-form(primary-foreground, 25rem, 3.5rem);
+///   }
+/// @output Полная структура формы с темой
+/// @group search-form
+/// @access public
+@mixin search-form($color, $width: $search-form-width, $height: $search-form-height) {
+  @include search-form-base($width, $height);
+
+  // Стили для input внутри
+  input,
+  &__input {
+    @include search-form-input-base;
+    @include search-form-input-theme($color);
+  }
+
+  // Стили для button внутри
+  button,
+  &__button {
+    @include search-form-button-base;
+    @include search-form-button-theme($color);
+  }
+}

package/scss/abstracts/search-form/_index.scss

@@ -0,0 +1,31 @@
+// ============================================
+// SEARCH FORM — INDEX
+// local/common/theme-moexp/src/scss/abstracts/search-form/_index.scss
+// ============================================
+
+////
+/// Точка входа модуля формы поиска
+/// Экспортирует все переменные и миксины
+/// @group search-form
+/// @author MOEXP Team
+////
+
+// ─────────────────────────────────────────
+// EXPORTS
+// ─────────────────────────────────────────
+
+/// Переменные формы поиска
+/// @see search-form/_variables.scss
+@forward "variables";
+
+/// Базовые миксины
+/// @see search-form/_base.scss
+@forward "base";
+
+/// Темизация
+/// @see search-form/_theme.scss
+@forward "theme";
+
+/// Комбинированные миксины
+/// @see search-form/_composite.scss
+@forward "composite";

package/scss/abstracts/search-form/_theme.scss

@@ -0,0 +1,89 @@
+// ============================================
+// SEARCH FORM — THEME
+// local/common/theme-moexp/src/scss/abstracts/search-form/_theme.scss
+// ============================================
+
+////
+/// Темизация формы поиска
+/// Цвета для input и button в разных контекстах
+/// @group search-form
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../animations";
+
+// ─────────────────────────────────────────
+// INPUT THEME
+// ─────────────────────────────────────────
+
+/// Тема для поля ввода поиска
+/// Устанавливает цвета фона, границы, текста, placeholder
+///
+/// @param {String} $color - Имя цвета из палитры темы
+/// @param {Number} $bg-alpha [0.1] - Прозрачность фона
+/// @param {Number} $border-alpha [0.2] - Прозрачность границы
+/// @param {Number} $placeholder-alpha [0.5] - Прозрачность placeholder
+/// @require {mixin} mixins.hsl-prop
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} mixins.text-color
+/// @require {mixin} animations.input-focus-light
+/// @example scss - На тёмном фоне
+///   .search__input {
+///     @include search-form-input-theme(primary-foreground);
+///   }
+/// @example scss - На светлом фоне
+///   .search__input {
+///     @include search-form-input-theme(primary, 0.05, 0.15);
+///   }
+/// @output background-color, border, color, placeholder, focus
+/// @group search-form
+/// @access public
+@mixin search-form-input-theme($color, $bg-alpha: 0.1, $border-alpha: 0.2, $placeholder-alpha: 0.5) {
+  @include mixins.hsl-prop(background-color, $color, $bg-alpha);
+  @include mixins.border-hsl(1px, solid, $color, $border-alpha);
+  @include mixins.text-color($color);
+
+  &::placeholder {
+    @include mixins.hsl-prop(color, $color, $placeholder-alpha);
+  }
+
+  @include animations.input-focus-light($color);
+}
+
+// ─────────────────────────────────────────
+// BUTTON THEME
+// ─────────────────────────────────────────
+
+/// Тема для кнопки поиска
+/// Устанавливает цвет иконки и hover-состояние
+///
+/// @param {String} $color - Имя цвета из палитры темы
+/// @param {Number} $alpha [0.6] - Прозрачность цвета
+/// @param {Number} $hover-alpha [1] - Прозрачность при hover
+/// @require {mixin} mixins.hsl-prop
+/// @require {mixin} mixins.focus-ring
+/// @require {mixin} animations.transition-colors
+/// @example scss
+///   .search__button {
+///     @include search-form-button-theme(primary-foreground);
+///   }
+/// @output color, transition, hover
+/// @group search-form
+/// @access public
+@mixin search-form-button-theme($color, $alpha: 0.6, $hover-alpha: 1) {
+  @include mixins.hsl-prop(color, $color, $alpha);
+  @include animations.transition-colors;
+
+  &:hover {
+    @include mixins.hsl-prop(color, $color, $hover-alpha);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring($color);
+  }
+}

package/scss/abstracts/search-form/_variables.scss

@@ -0,0 +1,39 @@
+// ============================================
+// SEARCH FORM — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/search-form/_variables.scss
+// ============================================
+
+////
+/// Переменные формы поиска
+/// Токены дизайна для размеров и позиционирования
+/// @group search-form
+/// @author MOEXP Team
+////
+
+// ─────────────────────────────────────────
+// РАЗМЕРЫ ФОРМЫ
+// ─────────────────────────────────────────
+
+/// Ширина формы поиска по умолчанию
+/// @type Length
+/// @group search-form
+$search-form-width: 15rem !default;
+
+/// Высота формы поиска по умолчанию
+/// @type Length
+/// @group search-form
+$search-form-height: 2.5rem !default;
+
+// ─────────────────────────────────────────
+// ИКОНКА
+// ─────────────────────────────────────────
+
+/// Размер иконки поиска
+/// @type Length
+/// @group search-form
+$search-form-icon-size: 1.2rem !default;
+
+/// Отступ справа для иконки
+/// @type Length
+/// @group search-form
+$search-form-icon-offset: 1.25rem !default;