@livenetworks/ashlar 1.6.1 → 2.0.1

package/theme/ln-ashlar-landing.scss

@@ -0,0 +1,56 @@
+// ==========================================================================
+// ln-ashlar Landing & Presentation Stylesheet — Visual Design System
+// ==========================================================================
+// Modern, high-impact presentation design system for marketing web pages,
+// hero sections, bento grids, pricing tables, fluid display typography, and CTAs.
+// Retains 100% compatibility with ln-ashlar's orthogonal 3-axis architecture:
+//   data-mode  (light, dark, scoped islands)
+//   data-theme (ocean, sunset, midnight, glass, aurora, violet, cyber)
+//   data-skin  (default, glass, soft, outline)
+// ==========================================================================
+
+// 1. Core Functional Primitives
+@use 'ln-ashlar-core';
+
+// 2. Ashlar Configuration & Theming Engine
+@use 'config/tokens';
+@use 'config/breakpoints';
+@use 'config/density';
+@use 'config/theme';
+@use 'config/icons';
+
+// 3. Resets & Base Canvas
+@use 'base/reset';
+@use 'base/global';
+
+// 4. Presentation System Tokens & Components
+@use 'presentation/tokens' as *;
+@use 'presentation/typography';
+@use 'presentation/effects';
+@use 'presentation/layout';
+@use 'presentation/navbar';
+@use 'presentation/hero';
+@use 'presentation/features';
+@use 'presentation/bento';
+@use 'presentation/pricing';
+@use 'presentation/testimonials';
+@use 'presentation/stats';
+@use 'presentation/cta';
+@use 'presentation/footer';
+
+// 5. Ashlar Interactive Components (used on marketing pages)
+@use 'components/button';
+@use 'components/accordion';
+@use 'components/modal';
+@use 'components/tabs';
+@use 'components/toggle';
+@use 'components/tooltip';
+@use 'components/dropdown';
+@use 'components/popover';
+@use 'components/avatar';
+@use 'components/chip';
+@use 'components/status-badge';
+
+// 6. Utilities & Motion
+@use 'utilities/utilities';
+@use 'utilities/animations';

package/{scss/ln-ashlar.scss → theme/ln-ashlar-theme.scss}

@@ -1,69 +1,63 @@
-@use 'config/tokens';
-@use 'config/breakpoints';
-@use 'config/density';
-@use 'config/theme';
-@use 'config/icons';
-
-@use 'base/reset';
-@use 'base/global';
-@use 'base/typography';
-
-@use 'components/button';
-@use 'components/form';
-@use 'components/date';
-@use 'components/layout';
-@use 'components/table';
-@use 'components/sort';
-@use 'components/tabs';
-@use 'components/toggle';
-@use 'components/accordion';
-@use 'components/card';
-@use 'components/sections';
-@use 'components/nav';
-@use 'components/sidebar';
-@use 'components/app-shell';
-@use 'components/breadcrumbs';
-@use 'components/avatar';
-@use 'components/status-badge';
-@use 'components/alert';
-@use 'components/empty-state';
-@use 'components/page-header';
-@use 'components/stepper';
-@use 'components/timeline';
-@use 'components/stat-card';
-@use 'components/prose';
-@use 'components/editor';
-@use 'components/scrollbar';
-@use 'components/tooltip';
-@use 'components/popover';
-@use 'components/filter';
-@use 'components/chip';
-@use 'components/loader';
-@use 'components/progress';
-@use 'components/link';
-@use 'components/confirm';
-@use 'components/circular-progress';
-@use 'components/modal';
-@use 'components/dropdown';
-@use 'components/toast';
-@use 'components/upload';
-@use 'components/translations';
-@use 'components/ln-table';
-@use 'components/ajax';
-
-@use 'utilities/utilities';
-@use 'utilities/animations';
-
-// JS component co-located styles
-@use '../js/ln-modal/ln-modal';
-@use '../js/ln-dropdown/ln-dropdown';
-@use '../js/ln-tooltip/ln-tooltip';
-@use '../js/ln-upload/ln-upload';
-@use '../js/ln-filter/ln-filter';
-@use '../js/ln-search/ln-search';
-@use '../js/ln-table/ln-table' as ln-table-state;
-@use '../js/ln-list/ln-list';
-@use '../js/ln-editor/ln-editor';
-@use '../js/ln-confirm/ln-confirm';
-
-
+// ==========================================================================
+// ln-ashlar Theme Stylesheet — Visual Design System
+// ==========================================================================
+// Contains design tokens, global resets, typography, and visual skin for components.
+// ==========================================================================
+
+@use 'config/tokens';
+@use 'config/breakpoints';
+@use 'config/density';
+@use 'config/theme';
+@use 'config/icons';
+
+@use 'base/reset';
+@use 'base/global';
+@use 'base/typography';
+
+@use 'components/button';
+@use 'components/form';
+@use 'components/date';
+@use 'components/layout';
+@use 'components/table';
+@use 'components/sort';
+@use 'components/tabs';
+@use 'components/toggle';
+@use 'components/accordion';
+@use 'components/card';
+@use 'components/sections';
+@use 'components/nav';
+@use 'components/sidebar';
+@use 'components/app-shell';
+@use 'components/breadcrumbs';
+@use 'components/avatar';
+@use 'components/status-badge';
+@use 'components/alert';
+@use 'components/empty-state';
+@use 'components/page-header';
+@use 'components/stepper';
+@use 'components/timeline';
+@use 'components/stat-card';
+@use 'components/prose';
+@use 'components/editor';
+@use 'components/scrollbar';
+@use 'components/tooltip';
+@use 'components/popover';
+@use 'components/filter';
+@use 'components/chip';
+@use 'components/loader';
+@use 'components/progress';
+@use 'components/link';
+@use 'components/confirm';
+@use 'components/circular-progress';
+@use 'components/modal';
+@use 'components/dropdown';
+@use 'components/toast';
+@use 'components/upload';
+@use 'components/picklist';
+@use 'components/translations';
+@use 'components/ln-table';
+@use 'components/chart';
+@use 'components/ajax';
+
+@use 'utilities/utilities';
+@use 'utilities/animations';

package/theme/ln-ashlar.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// ln-ashlar Master Stylesheet (Full Bundle)
+// ==========================================================================
+// Combines Core Functional CSS (Layer 1) + Theme Design System (Layer 2).
+// ==========================================================================
+
+@use 'ln-ashlar-core';
+@use 'ln-ashlar-theme';

package/theme/presentation/_bento.scss

@@ -0,0 +1,151 @@
+// ==========================================================================
+// Presentation Bento Grid — ln-ashlar
+// ==========================================================================
+// Modern asymmetric bento-box grid layouts for highlighting core features.
+// Provided both as SCSS mixins (for ID/semantic composition) and classes.
+// ==========================================================================
+
+@mixin bento-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--size-lg);
+
+	@media (min-width: 768px) {
+		grid-template-columns: repeat(12, 1fr);
+	}
+}
+
+@mixin bento-card {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: clamp(1.5rem, 3vw, 2.25rem);
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	box-shadow: var(--shadow-sm);
+	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow:
+			0 12px 30px -10px hsl(var(--color-primary) / 0.16),
+			var(--shadow-md);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, var(--color-border));
+	}
+
+	.bento-header {
+		margin-block-end: var(--size-md);
+
+		.bento-title {
+			font-size: var(--text-heading-md);
+			font-weight: 700;
+			letter-spacing: -0.02em;
+			color: var(--color-fg);
+			margin-block-start: 0;
+			margin-block-end: var(--size-xs-up);
+		}
+
+		.bento-desc {
+			font-size: var(--text-body-md);
+			color: var(--fg-muted);
+			margin: 0;
+			line-height: 1.55;
+		}
+	}
+
+	.bento-visual {
+		margin-block-start: var(--size-lg);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+
+		&.bento-pill-group {
+			display: flex;
+			gap: var(--size-xs);
+			flex-wrap: wrap;
+		}
+
+		&.bento-type-sample {
+			padding: var(--size-lg);
+
+			.type-display {
+				font-size: clamp(1.5rem, 3.5vw, 2.5rem);
+				font-weight: 800;
+				line-height: 1.2;
+			}
+
+			.type-code {
+				margin-block-start: var(--size-xs);
+				margin-block-end: 0;
+				font-size: var(--text-xs);
+				font-family: var(--font-mono);
+				color: var(--fg-muted);
+			}
+		}
+
+		&.bento-glass-sample {
+			padding: var(--size-md);
+			text-align: center;
+
+			.badge-dot {
+				margin-inline: auto;
+				margin-block-end: var(--size-xs);
+			}
+
+			small {
+				color: var(--fg-muted);
+			}
+		}
+
+		&.bento-code-sample {
+			padding: var(--size-md);
+			font-family: var(--font-mono);
+			font-size: var(--text-xs);
+			line-height: 1.6;
+
+			.token-tag {
+				color: hsl(var(--color-primary));
+			}
+
+			.token-attr {
+				color: hsl(var(--color-success, 150 80% 40%));
+			}
+		}
+	}
+}
+
+@mixin bento-span($cols) {
+	@media (min-width: 768px) {
+		grid-column: span #{$cols};
+	}
+}
+
+@mixin bento-row-span($rows: 2) {
+	@media (min-width: 768px) {
+		grid-row: span #{$rows};
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Component Classes
+// ---------------------------------------------------------------------------
+.bento-grid {
+	@include bento-grid;
+}
+
+.bento-card {
+	@include bento-card;
+}
+
+@media (min-width: 768px) {
+	.bento-span-4  { @include bento-span(4); }
+	.bento-span-5  { @include bento-span(5); }
+	.bento-span-6  { @include bento-span(6); }
+	.bento-span-7  { @include bento-span(7); }
+	.bento-span-8  { @include bento-span(8); }
+	.bento-span-12 { @include bento-span(12); }
+
+	.bento-row-span-2 { @include bento-row-span(2); }
+}

package/theme/presentation/_cta.scss

@@ -0,0 +1,111 @@
+// ==========================================================================
+// Presentation Call to Action (CTA) — ln-ashlar
+// ==========================================================================
+// High-conversion banners with ambient gradients, glows, and dual action rows.
+// Provided as mixins, semantic selectors (#cta), and classes.
+// ==========================================================================
+
+@mixin cta-box {
+	position: relative;
+	overflow: hidden;
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid color-mix(in srgb, hsl(var(--color-primary)) 28%, var(--color-border));
+	border-radius: var(--radius-2xl);
+	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
+	text-align: center;
+	box-shadow: 0 20px 50px -15px hsl(var(--color-primary) / 0.15), var(--shadow-lg);
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset-inline-start: 50%;
+		top: -6rem;
+		transform: translateX(-50%);
+		width: clamp(20rem, 60vw, 45rem);
+		height: clamp(12rem, 30vw, 25rem);
+		background: radial-gradient(
+			ellipse at center,
+			hsl(var(--color-primary) / 0.22) 0%,
+			transparent 70%
+		);
+		filter: blur(50px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+
+	h2,
+	.cta-title {
+		font-size: var(--text-section-title);
+		line-height: var(--lh-section-title);
+		font-weight: 800;
+		letter-spacing: -0.03em;
+		color: var(--color-fg);
+		text-wrap: balance;
+		margin-block-start: 0;
+		margin-block-end: var(--size-md);
+	}
+
+	p,
+	.cta-lead {
+		font-size: var(--text-lead);
+		line-height: var(--lh-lead);
+		color: var(--fg-muted);
+		text-wrap: pretty;
+		margin-inline: auto;
+		margin-block-end: var(--size-xl);
+		max-width: var(--max-w-prose);
+	}
+
+	.badge-pill,
+	.cta-badge {
+		margin-block-end: var(--size-md);
+	}
+
+	nav,
+	footer,
+	.cta-actions {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: var(--size-md);
+	}
+
+	&.cta-island-card {
+		text-align: left;
+		padding: clamp(1.75rem, 3.5vw, 2.5rem);
+
+		.island-badge,
+		> span.badge-pill {
+			margin-block-end: var(--size-md);
+		}
+
+		.island-title,
+		h3 {
+			margin-block-start: 0;
+			margin-block-end: var(--size-xs);
+		}
+
+		.island-desc,
+		p {
+			color: var(--fg-muted);
+			font-size: var(--text-sm);
+			margin-block-start: 0;
+			margin-block-end: var(--size-lg);
+			line-height: 1.55;
+		}
+	}
+}
+
+// ─── Declarative Selectors ───────────────────────────────────────────────────
+
+#cta .cta-box,
+#cta article,
+.cta-box {
+	@include cta-box;
+}

package/theme/presentation/_effects.scss

@@ -0,0 +1,216 @@
+// ==========================================================================
+// Presentation Effects & Atmosphere — ln-ashlar
+// ==========================================================================
+// Ambient spotlight gradients, glassmorphism, glowing hover surfaces,
+// and presentation container patterns.
+// ==========================================================================
+
+// ---------------------------------------------------------------------------
+// Ambient Spotlights (CSS-only glowing background layers)
+// ---------------------------------------------------------------------------
+.ambient-glow-top {
+	position: relative;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset-inline-start: 50%;
+		top: -10rem;
+		transform: translateX(-50%);
+		width: clamp(20rem, 80vw, 65rem);
+		height: clamp(15rem, 40vw, 35rem);
+		background: radial-gradient(
+			ellipse at center,
+			hsl(var(--color-primary) / var(--spotlight-opacity, 0.18)) 0%,
+			hsl(var(--color-primary) / calc(var(--spotlight-opacity, 0.18) * 0.4)) 45%,
+			transparent 70%
+		);
+		filter: blur(60px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+.ambient-glow-bottom {
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset-inline-start: 50%;
+		bottom: -10rem;
+		transform: translateX(-50%);
+		width: clamp(20rem, 80vw, 65rem);
+		height: clamp(15rem, 40vw, 30rem);
+		background: radial-gradient(
+			ellipse at center,
+			hsl(var(--color-primary) / var(--spotlight-opacity, 0.15)) 0%,
+			transparent 70%
+		);
+		filter: blur(60px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Background Patterns (Clean, modern dot & grid textures)
+// ---------------------------------------------------------------------------
+.pattern-dots {
+	background-image: radial-gradient(
+		color-mix(in srgb, var(--color-border) 60%, transparent) 1px,
+		transparent 1px
+	);
+	background-size: 24px 24px;
+}
+
+.pattern-grid {
+	background-image:
+		linear-gradient(to right, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px),
+		linear-gradient(to bottom, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px);
+	background-size: 40px 40px;
+}
+
+// ---------------------------------------------------------------------------
+// Glassmorphism Surfaces
+// ---------------------------------------------------------------------------
+@mixin glass-panel {
+	background-color: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
+	-webkit-backdrop-filter: blur(16px);
+	backdrop-filter: blur(16px);
+	border: var(--border-width) solid color-mix(in srgb, var(--color-border) 65%, transparent);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-sm);
+}
+
+.glass-panel {
+	@include glass-panel;
+}
+
+// ---------------------------------------------------------------------------
+// Hover Glow & Elevation
+// ---------------------------------------------------------------------------
+@mixin glow-hover {
+	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow:
+			0 12px 30px -10px hsl(var(--color-primary) / 0.18),
+			0 0 1px 1px color-mix(in srgb, hsl(var(--color-primary)) 35%, transparent),
+			var(--shadow-md);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 45%, transparent);
+	}
+}
+
+.glow-hover {
+	@include glow-hover;
+}
+
+// ---------------------------------------------------------------------------
+// App Mockup Frame (Browser / Device Window Chrome)
+// ---------------------------------------------------------------------------
+.mockup-frame {
+	position: relative;
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3), var(--shadow-xl);
+	overflow: hidden;
+
+	.mockup-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: var(--size-xs-up) var(--size-md);
+		background-color: color-mix(in srgb, var(--bg-recessed) 80%, var(--bg-elevated));
+		border-bottom: var(--border-width) solid var(--color-border);
+
+		.mockup-dot {
+			width: 0.625rem;
+			height: 0.625rem;
+			border-radius: var(--radius-full);
+			background-color: var(--color-border);
+
+			&:nth-child(1) { background-color: #ff5f56; }
+			&:nth-child(2) { background-color: #ffbd2e; }
+			&:nth-child(3) { background-color: #27c93f; }
+		}
+
+		.mockup-url {
+			margin-inline-start: auto;
+			margin-inline-end: auto;
+			font-family: var(--font-mono);
+			font-size: var(--text-xs);
+			color: var(--fg-muted);
+			background-color: var(--bg-base);
+			padding: 0.125rem 1rem;
+			border-radius: var(--radius-sm);
+			border: var(--border-width) solid var(--color-border);
+		}
+	}
+
+	.mockup-body {
+		padding: var(--size-lg);
+		background-color: var(--bg-base);
+	}
+}
+
+.mockup-stage {
+	min-height: 17.5rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	padding: clamp(2rem, 5vw, 3rem) var(--size-lg);
+}
+
+.mockup-stage-card {
+	padding: var(--size-xl);
+	max-width: 32rem;
+	width: 100%;
+
+	.stage-badge {
+		margin-block-end: var(--size-sm);
+	}
+
+	.stage-title {
+		margin-block-start: 0;
+		margin-block-end: var(--size-xs);
+		font-size: var(--text-heading-sm);
+	}
+
+	.stage-desc {
+		margin-block-start: 0;
+		margin-block-end: var(--size-md);
+		font-size: var(--text-sm);
+		color: var(--fg-muted);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Subtle Keyframe Animations
+// ---------------------------------------------------------------------------
+@keyframes subtle-float {
+	0%, 100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-6px);
+	}
+}
+
+.animate-float {
+	animation: subtle-float 6s ease-in-out infinite;
+}