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

[nongnu] elpa/gruvbox-theme 6c9d0091f0 107/258: Update README and suppor

From: ELPA Syncer
Subject: [nongnu] elpa/gruvbox-theme 6c9d0091f0 107/258: Update README and supporting files
Date: Sat, 1 Jan 2022 01:59:33 -0500 (EST) 
branch: elpa/gruvbox-theme
commit 6c9d0091f056c98d9ad24dda4315f382aa55471f
Author: Jasonm23 <jasonm23@gmail.com>
Commit: Jasonm23 <jasonm23@gmail.com>

    Update README and supporting files
    
    - Add a new screenshot
    - Add a palette image (plus HTML/SASS to generate)
---
 .gitignore                           |    1 +
 README.md                            |   65 ++-
 gruvbox-emacs-palette.png            |  Bin 0 -> 653148 bytes
 palette/gruvbox-theme-colors.css     | 1056 ++++++++++++++++++++++++++++++++++
 palette/gruvbox-theme-colors.css.map |    7 +
 palette/gruvbox-theme-colors.html    |  134 +++++
 palette/gruvbox-theme-colors.scss    |  184 ++++++
 screenshot.jpg                       |  Bin 105532 -> 0 bytes
 screenshot.png                       |  Bin 0 -> 476506 bytes
 9 files changed, 1422 insertions(+), 25 deletions(-)

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..5df1b9b43c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.sass-cache
diff --git a/README.md b/README.md
index d0fa6d687b..b02fdf3f0b 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,50 @@
-# Gruvbox theme for Emacs
+![Gruvbox Palette](gruvbox-emacs-palette.png "Gruvbox theme palette")
 
-Gruvbox is a retro groove color scheme for Emacs. This is a port of the Vim
+Gruvbox is a retro groove color scheme for Emacs. It is a port of the Vim
 version originally by [Pavel Pertsev](https://github.com/morhetz) found
-[here](https://github.com/morhetz/gruvbox).  Look at the original colorscheme's
-repo for a lot of pictures.  Here's a sort of outdated screenshot:
+[here](https://github.com/morhetz/gruvbox).
 
-![Gruvbox theme screenshot](/screenshot.jpg "Gruvbox theme screenshot")
+Pavel's version has evolved since this version was made, and now
+includes a light version, and other changes.  Syntax highlighting is
+applied differently in the Vim version too.
 
+We are in the process of adding a light version and we'll also try to add
+a version which maps syntax closer to the current Vim Gruvbox.
+
+We won't be changing the main Emacs Gruvbox theme, because there's a
+lot of people who've been using it for a few years, and we don't want
+to mess with their preferences.
+
+![Gruvbox theme screenshot](screenshot.png "Gruvbox theme screenshot")
 
 ## Supports
 
 This theme contains custom support for the following features and plugins:
 
-- `whitespace-mode`
-- [RainbowDelimiters](http://www.emacswiki.org/emacs/RainbowDelimiters)
-- [linum-relative](https://github.com/emacsmirror/linum-relative)
-- [Smartparens](https://github.com/Fuco1/smartparens)
-- [ElScreen](https://github.com/knu/elscreen)
-- [ag.el](https://github.com/Wilfred/ag.el)
-- [js2-mode](https://github.com/mooz/js2-mode)
+- Ace jump
+- Ace window
 - [Anzu](https://github.com/syohex/emacs-anzu#customization) support
+- Comint (and the like)
+- Company
 - Diffs
-- Term
+- Dired+
+- [ElScreen](https://github.com/knu/elscreen)
+- Elfeed
 - Helm
-- Comint (and the like)
+- Highlight Indent
+- Ivy
+- Markdown
+- Message
+- Org
+- Popup
+- [RainbowDelimiters](http://www.emacswiki.org/emacs/RainbowDelimiters)
+- Smart modeline
+- [Smartparens](https://github.com/Fuco1/smartparens)
+- Term
+- [Ag.el](https://github.com/Wilfred/ag.el)
+- [Js2-mode](https://github.com/mooz/js2-mode)
+- [Linum-relative](https://github.com/emacsmirror/linum-relative)
+- Whitespace-mode
 
 ## Installation and usage
 
@@ -61,19 +82,12 @@ The following instructions are for in the case where you 
don't have access to
    ```
 
 
-## Known bugs
-
-None.  For now...
-
-
-## To-do
-
-- 
[ace-jump-mode](https://github.com/winterTTr/ace-jump-mode/blob/8351e2df4fbbeb2a4003f2fb39f46d33803f3dac/ace-jump-mode.el#L287)
 support
-- Light version of theme.
+## Issues
 
-If you want for the theme to support something please open a new issue and I'll
-try my best to make it work out. :smile:
+See https://github.com/greduan/emacs-theme-gruvbox/issues
 
+If you want the theme to support something please open a new issue and we'll
+try our best to make it happen. :smile:
 
 ## License
 
@@ -82,6 +96,7 @@ The MIT License (MIT)
 
 Copyright (c) 2013 Lee Machin
               2013-2016 Greduan
+              2015-2017 Jason Milkins
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
diff --git a/gruvbox-emacs-palette.png b/gruvbox-emacs-palette.png
new file mode 100644
index 0000000000..06ebe2ec11
Binary files /dev/null and b/gruvbox-emacs-palette.png differ
diff --git a/palette/gruvbox-theme-colors.css b/palette/gruvbox-theme-colors.css
new file mode 100644
index 0000000000..e2de5ffdee
--- /dev/null
+++ b/palette/gruvbox-theme-colors.css
@@ -0,0 +1,1056 @@
+body {
+  font-family: "SauceCodePro Nerd Font";
+  font-weight: lighter; }
+
+h1 {
+  font-size: 42pt; }
+
+h1, h2, h3, h4, h5 {
+  font-weight: lighter;
+  margin: 0;
+  margin-bottom: 3px; }
+
+.gruvbox-swatch {
+  width: 128px;
+  height: 128px;
+  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; }
+
+.gruvbox-dark0_hard-after {
+  height: 10px;
+  width: 128px;
+  background-color: #050606; }
+
+.gruvbox-dark0_hard-xterm {
+  color: #FFFFFF;
+  background-color: #1c1c1c;
+  height: 118px; }
+
+.gruvbox-dark0_hard-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #030303; }
+
+.gruvbox-dark0 {
+  color: #FFFFFF;
+  background-color: #282828;
+  height: 118px; }
+
+.gruvbox-dark0-after {
+  height: 10px;
+  width: 128px;
+  background-color: #0f0f0f; }
+
+.gruvbox-dark0-xterm {
+  color: #FFFFFF;
+  background-color: #262626;
+  height: 118px; }
+
+.gruvbox-dark0-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #0d0d0d; }
+
+.gruvbox-dark0_soft {
+  color: #FFFFFF;
+  background-color: #32302f;
+  height: 118px; }
+
+.gruvbox-dark0_soft-after {
+  height: 10px;
+  width: 128px;
+  background-color: #181716; }
+
+.gruvbox-dark0_soft-xterm {
+  color: #FFFFFF;
+  background-color: #303030;
+  height: 118px; }
+
+.gruvbox-dark0_soft-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #171717; }
+
+.gruvbox-dark1 {
+  color: #FFFFFF;
+  background-color: #3c3836;
+  height: 118px; }
+
+.gruvbox-dark1-after {
+  height: 10px;
+  width: 128px;
+  background-color: #211f1e; }
+
+.gruvbox-dark1-xterm {
+  color: #FFFFFF;
+  background-color: #3a3a3a;
+  height: 118px; }
+
+.gruvbox-dark1-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #212121; }
+
+.gruvbox-dark2 {
+  color: #FFFFFF;
+  background-color: #504945;
+  height: 118px; }
+
+.gruvbox-dark2-after {
+  height: 10px;
+  width: 128px;
+  background-color: #35302d; }
+
+.gruvbox-dark2-xterm {
+  color: #FFFFFF;
+  background-color: #4e4e4e;
+  height: 118px; }
+
+.gruvbox-dark2-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #353535; }
+
+.gruvbox-dark3 {
+  color: #FFFFFF;
+  background-color: #665c54;
+  height: 118px; }
+
+.gruvbox-dark3-after {
+  height: 10px;
+  width: 128px;
+  background-color: #4a433d; }
+
+.gruvbox-dark3-xterm {
+  color: #FFFFFF;
+  background-color: #626262;
+  height: 118px; }
+
+.gruvbox-dark3-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #494949; }
+
+.gruvbox-dark4 {
+  color: #FFFFFF;
+  background-color: #7c6f64;
+  height: 118px; }
+
+.gruvbox-dark4-after {
+  height: 10px;
+  width: 128px;
+  background-color: #60564d; }
+
+.gruvbox-dark4-xterm {
+  color: #FFFFFF;
+  background-color: #767676;
+  height: 118px; }
+
+.gruvbox-dark4-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #5d5d5d; }
+
+.gruvbox-gray {
+  color: #000000;
+  background-color: #928374;
+  height: 118px; }
+
+.gruvbox-gray-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a89d91; }
+
+.gruvbox-gray-xterm {
+  color: #000000;
+  background-color: #8a8a8a;
+  height: 118px; }
+
+.gruvbox-gray-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a4a4a4; }
+
+.gruvbox-light0_hard {
+  color: #000000;
+  background-color: #ffffc8;
+  height: 118px; }
+
+.gruvbox-light0_hard-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fffffb; }
+
+.gruvbox-light0_hard-xterm {
+  color: #000000;
+  background-color: #ffffdf;
+  height: 118px; }
+
+.gruvbox-light0_hard-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: white; }
+
+.gruvbox-light0 {
+  color: #000000;
+  background-color: #fdf4c1;
+  height: 118px; }
+
+.gruvbox-light0-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fffdf2; }
+
+.gruvbox-light0-xterm {
+  color: #000000;
+  background-color: #ffffaf;
+  height: 118px; }
+
+.gruvbox-light0-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #ffffe2; }
+
+.gruvbox-light0_soft {
+  color: #000000;
+  background-color: #f4e8ba;
+  height: 118px; }
+
+.gruvbox-light0_soft-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fbf7e6; }
+
+.gruvbox-light0_soft-xterm {
+  color: #000000;
+  background-color: #ffff87;
+  height: 118px; }
+
+.gruvbox-light0_soft-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #ffffba; }
+
+.gruvbox-light1 {
+  color: #000000;
+  background-color: #ebdbb2;
+  height: 118px; }
+
+.gruvbox-light1-after {
+  height: 10px;
+  width: 128px;
+  background-color: #f6eeda; }
+
+.gruvbox-light1-xterm {
+  color: #000000;
+  background-color: #ffdfaf;
+  height: 118px; }
+
+.gruvbox-light1-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fff3e2; }
+
+.gruvbox-light2 {
+  color: #000000;
+  background-color: #d5c4a1;
+  height: 118px; }
+
+.gruvbox-light2-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e5dac4; }
+
+.gruvbox-light2-xterm {
+  color: #000000;
+  background-color: #bcbcbc;
+  height: 118px; }
+
+.gruvbox-light2-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #d6d6d6; }
+
+.gruvbox-light3 {
+  color: #000000;
+  background-color: #bdae93;
+  height: 118px; }
+
+.gruvbox-light3-after {
+  height: 10px;
+  width: 128px;
+  background-color: #d0c6b3; }
+
+.gruvbox-light3-xterm {
+  color: #000000;
+  background-color: #a8a8a8;
+  height: 118px; }
+
+.gruvbox-light3-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #c2c2c2; }
+
+.gruvbox-light4 {
+  color: #000000;
+  background-color: #a89984;
+  height: 118px; }
+
+.gruvbox-light4-after {
+  height: 10px;
+  width: 128px;
+  background-color: #bdb2a2; }
+
+.gruvbox-light4-xterm {
+  color: #000000;
+  background-color: #949494;
+  height: 118px; }
+
+.gruvbox-light4-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #aeaeae; }
+
+.gruvbox-bright_red {
+  color: #000000;
+  background-color: #fb4933;
+  height: 118px; }
+
+.gruvbox-bright_red-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fc7665; }
+
+.gruvbox-bright_red-xterm {
+  color: #000000;
+  background-color: #d75f5f;
+  height: 118px; }
+
+.gruvbox-bright_red-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e18888; }
+
+.gruvbox-bright_green {
+  color: #FFFFFF;
+  background-color: #b8bb26;
+  height: 118px; }
+
+.gruvbox-bright_green-after {
+  height: 10px;
+  width: 128px;
+  background-color: #8e911d; }
+
+.gruvbox-bright_green-xterm {
+  color: #FFFFFF;
+  background-color: #afaf00;
+  height: 118px; }
+
+.gruvbox-bright_green-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #7c7c00; }
+
+.gruvbox-bright_yellow {
+  color: #000000;
+  background-color: #fabd2f;
+  height: 118px; }
+
+.gruvbox-bright_yellow-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fbcd61; }
+
+.gruvbox-bright_yellow-xterm {
+  color: #000000;
+  background-color: #ffaf00;
+  height: 118px; }
+
+.gruvbox-bright_yellow-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #ffbf33; }
+
+.gruvbox-bright_blue {
+  color: #000000;
+  background-color: #83a598;
+  height: 118px; }
+
+.gruvbox-bright_blue-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a1bab1; }
+
+.gruvbox-bright_blue-xterm {
+  color: #000000;
+  background-color: #87afaf;
+  height: 118px; }
+
+.gruvbox-bright_blue-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a6c3c3; }
+
+.gruvbox-bright_purple {
+  color: #000000;
+  background-color: #d3869b;
+  height: 118px; }
+
+.gruvbox-bright_purple-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e1abba; }
+
+.gruvbox-bright_purple-xterm {
+  color: #000000;
+  background-color: #d787af;
+  height: 118px; }
+
+.gruvbox-bright_purple-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e4adc9; }
+
+.gruvbox-bright_aqua {
+  color: #000000;
+  background-color: #8ec07c;
+  height: 118px; }
+
+.gruvbox-bright_aqua-after {
+  height: 10px;
+  width: 128px;
+  background-color: #acd19e; }
+
+.gruvbox-bright_aqua-xterm {
+  color: #000000;
+  background-color: #87af87;
+  height: 118px; }
+
+.gruvbox-bright_aqua-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a6c3a6; }
+
+.gruvbox-bright_orange {
+  color: #000000;
+  background-color: #fe8019;
+  height: 118px; }
+
+.gruvbox-bright_orange-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fe9c4c; }
+
+.gruvbox-bright_orange-xterm {
+  color: #000000;
+  background-color: #ff8700;
+  height: 118px; }
+
+.gruvbox-bright_orange-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #ff9f33; }
+
+.gruvbox-neutral_red {
+  color: #000000;
+  background-color: #fb4934;
+  height: 118px; }
+
+.gruvbox-neutral_red-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fc7666; }
+
+.gruvbox-neutral_red-xterm {
+  color: #000000;
+  background-color: #d75f5f;
+  height: 118px; }
+
+.gruvbox-neutral_red-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e18888; }
+
+.gruvbox-neutral_green {
+  color: #FFFFFF;
+  background-color: #b8bb26;
+  height: 118px; }
+
+.gruvbox-neutral_green-after {
+  height: 10px;
+  width: 128px;
+  background-color: #8e911d; }
+
+.gruvbox-neutral_green-xterm {
+  color: #FFFFFF;
+  background-color: #afaf00;
+  height: 118px; }
+
+.gruvbox-neutral_green-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #7c7c00; }
+
+.gruvbox-neutral_yellow {
+  color: #000000;
+  background-color: #fabd2f;
+  height: 118px; }
+
+.gruvbox-neutral_yellow-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fbcd61; }
+
+.gruvbox-neutral_yellow-xterm {
+  color: #000000;
+  background-color: #ffaf00;
+  height: 118px; }
+
+.gruvbox-neutral_yellow-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #ffbf33; }
+
+.gruvbox-neutral_blue {
+  color: #000000;
+  background-color: #83a598;
+  height: 118px; }
+
+.gruvbox-neutral_blue-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a1bab1; }
+
+.gruvbox-neutral_blue-xterm {
+  color: #000000;
+  background-color: #87afaf;
+  height: 118px; }
+
+.gruvbox-neutral_blue-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a6c3c3; }
+
+.gruvbox-neutral_purple {
+  color: #000000;
+  background-color: #d3869b;
+  height: 118px; }
+
+.gruvbox-neutral_purple-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e1abba; }
+
+.gruvbox-neutral_purple-xterm {
+  color: #000000;
+  background-color: #d787af;
+  height: 118px; }
+
+.gruvbox-neutral_purple-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e4adc9; }
+
+.gruvbox-neutral_aqua {
+  color: #000000;
+  background-color: #8ec07c;
+  height: 118px; }
+
+.gruvbox-neutral_aqua-after {
+  height: 10px;
+  width: 128px;
+  background-color: #acd19e; }
+
+.gruvbox-neutral_aqua-xterm {
+  color: #000000;
+  background-color: #87af87;
+  height: 118px; }
+
+.gruvbox-neutral_aqua-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a6c3a6; }
+
+.gruvbox-neutral_orange {
+  color: #000000;
+  background-color: #fe8019;
+  height: 118px; }
+
+.gruvbox-neutral_orange-after {
+  height: 10px;
+  width: 128px;
+  background-color: #fe9c4c; }
+
+.gruvbox-neutral_orange-xterm {
+  color: #000000;
+  background-color: #ff8700;
+  height: 118px; }
+
+.gruvbox-neutral_orange-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #ff9f33; }
+
+.gruvbox-faded_red {
+  color: #FFFFFF;
+  background-color: #9d0006;
+  height: 118px; }
+
+.gruvbox-faded_red-after {
+  height: 10px;
+  width: 128px;
+  background-color: #6a0004; }
+
+.gruvbox-faded_red-xterm {
+  color: #FFFFFF;
+  background-color: #870000;
+  height: 118px; }
+
+.gruvbox-faded_red-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #540000; }
+
+.gruvbox-faded_green {
+  color: #FFFFFF;
+  background-color: #79740e;
+  height: 118px; }
+
+.gruvbox-faded_green-after {
+  height: 10px;
+  width: 128px;
+  background-color: #4b4809; }
+
+.gruvbox-faded_green-xterm {
+  color: #FFFFFF;
+  background-color: #878700;
+  height: 118px; }
+
+.gruvbox-faded_green-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #545400; }
+
+.gruvbox-faded_yellow {
+  color: #FFFFFF;
+  background-color: #b57614;
+  height: 118px; }
+
+.gruvbox-faded_yellow-after {
+  height: 10px;
+  width: 128px;
+  background-color: #87580f; }
+
+.gruvbox-faded_yellow-xterm {
+  color: #FFFFFF;
+  background-color: #af8700;
+  height: 118px; }
+
+.gruvbox-faded_yellow-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #7c6000; }
+
+.gruvbox-faded_blue {
+  color: #FFFFFF;
+  background-color: #076678;
+  height: 118px; }
+
+.gruvbox-faded_blue-after {
+  height: 10px;
+  width: 128px;
+  background-color: #043d48; }
+
+.gruvbox-faded_blue-xterm {
+  color: #FFFFFF;
+  background-color: #005f87;
+  height: 118px; }
+
+.gruvbox-faded_blue-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #003b54; }
+
+.gruvbox-faded_purple {
+  color: #FFFFFF;
+  background-color: #8f3f71;
+  height: 118px; }
+
+.gruvbox-faded_purple-after {
+  height: 10px;
+  width: 128px;
+  background-color: #6c2f55; }
+
+.gruvbox-faded_purple-xterm {
+  color: #FFFFFF;
+  background-color: #875f87;
+  height: 118px; }
+
+.gruvbox-faded_purple-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #694a69; }
+
+.gruvbox-faded_aqua {
+  color: #FFFFFF;
+  background-color: #427b58;
+  height: 118px; }
+
+.gruvbox-faded_aqua-after {
+  height: 10px;
+  width: 128px;
+  background-color: #305a40; }
+
+.gruvbox-faded_aqua-xterm {
+  color: #FFFFFF;
+  background-color: #5f8787;
+  height: 118px; }
+
+.gruvbox-faded_aqua-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #4a6969; }
+
+.gruvbox-faded_orange {
+  color: #FFFFFF;
+  background-color: #af3a03;
+  height: 118px; }
+
+.gruvbox-faded_orange-after {
+  height: 10px;
+  width: 128px;
+  background-color: #7d2902; }
+
+.gruvbox-faded_orange-xterm {
+  color: #FFFFFF;
+  background-color: #af5f00;
+  height: 118px; }
+
+.gruvbox-faded_orange-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #7c4300; }
+
+.gruvbox-dark_red {
+  color: #FFFFFF;
+  background-color: #421E1E;
+  height: 118px; }
+
+.gruvbox-dark_red-after {
+  height: 10px;
+  width: 128px;
+  background-color: #1f0e0e; }
+
+.gruvbox-dark_red-xterm {
+  color: #FFFFFF;
+  background-color: #5f0000;
+  height: 118px; }
+
+.gruvbox-dark_red-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #2c0000; }
+
+.gruvbox-dark_blue {
+  color: #FFFFFF;
+  background-color: #2B3C44;
+  height: 118px; }
+
+.gruvbox-dark_blue-after {
+  height: 10px;
+  width: 128px;
+  background-color: #172025; }
+
+.gruvbox-dark_blue-xterm {
+  color: #FFFFFF;
+  background-color: #000080;
+  height: 118px; }
+
+.gruvbox-dark_blue-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #00004d; }
+
+.gruvbox-dark_aqua {
+  color: #FFFFFF;
+  background-color: #36473A;
+  height: 118px; }
+
+.gruvbox-dark_aqua-after {
+  height: 10px;
+  width: 128px;
+  background-color: #202a22; }
+
+.gruvbox-dark_aqua-xterm {
+  color: #FFFFFF;
+  background-color: #005f5f;
+  height: 118px; }
+
+.gruvbox-dark_aqua-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #002c2c; }
+
+.gruvbox-delimiter-one {
+  color: #FFFFFF;
+  background-color: #458588;
+  height: 118px; }
+
+.gruvbox-delimiter-one-after {
+  height: 10px;
+  width: 128px;
+  background-color: #346466; }
+
+.gruvbox-delimiter-one-xterm {
+  color: #FFFFFF;
+  background-color: #008787;
+  height: 118px; }
+
+.gruvbox-delimiter-one-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #005454; }
+
+.gruvbox-delimiter-two {
+  color: #000000;
+  background-color: #b16286;
+  height: 118px; }
+
+.gruvbox-delimiter-two-after {
+  height: 10px;
+  width: 128px;
+  background-color: #c284a0; }
+
+.gruvbox-delimiter-two-xterm {
+  color: #000000;
+  background-color: #d75f87;
+  height: 118px; }
+
+.gruvbox-delimiter-two-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e188a6; }
+
+.gruvbox-delimiter-three {
+  color: #000000;
+  background-color: #8ec07c;
+  height: 118px; }
+
+.gruvbox-delimiter-three-after {
+  height: 10px;
+  width: 128px;
+  background-color: #acd19e; }
+
+.gruvbox-delimiter-three-xterm {
+  color: #000000;
+  background-color: #87af87;
+  height: 118px; }
+
+.gruvbox-delimiter-three-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a6c3a6; }
+
+.gruvbox-delimiter-four {
+  color: #FFFFFF;
+  background-color: #d65d0e;
+  height: 118px; }
+
+.gruvbox-delimiter-four-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a6480b; }
+
+.gruvbox-delimiter-four-xterm {
+  color: #FFFFFF;
+  background-color: #d75f00;
+  height: 118px; }
+
+.gruvbox-delimiter-four-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a44800; }
+
+.gruvbox-white {
+  color: #000000;
+  background-color: #FFFFFF;
+  height: 118px; }
+
+.gruvbox-white-after {
+  height: 10px;
+  width: 128px;
+  background-color: white; }
+
+.gruvbox-white-xterm {
+  color: #000000;
+  background-color: #FFFFFF;
+  height: 118px; }
+
+.gruvbox-white-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: white; }
+
+.gruvbox-black {
+  color: #FFFFFF;
+  background-color: #000000;
+  height: 118px; }
+
+.gruvbox-black-after {
+  height: 10px;
+  width: 128px;
+  background-color: black; }
+
+.gruvbox-black-xterm {
+  color: #FFFFFF;
+  background-color: #000000;
+  height: 118px; }
+
+.gruvbox-black-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: black; }
+
+.gruvbox-sienna {
+  color: #000000;
+  background-color: #DD6F48;
+  height: 118px; }
+
+.gruvbox-sienna-after {
+  height: 10px;
+  width: 128px;
+  background-color: #e59173; }
+
+.gruvbox-sienna-xterm {
+  color: #FFFFFF;
+  background-color: #882D17;
+  height: 118px; }
+
+.gruvbox-sienna-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #5c1f10; }
+
+.gruvbox-darkslategray4 {
+  color: #FFFFFF;
+  background-color: #528B8B;
+  height: 118px; }
+
+.gruvbox-darkslategray4-after {
+  height: 10px;
+  width: 128px;
+  background-color: #3f6b6b; }
+
+.gruvbox-darkslategray4-xterm {
+  color: #FFFFFF;
+  background-color: #528b8b;
+  height: 118px; }
+
+.gruvbox-darkslategray4-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #3f6b6b; }
+
+.gruvbox-lightblue4 {
+  color: #000000;
+  background-color: #66999D;
+  height: 118px; }
+
+.gruvbox-lightblue4-after {
+  height: 10px;
+  width: 128px;
+  background-color: #85aeb1; }
+
+.gruvbox-lightblue4-xterm {
+  color: #FFFFFF;
+  background-color: #68838b;
+  height: 118px; }
+
+.gruvbox-lightblue4-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #52686e; }
+
+.gruvbox-burlywood4 {
+  color: #000000;
+  background-color: #BBAA97;
+  height: 118px; }
+
+.gruvbox-burlywood4-after {
+  height: 10px;
+  width: 128px;
+  background-color: #cfc3b6; }
+
+.gruvbox-burlywood4-xterm {
+  color: #FFFFFF;
+  background-color: #8B7355;
+  height: 118px; }
+
+.gruvbox-burlywood4-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #6b5942; }
+
+.gruvbox-aquamarine4 {
+  color: #000000;
+  background-color: #83A598;
+  height: 118px; }
+
+.gruvbox-aquamarine4-after {
+  height: 10px;
+  width: 128px;
+  background-color: #a1bab1; }
+
+.gruvbox-aquamarine4-xterm {
+  color: #FFFFFF;
+  background-color: #458b74;
+  height: 118px; }
+
+.gruvbox-aquamarine4-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #346958; }
+
+.gruvbox-turquoise4 {
+  color: #000000;
+  background-color: #61ACBB;
+  height: 118px; }
+
+.gruvbox-turquoise4-after {
+  height: 10px;
+  width: 128px;
+  background-color: #85bfca; }
+
+.gruvbox-turquoise4-xterm {
+  color: #FFFFFF;
+  background-color: #00868b;
+  height: 118px; }
+
+.gruvbox-turquoise4-xterm-after {
+  height: 10px;
+  width: 128px;
+  background-color: #005558; }
+
+.separator {
+  clear: left;
+  height: 0px;
+  width: 100%; }
+
+.group-separator {
+  clear: left;
+  height: 10px;
+  width: 100%;
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  margin-bottom: 10px; }
+
+/*# sourceMappingURL=gruvbox-theme-colors.css.map */
diff --git a/palette/gruvbox-theme-colors.css.map 
b/palette/gruvbox-theme-colors.css.map
new file mode 100644
index 0000000000..a07ed68887
--- /dev/null
+++ b/palette/gruvbox-theme-colors.css.map
@@ -0,0 +1,7 @@
+{
+"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
 [...]
+"sources": ["gruvbox-theme-colors.scss"],
+"names": [],
+"file": "gruvbox-theme-colors.css"
+}
\ No newline at end of file
diff --git a/palette/gruvbox-theme-colors.html 
b/palette/gruvbox-theme-colors.html
new file mode 100644
index 0000000000..979e3d3633
--- /dev/null
+++ b/palette/gruvbox-theme-colors.html
@@ -0,0 +1,134 @@
+<html>
+    <head>
+        <title>Emacs Gruvbox</title>
+        <link rel="stylesheet" href="gruvbox-theme-colors.css" type="text/css" 
media="screen" />
+    </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>
+    </body>
+</html>
diff --git a/palette/gruvbox-theme-colors.scss 
b/palette/gruvbox-theme-colors.scss
new file mode 100644
index 0000000000..b8879b4caa
--- /dev/null
+++ b/palette/gruvbox-theme-colors.scss
@@ -0,0 +1,184 @@
+$gruvbox-palette: (
+  gruvbox-dark0_hard:             #1d2021,
+  gruvbox-dark0_hard-xterm:       #1c1c1c,
+  gruvbox-dark0:                  #282828,
+  gruvbox-dark0-xterm:            #262626,
+  gruvbox-dark0_soft:             #32302f,
+  gruvbox-dark0_soft-xterm:       #303030,
+  gruvbox-dark1:                  #3c3836,
+  gruvbox-dark1-xterm:            #3a3a3a,
+  gruvbox-dark2:                  #504945,
+  gruvbox-dark2-xterm:            #4e4e4e,
+  gruvbox-dark3:                  #665c54,
+  gruvbox-dark3-xterm:            #626262,
+  gruvbox-dark4:                  #7c6f64,
+  gruvbox-dark4-xterm:            #767676,
+  gruvbox-gray:                   #928374,
+  gruvbox-gray-xterm:             #8a8a8a,
+  gruvbox-light0_hard:            #ffffc8,
+  gruvbox-light0_hard-xterm:      #ffffdf,
+  gruvbox-light0:                 #fdf4c1,
+  gruvbox-light0-xterm:           #ffffaf,
+  gruvbox-light0_soft:            #f4e8ba,
+  gruvbox-light0_soft-xterm:      #ffff87,
+  gruvbox-light1:                 #ebdbb2,
+  gruvbox-light1-xterm:           #ffdfaf,
+  gruvbox-light2:                 #d5c4a1,
+  gruvbox-light2-xterm:           #bcbcbc,
+  gruvbox-light3:                 #bdae93,
+  gruvbox-light3-xterm:           #a8a8a8,
+  gruvbox-light4:                 #a89984,
+  gruvbox-light4-xterm:           #949494,
+  gruvbox-bright_red:             #fb4933,
+  gruvbox-bright_red-xterm:       #d75f5f,
+  gruvbox-bright_green:           #b8bb26,
+  gruvbox-bright_green-xterm:     #afaf00,
+  gruvbox-bright_yellow:          #fabd2f,
+  gruvbox-bright_yellow-xterm:    #ffaf00,
+  gruvbox-bright_blue:            #83a598,
+  gruvbox-bright_blue-xterm:      #87afaf,
+  gruvbox-bright_purple:          #d3869b,
+  gruvbox-bright_purple-xterm:    #d787af,
+  gruvbox-bright_aqua:            #8ec07c,
+  gruvbox-bright_aqua-xterm:      #87af87,
+  gruvbox-bright_orange:          #fe8019,
+  gruvbox-bright_orange-xterm:    #ff8700,
+  gruvbox-neutral_red:            #fb4934,
+  gruvbox-neutral_red-xterm:      #d75f5f,
+  gruvbox-neutral_green:          #b8bb26,
+  gruvbox-neutral_green-xterm:    #afaf00,
+  gruvbox-neutral_yellow:         #fabd2f,
+  gruvbox-neutral_yellow-xterm:   #ffaf00,
+  gruvbox-neutral_blue:           #83a598,
+  gruvbox-neutral_blue-xterm:     #87afaf,
+  gruvbox-neutral_purple:         #d3869b,
+  gruvbox-neutral_purple-xterm:   #d787af,
+  gruvbox-neutral_aqua:           #8ec07c,
+  gruvbox-neutral_aqua-xterm:     #87af87,
+  gruvbox-neutral_orange:         #fe8019,
+  gruvbox-neutral_orange-xterm:   #ff8700,
+  gruvbox-faded_red:              #9d0006,
+  gruvbox-faded_red-xterm:        #870000,
+  gruvbox-faded_green:            #79740e,
+  gruvbox-faded_green-xterm:      #878700,
+  gruvbox-faded_yellow:           #b57614,
+  gruvbox-faded_yellow-xterm:     #af8700,
+  gruvbox-faded_blue:             #076678,
+  gruvbox-faded_blue-xterm:       #005f87,
+  gruvbox-faded_purple:           #8f3f71,
+  gruvbox-faded_purple-xterm:     #875f87,
+  gruvbox-faded_aqua:             #427b58,
+  gruvbox-faded_aqua-xterm:       #5f8787,
+  gruvbox-faded_orange:           #af3a03,
+  gruvbox-faded_orange-xterm:     #af5f00,
+  gruvbox-dark_red:               #421E1E,
+  gruvbox-dark_red-xterm:         #5f0000,
+  gruvbox-dark_blue:              #2B3C44,
+  gruvbox-dark_blue-xterm:        #000080,
+  gruvbox-dark_aqua:              #36473A,
+  gruvbox-dark_aqua-xterm:        #005f5f,
+  gruvbox-delimiter-one:          #458588,
+  gruvbox-delimiter-one-xterm:    #008787,
+  gruvbox-delimiter-two:          #b16286,
+  gruvbox-delimiter-two-xterm:    #d75f87,
+  gruvbox-delimiter-three:        #8ec07c,
+  gruvbox-delimiter-three-xterm:  #87af87,
+  gruvbox-delimiter-four:         #d65d0e,
+  gruvbox-delimiter-four-xterm:   #d75f00,
+  gruvbox-white:                  #FFFFFF,
+  gruvbox-white-xterm:            #FFFFFF,
+  gruvbox-black:                  #000000,
+  gruvbox-black-xterm:            #000000,
+  gruvbox-sienna:                 #DD6F48,
+  gruvbox-sienna-xterm:           #882D17,
+  gruvbox-darkslategray4:         #528B8B,
+  gruvbox-darkslategray4-xterm:   #528b8b,
+  gruvbox-lightblue4:             #66999D,
+  gruvbox-lightblue4-xterm:       #68838b,
+  gruvbox-burlywood4:             #BBAA97,
+  gruvbox-burlywood4-xterm:       #8B7355,
+  gruvbox-aquamarine4:            #83A598,
+  gruvbox-aquamarine4-xterm:      #458b74,
+  gruvbox-turquoise4:             #61ACBB,
+  gruvbox-turquoise4-xterm:       #00868b,
+);
+
+$dark: #000000;
+$light: #FFFFFF;
+
+@function contrast-foreground($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),
+             $light,
+             $dark);
+}
+
+@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%));
+}
+
+$swatch-width: 128px;
+$swatch-height: 128px;
+
+body {
+  font-family: "SauceCodePro Nerd Font";
+  font-weight: lighter;
+}
+
+h1 {
+  font-size: 42pt;
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: lighter;
+  margin: 0;
+  margin-bottom: 3px;
+}
+
+.gruvbox-swatch {
+  width: $swatch-width;
+  height: $swatch-height;
+  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;
+  }
+  .#{$name}-after {
+    height: 10px;
+    width: $swatch-width;
+    background-color: bottom-bar-color($color);
+  }
+}
+
+.separator {
+  clear: left;
+  height: 0px;
+  width: 100%;
+}
+
+.group-separator {
+  clear: left;
+  height: 10px;
+  width: 100%;
+  border-bottom-color: rgba(0,0,0,0.1);
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  margin-bottom: 10px;
+}
diff --git a/screenshot.jpg b/screenshot.jpg
deleted file mode 100644
index a349d8b409..0000000000
Binary files a/screenshot.jpg and /dev/null differ
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000000..af369579aa
Binary files /dev/null and b/screenshot.png differ
reply via email to
[Prev in Thread] Current Thread [Next in Thread]