{"_id":"@brokenrubik/slidev-theme-brokenrubik","_rev":"4-3cd9efaf210270f1e4923619a432ca91","name":"@brokenrubik/slidev-theme-brokenrubik","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@brokenrubik/slidev-theme-brokenrubik","version":"0.1.0","keywords":["slidev-theme","slidev","brokenrubik","presentation","dark"],"author":{"name":"BrokenRubik","email":"hello@brokenrubik.co"},"license":"MIT","_id":"@brokenrubik/slidev-theme-brokenrubik@0.1.0","maintainers":[{"name":"brokenrubik","email":"team@brokenrubik.co"}],"homepage":"https://brokenrubik.co","bugs":{"url":"https://github.com/brokenrubik/slidev-theme-brokenrubik/issues"},"dist":{"shasum":"77647e0c257f8e3cf836676a4569062901959a20","tarball":"https://registry.npmjs.org/@brokenrubik/slidev-theme-brokenrubik/-/slidev-theme-brokenrubik-0.1.0.tgz","fileCount":53,"integrity":"sha512-GYlm/lM96VHujuLDUskhJQdwenE4wUK/kZAyRxosoUnK1OiIf7ksYD5lrIunqMsft3x4P5Z10H4dizrmzehDng==","signatures":[{"sig":"MEQCIGrYPYDijhBHmJiXX8H0j1UfAViq7Zj4bcCu9PiO02MgAiAA3pedfWQQq6Qg80FH1aMEjGFxNv8I+gIbxfKgBxkOKQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2736959},"type":"module","slidev":{"aliases":{"layouts":{"end":"./layouts/end.vue","fact":"./layouts/fact.vue","cover":"./layouts/cover.vue","intro":"./layouts/intro.vue","quote":"./layouts/quote.vue","section":"./layouts/section.vue","statement":"./layouts/statement.vue","three-cols":"./layouts/three-cols.vue","three-cols-header":"./layouts/three-cols-header.vue"}},"defaults":{"fonts":{"mono":"Fira Code","sans":"Aspekta","local":"Aspekta"},"favicon":"/favicon.ico","drawings":{"persist":false},"transition":"slide-left","aspectRatio":"16/9","canvasWidth":980,"themeConfig":{"accent":"#FF707A","primary":"#9547FF","surface":"#141414","secondary":"#DFF95F","surface-elev":"#1a1a1a"},"titleTemplate":"%s — BrokenRubik"},"colorSchema":"both","highlighter":"shiki"},"engines":{"node":">=20.12.0"},"gitHead":"17a405ff406fd180004639de5af9b399d821c9ca","scripts":{"dev":"slidev example.md --open","build":"slidev build example.md","export":"slidev export example.md","screenshot":"slidev export example.md --format png"},"_npmUser":{"name":"brokenrubik","email":"team@brokenrubik.co"},"repository":{"url":"git+https://github.com/brokenrubik/slidev-theme-brokenrubik.git","type":"git"},"_npmVersion":"11.9.0","description":"Official BrokenRubik brand theme for Slidev — dark-first presentation theme with Aspekta typography, brand colors, and reusable layouts.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@slidev/types":"^52.14.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@slidev/cli":"^52.14.2","playwright-chromium":"^1.59.1"},"_npmOperationalInternal":{"tmp":"tmp/slidev-theme-brokenrubik_0.1.0_1776725457546_0.4343665635809144","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@brokenrubik/slidev-theme-brokenrubik","version":"0.1.1","keywords":["slidev-theme","slidev","brokenrubik","presentation","dark"],"author":{"name":"BrokenRubik","email":"hello@brokenrubik.co"},"license":"MIT","_id":"@brokenrubik/slidev-theme-brokenrubik@0.1.1","maintainers":[{"name":"brokenrubik","email":"team@brokenrubik.co"}],"homepage":"https://brokenrubik.co","bugs":{"url":"https://github.com/brokenrubik/slidev-theme-brokenrubik/issues"},"dist":{"shasum":"f7f198a9c66e1d77fb7da601721925c738ee8428","tarball":"https://registry.npmjs.org/@brokenrubik/slidev-theme-brokenrubik/-/slidev-theme-brokenrubik-0.1.1.tgz","fileCount":53,"integrity":"sha512-5bFmjMC/cvhZkqY/b2aG25+giZU74dRmo0JyfHzbDMWMjqO6Nu3oH3hYGP0AziDscgIK35REE5Al1qyGqDUYbQ==","signatures":[{"sig":"MEQCICHtbWCFpROK8Mr36GSdZZu3IygwYepOPtC23e5GreAdAiAJTGeWxLTRzaNP+WrxCwtLplmneNe0+ot6cmzGPNKAYQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2739003},"type":"module","slidev":{"aliases":{"layouts":{"end":"./layouts/end.vue","fact":"./layouts/fact.vue","cover":"./layouts/cover.vue","intro":"./layouts/intro.vue","quote":"./layouts/quote.vue","section":"./layouts/section.vue","statement":"./layouts/statement.vue","three-cols":"./layouts/three-cols.vue","three-cols-header":"./layouts/three-cols-header.vue"}},"defaults":{"fonts":{"mono":"Fira Code","sans":"Aspekta","local":"Aspekta"},"favicon":"/favicon.ico","drawings":{"persist":false},"transition":"slide-left","aspectRatio":"16/9","canvasWidth":980,"themeConfig":{"accent":"#FF707A","primary":"#9547FF","surface":"#141414","secondary":"#DFF95F","surface-elev":"#1a1a1a"},"titleTemplate":"%s — BrokenRubik"},"colorSchema":"both","highlighter":"shiki"},"engines":{"node":">=20.12.0"},"gitHead":"621ffe10494df3f49a27af3d076fdee3de385f78","scripts":{"dev":"slidev example.md --open","build":"slidev build example.md","export":"slidev export example.md","screenshot":"slidev export example.md --format png"},"_npmUser":{"name":"brokenrubik","email":"team@brokenrubik.co"},"repository":{"url":"git+https://github.com/brokenrubik/slidev-theme-brokenrubik.git","type":"git"},"_npmVersion":"11.9.0","description":"Official BrokenRubik brand theme for Slidev — dark-first presentation theme with Aspekta typography, brand colors, and reusable layouts.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@slidev/types":"^52.14.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@slidev/cli":"^52.14.2","playwright-chromium":"^1.59.1"},"_npmOperationalInternal":{"tmp":"tmp/slidev-theme-brokenrubik_0.1.1_1776726142904_0.12766545497529136","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@brokenrubik/slidev-theme-brokenrubik","version":"0.1.2","keywords":["slidev-theme","slidev","brokenrubik","presentation","dark"],"author":{"name":"BrokenRubik","email":"hello@brokenrubik.co"},"license":"MIT","_id":"@brokenrubik/slidev-theme-brokenrubik@0.1.2","maintainers":[{"name":"brokenrubik","email":"team@brokenrubik.co"}],"homepage":"https://brokenrubik.co","bugs":{"url":"https://github.com/brokenrubik/slidev-theme-brokenrubik/issues"},"dist":{"shasum":"3c8a2d12521aad7af5c3deeedc68a513d97890fe","tarball":"https://registry.npmjs.org/@brokenrubik/slidev-theme-brokenrubik/-/slidev-theme-brokenrubik-0.1.2.tgz","fileCount":53,"integrity":"sha512-PAv1Nz9Vd8fyeaOFRZzyQAMfW8+oAjEJ7afLoqfeUvOc8cG7B6fTcZ0cXaCgFVQdNmAVqPsGvN0mI0+c6jsa8w==","signatures":[{"sig":"MEUCIEJHs75Nm1CT9nnDZq1mx/Q0/fQsBlOFNteT2bruMYAbAiEA8Bgyj4TxMyaiJR/lJ0mEdvBHOX8wvrew1Eyg8I5KyKY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2739665},"type":"module","slidev":{"aliases":{"layouts":{"end":"./layouts/end.vue","fact":"./layouts/fact.vue","cover":"./layouts/cover.vue","intro":"./layouts/intro.vue","quote":"./layouts/quote.vue","section":"./layouts/section.vue","statement":"./layouts/statement.vue","three-cols":"./layouts/three-cols.vue","three-cols-header":"./layouts/three-cols-header.vue"}},"defaults":{"fonts":{"mono":"Fira Code","sans":"Aspekta","local":"Aspekta"},"favicon":"/theme/favicon.ico","drawings":{"persist":false},"transition":"slide-left","aspectRatio":"16/9","canvasWidth":980,"themeConfig":{"accent":"#FF707A","primary":"#9547FF","surface":"#141414","secondary":"#DFF95F","surface-elev":"#1a1a1a"},"titleTemplate":"%s — BrokenRubik"},"colorSchema":"both","highlighter":"shiki"},"engines":{"node":">=20.12.0"},"gitHead":"c4f279b0486df4149b9a21932f36740ef41ff57b","scripts":{"dev":"slidev example.md --open","build":"slidev build example.md","export":"slidev export example.md","screenshot":"slidev export example.md --format png"},"_npmUser":{"name":"brokenrubik","email":"team@brokenrubik.co"},"repository":{"url":"git+https://github.com/brokenrubik/slidev-theme-brokenrubik.git","type":"git"},"_npmVersion":"11.9.0","description":"Official BrokenRubik brand theme for Slidev — dark-first presentation theme with Aspekta typography, brand colors, and reusable layouts.","directories":{},"_nodeVersion":"24.14.0","dependencies":{"@slidev/types":"^52.14.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@slidev/cli":"^52.14.2","playwright-chromium":"^1.59.1"},"_npmOperationalInternal":{"tmp":"tmp/slidev-theme-brokenrubik_0.1.2_1776738467469_0.4001862780950527","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@brokenrubik/slidev-theme-brokenrubik","version":"0.1.3","description":"Official BrokenRubik brand theme for Slidev — dark-first presentation theme with Aspekta typography, brand colors, and reusable layouts.","type":"module","license":"MIT","author":{"name":"BrokenRubik","email":"hello@brokenrubik.co"},"homepage":"https://brokenrubik.co","repository":{"type":"git","url":"git+https://github.com/brokenrubik/slidev-theme-brokenrubik.git"},"keywords":["slidev-theme","slidev","brokenrubik","presentation","dark"],"engines":{"node":">=20.12.0"},"publishConfig":{"access":"public"},"scripts":{"build":"slidev build example.md","dev":"slidev example.md --open","export":"slidev export example.md","screenshot":"slidev export example.md --format png"},"dependencies":{"@slidev/types":"^52.14.2"},"devDependencies":{"@slidev/cli":"^52.14.2","playwright-chromium":"^1.59.1"},"slidev":{"colorSchema":"both","highlighter":"shiki","aliases":{"layouts":{"cover":"./layouts/cover.vue","intro":"./layouts/intro.vue","section":"./layouts/section.vue","statement":"./layouts/statement.vue","fact":"./layouts/fact.vue","quote":"./layouts/quote.vue","end":"./layouts/end.vue","three-cols":"./layouts/three-cols.vue","three-cols-header":"./layouts/three-cols-header.vue"}},"defaults":{"titleTemplate":"%s — BrokenRubik","transition":"slide-left","favicon":"/theme/favicon.ico","aspectRatio":"16/9","canvasWidth":980,"themeConfig":{"primary":"#9547FF","secondary":"#DFF95F","accent":"#FF707A","surface":"#141414","surface-elev":"#1a1a1a"},"drawings":{"persist":false},"fonts":{"sans":"Aspekta","mono":"Fira Code","local":"Aspekta"}}},"_id":"@brokenrubik/slidev-theme-brokenrubik@0.1.3","gitHead":"2dd9dbeb36df36a6d2c2b2d730e95656ad354530","bugs":{"url":"https://github.com/brokenrubik/slidev-theme-brokenrubik/issues"},"_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-P3akb7zTaieEN4j5mgO6SaCr8T9E2sBtji93ipyf3sZKPs7nrOVAUHE4JRuCYW8IcXOtwMeoVDcTH3SK5shMfA==","shasum":"362f80501bde16e9068c4139d314201835adc057","tarball":"https://registry.npmjs.org/@brokenrubik/slidev-theme-brokenrubik/-/slidev-theme-brokenrubik-0.1.3.tgz","fileCount":53,"unpackedSize":2741049,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCJee8cTsPvzTKwJ/viJfYjRiKxBiTN/Pn+B5DLqtrVeAIhAOOTJOyppVvQ6HOllfmY0JAHA4ecdPu0AXRLdDVoy8Dn"}]},"_npmUser":{"name":"brokenrubik","email":"team@brokenrubik.co"},"directories":{},"maintainers":[{"name":"brokenrubik","email":"team@brokenrubik.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/slidev-theme-brokenrubik_0.1.3_1776784254334_0.7152228551703992"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-20T22:50:57.379Z","modified":"2026-04-21T15:10:54.688Z","0.1.0":"2026-04-20T22:50:57.782Z","0.1.1":"2026-04-20T23:02:23.194Z","0.1.2":"2026-04-21T02:27:47.732Z","0.1.3":"2026-04-21T15:10:54.579Z"},"bugs":{"url":"https://github.com/brokenrubik/slidev-theme-brokenrubik/issues"},"author":{"name":"BrokenRubik","email":"hello@brokenrubik.co"},"license":"MIT","homepage":"https://brokenrubik.co","keywords":["slidev-theme","slidev","brokenrubik","presentation","dark"],"repository":{"type":"git","url":"git+https://github.com/brokenrubik/slidev-theme-brokenrubik.git"},"description":"Official BrokenRubik brand theme for Slidev — dark-first presentation theme with Aspekta typography, brand colors, and reusable layouts.","maintainers":[{"name":"brokenrubik","email":"team@brokenrubik.co"}],"readme":"# @brokenrubik/slidev-theme-brokenrubik\n\n[![NPM version](https://img.shields.io/npm/v/@brokenrubik/slidev-theme-brokenrubik?color=9547FF&label=)](https://www.npmjs.com/package/@brokenrubik/slidev-theme-brokenrubik)\n\nOfficial BrokenRubik brand theme for [Slidev](https://github.com/slidevjs/slidev). Ships **both dark and light modes** with a unified surface, Aspekta typography, three brand colors (primary `#9547FF`, secondary `#DFF95F`, accent `#FF707A`), 10 layouts, and 17 components.\n\n## Install\n\n```bash\npnpm add -D @brokenrubik/slidev-theme-brokenrubik\n```\n\nPoint your deck at the theme:\n\n```md\n---\ntheme: '@brokenrubik/slidev-theme-brokenrubik'\n---\n```\n\n> Slidev only auto-expands **unscoped** theme names (e.g. `foo` → `slidev-theme-foo`). Scoped packages like this one must be referenced by their full package name.\n\n## Headmatter\n\nThe minimum required for a new deck — everything else has a sensible default:\n\n```md\n---\ntheme: '@brokenrubik/slidev-theme-brokenrubik'\ntitle: Your deck title\n---\n```\n\n### Baked-in defaults\n\nThe theme sets these on your behalf. Override any of them in headmatter if a specific deck needs something different:\n\n| Key | Default | Purpose |\n| -------------- | ----------------------- | --------------------------------------- |\n| `colorSchema` | `both` | Dark and light both ship; press `D` to toggle. Set to `dark` or `light` to lock. |\n| `transition` | `slide-left` | House motion. |\n| `titleTemplate`| `%s — BrokenRubik` | Branded browser tab. |\n| `favicon` | `/favicon.ico` | BR favicon shipped with the theme. |\n| `aspectRatio` | `16/9` | Explicit — don't inherit surprises. |\n| `canvasWidth` | `980` | Standard Slidev canvas. |\n| `drawings.persist` | `false` | Scribbles stay session-local. |\n| `fonts.*` | Aspekta + Fira Code | See below — **not** overridable. |\n| `themeConfig.surface` | `#141414` (dark) / `#ffffff` (light) | Single slide background for the whole deck. |\n| `themeConfig.surface-elev` | `#1a1a1a` (dark) / `#f5f5f5` (light) | Raised surfaces (code blocks, cards). |\n\n### One surface for every slide\n\nEvery layout uses the same `--br-surface` background, so a deck never mixes two shades of the same hue. The surface flips automatically between dark and light modes.\n\nOverride per-deck if you need different surface colors:\n\n```md\n---\ntheme: '@brokenrubik/slidev-theme-brokenrubik'\nthemeConfig:\n surface-light: '#fafafa' # optional — lighter/warmer in light mode\n surface: '#0a0a0a' # optional — darker/cooler in dark mode\n---\n```\n\n> **Typography is not configurable.** The theme forces **Aspekta** (sans) and **Fira Code** (mono) via `!important` in CSS to keep every BrokenRubik deck visually consistent. Any `fonts:` headmatter setting is effectively ignored at render time.\n\n## Layouts\n\n| Layout | Purpose |\n| ------------ | ---------------------------------------------------------- |\n| `cover` | Opening slide — BR logo on top, big title, optional video/image background via frontmatter |\n| `intro` | Secondary opener — no logo, just content (the watermark still anchors the brand) |\n| `section` | Section divider with uppercase eyebrow + large colored title |\n| `statement` | Single centered sentence — “statement”-mode slide |\n| `fact` | Giant number + small caption for hero stats |\n| `quote` | Branded pull-quote with author, role, and a colored slide wash |\n| `end` | Closing slide — logo + optional URL |\n| `default` | Standard content slide |\n| `two-cols` | Slidev built-in — default slot + `::right::` |\n| `two-cols-header` | Slidev built-in — shared header + `::left::` / `::right::` (+ `::bottom::`) |\n| `three-cols` | Three equal columns — default slot + `::center::` + `::right::` |\n| `three-cols-header` | Shared header spans all 3 columns — `::left::` / `::center::` / `::right::` (+ `::bottom::`) |\n\n### `cover`\n\nAlways renders the BR logo above the title. Supports an optional video/image background with overlay, applied via frontmatter.\n\n```md\n---\nlayout: cover\nvariant: auto # 'auto' (default, flips with mode) | 'light' | 'dark'\nalign: left # 'left' (default) | 'center'\nbackground: /videos/bg-video.mp4 # optional — see \noverlay: 0.65 # overlay opacity; default 0.55\n---\n\n# Your title\n\nSubtitle or lede paragraph.\n```\n\n### `intro`\n\nMinimal opener — no logo. Use an `` + `# Title` pattern for structure.\n\n```md\n---\nlayout: intro\n---\n\nWho should use it?\n\n# Any BrokenRubik deck.\n\nLede paragraph here.\n```\n\n### `section`\n\n```md\n---\nlayout: section\neyebrow: \"Foundations\"\n---\n\n# Colors, type, tone\n```\n\n### `fact`\n\n```md\n---\nlayout: fact\n---\n\n# 150+\n\nProjects delivered since 2017\n```\n\n### `quote`\n\nColored accent frame with a decorative quote mark, tinted whole-slide wash, and a brand-dot attribution. Bold any phrase inside the quote and it renders in the accent color.\n\n```md\n---\nlayout: quote\nauthor: \"Anonymous client\"\nrole: \"NetSuite admin\"\ncolor: primary # 'primary' (default) | 'secondary' | 'accent'\n---\n\nThe quote text goes here, with a **highlighted phrase** in the accent color.\n```\n\n### `end`\n\n```md\n---\nlayout: end\nurl: https://brokenrubik.co\nlogo: true # 'true' (default) | 'false' to hide\n---\n\n# Ready to present.\n```\n\n### `two-cols-header` / `three-cols-header`\n\nUse these — not `two-cols` + text-as-heading — when the columns are **parallel ideas under a single topic**. The header spans all columns.\n\n```md\n---\nlayout: three-cols-header\n---\n\nProcess\n\n# Three phases\n\nLede paragraph that applies to all three columns.\n\n::left::\n\n\n\n::center::\n\n\n\n::right::\n\n\n\n::bottom::\n\nOptional footer row that spans all three columns.\n```\n\n`two-cols-header` ships with Slidev itself; `three-cols-header` is added by this theme.\n\n## Components\n\nAll components are auto-registered by Slidev — use them inline in Markdown.\n\n### ``\n\nColored notification banner with left border.\n\n```md\nPrimary emphasis.\nPositive / tip.\nWarning / risk.\n```\n\n### ``\n\nBordered content block, good for grids of 2–4.\n\n```md\n
\n Inside NetSuite, free, since 2019.\n External systems over HTTP.\n For BI tools. License required.\n
\n```\n\nProps: `type: 'primary' | 'secondary' | 'accent' | 'muted'` (default `muted`), `title?: string`.\n\n### ``\n\nNumbered step with a brand-colored circle.\n\n```md\nInstall the theme\nSet it in your frontmatter\nWrite your slides\n```\n\nProps: `n`, `color: 'primary' | 'secondary' | 'accent'`.\n\n### ``\n\nBullet-dot list item colored by intent.\n\n```md\nPrimary — default attention\nSecondary — a metric or success marker\nAccent — a warning\n```\n\n### ``\n\nBig number with a small caption.\n\n```md\n\n\n```\n\n### ``\n\nStat with optional delta, trend, and **count-up animation**.\n\n```md\n\n\n\n\n```\n\nProps:\n\n| Prop | Type | Default | Purpose |\n|---|---|---|---|\n| `value` | `string \\| number` | — | Final value. Numeric portion is parsed for animation; prefix/suffix (e.g. `$`, `%`, `M`) are preserved. |\n| `label` | `string` | — | Caption under the number. |\n| `delta` | `string` | — | Delta pill (e.g. `+18%`, `-22%`). |\n| `trend` | `'up' \\| 'down' \\| 'flat'` | `'flat'` | Arrow + color for the delta pill. |\n| `color` | `'primary' \\| 'secondary' \\| 'accent'` | `'secondary'` | Color of the big number. |\n| `animate` | `boolean` | `false` | Count up from `from` → `value` on slide enter. Resets when leaving. |\n| `from` | `number` | `0` | Starting point of the count-up. |\n| `duration` | `number` (ms) | `1500` | Duration of the animation. |\n\nUses `useIsSlideActive()` so the animation only fires when the slide is in view — and replays every time the user navigates back to it.\n\n### ``\n\nUppercase label — useful in `default` slides to mimic the section style.\n\n```md\nFoundations\n```\n\n### ``\n\nSmall rounded chip for inline labels.\n\n```md\nFree\nSince 2019\nDeprecated\n```\n\nProps: `color: 'primary' | 'secondary' | 'accent' | 'muted'`.\n\n### ``\n\nStyled keyboard key.\n\n```md\nPress Shift + Space to go back.\n```\n\n### ``\n\nSide-by-side column comparison with a centered divider and brand-colored headers.\n\n```md\n\n \n \n\n```\n\nProps: `leftLabel?`, `rightLabel?`, `leftColor` (default `'primary'`), `rightColor` (default `'secondary'`). Pass `'muted'` to de-emphasize one side.\n\n### `` + ``\n\nVertical evolution timeline with color-coded year markers.\n\n```md\n\n First milestone\n Recent change\n Upcoming deprecation\n\n```\n\n### `` + ``\n\nGreen-check / red-cross bulleted lists for contrasting options.\n\n```md\n
\n\n\n- Unlimited joins\n- Subqueries\n\n\n\n\n- Point-and-click UI\n\n\n
\n```\n\n### ``\n\nActionable check-style bullet list — for next-steps slides.\n\n```md\n\n\n- Install the sandbox\n- Import the sample data\n- Run the first query\n\n\n```\n\n### ``\n\nLogo + name card for an integration or third-party tool. Becomes a link when `href` is set. Falls back to a first-letter badge when `logo` is missing or fails to load.\n\n```md\n\n\n\n\n\n```\n\nGood logo sources:\n- **Vendor favicons** (`https:///favicon.ico`) — always use their brand color, work in both light and dark modes.\n- **A local SVG you ship in `public/logos/`** when you need full control.\n- Avoid `?color=white` iconify URLs — they disappear on the light-mode background.\n\n### ``\n\nPricing / subscription card. Compose multiple `` in a `grid-cols-2/3/4` for a side-by-side comparison. One plan can be `highlight`-ed as the recommended choice (branded badge, colored price, filled CTA).\n\n```md\n
\n\n\n\n- Up to 3 seats\n- 1 GB storage\n- Community support\n- ~~Priority SLA~~\n\n\n\n\n\n- Unlimited seats\n- 100 GB storage\n- Priority support\n- AI Connector included\n\n\n\n\n\n- Dedicated environment\n- SSO + audit log\n- Named support engineer\n- Custom SLA\n\n\n\n
\n```\n\nProps:\n\n| Prop | Type | Default | Purpose |\n|---|---|---|---|\n| `name` | `string` | — | Plan name. |\n| `price` | `string \\| number` | — | Big price number. Pass `\"Custom\"` for contact-sales plans. |\n| `currency` | `string` | — | Small prefix glyph: `\"$\"`, `\"€\"`, `\"£\"`. |\n| `period` | `string` | — | Suffix after the price: `\"/mo\"`, `\"per user / month\"`. |\n| `description` | `string` | — | Short tagline under the name. |\n| `cta` | `string` | — | CTA button label. Omit to hide the button. |\n| `ctaHref` | `string` | — | If set, CTA becomes a link opening in a new tab. |\n| `highlight` | `boolean` | `false` | Raise as the recommended plan — colored badge, colored price, filled CTA. |\n| `badge` | `string` | `\"Most popular\"` | Custom badge text when `highlight` is on. |\n| `color` | `'primary' \\| 'secondary' \\| 'accent'` | `'primary'` | Accent color used for highlight, price, badge, CTA. |\n\n**Feature list syntax** — the default slot is a Markdown list:\n- Plain item → ✓ in brand color\n- `~~strikethrough~~` → `—` in muted color (signals \"not included\")\n\n### ``\n\nThe BrokenRubik logo. Auto-swaps between the light and dark variants based on the current color scheme.\n\n```md\n \n \n \n```\n\nProps: `variant: 'auto' | 'light' | 'dark'` (default `'auto'`).\n\n### `` — image or video background\n\nDrop behind any slide's content. Auto-detects video vs image from the file extension and renders an overlay that **flips with the color scheme**: black scrim in dark mode, white scrim in light mode.\n\n```md\n\n\n\n\n\n\n\n\n```\n\n**Cover-layout shortcut** — skip the component and set it in frontmatter:\n\n```md\n---\nlayout: cover\nbackground: /videos/bg-video.mp4\noverlay: 0.65\n---\n\n# Big title on top of the video\n```\n\nProps:\n\n| Prop | Type | Default | Purpose |\n|---|---|---|---|\n| `src` | `string` | — | Path / URL to image or video. |\n| `type` | `'auto' \\| 'image' \\| 'video'` | `'auto'` | Detection by extension: `.mp4`, `.webm`, `.mov`, `.ogv`, `.m4v` → video. |\n| `overlay` | `boolean \\| number` | `true` | `true` = 55% scrim, `false` = none, `0–1` = custom opacity. |\n| `overlayColor` | `string` | `'auto'` | `'auto'` flips with mode; pass a CSS color to lock it. |\n| `poster` | `string` | — | Poster image shown while the video loads. |\n| `fit` | `'cover' \\| 'contain'` | `'cover'` | `object-fit` for the media. |\n| `z` | `number` | `0` | Z-index inside the slide; leave at default so content sits above. |\n\n**Tips:**\n- Videos must be **muted** for browsers to autoplay — the component sets this automatically.\n- Large MP4s hurt cold-load time. Keep backgrounds under ~5 MB, or provide a `poster` image.\n\n## Colors — never hard-code hex\n\nThe theme exposes brand colors through **three layers**; pick whichever fits the context. You should never need to type a hex value in a deck.\n\n### 1. UnoCSS utility classes (use in Markdown)\n\nBrand colors are defined as RGB triplet CSS variables (`--br-primary-rgb` etc.) that flip automatically between dark and light modes. Every utility class and every `var(--br-*)` lookup follows — no per-component override required.\n\n| Class | Result |\n|---|---|\n| `text-primary`, `bg-primary`, `border-primary` | Brand purple (darker in light mode for contrast) |\n| `text-secondary`, `bg-secondary`, `border-secondary` | Lime in dark mode, olive in light mode |\n| `text-accent`, `bg-accent`, `border-accent` | Coral in dark mode, rose in light mode |\n| `bg-primary/20`, `border-secondary/40`, `text-accent/70` | Same, with opacity modifier |\n| `bg-brand-surface`, `bg-brand-black`, `border-brand-border` | Surface tokens — flip with mode |\n| `text-brand-muted`, `bg-brand-faint`, `text-brand-heading`, `text-brand-fg` | Foreground tokens — flip with mode |\n| `bg-primary-vivid`, `text-secondary-vivid`, `border-accent-vivid` | Full-saturation brand hue — **doesn't flip**. Use only when you need the bright color regardless of mode. |\n\nExtra shortcuts defined in `uno.config.ts`:\n\n| Shortcut | Expands to |\n|---|---|\n| `br-eyebrow` | `text-primary text-sm font-semibold uppercase tracking-widest` |\n| `br-caption` | `text-brand-muted text-sm` |\n| `br-ring-primary` / `-secondary` / `-accent` | Tinted background + ring border |\n\n### 2. Slidev `themeConfig` CSS variables (use in raw CSS)\n\nThe theme sets these defaults so Slidev's built-in color utilities work out of the box:\n\n```yaml\n# Theme defaults — override per-deck if you really must\nthemeConfig:\n primary: '#9547FF'\n secondary: '#DFF95F'\n accent: '#FF707A'\n```\n\n→ exposes `--slidev-theme-primary`, `--slidev-theme-secondary`, `--slidev-theme-accent` on `:root`. Used by Slidev internals for the progress bar, selection, etc.\n\n### 3. BR CSS variables (use inside component `