Adds updated color swatches.

uw-it-aca · Jan 9, 2024 · c8c04f6 · c8c04f6
1 parent 381f147
commit c8c04f6
Showing 1 changed file with 54 additions and 3 deletions.
diff --git a/src/pages/foundations/color.vue b/src/pages/foundations/color.vue
@@ -219,16 +219,16 @@
         </template>
       </CodeBlock>
 
-      <h3>Updated Theme Colors</h3>
+      <h3>Updated Theme</h3>
 
       <h4>Branding</h4>
       <ul class="list-inline m-0">
         <li class="list-inline-item">
           <div
-            class="text-bg-brand-accent rounded p-2"
+            class="text-bg-brand rounded p-2"
             style="width: 120px; height: 60px"
           >
-            brand-accent
+            brand
           </div>
           <small> #2f68cb</small>
         </li>
@@ -333,6 +333,57 @@
           <small> #212529</small>
         </li>
       </ul>
+
+      <h4>Swatches</h4>
+      <div class="d-flex w-50">
+        <div style="width: 150px" class="col mb-3">
+          <div class="p-3 mb-2 position-relative bg-purple2-500 text-white">
+            <strong class="d-block">$purple2</strong>
+            #4b2e83
+          </div>
+          <div class="p-3 bg-purple2-100">$purple2-100</div>
+          <div class="p-3 bg-purple2-200">$purple2-200</div>
+          <div class="p-3 bg-purple2-300">$purple2-300</div>
+          <div class="p-3 bg-purple2-400 text-light">$purple2-400</div>
+          <div class="p-3 bg-purple2-500 text-white">$purple2-500</div>
+          <div class="p-3 bg-purple2-600 text-white">$purple2-600</div>
+          <div class="p-3 bg-purple2-700 text-white">$purple2-700</div>
+          <div class="p-3 bg-purple2-800 text-white">$purple2-800</div>
+          <div class="p-3 bg-purple2-900 text-white">$purple2-900</div>
+        </div>
+
+        <div style="width: 150px" class="col mb-3">
+          <div class="p-3 mb-2 position-relative bg-red2-500 text-white">
+            <strong class="d-block">$red2</strong>
+            #cb444a
+          </div>
+          <div class="p-3 bg-red2-100">$red2-100</div>
+          <div class="p-3 bg-red2-200">$red2-200</div>
+          <div class="p-3 bg-red2-300">$red2-300</div>
+          <div class="p-3 bg-red2-400 text-light">$red2-400</div>
+          <div class="p-3 bg-red2-500 text-white">$red2-500</div>
+          <div class="p-3 bg-red2-600 text-white">$red2-600</div>
+          <div class="p-3 bg-red2-700 text-white">$red2-700</div>
+          <div class="p-3 bg-red2-800 text-white">$red2-800</div>
+          <div class="p-3 bg-red2-900 text-white">$red2-900</div>
+        </div>
+
+        <div style="width: 150px" class="col mb-3">
+          <div class="p-3 mb-2 position-relative bg-blue2-500 text-white">
+            <strong class="d-block">$blue2</strong>
+            #2F68CB
+          </div>
+          <div class="p-3 bg-blue2-100">$blue2-100</div>
+          <div class="p-3 bg-blue2-200">$blue2-200</div>
+          <div class="p-3 bg-blue2-300">$blue2-300</div>
+          <div class="p-3 bg-blue2-400 text-light">$blue2-400</div>
+          <div class="p-3 bg-blue2-500 text-white">$blue2-500</div>
+          <div class="p-3 bg-blue2-600 text-white">$blue2-600</div>
+          <div class="p-3 bg-blue2-700 text-white">$blue2-700</div>
+          <div class="p-3 bg-blue2-800 text-white">$blue2-800</div>
+          <div class="p-3 bg-blue2-900 text-white">$blue2-900</div>
+        </div>
+      </div>
     </template>
     <template #author>Charlon Palacay</template>
   </Layout>