@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/_radius.scss

@@ -0,0 +1,279 @@
+////
+/// Система скругления углов темы MOEXP
+/// Border-radius переменные, функции и миксины
+/// @group radius
+/// @author MOEXP Team
+////
+
+// ============================================
+// BORDER RADIUS SYSTEM
+// local\common\theme-moexp\src\scss\abstracts\_radius.scss
+// ============================================
+
+@use "sass:map";
+@use "sass:meta";
+
+// ─────────────────────────────────────────
+// ПЕРЕМЕННЫЕ (соответствуют Tailwind)
+// ─────────────────────────────────────────
+
+/// Без скругления
+/// @type Number
+/// @group radius
+$radius-none: 0 !default;
+
+/// Скругление SM (2px) — минимальное
+/// @type Number
+/// @group radius
+$radius-sm: 0.125rem !default;
+
+/// Скругление Default (4px) — базовое
+/// @type Number
+/// @group radius
+$radius-default: 0.25rem !default;
+
+/// Скругление MD (6px) — среднее
+/// @type Number
+/// @group radius
+$radius-md: 0.375rem !default;
+
+/// Скругление LG (8px) — стандартное для карточек ⭐
+/// @type Number
+/// @group radius
+$radius-lg: 0.5rem !default;
+
+/// Скругление XL (12px) — увеличенное
+/// @type Number
+/// @group radius
+$radius-xl: 0.75rem !default;
+
+/// Скругление 2XL (16px) — большое
+/// @type Number
+/// @group radius
+$radius-2xl: 1rem !default;
+
+/// Скругление 3XL (24px) — очень большое
+/// @type Number
+/// @group radius
+$radius-3xl: 1.5rem !default;
+
+/// Полное скругление (pill/circle)
+/// @type Number
+/// @group radius
+$radius-full: 9999px !default;
+
+/// Карта всех значений border-radius
+/// @type Map
+/// @prop {Number} none [0] - Без скругления
+/// @prop {Number} sm [0.125rem] - 2px
+/// @prop {Number} default [0.25rem] - 4px
+/// @prop {Number} md [0.375rem] - 6px
+/// @prop {Number} lg [0.5rem] - 8px ⭐
+/// @prop {Number} xl [0.75rem] - 12px
+/// @prop {Number} 2xl [1rem] - 16px
+/// @prop {Number} 3xl [1.5rem] - 24px
+/// @prop {Number} full [9999px] - Pill/Circle
+/// @example scss - Получение значения из карты
+///   border-radius: map.get($radii, 'xl');
+///   // => 0.75rem
+/// @group radius
+$radii: (
+  none: $radius-none,
+  sm: $radius-sm,
+  default: $radius-default,
+  md: $radius-md,
+  lg: $radius-lg,
+  xl: $radius-xl,
+  2xl: $radius-2xl,
+  3xl: $radius-3xl,
+  full: $radius-full,
+) !default;
+
+// ─────────────────────────────────────────
+// CSS CUSTOM PROPERTY
+// ─────────────────────────────────────────
+
+/// Корневая CSS-переменная для динамического радиуса
+/// Используется в calc() для относительных вычислений
+/// @output --radius: 0.5rem (8px)
+/// @group radius
+@mixin radius-root-var {
+  :root {
+    --radius: #{$radius-lg};
+  }
+}
+
+// ─────────────────────────────────────────
+// ФУНКЦИЯ
+// ─────────────────────────────────────────
+
+/// Получить значение радиуса по ключу
+/// @param {String} $size [lg] - Ключ из карты $radii
+/// @return {Number} Значение border-radius
+/// @throw Ошибка если ключ не найден в $radii
+/// @example scss - Базовое использование
+///   border-radius: get-radius('xl');
+///   // => 0.75rem
+/// @example scss - В кастомном свойстве
+///   .modal {
+///     border-radius: get-radius('2xl');
+///   }
+///   // => border-radius: 1rem;
+/// @group radius
+/// @access public
+@function get-radius($size: lg) {
+  $value: map.get($radii, $size);
+
+  @if not $value {
+    @error "Радиус `#{$size}` не найден. Доступные: #{map.keys($radii)}";
+  }
+
+  @return $value;
+}
+
+// ─────────────────────────────────────────
+// МИКСИНЫ
+// ─────────────────────────────────────────
+
+/// Применяет border-radius
+/// Принимает ключ из $radii или числовое значение
+/// @param {String | Number} $size [lg] - Ключ из $radii или число
+/// @require {function} get-radius
+/// @example scss - С ключом
+///   .card {
+///     @include rounded('xl');
+///   }
+///   // => border-radius: 0.75rem;
+/// @example scss - С числом
+///   .custom {
+///     @include rounded(10px);
+///   }
+///   // => border-radius: 10px;
+/// @output border-radius: {value};
+/// @group radius
+/// @access public
+@mixin rounded($size: lg) {
+  @if meta.type-of($size) == number {
+    border-radius: $size;
+  } @else {
+    border-radius: get-radius($size);
+  }
+}
+
+/// Применяет border-radius через CSS-переменную
+/// Позволяет динамически менять радиус через --radius
+/// @param {Number} $offset [0] - Смещение от базового --radius
+/// @example scss - Базовое использование
+///   .card {
+///     @include rounded-var;
+///   }
+///   // => border-radius: var(--radius);
+/// @example scss - С увеличением
+///   .modal {
+///     @include rounded-var(0.5rem);
+///   }
+///   // => border-radius: calc(var(--radius) + 0.5rem);
+/// @example scss - С уменьшением
+///   .button {
+///     @include rounded-var(-0.25rem);
+///   }
+///   // => border-radius: calc(var(--radius) + -0.25rem);
+/// @output border-radius: var(--radius) или calc(var(--radius) + offset);
+/// @group radius
+/// @access public
+@mixin rounded-var($offset: 0) {
+  @if $offset == 0 {
+    border-radius: var(--radius);
+  } @else {
+    border-radius: calc(var(--radius) + #{$offset});
+  }
+}
+
+/// Скругление верхних углов (top-left и top-right)
+/// @param {String} $size [lg] - Ключ из $radii
+/// @require {function} get-radius
+/// @example scss - Табы или хедер карточки
+///   .card__header {
+///     @include rounded-t('lg');
+///   }
+///   // => border-radius: 0.5rem 0.5rem 0 0;
+/// @output border-radius: {r} {r} 0 0;
+/// @group radius
+/// @access public
+@mixin rounded-t($size: lg) {
+  $r: get-radius($size);
+  border-radius: $r $r 0 0;
+}
+
+/// Скругление нижних углов (bottom-left и bottom-right)
+/// @param {String} $size [lg] - Ключ из $radii
+/// @require {function} get-radius
+/// @example scss - Футер карточки
+///   .card__footer {
+///     @include rounded-b('lg');
+///   }
+///   // => border-radius: 0 0 0.5rem 0.5rem;
+/// @output border-radius: 0 0 {r} {r};
+/// @group radius
+/// @access public
+@mixin rounded-b($size: lg) {
+  $r: get-radius($size);
+  border-radius: 0 0 $r $r;
+}
+
+/// Скругление левых углов (top-left и bottom-left)
+/// @param {String} $size [lg] - Ключ из $radii
+/// @require {function} get-radius
+/// @example scss - Левая часть split-button
+///   .btn-group__first {
+///     @include rounded-l('md');
+///   }
+///   // => border-radius: 0.375rem 0 0 0.375rem;
+/// @output border-radius: {r} 0 0 {r};
+/// @group radius
+/// @access public
+@mixin rounded-l($size: lg) {
+  $r: get-radius($size);
+  border-radius: $r 0 0 $r;
+}
+
+/// Скругление правых углов (top-right и bottom-right)
+/// @param {String} $size [lg] - Ключ из $radii
+/// @require {function} get-radius
+/// @example scss - Правая часть split-button
+///   .btn-group__last {
+///     @include rounded-r('md');
+///   }
+///   // => border-radius: 0 0.375rem 0.375rem 0;
+/// @output border-radius: 0 {r} {r} 0;
+/// @group radius
+/// @access public
+@mixin rounded-r($size: lg) {
+  $r: get-radius($size);
+  border-radius: 0 $r $r 0;
+}
+
+// // Переменная напрямую
+// .element {
+//   border-radius: $radius-lg;
+// }
+
+// // Функция
+// .element {
+//   border-radius: get-radius('xl');
+// }
+
+// // Миксин (рекомендуется)
+// .card {
+//   @include rounded('lg');
+// }
+
+// // Динамический через CSS-переменную
+// .modal {
+//   @include rounded-var;
+// }
+
+// // Частичное скругление
+// .tab {
+//   @include rounded-t('md');
+// }

package/scss/abstracts/_search-form.scss

@@ -0,0 +1,271 @@
+// ============================================
+// SEARCH FORM MIXINS
+// local\common\theme-moexp\src\scss\abstracts\_search-form.scss
+// ============================================
+
+////
+/// Миксины для формы поиска с иконкой внутри
+///
+/// Предоставляет гибкую систему для создания поисковых форм
+/// в различных контекстах (header, sidebar, hero).
+///
+/// @group search-form
+/// @author MOEXP Team
+/// @since 1.0.0
+///
+/// @example scss - Использование в шаблоне
+///   @use "theme-moexp/src/scss/main" as theme;
+///
+///   .header__search {
+///     @include theme.search-form-base;
+///     @include theme.search-form-theme(primary-foreground);
+///   }
+////
+
+@use "sass:map";
+@use "mixins";
+@use "spacing";
+@use "typography";
+@use "animations";
+@use "radius";
+
+// ============================================
+// VARIABLES
+// ============================================
+
+/// Ширина формы поиска по умолчанию
+/// @type Length
+/// @group search-form
+$search-form-width: 15rem !default;
+
+/// Высота формы поиска по умолчанию
+/// @type Length
+/// @group search-form
+$search-form-height: 2.5rem !default;
+
+/// Размер иконки поиска
+/// @type Length
+/// @group search-form
+$search-form-icon-size: 1.2rem !default;
+
+/// Отступ справа для иконки
+/// @type Length
+/// @group search-form
+$search-form-icon-offset: 1.25rem !default;
+
+// ============================================
+// BASE MIXINS
+// ============================================
+
+/// Базовая структура контейнера формы поиска
+/// Устанавливает размеры и relative positioning для абсолютной кнопки
+///
+/// @param {Length} $width [$search-form-width] - Ширина формы
+/// @param {Length} $height [$search-form-height] - Высота формы
+/// @example scss
+///   .my-search {
+///     @include search-form-base;
+///   }
+/// @example scss - Кастомные размеры
+///   .my-search {
+///     @include search-form-base(20rem, 3rem);
+///   }
+/// @output position, width, height
+/// @group search-form
+/// @access public
+@mixin search-form-base($width: $search-form-width, $height: $search-form-height) {
+  position: relative;
+  z-index: 20;
+  width: $width;
+  height: $height;
+
+  // Доступность: минимальный размер touch target
+  min-height: 44px;
+}
+
+/// Базовые стили поля ввода поиска
+/// Input занимает 100% размеров контейнера
+///
+/// @example scss
+///   .my-search__input {
+///     @include search-form-input-base;
+///   }
+/// @output width: 100%, height: 100%, padding, font-size, border-radius
+/// @group search-form
+/// @access public
+@mixin search-form-input-base {
+  // Занимаем всё пространство формы
+  width: 100%;
+  height: 100%;
+
+  // Отступы
+  padding-left: spacing.$spacing-md;
+  padding-right: $search-form-icon-offset + $search-form-icon-size + 0.5rem;
+
+  // Типографика
+  font-size: typography.$font-size-sm;
+
+  // Скругление
+  border-radius: radius.$radius-sm;
+
+  // Убираем стандартные стили
+  appearance: none;
+  -webkit-appearance: none;
+
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+/// Базовые стили кнопки поиска (иконка)
+/// Позиционирование и размеры SVG
+///
+/// @example scss
+///   .my-search__button {
+///     @include search-form-button-base;
+///   }
+/// @output position, размеры, сброс стилей кнопки
+/// @group search-form
+/// @access public
+@mixin search-form-button-base {
+  position: absolute;
+  right: $search-form-icon-offset;
+  top: 50%;
+  transform: translateY(-50%);
+
+  // Сброс стилей кнопки
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  // Доступность: минимальный размер touch target
+  // Увеличиваем кликабельную область
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 44px;
+    height: 44px;
+  }
+
+  svg {
+    width: $search-form-icon-size;
+    height: $search-form-icon-size;
+    fill: currentColor;
+    display: block;
+  }
+}
+
+// ============================================
+// THEME MIXINS
+// ============================================
+
+/// Тема для поля ввода поиска
+/// Устанавливает цвета фона, границы, текста, placeholder
+///
+/// @param {String} $color - Имя цвета из палитры темы
+/// @param {Number} $bg-alpha [0.1] - Прозрачность фона
+/// @param {Number} $border-alpha [0.2] - Прозрачность границы
+/// @param {Number} $placeholder-alpha [0.5] - Прозрачность placeholder
+/// @require {mixin} mixins.hsl-prop
+/// @require {mixin} mixins.border-hsl
+/// @require {mixin} animations.input-focus-light
+/// @example scss - На тёмном фоне
+///   .search__input {
+///     @include search-form-input-theme(primary-foreground);
+///   }
+/// @example scss - На светлом фоне
+///   .search__input {
+///     @include search-form-input-theme(primary, 0.05, 0.15);
+///   }
+/// @output background-color, border, color, placeholder, focus
+/// @group search-form
+/// @access public
+@mixin search-form-input-theme($color, $bg-alpha: 0.1, $border-alpha: 0.2, $placeholder-alpha: 0.5) {
+  @include mixins.hsl-prop(background-color, $color, $bg-alpha);
+  @include mixins.border-hsl(1px, solid, $color, $border-alpha);
+  @include mixins.text-color($color);
+
+  &::placeholder {
+    @include mixins.hsl-prop(color, $color, $placeholder-alpha);
+  }
+
+  @include animations.input-focus-light($color);
+}
+
+/// Тема для кнопки поиска
+/// Устанавливает цвет иконки и hover-состояние
+///
+/// @param {String} $color - Имя цвета из палитры темы
+/// @param {Number} $alpha [0.6] - Прозрачность цвета
+/// @param {Number} $hover-alpha [1] - Прозрачность при hover
+/// @require {mixin} mixins.hsl-prop
+/// @require {mixin} animations.transition-colors
+/// @example scss
+///   .search__button {
+///     @include search-form-button-theme(primary-foreground);
+///   }
+/// @output color, transition, hover
+/// @group search-form
+/// @access public
+@mixin search-form-button-theme($color, $alpha: 0.6, $hover-alpha: 1) {
+  @include mixins.hsl-prop(color, $color, $alpha);
+  @include animations.transition-colors;
+
+  &:hover {
+    @include mixins.hsl-prop(color, $color, $hover-alpha);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring($color);
+  }
+}
+
+// ============================================
+// COMPOSITE MIXINS
+// ============================================
+
+/// Полный набор стилей для контейнера формы поиска
+/// Комбинирует base + структуру для input и button
+///
+/// @param {String} $color - Имя цвета темы
+/// @param {Length} $width [$search-form-width] - Ширина формы
+/// @param {Length} $height [$search-form-height] - Высота формы
+/// @example scss - Быстрое создание формы
+///   .header__search-form {
+///     @include search-form($color: primary-foreground);
+///   }
+/// @example scss - Кастомные размеры
+///   .hero__search-form {
+///     @include search-form(primary-foreground, 25rem, 3.5rem);
+///   }
+/// @output Полная структура формы с темой
+/// @group search-form
+/// @access public
+@mixin search-form($color, $width: $search-form-width, $height: $search-form-height) {
+  @include search-form-base($width, $height);
+
+  // Стили для input внутри
+  input,
+  &__input {
+    @include search-form-input-base;
+    @include search-form-input-theme($color);
+  }
+
+  // Стили для button внутри
+  button,
+  &__button {
+    @include search-form-button-base;
+    @include search-form-button-theme($color);
+  }
+}