@skygraph/styles 0.0.0-placeholder.0 → 0.1.0

package/tokens.css

@@ -0,0 +1,312 @@
+/* SkyGraph Design Tokens */
+
+:root {
+  /* === Palette (theme-independent) === */
+  --sg-blue-1: #e6f4ff;
+  --sg-blue-2: #bae0ff;
+  --sg-blue-3: #91caff;
+  --sg-blue-4: #69b1ff;
+  --sg-blue-5: #4096ff;
+  --sg-blue-6: #1677ff;
+  --sg-blue-7: #0958d9;
+  --sg-blue-8: #003eb3;
+  --sg-blue-9: #002c8c;
+  --sg-blue-10: #001d66;
+
+  --sg-gray-1: #ffffff;
+  --sg-gray-2: #fafafa;
+  --sg-gray-3: #f5f5f5;
+  --sg-gray-4: #f0f0f0;
+  --sg-gray-5: #d9d9d9;
+  --sg-gray-6: #bfbfbf;
+  --sg-gray-7: #8c8c8c;
+  --sg-gray-8: #595959;
+  --sg-gray-9: #262626;
+  --sg-gray-10: #141414;
+
+  --sg-red-1: #fff2f0;
+  --sg-red-5: #ff4d4f;
+  --sg-red-6: #f5222d;
+
+  --sg-green-1: #f6ffed;
+  --sg-green-5: #73d13d;
+  --sg-green-6: #52c41a;
+
+  --sg-orange-1: #fffbe6;
+  --sg-orange-5: #faad14;
+  --sg-orange-6: #d48806;
+
+  /* === Sizing (theme-independent) === */
+  --sg-font-size-sm: 12px;
+  --sg-font-size: 14px;
+  --sg-font-size-lg: 16px;
+  --sg-font-size-xl: 20px;
+
+  --sg-line-height: 1.5714;
+
+  --sg-height-sm: 24px;
+  --sg-height-md: 32px;
+  --sg-height-lg: 40px;
+
+  --sg-border-radius-sm: 4px;
+  --sg-border-radius: 6px;
+  --sg-border-radius-lg: 8px;
+
+  --sg-padding-xs: 4px;
+  --sg-padding-sm: 8px;
+  --sg-padding-md: 12px;
+  --sg-padding-lg: 16px;
+  --sg-padding-xl: 24px;
+
+  --sg-margin-xs: 4px;
+  --sg-margin-sm: 8px;
+  --sg-margin-md: 16px;
+  --sg-margin-lg: 24px;
+
+  --sg-transition-duration: 0.2s;
+  --sg-transition-timing: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  /* Curated transition shorthands.
+   * `*-fast` (~120ms) — micro-interactions: button hovers, tiny color swaps,
+   *                     toolbar fades, edge hover stroke widens.
+   * `*-medium` (~180ms) — primary interactions: card lift on hover,
+   *                       node selection ring, dashboard widget elevation.
+   * Use them in `transition: <prop> var(--sg-transition-*)`. */
+  --sg-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
+  --sg-transition-medium: 180ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* === Z-index scale === */
+  --sg-z-base: 1;
+  --sg-z-sticky: 3;
+  --sg-z-sticky-fixed: 5;
+  --sg-z-loading: 10;
+  --sg-z-modal: 1000;
+  --sg-z-tooltip: 1000;
+  --sg-z-dropdown: 1050;
+  --sg-z-notification: 1060;
+
+  /* === Component tokens === */
+  --sg-color-star: #fadb14;
+}
+
+/* === Semantic tokens — Light theme (default) === */
+:root,
+[data-sg-theme="light"] {
+  --sg-color-bg: var(--sg-gray-1);
+  --sg-color-bg-secondary: var(--sg-gray-2);
+  --sg-color-bg-elevated: var(--sg-gray-1);
+  --sg-color-bg-container: var(--sg-gray-1);
+  --sg-color-bg-hover: var(--sg-gray-3);
+  --sg-color-bg-disabled: var(--sg-gray-3);
+
+  --sg-color-text: rgba(0, 0, 0, 0.88);
+  --sg-color-text-secondary: rgba(0, 0, 0, 0.65);
+  --sg-color-text-tertiary: rgba(0, 0, 0, 0.45);
+  --sg-color-text-quaternary: rgba(0, 0, 0, 0.25);
+  --sg-color-text-disabled: rgba(0, 0, 0, 0.25);
+  --sg-color-text-placeholder: rgba(0, 0, 0, 0.25);
+
+  --sg-color-border: var(--sg-gray-5);
+  --sg-color-border-secondary: var(--sg-gray-4);
+
+  --sg-color-primary: var(--sg-blue-6);
+  --sg-color-primary-hover: var(--sg-blue-5);
+  --sg-color-primary-active: var(--sg-blue-7);
+  --sg-color-primary-bg: var(--sg-blue-1);
+
+  --sg-color-error: var(--sg-red-5);
+  --sg-color-error-bg: var(--sg-red-1);
+  --sg-color-success: var(--sg-green-6);
+  --sg-color-success-bg: var(--sg-green-1);
+  --sg-color-warning: var(--sg-orange-5);
+  --sg-color-warning-bg: var(--sg-orange-1);
+
+  --sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --sg-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --sg-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.12);
+
+  --sg-color-white: #ffffff;
+  --sg-color-overlay: rgba(0, 0, 0, 0.45);
+  --sg-color-tooltip-bg: rgba(0, 0, 0, 0.85);
+  --sg-color-tooltip-text: #ffffff;
+
+  /* === Visualization layer (light) ===
+   * Re-mappable per theme. Components use these via `var(--sg-*)` so
+   * dark theme overrides cascade automatically. */
+
+  /* Diagram — canvas, grid, nodes, edges, lasso */
+  --sg-diagram-canvas-bg: var(--sg-color-bg);
+  --sg-diagram-grid-line-color: rgba(0, 0, 0, 0.04);
+  --sg-diagram-grid-line-color-strong: rgba(0, 0, 0, 0.08);
+  --sg-diagram-node-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 0 0 1px rgba(0, 0, 0, 0.04);
+  --sg-diagram-node-shadow-hover:
+    0 4px 12px rgba(0, 0, 0, 0.10),
+    0 1px 3px rgba(0, 0, 0, 0.06);
+  --sg-diagram-node-shadow-selected:
+    0 0 0 2px var(--sg-color-primary-bg),
+    0 6px 16px rgba(22, 119, 255, 0.18),
+    0 1px 3px rgba(0, 0, 0, 0.08);
+  --sg-diagram-node-shadow-dragging:
+    0 12px 28px rgba(0, 0, 0, 0.20),
+    0 2px 6px rgba(0, 0, 0, 0.10);
+  --sg-diagram-edge-color: var(--sg-gray-6);
+  --sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
+  --sg-diagram-edge-color-selected: var(--sg-color-primary);
+  --sg-diagram-lasso-stroke: var(--sg-color-primary);
+  --sg-diagram-lasso-fill: rgba(22, 119, 255, 0.08);
+
+  /* Charts — tooltip, crosshair, brush, legend */
+  --sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
+  --sg-chart-tooltip-shadow:
+    0 6px 20px rgba(0, 0, 0, 0.12),
+    0 1px 3px rgba(0, 0, 0, 0.06);
+  --sg-chart-crosshair-color: rgba(0, 0, 0, 0.32);
+  --sg-chart-brush-fill: rgba(22, 119, 255, 0.10);
+  --sg-chart-brush-stroke: var(--sg-color-primary);
+  --sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
+
+  /* Dashboard — widget elevation, editor affordances */
+  --sg-dashboard-widget-shadow: var(--sg-shadow-sm);
+  --sg-dashboard-widget-shadow-hover:
+    0 4px 12px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.04);
+  --sg-dashboard-editor-grid-color: rgba(22, 119, 255, 0.06);
+  --sg-dashboard-editor-widget-border: var(--sg-color-primary);
+  --sg-dashboard-editor-drop-zone-bg: rgba(22, 119, 255, 0.06);
+  --sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
+
+  /* Gantt — bars, today marker, dependency arrows */
+  --sg-gantt-bar-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.10),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
+  --sg-gantt-bar-shadow-hover:
+    0 3px 8px rgba(0, 0, 0, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  --sg-gantt-today-marker-color: var(--sg-color-error);
+  --sg-gantt-today-marker-bg: rgba(245, 34, 45, 0.06);
+  --sg-gantt-dep-color: var(--sg-color-text-tertiary);
+
+  /* Timeline / EventTimeline — connector + event dot */
+  --sg-timeline-tail-color: var(--sg-color-border-secondary);
+  --sg-event-timeline-dot-shadow:
+    0 0 0 3px var(--sg-color-bg),
+    0 1px 3px rgba(22, 119, 255, 0.30);
+  --sg-event-timeline-dot-shadow-hover:
+    0 0 0 3px var(--sg-color-bg),
+    0 2px 8px rgba(22, 119, 255, 0.45);
+
+  /* ResourceCalendar — today, lane separators, conflict overlay */
+  --sg-rcal-today-bg: rgba(22, 119, 255, 0.05);
+  --sg-rcal-today-marker-color: var(--sg-color-primary);
+  --sg-rcal-lane-divider: var(--sg-color-border-secondary);
+  --sg-rcal-conflict-overlay-bg: rgba(245, 34, 45, 0.10);
+}
+
+/* === Semantic tokens — Dark theme === */
+[data-sg-theme="dark"] {
+  --sg-color-bg: var(--sg-gray-10);
+  --sg-color-bg-secondary: #1f1f1f;
+  --sg-color-bg-elevated: #1f1f1f;
+  --sg-color-bg-container: #1f1f1f;
+  --sg-color-bg-hover: #2a2a2a;
+  --sg-color-bg-disabled: rgba(255, 255, 255, 0.08);
+
+  --sg-color-text: rgba(255, 255, 255, 0.88);
+  --sg-color-text-secondary: rgba(255, 255, 255, 0.65);
+  --sg-color-text-tertiary: rgba(255, 255, 255, 0.45);
+  --sg-color-text-quaternary: rgba(255, 255, 255, 0.25);
+  --sg-color-text-disabled: rgba(255, 255, 255, 0.25);
+  --sg-color-text-placeholder: rgba(255, 255, 255, 0.25);
+
+  --sg-color-border: #424242;
+  --sg-color-border-secondary: #303030;
+
+  --sg-color-primary: var(--sg-blue-5);
+  --sg-color-primary-hover: var(--sg-blue-6);
+  --sg-color-primary-active: var(--sg-blue-7);
+  --sg-color-primary-bg: rgba(22, 119, 255, 0.15);
+
+  --sg-color-error: #dc4446;
+  --sg-color-error-bg: rgba(220, 68, 70, 0.1);
+  --sg-color-success: #49aa19;
+  --sg-color-success-bg: rgba(73, 170, 25, 0.1);
+  --sg-color-warning: #d89614;
+  --sg-color-warning-bg: rgba(216, 150, 20, 0.1);
+
+  --sg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
+  --sg-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
+  --sg-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.48);
+
+  --sg-color-overlay: rgba(0, 0, 0, 0.65);
+  --sg-color-tooltip-bg: #434343;
+  --sg-color-tooltip-text: #ffffff;
+
+  /* === Visualization layer (dark) ===
+   * Shadows are stronger and use lower-alpha bright tints; canvas grid
+   * lines use white-alpha so they read against dark bg. */
+
+  --sg-diagram-canvas-bg: var(--sg-color-bg);
+  --sg-diagram-grid-line-color: rgba(255, 255, 255, 0.04);
+  --sg-diagram-grid-line-color-strong: rgba(255, 255, 255, 0.08);
+  --sg-diagram-node-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.40),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+  --sg-diagram-node-shadow-hover:
+    0 4px 12px rgba(0, 0, 0, 0.50),
+    0 1px 3px rgba(0, 0, 0, 0.40);
+  --sg-diagram-node-shadow-selected:
+    0 0 0 2px var(--sg-color-primary-bg),
+    0 6px 16px rgba(64, 150, 255, 0.30),
+    0 1px 3px rgba(0, 0, 0, 0.40);
+  --sg-diagram-node-shadow-dragging:
+    0 12px 28px rgba(0, 0, 0, 0.60),
+    0 2px 6px rgba(0, 0, 0, 0.40);
+  --sg-diagram-edge-color: var(--sg-gray-7);
+  --sg-diagram-edge-color-hover: var(--sg-color-text-secondary);
+  --sg-diagram-edge-color-selected: var(--sg-color-primary);
+  --sg-diagram-lasso-stroke: var(--sg-color-primary);
+  --sg-diagram-lasso-fill: rgba(64, 150, 255, 0.12);
+
+  --sg-chart-tooltip-bg: var(--sg-color-bg-elevated);
+  --sg-chart-tooltip-shadow:
+    0 6px 20px rgba(0, 0, 0, 0.50),
+    0 1px 3px rgba(0, 0, 0, 0.30);
+  --sg-chart-crosshair-color: rgba(255, 255, 255, 0.40);
+  --sg-chart-brush-fill: rgba(64, 150, 255, 0.16);
+  --sg-chart-brush-stroke: var(--sg-color-primary);
+  --sg-chart-legend-hover-bg: var(--sg-color-bg-hover);
+
+  --sg-dashboard-widget-shadow: var(--sg-shadow-sm);
+  --sg-dashboard-widget-shadow-hover:
+    0 4px 12px rgba(0, 0, 0, 0.40),
+    0 1px 3px rgba(0, 0, 0, 0.30);
+  --sg-dashboard-editor-grid-color: rgba(64, 150, 255, 0.08);
+  --sg-dashboard-editor-widget-border: var(--sg-color-primary);
+  --sg-dashboard-editor-drop-zone-bg: rgba(64, 150, 255, 0.10);
+  --sg-dashboard-editor-drop-zone-border: var(--sg-color-primary);
+
+  --sg-gantt-bar-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.40),
+    inset 0 1px 0 rgba(255, 255, 255, 0.10);
+  --sg-gantt-bar-shadow-hover:
+    0 3px 8px rgba(0, 0, 0, 0.50),
+    inset 0 1px 0 rgba(255, 255, 255, 0.14);
+  --sg-gantt-today-marker-color: var(--sg-color-error);
+  --sg-gantt-today-marker-bg: rgba(220, 68, 70, 0.10);
+  --sg-gantt-dep-color: var(--sg-color-text-tertiary);
+
+  --sg-timeline-tail-color: var(--sg-color-border-secondary);
+  --sg-event-timeline-dot-shadow:
+    0 0 0 3px var(--sg-color-bg),
+    0 1px 3px rgba(64, 150, 255, 0.45);
+  --sg-event-timeline-dot-shadow-hover:
+    0 0 0 3px var(--sg-color-bg),
+    0 2px 10px rgba(64, 150, 255, 0.65);
+
+  --sg-rcal-today-bg: rgba(64, 150, 255, 0.08);
+  --sg-rcal-today-marker-color: var(--sg-color-primary);
+  --sg-rcal-lane-divider: var(--sg-color-border-secondary);
+  --sg-rcal-conflict-overlay-bg: rgba(220, 68, 70, 0.16);
+}

package/transitions.css

@@ -0,0 +1,158 @@
+/* ============================
+   SkyGraph Transitions
+   ============================ */
+
+/* --- Fade --- */
+.sg-fade-enter-from,
+.sg-fade-leave-to {
+  opacity: 0;
+}
+
+.sg-fade-enter-to,
+.sg-fade-leave-from {
+  opacity: 1;
+}
+
+.sg-fade-enter-active,
+.sg-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+/* --- Slide Up --- */
+.sg-slide-up-enter-from,
+.sg-slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.sg-slide-up-enter-to,
+.sg-slide-up-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sg-slide-up-enter-active,
+.sg-slide-up-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+/* --- Slide Down --- */
+.sg-slide-down-enter-from,
+.sg-slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.sg-slide-down-enter-to,
+.sg-slide-down-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sg-slide-down-enter-active,
+.sg-slide-down-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+/* --- Slide Left --- */
+.sg-slide-left-enter-from,
+.sg-slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.sg-slide-left-enter-to,
+.sg-slide-left-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.sg-slide-left-enter-active,
+.sg-slide-left-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* --- Slide Right --- */
+.sg-slide-right-enter-from,
+.sg-slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.sg-slide-right-enter-to,
+.sg-slide-right-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.sg-slide-right-enter-active,
+.sg-slide-right-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* --- Zoom --- */
+.sg-zoom-enter-from,
+.sg-zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.85);
+}
+
+.sg-zoom-enter-to,
+.sg-zoom-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.sg-zoom-enter-active,
+.sg-zoom-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+/* --- Collapse --- */
+.sg-collapse-enter-from,
+.sg-collapse-leave-to {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+
+.sg-collapse-enter-to,
+.sg-collapse-leave-from {
+  max-height: 1000px;
+  overflow: hidden;
+  opacity: 1;
+}
+
+.sg-collapse-enter-active,
+.sg-collapse-leave-active {
+  transition: max-height 0.3s ease, opacity 0.3s ease;
+}
+
+/* --- Reduced motion --- */
+@media (prefers-reduced-motion: reduce) {
+  .sg-fade-enter-active,
+  .sg-fade-leave-active,
+  .sg-slide-up-enter-active,
+  .sg-slide-up-leave-active,
+  .sg-slide-down-enter-active,
+  .sg-slide-down-leave-active,
+  .sg-slide-left-enter-active,
+  .sg-slide-left-leave-active,
+  .sg-slide-right-enter-active,
+  .sg-slide-right-leave-active,
+  .sg-zoom-enter-active,
+  .sg-zoom-leave-active,
+  .sg-collapse-enter-active,
+  .sg-collapse-leave-active {
+    transition-duration: 0.01ms !important;
+  }
+
+  .sg-spin,
+  .sg-skeleton-active .sg-skeleton-avatar,
+  .sg-skeleton-active .sg-skeleton-title,
+  .sg-skeleton-active .sg-skeleton-paragraph li,
+  .sg-badge-status-processing {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}