branch: elpa/gruvbox-theme
commit a3417ba515efce9602d4b3ca61383aa9f9163017
Author: Jasonm23 <jason...@gmail.com>
Commit: Jasonm23 <jason...@gmail.com>
Redo the theme colors HTML as a Vue.js project (for fun)
---
palette/gruvbox-theme-colors.css | 1324 ++++++++++++++++++++++++++--------
palette/gruvbox-theme-colors.css.map | 2 +-
palette/gruvbox-theme-colors.html | 140 +---
palette/gruvbox-theme-colors.scss | 24 +-
palette/js/main.js | 263 +++++++
5 files changed, 1308 insertions(+), 445 deletions(-)
diff --git a/palette/gruvbox-theme-colors.css b/palette/gruvbox-theme-colors.css
index e2de5ffdee..ec76bc1da8 100644
--- a/palette/gruvbox-theme-colors.css
+++ b/palette/gruvbox-theme-colors.css
@@ -16,1028 +16,1740 @@ h1, h2, h3, h4, h5 {
font-size: 10pt;
float: left;
margin: 1px 1px 0 0; }
- .gruvbox-swatch .content {
- padding: 10px; }
.gruvbox-dark0_hard {
color: #FFFFFF;
background-color: #1d2021;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark0_hard .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark0_hard .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark0_hard-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #050606; }
+ background-color: black; }
.gruvbox-dark0_hard-xterm {
color: #FFFFFF;
background-color: #1c1c1c;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark0_hard-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark0_hard-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark0_hard-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #030303; }
+ background-color: black; }
.gruvbox-dark0 {
color: #FFFFFF;
background-color: #282828;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark0 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark0 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark0-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #0f0f0f; }
+ background-color: #090909; }
.gruvbox-dark0-xterm {
color: #FFFFFF;
background-color: #262626;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark0-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark0-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark0-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #0d0d0d; }
+ background-color: #070707; }
.gruvbox-dark0_soft {
color: #FFFFFF;
background-color: #32302f;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark0_soft .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark0_soft .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark0_soft-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #181716; }
+ background-color: #121211; }
.gruvbox-dark0_soft-xterm {
color: #FFFFFF;
background-color: #303030;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark0_soft-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark0_soft-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark0_soft-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #171717; }
+ background-color: #111111; }
.gruvbox-dark1 {
color: #FFFFFF;
background-color: #3c3836;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark1 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark1 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark1-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #211f1e; }
+ background-color: #1c1a19; }
.gruvbox-dark1-xterm {
color: #FFFFFF;
background-color: #3a3a3a;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark1-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark1-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark1-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #212121; }
+ background-color: #1b1b1b; }
.gruvbox-dark2 {
color: #FFFFFF;
background-color: #504945;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark2 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark2 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark2-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #35302d; }
+ background-color: #2f2b29; }
.gruvbox-dark2-xterm {
color: #FFFFFF;
background-color: #4e4e4e;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark2-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark2-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark2-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #353535; }
+ background-color: #2f2f2f; }
.gruvbox-dark3 {
color: #FFFFFF;
background-color: #665c54;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark3 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark3 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark3-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #4a433d; }
+ background-color: #443e38; }
.gruvbox-dark3-xterm {
color: #FFFFFF;
background-color: #626262;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark3-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark3-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark3-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #494949; }
+ background-color: #434343; }
.gruvbox-dark4 {
color: #FFFFFF;
background-color: #7c6f64;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark4 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark4 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark4-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #60564d; }
+ background-color: #5a5149; }
.gruvbox-dark4-xterm {
color: #FFFFFF;
background-color: #767676;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark4-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark4-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark4-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #5d5d5d; }
+ background-color: #575757; }
.gruvbox-gray {
color: #000000;
background-color: #928374;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-gray .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-gray .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-gray-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a89d91; }
+ background-color: #716458; }
.gruvbox-gray-xterm {
color: #000000;
background-color: #8a8a8a;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-gray-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-gray-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-gray-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a4a4a4; }
+ background-color: #6b6b6b; }
.gruvbox-light0_hard {
color: #000000;
background-color: #ffffc8;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light0_hard .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light0_hard .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light0_hard-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fffffb; }
+ background-color: #ffff8b; }
.gruvbox-light0_hard-xterm {
color: #000000;
background-color: #ffffdf;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light0_hard-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light0_hard-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light0_hard-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: white; }
+ background-color: #ffffa2; }
.gruvbox-light0 {
color: #000000;
background-color: #fdf4c1;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light0 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light0 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light0-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fffdf2; }
+ background-color: #fbe986; }
.gruvbox-light0-xterm {
color: #000000;
background-color: #ffffaf;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light0-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light0-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light0-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #ffffe2; }
+ background-color: #ffff72; }
.gruvbox-light0_soft {
color: #000000;
background-color: #f4e8ba;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light0_soft .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light0_soft .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light0_soft-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fbf7e6; }
+ background-color: #ecd685; }
.gruvbox-light0_soft-xterm {
color: #000000;
background-color: #ffff87;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light0_soft-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light0_soft-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light0_soft-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #ffffba; }
+ background-color: #ffff4a; }
.gruvbox-light1 {
color: #000000;
background-color: #ebdbb2;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light1 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light1 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light1-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #f6eeda; }
+ background-color: #dec481; }
.gruvbox-light1-xterm {
color: #000000;
background-color: #ffdfaf;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light1-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light1-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light1-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fff3e2; }
+ background-color: #ffc772; }
.gruvbox-light2 {
color: #000000;
background-color: #d5c4a1;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light2 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light2 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light2-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e5dac4; }
+ background-color: #c2a977; }
.gruvbox-light2-xterm {
color: #000000;
background-color: #bcbcbc;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light2-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light2-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light2-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #d6d6d6; }
+ background-color: #9d9d9d; }
.gruvbox-light3 {
color: #000000;
background-color: #bdae93;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light3 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light3 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light3-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #d0c6b3; }
+ background-color: #a6926d; }
.gruvbox-light3-xterm {
color: #000000;
background-color: #a8a8a8;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light3-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light3-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light3-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #c2c2c2; }
+ background-color: #898989; }
.gruvbox-light4 {
color: #000000;
background-color: #a89984;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light4 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light4 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light4-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #bdb2a2; }
+ background-color: #8c7b63; }
.gruvbox-light4-xterm {
color: #000000;
background-color: #949494;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-light4-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-light4-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-light4-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #aeaeae; }
+ background-color: #757575; }
.gruvbox-bright_red {
color: #000000;
background-color: #fb4933;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_red .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_red .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_red-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fc7665; }
+ background-color: #ec1e05; }
.gruvbox-bright_red-xterm {
color: #000000;
background-color: #d75f5f;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_red-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_red-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_red-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e18888; }
+ background-color: #c73232; }
.gruvbox-bright_green {
color: #FFFFFF;
background-color: #b8bb26;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_green .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_green .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_green-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #8e911d; }
+ background-color: #86881c; }
.gruvbox-bright_green-xterm {
color: #FFFFFF;
background-color: #afaf00;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_green-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_green-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_green-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #7c7c00; }
+ background-color: #727200; }
.gruvbox-bright_yellow {
color: #000000;
background-color: #fabd2f;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_yellow .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_yellow .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_yellow-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fbcd61; }
+ background-color: #e6a306; }
.gruvbox-bright_yellow-xterm {
color: #000000;
background-color: #ffaf00;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_yellow-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_yellow-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_yellow-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #ffbf33; }
+ background-color: #c28500; }
.gruvbox-bright_blue {
color: #000000;
background-color: #83a598;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_blue .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_blue .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_blue-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a1bab1; }
+ background-color: #63887a; }
.gruvbox-bright_blue-xterm {
color: #000000;
background-color: #87afaf;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_blue-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_blue-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_blue-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a6c3c3; }
+ background-color: #649595; }
.gruvbox-bright_purple {
color: #000000;
background-color: #d3869b;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_purple .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_purple .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_purple-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e1abba; }
+ background-color: #c35976; }
.gruvbox-bright_purple-xterm {
color: #000000;
background-color: #d787af;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_purple-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_purple-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_purple-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e4adc9; }
+ background-color: #c85990; }
.gruvbox-bright_aqua {
color: #000000;
background-color: #8ec07c;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_aqua .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_aqua .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_aqua-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #acd19e; }
+ background-color: #6aac53; }
.gruvbox-bright_aqua-xterm {
color: #000000;
background-color: #87af87;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_aqua-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_aqua-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_aqua-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a6c3a6; }
+ background-color: #649564; }
.gruvbox-bright_orange {
color: #000000;
background-color: #fe8019;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_orange .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_orange .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_orange-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fe9c4c; }
+ background-color: #d96201; }
.gruvbox-bright_orange-xterm {
color: #000000;
background-color: #ff8700;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-bright_orange-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-bright_orange-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-bright_orange-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #ff9f33; }
+ background-color: #c26700; }
.gruvbox-neutral_red {
color: #000000;
background-color: #fb4934;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_red .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_red .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_red-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fc7666; }
+ background-color: #ed1d05; }
.gruvbox-neutral_red-xterm {
color: #000000;
background-color: #d75f5f;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_red-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_red-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_red-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e18888; }
+ background-color: #c73232; }
.gruvbox-neutral_green {
color: #FFFFFF;
background-color: #b8bb26;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_green .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_green .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_green-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #8e911d; }
+ background-color: #86881c; }
.gruvbox-neutral_green-xterm {
color: #FFFFFF;
background-color: #afaf00;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_green-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_green-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_green-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #7c7c00; }
+ background-color: #727200; }
.gruvbox-neutral_yellow {
color: #000000;
background-color: #fabd2f;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_yellow .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_yellow .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_yellow-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fbcd61; }
+ background-color: #e6a306; }
.gruvbox-neutral_yellow-xterm {
color: #000000;
background-color: #ffaf00;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_yellow-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_yellow-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_yellow-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #ffbf33; }
+ background-color: #c28500; }
.gruvbox-neutral_blue {
color: #000000;
background-color: #83a598;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_blue .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_blue .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_blue-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a1bab1; }
+ background-color: #63887a; }
.gruvbox-neutral_blue-xterm {
color: #000000;
background-color: #87afaf;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_blue-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_blue-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_blue-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a6c3c3; }
+ background-color: #649595; }
.gruvbox-neutral_purple {
color: #000000;
background-color: #d3869b;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_purple .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_purple .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_purple-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e1abba; }
+ background-color: #c35976; }
.gruvbox-neutral_purple-xterm {
color: #000000;
background-color: #d787af;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_purple-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_purple-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_purple-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e4adc9; }
+ background-color: #c85990; }
.gruvbox-neutral_aqua {
color: #000000;
background-color: #8ec07c;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_aqua .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_aqua .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_aqua-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #acd19e; }
+ background-color: #6aac53; }
.gruvbox-neutral_aqua-xterm {
color: #000000;
background-color: #87af87;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_aqua-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_aqua-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_aqua-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a6c3a6; }
+ background-color: #649564; }
.gruvbox-neutral_orange {
color: #000000;
background-color: #fe8019;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_orange .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_orange .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_orange-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #fe9c4c; }
+ background-color: #d96201; }
.gruvbox-neutral_orange-xterm {
color: #000000;
background-color: #ff8700;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-neutral_orange-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-neutral_orange-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-neutral_orange-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #ff9f33; }
+ background-color: #c26700; }
.gruvbox-faded_red {
color: #FFFFFF;
background-color: #9d0006;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_red .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_red .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_red-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #6a0004; }
+ background-color: #600004; }
.gruvbox-faded_red-xterm {
color: #FFFFFF;
background-color: #870000;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_red-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_red-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_red-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #540000; }
+ background-color: #4a0000; }
.gruvbox-faded_green {
color: #FFFFFF;
background-color: #79740e;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_green .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_green .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_green-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #4b4809; }
+ background-color: #423f08; }
.gruvbox-faded_green-xterm {
color: #FFFFFF;
background-color: #878700;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_green-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_green-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_green-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #545400; }
+ background-color: #4a4a00; }
.gruvbox-faded_yellow {
color: #FFFFFF;
background-color: #b57614;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_yellow .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_yellow .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_yellow-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #87580f; }
+ background-color: #7e520e; }
.gruvbox-faded_yellow-xterm {
color: #FFFFFF;
background-color: #af8700;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_yellow-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_yellow-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_yellow-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #7c6000; }
+ background-color: #725800; }
.gruvbox-faded_blue {
color: #FFFFFF;
background-color: #076678;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_blue .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_blue .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_blue-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #043d48; }
+ background-color: #04353e; }
.gruvbox-faded_blue-xterm {
color: #FFFFFF;
background-color: #005f87;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_blue-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_blue-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_blue-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #003b54; }
+ background-color: #00344a; }
.gruvbox-faded_purple {
color: #FFFFFF;
background-color: #8f3f71;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_purple .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_purple .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_purple-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #6c2f55; }
+ background-color: #652c4f; }
.gruvbox-faded_purple-xterm {
color: #FFFFFF;
background-color: #875f87;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_purple-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_purple-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_purple-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #694a69; }
+ background-color: #634663; }
.gruvbox-faded_aqua {
color: #FFFFFF;
background-color: #427b58;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_aqua .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_aqua .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_aqua-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #305a40; }
+ background-color: #2d533c; }
.gruvbox-faded_aqua-xterm {
color: #FFFFFF;
background-color: #5f8787;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_aqua-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_aqua-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_aqua-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #4a6969; }
+ background-color: #466363; }
.gruvbox-faded_orange {
color: #FFFFFF;
background-color: #af3a03;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_orange .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_orange .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_orange-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #7d2902; }
+ background-color: #732602; }
.gruvbox-faded_orange-xterm {
color: #FFFFFF;
background-color: #af5f00;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-faded_orange-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-faded_orange-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-faded_orange-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #7c4300; }
+ background-color: #723e00; }
.gruvbox-dark_red {
color: #FFFFFF;
background-color: #421E1E;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark_red .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark_red .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark_red-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #1f0e0e; }
+ background-color: #180b0b; }
.gruvbox-dark_red-xterm {
color: #FFFFFF;
background-color: #5f0000;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark_red-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark_red-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark_red-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #2c0000; }
+ background-color: #220000; }
.gruvbox-dark_blue {
color: #FFFFFF;
background-color: #2B3C44;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark_blue .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark_blue .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark_blue-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #172025; }
+ background-color: #131b1f; }
.gruvbox-dark_blue-xterm {
color: #FFFFFF;
background-color: #000080;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark_blue-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark_blue-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark_blue-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #00004d; }
+ background-color: #000043; }
.gruvbox-dark_aqua {
color: #FFFFFF;
background-color: #36473A;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark_aqua .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark_aqua .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark_aqua-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #202a22; }
+ background-color: #1c241e; }
.gruvbox-dark_aqua-xterm {
color: #FFFFFF;
background-color: #005f5f;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-dark_aqua-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-dark_aqua-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-dark_aqua-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #002c2c; }
+ background-color: #002222; }
.gruvbox-delimiter-one {
color: #FFFFFF;
background-color: #458588;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-one .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-one .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-one-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #346466; }
+ background-color: #305d5f; }
.gruvbox-delimiter-one-xterm {
color: #FFFFFF;
background-color: #008787;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-one-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-one-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-one-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #005454; }
+ background-color: #004a4a; }
.gruvbox-delimiter-two {
color: #000000;
background-color: #b16286;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-two .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-two .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-two-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #c284a0; }
+ background-color: #8f4768; }
.gruvbox-delimiter-two-xterm {
color: #000000;
background-color: #d75f87;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-two-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-two-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-two-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e188a6; }
+ background-color: #c73264; }
.gruvbox-delimiter-three {
color: #000000;
background-color: #8ec07c;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-three .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-three .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-three-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #acd19e; }
+ background-color: #6aac53; }
.gruvbox-delimiter-three-xterm {
color: #000000;
background-color: #87af87;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-three-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-three-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-three-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a6c3a6; }
+ background-color: #649564; }
.gruvbox-delimiter-four {
color: #FFFFFF;
background-color: #d65d0e;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-four .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-four .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-four-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a6480b; }
+ background-color: #9d440a; }
.gruvbox-delimiter-four-xterm {
color: #FFFFFF;
background-color: #d75f00;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-delimiter-four-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-delimiter-four-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-delimiter-four-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a44800; }
+ background-color: #9a4400; }
.gruvbox-white {
color: #000000;
background-color: #FFFFFF;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-white .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-white .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-white-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: white; }
+ background-color: #e0e0e0; }
.gruvbox-white-xterm {
color: #000000;
background-color: #FFFFFF;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-white-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-white-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-white-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: white; }
+ background-color: #e0e0e0; }
.gruvbox-black {
color: #FFFFFF;
background-color: #000000;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-black .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-black .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-black-after {
- height: 10px;
+ height: 8px;
width: 128px;
background-color: black; }
.gruvbox-black-xterm {
color: #FFFFFF;
background-color: #000000;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-black-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-black-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-black-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
background-color: black; }
.gruvbox-sienna {
color: #000000;
background-color: #DD6F48;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-sienna .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-sienna .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-sienna-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #e59173; }
+ background-color: #c34e24; }
.gruvbox-sienna-xterm {
color: #FFFFFF;
background-color: #882D17;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-sienna-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-sienna-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-sienna-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #5c1f10; }
+ background-color: #541c0e; }
.gruvbox-darkslategray4 {
color: #FFFFFF;
background-color: #528B8B;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-darkslategray4 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-darkslategray4 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-darkslategray4-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #3f6b6b; }
+ background-color: #3b6565; }
.gruvbox-darkslategray4-xterm {
color: #FFFFFF;
background-color: #528b8b;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-darkslategray4-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-darkslategray4-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-darkslategray4-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #3f6b6b; }
+ background-color: #3b6565; }
.gruvbox-lightblue4 {
color: #000000;
background-color: #66999D;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-lightblue4 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-lightblue4 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-lightblue4-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #85aeb1; }
+ background-color: #4d7579; }
.gruvbox-lightblue4-xterm {
color: #FFFFFF;
background-color: #68838b;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-lightblue4-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-lightblue4-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-lightblue4-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #52686e; }
+ background-color: #4e6268; }
.gruvbox-burlywood4 {
color: #000000;
background-color: #BBAA97;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-burlywood4 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-burlywood4 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-burlywood4-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #cfc3b6; }
+ background-color: #a38c72; }
.gruvbox-burlywood4-xterm {
color: #FFFFFF;
background-color: #8B7355;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-burlywood4-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-burlywood4-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-burlywood4-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #6b5942; }
+ background-color: #65543e; }
.gruvbox-aquamarine4 {
color: #000000;
background-color: #83A598;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-aquamarine4 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-aquamarine4 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-aquamarine4-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #a1bab1; }
+ background-color: #63887a; }
.gruvbox-aquamarine4-xterm {
color: #FFFFFF;
background-color: #458b74;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-aquamarine4-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-aquamarine4-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-aquamarine4-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #346958; }
+ background-color: #316252; }
.gruvbox-turquoise4 {
color: #000000;
background-color: #61ACBB;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-turquoise4 .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-turquoise4 .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-turquoise4-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #85bfca; }
+ background-color: #438d9c; }
.gruvbox-turquoise4-xterm {
color: #FFFFFF;
background-color: #00868b;
- height: 118px; }
+ height: 120px; }
+ .gruvbox-turquoise4-xterm .content {
+ font-size: 10pt;
+ padding: 6px; }
+ .gruvbox-turquoise4-xterm .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px; }
.gruvbox-turquoise4-xterm-after {
- height: 10px;
+ height: 8px;
width: 128px;
- background-color: #005558; }
+ background-color: #004b4e; }
.separator {
clear: left;
diff --git a/palette/gruvbox-theme-colors.css.map
b/palette/gruvbox-theme-colors.css.map
index a07ed68887..55eb136790 100644
--- a/palette/gruvbox-theme-colors.css.map
+++ b/palette/gruvbox-theme-colors.css.map
@@ -1,6 +1,6 @@
{
"version": 3,
-"mappings":
"AAiIA,IAAK;EACH,WAAW,EAAE,wBAAwB;EACrC,WAAW,EAAE,OAAO;;AAGtB,EAAG;EACD,SAAS,EAAE,IAAI;;AAGjB,kBAAmB;EACjB,WAAW,EAAE,OAAO;EACpB,MAAM,EAAE,CAAC;EACT,aAAa,EAAE,GAAG;;AAGpB,eAAgB;EACd,KAAK,EAnBQ,KAAK;EAoBlB,MAAM,EAnBQ,KAAK;EAoBnB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,WAAW;EAEnB,wBAAS;IACP,OAAO,EAAE,IAAI;;AAKf,mBAAU;EACR,KAAK,EApDD,OAAO;EAqDX,gBAAgB,EA9Jc,OAAO;EA+JrC,MAAM,EAAE,KAAqB;;AAE/B,yBAAgB;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAtCM,KAAK;EAuChB,gBAAgB,EAAE,OAAwB;;AAR5C
[...]
+"mappings":
"AA4HA,IAAK;EACH,WAAW,EAAE,wBAAwB;EACrC,WAAW,EAAE,OAAO;;AAGtB,EAAG;EACD,SAAS,EAAE,IAAI;;AAGjB,kBAAmB;EACjB,WAAW,EAAE,OAAO;EACpB,MAAM,EAAE,CAAC;EACT,aAAa,EAAE,GAAG;;AAGpB,eAAgB;EACd,KAAK,EAnBQ,KAAK;EAoBlB,MAAM,EAnBQ,KAAK;EAoBnB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,WAAW;;AAInB,mBAAU;EACR,KAAK,EA3CD,OAAO;EA4CX,gBAAgB,EArJc,OAAO;EAsJrC,MAAM,EAAE,KAAoB;EAC5B,4BAAS;IACP,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,GAAG;EAEd,gCAAa;IACX,SAAS,EAAE,GAAG;IACd,OAAO,EAAE,IAAI;IACb,WAAW,EAAE
[...]
"sources": ["gruvbox-theme-colors.scss"],
"names": [],
"file": "gruvbox-theme-colors.css"
diff --git a/palette/gruvbox-theme-colors.html
b/palette/gruvbox-theme-colors.html
index 979e3d3633..c88c3b2b0a 100644
--- a/palette/gruvbox-theme-colors.html
+++ b/palette/gruvbox-theme-colors.html
@@ -2,133 +2,21 @@
<head>
<title>Emacs Gruvbox</title>
<link rel="stylesheet" href="gruvbox-theme-colors.css" type="text/css"
media="screen" />
+ <script src="https://unpkg.com/vue/dist/vue.js";></script>
+ <script type="text/javascript"
src="https://cdn.css.net/files/canvas2image/0.1/base64.js";></script>
+ <script type="text/javascript"
src="https://cdn.css.net/files/canvas2image/0.1/canvas2image.js";></script>
+ <script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js";></script>
+ <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
- <h1>GRUVBOX for Emacs</h1>
- <h2>DARK TONES</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-dark0_hard"><div
class="content">dark0_hard</div></div><div
class="gruvbox-dark0_hard-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark0"><div
class="content">dark0</div></div><div class="gruvbox-dark0-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark0_soft"><div
class="content">dark0_soft</div></div><div
class="gruvbox-dark0_soft-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark1"><div
class="content">dark1</div></div><div class="gruvbox-dark1-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark2"><div
class="content">dark2</div></div><div class="gruvbox-dark2-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark3"><div
class="content">dark3</div></div><div class="gruvbox-dark3-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark4"><div
class="content">dark4</div></div><div class="gruvbox-dark4-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark0_hard-xterm"><div
class="content">dark0_hard xterm</div></div><div
class="gruvbox-dark0_hard-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark0-xterm"><div
class="content">dark0 xterm</div></div><div
class="gruvbox-dark0-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark0_soft-xterm"><div
class="content">dark0_soft xterm</div></div><div
class="gruvbox-dark0_soft-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark1-xterm"><div
class="content">dark1 xterm</div></div><div
class="gruvbox-dark1-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark2-xterm"><div
class="content">dark2 xterm</div></div><div
class="gruvbox-dark2-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark3-xterm"><div
class="content">dark3 xterm</div></div><div
class="gruvbox-dark3-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark4-xterm"><div
class="content">dark4 xterm</div></div><div
class="gruvbox-dark4-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>MID TONES</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-gray"><div
class="content">gray</div></div><div class="gruvbox-gray-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div class="gruvbox-gray-xterm"><div
class="content">gray xterm</div></div><div
class="gruvbox-gray-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>LIGHT TONES</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-light0_hard"><div
class="content">light0_hard</div></div><div
class="gruvbox-light0_hard-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light0"><div
class="content">light0</div></div><div class="gruvbox-light0-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light0_soft"><div
class="content">light0_soft</div></div><div
class="gruvbox-light0_soft-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light1"><div
class="content">light1</div></div><div class="gruvbox-light1-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light2"><div
class="content">light2</div></div><div class="gruvbox-light2-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light3"><div
class="content">light3</div></div><div class="gruvbox-light3-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light4"><div
class="content">light4</div></div><div class="gruvbox-light4-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-light0_hard-xterm"><div class="content">light0_hard
xterm</div></div><div class="gruvbox-light0_hard-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light0-xterm"><div
class="content">light0 xterm</div></div><div
class="gruvbox-light0-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-light0_soft-xterm"><div class="content">light0_soft
xterm</div></div><div class="gruvbox-light0_soft-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light1-xterm"><div
class="content">light1 xterm</div></div><div
class="gruvbox-light1-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light2-xterm"><div
class="content">light2 xterm</div></div><div
class="gruvbox-light2-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light3-xterm"><div
class="content">light3 xterm</div></div><div
class="gruvbox-light3-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-light4-xterm"><div
class="content">light4 xterm</div></div><div
class="gruvbox-light4-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>BRIGHT COLORS</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_red"><div
class="content">bright_red</div></div><div
class="gruvbox-bright_red-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_green"><div
class="content">bright_green</div></div><div
class="gruvbox-bright_green-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_yellow"><div
class="content">bright_yellow</div></div><div
class="gruvbox-bright_yellow-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_blue"><div
class="content">bright_blue</div></div><div
class="gruvbox-bright_blue-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_purple"><div
class="content">bright_purple</div></div><div
class="gruvbox-bright_purple-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_aqua"><div
class="content">bright_aqua</div></div><div
class="gruvbox-bright_aqua-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_orange"><div
class="content">bright_orange</div></div><div
class="gruvbox-bright_orange-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div class="gruvbox-bright_red-xterm"><div
class="content">bright_red xterm</div></div><div
class="gruvbox-bright_red-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-bright_green-xterm"><div class="content">bright_green
xterm</div></div><div class="gruvbox-bright_green-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-bright_yellow-xterm"><div class="content">bright_yellow
xterm</div></div><div class="gruvbox-bright_yellow-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-bright_blue-xterm"><div class="content">bright_blue
xterm</div></div><div class="gruvbox-bright_blue-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-bright_purple-xterm"><div class="content">bright_purple
xterm</div></div><div class="gruvbox-bright_purple-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-bright_aqua-xterm"><div class="content">bright_aqua
xterm</div></div><div class="gruvbox-bright_aqua-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-bright_orange-xterm"><div class="content">bright_orange
xterm</div></div><div class="gruvbox-bright_orange-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>NEUTRAL COLORS</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-neutral_red"><div
class="content">neutral_red</div></div><div
class="gruvbox-neutral_red-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-neutral_green"><div
class="content">neutral_green</div></div><div
class="gruvbox-neutral_green-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-neutral_yellow"><div
class="content">neutral_yellow</div></div><div
class="gruvbox-neutral_yellow-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-neutral_blue"><div
class="content">neutral_blue</div></div><div
class="gruvbox-neutral_blue-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-neutral_purple"><div
class="content">neutral_purple</div></div><div
class="gruvbox-neutral_purple-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-neutral_aqua"><div
class="content">neutral_aqua</div></div><div
class="gruvbox-neutral_aqua-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-neutral_orange"><div
class="content">neutral_orange</div></div><div
class="gruvbox-neutral_orange-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-neutral_red-xterm"><div class="content">neutral_red
xterm</div></div><div class="gruvbox-neutral_red-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-neutral_green-xterm"><div class="content">neutral_green
xterm</div></div><div class="gruvbox-neutral_green-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-neutral_yellow-xterm"><div class="content">neutral_yellow
xterm</div></div><div class="gruvbox-neutral_yellow-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-neutral_blue-xterm"><div class="content">neutral_blue
xterm</div></div><div class="gruvbox-neutral_blue-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-neutral_purple-xterm"><div class="content">neutral_purple
xterm</div></div><div class="gruvbox-neutral_purple-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-neutral_aqua-xterm"><div class="content">neutral_aqua
xterm</div></div><div class="gruvbox-neutral_aqua-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-neutral_orange-xterm"><div class="content">neutral_orange
xterm</div></div><div class="gruvbox-neutral_orange-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>FADED COLORS</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_red"><div
class="content">faded_red</div></div><div
class="gruvbox-faded_red-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_green"> <div
class="content">faded_green</div> </div> <div
class="gruvbox-faded_green-after"></div> </div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_yellow"><div
class="content">faded_yellow</div></div><div
class="gruvbox-faded_yellow-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_blue"><div
class="content">faded_blue</div></div><div
class="gruvbox-faded_blue-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_purple"><div
class="content">faded_purple</div></div><div
class="gruvbox-faded_purple-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_aqua"><div
class="content">faded_aqua</div></div><div
class="gruvbox-faded_aqua-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_orange"><div
class="content">faded_orange</div></div><div
class="gruvbox-faded_orange-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_red-xterm"><div
class="content">faded_red xterm</div></div><div
class="gruvbox-faded_red-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-faded_green-xterm"><div class="content">faded_green
xterm</div></div><div class="gruvbox-faded_green-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-faded_yellow-xterm"><div class="content">faded_yellow
xterm</div></div><div class="gruvbox-faded_yellow-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_blue-xterm"><div
class="content">faded_blue xterm</div></div><div
class="gruvbox-faded_blue-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-faded_purple-xterm"><div class="content">faded_purple
xterm</div></div><div class="gruvbox-faded_purple-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-faded_aqua-xterm"><div
class="content">faded_aqua xterm</div></div><div
class="gruvbox-faded_aqua-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-faded_orange-xterm"><div class="content">faded_orange
xterm</div></div><div class="gruvbox-faded_orange-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>DARK NOTES</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-dark_red"><div
class="content">dark_red</div></div><div
class="gruvbox-dark_red-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark_blue"><div
class="content">dark_blue</div></div><div
class="gruvbox-dark_blue-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark_aqua"><div
class="content">dark_aqua</div></div><div
class="gruvbox-dark_aqua-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark_red-xterm"><div
class="content">dark_red xterm</div></div><div
class="gruvbox-dark_red-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark_blue-xterm"><div
class="content">dark_blue xterm</div></div><div
class="gruvbox-dark_blue-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-dark_aqua-xterm"><div
class="content">dark_aqua xterm</div></div><div
class="gruvbox-dark_aqua-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>SOLO NOTES</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-sienna"><div
class="content">sienna</div></div><div class="gruvbox-sienna-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-darkslategray4"><div
class="content">darkslategray4</div></div><div
class="gruvbox-darkslategray4-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-lightblue4"><div
class="content">lightblue4</div></div><div
class="gruvbox-lightblue4-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-burlywood4"><div
class="content">burlywood4</div></div><div
class="gruvbox-burlywood4-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-aquamarine4"><div
class="content">aquamarine4</div></div><div
class="gruvbox-aquamarine4-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-turquoise4"><div
class="content">turquoise4</div></div><div
class="gruvbox-turquoise4-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div class="gruvbox-sienna-xterm"><div
class="content">sienna xterm</div></div><div
class="gruvbox-sienna-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-darkslategray4-xterm"><div class="content">darkslategray4
xterm</div></div><div class="gruvbox-darkslategray4-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-lightblue4-xterm"><div
class="content">lightblue4 xterm</div></div><div
class="gruvbox-lightblue4-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-burlywood4-xterm"><div
class="content">burlywood4 xterm</div></div><div
class="gruvbox-burlywood4-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-aquamarine4-xterm"><div class="content">aquamarine4
xterm</div></div><div class="gruvbox-aquamarine4-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-turquoise4-xterm"><div
class="content">turquoise4 xterm</div></div><div
class="gruvbox-turquoise4-xterm-after"></div></div>
- <div class="group-separator"></div>
- <h2>RAINBOW DELIMITER COLORS</h2>
- <div class="gruvbox-swatch"><div class="gruvbox-delimiter-one"><div
class="content">delimiter-one</div></div><div
class="gruvbox-delimiter-one-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-delimiter-two"><div
class="content">delimiter-two</div></div><div
class="gruvbox-delimiter-two-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-delimiter-three"><div
class="content">delimiter-three</div></div><div
class="gruvbox-delimiter-three-after"></div></div>
- <div class="gruvbox-swatch"><div class="gruvbox-delimiter-four"><div
class="content">delimiter-four</div></div><div
class="gruvbox-delimiter-four-after"></div></div>
- <div class="separator"></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-delimiter-one-xterm"><div class="content">delimiter-one
xterm</div></div><div class="gruvbox-delimiter-one-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-delimiter-two-xterm"><div class="content">delimiter-two
xterm</div></div><div class="gruvbox-delimiter-two-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-delimiter-three-xterm"><div class="content">delimiter-three
xterm</div></div><div class="gruvbox-delimiter-three-xterm-after"></div></div>
- <div class="gruvbox-swatch"><div
class="gruvbox-delimiter-four-xterm"><div class="content">delimiter-four
xterm</div></div><div class="gruvbox-delimiter-four-xterm-after"></div></div>
- <div class="group-separator"></div>
+ <div id="app">
+ <h1>{{title}}</h1>
+ <div v-for="paletteGroup in paletteGroups">
+ <palette-group v-bind:title="paletteGroup.title"
+ v-bind:prefix="paletteGroup.prefix"
+ v-bind:colors="paletteGroup.colors" >
+ </palette-group>
+ </div>
+ </div>
</body>
</html>
diff --git a/palette/gruvbox-theme-colors.scss
b/palette/gruvbox-theme-colors.scss
index b8879b4caa..c1b064adb1 100644
--- a/palette/gruvbox-theme-colors.scss
+++ b/palette/gruvbox-theme-colors.scss
@@ -116,12 +116,7 @@ $light: #FFFFFF;
}
@function bottom-bar-color($color) {
- $color-brightness: lightness($color);
- $dark-text-brightness: lightness($dark);
- $light-text-brightness: lightness($light);
- @return if(abs($color-brightness - $light-text-brightness) >
abs($color-brightness - $dark-text-brightness),
- darken($color, 10%),
- lighten($color, 10%));
+ @return darken($color, 12%);
}
$swatch-width: 128px;
@@ -148,20 +143,25 @@ h1, h2, h3, h4, h5 {
font-size: 10pt;
float: left;
margin: 1px 1px 0 0;
-
- .content {
- padding: 10px;
- }
}
@each $name, $color in $gruvbox-palette {
.#{$name} {
color: contrast-foreground($color);
background-color: $color;
- height: $swatch-height - 10px;
+ height: $swatch-height - 8px;
+ .content {
+ font-size: 10pt;
+ padding: 6px;
+ }
+ .color-label {
+ font-size: 8pt;
+ padding: 10px;
+ padding-top: 60px;
+ }
}
.#{$name}-after {
- height: 10px;
+ height: 8px;
width: $swatch-width;
background-color: bottom-bar-color($color);
}
diff --git a/palette/js/main.js b/palette/js/main.js
new file mode 100644
index 0000000000..93da7cb67b
--- /dev/null
+++ b/palette/js/main.js
@@ -0,0 +1,263 @@
+var palette = {
+ 'dark0_hard': "#1d2021",
+ 'dark0_hard-xterm': "#1c1c1c",
+ 'dark0': "#282828",
+ 'dark0-xterm': "#262626",
+ 'dark0_soft': "#32302f",
+ 'dark0_soft-xterm': "#303030",
+ 'dark1': "#3c3836",
+ 'dark1-xterm': "#3a3a3a",
+ 'dark2': "#504945",
+ 'dark2-xterm': "#4e4e4e",
+ 'dark3': "#665c54",
+ 'dark3-xterm': "#626262",
+ 'dark4': "#7c6f64",
+ 'dark4-xterm': "#767676",
+ 'gray': "#928374",
+ 'gray-xterm': "#8a8a8a",
+ 'light0_hard': "#ffffc8",
+ 'light0_hard-xterm': "#ffffdf",
+ 'light0': "#fdf4c1",
+ 'light0-xterm': "#ffffaf",
+ 'light0_soft': "#f4e8ba",
+ 'light0_soft-xterm': "#ffff87",
+ 'light1': "#ebdbb2",
+ 'light1-xterm': "#ffdfaf",
+ 'light2': "#d5c4a1",
+ 'light2-xterm': "#bcbcbc",
+ 'light3': "#bdae93",
+ 'light3-xterm': "#a8a8a8",
+ 'light4': "#a89984",
+ 'light4-xterm': "#949494",
+ 'bright_red': "#fb4933",
+ 'bright_red-xterm': "#d75f5f",
+ 'bright_green': "#b8bb26",
+ 'bright_green-xterm': "#afaf00",
+ 'bright_yellow': "#fabd2f",
+ 'bright_yellow-xterm': "#ffaf00",
+ 'bright_blue': "#83a598",
+ 'bright_blue-xterm': "#87afaf",
+ 'bright_purple': "#d3869b",
+ 'bright_purple-xterm': "#d787af",
+ 'bright_aqua': "#8ec07c",
+ 'bright_aqua-xterm': "#87af87",
+ 'bright_orange': "#fe8019",
+ 'bright_orange-xterm': "#ff8700",
+ 'neutral_red': "#fb4934",
+ 'neutral_red-xterm': "#d75f5f",
+ 'neutral_green': "#b8bb26",
+ 'neutral_green-xterm': "#afaf00",
+ 'neutral_yellow': "#fabd2f",
+ 'neutral_yellow-xterm': "#ffaf00",
+ 'neutral_blue': "#83a598",
+ 'neutral_blue-xterm': "#87afaf",
+ 'neutral_purple': "#d3869b",
+ 'neutral_purple-xterm': "#d787af",
+ 'neutral_aqua': "#8ec07c",
+ 'neutral_aqua-xterm': "#87af87",
+ 'neutral_orange': "#fe8019",
+ 'neutral_orange-xterm': "#ff8700",
+ 'faded_red': "#9d0006",
+ 'faded_red-xterm': "#870000",
+ 'faded_green': "#79740e",
+ 'faded_green-xterm': "#878700",
+ 'faded_yellow': "#b57614",
+ 'faded_yellow-xterm': "#af8700",
+ 'faded_blue': "#076678",
+ 'faded_blue-xterm': "#005f87",
+ 'faded_purple': "#8f3f71",
+ 'faded_purple-xterm': "#875f87",
+ 'faded_aqua': "#427b58",
+ 'faded_aqua-xterm': "#5f8787",
+ 'faded_orange': "#af3a03",
+ 'faded_orange-xterm': "#af5f00",
+ 'dark_red': "#421E1E",
+ 'dark_red-xterm': "#5f0000",
+ 'dark_blue': "#2B3C44",
+ 'dark_blue-xterm': "#000080",
+ 'dark_aqua': "#36473A",
+ 'dark_aqua-xterm': "#005f5f",
+ 'delimiter-one': "#458588",
+ 'delimiter-one-xterm': "#008787",
+ 'delimiter-two': "#b16286",
+ 'delimiter-two-xterm': "#d75f87",
+ 'delimiter-three': "#8ec07c",
+ 'delimiter-three-xterm': "#87af87",
+ 'delimiter-four': "#d65d0e",
+ 'delimiter-four-xterm': "#d75f00",
+ 'white': "#FFFFFF",
+ 'white-xterm': "#FFFFFF",
+ 'black': "#000000",
+ 'black-xterm': "#000000",
+ 'sienna': "#DD6F48",
+ 'sienna-xterm': "#882D17",
+ 'darkslategray4': "#528B8B",
+ 'darkslategray4-xterm': "#528b8b",
+ 'lightblue4': "#66999D",
+ 'lightblue4-xterm': "#68838b",
+ 'burlywood4': "#BBAA97",
+ 'burlywood4-xterm': "#8B7355",
+ 'aquamarine4': "#83A598",
+ 'aquamarine4-xterm': "#458b74",
+ 'turquoise4': "#61ACBB",
+ 'turquoise4-xterm': "#00868b"
+};
+
+window.onload=function(){
+ var app = new Vue({
+ el: '#app',
+ data: {
+ title: 'GRUVBOX for Emacs',
+ paletteGroups: [
+ {
+ title: "DARK TONES",
+ prefix: "",
+ colors: [
+ "dark0_hard",
+ "dark0",
+ "dark0_soft",
+ "dark1",
+ "dark2",
+ "dark3",
+ "dark4"
+ ]
+ },
+ {
+ title: "MID TONES",
+ prefix: "",
+ colors: [
+ "gray"
+ ]
+ },
+ {
+ title: "LIGHT TONES",
+ prefix: "",
+ colors: [
+ "light0_hard",
+ "light0",
+ "light0_soft",
+ "light1",
+ "light2",
+ "light3",
+ "light4",
+ ]
+ },
+ {
+ title: "BRIGHT COLORS",
+ prefix: "bright_",
+ colors: [
+ "bright_red",
+ "bright_green",
+ "bright_yellow",
+ "bright_blue",
+ "bright_purple",
+ "bright_aqua",
+ "bright_orange"
+ ]
+ },
+ {
+ title: "NEUTRAL COLORS",
+ prefix: "neutral_",
+ colors: [
+ "neutral_red",
+ "neutral_green",
+ "neutral_yellow",
+ "neutral_blue",
+ "neutral_purple",
+ "neutral_aqua",
+ "neutral_orange"
+ ]
+ },
+ {
+ title: "FADED COLORS",
+ prefix: "faded_",
+ colors: [
+ "faded_red",
+ "faded_green",
+ "faded_yellow",
+ "faded_blue",
+ "faded_purple",
+ "faded_aqua",
+ "faded_orange"
+ ]
+ },
+ {
+ title: "DARK NOTES",
+ prefix: "dark_",
+ colors: [
+ "dark_red",
+ "dark_blue",
+ "dark_aqua",
+ ]
+ },
+ {
+ title:"SOLONOTES",
+ prefix: "",
+ colors:[
+ "sienna",
+ "darkslategray4",
+ "lightblue4",
+ "burlywood4",
+ "aquamarine4",
+ "turquoise4"
+ ]
+ },
+ {
+ title: "RAINBOW DELIMITER COLORS",
+ prefix: "delimiter-",
+ colors: [
+ "delimiter-one",
+ "delimiter-two",
+ "delimiter-three",
+ "delimiter-four"
+ ]
+ }
+ ]
+ }
+ });
+};
+
+Vue.component('palette-group', {
+ props: ['title', 'colors', 'prefix'],
+ template: `<div class="palette-group">
+ <h2>{{title}}</h2>
+ <swatch v-for="swatch in colors"
+ v-bind:prefix="prefix"
+ v-bind:content="swatch">
+ </swatch>
+ <div class="separator"></div>
+ <swatch v-for="swatch in colors"
+ is-xterm="true"
+ v-bind:prefix="prefix"
+ v-bind:content="swatch">
+ </swatch>
+ <div class="group-separator"></div>
+ </div>
+`
+});
+
+Vue.component('swatch', {
+ props: ['content', 'isXterm', 'prefix'],
+ template: `<div class="gruvbox-swatch">
+ <div v-bind:class="cssClass">
+ <div class="content">{{unprefixed}}</div>
+ <div class="color-label">{{color}}</div>
+ </div>
+ <div v-bind:class="cssClassAfter"></div>
+ </div>
+`,
+ computed: {
+ cssClass: function(){
+ return `gruvbox-${this.content}${this.isXterm == "true" ? "-xterm" :
""}`;
+ },
+ cssClassAfter: function(){
+ return `gruvbox-${this.content}${this.isXterm == "true" ? "-xterm" :
""}-after`;
+ },
+ color: function(){
+ return palette[`${this.content}${this.isXterm == "true" ? "-xterm" :
""}`];
+ },
+ unprefixed: function(){
+ return this.content.replace(this.prefix, "");
+ }
+ }
+});
