From 9e9871c08ad041bb6cae40f73517793df24410cf Mon Sep 17 00:00:00 2001 From: syntaxbullet Date: Sat, 5 Sep 2026 08:13:58 +0200 Subject: [PATCH] Keep habit tints readable and use shared typography --- README.md | 9 ++++++--- src/components/design-system/HabitChart.tsx | 2 +- styles/design-system.css | 9 ++++----- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 95d944f..58dd21c 100644 --- a/README.md +++ b/README.md @@ -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 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 -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 -and unit, simple check-ins place the checkbox beside the clickable heading, and -routines show their task list without an accordion. Daily schedule labels and +and unit inside a tinted panel, simple check-ins use a compact checkbox-and-heading +row, and routines use a bordered checklist with a progress header. Daily schedule labels and duplicate progress copy are omitted; days off stay explicit. Count totals can be typed directly and saved with **Save** or Enter. Escape restores diff --git a/src/components/design-system/HabitChart.tsx b/src/components/design-system/HabitChart.tsx index 6900603..4f90fc6 100644 --- a/src/components/design-system/HabitChart.tsx +++ b/src/components/design-system/HabitChart.tsx @@ -46,7 +46,7 @@ export function HabitChart({ const headingId = useId(); const Heading = `h${headingLevel}` as const; if (trackingMethod) return ( -
+
diff --git a/styles/design-system.css b/styles/design-system.css index c9944fa..3b16b46 100644 --- a/styles/design-system.css +++ b/styles/design-system.css @@ -1605,13 +1605,12 @@ .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--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 > .ds-inline-editor { grid-column: 1 / -1; } +.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 { 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-input { font-size: 36px; line-height: 1.2; width: 4ch; min-height: 60px; background: transparent; } +.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 { @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-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-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; }