feat: make crab color theme the default

Author: maybeanerd

constants/themes.json

@@ -1,4 +1,20 @@
 [
+  [
+    "#ef6061",
+    {
+      "--theme-color-name": "crab",
+      "--c-primary": "rgb(var(--rgb-primary))",
+      "--c-primary-active": "#d3474c",
+      "--c-primary-light": "#ef606180",
+      "--c-primary-fade": "#e95b5d1a",
+      "--rgb-primary": "239, 96, 97",
+      "--c-dark-primary": "rgb(var(--rgb-dark-primary))",
+      "--c-dark-primary-active": "#d94c50",
+      "--c-dark-primary-light": "#f5656580",
+      "--c-dark-primary-fade": "#ef60611a",
+      "--rgb-dark-primary": "239, 96, 97"
+    }
+  ],
   [
     "#cc7d24",
     {
@@ -126,21 +142,5 @@
       "--c-dark-primary-fade": "#e65da91a",
       "--rgb-dark-primary": "230, 93, 169"
     }
-  ],
-  [
-    "#ef6061",
-    {
-      "--theme-color-name": "#ef6061",
-      "--c-primary": "rgb(var(--rgb-primary))",
-      "--c-primary-active": "#d3474c",
-      "--c-primary-light": "#ef606180",
-      "--c-primary-fade": "#e95b5d1a",
-      "--rgb-primary": "239, 96, 97",
-      "--c-dark-primary": "rgb(var(--rgb-dark-primary))",
-      "--c-dark-primary-active": "#d94c50",
-      "--c-dark-primary-light": "#f5656580",
-      "--c-dark-primary-fade": "#ef60611a",
-      "--rgb-dark-primary": "239, 96, 97"
-    }
   ]
 ]

scripts/generate-themes.ts

@@ -7,12 +7,22 @@ export const themesColor = Array.from(
   (_, i) => chroma.hcl((67.14 + i * 40) % 360, 62.19, 59.56).hex(),
 )
 
+function isCrabColor(color: string) {
+  return color === '#ef6061'
+}
+
+function getColorName(color: string) {
+  return isCrabColor(color) ? 'crab' : color
+}
+
+themesColor.sort((primaryA, primaryB) => isCrabColor(primaryA) ? -1 : isCrabColor(primaryB) ? 1 : 0)
+
 export function getThemeColors(primary: string): ThemeColors {
   const c = chroma(primary)
   const dc = c.brighten(0.1)
 
   return {
-    '--theme-color-name': primary,
+    '--theme-color-name': getColorName(primary),
 
     '--c-primary': 'rgb(var(--rgb-primary))',
     '--c-primary-active': c.darken(0.5).hex(),

styles/default-theme.css

@@ -1,13 +1,13 @@
 :root {
-  --theme-color-name: #cc7d24;
+  --theme-color-name: crab;
   --c-primary: rgb(var(--rgb-primary));
-  --c-primary-active: #b16605;
-  --c-primary-light: #cc7d2480;
-  --c-primary-fade: #c7781f1a;
-  --rgb-primary: 204, 125, 36;
+  --c-primary-active: #d3474c;
+  --c-primary-light: #ef606180;
+  --c-primary-fade: #e95b5d1a;
+  --rgb-primary: 239, 96, 97;
   --c-dark-primary: rgb(var(--rgb-dark-primary));
-  --c-dark-primary-active: #b66b0d;
-  --c-dark-primary-light: #d1822980;
-  --c-dark-primary-fade: #cc7d241a;
-  --rgb-dark-primary: 204, 125, 36;
+  --c-dark-primary-active: #d94c50;
+  --c-dark-primary-light: #f5656580;
+  --c-dark-primary-fade: #ef60611a;
+  --rgb-dark-primary: 239, 96, 97;
 }