@screenbook/ui 1.1.0 → 1.1.2

package/src/styles/global.css

@@ -1,904 +0,0 @@
-@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: #8a8a8a;
-
-	/* 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;
-}
-
-.mermaid .node rect {
-	fill: var(--color-bg-muted);
-	stroke: var(--color-border-hover);
-	stroke-width: 1px;
-	rx: 6px;
-}
-
-.mermaid .nodeLabel {
-	color: var(--color-text);
-	font-family: system-ui, sans-serif;
-	font-size: 13px;
-}
-
-.mermaid .edgePath .path {
-	stroke: var(--color-accent);
-	stroke-width: 1.5px;
-}
-
-.mermaid .edgeLabel {
-	background: var(--color-bg);
-	color: var(--color-text-muted);
-}
-
-/* Utility */
-.sr-only {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	border: 0;
-}
-
-/* Skip Link */
-.skip-link {
-	position: absolute;
-	top: -100%;
-	left: 16px;
-	z-index: 1000;
-	padding: 12px 24px;
-	background: var(--color-accent);
-	color: var(--color-bg);
-	font-weight: 600;
-	font-size: var(--text-sm);
-	border-radius: var(--radius-md);
-	text-decoration: none;
-	transition: top 0.2s ease;
-}
-
-.skip-link:focus {
-	top: 16px;
-	outline: none;
-}
-
-/* Focus Styles */
-:focus-visible {
-	outline: 2px solid var(--color-accent);
-	outline-offset: 2px;
-}
-
-/* Remove outline for mouse clicks, keep for keyboard */
-:focus:not(:focus-visible) {
-	outline: none;
-}
-
-/* Ensure buttons and links have visible focus */
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-	outline: 2px solid var(--color-accent);
-	outline-offset: 2px;
-}