@shumoku/core 0.1.0

package/src/themes/dark.ts

@@ -0,0 +1,110 @@
+/**
+ * Dark theme
+ */
+
+import type { Theme } from './types.js'
+import { modernTheme } from './modern.js'
+import { DeviceType } from '../models/index.js'
+
+export const darkTheme: Theme = {
+  ...modernTheme,
+  name: 'dark',
+  variant: 'dark',
+  
+  colors: {
+    ...modernTheme.colors,
+    
+    // Backgrounds (inverted)
+    background: '#0f172a',
+    surface: '#1e293b',
+    surfaceHover: '#334155',
+    
+    // Text (inverted)
+    text: '#f1f5f9',
+    textSecondary: '#94a3b8',
+    textDisabled: '#475569',
+    
+    // Primary (adjusted for dark)
+    primary: '#60a5fa',
+    primaryHover: '#3b82f6',
+    primaryActive: '#2563eb',
+    
+    // Secondary (adjusted for dark)
+    secondary: '#a78bfa',
+    secondaryHover: '#8b5cf6',
+    secondaryActive: '#7c3aed',
+    
+    // Status (adjusted for dark)
+    success: '#34d399',
+    warning: '#fbbf24',
+    error: '#f87171',
+    info: '#60a5fa',
+    
+    // Links
+    link: '#60a5fa',
+    linkHover: '#3b82f6',
+    linkDown: '#f87171',
+    
+    // Device colors (adjusted for dark)
+    devices: {
+      [DeviceType.Router]: '#60a5fa',
+      [DeviceType.L3Switch]: '#a78bfa',
+      [DeviceType.L2Switch]: '#c4b5fd',
+      [DeviceType.Firewall]: '#f87171',
+      [DeviceType.LoadBalancer]: '#fbbf24',
+      [DeviceType.Server]: '#34d399',
+      [DeviceType.AccessPoint]: '#22d3ee',
+      [DeviceType.Cloud]: '#60a5fa',
+      [DeviceType.Internet]: '#818cf8',
+      [DeviceType.Generic]: '#64748b',
+    },
+    
+    // Module colors (adjusted for dark)
+    modules: {
+      core: '#1e3a8a',
+      distribution: '#581c87',
+      access: '#064e3b',
+      dmz: '#7f1d1d',
+      cloud: '#312e81',
+      default: '#374151',
+    },
+    
+    // Grid
+    grid: '#334155',
+    guideline: '#60a5fa',
+  },
+  
+  shadows: {
+    ...modernTheme.shadows,
+    
+    // Darker shadows for dark theme
+    small: {
+      color: '#000000',
+      blur: 4,
+      offsetX: 0,
+      offsetY: 1,
+      alpha: 0.3,
+    },
+    medium: {
+      color: '#000000',
+      blur: 10,
+      offsetX: 0,
+      offsetY: 4,
+      alpha: 0.4,
+    },
+    large: {
+      color: '#000000',
+      blur: 25,
+      offsetX: 0,
+      offsetY: 10,
+      alpha: 0.5,
+    },
+    glow: {
+      color: '#60a5fa',
+      blur: 20,
+      offsetX: 0,
+      offsetY: 0,
+      alpha: 0.7,
+    },
+  },
+}

package/src/themes/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Theme system exports
+ */
+
+export * from './types.js'
+export { modernTheme } from './modern.js'
+export { darkTheme } from './dark.js'
+export {
+  mergeTheme,
+  createTheme,
+  applyThemeToCSS,
+  getThemeFromCSS
+} from './utils.js'
+
+// Default themes map
+import { modernTheme } from './modern.js'
+import { darkTheme } from './dark.js'
+
+export const themes = {
+  modern: modernTheme,
+  dark: darkTheme,
+} as const
+
+export type ThemeName = keyof typeof themes

package/src/themes/modern.ts

@@ -0,0 +1,186 @@
+/**
+ * Modern theme - Default light theme
+ */
+
+import type { Theme } from './types.js'
+import { DeviceType } from '../models/index.js'
+
+export const modernTheme: Theme = {
+  name: 'modern',
+  variant: 'light',
+  
+  colors: {
+    // Backgrounds
+    background: '#ffffff',
+    surface: '#f8fafc',
+    surfaceHover: '#f1f5f9',
+    
+    // Text
+    text: '#0f172a',
+    textSecondary: '#64748b',
+    textDisabled: '#cbd5e1',
+    
+    // Primary (Blue)
+    primary: '#3b82f6',
+    primaryHover: '#2563eb',
+    primaryActive: '#1d4ed8',
+    
+    // Secondary (Purple)
+    secondary: '#8b5cf6',
+    secondaryHover: '#7c3aed',
+    secondaryActive: '#6d28d9',
+    
+    // Status
+    success: '#10b981',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+    
+    // Links
+    link: '#3b82f6',
+    linkHover: '#2563eb',
+    linkDown: '#ef4444',
+    
+    // Device colors
+    devices: {
+      [DeviceType.Router]: '#3b82f6',
+      [DeviceType.L3Switch]: '#8b5cf6',
+      [DeviceType.L2Switch]: '#a78bfa',
+      [DeviceType.Firewall]: '#ef4444',
+      [DeviceType.LoadBalancer]: '#f59e0b',
+      [DeviceType.Server]: '#10b981',
+      [DeviceType.AccessPoint]: '#06b6d4',
+      [DeviceType.Cloud]: '#3b82f6',
+      [DeviceType.Internet]: '#6366f1',
+      [DeviceType.Generic]: '#94a3b8',
+    },
+    
+    // Module colors
+    modules: {
+      core: '#dbeafe',
+      distribution: '#e9d5ff',
+      access: '#d1fae5',
+      dmz: '#fee2e2',
+      cloud: '#e0e7ff',
+      default: '#f3f4f6',
+    },
+    
+    // Grid
+    grid: '#e5e7eb',
+    guideline: '#3b82f6',
+  },
+  
+  dimensions: {
+    device: {
+      small: { width: 60, height: 40 },
+      medium: { width: 80, height: 60 },
+      large: { width: 120, height: 80 },
+    },
+    
+    fontSize: {
+      tiny: 10,
+      small: 12,
+      medium: 14,
+      large: 16,
+      huge: 20,
+    },
+    
+    lineWidth: {
+      thin: 1,
+      normal: 2,
+      thick: 3,
+      emphasis: 4,
+    },
+    
+    spacing: {
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+      xl: 32,
+    },
+    
+    radius: {
+      small: 4,
+      medium: 8,
+      large: 12,
+      round: 9999,
+    },
+  },
+  
+  shadows: {
+    none: {
+      color: 'transparent',
+      blur: 0,
+      offsetX: 0,
+      offsetY: 0,
+    },
+    small: {
+      color: '#0f172a',
+      blur: 4,
+      offsetX: 0,
+      offsetY: 1,
+      alpha: 0.05,
+    },
+    medium: {
+      color: '#0f172a',
+      blur: 10,
+      offsetX: 0,
+      offsetY: 4,
+      alpha: 0.1,
+    },
+    large: {
+      color: '#0f172a',
+      blur: 25,
+      offsetX: 0,
+      offsetY: 10,
+      alpha: 0.15,
+    },
+    glow: {
+      color: '#3b82f6',
+      blur: 20,
+      offsetX: 0,
+      offsetY: 0,
+      alpha: 0.5,
+    },
+  },
+  
+  animations: {
+    duration: {
+      instant: 0,
+      fast: 150,
+      normal: 300,
+      slow: 500,
+    },
+    
+    easing: {
+      linear: 'linear',
+      easeIn: 'ease-in',
+      easeOut: 'ease-out',
+      easeInOut: 'ease-in-out',
+      bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+    },
+  },
+  
+  typography: {
+    fontFamily: {
+      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      mono: 'ui-monospace, "Cascadia Mono", "Consolas", monospace',
+      display: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    },
+    
+    fontWeight: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    
+    letterSpacing: {
+      tight: -0.025,
+      normal: 0,
+      wide: 0.025,
+    },
+  },
+}

package/src/themes/types.ts

@@ -0,0 +1,262 @@
+/**
+ * Theme system types
+ */
+
+import type { DeviceType } from '../models/index.js'
+
+export interface ThemeColors {
+  /**
+   * Background colors
+   */
+  background: string
+  surface: string
+  surfaceHover: string
+  
+  /**
+   * Text colors
+   */
+  text: string
+  textSecondary: string
+  textDisabled: string
+  
+  /**
+   * Primary palette
+   */
+  primary: string
+  primaryHover: string
+  primaryActive: string
+  
+  /**
+   * Secondary palette
+   */
+  secondary: string
+  secondaryHover: string
+  secondaryActive: string
+  
+  /**
+   * Status colors
+   */
+  success: string
+  warning: string
+  error: string
+  info: string
+  
+  /**
+   * Link colors
+   */
+  link: string
+  linkHover: string
+  linkDown: string
+  
+  /**
+   * Device type colors
+   */
+  devices: Partial<Record<DeviceType | string, string>>
+  
+  /**
+   * Module colors (for Bento Grid)
+   */
+  modules: {
+    core: string
+    distribution: string
+    access: string
+    dmz: string
+    cloud: string
+    default: string
+  }
+  
+  /**
+   * Grid and guides
+   */
+  grid: string
+  guideline: string
+}
+
+export interface ThemeDimensions {
+  /**
+   * Device dimensions
+   */
+  device: {
+    small: { width: number; height: number }
+    medium: { width: number; height: number }
+    large: { width: number; height: number }
+  }
+  
+  /**
+   * Font sizes
+   */
+  fontSize: {
+    tiny: number
+    small: number
+    medium: number
+    large: number
+    huge: number
+  }
+  
+  /**
+   * Line widths
+   */
+  lineWidth: {
+    thin: number
+    normal: number
+    thick: number
+    emphasis: number
+  }
+  
+  /**
+   * Spacing
+   */
+  spacing: {
+    xs: number
+    sm: number
+    md: number
+    lg: number
+    xl: number
+  }
+  
+  /**
+   * Border radius
+   */
+  radius: {
+    small: number
+    medium: number
+    large: number
+    round: number
+  }
+}
+
+export interface ThemeShadows {
+  /**
+   * Shadow definitions
+   */
+  none: ShadowDefinition
+  small: ShadowDefinition
+  medium: ShadowDefinition
+  large: ShadowDefinition
+  glow: ShadowDefinition
+}
+
+export interface ShadowDefinition {
+  color: string
+  blur: number
+  offsetX: number
+  offsetY: number
+  alpha?: number
+}
+
+export interface ThemeAnimations {
+  /**
+   * Animation durations in ms
+   */
+  duration: {
+    instant: number
+    fast: number
+    normal: number
+    slow: number
+  }
+  
+  /**
+   * Easing functions
+   */
+  easing: {
+    linear: string
+    easeIn: string
+    easeOut: string
+    easeInOut: string
+    bounce: string
+  }
+}
+
+export interface ThemeTypography {
+  /**
+   * Font families
+   */
+  fontFamily: {
+    sans: string
+    mono: string
+    display: string
+  }
+  
+  /**
+   * Font weights
+   */
+  fontWeight: {
+    light: number
+    regular: number
+    medium: number
+    semibold: number
+    bold: number
+  }
+  
+  /**
+   * Letter spacing
+   */
+  letterSpacing: {
+    tight: number
+    normal: number
+    wide: number
+  }
+}
+
+export interface Theme {
+  /**
+   * Theme name
+   */
+  name: string
+  
+  /**
+   * Theme variant
+   */
+  variant: 'light' | 'dark'
+  
+  /**
+   * Color definitions
+   */
+  colors: ThemeColors
+  
+  /**
+   * Size definitions
+   */
+  dimensions: ThemeDimensions
+  
+  /**
+   * Shadow definitions
+   */
+  shadows: ThemeShadows
+  
+  /**
+   * Animation settings
+   */
+  animations: ThemeAnimations
+  
+  /**
+   * Typography settings
+   */
+  typography: ThemeTypography
+  
+  /**
+   * Custom properties
+   */
+  custom?: Record<string, unknown>
+}
+
+export interface ThemeOptions {
+  /**
+   * Base theme to extend
+   */
+  extends?: Theme
+  
+  /**
+   * Partial overrides
+   */
+  overrides?: DeepPartial<Theme>
+}
+
+// Utility type for deep partial
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends (infer U)[]
+    ? DeepPartial<U>[]
+    : T[P] extends readonly (infer U)[]
+    ? readonly DeepPartial<U>[]
+    : DeepPartial<T[P]>
+}

package/src/themes/utils.ts

@@ -0,0 +1,143 @@
+/**
+ * Theme utilities
+ */
+
+import type { Theme, ThemeOptions, DeepPartial } from './types.js'
+
+/**
+ * Merge theme with overrides
+ */
+export function mergeTheme(base: Theme, overrides?: DeepPartial<Theme>): Theme {
+  if (!overrides) return base
+  
+  return deepMerge(base, overrides) as Theme
+}
+
+/**
+ * Create custom theme
+ */
+export function createTheme(options: ThemeOptions): Theme {
+  const base = options.extends || getDefaultTheme()
+  return mergeTheme(base, options.overrides)
+}
+
+/**
+ * Apply theme to CSS variables
+ */
+export function applyThemeToCSS(theme: Theme, root: HTMLElement = document.documentElement): void {
+  const prefix = '--shumoku'
+  
+  // Colors
+  root.style.setProperty(`${prefix}-bg`, theme.colors.background)
+  root.style.setProperty(`${prefix}-surface`, theme.colors.surface)
+  root.style.setProperty(`${prefix}-text`, theme.colors.text)
+  root.style.setProperty(`${prefix}-text-secondary`, theme.colors.textSecondary)
+  root.style.setProperty(`${prefix}-primary`, theme.colors.primary)
+  root.style.setProperty(`${prefix}-secondary`, theme.colors.secondary)
+  root.style.setProperty(`${prefix}-success`, theme.colors.success)
+  root.style.setProperty(`${prefix}-warning`, theme.colors.warning)
+  root.style.setProperty(`${prefix}-error`, theme.colors.error)
+  root.style.setProperty(`${prefix}-info`, theme.colors.info)
+  
+  // Dimensions
+  root.style.setProperty(`${prefix}-radius-sm`, `${theme.dimensions.radius.small}px`)
+  root.style.setProperty(`${prefix}-radius-md`, `${theme.dimensions.radius.medium}px`)
+  root.style.setProperty(`${prefix}-radius-lg`, `${theme.dimensions.radius.large}px`)
+  
+  // Spacing
+  root.style.setProperty(`${prefix}-space-xs`, `${theme.dimensions.spacing.xs}px`)
+  root.style.setProperty(`${prefix}-space-sm`, `${theme.dimensions.spacing.sm}px`)
+  root.style.setProperty(`${prefix}-space-md`, `${theme.dimensions.spacing.md}px`)
+  root.style.setProperty(`${prefix}-space-lg`, `${theme.dimensions.spacing.lg}px`)
+  root.style.setProperty(`${prefix}-space-xl`, `${theme.dimensions.spacing.xl}px`)
+  
+  // Typography
+  root.style.setProperty(`${prefix}-font-sans`, theme.typography.fontFamily.sans)
+  root.style.setProperty(`${prefix}-font-mono`, theme.typography.fontFamily.mono)
+  
+  // Shadows
+  const shadowToCSS = (shadow: Theme['shadows'][keyof Theme['shadows']]) => {
+    const alpha = shadow.alpha || 1
+    const color = hexToRgba(shadow.color, alpha)
+    return `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blur}px ${color}`
+  }
+  
+  root.style.setProperty(`${prefix}-shadow-sm`, shadowToCSS(theme.shadows.small))
+  root.style.setProperty(`${prefix}-shadow-md`, shadowToCSS(theme.shadows.medium))
+  root.style.setProperty(`${prefix}-shadow-lg`, shadowToCSS(theme.shadows.large))
+  
+  // Set theme variant
+  root.setAttribute('data-theme', theme.variant)
+}
+
+/**
+ * Get theme from CSS variables
+ */
+export function getThemeFromCSS(root: HTMLElement = document.documentElement): Partial<Theme> {
+  const prefix = '--shumoku'
+  const style = getComputedStyle(root)
+  
+  const getVar = (name: string) => style.getPropertyValue(`${prefix}-${name}`).trim()
+  
+  return {
+    variant: root.getAttribute('data-theme') as 'light' | 'dark' || 'light',
+    colors: {
+      background: getVar('bg'),
+      surface: getVar('surface'),
+      text: getVar('text'),
+      textSecondary: getVar('text-secondary'),
+      primary: getVar('primary'),
+      secondary: getVar('secondary'),
+      success: getVar('success'),
+      warning: getVar('warning'),
+      error: getVar('error'),
+      info: getVar('info'),
+    } as Theme['colors'],
+  }
+}
+
+/**
+ * Convert hex color to rgba
+ */
+function hexToRgba(hex: string, alpha: number = 1): string {
+  if (hex === 'transparent') return 'transparent'
+  
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  if (!result) return hex
+  
+  const r = parseInt(result[1], 16)
+  const g = parseInt(result[2], 16)
+  const b = parseInt(result[3], 16)
+  
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+/**
+ * Deep merge utility
+ */
+function deepMerge(target: any, source: any): any {
+  if (!source) return target
+  
+  const result = { ...target }
+  
+  for (const key in source) {
+    if (source.hasOwnProperty(key)) {
+      if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        result[key] = deepMerge(target[key] || {}, source[key])
+      } else {
+        result[key] = source[key]
+      }
+    }
+  }
+  
+  return result
+}
+
+/**
+ * Get default theme
+ */
+function getDefaultTheme(): Theme {
+  // Lazy import to avoid circular dependency
+  const { modernTheme } = require('./modern')
+  return modernTheme
+}