init website

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

assets/icon.svg

@@ -0,0 +1,7 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="500" height="500" rx="250" fill="#1F1D2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M249.983 307.358C245.184 295.832 235.279 286.579 222.287 283.098L165.941 268C158.794 294.673 174.623 322.09 201.296 329.237L241.543 340.021C244.382 340.782 247.27 339.981 249.298 338.146C251.3 340.672 254.679 341.909 257.99 341.021L298.237 330.237C324.911 323.09 340.74 295.673 333.593 269L277.247 284.098C264.632 287.478 254.928 296.298 249.983 307.358Z" fill="#31748F" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250 333.001C245.368 310.178 225.19 293 201 293L151 293C151 320.614 173.386 343 201 343L249 343H251L299 343C326.614 343 349 320.614 349 293L299 293C274.81 293 254.632 310.178 250 333.001Z" fill="#31748F"/>
+<circle cx="249.5" cy="215.5" r="37.5" fill="#EFEFEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M246.918 156C256.118 161.312 262.991 169.106 267.181 178.048C279.154 168.575 295.298 164.686 311.178 168.941L298.237 217.237C293.474 235.013 279.709 247.973 263.16 252.525L263.178 252.593C258.805 253.765 254.411 254.319 250.09 254.309C245.768 254.319 241.374 253.765 237 252.593L237.018 252.525C220.47 247.973 206.704 235.013 201.941 217.237L189 168.941C205.262 164.584 221.801 168.766 233.853 178.74C234.217 178.036 234.599 177.336 235 176.642L246.918 156Z" fill="#EBBCBA"/>
+</svg>

docs/.vitepress/config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  title: "Rosé Pine",
+  description:
+    "All natural pine, faux fur and a bit of soho vibes for the classy minimalist",
+  themeConfig: {
+    nav: [
+      { text: "Themes", link: "/themes" },
+      { text: "Palette", link: "/palette" },
+      { text: "Contributing", link: "/contributing" },
+      { text: "GitHub", link: "https://github.com/rose-pine/rose-pine-theme" },
+    ],
+  },
+};

docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from "vitepress/theme";
+import "./styles.css";
+
+export default DefaultTheme;

docs/.vitepress/theme/prism-rose-pine-dark.css

@@ -0,0 +1,201 @@
+/**
+ * MIT License
+ * Rosé Pine Theme
+ * https://github.com/rose-pine
+ * Ported for PrismJS by fvrests [@fvrests]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #e0def4;
+  background: #191724;
+  font-family: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, "Liberation Mono", "Courier New", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+  @media print {
+    text-shadow: none;
+  }
+}
+
+/* Selection */
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+  background: #2a2837;
+}
+
+code[class*="language-"]::selection,
+pre[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"] ::selection {
+  background: #2a2837;
+}
+
+/* Code (block & inline) */
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  color: #e0def4;
+  background: #191724;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+  color: #e0def4;
+  background: #191724;
+}
+
+/* Text style & opacity */
+.token.entity {
+  cursor: help;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic,
+.token.selector,
+.token.doctype,
+.token.attr-name,
+.token.inserted,
+.token.deleted,
+.token.comment,
+.token.prolog,
+.token.cdata,
+.token.constant,
+.token.parameter,
+.token.url {
+  font-style: italic;
+}
+
+.token.url {
+  text-decoration: underline;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+/* Syntax highlighting */
+.token.constant {
+  color: #e0def4;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata,
+.token.punctuation {
+  color: #555169;
+}
+
+.token.delimiter,
+.token.important,
+.token.atrule,
+.token.operator,
+.token.keyword {
+  color: #31748f;
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.variable,
+.token.regex,
+.token.class-name,
+.token.selector,
+.token.inserted {
+  color: #9ccfd8;
+}
+
+.token.boolean,
+.token.entity,
+.token.number,
+.token.symbol,
+.token.function {
+  color: #ebbcba;
+}
+
+.token.string,
+.token.char,
+.token.property,
+.token.attr-value,
+.token.attr-value .punctuation {
+  color: #f6c177;
+}
+
+.token.parameter,
+.token.url,
+.token.name,
+.token.attr-name,
+.token.builtin {
+  color: #c4a7e7;
+}
+
+.token.deleted {
+  color: #eb6f92;
+}
+
+/* Insertions & deletions */
+.token.inserted {
+  background: rgba(156 207 216 0.12);
+}
+
+.token.deleted {
+  background: rgba(235 111 146 0.12);
+}
+
+/* Line highlighting */
+pre[data-line] {
+  position: relative;
+}
+
+pre[class*="language-"] > code[class*="language-"] {
+  position: relative;
+  z-index: 1;
+}
+
+.line-highlight,
+.highlight-lines .highlighted {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+
+  background: #2a2837;
+  box-shadow: inset 5px 0 0 #e0def4;
+
+  z-index: 0;
+
+  pointer-events: none;
+
+  line-height: inherit;
+  white-space: pre;
+}

docs/.vitepress/theme/prism-rose-pine-dawn.css

@@ -0,0 +1,201 @@
+/**
+ * MIT License
+ * Rosé Pine Theme
+ * https://github.com/rose-pine
+ * Ported for PrismJS by fvrests [@fvrests]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #575279;
+  background: #faf4ed;
+  font-family: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, "Liberation Mono", "Courier New", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+
+  @media print {
+    text-shadow: none;
+  }
+}
+
+/* Selection */
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+  background: #eee9e6;
+}
+
+code[class*="language-"]::selection,
+pre[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"] ::selection {
+  background: #eee9e6;
+}
+
+/* Code (block & inline) */
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  color: #575279;
+  background: #faf4ed;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+  color: #575279;
+  background: #faf4ed;
+}
+
+/* Text style & opacity */
+.token.entity {
+  cursor: help;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic,
+.token.selector,
+.token.doctype,
+.token.attr-name,
+.token.inserted,
+.token.deleted,
+.token.comment,
+.token.prolog,
+.token.cdata,
+.token.constant,
+.token.parameter,
+.token.url {
+  font-style: italic;
+}
+
+.token.url {
+  text-decoration: underline;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+/* Syntax highlighting */
+.token.constant {
+  color: #575279;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata,
+.token.punctuation {
+  color: #9893a5;
+}
+
+.token.delimiter,
+.token.important,
+.token.atrule,
+.token.operator,
+.token.keyword {
+  color: #286983;
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.variable,
+.token.regex,
+.token.class-name,
+.token.selector,
+.token.inserted {
+  color: #56949f;
+}
+
+.token.boolean,
+.token.entity,
+.token.number,
+.token.symbol,
+.token.function {
+  color: #d7827e;
+}
+
+.token.string,
+.token.char,
+.token.property,
+.token.attr-value,
+.token.attr-value .punctuation {
+  color: #ea9d34;
+}
+
+.token.parameter,
+.token.url,
+.token.name,
+.token.attr-name,
+.token.builtin {
+  color: #907aa9;
+}
+
+.token.deleted {
+  color: #b4637a;
+}
+
+/* Insertions & deletions */
+.token.inserted {
+  background: rgba(86 148 159 0.12);
+}
+
+.token.deleted {
+  background: rgba(180 99 122 0.12);
+}
+
+/* Line highlighting */
+pre[data-line] {
+  position: relative;
+}
+
+pre[class*="language-"] > code[class*="language-"] {
+  position: relative;
+  z-index: 1;
+}
+
+.line-highlight,
+.highlight-lines .highlighted {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding: inherit 0;
+  margin-top: 1em;
+
+  background: #eee9e6;
+  box-shadow: inset 5px 0 0 #575279;
+
+  z-index: 0;
+
+  pointer-events: none;
+
+  line-height: inherit;
+  white-space: pre;
+}

docs/.vitepress/theme/styles.css

@@ -0,0 +1,120 @@
+@import url("https://rsms.me/inter/inter.css");
+@import url("./prism-rose-pine-dawn.css") screen;
+@import url("./prism-rose-pine-dark.css") screen and
+  (prefers-color-scheme: dark);
+
+@font-face {
+  font-family: "Pier Sans";
+  font-style: normal;
+  font-weight: bold;
+  src: url("/fonts/PierSans-Bold.otf") format("opentype");
+}
+
+:root {
+  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  --c-white: #faf4ed;
+  --c-white-dark: #f2e9de;
+  --c-black: #575279;
+
+  --c-divider-light: rgba(110, 106, 134, 0.08);
+  --c-divider-dark: rgba(110, 106, 134, 0.15);
+
+  --c-text-light-1: #575279;
+  --c-text-light-2: #6e6a86;
+  --c-text-light-3: #9893a5;
+
+  --c-brand: #d7827e;
+  --c-brand-light: rgba(215, 130, 126, 0.95);
+
+  --code-inline-bg-color: rgba(27, 31, 35, 0.05);
+  --code-bg-color: #fffaf3;
+
+  --highlight: var(--c-divider-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --c-white: #191724;
+    --c-white-dark: #26233a;
+    --c-black: #e0def4;
+
+    --c-divider-light: rgba(110, 106, 134, 0.2);
+    --c-divider-dark: rgba(110, 106, 134, 0.4);
+
+    --c-text-light-1: #e0def4;
+    --c-text-light-2: #6e6a86;
+    --c-text-light-3: #555169;
+
+    --c-brand: #ebbcba;
+    --c-brand-light: rgba(235, 188, 186, 0.95);
+
+    --code-inline-bg-color: rgba(27, 31, 35, 0.05);
+    --code-bg-color: #1f1d2e;
+
+    --highlight: var(--c-divider-light);
+  }
+}
+
+::selection {
+  background-color: var(--highlight);
+}
+
+html {
+  font-size: 16px;
+}
+
+table > thead {
+  background: var(--code-bg-color);
+}
+
+tr {
+  border-top: 1px solid var(--c-divider-light);
+}
+
+tr:nth-child(2n) {
+  background-color: var(--code-bg-color);
+}
+
+th,
+td {
+  border-color: var(--c-divider-light);
+}
+
+blockquote {
+  background: var(--c-white-dark);
+  border-color: var(--c-brand-light);
+  color: var(--c-text-light-1);
+}
+
+pre > code {
+  background: transparent;
+}
+
+code {
+  color: var(--c-text-light-1);
+  background: var(--highlight);
+}
+
+[class*="language-"] code {
+  color: var(--c-text-light-1);
+}
+
+.custom-block.tip {
+  background-color: var(--c-white-dark);
+}
+
+.nav-bar .nav-bar-title {
+  font-family: "Pier Sans", var(--font-family-base);
+  font-weight: bold;
+}
+
+.home-hero img.image {
+  max-height: 128px;
+}
+
+.home-hero .title {
+  font-family: "Pier Sans", var(--font-family-base);
+  font-weight: bold;
+}

docs/components/color-table.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { hexToRgba, hexToHsla } from "colors-convert";
+
+// TODO: This is taken directly from @rose-pine/palette
+// esm packages are not supported in vitepress
+const colorsByVariant = {
+  dark: {
+    base: "#191724",
+    surface: "#1f1d2e",
+    overlay: "#26233a",
+    inactive: "#555169",
+    subtle: "#6e6a86",
+    text: "#e0def4",
+    love: "#eb6f92",
+    gold: "#f6c177",
+    rose: "#ebbcba",
+    pine: "#31748f",
+    foam: "#9ccfd8",
+    iris: "#c4a7e7",
+    highlight: "#2a2837",
+    highlightInactive: "#211f2d",
+    highlightOverlay: "#3a384a",
+  },
+
+  moon: {
+    base: "#232136",
+    surface: "#2a273f",
+    overlay: "#393552",
+    inactive: "#59546d",
+    subtle: "#817c9c",
+    text: "#e0def4",
+    love: "#eb6f92",
+    gold: "#f6c177",
+    rose: "#ea9a97",
+    pine: "#3e8fb0",
+    foam: "#9ccfd8",
+    iris: "#c4a7e7",
+    highlight: "#312f44",
+    highlightInactive: "#2a283d",
+    highlightOverlay: "#3f3c53",
+  },
+
+  dawn: {
+    base: "#faf4ed",
+    surface: "#fffaf3",
+    overlay: "#f2e9de",
+    inactive: "#9893a5",
+    subtle: "#6e6a86",
+    text: "#575279",
+    love: "#b4637a",
+    gold: "#ea9d34",
+    rose: "#d7827e",
+    pine: "#286983",
+    foam: "#56949f",
+    iris: "#907aa9",
+    highlight: "#eee9e6",
+    highlightInactive: "#f2ede9",
+    highlightOverlay: "#e4dfde",
+  },
+};
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "dark",
+  },
+});
+
+const colors = [];
+
+Object.keys(colorsByVariant[props.variant]).map((role) => {
+  const hex = colorsByVariant[props.variant][role];
+
+  let rgba = hexToRgba(hex);
+  rgba = `${rgba.r} ${rgba.g} ${rgba.b}`;
+
+  let hsla = hexToHsla(hex);
+  hsla = `${hsla.h} ${hsla.s} ${hsla.l}`;
+
+  colors.push({ role, hex, rgba, hsla });
+});
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th colspan="2">Role</th>
+        <th>Hex</th>
+        <th>RGB</th>
+        <th>HSL</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="color in colors" :key="color.hex">
+        <td style="background: var(--c-white)">
+          <div class="dot" :style="{ background: color.hex }"></div>
+        </td>
+        <td>{{ color.role }}</td>
+        <td>
+          <code>{{ color.hex }}</code>
+        </td>
+        <td>
+          <code>{{ color.rgba }}</code>
+        </td>
+        <td>
+          <code>{{ color.hsla }}</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+}
+</style>

docs/components/terminal-table.vue

@@ -0,0 +1,151 @@
+<script setup>
+// TODO: This is taken directly from @rose-pine/palette
+// esm packages are not supported in vitepress
+const colorsByRole = {
+  base: {
+    dark: "#191724",
+    moon: "#232136",
+    dawn: "#faf4ed",
+  },
+  surface: {
+    dark: "#1f1d2e",
+    moon: "#2a273f",
+    dawn: "#fffaf3",
+  },
+  overlay: {
+    dark: "#26233a",
+    moon: "#393552",
+    dawn: "#f2e9de",
+  },
+  inactive: {
+    dark: "#555169",
+    moon: "#59546d",
+    dawn: "#9893a5",
+  },
+  subtle: {
+    dark: "#6e6a86",
+    moon: "#87c9c",
+    dawn: "#6e6a86",
+  },
+  text: {
+    dark: "#e0def4",
+    moon: "#e0def4",
+    dawn: "#575279",
+  },
+  love: {
+    dark: "#eb6f92",
+    moon: "#eb6f92",
+    dawn: "#b4637a",
+  },
+  gold: {
+    dark: "#f6c177",
+    moon: "#f6c177",
+    dawn: "#ea9d34",
+  },
+  rose: {
+    dark: "#ebbcba",
+    moon: "#ea9a97",
+    dawn: "#d7827e",
+  },
+  pine: {
+    dark: "#31748f",
+    moon: "#3e8fb0",
+    dawn: "#286983",
+  },
+  foam: {
+    dark: "#9ccfd8",
+    moon: "#9ccfd8",
+    dawn: "#56949f",
+  },
+  iris: {
+    dark: "#c4a7e7",
+    moon: "#c4a7e7",
+    dawn: "#907aa9",
+  },
+  highlight: {
+    dark: "#2a2837",
+    moon: "#312f44",
+    dawn: "#eee9e6",
+  },
+  highlightInactive: {
+    dark: "#211f2d",
+    moon: "#2a283d",
+    dawn: "#f2ede9",
+  },
+  highlightOverlay: {
+    dark: "#3a384a",
+    moon: "#3f3c53",
+    dawn: "#e4dfde",
+  },
+};
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "colors",
+  },
+});
+
+const colors = [
+  { usage: "black", role: "overlay" },
+  { usage: "bright black", role: "subtle" },
+  { usage: "red, bright red", role: "love" },
+  { usage: "green, bright green", role: "pine" },
+  { usage: "yellow, bright yellow", role: "gold" },
+  { usage: "blue, bright blue", role: "foam" },
+  { usage: "magenta, bright magenta", role: "iris" },
+  { usage: "cyan, bright cyan", role: "rose" },
+  { usage: "white, bright white", role: "text" },
+];
+
+const ui = [
+  { usage: "foreground", role: "text" },
+  { usage: "background", role: "base" },
+  { usage: "selection foreground", role: "text" },
+  { usage: "selection background", role: "highlight" },
+  { usage: "links", role: "iris" },
+  { usage: "cursor", role: "inactive" },
+  { usage: "cursor text", role: "text" },
+  { usage: "active tab foreground", role: "text" },
+  { usage: "active tab background", role: "overlay" },
+  { usage: "inactive tab foreground", role: "subtle" },
+  { usage: "inactive tab background", role: "base" },
+];
+
+let items = [];
+
+if (props.type == "colors") {
+  items = colors;
+} else {
+  items = ui;
+}
+</script>
+
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>Usage</th>
+        <th>Role</th>
+        <th>Dark</th>
+        <th>Moon</th>
+        <th>Dawn</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="item in items" :key="item.usage">
+        <td>{{ item.usage }}</td>
+        <td>{{ item.role }}</td>
+        <td>
+          <code>{{ colorsByRole[item.role].dark }}</code>
+        </td>
+        <td>
+          <code>{{ colorsByRole[item.role].moon }}</code>
+        </td>
+        <td>
+          <code>{{ colorsByRole[item.role].dawn }}</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

docs/contributing.md

@@ -0,0 +1,26 @@
+---
+sidebar: false
+---
+
+# Contributing
+
+The community is encouraged to port Rosé Pine to their favourite apps 🌸
+
+There's a plethora of surfaces out there waiting to be dipped in a lil Rosé Pine. See our [template](https://github.com/rose-pine/rose-pine-template) for more information and drop us a PR when ready. We can't wait to see what you create 🥰
+
+Just here to show us some love? We 💛 social appreciation, whether it be GitHub stars, [Twitter](https://twitter.com/rosepinetheme) follows, or shouting to your coworkers across the office.
+
+## Style guide
+
+- Lowercase meta files, eg. `readme.md`
+- Repo name should be the simplest version of the app name, eg. iterm instead of iTerm2
+- Format repo description as "Soho vibes for App"
+- Generate and upload social image via our [social image generator](https://rose-pine-images.vercel.app)
+
+## Resources
+
+- [New theme template](https://github.com/rose-pine/rose-pine-template)
+
+- [Social image generator](https://rose-pine-images.vercel.app)
+
+- [Brand assets](https://github.com/rose-pine/rose-pine-theme/tree/main/assets)

docs/index.md

@@ -0,0 +1,19 @@
+---
+home: true
+heroImage: /assets/logo.png
+heroAlt: Rosé Pine
+heroText: Rosé Pine
+tagline: All natural pine, faux fur and a bit of soho vibes for the classy minimalist
+actionText: Explore
+actionLink: /themes
+altActionText: Create
+altActionLink: /contributing
+features:
+  - title: Subtle Aesthetics
+    details: Give your eyes a well-deserved break with our soft, comfy palette.
+  - title: Day, Night, and In-Between
+    details: Enjoy variants tailored for every hour of your day.
+  - title: Community Driven
+    details: With 40 ports and counting, Rosé Pine is on its way to all your favorite platforms.
+footer: MIT Licensed | Copyright © 2020-present Rosé Pine & Contributors
+---

docs/palette.md

@@ -0,0 +1,43 @@
+<script setup>
+import ColorTable from './components/color-table.vue'
+import TerminalTable from './components/terminal-table.vue'
+</script>
+
+# Palette
+
+## Variants
+
+### Rosé Pine
+
+<ColorTable variant='dark' />
+
+### Rosé Pine Moon
+
+<ColorTable variant='moon' />
+
+### Rosé Pine Dawn
+
+<ColorTable variant='dawn' />
+
+## Terminals
+
+::: tip Examples
+
+- [Kitty](https://github.com/rose-pine/kitty)
+- [Hyper](https://github.com/rose-pine/hyper)
+
+:::
+
+### Colors
+
+<TerminalTable type="colors" />
+
+### Interface
+
+<TerminalTable type="ui" />
+
+## Utilities
+
+### [@rose-pine/palette](https://github.com/rose-pine/palette)
+
+> Color palette tool

docs/themes.md

@@ -0,0 +1,78 @@
+---
+sidebar: false
+---
+
+# Themes
+
+## Featured
+
+- [VSCode](https://github.com/rose-pine/vscode)
+- [Hyper](https://github.com/rose-pine/hyper)
+- [GTK 3](https://github.com/rose-pine/gtk)
+- [Wallpapers](https://github.com/rose-pine/wallpapers)
+
+## Development
+
+- [Atom](https://github.com/rose-pine/atom)
+- [Emacs](https://github.com/thongpv87/rose-pine-emacs) by caelie
+- [Neovim](https://github.com/rose-pine/neovim)
+- [Sublime Text](https://github.com/rose-pine/sublime-text)
+- [Vim](https://github.com/iandwelker/rose-pine-vim) by [iandwelker](https://github.com/iandwelker)
+- [VSCode](https://github.com/rose-pine/vscode)
+- [Xcode](https://github.com/ldakhoa/rose-pine-xcode) by [ldakhoa](https://github.com/ldakhoa)
+
+## Terminal
+
+::: tip
+
+We use [NerdFetch](https://github.com/thatonecalculator/nerdfetch) for some of our lovely previews
+
+:::
+
+- [Alacritty](https://github.com/rose-pine/alacritty)
+- [Fluent Terminal](https://github.com/rose-pine/fluent-terminal)
+- [Gnome Terminal](https://github.com/rose-pine/gnome-terminal)
+- [Hyper](https://github.com/rose-pine/hyper)
+- [iTerm](https://github.com/rose-pine/iterm)
+- [Kitty](https://github.com/rose-pine/kitty)
+- [Konsole](https://github.com/rose-pine/konsole)
+- [MinTTY](https://github.com/rose-pine/mintty)
+- [st](https://github.com/rose-pine/st)
+- [Terminal.app](https://github.com/rose-pine/terminal.app)
+- [Terminator](https://github.com/rose-pine/terminator)
+- [Termite](https://github.com/rose-pine/termite)
+- [Windows Terminal](https://github.com/rose-pine/windows-terminal)
+- [XFCE Terminal](https://github.com/rose-pine/xfce-terminal)
+
+## Productivity
+
+- [Desmos Destkop](https://github.com/rose-pine/desmos-desktop)
+- [Matplotlib](https://github.com/h4pZ/rose-pine-matplotlib) by [h4pZ](https://github.com/h4pz)
+- [Typora](https://github.com/rose-pine/typora)
+- [Zathura](https://github.com/edunfelt/zathura) by [edunfelt](https://github.com/edunfelt)
+
+## Web
+
+- [Amfora](https://github.com/rose-pine/amfora)
+- [Bear ʕ•ᴥ•ʔ](https://github.com/rose-pine/bear-blog)
+- [Dark Reader](https://github.com/rose-pine/dark-reader)
+- [Firefox](https://github.com/rose-pine/firefox)
+- [Mastodon](https://github.com/rose-pine/mastodon)
+- [Monkeytype](https://github.com/rose-pine/monkeytype)
+- [Prism](https://github.com/rose-pine/prism)
+- [Startpage](https://github.com/rose-pine/startpage)
+
+## System
+
+- [bspwm](https://github.com/rose-pine/bspwm)
+- [GRUB 2](https://github.com/rose-pine/grub)
+- [GTK 3](https://github.com/rose-pine/gtk)
+- [Linux TTY](https://github.com/rose-pine/linux-tty)
+
+## Extras
+
+- [Base16](https://github.com/edunfelt/base16-rose-pine-scheme) by [edunfelt](https://github.com/edunfelt)
+- [BetterDiscord](https://github.com/rose-pine/betterdiscord)
+- [Discord RPC Maker](https://github.com/rose-pine/discordrpcmaker)
+- [Razer-CLI](https://github.com/rose-pine/razer-cli)
+- [Wallpapers](https://github.com/rose-pine/wallpapers)

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "rose-pine-site",
+  "version": "0.0.0",
+  "license": "MIT",
+  "repo": "https://github.com/rose-pine/rose-pine-site",
+  "scripts": {
+    "dev": "vitepress dev docs",
+    "build": "vitepress build docs",
+    "serve": "vitepress serve docs"
+  },
+  "devDependencies": {
+    "colors-convert": "^1.4.1",
+    "vitepress": "^0.15.6"
+  }
+}