feat: Update all colors to use the DSDL (#539)

Author: Scotchester

src/_data/initiatives.yml

@@ -15,7 +15,7 @@
   button:
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
-  class: --calitp-primary-blue
+  class: --calitp-brand-blue
 - tag: Benefits
   slug: benefits
   id: automating-customer-discounts
@@ -43,7 +43,7 @@
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
     class: d-none
-  class: --calitp-red-5
+  class: --dsdl-red-80
 - tag: GTFS
   slug: gtfs
   id: standardizing-trip-quality
@@ -65,4 +65,4 @@
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
     class: d-none
-  class: --calitp-purple-4
+  class: --dsdl-purple-70

src/_includes/home-stats.html

@@ -22,7 +22,7 @@
   <div class="col-12">
     <h2 class="h1 text-center">Impact across California</h2>
     <div class="row justify-content-center pt-3 pt-3 pt-lg-5 mt-lg-1 pb-4 mb-lg-3">
-      <div class="col-11 mb-4 mb-lg-0 col-lg-3 px-4 text-center background-yellow-4 clipped-home-stat-1">
+      <div class="col-11 mb-4 mb-lg-0 col-lg-3 px-4 text-center background-yellow-30 clipped-home-stat-1">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">68%</p>
         <p class="fs-4 fw-bold lh-sm px-3">
           Increase in reduced-fare transactions<sup id="fnref:1" role="doc-noteref"><a class="link-body-emphasis text-decoration-none"
@@ -32,7 +32,7 @@ <h2 class="h1 text-center">Impact across California</h2>
         <a class="pb-3 mb-3 mb-lg-5 fw-normal link-body-emphasis d-inline-block"
            href="/customer-stories#stories-benefits-MST">Learn how Monterey-Salinas Transit made it simpler to access transit benefits.</a>
       </div>
-      <div class="col-11 mb-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-4 clipped-home-stat-2">
+      <div class="col-11 mb-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-30 clipped-home-stat-2">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">229,988</p>
         <p class="fs-4 fw-bold lh-sm px-3">
           Trips using a contactless credit/debit card<sup id="fnref:2" role="doc-noteref"><a class="link-body-emphasis text-decoration-none"
@@ -42,7 +42,7 @@ <h2 class="h1 text-center">Impact across California</h2>
         <a class="pb-3 mb-3 mb-lg-5 fw-normal link-body-emphasis d-inline-block"
            href="/customer-stories#stories-contactless-payments-GCTD">Read how Glenn County is implementing contactless payments.</a>
       </div>
-      <div class="col-11 mb-lg-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-4 clipped-home-stat-3">
+      <div class="col-11 mb-lg-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-30 clipped-home-stat-3">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">91%</p>
         <p class="fs-4 fw-bold lh-sm px-3">
           Reduction of expired GTFS Schedule Feeds<sup id="fnref:3" role="doc-noteref"><a class="link-body-emphasis text-decoration-none"

src/_layouts/press.html

@@ -16,8 +16,7 @@
   <div class="row justify-content-center">
     <div class="col-lg-8 col-md-8">
       <article class="press-release pb-5 mb-5">
-        <a class="d-block text-decoration-none mb-2 pt-3 mt-5 text-primary-blue"
-           href="/press">Press</a>
+        <a class="d-block text-decoration-none mb-2 pt-3 mt-5" href="/press">Press</a>
         <h1 class="h2">{{ page.heading }}</h1>
         {% if page.lead %}<p>{{ page.lead }}</p>{% endif %}
         <hr />

src/_layouts/resource.html

@@ -17,8 +17,7 @@
 <div class="row justify-content-center">
   <div class="col-lg-8 col-md-8">
     <article class="press-release pb-5 mb-5">
-      <a class="d-block text-decoration-none mb-2 pt-3 mt-5 text-primary-blue"
-         href="/resources">Resource</a>
+      <a class="d-block text-decoration-none mb-2 pt-3 mt-5" href="/resources">Resource</a>
       <h1 class="h2">{{ page.title }}</h1>
       <hr />
       <p>{{ date }}</p>

src/customer-stories.html

@@ -9,7 +9,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center justify-content-lg-start">
-  <div class="clipped-header background-yellow-4 offset-lg-1 col-lg-10 col-11 mt-4 mt-md-5 mb-4 mb-lg-3 py-4 py-md-4 px-4 px-md-0">
+  <div class="clipped-header background-yellow-30 offset-lg-1 col-lg-10 col-11 mt-4 mt-md-5 mb-4 mb-lg-3 py-4 py-md-4 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
       <h1 class="mb-2">Our customers</h1>
       <p class="mb-3 pb-3">
@@ -110,14 +110,14 @@ <h2>Selected agency highlights</h2>
                  class="rounded-2 w-100"
                  src="/images/stories-photo-vctc.jpg" />
           </figure>
-          <figure class="quote border-yellow-4 mt-3">
+          <figure class="quote border-yellow-30 mt-3">
             <blockquote>
               “As a small agency who doesn’t have the resources to be specialists in these areas, we’re able to leverage Cal-ITP’s
               support to get complicated tech projects done more quickly…or at all.”
             </blockquote>
             <figcaption class="ps-3">— Public Transit Director in Ventura County</figcaption>
           </figure>
-          <h3 class="small-caps border-0 bg-transparent fw-bold text-primary p-0 mb-0"
+          <h3 class="small-caps border-0 bg-transparent fw-bold text-brand-blue p-0 mb-0"
               id="stories-GTFS-VCTC">GTFS</h3>
           <span class="fw-bold fs-4 display-heading d-block">Ventura County Transportation Commission</span>
           <ul class="mt-3 ps-4">
@@ -151,7 +151,7 @@ <h2>Selected agency highlights</h2>
                  class="rounded-2 w-100"
                  src="/images/stories-photo-glenn.png" />
           </figure>
-          <h3 class="small-caps border-0 bg-transparent fw-bold text-primary p-0 mb-0"
+          <h3 class="small-caps border-0 bg-transparent fw-bold text-brand-blue p-0 mb-0"
               id="stories-contactless-payments-GCTD">Contactless payments</h3>
           <span class="fw-bold fs-4 display-heading d-block">Glenn County Transportation Division</span>
           <ul class="mt-3 ps-4">
@@ -174,7 +174,7 @@ <h2>Selected agency highlights</h2>
             This dedicated support is designed to help Glenn County make informed decisions, meet their deadlines, and set them up
             for a successful contactless payments launch.
           </p>
-          <figure class="quote border-yellow-4 mt-3">
+          <figure class="quote border-yellow-30 mt-3">
             <blockquote>
               “Our county’s situation may be a bit more unique than other jurisdictions, requiring more handholding, but Cal-ITP’s
               assistance hasn’t wavered. They’ve navigated us throughout this process and provided crucial resources—that’s more
@@ -202,7 +202,7 @@ <h2>Selected agency highlights</h2>
                     </path>
                     </clipPath>
                   </svg>
-                  <div class="impact-stats background-yellow-4 clipped-stories-impact col-11 col-lg-12 p-4 p-lg-5">
+                  <div class="impact-stats background-yellow-30 clipped-stories-impact col-11 col-lg-12 p-4 p-lg-5">
                     <h2 class="fs-0 text-center pt-lg-3">Our impact</h2>
                     <p>
                       Over the last 5 years, Cal-ITP has worked collaboratively with our customers to make progress toward the
@@ -244,7 +244,7 @@ <h2 class="fs-0 text-center pt-lg-3">Our impact</h2>
         </section>
 
         <section class="monterey-and-contact">
-          <h3 class="small-caps border-0 bg-transparent fw-bold text-primary p-0 mb-0"
+          <h3 class="small-caps border-0 bg-transparent fw-bold text-brand-blue p-0 mb-0"
               id="stories-benefits-MST">Benefits</h3>
           <span class="fw-bold fs-4 display-heading d-block">Monterey-Salinas Transit</span>
           <ul class="mt-3 ps-4">
@@ -283,7 +283,7 @@ <h2 class="fs-0 text-center pt-lg-3">Our impact</h2>
                class="link-body-emphasis fw-normal">Benefits Monthly Update</a>
             to learn more and to stay connected as we expand.
           </p>
-          <figure class="quote mt-3 border-yellow-4">
+          <figure class="quote mt-3 border-yellow-30">
             <blockquote>
               “The Cal-ITP team is wonderful to work with. We greatly appreciate their support, technical expertise, and
               collaboration!”

src/partners.html

@@ -7,7 +7,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped-header background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+  <div class="clipped-header background-purple-70 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 pt-3 pb-1 pt-md-5 pb-md-3 px-2 px-md-2">
       <h1 class="text-white mb-3">Partners</h1>
       <p class="text-white mb-3">
@@ -48,7 +48,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
              target="_blank">California Department of Technology</a>
           (CDT) to provide transit riders with a seamless way to qualify for and enroll in transit benefits online.
         </p>
-        <figure class="quote border-purple-4 my-md-4 my-3">
+        <figure class="quote border-purple-70 my-md-4 my-3">
           <blockquote>
             “The Cal-ITP project offered us a test-case to deliver dependable and equitable public services, and reduce outdated
             paper-based processes.”
@@ -83,7 +83,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
         </ul>
         <div class="row justify-content-md-center align-content-stretch my-md-4 my-3">
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
               <span class="fs-stats text-white pt-4 pt-md-3">68%</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">
                 Increase in reduced-fare transactions<sup id="fnref:1" role="doc-noteref"><a class="text-decoration-none text-white" href="#fn:1" rel="footnote">1</a></sup>
@@ -92,7 +92,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
           </div>
           <div class="d-lg-none lh-1">&nbsp;</div>
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-end">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-end">
               <span class="fs-stats text-white pt-4 pt-md-3">870</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">Number of reduced-fare transactions enabled by the CA Identity Gateway</span>
             </div>
@@ -122,7 +122,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
              alt=""
              src="/images/partners-background-carb.png" />
         <h2 class="my-3 my-md-4">California Air Resources Board</h2>
-        <figure class="quote border-purple-4 my-3 my-md-4-4">
+        <figure class="quote border-purple-70 my-3 my-md-4-4">
           <blockquote>
             “In order to unlock the greenhouse gas reductions and mobility justice opportunities that transit provides, we have to make it easier for people to use California’s buses and trains. Cal-ITP tackles basic but essential challenges that transit users face so that more Californians can make the switch to sustainable transportation options.”
           </blockquote>
@@ -151,14 +151,14 @@ <h2 class="my-3 my-md-4">California Air Resources Board</h2>
         </ul>
         <div class="row justify-content-md-center align-content-stretch my-3 my-md-4 mb-2">
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
               <span class="fs-stats text-white pt-4 pt-md-3">2035</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">By 2035, all new cars & light trucks sold in CA must be zero emission</span>
             </div>
           </div>
           <div class="d-lg-none lh-1">&nbsp;</div>
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
               <span class="fs-stats text-white pt-4 pt-md-3">89%</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">
                 of main industry players use contactless payment cards<sup id="fnref:2" role="doc-noteref"><a class="text-white text-decoration-none" href="#fn:2" rel="footnote">2</a></sup>

src/resources.html

@@ -10,7 +10,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped-header background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+  <div class="clipped-header background-purple-70 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
       <h1 class="text-white mb-2">Resources</h1>
       <p class="text-white mb-3 pb-3">

src/stylesheet.html

@@ -25,15 +25,15 @@ <h2>Paragraph text with links</h2>
 
   <article>
     <h2>Quotes</h2>
-    <figure class="quote border-purple-4">
+    <figure class="quote border-purple-70">
       <blockquote>
         “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
         aliqua.”
       </blockquote>
       <figcaption>- Lorem Ipsum, Manager at California State Transit</figcaption>
     </figure>
 
-    <figure class="quote border-yellow-4">
+    <figure class="quote border-yellow-30">
       <blockquote>
         “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
         aliqua.”

src/stylesheets/core.css renamed to src/stylesheets/dsdl/core.css

@@ -5,7 +5,7 @@
 
 
 body {
-  color: var(--dsdl-gray-100);
+  color: var(--dsdl-body-color);
   font-family: var(--dsdl-font-stack);
   line-height: var(--line-height-normal);
 }
@@ -108,8 +108,7 @@ h1 {
   font-weight: 400;
 }
 
-a:link,
-a:visited {
+a {
   color: var(--dsdl-blue-70);
 }
 a:hover,