nebrelbug / react-admonitions

An admonitions React component, ported from remarkable-admonitions. Perfect for Docusaurus v2 and other React-based doc generators
https://nebrelbug.github.io/react-admonitions/
11 stars 4 forks source link

Readable text on nested admonitions? #4

Closed arcturus140 closed 5 years ago

arcturus140 commented 5 years ago

Admonitions can be nested:

image

title h5 and background are of the same colour, background with alpha channel:

.admonition-important {
  background-color: rgba(52, 152, 219, 0.1);
}

.admonition-important h5 {
  color: #3498db;
}

Nested admonitions are increasingly more difficult to read with lower contrast between text and background due to alpha channel.

I am not sure if this is even an issue, because

  1. Even on 10th level it is readable well on white background
  2. Becomes very hard to read only at 40th+ level on white background
  3. I still haven't figured out the behaviour, was trying to calculate the level where text colour == background colour

image

nebrelbug commented 5 years ago

@arcturus140 thanks for the detailed testing and info! I'm inclined to think this will be okay for most people.

I suppose we could provide an option for users to set opacity.

arcturus140 commented 5 years ago

yes, this thought came up and I started testing. Turner turned out to be much less a deal than expected.

it was worth mentioning but I'll close this for now.

nebrelbug commented 5 years ago

@arcturus140 alright. Thanks!