TDW-2569 update to use global variables

hlxsites · Apr 22, 2024 · 28c77b8 · 28c77b8
1 parent a6bf9c2
commit 28c77b8
Show file tree

Hide file tree

Showing 17 changed files with 83 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -183,27 +183,27 @@ 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 {
   filter: brightness(.85);
 }
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +117,15 @@ 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;
   cursor: pointer;
 }
 
 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
@@ -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);
 }