"""
HTML Reference Sheet Generator (stellium.visualization.reference_sheet)
Generates comprehensive HTML reference sheets showing all available
themes, palettes, and their colors for easy reference.
"""
from .palettes import (
AspectPalette,
PlanetGlyphPalette,
ZodiacPalette,
get_aspect_palette_colors,
get_aspect_palette_description,
get_palette_colors,
get_palette_description,
get_planet_glyph_color,
get_planet_glyph_palette_description,
)
from .themes import ChartTheme, get_theme_description, get_theme_style
[docs]
def generate_html_reference(
filename: str = "stellium_color_reference.html",
include_zodiac: bool = True,
include_aspects: bool = True,
include_planet_glyphs: bool = True,
include_themes: bool = True,
) -> str:
"""
Generate a comprehensive HTML reference sheet for all Stellium colors and palettes.
Args:
filename: Output HTML filename
include_zodiac: Include zodiac palettes section
include_aspects: Include aspect palettes section
include_planet_glyphs: Include planet glyph palettes section
include_themes: Include themes section
Returns:
The filename of the generated HTML file
Example:
>>> from stellium.visualization import generate_html_reference
>>> generate_html_reference("colors.html")
"""
html_parts = []
# HTML header and CSS
html_parts.append(
"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stellium Color & Theme Reference</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 {
color: #333;
border-bottom: 3px solid #4CAF50;
padding-bottom: 10px;
}
h2 {
color: #555;
border-bottom: 2px solid #ddd;
padding-bottom: 8px;
margin-top: 40px;
}
.palette-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.palette-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 15px;
}
.palette-name {
font-weight: bold;
font-size: 1.1em;
color: #333;
margin-bottom: 5px;
}
.palette-description {
color: #666;
font-size: 0.9em;
margin-bottom: 15px;
}
.color-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.color-swatch {
width: 50px;
height: 50px;
border-radius: 4px;
border: 1px solid #ccc;
position: relative;
cursor: pointer;
}
.color-swatch:hover::after {
content: attr(data-color);
position: absolute;
bottom: -25px;
left: 0;
background: #333;
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75em;
white-space: nowrap;
z-index: 10;
}
.color-label {
font-size: 0.75em;
color: #666;
margin-top: 4px;
text-align: center;
}
.aspect-colors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.aspect-item {
text-align: center;
}
.planet-colors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.planet-item {
text-align: center;
}
.theme-preview {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 15px;
align-items: start;
}
.theme-info {
display: grid;
gap: 8px;
}
.theme-color-row {
display: flex;
align-items: center;
gap: 10px;
}
.theme-color-label {
font-size: 0.85em;
color: #666;
min-width: 150px;
}
.theme-color-swatch {
width: 40px;
height: 30px;
border-radius: 4px;
border: 1px solid #ccc;
}
.theme-color-value {
font-family: 'Courier New', monospace;
font-size: 0.85em;
color: #888;
}
code {
background: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>🌟 Stellium Color & Theme Reference</h1>
<p>
This reference sheet shows all available color palettes and themes in the Stellium visualization system.
Hover over color swatches to see hex values.
</p>
"""
)
# Zodiac Palettes Section
if include_zodiac:
html_parts.append("<h2>🌈 Zodiac Wheel Palettes</h2>")
html_parts.append(
"<p>Color palettes for the 12 zodiac signs on the outer wheel.</p>"
)
html_parts.append('<div class="palette-grid">')
for palette in ZodiacPalette:
colors = get_palette_colors(palette)
description = get_palette_description(palette)
html_parts.append('<div class="palette-card">')
html_parts.append(
f'<div class="palette-name">{palette.value.title()}</div>'
)
html_parts.append(f'<div class="palette-description">{description}</div>')
html_parts.append('<div class="color-swatches">')
sign_names = [
"Aries",
"Taurus",
"Gemini",
"Cancer",
"Leo",
"Virgo",
"Libra",
"Scorpio",
"Sagittarius",
"Capricorn",
"Aquarius",
"Pisces",
]
for i, color in enumerate(colors):
html_parts.append(
f'<div><div class="color-swatch" style="background-color: {color};" '
f'data-color="{color}"></div>'
f'<div class="color-label">{sign_names[i][:3]}</div></div>'
)
html_parts.append("</div></div>")
html_parts.append("</div>")
# Aspect Palettes Section
if include_aspects:
html_parts.append("<h2>🔷 Aspect Line Palettes</h2>")
html_parts.append("<p>Color palettes for aspect lines in the chart center.</p>")
html_parts.append('<div class="palette-grid">')
for palette in AspectPalette:
colors = get_aspect_palette_colors(palette)
description = get_aspect_palette_description(palette)
html_parts.append('<div class="palette-card">')
html_parts.append(
f'<div class="palette-name">{palette.value.title()}</div>'
)
html_parts.append(f'<div class="palette-description">{description}</div>')
html_parts.append('<div class="aspect-colors">')
for aspect_name, color in colors.items():
html_parts.append(
f'<div class="aspect-item">'
f'<div class="color-swatch" style="background-color: {color};" '
f'data-color="{color}"></div>'
f'<div class="color-label">{aspect_name}</div>'
f"</div>"
)
html_parts.append("</div></div>")
html_parts.append("</div>")
# Planet Glyph Palettes Section
if include_planet_glyphs:
html_parts.append("<h2>🪐 Planet Glyph Palettes</h2>")
html_parts.append("<p>Color palettes for planet glyphs.</p>")
html_parts.append('<div class="palette-grid">')
planet_names = [
"Sun",
"Moon",
"Mercury",
"Venus",
"Mars",
"Jupiter",
"Saturn",
"Uranus",
"Neptune",
"Pluto",
]
for palette in PlanetGlyphPalette:
description = get_planet_glyph_palette_description(palette)
html_parts.append('<div class="palette-card">')
html_parts.append(
f'<div class="palette-name">{palette.value.title()}</div>'
)
html_parts.append(f'<div class="palette-description">{description}</div>')
html_parts.append('<div class="planet-colors">')
for planet_name in planet_names:
color = get_planet_glyph_color(planet_name, palette, "#222222")
html_parts.append(
f'<div class="planet-item">'
f'<div class="color-swatch" style="background-color: {color};" '
f'data-color="{color}"></div>'
f'<div class="color-label">{planet_name}</div>'
f"</div>"
)
html_parts.append("</div></div>")
html_parts.append("</div>")
# Themes Section
if include_themes:
html_parts.append("<h2>🎨 Chart Themes</h2>")
html_parts.append(
"<p>Complete visual themes with coordinated colors across all elements.</p>"
)
html_parts.append('<div class="palette-grid">')
for theme in ChartTheme:
style = get_theme_style(theme)
description = get_theme_description(theme)
html_parts.append('<div class="palette-card">')
html_parts.append(f'<div class="palette-name">{theme.value.title()}</div>')
html_parts.append(f'<div class="palette-description">{description}</div>')
html_parts.append('<div class="theme-preview">')
# Theme color details
html_parts.append('<div class="theme-info">')
theme_colors = [
("Background", style["background_color"]),
("Border", style["border_color"]),
("Zodiac Ring", style["zodiac"]["ring_color"]),
("Zodiac Line", style["zodiac"]["line_color"]),
("Zodiac Glyph", style["zodiac"]["glyph_color"]),
("Planet Glyph", style["planets"]["glyph_color"]),
("Planet Info", style["planets"]["info_color"]),
("House Line", style["houses"]["line_color"]),
("Angle Line", style["angles"]["line_color"]),
]
for label, color in theme_colors:
html_parts.append(
f'<div class="theme-color-row">'
f'<span class="theme-color-label">{label}:</span>'
f'<div class="theme-color-swatch" style="background-color: {color};"></div>'
f'<span class="theme-color-value">{color}</span>'
f"</div>"
)
html_parts.append("</div></div></div>")
html_parts.append("</div>")
# HTML footer
html_parts.append(
"""
<hr style="margin: 40px 0; border: none; border-top: 2px solid #ddd;">
<p style="text-align: center; color: #888; font-size: 0.9em;">
Generated by <strong>Stellium</strong> - Computational Astrology Library<br>
For more information, visit the <a href="https://github.com/katelouie/stellium">GitHub repository</a>
</p>
</body>
</html>
"""
)
# Write to file
html_content = "\n".join(html_parts)
with open(filename, "w", encoding="utf-8") as f:
f.write(html_content)
return filename
[docs]
def generate_zodiac_palette_reference(filename: str = "zodiac_palettes.html") -> str:
"""Generate a reference sheet showing only zodiac palettes."""
return generate_html_reference(
filename=filename,
include_zodiac=True,
include_aspects=False,
include_planet_glyphs=False,
include_themes=False,
)
[docs]
def generate_aspect_palette_reference(filename: str = "aspect_palettes.html") -> str:
"""Generate a reference sheet showing only aspect palettes."""
return generate_html_reference(
filename=filename,
include_zodiac=False,
include_aspects=True,
include_planet_glyphs=False,
include_themes=False,
)
[docs]
def generate_theme_reference(filename: str = "themes.html") -> str:
"""Generate a reference sheet showing only themes."""
return generate_html_reference(
filename=filename,
include_zodiac=False,
include_aspects=False,
include_planet_glyphs=False,
include_themes=True,
)