Starlight kitchen sink

This page renders every Starlight building block with the Static Bloom plugin: strong text, emphasis, struck text, inline code, a link to the code blocks, highlighted text, and the shortcut Ctrl + K that opens search.

Asides

Note

A note with inline code and a link. Notes map to the ion accent.

Tip

A tip in ultraviolet. Tips work well for optional shortcuts.

Watch the frame budget

Each OPEN//77 WebUI page costs GPU memory. Group HUD widgets on one page.

Danger

Never use native <select> popups inside in-game CEF pages; use the Vue SbSelect.

Surface	Native select
Website	allowed
In-game	forbidden

Markdown directive

Asides also come from the :::note directive syntax.

Badges

Default Note Tip Success Caution Danger Small Medium Large

Badge in a heading v0.1

Cards

Flavors

Dusk, Midnight and Blackout share the neon accents; Daybreak brings a deeper light set.

Palette

Twenty-four colors per flavor, frozen as hex.

Components

CSS classes, Tailwind utilities and Vue components share one look.

Astro

An integration with a flash-free flavor runtime.

In-game

Local fonts, no CDN, CEF-safe controls.

Link cards

HomeBack to the splash page.

ShowcaseAstro layout outside Starlight.

Link buttons

Primary action

Secondary

Minimal

Tabs

pnpm

pnpm add @static-bloom/starlight

npm

npm install @static-bloom/starlight

Bun

bun add @static-bloom/starlight

Steps

1. Install the plugin next to Starlight.

   pnpm add @static-bloom/starlight

2. Register staticBloomStarlight() in the Starlight plugins array.

3. Pick a flavor in the header. The choice persists in localStorage.

File tree

• astro.config.mjs register the plugin here
• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • index.mdx
      • Directorystarlight/

        • kitchen-sink.mdx
  • Directorystyles/

    • global.css
• package.json
• …

Icons

Code blocks

flavor.ts

import type { FlavorName } from '@static-bloom/palette'

// Comments use overlay2 in italics.
const storageKey = 'static-bloom:flavor'

export function choose(flavor: FlavorName, retries = 3): boolean {
  if (retries <= 0) return false
  window.staticBloom?.setFlavor('auto')
  window.staticBloom?.setFlavor(flavor)
  return /^(dusk|midnight|blackout|daybreak)$/.test(flavor) && storageKey.length > 0
}

client.lua

local page = WebUI.create({ entry = "dist/index.html", layer = "menu" })

page:on("flavor", function(data)
  print(("flavor changed to %s"):format(data.flavor))
  return true
end)

Build the docs

pnpm build:docs
pnpm --filter @static-bloom/starlight test

:root {
  --sb-glow-color: var(--sb-primary); /* bloom */
  color-scheme: dark;
}

.sb-btn:hover {
  box-shadow: var(--sb-glow-sm);
}

package.json

{
  "name": "my-docs",
  "private": true,
  "type": "module",
  "dependencies": {
    "@astrojs/starlight": "^0.42.10",
    "@static-bloom/starlight": "^0.1.0"
  }
}

const flavor = resolveFlavor(stored, prefersLight)
root.dataset.theme = 'dark'
root.dataset.theme = flavors[flavor].dark ? 'dark' : 'light'

FlavorBadge.vue

<script setup lang="ts">
defineProps<{ flavor: string }>()
</script>

<template>
  <span class="sb-badge sb-badge-soft" :data-flavor="flavor">{{ flavor }}</span>
</template>

Tables

Flavor	Role	Base	Text	Order
Dusk	Long reading	#2f2235	#f1edf3	0
Midnight	Default dark	#111629	#ebedf2	1
Blackout	In-game HUD	#060910	#eef0f4	2
Daybreak	Light (docs/web)	#f9f5fa	#2a1d2d	3

Blockquote

The city never sleeps; it just changes flavor.

Static Bloom has a neon for every hour, from dusk to daybreak.

Keyboard

Open search with Ctrl + K (or ⌘ K on macOS) and close it with Esc.

Details

What changes between dark flavors?

Only the neutral ramp: Dusk is plum, Midnight indigo and Blackout near-black steel. Accents are identical.

Lists

• Unordered list items take a primary marker.
• Nested lists keep the same rhythm:
  • Dusk
  • Midnight
• Last item.

1. Ordered lists use mono numerals.
2. Second step.
3. Third step.

Heading levels

Level three heading

Body copy under a level three heading.

Level four heading

Body copy under a level four heading.

Level five heading

Body copy under a level five heading.

Level six heading

Body copy under a level six heading, which renders as an eyebrow.

---

The horizontal rule above uses the hairline token.