Merge pull request #196 from couchbase/DOC-13935-capella-type-AI-and-app-services

DOC-13935 new page-capella-type for AI and app-services

Author: osfameron

src/css/labels.css

@@ -126,7 +126,7 @@
   opacity: 0.6;
 }
 
-/* Capella types: columnar vs operational */
+/* Capella types: columnar,  operational, ai, app-services */
 .doc .columnar {
   color: var(--color-brand-caution);
   border: 1px solid var(--color-brand-caution);
@@ -141,6 +141,20 @@
   opacity: 0.6;
 }
 
+.doc .app-services {
+  color: var(--color-brand-purple-secondary);
+  border: 1px solid var(--color-brand-purple-secondary);
+  border-radius: 3px;
+  opacity: 0.6;
+}
+
+.doc .ai {
+  color: var(--color-brand-green-secondary);
+  border: 1px solid var(--color-brand-green-secondary);
+  border-radius: 3px;
+  opacity: 0.6;
+}
+
 .doc .edition.page-edition {
   color: #999;
   border: 1px solid #999;

src/css/vars.css

@@ -20,6 +20,8 @@
   --color-link: var(--color-brand-blue-secondary);
   --color-link-active: var(--color-brand-blue-secondary-light);
   --color-link-hover: var(--color-brand-blue-secondary-extra-light);
+  --color-brand-green-secondary: #366407;
+  --color-brand-purple-secondary: #76309e;
 
   /* legacy secondary */
   --color-blue-rgb: 87, 160, 255;

src/js/vendor/fontawesome-icon-defs.js

@@ -5,6 +5,14 @@
   <li class="columnar">
     <i class="fas fa-chart-line"></i> 
     Capella Analytics</li>
+{{else if (eq this "AI")}}
+  <li class="ai">
+    <i class="fas fa-sparkles"></i> 
+    Capella AI Services</li>
+{{else if (eq this "App Services")}}
+  <li class="app-services">
+    <i class="fas fa-mobile"></i>
+    Capella App Services</li>
 {{else}}
   <li class="operational">
     <i class="fas fa-database"></i>