style: update docs UI styles for improved contrast and clarity (#994)

* style: update UI styles for improved contrast and clarity

* style: remove background-blend-mode from base.css
* style: update docs nav download button colors
* fix: adjust scroll position calculation for toolbar
* style: remove height from snippet-image class
* fix: anchor scroll positioning & TOC highlighting bugs
* style: remove unused alignment helper classes
* style: update button styles and navbar links for landing page
* style: improve logo contrast and clean up nav styles
* style: refactor dark theme styles and button colors for landing page
* style: improve UI contrast and navbar interactions
* style: add primary color variables and backdrop filter
* style: update nav colors and background styles
* feat: add static documentation generation script
* style: flip ui illustrations horizontally
* chore: add generated index.html for Netlify deployment
* style: enhance documentation panel typography and layout
* style: refine documentation panel font colors and sizes
* style: remove contrast class from footer links
* style: enhance table icons and add new color variable
* style: add box-shadow to table icons for depth
* style: update table border color and selector specificity
* style: center-align table cells with images
* style: make selected bottom border transparent
* chore: remove index.html and update .gitignore for merging
* style: add background color to first row of tables
* style: update first tr background-color only
* style: set first row (tbody) background to transparent
* style: refine table row background color selectors
* style: ensure landing page navbar matches docs

Author: julioest

docs/shared/logo.css

@@ -25,6 +25,7 @@
     font-weight: 700;
     color: #fff;
     white-space: nowrap;
+    font-size: 1rem;
 }
 
 @media (max-width: 576px) {

docs/ui/src/css/base.css

@@ -16,7 +16,6 @@ html {
     radial-gradient(ellipse 100% 100% at 80% 100%, rgba(89, 36, 99, 0.8), transparent 60%),
     linear-gradient(135deg, #124b83, #124b83, #124b83);
   background-attachment: fixed;
-  background-blend-mode: screen;
   background-size: cover;
   background-repeat: no-repeat;
 }
@@ -118,7 +117,7 @@ object[type="image/svg+xml"]:not([width]) {
 }
 
 ::placeholder {
-  opacity: 0.5;
+  opacity: 0.75;
 }
 
 @media (pointer: fine) {

docs/ui/src/css/doc.css

@@ -1,5 +1,5 @@
 .doc {
-  color: var(--doc-font-color);
+  color: var(--doc-font-color) !important;
   font-size: var(--doc-font-size);
   hyphens: auto;
   line-height: var(--doc-line-height);
@@ -250,6 +250,14 @@
   margin-top: 1.5rem;
 }
 
+.doc table.tableblock tr:first-child {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.doc table.tableblock thead ~ tbody tr:first-child {
+  background-color: transparent;
+}
+
 .doc table.tableblock {
   font-size: calc(15 / var(--rem-base) * 1rem);
 }
@@ -277,7 +285,7 @@
 
 .doc table.tableblock,
 .doc table.tableblock > * > tr > * {
-  border: 0 solid var(--table-border-color);
+  border: 0 solid rgba(255, 255, 255, 0.4);
 }
 
 .doc table.grid-all > * > tr > * {
@@ -407,13 +415,13 @@
 
 .doc .admonitionblock td.icon i {
   align-items: center;
-  border-radius: 0.45rem;
   display: inline-flex;
   filter: initial;
   height: 1.25rem;
   padding: 0 0.5rem;
   vertical-align: initial;
   width: fit-content;
+  box-shadow: 2px 2px #000;
 }
 
 .doc .admonitionblock td.icon i::after {
@@ -1067,6 +1075,38 @@
   margin: 2rem 0 0;
 }
 
+.doc table.tableblock a img {
+  width: 28px !important;
+  height: 28px !important;
+}
+
+.doc table.tableblock a img[src*="asciidoc.svg"] {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.doc table.tableblock td:has(a):hover {
+  background-color: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+
+.doc table.tableblock td:has(a) p {
+  margin: 0;
+  padding: 0;
+}
+
+.doc table.tableblock td:has(.image a) .image a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.doc table.tableblock td:has(.image) {
+  text-align: center;
+  vertical-align: middle;
+}
+
 #footnotes hr {
   border-top-width: 1px;
   margin-top: 0;
@@ -1087,3 +1127,41 @@
   text-align: right;
   width: 1.5em;
 }
+
+.tableblock [style*="color: darkblue"],
+.paragraph[id] [style*="color: darkblue"] {
+  color: #fff5b3 !important;
+}
+
+.paragraph span[style*="color: darkblue"] {
+  color: #fff !important;
+}
+
+.tableblock [style*="color: darkgreen"],
+.paragraph[id] [style*="color: darkgreen"] {
+  color: #fff !important;
+}
+
+.paragraph span[style*="color: darkgreen"] {
+  color: #fff !important;
+}
+
+.paragraph span[style*="color: red"] {
+  color: #fff !important;
+  font-style: italic;
+}
+
+.paragraph li span[style*="color: orangered"] {
+  color: #fff !important;
+  font-weight: bold;
+}
+
+.tableblock [style*="color: orangered"],
+.paragraph[id] [style*="color: orangered"] {
+  color: #fff !important;
+}
+
+.tableblock [style*="color: red"],
+.paragraph[id] [style*="color: red"] {
+  color: #fff !important;
+}

docs/ui/src/css/header.css

@@ -24,20 +24,27 @@ body {
   text-decoration: none;
 }
 
+.navbar-item:hover:not(.search),
+.navbar-item:focus:not(.search) {
+  color: var(--color-white);
+  transform: translateY(-1px);
+  transition: all 0.2s ease-in-out;
+}
+
 .navbar-brand {
   display: flex;
   flex: auto;
   padding-left: 1rem;
 }
 
 .navbar-brand .navbar-item {
-  color: var(--navbar-font-color);
+  color: var(--color-white-60);
 }
 
 .navbar-brand .navbar-item:first-child {
   align-self: center;
   padding: 0;
-  font-size: calc(22 / var(--rem-base) * 1rem);
+  font-size: calc(18 / var(--rem-base) * 1rem);
   flex-wrap: wrap;
   line-height: 1;
 }
@@ -47,10 +54,6 @@ body {
   word-wrap: normal;
 }
 
-.navbar-brand .navbar-item:first-child :not(:last-child) {
-  padding-right: 0.375rem;
-}
-
 .navbar-brand .navbar-item.search {
   flex: auto;
   justify-content: flex-end;
@@ -185,13 +188,20 @@ body {
 .navbar .button {
   display: inline-flex;
   align-items: center;
-  background: var(--navbar-button-background);
-  border: 1px solid var(--navbar-button-border-color);
-  border-radius: 0.15rem;
+  background: rgb(229, 190, 51);
   height: 1.75rem;
-  color: var(--navbar-button-font-color);
+  color: #0e0e0e;
+  font-weight: var(--body-font-weight-bold);
   padding: 0 0.75em;
   white-space: nowrap;
+  box-shadow: 4px 4px 0 #000;
+  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.navbar .button:hover {
+  background: rgb(255, 215, 0);
+  transform: translateY(-2px);
+  box-shadow: 6px 6px 0 #000;
 }
 
 @media screen and (max-width: 768.5px) {
@@ -218,8 +228,8 @@ body {
   }
 
   .navbar-menu {
-    background: var(--navbar-menu-background);
     box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+    background-color: rgb(47 47 94);
     max-height: var(--body-min-height);
     overflow-y: auto;
     overscroll-behavior: none;
@@ -232,7 +242,9 @@ body {
 
   .navbar-menu a.navbar-item:hover,
   .navbar-menu .navbar-link:hover {
-    background: var(--navbar-menu_hover-background);
+    color: var(--color-white);
+    transform: translateY(-1px);
+    transition: all 0.2s ease-in-out;
   }
 }
 
@@ -280,14 +292,15 @@ body {
 
   .navbar-end > .navbar-item,
   .navbar-end .navbar-link {
-    color: var(--navbar-font-color);
+    color: var(--color-white-60);
   }
 
   .navbar-end > a.navbar-item:hover,
   .navbar-end .navbar-link:hover,
   .navbar-end .navbar-item.has-dropdown:hover .navbar-link {
-    background: var(--navbar_hover-background);
-    color: var(--navbar-font-color);
+    color: var(--color-white);
+    transform: translateY(-1px);
+    transition: all 0.2s ease-in-out;
   }
 
   .navbar-end .navbar-link::after {

docs/ui/src/css/nav.css

@@ -5,7 +5,7 @@
 }
 
 .nav-container {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(47, 44, 94, 0.75);
   backdrop-filter: blur(10px);
   position: fixed;
   top: var(--navbar-height);
@@ -19,6 +19,11 @@
 @media screen and (min-width: 769px) {
   .nav-container {
     width: var(--nav-width);
+    background-color: transparent;
+  }
+
+  .nav-container .nav {
+    background-color: rgb(255 255 255 / 18%);
   }
 }
 
@@ -37,9 +42,8 @@
 }
 
 .nav {
-  /* background: var(--nav-background); */
+  background: rgba(255, 255, 255, 0.1);
   position: relative;
-  top: var(--toolbar-height);
   height: var(--nav-height);
 }
 
@@ -59,14 +63,13 @@
 }
 
 .nav a {
-  color: var(--color-white);
+  color: var(--color-white-60);
 }
 
 .nav .panels {
   display: flex;
   flex-direction: column;
   height: inherit;
-  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .nav-panel-menu {
@@ -183,10 +186,12 @@
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
   font-weight: var(--body-font-weight-bold);
+  color: var(--color-white);
 }
 
 .nav-panel-explore {
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(47, 44, 94, 0.75);
+  backdrop-filter: blur(10px);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -196,12 +201,19 @@
   left: 0;
 }
 
+@media screen and (min-width: 769px) {
+  .nav-panel-explore {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}
+
 .nav-panel-explore:not(:first-child) {
   top: auto;
   max-height: var(--nav-panel-explore-height);
 }
 
 .nav-panel-explore .context {
+  background: rgba(47, 44, 94, 0.75);
   font-size: calc(15 / var(--rem-base) * 1rem);
   flex-shrink: 0;
   color: var(--color-white);
@@ -233,8 +245,8 @@
 .nav-panel-explore .components {
   line-height: var(--nav-line-height);
   flex-grow: 1;
-  box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
-  background: var(--nav-secondary-background);
+  box-shadow: 0 2px 8px 0 rgba(30, 50, 70, 0.3);
+  background-color: rgb(29 28 64);
   padding: 0.75rem 0.75rem 0 0.75rem;
   margin: 0;
   overflow-y: scroll;
@@ -278,7 +290,7 @@
 }
 
 .nav-panel-explore .component .version a {
-  background: var(--nav-border-color);
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 0.25rem;
   white-space: nowrap;
   padding: 0.25em 0.5em;

docs/ui/src/css/page-versions.css

@@ -28,18 +28,16 @@
   min-width: 100%;
   flex-direction: column;
   align-items: flex-end;
-  background:
-    linear-gradient(
-      to bottom,
-      var(--page-version-menu-background) 0%,
-      var(--page-version-menu-background) 100%
-    )
-    no-repeat;
+  background-color: rgba(0, 0, 0, 0.2);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
   padding: 1.375rem 1.5rem 0.5rem 0.5rem;
   position: absolute;
   top: 0;
   right: 0;
   white-space: nowrap;
+  z-index: 1;
 }
 
 .page-versions:not(.is-active) .version-menu {