barneo-search-widget-lib/src/modules/productsWidget/style/dark-mode.css

Библиотека для поиска по каталогу Barneo на Vue 3

/* Barneo Products Widget - Dark Mode */

/* Автоматическая темная тема (только если не принудительно отключена) */
@media (prefers-color-scheme: dark) {
  .barneo-products-widget:not(.barneo-products-widget--light) {
    /* Основные CSS переменные для темной темы */
    --barneo-bg-primary: var(--barneo-gray-900);
    --barneo-bg-secondary: var(--barneo-gray-800);
    --barneo-bg-hover: var(--barneo-gray-700);
    --barneo-bg-disabled: var(--barneo-gray-700);
    --barneo-bg-skeleton: var(--barneo-gray-600);

    --barneo-text-primary: var(--barneo-gray-100);
    --barneo-text-secondary: var(--barneo-gray-300);
    --barneo-text-muted: var(--barneo-gray-400);
    --barneo-text-disabled: var(--barneo-gray-500);

    --barneo-border-light: var(--barneo-gray-700);
    --barneo-border-medium: var(--barneo-gray-600);
    --barneo-border-focus: var(--barneo-primary);

    /* Products Widget Specific */
    --barneo-products-bg: var(--barneo-bg-primary);
    --barneo-products-border: var(--barneo-border-light);
    --barneo-products-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
      0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --barneo-products-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
      0 2px 4px -1px rgba(0, 0, 0, 0.2);

    /* Product Card */
    --barneo-product-card-bg: var(--barneo-gray-800);
    --barneo-product-card-border: var(--barneo-gray-700);

    /* Product Image */
    --barneo-product-image-bg: var(--barneo-gray-700);
    --barneo-product-image-placeholder-bg: var(--barneo-gray-600);

    /* Product Content */
    --barneo-product-title-color: var(--barneo-gray-100);
    --barneo-product-description-color: var(--barneo-gray-300);
    --barneo-product-price-color: var(--barneo-success);

    /* Pagination */
    --barneo-pagination-bg: var(--barneo-gray-800);
    --barneo-pagination-border: var(--barneo-gray-700);
    --barneo-pagination-button-bg: var(--barneo-gray-800);
    --barneo-pagination-button-color: var(--barneo-gray-100);
    --barneo-pagination-button-hover-bg: var(--barneo-gray-700);
    --barneo-pagination-button-active-bg: var(--barneo-primary);
    --barneo-pagination-button-active-color: var(--barneo-white);
    --barneo-pagination-button-disabled-bg: var(--barneo-gray-600);
    --barneo-pagination-button-disabled-color: var(--barneo-gray-400);

    /* Loading */
    --barneo-loading-spinner-color: var(--barneo-primary);
    --barneo-loading-text-color: var(--barneo-gray-300);

    /* Empty State */
    --barneo-empty-text-color: var(--barneo-gray-300);
    --barneo-empty-icon-color: var(--barneo-gray-400);

    /* Error State */
    --barneo-error-text-color: #f87171;
    --barneo-error-bg: #7f1d1d;
    --barneo-error-border: #dc2626;
  }
}

/* Принудительная светлая тема */
.barneo-products-widget--light {
  /* Принудительно светлая тема - используем дефолтные переменные */
  --barneo-bg-primary: var(--barneo-white);
  --barneo-bg-secondary: var(--barneo-gray-50);
  --barneo-bg-hover: var(--barneo-gray-100);
  --barneo-bg-disabled: var(--barneo-gray-100);
  --barneo-bg-skeleton: var(--barneo-gray-200);

  --barneo-text-primary: var(--barneo-gray-900);
  --barneo-text-secondary: var(--barneo-gray-600);
  --barneo-text-muted: var(--barneo-gray-500);
  --barneo-text-disabled: var(--barneo-gray-400);

  --barneo-border-light: var(--barneo-gray-200);
  --barneo-border-medium: var(--barneo-gray-300);
  --barneo-border-focus: var(--barneo-primary);
}

/* Принудительная темная тема */
.barneo-products-widget--dark {
  /* Colors - Background */
  --barneo-bg-primary: var(--barneo-gray-900);
  --barneo-bg-secondary: var(--barneo-gray-800);
  --barneo-bg-hover: var(--barneo-gray-700);
  --barneo-bg-disabled: var(--barneo-gray-700);
  --barneo-bg-skeleton: var(--barneo-gray-600);

  /* Colors - Text */
  --barneo-text-primary: var(--barneo-gray-100);
  --barneo-text-secondary: var(--barneo-gray-300);
  --barneo-text-muted: var(--barneo-gray-400);
  --barneo-text-disabled: var(--barneo-gray-500);

  /* Colors - Border */
  --barneo-border-light: var(--barneo-gray-700);
  --barneo-border-medium: var(--barneo-gray-600);
  --barneo-border-focus: var(--barneo-primary);

  /* Products Widget Specific */
  --barneo-products-bg: var(--barneo-bg-primary);
  --barneo-products-border: var(--barneo-border-light);
  --barneo-products-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
    0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --barneo-products-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);

  /* Product Card */
  --barneo-product-card-bg: var(--barneo-gray-800);
  --barneo-product-card-border: var(--barneo-gray-700);

  /* Product Image */
  --barneo-product-image-bg: var(--barneo-gray-700);
  --barneo-product-image-placeholder-bg: var(--barneo-gray-600);

  /* Product Content */
  --barneo-product-title-color: var(--barneo-gray-100);
  --barneo-product-description-color: var(--barneo-gray-300);
  --barneo-product-price-color: var(--barneo-success);

  /* Pagination */
  --barneo-pagination-bg: var(--barneo-gray-800);
  --barneo-pagination-border: var(--barneo-gray-700);
  --barneo-pagination-button-bg: var(--barneo-gray-800);
  --barneo-pagination-button-color: var(--barneo-gray-100);
  --barneo-pagination-button-hover-bg: var(--barneo-gray-700);
  --barneo-pagination-button-active-bg: var(--barneo-primary);
  --barneo-pagination-button-active-color: var(--barneo-white);
  --barneo-pagination-button-disabled-bg: var(--barneo-gray-600);
  --barneo-pagination-button-disabled-color: var(--barneo-gray-400);

  /* Loading */
  --barneo-loading-spinner-color: var(--barneo-primary);
  --barneo-loading-text-color: var(--barneo-gray-300);

  /* Empty State */
  --barneo-empty-text-color: var(--barneo-gray-300);
  --barneo-empty-icon-color: var(--barneo-gray-400);

  /* Error State */
  --barneo-error-text-color: #f87171;
  --barneo-error-bg: #7f1d1d;
  --barneo-error-border: #dc2626;
}

/* Стили для темной темы (автоматической и принудительной) */
@media (prefers-color-scheme: dark) {
  .barneo-products-widget:not(.barneo-products-widget--light) {
    background-color: var(--barneo-bg-primary);
    color: var(--barneo-text-primary);
  }

  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-card:hover {
    border-color: var(--barneo-primary);
  }

  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-title {
    color: var(--barneo-text-primary);
  }

  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-title:hover {
    color: var(--barneo-primary);
  }

  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-pagination-button:hover:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--barneo-primary);
  }

  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-pagination-page:hover {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--barneo-primary);
  }

  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-pagination-page--active {
    background-color: var(--barneo-primary);
    color: var(--barneo-white);
  }

  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-pagination-page--active:hover {
    background-color: var(--barneo-primary-hover);
    color: var(--barneo-white);
  }

  /* Skeleton styles for automatic dark mode */
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-code,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-article,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-heart,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-image-placeholder,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-price,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-brand-text,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-brand-checkmark,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-availability,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-title-line,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-delivery,
  .barneo-products-widget:not(.barneo-products-widget--light)
    .barneo-product-skeleton-button {
    background: linear-gradient(
      90deg,
      var(--barneo-bg-skeleton) 25%,
      var(--barneo-gray-500) 50%,
      var(--barneo-bg-skeleton) 75%
    );
    background-size: 200% 100%;
    animation: barneo-skeleton-shimmer 1.5s infinite;
  }
}

/* Dark Mode Specific Adjustments */
.barneo-products-widget--dark .barneo-product-card:hover {
  border-color: var(--barneo-primary);
}

.barneo-products-widget--dark .barneo-product-title {
  color: var(--barneo-text-primary);
}

.barneo-products-widget--dark .barneo-product-title:hover {
  color: var(--barneo-primary);
}

.barneo-products-widget--dark .barneo-pagination-button:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--barneo-primary);
}

.barneo-products-widget--dark .barneo-pagination-page:hover {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--barneo-primary);
}

.barneo-products-widget--dark .barneo-pagination-page--active {
  background-color: var(--barneo-primary);
  color: var(--barneo-white);
}

.barneo-products-widget--dark .barneo-pagination-page--active:hover {
  background-color: var(--barneo-primary-hover);
  color: var(--barneo-white);
}

.barneo-products-widget--dark .barneo-pagination-button::before,
.barneo-products-widget--dark .barneo-pagination-page::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

/* Skeleton Dark Mode Styles */
.barneo-products-widget--dark .barneo-product-skeleton-code,
.barneo-products-widget--dark .barneo-product-skeleton-article,
.barneo-products-widget--dark .barneo-product-skeleton-heart,
.barneo-products-widget--dark .barneo-product-skeleton-image-placeholder,
.barneo-products-widget--dark .barneo-product-skeleton-price,
.barneo-products-widget--dark .barneo-product-skeleton-brand-text,
.barneo-products-widget--dark .barneo-product-skeleton-brand-checkmark,
.barneo-products-widget--dark .barneo-product-skeleton-availability,
.barneo-products-widget--dark .barneo-product-skeleton-title-line,
.barneo-products-widget--dark .barneo-product-skeleton-delivery,
.barneo-products-widget--dark .barneo-product-skeleton-button {
  background: linear-gradient(
    90deg,
    var(--barneo-bg-skeleton) 25%,
    var(--barneo-gray-500) 50%,
    var(--barneo-bg-skeleton) 75%
  );
  background-size: 200% 100%;
  animation: barneo-skeleton-shimmer 1.5s infinite;
}