@skygraph/styles 0.2.4 → 0.6.6

package/components/event-timeline.css

@@ -1,134 +1,134 @@
-/* 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);
-  /* Drop the flex gap horizontally: it broke the marker rail into disjoint
-   * segments (one per card) which read as a dashed, glitchy line. Items carry
-   * their own horizontal padding for spacing instead, and the rail below is
-   * extended to bridge that padding so it renders as one continuous track. */
-  gap: 0;
-}
-
-.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.2);
-  box-shadow: var(--sg-event-timeline-dot-shadow-hover);
-}
-
-.sg-event-timeline-horizontal .sg-event-timeline-item {
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 160px;
-  padding: 0 var(--sg-padding-md);
-  position: relative;
-}
-
-/* Horizontal mode: lay the marker out as a full-width rail so the dots line up
- * on a single track instead of floating above each card. */
-.sg-event-timeline-horizontal .sg-event-timeline-marker {
-  width: 100%;
-  justify-content: flex-start;
-  margin-bottom: var(--sg-margin-sm);
-  position: relative;
-}
-
-.sg-event-timeline-horizontal .sg-event-timeline-marker::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  /* Extend across the item's own horizontal padding so adjacent items'
-   * rails meet edge-to-edge into one continuous line. */
-  left: calc(-1 * var(--sg-padding-md));
-  right: calc(-1 * var(--sg-padding-md));
-  height: 2px;
-  background: var(--sg-color-border-secondary);
-  transform: translateY(-50%);
-}
-
-.sg-event-timeline-horizontal .sg-event-timeline-dot {
-  position: relative;
-  z-index: var(--sg-z-base);
-}
-
-.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);
-}
+/* 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);
+  /* Drop the flex gap horizontally: it broke the marker rail into disjoint
+   * segments (one per card) which read as a dashed, glitchy line. Items carry
+   * their own horizontal padding for spacing instead, and the rail below is
+   * extended to bridge that padding so it renders as one continuous track. */
+  gap: 0;
+}
+
+.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.2);
+  box-shadow: var(--sg-event-timeline-dot-shadow-hover);
+}
+
+.sg-event-timeline-horizontal .sg-event-timeline-item {
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 160px;
+  padding: 0 var(--sg-padding-md);
+  position: relative;
+}
+
+/* Horizontal mode: lay the marker out as a full-width rail so the dots line up
+ * on a single track instead of floating above each card. */
+.sg-event-timeline-horizontal .sg-event-timeline-marker {
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: var(--sg-margin-sm);
+  position: relative;
+}
+
+.sg-event-timeline-horizontal .sg-event-timeline-marker::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  /* Extend across the item's own horizontal padding so adjacent items'
+   * rails meet edge-to-edge into one continuous line. */
+  left: calc(-1 * var(--sg-padding-md));
+  right: calc(-1 * var(--sg-padding-md));
+  height: 2px;
+  background: var(--sg-color-border-secondary);
+  transform: translateY(-50%);
+}
+
+.sg-event-timeline-horizontal .sg-event-timeline-dot {
+  position: relative;
+  z-index: var(--sg-z-base);
+}
+
+.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

@@ -1,35 +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);
-}
+.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

@@ -1,115 +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;
-}
+.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;
+}