Issue #3173010 by Gauravmahlawat, starshaped: Class clean up and add #0c0d0e and #171e23 as variables in Olivero's footer.pcss.css

core/themes/olivero/css/base/variables.pcss.css

@@ -118,6 +118,8 @@
   --sp12: calc(12 * var(--sp));
   --color--black: #000; /* Black */
   --color--gray-0: #0d1214; /* Black 1 */
+  --color--gray-5: #0c0d0e;
+  --color--gray-8: #171e23;
   --color--gray-10: #313637; /* Black 2 */
   --color--gray-20: #6e7172; /* Black 3 */
   --color--gray-25: #5d7585; /* Gray Dark */

core/themes/olivero/css/components/footer.css

@@ -13,8 +13,6 @@
 .site-footer {
   position: relative; /* stack above left social bar */
   color: #9ea0a1;
-
-  /* @todo - #0c0d0e and #171e23 aren't currently variables */
   background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%)
 }
 

core/themes/olivero/css/components/footer.pcss.css

@@ -8,9 +8,7 @@
 .site-footer {
   position: relative; /* stack above left social bar */
   color: var(--color--gray-50);
-
-  /* @todo - #0c0d0e and #171e23 aren't currently variables */
-  background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%);
+  background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-8) 100%);
 
   & .menu {
     margin-inline-start: 0;