├── .editorconfig ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .npmrc ├── dist ├── css │ ├── min │ │ ├── rose-pine-class-hsl.min.css │ │ ├── rose-pine-class-rgb.min.css │ │ ├── rose-pine-class-tailwind.min.css │ │ ├── rose-pine-class.min.css │ │ ├── rose-pine-hsl.min.css │ │ ├── rose-pine-media-hsl.min.css │ │ ├── rose-pine-media-rgb.min.css │ │ ├── rose-pine-media-tailwind.min.css │ │ ├── rose-pine-media.min.css │ │ ├── rose-pine-rgb.min.css │ │ └── rose-pine.min.css │ ├── rose-pine-class-hsl.css │ ├── rose-pine-class-rgb.css │ ├── rose-pine-class-tailwind.css │ ├── rose-pine-class.css │ ├── rose-pine-hsl.css │ ├── rose-pine-media-hsl.css │ ├── rose-pine-media-rgb.css │ ├── rose-pine-media-tailwind.css │ ├── rose-pine-media.css │ ├── rose-pine-rgb.css │ └── rose-pine.css ├── index.d.ts ├── index.js └── tailwindcss │ ├── rose-pine-class.js │ ├── rose-pine-media.js │ └── rose-pine.js ├── lib └── build.js ├── license ├── package.json ├── readme.md ├── source └── index.ts ├── test └── main.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_style = tab 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | 10 | [*.{yaml,yml}] 11 | indent_size = 2 12 | indent_style = space 13 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | - push 4 | - pull_request 5 | jobs: 6 | test: 7 | name: Node.js ${{ matrix.node-version }} 8 | runs-on: ubuntu-latest 9 | strategy: 10 | fail-fast: false 11 | matrix: 12 | node-version: 13 | - 16 14 | - 18 15 | - 19 16 | steps: 17 | - uses: actions/checkout@v2 18 | - uses: actions/setup-node@v2 19 | with: 20 | node-version: ${{ matrix.node-version }} 21 | - run: npm install 22 | - run: npm test 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /dist/css/min/rose-pine-class-hsl.min.css: -------------------------------------------------------------------------------- 1 | .theme-rp,.theme-rp-moon{--rp-muted:hsl(249deg, 12%, 47%);--rp-subtle:hsl(248deg, 15%, 61%);--rp-text:hsl(245deg, 50%, 91%);--rp-love:hsl(343deg, 76%, 68%);--rp-gold:hsl(35deg, 88%, 72%);--rp-foam:hsl(189deg, 43%, 73%);--rp-iris:hsl(267deg, 57%, 78%)}.theme-rp{--rp-base:hsl(249deg, 22%, 12%);--rp-surface:hsl(247deg, 23%, 15%);--rp-overlay:hsl(248deg, 25%, 18%);--rp-rose:hsl(2deg, 55%, 83%);--rp-pine:hsl(197deg, 49%, 38%);--rp-highlight-low:hsl(244deg, 18%, 15%);--rp-highlight-med:hsl(249deg, 15%, 28%);--rp-highlight-high:hsl(248deg, 13%, 36%)}.theme-rp-moon{--rp-base:hsl(246deg, 24%, 17%);--rp-surface:hsl(248deg, 24%, 20%);--rp-overlay:hsl(248deg, 21%, 26%);--rp-rose:hsl(2deg, 66%, 75%);--rp-pine:hsl(197deg, 48%, 47%);--rp-highlight-low:hsl(245deg, 22%, 20%);--rp-highlight-med:hsl(247deg, 16%, 30%);--rp-highlight-high:hsl(249deg, 15%, 38%)}.theme-rp-dawn{--rp-base:hsl(32deg, 57%, 95%);--rp-surface:hsl(35deg, 100%, 98%);--rp-overlay:hsl(33deg, 43%, 91%);--rp-muted:hsl(257deg, 9%, 61%);--rp-subtle:hsl(248deg, 12%, 52%);--rp-text:hsl(248deg, 19%, 40%);--rp-love:hsl(343deg, 35%, 55%);--rp-gold:hsl(35deg, 81%, 56%);--rp-rose:hsl(3deg, 53%, 67%);--rp-pine:hsl(197deg, 53%, 34%);--rp-foam:hsl(189deg, 30%, 48%);--rp-iris:hsl(268deg, 21%, 57%);--rp-highlight-low:hsl(25deg, 35%, 93%);--rp-highlight-med:hsl(10deg, 9%, 86%);--rp-highlight-high:hsl(315deg, 4%, 80%)} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-class-rgb.min.css: -------------------------------------------------------------------------------- 1 | .theme-rp,.theme-rp-moon{--rp-muted:rgb(110, 106, 134);--rp-subtle:rgb(144, 140, 170);--rp-text:rgb(224, 222, 244);--rp-love:rgb(235, 111, 146);--rp-gold:rgb(246, 193, 119);--rp-foam:rgb(156, 207, 216);--rp-iris:rgb(196, 167, 231)}.theme-rp{--rp-base:rgb(25, 23, 36);--rp-surface:rgb(31, 29, 46);--rp-overlay:rgb(38, 35, 58);--rp-rose:rgb(235, 188, 186);--rp-pine:rgb(49, 116, 143);--rp-highlight-low:rgb(33, 32, 46);--rp-highlight-med:rgb(64, 61, 82);--rp-highlight-high:rgb(82, 79, 103)}.theme-rp-moon{--rp-base:rgb(35, 33, 54);--rp-surface:rgb(42, 39, 63);--rp-overlay:rgb(57, 53, 82);--rp-rose:rgb(234, 154, 151);--rp-pine:rgb(62, 143, 176);--rp-highlight-low:rgb(42, 40, 62);--rp-highlight-med:rgb(68, 65, 90);--rp-highlight-high:rgb(86, 82, 110)}.theme-rp-dawn{--rp-base:rgb(250, 244, 237);--rp-surface:rgb(255, 250, 243);--rp-overlay:rgb(242, 233, 222);--rp-muted:rgb(152, 147, 165);--rp-subtle:rgb(121, 117, 147);--rp-text:rgb(87, 82, 121);--rp-love:rgb(180, 99, 122);--rp-gold:rgb(234, 157, 52);--rp-rose:rgb(215, 130, 126);--rp-pine:rgb(40, 105, 131);--rp-foam:rgb(86, 148, 159);--rp-iris:rgb(144, 122, 169);--rp-highlight-low:rgb(244, 237, 232);--rp-highlight-med:rgb(223, 218, 217);--rp-highlight-high:rgb(206, 202, 205)} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-class-tailwind.min.css: -------------------------------------------------------------------------------- 1 | .theme-rp,.theme-rp-moon{--rp-muted:249 12 47;--rp-subtle:248 15 61;--rp-text:245 50 91;--rp-love:343 76 68;--rp-gold:35 88 72;--rp-foam:189 43 73;--rp-iris:267 57 78}.theme-rp{--rp-base:249 22 12;--rp-surface:247 23 15;--rp-overlay:248 25 18;--rp-rose:2 55 83;--rp-pine:197 49 38;--rp-highlight-low:244 18 15;--rp-highlight-med:249 15 28;--rp-highlight-high:248 13 36}.theme-rp-moon{--rp-base:246 24 17;--rp-surface:248 24 20;--rp-overlay:248 21 26;--rp-rose:2 66 75;--rp-pine:197 48 47;--rp-highlight-low:245 22 20;--rp-highlight-med:247 16 30;--rp-highlight-high:249 15 38}.theme-rp-dawn{--rp-base:32 57 95;--rp-surface:35 100 98;--rp-overlay:33 43 91;--rp-muted:257 9 61;--rp-subtle:248 12 52;--rp-text:248 19 40;--rp-love:343 35 55;--rp-gold:35 81 56;--rp-rose:3 53 67;--rp-pine:197 53 34;--rp-foam:189 30 48;--rp-iris:268 21 57;--rp-highlight-low:25 35 93;--rp-highlight-med:10 9 86;--rp-highlight-high:315 4 80} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-class.min.css: -------------------------------------------------------------------------------- 1 | .theme-rp,.theme-rp-moon{--rp-muted:#6e6a86;--rp-subtle:#908caa;--rp-text:#e0def4;--rp-love:#eb6f92;--rp-gold:#f6c177;--rp-foam:#9ccfd8;--rp-iris:#c4a7e7}.theme-rp{--rp-base:#191724;--rp-surface:#1f1d2e;--rp-overlay:#26233a;--rp-rose:#ebbcba;--rp-pine:#31748f;--rp-highlight-low:#21202e;--rp-highlight-med:#403d52;--rp-highlight-high:#524f67}.theme-rp-moon{--rp-base:#232136;--rp-surface:#2a273f;--rp-overlay:#393552;--rp-rose:#ea9a97;--rp-pine:#3e8fb0;--rp-highlight-low:#2a283e;--rp-highlight-med:#44415a;--rp-highlight-high:#56526e}.theme-rp-dawn{--rp-base:#faf4ed;--rp-surface:#fffaf3;--rp-overlay:#f2e9e1;--rp-muted:#9893a5;--rp-subtle:#797593;--rp-text:#575279;--rp-love:#b4637a;--rp-gold:#ea9d34;--rp-rose:#d7827e;--rp-pine:#286983;--rp-foam:#56949f;--rp-iris:#907aa9;--rp-highlight-low:#f4ede8;--rp-highlight-med:#dfdad9;--rp-highlight-high:#cecacd} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-hsl.min.css: -------------------------------------------------------------------------------- 1 | :root{--rp-base:hsl(249deg, 22%, 12%);--rp-surface:hsl(247deg, 23%, 15%);--rp-overlay:hsl(248deg, 25%, 18%);--rp-muted:hsl(249deg, 12%, 47%);--rp-subtle:hsl(248deg, 15%, 61%);--rp-text:hsl(245deg, 50%, 91%);--rp-love:hsl(343deg, 76%, 68%);--rp-gold:hsl(35deg, 88%, 72%);--rp-rose:hsl(2deg, 55%, 83%);--rp-pine:hsl(197deg, 49%, 38%);--rp-foam:hsl(189deg, 43%, 73%);--rp-iris:hsl(267deg, 57%, 78%);--rp-highlight-low:hsl(244deg, 18%, 15%);--rp-highlight-med:hsl(249deg, 15%, 28%);--rp-highlight-high:hsl(248deg, 13%, 36%);--rp-moon-base:hsl(246deg, 24%, 17%);--rp-moon-surface:hsl(248deg, 24%, 20%);--rp-moon-overlay:hsl(248deg, 21%, 26%);--rp-moon-muted:hsl(249deg, 12%, 47%);--rp-moon-subtle:hsl(248deg, 15%, 61%);--rp-moon-text:hsl(245deg, 50%, 91%);--rp-moon-love:hsl(343deg, 76%, 68%);--rp-moon-gold:hsl(35deg, 88%, 72%);--rp-moon-rose:hsl(2deg, 66%, 75%);--rp-moon-pine:hsl(197deg, 48%, 47%);--rp-moon-foam:hsl(189deg, 43%, 73%);--rp-moon-iris:hsl(267deg, 57%, 78%);--rp-moon-highlight-low:hsl(245deg, 22%, 20%);--rp-moon-highlight-med:hsl(247deg, 16%, 30%);--rp-moon-highlight-high:hsl(249deg, 15%, 38%);--rp-dawn-base:hsl(32deg, 57%, 95%);--rp-dawn-surface:hsl(35deg, 100%, 98%);--rp-dawn-overlay:hsl(33deg, 43%, 91%);--rp-dawn-muted:hsl(257deg, 9%, 61%);--rp-dawn-subtle:hsl(248deg, 12%, 52%);--rp-dawn-text:hsl(248deg, 19%, 40%);--rp-dawn-love:hsl(343deg, 35%, 55%);--rp-dawn-gold:hsl(35deg, 81%, 56%);--rp-dawn-rose:hsl(3deg, 53%, 67%);--rp-dawn-pine:hsl(197deg, 53%, 34%);--rp-dawn-foam:hsl(189deg, 30%, 48%);--rp-dawn-iris:hsl(268deg, 21%, 57%);--rp-dawn-highlight-low:hsl(25deg, 35%, 93%);--rp-dawn-highlight-med:hsl(10deg, 9%, 86%);--rp-dawn-highlight-high:hsl(315deg, 4%, 80%)} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-media-hsl.min.css: -------------------------------------------------------------------------------- 1 | :root{--rp-base:hsl(32deg, 57%, 95%);--rp-surface:hsl(35deg, 100%, 98%);--rp-overlay:hsl(33deg, 43%, 91%);--rp-muted:hsl(257deg, 9%, 61%);--rp-subtle:hsl(248deg, 12%, 52%);--rp-text:hsl(248deg, 19%, 40%);--rp-love:hsl(343deg, 35%, 55%);--rp-gold:hsl(35deg, 81%, 56%);--rp-rose:hsl(3deg, 53%, 67%);--rp-pine:hsl(197deg, 53%, 34%);--rp-foam:hsl(189deg, 30%, 48%);--rp-iris:hsl(268deg, 21%, 57%);--rp-highlight-low:hsl(25deg, 35%, 93%);--rp-highlight-med:hsl(10deg, 9%, 86%);--rp-highlight-high:hsl(315deg, 4%, 80%)}@media (prefers-color-scheme:dark){:root{--rp-base:hsl(249deg, 22%, 12%);--rp-surface:hsl(247deg, 23%, 15%);--rp-overlay:hsl(248deg, 25%, 18%);--rp-muted:hsl(249deg, 12%, 47%);--rp-subtle:hsl(248deg, 15%, 61%);--rp-text:hsl(245deg, 50%, 91%);--rp-love:hsl(343deg, 76%, 68%);--rp-gold:hsl(35deg, 88%, 72%);--rp-rose:hsl(2deg, 55%, 83%);--rp-pine:hsl(197deg, 49%, 38%);--rp-foam:hsl(189deg, 43%, 73%);--rp-iris:hsl(267deg, 57%, 78%);--rp-highlight-low:hsl(244deg, 18%, 15%);--rp-highlight-med:hsl(249deg, 15%, 28%);--rp-highlight-high:hsl(248deg, 13%, 36%)}} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-media-rgb.min.css: -------------------------------------------------------------------------------- 1 | :root{--rp-base:rgb(250, 244, 237);--rp-surface:rgb(255, 250, 243);--rp-overlay:rgb(242, 233, 222);--rp-muted:rgb(152, 147, 165);--rp-subtle:rgb(121, 117, 147);--rp-text:rgb(87, 82, 121);--rp-love:rgb(180, 99, 122);--rp-gold:rgb(234, 157, 52);--rp-rose:rgb(215, 130, 126);--rp-pine:rgb(40, 105, 131);--rp-foam:rgb(86, 148, 159);--rp-iris:rgb(144, 122, 169);--rp-highlight-low:rgb(244, 237, 232);--rp-highlight-med:rgb(223, 218, 217);--rp-highlight-high:rgb(206, 202, 205)}@media (prefers-color-scheme:dark){:root{--rp-base:rgb(25, 23, 36);--rp-surface:rgb(31, 29, 46);--rp-overlay:rgb(38, 35, 58);--rp-muted:rgb(110, 106, 134);--rp-subtle:rgb(144, 140, 170);--rp-text:rgb(224, 222, 244);--rp-love:rgb(235, 111, 146);--rp-gold:rgb(246, 193, 119);--rp-rose:rgb(235, 188, 186);--rp-pine:rgb(49, 116, 143);--rp-foam:rgb(156, 207, 216);--rp-iris:rgb(196, 167, 231);--rp-highlight-low:rgb(33, 32, 46);--rp-highlight-med:rgb(64, 61, 82);--rp-highlight-high:rgb(82, 79, 103)}} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-media-tailwind.min.css: -------------------------------------------------------------------------------- 1 | :root{--rp-base:32 57 95;--rp-surface:35 100 98;--rp-overlay:33 43 91;--rp-muted:257 9 61;--rp-subtle:248 12 52;--rp-text:248 19 40;--rp-love:343 35 55;--rp-gold:35 81 56;--rp-rose:3 53 67;--rp-pine:197 53 34;--rp-foam:189 30 48;--rp-iris:268 21 57;--rp-highlight-low:25 35 93;--rp-highlight-med:10 9 86;--rp-highlight-high:315 4 80}@media (prefers-color-scheme:dark){:root{--rp-base:249 22 12;--rp-surface:247 23 15;--rp-overlay:248 25 18;--rp-muted:249 12 47;--rp-subtle:248 15 61;--rp-text:245 50 91;--rp-love:343 76 68;--rp-gold:35 88 72;--rp-rose:2 55 83;--rp-pine:197 49 38;--rp-foam:189 43 73;--rp-iris:267 57 78;--rp-highlight-low:244 18 15;--rp-highlight-med:249 15 28;--rp-highlight-high:248 13 36}} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-media.min.css: -------------------------------------------------------------------------------- 1 | :root{--rp-base:#faf4ed;--rp-surface:#fffaf3;--rp-overlay:#f2e9e1;--rp-muted:#9893a5;--rp-subtle:#797593;--rp-text:#575279;--rp-love:#b4637a;--rp-gold:#ea9d34;--rp-rose:#d7827e;--rp-pine:#286983;--rp-foam:#56949f;--rp-iris:#907aa9;--rp-highlight-low:#f4ede8;--rp-highlight-med:#dfdad9;--rp-highlight-high:#cecacd}@media (prefers-color-scheme:dark){:root{--rp-base:#191724;--rp-surface:#1f1d2e;--rp-overlay:#26233a;--rp-muted:#6e6a86;--rp-subtle:#908caa;--rp-text:#e0def4;--rp-love:#eb6f92;--rp-gold:#f6c177;--rp-rose:#ebbcba;--rp-pine:#31748f;--rp-foam:#9ccfd8;--rp-iris:#c4a7e7;--rp-highlight-low:#21202e;--rp-highlight-med:#403d52;--rp-highlight-high:#524f67}} -------------------------------------------------------------------------------- /dist/css/min/rose-pine-rgb.min.css: -------------------------------------------------------------------------------- 1 | :root{--rp-base:rgb(25, 23, 36);--rp-surface:rgb(31, 29, 46);--rp-overlay:rgb(38, 35, 58);--rp-muted:rgb(110, 106, 134);--rp-subtle:rgb(144, 140, 170);--rp-text:rgb(224, 222, 244);--rp-love:rgb(235, 111, 146);--rp-gold:rgb(246, 193, 119);--rp-rose:rgb(235, 188, 186);--rp-pine:rgb(49, 116, 143);--rp-foam:rgb(156, 207, 216);--rp-iris:rgb(196, 167, 231);--rp-highlight-low:rgb(33, 32, 46);--rp-highlight-med:rgb(64, 61, 82);--rp-highlight-high:rgb(82, 79, 103);--rp-moon-base:rgb(35, 33, 54);--rp-moon-surface:rgb(42, 39, 63);--rp-moon-overlay:rgb(57, 53, 82);--rp-moon-muted:rgb(110, 106, 134);--rp-moon-subtle:rgb(144, 140, 170);--rp-moon-text:rgb(224, 222, 244);--rp-moon-love:rgb(235, 111, 146);--rp-moon-gold:rgb(246, 193, 119);--rp-moon-rose:rgb(234, 154, 151);--rp-moon-pine:rgb(62, 143, 176);--rp-moon-foam:rgb(156, 207, 216);--rp-moon-iris:rgb(196, 167, 231);--rp-moon-highlight-low:rgb(42, 40, 62);--rp-moon-highlight-med:rgb(68, 65, 90);--rp-moon-highlight-high:rgb(86, 82, 110);--rp-dawn-base:rgb(250, 244, 237);--rp-dawn-surface:rgb(255, 250, 243);--rp-dawn-overlay:rgb(242, 233, 222);--rp-dawn-muted:rgb(152, 147, 165);--rp-dawn-subtle:rgb(121, 117, 147);--rp-dawn-text:rgb(87, 82, 121);--rp-dawn-love:rgb(180, 99, 122);--rp-dawn-gold:rgb(234, 157, 52);--rp-dawn-rose:rgb(215, 130, 126);--rp-dawn-pine:rgb(40, 105, 131);--rp-dawn-foam:rgb(86, 148, 159);--rp-dawn-iris:rgb(144, 122, 169);--rp-dawn-highlight-low:rgb(244, 237, 232);--rp-dawn-highlight-med:rgb(223, 218, 217);--rp-dawn-highlight-high:rgb(206, 202, 205)} -------------------------------------------------------------------------------- /dist/css/min/rose-pine.min.css: -------------------------------------------------------------------------------- 1 | :root{--rp-base:#191724;--rp-surface:#1f1d2e;--rp-overlay:#26233a;--rp-muted:#6e6a86;--rp-subtle:#908caa;--rp-text:#e0def4;--rp-love:#eb6f92;--rp-gold:#f6c177;--rp-rose:#ebbcba;--rp-pine:#31748f;--rp-foam:#9ccfd8;--rp-iris:#c4a7e7;--rp-highlight-low:#21202e;--rp-highlight-med:#403d52;--rp-highlight-high:#524f67;--rp-moon-base:#232136;--rp-moon-surface:#2a273f;--rp-moon-overlay:#393552;--rp-moon-muted:#6e6a86;--rp-moon-subtle:#908caa;--rp-moon-text:#e0def4;--rp-moon-love:#eb6f92;--rp-moon-gold:#f6c177;--rp-moon-rose:#ea9a97;--rp-moon-pine:#3e8fb0;--rp-moon-foam:#9ccfd8;--rp-moon-iris:#c4a7e7;--rp-moon-highlight-low:#2a283e;--rp-moon-highlight-med:#44415a;--rp-moon-highlight-high:#56526e;--rp-dawn-base:#faf4ed;--rp-dawn-surface:#fffaf3;--rp-dawn-overlay:#f2e9e1;--rp-dawn-muted:#9893a5;--rp-dawn-subtle:#797593;--rp-dawn-text:#575279;--rp-dawn-love:#b4637a;--rp-dawn-gold:#ea9d34;--rp-dawn-rose:#d7827e;--rp-dawn-pine:#286983;--rp-dawn-foam:#56949f;--rp-dawn-iris:#907aa9;--rp-dawn-highlight-low:#f4ede8;--rp-dawn-highlight-med:#dfdad9;--rp-dawn-highlight-high:#cecacd} -------------------------------------------------------------------------------- /dist/css/rose-pine-class-hsl.css: -------------------------------------------------------------------------------- 1 | .theme-rp { 2 | --rp-base: hsl(249deg, 22%, 12%); 3 | --rp-surface: hsl(247deg, 23%, 15%); 4 | --rp-overlay: hsl(248deg, 25%, 18%); 5 | --rp-muted: hsl(249deg, 12%, 47%); 6 | --rp-subtle: hsl(248deg, 15%, 61%); 7 | --rp-text: hsl(245deg, 50%, 91%); 8 | --rp-love: hsl(343deg, 76%, 68%); 9 | --rp-gold: hsl(35deg, 88%, 72%); 10 | --rp-rose: hsl(2deg, 55%, 83%); 11 | --rp-pine: hsl(197deg, 49%, 38%); 12 | --rp-foam: hsl(189deg, 43%, 73%); 13 | --rp-iris: hsl(267deg, 57%, 78%); 14 | --rp-highlight-low: hsl(244deg, 18%, 15%); 15 | --rp-highlight-med: hsl(249deg, 15%, 28%); 16 | --rp-highlight-high: hsl(248deg, 13%, 36%); 17 | } 18 | 19 | .theme-rp-moon { 20 | --rp-base: hsl(246deg, 24%, 17%); 21 | --rp-surface: hsl(248deg, 24%, 20%); 22 | --rp-overlay: hsl(248deg, 21%, 26%); 23 | --rp-muted: hsl(249deg, 12%, 47%); 24 | --rp-subtle: hsl(248deg, 15%, 61%); 25 | --rp-text: hsl(245deg, 50%, 91%); 26 | --rp-love: hsl(343deg, 76%, 68%); 27 | --rp-gold: hsl(35deg, 88%, 72%); 28 | --rp-rose: hsl(2deg, 66%, 75%); 29 | --rp-pine: hsl(197deg, 48%, 47%); 30 | --rp-foam: hsl(189deg, 43%, 73%); 31 | --rp-iris: hsl(267deg, 57%, 78%); 32 | --rp-highlight-low: hsl(245deg, 22%, 20%); 33 | --rp-highlight-med: hsl(247deg, 16%, 30%); 34 | --rp-highlight-high: hsl(249deg, 15%, 38%); 35 | } 36 | 37 | .theme-rp-dawn { 38 | --rp-base: hsl(32deg, 57%, 95%); 39 | --rp-surface: hsl(35deg, 100%, 98%); 40 | --rp-overlay: hsl(33deg, 43%, 91%); 41 | --rp-muted: hsl(257deg, 9%, 61%); 42 | --rp-subtle: hsl(248deg, 12%, 52%); 43 | --rp-text: hsl(248deg, 19%, 40%); 44 | --rp-love: hsl(343deg, 35%, 55%); 45 | --rp-gold: hsl(35deg, 81%, 56%); 46 | --rp-rose: hsl(3deg, 53%, 67%); 47 | --rp-pine: hsl(197deg, 53%, 34%); 48 | --rp-foam: hsl(189deg, 30%, 48%); 49 | --rp-iris: hsl(268deg, 21%, 57%); 50 | --rp-highlight-low: hsl(25deg, 35%, 93%); 51 | --rp-highlight-med: hsl(10deg, 9%, 86%); 52 | --rp-highlight-high: hsl(315deg, 4%, 80%); 53 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-class-rgb.css: -------------------------------------------------------------------------------- 1 | .theme-rp { 2 | --rp-base: rgb(25, 23, 36); 3 | --rp-surface: rgb(31, 29, 46); 4 | --rp-overlay: rgb(38, 35, 58); 5 | --rp-muted: rgb(110, 106, 134); 6 | --rp-subtle: rgb(144, 140, 170); 7 | --rp-text: rgb(224, 222, 244); 8 | --rp-love: rgb(235, 111, 146); 9 | --rp-gold: rgb(246, 193, 119); 10 | --rp-rose: rgb(235, 188, 186); 11 | --rp-pine: rgb(49, 116, 143); 12 | --rp-foam: rgb(156, 207, 216); 13 | --rp-iris: rgb(196, 167, 231); 14 | --rp-highlight-low: rgb(33, 32, 46); 15 | --rp-highlight-med: rgb(64, 61, 82); 16 | --rp-highlight-high: rgb(82, 79, 103); 17 | } 18 | 19 | .theme-rp-moon { 20 | --rp-base: rgb(35, 33, 54); 21 | --rp-surface: rgb(42, 39, 63); 22 | --rp-overlay: rgb(57, 53, 82); 23 | --rp-muted: rgb(110, 106, 134); 24 | --rp-subtle: rgb(144, 140, 170); 25 | --rp-text: rgb(224, 222, 244); 26 | --rp-love: rgb(235, 111, 146); 27 | --rp-gold: rgb(246, 193, 119); 28 | --rp-rose: rgb(234, 154, 151); 29 | --rp-pine: rgb(62, 143, 176); 30 | --rp-foam: rgb(156, 207, 216); 31 | --rp-iris: rgb(196, 167, 231); 32 | --rp-highlight-low: rgb(42, 40, 62); 33 | --rp-highlight-med: rgb(68, 65, 90); 34 | --rp-highlight-high: rgb(86, 82, 110); 35 | } 36 | 37 | .theme-rp-dawn { 38 | --rp-base: rgb(250, 244, 237); 39 | --rp-surface: rgb(255, 250, 243); 40 | --rp-overlay: rgb(242, 233, 222); 41 | --rp-muted: rgb(152, 147, 165); 42 | --rp-subtle: rgb(121, 117, 147); 43 | --rp-text: rgb(87, 82, 121); 44 | --rp-love: rgb(180, 99, 122); 45 | --rp-gold: rgb(234, 157, 52); 46 | --rp-rose: rgb(215, 130, 126); 47 | --rp-pine: rgb(40, 105, 131); 48 | --rp-foam: rgb(86, 148, 159); 49 | --rp-iris: rgb(144, 122, 169); 50 | --rp-highlight-low: rgb(244, 237, 232); 51 | --rp-highlight-med: rgb(223, 218, 217); 52 | --rp-highlight-high: rgb(206, 202, 205); 53 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-class-tailwind.css: -------------------------------------------------------------------------------- 1 | .theme-rp { 2 | --rp-base: 249 22 12; 3 | --rp-surface: 247 23 15; 4 | --rp-overlay: 248 25 18; 5 | --rp-muted: 249 12 47; 6 | --rp-subtle: 248 15 61; 7 | --rp-text: 245 50 91; 8 | --rp-love: 343 76 68; 9 | --rp-gold: 35 88 72; 10 | --rp-rose: 2 55 83; 11 | --rp-pine: 197 49 38; 12 | --rp-foam: 189 43 73; 13 | --rp-iris: 267 57 78; 14 | --rp-highlight-low: 244 18 15; 15 | --rp-highlight-med: 249 15 28; 16 | --rp-highlight-high: 248 13 36; 17 | } 18 | 19 | .theme-rp-moon { 20 | --rp-base: 246 24 17; 21 | --rp-surface: 248 24 20; 22 | --rp-overlay: 248 21 26; 23 | --rp-muted: 249 12 47; 24 | --rp-subtle: 248 15 61; 25 | --rp-text: 245 50 91; 26 | --rp-love: 343 76 68; 27 | --rp-gold: 35 88 72; 28 | --rp-rose: 2 66 75; 29 | --rp-pine: 197 48 47; 30 | --rp-foam: 189 43 73; 31 | --rp-iris: 267 57 78; 32 | --rp-highlight-low: 245 22 20; 33 | --rp-highlight-med: 247 16 30; 34 | --rp-highlight-high: 249 15 38; 35 | } 36 | 37 | .theme-rp-dawn { 38 | --rp-base: 32 57 95; 39 | --rp-surface: 35 100 98; 40 | --rp-overlay: 33 43 91; 41 | --rp-muted: 257 9 61; 42 | --rp-subtle: 248 12 52; 43 | --rp-text: 248 19 40; 44 | --rp-love: 343 35 55; 45 | --rp-gold: 35 81 56; 46 | --rp-rose: 3 53 67; 47 | --rp-pine: 197 53 34; 48 | --rp-foam: 189 30 48; 49 | --rp-iris: 268 21 57; 50 | --rp-highlight-low: 25 35 93; 51 | --rp-highlight-med: 10 9 86; 52 | --rp-highlight-high: 315 4 80; 53 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-class.css: -------------------------------------------------------------------------------- 1 | .theme-rp { 2 | --rp-base: #191724; 3 | --rp-surface: #1f1d2e; 4 | --rp-overlay: #26233a; 5 | --rp-muted: #6e6a86; 6 | --rp-subtle: #908caa; 7 | --rp-text: #e0def4; 8 | --rp-love: #eb6f92; 9 | --rp-gold: #f6c177; 10 | --rp-rose: #ebbcba; 11 | --rp-pine: #31748f; 12 | --rp-foam: #9ccfd8; 13 | --rp-iris: #c4a7e7; 14 | --rp-highlight-low: #21202e; 15 | --rp-highlight-med: #403d52; 16 | --rp-highlight-high: #524f67; 17 | } 18 | 19 | .theme-rp-moon { 20 | --rp-base: #232136; 21 | --rp-surface: #2a273f; 22 | --rp-overlay: #393552; 23 | --rp-muted: #6e6a86; 24 | --rp-subtle: #908caa; 25 | --rp-text: #e0def4; 26 | --rp-love: #eb6f92; 27 | --rp-gold: #f6c177; 28 | --rp-rose: #ea9a97; 29 | --rp-pine: #3e8fb0; 30 | --rp-foam: #9ccfd8; 31 | --rp-iris: #c4a7e7; 32 | --rp-highlight-low: #2a283e; 33 | --rp-highlight-med: #44415a; 34 | --rp-highlight-high: #56526e; 35 | } 36 | 37 | .theme-rp-dawn { 38 | --rp-base: #faf4ed; 39 | --rp-surface: #fffaf3; 40 | --rp-overlay: #f2e9e1; 41 | --rp-muted: #9893a5; 42 | --rp-subtle: #797593; 43 | --rp-text: #575279; 44 | --rp-love: #b4637a; 45 | --rp-gold: #ea9d34; 46 | --rp-rose: #d7827e; 47 | --rp-pine: #286983; 48 | --rp-foam: #56949f; 49 | --rp-iris: #907aa9; 50 | --rp-highlight-low: #f4ede8; 51 | --rp-highlight-med: #dfdad9; 52 | --rp-highlight-high: #cecacd; 53 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-hsl.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --rp-base: hsl(249deg, 22%, 12%); 3 | --rp-surface: hsl(247deg, 23%, 15%); 4 | --rp-overlay: hsl(248deg, 25%, 18%); 5 | --rp-muted: hsl(249deg, 12%, 47%); 6 | --rp-subtle: hsl(248deg, 15%, 61%); 7 | --rp-text: hsl(245deg, 50%, 91%); 8 | --rp-love: hsl(343deg, 76%, 68%); 9 | --rp-gold: hsl(35deg, 88%, 72%); 10 | --rp-rose: hsl(2deg, 55%, 83%); 11 | --rp-pine: hsl(197deg, 49%, 38%); 12 | --rp-foam: hsl(189deg, 43%, 73%); 13 | --rp-iris: hsl(267deg, 57%, 78%); 14 | --rp-highlight-low: hsl(244deg, 18%, 15%); 15 | --rp-highlight-med: hsl(249deg, 15%, 28%); 16 | --rp-highlight-high: hsl(248deg, 13%, 36%); 17 | 18 | --rp-moon-base: hsl(246deg, 24%, 17%); 19 | --rp-moon-surface: hsl(248deg, 24%, 20%); 20 | --rp-moon-overlay: hsl(248deg, 21%, 26%); 21 | --rp-moon-muted: hsl(249deg, 12%, 47%); 22 | --rp-moon-subtle: hsl(248deg, 15%, 61%); 23 | --rp-moon-text: hsl(245deg, 50%, 91%); 24 | --rp-moon-love: hsl(343deg, 76%, 68%); 25 | --rp-moon-gold: hsl(35deg, 88%, 72%); 26 | --rp-moon-rose: hsl(2deg, 66%, 75%); 27 | --rp-moon-pine: hsl(197deg, 48%, 47%); 28 | --rp-moon-foam: hsl(189deg, 43%, 73%); 29 | --rp-moon-iris: hsl(267deg, 57%, 78%); 30 | --rp-moon-highlight-low: hsl(245deg, 22%, 20%); 31 | --rp-moon-highlight-med: hsl(247deg, 16%, 30%); 32 | --rp-moon-highlight-high: hsl(249deg, 15%, 38%); 33 | 34 | --rp-dawn-base: hsl(32deg, 57%, 95%); 35 | --rp-dawn-surface: hsl(35deg, 100%, 98%); 36 | --rp-dawn-overlay: hsl(33deg, 43%, 91%); 37 | --rp-dawn-muted: hsl(257deg, 9%, 61%); 38 | --rp-dawn-subtle: hsl(248deg, 12%, 52%); 39 | --rp-dawn-text: hsl(248deg, 19%, 40%); 40 | --rp-dawn-love: hsl(343deg, 35%, 55%); 41 | --rp-dawn-gold: hsl(35deg, 81%, 56%); 42 | --rp-dawn-rose: hsl(3deg, 53%, 67%); 43 | --rp-dawn-pine: hsl(197deg, 53%, 34%); 44 | --rp-dawn-foam: hsl(189deg, 30%, 48%); 45 | --rp-dawn-iris: hsl(268deg, 21%, 57%); 46 | --rp-dawn-highlight-low: hsl(25deg, 35%, 93%); 47 | --rp-dawn-highlight-med: hsl(10deg, 9%, 86%); 48 | --rp-dawn-highlight-high: hsl(315deg, 4%, 80%); 49 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-media-hsl.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Rosé Pine Dawn */ 3 | --rp-base: hsl(32deg, 57%, 95%); 4 | --rp-surface: hsl(35deg, 100%, 98%); 5 | --rp-overlay: hsl(33deg, 43%, 91%); 6 | --rp-muted: hsl(257deg, 9%, 61%); 7 | --rp-subtle: hsl(248deg, 12%, 52%); 8 | --rp-text: hsl(248deg, 19%, 40%); 9 | --rp-love: hsl(343deg, 35%, 55%); 10 | --rp-gold: hsl(35deg, 81%, 56%); 11 | --rp-rose: hsl(3deg, 53%, 67%); 12 | --rp-pine: hsl(197deg, 53%, 34%); 13 | --rp-foam: hsl(189deg, 30%, 48%); 14 | --rp-iris: hsl(268deg, 21%, 57%); 15 | --rp-highlight-low: hsl(25deg, 35%, 93%); 16 | --rp-highlight-med: hsl(10deg, 9%, 86%); 17 | --rp-highlight-high: hsl(315deg, 4%, 80%); 18 | } 19 | 20 | @media (prefers-color-scheme: dark) { 21 | :root { 22 | /* Rosé Pine */ 23 | --rp-base: hsl(249deg, 22%, 12%); 24 | --rp-surface: hsl(247deg, 23%, 15%); 25 | --rp-overlay: hsl(248deg, 25%, 18%); 26 | --rp-muted: hsl(249deg, 12%, 47%); 27 | --rp-subtle: hsl(248deg, 15%, 61%); 28 | --rp-text: hsl(245deg, 50%, 91%); 29 | --rp-love: hsl(343deg, 76%, 68%); 30 | --rp-gold: hsl(35deg, 88%, 72%); 31 | --rp-rose: hsl(2deg, 55%, 83%); 32 | --rp-pine: hsl(197deg, 49%, 38%); 33 | --rp-foam: hsl(189deg, 43%, 73%); 34 | --rp-iris: hsl(267deg, 57%, 78%); 35 | --rp-highlight-low: hsl(244deg, 18%, 15%); 36 | --rp-highlight-med: hsl(249deg, 15%, 28%); 37 | --rp-highlight-high: hsl(248deg, 13%, 36%); 38 | 39 | /* Rosé Pine Moon */ 40 | /* --rp-base: hsl(246deg, 24%, 17%); */ 41 | /* --rp-surface: hsl(248deg, 24%, 20%); */ 42 | /* --rp-overlay: hsl(248deg, 21%, 26%); */ 43 | /* --rp-muted: hsl(249deg, 12%, 47%); */ 44 | /* --rp-subtle: hsl(248deg, 15%, 61%); */ 45 | /* --rp-text: hsl(245deg, 50%, 91%); */ 46 | /* --rp-love: hsl(343deg, 76%, 68%); */ 47 | /* --rp-gold: hsl(35deg, 88%, 72%); */ 48 | /* --rp-rose: hsl(2deg, 66%, 75%); */ 49 | /* --rp-pine: hsl(197deg, 48%, 47%); */ 50 | /* --rp-foam: hsl(189deg, 43%, 73%); */ 51 | /* --rp-iris: hsl(267deg, 57%, 78%); */ 52 | /* --rp-highlight-low: hsl(245deg, 22%, 20%); */ 53 | /* --rp-highlight-med: hsl(247deg, 16%, 30%); */ 54 | /* --rp-highlight-high: hsl(249deg, 15%, 38%); */ 55 | } 56 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-media-rgb.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Rosé Pine Dawn */ 3 | --rp-base: rgb(250, 244, 237); 4 | --rp-surface: rgb(255, 250, 243); 5 | --rp-overlay: rgb(242, 233, 222); 6 | --rp-muted: rgb(152, 147, 165); 7 | --rp-subtle: rgb(121, 117, 147); 8 | --rp-text: rgb(87, 82, 121); 9 | --rp-love: rgb(180, 99, 122); 10 | --rp-gold: rgb(234, 157, 52); 11 | --rp-rose: rgb(215, 130, 126); 12 | --rp-pine: rgb(40, 105, 131); 13 | --rp-foam: rgb(86, 148, 159); 14 | --rp-iris: rgb(144, 122, 169); 15 | --rp-highlight-low: rgb(244, 237, 232); 16 | --rp-highlight-med: rgb(223, 218, 217); 17 | --rp-highlight-high: rgb(206, 202, 205); 18 | } 19 | 20 | @media (prefers-color-scheme: dark) { 21 | :root { 22 | /* Rosé Pine */ 23 | --rp-base: rgb(25, 23, 36); 24 | --rp-surface: rgb(31, 29, 46); 25 | --rp-overlay: rgb(38, 35, 58); 26 | --rp-muted: rgb(110, 106, 134); 27 | --rp-subtle: rgb(144, 140, 170); 28 | --rp-text: rgb(224, 222, 244); 29 | --rp-love: rgb(235, 111, 146); 30 | --rp-gold: rgb(246, 193, 119); 31 | --rp-rose: rgb(235, 188, 186); 32 | --rp-pine: rgb(49, 116, 143); 33 | --rp-foam: rgb(156, 207, 216); 34 | --rp-iris: rgb(196, 167, 231); 35 | --rp-highlight-low: rgb(33, 32, 46); 36 | --rp-highlight-med: rgb(64, 61, 82); 37 | --rp-highlight-high: rgb(82, 79, 103); 38 | 39 | /* Rosé Pine Moon */ 40 | /* --rp-base: rgb(35, 33, 54); */ 41 | /* --rp-surface: rgb(42, 39, 63); */ 42 | /* --rp-overlay: rgb(57, 53, 82); */ 43 | /* --rp-muted: rgb(110, 106, 134); */ 44 | /* --rp-subtle: rgb(144, 140, 170); */ 45 | /* --rp-text: rgb(224, 222, 244); */ 46 | /* --rp-love: rgb(235, 111, 146); */ 47 | /* --rp-gold: rgb(246, 193, 119); */ 48 | /* --rp-rose: rgb(234, 154, 151); */ 49 | /* --rp-pine: rgb(62, 143, 176); */ 50 | /* --rp-foam: rgb(156, 207, 216); */ 51 | /* --rp-iris: rgb(196, 167, 231); */ 52 | /* --rp-highlight-low: rgb(42, 40, 62); */ 53 | /* --rp-highlight-med: rgb(68, 65, 90); */ 54 | /* --rp-highlight-high: rgb(86, 82, 110); */ 55 | } 56 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-media-tailwind.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Rosé Pine Dawn */ 3 | --rp-base: 32 57 95; 4 | --rp-surface: 35 100 98; 5 | --rp-overlay: 33 43 91; 6 | --rp-muted: 257 9 61; 7 | --rp-subtle: 248 12 52; 8 | --rp-text: 248 19 40; 9 | --rp-love: 343 35 55; 10 | --rp-gold: 35 81 56; 11 | --rp-rose: 3 53 67; 12 | --rp-pine: 197 53 34; 13 | --rp-foam: 189 30 48; 14 | --rp-iris: 268 21 57; 15 | --rp-highlight-low: 25 35 93; 16 | --rp-highlight-med: 10 9 86; 17 | --rp-highlight-high: 315 4 80; 18 | } 19 | 20 | @media (prefers-color-scheme: dark) { 21 | :root { 22 | /* Rosé Pine */ 23 | --rp-base: 249 22 12; 24 | --rp-surface: 247 23 15; 25 | --rp-overlay: 248 25 18; 26 | --rp-muted: 249 12 47; 27 | --rp-subtle: 248 15 61; 28 | --rp-text: 245 50 91; 29 | --rp-love: 343 76 68; 30 | --rp-gold: 35 88 72; 31 | --rp-rose: 2 55 83; 32 | --rp-pine: 197 49 38; 33 | --rp-foam: 189 43 73; 34 | --rp-iris: 267 57 78; 35 | --rp-highlight-low: 244 18 15; 36 | --rp-highlight-med: 249 15 28; 37 | --rp-highlight-high: 248 13 36; 38 | 39 | /* Rosé Pine Moon */ 40 | /* --rp-base: 246 24 17; */ 41 | /* --rp-surface: 248 24 20; */ 42 | /* --rp-overlay: 248 21 26; */ 43 | /* --rp-muted: 249 12 47; */ 44 | /* --rp-subtle: 248 15 61; */ 45 | /* --rp-text: 245 50 91; */ 46 | /* --rp-love: 343 76 68; */ 47 | /* --rp-gold: 35 88 72; */ 48 | /* --rp-rose: 2 66 75; */ 49 | /* --rp-pine: 197 48 47; */ 50 | /* --rp-foam: 189 43 73; */ 51 | /* --rp-iris: 267 57 78; */ 52 | /* --rp-highlight-low: 245 22 20; */ 53 | /* --rp-highlight-med: 247 16 30; */ 54 | /* --rp-highlight-high: 249 15 38; */ 55 | } 56 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-media.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Rosé Pine Dawn */ 3 | --rp-base: #faf4ed; 4 | --rp-surface: #fffaf3; 5 | --rp-overlay: #f2e9e1; 6 | --rp-muted: #9893a5; 7 | --rp-subtle: #797593; 8 | --rp-text: #575279; 9 | --rp-love: #b4637a; 10 | --rp-gold: #ea9d34; 11 | --rp-rose: #d7827e; 12 | --rp-pine: #286983; 13 | --rp-foam: #56949f; 14 | --rp-iris: #907aa9; 15 | --rp-highlight-low: #f4ede8; 16 | --rp-highlight-med: #dfdad9; 17 | --rp-highlight-high: #cecacd; 18 | } 19 | 20 | @media (prefers-color-scheme: dark) { 21 | :root { 22 | /* Rosé Pine */ 23 | --rp-base: #191724; 24 | --rp-surface: #1f1d2e; 25 | --rp-overlay: #26233a; 26 | --rp-muted: #6e6a86; 27 | --rp-subtle: #908caa; 28 | --rp-text: #e0def4; 29 | --rp-love: #eb6f92; 30 | --rp-gold: #f6c177; 31 | --rp-rose: #ebbcba; 32 | --rp-pine: #31748f; 33 | --rp-foam: #9ccfd8; 34 | --rp-iris: #c4a7e7; 35 | --rp-highlight-low: #21202e; 36 | --rp-highlight-med: #403d52; 37 | --rp-highlight-high: #524f67; 38 | 39 | /* Rosé Pine Moon */ 40 | /* --rp-base: #232136; */ 41 | /* --rp-surface: #2a273f; */ 42 | /* --rp-overlay: #393552; */ 43 | /* --rp-muted: #6e6a86; */ 44 | /* --rp-subtle: #908caa; */ 45 | /* --rp-text: #e0def4; */ 46 | /* --rp-love: #eb6f92; */ 47 | /* --rp-gold: #f6c177; */ 48 | /* --rp-rose: #ea9a97; */ 49 | /* --rp-pine: #3e8fb0; */ 50 | /* --rp-foam: #9ccfd8; */ 51 | /* --rp-iris: #c4a7e7; */ 52 | /* --rp-highlight-low: #2a283e; */ 53 | /* --rp-highlight-med: #44415a; */ 54 | /* --rp-highlight-high: #56526e; */ 55 | } 56 | } -------------------------------------------------------------------------------- /dist/css/rose-pine-rgb.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --rp-base: rgb(25, 23, 36); 3 | --rp-surface: rgb(31, 29, 46); 4 | --rp-overlay: rgb(38, 35, 58); 5 | --rp-muted: rgb(110, 106, 134); 6 | --rp-subtle: rgb(144, 140, 170); 7 | --rp-text: rgb(224, 222, 244); 8 | --rp-love: rgb(235, 111, 146); 9 | --rp-gold: rgb(246, 193, 119); 10 | --rp-rose: rgb(235, 188, 186); 11 | --rp-pine: rgb(49, 116, 143); 12 | --rp-foam: rgb(156, 207, 216); 13 | --rp-iris: rgb(196, 167, 231); 14 | --rp-highlight-low: rgb(33, 32, 46); 15 | --rp-highlight-med: rgb(64, 61, 82); 16 | --rp-highlight-high: rgb(82, 79, 103); 17 | 18 | --rp-moon-base: rgb(35, 33, 54); 19 | --rp-moon-surface: rgb(42, 39, 63); 20 | --rp-moon-overlay: rgb(57, 53, 82); 21 | --rp-moon-muted: rgb(110, 106, 134); 22 | --rp-moon-subtle: rgb(144, 140, 170); 23 | --rp-moon-text: rgb(224, 222, 244); 24 | --rp-moon-love: rgb(235, 111, 146); 25 | --rp-moon-gold: rgb(246, 193, 119); 26 | --rp-moon-rose: rgb(234, 154, 151); 27 | --rp-moon-pine: rgb(62, 143, 176); 28 | --rp-moon-foam: rgb(156, 207, 216); 29 | --rp-moon-iris: rgb(196, 167, 231); 30 | --rp-moon-highlight-low: rgb(42, 40, 62); 31 | --rp-moon-highlight-med: rgb(68, 65, 90); 32 | --rp-moon-highlight-high: rgb(86, 82, 110); 33 | 34 | --rp-dawn-base: rgb(250, 244, 237); 35 | --rp-dawn-surface: rgb(255, 250, 243); 36 | --rp-dawn-overlay: rgb(242, 233, 222); 37 | --rp-dawn-muted: rgb(152, 147, 165); 38 | --rp-dawn-subtle: rgb(121, 117, 147); 39 | --rp-dawn-text: rgb(87, 82, 121); 40 | --rp-dawn-love: rgb(180, 99, 122); 41 | --rp-dawn-gold: rgb(234, 157, 52); 42 | --rp-dawn-rose: rgb(215, 130, 126); 43 | --rp-dawn-pine: rgb(40, 105, 131); 44 | --rp-dawn-foam: rgb(86, 148, 159); 45 | --rp-dawn-iris: rgb(144, 122, 169); 46 | --rp-dawn-highlight-low: rgb(244, 237, 232); 47 | --rp-dawn-highlight-med: rgb(223, 218, 217); 48 | --rp-dawn-highlight-high: rgb(206, 202, 205); 49 | } -------------------------------------------------------------------------------- /dist/css/rose-pine.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --rp-base: #191724; 3 | --rp-surface: #1f1d2e; 4 | --rp-overlay: #26233a; 5 | --rp-muted: #6e6a86; 6 | --rp-subtle: #908caa; 7 | --rp-text: #e0def4; 8 | --rp-love: #eb6f92; 9 | --rp-gold: #f6c177; 10 | --rp-rose: #ebbcba; 11 | --rp-pine: #31748f; 12 | --rp-foam: #9ccfd8; 13 | --rp-iris: #c4a7e7; 14 | --rp-highlight-low: #21202e; 15 | --rp-highlight-med: #403d52; 16 | --rp-highlight-high: #524f67; 17 | 18 | --rp-moon-base: #232136; 19 | --rp-moon-surface: #2a273f; 20 | --rp-moon-overlay: #393552; 21 | --rp-moon-muted: #6e6a86; 22 | --rp-moon-subtle: #908caa; 23 | --rp-moon-text: #e0def4; 24 | --rp-moon-love: #eb6f92; 25 | --rp-moon-gold: #f6c177; 26 | --rp-moon-rose: #ea9a97; 27 | --rp-moon-pine: #3e8fb0; 28 | --rp-moon-foam: #9ccfd8; 29 | --rp-moon-iris: #c4a7e7; 30 | --rp-moon-highlight-low: #2a283e; 31 | --rp-moon-highlight-med: #44415a; 32 | --rp-moon-highlight-high: #56526e; 33 | 34 | --rp-dawn-base: #faf4ed; 35 | --rp-dawn-surface: #fffaf3; 36 | --rp-dawn-overlay: #f2e9e1; 37 | --rp-dawn-muted: #9893a5; 38 | --rp-dawn-subtle: #797593; 39 | --rp-dawn-text: #575279; 40 | --rp-dawn-love: #b4637a; 41 | --rp-dawn-gold: #ea9d34; 42 | --rp-dawn-rose: #d7827e; 43 | --rp-dawn-pine: #286983; 44 | --rp-dawn-foam: #56949f; 45 | --rp-dawn-iris: #907aa9; 46 | --rp-dawn-highlight-low: #f4ede8; 47 | --rp-dawn-highlight-med: #dfdad9; 48 | --rp-dawn-highlight-high: #cecacd; 49 | } -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | declare const variantColors: { 2 | main: { 3 | base: { 4 | hex: string; 5 | rgb: number[]; 6 | hsl: number[]; 7 | }; 8 | surface: { 9 | hex: string; 10 | rgb: number[]; 11 | hsl: number[]; 12 | }; 13 | overlay: { 14 | hex: string; 15 | rgb: number[]; 16 | hsl: number[]; 17 | }; 18 | muted: { 19 | hex: string; 20 | rgb: number[]; 21 | hsl: number[]; 22 | }; 23 | subtle: { 24 | hex: string; 25 | rgb: number[]; 26 | hsl: number[]; 27 | }; 28 | text: { 29 | hex: string; 30 | rgb: number[]; 31 | hsl: number[]; 32 | }; 33 | love: { 34 | hex: string; 35 | rgb: number[]; 36 | hsl: number[]; 37 | }; 38 | gold: { 39 | hex: string; 40 | rgb: number[]; 41 | hsl: number[]; 42 | }; 43 | rose: { 44 | hex: string; 45 | rgb: number[]; 46 | hsl: number[]; 47 | }; 48 | pine: { 49 | hex: string; 50 | rgb: number[]; 51 | hsl: number[]; 52 | }; 53 | foam: { 54 | hex: string; 55 | rgb: number[]; 56 | hsl: number[]; 57 | }; 58 | iris: { 59 | hex: string; 60 | rgb: number[]; 61 | hsl: number[]; 62 | }; 63 | highlightLow: { 64 | hex: string; 65 | rgb: number[]; 66 | hsl: number[]; 67 | alpha: { 68 | hex: string; 69 | rgb: number[]; 70 | hsl: number[]; 71 | }; 72 | }; 73 | highlightMed: { 74 | hex: string; 75 | rgb: number[]; 76 | hsl: number[]; 77 | alpha: { 78 | hex: string; 79 | rgb: number[]; 80 | hsl: number[]; 81 | }; 82 | }; 83 | highlightHigh: { 84 | hex: string; 85 | rgb: number[]; 86 | hsl: number[]; 87 | alpha: { 88 | hex: string; 89 | rgb: number[]; 90 | hsl: number[]; 91 | }; 92 | }; 93 | }; 94 | moon: { 95 | base: { 96 | hex: string; 97 | rgb: number[]; 98 | hsl: number[]; 99 | }; 100 | surface: { 101 | hex: string; 102 | rgb: number[]; 103 | hsl: number[]; 104 | }; 105 | overlay: { 106 | hex: string; 107 | rgb: number[]; 108 | hsl: number[]; 109 | }; 110 | muted: { 111 | hex: string; 112 | rgb: number[]; 113 | hsl: number[]; 114 | }; 115 | subtle: { 116 | hex: string; 117 | rgb: number[]; 118 | hsl: number[]; 119 | }; 120 | text: { 121 | hex: string; 122 | rgb: number[]; 123 | hsl: number[]; 124 | }; 125 | love: { 126 | hex: string; 127 | rgb: number[]; 128 | hsl: number[]; 129 | }; 130 | gold: { 131 | hex: string; 132 | rgb: number[]; 133 | hsl: number[]; 134 | }; 135 | rose: { 136 | hex: string; 137 | rgb: number[]; 138 | hsl: number[]; 139 | }; 140 | pine: { 141 | hex: string; 142 | rgb: number[]; 143 | hsl: number[]; 144 | }; 145 | foam: { 146 | hex: string; 147 | rgb: number[]; 148 | hsl: number[]; 149 | }; 150 | iris: { 151 | hex: string; 152 | rgb: number[]; 153 | hsl: number[]; 154 | }; 155 | highlightLow: { 156 | hex: string; 157 | rgb: number[]; 158 | hsl: number[]; 159 | alpha: { 160 | hex: string; 161 | rgb: number[]; 162 | hsl: number[]; 163 | }; 164 | }; 165 | highlightMed: { 166 | hex: string; 167 | rgb: number[]; 168 | hsl: number[]; 169 | alpha: { 170 | hex: string; 171 | rgb: number[]; 172 | hsl: number[]; 173 | }; 174 | }; 175 | highlightHigh: { 176 | hex: string; 177 | rgb: number[]; 178 | hsl: number[]; 179 | alpha: { 180 | hex: string; 181 | rgb: number[]; 182 | hsl: number[]; 183 | }; 184 | }; 185 | }; 186 | dawn: { 187 | base: { 188 | hex: string; 189 | rgb: number[]; 190 | hsl: number[]; 191 | }; 192 | surface: { 193 | hex: string; 194 | rgb: number[]; 195 | hsl: number[]; 196 | }; 197 | overlay: { 198 | hex: string; 199 | rgb: number[]; 200 | hsl: number[]; 201 | }; 202 | muted: { 203 | hex: string; 204 | rgb: number[]; 205 | hsl: number[]; 206 | }; 207 | subtle: { 208 | hex: string; 209 | rgb: number[]; 210 | hsl: number[]; 211 | }; 212 | text: { 213 | hex: string; 214 | rgb: number[]; 215 | hsl: number[]; 216 | }; 217 | love: { 218 | hex: string; 219 | rgb: number[]; 220 | hsl: number[]; 221 | }; 222 | gold: { 223 | hex: string; 224 | rgb: number[]; 225 | hsl: number[]; 226 | }; 227 | rose: { 228 | hex: string; 229 | rgb: number[]; 230 | hsl: number[]; 231 | }; 232 | pine: { 233 | hex: string; 234 | rgb: number[]; 235 | hsl: number[]; 236 | }; 237 | foam: { 238 | hex: string; 239 | rgb: number[]; 240 | hsl: number[]; 241 | }; 242 | iris: { 243 | hex: string; 244 | rgb: number[]; 245 | hsl: number[]; 246 | }; 247 | highlightLow: { 248 | hex: string; 249 | rgb: number[]; 250 | hsl: number[]; 251 | alpha: { 252 | hex: string; 253 | rgb: number[]; 254 | hsl: number[]; 255 | }; 256 | }; 257 | highlightMed: { 258 | hex: string; 259 | rgb: number[]; 260 | hsl: number[]; 261 | alpha: { 262 | hex: string; 263 | rgb: number[]; 264 | hsl: number[]; 265 | }; 266 | }; 267 | highlightHigh: { 268 | hex: string; 269 | rgb: number[]; 270 | hsl: number[]; 271 | alpha: { 272 | hex: string; 273 | rgb: number[]; 274 | hsl: number[]; 275 | }; 276 | }; 277 | }; 278 | }; 279 | declare const roleColors: { 280 | base: { 281 | main: { 282 | hex: string; 283 | rgb: number[]; 284 | hsl: number[]; 285 | }; 286 | moon: { 287 | hex: string; 288 | rgb: number[]; 289 | hsl: number[]; 290 | }; 291 | dawn: { 292 | hex: string; 293 | rgb: number[]; 294 | hsl: number[]; 295 | }; 296 | }; 297 | surface: { 298 | main: { 299 | hex: string; 300 | rgb: number[]; 301 | hsl: number[]; 302 | }; 303 | moon: { 304 | hex: string; 305 | rgb: number[]; 306 | hsl: number[]; 307 | }; 308 | dawn: { 309 | hex: string; 310 | rgb: number[]; 311 | hsl: number[]; 312 | }; 313 | }; 314 | overlay: { 315 | main: { 316 | hex: string; 317 | rgb: number[]; 318 | hsl: number[]; 319 | }; 320 | moon: { 321 | hex: string; 322 | rgb: number[]; 323 | hsl: number[]; 324 | }; 325 | dawn: { 326 | hex: string; 327 | rgb: number[]; 328 | hsl: number[]; 329 | }; 330 | }; 331 | muted: { 332 | main: { 333 | hex: string; 334 | rgb: number[]; 335 | hsl: number[]; 336 | }; 337 | moon: { 338 | hex: string; 339 | rgb: number[]; 340 | hsl: number[]; 341 | }; 342 | dawn: { 343 | hex: string; 344 | rgb: number[]; 345 | hsl: number[]; 346 | }; 347 | }; 348 | subtle: { 349 | main: { 350 | hex: string; 351 | rgb: number[]; 352 | hsl: number[]; 353 | }; 354 | moon: { 355 | hex: string; 356 | rgb: number[]; 357 | hsl: number[]; 358 | }; 359 | dawn: { 360 | hex: string; 361 | rgb: number[]; 362 | hsl: number[]; 363 | }; 364 | }; 365 | text: { 366 | main: { 367 | hex: string; 368 | rgb: number[]; 369 | hsl: number[]; 370 | }; 371 | moon: { 372 | hex: string; 373 | rgb: number[]; 374 | hsl: number[]; 375 | }; 376 | dawn: { 377 | hex: string; 378 | rgb: number[]; 379 | hsl: number[]; 380 | }; 381 | }; 382 | love: { 383 | main: { 384 | hex: string; 385 | rgb: number[]; 386 | hsl: number[]; 387 | }; 388 | moon: { 389 | hex: string; 390 | rgb: number[]; 391 | hsl: number[]; 392 | }; 393 | dawn: { 394 | hex: string; 395 | rgb: number[]; 396 | hsl: number[]; 397 | }; 398 | }; 399 | gold: { 400 | main: { 401 | hex: string; 402 | rgb: number[]; 403 | hsl: number[]; 404 | }; 405 | moon: { 406 | hex: string; 407 | rgb: number[]; 408 | hsl: number[]; 409 | }; 410 | dawn: { 411 | hex: string; 412 | rgb: number[]; 413 | hsl: number[]; 414 | }; 415 | }; 416 | rose: { 417 | main: { 418 | hex: string; 419 | rgb: number[]; 420 | hsl: number[]; 421 | }; 422 | moon: { 423 | hex: string; 424 | rgb: number[]; 425 | hsl: number[]; 426 | }; 427 | dawn: { 428 | hex: string; 429 | rgb: number[]; 430 | hsl: number[]; 431 | }; 432 | }; 433 | pine: { 434 | main: { 435 | hex: string; 436 | rgb: number[]; 437 | hsl: number[]; 438 | }; 439 | moon: { 440 | hex: string; 441 | rgb: number[]; 442 | hsl: number[]; 443 | }; 444 | dawn: { 445 | hex: string; 446 | rgb: number[]; 447 | hsl: number[]; 448 | }; 449 | }; 450 | foam: { 451 | main: { 452 | hex: string; 453 | rgb: number[]; 454 | hsl: number[]; 455 | }; 456 | moon: { 457 | hex: string; 458 | rgb: number[]; 459 | hsl: number[]; 460 | }; 461 | dawn: { 462 | hex: string; 463 | rgb: number[]; 464 | hsl: number[]; 465 | }; 466 | }; 467 | iris: { 468 | main: { 469 | hex: string; 470 | rgb: number[]; 471 | hsl: number[]; 472 | }; 473 | moon: { 474 | hex: string; 475 | rgb: number[]; 476 | hsl: number[]; 477 | }; 478 | dawn: { 479 | hex: string; 480 | rgb: number[]; 481 | hsl: number[]; 482 | }; 483 | }; 484 | highlightLow: { 485 | main: { 486 | hex: string; 487 | rgb: number[]; 488 | hsl: number[]; 489 | alpha: { 490 | hex: string; 491 | rgb: number[]; 492 | hsl: number[]; 493 | }; 494 | }; 495 | moon: { 496 | hex: string; 497 | rgb: number[]; 498 | hsl: number[]; 499 | alpha: { 500 | hex: string; 501 | rgb: number[]; 502 | hsl: number[]; 503 | }; 504 | }; 505 | dawn: { 506 | hex: string; 507 | rgb: number[]; 508 | hsl: number[]; 509 | alpha: { 510 | hex: string; 511 | rgb: number[]; 512 | hsl: number[]; 513 | }; 514 | }; 515 | }; 516 | highlightMed: { 517 | main: { 518 | hex: string; 519 | rgb: number[]; 520 | hsl: number[]; 521 | alpha: { 522 | hex: string; 523 | rgb: number[]; 524 | hsl: number[]; 525 | }; 526 | }; 527 | moon: { 528 | hex: string; 529 | rgb: number[]; 530 | hsl: number[]; 531 | alpha: { 532 | hex: string; 533 | rgb: number[]; 534 | hsl: number[]; 535 | }; 536 | }; 537 | dawn: { 538 | hex: string; 539 | rgb: number[]; 540 | hsl: number[]; 541 | alpha: { 542 | hex: string; 543 | rgb: number[]; 544 | hsl: number[]; 545 | }; 546 | }; 547 | }; 548 | highlightHigh: { 549 | main: { 550 | hex: string; 551 | rgb: number[]; 552 | hsl: number[]; 553 | alpha: { 554 | hex: string; 555 | rgb: number[]; 556 | hsl: number[]; 557 | }; 558 | }; 559 | moon: { 560 | hex: string; 561 | rgb: number[]; 562 | hsl: number[]; 563 | alpha: { 564 | hex: string; 565 | rgb: number[]; 566 | hsl: number[]; 567 | }; 568 | }; 569 | dawn: { 570 | hex: string; 571 | rgb: number[]; 572 | hsl: number[]; 573 | alpha: { 574 | hex: string; 575 | rgb: number[]; 576 | hsl: number[]; 577 | }; 578 | }; 579 | }; 580 | }; 581 | declare const variants: { 582 | main: { 583 | id: string; 584 | key: string; 585 | name: string; 586 | colors: { 587 | base: { 588 | hex: string; 589 | rgb: number[]; 590 | hsl: number[]; 591 | }; 592 | surface: { 593 | hex: string; 594 | rgb: number[]; 595 | hsl: number[]; 596 | }; 597 | overlay: { 598 | hex: string; 599 | rgb: number[]; 600 | hsl: number[]; 601 | }; 602 | muted: { 603 | hex: string; 604 | rgb: number[]; 605 | hsl: number[]; 606 | }; 607 | subtle: { 608 | hex: string; 609 | rgb: number[]; 610 | hsl: number[]; 611 | }; 612 | text: { 613 | hex: string; 614 | rgb: number[]; 615 | hsl: number[]; 616 | }; 617 | love: { 618 | hex: string; 619 | rgb: number[]; 620 | hsl: number[]; 621 | }; 622 | gold: { 623 | hex: string; 624 | rgb: number[]; 625 | hsl: number[]; 626 | }; 627 | rose: { 628 | hex: string; 629 | rgb: number[]; 630 | hsl: number[]; 631 | }; 632 | pine: { 633 | hex: string; 634 | rgb: number[]; 635 | hsl: number[]; 636 | }; 637 | foam: { 638 | hex: string; 639 | rgb: number[]; 640 | hsl: number[]; 641 | }; 642 | iris: { 643 | hex: string; 644 | rgb: number[]; 645 | hsl: number[]; 646 | }; 647 | highlightLow: { 648 | hex: string; 649 | rgb: number[]; 650 | hsl: number[]; 651 | alpha: { 652 | hex: string; 653 | rgb: number[]; 654 | hsl: number[]; 655 | }; 656 | }; 657 | highlightMed: { 658 | hex: string; 659 | rgb: number[]; 660 | hsl: number[]; 661 | alpha: { 662 | hex: string; 663 | rgb: number[]; 664 | hsl: number[]; 665 | }; 666 | }; 667 | highlightHigh: { 668 | hex: string; 669 | rgb: number[]; 670 | hsl: number[]; 671 | alpha: { 672 | hex: string; 673 | rgb: number[]; 674 | hsl: number[]; 675 | }; 676 | }; 677 | }; 678 | }; 679 | moon: { 680 | id: string; 681 | key: string; 682 | name: string; 683 | colors: { 684 | base: { 685 | hex: string; 686 | rgb: number[]; 687 | hsl: number[]; 688 | }; 689 | surface: { 690 | hex: string; 691 | rgb: number[]; 692 | hsl: number[]; 693 | }; 694 | overlay: { 695 | hex: string; 696 | rgb: number[]; 697 | hsl: number[]; 698 | }; 699 | muted: { 700 | hex: string; 701 | rgb: number[]; 702 | hsl: number[]; 703 | }; 704 | subtle: { 705 | hex: string; 706 | rgb: number[]; 707 | hsl: number[]; 708 | }; 709 | text: { 710 | hex: string; 711 | rgb: number[]; 712 | hsl: number[]; 713 | }; 714 | love: { 715 | hex: string; 716 | rgb: number[]; 717 | hsl: number[]; 718 | }; 719 | gold: { 720 | hex: string; 721 | rgb: number[]; 722 | hsl: number[]; 723 | }; 724 | rose: { 725 | hex: string; 726 | rgb: number[]; 727 | hsl: number[]; 728 | }; 729 | pine: { 730 | hex: string; 731 | rgb: number[]; 732 | hsl: number[]; 733 | }; 734 | foam: { 735 | hex: string; 736 | rgb: number[]; 737 | hsl: number[]; 738 | }; 739 | iris: { 740 | hex: string; 741 | rgb: number[]; 742 | hsl: number[]; 743 | }; 744 | highlightLow: { 745 | hex: string; 746 | rgb: number[]; 747 | hsl: number[]; 748 | alpha: { 749 | hex: string; 750 | rgb: number[]; 751 | hsl: number[]; 752 | }; 753 | }; 754 | highlightMed: { 755 | hex: string; 756 | rgb: number[]; 757 | hsl: number[]; 758 | alpha: { 759 | hex: string; 760 | rgb: number[]; 761 | hsl: number[]; 762 | }; 763 | }; 764 | highlightHigh: { 765 | hex: string; 766 | rgb: number[]; 767 | hsl: number[]; 768 | alpha: { 769 | hex: string; 770 | rgb: number[]; 771 | hsl: number[]; 772 | }; 773 | }; 774 | }; 775 | }; 776 | dawn: { 777 | id: string; 778 | key: string; 779 | name: string; 780 | colors: { 781 | base: { 782 | hex: string; 783 | rgb: number[]; 784 | hsl: number[]; 785 | }; 786 | surface: { 787 | hex: string; 788 | rgb: number[]; 789 | hsl: number[]; 790 | }; 791 | overlay: { 792 | hex: string; 793 | rgb: number[]; 794 | hsl: number[]; 795 | }; 796 | muted: { 797 | hex: string; 798 | rgb: number[]; 799 | hsl: number[]; 800 | }; 801 | subtle: { 802 | hex: string; 803 | rgb: number[]; 804 | hsl: number[]; 805 | }; 806 | text: { 807 | hex: string; 808 | rgb: number[]; 809 | hsl: number[]; 810 | }; 811 | love: { 812 | hex: string; 813 | rgb: number[]; 814 | hsl: number[]; 815 | }; 816 | gold: { 817 | hex: string; 818 | rgb: number[]; 819 | hsl: number[]; 820 | }; 821 | rose: { 822 | hex: string; 823 | rgb: number[]; 824 | hsl: number[]; 825 | }; 826 | pine: { 827 | hex: string; 828 | rgb: number[]; 829 | hsl: number[]; 830 | }; 831 | foam: { 832 | hex: string; 833 | rgb: number[]; 834 | hsl: number[]; 835 | }; 836 | iris: { 837 | hex: string; 838 | rgb: number[]; 839 | hsl: number[]; 840 | }; 841 | highlightLow: { 842 | hex: string; 843 | rgb: number[]; 844 | hsl: number[]; 845 | alpha: { 846 | hex: string; 847 | rgb: number[]; 848 | hsl: number[]; 849 | }; 850 | }; 851 | highlightMed: { 852 | hex: string; 853 | rgb: number[]; 854 | hsl: number[]; 855 | alpha: { 856 | hex: string; 857 | rgb: number[]; 858 | hsl: number[]; 859 | }; 860 | }; 861 | highlightHigh: { 862 | hex: string; 863 | rgb: number[]; 864 | hsl: number[]; 865 | alpha: { 866 | hex: string; 867 | rgb: number[]; 868 | hsl: number[]; 869 | }; 870 | }; 871 | }; 872 | }; 873 | }; 874 | declare const roles: { 875 | base: { 876 | id: string; 877 | key: string; 878 | name: string; 879 | colors: { 880 | main: { 881 | hex: string; 882 | rgb: number[]; 883 | hsl: number[]; 884 | }; 885 | moon: { 886 | hex: string; 887 | rgb: number[]; 888 | hsl: number[]; 889 | }; 890 | dawn: { 891 | hex: string; 892 | rgb: number[]; 893 | hsl: number[]; 894 | }; 895 | }; 896 | }; 897 | surface: { 898 | id: string; 899 | key: string; 900 | name: string; 901 | colors: { 902 | main: { 903 | hex: string; 904 | rgb: number[]; 905 | hsl: number[]; 906 | }; 907 | moon: { 908 | hex: string; 909 | rgb: number[]; 910 | hsl: number[]; 911 | }; 912 | dawn: { 913 | hex: string; 914 | rgb: number[]; 915 | hsl: number[]; 916 | }; 917 | }; 918 | }; 919 | overlay: { 920 | id: string; 921 | key: string; 922 | name: string; 923 | colors: { 924 | main: { 925 | hex: string; 926 | rgb: number[]; 927 | hsl: number[]; 928 | }; 929 | moon: { 930 | hex: string; 931 | rgb: number[]; 932 | hsl: number[]; 933 | }; 934 | dawn: { 935 | hex: string; 936 | rgb: number[]; 937 | hsl: number[]; 938 | }; 939 | }; 940 | }; 941 | muted: { 942 | id: string; 943 | key: string; 944 | name: string; 945 | colors: { 946 | main: { 947 | hex: string; 948 | rgb: number[]; 949 | hsl: number[]; 950 | }; 951 | moon: { 952 | hex: string; 953 | rgb: number[]; 954 | hsl: number[]; 955 | }; 956 | dawn: { 957 | hex: string; 958 | rgb: number[]; 959 | hsl: number[]; 960 | }; 961 | }; 962 | }; 963 | subtle: { 964 | id: string; 965 | key: string; 966 | name: string; 967 | colors: { 968 | main: { 969 | hex: string; 970 | rgb: number[]; 971 | hsl: number[]; 972 | }; 973 | moon: { 974 | hex: string; 975 | rgb: number[]; 976 | hsl: number[]; 977 | }; 978 | dawn: { 979 | hex: string; 980 | rgb: number[]; 981 | hsl: number[]; 982 | }; 983 | }; 984 | }; 985 | text: { 986 | id: string; 987 | key: string; 988 | name: string; 989 | colors: { 990 | main: { 991 | hex: string; 992 | rgb: number[]; 993 | hsl: number[]; 994 | }; 995 | moon: { 996 | hex: string; 997 | rgb: number[]; 998 | hsl: number[]; 999 | }; 1000 | dawn: { 1001 | hex: string; 1002 | rgb: number[]; 1003 | hsl: number[]; 1004 | }; 1005 | }; 1006 | }; 1007 | love: { 1008 | id: string; 1009 | key: string; 1010 | name: string; 1011 | colors: { 1012 | main: { 1013 | hex: string; 1014 | rgb: number[]; 1015 | hsl: number[]; 1016 | }; 1017 | moon: { 1018 | hex: string; 1019 | rgb: number[]; 1020 | hsl: number[]; 1021 | }; 1022 | dawn: { 1023 | hex: string; 1024 | rgb: number[]; 1025 | hsl: number[]; 1026 | }; 1027 | }; 1028 | }; 1029 | gold: { 1030 | id: string; 1031 | key: string; 1032 | name: string; 1033 | colors: { 1034 | main: { 1035 | hex: string; 1036 | rgb: number[]; 1037 | hsl: number[]; 1038 | }; 1039 | moon: { 1040 | hex: string; 1041 | rgb: number[]; 1042 | hsl: number[]; 1043 | }; 1044 | dawn: { 1045 | hex: string; 1046 | rgb: number[]; 1047 | hsl: number[]; 1048 | }; 1049 | }; 1050 | }; 1051 | rose: { 1052 | id: string; 1053 | key: string; 1054 | name: string; 1055 | colors: { 1056 | main: { 1057 | hex: string; 1058 | rgb: number[]; 1059 | hsl: number[]; 1060 | }; 1061 | moon: { 1062 | hex: string; 1063 | rgb: number[]; 1064 | hsl: number[]; 1065 | }; 1066 | dawn: { 1067 | hex: string; 1068 | rgb: number[]; 1069 | hsl: number[]; 1070 | }; 1071 | }; 1072 | }; 1073 | pine: { 1074 | id: string; 1075 | key: string; 1076 | name: string; 1077 | colors: { 1078 | main: { 1079 | hex: string; 1080 | rgb: number[]; 1081 | hsl: number[]; 1082 | }; 1083 | moon: { 1084 | hex: string; 1085 | rgb: number[]; 1086 | hsl: number[]; 1087 | }; 1088 | dawn: { 1089 | hex: string; 1090 | rgb: number[]; 1091 | hsl: number[]; 1092 | }; 1093 | }; 1094 | }; 1095 | foam: { 1096 | id: string; 1097 | key: string; 1098 | name: string; 1099 | colors: { 1100 | main: { 1101 | hex: string; 1102 | rgb: number[]; 1103 | hsl: number[]; 1104 | }; 1105 | moon: { 1106 | hex: string; 1107 | rgb: number[]; 1108 | hsl: number[]; 1109 | }; 1110 | dawn: { 1111 | hex: string; 1112 | rgb: number[]; 1113 | hsl: number[]; 1114 | }; 1115 | }; 1116 | }; 1117 | iris: { 1118 | id: string; 1119 | key: string; 1120 | name: string; 1121 | colors: { 1122 | main: { 1123 | hex: string; 1124 | rgb: number[]; 1125 | hsl: number[]; 1126 | }; 1127 | moon: { 1128 | hex: string; 1129 | rgb: number[]; 1130 | hsl: number[]; 1131 | }; 1132 | dawn: { 1133 | hex: string; 1134 | rgb: number[]; 1135 | hsl: number[]; 1136 | }; 1137 | }; 1138 | }; 1139 | highlightLow: { 1140 | id: string; 1141 | key: string; 1142 | name: string; 1143 | colors: { 1144 | main: { 1145 | hex: string; 1146 | rgb: number[]; 1147 | hsl: number[]; 1148 | alpha: { 1149 | hex: string; 1150 | rgb: number[]; 1151 | hsl: number[]; 1152 | }; 1153 | }; 1154 | moon: { 1155 | hex: string; 1156 | rgb: number[]; 1157 | hsl: number[]; 1158 | alpha: { 1159 | hex: string; 1160 | rgb: number[]; 1161 | hsl: number[]; 1162 | }; 1163 | }; 1164 | dawn: { 1165 | hex: string; 1166 | rgb: number[]; 1167 | hsl: number[]; 1168 | alpha: { 1169 | hex: string; 1170 | rgb: number[]; 1171 | hsl: number[]; 1172 | }; 1173 | }; 1174 | }; 1175 | }; 1176 | highlightMed: { 1177 | id: string; 1178 | key: string; 1179 | name: string; 1180 | colors: { 1181 | main: { 1182 | hex: string; 1183 | rgb: number[]; 1184 | hsl: number[]; 1185 | alpha: { 1186 | hex: string; 1187 | rgb: number[]; 1188 | hsl: number[]; 1189 | }; 1190 | }; 1191 | moon: { 1192 | hex: string; 1193 | rgb: number[]; 1194 | hsl: number[]; 1195 | alpha: { 1196 | hex: string; 1197 | rgb: number[]; 1198 | hsl: number[]; 1199 | }; 1200 | }; 1201 | dawn: { 1202 | hex: string; 1203 | rgb: number[]; 1204 | hsl: number[]; 1205 | alpha: { 1206 | hex: string; 1207 | rgb: number[]; 1208 | hsl: number[]; 1209 | }; 1210 | }; 1211 | }; 1212 | }; 1213 | highlightHigh: { 1214 | id: string; 1215 | key: string; 1216 | name: string; 1217 | colors: { 1218 | main: { 1219 | hex: string; 1220 | rgb: number[]; 1221 | hsl: number[]; 1222 | alpha: { 1223 | hex: string; 1224 | rgb: number[]; 1225 | hsl: number[]; 1226 | }; 1227 | }; 1228 | moon: { 1229 | hex: string; 1230 | rgb: number[]; 1231 | hsl: number[]; 1232 | alpha: { 1233 | hex: string; 1234 | rgb: number[]; 1235 | hsl: number[]; 1236 | }; 1237 | }; 1238 | dawn: { 1239 | hex: string; 1240 | rgb: number[]; 1241 | hsl: number[]; 1242 | alpha: { 1243 | hex: string; 1244 | rgb: number[]; 1245 | hsl: number[]; 1246 | }; 1247 | }; 1248 | }; 1249 | }; 1250 | }; 1251 | declare const variantKeys: ("main" | "moon" | "dawn")[]; 1252 | declare const variantIds: ["rose-pine", "rose-pine-moon", "rose-pine-dawn"]; 1253 | declare const variantNames: ["Rosé Pine", "Rosé Pine Moon", "Rosé Pine Dawn"]; 1254 | declare const roleKeys: ("base" | "surface" | "overlay" | "muted" | "subtle" | "text" | "love" | "gold" | "rose" | "pine" | "foam" | "iris" | "highlightLow" | "highlightMed" | "highlightHigh")[]; 1255 | declare const roleIds: ("base" | "surface" | "overlay" | "muted" | "subtle" | "text" | "love" | "gold" | "rose" | "pine" | "foam" | "iris" | "highlight-low" | "highlight-med" | "highlight-high")[]; 1256 | declare const roleNames: [ 1257 | "Base", 1258 | "Surface", 1259 | "Overlay", 1260 | "Muted", 1261 | "Subtle", 1262 | "Text", 1263 | "Love", 1264 | "Gold", 1265 | "Rose", 1266 | "Pine", 1267 | "Foam", 1268 | "Iris", 1269 | "Highlight Low", 1270 | "Highlight Med", 1271 | "Highlight High" 1272 | ]; 1273 | declare const colorFormats: ["hex", "rgb", "hsl"]; 1274 | export type Variant = typeof variants.main; 1275 | export type VariantColors = Variant["colors"]; 1276 | export type Role = typeof roles.base; 1277 | export type RoleColors = Role["colors"]; 1278 | export type Color = RoleColors["main"]; 1279 | export { variants, variantIds, variantKeys, variantNames, variantColors, roles, roleIds, roleKeys, roleNames, roleColors, colorFormats, }; 1280 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | const objectKeys = Object.keys; 2 | const main = { 3 | base: { hex: "191724", rgb: [25, 23, 36], hsl: [249, 22, 12] }, 4 | surface: { hex: "1f1d2e", rgb: [31, 29, 46], hsl: [247, 23, 15] }, 5 | overlay: { hex: "26233a", rgb: [38, 35, 58], hsl: [248, 25, 18] }, 6 | muted: { hex: "6e6a86", rgb: [110, 106, 134], hsl: [249, 12, 47] }, 7 | subtle: { hex: "908caa", rgb: [144, 140, 170], hsl: [248, 15, 61] }, 8 | text: { hex: "e0def4", rgb: [224, 222, 244], hsl: [245, 50, 91] }, 9 | love: { hex: "eb6f92", rgb: [235, 111, 146], hsl: [343, 76, 68] }, 10 | gold: { hex: "f6c177", rgb: [246, 193, 119], hsl: [35, 88, 72] }, 11 | rose: { hex: "ebbcba", rgb: [235, 188, 186], hsl: [2, 55, 83] }, 12 | pine: { hex: "31748f", rgb: [49, 116, 143], hsl: [197, 49, 38] }, 13 | foam: { hex: "9ccfd8", rgb: [156, 207, 216], hsl: [189, 43, 73] }, 14 | iris: { hex: "c4a7e7", rgb: [196, 167, 231], hsl: [267, 57, 78] }, 15 | highlightLow: { 16 | hex: "21202e", 17 | rgb: [33, 32, 46], 18 | hsl: [244, 18, 15], 19 | alpha: { 20 | hex: "6e6a861a", 21 | rgb: [110, 106, 134, 0.1], 22 | hsl: [249, 12, 47, 0.1], 23 | }, 24 | }, 25 | highlightMed: { 26 | hex: "403d52", 27 | rgb: [64, 61, 82], 28 | hsl: [249, 15, 28], 29 | alpha: { 30 | hex: "6e6a8633", 31 | rgb: [110, 106, 134, 0.2], 32 | hsl: [249, 12, 47, 0.2], 33 | }, 34 | }, 35 | highlightHigh: { 36 | hex: "524f67", 37 | rgb: [82, 79, 103], 38 | hsl: [248, 13, 36], 39 | alpha: { 40 | hex: "6e6a8666", 41 | rgb: [110, 106, 134, 0.4], 42 | hsl: [249, 12, 47, 0.4], 43 | }, 44 | }, 45 | }; 46 | const moon = { 47 | base: { hex: "232136", rgb: [35, 33, 54], hsl: [246, 24, 17] }, 48 | surface: { hex: "2a273f", rgb: [42, 39, 63], hsl: [248, 24, 20] }, 49 | overlay: { hex: "393552", rgb: [57, 53, 82], hsl: [248, 21, 26] }, 50 | muted: { hex: "6e6a86", rgb: [110, 106, 134], hsl: [249, 12, 47] }, 51 | subtle: { hex: "908caa", rgb: [144, 140, 170], hsl: [248, 15, 61] }, 52 | text: { hex: "e0def4", rgb: [224, 222, 244], hsl: [245, 50, 91] }, 53 | love: { hex: "eb6f92", rgb: [235, 111, 146], hsl: [343, 76, 68] }, 54 | gold: { hex: "f6c177", rgb: [246, 193, 119], hsl: [35, 88, 72] }, 55 | rose: { hex: "ea9a97", rgb: [234, 154, 151], hsl: [2, 66, 75] }, 56 | pine: { hex: "3e8fb0", rgb: [62, 143, 176], hsl: [197, 48, 47] }, 57 | foam: { hex: "9ccfd8", rgb: [156, 207, 216], hsl: [189, 43, 73] }, 58 | iris: { hex: "c4a7e7", rgb: [196, 167, 231], hsl: [267, 57, 78] }, 59 | highlightLow: { 60 | hex: "2a283e", 61 | rgb: [42, 40, 62], 62 | hsl: [245, 22, 20], 63 | alpha: { 64 | hex: "817c9c14", 65 | rgb: [129, 124, 156, 0.08], 66 | hsl: [249, 14, 55, 0.08], 67 | }, 68 | }, 69 | highlightMed: { 70 | hex: "44415a", 71 | rgb: [68, 65, 90], 72 | hsl: [247, 16, 30], 73 | alpha: { 74 | hex: "817c9c26", 75 | rgb: [129, 124, 156, 0.15], 76 | hsl: [249, 14, 55, 0.15], 77 | }, 78 | }, 79 | highlightHigh: { 80 | hex: "56526e", 81 | rgb: [86, 82, 110], 82 | hsl: [249, 15, 38], 83 | alpha: { 84 | hex: "817c9c4d", 85 | rgb: [129, 124, 156, 0.3], 86 | hsl: [249, 14, 55, 0.3], 87 | }, 88 | }, 89 | }; 90 | const dawn = { 91 | base: { hex: "faf4ed", rgb: [250, 244, 237], hsl: [32, 57, 95] }, 92 | surface: { hex: "fffaf3", rgb: [255, 250, 243], hsl: [35, 100, 98] }, 93 | overlay: { hex: "f2e9e1", rgb: [242, 233, 222], hsl: [33, 43, 91] }, 94 | muted: { hex: "9893a5", rgb: [152, 147, 165], hsl: [257, 9, 61] }, 95 | subtle: { hex: "797593", rgb: [121, 117, 147], hsl: [248, 12, 52] }, 96 | text: { hex: "575279", rgb: [87, 82, 121], hsl: [248, 19, 40] }, 97 | love: { hex: "b4637a", rgb: [180, 99, 122], hsl: [343, 35, 55] }, 98 | gold: { hex: "ea9d34", rgb: [234, 157, 52], hsl: [35, 81, 56] }, 99 | rose: { hex: "d7827e", rgb: [215, 130, 126], hsl: [3, 53, 67] }, 100 | pine: { hex: "286983", rgb: [40, 105, 131], hsl: [197, 53, 34] }, 101 | foam: { hex: "56949f", rgb: [86, 148, 159], hsl: [189, 30, 48] }, 102 | iris: { hex: "907aa9", rgb: [144, 122, 169], hsl: [268, 21, 57] }, 103 | highlightLow: { 104 | hex: "f4ede8", 105 | rgb: [244, 237, 232], 106 | hsl: [25, 35, 93], 107 | alpha: { 108 | hex: "6e6a860d", 109 | rgb: [110, 106, 134, 0.05], 110 | hsl: [249, 12, 47, 0.05], 111 | }, 112 | }, 113 | highlightMed: { 114 | hex: "dfdad9", 115 | rgb: [223, 218, 217], 116 | hsl: [10, 9, 86], 117 | alpha: { 118 | hex: "6e6a8614", 119 | rgb: [110, 106, 134, 0.08], 120 | hsl: [249, 12, 47, 0.08], 121 | }, 122 | }, 123 | highlightHigh: { 124 | hex: "cecacd", 125 | rgb: [206, 202, 205], 126 | hsl: [315, 4, 80], 127 | alpha: { 128 | hex: "6e6a8626", 129 | rgb: [110, 106, 134, 0.15], 130 | hsl: [249, 12, 47, 0.15], 131 | }, 132 | }, 133 | }; 134 | const variantColors = { main, moon, dawn }; 135 | const roleColors = { 136 | base: { main: main.base, moon: moon.base, dawn: dawn.base }, 137 | surface: { main: main.surface, moon: moon.surface, dawn: dawn.surface }, 138 | overlay: { main: main.overlay, moon: moon.overlay, dawn: dawn.overlay }, 139 | muted: { main: main.muted, moon: moon.muted, dawn: dawn.muted }, 140 | subtle: { main: main.subtle, moon: moon.subtle, dawn: dawn.subtle }, 141 | text: { main: main.text, moon: moon.text, dawn: dawn.text }, 142 | love: { main: main.love, moon: moon.love, dawn: dawn.love }, 143 | gold: { main: main.gold, moon: moon.gold, dawn: dawn.gold }, 144 | rose: { main: main.rose, moon: moon.rose, dawn: dawn.rose }, 145 | pine: { main: main.pine, moon: moon.pine, dawn: dawn.pine }, 146 | foam: { main: main.foam, moon: moon.foam, dawn: dawn.foam }, 147 | iris: { main: main.iris, moon: moon.iris, dawn: dawn.iris }, 148 | highlightLow: { 149 | main: main.highlightLow, 150 | moon: moon.highlightLow, 151 | dawn: dawn.highlightLow, 152 | }, 153 | highlightMed: { 154 | main: main.highlightMed, 155 | moon: moon.highlightMed, 156 | dawn: dawn.highlightMed, 157 | }, 158 | highlightHigh: { 159 | main: main.highlightHigh, 160 | moon: moon.highlightHigh, 161 | dawn: dawn.highlightHigh, 162 | }, 163 | }; 164 | const variants = { 165 | main: { 166 | id: "rose-pine", 167 | key: "main", 168 | name: "Rosé Pine", 169 | colors: main, 170 | }, 171 | moon: { 172 | id: "rose-pine-moon", 173 | key: "moon", 174 | name: "Rosé Pine Moon", 175 | colors: moon, 176 | }, 177 | dawn: { 178 | id: "rose-pine-dawn", 179 | key: "dawn", 180 | name: "Rosé Pine Dawn", 181 | colors: dawn, 182 | }, 183 | }; 184 | const roles = { 185 | base: { id: "base", key: "base", name: "Base", colors: roleColors.base }, 186 | surface: { 187 | id: "surface", 188 | key: "surface", 189 | name: "Surface", 190 | colors: roleColors.surface, 191 | }, 192 | overlay: { 193 | id: "overlay", 194 | key: "overlay", 195 | name: "Overlay", 196 | colors: roleColors.overlay, 197 | }, 198 | muted: { 199 | id: "muted", 200 | key: "muted", 201 | name: "Muted", 202 | colors: roleColors.muted, 203 | }, 204 | subtle: { 205 | id: "subtle", 206 | key: "subtle", 207 | name: "Subtle", 208 | colors: roleColors.subtle, 209 | }, 210 | text: { id: "text", key: "text", name: "Text", colors: roleColors.text }, 211 | love: { id: "love", key: "love", name: "Love", colors: roleColors.love }, 212 | gold: { id: "gold", key: "gold", name: "Gold", colors: roleColors.gold }, 213 | rose: { id: "rose", key: "rose", name: "Rose", colors: roleColors.rose }, 214 | pine: { id: "pine", key: "pine", name: "Pine", colors: roleColors.pine }, 215 | foam: { id: "foam", key: "foam", name: "Foam", colors: roleColors.foam }, 216 | iris: { id: "iris", key: "iris", name: "Iris", colors: roleColors.iris }, 217 | highlightLow: { 218 | id: "highlight-low", 219 | key: "highlightLow", 220 | name: "Highlight Low", 221 | colors: roleColors.highlightLow, 222 | }, 223 | highlightMed: { 224 | id: "highlight-med", 225 | key: "highlightMed", 226 | name: "Highlight Med", 227 | colors: roleColors.highlightMed, 228 | }, 229 | highlightHigh: { 230 | id: "highlight-high", 231 | key: "highlightHigh", 232 | name: "Highlight High", 233 | colors: roleColors.highlightHigh, 234 | }, 235 | }; 236 | const variantKeys = objectKeys(variants); 237 | const variantIds = [ 238 | "rose-pine", 239 | "rose-pine-moon", 240 | "rose-pine-dawn", 241 | ]; 242 | const variantNames = [ 243 | "Rosé Pine", 244 | "Rosé Pine Moon", 245 | "Rosé Pine Dawn", 246 | ]; 247 | const roleKeys = objectKeys(roles); 248 | const roleIds = roleKeys.map((role) => { 249 | if (role === "highlightLow") 250 | return "highlight-low"; 251 | if (role === "highlightMed") 252 | return "highlight-med"; 253 | if (role === "highlightHigh") 254 | return "highlight-high"; 255 | return role; 256 | }); 257 | const roleNames = [ 258 | "Base", 259 | "Surface", 260 | "Overlay", 261 | "Muted", 262 | "Subtle", 263 | "Text", 264 | "Love", 265 | "Gold", 266 | "Rose", 267 | "Pine", 268 | "Foam", 269 | "Iris", 270 | "Highlight Low", 271 | "Highlight Med", 272 | "Highlight High", 273 | ]; 274 | const colorFormats = ["hex", "rgb", "hsl"]; 275 | export { variants, variantIds, variantKeys, variantNames, variantColors, roles, roleIds, roleKeys, roleNames, roleColors, colorFormats, }; 276 | -------------------------------------------------------------------------------- /dist/tailwindcss/rose-pine-class.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "darkMode": [ 3 | "class" 4 | ], 5 | "theme": { 6 | "colors": { 7 | "rp-base": "hsl(--rp-base / )", 8 | "rp-surface": "hsl(--rp-surface / )", 9 | "rp-overlay": "hsl(--rp-overlay / )", 10 | "rp-muted": "hsl(--rp-muted / )", 11 | "rp-subtle": "hsl(--rp-subtle / )", 12 | "rp-text": "hsl(--rp-text / )", 13 | "rp-love": "hsl(--rp-love / )", 14 | "rp-gold": "hsl(--rp-gold / )", 15 | "rp-rose": "hsl(--rp-rose / )", 16 | "rp-pine": "hsl(--rp-pine / )", 17 | "rp-foam": "hsl(--rp-foam / )", 18 | "rp-iris": "hsl(--rp-iris / )", 19 | "rp-highlight-low": "hsl(--rp-highlight-low / )", 20 | "rp-highlight-med": "hsl(--rp-highlight-med / )", 21 | "rp-highlight-high": "hsl(--rp-highlight-high / )" 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /dist/tailwindcss/rose-pine-media.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "theme": { 3 | "colors": { 4 | "rp-base": "hsl(--rp-base / )", 5 | "rp-surface": "hsl(--rp-surface / )", 6 | "rp-overlay": "hsl(--rp-overlay / )", 7 | "rp-muted": "hsl(--rp-muted / )", 8 | "rp-subtle": "hsl(--rp-subtle / )", 9 | "rp-text": "hsl(--rp-text / )", 10 | "rp-love": "hsl(--rp-love / )", 11 | "rp-gold": "hsl(--rp-gold / )", 12 | "rp-rose": "hsl(--rp-rose / )", 13 | "rp-pine": "hsl(--rp-pine / )", 14 | "rp-foam": "hsl(--rp-foam / )", 15 | "rp-iris": "hsl(--rp-iris / )", 16 | "rp-highlight-low": "hsl(--rp-highlight-low / )", 17 | "rp-highlight-med": "hsl(--rp-highlight-med / )", 18 | "rp-highlight-high": "hsl(--rp-highlight-high / )" 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /dist/tailwindcss/rose-pine.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "theme": { 3 | "colors": { 4 | "rp": { 5 | "base": "#191724", 6 | "surface": "#1f1d2e", 7 | "overlay": "#26233a", 8 | "muted": "#6e6a86", 9 | "subtle": "#908caa", 10 | "text": "#e0def4", 11 | "love": "#eb6f92", 12 | "gold": "#f6c177", 13 | "rose": "#ebbcba", 14 | "pine": "#31748f", 15 | "foam": "#9ccfd8", 16 | "iris": "#c4a7e7", 17 | "highlight-low": "#21202e", 18 | "highlight-med": "#403d52", 19 | "highlight-high": "#524f67" 20 | }, 21 | "rp-moon": { 22 | "base": "#232136", 23 | "surface": "#2a273f", 24 | "overlay": "#393552", 25 | "muted": "#6e6a86", 26 | "subtle": "#908caa", 27 | "text": "#e0def4", 28 | "love": "#eb6f92", 29 | "gold": "#f6c177", 30 | "rose": "#ea9a97", 31 | "pine": "#3e8fb0", 32 | "foam": "#9ccfd8", 33 | "iris": "#c4a7e7", 34 | "highlight-low": "#2a283e", 35 | "highlight-med": "#44415a", 36 | "highlight-high": "#56526e" 37 | }, 38 | "rp-dawn": { 39 | "base": "#faf4ed", 40 | "surface": "#fffaf3", 41 | "overlay": "#f2e9e1", 42 | "muted": "#9893a5", 43 | "subtle": "#797593", 44 | "text": "#575279", 45 | "love": "#b4637a", 46 | "gold": "#ea9d34", 47 | "rose": "#d7827e", 48 | "pine": "#286983", 49 | "foam": "#56949f", 50 | "iris": "#907aa9", 51 | "highlight-low": "#f4ede8", 52 | "highlight-med": "#dfdad9", 53 | "highlight-high": "#cecacd" 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /lib/build.js: -------------------------------------------------------------------------------- 1 | import path from "node:path"; 2 | import {writeFileSync, mkdirSync} from "node:fs"; 3 | import {fileURLToPath} from "node:url"; 4 | import {minify} from "csso"; 5 | import {variantColors, variantKeys, roles, roleKeys} from "../dist/index.js"; 6 | 7 | function makeFileWriter(pathname) { 8 | const ORIGIN_DIR = path.dirname(fileURLToPath(import.meta.url)); 9 | const ROOT_DIR = path.join(ORIGIN_DIR, ".."); 10 | const START_TIME_IN_MILLISECONDS = Date.now(); 11 | 12 | let count = 0; 13 | 14 | function writeFile(filename, content) { 15 | const relativePath = path.join(pathname, filename); 16 | const absolutePath = path.join(ROOT_DIR, relativePath); 17 | 18 | incrementCount(); 19 | mkdirSync(path.join(ROOT_DIR, pathname), {recursive: true}); 20 | writeFileSync(absolutePath, content); 21 | 22 | return relativePath; 23 | } 24 | 25 | function incrementCount() { 26 | count++; 27 | } 28 | 29 | function getCount() { 30 | return count; 31 | } 32 | 33 | function getRuntime() { 34 | return Date.now() - START_TIME_IN_MILLISECONDS; 35 | } 36 | 37 | return {writeFile, getCount, getRuntime}; 38 | } 39 | 40 | function getTemplate(template) { 41 | const templates = { 42 | root: ({main, moon, dawn}) => `:root {\n${main}\n${moon}\n${dawn}}`, 43 | class: ({main, moon, dawn}) => 44 | `.theme-rp {\n${main}}\n\n.theme-rp-moon {\n${moon}}\n\n.theme-rp-dawn {\n${dawn}}`, 45 | media: ({main, moon, dawn}) => 46 | `:root {\n\t/* Rosé Pine Dawn */\n${dawn}}\n\n@media (prefers-color-scheme: dark) {\n\t:root {\n\t\t/* Rosé Pine */\n${main 47 | .split("\n") 48 | .map((v) => `\t${v}`) 49 | .join("\n")}\n\t\t/* Rosé Pine Moon */\n${moon 50 | .split("\n") 51 | .map((v) => (v ? `\t\t/* ${v.replace("\t", "")} */` : "")) 52 | .join("\n")}\t}\n}`, 53 | tailwindConfig: (data) => 54 | `export default ${JSON.stringify(data, null, "\t")}`, 55 | }; 56 | 57 | return templates[template]; 58 | } 59 | 60 | function getColors() { 61 | const colors = { 62 | hex: {main: "", moon: "", dawn: ""}, 63 | rgb: {main: "", moon: "", dawn: ""}, 64 | hsl: {main: "", moon: "", dawn: ""}, 65 | }; 66 | const scopedColors = { 67 | hex: {main: "", moon: "", dawn: ""}, 68 | rgb: {main: "", moon: "", dawn: ""}, 69 | hsl: {main: "", moon: "", dawn: ""}, 70 | }; 71 | const tailwindColors = {main: "", moon: "", dawn: ""}; 72 | const tailwindPreset = {theme: {colors: {}}}; 73 | const tailwindClassPreset = {darkMode: ["class"], theme: {colors: {}}}; 74 | const tailwindMediaPreset = {theme: {colors: {}}}; 75 | 76 | for (const variant of variantKeys) { 77 | const scope = variant === "main" ? "" : `-${variant}`; 78 | 79 | tailwindPreset.theme.colors[`rp${scope}`] = {}; 80 | 81 | for (const role of roleKeys) { 82 | const {id} = roles[role]; 83 | const {hex, rgb, hsl} = variantColors[variant][role]; 84 | const [r, g, b] = rgb; 85 | const [h, s, l] = hsl; 86 | const rgbFunction = `rgb(${r}, ${g}, ${b})`; 87 | const hslFunction = `hsl(${h}deg, ${s}%, ${l}%)`; 88 | 89 | colors.hex[variant] += `\t--rp-${id}: #${hex};\n`; 90 | colors.rgb[variant] += `\t--rp-${id}: ${rgbFunction};\n`; 91 | colors.hsl[variant] += `\t--rp-${id}: ${hslFunction};\n`; 92 | scopedColors.hex[variant] += `\t--rp${scope}-${id}: #${hex};\n`; 93 | scopedColors.rgb[variant] += `\t--rp${scope}-${id}: ${rgbFunction};\n`; 94 | scopedColors.hsl[variant] += `\t--rp${scope}-${id}: ${hslFunction};\n`; 95 | tailwindColors[variant] += `\t--rp-${id}: ${h} ${s} ${l};\n`; 96 | tailwindPreset.theme.colors[`rp${scope}`][id] = `#${hex}`; 97 | 98 | // Run on first iteration only 99 | if (variant === variantKeys[0]) { 100 | tailwindClassPreset.theme.colors[ 101 | `rp-${id}` 102 | ] = `hsl(--rp-${id} / )`; 103 | tailwindMediaPreset.theme.colors[ 104 | `rp-${id}` 105 | ] = `hsl(--rp-${id} / )`; 106 | } 107 | } 108 | } 109 | 110 | return { 111 | colors, 112 | scopedColors, 113 | tailwindColors, 114 | tailwindPreset, 115 | tailwindClassPreset, 116 | tailwindMediaPreset, 117 | }; 118 | } 119 | 120 | function build() { 121 | const { 122 | colors: {hex, rgb, hsl}, 123 | scopedColors: {hex: prefixedHex, rgb: prefixedRgb, hsl: prefixedHsl}, 124 | tailwindColors, 125 | tailwindPreset, 126 | tailwindClassPreset, 127 | tailwindMediaPreset, 128 | } = getColors(); 129 | 130 | const withRoot = getTemplate("root"); 131 | const withClass = getTemplate("class"); 132 | const withMedia = getTemplate("media"); 133 | const withTailwind = getTemplate("tailwindConfig"); 134 | 135 | const cssWriter = makeFileWriter("dist/css"); 136 | const cssMinWriter = makeFileWriter("dist/css/min"); 137 | const cssFiles = [ 138 | ["rose-pine.css", withRoot(prefixedHex)], 139 | ["rose-pine-rgb.css", withRoot(prefixedRgb)], 140 | ["rose-pine-hsl.css", withRoot(prefixedHsl)], 141 | ["rose-pine-class.css", withClass(hex)], 142 | ["rose-pine-class-rgb.css", withClass(rgb)], 143 | ["rose-pine-class-hsl.css", withClass(hsl)], 144 | ["rose-pine-class-tailwind.css", withClass(tailwindColors)], 145 | ["rose-pine-media.css", withMedia(hex)], 146 | ["rose-pine-media-rgb.css", withMedia(rgb)], 147 | ["rose-pine-media-hsl.css", withMedia(hsl)], 148 | ["rose-pine-media-tailwind.css", withMedia(tailwindColors)], 149 | ]; 150 | 151 | for (const [filename, content] of cssFiles) { 152 | console.log(`[css] Writing ${cssWriter.writeFile(filename, content)}`); 153 | console.log( 154 | `[css] Writing ${cssMinWriter.writeFile( 155 | filename.replace(".css", ".min.css"), 156 | minify(content).css 157 | )}` 158 | ); 159 | } 160 | 161 | console.log( 162 | `\u001B[32m[css] Wrote ${cssWriter.getCount()} file(s) in ${cssWriter.getRuntime()}ms\u001B[0m\n` 163 | ); 164 | 165 | const tailwindWriter = makeFileWriter("dist/tailwindcss"); 166 | [ 167 | ["rose-pine.js", withTailwind(tailwindPreset)], 168 | ["rose-pine-class.js", withTailwind(tailwindClassPreset)], 169 | ["rose-pine-media.js", withTailwind(tailwindMediaPreset)], 170 | ].map(([filename, content]) => 171 | console.log( 172 | `[tailwind] Writing ${tailwindWriter.writeFile(filename, content)}` 173 | ) 174 | ); 175 | console.log( 176 | `\u001B[32m[tailwind] Wrote ${tailwindWriter.getCount()} file(s) in ${tailwindWriter.getRuntime()}ms\u001B[0m\n` 177 | ); 178 | } 179 | 180 | build(); 181 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) mvllow 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rose-pine/palette", 3 | "version": "4.0.1", 4 | "description": "Color palette tool for Rosé Pine", 5 | "license": "MIT", 6 | "repository": "rose-pine/palette", 7 | "funding": "https://github.com/rose-pine/palette?sponsor=1", 8 | "author": "Rosé Pine ", 9 | "type": "module", 10 | "exports": "./dist/index.js", 11 | "types": "./dist/index.d.ts", 12 | "engines": { 13 | "node": ">=16" 14 | }, 15 | "scripts": { 16 | "build": "del-cli dist && tsc && node lib/build.js && npm test", 17 | "test": "xo && ava", 18 | "release": "npx np@latest", 19 | "version": "npm run build" 20 | }, 21 | "files": [ 22 | "dist" 23 | ], 24 | "keywords": [ 25 | "colors", 26 | "theme", 27 | "palette", 28 | "soho-vibes", 29 | "rose-pine" 30 | ], 31 | "publishConfig": { 32 | "access": "public" 33 | }, 34 | "devDependencies": { 35 | "@mvllow/tsconfig": "^0.2.2", 36 | "ava": "^5.2.0", 37 | "csso": "^5.0.5", 38 | "del-cli": "^5.0.0", 39 | "prettier": "^2.8.7", 40 | "ts-node": "^10.9.1", 41 | "typescript": "^5.0.4", 42 | "xo": "^0.53.1" 43 | }, 44 | "prettier": { 45 | "bracketSpacing": false, 46 | "semi": true, 47 | "singleQuote": false, 48 | "trailingComma": "es5", 49 | "useTabs": true 50 | }, 51 | "xo": { 52 | "prettier": true, 53 | "ignores": [ 54 | "dist/" 55 | ] 56 | }, 57 | "ava": { 58 | "extensions": { 59 | "ts": "module" 60 | }, 61 | "nodeArguments": [ 62 | "--loader=ts-node/esm" 63 | ] 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

Rosé Pine Palette

4 |

5 | 6 |

All natural pine, faux fur and a bit of soho vibes for the classy minimalist

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 | > Color palette tool for Rosé Pine 15 | 16 | - [Usage](#usage) 17 | - [CSS variables](#css-variables) 18 | - [Tailwind CSS](#tailwind-css) 19 | - [JavaScript](#javascript) 20 | - [Specification](#specification) 21 | - [Variants](#variants) 22 | - [Roles](#roles) 23 | - [Related](#related) 24 | 25 | ## Usage 26 | 27 | ### CSS variables 28 | 29 | **Media** 30 | 31 | > See `dist/css/rose-pine-media{-rgb,-hsl}.css` 32 | 33 | Useful for light/dark theming. Values follow the user's system theme, using 34 | the dawn variant when light and main variant when dark. Moon values can be 35 | uncommented and used instead. 36 | 37 | **Classes** 38 | 39 | > See `dist/css/rose-pine-class{-rgb,-hsl}.css` 40 | 41 | Useful for theming with more than two options. Values are set based on a 42 | wrapping class of `.theme-rp{-moon,-dawn}`. 43 | 44 | ```css 45 | body { 46 | color: var(--rp-text); 47 | background: var(--rp-base); 48 | } 49 | ``` 50 | 51 | **Static** 52 | 53 | > See `dist/css/rose-pine{-rgb,-hsl}.css` 54 | 55 | Useful when flexibility is desired. Values include their variant's name for moon and 56 | dawn, allowing all variants to be individually referenced. 57 | 58 | ```css 59 | .link-main { 60 | color: var(--rp-iris); 61 | } 62 | .link-moon { 63 | color: var(--rp-moon-iris); 64 | } 65 | .link-dawn { 66 | color: var(--rp-dawn-iris); 67 | } 68 | ``` 69 | 70 | ### Tailwind CSS 71 | 72 | **Preset configuration** 73 | 74 | > See `dist/tailwind/rose-pine{-media}.js` 75 | 76 | ```js 77 | // tailwind.config.js 78 | module.exports = { 79 | presets: [require("./rose-pine.js")], 80 | }; 81 | ``` 82 | 83 | If using `rose-pine-media.js`, see the section below to include the necessary 84 | CSS variables. 85 | 86 | **CSS variables** 87 | 88 | > See `dist/css/rose-pine-media-tailwind.css` 89 | 90 | This method sets CSS variables to raw HSL values to support alpha values in 91 | classes, e.g. `bg-rose/50`. 92 | 93 | ### JavaScript 94 | 95 | Starting with v4, colour values are unformatted. Formatted values can be found 96 | in our `dist` folder. For creating new themes, it is recommended to use our 97 | [build tool](https://github.com/rose-pine/build). 98 | 99 | ```js 100 | import {variants, roles} from "@rose-pine/palette"; 101 | 102 | variants.moon.colors.highlightLow.hsl 103 | // => [245, 22, 20] 104 | 105 | variants.moon.colors.highlightLow.alpha.hsl 106 | // => [249, 14%, 55%, 0.08] 107 | 108 | variants.main.id 109 | // => rose-pine 110 | 111 | variants.moon.key 112 | // => moon 113 | 114 | variants.dawn.name 115 | // => Rosé Pine Dawn 116 | 117 | roles.base.colors.main.hex 118 | // => '191724' 119 | 120 | roles.surface.colors.dawn.rgb 121 | // => [255, 250, 243] 122 | 123 | roles.highlightLow.id 124 | // => highlight-low 125 | 126 | roles.highlightMed.key 127 | // => highlightMed 128 | 129 | roles.highlightHigh.name 130 | // => Highlight High 131 | ``` 132 | 133 | ## Specification 134 | 135 | ### Variants 136 | 137 | Rosé Pine includes three variants. These are referenced as Rosé Pine, Rosé 138 | Pine Moon, and Rosé Pine Dawn. Their codenames are main, moon, and dawn 139 | respectively. Naming does not include "main" unless necessary. When used as 140 | file names, prefer snake-case. E.g. rose-pine, rose-pine-moon, and 141 | rose-pine-dawn. 142 | 143 | ### Roles 144 | 145 | **Neutral** 146 | 147 | | Role | Description | Usage | 148 | | --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | 149 | | `base` | Primary background | inactive tabs, sidebars | 150 | | `surface` | Low contrast background atop `base` | text inputs, panels | 151 | | `overlay` | Medium contrast background atop `surface` | text inputs, panels, active tabs | 152 | | `muted` | Low contrast foreground | comments, git ignored | 153 | | `subtle` | Medium contrast foreground | non-selected results, inactive tabs, punctuation, operators | 154 | | `text` | High contrast foreground | cursor text, selected results, selection foreground (paired with `highlightMed` background), active tabs, variables | 155 | | `highlightLow` | Low contrast highlight | cursor line | 156 | | `highlightMed` | Medium contrast highlight | selection background (paired with `text` foreground) | 157 | | `highlightHigh` | High contrast highlight | cursor background, borders | 158 | 159 | **Accent** 160 | 161 | | Role | Usage | 162 | | ------ | ---------------------------------------------------------------- | 163 | | `love` | terminal red, builtins, errors, git delete | 164 | | `gold` | terminal yellow, strings, warnings | 165 | | `rose` | terminal cyan, booleans, git change, git dirty, git text | 166 | | `pine` | terminal green, functions, git rename | 167 | | `foam` | terminal blue, object keys, info, git add | 168 | | `iris` | terminal magenta, parameters, links, hints, git merge, git stage | 169 | 170 | ## Related 171 | 172 | - [rosepinetheme.com/palette](https://rosepinetheme.com/palette) 173 | - [@rose-pine/build](https://github.com/rose-pine/build) 174 | -------------------------------------------------------------------------------- /source/index.ts: -------------------------------------------------------------------------------- 1 | const objectKeys: >( 2 | value: Type 3 | ) => Array<`${Exclude}`> = Object.keys; 4 | 5 | const main = { 6 | base: {hex: "191724", rgb: [25, 23, 36], hsl: [249, 22, 12]}, 7 | surface: {hex: "1f1d2e", rgb: [31, 29, 46], hsl: [247, 23, 15]}, 8 | overlay: {hex: "26233a", rgb: [38, 35, 58], hsl: [248, 25, 18]}, 9 | muted: {hex: "6e6a86", rgb: [110, 106, 134], hsl: [249, 12, 47]}, 10 | subtle: {hex: "908caa", rgb: [144, 140, 170], hsl: [248, 15, 61]}, 11 | text: {hex: "e0def4", rgb: [224, 222, 244], hsl: [245, 50, 91]}, 12 | love: {hex: "eb6f92", rgb: [235, 111, 146], hsl: [343, 76, 68]}, 13 | gold: {hex: "f6c177", rgb: [246, 193, 119], hsl: [35, 88, 72]}, 14 | rose: {hex: "ebbcba", rgb: [235, 188, 186], hsl: [2, 55, 83]}, 15 | pine: {hex: "31748f", rgb: [49, 116, 143], hsl: [197, 49, 38]}, 16 | foam: {hex: "9ccfd8", rgb: [156, 207, 216], hsl: [189, 43, 73]}, 17 | iris: {hex: "c4a7e7", rgb: [196, 167, 231], hsl: [267, 57, 78]}, 18 | highlightLow: { 19 | hex: "21202e", 20 | rgb: [33, 32, 46], 21 | hsl: [244, 18, 15], 22 | alpha: { 23 | hex: "6e6a861a", 24 | rgb: [110, 106, 134, 0.1], 25 | hsl: [249, 12, 47, 0.1], 26 | }, 27 | }, 28 | highlightMed: { 29 | hex: "403d52", 30 | rgb: [64, 61, 82], 31 | hsl: [249, 15, 28], 32 | alpha: { 33 | hex: "6e6a8633", 34 | rgb: [110, 106, 134, 0.2], 35 | hsl: [249, 12, 47, 0.2], 36 | }, 37 | }, 38 | highlightHigh: { 39 | hex: "524f67", 40 | rgb: [82, 79, 103], 41 | hsl: [248, 13, 36], 42 | alpha: { 43 | hex: "6e6a8666", 44 | rgb: [110, 106, 134, 0.4], 45 | hsl: [249, 12, 47, 0.4], 46 | }, 47 | }, 48 | }; 49 | 50 | const moon = { 51 | base: {hex: "232136", rgb: [35, 33, 54], hsl: [246, 24, 17]}, 52 | surface: {hex: "2a273f", rgb: [42, 39, 63], hsl: [248, 24, 20]}, 53 | overlay: {hex: "393552", rgb: [57, 53, 82], hsl: [248, 21, 26]}, 54 | muted: {hex: "6e6a86", rgb: [110, 106, 134], hsl: [249, 12, 47]}, 55 | subtle: {hex: "908caa", rgb: [144, 140, 170], hsl: [248, 15, 61]}, 56 | text: {hex: "e0def4", rgb: [224, 222, 244], hsl: [245, 50, 91]}, 57 | love: {hex: "eb6f92", rgb: [235, 111, 146], hsl: [343, 76, 68]}, 58 | gold: {hex: "f6c177", rgb: [246, 193, 119], hsl: [35, 88, 72]}, 59 | rose: {hex: "ea9a97", rgb: [234, 154, 151], hsl: [2, 66, 75]}, 60 | pine: {hex: "3e8fb0", rgb: [62, 143, 176], hsl: [197, 48, 47]}, 61 | foam: {hex: "9ccfd8", rgb: [156, 207, 216], hsl: [189, 43, 73]}, 62 | iris: {hex: "c4a7e7", rgb: [196, 167, 231], hsl: [267, 57, 78]}, 63 | highlightLow: { 64 | hex: "2a283e", 65 | rgb: [42, 40, 62], 66 | hsl: [245, 22, 20], 67 | alpha: { 68 | hex: "817c9c14", 69 | rgb: [129, 124, 156, 0.08], 70 | hsl: [249, 14, 55, 0.08], 71 | }, 72 | }, 73 | highlightMed: { 74 | hex: "44415a", 75 | rgb: [68, 65, 90], 76 | hsl: [247, 16, 30], 77 | alpha: { 78 | hex: "817c9c26", 79 | rgb: [129, 124, 156, 0.15], 80 | hsl: [249, 14, 55, 0.15], 81 | }, 82 | }, 83 | highlightHigh: { 84 | hex: "56526e", 85 | rgb: [86, 82, 110], 86 | hsl: [249, 15, 38], 87 | alpha: { 88 | hex: "817c9c4d", 89 | rgb: [129, 124, 156, 0.3], 90 | hsl: [249, 14, 55, 0.3], 91 | }, 92 | }, 93 | }; 94 | 95 | const dawn = { 96 | base: {hex: "faf4ed", rgb: [250, 244, 237], hsl: [32, 57, 95]}, 97 | surface: {hex: "fffaf3", rgb: [255, 250, 243], hsl: [35, 100, 98]}, 98 | overlay: {hex: "f2e9e1", rgb: [242, 233, 222], hsl: [33, 43, 91]}, 99 | muted: {hex: "9893a5", rgb: [152, 147, 165], hsl: [257, 9, 61]}, 100 | subtle: {hex: "797593", rgb: [121, 117, 147], hsl: [248, 12, 52]}, 101 | text: {hex: "575279", rgb: [87, 82, 121], hsl: [248, 19, 40]}, 102 | love: {hex: "b4637a", rgb: [180, 99, 122], hsl: [343, 35, 55]}, 103 | gold: {hex: "ea9d34", rgb: [234, 157, 52], hsl: [35, 81, 56]}, 104 | rose: {hex: "d7827e", rgb: [215, 130, 126], hsl: [3, 53, 67]}, 105 | pine: {hex: "286983", rgb: [40, 105, 131], hsl: [197, 53, 34]}, 106 | foam: {hex: "56949f", rgb: [86, 148, 159], hsl: [189, 30, 48]}, 107 | iris: {hex: "907aa9", rgb: [144, 122, 169], hsl: [268, 21, 57]}, 108 | highlightLow: { 109 | hex: "f4ede8", 110 | rgb: [244, 237, 232], 111 | hsl: [25, 35, 93], 112 | alpha: { 113 | hex: "6e6a860d", 114 | rgb: [110, 106, 134, 0.05], 115 | hsl: [249, 12, 47, 0.05], 116 | }, 117 | }, 118 | highlightMed: { 119 | hex: "dfdad9", 120 | rgb: [223, 218, 217], 121 | hsl: [10, 9, 86], 122 | alpha: { 123 | hex: "6e6a8614", 124 | rgb: [110, 106, 134, 0.08], 125 | hsl: [249, 12, 47, 0.08], 126 | }, 127 | }, 128 | highlightHigh: { 129 | hex: "cecacd", 130 | rgb: [206, 202, 205], 131 | hsl: [315, 4, 80], 132 | alpha: { 133 | hex: "6e6a8626", 134 | rgb: [110, 106, 134, 0.15], 135 | hsl: [249, 12, 47, 0.15], 136 | }, 137 | }, 138 | }; 139 | 140 | const variantColors = {main, moon, dawn}; 141 | 142 | const roleColors = { 143 | base: {main: main.base, moon: moon.base, dawn: dawn.base}, 144 | surface: {main: main.surface, moon: moon.surface, dawn: dawn.surface}, 145 | overlay: {main: main.overlay, moon: moon.overlay, dawn: dawn.overlay}, 146 | muted: {main: main.muted, moon: moon.muted, dawn: dawn.muted}, 147 | subtle: {main: main.subtle, moon: moon.subtle, dawn: dawn.subtle}, 148 | text: {main: main.text, moon: moon.text, dawn: dawn.text}, 149 | love: {main: main.love, moon: moon.love, dawn: dawn.love}, 150 | gold: {main: main.gold, moon: moon.gold, dawn: dawn.gold}, 151 | rose: {main: main.rose, moon: moon.rose, dawn: dawn.rose}, 152 | pine: {main: main.pine, moon: moon.pine, dawn: dawn.pine}, 153 | foam: {main: main.foam, moon: moon.foam, dawn: dawn.foam}, 154 | iris: {main: main.iris, moon: moon.iris, dawn: dawn.iris}, 155 | highlightLow: { 156 | main: main.highlightLow, 157 | moon: moon.highlightLow, 158 | dawn: dawn.highlightLow, 159 | }, 160 | highlightMed: { 161 | main: main.highlightMed, 162 | moon: moon.highlightMed, 163 | dawn: dawn.highlightMed, 164 | }, 165 | highlightHigh: { 166 | main: main.highlightHigh, 167 | moon: moon.highlightHigh, 168 | dawn: dawn.highlightHigh, 169 | }, 170 | }; 171 | 172 | const variants = { 173 | main: { 174 | id: "rose-pine", 175 | key: "main", 176 | name: "Rosé Pine", 177 | colors: main, 178 | }, 179 | moon: { 180 | id: "rose-pine-moon", 181 | key: "moon", 182 | name: "Rosé Pine Moon", 183 | colors: moon, 184 | }, 185 | dawn: { 186 | id: "rose-pine-dawn", 187 | key: "dawn", 188 | name: "Rosé Pine Dawn", 189 | colors: dawn, 190 | }, 191 | }; 192 | 193 | const roles = { 194 | base: {id: "base", key: "base", name: "Base", colors: roleColors.base}, 195 | surface: { 196 | id: "surface", 197 | key: "surface", 198 | name: "Surface", 199 | colors: roleColors.surface, 200 | }, 201 | overlay: { 202 | id: "overlay", 203 | key: "overlay", 204 | name: "Overlay", 205 | colors: roleColors.overlay, 206 | }, 207 | muted: { 208 | id: "muted", 209 | key: "muted", 210 | name: "Muted", 211 | colors: roleColors.muted, 212 | }, 213 | subtle: { 214 | id: "subtle", 215 | key: "subtle", 216 | name: "Subtle", 217 | colors: roleColors.subtle, 218 | }, 219 | text: {id: "text", key: "text", name: "Text", colors: roleColors.text}, 220 | love: {id: "love", key: "love", name: "Love", colors: roleColors.love}, 221 | gold: {id: "gold", key: "gold", name: "Gold", colors: roleColors.gold}, 222 | rose: {id: "rose", key: "rose", name: "Rose", colors: roleColors.rose}, 223 | pine: {id: "pine", key: "pine", name: "Pine", colors: roleColors.pine}, 224 | foam: {id: "foam", key: "foam", name: "Foam", colors: roleColors.foam}, 225 | iris: {id: "iris", key: "iris", name: "Iris", colors: roleColors.iris}, 226 | highlightLow: { 227 | id: "highlight-low", 228 | key: "highlightLow", 229 | name: "Highlight Low", 230 | colors: roleColors.highlightLow, 231 | }, 232 | highlightMed: { 233 | id: "highlight-med", 234 | key: "highlightMed", 235 | name: "Highlight Med", 236 | colors: roleColors.highlightMed, 237 | }, 238 | highlightHigh: { 239 | id: "highlight-high", 240 | key: "highlightHigh", 241 | name: "Highlight High", 242 | colors: roleColors.highlightHigh, 243 | }, 244 | }; 245 | 246 | const variantKeys = objectKeys(variants); 247 | const variantIds: ["rose-pine", "rose-pine-moon", "rose-pine-dawn"] = [ 248 | "rose-pine", 249 | "rose-pine-moon", 250 | "rose-pine-dawn", 251 | ]; 252 | const variantNames: ["Rosé Pine", "Rosé Pine Moon", "Rosé Pine Dawn"] = [ 253 | "Rosé Pine", 254 | "Rosé Pine Moon", 255 | "Rosé Pine Dawn", 256 | ]; 257 | 258 | const roleKeys = objectKeys(roles); 259 | const roleIds = roleKeys.map((role) => { 260 | if (role === "highlightLow") return "highlight-low"; 261 | if (role === "highlightMed") return "highlight-med"; 262 | if (role === "highlightHigh") return "highlight-high"; 263 | return role; 264 | }); 265 | const roleNames: [ 266 | "Base", 267 | "Surface", 268 | "Overlay", 269 | "Muted", 270 | "Subtle", 271 | "Text", 272 | "Love", 273 | "Gold", 274 | "Rose", 275 | "Pine", 276 | "Foam", 277 | "Iris", 278 | "Highlight Low", 279 | "Highlight Med", 280 | "Highlight High" 281 | ] = [ 282 | "Base", 283 | "Surface", 284 | "Overlay", 285 | "Muted", 286 | "Subtle", 287 | "Text", 288 | "Love", 289 | "Gold", 290 | "Rose", 291 | "Pine", 292 | "Foam", 293 | "Iris", 294 | "Highlight Low", 295 | "Highlight Med", 296 | "Highlight High", 297 | ]; 298 | 299 | const colorFormats: ["hex", "rgb", "hsl"] = ["hex", "rgb", "hsl"]; 300 | 301 | export type Variant = typeof variants.main; 302 | export type VariantColors = Variant["colors"]; 303 | export type Role = typeof roles.base; 304 | export type RoleColors = Role["colors"]; 305 | export type Color = RoleColors["main"]; 306 | 307 | export { 308 | variants, 309 | variantIds, 310 | variantKeys, 311 | variantNames, 312 | variantColors, 313 | roles, 314 | roleIds, 315 | roleKeys, 316 | roleNames, 317 | roleColors, 318 | colorFormats, 319 | }; 320 | -------------------------------------------------------------------------------- /test/main.ts: -------------------------------------------------------------------------------- 1 | import test from "ava"; 2 | import {variantColors, roleColors} from "../source/index.js"; 3 | 4 | test("main", (t) => { 5 | t.deepEqual(variantColors.dawn.highlightLow, { 6 | hex: "f4ede8", 7 | rgb: [244, 237, 232], 8 | hsl: [25, 35, 93], 9 | alpha: { 10 | hex: "6e6a860d", 11 | rgb: [110, 106, 134, 0.05], 12 | hsl: [249, 12, 47, 0.05], 13 | }, 14 | }); 15 | 16 | t.deepEqual(roleColors.base, { 17 | main: {hex: "191724", rgb: [25, 23, 36], hsl: [249, 22, 12]}, 18 | moon: {hex: "232136", rgb: [35, 33, 54], hsl: [246, 24, 17]}, 19 | dawn: {hex: "faf4ed", rgb: [250, 244, 237], hsl: [32, 57, 95]}, 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@mvllow/tsconfig", 3 | "compilerOptions": { 4 | "outDir": "dist" 5 | }, 6 | "include": ["source"] 7 | } 8 | --------------------------------------------------------------------------------