GRMrGecko/chroma-themes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
GRMrGecko 2026-02-12 10:13:32 -06:00
commit c3a72752de
61 changed files with 8789 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

592
README.md Normal file
View File

@ -0,0 +1,592 @@
# Chroma Themes
A curated collection of CSS variable theme palettes adapted from popular color schemes. Each theme provides a standardized set of CSS custom properties for backgrounds, text, surfaces, overlays, accents, and semantic colors, along with component tokens for common UI elements.
## Available Themes
### Catppuccin
| Theme | Mode | Description |
|-------|------|-------------|
| [catppuccin-frappe](catppuccin-frappe/) | Dark | A soft, muted dark color scheme |
| [catppuccin-latte](catppuccin-latte/) | Light | A light, warm color scheme |
| [catppuccin-macchiato](catppuccin-macchiato/) | Dark | A rich, deep dark color scheme |
| [catppuccin-mocha](catppuccin-mocha/) | Dark | The darkest, richest Catppuccin flavor |
### Dracula
| Theme | Mode | Description |
|-------|------|-------------|
| [dracula](dracula/) | Dark | A dark theme with vibrant accent colors |
| [alucard](alucard/) | Light | The light counterpart to Dracula with warm parchment tones |
### Edge
| Theme | Mode | Description |
|-------|------|-------------|
| [edge-dark](edge-dark/) | Dark | Clean and elegant color scheme with neutral tones |
| [edge-dark-aura](edge-dark-aura/) | Dark | Clean and elegant color scheme with a blue-purple tint |
| [edge-dark-aura-dim](edge-dark-aura-dim/) | Dark | Clean and elegant color scheme with muted blue-purple tones |
| [edge-dark-neon](edge-dark-neon/) | Dark | Clean and elegant color scheme with a deep blue-purple tint |
| [edge-light](edge-light/) | Light | Clean and elegant color scheme on a bright canvas |
### Everforest
| Theme | Mode | Description |
|-------|------|-------------|
| [everforest-dark](everforest-dark/) | Dark | A green based warm color scheme inspired by nature |
| [everforest-light](everforest-light/) | Light | A green based warm color scheme inspired by nature on a light canvas |
### Gruvbox
| Theme | Mode | Description |
|-------|------|-------------|
| [gruvbox-dark](gruvbox-dark/) | Dark | Retro groove color scheme with warm earthy tones |
| [gruvbox-light](gruvbox-light/) | Light | Retro groove color scheme with warm earthy tones on a light canvas |
### Nord
| Theme | Mode | Description |
|-------|------|-------------|
| [nord](nord/) | Dark | An arctic, north-bluish dark color palette for clean and uncluttered design |
| [nord-light](nord-light/) | Light | An arctic, north-bluish light color palette for bright and airy design |
### Rose Pine
| Theme | Mode | Description |
|-------|------|-------------|
| [rose-pine](rose-pine/) | Dark | All natural pine, faux fur, and a bit of soho vibes for the classy minimalist |
| [rose-pine-dawn](rose-pine-dawn/) | Light | A light variant for sunny day coding |
| [rose-pine-moon](rose-pine-moon/) | Dark | A dimmed variant with a cooler base for late night sessions |
### Sonokai
| Theme | Mode | Description |
|-------|------|-------------|
| [sonokai](sonokai/) | Dark | High contrast Monokai Pro inspired color scheme |
| [sonokai-andromeda](sonokai-andromeda/) | Dark | Deep blue-tinted Monokai Pro inspired variant |
| [sonokai-atlantis](sonokai-atlantis/) | Dark | Cool ocean-tinted Monokai Pro inspired variant |
| [sonokai-espresso](sonokai-espresso/) | Dark | Warm coffee-tinted Monokai Pro inspired variant |
| [sonokai-maia](sonokai-maia/) | Dark | Cool teal-tinted Monokai Pro inspired variant |
| [sonokai-shusia](sonokai-shusia/) | Dark | Warm purple-tinted Monokai Pro inspired variant |
### Tokyo Night
| Theme | Mode | Description |
|-------|------|-------------|
| [tokyonight-day](tokyonight-day/) | Light | A clean light theme with vivid accents |
| [tokyonight-moon](tokyonight-moon/) | Dark | A clean dark theme with brighter, more saturated accents |
| [tokyonight-night](tokyonight-night/) | Dark | The darkest variant with deep blue-black backgrounds |
| [tokyonight-storm](tokyonight-storm/) | Dark | A clean dark theme with a slightly lighter blue-tinted background |
## Theme Structure
Each theme is a directory containing two files:
```
theme-name/
manifest.yaml # Theme metadata, mode, tags, and color variable definitions
styles.css # CSS custom properties ready to load in a browser
```
### manifest.yaml
The manifest defines theme metadata and the 26 base color values:
```yaml
name: "Theme Name"
packageName: "theme-name"
version: "1.0.0"
description: "Short description of the theme"
author: "Author Name"
copyright: "Copyright notice"
license: "MIT"
source: "https://github.com/example/theme" # URL to original color scheme
mode: "dark" # "dark" or "light"
tags: # Searchable metadata tags
- collection-name
- warm
- vibrant
variables: # 26 base color definitions
base: "#1e1e2e"
mantle: "#181825"
crust: "#11111b"
text: "#cdd6f4"
# ... (see Variable Reference below)
```
### styles.css
The CSS file defines all custom properties under `:root`. It includes the 26 base color variables from the manifest, plus semantic aliases, component tokens, interactive tokens, and derived UI tokens:
```css
:root {
/* Base Colors (from manifest) */
--theme-base: #1e1e2e;
--theme-text: #cdd6f4;
/* ... */
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-accent: var(--theme-blue);
/* ... */
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-nav-bg: var(--theme-mantle);
/* ... */
/* Typography */
--theme-font-family: 'Inter', ...;
--theme-font-mono: 'JetBrains Mono', ...;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
/* ... */
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
/* ... */
/* Button, Table, Dropdown, Modal, Tooltip, Code Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-table-header-bg: var(--theme-surface0);
--theme-dropdown-bg: var(--theme-card-bg);
--theme-modal-bg: var(--theme-card-bg);
/* ... */
/* State Subtle Borders/Text, Accent Variants, Badge, Breadcrumb,
List Group, Pagination, Progress, Toast, Popover, Offcanvas,
Accordion, Nav Tab/Pill, Form, Heading, Spinner, Carousel,
Scrollbar, Disabled State Tokens */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-input-focus-border: var(--theme-accent);
/* ... */
}
```
## Usage
### Loading a Theme
Include the theme's `styles.css` file to apply its CSS custom properties:
```html
<link rel="stylesheet" href="themes/catppuccin-mocha/styles.css">
```
Or import it in your stylesheet:
```css
@import url('themes/catppuccin-mocha/styles.css');
```
### Using Variables in Your CSS
Reference the theme variables anywhere in your styles:
```css
body {
background-color: var(--theme-bg);
color: var(--theme-text);
font-family: var(--theme-font-family);
}
.card {
background: var(--theme-card-bg);
border: 1px solid var(--theme-card-border);
border-radius: var(--theme-radius-md);
box-shadow: var(--theme-shadow-sm);
}
.button-primary {
background: var(--theme-accent);
color: var(--theme-base);
}
.alert-error {
color: var(--theme-error);
}
```
### Switching Themes at Runtime
Swap themes dynamically by replacing the stylesheet:
```javascript
function setTheme(themeName) {
const link = document.getElementById('theme-stylesheet');
link.href = `themes/${themeName}/styles.css`;
}
```
### Reading the Manifest Programmatically
Parse `manifest.yaml` to build theme pickers, filter by mode or tags, or generate CSS from the variable definitions:
```javascript
import yaml from 'js-yaml';
const manifest = yaml.load(await fetch('themes/nord/manifest.yaml').then(r => r.text()));
console.log(manifest.name); // "Nord"
console.log(manifest.mode); // "dark"
console.log(manifest.tags); // ["nord", "cool", "arctic", "minimal"]
console.log(manifest.variables); // { base: "#2e3440", text: "#d8dee9", ... }
```
## Variable Reference
### Base Colors (26 variables)
These map from `manifest.yaml` variables to `--theme-*` CSS properties.
| Variable | CSS Property | Role |
|----------|-------------|------|
| `base` | `--theme-base` | Primary background |
| `mantle` | `--theme-mantle` | Secondary background (sidebars, panels) |
| `crust` | `--theme-crust` | Tertiary background (deepest layer) |
| `text` | `--theme-text` | Primary text color |
| `subtext0` | `--theme-subtext0` | Muted text |
| `subtext1` | `--theme-subtext1` | Secondary text |
| `surface0` | `--theme-surface0` | Elevated surface (cards, inputs) |
| `surface1` | `--theme-surface1` | Higher elevation surface |
| `surface2` | `--theme-surface2` | Highest elevation surface |
| `overlay0` | `--theme-overlay0` | Overlay / disabled state |
| `overlay1` | `--theme-overlay1` | Secondary overlay |
| `overlay2` | `--theme-overlay2` | Tertiary overlay |
| `blue` | `--theme-blue` | Blue accent |
| `lavender` | `--theme-lavender` | Lavender accent |
| `sapphire` | `--theme-sapphire` | Sapphire accent |
| `sky` | `--theme-sky` | Sky accent |
| `teal` | `--theme-teal` | Teal accent |
| `green` | `--theme-green` | Green accent |
| `yellow` | `--theme-yellow` | Yellow accent |
| `peach` | `--theme-peach` | Peach / orange accent |
| `maroon` | `--theme-maroon` | Maroon accent |
| `red` | `--theme-red` | Red accent |
| `mauve` | `--theme-mauve` | Mauve / purple accent |
| `pink` | `--theme-pink` | Pink accent |
| `flamingo` | `--theme-flamingo` | Flamingo accent |
| `rosewater` | `--theme-rosewater` | Rosewater accent |
### Semantic Aliases (10 variables)
Higher-level tokens that reference base colors. Override these per-theme to change which base color fills each role.
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-bg` | `--theme-base` | Page background |
| `--theme-bg-secondary` | `--theme-mantle` | Secondary background |
| `--theme-bg-tertiary` | `--theme-crust` | Tertiary background |
| `--theme-text-muted` | `--theme-subtext0` | De-emphasized text |
| `--theme-border` | `--theme-surface0` | Default border color |
| `--theme-accent` | `--theme-blue` | Primary accent color |
| `--theme-success` | `--theme-green` | Success state |
| `--theme-warning` | `--theme-yellow` | Warning state |
| `--theme-error` | `--theme-red` | Error state |
| `--theme-info` | `--theme-sapphire` | Informational state |
### Component Tokens (8 variables)
UI component defaults. Dark themes typically reference surface variables; light themes often use hardcoded white values for card elevation.
| CSS Property | Purpose |
|-------------|---------|
| `--theme-card-bg` | Card background |
| `--theme-card-border` | Card border |
| `--theme-input-bg` | Input field background |
| `--theme-input-border` | Input field border |
| `--theme-nav-bg` | Navigation bar background |
| `--theme-sidebar-bg` | Sidebar background |
| `--theme-widget-bg` | Widget / panel background |
| `--theme-widget-border` | Widget / panel border |
### Typography (2 variables)
| CSS Property | Default Value |
|-------------|---------------|
| `--theme-font-family` | `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` |
| `--theme-font-mono` | `'JetBrains Mono', 'Fira Code', monospace` |
### Spacing and Radius (6 variables)
| CSS Property | Dark Default | Light Default |
|-------------|-------------|---------------|
| `--theme-radius-sm` | `4px` | `4px` |
| `--theme-radius-md` | `8px` | `8px` |
| `--theme-radius-lg` | `12px` | `12px` |
| `--theme-shadow-sm` | `0 1px 2px rgba(0,0,0,0.25)` | `0 1px 2px rgba(0,0,0,0.05)` |
| `--theme-shadow-md` | `0 4px 6px rgba(0,0,0,0.3)` | `0 4px 6px rgba(0,0,0,0.1)` |
| `--theme-shadow-lg` | `0 10px 15px rgba(0,0,0,0.4)` | `0 10px 15px rgba(0,0,0,0.15)` |
### Interactive Tokens (4 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-link-color` | `--theme-accent` | Link text color |
| `--theme-link-hover-color` | `--theme-lavender` | Link hover text color |
| `--theme-focus-ring-color` | `color-mix(in srgb, accent 40%, transparent)` | Focus ring outline color |
| `--theme-hover-bg` | `--theme-surface1` | Generic hover background |
### Button Tokens (12 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-btn-primary-bg` | `--theme-accent` | Primary button background |
| `--theme-btn-primary-text` | `--theme-base` | Primary button text color |
| `--theme-btn-secondary-bg` | `--theme-surface1` | Secondary button background |
| `--theme-btn-secondary-text` | `--theme-text` | Secondary button text color |
| `--theme-btn-danger-bg` | `--theme-red` | Danger button background |
| `--theme-btn-danger-text` | `--theme-base` | Danger button text color |
| `--theme-btn-success-bg` | `--theme-green` | Success button background |
| `--theme-btn-success-text` | `--theme-base` | Success button text color |
| `--theme-btn-warning-bg` | `--theme-yellow` | Warning button background |
| `--theme-btn-warning-text` | `color-mix(yellow 25%, black)` | Warning button text color (always dark for contrast) |
| `--theme-btn-info-bg` | `--theme-sapphire` | Info button background |
| `--theme-btn-info-text` | `--theme-base` | Info button text color |
### State Subtle Backgrounds (4 variables)
Lightly tinted backgrounds for alerts, badges, and inline status indicators. Each mixes its semantic color at 15% over the page background.
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-success-bg-subtle` | `color-mix(green 15%, base)` | Success alert / badge background |
| `--theme-warning-bg-subtle` | `color-mix(yellow 15%, base)` | Warning alert / badge background |
| `--theme-error-bg-subtle` | `color-mix(red 15%, base)` | Error alert / badge background |
| `--theme-info-bg-subtle` | `color-mix(sapphire 15%, base)` | Info alert / badge background |
### Table Tokens (5 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-table-bg` | `--theme-base` | Table background |
| `--theme-table-border` | `--theme-surface1` | Table cell borders |
| `--theme-table-header-bg` | `--theme-surface0` | Table header row background |
| `--theme-table-stripe-bg` | `color-mix(overlay0 4%, base)` | Striped row background |
| `--theme-table-hover-bg` | `color-mix(overlay0 8%, base)` | Row hover background |
### Dropdown Tokens (3 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-dropdown-bg` | `--theme-card-bg` | Dropdown menu background |
| `--theme-dropdown-border` | `--theme-card-border` | Dropdown menu border |
| `--theme-dropdown-hover-bg` | `--theme-hover-bg` | Dropdown item hover background |
### Modal Tokens (3 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-modal-bg` | `--theme-card-bg` | Modal content background |
| `--theme-modal-border` | `--theme-card-border` | Modal content border |
| `--theme-backdrop-bg` | `rgba(0, 0, 0, 0.5)` | Modal backdrop overlay |
### Tooltip Tokens (2 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-tooltip-bg` | `--theme-overlay2` | Tooltip background |
| `--theme-tooltip-text` | `--theme-base` | Tooltip text color |
### Code Tokens (2 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-code-bg` | `--theme-surface0` | Inline code background |
| `--theme-code-text` | `--theme-pink` | Inline code text color |
### Emphasis and Utility (2 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-emphasis-color` | `--theme-text` | High-emphasis text (headings, bold) |
| `--theme-border-translucent` | `color-mix(border 60%, transparent)` | Semi-transparent border for layered surfaces |
### State Subtle Borders (4 variables)
Lightly tinted borders for alerts, badges, and status containers. Each mixes its semantic color at 25% over the page background.
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-success-border-subtle` | `color-mix(green 25%, base)` | Success alert / badge border |
| `--theme-warning-border-subtle` | `color-mix(yellow 25%, base)` | Warning alert / badge border |
| `--theme-error-border-subtle` | `color-mix(red 25%, base)` | Error alert / badge border |
| `--theme-info-border-subtle` | `color-mix(sapphire 25%, base)` | Info alert / badge border |
### State Text Emphasis (4 variables)
Text colors for semantic state labels, alert text, and badge text.
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-success-text` | `--theme-green` | Success state text |
| `--theme-warning-text` | `--theme-yellow` | Warning state text |
| `--theme-error-text` | `--theme-red` | Error state text |
| `--theme-info-text` | `--theme-sapphire` | Info state text |
### Accent/Primary Variants (3 variables)
Subtle background, border, and text tokens for the primary accent color, matching the pattern used by state colors.
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-accent-bg-subtle` | `color-mix(accent 15%, base)` | Subtle accent background |
| `--theme-accent-border-subtle` | `color-mix(accent 25%, base)` | Subtle accent border |
| `--theme-accent-text` | `--theme-accent` | Accent text emphasis |
### Badge Tokens (2 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-badge-bg` | `--theme-accent` | Badge background |
| `--theme-badge-text` | `--theme-base` | Badge text color |
### Breadcrumb Tokens (3 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-breadcrumb-color` | `--theme-text-muted` | Breadcrumb link color |
| `--theme-breadcrumb-active-color` | `--theme-text` | Active breadcrumb item color |
| `--theme-breadcrumb-divider-color` | `--theme-overlay1` | Breadcrumb divider/separator color |
### List Group Tokens (5 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-list-group-bg` | `--theme-card-bg` | List group item background |
| `--theme-list-group-border` | `--theme-card-border` | List group item border |
| `--theme-list-group-hover-bg` | `--theme-hover-bg` | List group item hover background |
| `--theme-list-group-active-bg` | `--theme-accent` | Active list group item background |
| `--theme-list-group-active-text` | `--theme-base` | Active list group item text color |
### Pagination Tokens (5 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-pagination-bg` | `--theme-card-bg` | Pagination item background |
| `--theme-pagination-border` | `--theme-card-border` | Pagination item border |
| `--theme-pagination-active-bg` | `--theme-accent` | Active page background |
| `--theme-pagination-active-text` | `--theme-base` | Active page text color |
| `--theme-pagination-disabled-color` | `--theme-overlay0` | Disabled page text color |
### Progress Bar Tokens (2 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-progress-bg` | `--theme-surface0` | Progress track background |
| `--theme-progress-bar-bg` | `--theme-accent` | Progress bar fill color |
### Toast Tokens (3 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-toast-bg` | `--theme-card-bg` | Toast background |
| `--theme-toast-border` | `--theme-card-border` | Toast border |
| `--theme-toast-header-bg` | `color-mix(surface0 80%, card-bg)` | Toast header background |
### Popover Tokens (3 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-popover-bg` | `--theme-card-bg` | Popover background |
| `--theme-popover-border` | `--theme-card-border` | Popover border |
| `--theme-popover-header-bg` | `color-mix(surface0 50%, card-bg)` | Popover header background |
### Offcanvas Tokens (2 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-offcanvas-bg` | `--theme-card-bg` | Offcanvas panel background |
| `--theme-offcanvas-border` | `--theme-card-border` | Offcanvas panel border |
### Accordion Tokens (5 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-accordion-bg` | `--theme-card-bg` | Accordion item background |
| `--theme-accordion-border` | `--theme-card-border` | Accordion item border |
| `--theme-accordion-active-bg` | `--theme-accent-bg-subtle` | Expanded accordion header background |
| `--theme-accordion-active-text` | `--theme-accent` | Expanded accordion header text |
| `--theme-accordion-btn-bg` | `--theme-card-bg` | Accordion button/header background |
### Nav Tab/Pill Tokens (6 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-nav-tab-border` | `--theme-border` | Tab border color |
| `--theme-nav-tab-active-bg` | `--theme-card-bg` | Active tab background |
| `--theme-nav-tab-active-text` | `--theme-accent` | Active tab text color |
| `--theme-nav-tab-hover-bg` | `--theme-hover-bg` | Tab hover background |
| `--theme-nav-pill-active-bg` | `--theme-accent` | Active pill background |
| `--theme-nav-pill-active-text` | `--theme-base` | Active pill text color |
### Form Enhancement Tokens (8 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-input-focus-border` | `--theme-accent` | Focused input border color |
| `--theme-input-placeholder-color` | `--theme-overlay1` | Input placeholder text color |
| `--theme-input-disabled-bg` | `--theme-surface0` | Disabled input background |
| `--theme-form-valid-color` | `--theme-green` | Valid form feedback color |
| `--theme-form-valid-border` | `--theme-green` | Valid input border color |
| `--theme-form-invalid-color` | `--theme-red` | Invalid form feedback color |
| `--theme-form-invalid-border` | `--theme-red` | Invalid input border color |
| `--theme-form-check-active-bg` | `--theme-accent` | Checked checkbox/radio background |
### Heading and Selection (3 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-heading-color` | `--theme-text` | Heading text color |
| `--theme-highlight-bg` | `color-mix(yellow 30%, base)` | Text highlight / selection background |
| `--theme-highlight-text` | `--theme-text` | Text highlight / selection text color |
### Miscellaneous UI Tokens (9 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-spinner-color` | `--theme-accent` | Loading spinner color |
| `--theme-close-btn-color` | `--theme-text-muted` | Close button icon color |
| `--theme-placeholder-bg` | `--theme-surface1` | Placeholder/skeleton loading background |
| `--theme-focus-ring-width` | `0.25rem` | Focus ring outline width |
| `--theme-disabled-opacity` | `0.65` | Opacity for disabled elements |
| `--theme-carousel-indicator-bg` | `--theme-overlay1` | Carousel indicator dot color |
| `--theme-carousel-indicator-active-bg` | `--theme-text` | Active carousel indicator color |
| `--theme-carousel-caption-color` | `--theme-text` | Carousel caption text color |
### Scrollbar Tokens (3 variables)
| CSS Property | Default Reference | Purpose |
|-------------|-------------------|---------|
| `--theme-scrollbar-track` | `--theme-surface0` | Scrollbar track background |
| `--theme-scrollbar-thumb` | `--theme-overlay0` | Scrollbar thumb color |
| `--theme-scrollbar-thumb-hover` | `--theme-overlay1` | Scrollbar thumb hover color |
## Creating a Custom Theme
1. Create a new directory with your theme's package name.
2. Add a `manifest.yaml` with all required fields and the 26 color variables.
3. Add a `styles.css` that maps the manifest variables to `--theme-*` CSS properties and includes semantic aliases, component tokens, typography, and spacing tokens.
Use an existing theme as a template. The key difference between dark and light themes is:
- **Dark themes** use surface variables for component backgrounds and higher-opacity shadows.
- **Light themes** often hardcode white (`#ffffff`) or near-white values for cards, inputs, and navigation to create elevation contrast on light page backgrounds. They use lower-opacity shadows.
### Tags
The `tags` field in the manifest is a flat list of strings for filtering and search. Common tag categories:
- **Collection**: The theme family name (e.g., `catppuccin`, `nord`, `dracula`)
- **Temperature**: `warm`, `cool`, `neutral`
- **Intensity**: `vibrant`, `muted`, `pastel`, `high-contrast`, `saturated`
- **Character**: `minimal`, `retro`, `elegant`, `natural`, `clean`, `deep`, `dim`
## License
Each theme retains its original license. Most themes are MIT licensed. The Tokyo Night variants are Apache-2.0 licensed. Check the `license` field in each theme's `manifest.yaml` for specifics.

41
alucard/manifest.yaml Normal file
View File

@ -0,0 +1,41 @@
name: "Alucard"
packageName: "alucard"
version: "1.2.5"
description: "The light counterpart to Dracula with warm parchment tones"
author: "Dracula Theme"
copyright: "Copyright (c) 2023 Dracula Theme"
license: "MIT"
source: "https://github.com/dracula/dracula-theme"
mode: "light"
tags:
- dracula
- warm
- parchment
- vintage
variables:
base: "#fffbeb"
mantle: "#f5f0df"
crust: "#ebe6d5"
text: "#1f1f1f"
subtext0: "#6c664b"
subtext1: "#1f1f1f"
surface0: "#ebe6d5"
surface1: "#dfdace"
surface2: "#cfcfde"
overlay0: "#6c664b"
overlay1: "#6c664b"
overlay2: "#4f4a35"
blue: "#036a96"
lavender: "#644ac9"
sapphire: "#036a96"
sky: "#036a96"
teal: "#036a96"
green: "#14710a"
yellow: "#846e15"
peach: "#a34d14"
maroon: "#cb3a2a"
red: "#cb3a2a"
mauve: "#644ac9"
pink: "#a3144d"
flamingo: "#a3144d"
rosewater: "#a3144d"

233
alucard/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Alucard - Base Colors */
--theme-rosewater: #a3144d;
--theme-flamingo: #a3144d;
--theme-pink: #a3144d;
--theme-mauve: #644ac9;
--theme-red: #cb3a2a;
--theme-maroon: #cb3a2a;
--theme-peach: #a34d14;
--theme-yellow: #846e15;
--theme-green: #14710a;
--theme-teal: #036a96;
--theme-sky: #036a96;
--theme-sapphire: #036a96;
--theme-blue: #036a96;
--theme-lavender: #644ac9;
--theme-text: #1f1f1f;
--theme-subtext1: #1f1f1f;
--theme-subtext0: #6c664b;
--theme-overlay2: #4f4a35;
--theme-overlay1: #6c664b;
--theme-overlay0: #6c664b;
--theme-surface2: #cfcfde;
--theme-surface1: #dfdace;
--theme-surface0: #ebe6d5;
--theme-base: #fffbeb;
--theme-mantle: #f5f0df;
--theme-crust: #ebe6d5;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-mauve);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses white cards on warm page for elevation. */
--theme-card-bg: #fffdf5;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #fffdf5;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #fffdf5;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #fffdf5;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
catppuccin-frappe/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Catppuccin Frappe"
packageName: "catppuccin-frappe"
version: "0.2.0"
description: "A soft, muted dark color scheme"
author: "Catppuccin"
copyright: "Copyright (c) 2021 Catppuccin"
license: "MIT"
source: "https://github.com/catppuccin/catppuccin"
mode: "dark"
tags:
- catppuccin
- muted
- pastel
variables:
base: "#303446"
mantle: "#292c3c"
crust: "#232634"
text: "#c6d0f5"
subtext0: "#a5adce"
subtext1: "#b5bfe2"
surface0: "#414559"
surface1: "#51576d"
surface2: "#626880"
overlay0: "#737994"
overlay1: "#838ba7"
overlay2: "#949cbb"
blue: "#8caaee"
lavender: "#babbf1"
sapphire: "#85c1dc"
sky: "#99d1db"
teal: "#81c8be"
green: "#a6d189"
yellow: "#e5c890"
peach: "#ef9f76"
maroon: "#ea999c"
red: "#e78284"
mauve: "#ca9ee6"
pink: "#f4b8e4"
flamingo: "#eebebe"
rosewater: "#f2d5cf"

233
catppuccin-frappe/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Catppuccin Frappe - Base Colors */
--theme-rosewater: #f2d5cf;
--theme-flamingo: #eebebe;
--theme-pink: #f4b8e4;
--theme-mauve: #ca9ee6;
--theme-red: #e78284;
--theme-maroon: #ea999c;
--theme-peach: #ef9f76;
--theme-yellow: #e5c890;
--theme-green: #a6d189;
--theme-teal: #81c8be;
--theme-sky: #99d1db;
--theme-sapphire: #85c1dc;
--theme-blue: #8caaee;
--theme-lavender: #babbf1;
--theme-text: #c6d0f5;
--theme-subtext1: #b5bfe2;
--theme-subtext0: #a5adce;
--theme-overlay2: #949cbb;
--theme-overlay1: #838ba7;
--theme-overlay0: #737994;
--theme-surface2: #626880;
--theme-surface1: #51576d;
--theme-surface0: #414559;
--theme-base: #303446;
--theme-mantle: #292c3c;
--theme-crust: #232634;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
catppuccin-latte/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Catppuccin Latte"
packageName: "catppuccin-latte"
version: "0.2.0"
description: "A light, warm color scheme"
author: "Catppuccin"
copyright: "Copyright (c) 2021 Catppuccin"
license: "MIT"
source: "https://github.com/catppuccin/catppuccin"
mode: "light"
tags:
- catppuccin
- warm
- pastel
variables:
base: "#eff1f5"
mantle: "#e6e9ef"
crust: "#dce0e8"
text: "#4c4f69"
subtext0: "#6c6f85"
subtext1: "#5c5f77"
surface0: "#ccd0da"
surface1: "#bcc0cc"
surface2: "#acb0be"
overlay0: "#9ca0b0"
overlay1: "#8c8fa1"
overlay2: "#7c7f93"
blue: "#1e66f5"
lavender: "#7287fd"
sapphire: "#209fb5"
sky: "#04a5e5"
teal: "#179299"
green: "#40a02b"
yellow: "#df8e1d"
peach: "#fe640b"
maroon: "#e64553"
red: "#d20f39"
mauve: "#8839ef"
pink: "#ea76cb"
flamingo: "#dd7878"
rosewater: "#dc8a78"

233
catppuccin-latte/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Catppuccin Latte - Base Colors */
--theme-rosewater: #dc8a78;
--theme-flamingo: #dd7878;
--theme-pink: #ea76cb;
--theme-mauve: #8839ef;
--theme-red: #d20f39;
--theme-maroon: #e64553;
--theme-peach: #fe640b;
--theme-yellow: #df8e1d;
--theme-green: #40a02b;
--theme-teal: #179299;
--theme-sky: #04a5e5;
--theme-sapphire: #209fb5;
--theme-blue: #1e66f5;
--theme-lavender: #7287fd;
--theme-text: #4c4f69;
--theme-subtext1: #5c5f77;
--theme-subtext0: #6c6f85;
--theme-overlay2: #7c7f93;
--theme-overlay1: #8c8fa1;
--theme-overlay0: #9ca0b0;
--theme-surface2: #acb0be;
--theme-surface1: #bcc0cc;
--theme-surface0: #ccd0da;
--theme-base: #eff1f5;
--theme-mantle: #e6e9ef;
--theme-crust: #dce0e8;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses white cards on gray page for elevation. */
--theme-card-bg: #ffffff;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #ffffff;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #ffffff;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #ffffff;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
catppuccin-macchiato/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Catppuccin Macchiato"
packageName: "catppuccin-macchiato"
version: "0.2.0"
description: "A rich, deep dark color scheme"
author: "Catppuccin"
copyright: "Copyright (c) 2021 Catppuccin"
license: "MIT"
source: "https://github.com/catppuccin/catppuccin"
mode: "dark"
tags:
- catppuccin
- muted
- rich
variables:
base: "#24273a"
mantle: "#1e2030"
crust: "#181926"
text: "#cad3f5"
subtext0: "#a5adcb"
subtext1: "#b8c0e0"
surface0: "#363a4f"
surface1: "#494d64"
surface2: "#5b6078"
overlay0: "#6e738d"
overlay1: "#8087a2"
overlay2: "#939ab7"
blue: "#8aadf4"
lavender: "#b7bdf8"
sapphire: "#7dc4e4"
sky: "#91d7e3"
teal: "#8bd5ca"
green: "#a6da95"
yellow: "#eed49f"
peach: "#f5a97f"
maroon: "#ee99a0"
red: "#ed8796"
mauve: "#c6a0f6"
pink: "#f5bde6"
flamingo: "#f0c6c6"
rosewater: "#f4dbd6"

233
catppuccin-macchiato/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Catppuccin Macchiato - Base Colors */
--theme-rosewater: #f4dbd6;
--theme-flamingo: #f0c6c6;
--theme-pink: #f5bde6;
--theme-mauve: #c6a0f6;
--theme-red: #ed8796;
--theme-maroon: #ee99a0;
--theme-peach: #f5a97f;
--theme-yellow: #eed49f;
--theme-green: #a6da95;
--theme-teal: #8bd5ca;
--theme-sky: #91d7e3;
--theme-sapphire: #7dc4e4;
--theme-blue: #8aadf4;
--theme-lavender: #b7bdf8;
--theme-text: #cad3f5;
--theme-subtext1: #b8c0e0;
--theme-subtext0: #a5adcb;
--theme-overlay2: #939ab7;
--theme-overlay1: #8087a2;
--theme-overlay0: #6e738d;
--theme-surface2: #5b6078;
--theme-surface1: #494d64;
--theme-surface0: #363a4f;
--theme-base: #24273a;
--theme-mantle: #1e2030;
--theme-crust: #181926;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
catppuccin-mocha/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Catppuccin Mocha"
packageName: "catppuccin-mocha"
version: "0.2.0"
description: "The darkest, richest Catppuccin flavor"
author: "Catppuccin"
copyright: "Copyright (c) 2021 Catppuccin"
license: "MIT"
source: "https://github.com/catppuccin/catppuccin"
mode: "dark"
tags:
- catppuccin
- warm
- rich
variables:
base: "#1e1e2e"
mantle: "#181825"
crust: "#11111b"
text: "#cdd6f4"
subtext0: "#a6adc8"
subtext1: "#bac2de"
surface0: "#313244"
surface1: "#45475a"
surface2: "#585b70"
overlay0: "#6c7086"
overlay1: "#7f849c"
overlay2: "#9399b2"
blue: "#89b4fa"
lavender: "#b4befe"
sapphire: "#74c7ec"
sky: "#89dceb"
teal: "#94e2d5"
green: "#a6e3a1"
yellow: "#f9e2af"
peach: "#fab387"
maroon: "#eba0ac"
red: "#f38ba8"
mauve: "#cba6f7"
pink: "#f5c2e7"
flamingo: "#f2cdcd"
rosewater: "#f5e0dc"

233
catppuccin-mocha/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Catppuccin Mocha - Base Colors */
--theme-rosewater: #f5e0dc;
--theme-flamingo: #f2cdcd;
--theme-pink: #f5c2e7;
--theme-mauve: #cba6f7;
--theme-red: #f38ba8;
--theme-maroon: #eba0ac;
--theme-peach: #fab387;
--theme-yellow: #f9e2af;
--theme-green: #a6e3a1;
--theme-teal: #94e2d5;
--theme-sky: #89dceb;
--theme-sapphire: #74c7ec;
--theme-blue: #89b4fa;
--theme-lavender: #b4befe;
--theme-text: #cdd6f4;
--theme-subtext1: #bac2de;
--theme-subtext0: #a6adc8;
--theme-overlay2: #9399b2;
--theme-overlay1: #7f849c;
--theme-overlay0: #6c7086;
--theme-surface2: #585b70;
--theme-surface1: #45475a;
--theme-surface0: #313244;
--theme-base: #1e1e2e;
--theme-mantle: #181825;
--theme-crust: #11111b;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
dracula/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Dracula"
packageName: "dracula"
version: "1.2.5"
description: "A dark theme with vibrant accent colors"
author: "Dracula Theme"
copyright: "Copyright (c) 2023 Dracula Theme"
license: "MIT"
source: "https://github.com/dracula/dracula-theme"
mode: "dark"
tags:
- dracula
- vibrant
- high-contrast
variables:
base: "#282a36"
mantle: "#21222c"
crust: "#191a21"
text: "#f8f8f2"
subtext0: "#6272a4"
subtext1: "#f8f8f2"
surface0: "#343746"
surface1: "#44475a"
surface2: "#565970"
overlay0: "#6272a4"
overlay1: "#6272a4"
overlay2: "#7082b4"
blue: "#8be9fd"
lavender: "#bd93f9"
sapphire: "#8be9fd"
sky: "#8be9fd"
teal: "#8be9fd"
green: "#50fa7b"
yellow: "#f1fa8c"
peach: "#ffb86c"
maroon: "#ff5555"
red: "#ff5555"
mauve: "#bd93f9"
pink: "#ff79c6"
flamingo: "#ff79c6"
rosewater: "#ff79c6"

233
dracula/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Dracula - Base Colors */
--theme-rosewater: #ff79c6;
--theme-flamingo: #ff79c6;
--theme-pink: #ff79c6;
--theme-mauve: #bd93f9;
--theme-red: #ff5555;
--theme-maroon: #ff5555;
--theme-peach: #ffb86c;
--theme-yellow: #f1fa8c;
--theme-green: #50fa7b;
--theme-teal: #8be9fd;
--theme-sky: #8be9fd;
--theme-sapphire: #8be9fd;
--theme-blue: #8be9fd;
--theme-lavender: #bd93f9;
--theme-text: #f8f8f2;
--theme-subtext1: #f8f8f2;
--theme-subtext0: #6272a4;
--theme-overlay2: #7082b4;
--theme-overlay1: #6272a4;
--theme-overlay0: #6272a4;
--theme-surface2: #565970;
--theme-surface1: #44475a;
--theme-surface0: #343746;
--theme-base: #282a36;
--theme-mantle: #21222c;
--theme-crust: #191a21;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-mauve);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
edge-dark-aura-dim/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Edge Dark (Aura Dim)"
packageName: "edge-dark-aura-dim"
version: "0.2.3"
description: "Clean and elegant color scheme with muted blue-purple tones"
author: "Sainnhe Park"
copyright: "Copyright (c) 2019 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/edge"
mode: "dark"
tags:
- edge
- cool
- muted
variables:
base: "#2b2d37"
mantle: "#24262d"
crust: "#202023"
text: "#97a4b5"
subtext0: "#677287"
subtext1: "#7f8b9e"
surface0: "#333644"
surface1: "#363a49"
surface2: "#3a3e4e"
overlay0: "#404455"
overlay1: "#4f5868"
overlay2: "#677287"
blue: "#6cb6eb"
lavender: "#d38aea"
sapphire: "#6cb6eb"
sky: "#5dbbc1"
teal: "#5dbbc1"
green: "#a0c980"
yellow: "#deb974"
peach: "#deb974"
maroon: "#ec7279"
red: "#ec7279"
mauve: "#d38aea"
pink: "#d38aea"
flamingo: "#ec7279"
rosewater: "#d38aea"

233
edge-dark-aura-dim/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Edge Dark (Aura Dim) - Base Colors */
--theme-rosewater: #d38aea;
--theme-flamingo: #ec7279;
--theme-pink: #d38aea;
--theme-mauve: #d38aea;
--theme-red: #ec7279;
--theme-maroon: #ec7279;
--theme-peach: #deb974;
--theme-yellow: #deb974;
--theme-green: #a0c980;
--theme-teal: #5dbbc1;
--theme-sky: #5dbbc1;
--theme-sapphire: #6cb6eb;
--theme-blue: #6cb6eb;
--theme-lavender: #d38aea;
--theme-text: #97a4b5;
--theme-subtext1: #7f8b9e;
--theme-subtext0: #677287;
--theme-overlay2: #677287;
--theme-overlay1: #4f5868;
--theme-overlay0: #404455;
--theme-surface2: #3a3e4e;
--theme-surface1: #363a49;
--theme-surface0: #333644;
--theme-base: #2b2d37;
--theme-mantle: #24262d;
--theme-crust: #202023;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
edge-dark-aura/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Edge Dark (Aura)"
packageName: "edge-dark-aura"
version: "0.2.3"
description: "Clean and elegant color scheme with a blue-purple tint"
author: "Sainnhe Park"
copyright: "Copyright (c) 2019 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/edge"
mode: "dark"
tags:
- edge
- cool
- purple
variables:
base: "#2b2d37"
mantle: "#24262d"
crust: "#202023"
text: "#c5cdd9"
subtext0: "#758094"
subtext1: "#9da7b7"
surface0: "#333644"
surface1: "#363a49"
surface2: "#3a3e4e"
overlay0: "#404455"
overlay1: "#535c6a"
overlay2: "#758094"
blue: "#6cb6eb"
lavender: "#d38aea"
sapphire: "#6cb6eb"
sky: "#5dbbc1"
teal: "#5dbbc1"
green: "#a0c980"
yellow: "#deb974"
peach: "#deb974"
maroon: "#ec7279"
red: "#ec7279"
mauve: "#d38aea"
pink: "#d38aea"
flamingo: "#ec7279"
rosewater: "#d38aea"

233
edge-dark-aura/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Edge Dark (Aura) - Base Colors */
--theme-rosewater: #d38aea;
--theme-flamingo: #ec7279;
--theme-pink: #d38aea;
--theme-mauve: #d38aea;
--theme-red: #ec7279;
--theme-maroon: #ec7279;
--theme-peach: #deb974;
--theme-yellow: #deb974;
--theme-green: #a0c980;
--theme-teal: #5dbbc1;
--theme-sky: #5dbbc1;
--theme-sapphire: #6cb6eb;
--theme-blue: #6cb6eb;
--theme-lavender: #d38aea;
--theme-text: #c5cdd9;
--theme-subtext1: #9da7b7;
--theme-subtext0: #758094;
--theme-overlay2: #758094;
--theme-overlay1: #535c6a;
--theme-overlay0: #404455;
--theme-surface2: #3a3e4e;
--theme-surface1: #363a49;
--theme-surface0: #333644;
--theme-base: #2b2d37;
--theme-mantle: #24262d;
--theme-crust: #202023;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
edge-dark-neon/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Edge Dark (Neon)"
packageName: "edge-dark-neon"
version: "0.2.3"
description: "Clean and elegant color scheme with a deep blue-purple tint"
author: "Sainnhe Park"
copyright: "Copyright (c) 2019 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/edge"
mode: "dark"
tags:
- edge
- cool
- neon
variables:
base: "#2b2d3a"
mantle: "#252630"
crust: "#202023"
text: "#c5cdd9"
subtext0: "#758094"
subtext1: "#9da7b7"
surface0: "#333648"
surface1: "#363a4e"
surface2: "#393e53"
overlay0: "#3f445b"
overlay1: "#535c6a"
overlay2: "#758094"
blue: "#6cb6eb"
lavender: "#d38aea"
sapphire: "#6cb6eb"
sky: "#5dbbc1"
teal: "#5dbbc1"
green: "#a0c980"
yellow: "#deb974"
peach: "#deb974"
maroon: "#ec7279"
red: "#ec7279"
mauve: "#d38aea"
pink: "#d38aea"
flamingo: "#ec7279"
rosewater: "#d38aea"

233
edge-dark-neon/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Edge Dark (Neon) - Base Colors */
--theme-rosewater: #d38aea;
--theme-flamingo: #ec7279;
--theme-pink: #d38aea;
--theme-mauve: #d38aea;
--theme-red: #ec7279;
--theme-maroon: #ec7279;
--theme-peach: #deb974;
--theme-yellow: #deb974;
--theme-green: #a0c980;
--theme-teal: #5dbbc1;
--theme-sky: #5dbbc1;
--theme-sapphire: #6cb6eb;
--theme-blue: #6cb6eb;
--theme-lavender: #d38aea;
--theme-text: #c5cdd9;
--theme-subtext1: #9da7b7;
--theme-subtext0: #758094;
--theme-overlay2: #758094;
--theme-overlay1: #535c6a;
--theme-overlay0: #3f445b;
--theme-surface2: #393e53;
--theme-surface1: #363a4e;
--theme-surface0: #333648;
--theme-base: #2b2d3a;
--theme-mantle: #252630;
--theme-crust: #202023;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
edge-dark/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Edge Dark"
packageName: "edge-dark"
version: "0.2.3"
description: "Clean and elegant color scheme with neutral tones"
author: "Sainnhe Park"
copyright: "Copyright (c) 2019 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/edge"
mode: "dark"
tags:
- edge
- neutral
- clean
variables:
base: "#2c2e34"
mantle: "#24262a"
crust: "#202023"
text: "#c5cdd9"
subtext0: "#758094"
subtext1: "#9da7b7"
surface0: "#33353f"
surface1: "#363944"
surface2: "#3b3e48"
overlay0: "#414550"
overlay1: "#535c6a"
overlay2: "#758094"
blue: "#6cb6eb"
lavender: "#d38aea"
sapphire: "#6cb6eb"
sky: "#5dbbc1"
teal: "#5dbbc1"
green: "#a0c980"
yellow: "#deb974"
peach: "#deb974"
maroon: "#ec7279"
red: "#ec7279"
mauve: "#d38aea"
pink: "#d38aea"
flamingo: "#ec7279"
rosewater: "#d38aea"

233
edge-dark/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Edge Dark - Base Colors */
--theme-rosewater: #d38aea;
--theme-flamingo: #ec7279;
--theme-pink: #d38aea;
--theme-mauve: #d38aea;
--theme-red: #ec7279;
--theme-maroon: #ec7279;
--theme-peach: #deb974;
--theme-yellow: #deb974;
--theme-green: #a0c980;
--theme-teal: #5dbbc1;
--theme-sky: #5dbbc1;
--theme-sapphire: #6cb6eb;
--theme-blue: #6cb6eb;
--theme-lavender: #d38aea;
--theme-text: #c5cdd9;
--theme-subtext1: #9da7b7;
--theme-subtext0: #758094;
--theme-overlay2: #758094;
--theme-overlay1: #535c6a;
--theme-overlay0: #414550;
--theme-surface2: #3b3e48;
--theme-surface1: #363944;
--theme-surface0: #33353f;
--theme-base: #2c2e34;
--theme-mantle: #24262a;
--theme-crust: #202023;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
edge-light/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Edge Light"
packageName: "edge-light"
version: "0.2.3"
description: "Clean and elegant color scheme on a bright canvas"
author: "Sainnhe Park"
copyright: "Copyright (c) 2019 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/edge"
mode: "light"
tags:
- edge
- neutral
- clean
variables:
base: "#fafafa"
mantle: "#eef1f4"
crust: "#e8ebf0"
text: "#4b505b"
subtext0: "#8790a0"
subtext1: "#69707e"
surface0: "#dde2e7"
surface1: "#d3d8df"
surface2: "#bcc5cf"
overlay0: "#bac3cb"
overlay1: "#8790a0"
overlay2: "#69707e"
blue: "#5079be"
lavender: "#b05ccc"
sapphire: "#5079be"
sky: "#3a8b84"
teal: "#3a8b84"
green: "#608e32"
yellow: "#be7e05"
peach: "#be7e05"
maroon: "#d05858"
red: "#d05858"
mauve: "#b05ccc"
pink: "#b05ccc"
flamingo: "#d05858"
rosewater: "#b05ccc"

233
edge-light/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Edge Light - Base Colors */
--theme-rosewater: #b05ccc;
--theme-flamingo: #d05858;
--theme-pink: #b05ccc;
--theme-mauve: #b05ccc;
--theme-red: #d05858;
--theme-maroon: #d05858;
--theme-peach: #be7e05;
--theme-yellow: #be7e05;
--theme-green: #608e32;
--theme-teal: #3a8b84;
--theme-sky: #3a8b84;
--theme-sapphire: #5079be;
--theme-blue: #5079be;
--theme-lavender: #b05ccc;
--theme-text: #4b505b;
--theme-subtext1: #69707e;
--theme-subtext0: #8790a0;
--theme-overlay2: #69707e;
--theme-overlay1: #8790a0;
--theme-overlay0: #bac3cb;
--theme-surface2: #bcc5cf;
--theme-surface1: #d3d8df;
--theme-surface0: #dde2e7;
--theme-base: #fafafa;
--theme-mantle: #eef1f4;
--theme-crust: #e8ebf0;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses brighter cards for elevation. */
--theme-card-bg: #ffffff;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #ffffff;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #ffffff;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #ffffff;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
everforest-dark/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Everforest Dark"
packageName: "everforest-dark"
version: "0.3.0"
description: "A green based warm color scheme inspired by nature"
author: "Sainnhe Park"
copyright: "Copyright (c) 2019 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/everforest"
mode: "dark"
tags:
- everforest
- warm
- natural
variables:
base: "#2d353b"
mantle: "#232a2e"
crust: "#1e2529"
text: "#d3c6aa"
subtext0: "#859289"
subtext1: "#9da9a0"
surface0: "#343f44"
surface1: "#3d484d"
surface2: "#475258"
overlay0: "#4f585e"
overlay1: "#56635f"
overlay2: "#7a8478"
blue: "#7fbbb3"
lavender: "#7fbbb3"
sapphire: "#7fbbb3"
sky: "#83c092"
teal: "#83c092"
green: "#a7c080"
yellow: "#dbbc7f"
peach: "#e69875"
maroon: "#e67e80"
red: "#e67e80"
mauve: "#d699b6"
pink: "#d699b6"
flamingo: "#e69875"
rosewater: "#d699b6"

233
everforest-dark/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Everforest Dark - Base Colors */
--theme-rosewater: #d699b6;
--theme-flamingo: #e69875;
--theme-pink: #d699b6;
--theme-mauve: #d699b6;
--theme-red: #e67e80;
--theme-maroon: #e67e80;
--theme-peach: #e69875;
--theme-yellow: #dbbc7f;
--theme-green: #a7c080;
--theme-teal: #83c092;
--theme-sky: #83c092;
--theme-sapphire: #7fbbb3;
--theme-blue: #7fbbb3;
--theme-lavender: #7fbbb3;
--theme-text: #d3c6aa;
--theme-subtext1: #9da9a0;
--theme-subtext0: #859289;
--theme-overlay2: #7a8478;
--theme-overlay1: #56635f;
--theme-overlay0: #4f585e;
--theme-surface2: #475258;
--theme-surface1: #3d484d;
--theme-surface0: #343f44;
--theme-base: #2d353b;
--theme-mantle: #232a2e;
--theme-crust: #1e2529;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
everforest-light/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Everforest Light"
packageName: "everforest-light"
version: "0.3.0"
description: "A green based warm color scheme inspired by nature on a light canvas"
author: "Sainnhe Park"
copyright: "Copyright (c) 2019 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/everforest"
mode: "light"
tags:
- everforest
- warm
- natural
variables:
base: "#fdf6e3"
mantle: "#f4f0d9"
crust: "#efebd4"
text: "#5c6a72"
subtext0: "#939f91"
subtext1: "#829181"
surface0: "#e6e2cc"
surface1: "#e0dcc7"
surface2: "#bdc3af"
overlay0: "#a6b0a0"
overlay1: "#939f91"
overlay2: "#829181"
blue: "#3a94c5"
lavender: "#3a94c5"
sapphire: "#3a94c5"
sky: "#35a77c"
teal: "#35a77c"
green: "#8da101"
yellow: "#dfa000"
peach: "#f57d26"
maroon: "#f85552"
red: "#f85552"
mauve: "#df69ba"
pink: "#df69ba"
flamingo: "#f57d26"
rosewater: "#df69ba"

233
everforest-light/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Everforest Light - Base Colors */
--theme-rosewater: #df69ba;
--theme-flamingo: #f57d26;
--theme-pink: #df69ba;
--theme-mauve: #df69ba;
--theme-red: #f85552;
--theme-maroon: #f85552;
--theme-peach: #f57d26;
--theme-yellow: #dfa000;
--theme-green: #8da101;
--theme-teal: #35a77c;
--theme-sky: #35a77c;
--theme-sapphire: #3a94c5;
--theme-blue: #3a94c5;
--theme-lavender: #3a94c5;
--theme-text: #5c6a72;
--theme-subtext1: #829181;
--theme-subtext0: #939f91;
--theme-overlay2: #829181;
--theme-overlay1: #939f91;
--theme-overlay0: #a6b0a0;
--theme-surface2: #bdc3af;
--theme-surface1: #e0dcc7;
--theme-surface0: #e6e2cc;
--theme-base: #fdf6e3;
--theme-mantle: #f4f0d9;
--theme-crust: #efebd4;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses brighter cards for elevation. */
--theme-card-bg: #fffaed;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #fffaed;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #fffaed;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #fffaed;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

41
gruvbox-dark/manifest.yaml Normal file
View File

@ -0,0 +1,41 @@
name: "Gruvbox Dark"
packageName: "gruvbox-dark"
version: "2.0.0"
description: "Retro groove color scheme with warm earthy tones"
author: "Pavel Pertsev"
copyright: "Copyright (c) Pavel Pertsev"
license: "MIT"
source: "https://github.com/morhetz/gruvbox"
mode: "dark"
tags:
- gruvbox
- warm
- retro
- earthy
variables:
base: "#282828"
mantle: "#1d2021"
crust: "#181b1c"
text: "#ebdbb2"
subtext0: "#bdae93"
subtext1: "#d5c4a1"
surface0: "#3c3836"
surface1: "#504945"
surface2: "#665c54"
overlay0: "#7c6f64"
overlay1: "#928374"
overlay2: "#a89984"
blue: "#83a598"
lavender: "#83a598"
sapphire: "#458588"
sky: "#8ec07c"
teal: "#8ec07c"
green: "#b8bb26"
yellow: "#fabd2f"
peach: "#fe8019"
maroon: "#cc241d"
red: "#fb4934"
mauve: "#d3869b"
pink: "#d3869b"
flamingo: "#fe8019"
rosewater: "#fe8019"

233
gruvbox-dark/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Gruvbox Dark - Base Colors */
--theme-rosewater: #fe8019;
--theme-flamingo: #fe8019;
--theme-pink: #d3869b;
--theme-mauve: #d3869b;
--theme-red: #fb4934;
--theme-maroon: #cc241d;
--theme-peach: #fe8019;
--theme-yellow: #fabd2f;
--theme-green: #b8bb26;
--theme-teal: #8ec07c;
--theme-sky: #8ec07c;
--theme-sapphire: #458588;
--theme-blue: #83a598;
--theme-lavender: #83a598;
--theme-text: #ebdbb2;
--theme-subtext1: #d5c4a1;
--theme-subtext0: #bdae93;
--theme-overlay2: #a89984;
--theme-overlay1: #928374;
--theme-overlay0: #7c6f64;
--theme-surface2: #665c54;
--theme-surface1: #504945;
--theme-surface0: #3c3836;
--theme-base: #282828;
--theme-mantle: #1d2021;
--theme-crust: #181b1c;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

41
gruvbox-light/manifest.yaml Normal file
View File

@ -0,0 +1,41 @@
name: "Gruvbox Light"
packageName: "gruvbox-light"
version: "2.0.0"
description: "Retro groove color scheme with warm earthy tones on a light canvas"
author: "Pavel Pertsev"
copyright: "Copyright (c) Pavel Pertsev"
license: "MIT"
source: "https://github.com/morhetz/gruvbox"
mode: "light"
tags:
- gruvbox
- warm
- retro
- earthy
variables:
base: "#fbf1c7"
mantle: "#f2e5bc"
crust: "#ebdbb2"
text: "#3c3836"
subtext0: "#665c54"
subtext1: "#504945"
surface0: "#d5c4a1"
surface1: "#bdae93"
surface2: "#a89984"
overlay0: "#928374"
overlay1: "#7c6f64"
overlay2: "#665c54"
blue: "#076678"
lavender: "#076678"
sapphire: "#076678"
sky: "#427b58"
teal: "#427b58"
green: "#79740e"
yellow: "#b57614"
peach: "#af3a03"
maroon: "#9d0006"
red: "#9d0006"
mauve: "#8f3f71"
pink: "#8f3f71"
flamingo: "#af3a03"
rosewater: "#af3a03"

233
gruvbox-light/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Gruvbox Light - Base Colors */
--theme-rosewater: #af3a03;
--theme-flamingo: #af3a03;
--theme-pink: #8f3f71;
--theme-mauve: #8f3f71;
--theme-red: #9d0006;
--theme-maroon: #9d0006;
--theme-peach: #af3a03;
--theme-yellow: #b57614;
--theme-green: #79740e;
--theme-teal: #427b58;
--theme-sky: #427b58;
--theme-sapphire: #076678;
--theme-blue: #076678;
--theme-lavender: #076678;
--theme-text: #3c3836;
--theme-subtext1: #504945;
--theme-subtext0: #665c54;
--theme-overlay2: #665c54;
--theme-overlay1: #7c6f64;
--theme-overlay0: #928374;
--theme-surface2: #a89984;
--theme-surface1: #bdae93;
--theme-surface0: #d5c4a1;
--theme-base: #fbf1c7;
--theme-mantle: #f2e5bc;
--theme-crust: #ebdbb2;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses brighter cards for elevation. */
--theme-card-bg: #fdf4d1;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #fdf4d1;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #fdf4d1;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #fdf4d1;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

41
nord-light/manifest.yaml Normal file
View File

@ -0,0 +1,41 @@
name: "Nord Light"
packageName: "nord-light"
version: "0.2.0"
description: "An arctic, north-bluish light color palette for bright and airy design"
author: "Arctic Ice Studio"
copyright: "Copyright (c) 2016 Arctic Ice Studio & Sven Greb"
license: "MIT"
source: "https://github.com/nordtheme/nord"
mode: "light"
tags:
- nord
- cool
- arctic
- clean
variables:
base: "#eceff4"
mantle: "#e5e9f0"
crust: "#d8dee9"
text: "#2e3440"
subtext0: "#434c5e"
subtext1: "#3b4252"
surface0: "#cdd4e1"
surface1: "#c0c8d5"
surface2: "#b4bcc9"
overlay0: "#8891a1"
overlay1: "#6e7889"
overlay2: "#4c566a"
blue: "#81a1c1"
lavender: "#88c0d0"
sapphire: "#5e81ac"
sky: "#88c0d0"
teal: "#8fbcbb"
green: "#a3be8c"
yellow: "#ebcb8b"
peach: "#d08770"
maroon: "#bf616a"
red: "#bf616a"
mauve: "#b48ead"
pink: "#b48ead"
flamingo: "#d08770"
rosewater: "#d08770"

233
nord-light/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Nord Light - Base Colors */
--theme-rosewater: #d08770;
--theme-flamingo: #d08770;
--theme-pink: #b48ead;
--theme-mauve: #b48ead;
--theme-red: #bf616a;
--theme-maroon: #bf616a;
--theme-peach: #d08770;
--theme-yellow: #ebcb8b;
--theme-green: #a3be8c;
--theme-teal: #8fbcbb;
--theme-sky: #88c0d0;
--theme-sapphire: #5e81ac;
--theme-blue: #81a1c1;
--theme-lavender: #88c0d0;
--theme-text: #2e3440;
--theme-subtext1: #3b4252;
--theme-subtext0: #434c5e;
--theme-overlay2: #4c566a;
--theme-overlay1: #6e7889;
--theme-overlay0: #8891a1;
--theme-surface2: #b4bcc9;
--theme-surface1: #c0c8d5;
--theme-surface0: #cdd4e1;
--theme-base: #eceff4;
--theme-mantle: #e5e9f0;
--theme-crust: #d8dee9;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses brighter cards for elevation. */
--theme-card-bg: #f5f7fb;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #f5f7fb;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #f5f7fb;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #f5f7fb;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

41
nord/manifest.yaml Normal file
View File

@ -0,0 +1,41 @@
name: "Nord"
packageName: "nord"
version: "0.2.0"
description: "An arctic, north-bluish dark color palette for clean and uncluttered design"
author: "Arctic Ice Studio"
copyright: "Copyright (c) 2016 Arctic Ice Studio & Sven Greb"
license: "MIT"
source: "https://github.com/nordtheme/nord"
mode: "dark"
tags:
- nord
- cool
- arctic
- minimal
variables:
base: "#2e3440"
mantle: "#2a303c"
crust: "#262c36"
text: "#d8dee9"
subtext0: "#a5adb8"
subtext1: "#c0c8d4"
surface0: "#3b4252"
surface1: "#434c5e"
surface2: "#4c566a"
overlay0: "#5d6878"
overlay1: "#6e7a8d"
overlay2: "#8a92a1"
blue: "#81a1c1"
lavender: "#88c0d0"
sapphire: "#5e81ac"
sky: "#88c0d0"
teal: "#8fbcbb"
green: "#a3be8c"
yellow: "#ebcb8b"
peach: "#d08770"
maroon: "#bf616a"
red: "#bf616a"
mauve: "#b48ead"
pink: "#b48ead"
flamingo: "#d08770"
rosewater: "#d08770"

233
nord/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Nord - Base Colors */
--theme-rosewater: #d08770;
--theme-flamingo: #d08770;
--theme-pink: #b48ead;
--theme-mauve: #b48ead;
--theme-red: #bf616a;
--theme-maroon: #bf616a;
--theme-peach: #d08770;
--theme-yellow: #ebcb8b;
--theme-green: #a3be8c;
--theme-teal: #8fbcbb;
--theme-sky: #88c0d0;
--theme-sapphire: #5e81ac;
--theme-blue: #81a1c1;
--theme-lavender: #88c0d0;
--theme-text: #d8dee9;
--theme-subtext1: #c0c8d4;
--theme-subtext0: #a5adb8;
--theme-overlay2: #8a92a1;
--theme-overlay1: #6e7a8d;
--theme-overlay0: #5d6878;
--theme-surface2: #4c566a;
--theme-surface1: #434c5e;
--theme-surface0: #3b4252;
--theme-base: #2e3440;
--theme-mantle: #2a303c;
--theme-crust: #262c36;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
rose-pine-dawn/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Rosé Pine Dawn"
packageName: "rose-pine-dawn"
version: "4.0.1"
description: "A light variant for sunny day coding"
author: "Rosé Pine"
copyright: "Copyright (c) 2023 Rosé Pine"
license: "MIT"
source: "https://rosepinetheme.com/palette/"
mode: "light"
tags:
- rose-pine
- warm
- elegant
variables:
base: "#faf4ed"
mantle: "#f4ede8"
crust: "#f2e9e1"
text: "#575279"
subtext0: "#797593"
subtext1: "#575279"
surface0: "#f2e9e1"
surface1: "#dfdad9"
surface2: "#cecacd"
overlay0: "#9893a5"
overlay1: "#797593"
overlay2: "#575279"
blue: "#286983"
lavender: "#907aa9"
sapphire: "#56949f"
sky: "#56949f"
teal: "#56949f"
green: "#286983"
yellow: "#ea9d34"
peach: "#ea9d34"
maroon: "#b4637a"
red: "#b4637a"
mauve: "#907aa9"
pink: "#d7827e"
flamingo: "#d7827e"
rosewater: "#d7827e"

233
rose-pine-dawn/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Rosé Pine Dawn - Base Colors */
--theme-rosewater: #d7827e;
--theme-flamingo: #d7827e;
--theme-pink: #d7827e;
--theme-mauve: #907aa9;
--theme-red: #b4637a;
--theme-maroon: #b4637a;
--theme-peach: #ea9d34;
--theme-yellow: #ea9d34;
--theme-green: #286983;
--theme-teal: #56949f;
--theme-sky: #56949f;
--theme-sapphire: #56949f;
--theme-blue: #286983;
--theme-lavender: #907aa9;
--theme-text: #575279;
--theme-subtext1: #575279;
--theme-subtext0: #797593;
--theme-overlay2: #575279;
--theme-overlay1: #797593;
--theme-overlay0: #9893a5;
--theme-surface2: #cecacd;
--theme-surface1: #dfdad9;
--theme-surface0: #f2e9e1;
--theme-base: #faf4ed;
--theme-mantle: #f4ede8;
--theme-crust: #f2e9e1;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-mauve);
--theme-success: var(--theme-teal);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses white cards on warm page for elevation. */
--theme-card-bg: #fffaf3;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #fffaf3;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #fffaf3;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #fffaf3;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

41
rose-pine-moon/manifest.yaml Normal file
View File

@ -0,0 +1,41 @@
name: "Rosé Pine Moon"
packageName: "rose-pine-moon"
version: "4.0.1"
description: "A dimmed variant with a cooler base for late night sessions"
author: "Rosé Pine"
copyright: "Copyright (c) 2023 Rosé Pine"
license: "MIT"
source: "https://rosepinetheme.com/palette/"
mode: "dark"
tags:
- rose-pine
- cool
- muted
- dim
variables:
base: "#232136"
mantle: "#2a283e"
crust: "#232136"
text: "#e0def4"
subtext0: "#908caa"
subtext1: "#e0def4"
surface0: "#2a273f"
surface1: "#393552"
surface2: "#44415a"
overlay0: "#56526e"
overlay1: "#6e6a86"
overlay2: "#908caa"
blue: "#3e8fb0"
lavender: "#c4a7e7"
sapphire: "#9ccfd8"
sky: "#9ccfd8"
teal: "#9ccfd8"
green: "#3e8fb0"
yellow: "#f6c177"
peach: "#f6c177"
maroon: "#eb6f92"
red: "#eb6f92"
mauve: "#c4a7e7"
pink: "#ea9a97"
flamingo: "#ea9a97"
rosewater: "#ea9a97"

233
rose-pine-moon/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Rosé Pine Moon - Base Colors */
--theme-rosewater: #ea9a97;
--theme-flamingo: #ea9a97;
--theme-pink: #ea9a97;
--theme-mauve: #c4a7e7;
--theme-red: #eb6f92;
--theme-maroon: #eb6f92;
--theme-peach: #f6c177;
--theme-yellow: #f6c177;
--theme-green: #3e8fb0;
--theme-teal: #9ccfd8;
--theme-sky: #9ccfd8;
--theme-sapphire: #9ccfd8;
--theme-blue: #3e8fb0;
--theme-lavender: #c4a7e7;
--theme-text: #e0def4;
--theme-subtext1: #e0def4;
--theme-subtext0: #908caa;
--theme-overlay2: #908caa;
--theme-overlay1: #6e6a86;
--theme-overlay0: #56526e;
--theme-surface2: #44415a;
--theme-surface1: #393552;
--theme-surface0: #2a273f;
--theme-base: #232136;
--theme-mantle: #2a283e;
--theme-crust: #232136;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-mauve);
--theme-success: var(--theme-teal);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

41
rose-pine/manifest.yaml Normal file
View File

@ -0,0 +1,41 @@
name: "Rosé Pine"
packageName: "rose-pine"
version: "4.0.1"
description: "All natural pine, faux fur, and a bit of soho vibes for the classy minimalist"
author: "Rosé Pine"
copyright: "Copyright (c) 2023 Rosé Pine"
license: "MIT"
source: "https://rosepinetheme.com/palette/"
mode: "dark"
tags:
- rose-pine
- warm
- muted
- elegant
variables:
base: "#191724"
mantle: "#21202e"
crust: "#191724"
text: "#e0def4"
subtext0: "#908caa"
subtext1: "#e0def4"
surface0: "#1f1d2e"
surface1: "#26233a"
surface2: "#403d52"
overlay0: "#524f67"
overlay1: "#6e6a86"
overlay2: "#908caa"
blue: "#31748f"
lavender: "#c4a7e7"
sapphire: "#9ccfd8"
sky: "#9ccfd8"
teal: "#9ccfd8"
green: "#31748f"
yellow: "#f6c177"
peach: "#f6c177"
maroon: "#eb6f92"
red: "#eb6f92"
mauve: "#c4a7e7"
pink: "#ebbcba"
flamingo: "#ebbcba"
rosewater: "#ebbcba"

233
rose-pine/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Rosé Pine - Base Colors */
--theme-rosewater: #ebbcba;
--theme-flamingo: #ebbcba;
--theme-pink: #ebbcba;
--theme-mauve: #c4a7e7;
--theme-red: #eb6f92;
--theme-maroon: #eb6f92;
--theme-peach: #f6c177;
--theme-yellow: #f6c177;
--theme-green: #31748f;
--theme-teal: #9ccfd8;
--theme-sky: #9ccfd8;
--theme-sapphire: #9ccfd8;
--theme-blue: #31748f;
--theme-lavender: #c4a7e7;
--theme-text: #e0def4;
--theme-subtext1: #e0def4;
--theme-subtext0: #908caa;
--theme-overlay2: #908caa;
--theme-overlay1: #6e6a86;
--theme-overlay0: #524f67;
--theme-surface2: #403d52;
--theme-surface1: #26233a;
--theme-surface0: #1f1d2e;
--theme-base: #191724;
--theme-mantle: #21202e;
--theme-crust: #191724;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-mauve);
--theme-success: var(--theme-teal);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
sonokai-andromeda/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Sonokai Andromeda"
packageName: "sonokai-andromeda"
version: "0.3.3"
description: "Deep blue-tinted Monokai Pro inspired variant"
author: "Sainnhe Park"
copyright: "Copyright (c) 2020 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/sonokai"
mode: "dark"
tags:
- sonokai
- cool
- deep
variables:
base: "#2b2d3a"
mantle: "#252630"
crust: "#181a1c"
text: "#e1e3e4"
subtext0: "#7e8294"
subtext1: "#b0b3bc"
surface0: "#333648"
surface1: "#363a4e"
surface2: "#393e53"
overlay0: "#3f445b"
overlay1: "#5a5e7a"
overlay2: "#7e8294"
blue: "#6dcae8"
lavender: "#bb97ee"
sapphire: "#6dcae8"
sky: "#6dcae8"
teal: "#6dcae8"
green: "#9ed06c"
yellow: "#edc763"
peach: "#f89860"
maroon: "#fb617e"
red: "#fb617e"
mauve: "#bb97ee"
pink: "#bb97ee"
flamingo: "#f89860"
rosewater: "#bb97ee"

233
sonokai-andromeda/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Sonokai Andromeda - Base Colors */
--theme-rosewater: #bb97ee;
--theme-flamingo: #f89860;
--theme-pink: #bb97ee;
--theme-mauve: #bb97ee;
--theme-red: #fb617e;
--theme-maroon: #fb617e;
--theme-peach: #f89860;
--theme-yellow: #edc763;
--theme-green: #9ed06c;
--theme-teal: #6dcae8;
--theme-sky: #6dcae8;
--theme-sapphire: #6dcae8;
--theme-blue: #6dcae8;
--theme-lavender: #bb97ee;
--theme-text: #e1e3e4;
--theme-subtext1: #b0b3bc;
--theme-subtext0: #7e8294;
--theme-overlay2: #7e8294;
--theme-overlay1: #5a5e7a;
--theme-overlay0: #3f445b;
--theme-surface2: #393e53;
--theme-surface1: #363a4e;
--theme-surface0: #333648;
--theme-base: #2b2d3a;
--theme-mantle: #252630;
--theme-crust: #181a1c;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
sonokai-atlantis/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Sonokai Atlantis"
packageName: "sonokai-atlantis"
version: "0.3.3"
description: "Cool ocean-tinted Monokai Pro inspired variant"
author: "Sainnhe Park"
copyright: "Copyright (c) 2020 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/sonokai"
mode: "dark"
tags:
- sonokai
- cool
- ocean
variables:
base: "#2a2f38"
mantle: "#24272e"
crust: "#181a1c"
text: "#e1e3e4"
subtext0: "#828a9a"
subtext1: "#b2b7bf"
surface0: "#333846"
surface1: "#373c4b"
surface2: "#3d4455"
overlay0: "#424b5b"
overlay1: "#5a6477"
overlay2: "#828a9a"
blue: "#72cce8"
lavender: "#ba9cf3"
sapphire: "#72cce8"
sky: "#72cce8"
teal: "#72cce8"
green: "#9dd274"
yellow: "#eacb64"
peach: "#f69c5e"
maroon: "#ff6578"
red: "#ff6578"
mauve: "#ba9cf3"
pink: "#ba9cf3"
flamingo: "#f69c5e"
rosewater: "#ba9cf3"

233
sonokai-atlantis/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Sonokai Atlantis - Base Colors */
--theme-rosewater: #ba9cf3;
--theme-flamingo: #f69c5e;
--theme-pink: #ba9cf3;
--theme-mauve: #ba9cf3;
--theme-red: #ff6578;
--theme-maroon: #ff6578;
--theme-peach: #f69c5e;
--theme-yellow: #eacb64;
--theme-green: #9dd274;
--theme-teal: #72cce8;
--theme-sky: #72cce8;
--theme-sapphire: #72cce8;
--theme-blue: #72cce8;
--theme-lavender: #ba9cf3;
--theme-text: #e1e3e4;
--theme-subtext1: #b2b7bf;
--theme-subtext0: #828a9a;
--theme-overlay2: #828a9a;
--theme-overlay1: #5a6477;
--theme-overlay0: #424b5b;
--theme-surface2: #3d4455;
--theme-surface1: #373c4b;
--theme-surface0: #333846;
--theme-base: #2a2f38;
--theme-mantle: #24272e;
--theme-crust: #181a1c;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
sonokai-espresso/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Sonokai Espresso"
packageName: "sonokai-espresso"
version: "0.3.3"
description: "Warm coffee-tinted Monokai Pro inspired variant"
author: "Sainnhe Park"
copyright: "Copyright (c) 2020 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/sonokai"
mode: "dark"
tags:
- sonokai
- warm
- coffee
variables:
base: "#312c2b"
mantle: "#242120"
crust: "#1f1e1c"
text: "#e4e3e1"
subtext0: "#90817b"
subtext1: "#bab2ae"
surface0: "#393230"
surface1: "#413937"
surface2: "#49403c"
overlay0: "#4e433f"
overlay1: "#6a5e59"
overlay2: "#90817b"
blue: "#81d0c9"
lavender: "#9fa0e1"
sapphire: "#81d0c9"
sky: "#81d0c9"
teal: "#81d0c9"
green: "#a6cd77"
yellow: "#f0c66f"
peach: "#f08d71"
maroon: "#f86882"
red: "#f86882"
mauve: "#9fa0e1"
pink: "#9fa0e1"
flamingo: "#f08d71"
rosewater: "#9fa0e1"

233
sonokai-espresso/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Sonokai Espresso - Base Colors */
--theme-rosewater: #9fa0e1;
--theme-flamingo: #f08d71;
--theme-pink: #9fa0e1;
--theme-mauve: #9fa0e1;
--theme-red: #f86882;
--theme-maroon: #f86882;
--theme-peach: #f08d71;
--theme-yellow: #f0c66f;
--theme-green: #a6cd77;
--theme-teal: #81d0c9;
--theme-sky: #81d0c9;
--theme-sapphire: #81d0c9;
--theme-blue: #81d0c9;
--theme-lavender: #9fa0e1;
--theme-text: #e4e3e1;
--theme-subtext1: #bab2ae;
--theme-subtext0: #90817b;
--theme-overlay2: #90817b;
--theme-overlay1: #6a5e59;
--theme-overlay0: #4e433f;
--theme-surface2: #49403c;
--theme-surface1: #413937;
--theme-surface0: #393230;
--theme-base: #312c2b;
--theme-mantle: #242120;
--theme-crust: #1f1e1c;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
sonokai-maia/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Sonokai Maia"
packageName: "sonokai-maia"
version: "0.3.3"
description: "Cool teal-tinted Monokai Pro inspired variant"
author: "Sainnhe Park"
copyright: "Copyright (c) 2020 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/sonokai"
mode: "dark"
tags:
- sonokai
- cool
- teal
variables:
base: "#273136"
mantle: "#21282c"
crust: "#1c1e1f"
text: "#e1e2e3"
subtext0: "#82878b"
subtext1: "#b2b5b7"
surface0: "#313b42"
surface1: "#353f46"
surface2: "#3a444b"
overlay0: "#414b53"
overlay1: "#55626d"
overlay2: "#82878b"
blue: "#78cee9"
lavender: "#baa0f8"
sapphire: "#78cee9"
sky: "#78cee9"
teal: "#78cee9"
green: "#9cd57b"
yellow: "#e3d367"
peach: "#f3a96a"
maroon: "#f76c7c"
red: "#f76c7c"
mauve: "#baa0f8"
pink: "#baa0f8"
flamingo: "#f3a96a"
rosewater: "#baa0f8"

233
sonokai-maia/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Sonokai Maia - Base Colors */
--theme-rosewater: #baa0f8;
--theme-flamingo: #f3a96a;
--theme-pink: #baa0f8;
--theme-mauve: #baa0f8;
--theme-red: #f76c7c;
--theme-maroon: #f76c7c;
--theme-peach: #f3a96a;
--theme-yellow: #e3d367;
--theme-green: #9cd57b;
--theme-teal: #78cee9;
--theme-sky: #78cee9;
--theme-sapphire: #78cee9;
--theme-blue: #78cee9;
--theme-lavender: #baa0f8;
--theme-text: #e1e2e3;
--theme-subtext1: #b2b5b7;
--theme-subtext0: #82878b;
--theme-overlay2: #82878b;
--theme-overlay1: #55626d;
--theme-overlay0: #414b53;
--theme-surface2: #3a444b;
--theme-surface1: #353f46;
--theme-surface0: #313b42;
--theme-base: #273136;
--theme-mantle: #21282c;
--theme-crust: #1c1e1f;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
sonokai-shusia/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Sonokai Shusia"
packageName: "sonokai-shusia"
version: "0.3.3"
description: "Warm purple-tinted Monokai Pro inspired variant"
author: "Sainnhe Park"
copyright: "Copyright (c) 2020 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/sonokai"
mode: "dark"
tags:
- sonokai
- warm
- purple
variables:
base: "#2d2a2e"
mantle: "#211f21"
crust: "#1a181a"
text: "#e3e1e4"
subtext0: "#848089"
subtext1: "#b4b1b7"
surface0: "#37343a"
surface1: "#3b383e"
surface2: "#423f46"
overlay0: "#49464e"
overlay1: "#605d68"
overlay2: "#848089"
blue: "#7accd7"
lavender: "#ab9df2"
sapphire: "#7accd7"
sky: "#7accd7"
teal: "#7accd7"
green: "#9ecd6f"
yellow: "#e5c463"
peach: "#ef9062"
maroon: "#f85e84"
red: "#f85e84"
mauve: "#ab9df2"
pink: "#ab9df2"
flamingo: "#ef9062"
rosewater: "#ab9df2"

233
sonokai-shusia/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Sonokai Shusia - Base Colors */
--theme-rosewater: #ab9df2;
--theme-flamingo: #ef9062;
--theme-pink: #ab9df2;
--theme-mauve: #ab9df2;
--theme-red: #f85e84;
--theme-maroon: #f85e84;
--theme-peach: #ef9062;
--theme-yellow: #e5c463;
--theme-green: #9ecd6f;
--theme-teal: #7accd7;
--theme-sky: #7accd7;
--theme-sapphire: #7accd7;
--theme-blue: #7accd7;
--theme-lavender: #ab9df2;
--theme-text: #e3e1e4;
--theme-subtext1: #b4b1b7;
--theme-subtext0: #848089;
--theme-overlay2: #848089;
--theme-overlay1: #605d68;
--theme-overlay0: #49464e;
--theme-surface2: #423f46;
--theme-surface1: #3b383e;
--theme-surface0: #37343a;
--theme-base: #2d2a2e;
--theme-mantle: #211f21;
--theme-crust: #1a181a;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
sonokai/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Sonokai"
packageName: "sonokai"
version: "0.3.3"
description: "High contrast Monokai Pro inspired color scheme"
author: "Sainnhe Park"
copyright: "Copyright (c) 2020 Sainnhe Park"
license: "MIT"
source: "https://github.com/sainnhe/sonokai"
mode: "dark"
tags:
- sonokai
- vibrant
- high-contrast
variables:
base: "#2c2e34"
mantle: "#222327"
crust: "#181819"
text: "#e2e2e3"
subtext0: "#7f8490"
subtext1: "#b0b3ba"
surface0: "#33353f"
surface1: "#363944"
surface2: "#3b3e48"
overlay0: "#414550"
overlay1: "#595f6f"
overlay2: "#7f8490"
blue: "#76cce0"
lavender: "#b39df3"
sapphire: "#76cce0"
sky: "#76cce0"
teal: "#76cce0"
green: "#9ed072"
yellow: "#e7c664"
peach: "#f39660"
maroon: "#fc5d7c"
red: "#fc5d7c"
mauve: "#b39df3"
pink: "#b39df3"
flamingo: "#f39660"
rosewater: "#b39df3"

233
sonokai/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Sonokai - Base Colors */
--theme-rosewater: #b39df3;
--theme-flamingo: #f39660;
--theme-pink: #b39df3;
--theme-mauve: #b39df3;
--theme-red: #fc5d7c;
--theme-maroon: #fc5d7c;
--theme-peach: #f39660;
--theme-yellow: #e7c664;
--theme-green: #9ed072;
--theme-teal: #76cce0;
--theme-sky: #76cce0;
--theme-sapphire: #76cce0;
--theme-blue: #76cce0;
--theme-lavender: #b39df3;
--theme-text: #e2e2e3;
--theme-subtext1: #b0b3ba;
--theme-subtext0: #7f8490;
--theme-overlay2: #7f8490;
--theme-overlay1: #595f6f;
--theme-overlay0: #414550;
--theme-surface2: #3b3e48;
--theme-surface1: #363944;
--theme-surface0: #33353f;
--theme-base: #2c2e34;
--theme-mantle: #222327;
--theme-crust: #181819;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
tokyonight-day/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Tokyo Night Day"
packageName: "tokyonight-day"
version: "4.14.1"
description: "A clean light theme with vivid accents"
author: "Folke Lemaitre"
copyright: "Copyright (c) Folke Lemaitre"
license: "Apache-2.0"
source: "https://github.com/folke/tokyonight.nvim"
mode: "light"
tags:
- tokyonight
- cool
- vivid
variables:
base: "#e1e2e7"
mantle: "#d0d5e3"
crust: "#c4c8da"
text: "#3760bf"
subtext0: "#6172b0"
subtext1: "#4e68a8"
surface0: "#c1c9df"
surface1: "#b4b5b9"
surface2: "#a8aecb"
overlay0: "#a1a6c5"
overlay1: "#8990b3"
overlay2: "#68709a"
blue: "#2e7de9"
lavender: "#9854f1"
sapphire: "#188092"
sky: "#007197"
teal: "#118c74"
green: "#587539"
yellow: "#8c6c3e"
peach: "#b15c00"
maroon: "#c64343"
red: "#f52a65"
mauve: "#9854f1"
pink: "#7847bd"
flamingo: "#b15c00"
rosewater: "#7847bd"

233
tokyonight-day/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Tokyo Night Day - Base Colors */
--theme-rosewater: #7847bd;
--theme-flamingo: #b15c00;
--theme-pink: #7847bd;
--theme-mauve: #9854f1;
--theme-red: #f52a65;
--theme-maroon: #c64343;
--theme-peach: #b15c00;
--theme-yellow: #8c6c3e;
--theme-green: #587539;
--theme-teal: #118c74;
--theme-sky: #007197;
--theme-sapphire: #188092;
--theme-blue: #2e7de9;
--theme-lavender: #9854f1;
--theme-text: #3760bf;
--theme-subtext1: #4e68a8;
--theme-subtext0: #6172b0;
--theme-overlay2: #68709a;
--theme-overlay1: #8990b3;
--theme-overlay0: #a1a6c5;
--theme-surface2: #a8aecb;
--theme-surface1: #b4b5b9;
--theme-surface0: #c1c9df;
--theme-base: #e1e2e7;
--theme-mantle: #d0d5e3;
--theme-crust: #c4c8da;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens - light theme uses brighter cards for elevation. */
--theme-card-bg: #eff0f5;
--theme-card-border: var(--theme-surface0);
--theme-input-bg: #eff0f5;
--theme-input-border: var(--theme-surface0);
--theme-nav-bg: #eff0f5;
--theme-sidebar-bg: var(--theme-mantle);
--theme-widget-bg: #eff0f5;
--theme-widget-border: var(--theme-surface0);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
tokyonight-moon/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Tokyo Night Moon"
packageName: "tokyonight-moon"
version: "4.14.1"
description: "A clean dark theme with brighter, more saturated accents"
author: "Folke Lemaitre"
copyright: "Copyright (c) Folke Lemaitre"
license: "Apache-2.0"
source: "https://github.com/folke/tokyonight.nvim"
mode: "dark"
tags:
- tokyonight
- cool
- saturated
variables:
base: "#222436"
mantle: "#1e2030"
crust: "#191b29"
text: "#c8d3f5"
subtext0: "#737aa2"
subtext1: "#828bb8"
surface0: "#2f334d"
surface1: "#3b4261"
surface2: "#444a73"
overlay0: "#545c7e"
overlay1: "#636da6"
overlay2: "#737aa2"
blue: "#82aaff"
lavender: "#c099ff"
sapphire: "#65bcff"
sky: "#86e1fc"
teal: "#4fd6be"
green: "#c3e88d"
yellow: "#ffc777"
peach: "#ff966c"
maroon: "#c53b53"
red: "#ff757f"
mauve: "#c099ff"
pink: "#fca7ea"
flamingo: "#ff966c"
rosewater: "#fca7ea"

233
tokyonight-moon/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Tokyo Night Moon - Base Colors */
--theme-rosewater: #fca7ea;
--theme-flamingo: #ff966c;
--theme-pink: #fca7ea;
--theme-mauve: #c099ff;
--theme-red: #ff757f;
--theme-maroon: #c53b53;
--theme-peach: #ff966c;
--theme-yellow: #ffc777;
--theme-green: #c3e88d;
--theme-teal: #4fd6be;
--theme-sky: #86e1fc;
--theme-sapphire: #65bcff;
--theme-blue: #82aaff;
--theme-lavender: #c099ff;
--theme-text: #c8d3f5;
--theme-subtext1: #828bb8;
--theme-subtext0: #737aa2;
--theme-overlay2: #737aa2;
--theme-overlay1: #636da6;
--theme-overlay0: #545c7e;
--theme-surface2: #444a73;
--theme-surface1: #3b4261;
--theme-surface0: #2f334d;
--theme-base: #222436;
--theme-mantle: #1e2030;
--theme-crust: #191b29;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
tokyonight-night/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Tokyo Night"
packageName: "tokyonight-night"
version: "4.14.1"
description: "The darkest variant with deep blue-black backgrounds"
author: "Folke Lemaitre"
copyright: "Copyright (c) Folke Lemaitre"
license: "Apache-2.0"
source: "https://github.com/folke/tokyonight.nvim"
mode: "dark"
tags:
- tokyonight
- cool
- deep
variables:
base: "#1a1b26"
mantle: "#16161e"
crust: "#0c0e14"
text: "#c0caf5"
subtext0: "#737aa2"
subtext1: "#a9b1d6"
surface0: "#292e42"
surface1: "#3b4261"
surface2: "#414868"
overlay0: "#545c7e"
overlay1: "#565f89"
overlay2: "#737aa2"
blue: "#7aa2f7"
lavender: "#bb9af7"
sapphire: "#2ac3de"
sky: "#7dcfff"
teal: "#1abc9c"
green: "#9ece6a"
yellow: "#e0af68"
peach: "#ff9e64"
maroon: "#db4b4b"
red: "#f7768e"
mauve: "#bb9af7"
pink: "#9d7cd8"
flamingo: "#ff9e64"
rosewater: "#9d7cd8"

233
tokyonight-night/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Tokyo Night - Base Colors */
--theme-rosewater: #9d7cd8;
--theme-flamingo: #ff9e64;
--theme-pink: #9d7cd8;
--theme-mauve: #bb9af7;
--theme-red: #f7768e;
--theme-maroon: #db4b4b;
--theme-peach: #ff9e64;
--theme-yellow: #e0af68;
--theme-green: #9ece6a;
--theme-teal: #1abc9c;
--theme-sky: #7dcfff;
--theme-sapphire: #2ac3de;
--theme-blue: #7aa2f7;
--theme-lavender: #bb9af7;
--theme-text: #c0caf5;
--theme-subtext1: #a9b1d6;
--theme-subtext0: #737aa2;
--theme-overlay2: #737aa2;
--theme-overlay1: #565f89;
--theme-overlay0: #545c7e;
--theme-surface2: #414868;
--theme-surface1: #3b4261;
--theme-surface0: #292e42;
--theme-base: #1a1b26;
--theme-mantle: #16161e;
--theme-crust: #0c0e14;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}

40
tokyonight-storm/manifest.yaml Normal file
View File

@ -0,0 +1,40 @@
name: "Tokyo Night Storm"
packageName: "tokyonight-storm"
version: "4.14.1"
description: "A clean dark theme with a slightly lighter blue-tinted background"
author: "Folke Lemaitre"
copyright: "Copyright (c) Folke Lemaitre"
license: "Apache-2.0"
source: "https://github.com/folke/tokyonight.nvim"
mode: "dark"
tags:
- tokyonight
- cool
- muted
variables:
base: "#24283b"
mantle: "#1f2335"
crust: "#1b1e2d"
text: "#c0caf5"
subtext0: "#737aa2"
subtext1: "#a9b1d6"
surface0: "#292e42"
surface1: "#3b4261"
surface2: "#414868"
overlay0: "#545c7e"
overlay1: "#565f89"
overlay2: "#737aa2"
blue: "#7aa2f7"
lavender: "#bb9af7"
sapphire: "#2ac3de"
sky: "#7dcfff"
teal: "#1abc9c"
green: "#9ece6a"
yellow: "#e0af68"
peach: "#ff9e64"
maroon: "#db4b4b"
red: "#f7768e"
mauve: "#bb9af7"
pink: "#9d7cd8"
flamingo: "#ff9e64"
rosewater: "#9d7cd8"

233
tokyonight-storm/styles.css Normal file
View File

@ -0,0 +1,233 @@
:root {
/* Tokyo Night Storm - Base Colors */
--theme-rosewater: #9d7cd8;
--theme-flamingo: #ff9e64;
--theme-pink: #9d7cd8;
--theme-mauve: #bb9af7;
--theme-red: #f7768e;
--theme-maroon: #db4b4b;
--theme-peach: #ff9e64;
--theme-yellow: #e0af68;
--theme-green: #9ece6a;
--theme-teal: #1abc9c;
--theme-sky: #7dcfff;
--theme-sapphire: #2ac3de;
--theme-blue: #7aa2f7;
--theme-lavender: #bb9af7;
--theme-text: #c0caf5;
--theme-subtext1: #a9b1d6;
--theme-subtext0: #737aa2;
--theme-overlay2: #737aa2;
--theme-overlay1: #565f89;
--theme-overlay0: #545c7e;
--theme-surface2: #414868;
--theme-surface1: #3b4261;
--theme-surface0: #292e42;
--theme-base: #24283b;
--theme-mantle: #1f2335;
--theme-crust: #1b1e2d;
/* Semantic Aliases */
--theme-bg: var(--theme-base);
--theme-bg-secondary: var(--theme-mantle);
--theme-bg-tertiary: var(--theme-crust);
--theme-text-muted: var(--theme-subtext0);
--theme-border: var(--theme-surface0);
--theme-accent: var(--theme-blue);
--theme-success: var(--theme-green);
--theme-warning: var(--theme-yellow);
--theme-error: var(--theme-red);
--theme-info: var(--theme-sapphire);
/* Component Tokens */
--theme-card-bg: var(--theme-surface0);
--theme-card-border: var(--theme-surface1);
--theme-input-bg: var(--theme-surface0);
--theme-input-border: var(--theme-surface1);
--theme-nav-bg: var(--theme-mantle);
--theme-sidebar-bg: var(--theme-crust);
--theme-widget-bg: var(--theme-surface0);
--theme-widget-border: var(--theme-surface1);
/* Typography */
--theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing and Radius */
--theme-radius-sm: 4px;
--theme-radius-md: 8px;
--theme-radius-lg: 12px;
--theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--theme-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Interactive Tokens */
--theme-link-color: var(--theme-accent);
--theme-link-hover-color: var(--theme-lavender);
--theme-focus-ring-color: color-mix(in srgb, var(--theme-accent) 40%, transparent);
--theme-hover-bg: var(--theme-surface1);
/* Button Tokens */
--theme-btn-primary-bg: var(--theme-accent);
--theme-btn-primary-text: var(--theme-base);
--theme-btn-secondary-bg: var(--theme-surface1);
--theme-btn-secondary-text: var(--theme-text);
/* State Subtle Backgrounds */
--theme-success-bg-subtle: color-mix(in srgb, var(--theme-green) 15%, var(--theme-base));
--theme-warning-bg-subtle: color-mix(in srgb, var(--theme-yellow) 15%, var(--theme-base));
--theme-error-bg-subtle: color-mix(in srgb, var(--theme-red) 15%, var(--theme-base));
--theme-info-bg-subtle: color-mix(in srgb, var(--theme-sapphire) 15%, var(--theme-base));
/* Table Tokens */
--theme-table-bg: var(--theme-base);
--theme-table-border: var(--theme-surface1);
--theme-table-header-bg: var(--theme-surface0);
--theme-table-stripe-bg: color-mix(in srgb, var(--theme-overlay0) 4%, var(--theme-base));
--theme-table-hover-bg: color-mix(in srgb, var(--theme-overlay0) 8%, var(--theme-base));
/* Dropdown Tokens */
--theme-dropdown-bg: var(--theme-card-bg);
--theme-dropdown-border: var(--theme-card-border);
--theme-dropdown-hover-bg: var(--theme-hover-bg);
/* Modal Tokens */
--theme-modal-bg: var(--theme-card-bg);
--theme-modal-border: var(--theme-card-border);
--theme-backdrop-bg: rgba(0, 0, 0, 0.5);
/* Tooltip Tokens */
--theme-tooltip-bg: var(--theme-overlay2);
--theme-tooltip-text: var(--theme-base);
/* Code Tokens */
--theme-code-bg: var(--theme-surface0);
--theme-code-text: var(--theme-pink);
/* Emphasis and Utility */
--theme-emphasis-color: var(--theme-text);
--theme-border-translucent: color-mix(in srgb, var(--theme-border) 60%, transparent);
/* State Subtle Borders */
--theme-success-border-subtle: color-mix(in srgb, var(--theme-green) 25%, var(--theme-base));
--theme-warning-border-subtle: color-mix(in srgb, var(--theme-yellow) 25%, var(--theme-base));
--theme-error-border-subtle: color-mix(in srgb, var(--theme-red) 25%, var(--theme-base));
--theme-info-border-subtle: color-mix(in srgb, var(--theme-sapphire) 25%, var(--theme-base));
/* State Text Emphasis */
--theme-success-text: var(--theme-green);
--theme-warning-text: var(--theme-yellow);
--theme-error-text: var(--theme-red);
--theme-info-text: var(--theme-sapphire);
/* Accent/Primary Variants */
--theme-accent-bg-subtle: color-mix(in srgb, var(--theme-accent) 15%, var(--theme-base));
--theme-accent-border-subtle: color-mix(in srgb, var(--theme-accent) 25%, var(--theme-base));
--theme-accent-text: var(--theme-accent);
/* Additional Button Variants */
--theme-btn-danger-bg: var(--theme-red);
--theme-btn-danger-text: var(--theme-base);
--theme-btn-success-bg: var(--theme-green);
--theme-btn-success-text: var(--theme-base);
--theme-btn-warning-bg: var(--theme-yellow);
--theme-btn-warning-text: color-mix(in srgb, var(--theme-yellow) 25%, black);
--theme-btn-info-bg: var(--theme-sapphire);
--theme-btn-info-text: var(--theme-base);
/* Badge Tokens */
--theme-badge-bg: var(--theme-accent);
--theme-badge-text: var(--theme-base);
/* Breadcrumb Tokens */
--theme-breadcrumb-color: var(--theme-text-muted);
--theme-breadcrumb-active-color: var(--theme-text);
--theme-breadcrumb-divider-color: var(--theme-overlay1);
/* List Group Tokens */
--theme-list-group-bg: var(--theme-card-bg);
--theme-list-group-border: var(--theme-card-border);
--theme-list-group-hover-bg: var(--theme-hover-bg);
--theme-list-group-active-bg: var(--theme-accent);
--theme-list-group-active-text: var(--theme-base);
/* Pagination Tokens */
--theme-pagination-bg: var(--theme-card-bg);
--theme-pagination-border: var(--theme-card-border);
--theme-pagination-active-bg: var(--theme-accent);
--theme-pagination-active-text: var(--theme-base);
--theme-pagination-disabled-color: var(--theme-overlay0);
/* Progress Bar Tokens */
--theme-progress-bg: var(--theme-surface0);
--theme-progress-bar-bg: var(--theme-accent);
/* Toast Tokens */
--theme-toast-bg: var(--theme-card-bg);
--theme-toast-border: var(--theme-card-border);
--theme-toast-header-bg: color-mix(in srgb, var(--theme-surface0) 80%, var(--theme-card-bg));
/* Popover Tokens */
--theme-popover-bg: var(--theme-card-bg);
--theme-popover-border: var(--theme-card-border);
--theme-popover-header-bg: color-mix(in srgb, var(--theme-surface0) 50%, var(--theme-card-bg));
/* Offcanvas Tokens */
--theme-offcanvas-bg: var(--theme-card-bg);
--theme-offcanvas-border: var(--theme-card-border);
/* Accordion Tokens */
--theme-accordion-bg: var(--theme-card-bg);
--theme-accordion-border: var(--theme-card-border);
--theme-accordion-active-bg: var(--theme-accent-bg-subtle);
--theme-accordion-active-text: var(--theme-accent);
--theme-accordion-btn-bg: var(--theme-card-bg);
/* Nav Tab/Pill Tokens */
--theme-nav-tab-border: var(--theme-border);
--theme-nav-tab-active-bg: var(--theme-card-bg);
--theme-nav-tab-active-text: var(--theme-accent);
--theme-nav-tab-hover-bg: var(--theme-hover-bg);
--theme-nav-pill-active-bg: var(--theme-accent);
--theme-nav-pill-active-text: var(--theme-base);
/* Form Enhancement Tokens */
--theme-input-focus-border: var(--theme-accent);
--theme-input-placeholder-color: var(--theme-overlay1);
--theme-input-disabled-bg: var(--theme-surface0);
--theme-form-valid-color: var(--theme-green);
--theme-form-valid-border: var(--theme-green);
--theme-form-invalid-color: var(--theme-red);
--theme-form-invalid-border: var(--theme-red);
--theme-form-check-active-bg: var(--theme-accent);
/* Heading and Selection */
--theme-heading-color: var(--theme-text);
--theme-highlight-bg: color-mix(in srgb, var(--theme-yellow) 30%, var(--theme-base));
--theme-highlight-text: var(--theme-text);
/* Spinner Tokens */
--theme-spinner-color: var(--theme-accent);
/* Close Button */
--theme-close-btn-color: var(--theme-text-muted);
/* Placeholder Loading */
--theme-placeholder-bg: var(--theme-surface1);
/* Focus Ring Enhancement */
--theme-focus-ring-width: 0.25rem;
/* Disabled States */
--theme-disabled-opacity: 0.65;
/* Carousel Tokens */
--theme-carousel-indicator-bg: var(--theme-overlay1);
--theme-carousel-indicator-active-bg: var(--theme-text);
--theme-carousel-caption-color: var(--theme-text);
/* Scrollbar Tokens */
--theme-scrollbar-track: var(--theme-surface0);
--theme-scrollbar-thumb: var(--theme-overlay0);
--theme-scrollbar-thumb-hover: var(--theme-overlay1);
}