fix: milgra/sov#42 CSS Colors don't follow standard #RRGGBBAA (fixes #42, closes #40)

[trinitronx]

Before patch & After patch Examples

Before


After


Note: Both above examples are using the following main.css config

While [hexidecimal color palindromes][1] will be the same across both **Before** & **After** examples... Extreme pure color choices reveal the BGR vs. RGB behavior. The config specifies the following colors in RGB hex format: - `main` `border-color`: Red - `workspace` `border-color`: Blue - `window` `border-color`: Green - `window_active` `border-color`: Teal - This is not supposed to be olive green, as in the **Before** / unpatched example screenshot. `~/.config/sov/html/main.css`: ```css #main { border-radius: 10px; background-color: #181712aa; border-radius: 8px; border-width: 2px; border-color: #ff0000ff; } #base { margin: 10px; } .fullscale { height: 100%; width: 100%; } .colflex { display: flex; flex-direction: column; } .rowflex { display: flex; flex-direction: row; } .workspace { margin: 10px; border-radius: 8px; border-width: 1px; background-color: #0000000F; border-color: #0000ffFF; } .window { width: 100px; height: 80px; background-color: #24221bee; border-radius: 8px; border-width: 2px; border-color: #00ff00FF; } .window_active { width: 100px; height: 80px; background-color: #444444FF; background-color: #1b1a14ee; border-radius: 8px; border-width: 2px; border-color: #2EB398FF; } .title { width: 100%; height: 21px; margin-top: 4px; margin-left: 4px; margin-right: 4px; color: #D4D7CCFF; font-size: 14px; font-family: "JetBrainsMonoNL NFM ExtraBold:style=EstraBold,Bold"; } .content { width: 100%; height: 100%; margin-left: 4px; margin-right: 4px; color: #999999FF; vertical-align: top; font-size: 12px; font-family: "JetBrainsMonoNL NFM ExtraBold:style=EstraBold,Bold"; word-wrap: break-word; line-height: 24px; } .number { width: 20px; height: 20px; right: -14px; top: -9px; color: #FFFFFFFF; font-size: 18px; font-family: "JetBrainsMonoNL NFM ExtraBold:style=EstraBold,Bold"; } ```

Explanation of Change

Although very misleading, the Wayland RGBA format appears to be actually stored as BGRA:

WL_DRM_FORMAT_ARGB8888

Always stored as B, G, R, A in memory (B at lowest address, A at highest) Source: https://afrantzis.com/pixel-format-guide/wayland_drm.html

Compatible format between OpenGL GL_RGBA+GL_UNSIGNED_BYTE and wayland_drm family appears to be: WL_DRM_FORMAT_ABGR8888

$ git clone https://github.com/afrantzis/pixel-format-guide.git
$ cd pixel-format-guide

$ python -m pfg find-compatible GL_RGBA+GL_UNSIGNED_BYTE wayland_drm
Format: GL_RGBA+GL_UNSIGNED_BYTE
Is compatible on all systems with:
        WL_DRM_FORMAT_ABGR8888
Is compatible on little-endian systems with:
Is compatible on big-endian systems with:

In this code, WL_SHM is used, so this commit uses the SHM variant.

Reference:

• "A Pixel Format Guide to the Galaxy", Presenter: Alexandros Frantzis, FOSDEM 2018

Video: https://www.youtube.com/watch?v=NoZwgNSuqkU Slides: https://archive.fosdem.org/2018/schedule/event/pixel_formats/attachments/slides/2627/export/events/attachments/pixel_formats/slides/2627/fosdem_2018_pixel_format_guide.pdf

pixel-format-guide

Project Page: https://afrantzis.github.io/pixel-format-guide/ Project Repo: https://github.com/afrantzis/pixel-format-guide Blog: https://afrantzis.wordpress.com/

[milgra]

hi, thanks for the awesome work and explanation, I will look into it. As far as I remember my setup didn't work with this color format when I was developing sov, maybe I missed something or I just need the latest lib versions.

[milgra]

Works fine, thank you!

[trinitronx]

Works fine, thank you!

No problem! Glad it worked 😄