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:
Nate Butler 2022-04-27 13:23:58 -04:00 committed by Max Brunsfeld
parent 68a7f99c14
commit b23ff7c3ad
11 changed files with 87 additions and 89 deletions

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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": {

View file

@ -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 = {

View file

@ -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),

View file

@ -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: {