vision-accessibility 1.0.0

package/src/styles/variables.scss

@@ -0,0 +1,80 @@
+/**
+ * SCSS переменные для компонентов панели доступности
+ */
+
+// Цвета
+$white: #ffffff;
+$black: #000000;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+
+$primary: #007bff;
+$primary-dark: #0056b3;
+$primary-light: #e3f2fd;
+$primary-lighter: #f8f9ff;
+
+$success: #28a745;
+$warning: #ffc107;
+$danger: #dc3545;
+
+$yellow: #ffff00;
+$cyan: #00ffff;
+$magenta: #ff00ff;
+
+// Размеры
+$border-radius: 6px;
+$border-radius-lg: 8px;
+$border-radius-xl: 12px;
+
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 12px;
+$spacing-lg: 16px;
+$spacing-xl: 20px;
+$spacing-xxl: 24px;
+
+// Тени
+$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+$shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
+$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
+
+// Переходы
+$transition-fast: 0.2s ease;
+$transition-normal: 0.3s ease;
+
+// Точки останова
+$breakpoint-sm: 576px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1200px;
+
+// Миксины для адаптивности
+@mixin respond-down($breakpoint) {
+  @if $breakpoint == sm {
+    @media (max-width: #{$breakpoint-sm - 1px}) {
+      @content;
+    }
+  }
+  @if $breakpoint == md {
+    @media (max-width: #{$breakpoint-md - 1px}) {
+      @content;
+    }
+  }
+  @if $breakpoint == lg {
+    @media (max-width: #{$breakpoint-lg - 1px}) {
+      @content;
+    }
+  }
+  @if $breakpoint == xl {
+    @media (max-width: #{$breakpoint-xl - 1px}) {
+      @content;
+    }
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,72 @@
+/**
+ * Типы для панели доступности
+ * Определяет интерфейсы и типы для настроек доступности
+ */
+
+export type ColorScheme = 'standard' | 'high-contrast' | 'grayscale';
+export type FontSize = 'small' | 'standard' | 'large';
+
+/**
+ * Интерфейс настроек доступности
+ */
+export interface AccessibilitySettings {
+  /** Включен ли режим доступности */
+  isEnabled: boolean;
+  /** Цветовая схема */
+  colorScheme: ColorScheme;
+  /** Размер шрифта */
+  fontSize: FontSize;
+  /** Показывать ли изображения */
+  showImages: boolean;
+}
+
+/**
+ * Контекст для управления настройками доступности
+ */
+export interface AccessibilityContextType {
+  /** Текущие настройки */
+  settings: AccessibilitySettings;
+  /** Обновление настроек */
+  updateSettings: (updates: Partial<AccessibilitySettings>) => void;
+  /** Сброс настроек к значениям по умолчанию */
+  resetSettings: () => void;
+  /** Загружены ли настройки из localStorage */
+  isLoaded: boolean;
+}
+
+/**
+ * Свойства основного компонента панели доступности
+ */
+export interface AccessibilityPanelProps {
+  /** Открыта ли панель */
+  isOpen: boolean;
+  /** Обработчик закрытия панели */
+  onClose: () => void;
+  /** Позиция панели относительно кнопки */
+  position?: 'top-right' | 'top-left';
+}
+
+/**
+ * Свойства компонентов управления настройками
+ */
+export interface ControlComponentProps {
+  /** Текущие настройки */
+  settings: AccessibilitySettings;
+  /** Обработчик обновления настроек */
+  onUpdate: (updates: Partial<AccessibilitySettings>) => void;
+}
+
+/**
+ * Настройки по умолчанию
+ */
+export const DEFAULT_ACCESSIBILITY_SETTINGS: AccessibilitySettings = {
+  isEnabled: false,
+  colorScheme: 'standard',
+  fontSize: 'standard',
+  showImages: true,
+};
+
+/**
+ * Ключ для сохранения в localStorage
+ */
+export const STORAGE_KEY = 'accessibility-settings';

package/src/types/scss.d.ts

@@ -0,0 +1,9 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const content: string;
+  export default content;
+}