@mr.slonn/my-scss-theme 1.0.0

package/scss/components/_news-card.scss

@@ -0,0 +1,303 @@
+////
+/// News Card — карточка новости
+/// Featured вариант с изображением и compact без изображения
+/// @group components-news-card
+/// @author MOEXP Team
+////
+
+@use "../abstracts/typography";
+@use "../abstracts/spacing";
+@use "../abstracts/mixins";
+@use "../abstracts/radius";
+@use "../abstracts/animations";
+@use "../abstracts/breakpoints";
+@use "../abstracts/cards";
+@use "../font-vars" as fonts;
+
+// ============================================
+// ПЕРЕМЕННЫЕ
+// ============================================
+
+/// Высота изображения featured
+/// @type Number
+/// @group components-news-card
+$news-card-image-height: 16rem !default;
+
+/// Padding контента
+/// @type Number
+/// @group components-news-card
+$news-card-padding: spacing.$spacing-xl !default;
+
+/// Transition duration
+/// @type Number
+/// @group components-news-card
+$news-card-transition: 300ms !default;
+
+// ============================================
+// МИКСИНЫ
+// ============================================
+
+/// Базовые стили карточки
+/// @output Стили контейнера
+/// @group components-news-card
+@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);
+  }
+}
+
+/// Grid layout для featured
+/// @param {String} $image-position [left] - Позиция изображения
+/// @output Grid раскладка
+/// @group components-news-card
+@mixin news-card-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;
+      }
+    }
+  }
+}
+
+/// Обёртка изображения
+/// @output Стили контейнера изображения
+/// @group components-news-card
+@mixin news-card-image-wrap {
+  position: relative;
+  height: $news-card-image-height;
+  overflow: hidden;
+
+  @include breakpoints.md {
+    height: auto;
+    min-height: $news-card-image-height;
+  }
+}
+
+/// Изображение с hover
+/// @output Стили изображения
+/// @group components-news-card
+@mixin news-card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  @include animations.transition(transform, $news-card-transition, animations.$ease-out);
+
+  .news-card:hover & {
+    transform: scale(1.05);
+  }
+}
+
+/// Контент карточки
+/// @output Flex layout
+/// @group components-news-card
+@mixin news-card-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: $news-card-padding;
+}
+
+/// Мета-информация (дата)
+/// @param {String} $color [accent-on-light] - Цвет
+/// @output Стили meta
+/// @group components-news-card
+@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;
+  }
+}
+
+/// Заголовок с hover
+/// @param {String} $color [foreground] - Цвет
+/// @param {String} $hover-color [accent-on-light] - Цвет при hover
+/// @output Стили заголовка
+/// @group components-news-card
+@mixin news-card-title($color: foreground, $hover-color: accent-on-light) {
+  font-family: fonts.$font-literata;
+  font-weight: typography.$font-weight-bold;
+  font-size: typography.$font-size-2xl;
+  line-height: typography.$line-height-tight;
+  margin-bottom: spacing.$spacing-md;
+
+  @include mixins.text-color($color);
+  @include animations.transition(color, $news-card-transition);
+
+  .news-card:hover & {
+    @include mixins.text-color($hover-color);
+  }
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-xl;
+  }
+}
+
+/// Описание
+/// @param {String} $color [foreground-muted] - Цвет
+/// @output Стили описания
+/// @group components-news-card
+@mixin news-card-description($color: foreground-muted) {
+  font-size: typography.$font-size-base;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color);
+}
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.news-card {
+  @include news-card-base;
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__grid {
+    @include news-card-grid(left);
+  }
+
+  &__image-wrap {
+    @include news-card-image-wrap;
+  }
+
+  &__image {
+    @include news-card-image;
+  }
+
+  &__content {
+    @include news-card-content;
+  }
+
+  &__meta {
+    @include news-card-meta(accent-on-light);
+  }
+
+  &__title {
+    @include news-card-title(foreground, accent-on-light);
+  }
+
+  &__description {
+    @include news-card-description(foreground-muted);
+  }
+
+  // ──────────────────────────────
+  // Изображение справа
+  // ──────────────────────────────
+
+  &--image-right {
+    .news-card__grid {
+      @include news-card-grid(right);
+    }
+  }
+
+  // ──────────────────────────────
+  // Компактный вариант (без изображения)
+  // ──────────────────────────────
+
+  &--compact {
+    .news-card__content {
+      padding: spacing.$spacing-lg;
+    }
+
+    .news-card__title {
+      font-size: typography.$font-size-lg;
+      margin-bottom: spacing.$spacing-sm;
+
+      @include breakpoints.md-down {
+        font-size: typography.$font-size-base;
+      }
+    }
+
+    .news-card__meta {
+      margin-bottom: spacing.$spacing-sm;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      span {
+        font-size: typography.$font-size-sm;
+      }
+    }
+
+    .news-card__description {
+      font-size: typography.$font-size-sm;
+    }
+  }
+
+  // ──────────────────────────────
+  // На тёмном фоне
+  // ──────────────────────────────
+
+  &--on-dark {
+    @include mixins.bg-color(primary, 0.1);
+    @include mixins.border-hsl(1px, solid, primary-foreground, 0.2);
+
+    &:hover {
+      @include mixins.border-color-hsl(accent, 0.6);
+    }
+
+    .news-card__meta {
+      @include mixins.text-color(accent);
+    }
+
+    .news-card__title {
+      @include mixins.text-color(primary-foreground);
+
+      .news-card:hover & {
+        @include mixins.text-color(accent);
+      }
+    }
+
+    .news-card__description {
+      @include mixins.text-color(primary-foreground, 0.75);
+    }
+  }
+}

package/scss/components/_project-card.scss

@@ -0,0 +1,93 @@
+////
+/// Project Card — карточка проекта
+/// CSS-классы компонента
+/// @group components-project-card
+/// @author MOEXP Team
+////
+
+@use "../abstracts/project-card" as project;
+@use "../abstracts/spacing";
+@use "../abstracts/mixins";
+@use "../abstracts/animations";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.project-card {
+  @include project.base;
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__year {
+    @include project.year(background-section, foreground-muted);
+  }
+
+  &__image-wrap {
+    @include project.image-wrap;
+  }
+
+  &__image {
+    @include project.image;
+
+    .project-card:hover & {
+      transform: scale(1.05);
+    }
+  }
+
+  &__content {
+    @include project.content;
+  }
+
+  &__meta {
+    @include project.meta(project-card-meta-color);
+  }
+
+  &__title {
+    @include project.title(foreground, accent-on-light);
+
+    .project-card:hover & {
+      @include mixins.text-color(accent-on-light);
+    }
+  }
+
+  &__description {
+    @include project.description(foreground-muted, 2);
+  }
+
+  // ──────────────────────────────
+  // На тёмном фоне
+  // ──────────────────────────────
+
+  &--on-dark {
+    @include mixins.bg-color(primary, 0.1);
+    @include mixins.border-hsl(1px, solid, primary-foreground, 0.2);
+
+    &:hover {
+      @include mixins.border-color-hsl(accent, 0.6);
+    }
+
+    .project-card__year {
+      @include mixins.bg-color(primary, 0.3);
+      @include mixins.text-color(primary-foreground, 0.9);
+    }
+
+    .project-card__meta {
+      @include mixins.text-color(accent);
+    }
+
+    .project-card__title {
+      @include mixins.text-color(primary-foreground);
+
+      .project-card:hover & {
+        @include mixins.text-color(accent);
+      }
+    }
+
+    .project-card__description {
+      @include mixins.text-color(primary-foreground, 0.75);
+    }
+  }
+}

package/scss/components/_search-form.scss

@@ -0,0 +1,181 @@
+// ============================================
+// SEARCH FORM COMPONENT
+// local\common\theme-moexp\src\scss\components\_search-form.scss
+// ============================================
+
+////
+/// Search Form — форма поиска с иконкой внутри поля
+///
+/// Готовые CSS-классы для использования в HTML.
+/// Размеры задаются на уровне формы (.search-form),
+/// input автоматически занимает 100% пространства.
+///
+/// @group components-search-form
+/// @author MOEXP Team
+/// @since 1.0.0
+///
+/// @example html - Базовая форма (на тёмном фоне)
+///   <form class="search-form">
+///     <label for="search-input" class="visually-hidden">Поиск по сайту</label>
+///     <input
+///       id="search-input"
+///       class="search-form__input"
+///       type="search"
+///       name="q"
+///       placeholder="Поиск..."
+///     />
+///     <button class="search-form__button" type="submit" aria-label="Найти">
+///       <svg class="search-form__icon" aria-hidden="true" focusable="false">
+///         <use xlink:href="sprite.svg#SearchTwotone"></use>
+///       </svg>
+///     </button>
+///   </form>
+////
+
+@use "../abstracts/search-form" as sf;
+@use "../abstracts/mixins";
+@use "../abstracts/animations";
+
+// ============================================
+// BASE
+// ============================================
+
+/// Контейнер формы поиска
+/// @output position: relative, width, height для контейнера
+.search-form {
+  @include sf.search-form-base;
+
+  // ----------------------------------------
+  // INPUT
+  // ----------------------------------------
+
+  /// Поле ввода поиска (занимает 100% формы)
+  /// @output width: 100%, height: 100%, отступы, тема
+  &__input {
+    @include sf.search-form-input-base;
+    @include sf.search-form-input-theme(primary-foreground);
+  }
+
+  // ----------------------------------------
+  // BUTTON
+  // ----------------------------------------
+
+  /// Кнопка поиска (иконка)
+  /// @output Позиционирование, сброс стилей, тема
+  &__button {
+    @include sf.search-form-button-base;
+    @include sf.search-form-button-theme(primary-foreground);
+  }
+
+  // ----------------------------------------
+  // ICON
+  // ----------------------------------------
+
+  /// Иконка внутри кнопки
+  /// @output Наследует стили из button-base
+  &__icon {
+    width: sf.$search-form-icon-size;
+    height: sf.$search-form-icon-size;
+    fill: currentColor;
+    display: block;
+  }
+}
+
+// ============================================
+// SIZE VARIANTS
+// ============================================
+
+/// Маленькая форма поиска
+/// @example html
+///   <form class="search-form search-form--sm">...</form>
+.search-form--sm {
+  width: 12rem;
+  height: 2rem;
+}
+
+/// Большая форма поиска
+/// @example html
+///   <form class="search-form search-form--lg">...</form>
+.search-form--lg {
+  width: 20rem;
+  height: 3rem;
+}
+
+/// Форма на всю ширину контейнера
+/// @example html
+///   <form class="search-form search-form--full">...</form>
+.search-form--full {
+  width: 100%;
+}
+
+// ============================================
+// CONTEXT VARIANTS
+// ============================================
+
+/// Вариант для светлого фона
+.search-form--on-light {
+  .search-form__input {
+    @include sf.search-form-input-theme(search-on-light-color, 0.05, 0.2, 0.4);
+  }
+
+  .search-form__button {
+    @include sf.search-form-button-theme(search-on-light-color);
+  }
+}
+
+/// Вариант для тёмного фона (явное указание)
+.search-form--on-dark {
+  @include mixins.bg-color(primary);
+  .search-form__input {
+    @include sf.search-form-input-theme(primary-foreground);
+  }
+
+  .search-form__button {
+    @include sf.search-form-button-theme(primary-foreground);
+  }
+
+  // ─────────────────────────────────────────
+  // В тёмной теме: остаётся светлым (для контраста с primary фоном)
+  // ─────────────────────────────────────────
+  .dark & {
+    .search-form__input {
+      @include sf.search-form-input-theme(primary-foreground, 0.15, 0.3, 0.5);
+    }
+
+    .search-form__button {
+      @include sf.search-form-button-theme(primary-foreground);
+    }
+  }
+}
+
+// ============================================
+// STATES
+// ============================================
+
+/// Отключённое состояние
+.search-form--disabled,
+.search-form[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/// Автоопределение disabled по состоянию input
+@supports selector(:has(*)) {
+  .search-form:has(input:disabled) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+// .search-overlay {
+//   position: fixed;
+//   inset: 0;
+//   @include mixins.hsl-prop(background-color, "overlay", 0.5);
+//   z-index: 10;
+//   opacity: 0;
+//   transition: opacity 0.3s ease;
+// }
+
+// .search-overlay.is-active {
+//   opacity: 1;
+// }

package/scss/components/_section-title.scss

@@ -0,0 +1,94 @@
+// ============================================
+// SECTION TITLE COMPONENT
+// local/common/theme-moexp/src/scss/components/_section-title.scss
+// ============================================
+
+////
+/// Section Title — компонент заголовка секции
+/// CSS-классы компонента
+/// @group components-section-title
+/// @author MOEXP Team
+////
+
+@use "../abstracts/section-title" as st;
+@use "../abstracts/mixins";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.section-title {
+  @include st.base(center);
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__slogan {
+    @include st.slogan(foreground-muted);
+  }
+
+  &__title {
+    @include st.title(foreground);
+  }
+
+  &__subtitle {
+    @include st.subtitle(foreground);
+  }
+
+  // ──────────────────────────────
+  // Модификатор для тёмного фона
+  // ──────────────────────────────
+
+  &--on-dark {
+    .section-title__slogan {
+      @include mixins.text-color(primary-foreground, 0.7);
+    }
+
+    .section-title__title {
+      @include mixins.text-color(primary-foreground);
+    }
+
+    .section-title__subtitle {
+      @include mixins.text-color(primary-foreground, 0.85);
+    }
+  }
+
+  &--on-accent {
+    .section-title__slogan {
+      @include mixins.text-color(accent-foreground, 0.7);
+    }
+
+    .section-title__title {
+      @include mixins.text-color(accent-foreground);
+    }
+
+    .section-title__subtitle {
+      @include mixins.text-color(accent-foreground, 0.85);
+    }
+  }
+
+  // ──────────────────────────────
+  // Модификаторы выравнивания
+  // ──────────────────────────────
+
+  &--left {
+    @include st.align-left;
+  }
+
+  &--right {
+    @include st.align-right;
+  }
+
+  // ──────────────────────────────
+  // Модификаторы отступов
+  // ──────────────────────────────
+
+  &--compact {
+    @include st.compact;
+  }
+
+  &--no-margin {
+    @include st.no-margin;
+  }
+}