From 61d4aa74c5e02674c02c162baa78425ed4b244fc Mon Sep 17 00:00:00 2001
From: Ambati Sahithi <162500856+asr2003@users.noreply.github.com>
Date: Mon, 27 May 2024 22:42:35 +0530
Subject: [PATCH] fix: Website colour adjustments (#5980)

* Update extra.css

* Update home.css

* fix color adjustments

* Update home.css

* change hex colors
---
 docs/stylesheets/extra.css            | 33 ++++++++++++++-------------
 overrides/assets/stylesheets/home.css | 31 ++++++++++++-------------
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index fdf9108d926..e711c0fade5 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,11 +1,12 @@
 :root {
   --md-primary-fg-color: #f3f1f2;
-  --home-color: #0071c7;
+  --md-primary-fg-color--dark: #0865AD;
+  --md-primary-fg-color--light: #6695CA;
   --nav-item-color: #4d4d4d;
 }
 
 .md-clipboard {
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
 }
 
 .highlight.no-copy .md-clipboard {
@@ -62,7 +63,7 @@ a.md-header__button.md-logo img {
 }
 
 .md-header__source {
-  color: #034b95;
+  color: var(--md-primary-fg-color--dark);
 }
 
 .md-search__input {
@@ -106,7 +107,7 @@ a.md-header__button.md-logo img {
 .md-tabs__list li:nth-last-child(1),
 .md-tabs__list li:nth-last-child(2),
 .md-tabs__list li:nth-last-child(3) {
-  background-color: #024c93;
+  background-color: var(--md-primary-fg-color--dark);
   color: white;
   padding: 0 2em;
 }
@@ -129,7 +130,7 @@ a.md-header__button.md-logo img {
 }
 
 .md-typeset a {
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
   word-break: break-word;
   font-weight: 600;
 }
@@ -291,7 +292,7 @@ a.md-header__button.md-logo img {
 }
 
 .cookienotice .buttons .ok {
-  background: #6695ca;
+  background: var(--md-primary-fg-color--light);
   color: #fff;
   margin-right: 15px;
   padding: .25rem .5rem;
@@ -321,18 +322,18 @@ a.md-header__button.md-logo img {
 }
 
 .modal-dialog .md-button {
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
 }
 
 .modal-dialog .md-button--primary {
   color: white;
-  background-color: #024c93;
+  background-color: var(--md-primary-fg-color--dark);
 }
 
 /* Tame the footer and make the prev/next stand out */
 .md-footer {
   color: var(--md-typeset-a-color);
-  background-color: #024c93;
+  background-color: var(--md-primary-fg-color--dark);
 }
 
 .md-footer .md-footer-copyright {
@@ -392,13 +393,13 @@ a.md-header__button.md-logo img {
 }
 
 .testimonials h1 {
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
   margin-bottom: -26px;
 }
 
 .testimonials h2 {
   font-size: 2em;
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
   margin-bottom: -12px;
 }
 
@@ -418,12 +419,12 @@ a.md-header__button.md-logo img {
   margin: auto 0;
   text-align: start;
   padding: 0 2em;
-  color: #497bb2;
+  color: var(--md-primary-fg-color--light);
   font-weight: 500;
   line-height: 1.1;
   font-family: inherit;
   font-size: .85rem;
-  border-left: #4db3d9 4.5px solid;
+  border-left: var(--md-default-fg-color--light) 4.5px solid;
 }
 
 .testimonials .testimonial img {
@@ -436,14 +437,14 @@ a.md-header__button.md-logo img {
 }
 
 .testimonials .testimonial.blue {
-  border-top: #4db3d9 2.5px solid;
+  border-top: var(--md-primary-fg-color--light) 2.5px solid;
   padding-top: 60px;
 }
 
 .testimonials .testimonial.blue .quote {
   font-size: 1.3rem;
   font-weight: 500;
-  color: #4db3d9;
+  color: var(--md-primary-fg-color--light);
   border: none;
 }
 
@@ -461,7 +462,7 @@ a.md-header__button.md-logo img {
 }
 
 .testimonials a {
-  color: #175494;
+  color: var(--md-primary-fg-color--dark);
 }
 
 .testimonials .find-links {
diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css
index eb657c88ad9..6a9e63deb24 100644
--- a/overrides/assets/stylesheets/home.css
+++ b/overrides/assets/stylesheets/home.css
@@ -84,10 +84,7 @@ section.home-container {
 
 body {
   color: white;
-  background: var(--md-primary-fg-color);
-  background: #5063d0;
-  background: #0071c7;
-  background: var(--home-color);
+  background: var(--md-primary-fg-color--dark);
 }
 
 .home-container .md-button,
@@ -101,14 +98,14 @@ body {
 
 .home-container .md-button,
 .need-to-know-more-container .md-button {
-  background-color: #52b3dd;
-  border-color: #52b3dd;
+  background-color: var(--md-primary-fg-color--light);
+  border-color: var(--md-primary-fg-color--light);
 }
 
 .home-container .md-button--primary {
   margin-top: 0.5rem;
-  background-color: #024c93;
-  border-color: #024c93;
+  background-color: var(--md-primary-fg-color--dark);
+  border-color: var(--md-primary-fg-color--dark);
 }
 
 h2.secondary-headline, h3.trusted-by {
@@ -117,7 +114,7 @@ h2.secondary-headline, h3.trusted-by {
 }
 
 .home-container h1 {
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
   margin-top: 1em;
   margin-bottom: 0;
 }
@@ -197,7 +194,7 @@ h2.secondary-headline, h3.trusted-by {
 /* need to know more section css */
 .need-to-know-more-container, .knative-components-container,
 .whats-next-container {
-  background-color: #024c93;
+  background-color: var(--md-primary-fg-color--dark);
 }
 
 .need-to-know-more-container h1, .whats-next-container h1 {
@@ -214,12 +211,12 @@ h2.secondary-headline, h3.trusted-by {
 /* why serverless container css */
 .why-serverless-container, .trying-it-all-container {
   background-color: #f3f1f2;
-  color: var(--md-default-fg-color--light);
+  color: var(--md-primary-fg-color--light);
 }
 
 .why-serverless-container h1, .trying-it-all-container h1,
 .case-studies-container h1 {
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
 }
 
 .why-serverless-container .normal-text,
@@ -311,7 +308,7 @@ h2.secondary-headline, h3.trusted-by {
 }
 
 .trying-it-all-container .md-typeset h2 {
-  color: #024c93;
+  color: var(--md-primary-fg-color--dark);
   line-height: 1;
   margin-bottom: 1rem;
 }
@@ -337,7 +334,7 @@ h2.secondary-headline, h3.trusted-by {
 .trying-it-all-container .md-typeset .md-button.call-to-action {
   font-size: x-large;
   padding: 0.5rem 2em;
-  background-color: #024c93;
+  background-color: var(--md-primary-fg-color--dark);
   color: white;
   margin-top: 1em;
 }
@@ -399,7 +396,7 @@ h2.secondary-headline, h3.trusted-by {
 .case-studies-container .normal-text {
   text-align: start;
   padding: 0 2em;
-  color: #497bb2;
+  color: var(--md-primary-fg-color--light);
   font-weight: 600;
   font-style: italic;
   line-height: 1.1;
@@ -465,7 +462,7 @@ h2.secondary-headline, h3.trusted-by {
 
 .cncf-notice-container h3 {
   font-weight: bold;
-  color: var(--md-default-fg-color--light);
+  color: var(--md-primary-fg-color--light);
   margin-top: 0;
 }
 
@@ -518,4 +515,4 @@ footer nav.md-footer__inner {
 
 footer .md-footer-meta .md-footer-meta__inner {
   padding: 1em 0;
-}
\ No newline at end of file
+}