Update base16 theme occurrence style

- Update base16 theme occurrence style to be visible
- Update match styles to use the blend scaling value
  - This makes it so matches are less loud in light themes
This commit is contained in:
Nate Butler 2022-04-30 00:47:07 -04:00
parent d4bef67cf2
commit f63444ce6d
7 changed files with 83 additions and 83 deletions

View file

@ -23,7 +23,7 @@
"size": 14 "size": 14
}, },
"active": { "active": {
"background": "#5852607a", "background": "#5852605c",
"text": { "text": {
"family": "Zed Sans", "family": "Zed Sans",
"color": "#e2dfe7", "color": "#e2dfe7",
@ -31,7 +31,7 @@
} }
}, },
"hover": { "hover": {
"background": "#58526052" "background": "#5852603d"
} }
}, },
"border": { "border": {
@ -81,7 +81,7 @@
}, },
"shadow": { "shadow": {
"blur": 16, "blur": 16,
"color": "#00000052", "color": "#0000003d",
"offset": [ "offset": [
0, 0,
2 2
@ -215,7 +215,7 @@
"size": 14 "size": 14
}, },
"icon_color": "#e2dfe7", "icon_color": "#e2dfe7",
"background": "#58526052" "background": "#5852603d"
} }
}, },
"diagnostic_message": { "diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7, "left": 7,
"right": 7 "right": 7
}, },
"background": "#58526052" "background": "#5852603d"
}, },
"container_warning": { "container_warning": {
"corner_radius": 6, "corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#8b8792", "icon_color": "#8b8792",
"hover": { "hover": {
"icon_color": "#e2dfe7", "icon_color": "#e2dfe7",
"background": "#58526052" "background": "#5852603d"
}, },
"active": { "active": {
"icon_color": "#efecf4", "icon_color": "#efecf4",
"background": "#5852607a" "background": "#5852605c"
} }
} }
} }
@ -411,15 +411,15 @@
}, },
"color": "#8b8792", "color": "#8b8792",
"hover": { "hover": {
"background": "#58526052", "background": "#5852603d",
"color": "#8b8792" "color": "#8b8792"
}, },
"active": { "active": {
"background": "#5852607a", "background": "#5852605c",
"color": "#efecf4" "color": "#efecf4"
}, },
"active_hover": { "active_hover": {
"background": "#58526052", "background": "#5852603d",
"color": "#efecf4" "color": "#efecf4"
} }
}, },
@ -480,8 +480,8 @@
"code_actions_indicator": "#8b8792", "code_actions_indicator": "#8b8792",
"diff_background_deleted": "#be467826", "diff_background_deleted": "#be467826",
"diff_background_inserted": "#2a929226", "diff_background_inserted": "#2a929226",
"document_highlight_read_background": "#19171c1f", "document_highlight_read_background": "#efecf41f",
"document_highlight_write_background": "#19171c29", "document_highlight_write_background": "#efecf43d",
"error_color": "#be4678", "error_color": "#be4678",
"gutter_background": "#19171c", "gutter_background": "#19171c",
"gutter_padding_factor": 3.5, "gutter_padding_factor": 3.5,
@ -549,7 +549,7 @@
"right": 6, "right": 6,
"top": 2 "top": 2
}, },
"background": "#26232a52" "background": "#26232a3d"
}, },
"margin": { "margin": {
"left": -14 "left": -14
@ -567,7 +567,7 @@
"right": 6, "right": 6,
"top": 2 "top": 2
}, },
"background": "#26232a7a" "background": "#26232a5c"
} }
}, },
"diagnostic_header": { "diagnostic_header": {
@ -951,7 +951,7 @@
}, },
"hovered_entry": { "hovered_entry": {
"height": 24, "height": 24,
"background": "#58526052", "background": "#5852603d",
"icon_color": "#8b8792", "icon_color": "#8b8792",
"icon_size": 8, "icon_size": 8,
"icon_spacing": 8, "icon_spacing": 8,
@ -974,7 +974,7 @@
}, },
"hovered_selected_entry": { "hovered_selected_entry": {
"height": 24, "height": 24,
"background": "#58526052", "background": "#5852603d",
"icon_color": "#8b8792", "icon_color": "#8b8792",
"icon_size": 8, "icon_size": 8,
"icon_spacing": 8, "icon_spacing": 8,
@ -1059,7 +1059,7 @@
"right": 8 "right": 8
} }
}, },
"background": "#58526052", "background": "#5852603d",
"corner_radius": 6 "corner_radius": 6
}, },
"active_item": { "active_item": {
@ -1094,7 +1094,7 @@
"right": 8 "right": 8
} }
}, },
"background": "#58526052", "background": "#5852603d",
"corner_radius": 6 "corner_radius": 6
}, },
"menu": { "menu": {
@ -1107,7 +1107,7 @@
}, },
"shadow": { "shadow": {
"blur": 16, "blur": 16,
"color": "#00000052", "color": "#0000003d",
"offset": [ "offset": [
0, 0,
2 2
@ -1284,7 +1284,7 @@
"padding": { "padding": {
"left": 8 "left": 8
}, },
"background": "#58526052", "background": "#5852603d",
"corner_radius": 6 "corner_radius": 6
}, },
"unshared_project": { "unshared_project": {
@ -1328,7 +1328,7 @@
} }
}, },
"search": { "search": {
"match_background": "#955ae780", "match_background": "#955ae77a",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"option_button": { "option_button": {
@ -1354,7 +1354,7 @@
"family": "Zed Mono", "family": "Zed Mono",
"color": "#efecf4", "color": "#efecf4",
"size": 14, "size": 14,
"background": "#585260a3", "background": "#5852607a",
"border": { "border": {
"color": "#655f6d", "color": "#655f6d",
"width": 1 "width": 1
@ -1364,7 +1364,7 @@
"family": "Zed Mono", "family": "Zed Mono",
"color": "#efecf4", "color": "#efecf4",
"size": 14, "size": 14,
"background": "#58526052", "background": "#5852603d",
"border": { "border": {
"color": "#655f6d", "color": "#655f6d",
"width": 1 "width": 1

View file

@ -480,8 +480,8 @@
"code_actions_indicator": "#585260", "code_actions_indicator": "#585260",
"diff_background_deleted": "#be467826", "diff_background_deleted": "#be467826",
"diff_background_inserted": "#2a929226", "diff_background_inserted": "#2a929226",
"document_highlight_read_background": "#efecf41f", "document_highlight_read_background": "#19171c0f",
"document_highlight_write_background": "#efecf429", "document_highlight_write_background": "#19171c1f",
"error_color": "#be4678", "error_color": "#be4678",
"gutter_background": "#efecf4", "gutter_background": "#efecf4",
"gutter_padding_factor": 3.5, "gutter_padding_factor": 3.5,
@ -1328,7 +1328,7 @@
} }
}, },
"search": { "search": {
"match_background": "#955ae780", "match_background": "#955ae73d",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"option_button": { "option_button": {

View file

@ -23,7 +23,7 @@
"size": 14 "size": 14
}, },
"active": { "active": {
"background": "#586e757a", "background": "#586e755c",
"text": { "text": {
"family": "Zed Sans", "family": "Zed Sans",
"color": "#eee8d5", "color": "#eee8d5",
@ -31,7 +31,7 @@
} }
}, },
"hover": { "hover": {
"background": "#586e7552" "background": "#586e753d"
} }
}, },
"border": { "border": {
@ -81,7 +81,7 @@
}, },
"shadow": { "shadow": {
"blur": 16, "blur": 16,
"color": "#00000052", "color": "#0000003d",
"offset": [ "offset": [
0, 0,
2 2
@ -215,7 +215,7 @@
"size": 14 "size": 14
}, },
"icon_color": "#eee8d5", "icon_color": "#eee8d5",
"background": "#586e7552" "background": "#586e753d"
} }
}, },
"diagnostic_message": { "diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7, "left": 7,
"right": 7 "right": 7
}, },
"background": "#586e7552" "background": "#586e753d"
}, },
"container_warning": { "container_warning": {
"corner_radius": 6, "corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#93a1a1", "icon_color": "#93a1a1",
"hover": { "hover": {
"icon_color": "#eee8d5", "icon_color": "#eee8d5",
"background": "#586e7552" "background": "#586e753d"
}, },
"active": { "active": {
"icon_color": "#fdf6e3", "icon_color": "#fdf6e3",
"background": "#586e757a" "background": "#586e755c"
} }
} }
} }
@ -411,15 +411,15 @@
}, },
"color": "#93a1a1", "color": "#93a1a1",
"hover": { "hover": {
"background": "#586e7552", "background": "#586e753d",
"color": "#93a1a1" "color": "#93a1a1"
}, },
"active": { "active": {
"background": "#586e757a", "background": "#586e755c",
"color": "#fdf6e3" "color": "#fdf6e3"
}, },
"active_hover": { "active_hover": {
"background": "#586e7552", "background": "#586e753d",
"color": "#fdf6e3" "color": "#fdf6e3"
} }
}, },
@ -480,8 +480,8 @@
"code_actions_indicator": "#93a1a1", "code_actions_indicator": "#93a1a1",
"diff_background_deleted": "#dc322f26", "diff_background_deleted": "#dc322f26",
"diff_background_inserted": "#85990026", "diff_background_inserted": "#85990026",
"document_highlight_read_background": "#002b361f", "document_highlight_read_background": "#fdf6e31f",
"document_highlight_write_background": "#002b3629", "document_highlight_write_background": "#fdf6e33d",
"error_color": "#dc322f", "error_color": "#dc322f",
"gutter_background": "#002b36", "gutter_background": "#002b36",
"gutter_padding_factor": 3.5, "gutter_padding_factor": 3.5,
@ -549,7 +549,7 @@
"right": 6, "right": 6,
"top": 2 "top": 2
}, },
"background": "#07364252" "background": "#0736423d"
}, },
"margin": { "margin": {
"left": -14 "left": -14
@ -567,7 +567,7 @@
"right": 6, "right": 6,
"top": 2 "top": 2
}, },
"background": "#0736427a" "background": "#0736425c"
} }
}, },
"diagnostic_header": { "diagnostic_header": {
@ -951,7 +951,7 @@
}, },
"hovered_entry": { "hovered_entry": {
"height": 24, "height": 24,
"background": "#586e7552", "background": "#586e753d",
"icon_color": "#93a1a1", "icon_color": "#93a1a1",
"icon_size": 8, "icon_size": 8,
"icon_spacing": 8, "icon_spacing": 8,
@ -974,7 +974,7 @@
}, },
"hovered_selected_entry": { "hovered_selected_entry": {
"height": 24, "height": 24,
"background": "#586e7552", "background": "#586e753d",
"icon_color": "#93a1a1", "icon_color": "#93a1a1",
"icon_size": 8, "icon_size": 8,
"icon_spacing": 8, "icon_spacing": 8,
@ -1059,7 +1059,7 @@
"right": 8 "right": 8
} }
}, },
"background": "#586e7552", "background": "#586e753d",
"corner_radius": 6 "corner_radius": 6
}, },
"active_item": { "active_item": {
@ -1094,7 +1094,7 @@
"right": 8 "right": 8
} }
}, },
"background": "#586e7552", "background": "#586e753d",
"corner_radius": 6 "corner_radius": 6
}, },
"menu": { "menu": {
@ -1107,7 +1107,7 @@
}, },
"shadow": { "shadow": {
"blur": 16, "blur": 16,
"color": "#00000052", "color": "#0000003d",
"offset": [ "offset": [
0, 0,
2 2
@ -1284,7 +1284,7 @@
"padding": { "padding": {
"left": 8 "left": 8
}, },
"background": "#586e7552", "background": "#586e753d",
"corner_radius": 6 "corner_radius": 6
}, },
"unshared_project": { "unshared_project": {
@ -1328,7 +1328,7 @@
} }
}, },
"search": { "search": {
"match_background": "#6c71c480", "match_background": "#6c71c47a",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"option_button": { "option_button": {
@ -1354,7 +1354,7 @@
"family": "Zed Mono", "family": "Zed Mono",
"color": "#fdf6e3", "color": "#fdf6e3",
"size": 14, "size": 14,
"background": "#586e75a3", "background": "#586e757a",
"border": { "border": {
"color": "#657b83", "color": "#657b83",
"width": 1 "width": 1
@ -1364,7 +1364,7 @@
"family": "Zed Mono", "family": "Zed Mono",
"color": "#fdf6e3", "color": "#fdf6e3",
"size": 14, "size": 14,
"background": "#586e7552", "background": "#586e753d",
"border": { "border": {
"color": "#657b83", "color": "#657b83",
"width": 1 "width": 1

View file

@ -480,8 +480,8 @@
"code_actions_indicator": "#586e75", "code_actions_indicator": "#586e75",
"diff_background_deleted": "#dc322f26", "diff_background_deleted": "#dc322f26",
"diff_background_inserted": "#85990026", "diff_background_inserted": "#85990026",
"document_highlight_read_background": "#fdf6e31f", "document_highlight_read_background": "#002b360f",
"document_highlight_write_background": "#fdf6e329", "document_highlight_write_background": "#002b361f",
"error_color": "#dc322f", "error_color": "#dc322f",
"gutter_background": "#fdf6e3", "gutter_background": "#fdf6e3",
"gutter_padding_factor": 3.5, "gutter_padding_factor": 3.5,
@ -1328,7 +1328,7 @@
} }
}, },
"search": { "search": {
"match_background": "#6c71c480", "match_background": "#6c71c43d",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"option_button": { "option_button": {

View file

@ -23,7 +23,7 @@
"size": 14 "size": 14
}, },
"active": { "active": {
"background": "#5e66877a", "background": "#5e66875c",
"text": { "text": {
"family": "Zed Sans", "family": "Zed Sans",
"color": "#dfe2f1", "color": "#dfe2f1",
@ -31,7 +31,7 @@
} }
}, },
"hover": { "hover": {
"background": "#5e668752" "background": "#5e66873d"
} }
}, },
"border": { "border": {
@ -81,7 +81,7 @@
}, },
"shadow": { "shadow": {
"blur": 16, "blur": 16,
"color": "#00000052", "color": "#0000003d",
"offset": [ "offset": [
0, 0,
2 2
@ -215,7 +215,7 @@
"size": 14 "size": 14
}, },
"icon_color": "#dfe2f1", "icon_color": "#dfe2f1",
"background": "#5e668752" "background": "#5e66873d"
} }
}, },
"diagnostic_message": { "diagnostic_message": {
@ -288,7 +288,7 @@
"left": 7, "left": 7,
"right": 7 "right": 7
}, },
"background": "#5e668752" "background": "#5e66873d"
}, },
"container_warning": { "container_warning": {
"corner_radius": 6, "corner_radius": 6,
@ -335,11 +335,11 @@
"icon_color": "#979db4", "icon_color": "#979db4",
"hover": { "hover": {
"icon_color": "#dfe2f1", "icon_color": "#dfe2f1",
"background": "#5e668752" "background": "#5e66873d"
}, },
"active": { "active": {
"icon_color": "#f5f7ff", "icon_color": "#f5f7ff",
"background": "#5e66877a" "background": "#5e66875c"
} }
} }
} }
@ -411,15 +411,15 @@
}, },
"color": "#979db4", "color": "#979db4",
"hover": { "hover": {
"background": "#5e668752", "background": "#5e66873d",
"color": "#979db4" "color": "#979db4"
}, },
"active": { "active": {
"background": "#5e66877a", "background": "#5e66875c",
"color": "#f5f7ff" "color": "#f5f7ff"
}, },
"active_hover": { "active_hover": {
"background": "#5e668752", "background": "#5e66873d",
"color": "#f5f7ff" "color": "#f5f7ff"
} }
}, },
@ -480,8 +480,8 @@
"code_actions_indicator": "#979db4", "code_actions_indicator": "#979db4",
"diff_background_deleted": "#c9492226", "diff_background_deleted": "#c9492226",
"diff_background_inserted": "#ac973926", "diff_background_inserted": "#ac973926",
"document_highlight_read_background": "#2027461f", "document_highlight_read_background": "#f5f7ff1f",
"document_highlight_write_background": "#20274629", "document_highlight_write_background": "#f5f7ff3d",
"error_color": "#c94922", "error_color": "#c94922",
"gutter_background": "#202746", "gutter_background": "#202746",
"gutter_padding_factor": 3.5, "gutter_padding_factor": 3.5,
@ -549,7 +549,7 @@
"right": 6, "right": 6,
"top": 2 "top": 2
}, },
"background": "#29325652" "background": "#2932563d"
}, },
"margin": { "margin": {
"left": -14 "left": -14
@ -567,7 +567,7 @@
"right": 6, "right": 6,
"top": 2 "top": 2
}, },
"background": "#2932567a" "background": "#2932565c"
} }
}, },
"diagnostic_header": { "diagnostic_header": {
@ -951,7 +951,7 @@
}, },
"hovered_entry": { "hovered_entry": {
"height": 24, "height": 24,
"background": "#5e668752", "background": "#5e66873d",
"icon_color": "#979db4", "icon_color": "#979db4",
"icon_size": 8, "icon_size": 8,
"icon_spacing": 8, "icon_spacing": 8,
@ -974,7 +974,7 @@
}, },
"hovered_selected_entry": { "hovered_selected_entry": {
"height": 24, "height": 24,
"background": "#5e668752", "background": "#5e66873d",
"icon_color": "#979db4", "icon_color": "#979db4",
"icon_size": 8, "icon_size": 8,
"icon_spacing": 8, "icon_spacing": 8,
@ -1059,7 +1059,7 @@
"right": 8 "right": 8
} }
}, },
"background": "#5e668752", "background": "#5e66873d",
"corner_radius": 6 "corner_radius": 6
}, },
"active_item": { "active_item": {
@ -1094,7 +1094,7 @@
"right": 8 "right": 8
} }
}, },
"background": "#5e668752", "background": "#5e66873d",
"corner_radius": 6 "corner_radius": 6
}, },
"menu": { "menu": {
@ -1107,7 +1107,7 @@
}, },
"shadow": { "shadow": {
"blur": 16, "blur": 16,
"color": "#00000052", "color": "#0000003d",
"offset": [ "offset": [
0, 0,
2 2
@ -1284,7 +1284,7 @@
"padding": { "padding": {
"left": 8 "left": 8
}, },
"background": "#5e668752", "background": "#5e66873d",
"corner_radius": 6 "corner_radius": 6
}, },
"unshared_project": { "unshared_project": {
@ -1328,7 +1328,7 @@
} }
}, },
"search": { "search": {
"match_background": "#6679cc80", "match_background": "#6679cc7a",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"option_button": { "option_button": {
@ -1354,7 +1354,7 @@
"family": "Zed Mono", "family": "Zed Mono",
"color": "#f5f7ff", "color": "#f5f7ff",
"size": 14, "size": 14,
"background": "#5e6687a3", "background": "#5e66877a",
"border": { "border": {
"color": "#6b7394", "color": "#6b7394",
"width": 1 "width": 1
@ -1364,7 +1364,7 @@
"family": "Zed Mono", "family": "Zed Mono",
"color": "#f5f7ff", "color": "#f5f7ff",
"size": 14, "size": 14,
"background": "#5e668752", "background": "#5e66873d",
"border": { "border": {
"color": "#6b7394", "color": "#6b7394",
"width": 1 "width": 1

View file

@ -480,8 +480,8 @@
"code_actions_indicator": "#5e6687", "code_actions_indicator": "#5e6687",
"diff_background_deleted": "#c9492226", "diff_background_deleted": "#c9492226",
"diff_background_inserted": "#ac973926", "diff_background_inserted": "#ac973926",
"document_highlight_read_background": "#f5f7ff1f", "document_highlight_read_background": "#2027460f",
"document_highlight_write_background": "#f5f7ff29", "document_highlight_write_background": "#2027461f",
"error_color": "#c94922", "error_color": "#c94922",
"gutter_background": "#f5f7ff", "gutter_background": "#f5f7ff",
"gutter_padding_factor": 3.5, "gutter_padding_factor": 3.5,
@ -1328,7 +1328,7 @@
} }
}, },
"search": { "search": {
"match_background": "#6679cc80", "match_background": "#6679cc3d",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"option_button": { "option_button": {

View file

@ -17,7 +17,7 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
if (isLight) { if (isLight) {
neutral = [...neutral].reverse(); neutral = [...neutral].reverse();
} }
let blend = isLight ? 0.12 : 0.32; let blend = isLight ? 0.12 : 0.24;
const backgroundColor = { const backgroundColor = {
100: { 100: {
@ -125,11 +125,11 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
}, },
highlight: { highlight: {
selection: player[1].selectionColor, selection: player[1].selectionColor,
occurrence: withOpacity(neutral[0], 0.12), occurrence: withOpacity(neutral[7], blend / 2),
activeOccurrence: withOpacity(neutral[0], 0.16), activeOccurrence: withOpacity(neutral[7], blend),
matchingBracket: backgroundColor[500].active, matchingBracket: backgroundColor[500].active,
match: withOpacity(accent.violet, 0.5), match: withOpacity(accent.violet, blend * 2),
activeMatch: withOpacity(accent.violet, 0.7), activeMatch: withOpacity(accent.violet, blend * 3),
related: backgroundColor[500].focused, related: backgroundColor[500].focused,
}, },
gutter: { gutter: {