TypeScript separator background colour unusually dark, and lacks contrast with text

[timswalling]

Description

The background colour of the key/value separator is unusually dark in TypeScript files, and is almost the same colour as the text colour.

Steps to Reproduce

1. Create a file called test.js
2. Add the following content:

const foo = {
  bar: true
};

3. Rename the file to test.ts

Expected behavior:

There will be little or no change in the text/background colour contrast for the colon that separates the key (bar) from the value (true).

Actual behavior:

The background colour changes from transparent to #373b41, while the text colour changes from #0184bc to #383a42. This is a change in contrast ratio from 4:1 to 1.01:1.

Reproduces how often:

This was reproduced in 100% of my tests.

Versions

Atom : 1.21.0
Electron: 1.6.9
Chrome : 56.0.2924.87
Node : 7.4.0

apm 1.18.5
npm 3.10.10
node 6.9.5 x64
python 2.7.10
git 2.4.1

Additional Information

This appears to be caused by the .syntax--meta.syntax--separator background colour, which is a fixed hex value.

[timswalling]

Also: thank you to all the contributors, especially @simurai, for their work on this!

[jminuscula]

This has also started happening to me with a recent update

[smsalisbury]

Until this is fixed, you can add this to your global stylesheet to make the background color transparent:

.syntax--ts {
  .syntax--meta {
    &.syntax--separator {
      background-color: rgba(0, 0, 0, 0);
    }
  }
}

[rsese]

Thanks for the report! I can reproduce on macOS 10.12.6 with Atom 1.23.0-dev-9a953726.

/cc @simurai for when you're back ✌️

[simurai]

Looks like that background mistakenly got added when converting from a base16 theme 3 years ago, but didn't get noticed until TypeScript started to use that .syntax--separator scope. 😬

Anyways, let's 🔥 remove it. @timswalling thanks for the issue. 🙇