fix(css): update layer-cascade diagram

[OnkarRuikar]

• related to fix(css): define terms in layer-cascade diagram content#36656

The PR makes explicit what are the author declarations in the diagram and removes the "normal" word.

[Kaiido]

As the reporter of the linked issue, thank you, this looks a lot better to me, and with #36656 it will perfectly resolve the issue.

[bsmth]

LGTM, can wait for Vadim to have a look 👀

[estelle]

How about SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 880">
    <title>Style origins and layers in order of precedence, from highest to lowest</title>
<style>
 text {
   color: black;
   font-family: sans-serif;
   font-size: 1rem;
   text-anchor: middle;
 }
[fill="#fff"],
.css {
   font-style: italic;
}
</style>

<path fill="#fffed9" stroke="#d6b656" d="M180 0h420v820H180z"/>

<text x="80" y="20" >Highest priority</text>
<g stroke="#000" stroke-miterlimit="10" stroke-width="3" id="arrow">
  <path fill="none" d="M80 771V41.1" />
  <path d="m80 34.35 4.5 9L80 41.1l-4.5 2.25Z"/>
</g>

<path fill="#fff2cc" stroke="#d6b656" d="M190 10h400v40H190z"/>
<text x="390" y="35" class="css">Transition declarations</text>

<g id="all_important">
    <path fill="#fff2cc" stroke="#d6b656" d="M190 60h400v40H190z"/>
    <text x="390" y="85">Important user agent declarations</text>
    <path fill="#fff2cc" stroke="#d6b656" d="M190 110h400v40H190z"/>
    <text x="390" y="135">Important user declarations</text>
    <g id="important-author">
        <path fill="none" stroke="#000" d="M190 160h400v240H190z"/>
        <text x="390" y="185">Important author declarations</text>
        <path fill="#dae8fc" stroke="#6c8ebf" d="M200 199h380v30H200z"/>
        <text x="390" y="219">Important @layer 1 { ... }</text>
        <path fill="#d5e8d4" stroke="#82b366" d="M200 238h380v30H200z"/>
        <text x="390" y="258">Important @layer 2 { ... }</text>
        <path fill="#ffe6cc" stroke="#d79b00" d="M200 278h380v30H200z"/>
        <text x="390" y="298">Important @layer ... { ... }</text>
        <path fill="#e1d5e7" stroke="#9673a6" d="M200 318h380v30H200z"/>
        <text x="390" y="338">Important @layer N { ... }</text>
        <path fill="#647687" stroke="#314354" d="M200 358h380v30H200z"/>
        <text x="390" y="378" fill="#fff">Important Unlayered</text>
    </g>
</g>

<path fill="#fff2cc" stroke="#d6b656" d="M190 411h400v30H190z"/>
<text x="390" y="431" class="css">Animation declarations</text>

<g id="all_normal">
    <g id="author_normal">
        <path fill="none" stroke="#000" d="M190 450h400v250H190z"/>
        <text x="391" y="481">Author declarations</text>
        <path fill="#dae8fc" stroke="#6c8ebf" d="M200 655h380v30H200z"/>
        <text x="390" y="675">@layer 1 { ... }</text>
        <path fill="#d5e8d4" stroke="#82b366" d="M200 615h380v30H200z"/>
        <text x="390" y="635">@layer 2 { ... }</text>
        <path fill="#ffe6cc" stroke="#d79b00" d="M200 575h380v30H200z"/>
        <text x="390" y="595">@layer ... { ... }</text>
        <path fill="#e1d5e7" stroke="#9673a6" d="M200 535h380v30H200z"/>
        <text x="390" y="555">@layer N { ... }</text>
        <path fill="#647687" stroke="#314354" d="M200 495h380v30H200z"/>
        <text x="390" y="515" fill="#fff">Unlayered</text>
    </g>
    <path fill="#fff2cc" stroke="#d6b656" d="M190 714h400v40H190z"/>
    <text x="390" y="739">User declarations</text>
    <path fill="#fff2cc" stroke="#d6b656" d="M190 764h400v40H190z"/>
    <text x="390" y="789">User agent declarations</text>
</g>
<text x="80" y="800" >Lowest priority</text>
</svg>

that makes it accessible (and removes a ton of characters from drawio that aren't needed.

[estelle]

The id's and g's in my SVG aren't needed either, but they make it easier to read in case the SVG needs to be updated.

[OnkarRuikar]

@estelle, Your SVG doesn't render well on my PC:

We draw images using drawio and export as png, SVG, etc. Wouild like to know from Brian why we use drawio and not some svg editor directly.

[estelle]

Oh, that's a viewbox issue. Change the 400 to 600 on line 1 and it should work.
I hand-coded the SVG ;). It was just boxes, and the boxes were in the drawio SVG output, so it was fairly straightforward. I basically removed unnecessary attributes and all the switches / foreign objects, pulling out just the <text> and <path> elements, and then put all the presentational attributes in a style block.

I did reorder some content, so if someone uses a screen reader, it is rendered in order.

[bsmth]

Would like to know from Brian why we use drawio and not some svg editor directly.

There's a draw.io file because it was easier for me to build it there rather than hand-code the SVG from scratch. I've no preference, really. If there's source files from any editor, it's good to commit them for future.

Anyway, I'm going to merge this one to unblock the related PR. Thank you, both!