@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/buttons/_variants.scss

@@ -0,0 +1,295 @@
+// ============================================
+// BUTTONS — VARIANTS
+// local/common/theme-moexp/src/scss/abstracts/buttons/_variants.scss
+// ============================================
+
+////
+/// Варианты кнопок
+/// Primary, Secondary, Outline, Ghost, Destructive, Link, Icon
+/// @group buttons-variants
+/// @author MOEXP Team
+////
+
+@use "sass:map";
+@use "../colors";
+@use "../mixins";
+@use "../animations";
+@use "variables" as *;
+@use "base" as *;
+
+// ─────────────────────────────────────────
+// PRIMARY
+// ─────────────────────────────────────────
+
+/// Primary Button — основная CTA кнопка
+/// Акцентный фон, светлый текст
+/// @param {String} $size [md] - Размер: sm, md, lg
+/// @require {mixin} btn-base
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.text-color
+/// @example scss - Hero CTA
+///   .hero__cta {
+///     @include btn-primary('lg');
+///   }
+/// @example scss - Маленькая primary
+///   .card__action {
+///     @include btn-primary('sm');
+///   }
+/// @output Кнопка с accent фоном
+/// @group buttons-variants
+/// @access public
+@mixin btn-primary($size: md) {
+  @include btn-base($size);
+  @include mixins.bg-color(accent);
+  @include mixins.text-color(accent-foreground);
+  border: 1px solid transparent;
+
+  &:hover:not(:disabled) {
+    @include mixins.bg-color(accent, 0.9);
+  }
+}
+
+// ─────────────────────────────────────────
+// SECONDARY
+// ─────────────────────────────────────────
+
+/// Secondary Button — вторичная кнопка
+/// @param {String} $size [md] - Размер: sm, md, lg
+/// @require {mixin} btn-base
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.text-color
+/// @example scss
+///   .form__cancel {
+///     @include btn-secondary;
+///   }
+/// @output Кнопка с secondary фоном
+/// @group buttons-variants
+/// @access public
+@mixin btn-secondary($size: md) {
+  @include btn-base($size);
+  @include mixins.bg-color(secondary);
+  @include mixins.text-color(secondary-foreground);
+
+  &:hover:not(:disabled) {
+    @include mixins.bg-color(secondary, 0.85);
+  }
+}
+
+// ─────────────────────────────────────────
+// OUTLINE
+// ─────────────────────────────────────────
+
+/// Outline Button — кнопка с обводкой
+/// Полупрозрачный фон, цветная обводка
+/// @param {String} $color [primary-foreground] - Цвет текста и обводки
+/// @param {String} $size [md] - Размер: sm, md, lg
+/// @require {mixin} btn-base
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.text-color
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss - На тёмном фоне
+///   .hero__secondary-cta {
+///     @include btn-outline('primary-foreground');
+///   }
+/// @example scss - На светлом фоне
+///   .card__learn-more {
+///     @include btn-outline('primary', 'sm');
+///   }
+/// @output Кнопка с обводкой
+/// @group buttons-variants
+/// @access public
+@mixin btn-outline($color: primary-foreground, $size: md) {
+  @include btn-base($size);
+  @include mixins.bg-color($color, 0.1);
+  @include mixins.text-color($color);
+  @include mixins.border-hsl(1px, solid, $color, 0.3);
+
+  &:hover:not(:disabled) {
+    @include mixins.bg-color($color, 0.2);
+    @include mixins.border-color-hsl($color, 0.5);
+  }
+}
+
+// ─────────────────────────────────────────
+// GHOST
+// ─────────────────────────────────────────
+
+/// Ghost Button — прозрачная кнопка
+/// Без фона, только текст, hover показывает фон
+/// @param {String} $color [foreground] - Цвет текста
+/// @param {String} $size [md] - Размер: sm, md, lg
+/// @require {mixin} btn-base
+/// @require {mixin} mixins.text-color
+/// @require {mixin} mixins.bg-color
+/// @example scss
+///   .nav__link {
+///     @include btn-ghost('foreground', 'sm');
+///   }
+/// @example scss - В меню
+///   .menu__item {
+///     @include btn-ghost;
+///   }
+/// @output Прозрачная кнопка
+/// @group buttons-variants
+/// @access public
+@mixin btn-ghost($color: foreground, $size: md) {
+  @include btn-base($size);
+  background: transparent;
+  @include mixins.text-color($color);
+
+  &:hover:not(:disabled) {
+    @include mixins.bg-color($color, 0.1);
+  }
+}
+
+// ─────────────────────────────────────────
+// DESTRUCTIVE
+// ─────────────────────────────────────────
+
+/// Destructive Button — кнопка опасного действия
+/// Красный фон для удаления, отмены и т.п.
+/// @param {String} $size [md] - Размер: sm, md, lg
+/// @require {mixin} btn-base
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.text-color
+/// @example scss
+///   .modal__delete {
+///     @include btn-destructive;
+///   }
+/// @example scss - Маленькая
+///   .item__remove {
+///     @include btn-destructive('sm');
+///   }
+/// @output Красная кнопка
+/// @group buttons-variants
+/// @access public
+@mixin btn-destructive($size: md) {
+  @include btn-base($size);
+  @include mixins.bg-color(destructive);
+  @include mixins.text-color(destructive-foreground);
+
+  &:hover:not(:disabled) {
+    @include mixins.bg-color(destructive, 0.9);
+  }
+}
+
+// ─────────────────────────────────────────
+// LINK
+// ─────────────────────────────────────────
+
+/// Link Button — кнопка-ссылка
+/// Выглядит как текстовая ссылка с подчёркиванием
+/// @param {String} $color [accent] - Цвет ссылки
+/// @require {mixin} mixins.text-color
+/// @require {mixin} mixins.hsl-prop
+/// @require {mixin} animations.transition
+/// @require {variable} $btn-font-weight
+/// @require {variable} $btn-transition-duration
+/// @example scss
+///   .card__read-more {
+///     @include btn-link;
+///   }
+/// @example scss - Кастомный цвет
+///   .footer__link {
+///     @include btn-link('foreground-muted');
+///   }
+/// @output Кнопка в стиле ссылки
+/// @group buttons-variants
+/// @access public
+@mixin btn-link($color: accent) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  font-weight: $btn-font-weight;
+  @include mixins.text-color($color);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+
+  @include animations.transition((color, text-decoration-thickness), $btn-transition-duration);
+
+  &:hover:not(:disabled) {
+    text-decoration-thickness: 2px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid;
+    @include mixins.hsl-prop(outline-color, $color, 0.5);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+}
+
+// ─────────────────────────────────────────
+// ICON
+// ─────────────────────────────────────────
+
+/// Icon Button — круглая кнопка только с иконкой
+/// @param {String} $size [md] - Размер: sm (32px), md (40px), lg (48px)
+/// @param {String} $color [foreground-muted] - Цвет иконки
+/// @param {String} $color-hover [accent] - Цвет иконки при hover
+/// @require {mixin} mixins.text-color
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.focus-ring
+/// @require {mixin} animations.transition
+/// @require {variable} $btn-transition-duration
+/// @example scss - Кнопка закрытия
+///   .modal__close {
+///     @include btn-icon('md', 'foreground-muted', 'destructive');
+///   }
+/// @example scss - Социальные иконки
+///   .social__link {
+///     @include btn-icon('lg', 'foreground', 'accent');
+///   }
+/// @output Круглая кнопка-иконка
+/// @group buttons-variants
+/// @access public
+@mixin btn-icon($size: md, $color: foreground-muted, $color-hover: accent) {
+  $sizes: (
+    sm: 32px,
+    md: 40px,
+    lg: 48px,
+  );
+  $icon-size: map.get($sizes, $size);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: $icon-size;
+  height: $icon-size;
+  padding: 0;
+
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+
+  @include mixins.text-color($color);
+  @include animations.transition((color, background-color, transform), $btn-transition-duration);
+
+  &:hover:not(:disabled) {
+    @include mixins.text-color($color-hover);
+    @include mixins.bg-color($color-hover, 0.1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring($color-hover);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/scss/abstracts/callout/_base.scss

@@ -0,0 +1,142 @@
+// ============================================
+// CALLOUT — BASE
+// local/common/theme-moexp/src/scss/abstracts/callout/_base.scss
+// ============================================
+
+////
+/// Базовые миксины callout блока
+/// @group callout-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../patterns";
+@use "../breakpoints";
+@use "../../font-vars" as fonts;
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// БАЗОВЫЕ МИКСИНЫ
+// ─────────────────────────────────────────
+
+/// Базовые стили контейнера
+/// @param {String} $bg-color [primary] - Цвет фона
+/// @output Стили секции
+/// @group callout-base
+@mixin base($bg-color: primary) {
+  position: relative;
+  overflow: hidden;
+  padding-top: $padding-y;
+  padding-bottom: $padding-y;
+
+  @include mixins.bg-color($bg-color);
+  @include patterns.pattern-container;
+}
+
+/// Паттерн
+/// @output Псевдоэлемент с паттерном
+/// @group callout-base
+@mixin pattern {
+  @include patterns.pattern-stripes;
+}
+
+/// Контейнер контента
+/// @output Flex центрирование
+/// @group callout-base
+@mixin container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/// Контент (иконка + текст)
+/// @output Flex layout
+/// @group callout-base
+@mixin content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $gap;
+  padding-top: spacing.$spacing-xl;
+  padding-bottom: spacing.$spacing-xl;
+
+  @include breakpoints.md-down {
+    flex-direction: column;
+    text-align: center;
+    gap: spacing.$gap-lg;
+  }
+}
+
+/// Иконка
+/// @param {String} $color [accent] - Цвет иконки
+/// @output Стили иконки
+/// @group callout-base
+@mixin icon($color: accent) {
+  width: $icon-size;
+  height: $icon-size;
+  flex-shrink: 0;
+
+  @include mixins.text-color($color);
+}
+
+/// Текстовый блок
+/// @param {String} $color [primary-foreground] - Цвет текста
+/// @output Стили текста
+/// @group callout-base
+@mixin text($color: primary-foreground) {
+  line-height: typography.$line-height-normal;
+
+  @include mixins.text-color($color);
+}
+
+/// Заголовок
+/// @param {String} $color [primary-foreground] - Цвет
+/// @param {String} $font-family [fonts.$font-literata] - Шрифт
+/// @output Стили заголовка
+/// @group callout-base
+@mixin title($color: primary-foreground, $font-family: fonts.$font-literata) {
+  font-family: $font-family;
+  font-size: typography.$font-size-2xl;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-snug;
+  margin-bottom: spacing.$spacing-xs;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-xl;
+  }
+}
+
+/// Подзаголовок
+/// @param {String} $color [primary-foreground] - Цвет
+/// @param {Number} $alpha [0.8] - Прозрачность
+/// @output Стили подзаголовка
+/// @group callout-base
+@mixin subtitle($color: primary-foreground, $alpha: 0.8) {
+  font-size: typography.$font-size-xl;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color, $alpha);
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-lg;
+  }
+}
+
+/// Кнопка действия
+/// @output Стили обёртки кнопки
+/// @group callout-base
+@mixin action {
+  flex-shrink: 0;
+  margin-left: spacing.$spacing-xl;
+
+  @include breakpoints.md-down {
+    margin-left: 0;
+    margin-top: spacing.$spacing-md;
+  }
+}

package/scss/abstracts/callout/_index.scss

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

package/scss/abstracts/callout/_variables.scss

@@ -0,0 +1,27 @@
+// ============================================
+// CALLOUT — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/callout/_variables.scss
+// ============================================
+
+////
+/// Переменные callout блока
+/// @group callout-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+
+/// Вертикальный padding
+/// @type Number
+/// @group callout-variables
+$padding-y: spacing.$spacing-xl !default;
+
+/// Размер иконки
+/// @type Number
+/// @group callout-variables
+$icon-size: spacing.$spacing-2xl !default;
+
+/// Gap между иконкой и текстом
+/// @type Number
+/// @group callout-variables
+$gap: spacing.$gap-xl !default;

package/scss/abstracts/cards/_base.scss

@@ -0,0 +1,74 @@
+// ============================================
+// CARDS — BASE
+// local/common/theme-moexp/src/scss/abstracts/cards/_base.scss
+// ============================================
+
+////
+/// Базовые миксины карточек
+/// Фундамент для всех вариантов карточек
+/// @group cards-base
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../radius";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// БАЗОВЫЙ МИКСИН
+// ─────────────────────────────────────────
+
+/// Базовые стили карточки
+/// Включает: position, padding, background, border, radius, shadow
+/// @param {String} $bg [background-card] - Цвет фона
+/// @param {Number} $bg-alpha [0.95] - Прозрачность фона
+/// @param {String} $border-color [border] - Цвет бордера
+/// @param {Number} $border-alpha [0.5] - Прозрачность бордера
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} radius.rounded
+/// @require {mixin} mixins.shadow-sm
+/// @example scss - Базовая карточка
+///   .card {
+///     @include card-base;
+///   }
+/// @example scss - Кастомный фон
+///   .card-dark {
+///     @include card-base('primary', 0.9, 'primary', 0.3);
+///   }
+/// @output Базовые стили карточки
+/// @group cards-base
+/// @access public
+@mixin card-base($bg: background-card, $bg-alpha: $card-bg-alpha, $border-color: border, $border-alpha: $card-border-alpha) {
+  position: relative;
+  overflow: hidden;
+
+  padding: $card-padding;
+
+  @include mixins.bg-color($bg, $bg-alpha);
+  @include mixins.border-hsl(1px, solid, $border-color, $border-alpha);
+  @include radius.rounded(lg);
+  @include mixins.shadow-sm;
+}
+
+// ─────────────────────────────────────────
+// GLASS CARD
+// ─────────────────────────────────────────
+
+/// Карточка с glassmorphism эффектом (backdrop-blur)
+/// @param {String} $bg [background-card] - Цвет фона
+/// @param {Number} $bg-alpha [0.8] - Прозрачность фона (ниже для эффекта стекла)
+/// @param {Number} $blur [8px] - Степень размытия
+/// @require {mixin} card-base
+/// @example scss
+///   .glass-card {
+///     @include card-glass('background-card', 0.7, 12px);
+///   }
+/// @output Карточка с backdrop-filter: blur
+/// @group cards-base
+/// @access public
+@mixin card-glass($bg: background-card, $bg-alpha: 0.8, $blur: 8px) {
+  @include card-base($bg, $bg-alpha);
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+}

package/scss/abstracts/cards/_blur.scss

@@ -0,0 +1,65 @@
+// ============================================
+// CARDS — BLUR
+// local/common/theme-moexp/src/scss/abstracts/cards/_blur.scss
+// ============================================
+
+////
+/// Backdrop blur эффекты
+/// Glassmorphism утилиты
+/// @group cards-blur
+/// @author MOEXP Team
+////
+
+// ─────────────────────────────────────────
+// BASE BLUR
+// ─────────────────────────────────────────
+
+/// Backdrop blur эффект
+/// @param {Number} $blur [8px] - Степень размытия
+/// @example scss
+///   .overlay {
+///     @include backdrop-blur(12px);
+///   }
+/// @output backdrop-filter: blur(); -webkit-backdrop-filter: blur();
+/// @group cards-blur
+/// @access public
+@mixin backdrop-blur($blur: 8px) {
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+}
+
+// ─────────────────────────────────────────
+// BLUR VARIANTS
+// ─────────────────────────────────────────
+
+/// Маленький blur (4px)
+/// @require {mixin} backdrop-blur
+/// @group cards-blur
+/// @access public
+@mixin backdrop-blur-sm {
+  @include backdrop-blur(4px);
+}
+
+/// Средний blur (12px)
+/// @require {mixin} backdrop-blur
+/// @group cards-blur
+/// @access public
+@mixin backdrop-blur-md {
+  @include backdrop-blur(12px);
+}
+
+/// Большой blur (16px)
+/// @require {mixin} backdrop-blur
+/// @group cards-blur
+/// @access public
+@mixin backdrop-blur-lg {
+  @include backdrop-blur(16px);
+}
+
+/// Очень большой blur (24px)
+/// @require {mixin} backdrop-blur
+/// @group cards-blur
+/// @access public
+@mixin backdrop-blur-xl {
+  @include backdrop-blur(24px);
+}