Skip to content

Commit f77a291

Browse files
renefloorrenefloor
authored
fix(ui): adds composer input state and color updates (#87)
* This adds composer input state and color updates * chore: Update Goldens * formatting --------- Co-authored-by: renefloor <15101411+renefloor@users.noreply.github.com>
1 parent 7f559b9 commit f77a291

15 files changed

+98
-44
lines changed

‎packages/stream_core_flutter/lib/src/components/controls/stream_remove_control.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ class StreamRemoveControl extends StatelessWidget {
2020
decoration: BoxDecoration(
2121
color: colorScheme.backgroundInverse,
2222
shape: BoxShape.circle,
23-
border: Border.all(color: colorScheme.borderInverse, width: 2),
23+
border: Border.all(color: colorScheme.borderOnInverse, width: 2),
2424
),
2525
alignment: Alignment.center,
2626
height: 20,
2727
width: 20,
2828
child: Icon(
2929
context.streamIcons.crossSmall,
30-
color: colorScheme.textOnAccent,
30+
color: colorScheme.textOnInverse,
3131
size: 10,
3232
),
3333
),

‎packages/stream_core_flutter/lib/src/components/message_composer/message_composer_input.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ class StreamMessageComposerInputField extends StatelessWidget {
145145
textCapitalization: textCapitalization,
146146
autofocus: autofocus,
147147
autocorrect: autocorrect,
148+
keyboardAppearance: Theme.of(context).brightness,
148149
style: TextStyle(
149150
color: inputTheme.textColor ?? inputDefaults.textColor,
150151
),

‎packages/stream_core_flutter/lib/src/components/message_composer/message_composer_input_trailing.dart‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import '../../../stream_core_flutter.dart';
66
enum StreamMessageComposerInputTrailingState {
77
send,
88
edit,
9+
command,
910
microphone,
1011
voiceRecordingActive,
1112
}
@@ -28,10 +29,13 @@ class StreamCoreMessageComposerInputTrailing extends StatelessWidget {
2829
Widget build(BuildContext context) {
2930
if (buttonState == StreamMessageComposerInputTrailingState.send ||
3031
buttonState == StreamMessageComposerInputTrailingState.edit ||
32+
buttonState == StreamMessageComposerInputTrailingState.command ||
3133
voiceRecordingCallback == null) {
3234
return StreamButton.icon(
3335
key: _messageComposerInputTrailingSendKey,
34-
icon: buttonState == StreamMessageComposerInputTrailingState.edit
36+
icon:
37+
buttonState == StreamMessageComposerInputTrailingState.edit ||
38+
buttonState == StreamMessageComposerInputTrailingState.command
3539
? context.streamIcons.checkmark2Small
3640
: context.streamIcons.paperPlane,
3741
size: StreamButtonSize.small,

‎packages/stream_core_flutter/lib/src/theme/primitives/tokens/dark/stream_tokens.dart‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,7 @@ class StreamTokens {
424424
static const buttonSecondaryTextOnAccent = Color(0xFFF8F8F8);
425425
static const buttonSecondaryTextOnDark = Color(0xFF000000);
426426
static const buttonSecondaryBorder = Color(0xFF565656);
427-
static const buttonSecondaryBorderOnDark = Color(0xFF1C1C1C);
427+
static const buttonSecondaryBorderOnDark = Color(0xFF000000);
428428
static const buttonDestructiveBg = Color(0xFFFC526A);
429429
static const buttonDestructiveBgLiquidGlass = Color(0xFF000000);
430430
static const buttonDestructiveText = Color(0xFFFC526A);
@@ -444,26 +444,25 @@ class StreamTokens {
444444
static const emojiLg = 32;
445445
static const emojiXl = 48;
446446
static const emoji2xl = 64;
447-
static const backgroundCoreElevation0 = Color(0xFF000000);
448-
static const backgroundCoreElevation1 = Color(0xFF1C1C1C);
449-
static const backgroundCoreElevation2 = Color(0xFF323232);
450-
static const backgroundCoreElevation3 = Color(0xFF565656);
451-
static const backgroundCoreElevation4 = Color(0xFF6A6A6A);
452-
static const backgroundCoreSurface = Color(0xFF323232);
447+
static const backgroundCoreApp = Color(0xFF000000);
448+
static const backgroundCoreSurfaceDefault = Color(0xFF323232);
453449
static const backgroundCoreSurfaceSubtle = Color(0xFF1C1C1C);
454-
static const backgroundCoreSurfaceStrong = Color(0xFF464646);
455450
static const backgroundCoreSurfaceCard = Color(0xFF323232);
456-
static const backgroundCoreInverse = Color(0xFFF8F8F8);
451+
static const backgroundCoreSurfaceStrong = Color(0xFF464646);
452+
static const backgroundCoreInverse = Color(0xFFFFFFFF);
457453
static const backgroundCoreOnAccent = Color(0xFFFFFFFF);
458454
static const backgroundCoreHighlight = Color(0xFF5F1A05);
459455
static const backgroundCoreOverlayLight = Color(0xBF000000);
460456
static const backgroundCoreOverlayDark = Color(0x80000000);
461457
static const backgroundCoreScrim = Color(0xBF000000);
462-
static const backgroundCoreApp = Color(0xFF000000);
463458
static const backgroundUtilityHover = Color(0x26FFFFFF);
464459
static const backgroundUtilityPressed = Color(0x33FFFFFF);
465460
static const backgroundUtilitySelected = Color(0x40FFFFFF);
466461
static const backgroundUtilityDisabled = Color(0xFF323232);
462+
static const backgroundElevationElevation0 = Color(0xFF000000);
463+
static const backgroundElevationElevation1 = Color(0xFF1C1C1C);
464+
static const backgroundElevationElevation2 = Color(0xFF323232);
465+
static const backgroundElevationElevation3 = Color(0xFF565656);
467466
static const borderUtilityFocus = Color(0x4078A8FF);
468467
static const borderUtilityError = Color(0xFFFC526A);
469468
static const borderUtilityWarning = Color(0xFFFA922B);
@@ -474,13 +473,16 @@ class StreamTokens {
474473
static const borderUtilityActive = Color(0xFF4586FF);
475474
static const borderUtilityHover = Color(0x1AFFFFFF);
476475
static const borderUtilityPressed = Color(0x33FFFFFF);
476+
static const borderUtilityDisabledOnSurface = Color(0xFF464646);
477477
static const borderCoreDefault = Color(0xFF565656);
478478
static const borderCoreSubtle = Color(0xFF323232);
479-
static const borderCoreStrong = Color(0xFF8F8F8F);
480-
static const borderCoreInverse = Color(0xFF1C1C1C);
479+
static const borderCoreStrong = Color(0xFF6A6A6A);
480+
static const borderCoreInverse = Color(0xFF000000);
481481
static const borderCoreOnAccent = Color(0xFFFFFFFF);
482482
static const borderCoreOpacitySubtle = Color(0x33FFFFFF);
483483
static const borderCoreOpacityStrong = Color(0x40FFFFFF);
484+
static const borderCoreOnInverse = Color(0xFF000000);
485+
static const borderCoreOnSurface = Color(0xFF6A6A6A);
484486
static const chatBgIncoming = Color(0xFF323232);
485487
static const chatBgOutgoing = Color(0xFF142F63);
486488
static const chatBgAttachmentIncoming = Color(0xFF464646);
@@ -497,16 +499,16 @@ class StreamTokens {
497499
static const chatTextSystem = Color(0xFFD8D8D8);
498500
static const chatBorderIncoming = Color(0xFF323232);
499501
static const chatBorderOutgoing = Color(0xFF142F63);
500-
static const chatBorderOnChatIncoming = Color(0xFF8F8F8F);
502+
static const chatBorderOnChatIncoming = Color(0xFF6A6A6A);
501503
static const chatBorderOnChatOutgoing = Color(0xFF005FFF);
502-
static const chatReplyIndicatorIncoming = Color(0xFF6A6A6A);
503-
static const chatReplyIndicatorOutgoing = Color(0xFFC3D9FF);
504+
static const chatReplyIndicatorIncoming = Color(0xFF8F8F8F);
505+
static const chatReplyIndicatorOutgoing = Color(0xFF4586FF);
504506
static const chatWaveformBar = Color(0x40FFFFFF);
505507
static const chatWaveformBarPlaying = Color(0xFF4586FF);
506508
static const chatPollProgressTrackIncoming = Color(0xFF464646);
507509
static const chatPollProgressTrackOutgoing = Color(0xFF1B53BD);
508510
static const chatPollProgressFillIncoming = Color(0xFFABABAB);
509-
static const chatPollProgressFillOutgoing = Color(0xFFFFFFFF);
511+
static const chatPollProgressFillOutgoing = Color(0xFF4586FF);
510512
static const chatThreadConnectorIncoming = Color(0xFF565656);
511513
static const chatThreadConnectorOutgoing = Color(0xFF19418D);
512514
static const inputTextDefault = Color(0xFFF8F8F8);
@@ -520,7 +522,7 @@ class StreamTokens {
520522
static const reactionText = Color(0xFFF8F8F8);
521523
static const reactionEmoji = Color(0xFFF8F8F8);
522524
static const presenceBgOnline = Color(0xFF00C384);
523-
static const presenceBorder = Color(0xFF1C1C1C);
525+
static const presenceBorder = Color(0xFF000000);
524526
static const presenceBgOffline = Color(0xFFABABAB);
525527
static const systemText = Color(0xFFFFFFFF);
526528
static const systemBgBlur = Color(0x03000000);
@@ -530,28 +532,30 @@ class StreamTokens {
530532
static const badgeBgPrimary = Color(0xFF4586FF);
531533
static const badgeBgNeutral = Color(0xFFABABAB);
532534
static const badgeBgError = Color(0xFFFC526A);
535+
static const badgeBgInverse = Color(0xFFFFFFFF);
536+
static const badgeBgOverlay = Color(0xBF000000);
533537
static const badgeText = Color(0xFFF8F8F8);
538+
static const badgeTextOnInverse = Color(0xFF000000);
534539
static const badgeTextOnAccent = Color(0xFFFFFFFF);
535-
static const badgeBorder = Color(0xFF1C1C1C);
536-
static const badgeBgOverlay = Color(0xBF000000);
537-
static const controlRemoveControlBg = Color(0xFFF8F8F8);
540+
static const badgeBorder = Color(0xFF000000);
541+
static const controlRemoveControlBg = Color(0xFFFFFFFF);
538542
static const controlRemoveControlIcon = Color(0xFF000000);
539-
static const controlRemoveControlBorder = Color(0xFF1C1C1C);
543+
static const controlRemoveControlBorder = Color(0xFF000000);
540544
static const controlProgressBarFill = Color(0xFFABABAB);
541545
static const controlProgressBarTrack = Color(0xFF464646);
542546
static const controlToggleSwitchBg = Color(0xFFABABAB);
543547
static const controlToggleSwitchBgSelected = Color(0xFF4586FF);
544548
static const controlToggleSwitchBgDisabled = Color(0xFF323232);
545-
static const controlToggleSwitchKnob = Color(0xFF6A6A6A);
549+
static const controlToggleSwitchKnob = Color(0xFFFFFFFF);
546550
static const controlPlaybackToggleText = Color(0xFFF8F8F8);
547551
static const controlPlaybackToggleBorder = Color(0xFF565656);
548552
static const controlCheckboxBg = Color(0x00FFFFFF);
549553
static const controlCheckboxBorder = Color(0xFF565656);
550554
static const controlCheckboxBgSelected = Color(0xFF4586FF);
551555
static const controlCheckboxIcon = Color(0xFFFFFFFF);
552-
static const controlPlayButtonBg = Color(0xFF000000);
556+
static const controlPlayButtonBg = Color(0xBF000000);
553557
static const controlPlayButtonIcon = Color(0xFFFFFFFF);
554-
static const controlPlaybackThumbBgDefault = Color(0xFFF8F8F8);
558+
static const controlPlaybackThumbBgDefault = Color(0xFFFFFFFF);
555559
static const controlPlaybackThumbBorderActive = Color(0xFFFFFFFF);
556560
static const controlPlaybackThumbBgActive = Color(0xFF4586FF);
557561
static const controlPlaybackThumbBorderDefault = Color(0x40FFFFFF);
@@ -563,10 +567,12 @@ class StreamTokens {
563567
static const controlRadioCheckBorder = Color(0xFF565656);
564568
static const controlRadioCheckBgSelected = Color(0xFF4586FF);
565569
static const controlRadioCheckIcon = Color(0xFFFFFFFF);
570+
static const controlChipBorder = Color(0xFF565656);
571+
static const controlChipText = Color(0xFFF8F8F8);
566572
static const textPrimary = Color(0xFFF8F8F8);
567573
static const textSecondary = Color(0xFFD8D8D8);
568574
static const textTertiary = Color(0xFFABABAB);
569-
static const textInverse = Color(0xFF000000);
575+
static const textOnInverse = Color(0xFF000000);
570576
static const textOnAccent = Color(0xFFFFFFFF);
571577
static const textDisabled = Color(0xFF6A6A6A);
572578
static const textLink = Color(0xFFA5C5FF);
@@ -586,7 +592,7 @@ class StreamTokens {
586592
static const avatarTextPlaceholder = Color(0xFFABABAB);
587593
static const avatarPresenceBgOnline = Color(0xFF00C384);
588594
static const avatarPresenceBgOffline = Color(0xFFABABAB);
589-
static const avatarPresenceBorder = Color(0xFF1C1C1C);
595+
static const avatarPresenceBorder = Color(0xFF000000);
590596
static const accentPrimary = Color(0xFF4586FF);
591597
static const accentSuccess = Color(0xFF00C384);
592598
static const accentWarning = Color(0xFFFA922B);
@@ -603,6 +609,8 @@ class StreamTokens {
603609
static const brand700 = Color(0xFFC3D9FF);
604610
static const brand800 = Color(0xFFE3EDFF);
605611
static const brand900 = Color(0xFFF3F7FF);
612+
static const skeletonLoadingBase = Color(0x00FFFFFF);
613+
static const skeletonLoadingHighlight = Color(0xBF000000);
606614
static const chrome0 = Color(0xFF000000);
607615
static const chrome50 = Color(0xFF1C1C1C);
608616
static const chrome100 = Color(0xFF323232);

‎packages/stream_core_flutter/lib/src/theme/primitives/tokens/light/stream_tokens.dart‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -444,26 +444,25 @@ class StreamTokens {
444444
static const emojiLg = 32;
445445
static const emojiXl = 48;
446446
static const emoji2xl = 64;
447-
static const backgroundCoreElevation0 = Color(0xFFFFFFFF);
448-
static const backgroundCoreElevation1 = Color(0xFFFFFFFF);
449-
static const backgroundCoreElevation2 = Color(0xFFFFFFFF);
450-
static const backgroundCoreElevation3 = Color(0xFFFFFFFF);
451-
static const backgroundCoreElevation4 = Color(0xFFFFFFFF);
452-
static const backgroundCoreSurface = Color(0xFFEBEEF1);
447+
static const backgroundCoreApp = Color(0xFFFFFFFF);
448+
static const backgroundCoreSurfaceDefault = Color(0xFFEBEEF1);
453449
static const backgroundCoreSurfaceSubtle = Color(0xFFF6F8FA);
454-
static const backgroundCoreSurfaceStrong = Color(0xFFD5DBE1);
455450
static const backgroundCoreSurfaceCard = Color(0xFFF6F8FA);
456-
static const backgroundCoreInverse = Color(0xFF1A1B25);
451+
static const backgroundCoreSurfaceStrong = Color(0xFFD5DBE1);
452+
static const backgroundCoreInverse = Color(0xFF000000);
457453
static const backgroundCoreOnAccent = Color(0xFFFFFFFF);
458454
static const backgroundCoreHighlight = Color(0xFFFEF9DA);
459455
static const backgroundCoreOverlayLight = Color(0xBFFFFFFF);
460456
static const backgroundCoreOverlayDark = Color(0x401A1B25);
461457
static const backgroundCoreScrim = Color(0x801A1B25);
462-
static const backgroundCoreApp = Color(0xFFFFFFFF);
463458
static const backgroundUtilityHover = Color(0x1A1A1B25);
464459
static const backgroundUtilityPressed = Color(0x261A1B25);
465460
static const backgroundUtilitySelected = Color(0x331A1B25);
466461
static const backgroundUtilityDisabled = Color(0xFFEBEEF1);
462+
static const backgroundElevationElevation0 = Color(0xFFFFFFFF);
463+
static const backgroundElevationElevation1 = Color(0xFFFFFFFF);
464+
static const backgroundElevationElevation2 = Color(0xFFFFFFFF);
465+
static const backgroundElevationElevation3 = Color(0xFFFFFFFF);
467466
static const borderUtilityHover = Color(0x1A1A1B25);
468467
static const borderUtilityPressed = Color(0x331A1B25);
469468
static const borderUtilitySelected = Color(0x261A1B25);
@@ -473,14 +472,16 @@ class StreamTokens {
473472
static const borderUtilityWarning = Color(0xFFF26D10);
474473
static const borderUtilityError = Color(0xFFD90D10);
475474
static const borderUtilityDisabled = Color(0xFFEBEEF1);
475+
static const borderUtilityDisabledOnSurface = Color(0xFFD5DBE1);
476476
static const borderCoreDefault = Color(0xFFD5DBE1);
477477
static const borderCoreSubtle = Color(0xFFEBEEF1);
478478
static const borderCoreStrong = Color(0xFFA3ACBA);
479479
static const borderCoreInverse = Color(0xFFFFFFFF);
480480
static const borderCoreOnAccent = Color(0xFFFFFFFF);
481-
static const borderCoreOnSurface = Color(0xFFC0C8D2);
481+
static const borderCoreOnSurface = Color(0xFFA3ACBA);
482482
static const borderCoreOpacitySubtle = Color(0x1A1A1B25);
483483
static const borderCoreOpacityStrong = Color(0x401A1B25);
484+
static const borderCoreOnInverse = Color(0xFFFFFFFF);
484485
static const chatBgIncoming = Color(0xFFEBEEF1);
485486
static const chatBgOutgoing = Color(0xFFE3EDFF);
486487
static const chatBgAttachmentIncoming = Color(0xFFD5DBE1);
@@ -530,11 +531,13 @@ class StreamTokens {
530531
static const badgeBgPrimary = Color(0xFF005FFF);
531532
static const badgeBgNeutral = Color(0xFF687385);
532533
static const badgeBgError = Color(0xFFD90D10);
534+
static const badgeBgInverse = Color(0xFF000000);
533535
static const badgeBgOverlay = Color(0xBF000000);
534536
static const badgeText = Color(0xFF1A1B25);
537+
static const badgeTextOnInverse = Color(0xFFFFFFFF);
535538
static const badgeTextOnAccent = Color(0xFFFFFFFF);
536539
static const badgeBorder = Color(0xFFFFFFFF);
537-
static const controlRemoveControlBg = Color(0xFF1A1B25);
540+
static const controlRemoveControlBg = Color(0xFF000000);
538541
static const controlRemoveControlIcon = Color(0xFFFFFFFF);
539542
static const controlRemoveControlBorder = Color(0xFFFFFFFF);
540543
static const controlProgressBarFill = Color(0xFF687385);
@@ -549,7 +552,7 @@ class StreamTokens {
549552
static const controlCheckboxBorder = Color(0xFFD5DBE1);
550553
static const controlCheckboxBgSelected = Color(0xFF005FFF);
551554
static const controlCheckboxIcon = Color(0xFFFFFFFF);
552-
static const controlPlayButtonBg = Color(0xFF000000);
555+
static const controlPlayButtonBg = Color(0xBF000000);
553556
static const controlPlayButtonIcon = Color(0xFFFFFFFF);
554557
static const controlPlaybackThumbBgDefault = Color(0xFFFFFFFF);
555558
static const controlPlaybackThumbBorderDefault = Color(0x401A1B25);
@@ -563,10 +566,12 @@ class StreamTokens {
563566
static const controlRadioCheckBorder = Color(0xFFD5DBE1);
564567
static const controlRadioCheckBgSelected = Color(0xFF005FFF);
565568
static const controlRadioCheckIcon = Color(0xFFFFFFFF);
569+
static const controlChipBorder = Color(0xFFD5DBE1);
570+
static const controlChipText = Color(0xFF1A1B25);
566571
static const textPrimary = Color(0xFF1A1B25);
567572
static const textSecondary = Color(0xFF414552);
568573
static const textTertiary = Color(0xFF687385);
569-
static const textInverse = Color(0xFFFFFFFF);
574+
static const textOnInverse = Color(0xFFFFFFFF);
570575
static const textOnAccent = Color(0xFFFFFFFF);
571576
static const textDisabled = Color(0xFFA3ACBA);
572577
static const textLink = Color(0xFF005FFF);
@@ -603,6 +608,8 @@ class StreamTokens {
603608
static const brand700 = Color(0xFF19418D);
604609
static const brand800 = Color(0xFF142F63);
605610
static const brand900 = Color(0xFF091A3B);
611+
static const skeletonLoadingBase = Color(0x00FFFFFF);
612+
static const skeletonLoadingHighlight = Color(0xBFFFFFFF);
606613
static const chrome0 = Color(0xFFFFFFFF);
607614
static const chrome50 = Color(0xFFF6F8FA);
608615
static const chrome100 = Color(0xFFEBEEF1);

0 commit comments

Comments
 (0)