@superdangerous/app-framework 4.16.37 → 4.17.2

package/ui/src/styles/app.css

@@ -0,0 +1,12 @@
+/**
+ * Minimal app CSS that imports framework styles
+ * Apps should import this instead of duplicating CSS
+ */
+
+/* Import framework global styles */
+@import '@episensor/ui-framework/styles/globals.css';
+
+/* Tailwind directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/ui/src/styles/globals.css

@@ -0,0 +1,350 @@
+/* Import fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* Tailwind directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Light theme - clean and modern */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 217 91% 60%; /* Neutral blue */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 217 91% 60%;
+    --radius: 0.5rem;
+    
+    /* Custom theme colors */
+    --color-intelligent: 271 50% 60%; /* Purple for intelligent templates */
+    --color-activity-read: 142 71% 45%; /* Green */
+    --color-activity-write: 217 91% 60%; /* Blue */
+    --color-activity-inactive: 0 0% 45%;
+    --color-success: 142 71% 45%;
+    --color-warning: 38 92% 50%;
+    --color-error: 0 84% 60%;
+    --color-info: 217 91% 60%;
+  }
+
+  .dark {
+    /* Dark theme - oxide-inspired */
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 8%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 8%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 217 91% 60%;
+    
+    /* Custom dark theme colors */
+    --color-intelligent: 271 50% 70%;
+    --color-activity-read: 142 71% 55%;
+    --color-activity-write: 217 91% 70%;
+    --color-activity-inactive: 0 0% 55%;
+    --color-success: 142 71% 55%;
+    --color-warning: 38 92% 60%;
+    --color-error: 0 84% 70%;
+    --color-info: 217 91% 70%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom utility classes */
+@layer utilities {
+  /* Animations */
+  @keyframes in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .animate-in {
+    animation: in 0.2s ease-out;
+  }
+
+  .animate-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  /* Scrollbar styling */
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground)) transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground));
+    border-radius: 3px;
+  }
+
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--foreground) / 0.5);
+  }
+}
+
+/* Component-specific styles */
+@layer components {
+  /* Card styles */
+  .card-gradient {
+    @apply bg-gradient-to-br from-card to-muted/50;
+  }
+
+  /* Button styles */
+  .btn-gradient {
+    @apply bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70;
+  }
+
+  /* Status indicators */
+  .status-online {
+    @apply bg-green-500 animate-pulse;
+  }
+
+  .status-offline {
+    @apply bg-red-500;
+  }
+
+  .status-warning {
+    @apply bg-yellow-500 animate-pulse;
+  }
+}
+
+/* ============================================================================
+   DataTable Styles - Outside @layer for proper CSS specificity
+   These styles ensure DataTable components work correctly without users
+   needing to battle Tailwind specificity issues.
+   ============================================================================ */
+
+/* DataTablePage: Search bar should not be full width */
+.data-table-page-header .w-full.sm\:w-auto {
+  width: auto !important;
+  min-width: 200px !important;
+  max-width: 320px !important;
+  flex-shrink: 0 !important;
+}
+
+/* DataTablePage: Header padding */
+.data-table-page-header {
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+  padding-top: 1rem !important;
+}
+
+/* Sticky checkbox column (left side) */
+.sticky-actions-table thead tr th:first-child:has(input[type="checkbox"]),
+.sticky-actions-table thead tr th.sticky-select-header {
+  position: sticky !important;
+  left: 0 !important;
+  z-index: 32 !important;
+  background-color: hsl(var(--muted)) !important;
+}
+
+.sticky-actions-table tbody tr td:first-child:has(input[type="checkbox"]),
+.sticky-actions-table tbody tr td.sticky-select-cell {
+  position: sticky !important;
+  left: 0 !important;
+  z-index: 6 !important;
+  background-color: white !important;
+}
+
+/* Right border on checkbox column */
+.sticky-actions-table thead tr th:first-child:has(input[type="checkbox"])::after,
+.sticky-actions-table thead tr th.sticky-select-header::after,
+.sticky-actions-table tbody tr td:first-child:has(input[type="checkbox"])::after,
+.sticky-actions-table tbody tr td.sticky-select-cell::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: hsl(var(--border));
+}
+
+/* Sticky actions column (right side) */
+.sticky-actions-table thead tr th:last-child {
+  position: sticky !important;
+  right: 0 !important;
+  z-index: 20 !important;
+  background-color: hsl(var(--muted)) !important;
+}
+
+.sticky-actions-table tbody tr td:last-child:not([colspan]) {
+  position: sticky !important;
+  right: 0 !important;
+  z-index: 10 !important;
+  background-color: white !important;
+}
+
+/* Left border on actions column */
+.sticky-actions-table thead tr th:last-child::before,
+.sticky-actions-table tbody tr td:last-child:not([colspan])::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: hsl(var(--border));
+}
+
+/* Column resize handles */
+.resizable-table th {
+  position: relative !important;
+}
+
+.resize-handle {
+  position: absolute !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  right: -6px !important;
+  width: 12px !important;
+  z-index: 50 !important;
+  cursor: col-resize !important;
+  touch-action: none;
+  transition: background-color 0.15s;
+}
+
+.resize-handle:hover,
+.resize-handle[data-resizing="true"] {
+  background-color: hsl(var(--border) / 0.3) !important;
+}
+
+.resize-handle::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background-color: hsl(var(--border) / 0.5);
+}
+
+/* DataTable scroll container */
+.data-table-scroll-container {
+  flex: 1 1 0% !important;
+  min-height: 0 !important;
+  overflow-x: auto !important;
+  overflow-y: auto !important;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+
+.data-table-scroll-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.data-table-scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.data-table-scroll-container::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--border));
+  border-radius: 4px;
+}
+
+.data-table-scroll-container::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Sticky header */
+.data-table-scroll-container thead {
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 30 !important;
+}
+
+.data-table-scroll-container thead tr,
+.data-table-scroll-container thead th {
+  background-color: hsl(var(--muted)) !important;
+}
+
+/* Header bottom border - cohesive border instead of individual cell borders */
+.data-table-scroll-container thead {
+  border-bottom: 1px solid hsl(var(--border)) !important;
+}
+
+.data-table-scroll-container thead th {
+  border: none !important;
+}
+
+/* Remove top border from first body row to prevent double border with header */
+.data-table-scroll-container tbody tr:first-child,
+.data-table-scroll-container tbody tr:first-child td {
+  border-top: none !important;
+}
+
+/* Empty state: container fills remaining space below table header */
+.data-table-scroll-container:has(.empty-state-container) {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+}
+
+.data-table-scroll-container:has(.empty-state-container) table {
+  flex-shrink: 0;
+}
+
+.data-table-scroll-container .empty-state-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}

package/ui/src/styles/index.ts

@@ -0,0 +1,45 @@
+/**
+ * SuperDangerous UI Framework - Shared Style Constants
+ * Reusable Tailwind class combinations for consistency
+ * 
+ * @module @superdangerous/ui-framework/styles
+ */
+
+export const cardStyles = {
+  base: "transition-all duration-200",
+  interactive: "hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700 cursor-pointer",
+  elevation: "shadow-sm",
+} as const;
+
+export const buttonStyles = {
+  primary: "gap-2",
+  icon: "h-4 w-4",
+} as const;
+
+export const emptyStateStyles = {
+  container: "flex flex-col items-center justify-center py-12 text-center",
+  icon: "h-12 w-12 text-muted-foreground mb-4",
+  title: "text-lg font-medium mb-2",
+  description: "text-sm text-muted-foreground max-w-sm",
+} as const;
+
+export const activityStyles = {
+  led: "w-2 h-2 rounded-full transition-all duration-200",
+  pulse: "animate-pulse",
+  colors: {
+    read: "bg-green-500",
+    write: "bg-blue-500",
+    inactive: "bg-gray-400",
+    error: "bg-red-500",
+  }
+} as const;
+
+export const statusStyles = {
+  badge: {
+    success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+    warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+    error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+    info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+    default: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
+  }
+} as const;