soltana-ui 0.1.0

package/src/styles/themes/_dark.scss

@@ -0,0 +1,130 @@
+// ---------------------------------------------------------------------------
+// Dark Theme
+// ---------------------------------------------------------------------------
+// Deep navy surfaces with warm ivory text and gold accents.
+// Default theme — applied to :root by initSoltana().
+// ---------------------------------------------------------------------------
+
+@use '../variables' as *;
+@use '../base/register' as *;
+
+@include register-theme('dark', $include-root: true) {
+  color-scheme: dark;
+
+  // =========================================================================
+  // SEMANTIC TOKENS
+  // =========================================================================
+
+  // Surface colors — deep midnight navy (7→13→18→26→34% L)
+  --surface-bg: #08091a;
+  --surface-1: #101330;
+  --surface-2: #1a1e48;
+  --surface-3: #262d5c;
+  --surface-4: #333c72;
+
+  // Text colors — warm ivory hierarchy
+  --text-primary: #f5f0e6;
+  --text-secondary: #c5b99b;
+  --text-tertiary: #978b77;
+  --text-muted: #897d69;
+  --text-inverse: #08091a;
+
+  // Border colors — neutral alpha for seamless neumorphic blending
+  --border-default: rgb(255 255 255 / 6%);
+  --border-subtle: rgb(255 255 255 / 3%);
+  --border-strong: rgb(255 255 255 / 10%);
+
+  // Accent colors — seed tokens (user-overridable)
+  --accent-primary: #d4a843;
+  --accent-primary-hover: color-mix(in oklch, var(--accent-primary), white 15%);
+  --accent-primary-active: color-mix(in oklch, var(--accent-primary), black 25%);
+  --accent-secondary: #a855f7;
+  --accent-secondary-hover: color-mix(in oklch, var(--accent-secondary), white 15%);
+  --accent-secondary-active: color-mix(in oklch, var(--accent-secondary), black 25%);
+
+  // Decorative accent (ornaments, highlights)
+  --accent-decorative: #d4a843;
+  --accent-decorative-hover: color-mix(in oklch, var(--accent-decorative), white 15%);
+  --accent-decorative-subtle: color-mix(in srgb, var(--accent-decorative) 10%, transparent);
+  --border-decorative: color-mix(in srgb, var(--accent-decorative) 20%, transparent);
+  --border-decorative-strong: color-mix(in srgb, var(--accent-decorative) 35%, transparent);
+
+  // Semantic colors — jewel-toned
+  --color-success: #10b981;
+  --color-success-subtle: rgb(16 185 129 / 12%);
+  --color-success-text: #34d399;
+  --color-warning: #fcd34d;
+  --color-warning-subtle: rgb(252 211 77 / 12%);
+  --color-warning-text: #fde68a;
+  --color-error: #ef4444;
+  --color-error-subtle: rgb(239 68 68 / 12%);
+  --color-error-text: #f87171;
+  --color-info: #3b82f6;
+  --color-info-subtle: rgb(59 130 246 / 12%);
+  --color-info-text: #60a5fa;
+
+  // Interactive states — derived from accent-primary
+  --state-hover: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+  --state-active: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+  --state-focus-ring: color-mix(in srgb, var(--accent-primary) 40%, transparent);
+  --state-disabled-bg: #1a1e48;
+  --state-disabled-text: #897d69;
+
+  // =========================================================================
+  // CHANNEL TOKENS — consumed by _relief-system.scss to derive primitives
+  // These are a valid low-level API: components and reliefs use
+  // rgb(var(--shadow-color) / <alpha>) to build contextual shadows.
+  // =========================================================================
+
+  --shadow-color: 0 0 0;
+  --highlight-color: 255 255 255;
+
+  // --accent-glow is a JS-only bridge token consumed by runtime registration;
+  // not referenced in SCSS.
+  --accent-glow: color-mix(in srgb, var(--accent-primary) 15%, transparent);
+  --channel-sheen-color: 255 255 255;
+  --channel-tint-color: 212 168 67;
+
+  // =========================================================================
+  // BRIDGE TOKENS — per-theme overrides
+  // Shared defaults in _relief-system.scss; tokens like --mesh-color-* use
+  // var() indirection in :root and resolve correctly for all themes without
+  // per-theme declarations. Explicit declarations here for parity with
+  // light/sepia.
+  // =========================================================================
+
+  --glass-opacity: 0.5;
+  --mesh-color-1: var(--accent-primary);
+  --mesh-color-2: var(--accent-secondary);
+  --mesh-color-3: var(--accent-decorative);
+  --surface-deep: var(--surface-2);
+  --neu-shadow: rgb(var(--shadow-color) / 65%);
+  --neu-light: rgb(var(--highlight-color) / 12%);
+
+  // =========================================================================
+  // COMPONENT TOKENS
+  // =========================================================================
+
+  @include component-tokens(
+    $input-bg: rgb(255 255 255 / 4%),
+    $card-bg: rgb(16 19 48 / 60%),
+    $tooltip-bg: #08091a,
+    $tooltip-text: #f5f0e6,
+    $code-bg: #262d5c,
+    $input-border: rgb(255 255 255 / 8%),
+    $input-placeholder: #897d69,
+    $card-border: rgb(255 255 255 / 6%),
+    $scrollbar-thumb: rgb(255 255 255 / 12%),
+    $scrollbar-track: rgb(255 255 255 / 3%),
+    $toast-bg: #101330,
+    $toast-text: #f5f0e6,
+    $drawer-bg: #101330,
+    $popover-bg: #101330,
+    $popover-border: rgb(255 255 255 / 8%),
+    $kbd-bg: #1a1e48,
+    $kbd-border: rgb(255 255 255 / 12%)
+  );
+
+  // Icon data URIs — colors chosen for contrast against accent-primary bg
+  --icon-select-chevron: #{icon-chevron(#c5b99b)};
+}

package/src/styles/themes/_index.scss

@@ -0,0 +1,3 @@
+@forward 'dark';
+@forward 'light';
+@forward 'sepia';

package/src/styles/themes/_light.scss

@@ -0,0 +1,122 @@
+// ---------------------------------------------------------------------------
+// Light Theme
+// ---------------------------------------------------------------------------
+// Cool white surfaces with blue-gray undertones, slate accents, and
+// muted gold decorative highlights.
+// ---------------------------------------------------------------------------
+
+@use '../variables' as *;
+@use '../base/register' as *;
+
+@include register-theme('light') {
+  color-scheme: light;
+
+  // =========================================================================
+  // SEMANTIC TOKENS
+  // =========================================================================
+
+  // Surface colors — cool marble with subtle blue-gray undertones
+  --surface-bg: #f6f7fa;
+  --surface-1: #fff;
+  --surface-2: #eef0f5;
+  --surface-3: #e2e5ed;
+  --surface-4: #d5d9e4;
+
+  // Text colors — cool slate hierarchy
+  --text-primary: #1e2128;
+  --text-secondary: #3a3f4c;
+  --text-tertiary: #5c6375;
+  --text-muted: #6b7280;
+  --text-inverse: #eef0f5;
+
+  // Border colors — cool silver tints
+  --border-default: rgb(85 97 120 / 12%);
+  --border-subtle: rgb(85 97 120 / 7%);
+  --border-strong: rgb(85 97 120 / 20%);
+
+  // Accent colors — seed tokens (user-overridable)
+  --accent-primary: #576378;
+  --accent-primary-hover: color-mix(in oklch, var(--accent-primary), black 15%);
+  --accent-primary-active: color-mix(in oklch, var(--accent-primary), black 25%);
+  --accent-secondary: #6b21a8;
+  --accent-secondary-hover: color-mix(in oklch, var(--accent-secondary), black 15%);
+  --accent-secondary-active: color-mix(in oklch, var(--accent-secondary), black 25%);
+
+  // Decorative accent (ornaments, highlights)
+  --accent-decorative: #755a00;
+  --accent-decorative-hover: color-mix(in oklch, var(--accent-decorative), black 15%);
+  --accent-decorative-subtle: color-mix(in srgb, var(--accent-decorative) 12%, transparent);
+  --border-decorative: color-mix(in srgb, var(--accent-decorative) 25%, transparent);
+  --border-decorative-strong: color-mix(in srgb, var(--accent-decorative) 40%, transparent);
+
+  // Semantic colors — high contrast for marble background
+  --color-success: #0d6b4e;
+  --color-success-subtle: rgb(13 107 78 / 8%);
+  --color-success-text: #065f46;
+  --color-warning: #855c0a;
+  --color-warning-subtle: rgb(133 92 10 / 8%);
+  --color-warning-text: #6b4a08;
+  --color-error: #991b1b;
+  --color-error-subtle: rgb(153 27 27 / 8%);
+  --color-error-text: #7f1d1d;
+  --color-info: #1e40af;
+  --color-info-subtle: rgb(30 64 175 / 8%);
+  --color-info-text: #1e3a8a;
+
+  // Interactive states — derived from accent-primary
+  --state-hover: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+  --state-active: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+  --state-focus-ring: color-mix(in srgb, var(--accent-primary) 35%, transparent);
+  --state-disabled-bg: #e2e5ed;
+  --state-disabled-text: #6b7280;
+
+  // =========================================================================
+  // CHANNEL TOKENS — consumed by _relief-system.scss to derive primitives
+  // =========================================================================
+
+  --shadow-color: 0 0 0;
+  --highlight-color: 255 255 255;
+  --accent-glow: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+  --channel-sheen-color: 0 0 0;
+  --channel-tint-color: 87 99 120;
+
+  // =========================================================================
+  // BRIDGE TOKENS — per-theme overrides
+  // Shared defaults in _relief-system.scss
+  // =========================================================================
+
+  --glass-opacity: 0.35;
+  --mesh-color-1: var(--accent-secondary);
+  --mesh-color-2: var(--color-info);
+  --mesh-color-3: var(--color-success);
+  --surface-deep: var(--surface-3);
+  --neu-shadow: rgb(var(--shadow-color) / 35%);
+  --neu-light: rgb(var(--highlight-color) / 88%);
+
+  // =========================================================================
+  // COMPONENT TOKENS
+  // =========================================================================
+
+  @include component-tokens(
+    $input-bg: #fff,
+    $card-bg: rgb(255 255 255 / 78%),
+    $tooltip-bg: #1e2128,
+    $tooltip-text: #eef0f5,
+    $code-bg: #eef0f5,
+    $input-border: rgb(85 97 120 / 14%),
+    $input-placeholder: #6b7280,
+    $card-border: rgb(85 97 120 / 10%),
+    $scrollbar-thumb: rgb(85 97 120 / 15%),
+    $scrollbar-track: rgb(85 97 120 / 3%),
+    $toast-bg: #fff,
+    $toast-text: #1e2128,
+    $drawer-bg: #fff,
+    $popover-bg: #fff,
+    $popover-border: rgb(85 97 120 / 14%),
+    $kbd-bg: #eef0f5,
+    $kbd-border: rgb(85 97 120 / 20%)
+  );
+
+  // Icon data URIs — colors chosen for contrast against accent-primary bg
+  --icon-select-chevron: #{icon-chevron(#3a3f4c)};
+}

package/src/styles/themes/_sepia.scss

@@ -0,0 +1,121 @@
+// ---------------------------------------------------------------------------
+// Sepia Theme
+// ---------------------------------------------------------------------------
+// Warm champagne surfaces with espresso text and brown accents.
+// ---------------------------------------------------------------------------
+
+@use '../variables' as *;
+@use '../base/register' as *;
+
+@include register-theme('sepia') {
+  color-scheme: light;
+
+  // =========================================================================
+  // SEMANTIC TOKENS
+  // =========================================================================
+
+  // Surface colors — deeper champagne with amber undertones
+  --surface-bg: #e8dcc0;
+  --surface-1: #f2e8d2;
+  --surface-2: #ddd0b0;
+  --surface-3: #d0c098;
+  --surface-4: #c4b088;
+
+  // Text colors — rich espresso hierarchy (higher contrast than light)
+  --text-primary: #1c1408;
+  --text-secondary: #3a2c12;
+  --text-tertiary: #5a4b30;
+  --text-muted: #6f6045;
+  --text-inverse: #f2e8d2;
+
+  // Border colors — warm bronze tints
+  --border-default: rgb(94 63 27 / 18%);
+  --border-subtle: rgb(94 63 27 / 10%);
+  --border-strong: rgb(94 63 27 / 28%);
+
+  // Accent colors — seed tokens (user-overridable)
+  --accent-primary: #6a4518;
+  --accent-primary-hover: color-mix(in oklch, var(--accent-primary), black 15%);
+  --accent-primary-active: color-mix(in oklch, var(--accent-primary), black 25%);
+  --accent-secondary: #6b21a8;
+  --accent-secondary-hover: color-mix(in oklch, var(--accent-secondary), black 15%);
+  --accent-secondary-active: color-mix(in oklch, var(--accent-secondary), black 25%);
+
+  // Decorative accent (ornaments, highlights)
+  --accent-decorative: #654a00;
+  --accent-decorative-hover: color-mix(in oklch, var(--accent-decorative), black 15%);
+  --accent-decorative-subtle: color-mix(in srgb, var(--accent-decorative) 10%, transparent);
+  --border-decorative: color-mix(in srgb, var(--accent-decorative) 22%, transparent);
+  --border-decorative-strong: color-mix(in srgb, var(--accent-decorative) 38%, transparent);
+
+  // Semantic colors — warm-shifted, distinct from light
+  --color-success: #1a7854;
+  --color-success-subtle: rgb(26 120 84 / 12%);
+  --color-success-text: #0e5538;
+  --color-warning: #8b5e14;
+  --color-warning-subtle: rgb(139 94 20 / 12%);
+  --color-warning-text: #744d10;
+  --color-error: #a02020;
+  --color-error-subtle: rgb(160 32 32 / 10%);
+  --color-error-text: #882020;
+  --color-info: #2a5098;
+  --color-info-subtle: rgb(42 80 152 / 10%);
+  --color-info-text: #1e3a8a;
+
+  // Interactive states — derived from accent-primary
+  --state-hover: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+  --state-active: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+  --state-focus-ring: color-mix(in srgb, var(--accent-primary) 38%, transparent);
+  --state-disabled-bg: #d0c098;
+  --state-disabled-text: #6f6045;
+
+  // =========================================================================
+  // CHANNEL TOKENS — consumed by _relief-system.scss to derive primitives
+  // =========================================================================
+
+  --shadow-color: 0 0 0;
+  --highlight-color: 242 232 210;
+  --accent-glow: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+  --channel-sheen-color: 0 0 0;
+  --channel-tint-color: 106 69 24;
+
+  // =========================================================================
+  // BRIDGE TOKENS — per-theme overrides
+  // Shared defaults in _relief-system.scss
+  // =========================================================================
+
+  --glass-opacity: 0.35;
+  --mesh-color-1: var(--color-error);
+  --mesh-color-2: var(--color-info);
+  --mesh-color-3: color-mix(in oklch, var(--color-error), var(--color-info));
+  --surface-deep: var(--surface-3);
+  --neu-shadow: rgb(var(--shadow-color) / 45%);
+  --neu-light: rgb(var(--highlight-color) / 82%);
+
+  // =========================================================================
+  // COMPONENT TOKENS
+  // =========================================================================
+
+  @include component-tokens(
+    $input-bg: #f2e8d2,
+    $card-bg: rgb(242 232 210 / 68%),
+    $tooltip-bg: #1c1408,
+    $tooltip-text: #f2e8d2,
+    $code-bg: #ddd0b0,
+    $input-border: rgb(94 63 27 / 16%),
+    $input-placeholder: #6f6045,
+    $card-border: rgb(94 63 27 / 12%),
+    $scrollbar-thumb: rgb(94 63 27 / 22%),
+    $scrollbar-track: rgb(94 63 27 / 5%),
+    $toast-bg: #f2e8d2,
+    $toast-text: #1c1408,
+    $drawer-bg: #f2e8d2,
+    $popover-bg: #f2e8d2,
+    $popover-border: rgb(94 63 27 / 18%),
+    $kbd-bg: #ddd0b0,
+    $kbd-border: rgb(94 63 27 / 28%)
+  );
+
+  // Icon data URIs — colors chosen for contrast against accent-primary bg
+  --icon-select-chevron: #{icon-chevron(#3a2c12)};
+}

package/src/styles/utilities/_index.scss

@@ -0,0 +1,13 @@
+// ---------------------------------------------------------------------------
+// Utilities Index
+// ---------------------------------------------------------------------------
+// Optional general-purpose utility classes (layout, spacing, sizing, visual).
+// Not part of the 3-tier configuration model. Consumers using the SCSS source
+// can exclude this module by omitting `@use 'utilities'` from their entry point.
+// ---------------------------------------------------------------------------
+
+@forward 'layout';
+@forward 'spacing';
+@forward 'sizing';
+@forward 'visual';
+@forward 'responsive';

package/src/styles/utilities/_layout.scss

@@ -0,0 +1,100 @@
+// ---------------------------------------------------------------------------
+// Layout Utilities
+// ---------------------------------------------------------------------------
+// Display, flexbox, grid, positioning, and overflow utilities.
+// ---------------------------------------------------------------------------
+
+@use '../variables' as *;
+@use 'mixins' as gen;
+
+// ============================================================================
+// DISPLAY
+// ============================================================================
+
+@include gen.generate-display;
+
+// ============================================================================
+// FLEXBOX
+// ============================================================================
+
+@include gen.generate-flex-direction;
+@include gen.generate-flex-wrap;
+@include gen.generate-flex-sizing;
+@include gen.generate-alignment;
+
+// ============================================================================
+// GRID
+// ============================================================================
+
+@include gen.generate-grid;
+
+// ============================================================================
+// POSITIONING
+// ============================================================================
+
+@include gen.generate-position;
+
+// ============================================================================
+// TEXT ALIGN
+// ============================================================================
+
+@include gen.generate-text-align;
+
+// ============================================================================
+// OVERFLOW
+// ============================================================================
+
+@include gen.generate-overflow;
+
+// ============================================================================
+// ASPECT RATIO
+// ============================================================================
+
+$aspect-ratios: (
+  auto: auto,
+  square: '1 / 1',
+  video: '16 / 9',
+  photo: '4 / 3',
+  portrait: '3 / 4',
+  wide: '21 / 9',
+);
+
+@each $name, $val in $aspect-ratios {
+  .aspect-#{$name} {
+    aspect-ratio: #{$val};
+  }
+}
+
+// ============================================================================
+// Z-INDEX
+// ============================================================================
+
+@each $key, $val in $z-indices {
+  .z-#{$key} {
+    z-index: $val;
+  }
+}
+
+// ============================================================================
+// ORDER
+// ============================================================================
+
+@include gen.generate-order;
+
+// ============================================================================
+// CONTAINER
+// ============================================================================
+
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  @each $key, $val in $breakpoints {
+    @media (min-width: #{$val}) {
+      max-width: $val;
+    }
+  }
+}