soltana-ui 0.1.0

package/src/styles/components/_buttons.scss

@@ -0,0 +1,293 @@
+// ---------------------------------------------------------------------------
+// Button Components
+// ---------------------------------------------------------------------------
+// Base button uses --relief-* variables for automatic relief switching.
+// Semantic variants (primary, danger, success) override as needed.
+// ---------------------------------------------------------------------------
+
+@use 'sass:list';
+@use '../variables' as *;
+@use '../base/register' as *;
+@use '../base/accessibility' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// BASE BUTTON
+// ============================================================================
+
+.btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  letter-spacing: var(--tracking-elegant);
+  line-height: 1.5;
+  text-transform: uppercase;
+  @include relief-container;
+  border-radius: var(--radius-lg);
+  color: var(--text-primary);
+  cursor: pointer;
+  @include finish-surface;
+  @include transition-interactive;
+  user-select: none;
+  white-space: nowrap;
+
+  &:hover {
+    @include hover-lift;
+  }
+
+  &:focus-visible {
+    @include focus-ring-outline;
+  }
+
+  &:active {
+    transform: scale(0.97);
+    box-shadow: var(--relief-shadow-inset);
+  }
+
+  &:disabled,
+  &.disabled {
+    @include disabled-state;
+    color: var(--state-disabled-text);
+    border-color: var(--border-subtle);
+    transform: none;
+
+    &:hover {
+      transform: none;
+    }
+  }
+}
+
+// ============================================================================
+// SEMANTIC VARIANTS
+// ============================================================================
+
+.btn-primary {
+  --_btn-gradient: linear-gradient(145deg, var(--accent-primary), var(--accent-primary-active));
+  @include finish-surface($bg: var(--accent-primary), $gradient: var(--_btn-gradient));
+  color: var(--text-inverse);
+  border-color: transparent;
+  box-shadow:
+    var(--relief-shadow),
+    inset 0 1px 0 rgb(var(--highlight-color) / 15%);
+
+  &:hover {
+    --_btn-gradient: linear-gradient(145deg, var(--accent-primary-hover), var(--accent-primary));
+  }
+
+  &:active {
+    box-shadow:
+      inset 2px 2px 6px rgb(var(--shadow-color) / 25%),
+      inset -1px -1px 4px rgb(var(--highlight-color) / 14%);
+  }
+}
+
+.btn-secondary {
+  background: var(--relief-bg);
+  backdrop-filter: none;
+  border-color: var(--border-default);
+  color: var(--text-primary);
+
+  @include hover-state {
+    border-color: var(--border-strong);
+  }
+}
+
+.btn-ghost {
+  background-color: transparent;
+  background-image: none;
+  color: var(--text-primary);
+  border-color: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+
+  @include hover-state {
+    box-shadow: var(--relief-shadow);
+  }
+
+  &:active {
+    background-color: var(--state-active);
+  }
+}
+
+.btn-outline {
+  background-color: transparent;
+  background-image: none;
+  border: 2px solid var(--accent-primary);
+  color: var(--accent-primary);
+  box-shadow: none;
+  backdrop-filter: none;
+
+  @include hover-state {
+    border-color: var(--accent-primary-hover);
+    box-shadow: var(--relief-shadow);
+  }
+}
+
+// ---- Semantic glow mixin: gradient + colored outer glow for danger/success ----
+
+@mixin btn-semantic-glow($color, $color-deep, $glow-base, $glow-hover) {
+  --_btn-gradient: linear-gradient(145deg, #{$color}, #{$color-deep});
+  @include finish-surface($bg: $color, $gradient: var(--_btn-gradient));
+  color: var(--text-inverse);
+  border-color: transparent;
+  box-shadow:
+    var(--relief-shadow),
+    0 2px 8px $glow-base;
+
+  &:hover {
+    box-shadow:
+      var(--relief-shadow),
+      0 4px 16px $glow-hover;
+  }
+}
+
+.btn-danger {
+  @include btn-semantic-glow(
+    var(--color-error),
+    color-mix(in srgb, var(--color-error), black 35%),
+    color-mix(in srgb, var(--color-error) 25%, transparent),
+    color-mix(in srgb, var(--color-error) 35%, transparent)
+  );
+}
+
+.btn-success {
+  @include btn-semantic-glow(
+    var(--color-success),
+    color-mix(in srgb, var(--color-success), black 35%),
+    color-mix(in srgb, var(--color-success) 20%, transparent),
+    color-mix(in srgb, var(--color-success) 30%, transparent)
+  );
+}
+
+// ============================================================================
+// SIZES
+// ============================================================================
+
+$btn-sizes: (
+  xs: (
+    0.25rem 0.625rem,
+    var(--text-xs),
+    var(--radius-md),
+  ),
+  sm: (
+    0.375rem 0.875rem,
+    var(--text-sm),
+    null,
+  ),
+  lg: (
+    0.75rem 1.75rem,
+    var(--text-lg),
+    null,
+  ),
+  xl: (
+    1rem 2.25rem,
+    var(--text-xl),
+    null,
+  ),
+);
+
+@each $name, $vals in $btn-sizes {
+  .btn-#{$name} {
+    padding: list.nth($vals, 1);
+    font-size: list.nth($vals, 2);
+    @if list.nth($vals, 3) {
+      border-radius: list.nth($vals, 3);
+    }
+  }
+}
+
+.btn-icon {
+  padding: 0.5rem;
+  aspect-ratio: 1;
+}
+
+// ============================================================================
+// BUTTON GROUP
+// ============================================================================
+
+.btn-group {
+  display: inline-flex;
+
+  .btn {
+    border-radius: 0;
+    @include edge-radius;
+
+    + .btn {
+      margin-left: -1px;
+    }
+  }
+}
+
+// ============================================================================
+// FLOATING ACTION BUTTON
+// ============================================================================
+
+.fab {
+  position: fixed;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  border-radius: var(--radius-full);
+  font-size: var(--text-lg);
+  cursor: pointer;
+  z-index: var(--z-40);
+  @include relief-container;
+  @include finish-surface(
+    $bg: var(--accent-primary),
+    $gradient: linear-gradient(145deg, var(--accent-primary), var(--accent-primary-active))
+  );
+  color: var(--text-inverse);
+  border-color: transparent;
+  box-shadow:
+    var(--relief-shadow),
+    0 4px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
+  @include transition-interactive;
+  user-select: none;
+
+  &:hover {
+    @include hover-lift(-2px);
+    box-shadow:
+      var(--relief-shadow),
+      0 6px 20px color-mix(in srgb, var(--accent-primary) 40%, transparent);
+  }
+
+  &:focus-visible {
+    @include focus-ring-outline;
+  }
+
+  &:active {
+    transform: scale(0.95);
+    box-shadow: var(--relief-shadow-inset);
+  }
+}
+
+.fab-sm {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--text-sm);
+}
+
+.fab-lg {
+  width: 4.5rem;
+  height: 4.5rem;
+  font-size: var(--text-xl);
+}
+
+.fab-bottom-right {
+  bottom: 1.5rem;
+  right: 1.5rem;
+}
+
+.fab-bottom-left {
+  bottom: 1.5rem;
+  left: 1.5rem;
+}

package/src/styles/components/_callouts.scss

@@ -0,0 +1,99 @@
+// ---------------------------------------------------------------------------
+// Callout & Blockquote Components
+// ---------------------------------------------------------------------------
+// Left-bordered content boxes for documentation, tips, warnings, and quotes.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// CALLOUT
+// ============================================================================
+
+.callout {
+  position: relative;
+  padding: 1rem 1.25rem;
+  border-left: 4px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  @include relief-container;
+  @include finish-surface;
+  @include transition-interactive(var(--transition-normal));
+}
+
+.callout-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+
+  svg {
+    flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+}
+
+.callout-content {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+// Semantic variants — placeholder selectors enable zero-duplication aliases
+@each $type in (info, warning, success, error) {
+  %callout-#{$type} {
+    border-left-color: var(--color-#{$type});
+    background-color: var(--color-#{$type}-subtle);
+
+    .callout-title {
+      color: var(--color-#{$type}-text);
+    }
+  }
+  .callout-#{$type} {
+    @extend %callout-#{$type};
+  }
+}
+
+// Doc-friendly aliases
+.callout-note {
+  @extend %callout-info;
+}
+
+.callout-tip {
+  @extend %callout-success;
+}
+
+.callout-important {
+  @extend %callout-warning;
+}
+
+// ============================================================================
+// BLOCKQUOTE
+// ============================================================================
+
+.blockquote {
+  position: relative;
+  margin: 0;
+  padding: 1rem 1.5rem;
+  border-left: 4px solid var(--accent-decorative);
+  font-size: var(--text-base);
+  font-style: italic;
+  color: var(--text-secondary);
+  line-height: 1.7;
+}
+
+.blockquote-footer {
+  display: block;
+  margin-top: 0.75rem;
+  font-size: var(--text-sm);
+  font-style: normal;
+  color: var(--text-muted);
+
+  &::before {
+    content: '\2014\00A0';
+  }
+}

package/src/styles/components/_cards.scss

@@ -0,0 +1,97 @@
+// ---------------------------------------------------------------------------
+// Card Components
+// ---------------------------------------------------------------------------
+// Base cards use --relief-* variables for automatic relief switching.
+// Beveled variant overrides as needed.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// BASE CARD
+// ============================================================================
+
+.card {
+  position: relative;
+  @include relief-container;
+  border-radius: var(--radius-2xl);
+  @include finish-surface;
+  @include transition-depth;
+}
+
+.card-flat {
+  box-shadow: none;
+}
+
+.card-hover {
+  &:hover {
+    @include hover-lift(-3px);
+  }
+}
+
+// ============================================================================
+// BEVELED CARD
+// ============================================================================
+
+.card-beveled {
+  position: relative;
+  border-radius: var(--radius-lg);
+  border: 3px solid var(--border-strong);
+  @include finish-surface(var(--relief-surface-raised));
+  box-shadow: var(--relief-shadow), var(--relief-shadow-inset);
+  overflow: visible;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    border: 1px solid rgb(var(--highlight-color) / 12%);
+    border-bottom-color: rgb(var(--shadow-color) / 10%);
+    border-right-color: rgb(var(--shadow-color) / 10%);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: -6px;
+    width: 12px;
+    height: 12px;
+    border-radius: var(--radius-full);
+    background: var(--surface-3);
+    border: 2px solid var(--border-strong);
+    box-shadow: var(--relief-shadow-inset-sm);
+    z-index: 2;
+    pointer-events: none;
+  }
+}
+
+// ============================================================================
+// CARD SECTIONS
+// ============================================================================
+
+.card-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--card-border);
+  font-weight: var(--font-semibold);
+  letter-spacing: var(--tracking-elegant);
+}
+
+.card-body {
+  padding: 1.5rem;
+}
+
+.card-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--card-border);
+}
+
+.card-image {
+  width: 100%;
+  height: auto;
+  display: block;
+}

package/src/styles/components/_carousels.scss

@@ -0,0 +1,108 @@
+// ---------------------------------------------------------------------------
+// Carousel Component
+// ---------------------------------------------------------------------------
+// Horizontal slide container with navigation buttons and indicator dots.
+// Uses --relief-* and --finish-* variables for tier integration.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/accessibility' as *;
+@use '../base/transitions' as *;
+
+.carousel {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+}
+
+.carousel-track {
+  display: flex;
+  transform: translateX(var(--carousel-offset, 0%));
+  @include transition-property(transform, var(--transition-slow));
+}
+
+.carousel-slide {
+  flex: 0 0 100%;
+  min-width: 0;
+
+  > img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+}
+
+// ---- Navigation buttons ----
+
+.carousel-prev,
+.carousel-next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+  border: none;
+  cursor: pointer;
+  @include relief-container;
+  @include finish-surface(var(--surface-1));
+  color: var(--text-primary);
+  @include transition-interactive;
+
+  &:hover {
+    background-color: var(--state-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring-outline;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.carousel-prev {
+  left: 0.75rem;
+}
+
+.carousel-next {
+  right: 0.75rem;
+}
+
+// ---- Indicator dots ----
+
+.carousel-dots {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
+}
+
+.carousel-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  border: none;
+  background-color: var(--text-muted);
+  opacity: 0.4;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    opacity var(--transition-normal) var(--easing-in-out),
+    background-color var(--transition-normal) var(--easing-in-out);
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &.active {
+    opacity: 1;
+    background-color: var(--accent-primary);
+  }
+}

package/src/styles/components/_closes.scss

@@ -0,0 +1,63 @@
+// ---------------------------------------------------------------------------
+// Close Button
+// ---------------------------------------------------------------------------
+// Reusable dismiss trigger for alerts, toasts, drawers, and modals.
+// X rendered via ::before/::after rotated lines (no icon dependency).
+// ---------------------------------------------------------------------------
+
+@use '../base/accessibility' as *;
+@use '../base/transitions' as *;
+
+.close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  flex-shrink: 0;
+  @include transition-interactive(var(--transition-normal));
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 50%;
+    height: 2px;
+    background-color: currentcolor;
+    border-radius: 1px;
+  }
+
+  &::before {
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    transform: rotate(-45deg);
+  }
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--state-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring-outline;
+  }
+}
+
+.close-sm {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.close-lg {
+  width: 2.5rem;
+  height: 2.5rem;
+}