emacs-elpa-diffs
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[nongnu] elpa/gruvbox-theme a3417ba515 109/258: Redo the theme colors HT

From: ELPA Syncer
Subject: [nongnu] elpa/gruvbox-theme a3417ba515 109/258: Redo the theme colors HTML as a Vue.js project (for fun)
Date: Sat, 1 Jan 2022 01:59:34 -0500 (EST) 
branch: elpa/gruvbox-theme
commit a3417ba515efce9602d4b3ca61383aa9f9163017
Author: Jasonm23 <jasonm23@gmail.com>
Commit: Jasonm23 <jasonm23@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, "");
+    }
+  }
+});
reply via email to
[Prev in Thread] Current Thread [Next in Thread]