soltana-ui 0.1.0

package/src/styles/components/_trees.scss

@@ -0,0 +1,123 @@
+// ---------------------------------------------------------------------------
+// Tree View Component
+// ---------------------------------------------------------------------------
+// Hierarchical tree structure with expandable branches and selectable nodes.
+// Uses --relief-* and --finish-* variables for tier integration.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/accessibility' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// CONTAINER
+// ============================================================================
+
+.tree {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+}
+
+// ============================================================================
+// NODES
+// ============================================================================
+
+.tree-node {
+  display: flex;
+  flex-direction: column;
+}
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  user-select: none;
+  @include transition-interactive(var(--transition-normal));
+
+  @include hover-state;
+
+  &:focus-visible {
+    @include focus-ring-outline($inset: true);
+  }
+
+  &.selected {
+    background-color: var(--state-active);
+    color: var(--accent-primary);
+  }
+}
+
+// ============================================================================
+// BRANCHES & LEAVES
+// ============================================================================
+
+.tree-branch > .tree-children {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--transition-slow) var(--easing-in-out);
+  padding-left: 1.25rem;
+}
+
+.tree-branch.active > .tree-children {
+  max-height: 999rem;
+}
+
+.tree-leaf {
+  padding-left: 1.25rem;
+}
+
+// ============================================================================
+// TOGGLE CHEVRON
+// ============================================================================
+
+.tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+  transition: transform var(--transition-normal) var(--easing-in-out);
+
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 0.375em;
+    height: 0.375em;
+    border-right: 1.5px solid currentcolor;
+    border-bottom: 1.5px solid currentcolor;
+    transform: rotate(-45deg);
+    transition: transform var(--transition-normal) var(--easing-in-out);
+  }
+
+  .tree-branch.active > .tree-node-content > &::after {
+    transform: rotate(45deg);
+  }
+}
+
+// ============================================================================
+// INDENTATION GUIDES
+// ============================================================================
+
+.tree-indent {
+  position: relative;
+  padding-left: 1.25rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0.625rem;
+    width: 1px;
+    background-color: var(--border-subtle);
+  }
+}

package/src/styles/decorative/_classical.scss

@@ -0,0 +1,196 @@
+@use 'sass:math';
+@use '../base/register' as *;
+
+// ---------------------------------------------------------------------------
+// Classical Layout Utilities
+// ---------------------------------------------------------------------------
+// Golden ratio spacing, column-inspired layouts, and architectural
+// section elements (pediment, entablature, plinth).
+// These are thematic layout utilities (.space-golden-*, .columns-classical,
+// .pediment, .plinth, etc.) intended for consumer application templates.
+// These utilities are not consumed by the core component library.
+// ---------------------------------------------------------------------------
+
+// ---- Golden Ratio Spacing ----
+// 1.618 : 1 ratio scale based on 1rem unit
+$golden-ratio: 1.618;
+
+// Exponent mapping: step 1 → φ⁻¹, step 2 → φ⁰ (base), step 3 → φ¹, ... step 6 → φ⁴
+@for $i from 1 through 6 {
+  .space-golden-#{$i} {
+    --golden-space: #{math.pow($golden-ratio, $i - 2) * 1rem};
+  }
+}
+
+// Golden ratio padding/margin utilities
+.p-golden {
+  padding: var(--golden-space, #{$golden-ratio * 1rem});
+}
+
+.px-golden {
+  padding-left: var(--golden-space, #{$golden-ratio * 1rem});
+  padding-right: var(--golden-space, #{$golden-ratio * 1rem});
+}
+
+.py-golden {
+  padding-top: var(--golden-space, #{$golden-ratio * 1rem});
+  padding-bottom: var(--golden-space, #{$golden-ratio * 1rem});
+}
+
+.m-golden {
+  margin: var(--golden-space, #{$golden-ratio * 1rem});
+}
+
+.mx-golden {
+  margin-left: var(--golden-space, #{$golden-ratio * 1rem});
+  margin-right: var(--golden-space, #{$golden-ratio * 1rem});
+}
+
+.my-golden {
+  margin-top: var(--golden-space, #{$golden-ratio * 1rem});
+  margin-bottom: var(--golden-space, #{$golden-ratio * 1rem});
+}
+
+.gap-golden {
+  gap: var(--golden-space, #{$golden-ratio * 1rem});
+}
+
+// ---- Golden Ratio Container ----
+.ratio-golden {
+  max-width: 100%;
+  aspect-ratio: #{$golden-ratio} / 1;
+}
+
+.ratio-golden-portrait {
+  max-width: 100%;
+  aspect-ratio: 1 / #{$golden-ratio};
+}
+
+// ---- Classical Column Layout ----
+// Multi-column layout with elegant proportions
+.columns-classical,
+.columns-classical-3 {
+  column-gap: math.pow($golden-ratio, 2) * 1rem;
+  column-rule: 1px solid var(--border-decorative);
+}
+
+.columns-classical {
+  column-count: 2;
+}
+
+.columns-classical-3 {
+  column-count: 3;
+}
+
+// ---- Pediment — triangular/arched top section ----
+// Note: .pediment and .entablature intentionally use direct styling without tier
+// bridge mixins. These represent structural and layout elements where tier-responsive
+// surface treatment is not applicable. Only .plinth uses tier composition.
+.pediment {
+  position: relative;
+  padding: math.pow($golden-ratio, 2) * 1rem $golden-ratio * 1rem $golden-ratio * 1rem;
+  text-align: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--accent-decorative) 20%,
+      color-mix(in srgb, var(--accent-decorative), white 40%) 50%,
+      var(--accent-decorative) 80%,
+      transparent
+    );
+    border-radius: 2px;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 12px;
+    height: 12px;
+    background: var(--accent-decorative);
+    border-radius: 2px;
+  }
+}
+
+// ---- Entablature — horizontal band (for headers/footers) ----
+.entablature {
+  position: relative;
+  padding: 1rem $golden-ratio * 1rem;
+  border-top: 2px solid var(--border-decorative-strong);
+  border-bottom: 1px solid var(--border-decorative);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--border-decorative);
+  }
+}
+
+// ---- Plinth — base section ----
+.plinth {
+  padding: $golden-ratio * 1rem;
+  @include finish-surface(var(--relief-surface-raised));
+  border-top: 1px solid var(--border-default);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 5%;
+    right: 5%;
+    height: 2px;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--accent-decorative) 30%,
+      var(--accent-decorative) 70%,
+      transparent
+    );
+    opacity: 0.3;
+  }
+}
+
+// ---- Architectural Section ----
+// Combines pediment (top) + content + plinth (base) pattern
+.section-classical {
+  position: relative;
+  padding: math.pow($golden-ratio, 3) * 1rem $golden-ratio * 1rem;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 10%;
+    right: 10%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--accent-decorative), transparent);
+    opacity: 0.3;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 10%;
+    right: 10%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--accent-decorative), transparent);
+    opacity: 0.2;
+  }
+}

package/src/styles/decorative/_index.scss

@@ -0,0 +1,7 @@
+// ---------------------------------------------------------------------------
+// Decorative Index
+// ---------------------------------------------------------------------------
+// Classical layout utilities.
+// ---------------------------------------------------------------------------
+
+@forward 'classical';

package/src/styles/finishes/_index.scss

@@ -0,0 +1,55 @@
+// ---------------------------------------------------------------------------
+// Finish Selectors
+// ---------------------------------------------------------------------------
+// Surface treatments orthogonal to reliefs. Each finish sets blur, saturation,
+// opacity, overlay, and sheen tokens consumed by components via the
+// finish-surface() mixin.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+
+@include register-finish('matte') {
+  --finish-blur: 0px;
+  --finish-saturation: 100%;
+  --finish-opacity: 1;
+  --finish-overlay: none;
+  --finish-sheen: none;
+  --bridge-backdrop-blur: 0px;
+}
+
+@include register-finish('frosted') {
+  --finish-blur: 32px;
+  --finish-saturation: 80%;
+  --finish-opacity: 0.45;
+  --finish-overlay: none;
+  --finish-sheen: none;
+  --bridge-backdrop-blur: 32px;
+}
+
+@include register-finish('tinted') {
+  --finish-blur: 0px;
+  --finish-saturation: 100%;
+  --finish-opacity: 1;
+  --finish-overlay: linear-gradient(
+    135deg,
+    rgb(var(--channel-tint-color) / 22%) 0%,
+    transparent 50%,
+    rgb(var(--shadow-color) / 14%) 100%
+  );
+  --finish-sheen: none;
+  --bridge-backdrop-blur: 0px;
+}
+
+@include register-finish('glossy') {
+  --finish-blur: 0px;
+  --finish-saturation: 100%;
+  --finish-opacity: 1;
+  --finish-overlay: none;
+  --finish-sheen: linear-gradient(
+    135deg,
+    rgb(var(--channel-sheen-color) / 40%) 0%,
+    rgb(var(--channel-sheen-color) / 6%) 50%,
+    rgb(var(--channel-sheen-color) / 18%) 100%
+  );
+  --bridge-backdrop-blur: 0px;
+}

package/src/styles/index.scss

@@ -0,0 +1,30 @@
+// ---------------------------------------------------------------------------
+// Soltana Design System — Main Entry
+// ---------------------------------------------------------------------------
+// Layered architecture: variables → themes → base → components →
+// reliefs → decorative → utilities.
+// ---------------------------------------------------------------------------
+
+// Foundation — Design tokens and CSS custom properties
+@use 'variables';
+
+// Themes — Color schemes (dark, light, sepia)
+@use 'themes';
+
+// Base — Typography and accessibility
+@use 'base';
+
+// Components — UI elements (buttons, inputs, cards, etc.)
+@use 'components';
+
+// Reliefs — Shadow and depth models
+@use 'reliefs';
+
+// Finishes — Surface treatments (blur, opacity, sheen)
+@use 'finishes';
+
+// Decorative — Classical layout utilities
+@use 'decorative';
+
+// Utilities — Helper classes (layout, spacing, sizing, visual)
+@use 'utilities';

package/src/styles/reliefs/_index.scss

@@ -0,0 +1,66 @@
+// ---------------------------------------------------------------------------
+// Relief Selectors
+// ---------------------------------------------------------------------------
+// Data-attribute selectors activated by initSoltana(). Class selectors
+// available for per-element overrides. Each relief defines depth/shadow
+// tokens consumed by all components.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use 'neumorphic-tables';
+
+@include register-relief('flat') {
+  --relief-bg: var(--relief-surface-flat);
+  --relief-shadow-sm: none;
+  --relief-shadow: none;
+  --relief-shadow-lg: none;
+  --relief-shadow-inset-sm: none;
+  --relief-shadow-inset: none;
+  --relief-shadow-inset-lg: none;
+  --relief-border: var(--relief-border-default);
+}
+
+@include register-relief('glassmorphic') {
+  --relief-bg: var(--relief-surface-raised);
+  --relief-opacity: var(--glass-opacity);
+  --relief-shadow-sm: 0 2px 8px rgb(var(--shadow-color) / 8%);
+  --relief-shadow:
+    0 4px 16px rgb(var(--shadow-color) / 10%), 0 1px 4px rgb(var(--shadow-color) / 6%);
+  --relief-shadow-lg:
+    0 8px 32px rgb(var(--shadow-color) / 12%), 0 2px 8px rgb(var(--shadow-color) / 6%);
+  --relief-shadow-inset-sm: inset 0 0.5px 0 rgb(var(--highlight-color) / 10%);
+  --relief-shadow-inset: inset 0 1px 0 rgb(var(--highlight-color) / 12%);
+  --relief-shadow-inset-lg:
+    inset 0 1px 0 rgb(var(--highlight-color) / 15%), inset 0 -0.5px 0 rgb(var(--shadow-color) / 4%);
+  --relief-border: var(--relief-border-default);
+}
+
+@include register-relief('skeuomorphic') {
+  --relief-bg: var(--relief-surface-raised);
+  --relief-shadow-sm:
+    0 1px 3px rgb(var(--shadow-color) / 14%), 0 1px 2px rgb(var(--shadow-color) / 24%);
+  --relief-shadow:
+    0 3px 6px rgb(var(--shadow-color) / 18%), 0 3px 6px rgb(var(--shadow-color) / 24%);
+  --relief-shadow-lg:
+    0 10px 20px rgb(var(--shadow-color) / 22%), 0 6px 6px rgb(var(--shadow-color) / 24%);
+  --relief-shadow-inset-sm:
+    inset 0 1px 0 rgb(var(--highlight-color) / 12%), inset 0 -1px 2px rgb(var(--shadow-color) / 10%);
+  --relief-shadow-inset:
+    inset 0 1px 0 rgb(var(--highlight-color) / 15%), inset 0 -2px 4px rgb(var(--shadow-color) / 14%);
+  --relief-shadow-inset-lg:
+    inset 0 2px 0 rgb(var(--highlight-color) / 18%), inset 0 -4px 8px rgb(var(--shadow-color) / 18%);
+  --relief-border: rgb(var(--shadow-color) / 8%);
+}
+
+@include register-relief('neumorphic') {
+  --relief-bg: var(--relief-surface-deep);
+  --relief-shadow-sm: 2px 2px 5px var(--neu-shadow), -2px -2px 5px var(--neu-light);
+  --relief-shadow: 3px 3px 8px var(--neu-shadow), -3px -3px 8px var(--neu-light);
+  --relief-shadow-lg: 6px 6px 16px var(--neu-shadow), -5px -5px 14px var(--neu-light);
+  --relief-shadow-inset-sm:
+    inset 1px 1px 3px var(--neu-shadow), inset -1px -1px 3px var(--neu-light);
+  --relief-shadow-inset: inset 2px 2px 5px var(--neu-shadow), inset -2px -2px 5px var(--neu-light);
+  --relief-shadow-inset-lg:
+    inset 4px 4px 10px var(--neu-shadow), inset -4px -4px 10px var(--neu-light);
+  --relief-border: var(--relief-border-default);
+}

package/src/styles/reliefs/_neumorphic-tables.scss

@@ -0,0 +1,92 @@
+// ---------------------------------------------------------------------------
+// Neumorphic Table Override
+// ---------------------------------------------------------------------------
+// Cross-layer override: This relief selector modifies component-level table
+// styles to support the neumorphic shadow model.
+// Component styles overridden:
+// - border-collapse: Changed from 'collapse' to 'separate' to enable
+//   per-cell shadow rendering (neumorphic shadows require discrete borders)
+// - border-spacing: Set to '0 0.75rem' to create vertical gaps between rows,
+//   allowing inset shadows to render distinctly on each row
+// - Row styling: Replaces default flat borders with gradient fills and
+//   multi-layer inset shadows to achieve the neumorphic depth effect
+// This is an intentional cross-layer override, not accidental coupling. The
+// neumorphic shadow model fundamentally conflicts with standard table
+// border-collapse behavior, requiring relief-specific component overrides.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+
+@mixin neu-table-gradient($highlight-opacity, $shadow-opacity) {
+  background: linear-gradient(
+    145deg,
+    rgb(var(--highlight-color) / $highlight-opacity),
+    rgb(var(--shadow-color) / $shadow-opacity)
+  );
+}
+
+@include register-relief('neumorphic') {
+  .table {
+    border-collapse: separate;
+    border-spacing: 0 0.75rem;
+
+    th,
+    td {
+      border-bottom: none;
+    }
+
+    // Header row
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background-color: var(--relief-surface-deep);
+
+      // Bridge token: --bridge-backdrop-blur is set by the finish tier and
+      // consumed here to compose relief + finish visual effects. The fallback
+      // (0) ensures the relief works independently when no finish is active.
+      backdrop-filter: blur(var(--bridge-backdrop-blur, 0));
+
+      &:first-child {
+        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+      }
+
+      &:last-child {
+        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+      }
+    }
+
+    // Body rows — gapped inset style
+    tbody tr {
+      @include neu-table-gradient(4%, 8%);
+      box-shadow:
+        var(--relief-shadow-inset-lg),
+        inset 0 0.5px 0 rgb(var(--highlight-color) / 10%),
+        inset 0 -0.5px 0 rgb(var(--shadow-color) / 8%);
+
+      td:first-child {
+        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+      }
+
+      td:last-child {
+        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+      }
+
+      &:nth-child(even) {
+        @include neu-table-gradient(3%, 5%);
+      }
+
+      &:hover:not(:disabled) {
+        @include neu-table-gradient(6%, 10%);
+      }
+
+      &.active {
+        box-shadow:
+          var(--relief-shadow-inset-lg),
+          inset 4px 0 0 var(--relief-accent),
+          inset 0 0.5px 0 rgb(var(--highlight-color) / 10%),
+          inset 0 -0.5px 0 rgb(var(--shadow-color) / 8%);
+      }
+    }
+  }
+}