@import "tailwindcss"; @source "../../../../vue/toolkit/src/**/demo.vue"; @source "../../../../vue/primitives/src/**/demo.vue"; @source "../../../../core/stdlib/src/**/demo.vue"; @source "../../../../core/platform/src/**/demo.vue"; /* Class-based dark mode (toggled on ) */ @custom-variant dark (&:where(.dark, .dark *)); @theme { --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --font-display: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif; --radius-card: 0.5rem; } /* ── Semantic colour utilities ───────────────────────────────────────────── Register the runtime theme tokens as Tailwind colours so templates use clean utilities (`bg-bg`, `text-fg`, `border-border`, `ring-ring`, `bg-accent`…) instead of the `bg-(--bg)` arbitrary-value escape hatch. `inline` makes each utility emit `var(--token)` directly, so it stays switchable by the `.dark` override below AND gains opacity modifiers (`bg-bg/80` → color-mix). The raw `--token`s remain the single source of truth (consumed directly via `var()` in the prose/identity CSS); these are thin aliases over them. */ @theme inline { --color-bg: var(--bg); --color-bg-subtle: var(--bg-subtle); --color-bg-elevated: var(--bg-elevated); --color-bg-inset: var(--bg-inset); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-fg: var(--fg); --color-fg-muted: var(--fg-muted); --color-fg-subtle: var(--fg-subtle); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-fg: var(--accent-fg); --color-accent-subtle: var(--accent-subtle); --color-accent-text: var(--accent-text); --color-header-bg: var(--header-bg); --color-ring: var(--ring); } /* ── Demo design-system shortcuts ────────────────────────────────────────── The package demo.vue files share a small visual vocabulary: a width-capped vertical shell, a code-comment eyebrow label, button/badge chrome, inputs, and card surfaces. These were copy-pasted as identical Tailwind strings across ~240 demos. Collapsed here into semantic utilities so the look is tuned in one place. Each is the common CORE of its pattern — per-demo extras (max-width, padding, disabled states, w-full, sizes) stay on the element, so the rendered result is unchanged. */ @utility demo-stack { @apply flex w-full flex-col gap-4; } @utility demo-label { @apply text-xs font-medium uppercase tracking-wide text-fg-subtle; } @utility demo-card { @apply rounded-xl border border-border bg-bg-elevated; } @utility demo-btn { @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-sm font-medium text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.98]; } @utility demo-btn-primary { @apply inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-transparent bg-accent px-3 py-1.5 text-sm font-medium text-accent-fg transition hover:bg-accent-hover active:scale-[0.98]; } @utility demo-badge { @apply inline-flex items-center gap-1.5 rounded-md border border-border bg-bg-inset px-2 py-0.5 text-xs font-medium text-fg-muted; } @utility demo-input { @apply w-full rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition placeholder:text-fg-subtle focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring; } @utility demo-stat { @apply font-mono font-bold tabular-nums text-fg; } /* ── Semantic design tokens — ink on warm paper, signal-orange instruments ── The site reads like a tool-maker's field manual: warm neutral surfaces, hairline rules, international-orange accents, code-comment labels. */ :root { /* Colours are OKLCH (perceptually uniform — even lightness steps, predictable hue) and are exact equivalents of the original hand-tuned sRGB palette. Translucent tokens derive from their base via color-mix(), so they track theme + accent retuning automatically instead of duplicating a literal. */ --bg: oklch(0.9793 0.007 88.64); --bg-subtle: oklch(0.958 0.0124 91.52); --bg-elevated: oklch(0.9942 0.0069 88.64); --bg-inset: oklch(0.9371 0.0153 90.24); --border: oklch(0.9043 0.0211 88.73); --border-strong: oklch(0.8282 0.0303 87.56); --fg: oklch(0.2363 0.012 84.56); --fg-muted: oklch(0.4588 0.0204 84.58); --fg-subtle: oklch(0.6346 0.0249 78.12); --accent: oklch(0.5999 0.1905 37.88); --accent-hover: oklch(0.5461 0.1724 37.96); --accent-fg: oklch(0.9942 0.0069 88.64); --accent-subtle: oklch(0.9367 0.0266 65.68); --accent-text: oklch(0.5534 0.1739 38.4); --header-bg: color-mix(in oklch, var(--bg) 82%, transparent); --ring: color-mix(in oklch, var(--accent) 35%, transparent); --shadow-card: 0 1px 2px oklch(0.302 0.0319 74.11 / 0.05), 0 1px 3px oklch(0.302 0.0319 74.11 / 0.07); color-scheme: light; } .dark { --bg: oklch(0.1892 0.0077 67.33); --bg-subtle: oklch(0.2107 0.0106 80.56); --bg-elevated: oklch(0.2332 0.0127 78); --bg-inset: oklch(0.267 0.0176 82.2); --border: oklch(0.2964 0.0194 80.44); --border-strong: oklch(0.3822 0.0294 85.68); --fg: oklch(0.9286 0.0169 88); --fg-muted: oklch(0.7369 0.0298 86.66); --fg-subtle: oklch(0.56 0.0269 79.61); --accent: oklch(0.7294 0.1789 46.57); --accent-hover: oklch(0.7788 0.1452 51.83); --accent-fg: oklch(0.1825 0.0328 56.53); --accent-subtle: oklch(0.284 0.042 54.49); --accent-text: oklch(0.7835 0.139 49.63); /* --header-bg is not re-declared: the :root color-mix tracks --bg, which we override above. Only --ring needs a tweak (slightly stronger in dark). */ --ring: color-mix(in oklch, var(--accent) 40%, transparent); --shadow-card: 0 1px 2px oklch(0 0 0 / 0.4), 0 1px 3px oklch(0 0 0 / 0.5); color-scheme: dark; } html { scroll-behavior: smooth; scroll-padding-top: 5rem; } body { background-color: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } code, pre, kbd { font-family: var(--font-mono); } ::selection { background-color: var(--accent-subtle); color: var(--accent-text); } /* Subtle, theme-aware scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; } *::-webkit-scrollbar-track { background: transparent; } /* ── Identity helpers ─────────────────────────────────────────────────────── */ /* Section labels styled as code comments: `// sensors` */ .comment-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: lowercase; color: var(--fg-subtle); } .comment-label::before { content: '// '; color: var(--accent-text); opacity: 0.75; } /* Engineering-grid backdrop for heroes, faded out radially */ .blueprint { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 75% 90% at 24% 8%, black 25%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 75% 90% at 24% 8%, black 25%, transparent 72%); } /* Staggered rise-in for card grids (landing / package index) */ @keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .stagger > * { animation: rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .stagger > *:nth-child(1) { animation-delay: 0.03s; } .stagger > *:nth-child(2) { animation-delay: 0.07s; } .stagger > *:nth-child(3) { animation-delay: 0.11s; } .stagger > *:nth-child(4) { animation-delay: 0.15s; } .stagger > *:nth-child(5) { animation-delay: 0.19s; } .stagger > *:nth-child(6) { animation-delay: 0.23s; } .stagger > *:nth-child(7) { animation-delay: 0.27s; } .stagger > *:nth-child(8) { animation-delay: 0.31s; } .stagger > *:nth-child(n+9) { animation-delay: 0.35s; } @media (prefers-reduced-motion: reduce) { .stagger > * { animation: none; } } /* Shiki dual-theme: switch to dark colors under .dark */ .dark .shiki, .dark .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; } /* Code blocks sit on the warm surface, not on the theme's own background */ .shiki { background-color: transparent !important; } /* ── Markdown (guide) typography ──────────────────────────────────────────── */ .prose-docs { color: var(--fg-muted); font-size: 0.9375rem; line-height: 1.7; } .prose-docs > :first-child { margin-top: 0; } .prose-docs h1 { color: var(--fg); font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1rem; } .prose-docs h2 { color: var(--fg); font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); scroll-margin-top: 5rem; } .prose-docs h3 { color: var(--fg); font-size: 1.0625rem; font-weight: 600; margin: 2rem 0 0.75rem; scroll-margin-top: 5rem; } .prose-docs p { margin: 1rem 0; } .prose-docs a { color: var(--accent-text); text-decoration: none; font-weight: 500; border-bottom: 1px dotted var(--border-strong); } .prose-docs a:hover { border-bottom-color: var(--accent-text); } .prose-docs strong { color: var(--fg); font-weight: 600; } .prose-docs ul, .prose-docs ol { margin: 1rem 0; padding-left: 1.5rem; } .prose-docs ul { list-style: disc; } .prose-docs ol { list-style: decimal; } .prose-docs li { margin: 0.375rem 0; } .prose-docs li::marker { color: var(--accent-text); } .prose-docs blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.25rem 0; color: var(--fg-muted); } .prose-docs hr { border: 0; border-top: 1px dashed var(--border-strong); margin: 2rem 0; } /* inline code */ .prose-docs :not(pre) > code { font-size: 0.85em; background-color: var(--bg-inset); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.1rem 0.35rem; color: var(--fg); } /* fenced code (shiki replaces, but style the fallback + wrapper) */ .prose-docs pre { background-color: var(--bg-subtle); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin: 1.25rem 0; font-size: 0.85rem; line-height: 1.6; } .prose-docs pre code { background: none; border: 0; padding: 0; } .prose-docs table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.875rem; } .prose-docs th, .prose-docs td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } .prose-docs th { background-color: var(--bg-subtle); color: var(--fg); font-weight: 600; font-family: var(--font-mono); font-size: 0.8125rem; } /* Page-enter fade for route transitions */ .page-enter-active, .page-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; } .page-enter-from { opacity: 0; transform: translateY(4px); } .page-leave-to { opacity: 0; }