Compare commits

...

3 Commits

Author SHA1 Message Date
Cursor Agent e05a0f07ce
docs: note Soft Neutral main merge; prod web rebuild pending SSH
GitHub main is at 553cb62; gitea dual-push and msn.iykyka.com web rebuild
still need host credentials in this environment.

Co-authored-by: okuma <o0kuma@users.noreply.github.com>
2026-08-03 02:11:35 +00:00
Cursor Agent 553cb624b0
fix(ui): drop unsupported tonalButtonTheme for Flutter 3.32
Keeps Soft Neutral ThemeData compatible with the web Docker Flutter image.

Co-authored-by: okuma <o0kuma@users.noreply.github.com>
2026-08-03 02:01:01 +00:00
Cursor Agent 31695cfb86
feat(ui): Soft Neutral + surface hierarchy across all screens
Replace Quiet Ink teal chrome with neutral-first messenger UI: ink CTAs,
thin blue-gray accent, unified radii, no decorative icon tiles or number
badges, flatter lists/chat panels in light and dark.

Co-authored-by: okuma <o0kuma@users.noreply.github.com>
2026-08-03 01:59:28 +00:00
17 changed files with 477 additions and 593 deletions

View File

@ -37,7 +37,9 @@ Phase 1 **A~C** 이후 실행 트랙. 작업 단위를 하나씩 처리한다.
- 앱 코드는 클로즈드 베타 직전 수준 - 앱 코드는 클로즈드 베타 직전 수준
- **`https://msn.iykyka.com` 라이브 + N3 완료 + Gemini 실초안 OK + Track A/B 완료** - **`https://msn.iykyka.com` 라이브 + N3 완료 + Gemini 실초안 OK + Track A/B 완료**
- UI: **Quiet Ink** (틸 액센트 · 라이트/다크) 전면 적용 중 — FCM 실기기는 잠시 후순위 - UI: **Soft Neutral + surface hierarchy** (`553cb62`) — GitHub `main` 머지 완료.
프로덕션 web 재빌드는 이 세션에 SSH/`.env`가 없어 보류 → 서버에서
`cd ~/project/ykavu && git pull && docker compose build web && docker compose up -d web`
- 실 FCM 기기 수신 · Android 실기기 탭 · 사람 PoC 실행은 남음 - 실 FCM 기기 수신 · Android 실기기 탭 · 사람 PoC 실행은 남음
### NEXT 순서 ### NEXT 순서

View File

@ -66,24 +66,27 @@ class _AutonomySettingsScreenState extends State<AutonomySettingsScreen> {
body: ListView( body: ListView(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 32), padding: const EdgeInsets.fromLTRB(16, 8, 16, 32),
children: [ children: [
Card( Container(
decoration: BoxDecoration(
color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
),
child: Column( child: Column(
children: [ children: [
ListTile( ListTile(
leading: const Icon(Icons.privacy_tip_outlined),
title: const Text('데이터 흐름'), title: const Text('데이터 흐름'),
subtitle: const Text('무엇이 기기에 남고 서버로 가는지'), subtitle: const Text('무엇이 기기에 남고 서버로 가는지'),
trailing: const Icon(Icons.chevron_right), trailing: const Icon(Icons.chevron_right, size: 18),
onTap: () { onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => const DataFlowScreen())); Navigator.of(context).push(MaterialPageRoute(builder: (_) => const DataFlowScreen()));
}, },
), ),
const Divider(height: 1, indent: 16, endIndent: 16), Divider(height: 1, indent: 16, endIndent: 16, color: AppTheme.glassBorder(theme.brightness)),
ListTile( ListTile(
leading: const Icon(Icons.devices),
title: const Text('로그인 세션'), title: const Text('로그인 세션'),
subtitle: const Text('멀티 디바이스 세션 목록'), subtitle: const Text('멀티 디바이스 세션 목록'),
trailing: const Icon(Icons.chevron_right), trailing: const Icon(Icons.chevron_right, size: 18),
onTap: () { onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => const SessionsScreen())); Navigator.of(context).push(MaterialPageRoute(builder: (_) => const SessionsScreen()));
}, },

View File

@ -256,10 +256,10 @@ class _ChatScreenState extends State<ChatScreen> {
if (draft.isEscalate) { if (draft.isEscalate) {
return Container( return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 8), margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(14),
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.colorScheme.errorContainer.withValues(alpha: 0.92), color: theme.colorScheme.errorContainer.withValues(alpha: 0.55),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)), border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
), ),
child: Column( child: Column(
@ -300,32 +300,27 @@ class _ChatScreenState extends State<ChatScreen> {
return Container( return Container(
margin: const EdgeInsets.fromLTRB(12, 0, 12, 8), margin: const EdgeInsets.fromLTRB(12, 0, 12, 8),
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(14),
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.colorScheme.secondaryContainer.withValues(alpha: 0.95), color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)), border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
Row( Text(
children: [
Icon(Icons.auto_awesome, size: 18, color: theme.colorScheme.onSecondaryContainer),
const SizedBox(width: 6),
Expanded(
child: Text(
title, title,
style: theme.textTheme.titleSmall?.copyWith(color: theme.colorScheme.onSecondaryContainer), style: theme.textTheme.titleSmall?.copyWith(
color: theme.colorScheme.onSurface,
fontWeight: FontWeight.w600,
), ),
), ),
],
),
if (isL0) ...[ if (isL0) ...[
const SizedBox(height: 6), const SizedBox(height: 6),
Text( Text(
'L0에서는 와카뷰 발송이 막혀 있습니다. 초안을 입력창으로 옮긴 뒤 직접 보내거나, 메뉴 → 자율성에서 L1으로 바꾸세요.', 'L0에서는 와카뷰 발송이 막혀 있습니다. 초안을 입력창으로 옮긴 뒤 직접 보내거나, 메뉴 → 자율성에서 L1으로 바꾸세요.',
style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSecondaryContainer), style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
), ),
], ],
const SizedBox(height: 10), const SizedBox(height: 10),

View File

@ -299,8 +299,6 @@ class _ContactsScreenState extends State<ContactsScreen> {
padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 32), padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 32),
child: Column( child: Column(
children: [ children: [
Icon(Icons.person_add_outlined, size: 40, color: theme.colorScheme.outline),
const SizedBox(height: 12),
Text('연락처가 없습니다', style: theme.textTheme.titleMedium), Text('연락처가 없습니다', style: theme.textTheme.titleMedium),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
@ -316,16 +314,16 @@ class _ContactsScreenState extends State<ContactsScreen> {
), ),
), ),
for (final c in _contacts) for (final c in _contacts)
Padding( ListTile(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
child: ListTile(
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: theme.colorScheme.secondaryContainer, radius: 20,
backgroundColor: theme.colorScheme.surfaceContainerHighest,
child: Text( child: Text(
c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1), c.displayName.isEmpty ? '?' : c.displayName.substring(0, 1),
style: TextStyle( style: TextStyle(
color: theme.colorScheme.onSecondaryContainer, color: theme.colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w600,
), ),
), ),
), ),
@ -347,7 +345,7 @@ class _ContactsScreenState extends State<ContactsScreen> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
if (c.contactUserId != null) ...[ if (c.contactUserId != null) ...[
FilledButton.tonal( TextButton(
onPressed: () => _startChat(c), onPressed: () => _startChat(c),
child: const Text('대화'), child: const Text('대화'),
), ),
@ -376,7 +374,6 @@ class _ContactsScreenState extends State<ContactsScreen> {
} }
}, },
), ),
),
const SizedBox(height: 72), const SizedBox(height: 72),
], ],
), ),

View File

@ -4,7 +4,6 @@ import 'package:provider/provider.dart';
import '../models/models.dart'; import '../models/models.dart';
import '../services/api_client.dart'; import '../services/api_client.dart';
import '../state/session_state.dart'; import '../state/session_state.dart';
import '../theme/app_theme.dart';
import '../widgets/gradient_text.dart'; import '../widgets/gradient_text.dart';
import '../widgets/my_user_id_chip.dart'; import '../widgets/my_user_id_chip.dart';
import 'autonomy_settings_screen.dart'; import 'autonomy_settings_screen.dart';
@ -157,16 +156,16 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
Color _avatarColor(BuildContext context, int seed) { Color _avatarColor(BuildContext context, int seed) {
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final palette = isDark final palette = isDark
? const [Color(0xFF1F3A37), Color(0xFF2A3140), Color(0xFF3A3224)] ? const [Color(0xFF1C1C1C), Color(0xFF22262E), Color(0xFF242018)]
: const [Color(0xFFD9F3F0), Color(0xFFE8E6E1), Color(0xFFFFE8C8)]; : const [Color(0xFFF4F4F5), Color(0xFFE8EEF4), Color(0xFFF3F0EA)];
return palette[seed % palette.length]; return palette[seed % palette.length];
} }
Color _onAvatarColor(BuildContext context, int seed) { Color _onAvatarColor(BuildContext context, int seed) {
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final palette = isDark final palette = isDark
? const [Color(0xFF2DD4BF), Color(0xFFF2F1EF), Color(0xFFFBBF24)] ? const [Color(0xFFA3A3A3), Color(0xFF8BB4D9), Color(0xFFC4A574)]
: const [Color(0xFF0F766E), Color(0xFF1C1B1A), Color(0xFFB45309)]; : const [Color(0xFF525252), Color(0xFF3B6D9B), Color(0xFF9A7B4F)];
return palette[seed % palette.length]; return palette[seed % palette.length];
} }
@ -224,10 +223,10 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
const SizedBox(width: 4), const SizedBox(width: 4),
], ],
), ),
floatingActionButton: FloatingActionButton.extended( floatingActionButton: FloatingActionButton(
onPressed: _createConversation, onPressed: _createConversation,
icon: const Icon(Icons.chat), tooltip: '새 대화',
label: const Text('새 대화'), child: const Icon(Icons.chat_outlined),
), ),
body: RefreshIndicator( body: RefreshIndicator(
onRefresh: _load, onRefresh: _load,
@ -255,19 +254,9 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
), ),
if (_rooms.isEmpty) if (_rooms.isEmpty)
Padding( Padding(
padding: const EdgeInsets.fromLTRB(32, 56, 32, 32), padding: const EdgeInsets.fromLTRB(32, 48, 32, 32),
child: Column( child: Column(
children: [ children: [
Container(
width: 68,
height: 68,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: theme.colorScheme.primaryContainer,
),
child: Icon(Icons.chat_bubble_outline, size: 28, color: theme.colorScheme.primary),
),
const SizedBox(height: 18),
Text('대화방이 없습니다', style: theme.textTheme.titleMedium), Text('대화방이 없습니다', style: theme.textTheme.titleMedium),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
@ -281,27 +270,22 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
), ),
), ),
const SizedBox(height: 18), const SizedBox(height: 18),
FilledButton.tonalIcon( OutlinedButton(
onPressed: () async { onPressed: () async {
await Navigator.of(context).push( await Navigator.of(context).push(
MaterialPageRoute(builder: (_) => const ContactsScreen()), MaterialPageRoute(builder: (_) => const ContactsScreen()),
); );
await _load(); await _load();
}, },
icon: const Icon(Icons.contacts_outlined), child: const Text('연락처 열기'),
label: const Text('연락처 열기'),
), ),
], ],
), ),
), ),
for (final room in _rooms) for (final room in _rooms)
Padding( Material(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3), color: Colors.transparent,
child: Material(
color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(16),
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: () async { onTap: () async {
await Navigator.of(context).push( await Navigator.of(context).push(
MaterialPageRoute( MaterialPageRoute(
@ -314,14 +298,15 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
await _load(); await _load();
}, },
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row( child: Row(
children: [ children: [
CircleAvatar( CircleAvatar(
radius: 24, radius: 22,
backgroundColor: _avatarColor(context, room.id), backgroundColor: _avatarColor(context, room.id),
child: Icon( child: Icon(
room.isGroup ? Icons.groups_outlined : Icons.person_outline, room.isGroup ? Icons.groups_outlined : Icons.person_outline,
size: 20,
color: _onAvatarColor(context, room.id), color: _onAvatarColor(context, room.id),
), ),
), ),
@ -332,9 +317,9 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
children: [ children: [
Text( Text(
_titleFor(room, me), _titleFor(room, me),
style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w700), style: theme.textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w600),
), ),
const SizedBox(height: 3), const SizedBox(height: 2),
Row( Row(
children: [ children: [
if (room.twinDisabledByPeer) ...[ if (room.twinDisabledByPeer) ...[
@ -358,13 +343,12 @@ class _ConversationListScreenState extends State<ConversationListScreen> {
], ],
), ),
), ),
Icon(Icons.chevron_right, size: 20, color: theme.colorScheme.onSurfaceVariant), Icon(Icons.chevron_right, size: 18, color: theme.colorScheme.onSurfaceVariant),
], ],
), ),
), ),
), ),
), ),
),
const SizedBox(height: 72), const SizedBox(height: 72),
], ],
), ),

View File

@ -10,42 +10,28 @@ class DataFlowScreen extends StatelessWidget {
Widget _section( Widget _section(
BuildContext context, { BuildContext context, {
required IconData icon,
required Color tint,
required String title, required String title,
required String body, required String body,
}) { }) {
final theme = Theme.of(context); final theme = Theme.of(context);
return Container( return Container(
margin: const EdgeInsets.only(bottom: 16), margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.glassFill(theme.brightness), color: AppTheme.glassFill(theme.brightness),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)), border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
), ),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 36,
height: 36,
alignment: Alignment.center,
decoration: BoxDecoration(color: tint.withValues(alpha: 0.15), shape: BoxShape.circle),
child: Icon(icon, size: 18, color: tint),
),
const SizedBox(width: 12),
Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text(title, style: theme.textTheme.titleSmall), Text(title, style: theme.textTheme.titleSmall),
const SizedBox(height: 4), const SizedBox(height: 6),
Text( Text(
body, body,
style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant), style: theme.textTheme.bodyMedium?.copyWith(
), color: theme.colorScheme.onSurfaceVariant,
], height: 1.45,
), ),
), ),
], ],
@ -66,32 +52,40 @@ class DataFlowScreen extends StatelessWidget {
children: [ children: [
_section( _section(
context, context,
icon: Icons.lock_outline,
tint: Colors.green.shade600,
title: '기기 안에만 둡니다', title: '기기 안에만 둡니다',
body: '말투 샘플·온보딩 입력은 이 기기의 로컬 저장소에만 보관합니다. ' body: '말투 샘플·온보딩 입력은 이 기기의 로컬 저장소에만 보관합니다. '
'원문 대화 전체를 서버로 올리지 않는 것이 기본 원칙입니다.', '원문 대화 전체를 서버로 올리지 않는 것이 기본 원칙입니다.',
), ),
Card( Container(
margin: const EdgeInsets.only(bottom: 16), margin: const EdgeInsets.only(bottom: 12),
child: ListTile( padding: const EdgeInsets.all(16),
leading: Icon(Icons.record_voice_over_outlined, color: theme.colorScheme.primary), decoration: BoxDecoration(
title: Text('말투 샘플 ${samples.length}'), color: AppTheme.glassFill(theme.brightness),
subtitle: Text( borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('말투 샘플 ${samples.length}', style: theme.textTheme.titleSmall),
const SizedBox(height: 6),
Text(
[ [
samples.isEmpty ? '(아직 없음 — 말투 샘플 화면에서 추가)' : samples.take(3).join(' · '), samples.isEmpty ? '(아직 없음 — 말투 샘플 화면에서 추가)' : samples.take(3).join(' · '),
session.localDbEncrypted session.localDbEncrypted
? '저장: drift + SQLCipher(암호화)' ? '저장: drift + SQLCipher(암호화)'
: '저장: 메모리/웹 스텁(이 환경에 SQLCipher 없음 — Chrome·Linux 폴백)', : '저장: 메모리/웹 스텁(이 환경에 SQLCipher 없음 — Chrome·Linux 폴백)',
].join('\n'), ].join('\n'),
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
height: 1.45,
), ),
isThreeLine: true, ),
],
), ),
), ),
_section( _section(
context, context,
icon: Icons.cloud_upload_outlined,
tint: Colors.amber.shade800,
title: '서버로 보낼 수 있는 것', title: '서버로 보낼 수 있는 것',
body: '초안이 필요할 때: 최근 대화 몇 줄 + 말투 샘플 일부(최소 컨텍스트)\n' body: '초안이 필요할 때: 최근 대화 몇 줄 + 말투 샘플 일부(최소 컨텍스트)\n'
'채팅 릴레이: 보낸 메시지 본문\n' '채팅 릴레이: 보낸 메시지 본문\n'
@ -100,8 +94,6 @@ class DataFlowScreen extends StatelessWidget {
), ),
_section( _section(
context, context,
icon: Icons.block,
tint: theme.colorScheme.error,
title: '보내지 않는 것', title: '보내지 않는 것',
body: '전체 채팅 백업 업로드, 온디바이스 말투 학습 원문 코퍼스, ' body: '전체 채팅 백업 업로드, 온디바이스 말투 학습 원문 코퍼스, '
'관계 메모의 자동 클라우드 분석', '관계 메모의 자동 클라우드 분석',

View File

@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
import '../models/models.dart'; import '../models/models.dart';
import '../services/api_client.dart'; import '../services/api_client.dart';
import '../state/session_state.dart'; import '../state/session_state.dart';
import '../theme/app_theme.dart';
import 'chat_screen.dart'; import 'chat_screen.dart';
/// Post-hoc notification inbox: escalation logs that need human attention. /// Post-hoc notification inbox: escalation logs that need human attention.
@ -53,38 +54,30 @@ class _InboxScreenState extends State<InboxScreen> {
child: _loading child: _loading
? ListView(children: const [SizedBox(height: 160), Center(child: CircularProgressIndicator())]) ? ListView(children: const [SizedBox(height: 160), Center(child: CircularProgressIndicator())])
: ListView( : ListView(
padding: const EdgeInsets.fromLTRB(12, 12, 12, 24), padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
children: [ children: [
Padding( Text(
padding: const EdgeInsets.fromLTRB(4, 0, 4, 12),
child: Text(
'와카뷰가 보류·차단한 내용과 에스컬레이션 기록입니다. ' '와카뷰가 보류·차단한 내용과 에스컬레이션 기록입니다. '
'이미 보낸 와카뷰 메시지는 해당 대화방에서 되돌릴 수 있습니다.', '이미 보낸 와카뷰 메시지는 해당 대화방에서 되돌릴 수 있습니다.',
style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant), style: theme.textTheme.bodyMedium?.copyWith(color: theme.colorScheme.onSurfaceVariant),
), ),
), const SizedBox(height: 12),
if (_error != null) if (_error != null)
Padding( Padding(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8), padding: const EdgeInsets.only(bottom: 8),
child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)), child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)),
), ),
if (_logs.isEmpty) if (_logs.isEmpty)
Padding( Padding(
padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 32), padding: const EdgeInsets.symmetric(vertical: 56),
child: Column( child: Center(
children: [ child: Text('새 알림이 없습니다', style: theme.textTheme.titleMedium),
Icon(Icons.notifications_none, size: 40, color: theme.colorScheme.outline),
const SizedBox(height: 12),
Text('새 알림이 없습니다', style: theme.textTheme.titleMedium),
],
), ),
), ),
for (final log in _logs) for (final log in _logs)
Padding( Material(
padding: const EdgeInsets.only(bottom: 8), color: Colors.transparent,
child: Card(
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: () { onTap: () {
Navigator.of(context).push( Navigator.of(context).push(
MaterialPageRoute( MaterialPageRoute(
@ -92,34 +85,37 @@ class _InboxScreenState extends State<InboxScreen> {
), ),
); );
}, },
child: Padding( child: Container(
margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.all(14), padding: const EdgeInsets.all(14),
child: Row( decoration: BoxDecoration(
crossAxisAlignment: CrossAxisAlignment.start, borderRadius: BorderRadius.circular(AppTheme.rPanel),
children: [ border: Border.all(color: AppTheme.glassBorder(theme.brightness)),
CircleAvatar( color: AppTheme.glassFill(theme.brightness),
radius: 18,
backgroundColor: log.resolved
? theme.colorScheme.primaryContainer
: theme.colorScheme.errorContainer,
child: Icon(
log.resolved ? Icons.check_circle_outline : Icons.warning_amber_rounded,
size: 18,
color: log.resolved
? theme.colorScheme.onPrimaryContainer
: theme.colorScheme.onErrorContainer,
), ),
),
const SizedBox(width: 12),
Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Row(
children: [
Expanded(
child: Text(
log.reason.isEmpty ? '에스컬레이션' : log.reason, log.reason.isEmpty ? '에스컬레이션' : log.reason,
style: theme.textTheme.titleSmall, style: theme.textTheme.titleSmall,
), ),
const SizedBox(height: 2), ),
Text(
log.resolved ? '처리됨' : '확인 필요',
style: theme.textTheme.labelSmall?.copyWith(
color: log.resolved
? theme.colorScheme.onSurfaceVariant
: theme.colorScheme.error,
fontWeight: FontWeight.w600,
),
),
],
),
const SizedBox(height: 4),
Text( Text(
'대화방 #${log.conversationId}', '대화방 #${log.conversationId}',
style: theme.textTheme.bodySmall style: theme.textTheme.bodySmall
@ -143,10 +139,6 @@ class _InboxScreenState extends State<InboxScreen> {
], ],
), ),
), ),
],
),
),
),
), ),
), ),
], ],

View File

@ -61,21 +61,8 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
), ),
body: SafeArea( body: SafeArea(
child: ListView( child: ListView(
padding: const EdgeInsets.fromLTRB(24, 8, 24, 32), padding: const EdgeInsets.fromLTRB(24, 12, 24, 32),
children: [ children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 52,
height: 52,
decoration: BoxDecoration(
color: scheme.primaryContainer,
borderRadius: BorderRadius.circular(14),
),
child: Icon(Icons.record_voice_over_outlined, size: 26, color: scheme.primary),
),
),
const SizedBox(height: 18),
Text('와카뷰가 따라 쓸 말투', style: theme.textTheme.headlineSmall), Text('와카뷰가 따라 쓸 말투', style: theme.textTheme.headlineSmall),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
@ -93,21 +80,6 @@ class _OnboardingToneScreenState extends State<OnboardingToneScreen> {
decoration: InputDecoration( decoration: InputDecoration(
labelText: '샘플 ${i + 1}', labelText: '샘플 ${i + 1}',
hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null, hintText: i == 0 ? '예: ㅇㅇ 알겠음' : null,
prefixIcon: Padding(
padding: const EdgeInsets.only(left: 10, right: 4),
child: CircleAvatar(
radius: 12,
backgroundColor: scheme.primaryContainer,
child: Text(
'${i + 1}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: scheme.onPrimaryContainer,
),
),
),
),
), ),
), ),
const SizedBox(height: 12), const SizedBox(height: 12),

View File

@ -95,20 +95,8 @@ class _SessionsScreenState extends State<SessionsScreen> {
child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)), child: Text(_error!, style: TextStyle(color: theme.colorScheme.error)),
), ),
for (final s in _sessions) for (final s in _sessions)
Padding( ListTile(
padding: const EdgeInsets.symmetric(vertical: 2), contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 2),
child: ListTile(
leading: CircleAvatar(
backgroundColor: s['is_current'] == true
? theme.colorScheme.primaryContainer
: theme.colorScheme.surfaceContainerHighest,
child: Icon(
s['is_current'] == true ? Icons.smartphone : Icons.devices_other,
color: s['is_current'] == true
? theme.colorScheme.onPrimaryContainer
: theme.colorScheme.onSurfaceVariant,
),
),
title: Text( title: Text(
s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}', s['is_current'] == true ? '이 기기 (현재)' : '세션 #${s['id']}',
style: theme.textTheme.titleSmall, style: theme.textTheme.titleSmall,
@ -120,7 +108,6 @@ class _SessionsScreenState extends State<SessionsScreen> {
onPressed: () => _revoke(s), onPressed: () => _revoke(s),
), ),
), ),
),
], ],
), ),
), ),

View File

@ -133,15 +133,15 @@ class _DemoTestPanel extends StatelessWidget {
final brightness = theme.brightness; final brightness = theme.brightness;
return Material( return Material(
color: Colors.transparent, color: Colors.transparent,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(AppTheme.rPanel),
child: InkWell( child: InkWell(
onTap: onFill, onTap: onFill,
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(AppTheme.rPanel),
child: Container( child: Container(
padding: const EdgeInsets.fromLTRB(16, 14, 12, 14), padding: const EdgeInsets.fromLTRB(16, 14, 12, 14),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.glassFill(brightness), color: AppTheme.glassFill(brightness),
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(brightness)), border: Border.all(color: AppTheme.glassBorder(brightness)),
), ),
child: Column( child: Column(
@ -150,8 +150,9 @@ class _DemoTestPanel extends StatelessWidget {
Text( Text(
'테스트용 (누구나)', '테스트용 (누구나)',
style: theme.textTheme.labelLarge?.copyWith( style: theme.textTheme.labelLarge?.copyWith(
color: theme.colorScheme.primary, color: theme.colorScheme.onSurfaceVariant,
letterSpacing: 0.2, letterSpacing: 0.15,
fontWeight: FontWeight.w600,
), ),
), ),
const SizedBox(height: 6), const SizedBox(height: 6),
@ -162,7 +163,7 @@ class _DemoTestPanel extends StatelessWidget {
'초대 코드 ${AppConfig.demoInviteCode}\n표시 이름 ${AppConfig.demoDisplayName}', '초대 코드 ${AppConfig.demoInviteCode}\n표시 이름 ${AppConfig.demoDisplayName}',
style: theme.textTheme.titleSmall?.copyWith( style: theme.textTheme.titleSmall?.copyWith(
height: 1.45, height: 1.45,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w600,
), ),
), ),
), ),

View File

@ -33,9 +33,12 @@ class SplashScreen extends StatelessWidget {
), ),
const SizedBox(height: 32), const SizedBox(height: 32),
SizedBox( SizedBox(
width: 28, width: 22,
height: 28, height: 22,
child: CircularProgressIndicator(strokeWidth: 2.5, color: scheme.primary), child: CircularProgressIndicator(
strokeWidth: 2,
color: scheme.onSurfaceVariant,
),
), ),
], ],
), ),

View File

@ -1,125 +1,104 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart'; import 'package:google_fonts/google_fonts.dart';
/// Quiet Ink calm messenger direction for . /// Soft Neutral + surface hierarchy for .
/// Light: warm off-white canvas, charcoal ink, single deep-teal accent. /// Neutrals dominate; accent is thin (mine bubbles / small links only).
/// Dark: charcoal surfaces, same teal (brighter), twin stays warm amber. /// Radii: input/button 12, bubble 18. No glow, almost no shadow.
/// Avoids aurora/purple glass so chat reads as a daily messenger, not a demo.
class AppTheme { class AppTheme {
AppTheme._(); AppTheme._();
// Light // Light neutrals
static const canvasLight = Color(0xFFF7F6F3); static const canvasLight = Color(0xFFFAFAF9);
static const surfaceLight = Color(0xFFFFFFFF); static const surfaceLight = Color(0xFFFFFFFF);
static const inkLight = Color(0xFF1C1B1A); static const inkLight = Color(0xFF171717);
static const mutedLight = Color(0xFF6B6864); static const mutedLight = Color(0xFF737373);
static const lineLight = Color(0xFFE8E6E1); static const lineLight = Color(0xFFE5E5E5);
static const teal = Color(0xFF0F766E); static const softFillLight = Color(0xFFF4F4F5);
static const tealSoft = Color(0xFFD9F3F0);
static const twinAmberLight = Color(0xFFB45309);
// Dark // Dark neutrals
static const canvasDark = Color(0xFF0E0F12); static const canvasDark = Color(0xFF0A0A0A);
static const surfaceDark = Color(0xFF1A1C22); static const surfaceDark = Color(0xFF141414);
static const inkDark = Color(0xFFF2F1EF); static const inkDark = Color(0xFFFAFAFA);
static const mutedDark = Color(0xFF9B9893); static const mutedDark = Color(0xFFA3A3A3);
static const lineDark = Color(0xFF2A2D36); static const lineDark = Color(0xFF262626);
/// Dark accent muted teal (avoid neon cyan against charcoal). static const softFillDark = Color(0xFF1C1C1C);
static const tealBright = Color(0xFF5EBBB0);
static const tealSoftDark = Color(0xFF1A3331);
static const twinAmberDark = Color(0xFFE0A84A);
/// Kept for call sites that still reference a "brand" fill solid teal, not a rainbow. /// Thin accent used for mine bubbles & primary actions, not chrome.
static const accentLight = Color(0xFF3B6D9B);
static const accentDark = Color(0xFF8BB4D9);
static const accentSoftLight = Color(0xFFE8F0F7);
static const accentSoftDark = Color(0xFF1A2836);
static const twinAmberLight = Color(0xFF9A7B4F);
static const twinAmberDark = Color(0xFFC4A574);
/// Compat for older call sites.
static const teal = accentLight;
static const tealBright = accentDark;
static const canvasDarkCompat = canvasDark;
static const brandGradient = LinearGradient( static const brandGradient = LinearGradient(
begin: Alignment.centerLeft, colors: [accentLight, accentLight],
end: Alignment.centerRight,
colors: [teal, Color(0xFF0D9488)],
); );
static Color twinAccent(Brightness brightness) => static Color twinAccent(Brightness b) => b == Brightness.dark ? twinAmberDark : twinAmberLight;
brightness == Brightness.dark ? twinAmberDark : twinAmberLight;
/// Soft near-flat wash (not aurora). Used by [GradientBackdrop]. static LinearGradient backgroundGradient(Brightness b) {
static LinearGradient backgroundGradient(Brightness brightness) { final c = b == Brightness.dark ? canvasDark : canvasLight;
if (brightness == Brightness.dark) { return LinearGradient(colors: [c, c]);
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF12141A), canvasDark],
);
}
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFFF3F2EE), canvasLight],
);
} }
static Color glowPrimary(Brightness brightness) => static Color glassFill(Brightness b) => b == Brightness.dark ? surfaceDark : surfaceLight;
(brightness == Brightness.dark ? tealBright : teal).withValues(alpha: 0.06); static Color glassBorder(Brightness b) => b == Brightness.dark ? lineDark : lineLight;
static Color glassShadow(Brightness b) => Colors.transparent;
static Color glowSecondary(Brightness brightness) => Colors.transparent; static Color mineBubble(Brightness b) => b == Brightness.dark ? accentSoftDark : accentLight;
static Color mineBubbleFg(Brightness b) => b == Brightness.dark ? inkDark : Colors.white;
static Color peerBubble(Brightness b) => b == Brightness.dark ? softFillDark : softFillLight;
/// Panel fill (replaces glassmorphism). static const rInput = 12.0;
static Color glassFill(Brightness brightness) => static const rButton = 12.0;
brightness == Brightness.dark ? surfaceDark : surfaceLight; static const rBubble = 18.0;
static const rPanel = 12.0;
static Color glassBorder(Brightness brightness) =>
brightness == Brightness.dark ? lineDark : lineLight;
static Color glassShadow(Brightness brightness) =>
brightness == Brightness.dark ? Colors.black.withValues(alpha: 0.35) : const Color(0xFF1C1B1A).withValues(alpha: 0.06);
static Color mineBubble(Brightness brightness) =>
brightness == Brightness.dark ? const Color(0xFF244844) : teal;
static Color mineBubbleFg(Brightness brightness) =>
brightness == Brightness.dark ? inkDark : Colors.white;
static Color peerBubble(Brightness brightness) =>
brightness == Brightness.dark ? const Color(0xFF24272F) : const Color(0xFFEFEEEA);
static ThemeData light() => _build(Brightness.light); static ThemeData light() => _build(Brightness.light);
static ThemeData dark() => _build(Brightness.dark); static ThemeData dark() => _build(Brightness.dark);
static ThemeData _build(Brightness brightness) { static ThemeData _build(Brightness brightness) {
final isDark = brightness == Brightness.dark; final isDark = brightness == Brightness.dark;
final primary = isDark ? tealBright : teal; final primary = isDark ? accentDark : accentLight;
final onPrimary = isDark ? canvasDark : Colors.white; final onPrimary = isDark ? canvasDark : Colors.white;
final ink = isDark ? inkDark : inkLight;
final muted = isDark ? mutedDark : mutedLight;
final line = isDark ? lineDark : lineLight;
final canvas = isDark ? canvasDark : canvasLight;
final surface = isDark ? surfaceDark : surfaceLight;
final soft = isDark ? softFillDark : softFillLight;
final scheme = ColorScheme( final scheme = ColorScheme(
brightness: brightness, brightness: brightness,
primary: primary, primary: primary,
onPrimary: onPrimary, onPrimary: onPrimary,
primaryContainer: isDark ? tealSoftDark : tealSoft, primaryContainer: isDark ? accentSoftDark : accentSoftLight,
onPrimaryContainer: isDark ? tealBright : const Color(0xFF0A4F4A), onPrimaryContainer: primary,
secondary: isDark ? twinAmberDark : twinAmberLight, secondary: isDark ? twinAmberDark : twinAmberLight,
onSecondary: isDark ? canvasDark : Colors.white, onSecondary: isDark ? canvasDark : Colors.white,
secondaryContainer: isDark ? const Color(0xFF3D2E14) : const Color(0xFFFFE8C8), secondaryContainer: soft,
onSecondaryContainer: isDark ? twinAmberDark : twinAmberLight, onSecondaryContainer: muted,
tertiary: primary, tertiary: primary,
onTertiary: onPrimary, onTertiary: onPrimary,
error: isDark ? const Color(0xFFF87171) : const Color(0xFFB91C1C), error: isDark ? const Color(0xFFF87171) : const Color(0xFFB91C1C),
onError: Colors.white, onError: Colors.white,
surface: isDark ? surfaceDark : surfaceLight, surface: surface,
onSurface: isDark ? inkDark : inkLight, onSurface: ink,
onSurfaceVariant: isDark ? mutedDark : mutedLight, onSurfaceVariant: muted,
outline: isDark ? lineDark : lineLight, outline: line,
outlineVariant: isDark ? lineDark : lineLight, outlineVariant: line,
surfaceContainerHighest: isDark ? const Color(0xFF24272F) : const Color(0xFFEFEEEA), surfaceContainerHighest: soft,
surfaceContainerHigh: isDark ? const Color(0xFF20232A) : const Color(0xFFF3F2EE), surfaceContainerHigh: soft,
surfaceContainer: isDark ? surfaceDark : surfaceLight, surfaceContainer: surface,
); );
final baseText = GoogleFonts.plusJakartaSansTextTheme(); final textTheme = _textTheme(GoogleFonts.plusJakartaSansTextTheme(), ink);
final textTheme = _textTheme(baseText, scheme.onSurface);
final panel = glassFill(brightness);
final edge = glassBorder(brightness);
final shadow = glassShadow(brightness);
final shape = RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(color: edge),
);
return ThemeData( return ThemeData(
useMaterial3: true, useMaterial3: true,
@ -130,70 +109,75 @@ class AppTheme {
textTheme: textTheme, textTheme: textTheme,
primaryTextTheme: textTheme, primaryTextTheme: textTheme,
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
backgroundColor: Colors.transparent, backgroundColor: canvas.withValues(alpha: 0.92),
foregroundColor: scheme.onSurface, foregroundColor: ink,
surfaceTintColor: Colors.transparent, surfaceTintColor: Colors.transparent,
elevation: 0, elevation: 0,
scrolledUnderElevation: 0, scrolledUnderElevation: 0,
centerTitle: false, centerTitle: false,
titleTextStyle: textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700, letterSpacing: -0.3), titleTextStyle: textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600, letterSpacing: -0.2),
), ),
cardTheme: CardThemeData( cardTheme: CardThemeData(
elevation: 0, elevation: 0,
shadowColor: shadow, color: surface,
color: panel, shape: RoundedRectangleBorder(
shape: shape, borderRadius: BorderRadius.circular(rPanel),
side: BorderSide(color: line),
),
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
), ),
listTileTheme: ListTileThemeData( listTileTheme: ListTileThemeData(
iconColor: scheme.onSurfaceVariant, iconColor: muted,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)),
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4), contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 2),
minVerticalPadding: 10, minVerticalPadding: 8,
), ),
dividerTheme: DividerThemeData(color: edge, space: 1, thickness: 1), dividerTheme: DividerThemeData(color: line, space: 1, thickness: 1),
inputDecorationTheme: InputDecorationTheme( inputDecorationTheme: InputDecorationTheme(
filled: true, filled: true,
fillColor: isDark ? const Color(0xFF14161C) : const Color(0xFFF0EFEC), fillColor: surface,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14), contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: edge), borderSide: BorderSide(color: line),
), ),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: edge), borderSide: BorderSide(color: line),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: primary, width: 1.5), borderSide: BorderSide(color: primary, width: 1.2),
), ),
errorBorder: OutlineInputBorder( errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: scheme.error), borderSide: BorderSide(color: scheme.error),
), ),
focusedErrorBorder: OutlineInputBorder( focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(rInput),
borderSide: BorderSide(color: scheme.error, width: 1.5), borderSide: BorderSide(color: scheme.error, width: 1.2),
), ),
hintStyle: TextStyle(color: scheme.onSurfaceVariant.withValues(alpha: 0.75)), hintStyle: TextStyle(color: muted.withValues(alpha: 0.8)),
labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500),
), ),
filledButtonTheme: FilledButtonThemeData( filledButtonTheme: FilledButtonThemeData(
style: FilledButton.styleFrom( style: FilledButton.styleFrom(
backgroundColor: primary, backgroundColor: isDark ? inkDark : inkLight,
foregroundColor: onPrimary, foregroundColor: isDark ? canvasDark : Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14), padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), minimumSize: const Size(0, 46),
textStyle: const TextStyle(fontWeight: FontWeight.w700), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
textStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 15),
elevation: 0, elevation: 0,
), ),
), ),
outlinedButtonTheme: OutlinedButtonThemeData( outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom( style: OutlinedButton.styleFrom(
foregroundColor: scheme.onSurface, foregroundColor: ink,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14), padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), minimumSize: const Size(0, 46),
side: BorderSide(color: edge), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
side: BorderSide(color: line),
), ),
), ),
textButtonTheme: TextButtonThemeData( textButtonTheme: TextButtonThemeData(
@ -204,60 +188,70 @@ class AppTheme {
), ),
iconButtonTheme: IconButtonThemeData( iconButtonTheme: IconButtonThemeData(
style: IconButton.styleFrom( style: IconButton.styleFrom(
foregroundColor: scheme.onSurfaceVariant, foregroundColor: muted,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
), ),
), ),
chipTheme: ChipThemeData( chipTheme: ChipThemeData(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
side: BorderSide(color: edge), side: BorderSide(color: line),
backgroundColor: panel, backgroundColor: surface,
labelStyle: TextStyle(color: scheme.onSurfaceVariant, fontWeight: FontWeight.w600, fontSize: 12), labelStyle: TextStyle(color: muted, fontWeight: FontWeight.w500, fontSize: 12),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
), ),
floatingActionButtonTheme: FloatingActionButtonThemeData( floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: primary, backgroundColor: isDark ? inkDark : inkLight,
foregroundColor: onPrimary, foregroundColor: isDark ? canvasDark : Colors.white,
elevation: 2, elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
), ),
snackBarTheme: SnackBarThemeData( snackBarTheme: SnackBarThemeData(
behavior: SnackBarBehavior.floating, behavior: SnackBarBehavior.floating,
backgroundColor: isDark ? surfaceDark : inkLight, backgroundColor: isDark ? softFillDark : inkLight,
contentTextStyle: TextStyle(color: isDark ? inkDark : Colors.white), contentTextStyle: TextStyle(color: isDark ? inkDark : Colors.white),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rPanel)),
elevation: 0,
), ),
dialogTheme: DialogThemeData( dialogTheme: DialogThemeData(
backgroundColor: panel, backgroundColor: surface,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(color: line),
),
), ),
progressIndicatorTheme: ProgressIndicatorThemeData(color: primary), progressIndicatorTheme: ProgressIndicatorThemeData(color: primary),
bannerTheme: MaterialBannerThemeData(backgroundColor: panel, padding: const EdgeInsets.all(16)), bannerTheme: MaterialBannerThemeData(backgroundColor: surface, padding: const EdgeInsets.all(16)),
segmentedButtonTheme: SegmentedButtonThemeData(
style: SegmentedButton.styleFrom(
backgroundColor: surface,
foregroundColor: muted,
selectedForegroundColor: ink,
selectedBackgroundColor: soft,
side: BorderSide(color: line),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(rButton)),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
),
),
); );
} }
static TextTheme _textTheme(TextTheme base, Color ink) { static TextTheme _textTheme(TextTheme base, Color ink) {
TextStyle s(TextStyle? t, {FontWeight? w, double? size, double? ls, double? h}) => TextStyle s(TextStyle? t, {FontWeight? w, double? size, double? ls, double? h}) =>
(t ?? const TextStyle()).copyWith( (t ?? const TextStyle()).copyWith(color: ink, fontWeight: w, fontSize: size, letterSpacing: ls, height: h);
color: ink,
fontWeight: w,
fontSize: size,
letterSpacing: ls,
height: h,
);
return base.copyWith( return base.copyWith(
displayLarge: s(base.displayLarge, w: FontWeight.w700, size: 40, ls: -1.2), displayLarge: s(base.displayLarge, w: FontWeight.w600, size: 36, ls: -1.0),
displaySmall: s(base.displaySmall, w: FontWeight.w700, size: 32, ls: -0.8), displaySmall: s(base.displaySmall, w: FontWeight.w600, size: 28, ls: -0.6),
headlineSmall: s(base.headlineSmall, w: FontWeight.w700, size: 22, ls: -0.3), headlineSmall: s(base.headlineSmall, w: FontWeight.w600, size: 20, ls: -0.2),
titleLarge: s(base.titleLarge, w: FontWeight.w700, size: 18, ls: -0.2), titleLarge: s(base.titleLarge, w: FontWeight.w600, size: 17, ls: -0.2),
titleMedium: s(base.titleMedium, w: FontWeight.w600, size: 16), titleMedium: s(base.titleMedium, w: FontWeight.w600, size: 15),
titleSmall: s(base.titleSmall, w: FontWeight.w600, size: 14), titleSmall: s(base.titleSmall, w: FontWeight.w600, size: 14),
bodyLarge: s(base.bodyLarge, w: FontWeight.w400, size: 16, h: 1.45), bodyLarge: s(base.bodyLarge, w: FontWeight.w400, size: 15, h: 1.45),
bodyMedium: s(base.bodyMedium, w: FontWeight.w400, size: 14, h: 1.45), bodyMedium: s(base.bodyMedium, w: FontWeight.w400, size: 14, h: 1.45),
bodySmall: s(base.bodySmall, w: FontWeight.w400, size: 12, h: 1.4), bodySmall: s(base.bodySmall, w: FontWeight.w400, size: 12, h: 1.4),
labelLarge: s(base.labelLarge, w: FontWeight.w600, size: 14), labelLarge: s(base.labelLarge, w: FontWeight.w500, size: 13),
labelSmall: s(base.labelSmall, w: FontWeight.w600, size: 11, ls: 0.1), labelSmall: s(base.labelSmall, w: FontWeight.w500, size: 11),
); );
} }
} }

View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import '../theme/app_theme.dart'; import '../theme/app_theme.dart';
/// Quiet Ink brand mark solid teal tile with a "Y" monogram. /// Soft Neutral brand mark ink monogram, no glow or heavy tile chrome.
class BrandMark extends StatelessWidget { class BrandMark extends StatelessWidget {
const BrandMark({super.key, this.size = 64}); const BrandMark({super.key, this.size = 64});
@ -11,30 +11,22 @@ class BrandMark extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final fill = isDark ? AppTheme.tealBright : AppTheme.teal; final fill = isDark ? AppTheme.inkDark : AppTheme.inkLight;
final fg = isDark ? AppTheme.canvasDark : Colors.white; final fg = isDark ? AppTheme.canvasDark : Colors.white;
final radius = size * 0.28;
return Container( return Container(
width: size, width: size,
height: size, height: size,
decoration: BoxDecoration( decoration: BoxDecoration(
color: fill, color: fill,
borderRadius: BorderRadius.circular(radius), borderRadius: BorderRadius.circular(AppTheme.rPanel),
boxShadow: [
BoxShadow(
color: AppTheme.teal.withValues(alpha: isDark ? 0.25 : 0.18),
blurRadius: size * 0.22,
offset: Offset(0, size * 0.08),
),
],
), ),
alignment: Alignment.center, alignment: Alignment.center,
child: Text( child: Text(
'Y', 'Y',
style: TextStyle( style: TextStyle(
color: fg, color: fg,
fontWeight: FontWeight.w800, fontWeight: FontWeight.w700,
fontSize: size * 0.44, fontSize: size * 0.42,
height: 1, height: 1,
letterSpacing: -0.5, letterSpacing: -0.5,
), ),

View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import '../theme/app_theme.dart'; import '../theme/app_theme.dart';
/// Brand wordmark ink (not rainbow gradient) so Quiet Ink stays calm. /// Brand wordmark ink weight, no rainbow gradient.
class GradientText extends StatelessWidget { class GradientText extends StatelessWidget {
const GradientText(this.text, {super.key, this.style, this.textAlign}); const GradientText(this.text, {super.key, this.style, this.textAlign});
@ -16,7 +16,7 @@ class GradientText extends StatelessWidget {
return Text( return Text(
text, text,
textAlign: textAlign, textAlign: textAlign,
style: (style ?? const TextStyle()).copyWith(color: ink, fontWeight: FontWeight.w800), style: (style ?? const TextStyle()).copyWith(color: ink, fontWeight: FontWeight.w700),
); );
} }
} }

View File

@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
import '../models/models.dart'; import '../models/models.dart';
import '../theme/app_theme.dart'; import '../theme/app_theme.dart';
/// Twin messages get a dashed border + badge (PRD §3.1 ). /// Twin messages get a warm thin border + label (PRD §3.1 ).
class MessageBubble extends StatelessWidget { class MessageBubble extends StatelessWidget {
const MessageBubble({ const MessageBubble({
super.key, super.key,
@ -34,50 +34,55 @@ class MessageBubble extends StatelessWidget {
final Color bg; final Color bg;
final Color fg; final Color fg;
Border? border;
if (retracted) { if (retracted) {
bg = scheme.surfaceContainerHigh; bg = scheme.surfaceContainerHigh;
fg = scheme.onSurfaceVariant; fg = scheme.onSurfaceVariant;
} else if (twin) {
bg = brightness == Brightness.dark
? const Color(0xFF221C14)
: const Color(0xFFFAF6F0);
fg = scheme.onSurface;
border = Border.all(color: accent.withValues(alpha: 0.4), width: 1);
} else if (isMine) { } else if (isMine) {
bg = AppTheme.mineBubble(brightness); bg = AppTheme.mineBubble(brightness);
fg = AppTheme.mineBubbleFg(brightness); fg = AppTheme.mineBubbleFg(brightness);
} else { } else {
bg = AppTheme.peerBubble(brightness); bg = AppTheme.peerBubble(brightness);
fg = scheme.onSurface; fg = scheme.onSurface;
border = Border.all(color: scheme.outlineVariant.withValues(alpha: 0.9));
} }
final radius = BorderRadius.only( final radius = BorderRadius.only(
topLeft: const Radius.circular(18), topLeft: const Radius.circular(AppTheme.rBubble),
topRight: const Radius.circular(18), topRight: const Radius.circular(AppTheme.rBubble),
bottomLeft: Radius.circular(isMine ? 18 : 5), bottomLeft: Radius.circular(isMine ? AppTheme.rBubble : 6),
bottomRight: Radius.circular(isMine ? 5 : 18), bottomRight: Radius.circular(isMine ? 6 : AppTheme.rBubble),
); );
final bubble = Container( final bubble = Container(
constraints: BoxConstraints(maxWidth: MediaQuery.sizeOf(context).width * 0.76), constraints: BoxConstraints(maxWidth: MediaQuery.sizeOf(context).width * 0.76),
padding: const EdgeInsets.fromLTRB(14, 10, 14, 8), padding: const EdgeInsets.fromLTRB(14, 10, 14, 8),
decoration: BoxDecoration(color: bg, borderRadius: radius), decoration: BoxDecoration(
color: bg,
borderRadius: radius,
border: border,
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
if (twin) if (twin)
Padding( Padding(
padding: const EdgeInsets.only(bottom: 6), padding: const EdgeInsets.only(bottom: 4),
child: Row( child: Text(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.auto_awesome, size: 13, color: accent),
const SizedBox(width: 4),
Text(
'와카뷰', '와카뷰',
style: theme.textTheme.labelSmall?.copyWith( style: theme.textTheme.labelSmall?.copyWith(
color: accent, color: accent,
fontWeight: FontWeight.w800, fontWeight: FontWeight.w700,
letterSpacing: 0.2, letterSpacing: 0.2,
), ),
), ),
],
),
), ),
if (retracted) if (retracted)
Row( Row(
@ -109,12 +114,7 @@ class MessageBubble extends StatelessWidget {
crossAxisAlignment: isMine ? CrossAxisAlignment.end : CrossAxisAlignment.start, crossAxisAlignment: isMine ? CrossAxisAlignment.end : CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
twin bubble,
? CustomPaint(
painter: _DashedRRectPainter(color: accent, radius: radius),
child: bubble,
)
: bubble,
if (twin && isMine && !retracted && onRetract != null) if (twin && isMine && !retracted && onRetract != null)
Padding( Padding(
padding: const EdgeInsets.only(top: 2, right: 4, left: 4), padding: const EdgeInsets.only(top: 2, right: 4, left: 4),
@ -143,39 +143,3 @@ class MessageBubble extends StatelessWidget {
); );
} }
} }
class _DashedRRectPainter extends CustomPainter {
_DashedRRectPainter({required this.color, required this.radius});
final Color color;
final BorderRadius radius;
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..style = PaintingStyle.stroke
..strokeWidth = 1.2;
final rrect = radius.toRRect(Rect.fromLTWH(0.7, 0.7, size.width - 1.4, size.height - 1.4));
final path = Path()..addRRect(rrect);
canvas.drawPath(_dashPath(path, dashLength: 5, gapLength: 4), paint);
}
Path _dashPath(Path source, {required double dashLength, required double gapLength}) {
final metrics = source.computeMetrics();
final out = Path();
for (final metric in metrics) {
var distance = 0.0;
while (distance < metric.length) {
final next = distance + dashLength;
out.addPath(metric.extractPath(distance, next.clamp(0, metric.length)), Offset.zero);
distance = next + gapLength;
}
}
return out;
}
@override
bool shouldRepaint(covariant _DashedRRectPainter oldDelegate) =>
oldDelegate.color != color || oldDelegate.radius != radius;
}

View File

@ -34,19 +34,19 @@ class MyUserIdChip extends StatelessWidget {
final brightness = theme.brightness; final brightness = theme.brightness;
return Material( return Material(
color: AppTheme.glassFill(brightness), color: AppTheme.glassFill(brightness),
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(AppTheme.rPanel),
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(AppTheme.rPanel),
onTap: () => _copy(context), onTap: () => _copy(context),
child: Container( child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(AppTheme.rPanel),
border: Border.all(color: AppTheme.glassBorder(brightness)), border: Border.all(color: AppTheme.glassBorder(brightness)),
), ),
child: Row( child: Row(
children: [ children: [
Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.primary), Icon(Icons.badge_outlined, size: 18, color: theme.colorScheme.onSurfaceVariant),
const SizedBox(width: 10), const SizedBox(width: 10),
Expanded( Expanded(
child: Column( child: Column(
@ -61,8 +61,8 @@ class MyUserIdChip extends StatelessWidget {
Text( Text(
'$userId', '$userId',
style: theme.textTheme.titleMedium?.copyWith( style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w700, fontWeight: FontWeight.w600,
letterSpacing: 0.4, letterSpacing: 0.3,
), ),
), ),
], ],
@ -72,7 +72,7 @@ class MyUserIdChip extends StatelessWidget {
'복사', '복사',
style: theme.textTheme.labelSmall?.copyWith( style: theme.textTheme.labelSmall?.copyWith(
color: theme.colorScheme.primary, color: theme.colorScheme.primary,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w600,
), ),
), ),
const SizedBox(width: 4), const SizedBox(width: 4),

View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import '../theme/app_theme.dart'; import '../theme/app_theme.dart';
/// Primary CTA solid teal (API name kept for existing call sites). /// Primary CTA Soft Neutral ink fill (API name kept for call sites).
class PrimaryGradientButton extends StatelessWidget { class PrimaryGradientButton extends StatelessWidget {
const PrimaryGradientButton({ const PrimaryGradientButton({
super.key, super.key,
@ -18,28 +18,34 @@ class PrimaryGradientButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final bg = isDark ? AppTheme.tealBright : AppTheme.teal; final bg = isDark ? AppTheme.inkDark : AppTheme.inkLight;
final fg = isDark ? AppTheme.canvasDark : Colors.white; final fg = isDark ? AppTheme.canvasDark : Colors.white;
final disabled = onPressed == null || loading; final disabled = onPressed == null || loading;
return SizedBox( return SizedBox(
height: 52, height: 48,
width: double.infinity, width: double.infinity,
child: FilledButton( child: FilledButton(
onPressed: disabled && !loading ? null : onPressed, onPressed: disabled && !loading ? null : onPressed,
style: FilledButton.styleFrom( style: FilledButton.styleFrom(
backgroundColor: bg, backgroundColor: bg,
foregroundColor: fg, foregroundColor: fg,
disabledBackgroundColor: bg.withValues(alpha: 0.4), disabledBackgroundColor: bg.withValues(alpha: 0.35),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.rButton),
),
elevation: 0, elevation: 0,
shadowColor: Colors.transparent,
), ),
child: loading child: loading
? SizedBox( ? SizedBox(
height: 20, height: 18,
width: 20, width: 18,
child: CircularProgressIndicator(strokeWidth: 2, color: fg), child: CircularProgressIndicator(strokeWidth: 2, color: fg),
) )
: Text(label, style: TextStyle(color: fg, fontWeight: FontWeight.w700, fontSize: 16)), : Text(
label,
style: TextStyle(color: fg, fontWeight: FontWeight.w600, fontSize: 15),
),
), ),
); );
} }