├── .editorconfig ├── .github ├── release-please-config.json ├── release-please-manifest.json └── workflows │ ├── build.yml │ ├── github-pages.yml │ ├── release-please.yml │ └── whiskers-check.yml ├── .gitignore ├── LICENSE ├── README.md ├── apps └── docs │ ├── .vscode │ ├── extensions.json │ └── launch.json │ ├── astro.config.ts │ ├── package.json │ ├── public │ └── favicon.png │ ├── src │ ├── assets │ │ └── catppuccin.png │ ├── content.config.ts │ ├── content │ │ └── docs │ │ │ ├── guides │ │ │ └── install.mdx │ │ │ ├── index.mdx │ │ │ └── reference │ │ │ └── components.mdx │ ├── custom.css │ └── env.d.ts │ └── tsconfig.json ├── assets ├── frappe.webp ├── latte.webp ├── macchiato.webp ├── mocha.webp └── preview.webp ├── package.json ├── packages └── catppuccin-starlight │ ├── CHANGELOG.md │ ├── README.md │ ├── index.ts │ ├── package.json │ ├── starlight.tera │ ├── styles │ └── shared.css │ ├── themes │ ├── catppuccin-frappe-blue.css │ ├── catppuccin-frappe-flamingo.css │ ├── catppuccin-frappe-green.css │ ├── catppuccin-frappe-lavender.css │ ├── catppuccin-frappe-maroon.css │ ├── catppuccin-frappe-mauve.css │ ├── catppuccin-frappe-peach.css │ ├── catppuccin-frappe-pink.css │ ├── catppuccin-frappe-red.css │ ├── catppuccin-frappe-rosewater.css │ ├── catppuccin-frappe-sapphire.css │ ├── catppuccin-frappe-sky.css │ ├── catppuccin-frappe-teal.css │ ├── catppuccin-frappe-yellow.css │ ├── catppuccin-latte-blue.css │ ├── catppuccin-latte-flamingo.css │ ├── catppuccin-latte-green.css │ ├── catppuccin-latte-lavender.css │ ├── catppuccin-latte-maroon.css │ ├── catppuccin-latte-mauve.css │ ├── catppuccin-latte-peach.css │ ├── catppuccin-latte-pink.css │ ├── catppuccin-latte-red.css │ ├── catppuccin-latte-rosewater.css │ ├── catppuccin-latte-sapphire.css │ ├── catppuccin-latte-sky.css │ ├── catppuccin-latte-teal.css │ ├── catppuccin-latte-yellow.css │ ├── catppuccin-macchiato-blue.css │ ├── catppuccin-macchiato-flamingo.css │ ├── catppuccin-macchiato-green.css │ ├── catppuccin-macchiato-lavender.css │ ├── catppuccin-macchiato-maroon.css │ ├── catppuccin-macchiato-mauve.css │ ├── catppuccin-macchiato-peach.css │ ├── catppuccin-macchiato-pink.css │ ├── catppuccin-macchiato-red.css │ ├── catppuccin-macchiato-rosewater.css │ ├── catppuccin-macchiato-sapphire.css │ ├── catppuccin-macchiato-sky.css │ ├── catppuccin-macchiato-teal.css │ ├── catppuccin-macchiato-yellow.css │ ├── catppuccin-mocha-blue.css │ ├── catppuccin-mocha-flamingo.css │ ├── catppuccin-mocha-green.css │ ├── catppuccin-mocha-lavender.css │ ├── catppuccin-mocha-maroon.css │ ├── catppuccin-mocha-mauve.css │ ├── catppuccin-mocha-peach.css │ ├── catppuccin-mocha-pink.css │ ├── catppuccin-mocha-red.css │ ├── catppuccin-mocha-rosewater.css │ ├── catppuccin-mocha-sapphire.css │ ├── catppuccin-mocha-sky.css │ ├── catppuccin-mocha-teal.css │ └── catppuccin-mocha-yellow.css │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── renovate.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | # go 16 | [*.go] 17 | indent_style = tab 18 | indent_size = 4 19 | 20 | # python 21 | [*.{ini,py,py.tpl,rst}] 22 | indent_size = 4 23 | 24 | # rust 25 | [*.rs] 26 | indent_size = 4 27 | 28 | # documentation, utils 29 | [*.{md,mdx,diff}] 30 | trim_trailing_whitespace = false 31 | 32 | # windows shell scripts 33 | [*.{cmd,bat,ps1}] 34 | end_of_line = crlf 35 | -------------------------------------------------------------------------------- /.github/release-please-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json", 3 | "last-release-sha": "9c8c92778754e370fa170c3a8d51af6d9c796701", 4 | "include-component-in-tag": false, 5 | "packages": { 6 | "packages/catppuccin-starlight": { 7 | "package-name": "", 8 | "release-type": "node" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.github/release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages/catppuccin-starlight": "1.0.1" 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | workflow_dispatch: 5 | pull_request: 6 | branches: [main] 7 | push: 8 | branches: [main] 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: catppuccin/setup-whiskers@v2.0.0 16 | - uses: pnpm/action-setup@v4 17 | - uses: actions/setup-node@v4 18 | with: 19 | cache: pnpm 20 | node-version: 22 21 | - run: pnpm install --frozen-lockfile 22 | - run: pnpm build 23 | working-directory: ./packages/catppuccin-starlight 24 | -------------------------------------------------------------------------------- /.github/workflows/github-pages.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | workflow_dispatch: 7 | 8 | permissions: 9 | contents: read 10 | pages: write 11 | id-token: write 12 | 13 | jobs: 14 | build: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - uses: actions/checkout@v4 18 | - name: Build & Upload Site 19 | uses: withastro/action@v4 20 | with: 21 | path: ./apps/docs 22 | package-manager: pnpm@10.9.0 23 | 24 | deploy: 25 | needs: build 26 | runs-on: ubuntu-latest 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | steps: 31 | - name: Deploy to GitHub Pages 32 | id: deployment 33 | uses: actions/deploy-pages@v4 34 | -------------------------------------------------------------------------------- /.github/workflows/release-please.yml: -------------------------------------------------------------------------------- 1 | name: release-please 2 | 3 | on: 4 | workflow_dispatch: 5 | push: 6 | branches: [main] 7 | 8 | permissions: 9 | contents: write 10 | id-token: write 11 | pull-requests: write 12 | issues: write 13 | 14 | jobs: 15 | release-please: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: googleapis/release-please-action@v4 19 | id: release 20 | with: 21 | config-file: .github/release-please-config.json 22 | manifest-file: .github/release-please-manifest.json 23 | outputs: 24 | release_created: ${{ steps.release.outputs['packages/catppuccin-starlight--release_created'] }} 25 | tag_name: ${{ steps.release.outputs['packages/catppuccin-starlight--tag_name'] }} 26 | 27 | release: 28 | runs-on: ubuntu-latest 29 | needs: release-please 30 | if: ${{ needs.release-please.outputs.release_created }} 31 | steps: 32 | - uses: actions/checkout@v4 33 | - uses: pnpm/action-setup@v4 34 | - uses: actions/setup-node@v4 35 | with: 36 | cache: pnpm 37 | node-version: 22 38 | registry-url: https://registry.npmjs.org 39 | - run: pnpm install --frozen-lockfile 40 | - run: pnpm publish 41 | working-directory: ./packages/catppuccin-starlight 42 | env: 43 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 44 | -------------------------------------------------------------------------------- /.github/workflows/whiskers-check.yml: -------------------------------------------------------------------------------- 1 | name: whiskers 2 | 3 | on: 4 | workflow_dispatch: 5 | pull_request: 6 | branches: [main] 7 | push: 8 | branches: [main] 9 | 10 | jobs: 11 | run: 12 | uses: catppuccin/actions/.github/workflows/whiskers-check.yml@v1 13 | with: 14 | working-directory: packages/catppuccin-starlight 15 | args: starlight.tera 16 | secrets: inherit 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Catppuccin 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | packages/catppuccin-starlight/README.md -------------------------------------------------------------------------------- /apps/docs/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /apps/docs/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /apps/docs/astro.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "astro/config"; 2 | import starlight from "@astrojs/starlight"; 3 | import catppuccin from "@catppuccin/starlight"; 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | site: "https://starlight.catppuccin.com", 8 | integrations: [ 9 | starlight({ 10 | title: "Catppuccin", 11 | logo: { 12 | src: "./src/assets/catppuccin.png", 13 | alt: "Catppuccin logo", 14 | }, 15 | favicon: "/favicon.png", 16 | social: [ 17 | { 18 | label: "GitHub", 19 | icon: "github", 20 | href: "https://github.com/catppuccin/starlight", 21 | }, 22 | ], 23 | expressiveCode: { 24 | themes: ["catppuccin-mocha", "catppuccin-latte"], 25 | styleOverrides: { 26 | textMarkers: { 27 | insBackground: 28 | "color-mix(in oklab, var(--sl-color-green-high) 25%, var(--sl-color-gray-6));", 29 | insBorderColor: "var(--sl-color-gray-5)", 30 | delBackground: 31 | "color-mix(in oklab, var(--sl-color-red-high) 25%, var(--sl-color-gray-6));", 32 | delBorderColor: "var(--sl-color-gray-5)", 33 | }, 34 | codeBackground: "var(--sl-color-gray-6)", 35 | }, 36 | }, 37 | customCss: [ 38 | "@fontsource/inter/400.css", 39 | "@fontsource/inter/600.css", 40 | "./src/custom.css", 41 | ], 42 | sidebar: [ 43 | { 44 | label: "Guides", 45 | items: [ 46 | // Each item here is one entry in the navigation menu. 47 | { label: "Install", slug: "guides/install" }, 48 | ], 49 | }, 50 | { 51 | label: "Reference", 52 | autogenerate: { directory: "reference" }, 53 | }, 54 | ], 55 | plugins: [catppuccin()], 56 | }), 57 | ], 58 | }); 59 | -------------------------------------------------------------------------------- /apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "private": "true", 4 | "type": "module", 5 | "version": "0.0.1", 6 | "scripts": { 7 | "dev": "astro dev", 8 | "start": "astro dev", 9 | "build": "astro check && astro build", 10 | "preview": "astro preview", 11 | "astro": "astro" 12 | }, 13 | "dependencies": { 14 | "@astrojs/check": "catalog:", 15 | "@astrojs/starlight": "catalog:", 16 | "@fontsource/inter": "^5.1.0", 17 | "astro": "catalog:", 18 | "sharp": "catalog:", 19 | "starlight-package-managers": "^0.11.0", 20 | "@catppuccin/starlight": "workspace:*", 21 | "typescript": "catalog:" 22 | } 23 | } -------------------------------------------------------------------------------- /apps/docs/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/starlight/e8e4bbf83541e6dc95c89b17df844b3c2c472103/apps/docs/public/favicon.png -------------------------------------------------------------------------------- /apps/docs/src/assets/catppuccin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/starlight/e8e4bbf83541e6dc95c89b17df844b3c2c472103/apps/docs/src/assets/catppuccin.png -------------------------------------------------------------------------------- /apps/docs/src/content.config.ts: -------------------------------------------------------------------------------- 1 | import { defineCollection } from 'astro:content'; 2 | import { docsSchema } from '@astrojs/starlight/schema'; 3 | import { docsLoader } from "@astrojs/starlight/loaders"; 4 | 5 | export const collections = { 6 | docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), 7 | }; 8 | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/guides/install.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Install Theme 3 | description: Install the Catppuccin theme for Starlight. 4 | --- 5 | 6 | import { Steps } from '@astrojs/starlight/components'; 7 | import { PackageManagers } from 'starlight-package-managers' 8 | 9 | 10 | 11 | 1. Install the theme package to your project with your preferred package manager: 12 | 13 | 14 | 2. Add the theme to your Starlight config. 15 | ```ts title="astro.config.mjs" ins={1,9} 16 | import catppuccin from "@catppuccin/starlight"; 17 | 18 | export default defineConfig({ 19 | // ... 20 | integrations: [ 21 | starlight({ 22 | // ... 23 | plugins: [ 24 | catppuccin() 25 | ] 26 | }) 27 | ] 28 | }) 29 | ``` 30 | 31 | 2. (Optional) Customize your theme for light/dark mode using `flavor` and `accent`. 32 | ```ts title="astro.config.mjs" ins={10-11} 33 | import catppuccin from "@catppuccin/starlight"; 34 | 35 | export default defineConfig({ 36 | // ... 37 | integrations: [ 38 | starlight({ 39 | // ... 40 | plugins: [ 41 | catppuccin({ 42 | dark: { flavor: "macchiato", accent: "sky" }, 43 | light: { flavor: "latte", accent: "sky" } 44 | }) 45 | ] 46 | }) 47 | ] 48 | }) 49 | ``` 50 | 51 | 52 | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Catppuccin for Starlight 3 | description: 📝 Soothing pastel theme for Starlight 4 | template: splash 5 | hero: 6 | tagline: 📝 Soothing pastel theme for Starlight 7 | image: 8 | file: ../../assets/catppuccin.png 9 | actions: 10 | - text: Install Theme 11 | link: /guides/install 12 | icon: right-arrow 13 | - text: Learn about Catppuccin 14 | link: https://catppuccin.com/ 15 | icon: external 16 | variant: minimal 17 | --- 18 | 19 | import { Card, CardGrid } from '@astrojs/starlight/components'; 20 | 21 | 22 | 23 | Edit `src/content/docs/index.mdx` to see this page change. 24 | 25 | 26 | Add Markdown or MDX files to `src/content/docs` to create new pages. 27 | 28 | 29 | Edit your `sidebar` and other config in `astro.config.mjs`. 30 | 31 | 32 | Learn more in [the Starlight Docs](https://starlight.astro.build/). 33 | 34 | 35 | -------------------------------------------------------------------------------- /apps/docs/src/content/docs/reference/components.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Components 3 | --- 4 | 5 | import { Card } from '@astrojs/starlight/components'; 6 | import { LinkCard } from '@astrojs/starlight/components'; 7 | import { Aside } from '@astrojs/starlight/components'; 8 | import { Badge } from '@astrojs/starlight/components'; 9 | import { Code } from '@astrojs/starlight/components'; 10 | import { FileTree } from '@astrojs/starlight/components'; 11 | import { Icon } from '@astrojs/starlight/components'; 12 | import { LinkButton } from '@astrojs/starlight/components'; 13 | import { Steps } from '@astrojs/starlight/components'; 14 | import { Tabs, TabItem } from '@astrojs/starlight/components'; 15 | 16 | ## Card 17 | Interesting content you want to highlight. 18 | 19 | ## Link Card 20 | 21 | 22 | ## Asides 23 | 24 | 25 | 34 | 35 | 36 | ## Badge 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ## Code 47 | export const exampleCode = `console.log('This could come from a file or CMS!');`; 48 | export const fileName = 'example.js'; 49 | export const highlights = ['file', 'CMS']; 50 | 51 | 52 | 53 | ## File Tree 54 | 55 | 56 | - astro.config.mjs 57 | - package.json 58 | - src 59 | - components 60 | - **Header.astro** 61 | - Title.astro 62 | - pages/ 63 | 64 | 65 | 66 | ## Icons 67 | 68 | 69 | 70 | ## Link Button 71 | Installation Guide 72 | 73 | Installation Guide 74 | 75 | 76 | ## Tabs 77 | 78 | Sirius, Vega, Betelgeuse 79 | Io, Europa, Ganymede 80 | 81 | 82 | ## Steps 83 | 84 | 85 | 1. Import the component into your MDX file: 86 | 87 | ```js 88 | import { Steps } from '@astrojs/starlight/components'; 89 | ``` 90 | 91 | 2. Wrap `` around your ordered list items. 92 | 93 | -------------------------------------------------------------------------------- /apps/docs/src/custom.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --__sl-font: Inter, system-ui, sans-serif !important; 3 | } -------------------------------------------------------------------------------- /apps/docs/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /apps/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict" 3 | } -------------------------------------------------------------------------------- /assets/frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/starlight/e8e4bbf83541e6dc95c89b17df844b3c2c472103/assets/frappe.webp -------------------------------------------------------------------------------- /assets/latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/starlight/e8e4bbf83541e6dc95c89b17df844b3c2c472103/assets/latte.webp -------------------------------------------------------------------------------- /assets/macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/starlight/e8e4bbf83541e6dc95c89b17df844b3c2c472103/assets/macchiato.webp -------------------------------------------------------------------------------- /assets/mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/starlight/e8e4bbf83541e6dc95c89b17df844b3c2c472103/assets/mocha.webp -------------------------------------------------------------------------------- /assets/preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/starlight/e8e4bbf83541e6dc95c89b17df844b3c2c472103/assets/preview.webp -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "catppuccin-starlight", 3 | "version": "0.0.1", 4 | "private": "true", 5 | "scripts": { 6 | "dev": "concurrently \"pnpm --filter docs dev\" \"pnpm --filter @catppuccin/starlight dev\"", 7 | "build": "pnpm --filter @catppuccin/starlight --filter docs build" 8 | }, 9 | "devDependencies": { 10 | "concurrently": "^9.0.1" 11 | }, 12 | "packageManager": "pnpm@10.10.0" 13 | } 14 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [1.0.1](https://github.com/catppuccin/starlight/compare/v1.0.0...v1.0.1) (2025-04-26) 4 | 5 | 6 | ### Bug Fixes 7 | 8 | * Update peer dependencies ([#23](https://github.com/catppuccin/starlight/issues/23)) ([5c91fe5](https://github.com/catppuccin/starlight/commit/5c91fe5ebaa162ef36a185562c1a77f2d19d3a0b)) 9 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin for Starlight 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 |

15 | 16 |

17 | 18 | ## Previews 19 | 20 |
21 | 🌻 Latte 22 | 23 |
24 |
25 | 🪴 Frappé 26 | 27 |
28 |
29 | 🌺 Macchiato 30 | 31 |
32 |
33 | 🌿 Mocha 34 | 35 |
36 | 37 | ## Usage 38 | 39 | 1. Install the theme package to your project with your preferred package manager: 40 | 41 | ```sh 42 | npm install @catppuccin/starlight 43 | pnpm add @catppuccin/starlight 44 | yarn add @catppuccin/starlight 45 | ``` 46 | 47 | 2. Add the theme to your Starlight config. 48 | 49 | ```ts 50 | import catppuccin from "@catppuccin/starlight"; 51 | 52 | export default defineConfig({ 53 | // ... 54 | integrations: [ 55 | starlight({ 56 | // ... 57 | plugins: [catppuccin()], 58 | }), 59 | ], 60 | }); 61 | ``` 62 | 63 | 3. **(Optional)** Customize your theme for light/dark mode using `flavor` and `accent`. 64 | 65 | ```ts 66 | import catppuccin from "@catppuccin/starlight"; 67 | 68 | export default defineConfig({ 69 | // ... 70 | integrations: [ 71 | starlight({ 72 | // ... 73 | plugins: [ 74 | catppuccin({ 75 | dark: { flavor: "macchiato", accent: "sky" }, 76 | light: { flavor: "latte", accent: "sky" }, 77 | }), 78 | ], 79 | }), 80 | ], 81 | }); 82 | ``` 83 | 84 | ## Development 85 | 86 | > [!IMPORTANT] 87 | > [catppuccin/whiskers](https://github.com/catppuccin/whiskers) is required to re-generate the [themes](packages/catppuccin-starlight/themes) directory. 88 | 89 | ```shell 90 | pnpm install 91 | pnpm build 92 | ``` 93 | 94 | ## 💝 Thanks to 95 | 96 | - [TheOtterlord](https://github.com/TheOtterlord) 97 | - [Louis Escher](https://github.com/louisescher) 98 | 99 |   100 | 101 |

102 | 103 |

104 | 105 |

106 | Copyright © 2021-present Catppuccin Org 107 |

108 | 109 |

110 | 111 |

112 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/index.ts: -------------------------------------------------------------------------------- 1 | import type { StarlightPlugin } from "@astrojs/starlight/types"; 2 | 3 | type DarkFlavor = "mocha" | "macchiato" | "frappe"; 4 | type LightFlavor = "latte"; 5 | type Accent = 6 | | "rosewater" 7 | | "flamingo" 8 | | "pink" 9 | | "mauve" 10 | | "red" 11 | | "maroon" 12 | | "peach" 13 | | "yellow" 14 | | "green" 15 | | "teal" 16 | | "sky" 17 | | "sapphire" 18 | | "blue" 19 | | "lavender"; 20 | 21 | interface Config { 22 | dark?: { 23 | flavor?: DarkFlavor; 24 | accent?: Accent; 25 | }; 26 | light?: { 27 | flavor?: LightFlavor; 28 | accent?: Accent; 29 | }; 30 | } 31 | 32 | export default function createPlugin(config?: Config): StarlightPlugin { 33 | const { dark, light } = config ?? {}; 34 | return { 35 | name: "@catppuccin/starlight", 36 | hooks: { 37 | "config:setup": ({ config, updateConfig }) => { 38 | updateConfig({ 39 | customCss: [ 40 | ...(config.customCss ?? []), 41 | `@catppuccin/starlight/themes/catppuccin-${dark?.flavor ?? "mocha"}-${dark?.accent ?? "mauve"}.css`, 42 | `@catppuccin/starlight/themes/catppuccin-${light?.flavor ?? "latte"}-${light?.accent ?? "mauve"}.css`, 43 | "@catppuccin/starlight/styles/shared.css", 44 | ], 45 | }); 46 | }, 47 | }, 48 | }; 49 | } 50 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@catppuccin/starlight", 3 | "version": "1.0.1", 4 | "license": "MIT", 5 | "type": "module", 6 | "publishConfig": { 7 | "access": "public", 8 | "provenance": true, 9 | "registry": "https://registry.npmjs.org" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/catppuccin/starlight.git", 14 | "directory": "packages/catppuccin-starlight" 15 | }, 16 | "homepage": "https://starlight.catppuccin.com/", 17 | "bugs": { 18 | "url": "https://github.com/catppuccin/starlight/issues" 19 | }, 20 | "sponsor": { 21 | "url": "https://opencollective.com/catppuccin" 22 | }, 23 | "exports": { 24 | ".": "./index.ts", 25 | "./styles/*": "./styles/*", 26 | "./themes/*": "./themes/*" 27 | }, 28 | "author": "Reuben Tier ", 29 | "contributors": [ 30 | "Louis Escher " 31 | ], 32 | "files": [ 33 | "index.ts", 34 | "styles", 35 | "themes" 36 | ], 37 | "keywords": [ 38 | "withastro", 39 | "starlight", 40 | "catppuccin" 41 | ], 42 | "scripts": { 43 | "dev": "nodemon --watch \"./starlight.tera\" -e tera --exec \"pnpm build\"", 44 | "build": "whiskers starlight.tera" 45 | }, 46 | "devDependencies": { 47 | "astro": "catalog:", 48 | "nodemon": "^3.1.7", 49 | "typescript": "catalog:" 50 | }, 51 | "peerDependencies": { 52 | "@astrojs/starlight": ">=0.32", 53 | "astro": "^5.0.0" 54 | }, 55 | "dependencies": { 56 | "@astrojs/starlight": "catalog:" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/starlight.tera: -------------------------------------------------------------------------------- 1 | --- 2 | whiskers: 3 | version: "^2.4.0" 4 | matrix: 5 | - flavor 6 | - accent 7 | filename: "themes/catppuccin-{{flavor.identifier}}-{{accent}}.css" 8 | --- 9 | 10 | :root{{if(cond=flavor.light, t="[data-theme='light']", f="")}} { 11 | --sl-color-accent-low: {{if(cond=flavor.dark, t=flavor.colors[accent] | sub(lightness=60) | css_hsl, f=flavor.colors[accent] | add(lightness=22) | css_hsl)}}; 12 | --sl-color-accent: {{if(cond=flavor.dark, t=flavor.colors[accent] | sub(lightness=20) | css_hsl, f=flavor.colors[accent] | css_hsl)}}; 13 | --sl-color-accent-high: {{if(cond=flavor.dark, t=flavor.colors[accent] | css_hsl, f=flavor.colors[accent] | sub(lightness=10) | css_hsl)}}; 14 | --sl-color-white: #{{text.hex}}; 15 | --sl-color-gray-1: #{{subtext1.hex}}; 16 | --sl-color-gray-2: #{{subtext0.hex}}; 17 | --sl-color-gray-3: #{{overlay2.hex}}; 18 | --sl-color-gray-4: #{{surface1.hex}}; 19 | --sl-color-gray-5: #{{surface0.hex}}; 20 | --sl-color-gray-6: #{{mantle.hex}}; 21 | --sl-color-gray-7: #{{crust.hex}}; 22 | --sl-color-black: #{{base.hex}}; 23 | 24 | --sl-hue-orange: {{peach.hsl.h}}; 25 | --sl-color-orange-low: {{if(cond=flavor.dark, t=peach | sub(lightness=50) | sub(saturation=60) | css_hsl, f=peach | add(lightness=35) | sub(saturation=30) | css_hsl)}}; 26 | --sl-color-orange: {{if(cond=flavor.dark, t=peach | sub(lightness=20, saturation=20) | css_hsl, f=peach | sub(lightness=10) | css_hsl)}}; 27 | --sl-color-orange-high: {{if(cond=flavor.dark, t=peach | css_hsl, f=peach | css_hsl)}}; 28 | --sl-hue-green: {{green.hsl.h}}; 29 | --sl-color-green-low: {{if(cond=flavor.dark, t=green | sub(lightness=50) | sub(saturation=40) | css_hsl, f=green | add(lightness=35) | sub(saturation=30) | css_hsl)}}; 30 | --sl-color-green: {{if(cond=flavor.dark, t=green | sub(lightness=20, saturation=20) | css_hsl, f=green | sub(lightness=10) | css_hsl)}}; 31 | --sl-color-green-high: {{if(cond=flavor.dark, t=green | css_hsl, f=green | css_hsl)}}; 32 | --sl-hue-blue: {{blue.hsl.h}}; 33 | --sl-color-blue-low: {{if(cond=flavor.dark, t=blue | sub(lightness=50) | sub(saturation=60) | css_hsl, f=blue | add(lightness=35) | sub(saturation=30) | css_hsl)}}; 34 | --sl-color-blue: {{if(cond=flavor.dark, t=blue | sub(lightness=20, saturation=20) | css_hsl, f=blue | sub(lightness=10) | css_hsl)}}; 35 | --sl-color-blue-high: {{if(cond=flavor.dark, t=blue | css_hsl, f=blue | css_hsl)}}; 36 | --sl-hue-purple: {{mauve.hsl.h}}; 37 | --sl-color-purple-low: {{if(cond=flavor.dark, t=mauve | sub(lightness=55) | sub(saturation=50) | css_hsl, f=mauve | add(lightness=30) | sub(saturation=30) | css_hsl)}}; 38 | --sl-color-purple: {{if(cond=flavor.dark, t=mauve | sub(lightness=20, saturation=20) | css_hsl, f=mauve | sub(lightness=10) | css_hsl)}}; 39 | --sl-color-purple-high: {{if(cond=flavor.dark, t=mauve | css_hsl, f=mauve | css_hsl)}}; 40 | --sl-hue-red: {{red.hsl.h}}; 41 | --sl-color-red-low: {{if(cond=flavor.dark, t=red | sub(lightness=50) | sub(saturation=55) | css_hsl, f=red | add(lightness=40) | sub(saturation=30) | css_hsl)}}; 42 | --sl-color-red: {{if(cond=flavor.dark, t=red | sub(lightness=20, saturation=20) | css_hsl, f=red | sub(lightness=10) | css_hsl)}}; 43 | --sl-color-red-high: {{if(cond=flavor.dark, t=red | css_hsl, f=red | css_hsl)}}; 44 | 45 | color-scheme: {{if(cond=flavor.light, t="light", f="dark")}}; 46 | } 47 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/styles/shared.css: -------------------------------------------------------------------------------- 1 | header, .right-sidebar, .content-panel { 2 | border-color: var(--sl-color-hairline-light) !important; 3 | } 4 | 5 | site-search kbd { 6 | background-color: var(--sl-color-gray-5); 7 | } 8 | 9 | .sl-link-card:hover { 10 | background-color: var(--sl-color-gray-6); 11 | } 12 | 13 | .expressive-code pre { 14 | --code-background: var(--sl-color-gray-6); 15 | } 16 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-blue.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(222, 74%, 14%); 4 | --sl-color-accent: hsl(222, 74%, 54%); 5 | --sl-color-accent-high: hsl(222, 74%, 74%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-flamingo.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(0, 58%, 24%); 4 | --sl-color-accent: hsl(0, 58%, 64%); 5 | --sl-color-accent-high: hsl(0, 58%, 84%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-green.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(96, 44%, 8%); 4 | --sl-color-accent: hsl(96, 44%, 48%); 5 | --sl-color-accent-high: hsl(96, 44%, 68%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-lavender.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(239, 66%, 24%); 4 | --sl-color-accent: hsl(239, 66%, 64%); 5 | --sl-color-accent-high: hsl(239, 66%, 84%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-maroon.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(358, 66%, 16%); 4 | --sl-color-accent: hsl(358, 66%, 56%); 5 | --sl-color-accent-high: hsl(358, 66%, 76%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-mauve.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(277, 59%, 16%); 4 | --sl-color-accent: hsl(277, 59%, 56%); 5 | --sl-color-accent-high: hsl(277, 59%, 76%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-peach.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(20, 79%, 10%); 4 | --sl-color-accent: hsl(20, 79%, 50%); 5 | --sl-color-accent-high: hsl(20, 79%, 70%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-pink.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(316, 73%, 24%); 4 | --sl-color-accent: hsl(316, 73%, 64%); 5 | --sl-color-accent-high: hsl(316, 73%, 84%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-red.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(359, 68%, 11%); 4 | --sl-color-accent: hsl(359, 68%, 51%); 5 | --sl-color-accent-high: hsl(359, 68%, 71%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-rosewater.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(10, 57%, 28%); 4 | --sl-color-accent: hsl(10, 57%, 68%); 5 | --sl-color-accent-high: hsl(10, 57%, 88%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-sapphire.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(199, 55%, 9%); 4 | --sl-color-accent: hsl(199, 55%, 49%); 5 | --sl-color-accent-high: hsl(199, 55%, 69%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-sky.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(189, 48%, 13%); 4 | --sl-color-accent: hsl(189, 48%, 53%); 5 | --sl-color-accent-high: hsl(189, 48%, 73%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-teal.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(172, 39%, 5%); 4 | --sl-color-accent: hsl(172, 39%, 45%); 5 | --sl-color-accent-high: hsl(172, 39%, 65%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-frappe-yellow.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(40, 62%, 13%); 4 | --sl-color-accent: hsl(40, 62%, 53%); 5 | --sl-color-accent-high: hsl(40, 62%, 73%); 6 | --sl-color-white: #c6d0f5; 7 | --sl-color-gray-1: #b5bfe2; 8 | --sl-color-gray-2: #a5adce; 9 | --sl-color-gray-3: #949cbb; 10 | --sl-color-gray-4: #51576d; 11 | --sl-color-gray-5: #414559; 12 | --sl-color-gray-6: #292c3c; 13 | --sl-color-gray-7: #232634; 14 | --sl-color-black: #303446; 15 | 16 | --sl-hue-orange: 20; 17 | --sl-color-orange-low: hsl(20, 19%, 20%); 18 | --sl-color-orange: hsl(20, 59%, 70%); 19 | --sl-color-orange-high: hsl(20, 79%, 70%); 20 | --sl-hue-green: 96; 21 | --sl-color-green-low: hsl(96, 4%, 18%); 22 | --sl-color-green: hsl(96, 24%, 68%); 23 | --sl-color-green-high: hsl(96, 44%, 68%); 24 | --sl-hue-blue: 222; 25 | --sl-color-blue-low: hsl(222, 14%, 24%); 26 | --sl-color-blue: hsl(222, 54%, 74%); 27 | --sl-color-blue-high: hsl(222, 74%, 74%); 28 | --sl-hue-purple: 277; 29 | --sl-color-purple-low: hsl(277, 9%, 21%); 30 | --sl-color-purple: hsl(277, 39%, 76%); 31 | --sl-color-purple-high: hsl(277, 59%, 76%); 32 | --sl-hue-red: 359; 33 | --sl-color-red-low: hsl(359, 13%, 21%); 34 | --sl-color-red: hsl(359, 48%, 71%); 35 | --sl-color-red-high: hsl(359, 68%, 71%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-blue.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(220, 91%, 76%); 4 | --sl-color-accent: hsl(220, 91%, 54%); 5 | --sl-color-accent-high: hsl(220, 91%, 44%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-flamingo.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(0, 60%, 89%); 4 | --sl-color-accent: hsl(0, 60%, 67%); 5 | --sl-color-accent-high: hsl(0, 60%, 57%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-green.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(109, 58%, 62%); 4 | --sl-color-accent: hsl(109, 58%, 40%); 5 | --sl-color-accent-high: hsl(109, 58%, 30%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-lavender.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(231, 97%, 94%); 4 | --sl-color-accent: hsl(231, 97%, 72%); 5 | --sl-color-accent-high: hsl(231, 97%, 62%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-maroon.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(355, 76%, 81%); 4 | --sl-color-accent: hsl(355, 76%, 59%); 5 | --sl-color-accent-high: hsl(355, 76%, 49%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-mauve.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(266, 85%, 80%); 4 | --sl-color-accent: hsl(266, 85%, 58%); 5 | --sl-color-accent-high: hsl(266, 85%, 48%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-peach.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(22, 99%, 74%); 4 | --sl-color-accent: hsl(22, 99%, 52%); 5 | --sl-color-accent-high: hsl(22, 99%, 42%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-pink.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(316, 73%, 91%); 4 | --sl-color-accent: hsl(316, 73%, 69%); 5 | --sl-color-accent-high: hsl(316, 73%, 59%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-red.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(347, 87%, 66%); 4 | --sl-color-accent: hsl(347, 87%, 44%); 5 | --sl-color-accent-high: hsl(347, 87%, 34%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-rosewater.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(11, 59%, 89%); 4 | --sl-color-accent: hsl(11, 59%, 67%); 5 | --sl-color-accent-high: hsl(11, 59%, 56%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-sapphire.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(189, 70%, 64%); 4 | --sl-color-accent: hsl(189, 70%, 42%); 5 | --sl-color-accent-high: hsl(189, 70%, 32%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-sky.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(197, 96%, 68%); 4 | --sl-color-accent: hsl(197, 96%, 46%); 5 | --sl-color-accent-high: hsl(197, 96%, 36%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-teal.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(183, 74%, 56%); 4 | --sl-color-accent: hsl(183, 74%, 35%); 5 | --sl-color-accent-high: hsl(183, 74%, 24%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-latte-yellow.css: -------------------------------------------------------------------------------- 1 | 2 | :root[data-theme='light'] { 3 | --sl-color-accent-low: hsl(35, 77%, 71%); 4 | --sl-color-accent: hsl(35, 77%, 49%); 5 | --sl-color-accent-high: hsl(35, 77%, 39%); 6 | --sl-color-white: #4c4f69; 7 | --sl-color-gray-1: #5c5f77; 8 | --sl-color-gray-2: #6c6f85; 9 | --sl-color-gray-3: #7c7f93; 10 | --sl-color-gray-4: #bcc0cc; 11 | --sl-color-gray-5: #ccd0da; 12 | --sl-color-gray-6: #e6e9ef; 13 | --sl-color-gray-7: #dce0e8; 14 | --sl-color-black: #eff1f5; 15 | 16 | --sl-hue-orange: 22; 17 | --sl-color-orange-low: hsl(22, 69%, 87%); 18 | --sl-color-orange: hsl(22, 99%, 42%); 19 | --sl-color-orange-high: hsl(22, 99%, 52%); 20 | --sl-hue-green: 109; 21 | --sl-color-green-low: hsl(109, 27%, 75%); 22 | --sl-color-green: hsl(109, 58%, 30%); 23 | --sl-color-green-high: hsl(109, 58%, 40%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 61%, 89%); 26 | --sl-color-blue: hsl(220, 91%, 44%); 27 | --sl-color-blue-high: hsl(220, 91%, 54%); 28 | --sl-hue-purple: 266; 29 | --sl-color-purple-low: hsl(266, 55%, 88%); 30 | --sl-color-purple: hsl(266, 85%, 48%); 31 | --sl-color-purple-high: hsl(266, 85%, 58%); 32 | --sl-hue-red: 347; 33 | --sl-color-red-low: hsl(347, 56%, 84%); 34 | --sl-color-red: hsl(347, 87%, 34%); 35 | --sl-color-red-high: hsl(347, 87%, 44%); 36 | 37 | color-scheme: light; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-blue.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(220, 83%, 15%); 4 | --sl-color-accent: hsl(220, 83%, 55%); 5 | --sl-color-accent-high: hsl(220, 83%, 75%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-flamingo.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(0, 58%, 26%); 4 | --sl-color-accent: hsl(0, 58%, 66%); 5 | --sl-color-accent-high: hsl(0, 58%, 86%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-green.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(105, 48%, 12%); 4 | --sl-color-accent: hsl(105, 48%, 52%); 5 | --sl-color-accent-high: hsl(105, 48%, 72%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-lavender.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(234, 82%, 25%); 4 | --sl-color-accent: hsl(234, 82%, 65%); 5 | --sl-color-accent-high: hsl(234, 82%, 85%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-maroon.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(355, 71%, 17%); 4 | --sl-color-accent: hsl(355, 71%, 57%); 5 | --sl-color-accent-high: hsl(355, 71%, 77%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-mauve.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(267, 83%, 20%); 4 | --sl-color-accent: hsl(267, 83%, 60%); 5 | --sl-color-accent-high: hsl(267, 83%, 80%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-peach.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(21, 85%, 13%); 4 | --sl-color-accent: hsl(21, 85%, 53%); 5 | --sl-color-accent-high: hsl(21, 85%, 73%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-pink.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(316, 74%, 25%); 4 | --sl-color-accent: hsl(316, 74%, 65%); 5 | --sl-color-accent-high: hsl(316, 74%, 85%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-red.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(351, 74%, 13%); 4 | --sl-color-accent: hsl(351, 74%, 53%); 5 | --sl-color-accent-high: hsl(351, 74%, 73%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-rosewater.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(10, 58%, 30%); 4 | --sl-color-accent: hsl(10, 58%, 70%); 5 | --sl-color-accent-high: hsl(10, 58%, 90%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-sapphire.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(199, 65%, 9%); 4 | --sl-color-accent: hsl(199, 65%, 49%); 5 | --sl-color-accent-high: hsl(199, 65%, 69%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-sky.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(189, 60%, 13%); 4 | --sl-color-accent: hsl(189, 60%, 53%); 5 | --sl-color-accent-high: hsl(189, 60%, 73%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-teal.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(171, 47%, 9%); 4 | --sl-color-accent: hsl(171, 47%, 49%); 5 | --sl-color-accent-high: hsl(171, 47%, 69%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-macchiato-yellow.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(40, 70%, 18%); 4 | --sl-color-accent: hsl(40, 70%, 58%); 5 | --sl-color-accent-high: hsl(40, 70%, 78%); 6 | --sl-color-white: #cad3f5; 7 | --sl-color-gray-1: #b8c0e0; 8 | --sl-color-gray-2: #a5adcb; 9 | --sl-color-gray-3: #939ab7; 10 | --sl-color-gray-4: #494d64; 11 | --sl-color-gray-5: #363a4f; 12 | --sl-color-gray-6: #1e2030; 13 | --sl-color-gray-7: #181926; 14 | --sl-color-black: #24273a; 15 | 16 | --sl-hue-orange: 21; 17 | --sl-color-orange-low: hsl(21, 25%, 23%); 18 | --sl-color-orange: hsl(21, 65%, 73%); 19 | --sl-color-orange-high: hsl(21, 85%, 73%); 20 | --sl-hue-green: 105; 21 | --sl-color-green-low: hsl(105, 8%, 22%); 22 | --sl-color-green: hsl(105, 28%, 72%); 23 | --sl-color-green-high: hsl(105, 48%, 72%); 24 | --sl-hue-blue: 220; 25 | --sl-color-blue-low: hsl(220, 23%, 25%); 26 | --sl-color-blue: hsl(220, 63%, 75%); 27 | --sl-color-blue-high: hsl(220, 83%, 75%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 25%); 30 | --sl-color-purple: hsl(267, 63%, 80%); 31 | --sl-color-purple-high: hsl(267, 83%, 80%); 32 | --sl-hue-red: 351; 33 | --sl-color-red-low: hsl(351, 19%, 23%); 34 | --sl-color-red: hsl(351, 54%, 73%); 35 | --sl-color-red-high: hsl(351, 74%, 73%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-blue.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(217, 92%, 16%); 4 | --sl-color-accent: hsl(217, 92%, 56%); 5 | --sl-color-accent-high: hsl(217, 92%, 76%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-flamingo.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(0, 59%, 28%); 4 | --sl-color-accent: hsl(0, 59%, 68%); 5 | --sl-color-accent-high: hsl(0, 59%, 88%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-green.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(115, 54%, 16%); 4 | --sl-color-accent: hsl(115, 54%, 56%); 5 | --sl-color-accent-high: hsl(115, 54%, 76%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-lavender.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(232, 97%, 25%); 4 | --sl-color-accent: hsl(232, 97%, 65%); 5 | --sl-color-accent-high: hsl(232, 97%, 85%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-maroon.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(350, 65%, 18%); 4 | --sl-color-accent: hsl(350, 65%, 58%); 5 | --sl-color-accent-high: hsl(350, 65%, 78%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-mauve.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(267, 84%, 21%); 4 | --sl-color-accent: hsl(267, 84%, 61%); 5 | --sl-color-accent-high: hsl(267, 84%, 81%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-peach.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(23, 92%, 16%); 4 | --sl-color-accent: hsl(23, 92%, 56%); 5 | --sl-color-accent-high: hsl(23, 92%, 76%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-pink.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(316, 72%, 26%); 4 | --sl-color-accent: hsl(316, 72%, 66%); 5 | --sl-color-accent-high: hsl(316, 72%, 86%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-red.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(343, 81%, 15%); 4 | --sl-color-accent: hsl(343, 81%, 55%); 5 | --sl-color-accent-high: hsl(343, 81%, 75%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-rosewater.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(10, 56%, 31%); 4 | --sl-color-accent: hsl(10, 56%, 71%); 5 | --sl-color-accent-high: hsl(10, 56%, 91%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-sapphire.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(199, 76%, 9%); 4 | --sl-color-accent: hsl(199, 76%, 49%); 5 | --sl-color-accent-high: hsl(199, 76%, 69%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-sky.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(189, 71%, 13%); 4 | --sl-color-accent: hsl(189, 71%, 53%); 5 | --sl-color-accent-high: hsl(189, 71%, 73%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-teal.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(170, 57%, 13%); 4 | --sl-color-accent: hsl(170, 57%, 53%); 5 | --sl-color-accent-high: hsl(170, 57%, 73%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/themes/catppuccin-mocha-yellow.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --sl-color-accent-low: hsl(41, 86%, 23%); 4 | --sl-color-accent: hsl(41, 86%, 63%); 5 | --sl-color-accent-high: hsl(41, 86%, 83%); 6 | --sl-color-white: #cdd6f4; 7 | --sl-color-gray-1: #bac2de; 8 | --sl-color-gray-2: #a6adc8; 9 | --sl-color-gray-3: #9399b2; 10 | --sl-color-gray-4: #45475a; 11 | --sl-color-gray-5: #313244; 12 | --sl-color-gray-6: #181825; 13 | --sl-color-gray-7: #11111b; 14 | --sl-color-black: #1e1e2e; 15 | 16 | --sl-hue-orange: 23; 17 | --sl-color-orange-low: hsl(23, 32%, 25%); 18 | --sl-color-orange: hsl(23, 72%, 76%); 19 | --sl-color-orange-high: hsl(23, 92%, 76%); 20 | --sl-hue-green: 115; 21 | --sl-color-green-low: hsl(115, 14%, 26%); 22 | --sl-color-green: hsl(115, 34%, 76%); 23 | --sl-color-green-high: hsl(115, 54%, 76%); 24 | --sl-hue-blue: 217; 25 | --sl-color-blue-low: hsl(217, 32%, 26%); 26 | --sl-color-blue: hsl(217, 72%, 76%); 27 | --sl-color-blue-high: hsl(217, 92%, 76%); 28 | --sl-hue-purple: 267; 29 | --sl-color-purple-low: hsl(267, 33%, 26%); 30 | --sl-color-purple: hsl(267, 64%, 81%); 31 | --sl-color-purple-high: hsl(267, 84%, 81%); 32 | --sl-hue-red: 343; 33 | --sl-color-red-low: hsl(343, 26%, 25%); 34 | --sl-color-red: hsl(343, 61%, 75%); 35 | --sl-color-red-high: hsl(343, 81%, 75%); 36 | 37 | color-scheme: dark; 38 | } 39 | -------------------------------------------------------------------------------- /packages/catppuccin-starlight/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict" 3 | } -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "packages/*" 3 | - "apps/*" 4 | 5 | catalog: 6 | "@astrojs/starlight": ^0.34.0 7 | "@astrojs/check": ^0.9.3 8 | astro: ^5.7.0 9 | sharp: ^0.34.0 10 | typescript: ^5.5.4 11 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "local>catppuccin/renovate-config" 5 | ] 6 | } 7 | --------------------------------------------------------------------------------