Mirrors/catppuccin
2
0
Fork 0
mirror of https://github.com/catppuccin/catppuccin synced 2024-11-25 21:10:19 +00:00
Code Issues Projects Releases Packages Wiki Activity
catppuccin/docs/style-guide.md
sgoudham 1f3415e051
docs: fix broken admonishments 
This commit fixes the admonishments
by following the new syntax as identified
in https://github.com/orgs/community/discussions/16925#discussioncomment-6506860
2023-08-08 09:28:20 +01:00

47 KiB
Raw Blame History

🖌️ Style Guide

A guide on how to properly use the palette

 

General Usage

[!IMPORTANT]
Text colors are guidelines, certain cases require deviations from the guidelines below. An example would be text on colored backgrounds. Legibility always comes first, so please use your own judgement.

Background Colors
Function Colors
Background Pane Base
Secondary Panes Crust,
Mantle
Surface Elements Surface 0
Surface 1,
Surface 2

Overlays Overlay 0,
Overlay 1,
Overlay 2

Typography
Function Colors
Body Copy Text
Main Headline Text
Sub-Headlines, Labels Subtext 0,
Subtext 1
Subtle Overlay 1
Links, URLs Blue
Success Green
Warnings Yellow
Errors Red
Tags, Pills Blue
Selection Background Surface 2
40% - 60% Opacity
Cursor Rosewater

Terminals

Window Colors
Latte Frappé Macchiato Mocha
Cursor Rosewater Rosewater Rosewater Rosewater
Cursor Text Base Crust Crust Crust
Active Border Lavender Lavender Lavender Lavender
Inactive Border Overlay 0 Overlay 0 Overlay 0 Overlay 0
Bell Border Yellow Yellow Yellow Yellow

Regular Colors
Latte Frappé Macchiato Mocha
color0 Subtext 1 Surface 1 Surface 1 Surface 1
color1 Red Red Red Red
color2 Green Green Green Green
color3 Yellow Yellow Yellow Yellow
color4 Blue Blue Blue Blue
color5 Pink Pink Pink Pink
color6 Teal Teal Teal Teal
color7 Surface 2 Subtext 1 Subtext 1 Subtext 1

Bold Colors
Latte Frappé Macchiato Mocha
color8 Subtext 0 Surface 2 Surface 2 Surface 2
color9 Red Red Red Red
color10 Green Green Green Green
color11 Yellow Yellow Yellow Yellow
color12 Blue Blue Blue Blue
color13 Pink Pink Pink Pink
color14 Teal Teal Teal Teal
color15 Surface 1 Subtext 0 Subtext 0 Subtext 0

Extended Colors
Latte Frappé Macchiato Mocha
color16 Peach Peach Peach Peach
color17 Rosewater Rosewater Rosewater Rosewater

Syntax Colors
Latte Frappé Macchiato Mocha
Mark 1 Lavender Lavender Lavender Lavender
Mark 1 Text Base Crust Crust Crust
Mark 2 Mauve Mauve Mauve Mauve
Mark 2 Text Base Crust Crust Crust
Mark 3 Sapphire Sapphire Sapphire Sapphire
Mark 3 Text Base Crust Crust Crust

Code Editors

[!IMPORTANT]
This is still a work-in-progress. Additionally, it's important to acknowledge that different editors have different capabilities for theming, please use your own judgement in accordance with the main colors defined below.

Language Defaults
Syntax Color
Keyword Mauve
Strings Green
Escape Sequences Pink
Comments Overlay 0
Constants, Numbers Peach
Operators Sky
Braces, Delimiters Overlay 2
Methods, Functions Blue
Parameters Maroon
Builtins Red
Classes, Metadata Yellow

General
Syntax Color
Cursor Rosewater
Normal Links
Followed Links
On Hover Links 		Blue
Lavender
Sky

Search FG
Search BG
Active Search FG
Active Search BG 		Text
Teal
Text
Red


Errors Red
Warnings Yellow
Peach
Information Teal

Rainbow Highlights
(Brackets, Headings, etc.)

Syntax Color
Color #1 Red
Color #2 Peach
Color #3 Yellow
Color #4 Green
Color #5 Sapphire
Color #6 Lavender

Rainbow Parameters &
Local Variables
Syntax Color
Color #1 60% Text/Red Mix
Color #2 60% Text/Yellow Mix
Color #3 60% Text/Green Mix
Color #4 60% Text/Teal Mix
Color #5 60% Text/Blue Mix
Color #6 60% Text/Mauve Mix

Diff & Merge
Function Color
Changed Text BG
Changed Line BG 		Blue (10% - 20% Opacity)
Blue (15% - 25% Opacity)
Inserted Text BG
Inserted Line BG 		Green (10% - 20% Opacity)
Green (15% - 25% Opacity)
Removed Text BG
Removed Line BG 		Red (10% - 20% Opacity)
Red (15% - 25% Opacity)

Debugging
Function Color
Breakpoint Icon Red
Breakpoint Line Transparent --------------
Breakpoint Line During Execution Yellow
15% Opacity