@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/chip/_variables.scss

@@ -0,0 +1,57 @@
+////
+/// Chip Variables — дизайн-токены для chip
+/// @group chip-variables
+/// @author MOEXP Team
+////
+
+// ============================================
+// SIZE
+// ============================================
+
+/// Размер иконки относительно font-size
+/// @type Number
+$chip-icon-size: 1.2em !default;
+
+/// Gap между иконкой и текстом
+/// @type String
+$chip-gap: "gap-xs" !default;
+
+// ============================================
+// COLORS
+// ============================================
+
+/// Цвет текста по умолчанию
+/// @type String
+$chip-color-default: "foreground-body" !default;
+
+/// Цвет hover по умолчанию
+/// @type String
+$chip-color-hover: "accent" !default;
+
+/// Цвет текста на тёмном фоне
+/// @type String
+$chip-color-on-dark: "primary-foreground" !default;
+
+/// Цвет hover на тёмном фоне
+/// @type String
+$chip-color-hover-on-dark: "primary-foreground" !default;
+
+/// Цвет текста на светлом фоне
+/// @type String
+$chip-color-on-light: "foreground-body" !default;
+
+/// Цвет hover на светлом фоне
+/// @type String
+$chip-color-hover-on-light: "accent-on-light" !default;
+
+// ============================================
+// OPACITY
+// ============================================
+
+/// Прозрачность текста по умолчанию
+/// @type Number
+$chip-opacity: 0.9 !default;
+
+/// Прозрачность disabled состояния
+/// @type Number
+$chip-opacity-disabled: 0.5 !default;

package/scss/abstracts/chip/_variants.scss

@@ -0,0 +1,98 @@
+////
+/// Chip Variants — варианты оформления
+/// @group chip-variants
+/// @author MOEXP Team
+////
+
+@use "../mixins";
+@use "../animations";
+@use "variables" as *;
+
+// ============================================
+// LINK VARIANT
+// ============================================
+
+/// Chip-ссылка — основной интерактивный вариант
+/// @param {String} $color [$chip-color-default] - Цвет текста
+/// @param {String} $color-hover [$chip-color-hover] - Цвет при hover
+/// @param {Number} $opacity [$chip-opacity] - Прозрачность
+/// @example scss
+///   .contact-link {
+///     @include chip-base;
+///     @include chip-link;
+///   }
+/// @output Цвет текста с hover-эффектом
+/// @group chip-variants
+/// @access public
+@mixin chip-link($color: $chip-color-default, $color-hover: $chip-color-hover, $opacity: $chip-opacity) {
+  @include mixins.text-color($color, $opacity);
+  @include animations.hover-text-color($color-hover);
+}
+
+// ============================================
+// CONTEXT VARIANTS
+// ============================================
+
+/// Chip на тёмном фоне (header, hero, footer)
+/// @param {String} $color [$chip-color-on-dark] - Цвет текста
+/// @param {String} $color-hover [$chip-color-hover-on-dark] - Цвет при hover
+/// @param {Number} $opacity [$chip-opacity] - Прозрачность
+/// @example scss
+///   .header-contact {
+///     @include chip-base;
+///     @include chip-on-dark;
+///   }
+/// @output Светлый цвет текста
+/// @group chip-variants
+/// @access public
+@mixin chip-on-dark($color: $chip-color-on-dark, $color-hover: $chip-color-hover-on-dark, $opacity: $chip-opacity) {
+  @include mixins.text-color($color, $opacity);
+  @include animations.hover-text-color($color-hover);
+}
+
+/// Chip на светлом фоне (явное указание)
+/// @param {String} $color [$chip-color-on-light] - Цвет текста
+/// @param {String} $color-hover [$chip-color-hover-on-light] - Цвет при hover
+/// @param {Number} $opacity [$chip-opacity] - Прозрачность
+/// @example scss
+///   .footer-contact {
+///     @include chip-base;
+///     @include chip-on-light;
+///   }
+/// @output Тёмный цвет текста с hover на accent-on-light
+/// @group chip-variants
+/// @access public
+@mixin chip-on-light($color: $chip-color-on-light, $color-hover: $chip-color-hover-on-light, $opacity: $chip-opacity) {
+  @include mixins.text-color($color, $opacity);
+  @include animations.hover-text-color($color-hover);
+}
+
+// ============================================
+// COMPOSITE VARIANTS
+// ============================================
+
+/// Полный chip для тёмного фона — base + on-dark
+/// @example scss
+///   .header__contact {
+///     @include chip-dark;
+///   }
+/// @output Полный chip для header/footer
+/// @group chip-variants
+/// @access public
+@mixin chip-dark {
+  @include chip-base($chip-color-on-dark);
+  @include chip-on-dark;
+}
+
+/// Полный chip для светлого фона — base + on-light
+/// @example scss
+///   .sidebar__contact {
+///     @include chip-light;
+///   }
+/// @output Полный chip для светлых секций
+/// @group chip-variants
+/// @access public
+@mixin chip-light {
+  @include chip-base($chip-color-on-light);
+  @include chip-on-light;
+}

package/scss/abstracts/file-card/_base.scss

@@ -0,0 +1,326 @@
+// ============================================
+// FILE CARD — BASE
+// local/common/theme-moexp/src/scss/abstracts/file-card/_base.scss
+// ============================================
+
+////
+/// Базовые миксины file-card
+/// @group file-card-base
+/// @author MOEXP Team
+////
+
+@use "../typography";
+@use "../spacing";
+@use "../mixins";
+@use "../radius";
+@use "../animations";
+@use "../breakpoints";
+@use "../../font-vars" as fonts;
+@use "variables" as *;
+
+// ─────────────────────────────────────────
+// LIST (контейнер карточек)
+// ─────────────────────────────────────────
+
+/// Список карточек файлов
+/// @output Контейнер с border и скруглением
+/// @group file-card-base
+@mixin list {
+  @include mixins.bg-color(background-card);
+  @include mixins.border-hsl(1px, solid, border, 0.5);
+  @include radius.rounded(sm);
+  overflow: hidden;
+}
+
+// ─────────────────────────────────────────
+// CARD
+// ─────────────────────────────────────────
+
+/// Базовые стили карточки
+/// @output Flex row с hover
+/// @group file-card-base
+@mixin card {
+  @include mixins.flex-row($gap, flex-start, center, "> *");
+  padding: $padding;
+
+  @include animations.transition(background-color, $transition-duration);
+
+  &:hover {
+    @include mixins.bg-color(background-section, 0.5);
+  }
+
+  // // Разделитель между карточками
+  // &:not(:last-child) {
+  //   border-bottom: 1px solid;
+  //   @include mixins.border-color-hsl(border, 0.5);
+  // }
+
+  // Адаптив
+  @include breakpoints.md-down {
+    flex-wrap: wrap;
+    padding: $padding-nested;
+  }
+}
+
+/// Вложенная карточка
+/// @output Стили с левым бордером и фоном
+/// @group file-card-base
+@mixin card-nested {
+  padding: $padding-nested $padding;
+
+  // Левый акцентный бордер
+  border-left: 2px solid;
+  @include mixins.border-color-hsl(accent, 0.3);
+
+  // Фон секции
+  @include mixins.bg-color(background, 0.6);
+
+  &:hover {
+    @include mixins.bg-color(background-section, 0.8);
+  }
+
+  @include breakpoints.md-down {
+    border-left-width: 2px;
+  }
+}
+
+// ─────────────────────────────────────────
+// ICON (тип файла)
+// ─────────────────────────────────────────
+
+/// Контейнер иконки типа файла
+/// @param {Number} $size [$icon-size] - Размер контейнера
+/// @param {Number} $svg-size [$icon-svg-size] - Размер SVG
+/// @output Квадратный контейнер с центрированием
+/// @group file-card-base
+@mixin icon($size: $icon-size, $svg-size: $icon-svg-size) {
+  @include mixins.flex-center;
+  flex-shrink: 0;
+  width: $size;
+  height: $size;
+
+  @include mixins.bg-color(background-section);
+  @include radius.rounded(sm);
+
+  svg,
+  img {
+    width: $svg-size;
+    height: $svg-size;
+  }
+
+  @include breakpoints.md-down {
+    display: none;
+    // width: $icon-size-nested;
+    // height: $icon-size-nested;
+
+    // svg,
+    // img {
+    //   width: $icon-svg-size-nested;
+    //   height: $icon-svg-size-nested;
+    // }
+  }
+}
+
+/// Цвет SVG иконки
+/// @param {String} $color [accent] - Цвет
+/// @output Цвет текста для SVG
+/// @group file-card-base
+@mixin icon-color($color: accent) {
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// CONTENT
+// ─────────────────────────────────────────
+
+/// Контент карточки (название + описание)
+/// @output Flex grow с min-width
+/// @group file-card-base
+@mixin content {
+  flex: 1;
+  min-width: 0; // Для text-overflow
+
+  @include breakpoints.md-down {
+    flex: 1 1 100%;
+    order: 2;
+    margin-top: spacing.$spacing-sm;
+  }
+}
+
+/// Название файла
+/// @param {String} $color [foreground] - Цвет
+/// @output Стили заголовка
+/// @group file-card-base
+@mixin title($color: foreground) {
+  margin: 0 0 spacing.$spacing-xs;
+  font-family: fonts.$font-golos-text;
+  font-size: typography.$font-size-base;
+  font-weight: typography.$font-weight-semibold;
+  line-height: typography.$line-height-snug;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-sm;
+  }
+}
+
+/// Описание файла
+/// @param {String} $color [foreground-muted] - Цвет
+/// @output Стили описания
+/// @group file-card-base
+@mixin description($color: foreground-muted) {
+  margin: 0;
+  font-size: typography.$font-size-sm;
+  line-height: typography.$line-height-relaxed;
+
+  @include mixins.text-color($color);
+
+  @include breakpoints.md-down {
+    font-size: typography.$font-size-xs;
+  }
+}
+
+// ─────────────────────────────────────────
+// ACTIONS (meta + download wrapper)
+// ─────────────────────────────────────────
+
+/// Контейнер для meta и download
+/// @output Flex row с выравниванием
+/// @group file-card-base
+@mixin actions {
+  @include mixins.flex-row(spacing.$gap-md, flex-end, stretch, "> *");
+  flex-shrink: 0;
+
+  @include breakpoints.md-down {
+    order: 3;
+    // width: 100%;
+    justify-content: space-between;
+    margin-top: spacing.$spacing-sm;
+  }
+}
+
+// ─────────────────────────────────────────
+// META (дата + размер)
+// ─────────────────────────────────────────
+
+/// Мета-информация
+/// @output Flex column с выравниванием
+/// @group file-card-base
+@mixin meta {
+  flex: 1;
+  @include mixins.flex-column(0, space-between, flex-end);
+  flex-shrink: 0;
+
+  @include breakpoints.md-down {
+    order: 1;
+    @include mixins.flex-row($gap-nested, $align: center);
+    //align-items: flex-start;
+  }
+}
+
+/// Дата файла
+/// @param {String} $color [foreground-muted] - Цвет
+/// @output Стили даты
+/// @group file-card-base
+@mixin date($color: foreground-muted) {
+  margin: 0;
+  font-size: typography.$font-size-sm;
+  line-height: typography.$line-height-normal;
+
+  @include mixins.text-color($color);
+}
+
+/// Размер файла
+/// @param {String} $color [foreground-caption] - Цвет
+/// @output Стили размера
+/// @group file-card-base
+@mixin size($color: foreground-caption) {
+  margin: 0;
+  font-size: typography.$font-size-sm;
+  line-height: typography.$line-height-normal;
+
+  @include mixins.text-color($color);
+}
+
+// ─────────────────────────────────────────
+// DOWNLOAD BUTTON
+// ─────────────────────────────────────────
+
+/// Кнопка скачивания
+/// @param {Number} $size [$download-size] - Размер кнопки
+/// @param {String} $bg [accent] - Цвет фона
+/// @param {String} $color [accent-foreground] - Цвет иконки
+/// @output Квадратная кнопка с hover/focus
+/// @group file-card-base
+@mixin download($size: $download-size, $bg: accent, $color: accent-foreground) {
+  @include mixins.flex-center;
+  flex-shrink: 0;
+  width: $size;
+  height: $size;
+
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+
+  @include mixins.bg-color($bg);
+  @include mixins.text-color($color);
+  @include radius.rounded(sm);
+
+  @include animations.transition((background-color, transform), $transition-duration);
+
+  svg {
+    width: $download-icon-size;
+    height: $download-icon-size;
+  }
+
+  &:hover {
+    @include mixins.bg-color($bg, 0.9);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring(ring);
+  }
+
+  @include breakpoints.md-down {
+    order: 0;
+    width: $download-size-nested * 0.85;
+    height: $download-size-nested * 0.85;
+    background: none;
+    @include mixins.text-color($bg);
+
+    &:hover {
+      @include mixins.bg-color($color, 0.9);
+    }
+
+    svg {
+      width: calc(#{$download-icon-size} * 0.85);
+      height: calc(#{$download-icon-size} * 0.85);
+    }
+  }
+}
+
+// ─────────────────────────────────────────
+// NESTED CONTAINER
+// ─────────────────────────────────────────
+
+/// Контейнер вложенных файлов
+/// Отступ = icon-size + gap (до правого края иконки родителя)
+/// @output Padding left для выравнивания
+/// @group file-card-base
+@mixin nested {
+  // padding родителя + icon-size + gap = выравнивание под контент
+  padding-left: calc(#{$padding} + #{$icon-size});
+  padding-top: $gap-nested;
+  padding-bottom: $gap-nested;
+  @include mixins.flex-column($gap-nested);
+
+  @include breakpoints.md-down {
+    // padding-left: calc(#{$padding-nested} + #{$icon-size-nested} + #{$gap-nested});
+    padding-left: $gap-nested;
+  }
+}

package/scss/abstracts/file-card/_index.scss

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

package/scss/abstracts/file-card/_variables.scss

@@ -0,0 +1,79 @@
+// ============================================
+// FILE CARD — VARIABLES
+// local/common/theme-moexp/src/scss/abstracts/file-card/_variables.scss
+// ============================================
+
+////
+/// Переменные компонента file-card
+/// @group file-card-variables
+/// @author MOEXP Team
+////
+
+@use "../spacing";
+@use "../typography";
+@use "../animations";
+
+/// Padding карточки
+/// @type Number
+/// @group file-card-variables
+$padding: spacing.$spacing-lg !default;
+
+/// Padding вложенной карточки
+/// @type Number
+/// @group file-card-variables
+$padding-nested: spacing.$spacing-md !default;
+
+/// Gap между элементами
+/// @type Number
+/// @group file-card-variables
+$gap: spacing.$gap-lg !default;
+
+/// Gap для вложенной карточки
+/// @type Number
+/// @group file-card-variables
+$gap-nested: spacing.$gap-md !default;
+
+/// Размер контейнера иконки типа файла
+/// @type Number
+/// @group file-card-variables
+$icon-size: 4rem !default;
+
+/// Размер контейнера иконки (nested)
+/// @type Number
+/// @group file-card-variables
+$icon-size-nested: 3rem !default;
+
+/// Размер SVG иконки внутри контейнера (50%)
+/// @type Number
+/// @group file-card-variables
+$icon-svg-size: 2rem !default;
+
+/// Размер SVG иконки (nested)
+/// @type Number
+/// @group file-card-variables
+$icon-svg-size-nested: 1.5rem !default;
+
+/// Размер кнопки скачивания
+/// @type Number
+/// @group file-card-variables
+$download-size: 3rem !default;
+
+/// Размер кнопки скачивания (nested)
+/// @type Number
+/// @group file-card-variables
+$download-size-nested: 2.5rem !default;
+
+/// Размер иконки скачивания
+/// @type Number
+/// @group file-card-variables
+$download-icon-size: 1.5rem !default;
+
+/// Отступ вложенных элементов слева
+/// @type Number
+/// @group file-card-variables
+$nested-indent: spacing.$spacing-2xl !default;
+
+/// Transition duration
+/// @type Number
+/// @group file-card-variables
+$transition-duration: animations.$duration-fast !default;