o11y-components/apps/docs/.storybook/preview.css

@import '../index.css';

:root {
	--color-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Improve Storybook UI styling */
.sb-show-main {
	background: #0b0c0e; /* Use ink-500 to match story backgrounds */
	color: #ffffff; /* White text for dark mode */
	padding: 2rem !important;
	min-height: 100vh;
}

.sb-show-main:has(.sbdocs) {
	padding: 0 !important;
}

.docs-story > div:first-of-type {
	position: relative !important;
	padding: 4rem 2rem;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	background-color: #ffffff !important;
	transition: background-color 0.2s ease;
}

html.dark .docs-story > div:first-of-type {
	background-color: #0b0c0e !important;
}

/* Global font settings - only apply to Storybook UI elements */
.sb-show-main * {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		'Roboto',
		'Oxygen',
		'Ubuntu',
		'Cantarell',
		'Fira Sans',
		'Droid Sans',
		'Helvetica Neue',
		sans-serif;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;
}

/* Improved typography for better readability - only for Storybook UI */

.sb-show-main body {
	font-size: 14px;

	line-height: 1.6;
}

/* Improve heading hierarchy - only for Storybook UI */

.sb-show-main h1,
.sb-show-main h2,
.sb-show-main h3,
.sb-show-main h4,
.sb-show-main h5,
.sb-show-main h6 {
	font-weight: 600;

	margin-top: 0.75rem;

	margin-bottom: 0.5rem;
}

.sb-show-main h1 {
	font-size: 1.875rem;
}

.sb-show-main h2 {
	font-size: 1.5rem;
}

.sb-show-main h3 {
	font-size: 1.25rem;
}

.sb-show-main h4 {
	font-size: 1.125rem;
}

.sb-show-main h5 {
	font-size: 1rem;
}

.sb-show-main h6 {
	font-size: 0.875rem;
}

/* Improve paragraph spacing - only for Storybook UI */

.sb-show-main p {
	margin-bottom: 0.75rem;
}

/* Improve list styling - only for Storybook UI */

.sb-show-main ul,
.sb-show-main ol {
	margin-bottom: 1rem;

	padding-left: 1.5rem;
}

.sb-show-main li {
	margin-bottom: 0.25rem;
}

/* Improve code blocks */

pre {
	background: rgba(0, 0, 0, 0.3);

	border-radius: 6px;

	padding: 1rem;

	margin: 1rem 0;

	border: 1px solid rgba(255, 255, 255, 0.1);

	overflow-x: auto;
}

code {
	background: rgba(0, 0, 0, 0.2);

	padding: 0.125rem 0.25rem;

	border-radius: 3px;

	font-size: 0.875em;

	color: #fbbf24;
}

/* Ensure dark mode is applied by default */

.dark {
	background: #0b0c0e;

	color: var(--text-vanilla-100);
}

/* Improve component spacing */

.sb-show-main > div {
	padding: 0;
}

/* Better focus states for accessibility - only for keyboard navigation */
*:focus-visible {
	outline: 2px solid #3b82f6;

	outline-offset: 2px;
}

/* Smooth transitions */

* {
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

/* Disable outline only on cmdk elements */
[data-story-block='true'] [cmdk-input],
[data-story-block='true'] [cmdk-input]:focus,
[data-story-block='true'] [cmdk-root] *:focus {
	outline: none !important;
}

[cmdk-input]:focus {
	outline: none !important;
	outline-offset: 0 !important;
}

/* Style Stories component title and spacing */
.sb-show-main h2:has(+ div[class*='sbdocs-story']),
.sb-show-main [class*='sbdocs'] h2 {
	margin-bottom: 1.5rem;
}

/* Improve spacing between story items */

.sb-show-main [class*='sbdocs-story'] {
	margin-bottom: 2rem;
}

.sb-show-main {
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Default (Light Mode) */

.sb-show-main {
	background-color: #ffffff !important;

	color: #000000 !important;
}

/* Dark Mode (when html has .dark class) */

html.dark .sb-show-main {
	background-color: #0b0c0e !important;

	color: #ffffff !important;
}

.sbdocs-preview .sb-bar {
	display: none !important;
}