soltana-ui 0.1.0

package/src/styles/components/_indicators.scss

@@ -0,0 +1,403 @@
+// ---------------------------------------------------------------------------
+// Indicator Components
+// ---------------------------------------------------------------------------
+// Steppers, timelines, keyboard keys, stats, description lists, empty
+// states, and ratings.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// STEPPER
+// ============================================================================
+
+.stepper {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.stepper-vertical {
+  flex-direction: column;
+
+  .step {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .step-connector {
+    width: 2px;
+    height: 2rem;
+    min-height: 2rem;
+    margin: 0.25rem auto;
+  }
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--border-strong);
+  background-color: var(--relief-surface-raised);
+  font-size: var(--text-xs);
+  font-weight: var(--font-bold);
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  @include transition-interactive(var(--transition-normal));
+}
+
+.step-content {
+  text-align: center;
+  margin-top: 0.5rem;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.step-connector {
+  flex: 1;
+  height: 2px;
+  background-color: var(--border-default);
+  align-self: center;
+  margin: 0 0.25rem;
+  margin-top: 1rem;
+}
+
+// Stepper states
+.step.active .step-indicator {
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+  background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+}
+
+.step.completed .step-indicator {
+  border-color: var(--color-success);
+  background-color: var(--color-success);
+  color: var(--text-inverse);
+}
+
+.step.completed .step-connector {
+  background-color: var(--color-success);
+}
+
+// ============================================================================
+// TIMELINE
+// ============================================================================
+
+.timeline {
+  position: relative;
+  padding-left: 2rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0.5rem;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--border-default);
+  }
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: 1.5rem;
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.timeline-marker {
+  position: absolute;
+  left: -1.625rem;
+  top: 0.25rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--accent-primary);
+  background-color: var(--surface-bg);
+}
+
+.timeline-content {
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+// ============================================================================
+// KBD (Keyboard Key)
+// ============================================================================
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding: 0.125rem 0.375rem;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.4;
+  color: var(--text-primary);
+  background-color: var(--kbd-bg);
+  border: 1px solid var(--kbd-border);
+  border-radius: var(--radius-md);
+  box-shadow:
+    inset 0 -1px 0 var(--kbd-border),
+    0 1px 2px rgb(var(--shadow-color) / 8%);
+}
+
+.kbd-sm {
+  font-size: var(--text-2xs);
+  padding: 0 0.25rem;
+  min-width: 1.125rem;
+}
+
+.kbd-lg {
+  font-size: var(--text-sm);
+  padding: 0.25rem 0.5rem;
+  min-width: 2rem;
+}
+
+// ============================================================================
+// STAT (Metric Display)
+// ============================================================================
+
+.stat-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.stat-value {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-bold);
+  letter-spacing: var(--tracking-refined);
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  letter-spacing: var(--tracking-elegant);
+}
+
+.stat-delta {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+
+  &.positive {
+    color: var(--color-success-text);
+  }
+
+  &.negative {
+    color: var(--color-error-text);
+  }
+}
+
+// ============================================================================
+// DESCRIPTION LIST
+// ============================================================================
+
+.dl {
+  margin: 0;
+}
+
+.dl dt {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--text-secondary);
+  letter-spacing: var(--tracking-elegant);
+}
+
+.dl dd {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  padding-bottom: 0.75rem;
+}
+
+.dl-horizontal {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.25rem 1.5rem;
+
+  dd {
+    padding-bottom: 0.5rem;
+  }
+}
+
+.dl-stacked {
+  dt {
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--border-default);
+  }
+
+  dt:first-child {
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  dd {
+    padding-bottom: 0.75rem;
+  }
+}
+
+// ============================================================================
+// SHARED STATE LAYOUT PLACEHOLDERS
+// ============================================================================
+
+%centered-state-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 3rem 1.5rem;
+}
+
+%state-heading {
+  font-weight: var(--font-semibold);
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+%state-description {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  max-width: 24rem;
+  margin-bottom: 1.5rem;
+}
+
+%state-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+// ============================================================================
+// EMPTY STATE
+// ============================================================================
+
+.empty-state {
+  @extend %centered-state-layout;
+}
+
+.empty-state-icon {
+  font-size: var(--text-4xl);
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-state-heading {
+  @extend %state-heading;
+  font-size: var(--text-lg);
+}
+
+.empty-state-description {
+  @extend %state-description;
+}
+
+.empty-state-action {
+  @extend %state-actions;
+}
+
+// ============================================================================
+// RESULT / OUTCOME
+// ============================================================================
+
+.result {
+  @extend %centered-state-layout;
+}
+
+.result-icon {
+  font-size: var(--text-4xl);
+  margin-bottom: 1rem;
+
+  svg {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+.result-title {
+  @extend %state-heading;
+  font-size: var(--text-xl);
+}
+
+.result-subtitle {
+  @extend %state-description;
+}
+
+.result-actions {
+  @extend %state-actions;
+}
+
+@each $type in (success, warning, error, info) {
+  .result-#{$type} .result-icon {
+    color: var(--color-#{$type}-text);
+  }
+}
+
+// ============================================================================
+// RATING
+// ============================================================================
+
+.rating {
+  display: inline-flex;
+  gap: 0.125rem;
+}
+
+.rating-star {
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--border-strong);
+  clip-path: polygon(
+    50% 0%,
+    61% 35%,
+    98% 35%,
+    68% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    32% 57%,
+    2% 35%,
+    39% 35%
+  );
+  transition: background-color var(--transition-normal) var(--easing-in-out);
+
+  &.filled {
+    background-color: var(--color-warning);
+  }
+
+  &.half {
+    background: linear-gradient(90deg, var(--color-warning) 50%, var(--border-strong) 50%);
+  }
+}
+
+.rating-sm .rating-star {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.rating-lg .rating-star {
+  width: 1.75rem;
+  height: 1.75rem;
+}