@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/_animations.scss

@@ -0,0 +1,819 @@
+////
+/// Анимации и переходы темы MOEXP
+/// Timing, easing, keyframes, transition и hover/focus миксины
+/// @group animations
+/// @author MOEXP Team
+////
+
+// ============================================
+// ANIMATIONS / TRANSITIONS
+// local\common\theme-moexp\src\scss\abstracts\_animations.scss
+// ============================================
+
+@use "sass:list";
+@use "mixins";
+@use "colors";
+@use "sass:meta";
+
+// ============================================
+// TIMING
+// ============================================
+
+/// Мгновенная длительность (50ms)
+/// @type Number
+/// @group animations-timing
+$duration-instant: 50ms;
+
+/// Быстрая длительность (150ms) — для микровзаимодействий
+/// @type Number
+/// @group animations-timing
+$duration-fast: 150ms;
+
+/// Нормальная длительность (250ms) — стандарт
+/// @type Number
+/// @group animations-timing
+$duration-normal: 250ms;
+
+/// Медленная длительность (350ms) — для крупных элементов
+/// @type Number
+/// @group animations-timing
+$duration-slow: 350ms;
+
+/// Очень медленная длительность (500ms) — для модалок, оверлеев
+/// @type Number
+/// @group animations-timing
+$duration-slower: 500ms;
+
+/// Алиас: XS длительность
+/// @type Number
+/// @group animations-timing
+/// @alias duration-instant
+$duration-xs: $duration-instant;
+
+/// Алиас: SM длительность
+/// @type Number
+/// @group animations-timing
+/// @alias duration-fast
+$duration-sm: $duration-fast;
+
+/// Алиас: MD длительность
+/// @type Number
+/// @group animations-timing
+/// @alias duration-normal
+$duration-md: $duration-normal;
+
+/// Алиас: LG длительность
+/// @type Number
+/// @group animations-timing
+/// @alias duration-slow
+$duration-lg: $duration-slow;
+
+/// Алиас: XL длительность
+/// @type Number
+/// @group animations-timing
+/// @alias duration-slower
+$duration-xl: $duration-slower;
+
+// ============================================
+// EASING
+// ============================================
+
+/// Линейная функция времени
+/// @type String
+/// @group animations-easing
+$ease-linear: linear;
+
+/// Ease-in — медленное начало, быстрый конец
+/// @type String
+/// @group animations-easing
+$ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+/// Ease-out — быстрое начало, медленный конец (рекомендуется для UI)
+/// @type String
+/// @group animations-easing
+$ease-out: cubic-bezier(0, 0, 0.2, 1);
+
+/// Ease-in-out — медленные начало и конец
+/// @type String
+/// @group animations-easing
+$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+/// Bounce — с отскоком в конце
+/// @type String
+/// @group animations-easing
+$ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+/// Smooth — плавная, естественная
+/// @type String
+/// @group animations-easing
+$ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+/// Snappy — резкая, энергичная
+/// @type String
+/// @group animations-easing
+$ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+/// Функция времени по умолчанию
+/// @type String
+/// @group animations-easing
+$ease-default: $ease-smooth;
+
+/// Длительность по умолчанию
+/// @type Number
+/// @group animations-timing
+$duration-default: $duration-normal;
+
+// ============================================
+// KEYFRAMES
+// ============================================
+
+/// Плавное появление (opacity 0→1)
+/// @group animations-keyframes
+/// @output @keyframes fade-in
+@mixin keyframes-fade-in {
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+/// Появление снизу вверх с fade
+/// @group animations-keyframes
+/// @output @keyframes fade-in-up
+@mixin keyframes-fade-in-up {
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+/// Появление сверху вниз с fade
+/// @group animations-keyframes
+/// @output @keyframes fade-in-down
+@mixin keyframes-fade-in-down {
+  @keyframes fade-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+/// Появление с увеличением масштаба
+/// @group animations-keyframes
+/// @output @keyframes fade-in-scale
+@mixin keyframes-fade-in-scale {
+  @keyframes fade-in-scale {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+/// Выезд справа
+/// @group animations-keyframes
+/// @output @keyframes slide-in-right
+@mixin keyframes-slide-in-right {
+  @keyframes slide-in-right {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+}
+
+/// Выезд слева
+/// @group animations-keyframes
+/// @output @keyframes slide-in-left
+@mixin keyframes-slide-in-left {
+  @keyframes slide-in-left {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+}
+
+/// Бесконечное вращение (для лоадеров)
+/// @group animations-keyframes
+/// @output @keyframes spin
+@mixin keyframes-spin {
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+/// Пульсация opacity (для скелетонов)
+/// @group animations-keyframes
+/// @output @keyframes pulse
+@mixin keyframes-pulse {
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+}
+
+/// Подпрыгивание
+/// @group animations-keyframes
+/// @output @keyframes bounce
+@mixin keyframes-bounce {
+  @keyframes bounce {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-25%);
+    }
+  }
+}
+
+// ============================================
+// TRANSITION MIXINS
+// ============================================
+
+/// Универсальный transition с поддержкой списка свойств
+/// @param {String | List} $properties [all] - Свойство или список свойств
+/// @param {Number} $duration [$duration-default] - Длительность
+/// @param {String} $easing [$ease-default] - Функция времени
+/// @param {Number} $delay [0ms] - Задержка
+/// @example scss - Одно свойство
+///   .element {
+///     @include transition(opacity);
+///   }
+///   // => transition: opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
+/// @example scss - Несколько свойств
+///   .button {
+///     @include transition((color, background-color), $duration-fast);
+///   }
+///   // => transition: color 150ms ..., background-color 150ms ...;
+/// @example scss - Кастомный easing
+///   .modal {
+///     @include transition(transform, $duration-slow, $ease-bounce);
+///   }
+/// @output transition: property duration easing delay;
+/// @group animations-transition
+/// @access public
+@mixin transition($properties: all, $duration: $duration-default, $easing: $ease-default, $delay: 0ms) {
+  $result: ();
+
+  @if meta.type-of($properties) == list {
+    @each $prop in $properties {
+      $result: list.append($result, $prop $duration $easing $delay, comma);
+    }
+  } @else {
+    $result: $properties $duration $easing $delay;
+  }
+
+  transition: $result;
+}
+
+/// Отключение transition
+/// @example scss
+///   .no-animation {
+///     @include transition-none;
+///   }
+/// @output transition: none;
+/// @group animations-transition
+/// @access public
+@mixin transition-none {
+  transition: none;
+}
+
+/// Transition для интерактивных элементов (кнопки, ссылки)
+/// Включает: color, background-color, border-color, box-shadow, transform
+/// @require {mixin} transition
+/// @example scss
+///   .button {
+///     @include transition-interactive;
+///   }
+/// @output transition для 5 свойств
+/// @group animations-transition
+/// @access public
+@mixin transition-interactive {
+  @include transition((color, background-color, border-color, box-shadow, transform), $duration-fast);
+}
+
+/// Transition только для transform
+/// @param {Number} $duration [$duration-default] - Длительность
+/// @require {mixin} transition
+/// @example scss
+///   .card {
+///     @include transition-transform;
+///
+///     &:hover {
+///       transform: scale(1.02);
+///     }
+///   }
+/// @output transition: transform duration ease-out;
+/// @group animations-transition
+/// @access public
+@mixin transition-transform($duration: $duration-default) {
+  @include transition(transform, $duration, $ease-out);
+}
+
+/// Transition только для opacity
+/// @param {Number} $duration [$duration-default] - Длительность
+/// @require {mixin} transition
+/// @example scss
+///   .fade-element {
+///     @include transition-opacity;
+///   }
+/// @output transition: opacity duration easing;
+/// @group animations-transition
+/// @access public
+@mixin transition-opacity($duration: $duration-default) {
+  @include transition(opacity, $duration);
+}
+
+/// Transition для цветовых свойств
+/// Включает: color, background-color, border-color
+/// @param {Number} $duration [$duration-fast] - Длительность
+/// @require {mixin} transition
+/// @example scss
+///   .link {
+///     @include transition-colors;
+///   }
+/// @output transition для 3 цветовых свойств
+/// @group animations-transition
+/// @access public
+@mixin transition-colors($duration: $duration-fast) {
+  @include transition((color, background-color, border-color), $duration);
+}
+
+// ============================================
+// ANIMATION MIXINS
+// ============================================
+
+/// Применяет заранее определённую keyframe-анимацию
+/// @param {String} $name - Имя keyframes
+/// @param {Number} $duration [$duration-default] - Длительность
+/// @param {String} $easing [$ease-default] - Функция времени
+/// @param {String} $fill-mode [forwards] - animation-fill-mode
+/// @example scss
+///   .modal {
+///     @include animate(fade-in-scale, $duration-slow);
+///   }
+/// @output animation: name duration easing fill-mode;
+/// @group animations-animate
+/// @access public
+@mixin animate($name, $duration: $duration-default, $easing: $ease-default, $fill-mode: forwards) {
+  animation: $name $duration $easing $fill-mode;
+}
+
+/// Анимация fade-in
+/// @param {Number} $duration [$duration-default] - Длительность
+/// @require {mixin} animate
+/// @example scss
+///   .element {
+///     @include animate-fade-in;
+///   }
+/// @group animations-animate
+/// @access public
+@mixin animate-fade-in($duration: $duration-default) {
+  @include animate(fade-in, $duration);
+}
+
+/// Анимация fade-in с движением снизу
+/// @param {Number} $duration [$duration-default] - Длительность
+/// @require {mixin} animate
+/// @example scss
+///   .card {
+///     @include animate-fade-in-up;
+///   }
+/// @group animations-animate
+/// @access public
+@mixin animate-fade-in-up($duration: $duration-default) {
+  @include animate(fade-in-up, $duration, $ease-out);
+}
+
+/// Анимация fade-in с масштабированием
+/// @param {Number} $duration [$duration-default] - Длительность
+/// @require {mixin} animate
+/// @example scss
+///   .modal {
+///     @include animate-fade-in-scale;
+///   }
+/// @group animations-animate
+/// @access public
+@mixin animate-fade-in-scale($duration: $duration-default) {
+  @include animate(fade-in-scale, $duration, $ease-out);
+}
+
+/// Бесконечное вращение (для лоадеров)
+/// @param {Number} $duration [1s] - Длительность одного оборота
+/// @example scss
+///   .spinner {
+///     @include animate-spin;
+///   }
+/// @output animation: spin 1s linear infinite;
+/// @group animations-animate
+/// @access public
+@mixin animate-spin($duration: 1s) {
+  animation: spin $duration linear infinite;
+}
+
+/// Бесконечная пульсация (для скелетонов)
+/// @param {Number} $duration [2s] - Длительность цикла
+/// @example scss
+///   .skeleton {
+///     @include animate-pulse;
+///   }
+/// @output animation: pulse 2s ease-in-out infinite;
+/// @group animations-animate
+/// @access public
+@mixin animate-pulse($duration: 2s) {
+  animation: pulse $duration $ease-in-out infinite;
+}
+
+// ============================================
+// HOVER STATES
+// ============================================
+
+/// Hover с изменением цвета текста
+/// @param {String} $color [accent] - Имя цвета при hover
+/// @param {Number} $duration [$duration-fast] - Длительность transition
+/// @require {mixin} transition
+/// @require {mixin} mixins.text-color
+/// @example scss
+///   .link {
+///     @include hover-text-color('accent');
+///   }
+/// @output transition + &:hover { color }
+/// @group animations-hover
+/// @access public
+@mixin hover-text-color($color: accent, $duration: $duration-fast) {
+  @include transition(color, $duration);
+
+  &:hover {
+    @include mixins.text-color($color);
+  }
+}
+
+/// Hover с изменением фона
+/// @param {String} $color [accent] - Имя цвета при hover
+/// @param {Number} $alpha [1] - Прозрачность
+/// @param {Number} $duration [$duration-fast] - Длительность transition
+/// @require {mixin} transition
+/// @require {mixin} mixins.bg-color
+/// @example scss
+///   .menu-item {
+///     @include hover-bg-color('accent', 0.1);
+///   }
+/// @output transition + &:hover { background-color }
+/// @group animations-hover
+/// @access public
+@mixin hover-bg-color($color: accent, $alpha: 1, $duration: $duration-fast) {
+  @include transition(background-color, $duration);
+
+  &:hover {
+    @include mixins.bg-color($color, $alpha);
+  }
+}
+
+/// Hover с масштабированием
+/// @param {Number} $scale [1.05] - Масштаб при hover
+/// @param {Boolean} $lift [false] - Добавить тень при hover
+/// @require {mixin} transition-transform
+/// @require {mixin} mixins.shadow-md
+/// @example scss - Без тени
+///   .card {
+///     @include hover-scale(1.02);
+///   }
+/// @example scss - С тенью
+///   .card {
+///     @include hover-scale(1.02, true);
+///   }
+/// @output transition + &:hover { transform, box-shadow? }
+/// @group animations-hover
+/// @access public
+@mixin hover-scale($scale: 1.05, $lift: false) {
+  @include transition-transform($duration-fast);
+
+  @if $lift {
+    @include transition((transform, box-shadow), $duration-fast);
+  }
+
+  &:hover {
+    transform: scale($scale);
+
+    @if $lift {
+      @include mixins.shadow-md();
+    }
+  }
+}
+
+/// Hover lift — подъём вверх с тенью
+/// @param {Number} $y [-2px] - Смещение по Y
+/// @require {mixin} transition
+/// @require {mixin} mixins.shadow-lg
+/// @example scss
+///   .card {
+///     @include hover-lift(-4px);
+///   }
+/// @output transition + &:hover { transform, box-shadow }
+/// @group animations-hover
+/// @access public
+@mixin hover-lift($y: -2px) {
+  @include transition((transform, box-shadow), $duration-fast);
+
+  &:hover {
+    transform: translateY($y);
+    @include mixins.shadow-lg();
+  }
+}
+
+// ============================================
+// FOCUS STATES
+// ============================================
+
+/// Базовый focus ring (только для :focus-visible)
+/// @param {String} $color [ring] - Имя цвета кольца
+/// @param {Number} $width [2px] - Толщина кольца
+/// @param {Number} $offset [2px] - Отступ от элемента
+/// @require {mixin} mixins.focus-ring
+/// @example scss
+///   .button {
+///     @include focus-visible-ring;
+///   }
+/// @example scss - Кастомный цвет
+///   .link {
+///     @include focus-visible-ring('accent', 2px, 4px);
+///   }
+/// @output &:focus { outline: none } + &:focus-visible { outline }
+/// @group animations-focus
+/// @access public
+@mixin focus-visible-ring($color: ring, $width: 2px, $offset: 2px) {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring($color, $width, $offset);
+  }
+}
+
+/// Focus для инпутов — с изменением border и ring-shadow
+/// @param {String} $color [ring] - Имя цвета
+/// @require {mixin} transition
+/// @require {mixin} mixins.border-color-hsl
+/// @require {mixin} mixins.box-shadow-hsl
+/// @example scss
+///   .input {
+///     @include input-focus;
+///   }
+/// @output transition + &:focus { border-color, box-shadow }
+/// @group animations-focus
+/// @access public
+@mixin input-focus($color: ring) {
+  @include transition((border-color, box-shadow), $duration-fast);
+
+  &:focus {
+    outline: none;
+    @include mixins.border-color-hsl($color);
+    @include mixins.box-shadow-hsl($color, 0.25, 0, 0, 0, 3px);
+  }
+}
+
+/// Focus для инпутов — лёгкий вариант (только border)
+/// @param {String} $color [ring] - Имя цвета
+/// @require {mixin} transition
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss
+///   .input--minimal {
+///     @include input-focus-light;
+///   }
+/// @output transition + &:focus { border-color }
+/// @group animations-focus
+/// @access public
+@mixin input-focus-light($color: ring) {
+  @include transition(border-color, $duration-fast);
+
+  &:focus {
+    outline: none;
+    @include mixins.border-color-hsl($color);
+  }
+}
+
+// ============================================
+// BUTTON STATES
+// ============================================
+
+/// Полный набор состояний для кнопки
+/// Включает: base, hover, active, focus-visible
+/// @param {String} $bg [primary] - Цвет фона
+/// @param {String} $bg-hover [null] - Цвет фона при hover (null = brightness filter)
+/// @param {String} $color [primary-foreground] - Цвет текста
+/// @param {Number} $scale-active [0.98] - Масштаб при active
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.text-color
+/// @require {mixin} transition-interactive
+/// @require {mixin} focus-visible-ring
+/// @example scss - Базовая кнопка
+///   .btn-primary {
+///     @include button-states;
+///   }
+/// @example scss - Кастомные цвета
+///   .btn-accent {
+///     @include button-states('accent', 'accent-on-light', 'accent-foreground');
+///   }
+/// @output background, color, transition, &:hover, &:active, &:focus-visible
+/// @group animations-button
+/// @access public
+@mixin button-states($bg: primary, $bg-hover: null, $color: primary-foreground, $scale-active: 0.98) {
+  @include mixins.bg-color($bg);
+  @include mixins.text-color($color);
+  @include transition-interactive;
+
+  @if $bg-hover {
+    &:hover {
+      @include mixins.bg-color($bg-hover);
+    }
+  } @else {
+    &:hover {
+      filter: brightness(1.1);
+    }
+  }
+
+  &:active {
+    transform: scale($scale-active);
+  }
+
+  @include focus-visible-ring;
+}
+
+/// Ghost button — прозрачный с обводкой
+/// @param {String} $color [primary] - Цвет текста и обводки
+/// @require {mixin} mixins.text-color
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} mixins.border-color-hsl
+/// @require {mixin} transition-interactive
+/// @require {mixin} focus-visible-ring
+/// @example scss
+///   .btn-ghost {
+///     @include button-ghost;
+///   }
+/// @example scss - Акцентный ghost
+///   .btn-ghost-accent {
+///     @include button-ghost('accent');
+///   }
+/// @output transparent bg, border, &:hover { bg, border-color }
+/// @group animations-button
+/// @access public
+@mixin button-ghost($color: primary) {
+  background: transparent;
+  @include mixins.text-color($color);
+  @include mixins.border-hsl(1px, solid, $color, 0.3);
+  @include transition-interactive;
+
+  &:hover {
+    @include mixins.bg-color($color, 0.1);
+    @include mixins.border-color-hsl($color, 0.5);
+  }
+
+  @include focus-visible-ring($color);
+}
+
+// ============================================
+// ICON INTERACTIONS
+// ============================================
+
+/// Hover для иконки — масштаб + цвет
+/// @param {String} $color-hover [accent] - Цвет при hover
+/// @param {Number} $scale [1.1] - Масштаб при hover
+/// @require {mixin} transition
+/// @require {mixin} mixins.text-color
+/// @require {mixin} focus-visible-ring
+/// @example scss
+///   .social-icon {
+///     @include icon-hover('accent', 1.15);
+///   }
+/// @output transition + &:hover { transform, color } + focus-ring
+/// @group animations-icon
+/// @access public
+@mixin icon-hover($color-hover: accent, $scale: 1.1) {
+  @include transition((color, transform), $duration-fast);
+
+  &:hover {
+    transform: scale($scale);
+    @include mixins.text-color($color-hover);
+  }
+
+  @include focus-visible-ring;
+}
+
+/// Кнопка-иконка — круглая с hover-эффектом
+/// @param {Number} $size [40px] - Размер кнопки
+/// @param {String} $color [foreground-muted] - Цвет иконки
+/// @param {String} $color-hover [accent] - Цвет при hover
+/// @require {mixin} mixins.button-reset
+/// @require {mixin} mixins.text-color
+/// @require {mixin} mixins.bg-color
+/// @require {mixin} transition-interactive
+/// @require {mixin} focus-visible-ring
+/// @example scss
+///   .icon-btn {
+///     @include icon-button(48px, 'foreground', 'primary');
+///   }
+/// @output Круглая кнопка с hover bg и color
+/// @group animations-icon
+/// @access public
+@mixin icon-button($size: 40px, $color: foreground-muted, $color-hover: accent) {
+  @include mixins.button-reset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  @include mixins.text-color($color);
+  @include transition-interactive;
+
+  &:hover {
+    @include mixins.text-color($color-hover);
+    @include mixins.bg-color($color-hover, 0.1);
+  }
+
+  @include focus-visible-ring;
+}
+
+// ============================================
+// ACCESSIBILITY
+// ============================================
+
+/// Отключение анимаций для prefers-reduced-motion
+/// Применяется к конкретному элементу
+/// @example scss
+///   .animated-element {
+///     @include animate-fade-in;
+///     @include disable-animation;
+///   }
+/// @output @media (prefers-reduced-motion) { animation: none; transition: none; }
+/// @group animations-a11y
+/// @access public
+@mixin disable-animation {
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    transition: none;
+
+    &::before,
+    &::after {
+      animation: none;
+      transition: none;
+    }
+  }
+}
+
+/// Глобальное отключение анимаций для prefers-reduced-motion
+/// Применить один раз в base/_reset.scss
+/// @example scss
+///   // В base/_reset.scss
+///   @include disable-all-animations;
+/// @output @media (prefers-reduced-motion) { *, *::before, *::after { ... } }
+/// @group animations-a11y
+/// @access public
+@mixin disable-all-animations {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}