diff --git a/crates/zed/assets/themes/dark.json b/crates/zed/assets/themes/dark.json index 0abf380cc1..25568bf17c 100644 --- a/crates/zed/assets/themes/dark.json +++ b/crates/zed/assets/themes/dark.json @@ -1,6 +1,6 @@ { "selector": { - "background": "#000000", + "background": "#1c1c1c", "corner_radius": 6, "padding": 8, "item": { @@ -18,7 +18,7 @@ }, "highlight_text": { "family": "Zed Sans", - "color": "#72ad19", + "color": "#1684b6", "weight": "bold", "size": 14 } @@ -33,19 +33,19 @@ "corner_radius": 6, "text": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#72ad19", + "color": "#1684b6", "weight": "bold", "size": 14 }, - "background": "#1c1c1c" + "background": "#2b2b2b" }, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "empty": { @@ -62,7 +62,7 @@ } }, "input_editor": { - "background": "#1c1c1c", + "background": "#000000", "corner_radius": 6, "placeholder_text": { "family": "Zed Sans", @@ -75,11 +75,11 @@ }, "text": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 16 }, "border": { - "color": "#0e0e0e", + "color": "#151515", "width": 1 }, "padding": { @@ -109,8 +109,8 @@ "tab": { "height": 32, "background": "#1c1c1c", - "icon_close": "#717171", - "icon_close_active": "#f1f1f1", + "icon_close": "#555555", + "icon_close_active": "#ffffff", "icon_conflict": "#c38214", "icon_dirty": "#195cc8", "icon_width": 8, @@ -121,7 +121,7 @@ "size": 14 }, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "left": true, "bottom": true, @@ -135,8 +135,8 @@ "active_tab": { "height": 32, "background": "#000000", - "icon_close": "#717171", - "icon_close_active": "#f1f1f1", + "icon_close": "#555555", + "icon_close_active": "#ffffff", "icon_conflict": "#c38214", "icon_dirty": "#195cc8", "icon_width": 8, @@ -147,7 +147,7 @@ "size": 14 }, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "left": true, "bottom": false, @@ -162,22 +162,22 @@ "width": 30, "background": "#1c1c1c", "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "right": true }, "item": { "height": 32, - "icon_color": "#717171", + "icon_color": "#9c9c9c", "icon_size": 18 }, "active_item": { "height": 32, - "icon_color": "#f1f1f1", + "icon_color": "#ffffff", "icon_size": 18 }, "resize_handle": { - "background": "#0e0e0e", + "background": "#070707", "padding": { "left": 1 } @@ -187,29 +187,29 @@ "width": 30, "background": "#1c1c1c", "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "left": true }, "item": { "height": 32, - "icon_color": "#717171", + "icon_color": "#9c9c9c", "icon_size": 18 }, "active_item": { "height": 32, - "icon_color": "#f1f1f1", + "icon_color": "#ffffff", "icon_size": 18 }, "resize_handle": { - "background": "#0e0e0e", + "background": "#070707", "padding": { "left": 1 } } }, "pane_divider": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "status_bar": { @@ -238,12 +238,12 @@ "titlebar": { "avatar_width": 18, "height": 32, - "background": "#393939", - "share_icon_color": "#717171", - "share_icon_active_color": "#f1f1f1", + "background": "#2b2b2b", + "share_icon_color": "#9c9c9c", + "share_icon_active_color": "#ffffff", "title": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 }, "avatar": { @@ -258,7 +258,7 @@ "width": 12 }, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "bottom": true }, @@ -281,7 +281,7 @@ } }, "offline_icon": { - "color": "#717171", + "color": "#9c9c9c", "width": 16, "padding": { "right": 4 @@ -297,7 +297,7 @@ "height": 34, "background": "#000000", "border": { - "color": "#2b2b2b", + "color": "#070707", "width": 1, "bottom": true }, @@ -325,10 +325,10 @@ } }, "editor": { - "text_color": "#e3e3e3", + "text_color": "#f1f1f1", "background": "#000000", - "active_line_background": "#1c1c1c", - "code_actions_indicator": "#717171", + "active_line_background": "#0e0e0e", + "code_actions_indicator": "#9c9c9c", "diff_background_deleted": "#d71c1c", "diff_background_inserted": "#1ea34f", "document_highlight_read_background": "#1e22db", @@ -336,7 +336,7 @@ "error_color": "#d71c1c", "gutter_background": "#000000", "gutter_padding_factor": 2.5, - "highlighted_line_background": "#0e0e0e", + "highlighted_line_background": "#070707", "line_number": "#636363", "line_number_active": "#ffffff", "rename_fade": 0.6, @@ -380,7 +380,7 @@ "corner_radius": 6, "padding": 6, "border": { - "color": "#393939", + "color": "#151515", "width": 1 }, "item": { @@ -400,7 +400,7 @@ "right": 6, "top": 2 }, - "background": "#0e0e0e" + "background": "#070707" }, "margin": { "left": -14 @@ -417,7 +417,7 @@ "right": 6, "top": 2 }, - "background": "#1c1c1c" + "background": "#0e0e0e" } }, "diagnostic_header": { @@ -425,7 +425,7 @@ "icon_width_factor": 1.5, "text_scale_factor": 0.857, "border": { - "color": "#393939", + "color": "#151515", "width": 1, "bottom": true, "top": true @@ -441,7 +441,7 @@ "message": { "highlight_text": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14, "weight": "bold" }, @@ -453,11 +453,11 @@ } }, "diagnostic_path_header": { - "background": "#1c1c1c", + "background": "#0e0e0e", "text_scale_factor": 0.857, "filename": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 }, "path": { @@ -473,7 +473,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -496,7 +496,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -519,7 +519,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -542,7 +542,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -565,7 +565,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -588,7 +588,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -611,7 +611,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -634,7 +634,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1, "top": true } @@ -661,7 +661,7 @@ "tab_summary_spacing": 10, "empty_message": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 }, "status_bar_item": { @@ -691,7 +691,7 @@ }, "hovered_entry": { "height": 22, - "background": "#1c1c1c", + "background": "#232323", "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, @@ -708,19 +708,19 @@ "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 } }, "hovered_selected_entry": { "height": 22, - "background": "#1c1c1c", + "background": "#232323", "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 } } @@ -734,7 +734,7 @@ }, "channel_name": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "weight": "bold", "size": 14 }, @@ -750,7 +750,7 @@ "header": { "name": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 }, "padding": { @@ -799,13 +799,13 @@ "right": 8 } }, - "background": "#1c1c1c", + "background": "#232323", "corner_radius": 6 }, "active_item": { "name": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 }, "padding": 4, @@ -822,7 +822,7 @@ "hovered_active_item": { "name": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14 }, "padding": 4, @@ -834,7 +834,7 @@ "right": 8 } }, - "background": "#1c1c1c", + "background": "#232323", "corner_radius": 6 }, "menu": { @@ -842,7 +842,7 @@ "corner_radius": 6, "padding": 4, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "shadow": { @@ -863,7 +863,7 @@ }, "hovered_sign_in_prompt": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "underline": true, "size": 14 }, @@ -883,7 +883,7 @@ }, "sender": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "weight": "bold", "size": 14, "margin": { @@ -920,7 +920,7 @@ "corner_radius": 6, "text": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 16 }, "placeholder_text": { @@ -933,7 +933,7 @@ "selection": "#307af3" }, "border": { - "color": "#393939", + "color": "#151515", "width": 1 }, "padding": { @@ -952,7 +952,7 @@ "right": 12 }, "host_row_height": 28, - "tree_branch_color": "#2b2b2b", + "tree_branch_color": "#232323", "tree_branch_width": 1, "host_avatar": { "corner_radius": 10, @@ -994,7 +994,7 @@ }, "name": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 16, "margin": { "right": 6 @@ -1013,7 +1013,7 @@ }, "name": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 16, "margin": { "right": 6 @@ -1022,7 +1022,7 @@ "padding": { "left": 8 }, - "background": "#1c1c1c", + "background": "#0e0e0e", "corner_radius": 6 }, "unshared_project": { @@ -1062,7 +1062,7 @@ "padding": { "left": 8 }, - "background": "#1c1c1c", + "background": "#0e0e0e", "corner_radius": 6 } }, @@ -1074,10 +1074,10 @@ "family": "Zed Mono", "color": "#9c9c9c", "size": 16, - "background": "#393939", + "background": "#2b2b2b", "corner_radius": 6, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "margin": { @@ -1095,10 +1095,10 @@ "family": "Zed Mono", "color": "#9c9c9c", "size": 16, - "background": "#393939", + "background": "#2b2b2b", "corner_radius": 6, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "margin": { @@ -1128,11 +1128,11 @@ }, "text": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 16 }, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "margin": { @@ -1149,10 +1149,10 @@ "family": "Zed Mono", "color": "#9c9c9c", "size": 16, - "background": "#393939", + "background": "#2b2b2b", "corner_radius": 6, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "margin": { @@ -1182,7 +1182,7 @@ }, "text": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 16 }, "border": { @@ -1212,7 +1212,7 @@ "background": "#1c1c1c", "corner_radius": 6, "border": { - "color": "#0e0e0e", + "color": "#070707", "width": 1 }, "margin": { @@ -1234,13 +1234,13 @@ }, "results_status": { "family": "Zed Mono", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 18 } }, "breadcrumbs": { "family": "Zed Sans", - "color": "#e3e3e3", + "color": "#f1f1f1", "size": 14, "padding": { "left": 6 diff --git a/crates/zed/assets/themes/light.json b/crates/zed/assets/themes/light.json index 1024764540..76fe01501d 100644 --- a/crates/zed/assets/themes/light.json +++ b/crates/zed/assets/themes/light.json @@ -1,6 +1,6 @@ { "selector": { - "background": "#ffffff", + "background": "#f1f1f1", "corner_radius": 6, "padding": 8, "item": { @@ -42,7 +42,7 @@ "weight": "bold", "size": 14 }, - "background": "#e3e3e3" + "background": "#d5d5d5" }, "border": { "color": "#c6c6c6", @@ -62,7 +62,7 @@ } }, "input_editor": { - "background": "#f1f1f1", + "background": "#ffffff", "corner_radius": 6, "placeholder_text": { "family": "Zed Sans", @@ -79,7 +79,7 @@ "size": 16 }, "border": { - "color": "#c6c6c6", + "color": "#e3e3e3", "width": 1 }, "padding": { @@ -109,7 +109,7 @@ "tab": { "height": 32, "background": "#f1f1f1", - "icon_close": "#717171", + "icon_close": "#555555", "icon_close_active": "#000000", "icon_conflict": "#bc9212", "icon_dirty": "#195cc8", @@ -135,7 +135,7 @@ "active_tab": { "height": 32, "background": "#ffffff", - "icon_close": "#717171", + "icon_close": "#555555", "icon_close_active": "#000000", "icon_conflict": "#bc9212", "icon_dirty": "#195cc8", @@ -297,7 +297,7 @@ "height": 34, "background": "#ffffff", "border": { - "color": "#f1f1f1", + "color": "#c6c6c6", "width": 1, "bottom": true }, diff --git a/styles/buildThemes.ts b/styles/buildThemes.ts index 9128eff45d..a1a07ecb2d 100644 --- a/styles/buildThemes.ts +++ b/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)); } diff --git a/styles/styleTree/selectorModal.ts b/styles/styleTree/selectorModal.ts index fdebe712fa..47355cff11 100644 --- a/styles/styleTree/selectorModal.ts +++ b/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, diff --git a/styles/styleTree/workspace.ts b/styles/styleTree/workspace.ts index a734528d74..4349ba0ab6 100644 --- a/styles/styleTree/workspace.ts +++ b/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 }, }, diff --git a/styles/themes/dark.ts b/styles/themes/dark.ts index fa05576cd2..3cb3b653b4 100644 --- a/styles/themes/dark.ts +++ b/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], diff --git a/styles/tokens.ts b/styles/tokens.ts index 63c19a9d64..aa865ae694 100644 --- a/styles/tokens.ts +++ b/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"), diff --git a/styles/utils/color.ts b/styles/utils/color.ts index 1042899c73..c7506f696d 100644 --- a/styles/utils/color.ts +++ b/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)) {