You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1271 lines
47 KiB
Markdown
1271 lines
47 KiB
Markdown
<div align="center">
|
|
<h2>🖌️ Style Guide</h2>
|
|
<p> A guide on how to properly <strong>use</strong> the palette </p>
|
|
</div>
|
|
|
|
|
|
|
|
### General Usage
|
|
|
|
> **Note** <br>
|
|
> 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.
|
|
|
|
<table>
|
|
<tr>
|
|
<th colspan="3" align="center"><h4>Background Colors</h4></th>
|
|
</tr>
|
|
<tr>
|
|
<th>Function</th>
|
|
<th colspan="2">Colors</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Background Pane</td>
|
|
<td>Base</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_base.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_base.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_base.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_base.png" height="15" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Secondary Panes</td>
|
|
<td>
|
|
Crust,<br>
|
|
Mantle
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_crust.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_crust.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_crust.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_crust.png" height="15" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_mantle.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_mantle.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_mantle.png" height="15" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_mantle.png" height="15" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Surface Elements</td>
|
|
<td>
|
|
Surface 1<br>
|
|
Surface 0,<br>
|
|
Surface 1
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_surface1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_surface1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_surface1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_surface1.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_surface0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_surface0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_surface0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_surface0.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_surface1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_surface1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_surface1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_surface1.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Overlays</td>
|
|
<td>
|
|
Overlay 1,<br>
|
|
Overlay 0,<br>
|
|
Overlay 1
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="3" align="center"><h4>Typography</h4></th>
|
|
</tr>
|
|
<tr>
|
|
<th>Function</th>
|
|
<th colspan="2">Colors</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Body Copy</td>
|
|
<td>Text</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Main Headline</td>
|
|
<td>Text</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sub-Headlines, Labels</td>
|
|
<td>
|
|
Subtext 0,<br>
|
|
Subtext 1
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_subtext0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_subtext0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_subtext0.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_subtext1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_subtext1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_subtext1.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Subtle</td>
|
|
<td>Overlay 1</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_overlay1.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_overlay1.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Links, URLs</td>
|
|
<td>Blue</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Success</td>
|
|
<td>Green</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Warnings</td>
|
|
<td>Yellow</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Errors</td>
|
|
<td>Red</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tags, Pills</td>
|
|
<td>Blue</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Selection Background</td>
|
|
<td>
|
|
Surface 2<br>
|
|
<strong>40% - 60% Opacity</strong>
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Cursor</td>
|
|
<td>Rosewater</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
### Terminals
|
|
|
|
<table>
|
|
<!-----------------
|
|
- ## Window Colors
|
|
------------------>
|
|
<tr>
|
|
<th colspan="9" align="center"><h4>Window Colors</h4></th>
|
|
</tr>
|
|
<tr>
|
|
<th></th>
|
|
<th colspan="2">Latte</th>
|
|
<th colspan="2">Frappé</th>
|
|
<th colspan="2">Macchiato</th>
|
|
<th colspan="2">Mocha</th>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Cursor ## -->
|
|
<td>Cursor</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Cursor Text ## -->
|
|
<td>Cursor Text</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
|
|
<td>Base</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Active Border ## -->
|
|
<td>Active Border</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Inactive Border ## -->
|
|
<td>Inactive Border</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/></td>
|
|
<td>Overlay 0</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/></td>
|
|
<td>Overlay 0</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/></td>
|
|
<td>Overlay 0</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/></td>
|
|
<td>Overlay 0</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Bell Border ## -->
|
|
<td>Bell Border</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
</tr>
|
|
<!------------------
|
|
- ## Regular Colors
|
|
------------------->
|
|
<tr>
|
|
<th colspan="9" align="center"><h4>Regular Colors</h4></th>
|
|
</tr>
|
|
<tr>
|
|
<th></th>
|
|
<th colspan="2">Latte</th>
|
|
<th colspan="2">Frappé</th>
|
|
<th colspan="2">Macchiato</th>
|
|
<th colspan="2">Mocha</th>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Black ## -->
|
|
<td>color0</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_subtext1.png" height="16" width="16"/>
|
|
</td><td>Subtext 1</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_surface1.png" height="16" width="16"/></td>
|
|
<td>Surface 1</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_surface1.png" height="16" width="16"/>
|
|
</td><td>Surface 1</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_surface1.png" height="16" width="16"/></td>
|
|
<td>Surface 1</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Red ## -->
|
|
<td>color1</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Green ## -->
|
|
<td>color2</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Yellow ## -->
|
|
<td>color3</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Blue ## -->
|
|
<td>color4</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Magenta ## -->
|
|
<td>color5</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Cyan ## -->
|
|
<td>color6</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## White ## -->
|
|
<td>color7</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_surface2.png" height="16" width="16"/></td>
|
|
<td>Surface 2</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_subtext1.png" height="16" width="16"/></td>
|
|
<td>Subtext 1</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_subtext1.png" height="16" width="16"/></td>
|
|
<td>Subtext 1</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_subtext1.png" height="16" width="16"/></td>
|
|
<td>Subtext 1</td>
|
|
</tr>
|
|
<!---------------
|
|
- ## Bold Colors
|
|
---------------->
|
|
<tr>
|
|
<th colspan="9" align="center"><h4>Bold Colors</h4></th>
|
|
</tr>
|
|
<tr>
|
|
<th></th>
|
|
<th colspan="2">Latte</th>
|
|
<th colspan="2">Frappé</th>
|
|
<th colspan="2">Macchiato</th>
|
|
<th colspan="2">Mocha</th>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Black ## -->
|
|
<td>color8</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_subtext0.png" height="16" width="16"/></td>
|
|
<td>Subtext 0</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_surface2.png" height="16" width="16"/></td>
|
|
<td>Surface 2</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_surface2.png" height="16" width="16"/></td>
|
|
<td>Surface 2</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_surface2.png" height="16" width="16"/></td>
|
|
<td>Surface 2</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Red ## -->
|
|
<td>color9</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/></td>
|
|
<td>Red</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Green ## -->
|
|
<td>color10</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/></td>
|
|
<td>Green</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Yellow ## -->
|
|
<td>color11</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/></td>
|
|
<td>Yellow</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Blue ## -->
|
|
<td>color12</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/></td>
|
|
<td>Blue</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Magenta ## -->
|
|
<td>color13</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/></td>
|
|
<td>Pink</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Cyan ## -->
|
|
<td>color14</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/></td>
|
|
<td>Teal</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## White ## -->
|
|
<td>color15</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_surface1.png" height="16" width="16"/></td>
|
|
<td>Surface 1</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_subtext0.png" height="16" width="16"/></td>
|
|
<td>Subtext 0</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_subtext0.png" height="16" width="16"/></td>
|
|
<td>Subtext 0</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_subtext0.png" height="16" width="16"/></td>
|
|
<td>Subtext 0</td>
|
|
</tr>
|
|
<!-------------------
|
|
- ## Extended Colors
|
|
-------------------->
|
|
<tr>
|
|
<th colspan="9" align="center"><h4>Extended Colors</h4></th>
|
|
</tr>
|
|
<tr>
|
|
<th></th>
|
|
<th colspan="2">Latte</th>
|
|
<th colspan="2">Frappé</th>
|
|
<th colspan="2">Macchiato</th>
|
|
<th colspan="2">Mocha</th>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Peach ## -->
|
|
<td>color16</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/></td>
|
|
<td>Peach</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/></td>
|
|
<td>Peach</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/></td>
|
|
<td>Peach</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/></td>
|
|
<td>Peach</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Rosewater ## -->
|
|
<td>color17</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/></td>
|
|
<td>Rosewater</td>
|
|
</tr>
|
|
<!-----------------
|
|
- ## Syntax Colors
|
|
------------------>
|
|
<tr>
|
|
<th colspan="9" align="center"><h4>Syntax Colors</h4></th>
|
|
</tr>
|
|
<tr>
|
|
<th></th>
|
|
<th colspan="2">Latte</th>
|
|
<th colspan="2">Frappé</th>
|
|
<th colspan="2">Macchiato</th>
|
|
<th colspan="2">Mocha</th>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Mark 1 ## -->
|
|
<td>Mark 1</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/></td>
|
|
<td>Lavender</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Mark 1 Text ## -->
|
|
<td>Mark 1 Text</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
|
|
<td>Base</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Mark 2 ## -->
|
|
<td>Mark 2</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_mauve.png" height="16" width="16"/></td>
|
|
<td>Mauve</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_mauve.png" height="16" width="16"/></td>
|
|
<td>Mauve</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_mauve.png" height="16" width="16"/></td>
|
|
<td>Mauve</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_mauve.png" height="16" width="16"/></td>
|
|
<td>Mauve</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Mark 2 Text ## -->
|
|
<td>Mark 2 Text</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
|
|
<td>Base</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Mark 3 ## -->
|
|
<td>Mark 3</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_sapphire.png" height="16" width="16"/></td>
|
|
<td>Sapphire</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_sapphire.png" height="16" width="16"/></td>
|
|
<td>Sapphire</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_sapphire.png" height="16" width="16"/></td>
|
|
<td>Sapphire</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_sapphire.png" height="16" width="16"/></td>
|
|
<td>Sapphire</td>
|
|
</tr>
|
|
<tr>
|
|
<!-- ## Mark 3 Text ## -->
|
|
<td>Mark 3 Text</td>
|
|
<!-- Latte -->
|
|
<td><img src="../assets/palette/circles/latte_base.png" height="16" width="16"/></td>
|
|
<td>Base</td>
|
|
<!-- Frappé -->
|
|
<td><img src="../assets/palette/circles/frappe_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Macchiato -->
|
|
<td><img src="../assets/palette/circles/macchiato_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
<!-- Mocha -->
|
|
<td><img src="../assets/palette/circles/mocha_crust.png" height="16" width="16"/></td>
|
|
<td>Crust</td>
|
|
</tr>
|
|
</table>
|
|
|
|
### Code Editors
|
|
|
|
> **Note** <br>
|
|
> **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.
|
|
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<table>
|
|
<tr>
|
|
<th colspan="3" align="center">
|
|
<h4>Language Defaults</h4>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Syntax</th>
|
|
<th colspan="2">Color</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Keyword</td>
|
|
<td>Mauve</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_mauve.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_mauve.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_mauve.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_mauve.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Strings</td>
|
|
<td>Green</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Escape Sequences</td>
|
|
<td>Pink</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_pink.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_pink.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_pink.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_pink.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Comments</td>
|
|
<td>Overlay 0</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_overlay0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_overlay0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_overlay0.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_overlay0.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Constants, Numbers</td>
|
|
<td>Peach</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Operators</td>
|
|
<td>Sky</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_sky.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_sky.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_sky.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_sky.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Braces, Delimiters</td>
|
|
<td>Overlay 2</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_overlay2.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_overlay2.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_overlay2.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_overlay2.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Methods, Functions</td>
|
|
<td>Blue</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Parameters</td>
|
|
<td>Maroon</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_maroon.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_maroon.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_maroon.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_maroon.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Builtins</td>
|
|
<td>Red</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Classes, Metadata</td>
|
|
<td>Yellow</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td>
|
|
<table>
|
|
<tr>
|
|
<th colspan="3" align="center">
|
|
<h4>General</h4>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Syntax</th>
|
|
<th colspan="2">Color</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Cursor</td>
|
|
<td>Rosewater</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_rosewater.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_rosewater.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_rosewater.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_rosewater.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Normal Links<br>
|
|
Followed Links<br>
|
|
On Hover Links
|
|
</td>
|
|
<td>
|
|
Blue<br>
|
|
Lavender<br>
|
|
Sky
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_sky.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_sky.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_sky.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_sky.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Search FG<br>
|
|
Search BG<br>
|
|
Active Search FG<br>
|
|
Active Search BG
|
|
</td>
|
|
<td>
|
|
Text<br>
|
|
Teal<br>
|
|
Text<br>
|
|
Red
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_text.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_text.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Errors</td>
|
|
<td>Red</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Warnings</td>
|
|
<td>Yellow<br>Peach</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Information</td>
|
|
<td>Teal</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_teal.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<table>
|
|
<tr>
|
|
<th colspan="3" align="center">
|
|
<h4>
|
|
Rainbow Highlights<br>
|
|
(Brackets, Headings, etc.)
|
|
</h4>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Syntax</th>
|
|
<th colspan="2">Color</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #1</td>
|
|
<td>Red</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #2</td>
|
|
<td>Peach</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_peach.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_peach.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #3</td>
|
|
<td>Yellow</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #4</td>
|
|
<td>Green</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #5</td>
|
|
<td>Sapphire</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_sapphire.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_sapphire.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_sapphire.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_sapphire.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #6</td>
|
|
<td>Lavender</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_lavender.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_lavender.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_lavender.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_lavender.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td>
|
|
<table>
|
|
<tr>
|
|
<th colspan="3" align="center">
|
|
<h4>Rainbow Parameters &<br/> Local Variables</h4>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Syntax</th>
|
|
<th colspan="2">Color</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #1</td>
|
|
<td>60% Text/Red Mix</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/semantic/latte_semantic_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/frappe_semantic_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/macchiato_semantic_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/mocha_semantic_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #2</td>
|
|
<td>60% Text/Yellow Mix</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/semantic/latte_semantic_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/frappe_semantic_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/macchiato_semantic_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/mocha_semantic_yellow.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #3</td>
|
|
<td>60% Text/Green Mix</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/semantic/latte_semantic_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/frappe_semantic_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/macchiato_semantic_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/mocha_semantic_green.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #4</td>
|
|
<td>60% Text/Teal Mix</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/semantic/latte_semantic_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/frappe_semantic_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/macchiato_semantic_teal.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/mocha_semantic_teal.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #5</td>
|
|
<td>60% Text/Blue Mix</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/semantic/latte_semantic_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/frappe_semantic_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/macchiato_semantic_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/mocha_semantic_blue.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Color #6</td>
|
|
<td>60% Text/Mauve Mix</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/semantic/latte_semantic_mauve.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/frappe_semantic_mauve.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/macchiato_semantic_mauve.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/semantic/mocha_semantic_mauve.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
<tr>
|
|
<th colspan="3" align="center">
|
|
<h4>Diff & Merge</h4>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Function</th>
|
|
<th colspan="2">Color</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Changed Text BG<br>
|
|
Changed Line BG
|
|
</td>
|
|
<td>
|
|
Blue <strong>(10% - 20% Opacity)</strong><br>
|
|
Blue <strong>(15% - 25% Opacity)</strong>
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_blue.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_blue.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Inserted Text BG<br>
|
|
Inserted Line BG
|
|
</td>
|
|
<td>
|
|
Green <strong>(10% - 20% Opacity)</strong><br>
|
|
Green <strong>(15% - 25% Opacity)</strong>
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_green.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_green.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Removed Text BG<br>
|
|
Removed Line BG
|
|
</td>
|
|
<td>
|
|
Red <strong>(10% - 20% Opacity)</strong><br>
|
|
Red <strong>(15% - 25% Opacity)</strong>
|
|
</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/><br>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
<table>
|
|
<tr>
|
|
<th colspan="3" align="center">
|
|
<h4>Debugging</h4>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Function</th>
|
|
<th colspan="2">Color</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Breakpoint Icon</td>
|
|
<td>Red</td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_red.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_red.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Breakpoint Line</td>
|
|
<td>Transparent</td>
|
|
<td>--------------</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Breakpoint Line During Execution</td>
|
|
<td>Yellow<br><strong>15% Opacity</strong></td>
|
|
<td>
|
|
<img src="../assets/palette/circles/latte_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/frappe_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/macchiato_yellow.png" height="16" width="16"/>
|
|
<img src="../assets/palette/circles/mocha_yellow.png" height="16" width="16"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|