Improve tray icon visibility: Claude orange, full opacity, larger size

Starburst was nearly invisible at tray icon size due to white color at
50% alpha on a 128px canvas. Now renders in Claude brand orange (#E07B53)
at full opacity on a 256px canvas with proportionally scaled geometry.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Axel Meyer
2026-02-26 14:30:40 +01:00
parent 6a1b4bd022
commit 688b6a75f7

View File

@@ -4,10 +4,12 @@ import math
from PIL import Image, ImageDraw from PIL import Image, ImageDraw
SIZE = 128 SIZE = 256
CENTER = SIZE // 2 CENTER = SIZE // 2
ARC_WIDTH = 16 ARC_WIDTH = 28
ARC_RADIUS = (SIZE - ARC_WIDTH) // 2 # inner edge of arc
# Claude brand orange
_CLAUDE_ORANGE = (224, 123, 83) # #E07B53
# Color thresholds for the usage arc (10% increments) # Color thresholds for the usage arc (10% increments)
_COLORS = [ _COLORS = [
@@ -37,26 +39,26 @@ def _arc_color(pct):
def _draw_starburst(img): def _draw_starburst(img):
"""Draw 8-petal starburst logo at 50% opacity.""" """Draw 8-petal starburst logo in Claude orange, full opacity."""
layer = Image.new("RGBA", (SIZE, SIZE), (0, 0, 0, 0)) layer = Image.new("RGBA", (SIZE, SIZE), (0, 0, 0, 0))
draw = ImageDraw.Draw(layer) draw = ImageDraw.Draw(layer)
color = (*_CLAUDE_ORANGE, 255)
num_petals = 8 num_petals = 8
# Petal geometry: elongated ellipse approximated as polygon petal_length = SIZE * 0.38 # fill most of the icon
petal_length = 38 petal_width = SIZE * 0.10
petal_width = 10
for i in range(num_petals): for i in range(num_petals):
angle = math.radians(i * (360 / num_petals)) angle = math.radians(i * (360 / num_petals))
# Build petal as 4-point diamond shape
# Tip of petal (far from center) # Tip of petal (far from center)
tip_x = CENTER + math.cos(angle) * petal_length tip_x = CENTER + math.cos(angle) * petal_length
tip_y = CENTER + math.sin(angle) * petal_length tip_y = CENTER + math.sin(angle) * petal_length
# Base points (perpendicular to petal direction, near center) # Base points (perpendicular to petal direction, near center)
perp = angle + math.pi / 2 perp = angle + math.pi / 2
base_offset = 6 # distance from center to base of petal base_offset = SIZE * 0.05
bx = CENTER + math.cos(angle) * base_offset bx = CENTER + math.cos(angle) * base_offset
by = CENTER + math.sin(angle) * base_offset by = CENTER + math.sin(angle) * base_offset
@@ -66,17 +68,17 @@ def _draw_starburst(img):
right_y = by - math.sin(perp) * (petal_width / 2) right_y = by - math.sin(perp) * (petal_width / 2)
# Inner point (towards center, slight taper) # Inner point (towards center, slight taper)
inner_x = CENTER - math.cos(angle) * 2 inner_x = CENTER - math.cos(angle) * (SIZE * 0.02)
inner_y = CENTER - math.sin(angle) * 2 inner_y = CENTER - math.sin(angle) * (SIZE * 0.02)
polygon = [(inner_x, inner_y), (left_x, left_y), (tip_x, tip_y), (right_x, right_y)] polygon = [(inner_x, inner_y), (left_x, left_y), (tip_x, tip_y), (right_x, right_y)]
draw.polygon(polygon, fill=(255, 255, 255, 128)) draw.polygon(polygon, fill=color)
# Center dot # Center dot
dot_r = 4 dot_r = SIZE * 0.04
draw.ellipse( draw.ellipse(
[CENTER - dot_r, CENTER - dot_r, CENTER + dot_r, CENTER + dot_r], [CENTER - dot_r, CENTER - dot_r, CENTER + dot_r, CENTER + dot_r],
fill=(255, 255, 255, 128), fill=color,
) )
img = Image.alpha_composite(img, layer) img = Image.alpha_composite(img, layer)
@@ -94,10 +96,6 @@ def _draw_arc(img, pct):
color = _hex_to_rgba(_arc_color(pct)) color = _hex_to_rgba(_arc_color(pct))
pct = min(pct, 100) pct = min(pct, 100)
# Pillow arc: 0 = 3 o'clock, angles go counter-clockwise for arc()
# We want: start at 12 o'clock (-90), sweep clockwise
# Pillow draws counter-clockwise from start to end, so we use:
# start = -90, end = -90 + (pct/100)*360
start_angle = -90 start_angle = -90
end_angle = -90 + (pct / 100) * 360 end_angle = -90 + (pct / 100) * 360
@@ -110,7 +108,7 @@ def _draw_arc(img, pct):
def render_icon(pct): def render_icon(pct):
"""Render a 128x128 RGBA icon with starburst + usage arc. """Render a 256x256 RGBA icon with starburst + usage arc.
Args: Args:
pct: Usage percentage (0-100). Arc is invisible at 0. pct: Usage percentage (0-100). Arc is invisible at 0.