From 28c77b88169496c22d00fdebd192c95484a3840f Mon Sep 17 00:00:00 2001
From: bosco-ensemble <boscok@ensemble.com>
Date: Mon, 22 Apr 2024 10:12:02 -0700
Subject: [PATCH] TDW-2569 update to use global variables

---
 blocks/cards/cards.css                     |  2 +-
 blocks/carousel/carousel.css               | 26 +++++++++++-----------
 blocks/course/course.css                   | 16 ++++++-------
 blocks/embed/embed.css                     |  2 +-
 blocks/footer/footer.css                   | 10 ++++-----
 blocks/header/header.css                   |  6 ++---
 blocks/hero/hero.css                       |  6 ++---
 blocks/leaderboard/leaderboard.css         |  8 +++----
 blocks/news/news.css                       |  2 +-
 blocks/player-feature/player-feature.css   |  6 ++---
 blocks/promotion/promotion.css             |  2 +-
 blocks/related-stories/related-stories.css |  6 ++---
 blocks/share/share.css                     |  4 ++--
 blocks/social/social.css                   | 10 ++++-----
 blocks/video/video.css                     |  6 ++---
 blocks/weather/weather.css                 |  2 +-
 styles/styles.css                          | 26 ++++++++++++++++++++++
 17 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
index e193ac4d..95821529 100644
--- a/blocks/cards/cards.css
+++ b/blocks/cards/cards.css
@@ -203,7 +203,7 @@ main .cards.overlay .cards-card-body {
   aspect-ratio: 16 / 9;
   margin: 0;
   padding: 16px;
-  background-color: #0004;
+  background-color: var(--color-near-black);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
index 8e356d14..b581cf93 100644
--- a/blocks/carousel/carousel.css
+++ b/blocks/carousel/carousel.css
@@ -41,7 +41,7 @@ main .carousel h2 {
   color: var(--overlay-text-color);
   font-size: var(--heading-font-size-l);
   line-height: .9;
-  text-shadow: 0 0 10px #0008;
+  text-shadow: 0 0 10px var(--color-gray-20);
 }
 
 @media (min-width: 700px) {
@@ -69,7 +69,7 @@ main .carousel h2 + p:not(.button-container) {
   margin: 0;
   font-size: var(--heading-font-size-m);
   line-height: 1.4;
-  text-shadow: 0 0 10px #0008;
+  text-shadow: 0 0 10px var(--color-gray-20);
 }
 
 @media (min-width: 700px) {
@@ -114,7 +114,7 @@ main .carousel > div {
   width: 100%;
   height: 420px;
   padding-top: 75px;
-  background-image: linear-gradient(#0002, #0006);
+  background-image: linear-gradient(var(--color-darker-gray), var(--color-dark-black));
   scroll-snap-align: start;
 }
 
@@ -532,7 +532,7 @@ main .carousel.course div.course-text .course-statistics {
 }
 
 main .carousel.course div.course-text .course-statistics h3 {
-  border-bottom: 1px solid #fff4;
+  border-bottom: 1px solid var(--color-dark-gray-10);
   padding-bottom: 8px;
   font-size: var(--heading-font-size-l);
 }
@@ -571,24 +571,24 @@ main .carousel.course div.course-text .course-statistics table tr td.course-stat
 }
 
 main .carousel.course div.course-text .course-statistics table tr.course-eagle .course-stat-bar {
-  background-color: #1c619b;
+  background-color: var(--color-medium-blue);
 }
 
 main .carousel.course div.course-text .course-statistics table tr.course-birdie .course-stat-bar {
-  background-color: #99d9f4;
+  background-color: var(--color-sky-blue);
 }
 
 main .carousel.course div.course-text .course-statistics table tr.course-par .course-stat-bar {
-  background-color: #a2a7ab;
+  background-color: var(--color-gray-light-10);
 }
 
 main .carousel.course div.course-text .course-statistics table tr.course-bogey .course-stat-bar {
-  background-color: #f7b941;
+  background-color: var(--color-bright-orange);
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
 main .carousel.course div.course-text .course-statistics table tr.course-2--bogey .course-stat-bar {
-  background-color: #ee5a00;
+  background-color: var(--color-orange);
 }
 
 main .carousel.course div.course-text .course-statistics table tr td.course-stat-graph .course-stat-bar {
@@ -654,7 +654,7 @@ main .carousel.course div.course-text .course-credits {
   grid-area: credits;
   width: 100%;
   margin: 0;
-  border-top: 1px solid #fff8;
+  border-top: 1px solid var(--color-gray-10);
   padding: 5px 0;
   font-style: normal;
   text-align: right;
@@ -675,7 +675,7 @@ main .carousel.course div.course-text .course-credits em {
 
 @media (min-width: 900px) {
   main .carousel.course div.course-text .course-credits {
-    border-top: 1px solid #fff8;
+    border-top: 1px solid var(--color-gray-10);
     padding-top: 16px;
   }
 }
@@ -686,7 +686,7 @@ main .carousel-buttons.course-buttons button {
   height: 8px;
   margin: 8px 2px;
   border-color: var(--carousel-cource-btn-color);
-  background-color: #fff8;
+  background-color: var(--color-gray-10);
 }
 
 main .carousel-buttons.course-buttons button.selected {
@@ -698,7 +698,7 @@ main .carousel-buttons.course-buttons button.selected {
   main .carousel-buttons.course-buttons {
     bottom: 272px;
     z-index: 2;
-    background-color: #0008;
+    background-color: var(--color-gray-20);
   }
 
   main .carousel-buttons.course-buttons button {
diff --git a/blocks/course/course.css b/blocks/course/course.css
index 6ecad301..fc4d516c 100644
--- a/blocks/course/course.css
+++ b/blocks/course/course.css
@@ -60,11 +60,11 @@ main .course-buttons button.selected {
     padding-right: calc((100% / 3) + 32px);
     justify-content: center;
     gap: 12px;
-    background-color: #0008;
+    background-color: var(--color-gray-20);
   }
 
   main .course-buttons button {
-    border-color: #0008;
+    border-color: var(--color-gray-20);
   }
 }
 
@@ -127,7 +127,7 @@ main .course .course-hole {
 
 @media (min-width: 900px) {
   main .course .course-hole {
-    background-image: linear-gradient(to right, transparent 33%, #0006);
+    background-image: linear-gradient(to right, transparent 33%, var(--color-dark-black));
   }
 }
 
@@ -356,24 +356,24 @@ main .course.stats .course-hole-stats table {
 
 main .course.stats .course-hole-stats .course-hole-bar {
   height: var(--body-font-size-s);
-  background-color: #a2a7ab;
+  background-color: var(--color-gray-light-10);
   float: right;
 }
 
 main .course.stats .course-hole-stats tr:nth-child(1) .course-hole-bar {
-  background-color: #1c619b;
+  background-color: var(--color-medium-blue);
 }
 
 main .course.stats .course-hole-stats tr:nth-child(2) .course-hole-bar {
-  background-color: #99d9f4;
+  background-color: var(--color-sky-blue);
 }
 
 main .course.stats .course-hole-stats tr:nth-child(4) .course-hole-bar {
-  background-color: #f7b941;
+  background-color: var(--color-bright-orange);
 }
 
 main .course.stats .course-hole-stats tr:nth-child(5) .course-hole-bar {
-  background-color: #ee5a00;
+  background-color: var(--color-orange);
 }
 
 @media (min-width: 700px) {
diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css
index f31d16e2..fa783850 100644
--- a/blocks/embed/embed.css
+++ b/blocks/embed/embed.css
@@ -39,7 +39,7 @@ main .embed .embed-instagram-wrapper iframe {
   max-width: 548px;
   height: calc((100vw - 32px) + 192px);
   max-height: 755px;
-  border: 1px solid #dbdbdb;
+  border: 1px solid var(--color-gray-lighter-light);
   border-radius: 3px;
 }
 
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index 44cc5416..00070873 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -183,7 +183,7 @@ footer .footer .footer-social p {
   height: 40px;
   margin: 5px 10px;
   border-radius: 50%;
-  background-color: #727272;
+  background-color: var(--color-medium-gray);
 }
 
 footer .footer .footer-social p:hover {
@@ -191,19 +191,19 @@ footer .footer .footer-social p:hover {
 }
 
 footer .footer .footer-social p.footer-social-facebook {
-  background-color: #4267B2;
+  background-color: var(--color-facebook-blue);
 }
 
 footer .footer .footer-social p.footer-social-twitter {
-  background-color: #000;
+  background-color: var(--color-black);;
 }
 
 footer .footer .footer-social p.footer-social-instagram {
-  background-color: #405DE6;
+  background-color: var(--color-blue-10);
 }
 
 footer .footer .footer-social p.footer-social-youtube {
-  background-color: #f00;
+  background-color: var(--color-bright-red);
 }
 
 footer .footer .footer-copyright a {
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 27fa1d80..c3e35a8e 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -707,7 +707,7 @@ header .status-bar {
   top: var(--nav-height);
   left: 0;
   right: 0;
-  background-color: #0009;
+  background-color: var(--color-black-10);
   font-size: var(--body-font-size-xs);
   font-weight: lighter;
   text-align: center;
@@ -719,7 +719,7 @@ header .status-bar {
   header .status-bar {
     height: 86px;
     background-color: transparent;
-    background-image: linear-gradient(#0009, #0005, transparent);
+    background-image: linear-gradient(var(--color-black-10), var(--color-black-20), transparent);
     font-size: var(--body-font-size-s);
   }
 }
@@ -801,7 +801,7 @@ header .status-bar .status-bar-data .status-bar-dates {
 header .status-bar .status-bar-data .status-bar-countdown {
   grid-area: countdown;
   padding: 5px 0;
-  background-color: #fff1;
+  background-color: var(--color-gray-30);
 }
 
 header .status-bar .status-bar-countdown span {
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 27450d4c..f45c7c24 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -14,7 +14,7 @@ main .hero {
 
   position: relative;
   height: 230px;
-  background-image: linear-gradient(#0002, #0006);
+  background-image: linear-gradient(var(--color-near-black), var(--color-dark-black));
   color: var(--color-white);
   text-align: center;
 }
@@ -97,7 +97,7 @@ main .hero h1 {
   color: var(--overlay-text-color);
   font-size: var(--heading-font-size-l);
   line-height: 1;
-  text-shadow: 0 0 10px #0008;
+  text-shadow: 0 0 10px var(--color-gray-20);
 }
 
 main .hero h1.heading-x-long  {
@@ -150,7 +150,7 @@ main .hero h1 + p:not(.button-container) {
   margin: 0;
   font-size: var(--heading-font-size-m);
   line-height: 1.4;
-  text-shadow: 0 0 10px #0008;
+  text-shadow: 0 0 10px var(--color-gray-20);
 }
 
 @media (min-width: 700px) {
diff --git a/blocks/leaderboard/leaderboard.css b/blocks/leaderboard/leaderboard.css
index cbe63a15..ccea9e1e 100644
--- a/blocks/leaderboard/leaderboard.css
+++ b/blocks/leaderboard/leaderboard.css
@@ -230,7 +230,7 @@ main .leaderboard table .leaderboard-favorite .tooltip {
   width: max-content;
   border-radius: 4px;
   padding: 8px 16px;
-  background-color: #000c;
+  background-color: var(--color-black-30);
   color: var(--color-white);
   font-size: var(--body-font-size-xs);
   text-transform: initial;
@@ -249,7 +249,7 @@ main .leaderboard table .leaderboard-favorite .tooltip::before {
   height: 0; 
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
-  border-right: 8px solid #000c; 
+  border-right: 8px solid var(--color-black-30);
 }
 
 main .leaderboard table .leaderboard-favorite:hover .tooltip {
@@ -311,11 +311,11 @@ main .leaderboard .icon.icon-up, main .leaderboard .icon.icon-down {
 }
 
 main .leaderboard td .icon.icon-up {
-  color: #4b9800;
+  color: var(--color-green);
 }
 
 main .leaderboard td .icon.icon-down {
-  color: #BF211E;
+  color: var(--color-red);
 }
 
 /* footer */
diff --git a/blocks/news/news.css b/blocks/news/news.css
index db123542..5e7578f2 100644
--- a/blocks/news/news.css
+++ b/blocks/news/news.css
@@ -82,7 +82,7 @@ main .news .news-placeholder {
   width: 100%;
   height: 310px;
   padding: 10px;
-  background: linear-gradient(transparent, #0008);
+  background: linear-gradient(transparent, var(--color-gray-20));
   color: var(--color-white);
   text-transform: uppercase;
 }
diff --git a/blocks/player-feature/player-feature.css b/blocks/player-feature/player-feature.css
index f9376290..46c1cba9 100644
--- a/blocks/player-feature/player-feature.css
+++ b/blocks/player-feature/player-feature.css
@@ -12,7 +12,7 @@ main .player-feature-wrapper {
   max-width: 1400px;
   margin: auto;
   padding-top: 290px;
-  background: linear-gradient(#fff0 400px, var(--background-color) 630px);
+  background: linear-gradient(var(--color-gray-ligher-10) 400px, var(--background-color) 630px);
   font-size: var(--body-font-size-s);
 }
 
@@ -94,8 +94,8 @@ main .player-feature .player-feature-name {
 main .player-feature .player-feature-credits {
   display: flex;
   justify-content: flex-end;
-  border-top: 1px solid #fff4;
-  border-bottom: 1px solid #fff4;
+  border-top: 1px solid var(--color-dark-gray-10);
+  border-bottom: 1px solid var(--color-dark-gray-10);
   text-transform: uppercase;
 }
 
diff --git a/blocks/promotion/promotion.css b/blocks/promotion/promotion.css
index 27a5229d..2f090fea 100644
--- a/blocks/promotion/promotion.css
+++ b/blocks/promotion/promotion.css
@@ -26,7 +26,7 @@ main .promotion .rolex-frame {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #01613A;
+  background-color: var(--color-green-10);
 }
 
 main .promotion.toggle .rolex-frame-medium {
diff --git a/blocks/related-stories/related-stories.css b/blocks/related-stories/related-stories.css
index 41d265a3..a746e9ff 100644
--- a/blocks/related-stories/related-stories.css
+++ b/blocks/related-stories/related-stories.css
@@ -50,7 +50,7 @@ main .related-stories .related-stories-story-image {
 main .related-stories .related-stories-story-image:empty { /* placeholder */
   width: 135px;
   height: 75px;
-  background: linear-gradient(transparent, #0008);
+  background: linear-gradient(transparent, var(--color-gray-20));
 }
 
 main .related-stories .related-stories-story-image picture {
@@ -117,7 +117,7 @@ main .related-stories .related-stories-story-play {
   margin-top: 18px;
   border: 2px solid;
   border-radius: 50%;
-  background-color: #0004;
+  background-color: var(--color-near-black);
   color: var(--color-white);
   line-height: 0;
   opacity: .6;
@@ -125,7 +125,7 @@ main .related-stories .related-stories-story-play {
 }
 
 main .related-stories .related-stories-story-play:hover {
-  background-color: #0008;
+  background-color: var(--color-gray-20);
 }
 
 main .related-stories .related-stories-story-play::before {
diff --git a/blocks/share/share.css b/blocks/share/share.css
index 9c51ca1a..4056bdd5 100644
--- a/blocks/share/share.css
+++ b/blocks/share/share.css
@@ -67,9 +67,9 @@ main .share svg {
 
 /* social colors */
 main .share .button.share-facebook {
-  background-color: #4267B2;
+  background-color: var(--color-facebook-blue);
 }
 
 main .share .button.share-twitter {
-  background-color: #000;
+  background-color: var(--color-black);
 }
diff --git a/blocks/social/social.css b/blocks/social/social.css
index cc4e0790..0c969f16 100644
--- a/blocks/social/social.css
+++ b/blocks/social/social.css
@@ -110,7 +110,7 @@ main .social > ul > li {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border: 1px solid #0004;
+  border: 1px solid var(--color-near-black);
   padding: 16px;
   background-color: var(--social-card-bg-color);
 }
@@ -203,7 +203,7 @@ main .social .social-post::-webkit-scrollbar {
 }
 
 main .social .social-post::-webkit-scrollbar-thumb {
-  background: #ccc;
+  background: var(--color-gray-light);
   border-radius: 3px;
   }
 
@@ -240,7 +240,7 @@ main .social.image-feed li {
   border: 0;
   padding: 0;
   animation: fade-in 1.5s; 
-  background: linear-gradient(transparent, #0002);
+  background: linear-gradient(transparent, var(--color-darker-gray));
 }
 
 @keyframes fade-in {
@@ -268,12 +268,12 @@ main .social.image-feed li .social-tile-body {
   height: 50vw;
   padding: 8px;
   text-transform: lowercase;
-  background: linear-gradient(transparent, #0002);
+  background: linear-gradient(transparent, var(--color-darker-gray));
 }
 
 main .social.image-feed li .social-tile-body p {
   width: 100%;
-  text-shadow: 0 0 10px #0008;
+  text-shadow: 0 0 10px var(--color-gray-20);
 }
 
 main .social.image-feed li .social-tile-body svg {
diff --git a/blocks/video/video.css b/blocks/video/video.css
index 06da8585..3da18f89 100644
--- a/blocks/video/video.css
+++ b/blocks/video/video.css
@@ -35,7 +35,7 @@ main .video.video-hero {
   right: 0;
   width: 100%;
   max-height: 100%;
-  background-color: #0008;
+  background-color: var(--color-gray-20);
   overflow-y: hidden;
   z-index: -1;
 }
@@ -55,7 +55,7 @@ main .video-hero-play {
   margin-top: 8px;
   border: 2px solid;
   border-radius: 50%;
-  background-color: #0004;
+  background-color: var(--color-near-black);
   color: var(--color-white);
   line-height: 0;
   cursor: pointer;
@@ -63,7 +63,7 @@ main .video-hero-play {
 }
 
 main .video-hero-play:hover {
-  background-color: #0008;
+  background-color: var(--color-gray-20);
 }
 
 main .video-hero-play::before {
diff --git a/blocks/weather/weather.css b/blocks/weather/weather.css
index 874d5aa3..ee869078 100644
--- a/blocks/weather/weather.css
+++ b/blocks/weather/weather.css
@@ -8,7 +8,7 @@ main .weather-wrapper {
   max-width: 1400px;
   margin: auto;
   padding: 16px;
-  background-image: linear-gradient(#0001, #0002);
+  background-image: linear-gradient(var(--color-dark-gray), var(--color-darker-gray));
 }
 
 @media (min-width: 900px) {
diff --git a/styles/styles.css b/styles/styles.css
index 44ad63c8..c5ba18bb 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -12,20 +12,46 @@
 
  :root {
   /* colors */
+  --color-medium-blue: #1c619b;
   --color-blue-darker: #071D37;
   --color-blue-dark: #04294C;
   --color-blue: #003360;
+  --color-facebook-blue: #4267B2;
+  --color-blue-10: #405DE6;
   --color-blue-light: #004B98;
   --color-blue-lighter: #2D4976;
   --color-tan: #C2A36E;
   --color-blue-95: #003360f2;
+  --color-sky-blue: #99d9f4;
   --color-tan-95: #C2A36Ef2;
+  --color-green: #4b9800;
+  --color-green-10: #01613A;
   --color-black: #000;
+  --color-black-10: #0009;
+  --color-black-20: #0005;
+  --color-black-30: #000c;
   --color-gray-dark: #4d4d4d;
   --color-gray: #999;
   --color-gray-light: #ccc;
   --color-gray-lighter: #f2f2f2;
+  --color-gray-ligher-10: #fff0;
+  --color-gray-ligher-20: #b6bdc5;
+  --color-gray-light-10: #a2a7ab;
+  --color-gray-lighter-light: #dbdbdb;
+  --color-dark-gray: #0001;
+  --color-dark-gray-10: #fff4;
+  --color-darker-gray: #0002;
   --color-white: #fff;
+  --color-near-black: #0004;
+  --color-dark-black: #0006;
+  --color-bright-orange: #f7b941;
+  --color-orange: #ee5a00;
+  --color-gray-10: #fff8;
+  --color-gray-20: #0008;
+  --color-gray-30: #fff1;
+  --color-medium-gray: #727272;
+  --color-bright-red: #f00;
+  --color-red: #BF211E;
 
   /* colors assignments */
   --link-color: var(--color-blue-dark);