reworked home screen widgets to mirror the in-app timetable, hidden below android 12

2026-09-27 14:07:52 +02:00
parent 2aed3d104c
commit 2ca9feb49a
44 changed files with 2401 additions and 1245 deletions
@@ -1,59 +1,6 @@
 import SwiftUI
 import WidgetKit

-// Layout constants — must mirror WidgetRenderer.kt on Android, otherwise
-// the platforms drift apart on the same widget size.
-let FALLBACK_VIRTUAL_MINUTES = 11 * 60
-let MIN_HOUR_HEIGHT: CGFloat = 18
-let MAX_HOUR_HEIGHT: CGFloat = 72
-let MIN_BLOCK_HEIGHT: CGFloat = 16
-let LESSON_GAP: CGFloat = 1.5
-
-func realMinutesToVirtual(_ realMin: Int, periods: [WidgetPeriod]) -> CGFloat {
-    guard !periods.isEmpty else { return CGFloat(realMin) }
-    for p in periods where realMin >= p.startMinutes && realMin <= p.endMinutes {
-        return CGFloat(p.virtualStartMinutes + (realMin - p.startMinutes))
-    }
-    let first = periods.first!
-    if realMin < first.startMinutes {
-        return CGFloat(realMin - first.startMinutes + first.virtualStartMinutes)
-    }
-    let last = periods.last!
-    if realMin > last.endMinutes {
-        return CGFloat(last.virtualEndMinutes + (realMin - last.endMinutes))
-    }
-    var prev = first
-    for i in 1..<periods.count {
-        let curr = periods[i]
-        if realMin > prev.endMinutes && realMin < curr.startMinutes {
-            let gap = curr.startMinutes - prev.endMinutes
-            let virtualGap = curr.virtualStartMinutes - prev.virtualEndMinutes
-            if gap > 0 {
-                return CGFloat(prev.virtualEndMinutes) +
-                    CGFloat(realMin - prev.endMinutes) * CGFloat(virtualGap) / CGFloat(gap)
-            }
-            return CGFloat(curr.virtualStartMinutes)
-        }
-        prev = curr
-    }
-    return 0
-}
-
-// Below these tile heights the secondary stack collapses progressively:
-// shorter than ROOM_MIN drops everything, between ROOM_MIN and
-// TEACHER_SEPARATE_MIN keeps the room but drops the teacher.
-let BLOCK_SHOW_ROOM_MIN: CGFloat = 13
-let BLOCK_SHOW_TEACHER_SEPARATE_MIN: CGFloat = 20
-
-let MIN_SUBJECT_FONT: CGFloat = 9
-let MAX_SUBJECT_FONT: CGFloat = 14
-let MIN_SECONDARY_FONT: CGFloat = 7
-
-func subjectFont(forHourHeight hourHeight: CGFloat) -> CGFloat {
-    let t = max(0, min(1, (hourHeight - MIN_HOUR_HEIGHT) / (MAX_HOUR_HEIGHT - MIN_HOUR_HEIGHT)))
-    return MIN_SUBJECT_FONT + t * (MAX_SUBJECT_FONT - MIN_SUBJECT_FONT)
-}
-
 struct TimetableDayView: View {
    let entry: TimetableEntry
    @Environment(\.widgetPalette) private var palette
@@ -73,7 +20,7 @@ struct TimetableDayView: View {

    @ViewBuilder
    private func content(data: WidgetTimetableData) -> some View {
-        VStack(alignment: .leading, spacing: 3) {
+        VStack(alignment: .leading, spacing: GRID_MARGIN_TOP) {
            header(data: data)
            if data.isHoliday {
                emptyState(text: data.holidayName ?? "Ferien")
@@ -81,37 +28,41 @@ struct TimetableDayView: View {
                emptyState(text: "Keine Stunden")
            } else {
                GeometryReader { geo in
-                    let totalMin = CGFloat(data.periods.last?.virtualEndMinutes ?? FALLBACK_VIRTUAL_MINUTES)
-                    TimeGridView(
-                        lessons: data.lessons,
-                        periods: data.periods,
-                        hourHeight: max(
-                            MIN_HOUR_HEIGHT,
-                            min(MAX_HOUR_HEIGHT, geo.size.height / max(totalMin, 60) * 60)
-                        ),
-                        showRoom: true,
-                        showTeacher: true,
-                        showTimeLabels: true
-                    )
+                    let periods = trimTrailingPeriods(data.periods, lessons: data.lessons)
+                    HStack(alignment: .top, spacing: 0) {
+                        PeriodRuler(
+                            periods: periods,
+                            hourHeight: resolveHourHeight(forGridHeight: geo.size.height, periods: periods)
+                        )
+                        Rectangle()
+                            .fill(palette.divider)
+                            .frame(width: 1)
+                        TimeGridView(
+                            lessons: data.lessons,
+                            periods: periods,
+                            hourHeight: resolveHourHeight(forGridHeight: geo.size.height, periods: periods)
+                        )
+                    }
                }
            }
        }
    }

    private func header(data: WidgetTimetableData) -> some View {
-        HStack(spacing: 4) {
+        HStack(spacing: 6) {
            Text(dayLabel(for: data.anchorDate, relativeTo: entry.date))
-                .font(.system(size: 13, weight: .semibold))
+                .font(.system(size: 14, weight: .bold))
                .foregroundStyle(palette.textPrimary)
                .lineLimit(1)
-                .minimumScaleFactor(0.7)
-            Spacer(minLength: 4)
+                .minimumScaleFactor(0.65)
+                .frame(maxWidth: .infinity, alignment: .leading)
            Text("Stand: \(freshnessLabel(for: data.fetchedAt, relativeTo: entry.date))")
-                .font(.system(size: 9))
+                .font(.system(size: 10))
                .foregroundStyle(palette.textSecondary)
                .lineLimit(1)
-                .minimumScaleFactor(0.7)
+                .fixedSize()
        }
+        .frame(height: TITLE_ROW_HEIGHT)
    }

    private func emptyState(text: String) -> some View {
@@ -139,54 +90,23 @@ struct TimetableDayView: View {
    }
 }

-struct TimeGridView: View {
-    let lessons: [WidgetLesson]
+/// Mirrors the in-app _PeriodLabel: period number centred, start time above,
+/// end time below, a cup in the breaks.
+struct PeriodRuler: View {
    let periods: [WidgetPeriod]
    let hourHeight: CGFloat
-    let showRoom: Bool
-    let showTeacher: Bool
-    let showTimeLabels: Bool
-    /// Week-widget passes 3 for narrow columns; day-widget keeps 7.
-    var horizontalPadding: CGFloat = 7

    @Environment(\.widgetPalette) private var palette

-    private var totalVirtualMinutes: Int {
-        periods.last?.virtualEndMinutes ?? FALLBACK_VIRTUAL_MINUTES
-    }
-
    private var totalHeight: CGFloat {
-        CGFloat(totalVirtualMinutes) * hourHeight / 60.0
+        CGFloat(totalVirtualMinutes(periods)) * hourHeight / 60.0
    }

-    /// Below this per-hour height the two-line label collapses to a single
-    /// period number — time + number overlap otherwise.
-    private var compactLabels: Bool { hourHeight < 26 }
-
    var body: some View {
-        HStack(alignment: .top, spacing: 0) {
-            if showTimeLabels {
-                // 28pt matches the Week widget's time-label column so the
-                // visual rhythm is identical across both widgets.
-                timeLabelsColumn
-                    .frame(width: 28, alignment: .topTrailing)
-                Rectangle()
-                    .fill(palette.divider)
-                    .frame(width: 1)
-            }
-            ZStack(alignment: .top) {
-                gridLines
-                breakBlocks
-                ForEach(lessons.indices, id: \.self) { idx in
-                    lessonBlock(lessons[idx])
-                }
-            }
-            .frame(maxWidth: .infinity, minHeight: totalHeight, alignment: .top)
-        }
-    }
-
-    private var timeLabelsColumn: some View {
-        ZStack(alignment: .topTrailing) {
+        // Every child has layout-y 0 (`.offset` only shifts the rendering),
+        // so both the ZStack and its frame need `.top` — the default
+        // `.center` would anchor the whole ruler at the column's midpoint.
+        ZStack(alignment: .top) {
            ForEach(periodBoundaries(periods), id: \.self) { virtualMin in
                Rectangle()
                    .fill(palette.divider)
@@ -194,39 +114,91 @@ struct TimeGridView: View {
                    .offset(y: CGFloat(virtualMin) * hourHeight / 60.0)
            }
            ForEach(periods, id: \.startMinutes) { period in
-                VStack(alignment: .trailing, spacing: -2) {
-                    if compactLabels {
-                        Text("\(period.name).")
-                            .font(.system(size: 9, weight: .bold))
-                            .foregroundStyle(palette.textPrimary)
-                            .lineLimit(1)
-                    } else {
-                        Text(formatHm(period.startMinutes))
-                            .font(.system(size: 9))
-                            .foregroundStyle(palette.textPrimary)
-                            .lineLimit(1)
-                        Text("\(period.name).")
-                            .font(.system(size: 7, weight: .bold))
-                            .foregroundStyle(palette.textSecondary)
-                            .lineLimit(1)
-                    }
+                cell(period)
+            }
+            ForEach(periodBreaks(periods), id: \.self) { pause in
+                let height = CGFloat(pause.virtualMinutes) * hourHeight / 60.0
+                if height >= BREAK_ICON_MIN_HEIGHT {
+                    Image(systemName: "cup.and.saucer")
+                        .font(.system(size: 8))
+                        .foregroundStyle(palette.textSecondary)
+                        .frame(width: RULER_WIDTH, height: height)
+                        .offset(y: CGFloat(pause.virtualStart) * hourHeight / 60.0)
                }
-                .padding(.trailing, 4)
-                .offset(y: CGFloat(period.virtualStartMinutes) * hourHeight / 60.0)
            }
        }
-        .frame(height: totalHeight, alignment: .topTrailing)
+        .frame(width: RULER_WIDTH, height: totalHeight, alignment: .top)
+    }
+
+    private func cell(_ period: WidgetPeriod) -> some View {
+        let height = CGFloat(period.virtualEndMinutes - period.virtualStartMinutes) * hourHeight / 60.0
+        let timeFont = max(6, min(8.5, height * 0.19))
+        return ZStack {
+            Text(period.name)
+                .font(.system(size: max(8, min(13, height * 0.3)), weight: .medium))
+                .foregroundStyle(palette.textPrimary)
+                .lineLimit(1)
+            if height >= RULER_TIMES_MIN_CELL {
+                VStack(spacing: 0) {
+                    Text(formatHm(period.startMinutes))
+                    Spacer(minLength: 0)
+                    Text(formatHm(period.endMinutes))
+                }
+                .font(.system(size: timeFont))
+                .foregroundStyle(palette.textSecondary)
+                .lineLimit(1)
+                .padding(.vertical, 2)
+            }
+        }
+        .frame(width: RULER_WIDTH, height: height)
+        .offset(y: CGFloat(period.virtualStartMinutes) * hourHeight / 60.0)
+    }
+
+    private func formatHm(_ minutes: Int) -> String {
+        String(format: "%02d:%02d", minutes / 60, minutes % 60)
+    }
+}
+
+/// One day column: grid lines, break bands and the lesson tiles. Shared by
+/// the day widget and each of the week widget's five columns.
+struct TimeGridView: View {
+    let lessons: [WidgetLesson]
+    let periods: [WidgetPeriod]
+    let hourHeight: CGFloat
+    var holiday: WidgetDayInfo? = nil
+    var isToday: Bool = false
+
+    @Environment(\.widgetPalette) private var palette
+
+    private var totalHeight: CGFloat {
+        CGFloat(totalVirtualMinutes(periods)) * hourHeight / 60.0
+    }
+
+    var body: some View {
+        GeometryReader { geo in
+            let metrics = TileMetrics(periods: periods, hourHeight: hourHeight)
+            let innerWidth = geo.size.width - 2 * (TILE_MARGIN_H + TILE_PADDING_H)
+            ZStack(alignment: .top) {
+                if let holiday {
+                    holidayColumn(holiday)
+                } else {
+                    if isToday {
+                        palette.todayTint.frame(height: totalHeight)
+                    }
+                    gridLines
+                    breakBlocks
+                }
+                ForEach(lessons.indices, id: \.self) { idx in
+                    lessonBlock(lessons[idx], metrics: metrics, innerWidth: innerWidth)
+                }
+            }
+            .frame(width: geo.size.width, height: totalHeight, alignment: .top)
+        }
+        .frame(height: totalHeight)
    }

    private var gridLines: some View {
-        // `.frame(height: totalHeight, alignment: .top)` — without the
-        // explicit `.top`, SwiftUI's frame modifier defaults to `.center`.
-        // Every Rectangle here has layout-y=0 (the `.offset()`s shift the
-        // rendered position only, not layout), so the inner ZStack's
-        // natural height is just 1pt; a 1pt ZStack centred in a 300pt
-        // frame anchors at the middle, and every line then renders
-        // relative to that midpoint — the grid visually starts halfway
-        // down the column and the later periods clip past the bottom.
+        // `.top` on both the ZStack and the frame — see PeriodRuler.
        ZStack(alignment: .top) {
            ForEach(periodBoundaries(periods), id: \.self) { virtualMin in
                Rectangle()
@@ -239,166 +211,173 @@ struct TimeGridView: View {
    }

    private var breakBlocks: some View {
-        // Same `.center`-vs-`.top` bug as gridLines — see comment above.
        ZStack(alignment: .top) {
-            ForEach(0..<max(0, periods.count - 1), id: \.self) { i in
-                let curr = periods[i]
-                let next = periods[i + 1]
-                let virtualGap = next.virtualStartMinutes - curr.virtualEndMinutes
-                if virtualGap > 0 {
-                    Rectangle()
-                        .fill(palette.breakBlock)
-                        .frame(height: CGFloat(virtualGap) * hourHeight / 60.0)
-                        .padding(.horizontal, 1)
-                        .offset(y: CGFloat(curr.virtualEndMinutes) * hourHeight / 60.0)
+            ForEach(periodBreaks(periods), id: \.self) { pause in
+                let height = CGFloat(pause.virtualMinutes) * hourHeight / 60.0
+                ZStack {
+                    palette.breakBlock
+                    if height >= BREAK_ICON_MIN_HEIGHT {
+                        Image(systemName: "fork.knife")
+                            .font(.system(size: 9))
+                            .foregroundStyle(palette.accent)
+                    }
                }
+                .frame(height: height)
+                .offset(y: CGFloat(pause.virtualStart) * hourHeight / 60.0)
            }
        }
        .frame(height: totalHeight, alignment: .top)
    }

-    private func formatHm(_ minutes: Int) -> String {
-        String(format: "%02d:%02d", minutes / 60, minutes % 60)
+    /// Mirrors the in-app holiday region: icon and "Schulfrei" on top, the
+    /// holiday name rotated along the column.
+    private func holidayColumn(_ holiday: WidgetDayInfo) -> some View {
+        let nameLength = max(40, totalHeight - 2 * HOLIDAY_NAME_INSET)
+        return ZStack {
+            palette.holidayTint
+            VStack(spacing: 2) {
+                Image(systemName: "calendar")
+                    .font(.system(size: 12))
+                Text("Schulfrei")
+                    .font(.system(size: 9))
+                    .lineLimit(1)
+                    .minimumScaleFactor(0.6)
+            }
+            .padding(.top, 8)
+            .padding(.horizontal, 2)
+            .frame(maxHeight: .infinity, alignment: .top)
+            // The outer frame carries the rotated footprint: rotationEffect
+            // alone leaves the layout box at its unrotated size.
+            Text(holiday.holidayName ?? "")
+                .font(.system(size: 11, weight: .bold))
+                .kerning(1)
+                .lineLimit(1)
+                .minimumScaleFactor(0.6)
+                .frame(width: nameLength, height: 14)
+                .rotationEffect(.degrees(90))
+                .frame(width: 14, height: nameLength)
+        }
+        .foregroundStyle(palette.textPrimary)
+        .frame(height: totalHeight)
    }

    @ViewBuilder
-    private func lessonBlock(_ lesson: WidgetLesson) -> some View {
-        let cal = Calendar.current
-        let comps = cal.dateComponents([.hour, .minute], from: lesson.start)
-        let startMinutes = (comps.hour ?? 0) * 60 + (comps.minute ?? 0)
+    private func lessonBlock(
+        _ lesson: WidgetLesson,
+        metrics: TileMetrics,
+        innerWidth: CGFloat
+    ) -> some View {
+        let startMinutes = minutesOfDay(lesson.start)
        let durationMinutes = max(15, Int(lesson.end.timeIntervalSince(lesson.start) / 60))
        let virtualStart = realMinutesToVirtual(startMinutes, periods: periods)
        let virtualEnd = realMinutesToVirtual(startMinutes + durationMinutes, periods: periods)

        if virtualEnd > virtualStart {
+            // Half the gap above + half below so the grid line under the
+            // tile stays visible.
            let top = virtualStart * hourHeight / 60.0 + LESSON_GAP / 2
            let height = max(
                MIN_BLOCK_HEIGHT,
                (virtualEnd - virtualStart) * hourHeight / 60.0 - LESSON_GAP
            )
-            let subjectSize = subjectFont(forHourHeight: hourHeight)
-            let secondarySize = max(MIN_SECONDARY_FONT, subjectSize - 2)
-            let room = lesson.room
-            let teacher = lesson.teacher ?? lesson.originalTeacher
-            let hasSecondary = (room?.isEmpty == false) || (teacher?.isEmpty == false)
-            HStack(alignment: .top, spacing: 4) {
-                Text(subjectLabel(lesson))
-                    .font(.system(size: subjectSize, weight: .semibold))
-                    .foregroundStyle(.white)
-                    .lineLimit(hasSecondary ? 1 : 2)
-                    .minimumScaleFactor(0.5)
-                if hasSecondary {
-                    Spacer(minLength: 0)
-                    VStack(alignment: .trailing, spacing: -1) {
-                        if showRoom && height >= BLOCK_SHOW_ROOM_MIN {
-                            if let room, !room.isEmpty {
-                                Text(room)
-                                    .font(.system(size: secondarySize))
-                                    .foregroundStyle(.white.opacity(0.85))
-                                    .lineLimit(1)
-                                    .minimumScaleFactor(0.5)
-                            }
-                            if showTeacher,
-                               height >= BLOCK_SHOW_TEACHER_SEPARATE_MIN,
-                               let teacher,
-                               !teacher.isEmpty {
-                                Text(teacher)
-                                    .font(.system(size: secondarySize))
-                                    .foregroundStyle(.white.opacity(0.7))
-                                    .lineLimit(1)
-                                    .minimumScaleFactor(0.5)
-                            }
-                        }
-                    }
-                }
-            }
-            .padding(.horizontal, horizontalPadding)
-            .padding(.vertical, 3)
-            .frame(maxWidth: .infinity, alignment: .topLeading)
-            .frame(height: height, alignment: .topLeading)
-            .background(blockColor(lesson))
-            .cornerRadius(6)
-            .overlay(alignment: .bottomLeading) {
-                // Separate fixed-size badge so the +N hint stays readable
-                // when the subject autoshrinks on narrow tiles.
-                if let count = lesson.siblingCount, count > 0 {
-                    Text("+\(count)")
-                        .font(.system(size: 12, weight: .bold))
-                        .foregroundStyle(.white)
-                        .padding(.leading, horizontalPadding)
-                        .padding(.bottom, 2)
-                }
-            }
-            .overlay {
-                // CrossPainter parity: clip cross to the rounded shape so
-                // the diagonals don't bleed past the corners.
-                if lesson.status == .cancelled {
-                    ZStack {
-                        RoundedRectangle(cornerRadius: 6)
-                            .stroke(Color.red.opacity(0.78), lineWidth: 1.5)
-                        GeometryReader { geo in
-                            Path { p in
-                                p.move(to: .zero)
-                                p.addLine(to: CGPoint(x: geo.size.width, y: geo.size.height))
-                                p.move(to: CGPoint(x: geo.size.width, y: 0))
-                                p.addLine(to: CGPoint(x: 0, y: geo.size.height))
-                            }
-                            .stroke(Color.red.opacity(0.78), lineWidth: 3)
-                        }
-                    }
-                    .clipShape(RoundedRectangle(cornerRadius: 6))
-                }
-            }
-            .padding(.horizontal, showRoom ? 2 : 1)
+            LessonTile(
+                lesson: lesson,
+                height: height,
+                metrics: metrics,
+                layout: TileTextLayout(
+                    lesson: lesson,
+                    innerHeight: height - 2 * TILE_PADDING_V,
+                    innerWidth: innerWidth,
+                    metrics: metrics
+                )
+            )
            .offset(y: top)
        }
    }
-
-    private func subjectLabel(_ lesson: WidgetLesson) -> String {
-        !lesson.subjectShort.isEmpty
-            ? lesson.subjectShort
-            : (lesson.subjectLong ?? "—")
-    }
-
-    /// Mirrors lesson_color.dart + custom_event_colors.dart so the widget
-    /// matches the in-app calendar exactly.
-    private func blockColor(_ lesson: WidgetLesson) -> Color {
-        if lesson.status == .event, let custom = lesson.customColor {
-            switch custom {
-            case "orange": return Color(red: 239/255.0, green: 108/255.0, blue: 0/255.0)
-            case "red": return Color(red: 153/255.0, green: 51/255.0, blue: 51/255.0)
-            case "green": return Color(red: 76/255.0, green: 175/255.0, blue: 80/255.0)
-            case "blue": return Color(red: 33/255.0, green: 150/255.0, blue: 243/255.0)
-            default: break
-            }
-        }
-        switch lesson.status {
-        // `.ongoing` deliberately collapses into the regular red — the
-        // widget timeline only ticks every ~30min, so highlighting the
-        // "current" lesson would be stale most of the day and misleads
-        // more than it helps.
-        case .regular, .past, .ongoing:
-            return Color(red: 153/255.0, green: 51/255.0, blue: 51/255.0)
-        case .cancelled: return .black
-        case .irregular: return Color(red: 143/255.0, green: 25/255.0, blue: 179/255.0)
-        case .teacherChanged: return Color(red: 41/255.0, green: 99/255.0, blue: 155/255.0)
-        case .event: return Color(red: 239/255.0, green: 108/255.0, blue: 0/255.0)
-        case .duty: return Color(red: 0/255.0, green: 121/255.0, blue: 107/255.0)
-        }
-    }
 }

-/// Period boundaries deduped: adjacent periods share a line, periods on
-/// either side of a break get their own (bracketing the break block).
-func periodBoundaries(_ periods: [WidgetPeriod]) -> [Int] {
-    var seen = Set<Int>()
-    var result: [Int] = []
-    for p in periods {
-        for v in [p.virtualStartMinutes, p.virtualEndMinutes] {
-            if seen.insert(v).inserted { result.append(v) }
+/// Mirrors the in-app AppointmentTile: title on top, room and teacher
+/// stacked below, each line shrinking on its own to fit the tile width.
+private struct LessonTile: View {
+    let lesson: WidgetLesson
+    let height: CGFloat
+    let metrics: TileMetrics
+    let layout: TileTextLayout
+
+    private static let cancelledRed =
+        Color(red: 244 / 255, green: 67 / 255, blue: 54 / 255).opacity(200 / 255)
+
+    var body: some View {
+        let shape = RoundedRectangle(cornerRadius: TILE_CORNER_RADIUS)
+        VStack(alignment: .leading, spacing: 0) {
+            titleRow
+            ForEach(Array(layout.body.enumerated()), id: \.offset) { index, line in
+                Text(line)
+                    .font(.system(size: metrics.bodyFont))
+                    .lineLimit(1)
+                    .minimumScaleFactor(MIN_BODY_LINE_FONT / metrics.bodyFont)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .frame(height: metrics.bodyBox)
+                    .padding(.trailing, badgeInset(line: index + 1))
+            }
        }
+        .foregroundStyle(.white)
+        .padding(.horizontal, TILE_PADDING_H)
+        .padding(.vertical, TILE_PADDING_V)
+        .frame(maxWidth: .infinity, alignment: .topLeading)
+        .frame(height: height, alignment: .topLeading)
+        .background(lesson.tileColor)
+        .clipShape(shape)
+        .overlay(alignment: .bottomTrailing) {
+            if let count = lesson.siblingCount, count > 0 {
+                Text("+\(count)")
+                    .font(.system(size: 9, weight: .bold))
+                    .foregroundStyle(.white)
+                    .padding(.trailing, TILE_PADDING_H)
+                    .padding(.bottom, TILE_PADDING_V)
+            }
+        }
+        .overlay {
+            if lesson.status == .cancelled {
+                ZStack {
+                    shape.strokeBorder(LessonTile.cancelledRed, lineWidth: 2)
+                    GeometryReader { geo in
+                        Path { p in
+                            p.move(to: .zero)
+                            p.addLine(to: CGPoint(x: geo.size.width, y: geo.size.height))
+                            p.move(to: CGPoint(x: geo.size.width, y: 0))
+                            p.addLine(to: CGPoint(x: 0, y: geo.size.height))
+                        }
+                        .stroke(LessonTile.cancelledRed, lineWidth: 2)
+                    }
+                }
+                .clipShape(shape)
+            }
+        }
+        .padding(.horizontal, TILE_MARGIN_H)
+    }
+
+    private var titleRow: some View {
+        HStack(alignment: .center, spacing: 3) {
+            Text(layout.title)
+                .font(.system(size: layout.titleFont, weight: .medium))
+                .lineLimit(layout.titleLines)
+                .minimumScaleFactor(min(1, MIN_TITLE_FONT / layout.titleFont))
+                .frame(maxWidth: .infinity, alignment: .leading)
+            if let inline = layout.inline {
+                Text(inline)
+                    .font(.system(size: metrics.bodyFont))
+                    .lineLimit(1)
+                    .fixedSize()
+            }
+        }
+        .frame(height: layout.titleBox)
+        .padding(.trailing, badgeInset(line: 0))
+    }
+
+    private func badgeInset(line: Int) -> CGFloat {
+        layout.badgeLine == line ? BADGE_WIDTH : 0
    }
-    return result.sorted()
 }

 /// Fixed-locale formatters cached once — DateFormatter setup is the
@@ -0,0 +1,279 @@
+import SwiftUI
+import UIKit
+
+// Layout constants and rules — must mirror WidgetRenderer.kt on Android,
+// otherwise the platforms drift apart on the same widget size.
+let FALLBACK_VIRTUAL_MINUTES = 11 * 60
+let FALLBACK_SLOT_MINUTES = 45
+
+/// Trailing periods without lessons are cut off so the tiles get more
+/// height — but never below this many periods, or a short day would blow up
+/// to a handful of oversized tiles.
+let MIN_VISIBLE_PERIODS = 6
+
+let MIN_HOUR_HEIGHT: CGFloat = 18
+let MAX_HOUR_HEIGHT: CGFloat = 72
+let MIN_BLOCK_HEIGHT: CGFloat = 16
+let LESSON_GAP: CGFloat = 1.5
+
+let TITLE_ROW_HEIGHT: CGFloat = 20
+let GRID_MARGIN_TOP: CGFloat = 4
+let WEEK_HEADER_HEIGHT: CGFloat = 32
+let RULER_WIDTH: CGFloat = 30
+
+let TILE_MARGIN_H: CGFloat = 1
+let TILE_PADDING_H: CGFloat = 4
+let TILE_PADDING_V: CGFloat = 2
+let TILE_CORNER_RADIUS: CGFloat = 7
+
+// In-app tile: 15sp title over 10sp body lines. The widget keeps that ratio
+// and scales both so title + room + teacher fill one period.
+let TITLE_TO_BODY_RATIO: CGFloat = 1.5
+let MAX_BODY_FONT: CGFloat = 10
+let MIN_BODY_FONT: CGFloat = 6.5
+let MIN_TITLE_FONT: CGFloat = 6.5
+let MIN_BODY_LINE_FONT: CGFloat = 5.5
+let LINE_BOX_PER_FONT: CGFloat = 1.2
+
+/// If stacking room and teacher would push the body font below this, both
+/// share one line instead so the text stays readable.
+let STACKED_BODY_MIN_FONT: CGFloat = 7.5
+
+/// A title that needs to shrink below this to fit on one line wraps onto a
+/// second line instead, if the tile has the height for it.
+let TITLE_WRAP_BELOW_FONT: CGFloat = 8
+
+// Footprint of the "+N" badge in the tile's bottom trailing corner.
+let BADGE_WIDTH: CGFloat = 16
+let BADGE_HEIGHT: CGFloat = 11
+
+let RULER_TIMES_MIN_CELL: CGFloat = 30
+let BREAK_ICON_MIN_HEIGHT: CGFloat = 12
+
+/// Space the holiday column keeps free above and below the rotated name for
+/// the icon and the "Schulfrei" label.
+let HOLIDAY_NAME_INSET: CGFloat = 44
+
+func realMinutesToVirtual(_ realMin: Int, periods: [WidgetPeriod]) -> CGFloat {
+    guard !periods.isEmpty else { return CGFloat(realMin) }
+    for p in periods where realMin >= p.startMinutes && realMin <= p.endMinutes {
+        return CGFloat(p.virtualStartMinutes + (realMin - p.startMinutes))
+    }
+    let first = periods.first!
+    if realMin < first.startMinutes {
+        return CGFloat(realMin - first.startMinutes + first.virtualStartMinutes)
+    }
+    let last = periods.last!
+    if realMin > last.endMinutes {
+        return CGFloat(last.virtualEndMinutes + (realMin - last.endMinutes))
+    }
+    var prev = first
+    for i in 1..<periods.count {
+        let curr = periods[i]
+        if realMin > prev.endMinutes && realMin < curr.startMinutes {
+            let gap = curr.startMinutes - prev.endMinutes
+            let virtualGap = curr.virtualStartMinutes - prev.virtualEndMinutes
+            if gap > 0 {
+                return CGFloat(prev.virtualEndMinutes) +
+                    CGFloat(realMin - prev.endMinutes) * CGFloat(virtualGap) / CGFloat(gap)
+            }
+            return CGFloat(curr.virtualStartMinutes)
+        }
+        prev = curr
+    }
+    return 0
+}
+
+func minutesOfDay(_ date: Date) -> Int {
+    let comps = Calendar.current.dateComponents([.hour, .minute], from: date)
+    return (comps.hour ?? 0) * 60 + (comps.minute ?? 0)
+}
+
+func trimTrailingPeriods(_ periods: [WidgetPeriod], lessons: [WidgetLesson]) -> [WidgetPeriod] {
+    guard let latestEnd = lessons.map({ minutesOfDay($0.end) }).max() else { return periods }
+    let lastUsed = periods.lastIndex { $0.startMinutes < latestEnd } ?? -1
+    return Array(periods.prefix(max(lastUsed + 1, MIN_VISIBLE_PERIODS)))
+}
+
+func totalVirtualMinutes(_ periods: [WidgetPeriod]) -> Int {
+    periods.last?.virtualEndMinutes ?? FALLBACK_VIRTUAL_MINUTES
+}
+
+func resolveHourHeight(forGridHeight height: CGFloat, periods: [WidgetPeriod]) -> CGFloat {
+    let virtualHours = max(CGFloat(totalVirtualMinutes(periods)) / 60, 1)
+    return max(MIN_HOUR_HEIGHT, min(MAX_HOUR_HEIGHT, height / virtualHours))
+}
+
+/// Period boundaries deduped: adjacent periods share a line, periods on
+/// either side of a break get their own (bracketing the break block).
+func periodBoundaries(_ periods: [WidgetPeriod]) -> [Int] {
+    var seen = Set<Int>()
+    var result: [Int] = []
+    for p in periods {
+        for v in [p.virtualStartMinutes, p.virtualEndMinutes] {
+            if seen.insert(v).inserted { result.append(v) }
+        }
+    }
+    return result.sorted()
+}
+
+struct PeriodBreak: Hashable {
+    let virtualStart: Int
+    let virtualMinutes: Int
+}
+
+/// Only big breaks (Hofpause, Mittagspause) survive the mapper's small-break
+/// collapse as a virtual gap between two periods.
+func periodBreaks(_ periods: [WidgetPeriod]) -> [PeriodBreak] {
+    guard periods.count > 1 else { return [] }
+    return (0..<periods.count - 1).compactMap { i in
+        let gap = periods[i + 1].virtualStartMinutes - periods[i].virtualEndMinutes
+        return gap > 0
+            ? PeriodBreak(virtualStart: periods[i].virtualEndMinutes, virtualMinutes: gap)
+            : nil
+    }
+}
+
+/// Font and line-box sizes shared by every tile of one widget, derived from
+/// the height of a single period.
+struct TileMetrics {
+    let maxBodyLines: Int
+    let bodyFont: CGFloat
+    let titleBox: CGFloat
+    let bodyBox: CGFloat
+
+    init(periods: [WidgetPeriod], hourHeight: CGFloat) {
+        let slotMinutes = periods.first.map { $0.virtualEndMinutes - $0.virtualStartMinutes }
+            ?? FALLBACK_SLOT_MINUTES
+        let slotHeight = CGFloat(slotMinutes) * hourHeight / 60
+        let inner = slotHeight - LESSON_GAP - 2 * TILE_PADDING_V
+        func font(lines: CGFloat) -> CGFloat {
+            inner / (LINE_BOX_PER_FONT * (TITLE_TO_BODY_RATIO + lines))
+        }
+        maxBodyLines = font(lines: 2) < STACKED_BODY_MIN_FONT ? 1 : 2
+        bodyFont = max(MIN_BODY_FONT, min(MAX_BODY_FONT, font(lines: CGFloat(maxBodyLines))))
+        titleBox = bodyFont * TITLE_TO_BODY_RATIO * LINE_BOX_PER_FONT
+        bodyBox = bodyFont * LINE_BOX_PER_FONT
+    }
+}
+
+/// Distributes the tile height like the in-app _TileContent: the title comes
+/// first, then as many body lines as fit.
+struct TileTextLayout {
+    let title: String
+    let titleBox: CGFloat
+    let titleFont: CGFloat
+    let titleLines: Int
+    let body: [String]
+    /// Set when there is no room for a line below the title: the room moves
+    /// next to it instead.
+    let inline: String?
+    /// Index of the line (0 = title row) that has to stay clear of the "+N"
+    /// badge, or nil when the text ends above it.
+    let badgeLine: Int?
+
+    init(lesson: WidgetLesson, innerHeight: CGFloat, innerWidth: CGFloat, metrics: TileMetrics) {
+        title = !lesson.subjectShort.isEmpty ? lesson.subjectShort : (lesson.subjectLong ?? "—")
+        let candidates = [lesson.room, lesson.teacher ?? lesson.originalTeacher]
+            .compactMap { $0 }
+            .filter { !$0.trimmingCharacters(in: .whitespaces).isEmpty }
+
+        let singleTitleBox = min(metrics.titleBox, innerHeight)
+        let capacity = max(
+            0,
+            min(metrics.maxBodyLines, Int((innerHeight - singleTitleBox) / metrics.bodyBox + 0.05))
+        )
+        if capacity >= candidates.count {
+            body = candidates
+        } else if capacity == 1 {
+            // Rather share one line than drop the teacher entirely.
+            body = [candidates.joined(separator: " · ")]
+        } else {
+            body = []
+        }
+        if capacity == 0, let first = candidates.first, !title.contains(first) {
+            inline = first
+        } else {
+            inline = nil
+        }
+
+        let spare = innerHeight - singleTitleBox - CGFloat(body.count) * metrics.bodyBox
+        if spare >= singleTitleBox,
+           let wrappedLine = TileTextLayout.wrappedTitleLineBox(
+               title, innerWidth: innerWidth, metrics: metrics
+           ) {
+            titleBox = 2 * wrappedLine
+            titleFont = wrappedLine / LINE_BOX_PER_FONT
+            titleLines = 2
+        } else {
+            titleBox = singleTitleBox
+            titleFont = singleTitleBox / LINE_BOX_PER_FONT
+            titleLines = 1
+        }
+
+        let content = titleBox + CGFloat(body.count) * metrics.bodyBox
+        let hasBadge = (lesson.siblingCount ?? 0) > 0
+        badgeLine = hasBadge && innerHeight - content < BADGE_HEIGHT ? body.count : nil
+    }
+
+    /// Line box for a title wrapped onto two lines, or nil when it should
+    /// stay on one: it fits there at a readable size, or it has no word
+    /// boundary to break at. The box is capped so the longest word still
+    /// fits the tile width.
+    private static func wrappedTitleLineBox(
+        _ title: String,
+        innerWidth: CGFloat,
+        metrics: TileMetrics
+    ) -> CGFloat? {
+        func widthPerFontPoint(_ text: String) -> CGFloat {
+            let font = UIFont.systemFont(ofSize: 100, weight: .medium)
+            return (text as NSString).size(withAttributes: [.font: font]).width / 100
+        }
+        if widthPerFontPoint(title) * TITLE_WRAP_BELOW_FONT <= innerWidth { return nil }
+        let words = title
+            .replacingOccurrences(of: "-", with: "- ")
+            .split(separator: " ")
+            .map(String.init)
+        guard words.count > 1, let widest = words.map(widthPerFontPoint).max(), widest > 0 else {
+            return nil
+        }
+        return min(metrics.titleBox, innerWidth / widest * LINE_BOX_PER_FONT)
+    }
+}
+
+extension Color {
+    /// Parses the `#RRGGBB` tile colour resolved in Dart.
+    init?(widgetHex hex: String?) {
+        guard let hex, hex.count == 7, hex.hasPrefix("#"),
+              let value = UInt32(hex.dropFirst(), radix: 16) else {
+            return nil
+        }
+        self.init(
+            red: Double((value >> 16) & 0xFF) / 255,
+            green: Double((value >> 8) & 0xFF) / 255,
+            blue: Double(value & 0xFF) / 255
+        )
+    }
+}
+
+extension WidgetLesson {
+    var tileColor: Color {
+        if let resolved = Color(widgetHex: color) { return resolved }
+        // Only reached for payloads written before Dart shipped the resolved
+        // tile colour; mirrors lesson_color.dart.
+        switch status {
+        // No time-based highlight: the widget timeline only ticks every
+        // ~30min, so "current" and "past" would be stale most of the day.
+        case .regular, .past, .ongoing:
+            return Color(red: 153 / 255, green: 51 / 255, blue: 51 / 255)
+        case .cancelled: return .black
+        case .irregular: return Color(red: 143 / 255, green: 25 / 255, blue: 179 / 255)
+        case .teacherChanged: return Color(red: 41 / 255, green: 99 / 255, blue: 155 / 255)
+        case .duty: return Color(red: 0, green: 121 / 255, blue: 107 / 255)
+        case .event:
+            return customColor != nil
+                ? Color(red: 1, green: 160 / 255, blue: 0)
+                : Color(red: 46 / 255, green: 125 / 255, blue: 50 / 255)
+        }
+    }
+}
@@ -20,36 +20,44 @@ struct TimetableWeekView: View {

    @ViewBuilder
    private func content(data: WidgetTimetableData) -> some View {
+        let cal = Calendar.current
+        let days = (0..<5).map { offset in
+            cal.date(byAdding: .day, value: offset, to: data.anchorDate) ?? data.anchorDate
+        }
+        let weekLessons = data.lessons.filter { lesson in
+            days.contains { cal.isDate(lesson.start, inSameDayAs: $0) }
+        }
+        let periods = trimTrailingPeriods(data.periods, lessons: weekLessons)
        VStack(alignment: .leading, spacing: 0) {
            header(data: data)
-            dayHeaderRow(data: data)
+            dayHeaderRow(days: days)
+                .padding(.top, GRID_MARGIN_TOP)
            GeometryReader { geo in
-                let totalMin = CGFloat(data.periods.last?.virtualEndMinutes ?? FALLBACK_VIRTUAL_MINUTES)
-                let hourHeight = max(
-                    MIN_HOUR_HEIGHT,
-                    min(MAX_HOUR_HEIGHT, geo.size.height / max(totalMin, 60) * 60)
-                )
-                let dayColumnWidth = (geo.size.width - 28 - 4) / 5
-                // 45pt is the minimum where a 7pt-font room (e.g. "F2.04")
-                // plus the subject fits without `minimumScaleFactor`
-                // shrinking the subject into illegibility.
-                let subjectOnly = dayColumnWidth < 45
+                let height = resolveHourHeight(forGridHeight: geo.size.height, periods: periods)
                HStack(alignment: .top, spacing: 0) {
-                    timeLabelsColumn(hourHeight: hourHeight, periods: data.periods)
-                        .frame(width: 28, alignment: .topTrailing)
+                    PeriodRuler(periods: periods, hourHeight: height)
                    columnDivider
-                    ForEach(0..<5, id: \.self) { offset in
-                        column(
-                            data: data,
-                            offset: offset,
-                            hourHeight: hourHeight,
-                            subjectOnly: subjectOnly
+                    ForEach(days.indices, id: \.self) { index in
+                        TimeGridView(
+                            lessons: weekLessons.filter {
+                                cal.isDate($0.start, inSameDayAs: days[index])
+                            },
+                            periods: periods,
+                            hourHeight: height,
+                            holiday: holiday(on: days[index], data: data),
+                            isToday: cal.isDate(days[index], inSameDayAs: entry.date)
                        )
-                        .frame(maxWidth: .infinity)
-                        if offset < 4 { columnDivider }
+                        if index < 4 { columnDivider }
                    }
                }
            }
+            .padding(.top, 2)
+        }
+    }
+
+    private func holiday(on day: Date, data: WidgetTimetableData) -> WidgetDayInfo? {
+        data.days?.first {
+            $0.isHoliday && Calendar.current.isDate($0.date, inSameDayAs: day)
        }
    }

@@ -63,112 +71,55 @@ struct TimetableWeekView: View {
        let cal = Calendar.current
        let week = cal.component(.weekOfYear, from: data.anchorDate)
        let endDate = cal.date(byAdding: .day, value: 4, to: data.anchorDate) ?? data.anchorDate
-        return HStack {
+        return HStack(spacing: 6) {
            Text("KW \(week) · \(shortDate(data.anchorDate))–\(shortDate(endDate))")
-                .font(.system(size: 12, weight: .semibold))
+                .font(.system(size: 14, weight: .bold))
                .foregroundStyle(palette.textPrimary)
                .lineLimit(1)
-                .minimumScaleFactor(0.8)
-            Spacer()
+                .minimumScaleFactor(0.65)
+                .frame(maxWidth: .infinity, alignment: .leading)
            Text("Stand: \(freshnessLabel(for: data.fetchedAt, relativeTo: entry.date))")
-                .font(.system(size: 9))
+                .font(.system(size: 10))
                .foregroundStyle(palette.textSecondary)
                .lineLimit(1)
+                .fixedSize()
        }
+        .frame(height: TITLE_ROW_HEIGHT)
    }

-    private func dayHeaderRow(data: WidgetTimetableData) -> some View {
-        let cal = Calendar.current
-        // `.frame(maxWidth: .infinity)` is critical: without an explicit
-        // greedy width (or a true `Spacer()` inside), this HStack collapses
-        // to the sum of its fixed-width children in a `.leading` VStack
-        // and the 5 day-columns end up sharing ~5pt of width — the labels
-        // crunch to the left and stop aligning with the grid columns below.
+    /// Mirrors the in-app _DayHeaderCell: weekday in caps, day number below,
+    /// today inside an accent circle.
+    private func dayHeaderRow(days: [Date]) -> some View {
        // The fixed height keeps `columnDivider`'s vertically-flexible
-        // Rectangle from stealing space from the GeometryReader.
-        return HStack(spacing: 0) {
-            Spacer().frame(width: 28)
+        // Rectangle from stealing space from the GeometryReader below.
+        HStack(spacing: 0) {
+            Spacer().frame(width: RULER_WIDTH)
            columnDivider
-            ForEach(0..<5, id: \.self) { offset in
-                let day = cal.date(byAdding: .day, value: offset, to: data.anchorDate) ?? data.anchorDate
-                VStack(spacing: -1) {
-                    Text(weekday(for: day))
-                        .font(.system(size: 10, weight: .bold))
-                        .foregroundStyle(palette.textPrimary)
-                    Text(shortDate(day))
-                        .font(.system(size: 8))
-                        .foregroundStyle(palette.textSecondary)
-                }
-                .frame(maxWidth: .infinity)
-                if offset < 4 { columnDivider }
+            ForEach(days.indices, id: \.self) { index in
+                dayHeaderCell(days[index])
+                    .frame(maxWidth: .infinity)
+                if index < 4 { columnDivider }
            }
        }
-        // 20pt fits 10pt weekday + 8pt date with tight -1pt spacing.
-        .frame(maxWidth: .infinity, minHeight: 20, maxHeight: 20)
+        .frame(maxWidth: .infinity, minHeight: WEEK_HEADER_HEIGHT, maxHeight: WEEK_HEADER_HEIGHT)
    }

-    private func timeLabelsColumn(hourHeight: CGFloat, periods: [WidgetPeriod]) -> some View {
-        let totalMin = periods.last?.virtualEndMinutes ?? FALLBACK_VIRTUAL_MINUTES
-        let totalHeight = CGFloat(totalMin) * hourHeight / 60.0
-        // Mirrors TimeGridView.compactLabels — below 26pt/hour a stacked
-        // time+name no longer fits in one period slot and the two labels
-        // visually clip into the next slot. Drop to a single bold period
-        // number until there's room to read both lines.
-        let compact = hourHeight < 26
-        return ZStack(alignment: .topTrailing) {
-            ForEach(periodBoundaries(periods), id: \.self) { virtualMin in
-                Rectangle()
-                    .fill(palette.divider)
-                    .frame(height: 1)
-                    .offset(y: CGFloat(virtualMin) * hourHeight / 60.0)
-            }
-            ForEach(periods, id: \.startMinutes) { period in
-                VStack(alignment: .trailing, spacing: -2) {
-                    if compact {
-                        Text("\(period.name).")
-                            .font(.system(size: 9, weight: .bold))
-                            .foregroundStyle(palette.textPrimary)
-                            .lineLimit(1)
-                    } else {
-                        Text(String(format: "%02d:%02d", period.startMinutes / 60, period.startMinutes % 60))
-                            .font(.system(size: 9))
-                            .foregroundStyle(palette.textPrimary)
-                            .lineLimit(1)
-                        Text("\(period.name).")
-                            .font(.system(size: 7, weight: .bold))
-                            .foregroundStyle(palette.textSecondary)
-                            .lineLimit(1)
-                    }
-                }
-                .padding(.trailing, 4)
-                .offset(y: CGFloat(period.virtualStartMinutes) * hourHeight / 60.0)
-            }
+    private func dayHeaderCell(_ day: Date) -> some View {
+        // `entry.date`, not `Date()` — WidgetKit archives entries ahead of
+        // time, the midnight entry has to mark its own day.
+        let isToday = Calendar.current.isDate(day, inSameDayAs: entry.date)
+        return VStack(spacing: 1) {
+            Text(WidgetDateFormatters.weekdayShort.string(from: day).uppercased())
+                .font(.system(size: 9, weight: .medium))
+                .foregroundStyle(isToday ? palette.accent : palette.textSecondary)
+                .lineLimit(1)
+            Text("\(Calendar.current.component(.day, from: day))")
+                .font(.system(size: 11, weight: isToday ? .bold : .regular))
+                .foregroundStyle(isToday ? palette.onAccent : palette.textPrimary)
+                .lineLimit(1)
+                .frame(width: 18, height: 18)
+                .background(Circle().fill(isToday ? palette.accent : Color.clear))
        }
-        .frame(height: totalHeight, alignment: .topTrailing)
-    }
-
-    private func column(
-        data: WidgetTimetableData,
-        offset: Int,
-        hourHeight: CGFloat,
-        subjectOnly: Bool
-    ) -> some View {
-        let cal = Calendar.current
-        let day = cal.date(byAdding: .day, value: offset, to: data.anchorDate) ?? data.anchorDate
-        let lessonsForDay = data.lessons.filter { cal.isDate($0.start, inSameDayAs: day) }
-        return TimeGridView(
-            lessons: lessonsForDay,
-            periods: data.periods,
-            hourHeight: hourHeight,
-            showRoom: !subjectOnly,
-            showTeacher: !subjectOnly,
-            showTimeLabels: false,
-            horizontalPadding: 3
-        )
-    }
-
-    private func weekday(for date: Date) -> String {
-        WidgetDateFormatters.weekdayShort.string(from: date)
    }

    private func placeholder(_ message: String) -> some View {
@@ -33,6 +33,9 @@ struct WidgetLesson: Codable {
    let originalTeacher: String?
    let status: WidgetLessonStatus
    let customColor: String?
+    // Tile colour resolved in Dart as "#RRGGBB" (subject colours, palettes);
+    // nil only for payloads written before the field existed.
+    let color: String?
    let siblingCount: Int?
 }

@@ -9,15 +9,27 @@ struct WidgetPalette {
  let textPrimary: Color
  let textSecondary: Color
  let divider: Color
+  let accent: Color
+  let onAccent: Color
  let breakBlock: Color
+  let todayTint: Color
+  let holidayTint: Color
  let watermarkOpacity: Double

+  // ColorScheme.fromSeed(#993333).primary of the app's light / dark theme.
+  private static let lightAccent = Color(red: 0x90 / 255, green: 0x4A / 255, blue: 0x47 / 255)
+  private static let darkAccent = Color(red: 0xFF / 255, green: 0xB3 / 255, blue: 0xAF / 255)
+
  static let light = WidgetPalette(
    background: Color(red: 0xFC / 255, green: 0xF7 / 255, blue: 0xF5 / 255),
    textPrimary: Color(red: 0x11 / 255, green: 0x11 / 255, blue: 0x11 / 255),
    textSecondary: Color(red: 0x55 / 255, green: 0x55 / 255, blue: 0x55 / 255),
    divider: Color.black.opacity(0x22 / 255.0),
-    breakBlock: Color.black.opacity(0x0C / 255.0),
+    accent: lightAccent,
+    onAccent: .white,
+    breakBlock: lightAccent.opacity(0x32 / 255.0),
+    todayTint: lightAccent.opacity(0x0E / 255.0),
+    holidayTint: Color.black.opacity(0x32 / 255.0),
    watermarkOpacity: 0.014
  )

@@ -26,7 +38,11 @@ struct WidgetPalette {
    textPrimary: Color(red: 0xF1 / 255, green: 0xF1 / 255, blue: 0xF1 / 255),
    textSecondary: Color(red: 0xB0 / 255, green: 0xB0 / 255, blue: 0xB0 / 255),
    divider: Color.white.opacity(0x33 / 255.0),
-    breakBlock: Color.white.opacity(0x14 / 255.0),
+    accent: darkAccent,
+    onAccent: Color(red: 0x57 / 255, green: 0x1D / 255, blue: 0x1D / 255),
+    breakBlock: darkAccent.opacity(0x32 / 255.0),
+    todayTint: darkAccent.opacity(0x0E / 255.0),
+    holidayTint: Color.white.opacity(0x32 / 255.0),
    watermarkOpacity: 0.025
  )