diff --git a/assets/palette/circles/semantic/frappe_semantic_blue.png b/assets/palette/circles/semantic/frappe_semantic_blue.png new file mode 100644 index 0000000..d04ef93 Binary files /dev/null and b/assets/palette/circles/semantic/frappe_semantic_blue.png differ diff --git a/assets/palette/circles/semantic/frappe_semantic_green.png b/assets/palette/circles/semantic/frappe_semantic_green.png new file mode 100644 index 0000000..8fc2461 Binary files /dev/null and b/assets/palette/circles/semantic/frappe_semantic_green.png differ diff --git a/assets/palette/circles/semantic/frappe_semantic_mauve.png b/assets/palette/circles/semantic/frappe_semantic_mauve.png new file mode 100644 index 0000000..bdcc7da Binary files /dev/null and b/assets/palette/circles/semantic/frappe_semantic_mauve.png differ diff --git a/assets/palette/circles/semantic/frappe_semantic_red.png b/assets/palette/circles/semantic/frappe_semantic_red.png new file mode 100644 index 0000000..c9cd818 Binary files /dev/null and b/assets/palette/circles/semantic/frappe_semantic_red.png differ diff --git a/assets/palette/circles/semantic/frappe_semantic_teal.png b/assets/palette/circles/semantic/frappe_semantic_teal.png new file mode 100644 index 0000000..2ef67e1 Binary files /dev/null and b/assets/palette/circles/semantic/frappe_semantic_teal.png differ diff --git a/assets/palette/circles/semantic/frappe_semantic_yellow.png b/assets/palette/circles/semantic/frappe_semantic_yellow.png new file mode 100644 index 0000000..efb11a3 Binary files /dev/null and b/assets/palette/circles/semantic/frappe_semantic_yellow.png differ diff --git a/assets/palette/circles/semantic/latte_semantic_blue.png b/assets/palette/circles/semantic/latte_semantic_blue.png new file mode 100644 index 0000000..416c793 Binary files /dev/null and b/assets/palette/circles/semantic/latte_semantic_blue.png differ diff --git a/assets/palette/circles/semantic/latte_semantic_green.png b/assets/palette/circles/semantic/latte_semantic_green.png new file mode 100644 index 0000000..59726fd Binary files /dev/null and b/assets/palette/circles/semantic/latte_semantic_green.png differ diff --git a/assets/palette/circles/semantic/latte_semantic_mauve.png b/assets/palette/circles/semantic/latte_semantic_mauve.png new file mode 100644 index 0000000..7f150ef Binary files /dev/null and b/assets/palette/circles/semantic/latte_semantic_mauve.png differ diff --git a/assets/palette/circles/semantic/latte_semantic_red.png b/assets/palette/circles/semantic/latte_semantic_red.png new file mode 100644 index 0000000..8fa8ffc Binary files /dev/null and b/assets/palette/circles/semantic/latte_semantic_red.png differ diff --git a/assets/palette/circles/semantic/latte_semantic_teal.png b/assets/palette/circles/semantic/latte_semantic_teal.png new file mode 100644 index 0000000..a457782 Binary files /dev/null and b/assets/palette/circles/semantic/latte_semantic_teal.png differ diff --git a/assets/palette/circles/semantic/latte_semantic_yellow.png b/assets/palette/circles/semantic/latte_semantic_yellow.png new file mode 100644 index 0000000..66a1b2c Binary files /dev/null and b/assets/palette/circles/semantic/latte_semantic_yellow.png differ diff --git a/assets/palette/circles/semantic/macchiato_semantic_blue.png b/assets/palette/circles/semantic/macchiato_semantic_blue.png new file mode 100644 index 0000000..2c928fa Binary files /dev/null and b/assets/palette/circles/semantic/macchiato_semantic_blue.png differ diff --git a/assets/palette/circles/semantic/macchiato_semantic_green.png b/assets/palette/circles/semantic/macchiato_semantic_green.png new file mode 100644 index 0000000..788ebe8 Binary files /dev/null and b/assets/palette/circles/semantic/macchiato_semantic_green.png differ diff --git a/assets/palette/circles/semantic/macchiato_semantic_mauve.png b/assets/palette/circles/semantic/macchiato_semantic_mauve.png new file mode 100644 index 0000000..855839d Binary files /dev/null and b/assets/palette/circles/semantic/macchiato_semantic_mauve.png differ diff --git a/assets/palette/circles/semantic/macchiato_semantic_red.png b/assets/palette/circles/semantic/macchiato_semantic_red.png new file mode 100644 index 0000000..afaadfa Binary files /dev/null and b/assets/palette/circles/semantic/macchiato_semantic_red.png differ diff --git a/assets/palette/circles/semantic/macchiato_semantic_teal.png b/assets/palette/circles/semantic/macchiato_semantic_teal.png new file mode 100644 index 0000000..a6d5222 Binary files /dev/null and b/assets/palette/circles/semantic/macchiato_semantic_teal.png differ diff --git a/assets/palette/circles/semantic/macchiato_semantic_yellow.png b/assets/palette/circles/semantic/macchiato_semantic_yellow.png new file mode 100644 index 0000000..4e2cc95 Binary files /dev/null and b/assets/palette/circles/semantic/macchiato_semantic_yellow.png differ diff --git a/assets/palette/circles/semantic/mocha_semantic_blue.png b/assets/palette/circles/semantic/mocha_semantic_blue.png new file mode 100644 index 0000000..2053a5a Binary files /dev/null and b/assets/palette/circles/semantic/mocha_semantic_blue.png differ diff --git a/assets/palette/circles/semantic/mocha_semantic_green.png b/assets/palette/circles/semantic/mocha_semantic_green.png new file mode 100644 index 0000000..701efcc Binary files /dev/null and b/assets/palette/circles/semantic/mocha_semantic_green.png differ diff --git a/assets/palette/circles/semantic/mocha_semantic_mauve.png b/assets/palette/circles/semantic/mocha_semantic_mauve.png new file mode 100644 index 0000000..a77007b Binary files /dev/null and b/assets/palette/circles/semantic/mocha_semantic_mauve.png differ diff --git a/assets/palette/circles/semantic/mocha_semantic_red.png b/assets/palette/circles/semantic/mocha_semantic_red.png new file mode 100644 index 0000000..52bfce9 Binary files /dev/null and b/assets/palette/circles/semantic/mocha_semantic_red.png differ diff --git a/assets/palette/circles/semantic/mocha_semantic_teal.png b/assets/palette/circles/semantic/mocha_semantic_teal.png new file mode 100644 index 0000000..e7e4d9c Binary files /dev/null and b/assets/palette/circles/semantic/mocha_semantic_teal.png differ diff --git a/assets/palette/circles/semantic/mocha_semantic_yellow.png b/assets/palette/circles/semantic/mocha_semantic_yellow.png new file mode 100644 index 0000000..4f34e2d Binary files /dev/null and b/assets/palette/circles/semantic/mocha_semantic_yellow.png differ diff --git a/docs/style-guide.md b/docs/style-guide.md index d9914dd..28f6d58 100644 --- a/docs/style-guide.md +++ b/docs/style-guide.md @@ -1,256 +1,233 @@ -

-

🖌️ Style Guide

-

- - -

- A guide on how to properly use the palette -

+
+

🖌️ Style Guide

+

A guide on how to properly use the palette

+
  ### General Usage -These are general use cases for most of the palette relevant for user interfaces. The `function` expresses a very vague use-case of a color and the `scope example` is how it is generally used: +> **Note**
+> 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 Colours

FunctionExamplesColours
Background PaneMain Canvas, Page BackgroundBase - - - - - - - -
Secondary PanesSecondary Canvases, Content Boxes, Sidebars - Crust,
- Mantle - 		-
- - 		-
- - 		-
- - 		-
- -
Surface ElementsSign Columns, Cursor Line, Generic Buttons, Inputs - Surface 0,
- Surface 1,
- Surface 2 - 		-
-
- - 		-
-
- - 		-
-
- - 		-
-
- -
OverlaysSplits, Floating Elements - Overlay 0,
- Overlay 1,
- Overlay 2 - 		-
-
- - 		-
-
- - 		-
-
- - 		-
-
- -

Typography

FunctionExamplesColours
ForegroundMain Text, Body CopyText - - - - - - - -
SubtextSecondary Text, Headlines, Labels - Subtext 0,
- Subtext 1 - 		-
- - 		-
- - 		-
- - 		-
- -
SubtleComments, Footnotes, Inactive TextOverlay 1 - - - - - - - -
Highlights - Links, URLs
- Success
- Warnings
- Errors
- Search Results, Tags - 		- Rosewater
- Green
- Peach
- Maroon
- Blue
- 		-
-
-
-
- - 		-
-
-
-
- - 		-
-
-
-
- - 		-
-
-
-
- -

- -> **Note** Text colours are guidelines. Certain cases require deviations from the guidelines above. An example would be Text on coloured backgrounds. Legibility always comes first, so please use your own judgement. - -

Background Colors

FunctionColors
Background PaneBase + + + + +
Secondary Panes + Crust,
+ Mantle + 		+ + + +
+ + + + +
Surface Elements + Surface 1
+ Surface 0,
+ Surface 1 + 		+ + + +
+ + + +
+ + + + +
Overlays + Overlay 1,
+ Overlay 0,
+ Overlay 1 + 		+ + + +
+ + + +
+ + + + +

Typography

FunctionColors
Body CopyText + + + + +
Main HeadlineText + + + + +
Sub-Headlines, Labels + Subtext 0,
+ Subtext 1 + 		+ + + +
+ + + + +
SubtleOverlay 1 + + + + +
Links, URLsBlue + + + + +
SuccessGreen + + + + +
WarningsYellow + + + + +
ErrorsRed + + + + +
Tags, PillsBlue + + + + +
Selection Background + Surface 2
+ 40% - 60% Opacity + 		+ + + + +
CursorRosewater + + + + +
- - ### Terminals - + @@ -259,86 +236,6 @@ These are general use cases for most of the palette relevant for user interfaces - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -420,10 +317,10 @@ These are general use cases for most of the palette relevant for user interfaces - + @@ -561,10 +458,10 @@ These are general use cases for most of the palette relevant for user interfaces - + @@ -702,10 +599,10 @@ These are general use cases for most of the palette relevant for user interfaces - + @@ -747,10 +644,10 @@ These are general use cases for most of the palette relevant for user interfaces - + @@ -858,3 +755,516 @@ These are general use cases for most of the palette relevant for user interfaces

Window Colours

Window Colors
Macchiato Mocha
BackgroundBaseBaseBaseBase
Main TextTextTextTextText
URLsRosewaterRosewaterRosewaterRosewater
SelectionSurface 2Surface 2Surface 2Surface 2
Selection TextTextTextTextText
CursorYellow

Regular Colours

Regular Colors
Subtext 1

Bold Colours

Bold Colors
Subtext 0

Extended Colours

Extended Colors
Rosewater

Syntax Colours

Syntax Colors
### Code Editors + +> **Note**
+> **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

+
SyntaxColor
KeywordMauve + + + + +
StringsGreen + + + + +
Escape SequencesPink + + + + +
CommentsOverlay 0 + + + + +
Constants, NumbersPeach + + + + +
OperatorsSky + + + + +
Braces, DelimitersOverlay 2 + + + + +
Methods, FunctionsBlue + + + + +
ParametersMaroon + + + + +
BuiltinsRed + + + + +
Classes, MetadataYellow + + + + +
+ 		+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

General

+
SyntaxColor
CursorRosewater + + + + +
+ Normal Links
+ Followed Links
+ On Hover Links + 		+ Blue
+ Lavender
+ Sky + 		+ + + +
+ + + +
+ + + + +
+ Search FG
+ Search BG
+ Active Search FG
+ Active Search BG + 		+ Text
+ Teal
+ Text
+ Red + 		+ + + +
+ + + +
+ + + +
+ + + + +
ErrorsRed + + + + +
WarningsYellow
Peach		 + + + +
+ + + + +
InformationTeal + + + + +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Rainbow Highlights
+ (Brackets, Headings, etc.) +

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

Rainbow Parameters &
Local Variables

+
SyntaxColor
Color #160% Text/Red Mix + + + + +
Color #260% Text/Yellow Mix + + + + +
Color #360% Text/Green Mix + + + + +
Color #460% Text/Teal Mix + + + + +
Color #560% Text/Blue Mix + + + + +
Color #660% Text/Mauve Mix + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+

Diff & Merge

+
FunctionColor
+ 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

+
FunctionColor
Breakpoint IconRed + + + + +
Breakpoint LineTransparent--------------
Breakpoint Line During ExecutionYellow
15% Opacity		 + + + + +