@jarllyng/nostromo 3.1.0

package/dist/themes/sulaco.css

@@ -0,0 +1,404 @@
+/* Sulaco Theme - Modern, military-inspired aesthetic from the USS Sulaco */
+
+[data-theme="sulaco"] {
+  /* Brand Colors - Military blue/gray inspired by the Sulaco */
+  --nostromo-color-brand-50: 210 40% 95%;
+  --nostromo-color-brand-100: 210 40% 90%;
+  --nostromo-color-brand-200: 210 40% 80%;
+  --nostromo-color-brand-300: 210 40% 70%;
+  --nostromo-color-brand-400: 210 40% 60%;
+  --nostromo-color-brand-500: 210 40% 50%;
+  --nostromo-color-brand-600: 210 40% 40%;
+  --nostromo-color-brand-700: 210 40% 30%;
+  --nostromo-color-brand-800: 210 40% 20%;
+  --nostromo-color-brand-900: 210 40% 10%;
+  --nostromo-color-brand-950: 210 40% 5%;
+
+  /* Neutral Colors - Military grays and steel tones */
+  --nostromo-color-neutral-50: 0 0% 98%;
+  --nostromo-color-neutral-100: 0 0% 96%;
+  --nostromo-color-neutral-200: 0 0% 90%;
+  --nostromo-color-neutral-300: 0 0% 83%;
+  --nostromo-color-neutral-400: 0 0% 64%;
+  --nostromo-color-neutral-500: 0 0% 45%;
+  --nostromo-color-neutral-600: 0 0% 32%;
+  --nostromo-color-neutral-700: 0 0% 25%;
+  --nostromo-color-neutral-800: 0 0% 15%;
+  --nostromo-color-neutral-900: 0 0% 9%;
+  --nostromo-color-neutral-950: 0 0% 4%;
+
+  /* Success Colors - Green for operational status */
+  --nostromo-color-success-50: 142 76% 95%;
+  --nostromo-color-success-100: 142 76% 90%;
+  --nostromo-color-success-200: 142 76% 80%;
+  --nostromo-color-success-300: 142 76% 70%;
+  --nostromo-color-success-400: 142 76% 60%;
+  --nostromo-color-success-500: 142 76% 40%;
+  --nostromo-color-success-600: 142 76% 30%;
+  --nostromo-color-success-700: 142 76% 20%;
+  --nostromo-color-success-800: 142 76% 15%;
+  --nostromo-color-success-900: 142 76% 10%;
+  --nostromo-color-success-950: 142 76% 5%;
+
+  /* Warning Colors - Amber for system alerts */
+  --nostromo-color-warning-50: 38 92% 95%;
+  --nostromo-color-warning-100: 38 92% 90%;
+  --nostromo-color-warning-200: 38 92% 80%;
+  --nostromo-color-warning-300: 38 92% 70%;
+  --nostromo-color-warning-400: 38 92% 60%;
+  --nostromo-color-warning-500: 38 92% 50%;
+  --nostromo-color-warning-600: 38 92% 40%;
+  --nostromo-color-warning-700: 38 92% 30%;
+  --nostromo-color-warning-800: 38 92% 20%;
+  --nostromo-color-warning-900: 38 92% 10%;
+  --nostromo-color-warning-950: 38 92% 5%;
+
+  /* Error Colors - Red for critical alerts */
+  --nostromo-color-error-50: 0 100% 95%;
+  --nostromo-color-error-100: 0 100% 90%;
+  --nostromo-color-error-200: 0 100% 80%;
+  --nostromo-color-error-300: 0 100% 70%;
+  --nostromo-color-error-400: 0 100% 60%;
+  --nostromo-color-error-500: 0 100% 50%;
+  --nostromo-color-error-600: 0 100% 40%;
+  --nostromo-color-error-700: 0 100% 30%;
+  --nostromo-color-error-800: 0 100% 20%;
+  --nostromo-color-error-900: 0 100% 10%;
+  --nostromo-color-error-950: 0 100% 5%;
+
+  /* Info Colors - Blue for information */
+  --nostromo-color-info-50: 210 100% 95%;
+  --nostromo-color-info-100: 210 100% 90%;
+  --nostromo-color-info-200: 210 100% 80%;
+  --nostromo-color-info-300: 210 100% 70%;
+  --nostromo-color-info-400: 210 100% 60%;
+  --nostromo-color-info-500: 210 100% 50%;
+  --nostromo-color-info-600: 210 100% 40%;
+  --nostromo-color-info-700: 210 100% 30%;
+  --nostromo-color-info-800: 210 100% 20%;
+  --nostromo-color-info-900: 210 100% 10%;
+  --nostromo-color-info-950: 210 100% 5%;
+
+  /* Semantic Colors */
+  --nostromo-color-background: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-muted: hsl(var(--nostromo-color-neutral-100));
+  --nostromo-color-muted-foreground: hsl(var(--nostromo-color-neutral-600));
+  --nostromo-color-popover: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-popover-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-card: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-card-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-border: hsl(var(--nostromo-color-neutral-200));
+  --nostromo-color-input: hsl(var(--nostromo-color-neutral-200));
+  /* Contrast validated: primary-foreground/primary 4.52:1 */
+  --nostromo-color-primary: hsl(var(--nostromo-color-brand-500));
+  --nostromo-color-primary-foreground: hsl(
+    0 0% 100%
+  ); /* White for better contrast */
+  --nostromo-color-secondary: hsl(var(--nostromo-color-neutral-100));
+  --nostromo-color-secondary-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-accent: hsl(var(--nostromo-color-brand-100));
+  --nostromo-color-accent-foreground: hsl(var(--nostromo-color-brand-900));
+  --nostromo-color-destructive: hsl(var(--nostromo-color-error-500));
+  --nostromo-color-destructive-foreground: hsl(
+    var(--nostromo-color-neutral-50)
+  );
+  --nostromo-color-success-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-warning-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-error-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-info-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-ring: hsl(var(--nostromo-color-brand-500));
+
+  /* Typography */
+  --nostromo-font-sans:
+    "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  --nostromo-font-mono:
+    "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro",
+    monospace;
+  --nostromo-font-heading:
+    "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+
+  /* Spacing */
+  --nostromo-spacing-xs: 0.25rem;
+  --nostromo-spacing-sm: 0.5rem;
+  --nostromo-spacing-md: 1rem;
+  --nostromo-spacing-lg: 1.5rem;
+  --nostromo-spacing-xl: 2rem;
+  --nostromo-spacing-2xl: 3rem;
+  --nostromo-spacing-3xl: 4rem;
+
+  /* Border Radius */
+  --nostromo-radius-sm: 0.25rem;
+  --nostromo-radius-md: 0.375rem;
+  --nostromo-radius-lg: 0.5rem;
+  --nostromo-radius-xl: 0.75rem;
+  --nostromo-radius-2xl: 1rem;
+  --nostromo-radius-full: 9999px;
+
+  /* Shadows */
+  --nostromo-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --nostromo-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --nostromo-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --nostromo-shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --nostromo-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Transitions */
+  --nostromo-transition-fast: 150ms ease-in-out;
+  --nostromo-transition-normal: 250ms ease-in-out;
+  --nostromo-transition-slow: 350ms ease-in-out;
+
+  /* Z-Index */
+  --nostromo-z-dropdown: 1000;
+  --nostromo-z-sticky: 1020;
+  --nostromo-z-fixed: 1030;
+  --nostromo-z-modal-backdrop: 1040;
+  --nostromo-z-modal: 1050;
+  --nostromo-z-popover: 1060;
+  --nostromo-z-tooltip: 1070;
+  --nostromo-z-toast: 1080;
+}
+
+/* Dark mode overrides for Sulaco theme */
+[data-theme="sulaco"][data-color-scheme="dark"] {
+  --nostromo-color-background: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-muted: hsl(var(--nostromo-color-neutral-800));
+  --nostromo-color-muted-foreground: hsl(var(--nostromo-color-neutral-400));
+  --nostromo-color-popover: hsl(var(--nostromo-color-neutral-800));
+  --nostromo-color-popover-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-card: hsl(var(--nostromo-color-neutral-800));
+  --nostromo-color-card-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-border: hsl(var(--nostromo-color-neutral-700));
+  --nostromo-color-input: hsl(var(--nostromo-color-neutral-700));
+  --nostromo-color-primary: hsl(var(--nostromo-color-brand-400));
+  --nostromo-color-primary-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-secondary: hsl(var(--nostromo-color-neutral-700));
+  --nostromo-color-secondary-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-accent: hsl(var(--nostromo-color-brand-800));
+  --nostromo-color-accent-foreground: hsl(var(--nostromo-color-brand-100));
+  --nostromo-color-destructive: hsl(var(--nostromo-color-error-400));
+  --nostromo-color-destructive-foreground: hsl(
+    var(--nostromo-color-neutral-900)
+  );
+  --nostromo-color-success-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-warning-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-error-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-info-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-ring: hsl(var(--nostromo-color-brand-400));
+}
+
+/* Sulaco theme specific styles */
+[data-theme="sulaco"] {
+  /* Military, professional aesthetic */
+  font-family: var(--nostromo-font-sans);
+  line-height: 1.6;
+  color: var(--nostromo-color-foreground);
+  background-color: var(--nostromo-color-background);
+}
+
+[data-theme="sulaco"] .font-mono {
+  font-family: var(--nostromo-font-mono);
+}
+
+[data-theme="sulaco"] .font-heading {
+  font-family: var(--nostromo-font-heading);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+/* Sulaco theme component overrides */
+[data-theme="sulaco"] .btn {
+  border-radius: var(--nostromo-radius-md);
+  transition: all var(--nostromo-transition-fast);
+  border: 1px solid transparent;
+  font-weight: 500;
+}
+
+[data-theme="sulaco"] .btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--nostromo-shadow-md);
+}
+
+[data-theme="sulaco"] .btn-primary {
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-primary),
+    hsl(var(--nostromo-color-brand-600))
+  );
+  border: 1px solid hsl(var(--nostromo-color-brand-700));
+  box-shadow: 0 2px 4px 0 hsl(var(--nostromo-color-brand-500) / 0.2);
+}
+
+[data-theme="sulaco"] .btn-primary:hover {
+  background: linear-gradient(
+    135deg,
+    hsl(var(--nostromo-color-brand-600)),
+    hsl(var(--nostromo-color-brand-700))
+  );
+  box-shadow: 0 4px 8px 0 hsl(var(--nostromo-color-brand-500) / 0.3);
+}
+
+[data-theme="sulaco"] .card {
+  border-radius: var(--nostromo-radius-lg);
+  border: 1px solid var(--nostromo-color-border);
+  background-color: var(--nostromo-color-card);
+  box-shadow: var(--nostromo-shadow-sm);
+}
+
+[data-theme="sulaco"] .card-elevated {
+  box-shadow: var(--nostromo-shadow-lg);
+  border: 1px solid hsl(var(--nostromo-color-brand-200));
+}
+
+[data-theme="sulaco"] .input {
+  border-radius: var(--nostromo-radius-md);
+  border: 1px solid var(--nostromo-color-input);
+  transition: all var(--nostromo-transition-fast);
+  font-weight: 500;
+}
+
+[data-theme="sulaco"] .input:focus {
+  border-color: var(--nostromo-color-primary);
+  box-shadow: 0 0 0 3px hsl(var(--nostromo-color-primary) / 0.1);
+}
+
+/* Sulaco theme animations */
+[data-theme="sulaco"] .animate-pulse {
+  animation: sulaco-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes sulaco-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+[data-theme="sulaco"] .animate-spin {
+  animation: sulaco-spin 1s linear infinite;
+}
+
+@keyframes sulaco-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Sulaco theme special effects */
+[data-theme="sulaco"] .btn-military {
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-neutral-100),
+    var(--nostromo-color-neutral-200)
+  );
+  border: 1px solid var(--nostromo-color-neutral-300);
+  color: var(--nostromo-color-neutral-800);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+[data-theme="sulaco"] .btn-military:hover {
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-neutral-200),
+    var(--nostromo-color-neutral-300)
+  );
+  border-color: var(--nostromo-color-neutral-400);
+  transform: translateY(-1px);
+  box-shadow: var(--nostromo-shadow-md);
+}
+
+[data-theme="sulaco"] .card-military {
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-card),
+    hsl(var(--nostromo-color-neutral-100))
+  );
+  border: 1px solid var(--nostromo-color-border);
+  box-shadow: var(--nostromo-shadow-md);
+}
+
+[data-theme="sulaco"] .text-military {
+  color: var(--nostromo-color-neutral-700);
+  font-weight: 500;
+}
+
+[data-theme="sulaco"] .text-command {
+  color: var(--nostromo-color-primary);
+  font-weight: 600;
+}
+
+[data-theme="sulaco"] .text-status {
+  color: var(--nostromo-color-success-600);
+  font-weight: 500;
+}
+
+[data-theme="sulaco"] .text-alert {
+  color: var(--nostromo-color-warning-600);
+  font-weight: 500;
+}
+
+[data-theme="sulaco"] .text-critical {
+  color: var(--nostromo-color-error-600);
+  font-weight: 600;
+}
+
+/* Sulaco theme grid system */
+[data-theme="sulaco"] .grid-military {
+  display: grid;
+  gap: var(--nostromo-spacing-md);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+[data-theme="sulaco"] .grid-command {
+  display: grid;
+  gap: var(--nostromo-spacing-lg);
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+/* Sulaco theme status indicators */
+[data-theme="sulaco"] .status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nostromo-spacing-sm);
+  padding: var(--nostromo-spacing-xs) var(--nostromo-spacing-sm);
+  border-radius: var(--nostromo-radius-full);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+[data-theme="sulaco"] .status-online {
+  background-color: hsl(var(--nostromo-color-success-100));
+  color: hsl(var(--nostromo-color-success-800));
+  border: 1px solid hsl(var(--nostromo-color-success-200));
+}
+
+[data-theme="sulaco"] .status-warning {
+  background-color: hsl(var(--nostromo-color-warning-100));
+  color: hsl(var(--nostromo-color-warning-800));
+  border: 1px solid hsl(var(--nostromo-color-warning-200));
+}
+
+[data-theme="sulaco"] .status-critical {
+  background-color: hsl(var(--nostromo-color-error-100));
+  color: hsl(var(--nostromo-color-error-800));
+  border: 1px solid hsl(var(--nostromo-color-error-200));
+}
+
+[data-theme="sulaco"] .status-offline {
+  background-color: hsl(var(--nostromo-color-neutral-100));
+  color: hsl(var(--nostromo-color-neutral-600));
+  border: 1px solid hsl(var(--nostromo-color-neutral-200));
+}

package/dist/themes/utils.ts

@@ -0,0 +1,105 @@
+// Theme utilities and helpers
+
+export type ThemeName = 'nostromo' | 'mother' | 'lv-426' | 'sulaco';
+
+export const themes: Record<ThemeName, string> = {
+  nostromo: 'nostromo',
+  mother: 'mother',
+  'lv-426': 'lv-426',
+  sulaco: 'sulaco',
+} as const;
+
+/**
+ * Apply a theme to the document
+ */
+export function applyTheme(theme: ThemeName): void {
+  if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('data-theme', theme);
+  }
+}
+
+/**
+ * Get the current theme from the document
+ */
+export function getCurrentTheme(): ThemeName | null {
+  if (typeof document === 'undefined') return null;
+  
+  const theme = document.documentElement.getAttribute('data-theme');
+  return theme as ThemeName | null;
+}
+
+/**
+ * Toggle between light and dark mode
+ */
+export function toggleDarkMode(): void {
+  if (typeof document === 'undefined') return;
+  
+  const currentScheme = document.documentElement.getAttribute('data-color-scheme');
+  const newScheme = currentScheme === 'dark' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-color-scheme', newScheme);
+}
+
+/**
+ * Set dark mode
+ */
+export function setDarkMode(isDark: boolean): void {
+  if (typeof document === 'undefined') return;
+  
+  document.documentElement.setAttribute('data-color-scheme', isDark ? 'dark' : 'light');
+}
+
+/**
+ * Get current color scheme
+ */
+export function getColorScheme(): 'light' | 'dark' | null {
+  if (typeof document === 'undefined') return null;
+  
+  const scheme = document.documentElement.getAttribute('data-color-scheme');
+  return scheme as 'light' | 'dark' | null;
+}
+
+/**
+ * Check if system prefers dark mode
+ */
+export function prefersDarkMode(): boolean {
+  if (typeof window === 'undefined') return false;
+  
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+/**
+ * Listen for system color scheme changes
+ */
+export function onSystemColorSchemeChange(callback: (isDark: boolean) => void): () => void {
+  if (typeof window === 'undefined') return () => {};
+  
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  
+  const handler = (e: MediaQueryListEvent) => {
+    callback(e.matches);
+  };
+  
+  mediaQuery.addEventListener('change', handler);
+  
+  // Return cleanup function
+  return () => {
+    mediaQuery.removeEventListener('change', handler);
+  };
+}
+
+/**
+ * Initialize theme system
+ */
+export function initializeTheme(defaultTheme: ThemeName = 'nostromo'): void {
+  if (typeof document === 'undefined') return;
+  
+  // Set default theme if none is set
+  if (!getCurrentTheme()) {
+    applyTheme(defaultTheme);
+  }
+  
+  // Set initial color scheme based on system preference
+  if (!getColorScheme()) {
+    setDarkMode(prefersDarkMode());
+  }
+}