@skygraph/styles 0.0.0-placeholder.0 → 0.1.0

package/components/colorpicker.css

@@ -0,0 +1,252 @@
+/* === ColorPicker === */
+
+.sg-colorpicker-wrapper {
+  position: relative;
+  display: inline-block;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+}
+
+.sg-colorpicker-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* --- Sizes --- */
+
+.sg-colorpicker-small .sg-colorpicker-trigger {
+  height: var(--sg-height-sm);
+  padding: 2px var(--sg-padding-xs);
+}
+
+.sg-colorpicker-small .sg-colorpicker-swatch {
+  width: 16px;
+  height: 16px;
+}
+
+.sg-colorpicker-middle .sg-colorpicker-trigger {
+  height: var(--sg-height-md);
+  padding: var(--sg-padding-xs) var(--sg-padding-sm);
+}
+
+.sg-colorpicker-middle .sg-colorpicker-swatch {
+  width: 20px;
+  height: 20px;
+}
+
+.sg-colorpicker-large .sg-colorpicker-trigger {
+  height: var(--sg-height-lg);
+  padding: var(--sg-padding-xs) var(--sg-padding-md);
+}
+
+.sg-colorpicker-large .sg-colorpicker-swatch {
+  width: 24px;
+  height: 24px;
+}
+
+/* --- Trigger --- */
+
+.sg-colorpicker-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg-container);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition:
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
+    box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-colorpicker-trigger:disabled {
+  cursor: not-allowed;
+}
+
+.sg-colorpicker-trigger:hover {
+  border-color: var(--sg-color-primary-hover);
+}
+
+.sg-colorpicker-trigger:focus-visible {
+  outline: none;
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+/* --- Swatch --- */
+
+.sg-colorpicker-swatch {
+  display: inline-block;
+  border-radius: var(--sg-border-radius-sm);
+  border: 1px solid var(--sg-color-border-secondary);
+  flex-shrink: 0;
+}
+
+.sg-colorpicker-text {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  font-family: monospace;
+}
+
+/* --- Dropdown --- */
+
+.sg-colorpicker-dropdown {
+  position: absolute;
+  z-index: var(--sg-z-dropdown);
+  top: calc(100% + 4px);
+  left: 0;
+  width: 240px;
+  padding: var(--sg-padding-md);
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  border: 1px solid var(--sg-color-border-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sg-padding-sm);
+  animation: sg-colorpicker-in var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+@keyframes sg-colorpicker-in {
+  from {
+    opacity: 0;
+    transform: scaleY(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+/* --- Saturation panel --- */
+
+.sg-colorpicker-saturation {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  border-radius: var(--sg-border-radius-sm);
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+}
+
+.sg-colorpicker-cursor {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* --- Hue bar --- */
+
+.sg-colorpicker-hue {
+  position: relative;
+  width: 100%;
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+
+.sg-colorpicker-hue-cursor {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+  background: transparent;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/* --- Input row --- */
+
+.sg-colorpicker-input-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+}
+
+.sg-colorpicker-preview {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--sg-border-radius-sm);
+  border: 1px solid var(--sg-color-border-secondary);
+  flex-shrink: 0;
+}
+
+.sg-colorpicker-input {
+  flex: 1;
+  min-width: 0;
+  height: var(--sg-height-sm);
+  padding: 0 var(--sg-padding-sm);
+  font-size: var(--sg-font-size-sm);
+  font-family: monospace;
+  color: var(--sg-color-text);
+  background: var(--sg-color-bg-container);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius-sm);
+  outline: none;
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-colorpicker-input:focus {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+/* --- Presets --- */
+
+.sg-colorpicker-preset-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sg-padding-xs);
+}
+
+.sg-colorpicker-preset-label {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-tertiary);
+}
+
+.sg-colorpicker-preset-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sg-padding-xs);
+}
+
+.sg-colorpicker-preset-color {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--sg-border-radius-sm);
+  border: 1px solid var(--sg-color-border-secondary);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    transform var(--sg-transition-duration) var(--sg-transition-timing),
+    box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-colorpicker-preset-color:hover {
+  transform: scale(1.2);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}

package/components/context-menu.css

@@ -0,0 +1,95 @@
+/* SkyGraph -- Context Menu
+ *
+ * Floating menu used by Table cell/header right-click and DataGrid
+ * context-menu. Both share visual structure (background, border, shadow,
+ * padding, hover state) but live in separate class namespaces:
+ *
+ *   - `.sg-context-menu*`         — Table ContextMenu (packages/react/src/
+ *                                   components/complex/Table/ContextMenu.tsx)
+ *   - `.sg-datagrid-context-menu*` — DataGrid ContextMenuPopup (DataGrid.tsx)
+ *
+ * Position (top/left) and submenu offset (`top:0; left:100%`) stay inline in
+ * TSX because they are computed at runtime from the click coordinates. Every
+ * other visual property (background, colour, border, shadow, paddings,
+ * font-size, hover state, danger state, disabled state) lives here and is
+ * driven by tokens — no hard-coded hex / px values.
+ */
+
+/* ── Base shape, shared between Table and DataGrid via :is() group ── */
+.sg-context-menu,
+.sg-datagrid-context-menu {
+  z-index: var(--sg-z-dropdown);
+  min-width: 160px;
+  padding: var(--sg-padding-xs) 0;
+  background: var(--sg-color-bg-elevated);
+  border: 1px solid var(--sg-color-border-secondary);
+  border-radius: var(--sg-border-radius);
+  box-shadow: var(--sg-shadow-lg);
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+}
+
+/* ── Items ── */
+.sg-context-menu-item,
+.sg-datagrid-context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  padding: var(--sg-padding-xs) var(--sg-padding-md);
+  cursor: pointer;
+  line-height: var(--sg-line-height);
+  transition: background var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-context-menu-item:hover,
+.sg-datagrid-context-menu-item:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+/* ── Modifiers ── */
+.sg-context-menu-item--danger,
+.sg-datagrid-context-menu-item--danger {
+  color: var(--sg-color-error);
+}
+
+.sg-context-menu-item--disabled,
+.sg-datagrid-context-menu-item--disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-context-menu-item--disabled:hover,
+.sg-datagrid-context-menu-item--disabled:hover {
+  background: transparent;
+}
+
+/* ── Label (Table only — DataGrid uses plain text inside item div) ── */
+.sg-context-menu-label {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Submenu indicator (Table only) ── */
+.sg-context-menu-submenu-arrow {
+  margin-left: var(--sg-padding-sm);
+  color: var(--sg-color-text-tertiary);
+}
+
+/* ── Icon slot ── */
+.sg-context-menu-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--sg-color-text-secondary);
+}
+
+/* ── Divider ── */
+.sg-context-menu-divider,
+.sg-datagrid-context-menu-divider {
+  height: 1px;
+  margin: var(--sg-padding-xs) 0;
+  background: var(--sg-color-border-secondary);
+}

package/components/dashboard.css

@@ -0,0 +1,299 @@
+/* Dashboard — minimal static-layout grid for widgets.
+ *
+ * Editor-mode treatment lives in the same file so the visual difference
+ * between view and edit reads as a single, designed state rather than a
+ * collection of bolted-on tweaks. All colors / shadows route through
+ * `--sg-dashboard-*` semantic tokens so dark theme picks them up
+ * without per-rule duplication.
+ */
+
+.sg-dashboard {
+  width: 100%;
+}
+
+.sg-dashboard-widget {
+  background: var(--sg-color-bg-elevated);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--sg-dashboard-widget-shadow);
+  /* `transform` participates so the hover lift below stays in lock-step
+   * with the elevation change. Border-color animates on hover to give
+   * the widget a faint frame highlight. */
+  transition:
+    box-shadow var(--sg-transition-medium),
+    transform var(--sg-transition-medium),
+    border-color var(--sg-transition-medium);
+}
+
+.sg-dashboard-widget:hover {
+  box-shadow: var(--sg-dashboard-widget-shadow-hover);
+  border-color: var(--sg-color-border);
+}
+
+.sg-dashboard-widget[data-sg-maximized='true'] {
+  box-shadow: var(--sg-shadow-lg);
+}
+
+.sg-dashboard-widget-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  padding: var(--sg-padding-sm) var(--sg-padding-md);
+  font-weight: 600;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+  background: var(--sg-color-bg-container);
+}
+
+.sg-dashboard-widget-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sg-dashboard-widget-body {
+  flex: 1;
+  padding: var(--sg-padding-md);
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text-secondary);
+  overflow: auto;
+}
+
+/* Actions — `⋯` button + dropdown anchored to the widget header. */
+.sg-dashboard-widget-actions {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.sg-dashboard-widget-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sg-border-radius-sm);
+  background: transparent;
+  color: var(--sg-color-text-secondary);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity var(--sg-transition-fast),
+    background-color var(--sg-transition-fast),
+    color var(--sg-transition-fast);
+}
+
+.sg-dashboard-widget[data-sg-actions='visible'] .sg-dashboard-widget-more,
+.sg-dashboard-widget:hover .sg-dashboard-widget-more,
+.sg-dashboard-widget-more:focus-visible,
+.sg-dashboard-widget-more[aria-expanded='true'] {
+  opacity: 1;
+}
+
+.sg-dashboard-widget-more:hover,
+.sg-dashboard-widget-more[aria-expanded='true'] {
+  background: var(--sg-color-bg-hover);
+  color: var(--sg-color-text);
+}
+
+.sg-dashboard-widget-actions-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 20;
+  min-width: 160px;
+  padding: 4px;
+  background: var(--sg-color-bg-elevated);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  box-shadow: var(--sg-shadow-lg);
+  display: flex;
+  flex-direction: column;
+}
+
+.sg-dashboard-widget-actions-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  padding: 6px 10px;
+  border: none;
+  border-radius: var(--sg-border-radius-sm);
+  background: transparent;
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+  font-weight: 400;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.sg-dashboard-widget-actions-item:hover,
+.sg-dashboard-widget-actions-item:focus-visible {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-dashboard-widget-actions-item-danger {
+  color: var(--sg-color-error);
+}
+
+.sg-dashboard-widget-actions-item-danger:hover,
+.sg-dashboard-widget-actions-item-danger:focus-visible {
+  background: var(--sg-color-error-bg);
+  color: var(--sg-color-error);
+}
+
+.sg-dashboard-widget-actions-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+/* ─── Editor mode ────────────────────────────────────────────────────────
+ *
+ * `data-edit-mode='true'` on `.sg-dashboard-editor` flips the dashboard
+ * into edit mode. Key visual signals:
+ *   1. Subtle grid pattern on the editor background — communicates that
+ *      widgets snap to a layout grid.
+ *   2. Dashed accent border on every widget — reads as "drag me".
+ *   3. Resize handle gets full opacity + a halo when hovered.
+ * Reused base widget chrome above.
+ */
+
+.sg-dashboard-editor[data-edit-mode='true'] {
+  /* Fine 8px grid that hints at the underlying layout snap step. The
+   * `--sg-dashboard-editor-grid-color` token is primary-tinted in both
+   * themes so the pattern reads as "active editing surface". */
+  background-image:
+    linear-gradient(to right, var(--sg-dashboard-editor-grid-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--sg-dashboard-editor-grid-color) 1px, transparent 1px);
+  background-size: 16px 16px;
+  border-radius: var(--sg-border-radius);
+  /* A faint inset frame visually fences off the editor area — a useful
+   * affordance when the surrounding page also has its own layout. */
+  box-shadow: inset 0 0 0 1px var(--sg-color-border-secondary);
+}
+
+.sg-dashboard-editor[data-edit-mode='true'] .sg-dashboard-widget {
+  position: relative;
+  /* Dashed accent border replaces the solid one only in edit mode so
+   * widgets read as "live, draggable" without being noisy in view-mode.
+   * We override the *border* property entirely (style + color) so the
+   * change is unambiguous. */
+  border: 1px dashed var(--sg-dashboard-editor-widget-border);
+}
+
+.sg-dashboard-editor[data-edit-mode='true'] .sg-dashboard-widget:hover {
+  /* In edit-mode hover also tints the entire widget border so the
+   * dashed line goes from "inert outline" to "actively highlighted". */
+  border-color: var(--sg-color-primary);
+  box-shadow:
+    var(--sg-dashboard-widget-shadow-hover),
+    0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-dashboard-editor[data-edit-mode='true'] .sg-dashboard-widget-header {
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+
+.sg-dashboard-editor[data-edit-mode='true'] .sg-dashboard-widget-header::before {
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 14px;
+  margin-right: 4px;
+  flex-shrink: 0;
+  background-image:
+    radial-gradient(circle, var(--sg-color-text-tertiary) 1px, transparent 1.4px),
+    radial-gradient(circle, var(--sg-color-text-tertiary) 1px, transparent 1.4px);
+  background-size: 4px 4px;
+  background-position: 0 2px, 4px 2px;
+  background-repeat: repeat-y;
+  opacity: 0.6;
+  transition: opacity var(--sg-transition-fast);
+}
+
+.sg-dashboard-editor[data-edit-mode='true'] .sg-dashboard-widget:hover .sg-dashboard-widget-header::before {
+  opacity: 1;
+}
+
+.sg-dashboard-editor[data-edit-mode='true'] .sg-dashboard-widget-header:active {
+  cursor: grabbing;
+}
+
+/* Drop-zone affordance: while the editor is not actively being hovered
+ * by a particular widget but a drag is happening, an empty grid cell
+ * becomes a candidate target. We use `:focus-within` as a proxy for
+ * "interaction in progress" — when a widget is being dragged via
+ * keyboard, it lands focus on the editor. The pattern matches the
+ * snap grid above so the user's eye doesn't need to refocus. */
+.sg-dashboard-editor[data-edit-mode='true']:focus-within {
+  background-image:
+    linear-gradient(to right, var(--sg-dashboard-editor-drop-zone-border) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--sg-dashboard-editor-drop-zone-border) 1px, transparent 1px);
+  background-color: var(--sg-dashboard-editor-drop-zone-bg);
+}
+
+.sg-dashboard-editor-resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  opacity: 0.5;
+  touch-action: none;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 2px;
+  border-radius: var(--sg-border-radius-sm) 0 var(--sg-border-radius) 0;
+  transition:
+    opacity var(--sg-transition-fast),
+    background-color var(--sg-transition-fast);
+}
+
+.sg-dashboard-editor-resize-handle-grip {
+  display: block;
+  width: 10px;
+  height: 10px;
+  background-image:
+    linear-gradient(135deg, transparent 0 60%, var(--sg-color-border-secondary) 60% 70%, transparent 70% 80%, var(--sg-color-border-secondary) 80% 90%, transparent 90%);
+  pointer-events: none;
+  transition: background-image var(--sg-transition-fast);
+}
+
+.sg-dashboard-editor-resize-handle:hover,
+.sg-dashboard-editor-resize-handle:focus-visible,
+.sg-dashboard-widget:hover .sg-dashboard-editor-resize-handle {
+  opacity: 1;
+}
+
+.sg-dashboard-editor-resize-handle:hover {
+  background: var(--sg-color-primary-bg);
+}
+
+.sg-dashboard-editor-resize-handle:hover .sg-dashboard-editor-resize-handle-grip,
+.sg-dashboard-editor-resize-handle:focus-visible .sg-dashboard-editor-resize-handle-grip {
+  /* On hover the grip lines pick up the primary color so the handle
+   * reads as "actively armed for resize". */
+  background-image:
+    linear-gradient(135deg, transparent 0 60%, var(--sg-color-primary) 60% 70%, transparent 70% 80%, var(--sg-color-primary) 80% 90%, transparent 90%);
+}
+
+.sg-dashboard-editor-resize-handle:focus-visible {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: -1px;
+}