···11+MIT License
22+33+Copyright (c) 2026 Rosé Pine
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
+38
README.md
···11+<p align="center">
22+ <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
33+ <h2 align="center">Rosé Pine for Starlight</h2>
44+</p>
55+66+<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>
77+88+## Usage
99+1010+1. Open App
1111+2. Under settings, import `rose-pine.theme`
1212+3. Select `Rosé Pine` from the themes dropdown
1313+1414+## Gallery
1515+1616+### Rosé Pine
1717+1818+<img width="256" alt="Rosé Pine with App" src="https://github.com/user-attachments/assets/3d9df6a3-0ee3-43f2-b934-83cf8f2806c2" />
1919+2020+### Rosé Pine Moon
2121+2222+<img width="256" alt="Rosé Pine Moon with App" src="https://github.com/user-attachments/assets/0acf279b-492c-4d75-acba-9de1d6cc8fcb" />
2323+2424+### Rosé Pine Dawn
2525+2626+<img width="256" alt="Rosé Pine Dawn with App" src="https://github.com/user-attachments/assets/fb1b1d16-55e8-45db-b388-7c25250b8022" />
2727+2828+## Thanks to
2929+3030+- [Felix Schneider](https://github.com/trueberryless)
3131+3232+## Contributing
3333+3434+Modify `template.json` using Rosé Pine variables, then build variants:
3535+3636+```sh
3737+npx @rose-pine/build@latest
3838+```
···11+---
22+title: Configuration
33+description: An overview of all the configuration options supported by the Starlight Rosé Pine theme.
44+tableOfContents:
55+ minHeadingLevel: 2
66+ maxHeadingLevel: 4
77+---
88+99+The Starlight Rosé Pine theme can be configured inside the `astro.config.mjs` configuration file of your project:
1010+1111+```js {11}
1212+// astro.config.mjs
1313+import starlight from "@astrojs/starlight";
1414+import { defineConfig } from "astro/config";
1515+import starlightRosePine from "starlight-rose-pine";
1616+1717+export default defineConfig({
1818+ integrations: [
1919+ starlight({
2020+ plugins: [
2121+ starlightRosePine({
2222+ // Configuration options go here.
2323+ }),
2424+ ],
2525+ title: "My Docs",
2626+ }),
2727+ ],
2828+});
2929+```
3030+3131+## Configuration options
3232+3333+The Starlight Rosé Pine theme accepts the following configuration options:
3434+3535+### `dark`
3636+3737+**Type:** `{ flavor?: string; accent?: string }`<br />
3838+**Default:** `{ flavor: "main", accent: "pine" }`
3939+4040+Configure the theme for the dark mode.
4141+4242+#### `flavor`
4343+4444+**Type:** `string`<br />
4545+**Default:** `main`
4646+4747+Configure the flavor for the dark theme.
4848+Available values are:
4949+5050+- `"main"`
5151+- `"moon"`
5252+5353+#### `accent`
5454+5555+**Type:** `string`<br />
5656+**Default:** `pine`
5757+5858+Configure the accent for the dark theme.
5959+Available values are:
6060+6161+- `"love"`
6262+- `"gold"`
6363+- `"rose"`
6464+- `"pine"`
6565+- `"foam"`
6666+- `"iris"`
6767+6868+### `light`
6969+7070+**Type:** `{ flavor?: string; accent?: string }`<br />
7171+**Default:** `{ flavor: "dawn", accent: "pine" }`
7272+7373+Configure the theme for the light mode.
7474+7575+#### `flavor`
7676+7777+**Type:** `string`<br />
7878+**Default:** `dawn`
7979+8080+Configure the flavor for the light theme.
8181+Available values are:
8282+8383+- `"dawn"`
8484+8585+#### `accent`
8686+8787+**Type:** `string`<br />
8888+**Default:** `pine`
8989+9090+Configure the accent for the light theme.
9191+Available values are:
9292+9393+- `"love"`
9494+- `"gold"`
9595+- `"rose"`
9696+- `"pine"`
9797+- `"foam"`
9898+- `"iris"`
+25
docs/src/content/docs/customization.mdx
···11+---
22+title: Customization
33+---
44+55+## Custom CSS
66+77+To customize the styles applied to your Starlight site when using `starlight-rose-pine`, you can provide additional CSS files to modify or extend Starlight and `starlight-rose-pine` default styles.
88+99+[Learn more about custom CSS in the Starlight documentation.](https://starlight.astro.build/guides/css-and-tailwind/#custom-css-styles)
1010+1111+## Cascade layers
1212+1313+Like Starlight, `starlight-rose-pine` uses [cascade layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers) internally to manage the order of its styles.
1414+This ensures a predictable CSS order and allows for simpler overrides.
1515+Any custom unlayered CSS will override the default styles from Starlight and `starlight-rose-pine`.
1616+1717+If you are using cascade layers, you can use [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) in your [custom CSS](https://starlight.astro.build/guides/css-and-tailwind/#custom-css-styles) to define the order of precedence for different layers relative to styles from the `starlight` and `rose-pine` layers:
1818+1919+```css "starlight" "rose-pine"
2020+/* src/styles/custom.css */
2121+@layer my-reset, starlight, rose-pine, my-overrides;
2222+```
2323+2424+The example above defines a custom layer named `my-reset`, applied before all Starlight and `starlight-rose-pine` layers, and another named `my-overrides`, applied after all Starlight and `starlight-rose-pine` layers.
2525+Any styles in the `my-overrides` layer would take precedence over Starlight and `starlight-rose-pine` styles, but Starlight or `starlight-rose-pine` could still change styles set in the `my-reset` layer.
+192
docs/src/content/docs/examples/asides.mdx
···11+---
22+title: Asides
33+pagefind: false
44+---
55+66+## Markdown asides
77+88+Asides rendered with the [custom Markdown syntax](https://starlight.astro.build/guides/authoring-content/#asides) using a pair of triple colons `:::` to wrap your content.
99+1010+:::note
1111+1212+A `note` aside with a [link](#_) in the content.
1313+1414+:::
1515+1616+:::tip
1717+1818+A `tip` aside with a [link](#_) in the content.
1919+2020+:::
2121+2222+:::caution
2323+2424+A `caution` aside with a [link](#_) in the content.
2525+2626+:::
2727+2828+:::danger
2929+3030+A `danger` aside with a [link](#_) in the content.
3131+3232+:::
3333+3434+## Component asides
3535+3636+Asides rendered with the [`<Aside>` component](https://starlight.astro.build/components/asides/).
3737+3838+import { Aside } from '@astrojs/starlight/components'
3939+4040+<Aside>
4141+ A `note` aside with a [link](#_) in the content.
4242+</Aside>
4343+4444+<Aside type="tip">
4545+ A `tip` aside with a [link](#_) in the content.
4646+</Aside>
4747+4848+<Aside type="caution">
4949+ A `caution` aside with a [link](#_) in the content.
5050+</Aside>
5151+5252+<Aside type="danger">
5353+ A `danger` aside with a [link](#_) in the content.
5454+</Aside>
5555+5656+## Asides with content
5757+5858+:::note
5959+6060+A code block:
6161+6262+```js
6363+const foo = 'bar'
6464+```
6565+6666+A sentence with some `inline` code followed by an horizontal rule.
6767+6868+---
6969+7070+A table:
7171+7272+| Column 1 | Column 2 | Column 3 | Column 4 |
7373+| -------- | -------- | -------- | -------- |
7474+| Cell 1-1 | Cell 1-2 | Cell 1-3 | Cell 1-4 |
7575+| Cell 2-1 | Cell 2-2 | Cell 2-3 | Cell 2-4 |
7676+| Cell 3-1 | Cell 3-2 | Cell 3-3 | Cell 3-4 |
7777+| Cell 4-1 | Cell 4-2 | Cell 4-3 | Cell 4-4 |
7878+| Cell 5-1 | Cell 5-2 | Cell 5-3 | Cell 5-4 |
7979+| Cell 6-1 | Cell 6-2 | Cell 6-3 | Cell 6-4 |
8080+8181+A disclosure:
8282+8383+<details>
8484+<summary>The summary of the disclosure</summary>
8585+8686+The content of the [disclosure](https://starlight.astro.build/guides/authoring-content/#details) that can use any other Markdown syntax.
8787+8888+</details>
8989+9090+:::
9191+9292+:::tip
9393+9494+A code block:
9595+9696+```js
9797+const foo = 'bar'
9898+```
9999+100100+A sentence with some `inline` code followed by an horizontal rule.
101101+102102+---
103103+104104+A table:
105105+106106+| Column 1 | Column 2 | Column 3 | Column 4 |
107107+| -------- | -------- | -------- | -------- |
108108+| Cell 1-1 | Cell 1-2 | Cell 1-3 | Cell 1-4 |
109109+| Cell 2-1 | Cell 2-2 | Cell 2-3 | Cell 2-4 |
110110+| Cell 3-1 | Cell 3-2 | Cell 3-3 | Cell 3-4 |
111111+| Cell 4-1 | Cell 4-2 | Cell 4-3 | Cell 4-4 |
112112+| Cell 5-1 | Cell 5-2 | Cell 5-3 | Cell 5-4 |
113113+| Cell 6-1 | Cell 6-2 | Cell 6-3 | Cell 6-4 |
114114+115115+A disclosure:
116116+117117+<details>
118118+<summary>The summary of the disclosure</summary>
119119+120120+The content of the [disclosure](https://starlight.astro.build/guides/authoring-content/#details) that can use any other Markdown syntax.
121121+122122+</details>
123123+124124+:::
125125+126126+:::caution
127127+128128+A code block:
129129+130130+```js
131131+const foo = 'bar'
132132+```
133133+134134+A sentence with some `inline` code followed by an horizontal rule.
135135+136136+---
137137+138138+A table:
139139+140140+| Column 1 | Column 2 | Column 3 | Column 4 |
141141+| -------- | -------- | -------- | -------- |
142142+| Cell 1-1 | Cell 1-2 | Cell 1-3 | Cell 1-4 |
143143+| Cell 2-1 | Cell 2-2 | Cell 2-3 | Cell 2-4 |
144144+| Cell 3-1 | Cell 3-2 | Cell 3-3 | Cell 3-4 |
145145+| Cell 4-1 | Cell 4-2 | Cell 4-3 | Cell 4-4 |
146146+| Cell 5-1 | Cell 5-2 | Cell 5-3 | Cell 5-4 |
147147+| Cell 6-1 | Cell 6-2 | Cell 6-3 | Cell 6-4 |
148148+149149+A disclosure:
150150+151151+<details>
152152+<summary>The summary of the disclosure</summary>
153153+154154+The content of the [disclosure](https://starlight.astro.build/guides/authoring-content/#details) that can use any other Markdown syntax.
155155+156156+</details>
157157+158158+:::
159159+160160+:::danger
161161+162162+A code block:
163163+164164+```js
165165+const foo = 'bar'
166166+```
167167+168168+A sentence with some `inline` code followed by an horizontal rule.
169169+170170+---
171171+172172+A table:
173173+174174+| Column 1 | Column 2 | Column 3 | Column 4 |
175175+| -------- | -------- | -------- | -------- |
176176+| Cell 1-1 | Cell 1-2 | Cell 1-3 | Cell 1-4 |
177177+| Cell 2-1 | Cell 2-2 | Cell 2-3 | Cell 2-4 |
178178+| Cell 3-1 | Cell 3-2 | Cell 3-3 | Cell 3-4 |
179179+| Cell 4-1 | Cell 4-2 | Cell 4-3 | Cell 4-4 |
180180+| Cell 5-1 | Cell 5-2 | Cell 5-3 | Cell 5-4 |
181181+| Cell 6-1 | Cell 6-2 | Cell 6-3 | Cell 6-4 |
182182+183183+A disclosure:
184184+185185+<details>
186186+<summary>The summary of the disclosure</summary>
187187+188188+The content of the [disclosure](https://starlight.astro.build/guides/authoring-content/#details) that can use any other Markdown syntax.
189189+190190+</details>
191191+192192+:::
···11+---
22+title: Banner - Splash
33+pagefind: false
44+template: splash
55+banner:
66+ content: |
77+ A <a href="https://starlight.astro.build/reference/frontmatter/#banner">banner</a> displaying an announcement at the top of the page that can include HTML for links or other content.
88+---
99+1010+A page using the [`splash` template](https://starlight.astro.build/reference/frontmatter/#template) with a [banner](https://starlight.astro.build/reference/frontmatter/#banner).
+9
docs/src/content/docs/examples/banner.md
···11+---
22+title: Banner
33+pagefind: false
44+banner:
55+ content: |
66+ A <a href="https://starlight.astro.build/reference/frontmatter/#banner">banner</a> displaying an announcement at the top of the page that can include HTML for links or other content.
77+---
88+99+A page with a [banner](https://starlight.astro.build/reference/frontmatter/#banner).
+59
docs/src/content/docs/examples/cards.mdx
···11+---
22+title: Cards
33+pagefind: false
44+---
55+66+import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'
77+88+## Card
99+1010+A card rendered with the [`<Card>` component](https://starlight.astro.build/components/cards/).
1111+1212+<Card title="Card title">
1313+ The content of the card that can use any other Markdown syntax.
1414+</Card>
1515+1616+## Card grid
1717+1818+Cards rendered with the [`<Card>` component](https://starlight.astro.build/components/cards/) wrapped with the [`<CardGrid>` component](https://starlight.astro.build/components/card-grids/).
1919+2020+<CardGrid>
2121+ <Card title="Card title" icon="star">
2222+ The content of the card.
2323+ </Card>
2424+ <Card title="Card title" icon="moon">
2525+ The content of the card.
2626+ </Card>
2727+</CardGrid>
2828+2929+## Staggered card grid
3030+3131+[Staggered](https://starlight.astro.build/components/card-grids/#stagger-cards) cards rendered with the [`<Card>` component](https://starlight.astro.build/components/cards/) wrapped with the [`<CardGrid>` component](https://starlight.astro.build/components/card-grids/).
3232+3333+<CardGrid stagger>
3434+ <Card title="Card title" icon="star">
3535+ The content of the card.
3636+ </Card>
3737+ <Card title="Card title" icon="moon">
3838+ The content of the card.
3939+ </Card>
4040+</CardGrid>
4141+4242+## Link card
4343+4444+A link card rendered with the [`<LinkCard>` component](https://starlight.astro.build/components/link-cards/).
4545+4646+<LinkCard
4747+ title="Link title"
4848+ description="The description of the link."
4949+ href="#_"
5050+/>
5151+5252+## Link card grid
5353+5454+Link cards rendered with the [`<LinkCard>` component](https://starlight.astro.build/components/link-cards/) wrapped with the [`<CardGrid>` component](https://starlight.astro.build/components/card-grids/).
5555+5656+<CardGrid>
5757+ <LinkCard title="Link title" href="#_" />
5858+ <LinkCard title="Link title" href="#_" />
5959+</CardGrid>
+83
docs/src/content/docs/examples/code-blocks.mdx
···11+---
22+title: Code Blocks
33+pagefind: false
44+---
55+66+## Markdown code block
77+88+Code block rendered with the [Markdown syntax](https://starlight.astro.build/guides/authoring-content/#code-blocks) using three backticks <code>```</code> at the start and end.
99+1010+```js
1111+const foo = 'bar'
1212+```
1313+1414+## `<Code>` component
1515+1616+Code block rendered with the [`<Code>` component](https://starlight.astro.build/components/code/).
1717+1818+import { Code } from '@astrojs/starlight/components'
1919+2020+<Code code="const foo = 'bar'" lang="js" />
2121+2222+## Text markers
2323+2424+Code blocks with some [text markers](https://expressive-code.com/key-features/text-markers/).
2525+2626+```js {2}
2727+function test() {
2828+ const foo = 'bar'
2929+}
3030+```
3131+3232+```js "function" ins="foo" del="bar"
3333+function test() {
3434+ const foo = 'bar'
3535+}
3636+```
3737+3838+### Labels
3939+4040+Code blocks with some [text markers](https://expressive-code.com/key-features/text-markers/) and [labels](https://expressive-code.com/key-features/text-markers/#adding-labels-to-line-markers).
4141+4242+```astro title="example.astro" {"1. Keep the existing icon.":5-6} del={"2. Remove the button.":8-9} ins={"3. Add a link.":11-12}
4343+---
4444+import { Icon } from '@astrojs/starlight/components';
4545+---
4646+4747+4848+<Icon name="seti:lock" />
4949+5050+5151+<button type="button">Login</button>
5252+5353+5454+<a href="/login/">Login</a>
5555+```
5656+5757+## Diff
5858+5959+Code block combining [syntax highlighting with `diff`-like syntax](https://expressive-code.com/key-features/text-markers/#combining-syntax-highlighting-with-diff-like-syntax).
6060+6161+```diff lang="js"
6262+ function test() {
6363+- const foo = 'bar'
6464++ const foo = 'baz'
6565+ }
6666+```
6767+6868+## Editor frame
6969+7070+Code block with a [file name](https://expressive-code.com/key-features/frames/#code-editor-frames) in the editor frame.
7171+7272+```js
7373+// test.js
7474+const foo = 'bar'
7575+```
7676+7777+## Terminal frame
7878+7979+Code block with a [terminal frame](https://expressive-code.com/key-features/frames/#terminal-frames).
8080+8181+```bash title="Build something…"
8282+pnpm run build
8383+```
+7
docs/src/content/docs/examples/draft.md
···11+---
22+title: Draft
33+pagefind: false
44+draft: true
55+---
66+77+A [draft](https://starlight.astro.build/reference/frontmatter/#draft) page not included in production builds.
+21
docs/src/content/docs/examples/file-tree.mdx
···11+---
22+title: File Tree
33+pagefind: false
44+---
55+66+A structure of a directory rendered with the [`<FileTree>` component](https://starlight.astro.build/components/file-tree/).
77+88+import { FileTree } from '@astrojs/starlight/components'
99+1010+<FileTree>
1111+1212+- astro.config.mjs an **important** file
1313+- package.json
1414+- README.md
1515+- src
1616+ - components
1717+ - **Header.astro**
1818+ - …
1919+- pages/
2020+2121+</FileTree>
+25
docs/src/content/docs/examples/hero.md
···11+---
22+title: Hero
33+pagefind: false
44+template: splash
55+hero:
66+ title: Hero title
77+ tagline: A tagline for the hero section.
88+ image:
99+ file: ../../../assets/icon.png
1010+ actions:
1111+ - text: Primary action
1212+ link: '#_'
1313+ icon: right-arrow
1414+ variant: primary
1515+ - text: Secondary action
1616+ link: '#_'
1717+ icon: right-arrow
1818+ variant: secondary
1919+ - text: Minimal action
2020+ link: '#_'
2121+ icon: external
2222+ variant: minimal
2323+---
2424+2525+A page using the [`splash` template](https://starlight.astro.build/reference/frontmatter/#template) with a [`hero`](https://starlight.astro.build/reference/frontmatter/#banner) component at the top.
+225
docs/src/content/docs/examples/kitchen-sink.mdx
···11+---
22+title: Kitchen sink
33+pagefind: false
44+sidebar:
55+ order: 1
66+ badge: Demo
77+---
88+99+A page with a wide variety of different [Markdown syntax](https://starlight.astro.build/guides/authoring-content/) or [components](https://starlight.astro.build/components/using-components/) to show how these look together.
1010+See the following pages for individual examples.
1111+1212+## Asides
1313+1414+:::note
1515+A `:::note` or `<Aside type="note">` aside with a [link](#_) in the content.
1616+:::
1717+1818+:::tip
1919+A `:::tip` or `<Aside type="tip">` aside with a [link](#_) in the content.
2020+:::
2121+2222+:::caution
2323+A `:::caution` or `<Aside type="caution">` aside with a [link](#_) in the content.
2424+:::
2525+2626+:::danger
2727+A `:::danger` or `<Aside type="danger">` aside with a [link](#_) in the content.
2828+:::
2929+3030+## Badges
3131+3232+import { Badge } from '@astrojs/starlight/components'
3333+3434+- <Badge text="New" variant="tip" size="small" />
3535+- <Badge text="Deprecated" variant="caution" size="medium" />
3636+- <Badge text="Demo" variant="note" size="large" />
3737+- <Badge text="200" variant="success" />
3838+- <Badge text="Experimental" variant="danger" />
3939+4040+## Blockquotes
4141+4242+> The content of the quote can use **any** other Markdown syntax.
4343+4444+## Cards
4545+4646+import { Card } from '@astrojs/starlight/components'
4747+4848+<Card title="Card title">
4949+ The content of the card that can use any other Markdown syntax.
5050+</Card>
5151+5252+### Card grid
5353+5454+import { CardGrid } from '@astrojs/starlight/components'
5555+5656+<CardGrid>
5757+ <Card title="Card title" icon="star">
5858+ The content of the card.
5959+ </Card>
6060+ <Card title="Card title" icon="moon">
6161+ The content of the card.
6262+ </Card>
6363+</CardGrid>
6464+6565+### Link card
6666+6767+import { LinkCard } from '@astrojs/starlight/components'
6868+6969+<LinkCard
7070+ title="Link title"
7171+ description="The description of the link."
7272+ href="#_"
7373+/>
7474+7575+### Link card grid
7676+7777+<CardGrid>
7878+ <LinkCard title="Link title" href="#_" />
7979+ <LinkCard title="Link title" href="#_" />
8080+</CardGrid>
8181+8282+## Details
8383+8484+<details>
8585+<summary>The summary of the disclosure</summary>
8686+8787+The content of the [disclosure](https://starlight.astro.build/guides/authoring-content/#details) that can use any other Markdown syntax.
8888+8989+</details>
9090+9191+## Code Blocks
9292+9393+```astro title="example.astro" {7} ins="insertions" del="deletions"
9494+---
9595+// A code block example
9696+---
9797+9898+<p>A paragraph with a variable: {Astro.props.foo}</p>
9999+100100+With highlighted content.
101101+102102+Including insertions or deletions.
103103+```
104104+105105+### Diff
106106+107107+```diff lang="js"
108108+ function test() {
109109+- const foo = 'bar'
110110++ const foo = 'baz'
111111+ }
112112+```
113113+114114+### Labels
115115+116116+```astro title="example.astro" {"1. Keep the existing icon.":5-6} del={"2. Remove the button.":8-9} ins={"3. Add a link.":11-12}
117117+---
118118+import { Icon } from '@astrojs/starlight/components';
119119+---
120120+121121+122122+<Icon name="seti:lock" />
123123+124124+125125+<button type="button">Login</button>
126126+127127+128128+<a href="/login/">Login</a>
129129+```
130130+131131+### Terminal frame
132132+133133+```bash title="Build something…"
134134+pnpm run build
135135+```
136136+137137+## File Tree
138138+139139+import { FileTree } from '@astrojs/starlight/components'
140140+141141+<FileTree>
142142+143143+- astro.config.mjs an **important** file
144144+- package.json
145145+- README.md
146146+- src
147147+ - components
148148+ - **Header.astro**
149149+ - …
150150+- pages/
151151+152152+</FileTree>
153153+154154+## Link Buttons
155155+156156+import { LinkButton } from '@astrojs/starlight/components'
157157+158158+<LinkButton href="#_" icon="rocket">
159159+ Primary
160160+</LinkButton>
161161+<LinkButton href="#_" variant="secondary" icon="external">
162162+ Secondary
163163+</LinkButton>
164164+<LinkButton href="#_" variant="minimal" icon="external">
165165+ Minimal
166166+</LinkButton>
167167+168168+## Steps
169169+170170+import { Steps } from '@astrojs/starlight/components'
171171+172172+<Steps>
173173+174174+1. The first step of the guide that can use **any** other Markdown syntax.
175175+176176+ ```js
177177+ const foo = 'bar'
178178+ ```
179179+180180+2. A second and final step.
181181+182182+</Steps>
183183+184184+## Tabs
185185+186186+import { Tabs, TabItem } from '@astrojs/starlight/components'
187187+188188+<Tabs>
189189+190190+<TabItem label="npm" icon="seti:npm">
191191+192192+```sh
193193+npm install starlight-rose-pine
194194+```
195195+196196+</TabItem>
197197+198198+<TabItem label="pnpm" icon="pnpm">
199199+200200+```sh
201201+pnpm add starlight-rose-pine
202202+```
203203+204204+</TabItem>
205205+206206+<TabItem label="Yarn" icon="seti:yarn">
207207+208208+```sh
209209+yarn add starlight-rose-pine
210210+```
211211+212212+</TabItem>
213213+214214+</Tabs>
215215+216216+## Tables
217217+218218+| Column 1 | Column 2 | Column 3 | Column 4 |
219219+| -------- | -------- | -------- | -------- |
220220+| Cell 1-1 | Cell 1-2 | Cell 1-3 | Cell 1-4 |
221221+| Cell 2-1 | Cell 2-2 | Cell 2-3 | Cell 2-4 |
222222+| Cell 3-1 | Cell 3-2 | Cell 3-3 | Cell 3-4 |
223223+| Cell 4-1 | Cell 4-2 | Cell 4-3 | Cell 4-4 |
224224+| Cell 5-1 | Cell 5-2 | Cell 5-3 | Cell 5-4 |
225225+| Cell 6-1 | Cell 6-2 | Cell 6-3 | Cell 6-4 |
+32
docs/src/content/docs/examples/link-buttons.mdx
···11+---
22+title: Link Buttons
33+pagefind: false
44+---
55+66+import { LinkButton } from '@astrojs/starlight/components'
77+88+## No icons
99+1010+Link buttons rendered with the [`<LinkButton>` component](https://starlight.astro.build/components/link-buttons/).
1111+1212+<LinkButton href="#_">Primary</LinkButton>
1313+<LinkButton href="#_" variant="secondary">
1414+ Secondary
1515+</LinkButton>
1616+<LinkButton href="#_" variant="minimal">
1717+ Minimal
1818+</LinkButton>
1919+2020+## With icons
2121+2222+Link buttons rendered with the [`<LinkButton>` component](https://starlight.astro.build/components/link-buttons/) and [an icon](https://starlight.astro.build/components/link-buttons/#add-icons-to-link-buttons).
2323+2424+<LinkButton href="#_" icon="rocket">
2525+ Primary
2626+</LinkButton>
2727+<LinkButton href="#_" variant="secondary" icon="external">
2828+ Secondary
2929+</LinkButton>
3030+<LinkButton href="#_" variant="minimal" icon="external">
3131+ Minimal
3232+</LinkButton>
+78
docs/src/content/docs/examples/markdown.md
···11+---
22+title: Markdown
33+pagefind: false
44+---
55+66+## Heading 2
77+88+Some text content used as a placeholder for the purpose of this example page. The content is not meant to be meaningful or relevant, but rather to preview how the page will look with actual content.
99+1010+### Heading 3
1111+1212+Some text content used as a placeholder for the purpose of this example page. The content is not meant to be meaningful or relevant, but rather to preview how the page will look with actual content.
1313+1414+#### Heading 4
1515+1616+Some text content used as a placeholder for the purpose of this example page. The content is not meant to be meaningful or relevant, but rather to preview how the page will look with actual content.
1717+1818+##### Heading 5
1919+2020+Some text content used as a placeholder for the purpose of this example page. The content is not meant to be meaningful or relevant, but rather to preview how the page will look with actual content.
2121+2222+###### Heading 6
2323+2424+Some text content used as a placeholder for the purpose of this example page. The content is not meant to be meaningful or relevant, but rather to preview how the page will look with actual content.
2525+2626+## Styling text
2727+2828+Some text content with some **bold** text, _italic_ text, ~~strikethrough~~ text, and some **_bold italic_** text. Some text can also be displayed as <sub>subscript</sub> or <sup>superscript</sup>.
2929+3030+## Quoting text
3131+3232+Some text content can be quoted using the `>` character.
3333+3434+> The content of the quote can use **any** other Markdown syntax.
3535+3636+## Code
3737+3838+Code can be displayed `inline` or in a code block.
3939+4040+```js
4141+const foo = 'bar'
4242+```
4343+4444+## Links
4545+4646+Some text content with a [link](#_) to another page.
4747+4848+## Lists
4949+5050+- List items
5151+- can
5252+ - be
5353+ - nested
5454+- and
5555+ 1. be
5656+ 2. numbered
5757+5858+## Tables
5959+6060+| Column 1 | Column 2 | Column 3 | Column 4 |
6161+| -------- | -------- | -------- | -------- |
6262+| Cell 1-1 | Cell 1-2 | Cell 1-3 | Cell 1-4 |
6363+| Cell 2-1 | Cell 2-2 | Cell 2-3 | Cell 2-4 |
6464+| Cell 3-1 | Cell 3-2 | Cell 3-3 | Cell 3-4 |
6565+| Cell 4-1 | Cell 4-2 | Cell 4-3 | Cell 4-4 |
6666+| Cell 5-1 | Cell 5-2 | Cell 5-3 | Cell 5-4 |
6767+| Cell 6-1 | Cell 6-2 | Cell 6-3 | Cell 6-4 |
6868+6969+## Details
7070+7171+Details (also known as “disclosures” or “accordions”) can be used to hide content that is not immediately relevant.
7272+7373+<details>
7474+<summary>The summary of the disclosure</summary>
7575+7676+The content of the [disclosure](https://starlight.astro.build/guides/authoring-content/#details) that can use any other Markdown syntax.
7777+7878+</details>
+32
docs/src/content/docs/examples/steps.mdx
···11+---
22+title: Steps
33+pagefind: false
44+---
55+66+A numbered list of tasks used to create a step-by-step guide rendered with the [`<Steps>` component](https://starlight.astro.build/components/steps/).
77+88+import { Steps } from '@astrojs/starlight/components'
99+1010+<Steps>
1111+1212+1. The first step of the guide that can use **any** other Markdown syntax.
1313+1414+ ```js
1515+ const foo = 'bar'
1616+ ```
1717+1818+2. A second step with a nested list of tasks.
1919+2020+ <Steps>
2121+2222+ 1. A nested step of the guide that can use **any** other Markdown syntax.
2323+2424+ ```js
2525+ const foo = 'bar'
2626+ ```
2727+2828+ 2. And a final step.
2929+3030+ </Steps>
3131+3232+</Steps>
+51
docs/src/content/docs/examples/tabs.mdx
···11+---
22+title: Tabs
33+pagefind: false
44+---
55+66+import { Tabs, TabItem } from '@astrojs/starlight/components'
77+88+## No icons
99+1010+A tabbed interface rendered with the [`<Tabs>` and `<TabItem>` components](https://starlight.astro.build/components/tabs/).
1111+1212+<Tabs>
1313+ <TabItem label="A tab">
1414+ The first tab content that can use **any** other Markdown syntax.
1515+ </TabItem>
1616+ <TabItem label="Another tab">
1717+ The content of the second tab that can also use **any** other Markdown syntax.
1818+ </TabItem>
1919+</Tabs>
2020+2121+## With icons
2222+2323+A tabbed interface rendered with the [`<Tabs>` and `<TabItem>` components](https://starlight.astro.build/components/tabs/) and [icons](https://starlight.astro.build/components/tabs/#add-icons-to-tabs).
2424+2525+<Tabs>
2626+2727+<TabItem label="npm" icon="seti:npm">
2828+2929+```sh
3030+npm install starlight-rose-pine
3131+```
3232+3333+</TabItem>
3434+3535+<TabItem label="pnpm" icon="pnpm">
3636+3737+```sh
3838+pnpm add starlight-rose-pine
3939+```
4040+4141+</TabItem>
4242+4343+<TabItem label="Yarn" icon="seti:yarn">
4444+4545+```sh
4646+yarn add starlight-rose-pine
4747+```
4848+4949+</TabItem>
5050+5151+</Tabs>
+68
docs/src/content/docs/getting-started.mdx
···11+---
22+title: Getting Started
33+---
44+55+A Starlight plugin to theme your site in the [Rose Pine Palette](https://rosepinetheme.com/).
66+77+## Prerequisites
88+99+You will need to have a Starlight website set up.
1010+If you don't have one yet, you can follow the ["Getting Started"](https://starlight.astro.build/getting-started) guide in the Starlight docs to create one.
1111+1212+## Installation
1313+1414+import { Steps, Tabs, TabItem } from '@astrojs/starlight/components'
1515+1616+<Steps>
1717+1818+1. `starlight-rose-pine` is a Starlight [plugin](https://starlight.astro.build/reference/plugins/). Install it by running the following command in your terminal:
1919+2020+ <Tabs syncKey="pkg">
2121+2222+ <TabItem label="npm">
2323+2424+ ```sh
2525+ npm install starlight-rose-pine
2626+ ```
2727+2828+ </TabItem>
2929+3030+ <TabItem label="pnpm">
3131+3232+ ```sh
3333+ pnpm add starlight-rose-pine
3434+ ```
3535+3636+ </TabItem>
3737+3838+ <TabItem label="Yarn">
3939+4040+ ```sh
4141+ yarn add starlight-rose-pine
4242+ ```
4343+4444+ </TabItem>
4545+4646+ </Tabs>
4747+4848+2. Configure the plugin in your Starlight [configuration](https://starlight.astro.build/reference/configuration/#plugins) in the `astro.config.mjs` file.
4949+5050+ ```diff lang="js"
5151+ // astro.config.mjs
5252+ import starlight from '@astrojs/starlight'
5353+ import { defineConfig } from 'astro/config'
5454+ +import starlightRosePine from 'starlight-rose-pine'
5555+5656+ export default defineConfig({
5757+ integrations: [
5858+ starlight({
5959+ + plugins: [starlightRosePine()],
6060+ title: 'My Docs',
6161+ }),
6262+ ],
6363+ })
6464+ ```
6565+6666+3. [Start the development server](https://starlight.astro.build/getting-started/#start-the-development-server) to preview the theme in action.
6767+6868+</Steps>
+41
docs/src/content/docs/index.mdx
···11+---
22+title: Starlight Rose Pine
33+description: Soho vibes for Starlight
44+head:
55+ - tag: title
66+ content: Starlight Rose Pine
77+ - tag: style
88+template: splash
99+editUrl: false
1010+hero:
1111+ tagline: Soho vibes for Starlight
1212+ image:
1313+ file: ../../assets/icon.png
1414+ actions:
1515+ - text: Get Started
1616+ link: /getting-started/
1717+ icon: right-arrow
1818+ - text: Examples
1919+ link: /examples/kitchen-sink/
2020+ icon: right-arrow
2121+ variant: minimal
2222+---
2323+2424+import { Card, CardGrid } from '@astrojs/starlight/components'
2525+2626+## Next steps
2727+2828+<CardGrid stagger>
2929+ <Card title="Install the theme" icon="puzzle">
3030+ Check the [getting started guide](/getting-started/) for installation instructions.
3131+ </Card>
3232+ <Card title="Configure the theme" icon="setting">
3333+ Edit your config in the `astro.config.mjs` file.
3434+ </Card>
3535+ <Card title="Preview the theme" icon="seti:image">
3636+ Check out the [example pages](/examples/kitchen-sink/) to see the theme in action.
3737+ </Card>
3838+ <Card title="Read the docs" icon="open-book">
3939+ Learn more in the [`starlight-rose-pine` documentation](/getting-started/).
4040+ </Card>
4141+</CardGrid>
···11+<p align="center">
22+ <img src="https://github.com/rose-pine/rose-pine-theme/raw/main/assets/icon.png" width="80" />
33+ <h2 align="center">Rosé Pine for Starlight</h2>
44+</p>
55+66+<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>
77+88+## Usage
99+1010+1. Open App
1111+2. Under settings, import `rose-pine.theme`
1212+3. Select `Rosé Pine` from the themes dropdown
1313+1414+## Gallery
1515+1616+### Rosé Pine
1717+1818+<img width="256" alt="Rosé Pine with App" src="https://github.com/user-attachments/assets/3d9df6a3-0ee3-43f2-b934-83cf8f2806c2" />
1919+2020+### Rosé Pine Moon
2121+2222+<img width="256" alt="Rosé Pine Moon with App" src="https://github.com/user-attachments/assets/0acf279b-492c-4d75-acba-9de1d6cc8fcb" />
2323+2424+### Rosé Pine Dawn
2525+2626+<img width="256" alt="Rosé Pine Dawn with App" src="https://github.com/user-attachments/assets/fb1b1d16-55e8-45db-b388-7c25250b8022" />
2727+2828+## Thanks to
2929+3030+- [Felix Schneider](https://github.com/trueberryless)
3131+3232+## Contributing
3333+3434+Modify `template.json` using Rosé Pine variables, then build variants:
3535+3636+```sh
3737+npx @rose-pine/build@latest
3838+```