Merge pull request #1348 from zed-industries/fix-theme-rose-pine

Nate Butler created 3 years ago

Update rose pine theme

Change summary

styles/src/themes/rose-pine-dawn.ts | 28 ++++++++++++++--------------
styles/src/themes/rose-pine-moon.ts | 27 +++++++++++++++++++++++++++
styles/src/themes/rose-pine.ts      | 28 ++++++++++++++--------------
3 files changed, 55 insertions(+), 28 deletions(-)

Detailed changes

styles/src/themes/rose-pine-dawn.ts

@@ -5,23 +5,23 @@ const name = "rosé-pine-dawn";
 
 const ramps = {
   neutral: chroma.scale([
-    "#26233a",
-    "#555169",
     "#575279",
-    "#6e6a86",
-    "#9893a5",
-    "#f2e9de",
-    "#fffaf3",
-    "#faf4ed",
+    "#797593",
+    "#9893A5",
+    "#B5AFB8",
+    "#D3CCCC",
+    "#F2E9E1",
+    "#FFFAF3",
+    "#FAF4ED",
   ]),
-  red: colorRamp(chroma("#1f1d2e")),
-  orange: colorRamp(chroma("#b4637a")),
-  yellow: colorRamp(chroma("#ea9d34")),
-  green: colorRamp(chroma("#d7827e")),
+  red: colorRamp(chroma("#B4637A")),
+  orange: colorRamp(chroma("#D7827E")),
+  yellow: colorRamp(chroma("#EA9D34")),
+  green: colorRamp(chroma("#679967")),
   cyan: colorRamp(chroma("#286983")),
-  blue: colorRamp(chroma("#56949f")),
-  violet: colorRamp(chroma("#907aa9")),
-  magenta: colorRamp(chroma("#c5c3ce")),
+  blue: colorRamp(chroma("#56949F")),
+  violet: colorRamp(chroma("#907AA9")),
+  magenta: colorRamp(chroma("#79549F")),
 };
 
 export const light = createTheme(`${name}`, true, ramps);

styles/src/themes/rose-pine-moon.ts

@@ -0,0 +1,27 @@
+import chroma from "chroma-js";
+import { colorRamp, createTheme } from "./common/base16";
+
+const name = "rosé-pine-moon";
+
+const ramps = {
+  neutral: chroma.scale([
+    "#232136",
+    "#2A273F",
+    "#393552",
+    "#3E3A53",
+    "#56526C",
+    "#6E6A86",
+    "#908CAA",
+    "#E0DEF4",
+  ]),
+  red: colorRamp(chroma("#EB6F92")),
+  orange: colorRamp(chroma("#EBBCBA")),
+  yellow: colorRamp(chroma("#F6C177")),
+  green: colorRamp(chroma("#8DBD8D")),
+  cyan: colorRamp(chroma("#409BBE")),
+  blue: colorRamp(chroma("#9CCFD8")),
+  violet: colorRamp(chroma("#C4A7E7")),
+  magenta: colorRamp(chroma("#AB6FE9")),
+};
+
+export const dark = createTheme(`${name}`, false, ramps);

styles/src/themes/rose-pine.ts

@@ -7,21 +7,21 @@ const ramps = {
   neutral: chroma.scale([
     "#191724",
     "#1f1d2e",
-    "#26233a",
-    "#555169",
-    "#6e6a86",
-    "#e0def4",
-    "#f0f0f3",
-    "#c5c3ce",
+    "#26233A",
+    "#3E3A53",
+    "#56526C",
+    "#6E6A86",
+    "#908CAA",
+    "#E0DEF4",
   ]),
-  red: colorRamp(chroma("#e2e1e7")),
-  orange: colorRamp(chroma("#eb6f92")),
-  yellow: colorRamp(chroma("#f6c177")),
-  green: colorRamp(chroma("#ebbcba")),
-  cyan: colorRamp(chroma("#31748f")),
-  blue: colorRamp(chroma("#0CA793")),
-  violet: colorRamp(chroma("#8A3FA6")),
-  magenta: colorRamp(chroma("#C74DED")),
+  red: colorRamp(chroma("#EB6F92")),
+  orange: colorRamp(chroma("#EBBCBA")),
+  yellow: colorRamp(chroma("#F6C177")),
+  green: colorRamp(chroma("#8DBD8D")),
+  cyan: colorRamp(chroma("#409BBE")),
+  blue: colorRamp(chroma("#9CCFD8")),
+  violet: colorRamp(chroma("#C4A7E7")),
+  magenta: colorRamp(chroma("#AB6FE9")),
 };
 
 export const dark = createTheme(`${name}`, false, ramps);