Update gruvbox to use manual accent ramps

Nate Butler and gibusu created 3 years ago

Also updated it's neutral to contain more values sourced from the gruvbox repo

Co-Authored-By: gibusu <[e-mail]>

Change summary

styles/src/themes/internal/gruvbox-medium.ts | 121 ++++++++++++++++++---
1 file changed, 103 insertions(+), 18 deletions(-)

Detailed changes

styles/src/themes/internal/gruvbox-medium.ts

@@ -9,26 +9,108 @@ const license = {
   url: "https://en.wikipedia.org/wiki/MIT_License",
 };
 
-// `name-[light|dark]`, isLight, color ramps
 export const dark = createColorScheme(`${name} Dark Medium`, false, {
   neutral: chroma.scale([
     "#282828",
     "#3c3836",
     "#504945",
     "#665c54",
-    "#bdae93",
-    "#d5c4a1",
-    "#ebdbb2",
-    "#fbf1c7",
-  ]),
-  red: colorRamp(chroma("#fb4934")),
-  orange: colorRamp(chroma("#fe8019")),
-  yellow: colorRamp(chroma("#fabd2f")),
-  green: colorRamp(chroma("#b8bb26")),
-  cyan: colorRamp(chroma("#8ec07c")),
-  blue: colorRamp(chroma("#83a598")),
-  violet: colorRamp(chroma("#d3869b")),
-  magenta: colorRamp(chroma("#d65d0e")),
+    "#7C6F64",
+    "#928374",
+    "#A89984",
+    "#BDAE93",
+    "#D5C4A1",
+    "#EBDBB2",
+    "#FBF1C7",
+  ]),
+  red: chroma.scale([
+    "#4D150F",
+    "#7D241A",
+    "#A31C17",
+    "#CC241D",
+    "#C83A29",
+    "#FB4934",
+    "#F06D61",
+    "#E6928E",
+    "#FFFFFF",
+  ]),
+  orange: chroma.scale([
+    "#462307",
+    "#7F400C",
+    "#AB4A0B",
+    "#D65D0E",
+    "#CB6614",
+    "#FE8019",
+    "#F49750",
+    "#EBAE87",
+    "#FFFFFF",
+  ]),
+  yellow: chroma.scale([
+    "#3D2C05",
+    "#7D5E17",
+    "#AC7A1A",
+    "#D79921",
+    "#E8AB28",
+    "#FABD2F",
+    "#F2C45F",
+    "#EBCC90",
+    "#FFFFFF",
+  ]),
+  green: chroma.scale([
+    "#32330A",
+    "#5C5D13",
+    "#797814",
+    "#98971A",
+    "#93951E",
+    "#B8BB26",
+    "#C2C359",
+    "#CCCB8D",
+    "#FFFFFF",
+  ]),
+  cyan: chroma.scale([
+    "#283D20",
+    "#47603E",
+    "#537D54",
+    "#689D6A",
+    "#719963",
+    "#8EC07C",
+    "#A1C798",
+    "#B4CEB5",
+    "#FFFFFF",
+  ]),
+  blue: chroma.scale([
+    "#103738",
+    "#214C4D",
+    "#376A6C",
+    "#458588",
+    "#688479",
+    "#83A598",
+    "#92B3AE",
+    "#A2C2C4",
+    "#FFFFFF",
+  ]),
+  violet: chroma.scale([
+    "#392228",
+    "#69434D",
+    "#8D4E6B",
+    "#B16286",
+    "#A86B7C",
+    "#D3869B",
+    "#D59BAF",
+    "#D8B1C3",
+    "#FFFFFF",
+  ]),
+  magenta: chroma.scale([
+    "#48402C",
+    "#756D59",
+    "#867A69",
+    "#A89984",
+    "#BCAF8E",
+    "#EBDBB2",
+    "#DFD3BA",
+    "#D4CCC2",
+    "#FFFFFF",
+  ]),
 });
 
 export const light = createColorScheme(`${name} Light Medium`, true, {
@@ -37,10 +119,13 @@ export const light = createColorScheme(`${name} Light Medium`, true, {
     "#3c3836",
     "#504945",
     "#665c54",
-    "#bdae93",
-    "#d5c4a1",
-    "#ebdbb2",
-    "#fbf1c7",
+    "#7C6F64",
+    "#928374",
+    "#A89984",
+    "#BDAE93",
+    "#D5C4A1",
+    "#EBDBB2",
+    "#FBF1C7",
   ]),
   red: colorRamp(chroma("#9d0006")),
   orange: colorRamp(chroma("#af3a03")),