From 18cdc235c26ce9f8413ea08e9a3d9cd519b0f18e Mon Sep 17 00:00:00 2001 From: Andreas Grafen Date: Tue, 7 Jun 2022 00:36:05 +0200 Subject: [PATCH] docs: general colours and typography --- docs/style-guide.md | 495 ++++++++++++++++++++++++++++++++------------ 1 file changed, 358 insertions(+), 137 deletions(-) diff --git a/docs/style-guide.md b/docs/style-guide.md index a69003a..09a0dd5 100644 --- a/docs/style-guide.md +++ b/docs/style-guide.md @@ -13,7 +13,228 @@ 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: -  + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Background Colours

FunctionExamplesColours
Backgroun 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
+ 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ +
+ + ### Terminals @@ -35,160 +256,160 @@ These are general use cases for most of the palette relevant for user interfaces Background - + Base - + Base - + Base - + Base Main Text - + Text - + Text - + Text - + Text URLs - + Rosewater - + Rosewater - + Rosewater - + Rosewater Selection - + Surface 2 - + Surface 2 - + Surface 2 - + Surface 2 Selection Text - + Text - + Text - + Text - + Text 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 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 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 color16 - + Peach - + Peach - + Peach - + Peach color17 - + Rosewater - + Rosewater - + Rosewater - + Rosewater 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