css: update base, site, vars for design refresh

Author: julioest

docs/ui/src/css/base.css

@@ -9,6 +9,17 @@ html {
   font-size: var(--body-font-size);
   height: 100%;
   scroll-behavior: smooth;
+  /* Add static gradient background */
+  background:
+    radial-gradient(circle at 25% 75%, rgba(130, 0, 255, 0.4), transparent 40%),
+    radial-gradient(circle at 75% 25%, rgba(0, 98, 255, 0.5), transparent 45%),
+    radial-gradient(circle at 50% 50%, rgba(72, 0, 120, 0.6), transparent 60%),
+    radial-gradient(circle at 60% 80%, rgba(200, 0, 255, 0.3), transparent 50%),  
+    linear-gradient(135deg, #3a0ca3, #4361ee, #7209b7);
+  background-attachment: fixed;
+  background-blend-mode: screen;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 @media screen and (min-width: 1024px) {
@@ -18,13 +29,14 @@ html {
 }
 
 body {
-  background: var(--body-background);
+  /* Remove the solid background since we're using gradient on html */
+  /* background: var(--body-background); */
   color: var(--body-font-color);
   font-family: var(--body-font-family);
   line-height: var(--body-line-height);
   margin: 0;
   tab-size: 4;
-  word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
+  word-wrap: anywhere;
 }
 
 a {

docs/ui/src/css/site.css

@@ -1,3 +1,4 @@
+
 @import "typeface-roboto.css";
 @import "typeface-roboto-mono.css";
 @import "vars.css";
@@ -15,3 +16,5 @@
 @import "footer.css";
 @import "highlight.css";
 @import "print.css";
+
+/* Inherits styles from landing page */

docs/ui/src/css/vars.css

@@ -1,22 +1,22 @@
 :root {
   /* colors */
-  --color-white: #fff;
-  --color-smoke-10: #fefefe;
-  --color-smoke-30: #fafafa;
-  --color-smoke-50: #f5f5f5;
-  --color-smoke-70: #f0f0f0;
-  --color-smoke-90: #e1e1e1;
-  --color-gray-10: #c1c1c1;
-  --color-gray-30: #9c9c9c;
-  --color-gray-40: #8e8e8e;
-  --color-gray-50: #808080;
-  --color-gray-70: #5d5d5d;
-  --color-jet-20: #4a4a4a;
-  --color-jet-30: #424242;
-  --color-jet-50: #333;
-  --color-jet-70: #222;
-  --color-jet-80: #191919;
-  --color-black: #000;
+  --color-white: rgba(255, 255, 255, 1);
+  --color-smoke-10: rgba(254, 254, 254, 0.95);
+  --color-smoke-30: rgba(250, 250, 250, 0.9);
+  --color-smoke-50: rgba(245, 245, 245, 0.85);
+  --color-smoke-70: rgba(240, 240, 240, 0.8);
+  --color-smoke-90: rgba(225, 225, 225, 0.75);
+  --color-gray-10: rgba(193, 193, 193, 0.7);
+  --color-gray-30: rgba(156, 156, 156, 0.65);
+  --color-gray-40: rgba(142, 142, 142, 0.6);
+  --color-gray-50: rgba(128, 128, 128, 0.55);
+  --color-gray-70: rgba(93, 93, 93, 0.5);
+  --color-jet-20: rgba(74, 74, 74, 0.45);
+  --color-jet-30: rgba(66, 66, 66, 0.4);
+  --color-jet-50: rgba(51, 51, 51, 0.35);
+  --color-jet-70: rgba(34, 34, 34, 0.3);
+  --color-jet-80: rgba(25, 25, 25, 0.25);
+  --color-black: rgba(0, 0, 0, 0.2);
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */