📖 (docs/UI): Book theme customizations

[vitorfloriano]

⚠️ WIP: feel free to check the deploy preview and suggest changes

This PR brings several customizations to the book UI:

• Higher resolution logo and favicon in .svg format
• Better theming based on the logo color palette (light and dark)
• Better spacing between elements (more condensed)
• Better contrast for code blocks
• Removal of excessive theme options (only light and dark theme now)
• Scrollbars are not so evident but still distinguishable

Related to #4862.

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: vitorfloriano
Once this PR has been reviewed and has the lgtm label, please assign varshaprasad96 for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[k8s-ci-robot]

Hi @vitorfloriano. Thanks for your PR.

I'm waiting for a github.com member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[camilamacedo86]

Hi @vitorfloriano

What is missing in this one?
I liked the colors and changes

[vitorfloriano]

Hi @camilamacedo86 I'm just checking some accessibility issues in my choice of colors, mainly contrast.

I'm using Chrome Dev Tools to analyze CSS accessibility issues and correcting them little by little. See: https://developer.chrome.com/docs/devtools/accessibility/contrast and https://web.dev/articles/color-and-contrast-accessibility

The feedback we got was that some parts were not very readable and distinguishable, so I'm focusing on that now.

ALSO, another thing I would highly suggest: remove the custom version picker dropdown menu entirely.

I think it adds overhead (custom HTML, CSS and JS) and is a little redundant since we already have a callout on the first page for that.

We could simply improve the CSS on the note and completely remove the custom dropdown.

That way we would reduce the number of customizations on the default template and make it easier to migrate to newer versions of template in the future.

WDYT?