Match webviews style to VS Code

[mattseddon]

Tooltips

Current tooltip style:

Dark

Light

After some debate we've decided that we want them to match this style:

Dark (default)

Light (default)

Dark (custom)

Notice the difference when a custom theme is applied:

Hopefully, we can rely on built-in --vscode- css colors . The list of theme colors is here.

Corners

VS Code uses straight corners 99% of the time.

Figma file

Whenever we have control over the corners of a component we should make them straight. Examples where we currently have rounded corners are:

1. Tooltips
2. Plots

Custom Context Menus:

Comment from @maxagin: BG is same as main BG, just adding shadow same as for Command Palette. Basically using same principle as used for the Command Palette.

Experiments table

There are a couple of colors left in the table where we are trying to match "every theme". These should be removed in favour of existing CSS variables. Example:

Current:

$header-bg-color: #303031;
...
$header-bg-color-light: #e1e1e1;
...

    :global(.vscode-light) & {
      background-color: $header-bg-color-light;
    }

replaced with

$header-bg-color: var(--vscode-tree-sideBarSectionHeader-background);

Gives:

Styles to fix:

• Tooltips
• Corners
• Context menus
• Remove non-themeable colors from experiments table

[mattseddon]

These are the colors for the "Quick Picker".

[mattseddon]

@maxagin @yalozhkin please take a look at the above and let me know if you have further feedback.

[mattseddon]

Added another checkbox to the OP

[maxagin]

Suggestions:

1. Row selected idea (theme color, button)
2. Reducing contrast of the even rows

Figma file / Comments & suggestions 26-27042022a

[rogermparent]

Searched for what seems to be all the colors we need to replace with color: [^v\$] and manually removing exceptions like the test stylesheet. Turns out there's fewer than I thought after removing scss variables and other exceptions.

webview/src/experiments/components/table/styles.module.scss:
    7: $border-color: rgb(128, 128, 128, 0.4);
   18: $header-bg-color: #303031;
   19: $meta-cell-color: #a0a0a0;
   20: $toggle-color: rgba(255, 255, 255, 0.21);
   21: $spinner-color: rgb(255, 255, 255);
   22: $metrics-color: #fbd38d;
   23: $params-color: #90cdf4;

webview/src/shared/variables.scss:
  7: $watermark-color: rgba(255, 255, 255, 0.6);

Some shorthand properties like background or border could slip through this search, but I checked those ones manually and found no static colors.

There's also -light variants which will likely be removed

webview/src/experiments/components/table/styles.module.scss:
  26  
  27: $header-bg-color-light: #e1e1e1;
  28: $border-color-light: #7f7f7f;
  29: $metrics-color-light: #ce9f4c;
  30: $params-color-light: #76add1;
  31: $toggle-color-light: rgba(0, 0, 0, 0.21);
  32: $spinner-color-light: #000;
  33  

webview/src/shared/variables.scss:
  10  
  11: $watermark-color-light: rgba(0, 0, 0, 0.68);