@mr.slonn/my-scss-theme 1.0.0

package/scss/abstracts/_colors.scss

@@ -0,0 +1,256 @@
+////
+/// Цветовая палитра темы MOEXP
+/// @group colors
+/// @author MOEXP Team
+////
+
+// ============================================
+// ЦВЕТОВАЯ ПАЛИТРА (local\common\theme-moexp\src\scss\abstracts\_colors.scss)
+// ============================================
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+/// Основная карта HSL-цветов для светлой темы
+/// @type Map
+/// @prop {List} primary [209 32% 35%] - Основной цвет бренда
+/// @prop {List} primary-foreground [40 14% 96%] - Текст на primary
+/// @prop {List} secondary [209 24% 42%] - Вторичный цвет
+/// @prop {List} secondary-foreground [40 14% 98%] - Текст на secondary
+/// @prop {List} accent [11 54% 51%] - Акцентный цвет
+/// @prop {List} accent-foreground [40 14% 96%] - Текст на accent
+/// @prop {List} accent-on-light [11 54% 43%] - Акцент для светлого фона
+/// @prop {List} background [40 14% 96%] - Фон страницы
+/// @prop {List} background-section [40 11% 93%] - Фон секций
+/// @prop {List} background-card [40 33% 99%] - Фон карточек
+/// @prop {List} foreground [210 25% 24%] - Цвет заголовков
+/// @prop {List} foreground-body [210 8% 25%] - Цвет основного текста
+/// @prop {List} foreground-muted [210 6% 40%] - Приглушённый текст
+/// @prop {List} foreground-caption [210 10% 57%] - Подписи и caption
+/// @prop {List} border [210 15% 85%] - Цвет границ
+/// @prop {List} input [210 15% 85%] - Границы полей ввода
+/// @prop {List} ring [209 32% 35%] - Цвет focus-ring
+/// @prop {List} destructive [0 84% 60%] - Цвет ошибок/удаления
+/// @prop {List} destructive-foreground [210 40% 98%] - Текст на destructive
+/// @prop {List} success [142 71% 45%] - Цвет успеха
+/// @prop {List} success-foreground [210 40% 98%] - Текст на success
+/// @prop {List} warning [38 92% 50%] - Цвет предупреждений
+/// @prop {List} warning-foreground [210 25% 24%] - Текст на warning
+/// @prop {List} shadow [210 10% 10%] - Цвет теней
+/// @prop {List} overlay [210 25% 10%] - Цвет оверлея
+/// @group colors
+/// @see $css-hsl-vars-dark
+$css-hsl-vars: (
+  // Основные цвета бренда
+  primary: 209 32% 35%,
+  primary-foreground: 40 14% 96%,
+  secondary: 209 24% 42%,
+  secondary-foreground: 40 14% 98%,
+  accent: 11 54% 51%,
+  accent-foreground: 40 14% 96%,
+  accent-on-light: 11 54% 43%,
+
+  // Фоны
+  background: 40 14% 96%,
+  background-section: 40 11% 93%,
+  background-card: 40 33% 99%,
+
+  // Текст
+  foreground: 210 25% 24%,
+  foreground-body: 210 8% 25%,
+  foreground-muted: 210 6% 40%,
+  foreground-caption: 210 10% 57%,
+
+  // UI
+  border: 210 15% 85%,
+  input: 210 15% 85%,
+  ring: 209 32% 35%,
+
+  // Состояния
+  destructive: 0 84% 60%,
+  destructive-foreground: 210 40% 98%,
+  success: 142 71% 45%,
+  success-foreground: 210 40% 98%,
+  warning: 38 92% 50%,
+  warning-foreground: 210 25% 24%,
+
+  // Эффекты
+  shadow: 210 10% 10%,
+  overlay: 210 25% 10%,
+
+  // ─────────────────────────────────────────
+  // Семантические цвета компонентов
+  // ─────────────────────────────────────────
+  stats-icon-color: 209 32% 35%,
+  // = primary
+  project-card-meta-color: 11 54% 43%,
+  // = accent-on-light
+  search-on-light-color: 209 32% 35%,
+
+  // = primary
+);
+
+/// Карта HSL-цветов для тёмной темы (переопределения)
+/// @type Map
+/// @prop {List} background [210 25% 12%] - Тёмный фон страницы
+/// @prop {List} background-section [210 20% 15%] - Тёмный фон секций
+/// @prop {List} background-card [210 20% 18%] - Тёмный фон карточек
+/// @prop {List} foreground [40 14% 96%] - Светлый текст заголовков
+/// @prop {List} foreground-body [40 14% 90%] - Светлый основной текст
+/// @prop {List} foreground-muted [210 10% 70%] - Приглушённый светлый текст
+/// @prop {List} foreground-caption [210 10% 60%] - Светлые подписи
+/// @prop {List} border [210 15% 25%] - Тёмные границы
+/// @prop {List} input [210 15% 25%] - Тёмные границы полей
+/// @prop {List} ring [209 50% 50%] - Светлый focus-ring
+/// @prop {List} shadow [210 15% 5%] - Глубокие тени
+/// @prop {List} overlay [210 25% 5%] - Тёмный оверлей
+/// @group colors
+/// @see $css-hsl-vars
+$css-hsl-vars-dark: (
+  primary: 210 20% 18%,
+  background: 210 25% 12%,
+  background-section: 210 20% 15%,
+  background-card: 210 20% 18%,
+  foreground: 40 14% 96%,
+  foreground-body: 40 14% 90%,
+  foreground-muted: 210 10% 70%,
+  foreground-caption: 210 10% 60%,
+  border: 210 15% 25%,
+  input: 210 15% 25%,
+  ring: 209 50% 50%,
+  shadow: 210 15% 5%,
+  overlay: 210 25% 5%,
+
+  // ─────────────────────────────────────────
+  // Семантические цвета компонентов
+  // ─────────────────────────────────────────
+  stats-icon-color: 210 10% 70%,
+  // = foreground-muted
+  project-card-meta-color: 210 10% 70%,
+  // = foreground-muted
+  search-on-light-color: 40 14% 96%,
+  // = foreground
+);
+
+// ============================================
+// ФУНКЦИИ ДЛЯ РАБОТЫ С ЦВЕТАМИ
+// ============================================
+
+/// Проверяет существование цвета и возвращает HSL-список
+/// @param {String} $name - Имя цвета из карты $css-hsl-vars
+/// @return {List} HSL-значения в формате (h, s%, l%)
+/// @throw Ошибка если цвет не найден
+/// @example scss - Получение HSL-значений
+///   $hsl: get-hsl('primary');
+///   // => 209 32% 35%
+/// @group colors
+/// @access public
+@function get-hsl($name) {
+  $hsl: map.get($css-hsl-vars, $name);
+  @if not $hsl {
+    @error "Цвет `#{$name}` не найден в $css-hsl-vars. Доступные: #{map.keys($css-hsl-vars)}";
+  }
+  @return $hsl;
+}
+
+/// Возвращает статический hsl()/hsla() цвет
+/// Используется для fallback или когда CSS-переменные недоступны
+/// @param {String} $name - Имя цвета из карты $css-hsl-vars
+/// @param {Number} $alpha [1] - Прозрачность от 0 до 1
+/// @return {Color} HSL/HSLA цвет
+/// @example scss - Непрозрачный цвет
+///   background: color-static('primary');
+///   // => hsl(209, 32%, 35%)
+/// @example scss - Полупрозрачный цвет
+///   background: color-static('primary', 0.5);
+///   // => hsla(209, 32%, 35%, 0.5)
+/// @group colors
+/// @access public
+/// @see color-var
+@function color-static($name, $alpha: 1) {
+  $hsl: get-hsl($name);
+  $h: list.nth($hsl, 1);
+  $s: list.nth($hsl, 2);
+  $l: list.nth($hsl, 3);
+
+  @if $alpha == 1 {
+    @return hsl($h, $s, $l);
+  } @else {
+    @return hsla($h, $s, $l, $alpha);
+  }
+}
+
+/// Возвращает CSS-переменную обёрнутую в hsl()
+/// Основной способ использования цветов — поддерживает темизацию
+/// @param {String} $name - Имя цвета (соответствует CSS custom property)
+/// @param {Number} $alpha [1] - Прозрачность от 0 до 1
+/// @return {String} CSS hsl() с переменной внутри
+/// @example scss - Непрозрачный цвет
+///   background: color-var('primary');
+///   // => hsl(var(--primary))
+/// @example scss - Полупрозрачный цвет
+///   background: color-var('primary', 0.5);
+///   // => hsl(var(--primary) / 0.5)
+/// @example scss - В компоненте
+///   .button {
+///     background: color-var('accent');
+///     color: color-var('accent-foreground');
+///
+///     &:hover {
+///       background: color-var('accent', 0.9);
+///     }
+///   }
+/// @group colors
+/// @access public
+/// @see color-static
+@function color-var($name, $alpha: 1) {
+  // Проверка существования (для ошибки на этапе компиляции)
+  $hsl: get-hsl($name);
+
+  @if $alpha == 1 {
+    @return hsl(var(--#{$name}));
+  } @else {
+    @return hsl(var(--#{$name}) / #{$alpha});
+  }
+}
+
+// ============================================
+// CSS CUSTOM PROPERTIES
+// ============================================
+
+/// Корневые CSS-переменные для светлой темы
+/// @output CSS custom properties для всех цветов
+/// @group colors
+@mixin theme-light-vars {
+  :root {
+    color-scheme: light;
+
+    @each $name, $hsl in $css-hsl-vars {
+      --#{$name}: #{$hsl};
+    }
+  }
+}
+
+/// Тёмная тема — активируется классом .dark или атрибутом [data-theme="dark"]
+/// @output Переопределённые CSS custom properties для тёмной темы
+/// @group colors
+@mixin theme-dark-vars {
+  .dark,
+  [data-theme="dark"] {
+    color-scheme: dark;
+
+    @each $name, $hsl in $css-hsl-vars-dark {
+      --#{$name}: #{$hsl};
+    }
+  }
+}
+
+// Автоматическая тёмная тема по системным настройкам
+// @media (prefers-color-scheme: dark) {
+//   :root:not([data-theme="light"]) {
+//     @each $name, $hsl in $css-hsl-vars-dark {
+//       --#{$name}: #{$hsl};
+//     }
+//   }
+// }

package/scss/abstracts/_functions.scss

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