@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/_spacing.scss

@@ -0,0 +1,158 @@
+////
+/// Система отступов темы MOEXP
+/// Gap для flexbox/grid и spacing для padding/margin
+/// @group spacing
+/// @author MOEXP Team
+////
+
+// ============================================
+// SPACING SYSTEM
+// local\common\theme-moexp\src\scss\abstracts\_spacing.scss
+// ============================================
+
+@use "sass:map";
+
+// ─────────────────────────────────────────
+// Gap (для flexbox/grid)
+// ─────────────────────────────────────────
+
+/// Gap XS (4px) — минимальный отступ между элементами
+/// @type Number
+/// @group spacing
+$gap-xs: 0.25rem !default;
+
+/// Gap SM (8px) — маленький отступ
+/// @type Number
+/// @group spacing
+$gap-sm: 0.5rem !default;
+
+/// Gap MD (16px) — стандартный отступ
+/// @type Number
+/// @group spacing
+$gap-md: 1rem !default;
+
+/// Gap LG (24px) — увеличенный отступ
+/// @type Number
+/// @group spacing
+$gap-lg: 1.5rem !default;
+
+/// Gap XL (32px) — большой отступ
+/// @type Number
+/// @group spacing
+$gap-xl: 2rem !default;
+
+/// Gap 2XL (48px) — очень большой отступ
+/// @type Number
+/// @group spacing
+$gap-2xl: 3rem !default;
+
+/// Карта всех значений gap
+/// @type Map
+/// @prop {Number} xs [0.25rem] - 4px
+/// @prop {Number} sm [0.5rem] - 8px
+/// @prop {Number} md [1rem] - 16px
+/// @prop {Number} lg [1.5rem] - 24px
+/// @prop {Number} xl [2rem] - 32px
+/// @prop {Number} 2xl [3rem] - 48px
+/// @example scss - Получение значения из карты
+///   gap: map.get($gaps, 'lg');
+///   // => 1.5rem
+/// @group spacing
+$gaps: (
+  xs: $gap-xs,
+  sm: $gap-sm,
+  md: $gap-md,
+  lg: $gap-lg,
+  xl: $gap-xl,
+  2xl: $gap-2xl,
+) !default;
+
+// ─────────────────────────────────────────
+// Spacing (для padding/margin)
+// ─────────────────────────────────────────
+
+/// Spacing 2XS (2px) — микро-отступ
+/// @type Number
+/// @group spacing
+$spacing-2xs: 0.125rem !default;
+
+/// Spacing XS (4px) — минимальный отступ
+/// @type Number
+/// @group spacing
+$spacing-xs: 0.25rem !default;
+
+/// Spacing SM (8px) — маленький отступ
+/// @type Number
+/// @group spacing
+$spacing-sm: 0.5rem !default;
+
+/// Spacing MD (16px) — стандартный отступ
+/// @type Number
+/// @group spacing
+$spacing-md: 1rem !default;
+
+/// Spacing LG (24px) — увеличенный отступ
+/// @type Number
+/// @group spacing
+$spacing-lg: 1.5rem !default;
+
+/// Spacing XL (32px) — большой отступ
+/// @type Number
+/// @group spacing
+$spacing-xl: 2rem !default;
+
+/// Spacing 2XL (48px) — очень большой отступ
+/// @type Number
+/// @group spacing
+$spacing-2xl: 3rem !default;
+
+/// Spacing 3XL (64px) — секционный отступ
+/// @type Number
+/// @group spacing
+$spacing-3xl: 4rem !default;
+
+/// Spacing 4XL (80px) — большой секционный отступ
+/// @type Number
+/// @group spacing
+$spacing-4xl: 5rem !default;
+
+/// Spacing 5XL (96px) — максимальный отступ
+/// @type Number
+/// @group spacing
+$spacing-5xl: 6rem !default;
+
+/// Карта всех значений spacing
+/// @type Map
+/// @prop {Number} 2xs [0.125rem] - 2px
+/// @prop {Number} xs [0.25rem] - 4px
+/// @prop {Number} sm [0.5rem] - 8px
+/// @prop {Number} md [1rem] - 16px
+/// @prop {Number} lg [1.5rem] - 24px
+/// @prop {Number} xl [2rem] - 32px
+/// @prop {Number} 2xl [3rem] - 48px
+/// @prop {Number} 3xl [4rem] - 64px
+/// @prop {Number} 4xl [5rem] - 80px
+/// @prop {Number} 5xl [6rem] - 96px
+/// @example scss - Padding секции
+///   .section {
+///     padding: map.get($spacings, '3xl') 0;
+///   }
+///   // => padding: 4rem 0;
+/// @example scss - Margin между блоками
+///   .card {
+///     margin-bottom: map.get($spacings, 'lg');
+///   }
+///   // => margin-bottom: 1.5rem;
+/// @group spacing
+$spacings: (
+  2xs: $spacing-2xs,
+  xs: $spacing-xs,
+  sm: $spacing-sm,
+  md: $spacing-md,
+  lg: $spacing-lg,
+  xl: $spacing-xl,
+  2xl: $spacing-2xl,
+  3xl: $spacing-3xl,
+  4xl: $spacing-4xl,
+  5xl: $spacing-5xl,
+) !default;

package/scss/abstracts/_typography.scss

@@ -0,0 +1,477 @@
+////
+/// Типографика темы MOEXP
+/// Размеры шрифтов, высота строки, начертания и миксины для текста
+/// @group typography
+/// @author MOEXP Team
+////
+
+// ============================================
+// TYPOGRAPHY
+// local\common\theme-moexp\src\scss\abstracts\_typography.scss
+// ============================================
+
+@use "sass:map";
+@use "mixins";
+@use "breakpoints";
+
+// ─────────────────────────────────────────
+// Font Sizes
+// ─────────────────────────────────────────
+
+/// Размер шрифта 2XS (10px)
+/// @type Number
+/// @group typography
+$font-size-2xs: 0.625rem !default;
+
+/// Размер шрифта XS (12px)
+/// @type Number
+/// @group typography
+$font-size-xs: 0.75rem !default;
+
+/// Размер шрифта SM (14px)
+/// @type Number
+/// @group typography
+$font-size-sm: 0.875rem !default;
+
+/// Базовый размер шрифта (16px)
+/// @type Number
+/// @group typography
+$font-size-base: 1rem !default;
+
+/// Размер шрифта LG (18px)
+/// @type Number
+/// @group typography
+$font-size-lg: 1.125rem !default;
+
+/// Размер шрифта XL (20px)
+/// @type Number
+/// @group typography
+$font-size-xl: 1.25rem !default;
+
+/// Размер шрифта 2XL (24px)
+/// @type Number
+/// @group typography
+$font-size-2xl: 1.5rem !default;
+
+/// Размер шрифта 3XL (30px)
+/// @type Number
+/// @group typography
+$font-size-3xl: 1.875rem !default;
+
+/// Размер шрифта 4XL (36px)
+/// @type Number
+/// @group typography
+$font-size-4xl: 2.25rem !default;
+
+/// Размер шрифта 5XL (48px)
+/// @type Number
+/// @group typography
+$font-size-5xl: 3rem !default;
+
+/// Размер шрифта 6XL (60px)
+/// @type Number
+/// @group typography
+$font-size-6xl: 3.75rem !default;
+
+/// Размер шрифта 7XL (72px)
+/// @type Number
+/// @group typography
+$font-size-7xl: 4.5rem !default;
+
+/// Карта всех размеров шрифтов
+/// @type Map
+/// @prop {Number} 2xs [0.625rem] - 10px
+/// @prop {Number} xs [0.75rem] - 12px
+/// @prop {Number} sm [0.875rem] - 14px
+/// @prop {Number} base [1rem] - 16px
+/// @prop {Number} lg [1.125rem] - 18px
+/// @prop {Number} xl [1.25rem] - 20px
+/// @prop {Number} 2xl [1.5rem] - 24px
+/// @prop {Number} 3xl [1.875rem] - 30px
+/// @prop {Number} 4xl [2.25rem] - 36px
+/// @prop {Number} 5xl [3rem] - 48px
+/// @prop {Number} 6xl [3.75rem] - 60px
+/// @prop {Number} 7xl [4.5rem] - 72px
+/// @example scss - Получение размера из карты
+///   font-size: map.get($font-sizes, '2xl');
+///   // => 1.5rem
+/// @group typography
+$font-sizes: (
+  2xs: $font-size-2xs,
+  // ← Добавить
+  xs: $font-size-xs,
+  sm: $font-size-sm,
+  base: $font-size-base,
+  lg: $font-size-lg,
+  xl: $font-size-xl,
+  2xl: $font-size-2xl,
+  3xl: $font-size-3xl,
+  4xl: $font-size-4xl,
+  5xl: $font-size-5xl,
+  6xl: $font-size-6xl,
+  7xl: $font-size-7xl,
+) !default;
+
+// ─────────────────────────────────────────
+// Line Heights
+// ─────────────────────────────────────────
+
+/// Высота строки none — без интерлиньяжа
+/// @type Number
+/// @group typography
+$line-height-none: 1 !default;
+
+/// Высота строки tight — плотная (для крупных заголовков)
+/// @type Number
+/// @group typography
+$line-height-tight: 1.25 !default;
+
+/// Высота строки snug — компактная
+/// @type Number
+/// @group typography
+$line-height-snug: 1.375 !default;
+
+/// Высота строки normal — стандартная
+/// @type Number
+/// @group typography
+$line-height-normal: 1.5 !default;
+
+/// Высота строки relaxed — комфортная для чтения
+/// @type Number
+/// @group typography
+$line-height-relaxed: 1.625 !default;
+
+/// Высота строки loose — свободная (двойной интерлиньяж)
+/// @type Number
+/// @group typography
+$line-height-loose: 2 !default;
+
+/// Карта всех значений высоты строки
+/// @type Map
+/// @prop {Number} none [1] - Без интерлиньяжа
+/// @prop {Number} tight [1.25] - Плотная
+/// @prop {Number} snug [1.375] - Компактная
+/// @prop {Number} normal [1.5] - Стандартная
+/// @prop {Number} relaxed [1.625] - Комфортная
+/// @prop {Number} loose [2] - Свободная
+/// @example scss - Получение значения из карты
+///   line-height: map.get($line-heights, 'relaxed');
+///   // => 1.625
+/// @group typography
+$line-heights: (
+  none: $line-height-none,
+  tight: $line-height-tight,
+  snug: $line-height-snug,
+  normal: $line-height-normal,
+  relaxed: $line-height-relaxed,
+  loose: $line-height-loose,
+) !default;
+
+// ─────────────────────────────────────────
+// Font Weights
+// ─────────────────────────────────────────
+
+/// Тонкий
+/// @type Number
+/// @group typography
+$font-weight-thin: 100 !default;
+
+/// Очень лёгкий
+/// @type Number
+/// @group typography
+$font-weight-extralight: 200 !default;
+
+/// Лёгкий
+/// @type Number
+/// @group typography
+$font-weight-light: 300 !default;
+
+/// Нормальный
+/// @type Number
+/// @group typography
+$font-weight-normal: 400 !default;
+
+/// Средний
+/// @type Number
+/// @group typography
+$font-weight-medium: 500 !default;
+
+/// Полужирный
+/// @type Number
+/// @group typography
+$font-weight-semibold: 600 !default;
+
+/// Жирный
+/// @type Number
+/// @group typography
+$font-weight-bold: 700 !default;
+
+/// Очень жирный
+/// @type Number
+/// @group typography
+$font-weight-extrabold: 800 !default;
+
+/// Чёрный (максимальный)
+/// @type Number
+/// @group typography
+$font-weight-black: 900 !default;
+
+/// Карта всех начертаний шрифта
+/// @type Map
+/// @prop {Number} thin [100] - Тонкое
+/// @prop {Number} extralight [200] - Очень лёгкое
+/// @prop {Number} light [300] - Лёгкое
+/// @prop {Number} normal [400] - Обычное
+/// @prop {Number} medium [500] - Среднее
+/// @prop {Number} semibold [600] - Полужирное
+/// @prop {Number} bold [700] - Жирное
+/// @prop {Number} extrabold [800] - Очень жирное
+/// @prop {Number} black [900] - Сверхжирное
+/// @example scss - Получение значения из карты
+///   font-weight: map.get($font-weights, 'semibold');
+///   // => 600
+/// @group typography
+$font-weights: (
+  thin: $font-weight-thin,
+  extralight: $font-weight-extralight,
+  light: $font-weight-light,
+  normal: $font-weight-normal,
+  medium: $font-weight-medium,
+  semibold: $font-weight-semibold,
+  bold: $font-weight-bold,
+  extrabold: $font-weight-extrabold,
+  black: $font-weight-black,
+) !default;
+
+// ============================================
+// МИКСИНЫ ТИПОГРАФИКИ
+// ============================================
+
+/// Стили для Hero-заголовка (h1 на главном экране)
+/// Адаптивный размер: 4xl → 5xl (lg) → 6xl (xl)
+/// @param {String} $color [primary-foreground] - Имя цвета из палитры
+/// @param {String} $font-heading - Семейство шрифта для заголовка
+/// @require {mixin} mixins.text-color
+/// @require {mixin} breakpoints.lg
+/// @require {mixin} breakpoints.xl
+/// @example scss - Использование в Hero-секции
+///   .hero__title {
+///     @include hero-title('primary-foreground', $font-golos-text);
+///   }
+/// @output
+///   margin-bottom: 1.5rem;
+///   font-family: ...;
+///   font-weight: 700;
+///   font-size: 2.25rem; // адаптивно до 3.75rem
+///   line-height: 1;
+///   color: hsl(var(--primary-foreground));
+/// @group typography
+@mixin hero-title($color: primary-foreground, $font-heading) {
+  margin-bottom: 1.5rem;
+
+  font-family: $font-heading;
+  font-weight: $font-weight-bold;
+  font-size: $font-size-4xl;
+  line-height: $line-height-none;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.lg {
+    font-size: $font-size-5xl;
+  }
+
+  @include breakpoints.xl {
+    font-size: $font-size-6xl;
+  }
+}
+
+/// Стили для Hero-подзаголовка
+/// Адаптивный размер с ограничением ширины
+/// @param {String} $color [primary-foreground] - Имя цвета из палитры
+/// @param {Number} $alpha [0.8] - Прозрачность текста
+/// @require {mixin} mixins.text-color
+/// @require {mixin} breakpoints.lg
+/// @require {mixin} breakpoints.xs
+/// @example scss - Использование в Hero-секции
+///   .hero__subtitle {
+///     @include hero-subtitle('primary-foreground', 0.85);
+///   }
+/// @output
+///   max-width: 42rem;
+///   margin-bottom: 2.5rem;
+///   font-size: 1.125rem; // адаптивно
+///   color: hsl(var(--primary-foreground) / 0.8);
+/// @group typography
+@mixin hero-subtitle($color: primary-foreground, $alpha: 0.8) {
+  max-width: 42rem;
+  margin-bottom: 2.5rem;
+
+  font-size: $font-size-lg;
+
+  @include mixins.text-color($color, $alpha);
+
+  @include breakpoints.lg {
+    font-size: $font-size-xl;
+    line-height: $line-height-relaxed;
+  }
+  @include breakpoints.xs {
+    font-size: $font-size-lg;
+    line-height: $line-height-none;
+  }
+}
+
+/// Стили для заголовка секции (h2)
+/// Адаптивный размер: 3xl → 4xl (lg)
+/// @param {String} $color [foreground] - Имя цвета из палитры
+/// @param {String} $font-heading - Семейство шрифта для заголовка
+/// @require {mixin} mixins.text-color
+/// @require {mixin} breakpoints.lg
+/// @example scss - Использование в секции
+///   .about__title {
+///     @include section-title('foreground', $font-golos-text);
+///   }
+/// @output
+///   margin-bottom: 1rem;
+///   font-family: ...;
+///   font-weight: 700;
+///   font-size: 1.875rem; // адаптивно до 2.25rem
+///   line-height: 1.25;
+///   color: hsl(var(--foreground));
+/// @group typography
+@mixin section-title($color: foreground, $font-heading) {
+  margin-bottom: 1rem;
+
+  font-family: $font-heading;
+  font-weight: $font-weight-bold;
+  font-size: $font-size-3xl;
+  line-height: $line-height-tight;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.lg {
+    font-size: $font-size-4xl;
+  }
+}
+
+/// Стили для подзаголовка секции
+/// С ограничением максимальной ширины для читаемости
+/// @param {String} $color [foreground-muted] - Имя цвета из палитры
+/// @require {mixin} mixins.text-color
+/// @example scss - Использование в секции
+///   .about__subtitle {
+///     @include section-subtitle('foreground-muted');
+///   }
+/// @output
+///   max-width: 36rem;
+///   margin-bottom: 2rem;
+///   font-size: 1.125rem;
+///   line-height: 1.625;
+///   color: hsl(var(--foreground-muted));
+/// @group typography
+@mixin section-subtitle($color: foreground-muted) {
+  max-width: 36rem;
+  margin-bottom: 2rem;
+
+  font-size: $font-size-lg;
+  line-height: $line-height-relaxed;
+
+  @include mixins.text-color($color);
+}
+
+/// Стили для надзаголовка секции (slogan)
+/// Uppercase текст с letter-spacing
+/// @param {String} $color [foreground-muted] - Имя цвета из палитры
+/// @require {mixin} mixins.text-color
+/// @require {mixin} breakpoints.md-down
+/// @example scss - Использование в секции
+///   .services__slogan {
+///     @include section-slogan('foreground-muted');
+///   }
+/// @output
+///   font-size: 0.875rem;
+///   text-transform: uppercase;
+///   letter-spacing: 0.1em;
+///   color: hsl(var(--foreground-muted));
+/// @group typography
+@mixin section-slogan($color: foreground-muted) {
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  line-height: $line-height-normal;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.md-down {
+    font-size: $font-size-xs;
+  }
+}
+
+/// Стили для заголовка карточки (h3)
+/// @param {String} $color [foreground] - Имя цвета из палитры
+/// @param {String} $font-heading - Семейство шрифта для заголовка
+/// @require {mixin} mixins.text-color
+/// @example scss - Использование в карточке
+///   .card__title {
+///     @include card-title('foreground', $font-golos-text);
+///   }
+/// @output
+///   margin-bottom: 0.5rem;
+///   font-family: ...;
+///   font-weight: 600;
+///   font-size: 1.25rem;
+///   line-height: 1.375;
+///   color: hsl(var(--foreground));
+/// @group typography
+@mixin card-title($color: foreground, $font-heading) {
+  margin-bottom: 0.5rem;
+
+  font-family: $font-heading;
+  font-weight: $font-weight-semibold;
+  font-size: $font-size-xl;
+  line-height: $line-height-snug;
+
+  @include mixins.text-color($color);
+}
+
+/// Стили для основного текста (body)
+/// @param {String} $color [foreground-body] - Имя цвета из палитры
+/// @require {mixin} mixins.text-color
+/// @example scss - Использование для параграфов
+///   .article__text {
+///     @include body-text('foreground-body');
+///   }
+/// @output
+///   font-size: 1rem;
+///   line-height: 1.625;
+///   color: hsl(var(--foreground-body));
+/// @group typography
+@mixin body-text($color: foreground-body) {
+  font-size: $font-size-base;
+  line-height: $line-height-relaxed;
+
+  @include mixins.text-color($color);
+}
+
+/// Стили для мелкого текста, подписей и caption
+/// @param {String} $color [foreground-caption] - Имя цвета из палитры
+/// @require {mixin} mixins.text-color
+/// @example scss - Использование для подписей
+///   .card__meta {
+///     @include caption-text('foreground-caption');
+///   }
+/// @example scss - Кастомный цвет
+///   .footer__copyright {
+///     @include caption-text('foreground-muted');
+///   }
+/// @output
+///   font-size: 0.875rem;
+///   line-height: 1.5;
+///   color: hsl(var(--foreground-caption));
+/// @group typography
+@mixin caption-text($color: foreground-caption) {
+  font-size: $font-size-sm;
+  line-height: $line-height-normal;
+
+  @include mixins.text-color($color);
+}

package/scss/abstracts/_variables.scss

@@ -0,0 +1,3 @@
+// ============================================
+// VARIABLES
+// ============================================