mirror of
https://github.com/rose-pine/rose-pine-theme
synced 2024-11-22 12:03:08 +00:00
init website
This commit is contained in:
mvllow
parent
cfd69a169f
commit
f7b28180fa
18 changed files with 2278 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
BIN
assets/icon.png
BIN
assets/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 12 KiB |
7
assets/icon.svg
Normal file
7
assets/icon.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
13
docs/.vitepress/config.js
Normal file
13
docs/.vitepress/config.js
Normal file
|
|
@ -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" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
4
docs/.vitepress/theme/index.js
Normal file
4
docs/.vitepress/theme/index.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
import DefaultTheme from "vitepress/theme";
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
export default DefaultTheme;
|
||||||
201
docs/.vitepress/theme/prism-rose-pine-dark.css
Normal file
201
docs/.vitepress/theme/prism-rose-pine-dark.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
201
docs/.vitepress/theme/prism-rose-pine-dawn.css
Normal file
201
docs/.vitepress/theme/prism-rose-pine-dawn.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
120
docs/.vitepress/theme/styles.css
Normal file
120
docs/.vitepress/theme/styles.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
120
docs/components/color-table.vue
Normal file
120
docs/components/color-table.vue
Normal file
|
|
@ -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>
|
||||||
151
docs/components/terminal-table.vue
Normal file
151
docs/components/terminal-table.vue
Normal file
|
|
@ -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>
|
||||||
26
docs/contributing.md
Normal file
26
docs/contributing.md
Normal file
|
|
@ -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)
|
||||||
19
docs/index.md
Normal file
19
docs/index.md
Normal file
|
|
@ -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
|
||||||
|
---
|
||||||
43
docs/palette.md
Normal file
43
docs/palette.md
Normal file
|
|
@ -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
|
||||||
BIN
docs/public/assets/logo.png
Normal file
BIN
docs/public/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/public/fonts/PierSans-Bold.otf
Normal file
BIN
docs/public/fonts/PierSans-Bold.otf
Normal file
Binary file not shown.
78
docs/themes.md
Normal file
78
docs/themes.md
Normal file
|
|
@ -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)
|
||||||
15
package.json
Normal file
15
package.json
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
1278
pnpm-lock.yaml
Normal file
1278
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue