@skygraph/styles 0.0.0-placeholder.0 → 0.2.0

package/components/empty.css

@@ -0,0 +1,25 @@
+.sg-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sg-padding-xl) 0;
+  text-align: center;
+  font-size: var(--sg-font-size);
+}
+
+.sg-empty-image {
+  margin-bottom: var(--sg-margin-sm);
+  color: var(--sg-color-text-disabled);
+}
+
+.sg-empty-description {
+  margin: 0 0 var(--sg-margin-sm);
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size);
+  line-height: var(--sg-line-height);
+}
+
+.sg-empty-footer {
+  margin-top: var(--sg-margin-md);
+}

package/components/event-timeline.css

@@ -0,0 +1,100 @@
+/* EventTimeline — chronological event stream with optional grouping. */
+
+.sg-event-timeline {
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  font-family: inherit;
+  gap: var(--sg-margin-md);
+}
+
+.sg-event-timeline-vertical {
+  align-items: stretch;
+}
+
+.sg-event-timeline-horizontal {
+  align-items: flex-start;
+  overflow-x: auto;
+  padding-bottom: var(--sg-padding-md);
+}
+
+.sg-event-timeline-group {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-tertiary);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: var(--sg-padding-xs) 0;
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-event-timeline-horizontal .sg-event-timeline-group {
+  border-bottom: none;
+  border-right: 1px solid var(--sg-color-border-secondary);
+  padding: 0 var(--sg-padding-md);
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+}
+
+.sg-event-timeline-item {
+  display: flex;
+  gap: var(--sg-margin-sm);
+  padding: var(--sg-padding-sm) 0;
+  /* Smooth color/transform transitions for hover; we only animate
+   * properties that touch the dot/title. */
+  transition: background-color var(--sg-transition-fast);
+}
+
+.sg-event-timeline-item:hover .sg-event-timeline-dot {
+  /* Slightly larger dot + brighter halo when the parent item is hovered.
+   * Both are driven by the new `--sg-event-timeline-dot-shadow-hover`
+   * token so the affordance remains theme-correct. */
+  transform: scale(1.20);
+  box-shadow: var(--sg-event-timeline-dot-shadow-hover);
+}
+
+.sg-event-timeline-horizontal .sg-event-timeline-item {
+  flex-direction: column;
+  min-width: 160px;
+  padding: 0 var(--sg-padding-md);
+}
+
+.sg-event-timeline-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+}
+
+.sg-event-timeline-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--sg-color-primary);
+  display: inline-block;
+  /* Halo via the semantic token: outer ring of `--sg-color-bg` punches
+   * the dot out from the rail, inner glow uses primary-tint for depth. */
+  box-shadow: var(--sg-event-timeline-dot-shadow);
+  transition:
+    box-shadow var(--sg-transition-medium),
+    transform var(--sg-transition-medium);
+}
+
+.sg-event-timeline-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-event-timeline-title {
+  font-weight: 600;
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+}
+
+.sg-event-timeline-description {
+  margin-top: var(--sg-margin-xs);
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size-sm);
+  line-height: var(--sg-line-height);
+}

package/components/field.css

@@ -0,0 +1,35 @@
+.sg-field {
+  font-size: inherit;
+}
+
+.sg-field-label {
+  display: block;
+  margin-bottom: var(--sg-margin-xs);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+  line-height: var(--sg-line-height);
+}
+
+.sg-field-required {
+  color: var(--sg-color-error);
+  margin-left: 2px;
+}
+
+.sg-field-control {
+  position: relative;
+}
+
+.sg-field-error {
+  color: var(--sg-color-error);
+  font-size: var(--sg-font-size-sm);
+  margin-top: var(--sg-margin-xs);
+  line-height: var(--sg-line-height);
+}
+
+.sg-field-has-error .sg-input {
+  --sg-input-border: var(--sg-color-error);
+}
+
+.sg-field-has-error .sg-input:focus {
+  box-shadow: 0 0 0 2px var(--sg-color-error-bg);
+}

package/components/form.css

@@ -0,0 +1,115 @@
+.sg-form {
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+}
+
+/* Layouts */
+.sg-form-vertical .sg-field {
+  margin-bottom: var(--sg-margin-md);
+}
+
+.sg-form-horizontal .sg-field {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: var(--sg-margin-md);
+}
+
+.sg-form-horizontal .sg-field-label {
+  flex-shrink: 0;
+  min-width: 80px;
+  padding-top: 5px;
+  padding-right: var(--sg-padding-md);
+  text-align: right;
+}
+
+.sg-form-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sg-margin-md);
+}
+
+.sg-form-inline .sg-field {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+}
+
+/* Sizes */
+.sg-form-small {
+  font-size: var(--sg-font-size-sm);
+}
+
+.sg-form-large {
+  font-size: var(--sg-font-size-lg);
+}
+
+/* Disabled */
+.sg-form-disabled {
+  opacity: 0.65;
+  pointer-events: none;
+}
+
+/* Field label */
+.sg-field-label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+  line-height: 1.5;
+}
+
+.sg-field-required {
+  color: var(--sg-color-error);
+  margin-left: 2px;
+}
+
+.sg-field-optional {
+  color: var(--sg-color-text-tertiary);
+  font-weight: 400;
+  font-size: 0.85em;
+  margin-left: 4px;
+}
+
+/* Field error */
+.sg-field-error {
+  color: var(--sg-color-error);
+  font-size: var(--sg-font-size-sm);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.sg-field-has-error .sg-input,
+.sg-field-has-error .sg-textarea,
+.sg-field-has-error .sg-select-trigger,
+.sg-field-has-error .sg-input-number-input {
+  border-color: var(--sg-color-error);
+}
+
+.sg-field-has-error .sg-input:focus,
+.sg-field-has-error .sg-textarea:focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-color-error) 10%, transparent);
+}
+
+/* Field help */
+.sg-field-help {
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size-sm, 12px);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+/* Field extra */
+.sg-field-extra {
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size-sm, 12px);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+/* Horizontal layout label/control wrappers — width and text-align come
+ * from the React component as inline overrides (computed from `labelCol`
+ * / `wrapperCol` props), so this rule only locks down the static parts. */
+.sg-field-label-wrap {
+  flex-shrink: 0;
+}

package/components/gantt.css

@@ -0,0 +1,166 @@
+/* Gantt — task bars over a discrete time axis. */
+
+.sg-gantt {
+  background: var(--sg-color-bg);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  font-family: inherit;
+}
+
+.sg-gantt-sidebar {
+  background: var(--sg-color-bg-container);
+  border-right: 1px solid var(--sg-color-border);
+  overflow: hidden;
+}
+
+.sg-gantt-sidebar-header {
+  border-bottom: 1px solid var(--sg-color-border);
+  background: var(--sg-color-bg-elevated);
+}
+
+.sg-gantt-sidebar-row {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--sg-padding-md);
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sg-gantt-main {
+  background: var(--sg-color-bg);
+  position: relative;
+}
+
+.sg-gantt-header {
+  background: var(--sg-color-bg-elevated);
+  border-bottom: 1px solid var(--sg-color-border);
+}
+
+.sg-gantt-tick {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 var(--sg-padding-xs);
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  border-right: 1px solid var(--sg-color-border-secondary);
+  box-sizing: border-box;
+  /* Clip the label when the tick is narrower than the rendered text
+   * (e.g. day scale with columnWidth=24) — without this, adjacent
+   * labels visually pile up on each other. */
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.sg-gantt-grid {
+  /* Background grid of vertical column dividers — repeated linear-gradient
+   * over `--sg-gantt-column-width` (set via inline style by the component). */
+}
+
+.sg-gantt-row {
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-gantt-row:nth-child(even) {
+  background: var(--sg-color-bg-secondary);
+}
+
+.sg-gantt-bar {
+  background: var(--sg-color-primary);
+  color: var(--sg-color-white);
+  border-radius: var(--sg-border-radius-sm);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--sg-padding-xs);
+  font-size: var(--sg-font-size-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  /* The shadow token includes both an outer drop and an inner highlight,
+   * giving each bar a tiny 3D feel without any borders. Keeps a dense
+   * gantt looking organised even when bars overlap rows. */
+  box-shadow: var(--sg-gantt-bar-shadow);
+  box-sizing: border-box;
+  transition:
+    box-shadow var(--sg-transition-medium),
+    transform var(--sg-transition-medium),
+    filter var(--sg-transition-fast);
+}
+
+.sg-gantt-bar:hover {
+  box-shadow: var(--sg-gantt-bar-shadow-hover);
+  /* `filter: brightness(1.05)` lifts saturated bars without needing a
+   * dedicated "primary-hover" colour for every status. Negligible cost
+   * on modern compositors. */
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+
+.sg-gantt-bar-draggable {
+  cursor: grab;
+}
+
+.sg-gantt-bar-draggable:active {
+  cursor: grabbing;
+  transform: translateY(0);
+  filter: brightness(1.08);
+}
+
+.sg-gantt-bar-resizable {
+  /* hover state expands the resize handle visibility */
+}
+
+.sg-gantt-bar-progress {
+  background: var(--sg-color-primary-active);
+  border-radius: inherit;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.sg-gantt-bar-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  /* Drop-shadow on the text increases legibility on saturated bar
+   * fills (esp. the bright primary blue). Cheap, single-line filter
+   * that doesn't disturb the bar background. */
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.sg-gantt-bar-resize {
+  background: transparent;
+  border-left: 1px solid var(--sg-color-border-secondary);
+  opacity: 0;
+  transition: opacity var(--sg-transition-fast);
+}
+
+.sg-gantt-bar:hover .sg-gantt-bar-resize {
+  opacity: 0.6;
+}
+
+.sg-gantt-bar-resize:hover,
+.sg-gantt-bar-resize:focus-visible {
+  opacity: 1;
+}
+
+.sg-gantt-deps {
+  color: var(--sg-gantt-dep-color);
+}
+
+.sg-gantt-dep {
+  /* stroke + marker colour come from `currentColor` set on .sg-gantt-deps.
+   * `stroke-linecap: round` + a slightly thicker stroke give dependency
+   * lines a hand-drawn feel that distinguishes them from grid lines. */
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.25;
+  transition: stroke var(--sg-transition-fast);
+}
+
+.sg-gantt-dep:hover {
+  stroke: var(--sg-color-primary);
+}

package/components/inline-edit.css

@@ -0,0 +1,113 @@
+/* InlineEdit */
+.sg-inline-edit-view {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  padding: var(--sg-padding-xs) var(--sg-padding-sm);
+  min-height: var(--sg-height-md);
+  border-radius: var(--sg-border-radius);
+  border: 1px dashed transparent;
+  cursor: pointer;
+  color: var(--sg-color-text);
+  font-size: var(--sg-font-size);
+  line-height: var(--sg-line-height);
+  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-inline-edit-view:hover {
+  background: var(--sg-color-bg-hover);
+  border-color: var(--sg-color-border);
+}
+
+.sg-inline-edit-view:focus-visible {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+  outline: none;
+}
+
+.sg-inline-edit-view-placeholder {
+  color: var(--sg-color-text-placeholder);
+}
+
+.sg-inline-edit-view-disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
+.sg-inline-edit-view-disabled:hover {
+  background: transparent;
+  border-color: transparent;
+}
+
+.sg-inline-edit-pencil {
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size-sm);
+  opacity: 0;
+  transition: opacity var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-inline-edit-view:hover .sg-inline-edit-pencil {
+  opacity: 1;
+}
+
+/* Editing state */
+.sg-inline-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+}
+
+.sg-inline-edit-input {
+  flex: 1;
+}
+
+.sg-inline-edit-actions {
+  display: flex;
+  gap: 2px;
+}
+
+.sg-inline-edit-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius-sm);
+  cursor: pointer;
+  font-size: var(--sg-font-size-sm);
+  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-inline-edit-btn-save {
+  background: var(--sg-color-primary);
+  border-color: var(--sg-color-primary);
+  color: var(--sg-color-white);
+}
+
+.sg-inline-edit-btn-save:hover {
+  background: var(--sg-color-primary-hover);
+}
+
+.sg-inline-edit-btn-cancel {
+  background: var(--sg-color-bg-container);
+  color: var(--sg-color-text-secondary);
+}
+
+.sg-inline-edit-btn-cancel:hover {
+  border-color: var(--sg-color-text-secondary);
+}
+
+/* Sizes */
+.sg-inline-edit-view-small {
+  min-height: var(--sg-height-sm);
+  font-size: var(--sg-font-size-sm);
+  padding: 2px var(--sg-padding-xs);
+}
+
+.sg-inline-edit-view-large {
+  min-height: var(--sg-height-lg);
+  font-size: var(--sg-font-size-lg);
+  padding: var(--sg-padding-sm) var(--sg-padding-md);
+}

package/components/input-group.css

@@ -0,0 +1,79 @@
+/* InputGroup */
+.sg-input-group {
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.sg-input-group-addon {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--sg-padding-md);
+  background: var(--sg-color-bg-secondary);
+  border: 1px solid var(--sg-color-border);
+  color: var(--sg-color-text-secondary);
+  font-size: var(--sg-font-size);
+  white-space: nowrap;
+}
+
+.sg-input-group-addon:first-child {
+  border-right: none;
+  border-radius: var(--sg-border-radius) 0 0 var(--sg-border-radius);
+}
+
+.sg-input-group-addon:last-child {
+  border-left: none;
+  border-radius: 0 var(--sg-border-radius) var(--sg-border-radius) 0;
+}
+
+/* Compact: nested inputs lose middle radii */
+.sg-input-group-compact > .sg-input-wrapper:not(:first-child):not(:last-child) .sg-input,
+.sg-input-group-compact > .sg-select:not(:first-child):not(:last-child) .sg-select-selector,
+.sg-input-group-compact > .sg-input:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.sg-input-group-compact > .sg-input-wrapper:first-child .sg-input,
+.sg-input-group-compact > .sg-select:first-child .sg-select-selector,
+.sg-input-group-compact > .sg-input:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.sg-input-group-compact > .sg-input-wrapper:last-child .sg-input,
+.sg-input-group-compact > .sg-select:last-child .sg-select-selector,
+.sg-input-group-compact > .sg-input:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.sg-input-group-compact > .sg-input-group-addon + .sg-input-wrapper .sg-input,
+.sg-input-group-compact > .sg-input-group-addon + .sg-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* When addon is before, the input after should not have left radius */
+.sg-input-group > .sg-input-group-addon + * .sg-input,
+.sg-input-group > .sg-input-group-addon + .sg-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* When there's an addon after, the element before should not have right radius */
+.sg-input-group > *:has(+ .sg-input-group-addon) .sg-input,
+.sg-input-group > .sg-input:has(+ .sg-input-group-addon) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Sizes */
+.sg-input-group-small .sg-input-group-addon {
+  padding: 0 var(--sg-padding-sm);
+  font-size: var(--sg-font-size-sm);
+}
+
+.sg-input-group-large .sg-input-group-addon {
+  padding: 0 var(--sg-padding-lg);
+  font-size: var(--sg-font-size-lg);
+}

package/components/input-number.css

@@ -0,0 +1,76 @@
+.sg-input-number {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  overflow: hidden;
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}
+
+.sg-input-number-loading {
+  opacity: 0.65;
+}
+
+.sg-input-number .sg-spin {
+  margin-right: var(--sg-padding-xs);
+}
+
+.sg-input-number-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sg-height-md);
+  height: var(--sg-height-md);
+  border: none;
+  background: var(--sg-color-bg-secondary);
+  color: var(--sg-color-text);
+  cursor: pointer;
+  font-size: var(--sg-font-size);
+  user-select: none;
+  transition: background var(--sg-transition-duration);
+}
+
+.sg-input-number-btn:hover:not(:disabled) {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-input-number-btn:disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-input-number-input {
+  /* `flex: 1 1 60px` keeps the natural 60px default width when the wrapper
+     is sized intrinsically (inline-flex) and lets the field fill the space
+     when consumers stretch the wrapper via `style={{ width: '100%' }}` etc.
+     `min-width: 0` lets the input shrink inside narrow containers. */
+  flex: 1 1 60px;
+  min-width: 0;
+  height: var(--sg-height-md);
+  border: none;
+  text-align: center;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  background: var(--sg-color-bg-container);
+  outline: none;
+  font-family: inherit;
+}
+
+.sg-input-number-small .sg-input-number-btn {
+  width: var(--sg-height-sm);
+  height: var(--sg-height-sm);
+}
+.sg-input-number-small .sg-input-number-input {
+  height: var(--sg-height-sm);
+  flex-basis: 48px;
+  font-size: var(--sg-font-size-sm);
+}
+.sg-input-number-large .sg-input-number-btn {
+  width: var(--sg-height-lg);
+  height: var(--sg-height-lg);
+}
+.sg-input-number-large .sg-input-number-input {
+  height: var(--sg-height-lg);
+  flex-basis: 72px;
+  font-size: var(--sg-font-size-lg);
+}