@skygraph/styles 0.0.0-placeholder.0 → 0.2.0

package/components/pin-input.css

@@ -0,0 +1,71 @@
+/* PinInput */
+.sg-pin-input {
+  display: inline-flex;
+  gap: var(--sg-padding-sm);
+}
+
+.sg-pin-input-cell {
+  width: var(--sg-height-md);
+  height: var(--sg-height-md);
+  text-align: center;
+  font-size: var(--sg-font-size-lg);
+  font-family: inherit;
+  font-weight: 600;
+  color: var(--sg-color-text);
+  background: var(--sg-color-bg-container);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  outline: none;
+  caret-color: var(--sg-color-primary);
+  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing),
+    box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-pin-input-cell::placeholder {
+  color: var(--sg-color-text-quaternary);
+  font-weight: 400;
+}
+
+.sg-pin-input-cell:hover {
+  border-color: var(--sg-color-primary-hover);
+}
+
+.sg-pin-input-cell:focus {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-pin-input-cell-filled {
+  border-color: var(--sg-color-primary);
+}
+
+.sg-pin-input-cell:disabled {
+  background: var(--sg-color-bg-disabled);
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Sizes */
+.sg-pin-input-cell-small {
+  width: var(--sg-height-sm);
+  height: var(--sg-height-sm);
+  font-size: var(--sg-font-size);
+}
+
+.sg-pin-input-cell-large {
+  width: var(--sg-height-lg);
+  height: var(--sg-height-lg);
+  font-size: var(--sg-font-size-xl);
+}
+
+.sg-pin-input-small {
+  gap: var(--sg-padding-xs);
+}
+
+.sg-pin-input-large {
+  gap: var(--sg-padding-md);
+}
+
+.sg-pin-input-disabled {
+  opacity: 0.65;
+}

package/components/popconfirm.css

@@ -0,0 +1,95 @@
+.sg-popconfirm-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.sg-popconfirm {
+  position: absolute;
+  z-index: 1030;
+  min-width: 200px;
+}
+
+.sg-popconfirm-top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.sg-popconfirm-bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.sg-popconfirm-left {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sg-popconfirm-right {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sg-popconfirm-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--sg-color-bg-elevated);
+  border: 1px solid var(--sg-color-border-secondary);
+  transform: rotate(45deg);
+}
+
+.sg-popconfirm-top .sg-popconfirm-arrow {
+  bottom: -5px;
+  left: 50%;
+  margin-left: -4px;
+  border-top: none;
+  border-left: none;
+}
+
+.sg-popconfirm-bottom .sg-popconfirm-arrow {
+  top: -5px;
+  left: 50%;
+  margin-left: -4px;
+  border-bottom: none;
+  border-right: none;
+}
+
+.sg-popconfirm-inner {
+  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);
+  padding: var(--sg-padding-md);
+}
+
+.sg-popconfirm-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  font-size: var(--sg-font-size);
+  font-weight: 500;
+  color: var(--sg-color-text);
+}
+
+.sg-popconfirm-icon {
+  color: var(--sg-color-warning);
+  font-size: var(--sg-font-size-lg);
+}
+
+.sg-popconfirm-description {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  margin-top: var(--sg-margin-xs);
+  margin-left: 24px;
+}
+
+.sg-popconfirm-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sg-padding-sm);
+  margin-top: var(--sg-padding-sm);
+}

package/components/progress.css

@@ -0,0 +1,116 @@
+/* Line progress */
+.sg-progress-line {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  width: 100%;
+}
+
+.sg-progress-outer {
+  flex: 1;
+  min-width: 0;
+}
+
+.sg-progress-inner {
+  background: var(--sg-color-bg-hover);
+  border-radius: 100px;
+  overflow: hidden;
+}
+
+.sg-progress-bg {
+  height: 100%;
+  border-radius: 100px;
+  background: var(--sg-color-primary);
+  /*
+   * We deliberately avoid `transition: width` here. The previous transition
+   * would interpolate from the layout-default `width: 0` to the inline
+   * `width: X%`, which made the bar look empty until the animation finished —
+   * users perceived it as "no progress bar, just numbers" on initial paint.
+   * Width now snaps to its target value; live updates (e.g. demo dynamic %)
+   * still re-paint in the same frame.
+   */
+}
+
+.sg-progress-text {
+  flex-shrink: 0;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-secondary);
+  min-width: 36px;
+  text-align: right;
+}
+
+/* Status colors */
+.sg-progress-success .sg-progress-bg {
+  background: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-bg {
+  background: var(--sg-color-error);
+}
+
+.sg-progress-success .sg-progress-text {
+  color: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-text {
+  color: var(--sg-color-error);
+}
+
+/* Active animation */
+.sg-progress-active .sg-progress-bg {
+  position: relative;
+}
+
+.sg-progress-active .sg-progress-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: sg-progress-active-anim 2s ease-in-out infinite;
+}
+
+@keyframes sg-progress-active-anim {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Circle progress */
+.sg-progress-circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sg-progress-circle-trail {
+  stroke: var(--sg-color-bg-hover);
+}
+
+.sg-progress-circle-path {
+  stroke: var(--sg-color-primary);
+  transition: stroke-dashoffset var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-progress-success .sg-progress-circle-path {
+  stroke: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-circle-path {
+  stroke: var(--sg-color-error);
+}
+
+.sg-progress-circle-text {
+  position: absolute;
+  font-size: var(--sg-font-size-xl);
+  font-weight: 500;
+  color: var(--sg-color-text);
+}
+
+.sg-progress-success .sg-progress-circle-text {
+  color: var(--sg-color-success);
+}
+.sg-progress-error .sg-progress-circle-text {
+  color: var(--sg-color-error);
+}

package/components/radio.css

@@ -0,0 +1,95 @@
+/* Radio — custom painted dot on top of a visually-hidden native input.
+ *
+ * Like Checkbox, the native `<input type="radio">` stays in the DOM for
+ * keyboard / form / a11y but is visually hidden. `.sg-radio-box` paints
+ * the circle so demos can rebrand through `--sg-radio-*` tokens without
+ * fighting `accent-color` limitations across browsers. */
+
+.sg-radio-group {
+  display: flex;
+  gap: var(--sg-padding-md);
+}
+
+.sg-radio-group-vertical {
+  flex-direction: column;
+}
+
+.sg-radio {
+  --sg-radio-size: 16px;
+  --sg-radio-border: var(--sg-color-border);
+  --sg-radio-border-hover: var(--sg-color-primary);
+  --sg-radio-bg: var(--sg-color-bg);
+  --sg-radio-bg-checked: var(--sg-color-primary);
+  --sg-radio-dot-color: var(--sg-color-white);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  cursor: pointer;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
+}
+
+.sg-radio-disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-radio-input {
+  position: absolute;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sg-radio-box {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
+  border: 1px solid var(--sg-radio-border);
+  border-radius: 50%;
+  background: var(--sg-radio-bg);
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-radio:hover .sg-radio-box {
+  border-color: var(--sg-radio-border-hover);
+}
+
+.sg-radio-input:focus-visible ~ .sg-radio-box {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}
+
+.sg-radio-input:checked ~ .sg-radio-box {
+  background: var(--sg-radio-bg-checked);
+  border-color: var(--sg-radio-bg-checked);
+}
+
+.sg-radio-input:checked ~ .sg-radio-box::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sg-radio-dot-color);
+  transform: translate(-50%, -50%);
+}
+
+.sg-radio-label {
+  user-select: none;
+}
+
+.sg-radio-group-loading {
+  --sg-spin-color: var(--sg-color-text-tertiary);
+}

package/components/rate.css

@@ -0,0 +1,34 @@
+.sg-rate {
+  /* Component-local variable: empty (inactive) symbol opacity. Colour
+   * emoji ignore CSS `color`, so opacity is the only signal that
+   * separates active vs inactive characters. Override globally for
+   * monochrome glyphs by setting it to `1`. */
+  --sg-rate-symbol-empty-opacity: 0.42;
+
+  display: inline-flex;
+  gap: var(--sg-padding-xs);
+  font-size: var(--sg-font-size-xl);
+}
+
+.sg-rate-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.sg-rate-star {
+  cursor: pointer;
+  color: var(--sg-color-border);
+  opacity: var(--sg-rate-symbol-empty-opacity);
+  transition:
+    color var(--sg-transition-duration),
+    opacity var(--sg-transition-duration),
+    transform var(--sg-transition-duration);
+  user-select: none;
+}
+
+.sg-rate-star:hover { transform: scale(1.15); }
+.sg-rate-star-full {
+  color: var(--sg-color-star);
+  opacity: 1;
+}
+.sg-rate-star-half { color: var(--sg-color-star); opacity: 0.5; }

package/components/resource-calendar.css

@@ -0,0 +1,224 @@
+/* Resource Calendar — shifts / bookings per resource lane.
+ *
+ * All colours route through `--sg-*` global tokens. Component-local
+ * variables are scoped under `.sg-rcal` so external themes can
+ * override them per-instance without bleeding to other components.
+ */
+
+.sg-rcal {
+  /* Component-local tokens — derived from global ones, redirect freely. */
+  --sg-rcal-availability-off-bg: var(--sg-color-bg-disabled);
+  --sg-rcal-conflict-color: var(--sg-color-error);
+  --sg-rcal-conflict-bg: var(--sg-color-error-bg);
+  --sg-rcal-tentative-bg: var(--sg-color-primary-bg);
+  --sg-rcal-tentative-border: var(--sg-color-primary);
+  --sg-rcal-confirmed-bg: var(--sg-color-primary);
+  --sg-rcal-confirmed-text: var(--sg-color-white);
+  --sg-rcal-marker-size: 10px;
+
+  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-rcal-sidebar {
+  background: var(--sg-color-bg-container);
+  border-right: 1px solid var(--sg-color-border);
+  overflow: hidden;
+}
+
+.sg-rcal-sidebar-header {
+  border-bottom: 1px solid var(--sg-color-border);
+  background: var(--sg-color-bg-elevated);
+}
+
+.sg-rcal-sidebar-row {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-sm);
+  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-rcal-sidebar-marker {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--sg-rcal-marker-size);
+  height: var(--sg-rcal-marker-size);
+  border-radius: 50%;
+  background: var(--sg-color-primary);
+}
+
+.sg-rcal-sidebar-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sg-rcal-sidebar-capacity {
+  color: var(--sg-color-text-tertiary);
+  font-size: var(--sg-font-size-sm);
+}
+
+.sg-rcal-main {
+  background: var(--sg-color-bg);
+  position: relative;
+  /* Clip absolutely positioned blocks (assignments / ticks) so they
+   * can't bleed onto the sidebar when their dates fall outside the
+   * visible `range`. Interactive drag also clamps to range, so this
+   * is a safety net for props-supplied out-of-range assignments. */
+  overflow: hidden;
+}
+
+.sg-rcal-header {
+  background: var(--sg-color-bg-elevated);
+  border-bottom: 1px solid var(--sg-color-border);
+}
+
+.sg-rcal-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;
+}
+
+.sg-rcal-row {
+  /* Lane separators are rendered via the new `--sg-rcal-lane-divider`
+   * token, which is currently aliased to `--sg-color-border-secondary`
+   * but lets a theme dial it down independently when bookings get
+   * dense. */
+  border-bottom: 1px solid var(--sg-rcal-lane-divider);
+}
+
+.sg-rcal-row:nth-child(even) {
+  background: var(--sg-color-bg-secondary);
+}
+
+.sg-rcal-slot {
+  /* Vertical divider — kept softer than the row separator so the
+   * grid feels horizontal-first (booking rows read left-to-right). */
+  border-right: 1px solid var(--sg-rcal-lane-divider);
+  box-sizing: border-box;
+}
+
+.sg-rcal-availability-off {
+  background-color: var(--sg-rcal-availability-off-bg);
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 6px,
+    var(--sg-color-border-secondary) 6px,
+    var(--sg-color-border-secondary) 7px
+  );
+  opacity: 0.55;
+}
+
+.sg-rcal-assignment {
+  background: var(--sg-rcal-tentative-bg);
+  border: 1px solid var(--sg-rcal-tentative-border);
+  color: var(--sg-color-text);
+  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;
+  /* Reuse the gantt-bar shadow so resource bookings and gantt task bars
+   * feel like the same primitive rendered in two contexts. */
+  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-rcal-assignment:hover {
+  box-shadow: var(--sg-gantt-bar-shadow-hover);
+  transform: translateY(-1px);
+  filter: brightness(1.04);
+}
+
+.sg-rcal-assignment-tentative {
+  background: var(--sg-rcal-tentative-bg);
+  border-color: var(--sg-rcal-tentative-border);
+  border-style: dashed;
+}
+
+.sg-rcal-assignment-confirmed {
+  background: var(--sg-rcal-confirmed-bg);
+  border-color: var(--sg-rcal-confirmed-bg);
+  color: var(--sg-rcal-confirmed-text);
+}
+
+.sg-rcal-assignment-conflict {
+  /* The conflict overlay now layers a flat tint underneath the diagonal
+   * stripes (via `--sg-rcal-conflict-overlay-bg`) so the warning reads
+   * even on small bookings where the stripe pattern barely shows. */
+  background-color: var(--sg-rcal-conflict-overlay-bg);
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent,
+    transparent 5px,
+    var(--sg-rcal-conflict-color) 5px,
+    var(--sg-rcal-conflict-color) 6px
+  );
+  border: 2px solid var(--sg-rcal-conflict-color);
+  color: var(--sg-color-text);
+  /* Conflict bookings should never feel "promoted" by hover lift,
+   * so we suppress the parent transform. The brightness boost still
+   * communicates interactivity. */
+  box-shadow: 0 0 0 1px var(--sg-rcal-conflict-color);
+}
+
+.sg-rcal-assignment-conflict:hover {
+  transform: none;
+  box-shadow:
+    0 0 0 1px var(--sg-rcal-conflict-color),
+    0 2px 6px rgba(245, 34, 45, 0.2);
+}
+
+.sg-rcal-assignment-draggable {
+  cursor: grab;
+}
+
+.sg-rcal-assignment-draggable:active {
+  cursor: grabbing;
+}
+
+.sg-rcal-assignment-title {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.sg-rcal-assignment-resize-start,
+.sg-rcal-assignment-resize-end {
+  background: transparent;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.sg-rcal-assignment:hover .sg-rcal-assignment-resize-start,
+.sg-rcal-assignment:hover .sg-rcal-assignment-resize-end {
+  opacity: 0.6;
+}
+
+.sg-rcal-assignment-resize-start:hover,
+.sg-rcal-assignment-resize-end:hover,
+.sg-rcal-assignment-resize-start:focus-visible,
+.sg-rcal-assignment-resize-end:focus-visible {
+  opacity: 1;
+}

package/components/result.css

@@ -0,0 +1,45 @@
+.sg-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--sg-padding-xl) var(--sg-padding-lg);
+  text-align: center;
+}
+
+.sg-result-icon {
+  margin-bottom: var(--sg-margin-lg);
+  line-height: 1;
+}
+
+.sg-result-icon svg {
+  display: block;
+}
+
+.sg-result-title {
+  font-size: var(--sg-font-size-xl);
+  font-weight: 600;
+  color: var(--sg-color-text);
+  line-height: 1.4;
+  margin-bottom: var(--sg-margin-sm);
+}
+
+.sg-result-subtitle {
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text-secondary);
+  line-height: var(--sg-line-height);
+  margin-bottom: var(--sg-margin-lg);
+}
+
+.sg-result-extra {
+  display: flex;
+  gap: var(--sg-padding-sm);
+  justify-content: center;
+  margin-bottom: var(--sg-margin-lg);
+}
+
+.sg-result-content {
+  width: 100%;
+  padding: var(--sg-padding-lg);
+  background: var(--sg-color-bg-secondary);
+  border-radius: var(--sg-border-radius);
+}