Skip to content

Latest commit

 

History

History
1312 lines (1294 loc) · 54.2 KB

style-guide.md

File metadata and controls

1312 lines (1294 loc) · 54.2 KB

🖌️ 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 Overlay 2
20% - 30% 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 0 Subtext 0 Subtext 0

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

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

1) ANSI Color Generation

Note

These bright colors are not necessarily "brighter" than the normal colors, but rather more bold and saturated.

The ANSI brights, excluding black and white, are automatically generated based on the following formulas:

Mocha, Macchiato, Frappé Latte 
color.lightness * 0.94
color.chroma + 8
color.hue + 2
 
color.lightness * 1.09


color.hue + 2

The color values for black and white are mapped as shown below:

Mocha, Macchiato, Frappé Latte
Black (0): Surface 1
Black (8): Surface 2
White (7): Subtext 0
White (15): Subtext 1 		Black (0): Subtext 1
Black (8): Subtext 0
White (7): Surface 2
White (15): Surface 1

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
Symbols, Atoms Red
Escape Sequences
Regex 		Pink
Comments Overlay 2
Constants, Numbers Peach
Operators Sky
Braces, Delimiters Overlay 2
Methods, Functions Blue
Parameters Maroon
Builtins Red
Classes, Interfaces,
Annotations, Metadata,
Enums, Types 		Yellow
Enum Variants Teal
Property
(e.g. JSON keys) 		Blue
Attributes
(e.g. XML-style attributes) 		Yellow
Macros Rosewater

General
Syntax Color
Cursor Rosewater
Cursor Line Text
10% Opacity
Line Numbers Overlay 1
Active Line Number Lavender
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
Diff Header Blue
Index Metadata Overlay2
File Path Markers Pink
Hunk Header Peach
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