css: support color swatches in code snippets.

Still needs to be hooked into Pygments, m.code and Doxygen theme
somehow.

diff --git a/css/m-components.css b/css/m-components.css
index b46448436080553838b10f1bbc176f8b85b6f641..a2d5c5ec04f121fd7b386574ece6bdd86e20215b 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -1100,6 +1100,17 @@ pre.m-code.m-inverted > span.hll {
   border-color: transparent;
 }
 
+/* Code color swatch */
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
+
 /* Math block, math figure, inline math, math inside buttons because I am
    crazy */
 div.m-math {

diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 7c936b98fd2ff6eb96017b1b6c6af5392f5ecda2..9c711d7d894c6075ccdc7908576d411d12779a15 100644 (file)
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 08b4ba5fcddbdf0a52d29d01db72e56b994e178d..859b4325f4a3fc2c26c04393d8a9b8bd8e80ec95 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;

diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index e79ffd470b2701313ae4e5edc646190cd465483c..8c0a66b66a62a95a0e88c82e66640ae764ce3dac 100644 (file)
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 24f4b3f7d39d4793182409246772e1bbc9dc9467..6abbff92e0456dde379ca9778fc7bc3b55ee6b71 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1346,6 +1346,15 @@ pre.m-code.m-inverted > span.hll {
   background-color: transparent;
   border-color: transparent;
 }
+.m-code-color {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  vertical-align: -0.05rem;
+  margin-left: 0.2rem;
+  margin-right: 0.1rem;
+  border-radius: 0.1rem;
+}
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden;

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 4dcb5b6d790abfd6e9937588be6e6573e239362c..94826dd22c2b40c576916119fc7bb9161d3ded23 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -883,6 +883,28 @@ instead of :html:`<pre>`:
     :abbr:`reST <reStructuredText>` directive and a :rst:`:code:` inline text
     role.
 
+`Color swatches in code snippets`_
+----------------------------------
+
+For code dealing with colors it might be useful to show the actual color that's
+being represented by a hexadecimal literal, for example. In the below snippet,
+:html:`<span class="m-code-color" style="background-color: #3bd267;"></span>`
+is added next to the literal, showing a colored square:
+
+.. code-figure::
+
+    .. code:: html
+
+        <pre class="m-code"><span class="p">.</span><span class="nc">success</span> <span class="p">{</span>
+          <span class="k">color</span><span class="p">:</span> <span class="mh">#3bd267<span class="m-code-color" style="background-color: #3bd267;"></span></span><span class="p">;</span>
+        <span class="p">}</span></pre>
+
+    .. raw:: html
+
+        <pre class="m-code"><span class="p">.</span><span class="nc">success</span> <span class="p">{</span>
+          <span class="k">color</span><span class="p">:</span> <span class="mh">#3bd267<span class="m-code-color" style="background-color: #3bd267;"></span></span><span class="p">;</span>
+        <span class="p">}</span></pre>
+
 `Colored terminal output`_
 --------------------------