Update semantic status colors in all themes
- for `ok`, `error`, `warning` and `info`: - backgroundColor values were all placeholder. Add real values - Update border values to new style
This commit is contained in:
parent
68a7f99c14
commit
b23ff7c3ad
11 changed files with 87 additions and 89 deletions
|
@ -402,8 +402,8 @@
|
|||
"background": "#19171c",
|
||||
"active_line_background": "#efecf412",
|
||||
"code_actions_indicator": "#8b8792",
|
||||
"diff_background_deleted": "#be4678",
|
||||
"diff_background_inserted": "#2a9292",
|
||||
"diff_background_deleted": "#be467826",
|
||||
"diff_background_inserted": "#2a929226",
|
||||
"document_highlight_read_background": "#19171c1f",
|
||||
"document_highlight_write_background": "#19171c29",
|
||||
"error_color": "#be4678",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#be4678",
|
||||
"color": "#be467826",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -402,8 +402,8 @@
|
|||
"background": "#efecf4",
|
||||
"active_line_background": "#19171c12",
|
||||
"code_actions_indicator": "#585260",
|
||||
"diff_background_deleted": "#be4678",
|
||||
"diff_background_inserted": "#2a9292",
|
||||
"diff_background_deleted": "#be467826",
|
||||
"diff_background_inserted": "#2a929226",
|
||||
"document_highlight_read_background": "#efecf41f",
|
||||
"document_highlight_write_background": "#efecf429",
|
||||
"error_color": "#be4678",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#be4678",
|
||||
"color": "#be467826",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -402,8 +402,8 @@
|
|||
"background": "#000000",
|
||||
"active_line_background": "#ffffff12",
|
||||
"code_actions_indicator": "#555555",
|
||||
"diff_background_deleted": "#f15656",
|
||||
"diff_background_inserted": "#1b9447",
|
||||
"diff_background_deleted": "#c9181826",
|
||||
"diff_background_inserted": "#1b944726",
|
||||
"document_highlight_read_background": "#ffffff1f",
|
||||
"document_highlight_write_background": "#ffffff29",
|
||||
"error_color": "#f15656",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#eb2d2d",
|
||||
"color": "#eb2d2d26",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -402,8 +402,8 @@
|
|||
"background": "#ffffff",
|
||||
"active_line_background": "#0000000f",
|
||||
"code_actions_indicator": "#9c9c9c",
|
||||
"diff_background_deleted": "#fcc6c6",
|
||||
"diff_background_inserted": "#b7f9ce",
|
||||
"diff_background_deleted": "#c9181826",
|
||||
"diff_background_inserted": "#1b944726",
|
||||
"document_highlight_read_background": "#0000000f",
|
||||
"document_highlight_write_background": "#00000029",
|
||||
"error_color": "#eb2d2d",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#f9a0a0",
|
||||
"color": "#eb2d2d26",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -402,8 +402,8 @@
|
|||
"background": "#002b36",
|
||||
"active_line_background": "#fdf6e312",
|
||||
"code_actions_indicator": "#93a1a1",
|
||||
"diff_background_deleted": "#dc322f",
|
||||
"diff_background_inserted": "#859900",
|
||||
"diff_background_deleted": "#dc322f26",
|
||||
"diff_background_inserted": "#85990026",
|
||||
"document_highlight_read_background": "#002b361f",
|
||||
"document_highlight_write_background": "#002b3629",
|
||||
"error_color": "#dc322f",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#dc322f",
|
||||
"color": "#dc322f26",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -402,8 +402,8 @@
|
|||
"background": "#fdf6e3",
|
||||
"active_line_background": "#002b3612",
|
||||
"code_actions_indicator": "#586e75",
|
||||
"diff_background_deleted": "#dc322f",
|
||||
"diff_background_inserted": "#859900",
|
||||
"diff_background_deleted": "#dc322f26",
|
||||
"diff_background_inserted": "#85990026",
|
||||
"document_highlight_read_background": "#fdf6e31f",
|
||||
"document_highlight_write_background": "#fdf6e329",
|
||||
"error_color": "#dc322f",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#dc322f",
|
||||
"color": "#dc322f26",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -402,8 +402,8 @@
|
|||
"background": "#202746",
|
||||
"active_line_background": "#f5f7ff12",
|
||||
"code_actions_indicator": "#979db4",
|
||||
"diff_background_deleted": "#c94922",
|
||||
"diff_background_inserted": "#ac9739",
|
||||
"diff_background_deleted": "#c9492226",
|
||||
"diff_background_inserted": "#ac973926",
|
||||
"document_highlight_read_background": "#2027461f",
|
||||
"document_highlight_write_background": "#20274629",
|
||||
"error_color": "#c94922",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#c94922",
|
||||
"color": "#c9492226",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -402,8 +402,8 @@
|
|||
"background": "#f5f7ff",
|
||||
"active_line_background": "#20274612",
|
||||
"code_actions_indicator": "#5e6687",
|
||||
"diff_background_deleted": "#c94922",
|
||||
"diff_background_inserted": "#ac9739",
|
||||
"diff_background_deleted": "#c9492226",
|
||||
"diff_background_inserted": "#ac973926",
|
||||
"document_highlight_read_background": "#f5f7ff1f",
|
||||
"document_highlight_write_background": "#f5f7ff29",
|
||||
"error_color": "#c94922",
|
||||
|
@ -1369,7 +1369,7 @@
|
|||
"size": 14
|
||||
},
|
||||
"border": {
|
||||
"color": "#c94922",
|
||||
"color": "#c9492226",
|
||||
"width": 1
|
||||
},
|
||||
"margin": {
|
||||
|
|
|
@ -51,28 +51,28 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
|
|||
focused: neutral[3],
|
||||
},
|
||||
ok: {
|
||||
base: accent.green,
|
||||
hovered: accent.green,
|
||||
active: accent.green,
|
||||
focused: accent.green,
|
||||
base: withOpacity(accent.green, 0.15),
|
||||
hovered: withOpacity(accent.green, 0.20),
|
||||
active: withOpacity(accent.green, 0.25),
|
||||
focused: withOpacity(accent.green, 0.20),
|
||||
},
|
||||
error: {
|
||||
base: accent.red,
|
||||
hovered: accent.red,
|
||||
active: accent.red,
|
||||
focused: accent.red,
|
||||
base: withOpacity(accent.red, 0.15),
|
||||
hovered: withOpacity(accent.red, 0.20),
|
||||
active: withOpacity(accent.red, 0.25),
|
||||
focused: withOpacity(accent.red, 0.20),
|
||||
},
|
||||
warning: {
|
||||
base: accent.yellow,
|
||||
hovered: accent.yellow,
|
||||
active: accent.yellow,
|
||||
focused: accent.yellow,
|
||||
base: withOpacity(accent.yellow, 0.15),
|
||||
hovered: withOpacity(accent.yellow, 0.20),
|
||||
active: withOpacity(accent.yellow, 0.25),
|
||||
focused: withOpacity(accent.yellow, 0.20),
|
||||
},
|
||||
info: {
|
||||
base: accent.blue,
|
||||
hovered: accent.blue,
|
||||
active: accent.blue,
|
||||
focused: accent.blue,
|
||||
base: withOpacity(accent.blue, 0.15),
|
||||
hovered: withOpacity(accent.blue, 0.20),
|
||||
active: withOpacity(accent.blue, 0.25),
|
||||
focused: withOpacity(accent.blue, 0.20),
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -82,10 +82,10 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
|
|||
muted: neutral[3],
|
||||
focused: neutral[3],
|
||||
active: neutral[3],
|
||||
ok: accent.green,
|
||||
error: accent.red,
|
||||
warning: accent.yellow,
|
||||
info: accent.blue,
|
||||
ok: withOpacity(accent.green, 0.15),
|
||||
error: withOpacity(accent.red, 0.15),
|
||||
warning: withOpacity(accent.yellow, 0.15),
|
||||
info: withOpacity(accent.blue, 0.15),
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
|
|
|
@ -34,28 +34,28 @@ const backgroundColor = {
|
|||
focused: colors.neutral[800],
|
||||
},
|
||||
ok: {
|
||||
base: colors.green[600],
|
||||
hovered: colors.green[600],
|
||||
active: colors.green[600],
|
||||
focused: colors.green[600],
|
||||
base: withOpacity(colors.green[600], 0.15),
|
||||
hovered: withOpacity(colors.green[600], 0.20),
|
||||
active: withOpacity(colors.green[600], 0.25),
|
||||
focused: withOpacity(colors.green[600], 0.20),
|
||||
},
|
||||
error: {
|
||||
base: colors.red[400],
|
||||
hovered: colors.red[400],
|
||||
active: colors.red[400],
|
||||
focused: colors.red[400],
|
||||
base: withOpacity(colors.red[600], 0.15),
|
||||
hovered: withOpacity(colors.red[600], 0.20),
|
||||
active: withOpacity(colors.red[600], 0.25),
|
||||
focused: withOpacity(colors.red[600], 0.20),
|
||||
},
|
||||
warning: {
|
||||
base: colors.amber[300],
|
||||
hovered: colors.amber[300],
|
||||
active: colors.amber[300],
|
||||
focused: colors.amber[300],
|
||||
base: withOpacity(colors.amber[400], 0.15),
|
||||
hovered: withOpacity(colors.amber[400], 0.20),
|
||||
active: withOpacity(colors.amber[400], 0.25),
|
||||
focused: withOpacity(colors.amber[400], 0.20),
|
||||
},
|
||||
info: {
|
||||
base: colors.blue[500],
|
||||
hovered: colors.blue[500],
|
||||
active: colors.blue[500],
|
||||
focused: colors.blue[500],
|
||||
base: withOpacity(colors.blue[500], 0.15),
|
||||
hovered: withOpacity(colors.blue[500], 0.20),
|
||||
active: withOpacity(colors.blue[500], 0.25),
|
||||
focused: withOpacity(colors.blue[500], 0.20),
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -65,10 +65,10 @@ const borderColor = {
|
|||
muted: colors.neutral[675],
|
||||
focused: colors.indigo[500],
|
||||
active: colors.neutral[900],
|
||||
ok: colors.green[500],
|
||||
error: colors.red[500],
|
||||
warning: colors.amber[500],
|
||||
info: colors.blue[500],
|
||||
ok: withOpacity(colors.green[600], 0.15),
|
||||
error: withOpacity(colors.red[500], 0.15),
|
||||
warning: withOpacity(colors.amber[400], 0.15),
|
||||
info: withOpacity(colors.blue[500], 0.15),
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
|
@ -77,7 +77,6 @@ const textColor = {
|
|||
muted: colors.neutral[450],
|
||||
placeholder: colors.neutral[650],
|
||||
active: colors.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: colors.blue[400],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[400],
|
||||
|
@ -91,7 +90,6 @@ const iconColor = {
|
|||
muted: colors.neutral[600],
|
||||
placeholder: colors.neutral[700],
|
||||
active: colors.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: colors.blue[500],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[500],
|
||||
|
@ -124,7 +122,7 @@ const editor = {
|
|||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.neutral[0], 0.12),
|
||||
activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
|
||||
activeOccurrence: withOpacity(colors.neutral[0], 0.16),
|
||||
matchingBracket: backgroundColor[500].active,
|
||||
match: withOpacity(colors.violet[700], 0.5),
|
||||
activeMatch: withOpacity(colors.violet[600], 0.7),
|
||||
|
|
|
@ -34,28 +34,28 @@ const backgroundColor = {
|
|||
focused: colors.neutral[25],
|
||||
},
|
||||
ok: {
|
||||
base: colors.green[100],
|
||||
hovered: colors.green[100],
|
||||
active: colors.green[100],
|
||||
focused: colors.green[100],
|
||||
base: withOpacity(colors.green[600], 0.15),
|
||||
hovered: withOpacity(colors.green[600], 0.20),
|
||||
active: withOpacity(colors.green[600], 0.25),
|
||||
focused: withOpacity(colors.green[600], 0.20),
|
||||
},
|
||||
error: {
|
||||
base: colors.red[100],
|
||||
hovered: colors.red[100],
|
||||
active: colors.red[100],
|
||||
focused: colors.red[100],
|
||||
base: withOpacity(colors.red[600], 0.15),
|
||||
hovered: withOpacity(colors.red[600], 0.20),
|
||||
active: withOpacity(colors.red[600], 0.25),
|
||||
focused: withOpacity(colors.red[600], 0.20),
|
||||
},
|
||||
warning: {
|
||||
base: colors.yellow[100],
|
||||
hovered: colors.yellow[100],
|
||||
active: colors.yellow[100],
|
||||
focused: colors.yellow[100],
|
||||
base: withOpacity(colors.amber[400], 0.15),
|
||||
hovered: withOpacity(colors.amber[400], 0.20),
|
||||
active: withOpacity(colors.amber[400], 0.25),
|
||||
focused: withOpacity(colors.amber[400], 0.20),
|
||||
},
|
||||
info: {
|
||||
base: colors.blue[100],
|
||||
hovered: colors.blue[100],
|
||||
active: colors.blue[100],
|
||||
focused: colors.blue[100],
|
||||
base: withOpacity(colors.blue[500], 0.15),
|
||||
hovered: withOpacity(colors.blue[500], 0.20),
|
||||
active: withOpacity(colors.blue[500], 0.25),
|
||||
focused: withOpacity(colors.blue[500], 0.20),
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -65,10 +65,10 @@ const borderColor = {
|
|||
muted: colors.neutral[100],
|
||||
focused: colors.indigo[500],
|
||||
active: colors.neutral[250],
|
||||
ok: colors.green[200],
|
||||
error: colors.red[200],
|
||||
warning: colors.yellow[200],
|
||||
info: colors.blue[200],
|
||||
ok: withOpacity(colors.green[600], 0.15),
|
||||
error: withOpacity(colors.red[500], 0.15),
|
||||
warning: withOpacity(colors.amber[400], 0.15),
|
||||
info: withOpacity(colors.blue[500], 0.15),
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
|
@ -122,10 +122,10 @@ const editor = {
|
|||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.neutral[900], 0.06),
|
||||
activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
|
||||
activeOccurrence: withOpacity(colors.neutral[900], 0.16),
|
||||
matchingBracket: colors.neutral[0],
|
||||
match: colors.yellow[100],
|
||||
activeMatch: colors.yellow[200], // TODO: This is not hooked up to occurences on the rust side
|
||||
activeMatch: colors.yellow[200],
|
||||
related: colors.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue