From ae0820760afed6b6ee7849a854fb477ae9565eee Mon Sep 17 00:00:00 2001
From: "David B. Kinder" <david.b.kinder@intel.com>
Date: Tue, 14 Dec 2021 16:31:55 -0800
Subject: [PATCH] doc: add CSS color styles

Add some color styles we can use (via .. rst-class:: style directive) to
add color to rst tables.  Also introduce a centered class instead of
using the deprecated .. centered:: directive.  Update documentation
guidelines to describe these new styles (background colors).

Signed-off-by: David B. Kinder <david.b.kinder@intel.com>
---
 doc/developer-guides/doc_guidelines.rst | 53 +++++++++++++++++++++++++
 doc/static/acrn-custom.css              | 45 +++++++++++++++++++++
 2 files changed, 98 insertions(+)

diff --git a/doc/developer-guides/doc_guidelines.rst b/doc/developer-guides/doc_guidelines.rst
index 194112fee..e84f376ed 100644
--- a/doc/developer-guides/doc_guidelines.rst
+++ b/doc/developer-guides/doc_guidelines.rst
@@ -522,6 +522,59 @@ Keep the line length for documentation less than 80 characters to make it
 easier for reviewing in GitHub. Long lines due to URL references are an
 allowed exception.
 
+Background Colors
+*****************
+
+We've defined some CSS styles for use as background colors for paragraphs.
+These styles can be applied using the ``.. rst-class`` directive using one of
+these style names.  You can also use the defined ``centered`` style to place the
+text centered within the element, useful for centering text within a table cell
+or column span:
+
+.. rst-class:: bg-acrn-green centered
+
+   \.\. rst-class:: bg-acrn-green centered
+
+.. rst-class:: bg-acrn-lightgreen centered
+
+   \.\. rst-class:: bg-acrn-lightgreen centered
+
+.. rst-class:: bg-acrn-brown centered
+
+   \.\. rst-class:: bg-acrn-brown centered
+
+.. rst-class:: bg-acrn-lightbrown centered
+
+   \.\. rst-class:: bg-acrn-lightbrown centered
+
+.. rst-class:: bg-acrn-blue centered
+
+   \.\. rst-class:: bg-acrn-blue centered
+
+.. rst-class:: bg-acrn-red centered
+
+   \.\. rst-class:: bg-acrn-red centered
+
+.. rst-class:: bg-acrn-gradient centered
+
+   \.\. rst-class:: bg-acrn-gradient centered
+
+.. rst-class:: bg-lightyellow centered
+
+   \.\. rst-class:: bg-lightyellow centered
+
+.. rst-class:: bg-lightgreen centered
+
+   \.\. rst-class:: bg-lightgreen centered
+
+.. rst-class:: bg-lavender centered
+
+   \.\. rst-class:: bg-lavender centered
+
+.. rst-class:: bg-lightgrey centered
+
+   \.\. rst-class:: bg-lightgrey centered
+
 Drawings
 ********
 
diff --git a/doc/static/acrn-custom.css b/doc/static/acrn-custom.css
index db6aba941..80b265bdf 100644
--- a/doc/static/acrn-custom.css
+++ b/doc/static/acrn-custom.css
@@ -332,3 +332,48 @@ img.drop-shadow {
 .lastupdated {
     float:right;
 }
+
+/* some custom classes used in rst-class directives */
+.centered {
+    text-align: center;
+}
+
+/* colors from ACRN brand pallet */
+.bg-acrn-green {
+    background-color: #006368;
+    color: white;
+}
+.bg-acrn-lightgreen {
+    background-color: #69BFAD;
+}
+.bg-acrn-brown {
+    background-color: #998265;
+    color: white;
+}
+.bg-acrn-lightbrown {
+    background-color: #D7AF96;
+}
+.bg-acrn-blue {
+    background-color: #232256;
+    color: white;
+}
+.bg-acrn-red {
+    background-color: #7F0F24;
+    color: white;
+}
+.bg-acrn-gradient {
+    background: linear-gradient(135deg, #232256 0%, #69BFAD 100%);
+    color: white;
+}
+.bg-lightyellow {
+    background-color: lightyellow;
+}
+.bg-lightgreen {
+    background-color: #D0F0C0; /* tea green */
+}
+.bg-lavender {
+    background-color: lavender;
+}
+.bg-lightgrey {
+    background-color: lightgrey;
+}