diff --git a/arcade/uicolor.py b/arcade/uicolor.py index cc1b4fef2..eb0409428 100644 --- a/arcade/uicolor.py +++ b/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__ = [ diff --git a/doc/_static/css/custom.css b/doc/_static/css/custom.css index 049f6738f..0f30b0db5 100644 --- a/doc/_static/css/custom.css +++ b/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 { diff --git a/doc/api_docs/arcade.rst b/doc/api_docs/arcade.rst index 01b2180f1..a541e0500 100644 --- a/doc/api_docs/arcade.rst +++ b/doc/api_docs/arcade.rst @@ -69,3 +69,4 @@ for the Python Arcade library. See also: arcade.key arcade.csscolor arcade.color + arcade.uicolor diff --git a/doc/api_docs/arcade.uicolor.rst b/doc/api_docs/arcade.uicolor.rst new file mode 100644 index 000000000..0166f2c84 --- /dev/null +++ b/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)`` diff --git a/doc/conf.py b/doc/conf.py index a1d00dce1..5cf077319 100644 --- a/doc/conf.py +++ b/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 += " " - append_text += f"{matches.group('name')}" - append_text += f"{color_rgba}" - append_text += f"
 
" + append_text += ( + f"" + f"" + f"{name}" + f"" + f"" + ) + append_text += f"
 
" + append_text += f"({color_rgb_comma_sep}, {a})" append_text += "\n" append_text += " " @@ -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.""" diff --git a/util/create_resources_listing.py b/util/create_resources_listing.py index 2562560f7..639a55696 100644 --- a/util/create_resources_listing.py +++ b/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)