From bc7430a436cd7e77f0151bbfebcc2ac904732d5f Mon Sep 17 00:00:00 2001 From: saravanakumardb1 Date: Sat, 28 Mar 2026 00:26:05 -0700 Subject: [PATCH] chore(design-system): deploy canonical generated Swift theme tokens from @bytelyst/design-tokens --- .../ui/theme/ChronoMindTokens.generated.kt | 94 ++++++++++++++++++ .../Theme/ChronoMindTheme.generated.swift | 95 +++++++++++++++++++ web/src/components/CreateTimerModal.tsx | 1 + web/src/components/Dashboard.tsx | 1 + web/src/components/FeedbackButton.tsx | 2 + web/src/components/RoutineEditor.tsx | 3 +- web/src/components/Toast.tsx | 1 + 7 files changed, 196 insertions(+), 1 deletion(-) create mode 100644 android/app/src/main/java/com/chronomind/app/ui/theme/ChronoMindTokens.generated.kt create mode 100644 ios/ChronoMind/Shared/Theme/ChronoMindTheme.generated.swift diff --git a/android/app/src/main/java/com/chronomind/app/ui/theme/ChronoMindTokens.generated.kt b/android/app/src/main/java/com/chronomind/app/ui/theme/ChronoMindTokens.generated.kt new file mode 100644 index 0000000..09aafe1 --- /dev/null +++ b/android/app/src/main/java/com/chronomind/app/ui/theme/ChronoMindTokens.generated.kt @@ -0,0 +1,94 @@ +// Auto-generated from bytelyst.tokens.json — do not edit manually. +// Product: chronomind +// Regenerate: cd packages/design-tokens && tsx scripts/generate.ts +package com.chronomind.app.theme + +object ChronoMindTokens { + + // ── Semantic Colors (Dark Theme) ───────────────────────────────── + object Dark { + const val BG_CANVAS = 0xFF06070A + const val BG_ELEVATED = 0xFF0E1118 + const val SURFACE_CARD = 0xFF121725 + const val SURFACE_MUTED = 0xFF1A2335 + const val TEXT_PRIMARY = 0xFFEFF4FF + const val TEXT_SECONDARY = 0xFFA5B1C7 + const val TEXT_TERTIARY = 0xFF6C7C98 + const val ACCENT_PRIMARY = 0xFF5A8CFF + const val ACCENT_SECONDARY = 0xFF2EE6D6 + const val SUCCESS = 0xFF34D399 + const val WARNING = 0xFFF59E0B + const val DANGER = 0xFFFF6E6E + } + + // ── Semantic Colors (Light Theme) ──────────────────────────────── + object Light { + const val BG_CANVAS = 0xFFF6F8FC + const val BG_ELEVATED = 0xFFEEF2FA + const val SURFACE_CARD = 0xFFFFFFFF + const val SURFACE_MUTED = 0xFFF3F5FA + const val TEXT_PRIMARY = 0xFF0E1320 + const val TEXT_SECONDARY = 0xFF55637A + const val TEXT_TERTIARY = 0xFF6C7C98 + const val ACCENT_PRIMARY = 0xFF5A8CFF + const val ACCENT_SECONDARY = 0xFF2EE6D6 + const val SUCCESS = 0xFF13956A + const val WARNING = 0xFFB87504 + const val DANGER = 0xFFD24242 + } + + // ── Chronomind Product Colors ─────────────────────────────── + object Product { + const val URGENCY_CRITICAL = 0xFFFF6E6E + const val URGENCY_IMPORTANT = 0xFFFFD166 + const val URGENCY_STANDARD = 0xFF5A8CFF + const val URGENCY_GENTLE = 0xFF34D399 + const val URGENCY_PASSIVE = 0xFFA5B1C7 + const val FOCUS_MODE = 0xFF7C6BFF + const val POMODORO_WORK = 0xFF34D399 + const val POMODORO_BREAK = 0xFF5A8CFF + const val CASCADE_WARNING = 0xFFFF9F43 + const val TIMER_COMPLETE = 0xFF34D399 + } + + // ── Spacing (8pt grid) ─────────────────────────────────────────── + object Spacing { + const val X0 = 0 + const val X1 = 4 + const val X2 = 8 + const val X3 = 12 + const val X4 = 16 + const val X5 = 20 + const val X6 = 24 + const val X7 = 28 + const val X8 = 32 + const val X10 = 40 + const val X12 = 48 + const val X16 = 64 + } + + // ── Radius ─────────────────────────────────────────────────────── + object Radius { + const val XS = 8 + const val SM = 12 + const val MD = 16 + const val LG = 20 + const val XL = 24 + const val PILL = 999 + } + + // ── Typography ─────────────────────────────────────────────────── + object Typography { + const val FONT_DISPLAY = "Space Grotesk" + const val FONT_BODY = "DM Sans" + const val FONT_MONO = "IBM Plex Mono" + } + + // ── Motion ─────────────────────────────────────────────────────── + object Motion { + const val INSTANT = 70 + const val FAST = 140 + const val BASE = 220 + const val SLOW = 320 + } +} diff --git a/ios/ChronoMind/Shared/Theme/ChronoMindTheme.generated.swift b/ios/ChronoMind/Shared/Theme/ChronoMindTheme.generated.swift new file mode 100644 index 0000000..8b4c085 --- /dev/null +++ b/ios/ChronoMind/Shared/Theme/ChronoMindTheme.generated.swift @@ -0,0 +1,95 @@ +// Auto-generated from bytelyst.tokens.json — do not edit manually. +// Product: chronomind +// Regenerate: cd packages/design-tokens && tsx scripts/generate.ts + +import SwiftUI + +enum CMColors { + // MARK: - Semantic (Dark Theme) + static let bgCanvas = Color(hex: 0x06070A) + static let bgElevated = Color(hex: 0x0E1118) + static let surfaceCard = Color(hex: 0x121725) + static let surfaceMuted = Color(hex: 0x1A2335) + static let textPrimary = Color(hex: 0xEFF4FF) + static let textSecondary = Color(hex: 0xA5B1C7) + static let textTertiary = Color(hex: 0x6C7C98) + static let accentPrimary = Color(hex: 0x5A8CFF) + static let accentSecondary = Color(hex: 0x2EE6D6) + static let success = Color(hex: 0x34D399) + static let warning = Color(hex: 0xF59E0B) + static let danger = Color(hex: 0xFF6E6E) + + // MARK: - Chronomind Product Colors + static let urgencyCritical = Color(hex: 0xFF6E6E) + static let urgencyImportant = Color(hex: 0xFFD166) + static let urgencyStandard = Color(hex: 0x5A8CFF) + static let urgencyGentle = Color(hex: 0x34D399) + static let urgencyPassive = Color(hex: 0xA5B1C7) + static let focusMode = Color(hex: 0x7C6BFF) + static let pomodoroWork = Color(hex: 0x34D399) + static let pomodoroBreak = Color(hex: 0x5A8CFF) + static let cascadeWarning = Color(hex: 0xFF9F43) + static let timerComplete = Color(hex: 0x34D399) + +} + +enum CMColorsLight { + // MARK: - Semantic (Light Theme) + static let bgCanvas = Color(hex: 0xF6F8FC) + static let bgElevated = Color(hex: 0xEEF2FA) + static let surfaceCard = Color(hex: 0xFFFFFF) + static let surfaceMuted = Color(hex: 0xF3F5FA) + static let textPrimary = Color(hex: 0x0E1320) + static let textSecondary = Color(hex: 0x55637A) + static let textTertiary = Color(hex: 0x6C7C98) + static let accentPrimary = Color(hex: 0x5A8CFF) + static let accentSecondary = Color(hex: 0x2EE6D6) + static let success = Color(hex: 0x13956A) + static let warning = Color(hex: 0xB87504) + static let danger = Color(hex: 0xD24242) +} + +enum CMSpacing { + static let x0: CGFloat = 0 + static let x1: CGFloat = 4 + static let x2: CGFloat = 8 + static let x3: CGFloat = 12 + static let x4: CGFloat = 16 + static let x5: CGFloat = 20 + static let x6: CGFloat = 24 + static let x7: CGFloat = 28 + static let x8: CGFloat = 32 + static let x10: CGFloat = 40 + static let x12: CGFloat = 48 + static let x16: CGFloat = 64 +} + +enum CMRadius { + static let xs: CGFloat = 8 + static let sm: CGFloat = 12 + static let md: CGFloat = 16 + static let lg: CGFloat = 20 + static let xl: CGFloat = 24 + static let pill: CGFloat = 999 +} + +enum CMMotion { + static let instant: Double = 0.07 + static let fast: Double = 0.14 + static let base: Double = 0.22 + static let slow: Double = 0.32 +} + +// MARK: - Color Hex Extension (import if not already defined) + +extension Color { + init(hex: UInt, alpha: Double = 1.0) { + self.init( + .sRGB, + red: Double((hex >> 16) & 0xFF) / 255.0, + green: Double((hex >> 8) & 0xFF) / 255.0, + blue: Double(hex & 0xFF) / 255.0, + opacity: alpha + ) + } +} diff --git a/web/src/components/CreateTimerModal.tsx b/web/src/components/CreateTimerModal.tsx index 772a2da..45ac2af 100644 --- a/web/src/components/CreateTimerModal.tsx +++ b/web/src/components/CreateTimerModal.tsx @@ -228,6 +228,7 @@ export function CreateTimerModal({ isOpen, onClose }: CreateTimerModalProps) { onClick={onClose} className="p-1 rounded-lg transition-colors cursor-pointer" style={{ color: 'var(--cm-text-tertiary)' }} + aria-label="Close dialog" > diff --git a/web/src/components/Dashboard.tsx b/web/src/components/Dashboard.tsx index 017345f..55c3930 100644 --- a/web/src/components/Dashboard.tsx +++ b/web/src/components/Dashboard.tsx @@ -180,6 +180,7 @@ export function Dashboard() { className="p-2 rounded-lg transition-colors" style={{ color: 'var(--cm-text-tertiary)' }} title="Routines" + aria-label="Routines" > diff --git a/web/src/components/FeedbackButton.tsx b/web/src/components/FeedbackButton.tsx index 660e63b..d659ac7 100644 --- a/web/src/components/FeedbackButton.tsx +++ b/web/src/components/FeedbackButton.tsx @@ -23,6 +23,7 @@ export function FeedbackButton() { color: 'var(--cm-white)', }} title="Send feedback" + aria-label="Send feedback" > @@ -45,6 +46,7 @@ export function FeedbackButton() { onClick={() => setIsOpen(false)} className="p-1 rounded cursor-pointer" style={{ color: 'var(--cm-text-tertiary)' }} + aria-label="Close feedback" > diff --git a/web/src/components/RoutineEditor.tsx b/web/src/components/RoutineEditor.tsx index 9f54af1..7864a14 100644 --- a/web/src/components/RoutineEditor.tsx +++ b/web/src/components/RoutineEditor.tsx @@ -99,7 +99,7 @@ export function RoutineEditor({

{initialName ? 'Edit Routine' : 'New Routine'}

- @@ -238,6 +238,7 @@ export function RoutineEditor({ disabled={steps.length <= 1} className="p-1 rounded cursor-pointer disabled:opacity-20" style={{ color: 'var(--cm-danger)' }} + aria-label="Remove step" > diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx index 3688904..269deb7 100644 --- a/web/src/components/Toast.tsx +++ b/web/src/components/Toast.tsx @@ -97,6 +97,7 @@ export function ToastContainer() { onClick={() => handleDismiss(toast.id)} className="flex-shrink-0 p-1 rounded cursor-pointer" style={{ color: 'var(--cm-text-tertiary)' }} + aria-label="Dismiss notification" >