Refined dark theme styles

styles/buildThemes.ts

@@ -3,6 +3,7 @@ import * as path from "path";
 import app from "./styleTree/app";
 import dark from "./themes/dark";
 import light from "./themes/light";
+import { colors } from "./tokens";
 import decamelizeTree from "./utils/decamelizeTree";
 
 const themes = [dark, light];
@@ -14,4 +15,6 @@ for (let theme of themes) {
     );
     fs.writeFileSync(outPath, styleTreeJSON);
     console.log(`Generated ${outPath}`);
+
+    console.log(JSON.stringify(colors.indigo, null, 2));
 }

styles/styleTree/selectorModal.ts

@@ -16,12 +16,12 @@ export default function selectorModal(theme: Theme): Object {
 
   const activeItem = {
     ...item,
-    background: backgroundColor(theme, 500, "active"),
+    background: backgroundColor(theme, 300, "active"),
     text: text(theme, "sans", "primary"),
   };
 
   return {
-    background: backgroundColor(theme, 500),
+    background: backgroundColor(theme, 300),
     cornerRadius: 6,
     padding: 8,
     item,
@@ -37,12 +37,12 @@ export default function selectorModal(theme: Theme): Object {
       },
     },
     inputEditor: {
-      background: backgroundColor(theme, 300),
+      background: backgroundColor(theme, 500),
       corner_radius: 6,
       placeholderText: text(theme, "sans", "placeholder"),
       selection: player(theme, 1).selection,
       text: text(theme, "mono", "primary"),
-      border: border(theme, "primary"),
+      border: border(theme, "secondary"),
       padding: {
         bottom: 7,
         left: 16,

styles/styleTree/workspace.ts

@@ -14,7 +14,7 @@ export default function workspace(theme: Theme) {
   const tab = {
     height: 32,
     background: backgroundColor(theme, 300),
-    iconClose: iconColor(theme, "secondary"),
+    iconClose: iconColor(theme, "muted"),
     iconCloseActive: iconColor(theme, "active"),
     iconConflict: iconColor(theme, "warning"),
     iconDirty: iconColor(theme, "info"),
@@ -135,7 +135,7 @@ export default function workspace(theme: Theme) {
     toolbar: {
       height: 34,
       background: backgroundColor(theme, 500),
-      border: border(theme, "muted", { bottom: true }),
+      border: border(theme, "primary", { bottom: true }),
       itemSpacing: 8,
       padding: { left: 16, right: 8, top: 4, bottom: 4 },
     },

styles/themes/dark.ts

@@ -3,22 +3,22 @@ import Theme, { Syntax } from "./theme";
 
 const backgroundColor = {
     100: {
-        base: colors.neutral[700],
-        hovered: colors.neutral[700],
+        base: colors.neutral[750],
+        hovered: colors.neutral[725],
         active: colors.neutral[700],
-        focused: colors.neutral[700],
+        focused: colors.neutral[675],
     },
     300: {
         base: colors.neutral[800],
-        hovered: colors.neutral[800],
-        active: colors.neutral[800],
-        focused: colors.neutral[800],
+        hovered: colors.neutral[775],
+        active: colors.neutral[750],
+        focused: colors.neutral[725],
     },
     500: {
         base: colors.neutral[900],
-        hovered: colors.neutral[850],
-        active: colors.neutral[800],
-        focused: colors.neutral[850],
+        hovered: colors.neutral[875],
+        active: colors.neutral[850],
+        focused: colors.neutral[825],
     },
     ok: {
         base: colors.green[600],
@@ -47,11 +47,11 @@ const backgroundColor = {
 };
 
 const borderColor = {
-    primary: colors.neutral[850],
-    secondary: colors.neutral[700],
-    muted: colors.neutral[750],
-    focused: colors.neutral[100],
-    active: colors.neutral[500],
+    primary: colors.neutral[875],
+    secondary: colors.neutral[825],
+    muted: colors.neutral[775],
+    focused: colors.neutral[500],
+    active: colors.neutral[900],
     ok: colors.green[500],
     error: colors.red[500],
     warning: colors.amber[500],
@@ -59,13 +59,13 @@ const borderColor = {
 };
 
 const textColor = {
-    primary: colors.neutral[100],
+    primary: colors.neutral[50],
     secondary: colors.neutral[350],
     muted: colors.neutral[550],
     placeholder: colors.neutral[750],
     active: colors.neutral[0],
     //TODO: (design) define feature and it's correct value
-    feature: colors.lime[400],
+    feature: colors.sky[500],
     ok: colors.green[600],
     error: colors.red[400],
     warning: colors.amber[300],
@@ -73,11 +73,11 @@ const textColor = {
 };
 
 const iconColor = {
-    primary: colors.neutral[300],
-    secondary: colors.neutral[500],
+    primary: colors.neutral[200],
+    secondary: colors.neutral[350],
     muted: colors.neutral[600],
     placeholder: colors.neutral[700],
-    active: colors.neutral[50],
+    active: colors.neutral[0],
     //TODO: (design) define feature and it's correct value
     feature: colors.sky[500],
     ok: colors.green[600],

styles/tokens.ts

@@ -72,7 +72,7 @@ export interface ColorToken {
   step?: number,
 }
 export const colors = {
-  neutral: colorRamp(["white", "black"], { steps: 19, increment: 50 }),
+  neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
   rose: colorRamp("#F43F5EFF"),
   red: colorRamp("#EF4444FF"),
   orange: colorRamp("#F97316FF"),

styles/utils/color.ts

@@ -8,7 +8,7 @@ export type ColorRamp = {
 
 export function colorRamp(
   color: Color | [Color, Color],
-  options?: { steps?: number; increment?: number }
+  options?: { steps?: number; increment?: number; }
 ): ColorRamp {
   let scale: Scale;
   if (Array.isArray(color)) {