Update dark mode styles for getting started components. (#1002)

Co-authored-by: Jesse Borden <jborden@apple.com>

Author: jesseaborden

assets/images/get-started/hero-bottom.png

@@ -1,16 +1,21 @@
-    
 @mixin light-theme() {
   --site-text-color: #051416;
-  --site-navigation-border-bottom: linear-gradient(0deg, #f6b391 0%, #f8ce6e 92%);
-  --site-navigation-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  --site-navigation-border-bottom: linear-gradient(
+    0deg,
+    #f6b391 0%,
+    #f8ce6e 92%
+  );
+  --site-navigation-box-shadow:
+    rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
   --site-navigation-background: rgba(255, 255, 255, 0.5);
-  --site-navigation-text-color: #3D3D3D;
+  --site-navigation-text-color: #3d3d3d;
   --site-navigation-item-background: rgba(0, 0, 0, 0.05);
   --site-tabs-background: rgba(255, 255, 255, 0.8);
   --site-tabs-active-background: #ffffff;
   --site-navigation-menu-toggle-invert: invert(0);
   --site-navigation-item-border: 1px solid #051416;
-  --site-code-box-text: #3D3D3D;
+  --site-code-box-text: #3d3d3d;
   --site-link-with-right-arrow-color: #384fea;
   --site-link-with-right-arrow-icon-filter: none;
   --site-content-link-with-right-arrow-icon-filter: brightness(0);
@@ -25,11 +30,38 @@
   --install-release-box-tr-border-bottom: 1px solid #f2f2f2;
   --install-release-box-tr-bg: #ffffff;
 
-  --homepage-hero-bg: linear-gradient(179deg,#fac685 3%, #fbdab0 87%, #ffffff 100%);
+  --get-started-page-bg: #fafafa;
+  --get-started-card-primary-bg: rgba(255, 255, 255, 0.9);
+  --get-started-card-secondary-bg: rgba(236, 236, 236, 1);
+  --get-started-boxes-bg: rgba(255, 255, 255, 0.5);
+  --get-started-code-box-pre-bg: #fff;
+  --get-started-code-box-pre-border: 1px solid #d5d5d5;
+
+  --homepage-hero-bg: linear-gradient(
+    179deg,
+    #fac685 3%,
+    #fbdab0 87%,
+    #ffffff 100%
+  );
   --homepage-install-text: #3d3d3d;
-  --homepage-pillar-1-bg: linear-gradient(to bottom, #ffffff 0%, #d9f2ff 75%, #fff3d8 90%);
-  --homepage-pillar-2-bg: linear-gradient(to top, #e4937f 0%, #fdd9a1 72%, #fff3d8 100%);
-  --homepage-pillar-3-bg: linear-gradient(180deg, #e4937f 0%, #a268c1 36%, #4b3773 100%);
+  --homepage-pillar-1-bg: linear-gradient(
+    to bottom,
+    #ffffff 0%,
+    #d9f2ff 75%,
+    #fff3d8 90%
+  );
+  --homepage-pillar-2-bg: linear-gradient(
+    to top,
+    #e4937f 0%,
+    #fdd9a1 72%,
+    #fff3d8 100%
+  );
+  --homepage-pillar-3-bg: linear-gradient(
+    180deg,
+    #e4937f 0%,
+    #a268c1 36%,
+    #4b3773 100%
+  );
   --home-quicklinks-bg: rgba(255, 177, 100, 0.9);
   --home-quicklinks-color: #801a1a;
 
@@ -77,31 +109,55 @@
   --site-navigation-text-color: #ffffff;
   --site-navigation-item-background: rgba(0, 0, 0, 0.4);
   --site-tabs-background: rgba(35, 52, 74, 1);
-  --site-tabs-active-background: #505F83;
+  --site-tabs-active-background: #505f83;
   --site-navigation-menu-toggle-invert: invert(1);
   --site-navigation-item-border: 1px solid #ffffff;
   --site-code-box-text: #ffffff;
-  --site-link-with-right-arrow-color: #1EC1FD;
-  --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%) saturate(602%) hue-rotate(172deg) brightness(102%) contrast(101%);
+  --site-link-with-right-arrow-color: #1ec1fd;
+  --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%)
+    saturate(602%) hue-rotate(172deg) brightness(102%) contrast(101%);
   --site-content-link-with-right-arrow-icon-filter: brightness(0) invert(1);
 
   --page-bg: #fff;
 
-  --install-page-bg: linear-gradient(0deg, #FF8115 0%, #B7451B 92%);
-  --install-site-code-box-bg: #23344A;
+  --install-page-bg: linear-gradient(0deg, #ff8115 0%, #b7451b 92%);
+  --install-site-code-box-bg: #23344a;
   --install-site-code-box-pre-bg: #111727;
   --install-release-box-th-bg: #111727;
   --install-release-box-th-color: #ffffff;
   --install-release-box-tr-border-bottom: 1px solid #051416;
   --install-release-box-tr-bg: #384461;
 
-  --homepage-install-text: #DEDEDE;;
-  --homepage-hero-bg: linear-gradient(180deg, #144173 0%, #141228 68%, #144173 99%);
-  --homepage-pillar-1-bg: linear-gradient(179deg, #144173 1%, #000000 57%, #350839 88%, #B7451B 99%);
-  --homepage-pillar-2-bg: linear-gradient(0deg, #A268C1 4%, #FF8115 8%, #B7451B 99%);
-  --homepage-pillar-3-bg: linear-gradient(180deg, #A268C1 4%, #4B3773 99%);
+  --get-started-page-bg: rgb(5, 20, 35);
+  --get-started-card-primary-bg: rgba(35, 52, 74, 0.9);
+  --get-started-card-secondary-bg: rgba(56, 68, 97, 1);
+  --get-started-boxes-bg: rgba(25, 52, 74, 0.5);
+  --get-started-code-box-pre-bg: #111727;
+  --get-started-code-box-pre-border: 1px solid #575757;
+
+  --homepage-install-text: #dedede;
+  --homepage-hero-bg: linear-gradient(
+    180deg,
+    #144173 0%,
+    #141228 68%,
+    #144173 99%
+  );
+  --homepage-pillar-1-bg: linear-gradient(
+    179deg,
+    #144173 1%,
+    #000000 57%,
+    #350839 88%,
+    #b7451b 99%
+  );
+  --homepage-pillar-2-bg: linear-gradient(
+    0deg,
+    #a268c1 4%,
+    #ff8115 8%,
+    #b7451b 99%
+  );
+  --homepage-pillar-3-bg: linear-gradient(180deg, #a268c1 4%, #4b3773 99%);
 
-  --home-quicklinks-bg: #23344A;
+  --home-quicklinks-bg: #23344a;
   --home-quicklinks-color: #ffffff;
 
   // rubber band
@@ -137,4 +193,4 @@
   --color-syntax-strings: rgb(255, 129, 112);
   --color-syntax-type-declarations: rgb(107, 223, 255);
   --color-syntax-urls: rgb(102, 153, 255);
-}
+}

assets/stylesheets/new-stylesheets/_themes.scss

@@ -1,8 +1,9 @@
 @use '../helpers' as *;
 
 .get-started {
+  color: var(--site-text-color);
   position: relative;
-  background: #f2f2f2;
+  background: var(--get-started-page-bg);
   @include noise();
 }
 
@@ -18,7 +19,6 @@
   aspect-ratio: 980 / 473;
   border-radius: 22px;
   overflow: hidden;
-  background-color: rgba(255, 255, 255, 0.8);
   margin-bottom: 50px;
   position: relative;
   z-index: 2;
@@ -79,18 +79,16 @@
 
       li {
         display: inline-block;
-        color: #801a1a;
         font-weight: 400;
         padding: 16px 16px 20px;
-        background-color: rgba(97, 75, 138, 0.8);
+        background-color: var(--get-started-boxes-bg);
         border-radius: 20px;
         font-size: 14px;
         white-space: nowrap;
 
         span {
           display: block;
           text-align: left;
-          color: white;
 
           &.title {
             font-size: 24px;
@@ -102,7 +100,7 @@
           &.text {
             font-size: 14px;
             white-space: normal;
-            line-height: 1.14;
+            line-height: 1.3;
           }
         }
       }
@@ -136,7 +134,7 @@
   margin-bottom: 50px;
 
   .content {
-    background-color: white;
+    background-color: var(--get-started-card-primary-bg);
     padding: 53px 50px 40px;
     max-width: 980px;
     margin: 0 auto;
@@ -159,6 +157,7 @@
       text-align: center;
       font-size: 48px;
       margin-bottom: 52px;
+      color: var(--site-text-color);
     }
 
     a {
@@ -180,7 +179,7 @@
       gap: 20px;
 
       li {
-        background-color: #f9f9f9;
+        background-color: var(--get-started-card-secondary-bg);
         display: flex;
         align-items: center;
         gap: 20px;
@@ -235,7 +234,7 @@
       // padding: 0 0 40px;
 
       li {
-        background-color: #f9f9f9;
+        background-color: var(--get-started-card-secondary-bg);
         padding: 20px 30px 20px 20px;
         display: flex;
         text-align: left;
@@ -388,6 +387,7 @@
 
   pre {
     max-height: 400px;
+    border: var(--get-started-code-box-pre-border);
   }
 
   &.code-box-with-tabs {
@@ -533,7 +533,7 @@
   p {
     font-size: 17px;
     padding: 0 100px;
-    margin-bottom: 45px;
+    margin-bottom: 26px;
   }
 
   a {
@@ -575,11 +575,11 @@
   &.background {
     border-radius: 22px;
     padding: 50px;
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--get-started-card-primary-bg);
     box-sizing: border-box;
 
     .code {
-      background: #fff;
+      background: var(--get-started-code-box-pre-bg);
       max-height: 400px;
       overflow: scroll;
     }
@@ -600,13 +600,13 @@
   .code {
     max-width: none;
     width: 100%;
-    border: 1px solid #d5d5d5;
+    border: var(--get-started-code-box-pre-border);
     border-radius: 22px;
-    background: #fff;
+    background: var(--get-started-code-box-pre-bg);
     overflow: hidden;
 
     .highlight {
-      background: #fff;
+      background: var(--get-started-code-box-pre-bg);
     }
   }
 
@@ -650,12 +650,12 @@
   .code {
     flex: 1;
     margin-right: 40px;
-    border: 1px solid #d5d5d5;
+    border: var(--get-started-code-box-pre-border);
     border-radius: 22px;
     height: fit-content;
     overflow: hidden;
     pre.highlight {
-      background: #fff;
+      background: var(--get-started-code-box-pre-bg);
     }
   }
 
@@ -743,11 +743,11 @@
   .code {
     flex: 1;
     margin-right: 40px;
-    border: 1px solid #d5d5d5;
+    border: var(--get-started-code-box-pre-border);
     border-radius: 22px;
     overflow: hidden;
     pre.highlight {
-      background: #fff;
+      background: var(--get-started-code-primary-bg);
     }
   }
 
@@ -811,7 +811,7 @@
   padding-top: 37px;
   margin-bottom: 70px;
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--get-started-card-primary-bg);
 
   h2 {
     font-size: 48px;
@@ -855,14 +855,21 @@
 }
 
 .stand-alone-link {
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--get-started-card-primary-bg);
   padding: 20px 50px;
   opacity: 0.9;
   border-radius: 20px;
   width: fit-content;
   margin: auto;
   display: block;
   margin-bottom: 90px;
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    cursor: pointer;
+  }
+
   a {
     @include link-with-right-arrow;
   }