update

2025-06-29 19:55:58 +00:00
parent d12147716d
commit 313e736f29
23 changed files with 11550 additions and 1587 deletions
--- a/ts_web/styles/shared.styles.ts
+++ b/ts_web/styles/shared.styles.ts
@@ -0,0 +1,181 @@
+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 '?';
+  }
+};