Gruvbox colorscheme as css variables

gruvbox-colors.css

:root {
  /* dark */
  --gboxd_bg:    #282828;
  --gboxd_bg0:   #282828;
  --gboxd_bg0_h: #1d2021;
  --gboxd_bg0_s: #32302f;
  --gboxd_bg1:   #3c3836;
  --gboxd_bg2:   #504945;
  --gboxd_bg3:   #665c54;
  --gboxd_bg4:   #7c6f64;

  --gboxd_fg:  #ebdbb2;
  --gboxd_fg0: #fbf1c7;
  --gboxd_fg1: #ebdbb2;
  --gboxd_fg2: #d5c4a1;
  --gboxd_fg3: #bdae93;
  --gboxd_fg4: #a89984;

  --gboxd_red:        #fb4934;
  --gboxd_red-dim:    #cc2412;
  --gboxd_green:      #b8bb26;
  --gboxd_green-dim:  #98971a;
  --gboxd_yellow:     #fabd2f;
  --gboxd_yellow-dim: #d79921;
  --gboxd_blue:       #83a598;
  --gboxd_blue-dim:   #458588;
  --gboxd_purple:     #d3869b;
  --gboxd_purple-dim: #b16286;
  --gboxd_aqua:       #8ec07c;
  --gboxd_aqua-dim:   #689d6a;
  --gboxd_gray:       #928374;
  --gboxd_gray-dim:   #a89984;
  --gboxd_orange:     #fe8019;
  --gboxd_orange-dim: #d65d0e;

  /* light */
  --gboxl_bg:    #fbf1c7;
  --gboxl_bg0:   #fbf1c7;
  --gboxl_bg0_h: #f9f5d7;
  --gboxl_bg0_s: #f2e5bc;
  --gboxl_bg1:   #ebdbb2;
  --gboxl_bg2:   #d5c4a1;
  --gboxl_bg3:   #bdae93;
  --gboxl_bg4:   #a89984;

  --gboxl_fg:  #3c3836;
  --gboxl_fg0: #282828;
  --gboxl_fg1: #3c3836;
  --gboxl_fg2: #504945;
  --gboxl_fg3: #665c54;
  --gboxl_fg4: #7c6f64;

  --gboxl_red:        #9d0006;
  --gboxl_red-dim:    #cc241d;
  --gboxl_green:      #79740e;
  --gboxl_green-dim:  #98971a;
  --gboxl_yellow:     #b57614;
  --gboxl_yellow-dim: #b79921;
  --gboxl_blue:       #076678;
  --gboxl_blue-dim:   #458588;
  --gboxl_purple:     #8f3f71;
  --gboxl_purple-dim: #b16286;
  --gboxl_aqua:       #427b58;
  --gboxl_aqua-dim:   #689d6a;
  --gboxl_gray:       #7c6f64;
  --gboxl_gray-dim:   #928374;
  --gboxl_orange:     #af3a03;
  --gboxl_orange-dim: #d65d0e;
}

.gruvbox-light {
  --background: var(--gboxl_bg0_s);
  --background-alt: var(--gboxl_bg);

  --foreground: var(--gboxl_fg);
  --foreground-alt: var(--gboxl_fg1);

  --red-color:    var(--gboxl_red);
  --green-color:  var(--gboxl_green);
  --yellow-color: var(--gboxl_yellow);
  --blue-color:   var(--gboxl_blue);
  --purple-color: var(--gboxl_purple);
  --aqua-color:   var(--gboxl_aqua);
  --gray-color:   var(--gboxl_gray);
  --orange-color: var(--gboxl_orange);
}

.gruvbox-dark {
  --background: var(--gboxd_bg0_h);
  --background-alt: var(--gboxd_bg);

  --foreground: var(--gboxd_fg);
  --foreground-alt: var(--gboxd_fg1);

  --red-color:    var(--gboxd_red);
  --green-color:  var(--gboxd_green);
  --yellow-color: var(--gboxd_yellow);
  --blue-color:   var(--gboxd_blue);
  --purple-color: var(--gboxd_purple);
  --aqua-color:   var(--gboxd_aqua);
  --gray-color:   var(--gboxd_gray);
  --orange-color: var(--gboxd_orange);
}