syntaxbullet/minabot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep habit tints readable and use shared typography

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -86,11 +86,14 @@ Combined-chart management is not exposed on this homepage.
The dashboard opens with a compact greeting and a Today filter. All habits includes The dashboard opens with a compact greeting and a Today filter. All habits includes
routines on days off; creating a habit or editing one out of today’s schedule keeps routines on days off; creating a habit or editing one out of today’s schedule keeps
it reachable in All habits. Saved calendars expand through **View history**, with it reachable in All habits. Saved calendars expand through **View history**, with
historical corrections available inside the expanded view. historical corrections available inside the expanded view. Selecting a square
only changes the inspected day; it preserves the date range and number of weeks,
including on untracked, unscheduled, and future dates. An external editor date
outside a preset window can still bring that date into view.
Each saved habit uses its own action layout: count goals have a prominent counter Each saved habit uses its own action layout: count goals have a prominent counter
and unit, simple check-ins place the checkbox beside the clickable heading, and and unit inside a tinted panel, simple check-ins use a compact checkbox-and-heading
routines show their task list without an accordion. Daily schedule labels and row, and routines use a bordered checklist with a progress header. Daily schedule labels and
duplicate progress copy are omitted; days off stay explicit. duplicate progress copy are omitted; days off stay explicit.
Count totals can be typed directly and saved with **Save** or Enter. Escape restores Count totals can be typed directly and saved with **Save** or Enter. Escape restores

2
src/components/design-system/HabitChart.tsx
View File

@@ -46,7 +46,7 @@ export function HabitChart({
const headingId = useId(); const headingId = useId();
const Heading = `h${headingLevel}` as const; const Heading = `h${headingLevel}` as const;
if (trackingMethod) return ( 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-body">
<div className="ds-goal-overview"> <div className="ds-goal-overview">
<header className="ds-goal-heading"> <header className="ds-goal-heading">

9
styles/design-system.css
View File

@@ -1605,13 +1605,12 @@
.ds-goal--manual .ds-goal-title input:checked { background: var(--habit-color); border-color: var(--habit-color); } .ds-goal--manual .ds-goal-title input:checked { background: var(--habit-color); border-color: var(--habit-color); }
.ds-goal-schedule { @apply type-small; color: var(--ds-secondary); margin-top: 6px; } .ds-goal-schedule { @apply type-small; color: var(--ds-secondary); margin-top: 6px; }
.ds-goal--manual .ds-goal-schedule { padding-left: 56px; } .ds-goal--manual .ds-goal-schedule { padding-left: 56px; }
.ds-goal--count .ds-goal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 24px; padding: 24px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--habit-color) 20%, var(--ds-rule)); background: color-mix(in srgb, var(--habit-color) 5%, var(--ds-paper)); } .ds-goal--count .ds-goal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 24px; padding: 24px; border-radius: 8px; border: 1px solid var(--ds-rule); border-inline-start: 3px solid var(--habit-color); background: var(--habit-tint); }
.ds-goal--count .ds-goal-body > .ds-inline-editor { grid-column: 1 / -1; }
.ds-goal-count { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; } .ds-goal-count { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ds-goal-count .ds-counter { justify-content: center; padding: 6px; gap: 6px; background: var(--ds-paper); border-color: color-mix(in srgb, var(--habit-color) 20%, var(--ds-rule)); } .ds-goal-count .ds-counter { justify-content: center; padding: 6px; gap: 6px; background: var(--ds-paper); border-color: var(--ds-rule); }
.ds-goal-count .ds-counter-input { font-size: 36px; line-height: 1.2; width: 4ch; min-height: 60px; background: transparent; } .ds-goal-count .ds-counter-input { @apply type-section; width: 4ch; min-height: 60px; background: transparent; }
.ds-goal-count .ds-counter .ds-button { min-height: 44px; min-width: 44px; } .ds-goal-count .ds-counter .ds-button { min-height: 44px; min-width: 44px; }
.ds-goal-count .ds-counter > .ds-muted { font-size: 18px; padding-right: 0; } .ds-goal-count .ds-counter > .ds-muted { @apply type-ui-heading; padding-right: 0; }
.ds-goal-unit { @apply type-small; color: var(--ds-secondary); overflow-wrap: anywhere; text-align: center; } .ds-goal-unit { @apply type-small; color: var(--ds-secondary); overflow-wrap: anywhere; text-align: center; }
.ds-habit-list .ds-goal .ds-habit-history { align-self: flex-end; margin-top: 10px; } .ds-habit-list .ds-goal .ds-habit-history { align-self: flex-end; margin-top: 10px; }
.ds-habit-list .ds-goal .ds-habit-history:has([aria-expanded="true"]) { align-self: stretch; } .ds-habit-list .ds-goal .ds-habit-history:has([aria-expanded="true"]) { align-self: stretch; }