BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(desktop): uniform translucent-black traffic-light glyphs

Browse Source 
Use a single rgba(0,0,0,0.7) glyph color across all three traffic-light
buttons instead of per-action hue-tinted darks. Black-with-opacity lets
the fill tint the symbol, matching macOS chrome and reading cleanly on
all three fills. Drops the redundant per-action glyph field.
This commit is contained in:
Pablo Gonzalez
2026-07-29 19:38:48 +02:00
parent 8c7fec2356
commit 1f4eedf793
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/desktop/WindowsWindowControls.tsx
+9 -6
View File
@@ -10,11 +10,14 @@ import { useUIStore } from '@/stores/useUIStore';
// macOS chrome colors; intentionally theme-independent — these replicate a // macOS chrome colors; intentionally theme-independent — these replicate a
// foreign platform's chrome, not OpenChamber's own status tokens, so the // foreign platform's chrome, not OpenChamber's own status tokens, so the
// theme-system hex rule does not apply. // theme-system hex rule does not apply.
const TRAFFIC_LIGHT_COLORS: Record<DesktopWindowControlAction, { fill: string; glyph: string }> = { const TRAFFIC_LIGHT_FILL: Record<DesktopWindowControlAction, string> = {
close: { fill: '#FF5F57', glyph: '#7F0808' }, close: '#FF5F57',
minimize: { fill: '#FEBC2E', glyph: '#B3710C' }, minimize: '#FEBC2E',
maximize: { fill: '#28C940', glyph: '#006200' }, maximize: '#28C940',
}; };
// Glyphs are a uniform translucent black, matching macOS — opacity lets the
// fill tint the symbol so it reads on all three fills without per-action colors.
const TRAFFIC_LIGHT_GLYPH = 'rgba(0, 0, 0, 0.7)';
const TrafficLightGlyph: React.FC<{ action: DesktopWindowControlAction }> = ({ action }) => { const TrafficLightGlyph: React.FC<{ action: DesktopWindowControlAction }> = ({ action }) => {
if (action === 'close') { if (action === 'close') {
@@ -36,7 +39,7 @@ type TrafficLightButtonProps = {
const TrafficLightButton: React.FC<TrafficLightButtonProps> = ({ action, isMaximized, onActivate }) => { const TrafficLightButton: React.FC<TrafficLightButtonProps> = ({ action, isMaximized, onActivate }) => {
const { t } = useI18n(); const { t } = useI18n();
const { fill, glyph } = TRAFFIC_LIGHT_COLORS[action]; const fill = TRAFFIC_LIGHT_FILL[action];
const label = const label =
action === 'close' action === 'close'
? t('header.windowControls.close') ? t('header.windowControls.close')
@@ -58,7 +61,7 @@ const TrafficLightButton: React.FC<TrafficLightButtonProps> = ({ action, isMaxim
> >
<span <span
className="flex size-3.5 items-center justify-center rounded-full shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.28)] transition-[filter] duration-75 active:brightness-90" className="flex size-3.5 items-center justify-center rounded-full shadow-[inset_0_0_0_0.5px_rgba(0,0,0,0.28)] transition-[filter] duration-75 active:brightness-90"
style={{ backgroundColor: fill, color: glyph }} style={{ backgroundColor: fill, color: TRAFFIC_LIGHT_GLYPH }}
> >
<span className="flex items-center justify-center opacity-0 transition-opacity duration-75 group-hover/wctl:opacity-100"> <span className="flex items-center justify-center opacity-0 transition-opacity duration-75 group-hover/wctl:opacity-100">
<TrafficLightGlyph action={action} /> <TrafficLightGlyph action={action} />