mirror of
https://github.com/rose-pine/rose-pine-theme
synced 2024-11-10 06:24:13 +00:00
parent
bce5310102
commit
1beefb4d76
18 changed files with 5 additions and 2463 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1,2 +0,0 @@
|
|||
node_modules
|
||||
dist
|
BIN
assets/alt.png
BIN
assets/alt.png
Binary file not shown.
Before Width: | Height: | Size: 817 B |
|
@ -1,14 +0,0 @@
|
|||
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: "Twitter", link: "https://twitter.com/rosepinetheme" },
|
||||
{ text: "GitHub", link: "https://github.com/rose-pine/rose-pine-theme" },
|
||||
],
|
||||
},
|
||||
};
|
|
@ -1,4 +0,0 @@
|
|||
import DefaultTheme from "vitepress/theme";
|
||||
import "./styles.css";
|
||||
|
||||
export default DefaultTheme;
|
|
@ -1,201 +0,0 @@
|
|||
/**
|
||||
* 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;
|
||||
}
|
|
@ -1,201 +0,0 @@
|
|||
/**
|
||||
* 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;
|
||||
}
|
|
@ -1,120 +0,0 @@
|
|||
@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;
|
||||
}
|
|
@ -1,120 +0,0 @@
|
|||
<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>
|
|
@ -1,151 +0,0 @@
|
|||
<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: "#817c9c",
|
||||
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>
|
|
@ -1,52 +0,0 @@
|
|||
---
|
||||
head:
|
||||
- - link
|
||||
- rel: shortcut icon
|
||||
type: image/png
|
||||
href: /assets/logo.png
|
||||
- - meta
|
||||
- name: theme-color
|
||||
content: "#c4a7e7"
|
||||
- - meta
|
||||
- name: description
|
||||
content: All natural pine, faux fur and a bit of soho vibes for the classy minimalist
|
||||
- - meta
|
||||
- property: og:image
|
||||
content: https://rose-pine-images.vercel.app/.png?theme=default
|
||||
- - meta
|
||||
- property: twitter:image
|
||||
content: /assets/logo.png
|
||||
- - meta
|
||||
- name: twitter:card
|
||||
content: summary_large_image
|
||||
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)
|
||||
|
||||
## Contributors
|
||||
|
||||
Below is a list of our lovely contributors who have poured time into giving some of your favorite apps some nice soho vibes~
|
||||
|
||||
- [ThatOneCalculator](https://t1c.dev)
|
||||
|
||||
## 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)
|
|
@ -1,39 +0,0 @@
|
|||
---
|
||||
head:
|
||||
- - link
|
||||
- rel: shortcut icon
|
||||
type: image/png
|
||||
href: /assets/logo.png
|
||||
- - meta
|
||||
- name: theme-color
|
||||
content: "#c4a7e7"
|
||||
- - meta
|
||||
- name: description
|
||||
content: All natural pine, faux fur and a bit of soho vibes for the classy minimalist
|
||||
- - meta
|
||||
- property: og:image
|
||||
content: https://rose-pine-images.vercel.app/.png?theme=default
|
||||
- - meta
|
||||
- property: twitter:image
|
||||
content: /assets/logo.png
|
||||
- - meta
|
||||
- name: twitter:card
|
||||
content: summary_large_image
|
||||
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-2021 Rosé Pine & Contributors
|
||||
---
|
|
@ -1,66 +0,0 @@
|
|||
---
|
||||
head:
|
||||
- - link
|
||||
- rel: shortcut icon
|
||||
type: image/png
|
||||
href: /assets/logo.png
|
||||
- - meta
|
||||
- name: theme-color
|
||||
content: "#c4a7e7"
|
||||
- - meta
|
||||
- name: description
|
||||
content: All natural pine, faux fur and a bit of soho vibes for the classy minimalist
|
||||
- - meta
|
||||
- property: og:image
|
||||
content: https://rose-pine-images.vercel.app/.png?theme=default
|
||||
- - meta
|
||||
- property: twitter:image
|
||||
content: /assets/logo.png
|
||||
- - meta
|
||||
- name: twitter:card
|
||||
content: summary_large_image
|
||||
---
|
||||
|
||||
<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
|
Binary file not shown.
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
102
docs/themes.md
102
docs/themes.md
|
@ -1,102 +0,0 @@
|
|||
---
|
||||
head:
|
||||
- - link
|
||||
- rel: shortcut icon
|
||||
type: image/png
|
||||
href: /assets/logo.png
|
||||
- - meta
|
||||
- name: theme-color
|
||||
content: "#c4a7e7"
|
||||
- - meta
|
||||
- name: description
|
||||
content: All natural pine, faux fur and a bit of soho vibes for the classy minimalist
|
||||
- - meta
|
||||
- property: og:image
|
||||
content: https://rose-pine-images.vercel.app/.png?theme=default
|
||||
- - meta
|
||||
- property: twitter:image
|
||||
content: /assets/logo.png
|
||||
- - meta
|
||||
- name: twitter:card
|
||||
content: summary_large_image
|
||||
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
|
||||
- [Kakoune](https://gitea.nulo.in/Nulo/rose-pine.kak) by [Nulo](https://nulo.in)
|
||||
- [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)
|
||||
- [R Markdown](https://github.com/rose-pine/r-markdown)
|
||||
- [Slack](https://github.com/rose-pine/slack)
|
||||
- [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)
|
||||
- [Cmus](https://github.com/Iorvethe/cmus) by [Iorvethe](https://github.com/Iorvethe)
|
||||
- [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)
|
15
package.json
15
package.json
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
}
|
1278
pnpm-lock.yaml
1278
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
103
readme.md
103
readme.md
|
@ -6,11 +6,11 @@
|
|||
<p align="center">All natural pine, faux fur and a bit of soho vibes for the classy minimalist</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://rosepinetheme.com/palette.html">Palette</a>
|
||||
<a href="https://rosepinetheme.com/themes">Themes</a>
|
||||
·
|
||||
<a href="https://rosepinetheme.com/contributing.html#style-guide">Style guide</a>
|
||||
<a href="https://rosepinetheme.com/palette">Palette</a>
|
||||
·
|
||||
<a href="https://rosepinetheme.com/contributing.html">Contributing</a>
|
||||
<a href="https://github.com/rose-pine/.github/blob/main/contributing.md">Contributing</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
|
@ -19,101 +19,8 @@
|
|||
<img src="assets/palette-dawn.png" width="125" />
|
||||
</p>
|
||||
|
||||
## Stargazing
|
||||
|
||||
The community is encouraged to port Rosé Pine to their favourite apps 🌸
|
||||
|
||||
![](assets/alt.png) means a repo features Rosé Pine Moon and/or Rosé Pine Dawn, not just the base theme.
|
||||
|
||||
### Featured
|
||||
|
||||
- [VSCode](https://github.com/rose-pine/vscode) ![](assets/alt.png)
|
||||
- [Hyper](https://github.com/rose-pine/hyper) ![](assets/alt.png)
|
||||
- [GTK 3](https://github.com/rose-pine/gtk) ![](assets/alt.png)
|
||||
- [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 ![](assets/alt.png)
|
||||
- [IntelliJ](https://github.com/jmorjsm/rose-pine-intellij) by [jmorjsm](https://github.com/jmorjsm) ![](assets/alt.png)
|
||||
- [Kakoune](https://gitea.nulo.in/Nulo/rose-pine.kak) by [Nulo](https://nulo.in) ![](assets/alt.png)
|
||||
- [Helix](https://github.com/rose-pine/helix) by [RayGervais](https://github.com/raygervais) and [ChrisHa](https://github.com/chunghh) ![](assets/alt.png)
|
||||
- [Neovim](https://github.com/rose-pine/neovim) ![](assets/alt.png)
|
||||
- [Sublime Text](https://github.com/rose-pine/sublime-text)
|
||||
- [Vim](https://github.com/iandwelker/rose-pine-vim) by [iandwelker](https://github.com/iandwelker) ![](assets/alt.png)
|
||||
- [VSCode](https://github.com/rose-pine/vscode) ![](assets/alt.png)
|
||||
- [Xcode](https://github.com/ldakhoa/rose-pine-xcode) by [ldakhoa](https://github.com/ldakhoa) ![](assets/alt.png)
|
||||
|
||||
### Terminal
|
||||
|
||||
> Tip: We use [NerdFetch](https://github.com/thatonecalculator/nerdfetch) to make our lovely previews
|
||||
|
||||
- [Alacritty](https://github.com/rose-pine/alacritty) ![](assets/alt.png)
|
||||
- [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) ![](assets/alt.png)
|
||||
- [iTerm](https://github.com/rose-pine/iterm) ![](assets/alt.png)
|
||||
- [Kitty](https://github.com/rose-pine/kitty) ![](assets/alt.png)
|
||||
- [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) ![](assets/alt.png)
|
||||
- [Terminator](https://github.com/rose-pine/terminator)
|
||||
- [Termite](https://github.com/rose-pine/termite) ![](assets/alt.png)
|
||||
- [Windows Terminal](https://github.com/rose-pine/windows-terminal) ![](assets/alt.png)
|
||||
- [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) ![](assets/alt.png)
|
||||
- [Obsidian](https://github.com/mimishahzad/rose-pine-moon-obsidian) by [mimishahzad](https://github.com/mimishahzad) ![](assets/alt.png)
|
||||
- [Typora](https://github.com/rose-pine/typora)
|
||||
- [Zathura](https://github.com/edunfelt/zathura) by [edunfelt](https://github.com/edunfelt) ![](assets/alt.png)
|
||||
|
||||
### Web
|
||||
|
||||
- [Amfora](https://github.com/rose-pine/amfora) ![](assets/alt.png)
|
||||
- [Bear ʕ•ᴥ•ʔ](https://github.com/rose-pine/bear-blog)
|
||||
- [Dark Reader](https://github.com/rose-pine/dark-reader)
|
||||
- [Discord](https://github.com/rose-pine/discord) ![](assets/alt.png)
|
||||
- [Firefox](https://github.com/rose-pine/firefox)
|
||||
- [Google Chrome](https://github.com/rose-pine/google-chrome) ![](assets/alt.png)
|
||||
- [Mastodon](https://github.com/rose-pine/mastodon)
|
||||
- [Monkeytype](https://github.com/rose-pine/monkeytype) ![](assets/alt.png)
|
||||
- [Prism](https://github.com/rose-pine/prism) ![](assets/alt.png)
|
||||
- [R Markdown](https://github.com/rose-pine/r-markdown)
|
||||
- [Revolt](https://github.com/rose-pine/revolt) ![](assets/alt.png)
|
||||
- [Slack](https://github.com/rose-pine/slack) ![](assets/alt.png)
|
||||
- [Startpage](https://github.com/rose-pine/startpage)
|
||||
- [WriteFreely](https://github.com/rose-pine/writefreely)
|
||||
|
||||
### System
|
||||
|
||||
- [bspwm](https://github.com/rose-pine/bspwm) ![](assets/alt.png)
|
||||
- [GRUB 2](https://github.com/rose-pine/grub)
|
||||
- [GTK 3](https://github.com/rose-pine/gtk) ![](assets/alt.png)
|
||||
- [KDE](https://github.com/maybork/kde) by [Ash](https://github.com/maybork)
|
||||
- [Linux TTY](https://github.com/rose-pine/linux-tty)
|
||||
- [Rofi](https://github.com/rose-pine/rofi) ![](assets/alt.png)
|
||||
|
||||
### Mobile
|
||||
|
||||
- [Aliucord](https://github.com/rose-pine/aliucord)
|
||||
|
||||
### Extras
|
||||
|
||||
- [Base16](https://github.com/edunfelt/base16-rose-pine-scheme) by [edunfelt](https://github.com/edunfelt) ![](assets/alt.png)
|
||||
- [Cmus](https://github.com/Iorvethe/cmus) by [Iorvethe](https://github.com/Iorvethe)
|
||||
- [Discord RPC Maker](https://github.com/rose-pine/discordrpcmaker) ![](assets/alt.png)
|
||||
- [Razer-CLI](https://github.com/rose-pine/razer-cli)
|
||||
- [Wallpapers](https://github.com/rose-pine/wallpapers)
|
||||
|
||||
## Contributing
|
||||
|
||||
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 🥰
|
||||
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 over at the [Rosé Pine site repo](https://github.com/rose-pine/rose-pine-site). We can't wait to see what you create 🥰
|
||||
|
||||
Just here to show us some love? Feel free to donate to our [Patreon](https://patreon.com/rosepine)!
|
||||
|
||||
If that's out of your reach right now, we also 💛 social appreciation, whether it be GitHub stars, [Twitter](https://twitter.com/rosepinetheme) follows, or shouting to your coworkers across the office.
|
||||
Just here to show us some love? We 💛 social appreciation, whether it be GitHub stars, Twitter follows, or shouting to your coworkers across the office.
|
||||
|
|
Loading…
Reference in a new issue