-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathstyling.md
86 lines (71 loc) · 5.43 KB
/
styling.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
# Colours Overview
**Version 0.1.0**
We define a set of colour codes organized into shades ranging from dark
to light. These codes are commonly used in software development and
design for creating themes or styling user interfaces.
## Base24 Fallbacks
We provide a mapping between Base24 and Base16 colour codes for
reference:
| Base24 | Base16 |
| ------ | ------ |
| base10 | base00 |
| base11 | base00 |
| base12 | base08 |
| base13 | base0A |
| base14 | base0B |
| base15 | base0C |
| base16 | base0D |
| base17 | base0E |
## Usage Guidelines
We offer guidelines for both dark and light themes:
- **Dark Theme**:
- Colours from base00 to base07 should range from dark to light.
- Colours base10 to base11 should span from light to dark, but still
darker than base00.
- **Light Theme**:
- Colours from base00 to base07 should range from light to dark.
- Colours base10 to base11 should span from dark to light, but lighter
than base00.
## Specific Colours and Their Usages
Each colour (baseNN) serves a specific purpose or use case, such as
background, foreground, variables, etc. Here's a breakdown:
| Colour | BaseNN | Ansi | Terminal/Colour Use | Text Editor |
| ------------------------------------------------------- | ------ | ---- | ------------------- | ----------- |
|  | base00 | - | Background | Default Background |
|  | base01 | 0 | Black | Lighter Background (Used for status bars) |
|  | base02 | 8 | Bright Black | Selection Background |
|  | base03 | - | (Grey) | Comments, Invisibles, Line Highlighting |
|  | base04 | - | (Light Grey) | Dark Foreground (Used for status bars) |
|  | base05 | - | Foreground | Default Foreground, Caret, Delimiters, Operators |
|  | base06 | 7 | White | Light Foreground (Not often used) |
|  | base07 | 15 | Bright White | The Lightest Foreground (Not often used) |
|  | base08 | 9 | Bright Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted |
|  | base09 | ~11 | (Orange) | Integers, Boolean, Constants, XML Attributes, Markup Link Url |
|  | base0A | 11 | Bright Yellow | Classes, Markup Bold, Search Text Background |
|  | base0B | 10 | Bright Green | Strings, Inherited Class, Markup Code, Diff Inserted |
|  | base0C | 14 | Bright Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes |
|  | base0D | 12 | Bright Blue | Functions, Methods, Attribute IDs, Headings |
|  | base0E | 13 | Bright Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed |
|  | base0F | - | (Dark Red or Brown) | Deprecated Highlighting for Methods and Functions, Opening/Closing Embedded Language Tags, e.g., `<?php ?>` |
|  | base10 | - | (Darker Black) | Darker Background |
|  | base11 | - | (Darkest Black) | The Darkest Background |
|  | base12 | 1 | Red | NA |
|  | base13 | 3 | Yellow | NA |
|  | base14 | 2 | Green | NA |
|  | base15 | 6 | Cyan | NA |
|  | base16 | 4 | Blue | NA |
|  | base17 | 5 | Purple | NA |
Note: Items in parenthesis for the Terminal/Colour Use do not have an
identified terminal use and are a more generic colour description.
Implementation may vary depending on the Base24 scheme.
Note: In `HSL` terms, **Bright** refers to a colour with a Lightness (`L`)
value close to `50`, which is a balanced midpoint between dark and
light. It also typically has a Saturation (`S`) value close to `100`,
meaning the colour is vivid and not muted. This results in a colour that
appears bright and vivid compared to another colour. However, brightness
is relative, meaning one colour can be considered brighter than another
even if both are not particularly bright. For example, a colour with
higher saturation and a lightness closer to `50` may be perceived as
brighter than a less saturated or darker variant, even if neither is
intensely bright.
