@mr.slonn/my-scss-theme 1.0.0

package/scss/api.scss

@@ -0,0 +1,12 @@
+// ─────────────────────────────────────────
+// ABSTRACTS (миксины, функции, переменные)
+// ─────────────────────────────────────────
+
+/// Экспорт всех абстракций для использования через @use
+///
+/// @example scss
+///   @use "main" as theme;
+///   @include theme.pattern-stripes;
+///
+/// @see abstracts
+@forward "abstracts";

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,140 @@
+// ============================================
+// BREADCRUMB — CSS Classes
+// local/common/theme-moexp/src/scss/components/_breadcrumb.scss
+// ============================================
+
+////
+/// Breadcrumb — навигационная цепочка
+/// CSS классы для использования в шаблонах Bitrix
+/// @group components-breadcrumb
+/// @author MOEXP Team
+////
+
+@use "../abstracts/breadcrumb" as bc;
+@use "../abstracts/typography";
+@use "../abstracts/spacing";
+@use "../abstracts/mixins";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.breadcrumb {
+  @include bc.base(0);
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__list {
+    @include bc.list(foreground-muted);
+  }
+
+  &__item {
+    @include bc.item;
+  }
+
+  &__link {
+    @include bc.link(foreground);
+  }
+
+  &__separator {
+    @include bc.separator(foreground-muted);
+  }
+
+  &__current {
+    @include bc.current(foreground);
+  }
+
+  // ──────────────────────────────
+  // Модификаторы размера
+  // ──────────────────────────────
+
+  &--sm {
+    .breadcrumb__list {
+      font-size: typography.$font-size-xs;
+
+      // Fallback
+      > li {
+        margin-right: spacing.$spacing-xs;
+      }
+
+      @supports (gap: 1px) {
+        gap: spacing.$spacing-2xs spacing.$spacing-xs;
+
+        > li {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .breadcrumb__separator svg {
+      width: bc.$separator-size-sm;
+      height: bc.$separator-size-sm;
+    }
+  }
+
+  &--lg {
+    .breadcrumb__list {
+      font-size: typography.$font-size-base;
+
+      // Fallback
+      > li {
+        margin-right: spacing.$gap-md;
+      }
+
+      @supports (gap: 1px) {
+        gap: spacing.$spacing-xs spacing.$gap-md;
+
+        > li {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .breadcrumb__separator svg {
+      width: bc.$separator-size-lg;
+      height: bc.$separator-size-lg;
+    }
+  }
+
+  // ──────────────────────────────
+  // На тёмном фоне
+  // ──────────────────────────────
+
+  &--on-dark {
+    .breadcrumb__list {
+      @include bc.on-dark;
+    }
+
+    .breadcrumb__link {
+      @include bc.link-on-dark;
+    }
+
+    .breadcrumb__separator {
+      @include bc.separator-on-dark;
+    }
+
+    .breadcrumb__current {
+      @include bc.current-on-dark;
+    }
+  }
+
+  // ──────────────────────────────
+  // Без отступа снизу
+  // ──────────────────────────────
+
+  &--no-margin {
+    margin-bottom: 0;
+  }
+}
+
+// ============================================
+// ACCESSIBILITY
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .breadcrumb__link {
+    transition: none !important;
+  }
+}

package/scss/components/_buttons.scss

@@ -0,0 +1,226 @@
+// ============================================
+// BUTTONS — CSS CLASSES
+// local/common/theme-moexp/src/scss/components/_buttons.scss
+// ============================================
+
+////
+/// Готовые CSS-классы кнопок
+/// Используют миксины из abstracts/buttons/
+///
+/// **Использование:**
+/// - Напрямую в HTML: `<button class="btn-primary">Click</button>`
+/// - Или через миксины в SCSS (рекомендуется для БЭМ)
+///
+/// @group buttons-classes
+/// @author MOEXP Team
+////
+
+@use "../abstracts/buttons" as btn;
+
+// ─────────────────────────────────────────
+// PRIMARY
+// ─────────────────────────────────────────
+
+/// Primary кнопка — готовый класс
+/// @example html
+///   <button class="btn-primary">Click me</button>
+/// @group buttons-classes
+.btn-primary {
+  @include btn.btn-primary;
+}
+
+/// Primary кнопка маленькая
+/// @example html
+///   <button class="btn-primary--sm">Small</button>
+/// @group buttons-classes
+.btn-primary--sm {
+  @include btn.btn-primary(sm);
+}
+
+/// Primary кнопка большая
+/// @example html
+///   <button class="btn-primary--lg">Large</button>
+/// @group buttons-classes
+.btn-primary--lg {
+  @include btn.btn-primary(lg);
+}
+
+// ─────────────────────────────────────────
+// SECONDARY
+// ─────────────────────────────────────────
+
+/// Secondary кнопка
+/// @example html
+///   <button class="btn-secondary">Cancel</button>
+/// @group buttons-classes
+.btn-secondary {
+  @include btn.btn-secondary;
+}
+
+/// Secondary кнопка маленькая
+/// @example html
+///   <button class="btn-secondary--sm">Small</button>
+/// @group buttons-classes
+.btn-secondary--sm {
+  @include btn.btn-secondary(sm);
+}
+
+/// Secondary кнопка большая
+/// @example html
+///   <button class="btn-secondary--lg">Large</button>
+/// @group buttons-classes
+.btn-secondary--lg {
+  @include btn.btn-secondary(lg);
+}
+
+// ─────────────────────────────────────────
+// OUTLINE
+// ─────────────────────────────────────────
+
+/// Outline кнопка
+/// @example html
+///   <button class="btn-outline">Learn more</button>
+/// @group buttons-classes
+.btn-outline {
+  @include btn.btn-outline;
+}
+
+/// Outline кнопка маленькая
+/// @example html
+///   <button class="btn-outline--sm">Small</button>
+/// @group buttons-classes
+.btn-outline--sm {
+  @include btn.btn-outline($size: sm);
+}
+
+/// Outline кнопка большая
+/// @example html
+///   <button class="btn-outline--lg">Large</button>
+/// @group buttons-classes
+.btn-outline--lg {
+  @include btn.btn-outline($size: lg);
+}
+
+// ─────────────────────────────────────────
+// GHOST
+// ─────────────────────────────────────────
+
+/// Ghost кнопка
+/// @example html
+///   <button class="btn-ghost">Menu item</button>
+/// @group buttons-classes
+.btn-ghost {
+  @include btn.btn-ghost;
+}
+
+/// Ghost кнопка маленькая
+/// @example html
+///   <button class="btn-ghost--sm">Small</button>
+/// @group buttons-classes
+.btn-ghost--sm {
+  @include btn.btn-ghost($size: sm);
+}
+
+/// Ghost кнопка большая
+/// @example html
+///   <button class="btn-ghost--lg">Large</button>
+/// @group buttons-classes
+.btn-ghost--lg {
+  @include btn.btn-ghost($size: lg);
+}
+
+// ─────────────────────────────────────────
+// DESTRUCTIVE
+// ─────────────────────────────────────────
+
+/// Destructive кнопка
+/// @example html
+///   <button class="btn-destructive">Delete</button>
+/// @group buttons-classes
+.btn-destructive {
+  @include btn.btn-destructive;
+}
+
+/// Destructive кнопка маленькая
+/// @example html
+///   <button class="btn-destructive--sm">Small</button>
+/// @group buttons-classes
+.btn-destructive--sm {
+  @include btn.btn-destructive(sm);
+}
+
+/// Destructive кнопка большая
+/// @example html
+///   <button class="btn-destructive--lg">Large</button>
+/// @group buttons-classes
+.btn-destructive--lg {
+  @include btn.btn-destructive(lg);
+}
+
+// ─────────────────────────────────────────
+// LINK
+// ─────────────────────────────────────────
+
+/// Link кнопка
+/// @example html
+///   <button class="btn-link">Read more →</button>
+/// @group buttons-classes
+.btn-link {
+  @include btn.btn-link;
+}
+
+// ─────────────────────────────────────────
+// ICON
+// ─────────────────────────────────────────
+
+/// Icon кнопка
+/// @example html
+///   <button class="btn-icon"><svg>...</svg></button>
+/// @group buttons-classes
+.btn-icon {
+  @include btn.btn-icon;
+}
+
+/// Icon кнопка маленькая
+/// @example html
+///   <button class="btn-icon--sm"><svg>...</svg></button>
+/// @group buttons-classes
+.btn-icon--sm {
+  @include btn.btn-icon(sm);
+}
+
+/// Icon кнопка большая
+/// @example html
+///   <button class="btn-icon--lg"><svg>...</svg></button>
+/// @group buttons-classes
+.btn-icon--lg {
+  @include btn.btn-icon(lg);
+}
+
+// ─────────────────────────────────────────
+// MODIFIERS
+// ─────────────────────────────────────────
+
+/// Модификатор полной ширины
+/// @example html
+///   <button class="btn-primary btn-full">Submit</button>
+/// @group buttons-classes
+.btn-full {
+  @include btn.btn-full;
+}
+
+/// Модификатор с иконкой
+/// @example html
+///   <button class="btn-primary btn-with-icon">Next <svg>...</svg></button>
+/// @group buttons-classes
+.btn-with-icon {
+  @include btn.btn-with-icon;
+}
+
+/// Модификатор loading
+/// @example html
+///   <button class="btn-primary btn-loading">Loading...</button>
+/// @group buttons-classes
+.btn-loading {
+  @include btn.btn-loading;
+}

package/scss/components/_callout.scss

@@ -0,0 +1,118 @@
+////
+/// Callout — информационный блок с иконкой и текстом
+/// CSS-классы компонента
+/// @group components-callout
+/// @author MOEXP Team
+////
+
+@use "../abstracts/callout" as callout;
+@use "../abstracts/spacing";
+@use "../abstracts/mixins";
+
+// ============================================
+// CSS КЛАССЫ
+// ============================================
+
+.callout {
+  @include callout.base(primary);
+
+  // ──────────────────────────────
+  // Элементы
+  // ──────────────────────────────
+
+  &__pattern {
+    @include callout.pattern;
+  }
+
+  &__container {
+    @include callout.container;
+  }
+
+  &__content {
+    @include callout.content;
+  }
+
+  &__icon {
+    @include callout.icon(accent);
+  }
+
+  &__text {
+    @include callout.text(primary-foreground);
+  }
+
+  &__title {
+    @include callout.title(primary-foreground);
+  }
+
+  &__subtitle {
+    @include callout.subtitle(primary-foreground);
+  }
+
+  &__action {
+    @include callout.action;
+  }
+
+  // ──────────────────────────────
+  // Модификаторы цвета фона
+  // ──────────────────────────────
+
+  /// Акцентный фон
+  &--accent {
+    @include mixins.bg-color(accent);
+
+    .callout__icon {
+      @include mixins.text-color(accent-foreground);
+    }
+
+    .callout__text,
+    .callout__title {
+      @include mixins.text-color(accent-foreground);
+    }
+
+    .callout__subtitle {
+      @include mixins.text-color(accent-foreground, 0.85);
+    }
+  }
+
+  /// Светлый фон
+  &--light {
+    @include mixins.bg-color(background-section);
+
+    .callout__icon {
+      @include mixins.text-color(accent);
+    }
+
+    .callout__text,
+    .callout__title {
+      @include mixins.text-color(foreground);
+    }
+
+    .callout__subtitle {
+      @include mixins.text-color(foreground-muted);
+    }
+  }
+
+  // ──────────────────────────────
+  // Без паттерна
+  // ──────────────────────────────
+
+  &--no-pattern {
+    .callout__pattern {
+      display: none;
+    }
+  }
+
+  // ──────────────────────────────
+  // Компактный вариант
+  // ──────────────────────────────
+
+  &--compact {
+    padding-top: spacing.$spacing-lg;
+    padding-bottom: spacing.$spacing-lg;
+
+    .callout__content {
+      padding-top: spacing.$spacing-md;
+      padding-bottom: spacing.$spacing-md;
+    }
+  }
+}

package/scss/components/_chip.scss

@@ -0,0 +1,56 @@
+////
+/// Chip CSS Classes — готовые классы для HTML
+/// @group components-chip
+/// @author MOEXP Team
+////
+
+@use "../abstracts/chip" as chip;
+
+// ============================================
+// BASE
+// ============================================
+
+.chip {
+  @include chip.chip-base;
+
+  &__icon {
+    @include chip.chip-icon;
+  }
+
+  &__text {
+    @include chip.chip-text;
+  }
+}
+
+// ============================================
+// VARIANTS
+// ============================================
+
+.chip--link {
+  @include chip.chip-link;
+}
+
+.chip--on-dark {
+  @include chip.chip-on-dark;
+}
+
+.chip--on-light {
+  @include chip.chip-on-light;
+}
+
+// ============================================
+// ICON ONLY
+// ============================================
+
+.chip--icon-only {
+  @include chip.chip-icon-only;
+}
+
+// ============================================
+// DISABLED
+// ============================================
+
+.chip[aria-disabled="true"],
+.chip:disabled {
+  @include chip.chip-disabled;
+}