soltana-ui 0.1.0

package/src/styles/components/_feedback.scss

@@ -0,0 +1,354 @@
+// ---------------------------------------------------------------------------
+// Feedback Components
+// ---------------------------------------------------------------------------
+// Alerts, tooltips, progress bars, and skeleton loaders.
+// Uses --relief-* variables for automatic relief switching.
+// ---------------------------------------------------------------------------
+
+@use 'sass:list';
+@use '../base/transitions' as *;
+
+// ============================================================================
+// ALERTS
+// ============================================================================
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-radius: var(--radius-xl);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  border-left: 3px solid transparent;
+  @include transition-feedback;
+}
+
+@each $type in (success, warning, error, info) {
+  .alert-#{$type} {
+    background-color: var(--color-#{$type}-subtle);
+    color: var(--color-#{$type}-text);
+    border-left-color: var(--color-#{$type});
+  }
+}
+
+.alert-dismissible {
+  position: relative;
+  padding-right: 3rem;
+
+  .close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+}
+
+// ============================================================================
+// TOOLTIP
+// ============================================================================
+
+// Shared visual properties for both CSS-only and JS-enhanced tooltips.
+%tooltip-visual {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  white-space: nowrap;
+  color: var(--tooltip-text);
+  background-color: var(--tooltip-bg);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-subtle);
+  box-shadow: var(--relief-shadow-sm);
+}
+
+.tooltip {
+  position: relative;
+
+  &::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    @extend %tooltip-visual;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-normal) var(--easing-in-out);
+    z-index: var(--z-tooltip);
+  }
+
+  &:hover::after {
+    opacity: 1;
+  }
+}
+
+// ---- Tooltip position variants ----
+// Default (.tooltip) positions above. These variants override placement.
+
+.tooltip-bottom::after {
+  bottom: auto;
+  top: calc(100% + 8px);
+}
+
+.tooltip-left::after {
+  bottom: auto;
+  top: 50%;
+  left: auto;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.tooltip-right::after {
+  bottom: auto;
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+// JS-enhanced tooltips created by initTooltips(). Distinguished from CSS-only
+// `::after` tooltips above via the [role="tooltip"] attribute selector.
+.tooltip[role='tooltip'] {
+  position: fixed;
+  top: var(--tooltip-top, 0);
+  left: var(--tooltip-left, 0);
+  z-index: var(--z-tooltip);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-normal) var(--easing-in-out);
+  @extend %tooltip-visual;
+
+  &.active {
+    opacity: 1;
+  }
+}
+
+// ============================================================================
+// PROGRESS BAR
+// ============================================================================
+
+.progress {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--surface-3);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  box-shadow: var(--relief-shadow-inset);
+  @include transition-feedback;
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--accent-primary-active),
+    var(--accent-primary),
+    var(--accent-primary-hover)
+  );
+  border-radius: var(--radius-full);
+  transition: width var(--transition-slower) var(--easing-in-out);
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    background: linear-gradient(180deg, rgb(var(--highlight-color) / 15%), transparent);
+  }
+}
+
+$progress-variants: (
+  success: (
+    color-mix(in srgb, var(--color-success), black 35%),
+    var(--color-success),
+  ),
+  warning: (
+    color-mix(in srgb, var(--color-warning), black 35%),
+    var(--color-warning),
+  ),
+  error: (
+    color-mix(in srgb, var(--color-error), black 35%),
+    var(--color-error),
+  ),
+);
+
+@each $name, $colors in $progress-variants {
+  .progress-#{$name} .progress-bar {
+    background: linear-gradient(90deg, list.nth($colors, 1), list.nth($colors, 2));
+  }
+}
+
+// ============================================================================
+// SKELETON
+// ============================================================================
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@mixin skeleton-base {
+  background-color: var(--surface-3);
+  border-radius: var(--radius-md);
+  animation: skeleton-pulse 2s var(--easing-in-out-soft) infinite;
+}
+
+.skeleton {
+  @include skeleton-base;
+}
+
+.skeleton-text {
+  @include skeleton-base;
+  height: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.skeleton-circle {
+  @include skeleton-base;
+  border-radius: var(--radius-full);
+}
+
+// ============================================================================
+// SPINNER
+// ============================================================================
+
+@keyframes spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--border-default);
+  border-top-color: var(--accent-primary);
+  border-radius: var(--radius-full);
+  animation: spinner-rotate 0.6s linear infinite;
+}
+
+.spinner-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 1.5px;
+}
+
+.spinner-lg {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-width: 3px;
+}
+
+// Dots variant
+@keyframes spinner-dots-pulse {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.spinner-dots {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+
+  &::before,
+  &::after,
+  span {
+    content: '';
+    display: block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--radius-full);
+    background-color: var(--accent-primary);
+    animation: spinner-dots-pulse 1.4s var(--easing-in-out) infinite both;
+  }
+
+  &::before {
+    animation-delay: -0.32s;
+  }
+
+  span {
+    animation-delay: -0.16s;
+  }
+}
+
+// ============================================================================
+// RADIAL PROGRESS
+// ============================================================================
+
+.radial-progress {
+  --progress: 0;
+  --size: 4rem;
+  --track-width: 4px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--radius-full);
+  background: conic-gradient(
+    var(--accent-primary) calc(var(--progress) * 1%),
+    var(--surface-3) calc(var(--progress) * 1%)
+  );
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: var(--track-width);
+    border-radius: var(--radius-full);
+    background-color: var(--surface-bg);
+  }
+
+  // Content (percentage text) sits above the mask
+  > * {
+    position: relative;
+    font-size: var(--text-xs);
+    font-weight: var(--font-semibold);
+    color: var(--text-primary);
+  }
+}
+
+.radial-progress-sm {
+  --size: 2.5rem;
+  --track-width: 3px;
+
+  > * {
+    font-size: var(--text-2xs);
+  }
+}
+
+.radial-progress-lg {
+  --size: 6rem;
+  --track-width: 6px;
+
+  > * {
+    font-size: var(--text-sm);
+  }
+}
+
+@each $type in (success, warning, error, info) {
+  .radial-progress-#{$type} {
+    background: conic-gradient(
+      var(--color-#{$type}) calc(var(--progress) * 1%),
+      var(--surface-3) calc(var(--progress) * 1%)
+    );
+  }
+}

package/src/styles/components/_figures.scss

@@ -0,0 +1,52 @@
+// ---------------------------------------------------------------------------
+// Figure Components
+// ---------------------------------------------------------------------------
+// Responsive image containers with captions and card-style variant.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// FIGURE
+// ============================================================================
+
+.figure {
+  display: inline-block;
+  margin: 0;
+}
+
+.figure-img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+.figure-caption {
+  margin-top: 0.5rem;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.figure-caption-center {
+  text-align: center;
+}
+
+// Card-style figure with relief/finish integration
+.figure-card {
+  padding: 0.75rem;
+  border-radius: var(--radius-lg);
+  @include relief-container;
+  @include finish-surface;
+  @include transition-interactive(var(--transition-normal));
+
+  .figure-img {
+    border-radius: var(--radius-md);
+  }
+
+  .figure-caption {
+    padding: 0.25rem 0.25rem 0;
+  }
+}

package/src/styles/components/_heros.scss

@@ -0,0 +1,83 @@
+// ---------------------------------------------------------------------------
+// Hero Components
+// ---------------------------------------------------------------------------
+// Full-width or contained hero sections with title, subtitle, and actions.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// HERO
+// ============================================================================
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 4rem 2rem;
+  border-radius: var(--radius-xl);
+  @include relief-container;
+  @include finish-surface;
+  @include transition-interactive(var(--transition-normal));
+}
+
+.hero-title {
+  font-family: var(--font-serif);
+  font-size: var(--text-4xl);
+  font-weight: var(--font-bold);
+  letter-spacing: var(--tracking-refined);
+  color: var(--text-primary);
+  line-height: 1.2;
+  margin: 0 0 1rem;
+}
+
+.hero-subtitle {
+  font-size: var(--text-lg);
+  color: var(--text-secondary);
+  max-width: 36rem;
+  line-height: 1.6;
+  margin: 0 0 2rem;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+// Size variants
+.hero-sm {
+  padding: 2.5rem 1.5rem;
+
+  .hero-title {
+    font-size: var(--text-2xl);
+  }
+
+  .hero-subtitle {
+    font-size: var(--text-base);
+    margin-bottom: 1.5rem;
+  }
+}
+
+.hero-lg {
+  padding: 6rem 3rem;
+
+  .hero-title {
+    font-size: var(--text-5xl);
+  }
+
+  .hero-subtitle {
+    font-size: var(--text-xl);
+    max-width: 42rem;
+  }
+}
+
+// Full-bleed variant (no border-radius, no border)
+.hero-full {
+  border-radius: 0;
+  border: none;
+}

package/src/styles/components/_hover-cards.scss

@@ -0,0 +1,55 @@
+// ---------------------------------------------------------------------------
+// Hover Card Component
+// ---------------------------------------------------------------------------
+// Rich tooltip-like card triggered by hover. Uses positioned floating
+// surface with tier-aware relief and finish.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+
+.hover-card {
+  position: relative;
+  display: inline-block;
+}
+
+.hover-card-trigger {
+  cursor: pointer;
+}
+
+.hover-card-content {
+  position: absolute;
+  top: var(--hover-card-top, 0);
+  left: var(--hover-card-left, 0);
+  z-index: var(--z-popover);
+  width: 20rem;
+  padding: 1rem;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border-default);
+  box-shadow: var(--relief-shadow-lg);
+  @include finish-surface(var(--popover-bg));
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-0.25rem);
+  transition:
+    opacity var(--transition-normal) var(--easing-in-out),
+    transform var(--transition-normal) var(--easing-in-out);
+
+  &.active {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+}
+
+.hover-card-sm {
+  .hover-card-content {
+    width: 14rem;
+    padding: 0.75rem;
+  }
+}
+
+.hover-card-lg {
+  .hover-card-content {
+    width: 28rem;
+  }
+}

package/src/styles/components/_images.scss

@@ -0,0 +1,71 @@
+// ---------------------------------------------------------------------------
+// Image Components
+// ---------------------------------------------------------------------------
+// Responsive images, rounded variants, thumbnail treatment, and
+// aspect-ratio containers.
+// Uses --relief-* and --finish-* variables for tier integration.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+
+// ============================================================================
+// BASE IMAGE
+// ============================================================================
+
+.img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+// ============================================================================
+// VARIANTS
+// ============================================================================
+
+.img-rounded {
+  border-radius: var(--radius-xl);
+}
+
+.img-circle {
+  border-radius: var(--radius-full);
+}
+
+.img-thumbnail {
+  padding: 0.25rem;
+  @include relief-container;
+  @include finish-surface;
+  border-radius: var(--radius-lg);
+}
+
+// ============================================================================
+// ASPECT RATIO CONTAINER
+// ============================================================================
+
+.aspect-ratio {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--aspect-ratio, 16 / 9);
+  overflow: hidden;
+
+  > img,
+  > video,
+  > iframe {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.aspect-ratio-square {
+  --aspect-ratio: 1 / 1;
+}
+
+.aspect-ratio-video {
+  --aspect-ratio: 16 / 9;
+}
+
+.aspect-ratio-photo {
+  --aspect-ratio: 4 / 3;
+}

package/src/styles/components/_index.scss

@@ -0,0 +1,41 @@
+// ---------------------------------------------------------------------------
+// Components Index
+// ---------------------------------------------------------------------------
+// Aggregates all component partials.
+// Naming: most components use flat class names (e.g. .card, .card-header).
+// _layouts.scss and _segmented-controls.scss use BEM notation (e.g.
+// .page-layout__sidebar, .segmented-control__option) for tightly-coupled
+// parent/child structures where the child has no standalone meaning.
+// ---------------------------------------------------------------------------
+
+@forward 'buttons';
+@forward 'inputs';
+@forward 'cards';
+@forward 'badges';
+@forward 'feedback';
+@forward 'navigation';
+@forward 'overlays';
+@forward 'toggles';
+@forward 'closes';
+@forward 'toasts';
+@forward 'menus';
+@forward 'lists';
+@forward 'indicators';
+@forward 'segmented-controls';
+@forward 'tables';
+@forward 'layouts';
+@forward 'callouts';
+@forward 'figures';
+@forward 'heros';
+@forward 'code';
+@forward 'images';
+@forward 'collapsibles';
+@forward 'alert-dialogs';
+@forward 'comboboxes';
+@forward 'hover-cards';
+@forward 'context-menus';
+@forward 'carousels';
+@forward 'scroll-areas';
+@forward 'date-pickers';
+@forward 'color-pickers';
+@forward 'trees';