@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/cards/_sizes.scss

@@ -0,0 +1,52 @@
+// ============================================
+// CARDS — SIZES
+// local/common/theme-moexp/src/scss/abstracts/cards/_sizes.scss
+// ============================================
+
+////
+/// Размеры карточек
+/// Модификаторы padding и radius
+/// @group cards-sizes
+/// @author MOEXP Team
+////
+
+@use "../radius";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// SMALL
+// ─────────────────────────────────────────
+
+/// Маленькая карточка — меньше padding и radius
+/// @require {mixin} radius.rounded
+/// @example scss
+///   .card--sm {
+///     @include card-base;
+///     @include card-sm;
+///   }
+/// @output padding: 1rem; border-radius: md;
+/// @group cards-sizes
+/// @access public
+@mixin card-sm {
+  padding: $card-padding-sm;
+  @include radius.rounded(md);
+}
+
+// ─────────────────────────────────────────
+// LARGE
+// ─────────────────────────────────────────
+
+/// Большая карточка — больше padding и radius
+/// @require {mixin} radius.rounded
+/// @example scss
+///   .card--lg {
+///     @include card-base;
+///     @include card-lg;
+///   }
+/// @output padding: 2rem; border-radius: xl;
+/// @group cards-sizes
+/// @access public
+@mixin card-lg {
+  padding: $card-padding-lg;
+  @include radius.rounded(xl);
+}

package/scss/abstracts/cards/_variables.scss

@@ -0,0 +1,72 @@
+// ============================================
+// CARDS — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/cards/_variables.scss
+// ============================================
+
+////
+/// Переменные системы карточек
+/// Токены дизайна для размеров, отступов и анимаций
+/// @group cards-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+@use "../radius";
+
+// ─────────────────────────────────────────
+// БАЗОВЫЕ ПЕРЕМЕННЫЕ
+// ─────────────────────────────────────────
+
+/// Стандартный padding карточки (1.5rem / 24px)
+/// @type Number
+/// @group cards-variables
+$card-padding: spacing.$spacing-lg !default;
+
+/// Маленький padding карточки (1rem / 16px)
+/// @type Number
+/// @group cards-variables
+$card-padding-sm: spacing.$spacing-md !default;
+
+/// Большой padding карточки (2rem / 32px)
+/// @type Number
+/// @group cards-variables
+$card-padding-lg: spacing.$spacing-xl !default;
+
+/// Border-radius карточки (8px)
+/// @type Number
+/// @group cards-variables
+$card-radius: radius.$radius-lg !default;
+
+/// Прозрачность border по умолчанию
+/// @type Number
+/// @group cards-variables
+$card-border-alpha: 0.5 !default;
+
+/// Прозрачность фона по умолчанию
+/// @type Number
+/// @group cards-variables
+$card-bg-alpha: 0.95 !default;
+
+/// Длительность transition карточки
+/// @type Number
+/// @group cards-variables
+$card-transition-duration: 300ms !default;
+
+// ─────────────────────────────────────────
+// FEATURED CARD ПЕРЕМЕННЫЕ
+// ─────────────────────────────────────────
+
+/// Высота изображения featured card (16rem / 256px)
+/// @type Number
+/// @group cards-featured
+$card-featured-image-height: 16rem !default;
+
+/// Padding контента featured card (2rem / 32px)
+/// @type Number
+/// @group cards-featured
+$card-featured-padding: spacing.$spacing-xl !default;
+
+/// Длительность transition featured card
+/// @type Number
+/// @group cards-featured
+$card-featured-transition: 300ms !default;

package/scss/abstracts/cards/_variants.scss

@@ -0,0 +1,143 @@
+// ============================================
+// CARDS — VARIANTS
+// local/common/theme-moexp/src/scss/abstracts/cards/_variants.scss
+// ============================================
+
+////
+/// Готовые варианты карточек
+/// Interactive, Service, Static, Link, Glass-interactive
+/// @group cards-variants
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../radius";
+@use "../animations";
+@use "variables" as *;
+@use "base" as *;
+@use "hover" as *;
+
+// ─────────────────────────────────────────
+// INTERACTIVE
+// ─────────────────────────────────────────
+
+/// Стандартная интерактивная карточка
+/// Соответствует Tailwind: rounded-lg border shadow-sm p-6
+/// hover:shadow-lg transition-all bg-card/95 border-border/50 hover:border-accent/50
+/// @require {mixin} card-base
+/// @require {mixin} card-hover-shadow
+/// @example scss
+///   .service-card {
+///     @include card-interactive;
+///   }
+/// @output Полные стили интерактивной карточки
+/// @group cards-variants
+/// @access public
+@mixin card-interactive {
+  @include card-base;
+  @include card-hover-shadow(true);
+  cursor: pointer;
+}
+
+// ─────────────────────────────────────────
+// SERVICE
+// ─────────────────────────────────────────
+
+/// Service Card — карточка услуги
+/// Из оригинального Tailwind шаблона
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} radius.rounded-var
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.shadow-lg
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss
+///   .services__item {
+///     @include card-service;
+///   }
+/// @output Карточка услуги с hover эффектами
+/// @group cards-variants
+/// @access public
+@mixin card-service {
+  position: relative;
+  overflow: hidden;
+
+  padding: $card-padding;
+
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded-var(-4px); // calc(var(--radius) - 4px)
+
+  @include animations.transition(all, $card-transition-duration, animations.$ease-in-out);
+
+  &:hover {
+    @include mixins.shadow-lg;
+    @include mixins.border-color-hsl(accent, 0.5);
+  }
+}
+
+// ─────────────────────────────────────────
+// GLASS INTERACTIVE
+// ─────────────────────────────────────────
+
+/// Карточка с glassmorphism и интерактивностью
+/// @require {mixin} card-glass
+/// @require {mixin} card-hover-shadow
+/// @example scss
+///   .overlay-card {
+///     @include card-glass-interactive;
+///   }
+/// @output Glass карточка с hover
+/// @group cards-variants
+/// @access public
+@mixin card-glass-interactive {
+  @include card-glass;
+  @include card-hover-shadow(true);
+  cursor: pointer;
+}
+
+// ─────────────────────────────────────────
+// STATIC
+// ─────────────────────────────────────────
+
+/// Простая карточка без hover эффектов
+/// Для статичного контента
+/// @require {mixin} card-base
+/// @example scss
+///   .info-card {
+///     @include card-static;
+///   }
+/// @output Статичная карточка
+/// @group cards-variants
+/// @access public
+@mixin card-static {
+  @include card-base(background-card, 1, border, 0.3);
+}
+
+// ─────────────────────────────────────────
+// LINK
+// ─────────────────────────────────────────
+
+/// Карточка-ссылка — вся кликабельная
+/// С focus-visible для accessibility
+/// @require {mixin} card-interactive
+/// @require {mixin} mixins.focus-ring
+/// @example scss
+///   a.project-card {
+///     @include card-link;
+///   }
+/// @example html
+///   <a href="/project" class="project-card">...</a>
+/// @output Кликабельная карточка с focus ring
+/// @group cards-variants
+/// @access public
+@mixin card-link {
+  @include card-interactive;
+  text-decoration: none;
+  color: inherit;
+  display: block;
+
+  &:focus-visible {
+    @include mixins.focus-ring(ring);
+  }
+}

package/scss/abstracts/cards/_vertical.scss

@@ -0,0 +1,218 @@
+// ============================================
+// CARDS — VERTICAL
+// local/common/theme-moexp/src/scss/abstracts/cards/_vertical.scss
+// ============================================
+
+////
+/// Вертикальные карточки (изображение сверху)
+/// Контейнер, изображение, контент, мета, title, description
+/// @group cards-vertical
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../radius";
+@use "../spacing";
+@use "../typography";
+@use "../animations";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// VERTICAL CONTAINER
+// ─────────────────────────────────────────
+
+/// Вертикальная карточка — контейнер
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} radius.rounded
+/// @require {mixin} mixins.shadow-sm
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.shadow-lg
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss
+///   .article-card {
+///     @include card-vertical;
+///   }
+/// @output Контейнер вертикальной карточки
+/// @group cards-vertical
+/// @access public
+@mixin card-vertical {
+  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), $card-transition-duration, animations.$ease-in-out);
+
+  &:hover {
+    @include mixins.shadow-lg;
+    @include mixins.border-color-hsl(accent, 0.5);
+  }
+}
+
+// ─────────────────────────────────────────
+// VERTICAL IMAGE
+// ─────────────────────────────────────────
+
+/// Обёртка изображения вертикальной карточки
+/// @param {Number} $height [12rem] - Высота изображения
+/// @param {Number} $aspect-ratio [null] - Или aspect-ratio (16/9, 4/3)
+/// @example scss - С фиксированной высотой
+///   .article-card__image-wrap {
+///     @include card-vertical-image-wrap(10rem);
+///   }
+/// @example scss - С aspect-ratio
+///   .article-card__image-wrap {
+///     @include card-vertical-image-wrap($aspect-ratio: 16/9);
+///   }
+/// @output Контейнер изображения
+/// @group cards-vertical
+/// @access public
+@mixin card-vertical-image-wrap($height: 12rem, $aspect-ratio: null) {
+  position: relative;
+  overflow: hidden;
+
+  @if $aspect-ratio {
+    aspect-ratio: $aspect-ratio;
+  } @else {
+    height: $height;
+  }
+}
+
+/// Изображение вертикальной карточки с hover
+/// @require {mixin} animations.transition
+/// @example scss
+///   .article-card__image {
+///     @include card-vertical-image;
+///   }
+/// @output Изображение со scale при hover
+/// @group cards-vertical
+/// @access public
+@mixin card-vertical-image {
+  width: 100%;
+  height: 100%;
+  // object-fit: cover;
+
+  @include animations.transition(transform, $card-transition-duration, animations.$ease-out);
+
+  [class*="card"]:hover &,
+  a:hover & {
+    transform: scale(1.05);
+  }
+}
+
+// ─────────────────────────────────────────
+// VERTICAL CONTENT
+// ─────────────────────────────────────────
+
+/// Контент вертикальной карточки
+/// @param {Number} $padding [$card-padding] - Padding
+/// @example scss
+///   .article-card__content {
+///     @include card-vertical-content;
+///   }
+/// @output Padding контента
+/// @group cards-vertical
+/// @access public
+@mixin card-vertical-content($padding: $card-padding) {
+  padding: $padding;
+}
+
+/// Мета вертикальной карточки (дата, категория)
+/// @param {String} $color [accent-on-light] - Цвет текста
+/// @require {mixin} mixins.text-color
+/// @example scss
+///   .article-card__meta {
+///     @include card-vertical-meta;
+///   }
+/// @output Flex строка с иконкой
+/// @group cards-vertical
+/// @access public
+@mixin card-vertical-meta($color: accent-on-light) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+
+  @include mixins.text-color($color);
+  font-size: typography.$font-size-sm;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+}
+
+/// Заголовок вертикальной карточки с hover
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $hover-color [accent-on-light] - Цвет при hover
+/// @require {mixin} mixins.text-color
+/// @require {mixin} animations.transition
+/// @example scss
+///   .article-card__title {
+///     @include card-vertical-title;
+///   }
+/// @output Заголовок с hover цветом
+/// @group cards-vertical
+/// @access public
+@mixin card-vertical-title($color: foreground, $hover-color: accent-on-light) {
+  font-weight: typography.$font-weight-semibold;
+  font-size: typography.$font-size-lg;
+  line-height: typography.$line-height-snug;
+  margin-bottom: 0.5rem;
+
+  @include mixins.text-color($color);
+  @include animations.transition(color, $card-transition-duration);
+
+  [class*="card"]:hover &,
+  a:hover & {
+    @include mixins.text-color($hover-color);
+  }
+}
+
+/// Описание вертикальной карточки с truncate
+/// @param {String} $color [foreground-muted] - Цвет текста
+/// @param {Number} $lines [3] - Количество строк для truncate
+/// @require {mixin} mixins.text-color
+/// @require {mixin} mixins.text-truncate
+/// @example scss
+///   .article-card__description {
+///     @include card-vertical-description('foreground-muted', 2);
+///   }
+/// @output Описание с line-clamp
+/// @group cards-vertical
+/// @access public
+@mixin card-vertical-description($color: foreground-muted, $lines: 3) {
+  font-size: typography.$font-size-sm;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color);
+  @include mixins.text-truncate($lines);
+}
+
+// ─────────────────────────────────────────
+// IMAGE COVER UTILITY
+// ─────────────────────────────────────────
+
+/// Изображение cover — заполняет контейнер
+/// @example scss
+///   .card__img {
+///     @include image-cover;
+///   }
+/// @output width: 100%; height: 100%; object-fit: cover;
+/// @group cards-vertical
+/// @access public
+@mixin image-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/scss/abstracts/chip/_base.scss

@@ -0,0 +1,99 @@
+////
+/// Chip Base — базовые миксины
+/// @group chip-base
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../animations";
+@use "../spacing";
+@use "variables" as *;
+
+// ============================================
+// CHIP BASE
+// ============================================
+
+/// Базовый chip — контейнер с flex-выравниванием
+/// @param {String} $color [$chip-color-default] - Цвет текста
+/// @example scss
+///   .my-chip {
+///     @include chip-base;
+///   }
+/// @output inline-flex контейнер с gap и transition
+/// @group chip-base
+/// @access public
+@mixin chip-base($color: $chip-color-default) {
+  display: inline-flex;
+  align-items: center;
+  font-size: inherit;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+
+  // Сброс для button
+  background: transparent;
+  border: none;
+  padding: 0;
+
+  @include mixins.flex-gap(spacing.$gap-xs);
+  @include mixins.text-color($color);
+  @include animations.transition-colors;
+  @include animations.focus-visible-ring;
+}
+
+// ============================================
+// CHIP ICON
+// ============================================
+
+/// Иконка внутри chip
+/// @param {Number} $size [$chip-icon-size] - Размер иконки
+/// @example scss
+///   .my-chip__icon {
+///     @include chip-icon;
+///   }
+/// @output SVG-иконка с fill: currentColor
+/// @group chip-base
+/// @access public
+@mixin chip-icon($size: $chip-icon-size) {
+  width: $size;
+  height: $size;
+  min-width: $size;
+  min-height: $size;
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+// ============================================
+// CHIP TEXT
+// ============================================
+
+/// Текст внутри chip
+/// @example scss
+///   .my-chip__text {
+///     @include chip-text;
+///   }
+/// @output Текстовый элемент
+/// @group chip-base
+/// @access public
+@mixin chip-text {
+  line-height: inherit;
+}
+
+// ============================================
+// CHIP DISABLED
+// ============================================
+
+/// Disabled состояние chip
+/// @param {Number} $opacity [$chip-opacity-disabled] - Прозрачность
+/// @example scss
+///   .my-chip:disabled {
+///     @include chip-disabled;
+///   }
+/// @output opacity + pointer-events: none
+/// @group chip-base
+/// @access public
+@mixin chip-disabled($opacity: $chip-opacity-disabled) {
+  opacity: $opacity;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/scss/abstracts/chip/_icon.scss

@@ -0,0 +1,73 @@
+////
+/// Chip Icon — миксины для работы с иконками
+/// @group chip-icon
+/// @author MOEXP Team
+////
+
+@use "variables" as *;
+
+// ============================================
+// ICON ONLY
+// ============================================
+
+/// Chip только с иконкой (без текста)
+/// Требует aria-label для accessibility
+/// @example scss
+///   .social-icon {
+///     @include chip-base;
+///     @include chip-icon-only;
+///   }
+/// @output Минимальные стили (наследует от base)
+/// @group chip-icon
+/// @access public
+@mixin chip-icon-only {
+  // Базовые стили наследуются от chip-base
+  // Можно добавить специфичные стили при необходимости
+}
+
+// ============================================
+// DUAL ICON (для toggle)
+// ============================================
+
+/// Контейнер для двух иконок (toggle состояния)
+/// Используется для accessibility-toggle, theme-toggle
+/// @param {String} $active-class ['accessibility-icon--active'] - Класс активной иконки
+/// @example scss
+///   .toggle-chip {
+///     @include chip-base;
+///     @include chip-dual-icon;
+///   }
+/// @example html
+///   <button class="toggle-chip">
+///     <svg class="toggle-chip__icon toggle-chip__icon--default">...</svg>
+///     <svg class="toggle-chip__icon toggle-chip__icon--active">...</svg>
+///   </button>
+/// @output Скрытие/показ иконок через CSS
+/// @group chip-icon
+/// @access public
+@mixin chip-dual-icon($active-class: "accessibility-icon--active") {
+  // Активная иконка скрыта по умолчанию
+  .#{$active-class} {
+    display: none;
+  }
+}
+
+/// Показать активную иконку (для состояния active)
+/// @param {String} $default-class ['accessibility-icon--default'] - Класс дефолтной иконки
+/// @param {String} $active-class ['accessibility-icon--active'] - Класс активной иконки
+/// @example scss
+///   .toggle-chip.is-active {
+///     @include chip-dual-icon-active;
+///   }
+/// @output Переключение видимости иконок
+/// @group chip-icon
+/// @access public
+@mixin chip-dual-icon-active($default-class: "accessibility-icon--default", $active-class: "accessibility-icon--active") {
+  .#{$default-class} {
+    display: none;
+  }
+
+  .#{$active-class} {
+    display: block;
+  }
+}

package/scss/abstracts/chip/_index.scss

@@ -0,0 +1,21 @@
+////
+/// Chip Index — точка входа модуля
+/// @group chip
+/// @author MOEXP Team
+////
+
+/// Переменные
+/// @access public
+@forward "variables";
+
+/// Базовые миксины
+/// @access public
+@forward "base";
+
+/// Варианты оформления
+/// @access public
+@forward "variants";
+
+/// Работа с иконками
+/// @access public
+@forward "icon";