catalog/ts_web/styles/shared.styles.ts

import { css, cssManager, unsafeCSS } from '@design.estate/dees-element';

export const fonts = {
  base: `'Geist Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`,
  mono: `'Geist Mono', ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace`
};

export const colors = {
  // Background colors
  background: {
    primary: cssManager.bdTheme('#ffffff', '#0a0a0a'),
    secondary: cssManager.bdTheme('#f9fafb', '#18181b'),
    muted: cssManager.bdTheme('#f3f4f6', '#27272a'),
    card: cssManager.bdTheme('#ffffff', '#18181b')
  },
  
  // Border colors
  border: {
    default: cssManager.bdTheme('#e5e7eb', '#27272a'),
    muted: cssManager.bdTheme('#f3f4f6', '#3f3f46')
  },
  
  // Text colors
  text: {
    primary: cssManager.bdTheme('#0a0a0a', '#fafafa'),
    secondary: cssManager.bdTheme('#6b7280', '#a1a1aa'),
    muted: cssManager.bdTheme('#9ca3af', '#71717a')
  },
  
  // Status colors
  status: {
    operational: cssManager.bdTheme('#10b981', '#064e3b'),
    degraded: cssManager.bdTheme('#f59e0b', '#78350f'),
    partial: cssManager.bdTheme('#ef4444', '#7f1d1d'),
    major: cssManager.bdTheme('#dc2626', '#450a0a'),
    maintenance: cssManager.bdTheme('#3b82f6', '#1e3a8a')
  }
};

export const shadows = {
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  base: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
  md: '0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'
};

export const borderRadius = {
  sm: '4px',
  base: '6px',
  md: '8px',
  lg: '12px',
  xl: '16px',
  full: '9999px'
};

export const spacing = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
  xl: '32px',
  '2xl': '48px',
  '3xl': '64px'
};

export const commonStyles = css`
  /* Button styles */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: ${unsafeCSS(fonts.base)};
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    padding: 0 16px;
    border-radius: ${unsafeCSS(borderRadius.base)};
    border: 1px solid ${colors.border.default};
    background: transparent;
    color: ${colors.text.primary};
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    gap: 8px;
  }
  
  .button:hover {
    background: ${cssManager.bdTheme('#f9fafb', '#262626')};
    border-color: ${cssManager.bdTheme('#d1d5db', '#404040')};
    transform: translateY(-1px);
  }
  
  .button:active {
    transform: translateY(0);
  }
  
  .button.primary {
    background: ${colors.text.primary};
    color: ${colors.background.primary};
    border-color: ${colors.text.primary};
  }
  
  .button.primary:hover {
    background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
    border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
  }
  
  /* Card styles */
  .card {
    background: ${colors.background.card};
    border: 1px solid ${colors.border.default};
    border-radius: ${unsafeCSS(borderRadius.md)};
    padding: ${unsafeCSS(spacing.lg)};
    box-shadow: ${unsafeCSS(shadows.sm)};
  }
  
  /* Loading skeleton */
  .skeleton {
    background: ${cssManager.bdTheme(
      'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
      'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
    )};
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: ${unsafeCSS(borderRadius.base)};
  }
  
  @keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  
  /* Container styles */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 ${unsafeCSS(spacing.lg)};
  }
  
  /* Responsive utilities */
  @media (max-width: 640px) {
    .container {
      padding: 0 ${unsafeCSS(spacing.md)};
    }
  }
`;

export const getStatusColor = (status: string) => {
  switch (status) {
    case 'operational':
      return colors.status.operational;
    case 'degraded':
      return colors.status.degraded;
    case 'partial_outage':
      return colors.status.partial;
    case 'major_outage':
      return colors.status.major;
    case 'maintenance':
      return colors.status.maintenance;
    default:
      return colors.text.secondary;
  }
};

export const getStatusIcon = (status: string) => {
  switch (status) {
    case 'operational':
      return '✓';
    case 'degraded':
      return '!';
    case 'partial_outage':
      return '⚠';
    case 'major_outage':
      return '✕';
    case 'maintenance':
      return '🔧';
    default:
      return '?';
  }
};