Skip to content

Commit 553bba4

Browse files
authored
Add arcade.uicolors to doc, then fix alpha and position in resource + color listings (#2419)
* Fix constant literals and 1 px gap at bottom of color swatches * Add .color-swatch to .checkered as resource prep * Wire arcade.uicolor into the doc * Add a file compliant with current color table approach * Add it to the API overview toctree under colors * Temp append 255 to all arcade.uicolor files to simplify parsing logic * Add the color reading to conf.py * Add alpha grid and centering to resource images * Fix too-short title underline
1 parent 8a247c6 commit 553bba4

File tree

6 files changed

+104
-40
lines changed

6 files changed

+104
-40
lines changed

arcade/uicolor.py

+20-20
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,26 @@
66
from arcade.color import BLACK, WHITE, Color
77

88
WHITE = WHITE
9-
GREEN_TURQUOISE = Color(26, 188, 156)
10-
GREEN_GREEN_SEA = Color(22, 160, 133)
11-
GREEN_NEPHRITIS = Color(39, 174, 96)
12-
GREEN_EMERALD = Color(46, 204, 113)
13-
BLUE_PETER_RIVER = Color(52, 152, 219)
14-
BLUE_BELIZE_HOLE = Color(41, 128, 185)
15-
PURPLE_AMETHYST = Color(155, 89, 182)
16-
PURPLE_WISTERIA = Color(142, 68, 173)
17-
DARK_BLUE_WET_ASPHALT = Color(52, 73, 94)
18-
DARK_BLUE_MIDNIGHT_BLUE = Color(44, 62, 80)
19-
YELLOW_SUN_FLOWER = Color(241, 196, 15)
20-
YELLOW_ORANGE = Color(243, 156, 18)
21-
ORANGE_CARROT = Color(230, 126, 34)
22-
ORANGE_PUMPKIN = Color(211, 84, 0)
23-
RED_ALIZARIN = Color(231, 76, 60)
24-
RED_POMEGRANATE = Color(192, 57, 43)
25-
WHITE_CLOUDS = Color(236, 240, 241)
26-
WHITE_SILVER = Color(189, 195, 199)
27-
GRAY_CONCRETE = Color(149, 165, 166)
28-
GRAY_ASBESTOS = Color(127, 140, 141)
9+
GREEN_TURQUOISE = Color(26, 188, 156, 255)
10+
GREEN_GREEN_SEA = Color(22, 160, 133, 255)
11+
GREEN_NEPHRITIS = Color(39, 174, 96, 255)
12+
GREEN_EMERALD = Color(46, 204, 113, 255)
13+
BLUE_PETER_RIVER = Color(52, 152, 219, 255)
14+
BLUE_BELIZE_HOLE = Color(41, 128, 185, 255)
15+
PURPLE_AMETHYST = Color(155, 89, 182, 255)
16+
PURPLE_WISTERIA = Color(142, 68, 173, 255)
17+
DARK_BLUE_WET_ASPHALT = Color(52, 73, 94, 255)
18+
DARK_BLUE_MIDNIGHT_BLUE = Color(44, 62, 80, 255)
19+
YELLOW_SUN_FLOWER = Color(241, 196, 15, 255)
20+
YELLOW_ORANGE = Color(243, 156, 18, 255)
21+
ORANGE_CARROT = Color(230, 126, 34, 255)
22+
ORANGE_PUMPKIN = Color(211, 84, 0, 255)
23+
RED_ALIZARIN = Color(231, 76, 60, 255)
24+
RED_POMEGRANATE = Color(192, 57, 43, 255)
25+
WHITE_CLOUDS = Color(236, 240, 241, 255)
26+
WHITE_SILVER = Color(189, 195, 199, 255)
27+
GRAY_CONCRETE = Color(149, 165, 166, 255)
28+
GRAY_ASBESTOS = Color(127, 140, 141, 255)
2929
BLACK = BLACK
3030

3131
__all__ = [

doc/_static/css/custom.css

+45-12
Original file line numberDiff line numberDiff line change
@@ -208,18 +208,57 @@ table.dataTable.display tbody tr.even > .sorting_1 {
208208
color: var(--color-foreground-primary);
209209
}
210210

211-
/* Named color chart */
211+
/* Color tables and resource pages */
212+
.checkered-bg, .color-swatch{
213+
background: url(../checkered.png);
214+
background-repeat: repeat;
215+
}
216+
217+
table.resource-table {
218+
empty-cells: hide;
219+
}
220+
/* Make the resource page's table cell contents look neat */
221+
table.resource-table td {
222+
text-align: center;
223+
}
224+
table.resource-table td > img {
225+
display: inline-block;
226+
}
212227
table.colorTable {
213-
border-spacing: 5px;
228+
border-width: 1px;
214229
}
215-
table.colorTable tr > td:nth-child(3) {
216-
border: 1px solid black;
230+
231+
/* Named color tables for larger screens */
232+
table.colorTable td, table.colorTable th {
233+
padding: 2px;
217234
}
218-
table.colorTable tr > td:nth-child(3) > div {
235+
table.colorTable tr:not(:last-child) {
236+
border-bottom-width: 1px;
237+
}
238+
239+
.colorTable .color-swatch {
219240
display: block;
241+
border: 1px solid black;
242+
padding: 0px;
243+
box-sizing: border-box;
220244
width: 80px;
221245
min-width: 80px;
222246
}
247+
248+
/* Use compact mode for color tables on smaller screens*/
249+
@media screen and (width <= 700px) {
250+
table.colorTable {
251+
border-spacing: collapse;
252+
}
253+
table.colorTable td, table.colorTable th {
254+
padding: 0px;
255+
}
256+
.colorTable .color-swatch {
257+
width: 40px;
258+
min-width: 40px;
259+
}
260+
}
261+
223262
/* Custom code syntax highlighting */
224263
body:not([data-theme="light"]) .highlight .c1 {
225264
color: #48A148;
@@ -228,13 +267,7 @@ body:not([data-theme="light"]) .highlight .c1 {
228267
color: #007507;
229268
}
230269

231-
/* Color tables */
232-
.checkered {
233-
background-image: url(../checkered.png);
234-
background-repeat: repeat;
235-
margin:0px;
236-
padding: 0px;
237-
}
270+
238271

239272
/* Change font for headers and title*/
240273
@font-face {

doc/api_docs/arcade.rst

+1
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,4 @@ for the Python Arcade library. See also:
6969
arcade.key
7070
arcade.csscolor
7171
arcade.color
72+
arcade.uicolor

doc/api_docs/arcade.uicolor.rst

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.. _uicolor:
2+
3+
arcade.uicolor package
4+
======================
5+
6+
.. _FlatUI: https://materialui.co/flatuicolors/
7+
8+
This module contains colors from MaterialUI's `FlatUI`_ palette.
9+
10+
.. note:: `WHITE` and `BLACK` are aliases.
11+
12+
These are imported from `arcade.color`.
13+
14+
You can specify colors four ways:
15+
16+
* Standard CSS color names :ref:`csscolor`: ``arcade.csscolor.RED``
17+
* Nonstandard color names (this package): ``arcade.color.RED``
18+
* Three-byte numbers: ``(255, 0, 0)``
19+
* Four-byte numbers (fourth byte is transparency. 0 transparent, 255 opaque): ``(255, 0, 0, 255)``

doc/conf.py

+14-7
Original file line numberDiff line numberDiff line change
@@ -331,16 +331,22 @@ def generate_color_table(filename, source):
331331
if not matches:
332332
continue
333333

334-
color_rgba = f"({matches.group('red')}, {matches.group('green')}, {matches.group('blue')}, {matches.group('alpha')})"
334+
name, r, g, b, a = matches.groupdict().values()
335+
color_rgb_comma_sep= f"{r}, {g}, {b}"
335336

336337
# Generate the alpha for CSS color function
337-
alpha = int( matches.group('alpha') ) / 255
338-
css_rgba = f"({matches.group('red')}, {matches.group('green')}, {matches.group('blue')}, {alpha!s:.4})"
338+
rgba_css = f"rgba({color_rgb_comma_sep}, {int(a) / 255!s:.4})"
339339

340340
append_text += " <tr>"
341-
append_text += f"<td>{matches.group('name')}</td>"
342-
append_text += f"<td>{color_rgba}</td>"
343-
append_text += f"<td class='checkered'><div style='background-color:rgba{css_rgba};'>&nbsp</div></td>"
341+
append_text += (
342+
f"<td>"
343+
f"<code class=\"docutils literal notranslate\">"
344+
f"<span class=\"pre\">{name}</span>"
345+
f"</code>"
346+
f"</td>"
347+
)
348+
append_text += f"<td class=\"color-swatch\"><div style=\"background: {rgba_css};\">&nbsp</div></td>"
349+
append_text += f"<td>({color_rgb_comma_sep}, {a})</td>"
344350
append_text += "</tr>\n"
345351

346352
append_text += " </tbody></table>"
@@ -376,7 +382,8 @@ def _get_dir(app, path):
376382
generate_color_table(_get_dir(_app, "color/__init__.py"), source)
377383
elif doc_name == "api_docs/arcade.csscolor":
378384
generate_color_table(_get_dir(_app, "csscolor/__init__.py"), source)
379-
385+
elif doc_name == "api_docs/arcade.uicolor":
386+
generate_color_table(_get_dir(_app, "uicolor.py"), source)
380387

381388
def on_autodoc_process_bases(app, name, obj, options, bases):
382389
"""We don't care about the `object` base class, so remove it from the list of bases."""

util/create_resources_listing.py

+5-1
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,11 @@ def process_resource_files(out, file_list: List[Path]):
175175
name = path.name
176176
resource_copyable = f"{create_resource_path(path)}"
177177
if suffix in [".png", ".jpg", ".gif", ".svg"]:
178-
out.write(f" {start_row} - .. image:: ../../{resource_path}\n\n")
178+
out.write(f" {start_row} - .. image:: ../../{resource_path}\n")
179+
# IMPORTANT:
180+
# 1. 11 chars to match the start of "image" above
181+
# 2. :class: checkered-bg to apply the checkers to transparent images
182+
out.write(f" :class: checkered-bg\n\n")
179183
out.write(f" {name}\n")
180184
elif suffix in SUFFIX_TO_AUDIO_TYPE:
181185
file_path = FMT_URL_REF_EMBED.format(resource_path)

0 commit comments

Comments
 (0)