feat: improved dark mode color

packages/bruno-app/.gitignore

@@ -34,4 +34,5 @@ yarn-error.log*
 .next/
 dist/
 
-.env
+.env
+storybook-static/

packages/bruno-app/src/themes/dark/dark.js

@@ -4,24 +4,24 @@ export const palette = {
   primary: {
     SOLID: 'hsl(39, 74%, 59%)',
     TEXT: 'hsl(39, 74%, 64%)',
-    STRONG: 'hsl(39, 74%, 69%)',
+    STRONG: 'hsl(39, 74%, 64%)',
     SUBTLE: 'hsl(39, 74%, 54%)'
   },
   hues: {
-    RED: 'hsl(0,   70%, 71%)',
-    ROSE: 'hsl(350, 65%, 78%)',
-    BROWN: 'hsl(41,  52%, 77%)',
-    ORANGE: 'hsl(24,  75%, 75%)',
-    YELLOW: 'hsl(48,  68%, 74%)',
-    LIME: 'hsl(75,  65%, 71%)',
-    GREEN: 'hsl(140, 59%, 71%)',
-    TEAL: 'hsl(170, 55%, 71%)',
-    CYAN: 'hsl(190, 70%, 76%)',
-    BLUE: 'hsl(202, 82%, 80%)',
-    INDIGO: 'hsl(225, 73%, 82%)',
-    VIOLET: 'hsl(260, 65%, 81%)',
-    PURPLE: 'hsl(285, 60%, 78%)',
-    PINK: 'hsl(320, 65%, 81%)'
+    RED: 'hsl(0, 85%, 68%)',
+    ROSE: 'hsl(350, 78%, 75%)',
+    BROWN: 'hsl(35,  65%, 72%)',
+    ORANGE: 'hsl(24,  88%, 72%)',
+    YELLOW: 'hsl(41, 93%, 72%)',
+    LIME: 'hsl(75,  80%, 68%)',
+    GREEN: 'hsl(140, 72%, 68%)',
+    TEAL: 'hsl(170, 70%, 68%)',
+    CYAN: 'hsl(190, 82%, 72%)',
+    BLUE: 'hsl(210, 90%, 76%)',
+    INDIGO: 'hsl(225, 82%, 78%)',
+    VIOLET: 'hsl(260, 75%, 78%)',
+    PURPLE: 'hsl(285, 72%, 75%)',
+    PINK: 'hsl(320, 78%, 78%)'
   },
   system: {
     CONTROL_ACCENT: '#D9A342'
@@ -64,17 +64,25 @@ palette.intent = {
 };
 
 palette.syntax = {
-  DEFINITION: palette.hues.GREEN,
-  PROPERTY: palette.hues.BLUE,
-  STRING: palette.hues.BROWN,
-  NUMBER: palette.hues.GREEN,
-  ATOM: palette.hues.YELLOW,
-  VARIABLE: palette.hues.ROSE,
+  // Core language structure
   KEYWORD: palette.hues.ROSE,
-  COMMENT: palette.text.SUBTEXT1,
-  OPERATOR: palette.hues.BROWN,
   TAG: palette.hues.ROSE,
-  TAG_BRACKET: palette.text.SUBTEXT1
+  // Identifiers & properties (collapsed)
+  VARIABLE: palette.hues.PINK,
+  PROPERTY: palette.hues.BLUE,
+  DEFINITION: palette.hues.BLUE,
+
+  // Literals
+  STRING: palette.hues.BROWN,
+  NUMBER: palette.hues.PINK,
+  ATOM: palette.hues.ROSE,
+
+  // Operators & punctuation (quiet)
+  OPERATOR: palette.text.SUBTEXT1,
+  TAG_BRACKET: palette.text.SUBTEXT1,
+
+  // Comments should recede
+  COMMENT: palette.text.SUBTEXT0
 };
 
 const colors = {

packages/bruno-app/src/themes/light/light.js

@@ -75,6 +75,28 @@ palette.syntax = {
   TAG_BRACKET: palette.text.SUBTEXT0
 };
 
+palette.syntax = {
+  // Core language structure
+  KEYWORD: palette.hues.ROSE,
+  TAG: palette.hues.ROSE,
+  // Identifiers & properties (collapsed)
+  VARIABLE: palette.hues.PINK,
+  PROPERTY: palette.hues.BLUE,
+  DEFINITION: palette.hues.BLUE,
+
+  // Literals
+  STRING: palette.hues.BROWN,
+  NUMBER: palette.hues.PINK,
+  ATOM: palette.hues.ROSE,
+
+  // Operators & punctuation (quiet)
+  OPERATOR: palette.text.SUBTEXT1,
+  TAG_BRACKET: palette.text.SUBTEXT1,
+
+  // Comments should recede
+  COMMENT: palette.text.SUBTEXT0
+};
+
 const lightTheme = {
   mode: 'light',
   brand: palette.primary.SOLID,