Keep habit tints readable and use shared typography

This commit is contained in:
syntaxbullet
2026-09-05 08:13:58 +02:00
parent 63e1573dae
commit 9e9871c08a
3 changed files with 11 additions and 9 deletions

View File

@@ -46,7 +46,7 @@ export function HabitChart({
const headingId = useId();
const Heading = `h${headingLevel}` as const;
if (trackingMethod) return (
<section className={`ds-habit-chart ds-goal ds-goal--${trackingMethod}`} id={id} aria-labelledby={headingId} style={{ "--habit-color": color } as CSSProperties}>
<section className={`ds-habit-chart ds-goal ds-goal--${trackingMethod}`} id={id} aria-labelledby={headingId} style={{ "--habit-color": color, "--habit-tint": /^#[0-9a-f]{6}$/i.test(color) ? `${color}0d` : "var(--ds-surface)" } as CSSProperties}>
<div className="ds-goal-body">
<div className="ds-goal-overview">
<header className="ds-goal-heading">