@screenbook/ui 0.0.1

package/src/styles/global.css

@@ -0,0 +1,862 @@
+@import "tailwindcss";
+
+/* Screenbook - Documentation Style Design System */
+@theme {
+	/* Color Palette - Neutral & Calm */
+	--color-bg: #111111;
+	--color-bg-soft: #1a1a1a;
+	--color-bg-muted: #222222;
+
+	--color-surface: #1a1a1a;
+	--color-surface-hover: #252525;
+
+	--color-border: #2e2e2e;
+	--color-border-hover: #3a3a3a;
+
+	--color-text: #eeeeee;
+	--color-text-secondary: #a0a0a0;
+	--color-text-muted: #707070;
+
+	/* Accent - Subtle Teal */
+	--color-accent: #5eead4;
+	--color-accent-hover: #99f6e4;
+	--color-accent-bg: rgba(94, 234, 212, 0.1);
+
+	/* Semantic */
+	--color-success: #4ade80;
+	--color-warning: #fbbf24;
+	--color-error: #f87171;
+
+	/* Spacing */
+	--spacing-page-x: max(24px, calc((100vw - 1200px) / 2));
+	--spacing-page-y: 48px;
+
+	/* Typography */
+	--text-xs: 0.75rem;
+	--text-sm: 0.875rem;
+	--text-base: 1rem;
+	--text-lg: 1.125rem;
+	--text-xl: 1.25rem;
+	--text-2xl: 1.5rem;
+	--text-3xl: 2rem;
+
+	/* Radius */
+	--radius-sm: 6px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+
+	/* Shadows */
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Base */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+html {
+	-webkit-font-smoothing: antialiased;
+	scroll-behavior: smooth;
+}
+
+body {
+	font-family:
+		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	background: var(--color-bg);
+	color: var(--color-text);
+	font-size: var(--text-base);
+	line-height: 1.6;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4 {
+	font-weight: 600;
+	line-height: 1.3;
+	color: var(--color-text);
+}
+
+h1 {
+	font-size: var(--text-3xl);
+}
+h2 {
+	font-size: var(--text-2xl);
+}
+h3 {
+	font-size: var(--text-xl);
+}
+h4 {
+	font-size: var(--text-lg);
+}
+
+p {
+	color: var(--color-text-secondary);
+}
+
+a {
+	color: var(--color-accent);
+	text-decoration: none;
+}
+
+a:hover {
+	color: var(--color-accent-hover);
+}
+
+code {
+	font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
+	font-size: 0.9em;
+	background: var(--color-bg-muted);
+	padding: 0.2em 0.4em;
+	border-radius: var(--radius-sm);
+}
+
+/* Selection */
+::selection {
+	background: rgba(94, 234, 212, 0.2);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--color-border);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--color-border-hover);
+}
+
+/* Layout */
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 24px;
+}
+
+/* Header */
+.header {
+	border-bottom: 1px solid var(--color-border);
+	padding: 16px 0;
+	background: var(--color-bg);
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+
+.header-content {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 24px;
+}
+
+.logo {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	font-weight: 600;
+	font-size: var(--text-lg);
+	color: var(--color-text);
+}
+
+.logo:hover {
+	color: var(--color-text);
+}
+
+.logo-icon {
+	width: 28px;
+	height: 28px;
+	color: var(--color-accent);
+}
+
+/* Navigation */
+.nav {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.nav-link {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 14px;
+	font-size: var(--text-sm);
+	font-weight: 500;
+	color: var(--color-text-secondary);
+	border-radius: var(--radius-md);
+	transition: all 0.15s ease;
+}
+
+.nav-link:hover {
+	color: var(--color-text);
+	background: var(--color-surface-hover);
+}
+
+.nav-link.active {
+	color: var(--color-accent);
+	background: var(--color-accent-bg);
+}
+
+.nav-link svg {
+	width: 16px;
+	height: 16px;
+}
+
+/* Page Header */
+.page-header {
+	padding: 48px 0 32px;
+}
+
+.page-title {
+	margin-bottom: 8px;
+}
+
+.page-description {
+	font-size: var(--text-lg);
+	color: var(--color-text-muted);
+	max-width: 600px;
+}
+
+/* Search */
+.search-wrapper {
+	position: relative;
+	max-width: 400px;
+	margin-bottom: 32px;
+}
+
+.search-icon {
+	position: absolute;
+	left: 14px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 18px;
+	height: 18px;
+	color: var(--color-text-muted);
+	pointer-events: none;
+}
+
+.search-input {
+	width: 100%;
+	padding: 10px 14px 10px 42px;
+	font-size: var(--text-sm);
+	color: var(--color-text);
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-md);
+	outline: none;
+	transition: border-color 0.15s ease;
+}
+
+.search-input::placeholder {
+	color: var(--color-text-muted);
+}
+
+.search-input:focus {
+	border-color: var(--color-accent);
+}
+
+/* Tags */
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-bottom: 32px;
+}
+
+.tag {
+	display: inline-flex;
+	align-items: center;
+	padding: 5px 12px;
+	font-size: var(--text-xs);
+	font-weight: 500;
+	color: var(--color-text-secondary);
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: 9999px;
+	cursor: pointer;
+	transition: all 0.15s ease;
+}
+
+.tag:hover {
+	border-color: var(--color-border-hover);
+	color: var(--color-text);
+}
+
+.tag.active {
+	background: var(--color-accent-bg);
+	border-color: var(--color-accent);
+	color: var(--color-accent);
+}
+
+/* Card */
+.card {
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-lg);
+	padding: 20px;
+	transition: border-color 0.15s ease;
+}
+
+.card-link {
+	display: block;
+	color: inherit;
+}
+
+.card-link:hover {
+	color: inherit;
+}
+
+.card-link:hover .card {
+	border-color: var(--color-border-hover);
+}
+
+.card-link:hover .card-title {
+	color: var(--color-accent);
+}
+
+.card-title {
+	font-size: var(--text-base);
+	font-weight: 600;
+	margin-bottom: 4px;
+	transition: color 0.15s ease;
+}
+
+.card-route {
+	font-family: ui-monospace, monospace;
+	font-size: var(--text-sm);
+	color: var(--color-text-muted);
+	margin-bottom: 12px;
+}
+
+.card-meta {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	font-size: var(--text-xs);
+	color: var(--color-text-muted);
+	margin-bottom: 12px;
+}
+
+.card-meta-item {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.card-meta-item svg {
+	width: 14px;
+	height: 14px;
+}
+
+.card-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.card-tag {
+	font-size: var(--text-xs);
+	padding: 3px 8px;
+	background: var(--color-bg-muted);
+	border-radius: 4px;
+	color: var(--color-text-secondary);
+}
+
+/* Screen Grid */
+.screen-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+	gap: 16px;
+}
+
+/* Section */
+.section {
+	margin-bottom: 32px;
+}
+
+.section-title {
+	font-size: var(--text-sm);
+	font-weight: 600;
+	color: var(--color-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	margin-bottom: 16px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+/* Detail Page */
+.detail-header {
+	padding: 32px 0;
+	border-bottom: 1px solid var(--color-border);
+	margin-bottom: 32px;
+}
+
+.detail-title {
+	font-size: var(--text-2xl);
+	margin-bottom: 8px;
+}
+
+.detail-route {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-family: ui-monospace, monospace;
+	font-size: var(--text-sm);
+	color: var(--color-accent);
+	background: var(--color-accent-bg);
+	padding: 6px 12px;
+	border-radius: var(--radius-md);
+}
+
+.detail-route svg {
+	width: 16px;
+	height: 16px;
+}
+
+.detail-content {
+	display: grid;
+	grid-template-columns: 1fr 320px;
+	gap: 48px;
+}
+
+@media (max-width: 900px) {
+	.detail-content {
+		grid-template-columns: 1fr;
+		gap: 32px;
+	}
+}
+
+/* Info List */
+.info-list {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.info-item {
+	display: flex;
+	gap: 16px;
+}
+
+.info-label {
+	width: 100px;
+	flex-shrink: 0;
+	font-size: var(--text-sm);
+	color: var(--color-text-muted);
+}
+
+.info-value {
+	font-size: var(--text-sm);
+	color: var(--color-text);
+}
+
+/* Dependency List */
+.dep-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.dep-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 12px;
+	background: var(--color-bg-muted);
+	border-radius: var(--radius-md);
+	font-family: ui-monospace, monospace;
+	font-size: var(--text-sm);
+}
+
+.dep-item svg {
+	width: 16px;
+	height: 16px;
+	color: var(--color-text-muted);
+}
+
+.dep-item-link {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	text-decoration: none;
+	color: inherit;
+	transition: all 0.15s ease;
+}
+
+.dep-item-link:hover {
+	background: var(--color-surface-hover);
+	color: inherit;
+}
+
+.dep-item-main {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.dep-item-meta {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.dep-count {
+	font-size: var(--text-xs);
+	color: var(--color-text-muted);
+	padding: 2px 8px;
+	background: var(--color-bg);
+	border-radius: var(--radius-sm);
+}
+
+.dep-arrow {
+	width: 14px;
+	height: 14px;
+	color: var(--color-accent);
+	opacity: 0;
+	transition: opacity 0.15s ease;
+}
+
+.dep-item-link:hover .dep-arrow {
+	opacity: 1;
+}
+
+/* Screen Link List */
+.screen-link-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.screen-link {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px;
+	background: var(--color-bg-muted);
+	border-radius: var(--radius-md);
+	color: var(--color-text);
+	transition: background 0.15s ease;
+}
+
+.screen-link:hover {
+	background: var(--color-surface-hover);
+	color: var(--color-text);
+}
+
+.screen-link-info {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.screen-link-title {
+	font-size: var(--text-sm);
+	font-weight: 500;
+}
+
+.screen-link-id {
+	font-size: var(--text-xs);
+	font-family: ui-monospace, monospace;
+	color: var(--color-text-muted);
+}
+
+.screen-link-arrow {
+	width: 16px;
+	height: 16px;
+	color: var(--color-text-muted);
+}
+
+/* Sidebar Card */
+.sidebar-card {
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-lg);
+	padding: 20px;
+	margin-bottom: 16px;
+}
+
+.sidebar-card-title {
+	font-size: var(--text-sm);
+	font-weight: 600;
+	color: var(--color-text-muted);
+	margin-bottom: 16px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.sidebar-card-title svg {
+	width: 16px;
+	height: 16px;
+}
+
+/* Graph */
+.graph-container {
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-lg);
+	padding: 32px;
+	min-height: 400px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.graph-legend {
+	display: flex;
+	justify-content: center;
+	gap: 32px;
+	margin-top: 24px;
+	font-size: var(--text-sm);
+	color: var(--color-text-muted);
+}
+
+.graph-legend-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.legend-node {
+	width: 32px;
+	height: 20px;
+	background: var(--color-bg-muted);
+	border: 1px solid var(--color-border-hover);
+	border-radius: 4px;
+}
+
+.legend-edge {
+	width: 32px;
+	height: 2px;
+	background: var(--color-accent);
+}
+
+/* Empty State */
+.empty-state {
+	text-align: center;
+	padding: 64px 24px;
+	max-width: 400px;
+	margin: 0 auto;
+}
+
+.empty-state-icon {
+	width: 48px;
+	height: 48px;
+	color: var(--color-text-muted);
+	margin: 0 auto 16px;
+}
+
+.empty-state-title {
+	font-size: var(--text-lg);
+	margin-bottom: 8px;
+}
+
+.empty-state-description {
+	color: var(--color-text-muted);
+	margin-bottom: 24px;
+}
+
+.empty-state-code {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 20px;
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-md);
+	font-family: ui-monospace, monospace;
+	font-size: var(--text-sm);
+}
+
+.empty-state-code .prompt {
+	color: var(--color-text-muted);
+}
+
+.empty-state-steps {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin: 32px 0;
+	text-align: left;
+}
+
+.empty-state-step {
+	display: flex;
+	align-items: flex-start;
+	gap: 16px;
+	padding: 16px;
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-md);
+}
+
+.step-number {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	background: var(--color-accent-bg);
+	color: var(--color-accent);
+	border-radius: 50%;
+	font-size: var(--text-sm);
+	font-weight: 600;
+	flex-shrink: 0;
+}
+
+.step-content {
+	flex: 1;
+}
+
+.step-title {
+	font-size: var(--text-sm);
+	color: var(--color-text);
+	margin-bottom: 4px;
+}
+
+.step-code {
+	font-family: ui-monospace, monospace;
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+	background: var(--color-bg);
+	padding: 4px 8px;
+	border-radius: var(--radius-sm);
+}
+
+.empty-state-features {
+	margin-top: 32px;
+	padding: 20px;
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-md);
+	text-align: left;
+}
+
+.features-title {
+	font-size: var(--text-sm);
+	color: var(--color-text);
+	margin-bottom: 12px;
+	font-weight: 500;
+}
+
+.features-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.features-list li {
+	font-size: var(--text-sm);
+	color: var(--color-text-secondary);
+	padding: 6px 0;
+	padding-left: 20px;
+	position: relative;
+}
+
+.features-list li::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 12px;
+	width: 6px;
+	height: 6px;
+	background: var(--color-accent);
+	border-radius: 50%;
+}
+
+/* Back Link */
+.back-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: var(--text-sm);
+	color: var(--color-text-muted);
+	margin-bottom: 24px;
+}
+
+.back-link:hover {
+	color: var(--color-text);
+}
+
+.back-link svg {
+	width: 16px;
+	height: 16px;
+}
+
+/* Stats */
+.stats {
+	display: flex;
+	gap: 24px;
+}
+
+.stat {
+	text-align: center;
+}
+
+.stat-value {
+	font-size: var(--text-2xl);
+	font-weight: 600;
+	color: var(--color-text);
+}
+
+.stat-label {
+	font-size: var(--text-xs);
+	color: var(--color-text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+/* Mermaid */
+.mermaid {
+	background: transparent !important;
+}
+
+.mermaid .node rect {
+	fill: var(--color-bg-muted) !important;
+	stroke: var(--color-border-hover) !important;
+	stroke-width: 1px !important;
+	rx: 6px !important;
+}
+
+.mermaid .nodeLabel {
+	color: var(--color-text) !important;
+	font-family: system-ui, sans-serif !important;
+	font-size: 13px !important;
+}
+
+.mermaid .edgePath .path {
+	stroke: var(--color-accent) !important;
+	stroke-width: 1.5px !important;
+}
+
+.mermaid .edgeLabel {
+	background: var(--color-bg) !important;
+	color: var(--color-text-muted) !important;
+}
+
+/* Utility */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}