soltana-ui 0.1.0

package/src/styles/base/_typography.scss

@@ -0,0 +1,442 @@
+// ---------------------------------------------------------------------------
+// Typography — Base styles & utility classes
+// ---------------------------------------------------------------------------
+// Cinzel (serif) for display/headings, Raleway (sans) for body/UI.
+// Cinzel Decorative for ornamental display moments.
+// ---------------------------------------------------------------------------
+
+@use 'sass:list';
+@use '../variables' as *;
+
+// ---- Base typography ----
+// Global box-sizing reset: border-box ensures padding and border are included
+// in element dimensions, preventing layout surprises across all components.
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.65;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizelegibility;
+  tab-size: 4;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-weight: var(--font-regular);
+  letter-spacing: var(--tracking-refined);
+  color: var(--text-primary);
+  background-color: var(--surface-bg);
+  transition:
+    background-color var(--transition-slow) var(--easing-in-out),
+    color var(--transition-slow) var(--easing-in-out);
+}
+
+// ---- Heading defaults ----
+h1,
+h2,
+h3 {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-weight: var(--font-bold);
+  line-height: 1.15;
+  letter-spacing: var(--tracking-elegant);
+  color: var(--text-primary);
+}
+
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-weight: var(--font-semibold);
+  line-height: 1.3;
+  letter-spacing: var(--tracking-refined);
+  color: var(--text-primary);
+}
+
+h1 {
+  font-size: var(--text-5xl);
+  letter-spacing: var(--tracking-display);
+}
+
+h2 {
+  font-size: var(--text-4xl);
+  letter-spacing: var(--tracking-display);
+}
+
+h3 {
+  font-size: var(--text-3xl);
+}
+
+h4 {
+  font-size: var(--text-2xl);
+}
+
+h5 {
+  font-size: var(--text-xl);
+}
+
+h6 {
+  font-size: var(--text-lg);
+}
+
+p {
+  margin: 0;
+  font-size: var(--text-base);
+  line-height: var(--leading-base);
+}
+
+small {
+  font-size: var(--text-sm);
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--font-mono);
+}
+
+code {
+  font-size: 0.875em;
+  padding: 0.125em 0.375em;
+  border-radius: var(--radius-md);
+  background: var(--code-bg);
+  border: 1px solid var(--border-default);
+}
+
+pre {
+  overflow-x: auto;
+  padding: 1rem;
+  border-radius: var(--radius-lg);
+  background: var(--code-bg);
+  border: 1px solid var(--border-default);
+
+  code {
+    padding: 0;
+    background: none;
+    border: none;
+  }
+}
+
+a {
+  color: var(--accent-primary);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--accent-primary-hover);
+    text-decoration: underline;
+  }
+}
+
+// ---- Link utility classes ----
+
+.link {
+  color: var(--accent-primary);
+  text-decoration: none;
+  transition: color var(--transition-normal) var(--easing-in-out);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--accent-primary-hover);
+    text-decoration: underline;
+  }
+}
+
+.link-muted {
+  color: var(--text-secondary);
+
+  &:hover {
+    color: var(--text-primary);
+    text-decoration: underline;
+  }
+}
+
+.link-plain {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+strong,
+b {
+  font-weight: var(--font-bold);
+}
+
+// ---- Font family utilities ----
+.font-sans {
+  font-family: var(--font-sans);
+}
+
+.font-serif {
+  font-family: var(--font-serif);
+}
+
+.font-display {
+  font-family: var(--font-display);
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+// ---- Display text classes (Cinzel serif, editorial) ----
+$display-sizes: (
+  lg: (
+    var(--text-7xl),
+    1.05,
+    var(--tracking-display),
+  ),
+  md: (
+    var(--text-6xl),
+    1.1,
+    var(--tracking-display),
+  ),
+  sm: (
+    var(--text-5xl),
+    1.15,
+    var(--tracking-elegant),
+  ),
+);
+
+@each $name, $vals in $display-sizes {
+  .display-#{$name} {
+    font-family: var(--font-serif);
+    font-size: list.nth($vals, 1);
+    font-weight: var(--font-bold);
+    line-height: list.nth($vals, 2);
+    letter-spacing: list.nth($vals, 3);
+  }
+}
+
+// Ornamental display — Cinzel Decorative for hero/page titles
+.display-ornate {
+  font-family: var(--font-display);
+  font-size: var(--text-6xl);
+  font-weight: var(--font-regular);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-inscriptional);
+}
+
+// ---- Overline / eyebrow utility ----
+.overline {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-inscriptional);
+  color: var(--text-muted);
+}
+
+// ---- Font-size utility classes ----
+@each $key, $pair in $font-sizes {
+  .text-#{$key} {
+    font-size: var(--text-#{$key});
+    line-height: var(--leading-#{$key});
+  }
+}
+
+// ---- Font-weight utility classes ----
+@each $key, $val in $font-weights {
+  .font-#{$key} {
+    font-weight: var(--font-#{$key});
+  }
+}
+
+// ---- Text decoration ----
+.underline {
+  text-decoration: underline;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
+.no-underline {
+  text-decoration: none;
+}
+
+// ---- Text transform ----
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.normal-case {
+  text-transform: none;
+}
+
+// ---- Letter spacing ----
+.tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.tracking-normal {
+  letter-spacing: 0;
+}
+
+.tracking-refined {
+  letter-spacing: var(--tracking-refined);
+}
+
+.tracking-elegant {
+  letter-spacing: var(--tracking-elegant);
+}
+
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+
+.tracking-display {
+  letter-spacing: var(--tracking-display);
+}
+
+.tracking-inscriptional {
+  letter-spacing: var(--tracking-inscriptional);
+}
+
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+
+// ---- Line height ----
+.leading-none {
+  line-height: 1;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.leading-snug {
+  line-height: 1.375;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.leading-loose {
+  line-height: 2;
+}
+
+// ---- Text overflow ----
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@for $i from 1 through 3 {
+  .line-clamp-#{$i} {
+    display: -webkit-box;
+    -webkit-line-clamp: #{$i};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+// ---- Word break ----
+.break-normal {
+  word-break: normal;
+  overflow-wrap: normal;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+// ---- Whitespace ----
+.whitespace-normal {
+  white-space: normal;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre {
+  white-space: pre;
+}
+
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+// ---- Semantic text color utilities ----
+.text-primary {
+  color: var(--text-primary);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-tertiary {
+  color: var(--text-tertiary);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-inverse {
+  color: var(--text-inverse);
+}
+
+.text-accent {
+  color: var(--accent-primary);
+}
+
+.text-success {
+  color: var(--color-success-text);
+}
+
+.text-warning {
+  color: var(--color-warning-text);
+}
+
+.text-error {
+  color: var(--color-error-text);
+}
+
+.text-info {
+  color: var(--color-info-text);
+}

package/src/styles/components/_alert-dialogs.scss

@@ -0,0 +1,75 @@
+// ---------------------------------------------------------------------------
+// Alert Dialog Component
+// ---------------------------------------------------------------------------
+// Constrained-width modal variant for confirmations and destructive actions.
+// Reuses the existing modal backdrop/overlay patterns.
+// Uses --relief-* and --finish-* variables for tier integration.
+// ---------------------------------------------------------------------------
+
+@use '../base/register' as *;
+@use '../base/transitions' as *;
+
+.alert-dialog {
+  position: relative;
+  @include relief-container((var(--relief-shadow), 0 24px 64px rgb(var(--shadow-color) / 30%)));
+  outline: 1px solid var(--border-subtle);
+  outline-offset: 4px;
+  border-radius: var(--radius-2xl);
+  @include finish-surface(var(--modal-bg));
+  width: 100%;
+  max-width: 24rem;
+  text-align: center;
+  padding: 2rem 1.5rem 1.5rem;
+  transform: scale(0.95) translateY(10px);
+  @include transition-property(transform, var(--transition-slow));
+
+  &.active {
+    transform: scale(1) translateY(0);
+  }
+}
+
+.alert-dialog-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  margin: 0 auto 1rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xl);
+}
+
+.alert-dialog-icon-danger {
+  background: var(--color-error-subtle);
+  color: var(--color-error-text);
+}
+
+.alert-dialog-icon-warning {
+  background: var(--color-warning-subtle);
+  color: var(--color-warning-text);
+}
+
+.alert-dialog-icon-info {
+  background: var(--color-info-subtle);
+  color: var(--color-info-text);
+}
+
+.alert-dialog-title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-bold);
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.alert-dialog-body {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 1.5rem;
+}
+
+.alert-dialog-actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+}

package/src/styles/components/_badges.scss

@@ -0,0 +1,215 @@
+// ---------------------------------------------------------------------------
+// Badge, Pill, and Tag Components
+// ---------------------------------------------------------------------------
+// Uses --relief-* variables for automatic relief switching.
+// ---------------------------------------------------------------------------
+
+@use 'sass:list';
+@use '../base/register' as *;
+@use '../base/transitions' as *;
+
+// ============================================================================
+// BADGES
+// ============================================================================
+
+.badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.625rem;
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  letter-spacing: var(--tracking-elegant);
+  line-height: 1.5;
+  text-transform: uppercase;
+  border-radius: var(--radius-md);
+  background-color: var(--badge-bg);
+  color: var(--text-secondary);
+  @include transition-interactive(var(--transition-normal));
+
+  &:hover {
+    @include hover-lift;
+  }
+}
+
+.badge-pill {
+  border-radius: var(--radius-full);
+  padding: 0.125rem 0.75rem;
+}
+
+.badge-primary {
+  background-color: var(--badge-bg);
+  color: var(--accent-decorative);
+  border: 1px solid var(--border-decorative);
+}
+
+@each $type in (success, warning, error, info) {
+  .badge-#{$type} {
+    background-color: var(--color-#{$type}-subtle);
+    color: var(--color-#{$type}-text);
+  }
+}
+
+// ============================================================================
+// TAG/CHIP SHARED BASE
+// ============================================================================
+
+%tag-chip-base {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  font-weight: var(--font-medium);
+  letter-spacing: var(--tracking-elegant);
+  border-radius: var(--radius-full);
+  @include relief-container;
+  @include finish-surface;
+  @include transition-interactive(var(--transition-normal));
+
+  &:hover {
+    @include hover-lift;
+    border-color: var(--border-strong);
+  }
+}
+
+// ============================================================================
+// TAGS
+// ============================================================================
+
+.tag {
+  @extend %tag-chip-base;
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+
+// ============================================================================
+// CHIPS (Dismissible Tags)
+// ============================================================================
+
+.chip {
+  @extend %tag-chip-base;
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+
+  .close {
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-right: -0.25rem;
+  }
+}
+
+@each $type in (success, warning, error, info) {
+  .chip-#{$type} {
+    background-color: var(--color-#{$type}-subtle);
+    color: var(--color-#{$type}-text);
+    border-color: color-mix(in srgb, var(--color-#{$type}) 25%, transparent);
+  }
+}
+
+// ============================================================================
+// AVATAR
+// ============================================================================
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+  @include accent-gradient(var(--accent-decorative), var(--accent-decorative-hover));
+  color: var(--text-inverse);
+  font-weight: var(--font-semibold);
+  font-size: var(--text-sm);
+  overflow: hidden;
+  flex-shrink: 0;
+  @include transition-depth(var(--transition-normal));
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+$avatar-sizes: (
+  sm: 2rem var(--text-xs),
+  lg: 3.5rem var(--text-lg),
+  xl: 5rem var(--text-2xl),
+);
+
+@each $name, $vals in $avatar-sizes {
+  .avatar-#{$name} {
+    width: list.nth($vals, 1);
+    height: list.nth($vals, 1);
+    font-size: list.nth($vals, 2);
+  }
+}
+
+.avatar-cameo {
+  border-radius: 50% / 60%;
+  border: 3px solid var(--accent-decorative);
+  box-shadow:
+    0 0 0 2px var(--surface-bg),
+    0 0 0 4px var(--border-decorative-strong),
+    inset 0 0 8px rgb(var(--shadow-color) / 15%);
+}
+
+// ============================================================================
+// SEPARATOR
+// ============================================================================
+
+.separator {
+  border: none;
+  border-top: 1px solid var(--border-default);
+  margin: 1rem 0;
+}
+
+.separator-vertical {
+  border: none;
+  border-left: 1px solid var(--border-default);
+  margin: 0 1rem;
+  align-self: stretch;
+}
+
+.separator-thick {
+  border-top-width: 2px;
+}
+
+.separator-label {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border: none;
+  margin: 1rem 0;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  letter-spacing: var(--tracking-elegant);
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    border-top: 1px solid var(--border-default);
+  }
+}
+
+// ============================================================================
+// AVATAR GROUP
+// ============================================================================
+
+.avatar-group {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+
+  .avatar {
+    margin-left: -0.5rem;
+    box-shadow: 0 0 0 2px var(--surface-bg);
+
+    &:last-child {
+      margin-left: 0;
+    }
+  }
+}