@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/breadcrumb/_base.scss

@@ -0,0 +1,194 @@
+// ============================================
+// BREADCRUMB — BASE
+// local/common/theme-moexp/src/scss/abstracts/breadcrumb/_base.scss
+// ============================================
+
+////
+/// Базовые миксины breadcrumb
+/// @group breadcrumb-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../animations";
+@use "../breakpoints";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// CONTAINER (nav)
+// ─────────────────────────────────────────
+
+/// Базовые стили контейнера nav
+/// @param {Number} $mb [$margin-bottom] - Отступ снизу
+/// @output margin-bottom
+/// @group breadcrumb-base
+@mixin base($mb: $margin-bottom) {
+  margin-bottom: $mb;
+}
+
+// ─────────────────────────────────────────
+// LIST (ol)
+// ─────────────────────────────────────────
+
+/// Стили списка ol с fallback для gap
+/// @param {String} $color [foreground-muted] - Цвет текста
+/// @output Flex с gap и fallback
+/// @group breadcrumb-base
+@mixin list($color: foreground-muted) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  font-size: typography.$font-size-sm;
+  line-height: typography.$line-height-normal;
+  overflow-wrap: break-word;
+
+  @include mixins.text-color($color);
+
+  // Fallback для gap (mobile)
+  > li {
+    margin-right: $gap-mobile;
+    margin-bottom: $gap-vertical;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  // Modern gap (mobile)
+  @supports (gap: 1px) {
+    gap: $gap-vertical $gap-mobile;
+
+    > li {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  // Desktop: увеличенный gap
+  @include breakpoints.sm {
+    // Fallback
+    > li {
+      margin-right: $gap;
+    }
+
+    // Modern
+    @supports (gap: 1px) {
+      gap: $gap-vertical $gap;
+
+      > li {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// ITEM (li)
+// ─────────────────────────────────────────
+
+/// Стили элемента li
+/// @output Inline-flex с выравниванием
+/// @group breadcrumb-base
+@mixin item {
+  display: inline-flex;
+  align-items: center;
+}
+
+// ─────────────────────────────────────────
+// LINK (a)
+// ─────────────────────────────────────────
+
+/// Стили ссылки
+/// @param {String} $hover-color [foreground] - Цвет при hover
+/// @output Ссылка с transition и focus
+/// @group breadcrumb-base
+@mixin link($hover-color: foreground) {
+  color: inherit;
+  text-decoration: none;
+
+  @include animations.transition(color, $transition-duration);
+
+  &:hover {
+    @include mixins.text-color($hover-color);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring(ring, 2px, 2px);
+  }
+}
+
+// ─────────────────────────────────────────
+// SEPARATOR (li с svg)
+// ─────────────────────────────────────────
+
+/// Стили разделителя
+/// @param {String} $color [foreground-muted] - Цвет иконки
+/// @param {Number} $size [$separator-size] - Размер иконки
+/// @output Стили для контейнера SVG
+/// @group breadcrumb-base
+@mixin separator($color: foreground-muted, $size: $separator-size) {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  @include mixins.text-color($color);
+
+  svg {
+    width: $size;
+    height: $size;
+  }
+}
+
+// ─────────────────────────────────────────
+// CURRENT (span)
+// ─────────────────────────────────────────
+
+/// Стили текущей страницы
+/// @param {String} $color [foreground] - Цвет текста
+/// @output Стили текущего элемента
+/// @group breadcrumb-base
+@mixin current($color: foreground) {
+  font-weight: typography.$font-weight-normal;
+
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// VARIANTS
+// ─────────────────────────────────────────
+
+/// Вариант на тёмном фоне
+/// @output Переопределение цветов для dark theme
+/// @group breadcrumb-base
+@mixin on-dark {
+  @include mixins.text-color(primary-foreground, 0.6);
+}
+
+/// Ссылка на тёмном фоне
+/// @output Hover цвет для dark
+/// @group breadcrumb-base
+@mixin link-on-dark {
+  &:hover {
+    @include mixins.text-color(primary-foreground);
+  }
+}
+
+/// Разделитель на тёмном фоне
+/// @output Цвет разделителя для dark
+/// @group breadcrumb-base
+@mixin separator-on-dark {
+  @include mixins.text-color(primary-foreground, 0.4);
+}
+
+/// Текущий элемент на тёмном фоне
+/// @output Цвет current для dark
+/// @group breadcrumb-base
+@mixin current-on-dark {
+  @include mixins.text-color(primary-foreground);
+}

package/scss/abstracts/breadcrumb/_index.scss

@@ -0,0 +1,12 @@
+// ============================================
+// BREADCRUMB — INDEX
+// local/common/theme-moexp/src/scss/abstracts/breadcrumb/_index.scss
+// ============================================
+
+////
+/// Экспорт модуля breadcrumb
+/// @group breadcrumb
+////
+
+@forward "variables";
+@forward "base";

package/scss/abstracts/breadcrumb/_variables.scss

@@ -0,0 +1,54 @@
+// ============================================
+// BREADCRUMB — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/breadcrumb/_variables.scss
+// ============================================
+
+////
+/// Переменные компонента breadcrumb
+/// @group breadcrumb-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+@use "../typography";
+@use "../animations";
+
+/// Отступ снизу компонента
+/// @type Number
+/// @group breadcrumb-variables
+$margin-bottom: spacing.$spacing-lg !default;
+
+/// Gap между элементами (desktop)
+/// @type Number
+/// @group breadcrumb-variables
+$gap: spacing.$gap-sm !default;
+
+/// Gap между элементами (mobile)
+/// @type Number
+/// @group breadcrumb-variables
+$gap-mobile: spacing.$spacing-xs !default;
+
+/// Вертикальный gap при переносе
+/// @type Number
+/// @group breadcrumb-variables
+$gap-vertical: spacing.$spacing-2xs !default;
+
+/// Размер иконки-разделителя
+/// @type Number
+/// @group breadcrumb-variables
+$separator-size: 0.875rem !default;
+
+/// Размер иконки (sm)
+/// @type Number
+/// @group breadcrumb-variables
+$separator-size-sm: 0.75rem !default;
+
+/// Размер иконки (lg)
+/// @type Number
+/// @group breadcrumb-variables
+$separator-size-lg: 1rem !default;
+
+/// Transition duration
+/// @type Number
+/// @group breadcrumb-variables
+$transition-duration: animations.$duration-fast !default;

package/scss/abstracts/buttons/_base.scss

@@ -0,0 +1,92 @@
+// ============================================
+// BUTTONS — BASE
+// local/common/theme-moexp/src/scss/abstracts/buttons/_base.scss
+// ============================================
+
+////
+/// Базовый миксин кнопки
+/// Фундамент для всех вариантов кнопок
+/// @group buttons-base
+/// @author MOEXP Team
+////
+
+@use "sass:map";
+@use "../colors";
+@use "../mixins";
+@use "../animations";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// БАЗОВЫЙ МИКСИН
+// ─────────────────────────────────────────
+
+/// Базовые стили кнопки — используется всеми вариантами
+/// Включает: display, padding, typography, transition, focus, active, disabled
+/// @param {String} $size [md] - Размер кнопки: sm, md, lg
+/// @require {variable} $btn-sizes
+/// @require {variable} $btn-font-weight
+/// @require {variable} $btn-line-height
+/// @require {variable} $btn-transition-duration
+/// @require {mixin} animations.transition
+/// @require {mixin} mixins.focus-ring
+/// @example scss - Создание кастомной кнопки
+///   .my-button {
+///     @include btn-base('lg');
+///     background: purple;
+///     color: white;
+///   }
+/// @example scss - Использование в варианте
+///   @mixin btn-custom($size: md) {
+///     @include btn-base($size);
+///     // кастомные стили...
+///   }
+/// @output Базовые стили кнопки с states (focus, active, disabled)
+/// @group buttons-base
+/// @access public
+@mixin btn-base($size: md) {
+  $config: map.get($btn-sizes, $size);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+
+  padding: map.get($config, padding-y) map.get($config, padding-x);
+
+  font-family: inherit;
+  font-weight: $btn-font-weight;
+  font-size: map.get($config, font-size);
+  line-height: $btn-line-height;
+  text-decoration: none;
+  white-space: nowrap;
+
+  border: none;
+  border-radius: map.get($config, border-radius);
+  cursor: pointer;
+
+  @include animations.transition((background-color, color, border-color, box-shadow, transform), $btn-transition-duration);
+
+  // Focus — убираем дефолтный outline
+  &:focus {
+    outline: none;
+  }
+
+  // Focus-visible — кастомный ring для клавиатурной навигации
+  &:focus-visible {
+    @include mixins.focus-ring(ring);
+  }
+
+  // Active — микро-эффект нажатия
+  &:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  // Disabled — все варианты отключённого состояния
+  &:disabled,
+  &[disabled],
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/scss/abstracts/buttons/_index.scss

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

package/scss/abstracts/buttons/_modifiers.scss

@@ -0,0 +1,114 @@
+// ============================================
+// BUTTONS — MODIFIERS
+// local/common/theme-moexp/src/scss/abstracts/buttons/_modifiers.scss
+// ============================================
+
+////
+/// Модификаторы кнопок
+/// Дополнительные миксины для расширения вариантов
+/// @group buttons-modifiers
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// FULL WIDTH
+// ─────────────────────────────────────────
+
+/// Кнопка на всю ширину контейнера
+/// @example scss
+///   .form__submit {
+///     @include btn-primary;
+///     @include btn-full;
+///   }
+/// @example html
+///   <button class="form__submit">Отправить</button>
+/// @output width: 100%;
+/// @group buttons-modifiers
+/// @access public
+@mixin btn-full {
+  width: 100%;
+}
+
+// ─────────────────────────────────────────
+// WITH ICON
+// ─────────────────────────────────────────
+
+/// Кнопка с иконкой — правильные размеры для svg/icon
+/// @example scss
+///   .btn-with-arrow {
+///     @include btn-primary;
+///     @include btn-with-icon;
+///   }
+/// @example html
+///   <button class="btn-with-arrow">
+///     Next <svg>...</svg>
+///   </button>
+/// @output svg, .icon { flex-shrink: 0; width/height: 1.25em }
+/// @group buttons-modifiers
+/// @access public
+@mixin btn-with-icon {
+  svg,
+  .icon {
+    flex-shrink: 0;
+    width: 1.25em;
+    height: 1.25em;
+  }
+}
+
+// ─────────────────────────────────────────
+// LOADING
+// ─────────────────────────────────────────
+
+/// Loading состояние кнопки — спиннер поверх текста
+/// Скрывает текст, показывает анимированный спиннер
+/// @require {mixin} mixins.border-color-hsl
+/// @example scss
+///   .btn-submit {
+///     @include btn-primary;
+///
+///     &.is-loading {
+///       @include btn-loading;
+///     }
+///   }
+/// @example html
+///   <button class="btn-submit is-loading">Submitting...</button>
+/// @output Спиннер поверх прозрачного текста
+/// @group buttons-modifiers
+/// @access public
+@mixin btn-loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 1.25em;
+    height: 1.25em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: btn-spin 0.6s linear infinite;
+
+    // Возвращаем цвет для спиннера
+    @include mixins.border-color-hsl(accent-foreground, 0.8);
+    border-right-color: transparent;
+  }
+}
+
+// ─────────────────────────────────────────
+// KEYFRAMES
+// ─────────────────────────────────────────
+
+/// Keyframes для спиннера (вызвать один раз в компоненте)
+/// @group buttons-modifiers
+@mixin btn-spin-keyframes {
+  @keyframes btn-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/scss/abstracts/buttons/_variables.scss

@@ -0,0 +1,98 @@
+// ============================================
+// BUTTONS — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/buttons/_variables.scss
+// ============================================
+
+////
+/// Переменные системы кнопок
+/// Токены дизайна для размеров, отступов и типографики кнопок
+/// @group buttons-variables
+/// @author MOEXP Team
+////
+
+@use "sass:map";
+
+// ─────────────────────────────────────────
+// БАЗОВЫЕ ПЕРЕМЕННЫЕ
+// ─────────────────────────────────────────
+
+/// Вертикальный padding кнопки по умолчанию
+/// @type Number
+/// @group buttons-variables
+$btn-padding-y: 0.75rem !default;
+
+/// Горизонтальный padding кнопки по умолчанию
+/// @type Number
+/// @group buttons-variables
+$btn-padding-x: 2rem !default;
+
+/// Размер шрифта кнопки по умолчанию
+/// @type Number
+/// @group buttons-variables
+$btn-font-size: 1rem !default;
+
+/// Начертание шрифта кнопки
+/// @type Number
+/// @group buttons-variables
+$btn-font-weight: 500 !default;
+
+/// Высота строки кнопки
+/// @type Number
+/// @group buttons-variables
+$btn-line-height: 1.5 !default;
+
+/// Border-radius кнопки по умолчанию
+/// @type Number
+/// @group buttons-variables
+$btn-border-radius: 0.375rem !default;
+
+/// Длительность transition кнопки
+/// @type Number
+/// @group buttons-variables
+$btn-transition-duration: 200ms !default;
+
+// ─────────────────────────────────────────
+// КАРТА РАЗМЕРОВ
+// ─────────────────────────────────────────
+
+/// Карта размеров кнопок
+/// @type Map
+/// @prop {Map} sm - Маленькая кнопка
+/// @prop {Number} sm.padding-y [0.5rem] - Вертикальный padding
+/// @prop {Number} sm.padding-x [1rem] - Горизонтальный padding
+/// @prop {Number} sm.font-size [0.875rem] - Размер шрифта (14px)
+/// @prop {Number} sm.border-radius [0.25rem] - Скругление
+/// @prop {Map} md - Средняя кнопка (по умолчанию)
+/// @prop {Number} md.padding-y [0.75rem] - Вертикальный padding
+/// @prop {Number} md.padding-x [2rem] - Горизонтальный padding
+/// @prop {Number} md.font-size [1rem] - Размер шрифта (16px)
+/// @prop {Number} md.border-radius [0.375rem] - Скругление
+/// @prop {Map} lg - Большая кнопка
+/// @prop {Number} lg.padding-y [1rem] - Вертикальный padding
+/// @prop {Number} lg.padding-x [2.5rem] - Горизонтальный padding
+/// @prop {Number} lg.font-size [1.125rem] - Размер шрифта (18px)
+/// @prop {Number} lg.border-radius [0.5rem] - Скругление
+/// @example scss - Получение конфига размера
+///   $config: map.get($btn-sizes, 'lg');
+///   padding: map.get($config, 'padding-y') map.get($config, 'padding-x');
+/// @group buttons-variables
+$btn-sizes: (
+  sm: (
+    padding-y: 0.5rem,
+    padding-x: 1rem,
+    font-size: 0.875rem,
+    border-radius: 0.25rem,
+  ),
+  md: (
+    padding-y: 0.75rem,
+    padding-x: 2rem,
+    font-size: 1rem,
+    border-radius: 0.375rem,
+  ),
+  lg: (
+    padding-y: 1rem,
+    padding-x: 2.5rem,
+    font-size: 1.125rem,
+    border-radius: 0.5rem,
+  ),
+) !default;