Add arcade.uicolors to doc, then fix alpha and position in resource + color listings

arcade/uicolor.py

@@ -6,26 +6,26 @@
 from arcade.color import BLACK, WHITE, Color
 
 WHITE = WHITE
-GREEN_TURQUOISE = Color(26, 188, 156)
-GREEN_GREEN_SEA = Color(22, 160, 133)
-GREEN_NEPHRITIS = Color(39, 174, 96)
-GREEN_EMERALD = Color(46, 204, 113)
-BLUE_PETER_RIVER = Color(52, 152, 219)
-BLUE_BELIZE_HOLE = Color(41, 128, 185)
-PURPLE_AMETHYST = Color(155, 89, 182)
-PURPLE_WISTERIA = Color(142, 68, 173)
-DARK_BLUE_WET_ASPHALT = Color(52, 73, 94)
-DARK_BLUE_MIDNIGHT_BLUE = Color(44, 62, 80)
-YELLOW_SUN_FLOWER = Color(241, 196, 15)
-YELLOW_ORANGE = Color(243, 156, 18)
-ORANGE_CARROT = Color(230, 126, 34)
-ORANGE_PUMPKIN = Color(211, 84, 0)
-RED_ALIZARIN = Color(231, 76, 60)
-RED_POMEGRANATE = Color(192, 57, 43)
-WHITE_CLOUDS = Color(236, 240, 241)
-WHITE_SILVER = Color(189, 195, 199)
-GRAY_CONCRETE = Color(149, 165, 166)
-GRAY_ASBESTOS = Color(127, 140, 141)
+GREEN_TURQUOISE = Color(26, 188, 156, 255)
+GREEN_GREEN_SEA = Color(22, 160, 133, 255)
+GREEN_NEPHRITIS = Color(39, 174, 96, 255)
+GREEN_EMERALD = Color(46, 204, 113, 255)
+BLUE_PETER_RIVER = Color(52, 152, 219, 255)
+BLUE_BELIZE_HOLE = Color(41, 128, 185, 255)
+PURPLE_AMETHYST = Color(155, 89, 182, 255)
+PURPLE_WISTERIA = Color(142, 68, 173, 255)
+DARK_BLUE_WET_ASPHALT = Color(52, 73, 94, 255)
+DARK_BLUE_MIDNIGHT_BLUE = Color(44, 62, 80, 255)
+YELLOW_SUN_FLOWER = Color(241, 196, 15, 255)
+YELLOW_ORANGE = Color(243, 156, 18, 255)
+ORANGE_CARROT = Color(230, 126, 34, 255)
+ORANGE_PUMPKIN = Color(211, 84, 0, 255)
+RED_ALIZARIN = Color(231, 76, 60, 255)
+RED_POMEGRANATE = Color(192, 57, 43, 255)
+WHITE_CLOUDS = Color(236, 240, 241, 255)
+WHITE_SILVER = Color(189, 195, 199, 255)
+GRAY_CONCRETE = Color(149, 165, 166, 255)
+GRAY_ASBESTOS = Color(127, 140, 141, 255)
 BLACK = BLACK
 
 __all__ = [

doc/_static/css/custom.css

@@ -208,18 +208,57 @@ table.dataTable.display tbody tr.even > .sorting_1 {
     color: var(--color-foreground-primary);
 }
 
-/* Named color chart */
+/* Color tables and resource pages */
+.checkered-bg, .color-swatch{
+    background: url(../checkered.png);
+    background-repeat: repeat;
+}
+
+table.resource-table {
+    empty-cells: hide;
+}
+/* Make the resource page's table cell contents look neat */
+table.resource-table td {
+    text-align: center;
+}
+table.resource-table td > img {
+    display: inline-block;
+}
 table.colorTable {
-    border-spacing: 5px;
+    border-width: 1px;
 }
-table.colorTable tr > td:nth-child(3) {
-    border: 1px solid black;
+
+/* Named color tables for larger screens */
+table.colorTable td, table.colorTable th {
+    padding: 2px;
 }
-table.colorTable tr > td:nth-child(3) > div {
+table.colorTable tr:not(:last-child)  {
+    border-bottom-width: 1px;
+}
+
+.colorTable .color-swatch {
     display: block;
+    border: 1px solid black;
+    padding: 0px;
+    box-sizing: border-box;
     width: 80px;
     min-width: 80px;
 }
+
+/* Use compact mode for color tables on smaller screens*/
+@media screen and (width <= 700px) {
+   table.colorTable {
+       border-spacing: collapse;
+   }
+   table.colorTable td, table.colorTable th {
+    padding: 0px;
+   }
+   .colorTable .color-swatch {
+       width: 40px;
+       min-width: 40px;
+   }
+}
+
 /* Custom code syntax highlighting */
 body:not([data-theme="light"]) .highlight .c1 {
     color: #48A148;
@@ -228,13 +267,7 @@ body:not([data-theme="light"]) .highlight .c1 {
     color: #007507;
 }
 
-/* Color tables */
-.checkered {
-    background-image: url(../checkered.png);
-    background-repeat: repeat;
-    margin:0px;
-    padding: 0px;
-}
+
 
 /* Change font for headers and title*/
 @font-face {

doc/api_docs/arcade.rst

@@ -69,3 +69,4 @@ for the Python Arcade library. See also:
     arcade.key
     arcade.csscolor
     arcade.color
+    arcade.uicolor

doc/api_docs/arcade.uicolor.rst

@@ -0,0 +1,19 @@
+.. _uicolor:
+
+arcade.uicolor package
+======================
+
+.. _FlatUI: https://materialui.co/flatuicolors/
+
+This module contains colors from MaterialUI's `FlatUI`_ palette.
+
+.. note:: `WHITE` and `BLACK` are aliases.
+
+           These are imported from `arcade.color`.
+
+You can specify colors four ways:
+
+* Standard CSS color names :ref:`csscolor`: ``arcade.csscolor.RED``
+* Nonstandard color names (this package): ``arcade.color.RED``
+* Three-byte numbers: ``(255, 0, 0)``
+* Four-byte numbers (fourth byte is transparency. 0 transparent, 255 opaque): ``(255, 0, 0, 255)``

doc/conf.py

@@ -331,16 +331,22 @@ def generate_color_table(filename, source):
             if not matches:
                 continue
 
-            color_rgba = f"({matches.group('red')}, {matches.group('green')}, {matches.group('blue')}, {matches.group('alpha')})"
+            name, r, g, b, a = matches.groupdict().values()
+            color_rgb_comma_sep= f"{r}, {g}, {b}"
 
             # Generate the alpha for CSS color function
-            alpha = int( matches.group('alpha') ) / 255
-            css_rgba = f"({matches.group('red')}, {matches.group('green')}, {matches.group('blue')}, {alpha!s:.4})"
+            rgba_css = f"rgba({color_rgb_comma_sep}, {int(a) / 255!s:.4})"
 
             append_text += "    <tr>"
-            append_text += f"<td>{matches.group('name')}</td>"
-            append_text += f"<td>{color_rgba}</td>"
-            append_text += f"<td class='checkered'><div style='background-color:rgba{css_rgba};'>&nbsp</div></td>"
+            append_text += (
+                f"<td>"
+                f"<code class=\"docutils literal notranslate\">"
+                f"<span class=\"pre\">{name}</span>"
+                f"</code>"
+                f"</td>"
+            )
+            append_text += f"<td class=\"color-swatch\"><div style=\"background: {rgba_css};\">&nbsp</div></td>"
+            append_text += f"<td>({color_rgb_comma_sep}, {a})</td>"
             append_text += "</tr>\n"
 
     append_text += "    </tbody></table>"
@@ -376,7 +382,8 @@ def _get_dir(app, path):
         generate_color_table(_get_dir(_app, "color/__init__.py"), source)
     elif doc_name == "api_docs/arcade.csscolor":
         generate_color_table(_get_dir(_app, "csscolor/__init__.py"), source)
-
+    elif doc_name == "api_docs/arcade.uicolor":
+        generate_color_table(_get_dir(_app, "uicolor.py"), source)
 
 def on_autodoc_process_bases(app, name, obj, options, bases):
     """We don't care about the `object` base class, so remove it from the list of bases."""

util/create_resources_listing.py

@@ -175,7 +175,11 @@ def process_resource_files(out, file_list: List[Path]):
         name = path.name
         resource_copyable = f"{create_resource_path(path)}"
         if suffix in [".png", ".jpg", ".gif", ".svg"]:
-            out.write(f"    {start_row} - .. image:: ../../{resource_path}\n\n")
+            out.write(f"    {start_row} - .. image:: ../../{resource_path}\n")
+            # IMPORTANT:
+            # 1. 11 chars to match the start of "image" above
+            # 2. :class: checkered-bg to apply the checkers to transparent images
+            out.write(f"           :class: checkered-bg\n\n")
             out.write(f"        {name}\n")
         elif suffix in SUFFIX_TO_AUDIO_TYPE:
             file_path = FMT_URL_REF_EMBED.format(resource_path)