diff --git a/apps/design_system_gallery/lib/app/gallery_app.directories.g.dart b/apps/design_system_gallery/lib/app/gallery_app.directories.g.dart index d6494aa..680f261 100644 --- a/apps/design_system_gallery/lib/app/gallery_app.directories.g.dart +++ b/apps/design_system_gallery/lib/app/gallery_app.directories.g.dart @@ -55,7 +55,7 @@ import 'package:design_system_gallery/components/message_composer/message_compos import 'package:design_system_gallery/components/message_composer/message_composer_attachment_reply.dart' as _design_system_gallery_components_message_composer_message_composer_attachment_reply; import 'package:design_system_gallery/components/reaction/stream_reactions.dart' - as _design_system_gallery_components_reaction_stream_reaction; + as _design_system_gallery_components_reaction_stream_reactions; import 'package:design_system_gallery/components/tiles/stream_list_tile.dart' as _design_system_gallery_components_tiles_stream_list_tile; import 'package:design_system_gallery/primitives/colors.dart' @@ -579,13 +579,13 @@ final directories = <_widgetbook.WidgetbookNode>[ _widgetbook.WidgetbookUseCase( name: 'Playground', builder: - _design_system_gallery_components_reaction_stream_reaction + _design_system_gallery_components_reaction_stream_reactions .buildStreamReactionsPlayground, ), _widgetbook.WidgetbookUseCase( name: 'Showcase', builder: - _design_system_gallery_components_reaction_stream_reaction + _design_system_gallery_components_reaction_stream_reactions .buildStreamReactionsShowcase, ), ], diff --git a/apps/design_system_gallery/lib/config/theme_configuration.dart b/apps/design_system_gallery/lib/config/theme_configuration.dart index 249fc69..6ecf421 100644 --- a/apps/design_system_gallery/lib/config/theme_configuration.dart +++ b/apps/design_system_gallery/lib/config/theme_configuration.dart @@ -51,8 +51,19 @@ class ThemeConfiguration extends ChangeNotifier { Color? _backgroundSurface; Color? _backgroundSurfaceSubtle; Color? _backgroundSurfaceStrong; - Color? _backgroundOverlay; + Color? _backgroundSurfaceCard; + Color? _backgroundOnAccent; + Color? _backgroundHighlight; + Color? _backgroundScrim; + Color? _backgroundOverlayLight; + Color? _backgroundOverlayDark; Color? _backgroundDisabled; + Color? _backgroundInverse; + Color? _backgroundElevation0; + Color? _backgroundElevation1; + Color? _backgroundElevation2; + Color? _backgroundElevation3; + Color? _backgroundElevation4; // ========================================================================= // Border Colors - Core @@ -60,16 +71,20 @@ class ThemeConfiguration extends ChangeNotifier { Color? _borderDefault; Color? _borderSubtle; Color? _borderStrong; - Color? _borderOnDark; + Color? _borderInverse; Color? _borderOnAccent; - Color? _borderOpacity10; - Color? _borderOpacity25; + Color? _borderOnSurface; + Color? _borderOpacitySubtle; + Color? _borderOpacityStrong; // ========================================================================= // Border Colors - Utility // ========================================================================= Color? _borderFocus; Color? _borderDisabled; + Color? _borderHover; + Color? _borderPressed; + Color? _borderActive; Color? _borderError; Color? _borderWarning; Color? _borderSuccess; @@ -100,6 +115,11 @@ class ThemeConfiguration extends ChangeNotifier { // ========================================================================= Color? _brandPrimaryColor; + // ========================================================================= + // Chrome Color + // ========================================================================= + Color? _chromePrimaryColor; + // ========================================================================= // Getters - Accent // ========================================================================= @@ -127,8 +147,19 @@ class ThemeConfiguration extends ChangeNotifier { Color get backgroundSurface => _backgroundSurface ?? _themeData.colorScheme.backgroundSurface; Color get backgroundSurfaceSubtle => _backgroundSurfaceSubtle ?? _themeData.colorScheme.backgroundSurfaceSubtle; Color get backgroundSurfaceStrong => _backgroundSurfaceStrong ?? _themeData.colorScheme.backgroundSurfaceStrong; - Color get backgroundOverlay => _backgroundOverlay ?? _themeData.colorScheme.backgroundOverlay; + Color get backgroundSurfaceCard => _backgroundSurfaceCard ?? _themeData.colorScheme.backgroundSurfaceCard; + Color get backgroundOnAccent => _backgroundOnAccent ?? _themeData.colorScheme.backgroundOnAccent; + Color get backgroundHighlight => _backgroundHighlight ?? _themeData.colorScheme.backgroundHighlight; + Color get backgroundScrim => _backgroundScrim ?? _themeData.colorScheme.backgroundScrim; + Color get backgroundOverlayLight => _backgroundOverlayLight ?? _themeData.colorScheme.backgroundOverlayLight; + Color get backgroundOverlayDark => _backgroundOverlayDark ?? _themeData.colorScheme.backgroundOverlayDark; Color get backgroundDisabled => _backgroundDisabled ?? _themeData.colorScheme.backgroundDisabled; + Color get backgroundInverse => _backgroundInverse ?? _themeData.colorScheme.backgroundInverse; + Color get backgroundElevation0 => _backgroundElevation0 ?? _themeData.colorScheme.backgroundElevation0; + Color get backgroundElevation1 => _backgroundElevation1 ?? _themeData.colorScheme.backgroundElevation1; + Color get backgroundElevation2 => _backgroundElevation2 ?? _themeData.colorScheme.backgroundElevation2; + Color get backgroundElevation3 => _backgroundElevation3 ?? _themeData.colorScheme.backgroundElevation3; + Color get backgroundElevation4 => _backgroundElevation4 ?? _themeData.colorScheme.backgroundElevation4; // ========================================================================= // Getters - Border Core @@ -136,16 +167,20 @@ class ThemeConfiguration extends ChangeNotifier { Color get borderDefault => _borderDefault ?? _themeData.colorScheme.borderDefault; Color get borderSubtle => _borderSubtle ?? _themeData.colorScheme.borderSubtle; Color get borderStrong => _borderStrong ?? _themeData.colorScheme.borderStrong; - Color get borderOnDark => _borderOnDark ?? _themeData.colorScheme.borderOnDark; + Color get borderInverse => _borderInverse ?? _themeData.colorScheme.borderInverse; Color get borderOnAccent => _borderOnAccent ?? _themeData.colorScheme.borderOnAccent; - Color get borderOpacity10 => _borderOpacity10 ?? _themeData.colorScheme.borderOpacity10; - Color get borderOpacity25 => _borderOpacity25 ?? _themeData.colorScheme.borderOpacity25; + Color get borderOnSurface => _borderOnSurface ?? _themeData.colorScheme.borderOnSurface; + Color get borderOpacitySubtle => _borderOpacitySubtle ?? _themeData.colorScheme.borderOpacitySubtle; + Color get borderOpacityStrong => _borderOpacityStrong ?? _themeData.colorScheme.borderOpacityStrong; // ========================================================================= // Getters - Border Utility // ========================================================================= Color get borderFocus => _borderFocus ?? _themeData.colorScheme.borderFocus; Color get borderDisabled => _borderDisabled ?? _themeData.colorScheme.borderDisabled; + Color get borderHover => _borderHover ?? _themeData.colorScheme.borderHover; + Color get borderPressed => _borderPressed ?? _themeData.colorScheme.borderPressed; + Color get borderActive => _borderActive ?? _themeData.colorScheme.borderActive; Color get borderError => _borderError ?? _themeData.colorScheme.borderError; Color get borderWarning => _borderWarning ?? _themeData.colorScheme.borderWarning; Color get borderSuccess => _borderSuccess ?? _themeData.colorScheme.borderSuccess; @@ -176,6 +211,11 @@ class ThemeConfiguration extends ChangeNotifier { // ========================================================================= Color get brandPrimaryColor => _brandPrimaryColor ?? _themeData.colorScheme.brand.shade500; + // ========================================================================= + // Getters - Chrome + // ========================================================================= + Color get chromePrimaryColor => _chromePrimaryColor ?? _themeData.colorScheme.chrome.shade500; + // ========================================================================= // Setters // ========================================================================= @@ -208,21 +248,36 @@ class ThemeConfiguration extends ChangeNotifier { void setBackgroundSurface(Color color) => _update(() => _backgroundSurface = color); void setBackgroundSurfaceSubtle(Color color) => _update(() => _backgroundSurfaceSubtle = color); void setBackgroundSurfaceStrong(Color color) => _update(() => _backgroundSurfaceStrong = color); - void setBackgroundOverlay(Color color) => _update(() => _backgroundOverlay = color); + void setBackgroundSurfaceCard(Color color) => _update(() => _backgroundSurfaceCard = color); + void setBackgroundOnAccent(Color color) => _update(() => _backgroundOnAccent = color); + void setBackgroundHighlight(Color color) => _update(() => _backgroundHighlight = color); + void setBackgroundScrim(Color color) => _update(() => _backgroundScrim = color); + void setBackgroundOverlayLight(Color color) => _update(() => _backgroundOverlayLight = color); + void setBackgroundOverlayDark(Color color) => _update(() => _backgroundOverlayDark = color); void setBackgroundDisabled(Color color) => _update(() => _backgroundDisabled = color); + void setBackgroundInverse(Color color) => _update(() => _backgroundInverse = color); + void setBackgroundElevation0(Color color) => _update(() => _backgroundElevation0 = color); + void setBackgroundElevation1(Color color) => _update(() => _backgroundElevation1 = color); + void setBackgroundElevation2(Color color) => _update(() => _backgroundElevation2 = color); + void setBackgroundElevation3(Color color) => _update(() => _backgroundElevation3 = color); + void setBackgroundElevation4(Color color) => _update(() => _backgroundElevation4 = color); // Border Core void setBorderDefault(Color color) => _update(() => _borderDefault = color); void setBorderSubtle(Color color) => _update(() => _borderSubtle = color); void setBorderStrong(Color color) => _update(() => _borderStrong = color); - void setBorderOnDark(Color color) => _update(() => _borderOnDark = color); + void setBorderInverse(Color color) => _update(() => _borderInverse = color); void setBorderOnAccent(Color color) => _update(() => _borderOnAccent = color); - void setBorderOpacity10(Color color) => _update(() => _borderOpacity10 = color); - void setBorderOpacity25(Color color) => _update(() => _borderOpacity25 = color); + void setBorderOnSurface(Color color) => _update(() => _borderOnSurface = color); + void setBorderOpacitySubtle(Color color) => _update(() => _borderOpacitySubtle = color); + void setBorderOpacityStrong(Color color) => _update(() => _borderOpacityStrong = color); // Border Utility void setBorderFocus(Color color) => _update(() => _borderFocus = color); void setBorderDisabled(Color color) => _update(() => _borderDisabled = color); + void setBorderHover(Color color) => _update(() => _borderHover = color); + void setBorderPressed(Color color) => _update(() => _borderPressed = color); + void setBorderActive(Color color) => _update(() => _borderActive = color); void setBorderError(Color color) => _update(() => _borderError = color); void setBorderWarning(Color color) => _update(() => _borderWarning = color); void setBorderSuccess(Color color) => _update(() => _borderSuccess = color); @@ -245,6 +300,9 @@ class ThemeConfiguration extends ChangeNotifier { // Brand void setBrandPrimaryColor(Color color) => _update(() => _brandPrimaryColor = color); + // Chrome + void setChromePrimaryColor(Color color) => _update(() => _chromePrimaryColor = color); + void updateAvatarPaletteAt(int index, StreamAvatarColorPair pair) { final current = List.from(avatarPalette); if (index < current.length) { @@ -294,19 +352,34 @@ class ThemeConfiguration extends ChangeNotifier { _backgroundSurface = null; _backgroundSurfaceSubtle = null; _backgroundSurfaceStrong = null; - _backgroundOverlay = null; + _backgroundSurfaceCard = null; + _backgroundOnAccent = null; + _backgroundHighlight = null; + _backgroundScrim = null; + _backgroundOverlayLight = null; + _backgroundOverlayDark = null; _backgroundDisabled = null; + _backgroundInverse = null; + _backgroundElevation0 = null; + _backgroundElevation1 = null; + _backgroundElevation2 = null; + _backgroundElevation3 = null; + _backgroundElevation4 = null; // Border Core _borderDefault = null; _borderSubtle = null; _borderStrong = null; - _borderOnDark = null; + _borderInverse = null; _borderOnAccent = null; - _borderOpacity10 = null; - _borderOpacity25 = null; + _borderOnSurface = null; + _borderOpacitySubtle = null; + _borderOpacityStrong = null; // Border Utility _borderFocus = null; _borderDisabled = null; + _borderHover = null; + _borderPressed = null; + _borderActive = null; _borderError = null; _borderWarning = null; _borderSuccess = null; @@ -324,6 +397,8 @@ class ThemeConfiguration extends ChangeNotifier { _avatarPalette = null; // Brand _brandPrimaryColor = null; + // Chrome + _chromePrimaryColor = null; _rebuildTheme(); notifyListeners(); @@ -331,70 +406,128 @@ class ThemeConfiguration extends ChangeNotifier { void _rebuildTheme() { final baseColorScheme = _brightness == Brightness.dark ? StreamColorScheme.dark() : StreamColorScheme.light(); + final isDark = _brightness == Brightness.dark; // Compute effective brand swatch (if brand primary is customized) final effectiveBrand = _brandPrimaryColor != null ? StreamColorSwatch.fromColor(_brandPrimaryColor!, brightness: _brightness) : null; - // Derived from brand: accentPrimary defaults to brand.shade500 + // Compute effective chrome swatch (if chrome primary is customized) + final effectiveChrome = _chromePrimaryColor != null + ? StreamColorSwatch.fromColor(_chromePrimaryColor!, brightness: _brightness) + : null; + + // Derived from brand: accentPrimary defaults to brand.shade500 (light) / shade400 (dark) final effectiveAccentPrimary = _accentPrimary ?? _brandPrimaryColor; - // Derived from brand: borderFocus defaults to brand.shade300 - final effectiveBorderFocus = _borderFocus ?? effectiveBrand?.shade300; + // Derived from brand: borderFocus defaults to brand.shade150 + final effectiveBorderFocus = _borderFocus ?? effectiveBrand?.shade150; // Derived from brand: stateFocused defaults to brand.shade100 final effectiveStateFocused = _stateFocused ?? effectiveBrand?.shade100; - // Derived from accentPrimary: textLink and borderSelected + // Derived from accentPrimary: textLink and borderActive final effectiveTextLink = _textLink ?? effectiveAccentPrimary; - final effectiveBorderSelected = _borderSelected ?? effectiveAccentPrimary; + final effectiveBorderActive = _borderActive ?? effectiveAccentPrimary; // Derived from other accents: border utility colors final effectiveBorderError = _borderError ?? _accentError; final effectiveBorderWarning = _borderWarning ?? _accentWarning; final effectiveBorderSuccess = _borderSuccess ?? _accentSuccess; + // Derived from chrome: all chrome-dependent semantic colors. + // When chrome is customized via copyWith, the base scheme still holds values + // derived from the default chrome, so we must re-derive all of them explicitly. + // Extract subscript lookups to avoid Dart parsing ambiguity with ?[] inside ternaries. + final chromeShade0 = effectiveChrome?[0]; + final chromeShade1000 = effectiveChrome?[1000]; + + final effectiveAccentNeutral = _accentNeutral ?? effectiveChrome?.shade500; + final effectiveTextPrimary = _textPrimary ?? effectiveChrome?.shade900; + final effectiveTextSecondary = _textSecondary ?? effectiveChrome?.shade700; + final effectiveTextTertiary = _textTertiary ?? effectiveChrome?.shade500; + final effectiveTextDisabled = _textDisabled ?? effectiveChrome?.shade300; + final effectiveTextInverse = _textInverse ?? (isDark ? chromeShade1000 : chromeShade0); + final effectiveTextOnAccent = _textOnAccent ?? chromeShade0; + final effectiveBackgroundSurface = _backgroundSurface ?? effectiveChrome?.shade100; + final effectiveBackgroundSurfaceSubtle = _backgroundSurfaceSubtle ?? effectiveChrome?.shade50; + final effectiveBackgroundSurfaceStrong = _backgroundSurfaceStrong ?? effectiveChrome?.shade150; + final effectiveBackgroundSurfaceCard = + _backgroundSurfaceCard ?? (isDark ? effectiveChrome?.shade100 : effectiveChrome?.shade50); + final effectiveBackgroundOnAccent = _backgroundOnAccent ?? chromeShade0; + final effectiveBackgroundDisabled = _backgroundDisabled ?? effectiveChrome?.shade100; + final effectiveBackgroundInverse = _backgroundInverse ?? effectiveChrome?.shade900; + final effectiveBackgroundElevation0 = _backgroundElevation0 ?? (isDark ? chromeShade1000 : chromeShade0); + final effectiveBackgroundElevation1 = _backgroundElevation1 ?? (isDark ? effectiveChrome?.shade50 : chromeShade0); + final effectiveBackgroundElevation2 = _backgroundElevation2 ?? (isDark ? effectiveChrome?.shade100 : chromeShade0); + final effectiveBackgroundElevation3 = _backgroundElevation3 ?? (isDark ? effectiveChrome?.shade200 : chromeShade0); + final effectiveBackgroundElevation4 = _backgroundElevation4 ?? (isDark ? effectiveChrome?.shade300 : chromeShade0); + // backgroundApp derives from backgroundElevation0 in both themes + final effectiveBackgroundApp = _backgroundApp ?? effectiveBackgroundElevation0; + // In dark, borderInverse uses a fixed token (not chrome); in light it uses chrome[0] + final effectiveBorderInverse = _borderInverse ?? (isDark ? null : chromeShade0); + final effectiveBorderOnAccent = _borderOnAccent ?? chromeShade0; + final effectiveBorderOnSurface = _borderOnSurface ?? effectiveChrome?.shade200; + final effectiveBorderDisabled = _borderDisabled ?? effectiveChrome?.shade100; + final colorScheme = baseColorScheme.copyWith( // Brand brand: effectiveBrand, - // Accent - brand primary affects accentPrimary + // Chrome + chrome: effectiveChrome, + // Accent accentPrimary: effectiveAccentPrimary, accentSuccess: _accentSuccess, accentWarning: _accentWarning, accentError: _accentError, - accentNeutral: _accentNeutral, - // Text - textLink derived from accentPrimary - textPrimary: _textPrimary, - textSecondary: _textSecondary, - textTertiary: _textTertiary, - textDisabled: _textDisabled, - textInverse: _textInverse, + accentNeutral: effectiveAccentNeutral, + // Text + textPrimary: effectiveTextPrimary, + textSecondary: effectiveTextSecondary, + textTertiary: effectiveTextTertiary, + textDisabled: effectiveTextDisabled, + textInverse: effectiveTextInverse, textLink: effectiveTextLink, - textOnAccent: _textOnAccent, + textOnAccent: effectiveTextOnAccent, // Background - backgroundApp: _backgroundApp, - backgroundSurface: _backgroundSurface, - backgroundSurfaceSubtle: _backgroundSurfaceSubtle, - backgroundSurfaceStrong: _backgroundSurfaceStrong, - backgroundOverlay: _backgroundOverlay, - backgroundDisabled: _backgroundDisabled, + backgroundApp: effectiveBackgroundApp, + backgroundSurface: effectiveBackgroundSurface, + backgroundSurfaceSubtle: effectiveBackgroundSurfaceSubtle, + backgroundSurfaceStrong: effectiveBackgroundSurfaceStrong, + backgroundSurfaceCard: effectiveBackgroundSurfaceCard, + backgroundOnAccent: effectiveBackgroundOnAccent, + backgroundHighlight: _backgroundHighlight, + backgroundScrim: _backgroundScrim, + backgroundOverlayLight: _backgroundOverlayLight, + backgroundOverlayDark: _backgroundOverlayDark, + backgroundDisabled: effectiveBackgroundDisabled, + backgroundInverse: effectiveBackgroundInverse, + backgroundElevation0: effectiveBackgroundElevation0, + backgroundElevation1: effectiveBackgroundElevation1, + backgroundElevation2: effectiveBackgroundElevation2, + backgroundElevation3: effectiveBackgroundElevation3, + backgroundElevation4: effectiveBackgroundElevation4, // Border Core borderDefault: _borderDefault, borderSubtle: _borderSubtle, borderStrong: _borderStrong, - borderOnDark: _borderOnDark, - borderOnAccent: _borderOnAccent, - borderOpacity10: _borderOpacity10, - borderOpacity25: _borderOpacity25, - // Border Utility - derived from brand and accents + borderInverse: effectiveBorderInverse, + borderOnAccent: effectiveBorderOnAccent, + borderOnSurface: effectiveBorderOnSurface, + borderOpacitySubtle: _borderOpacitySubtle, + borderOpacityStrong: _borderOpacityStrong, + // Border Utility borderFocus: effectiveBorderFocus, - borderDisabled: _borderDisabled, + borderDisabled: effectiveBorderDisabled, + borderHover: _borderHover, + borderPressed: _borderPressed, + borderActive: effectiveBorderActive, borderError: effectiveBorderError, borderWarning: effectiveBorderWarning, borderSuccess: effectiveBorderSuccess, - borderSelected: effectiveBorderSelected, - // State - stateFocused derived from brand + borderSelected: _borderSelected, + // State stateHover: _stateHover, statePressed: _statePressed, stateSelected: _stateSelected, diff --git a/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart b/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart index 942be4a..4465ca8 100644 --- a/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart +++ b/apps/design_system_gallery/lib/widgets/theme_studio/theme_customization_panel.dart @@ -83,6 +83,8 @@ class _ThemeCustomizationPanelState extends State { SizedBox(height: spacing.md), _buildBrandSection(context), SizedBox(height: spacing.md), + _buildChromeSection(context), + SizedBox(height: spacing.md), _buildAccentColorsSection(context), SizedBox(height: spacing.md), _buildTextColorsSection(context), @@ -224,6 +226,20 @@ class _ThemeCustomizationPanelState extends State { ); } + Widget _buildChromeSection(BuildContext context) { + final config = context.read(); + return SectionCard( + title: 'Chrome Color', + subtitle: 'chrome', + icon: Icons.circle_outlined, + child: ColorPickerTile( + label: 'chromePrimary', + color: config.chromePrimaryColor, + onColorChanged: config.setChromePrimaryColor, + ), + ); + } + Widget _buildAccentColorsSection(BuildContext context) { final config = context.read(); return SectionCard( @@ -312,17 +328,62 @@ class _ThemeCustomizationPanelState extends State { Widget _buildBackgroundColorsSection(BuildContext context) { final config = context.read(); + final spacing = context.streamSpacing; return SectionCard( title: 'Background Colors', subtitle: 'background*', icon: Icons.format_paint, child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ ColorPickerTile( label: 'backgroundApp', color: config.backgroundApp, onColorChanged: config.setBackgroundApp, ), + ColorPickerTile( + label: 'backgroundInverse', + color: config.backgroundInverse, + onColorChanged: config.setBackgroundInverse, + ), + ColorPickerTile( + label: 'backgroundOnAccent', + color: config.backgroundOnAccent, + onColorChanged: config.setBackgroundOnAccent, + ), + ColorPickerTile( + label: 'backgroundHighlight', + color: config.backgroundHighlight, + onColorChanged: config.setBackgroundHighlight, + ), + ColorPickerTile( + label: 'backgroundScrim', + color: config.backgroundScrim, + onColorChanged: config.setBackgroundScrim, + ), + ColorPickerTile( + label: 'backgroundOverlayLight', + color: config.backgroundOverlayLight, + onColorChanged: config.setBackgroundOverlayLight, + ), + ColorPickerTile( + label: 'backgroundOverlayDark', + color: config.backgroundOverlayDark, + onColorChanged: config.setBackgroundOverlayDark, + ), + ColorPickerTile( + label: 'backgroundDisabled', + color: config.backgroundDisabled, + onColorChanged: config.setBackgroundDisabled, + ), + SizedBox(height: spacing.xs), + Text( + 'Surface', + style: context.streamTextTheme.captionEmphasis.copyWith( + color: context.streamColorScheme.textTertiary, + ), + ), + SizedBox(height: spacing.xs), ColorPickerTile( label: 'backgroundSurface', color: config.backgroundSurface, @@ -339,14 +400,42 @@ class _ThemeCustomizationPanelState extends State { onColorChanged: config.setBackgroundSurfaceStrong, ), ColorPickerTile( - label: 'backgroundOverlay', - color: config.backgroundOverlay, - onColorChanged: config.setBackgroundOverlay, + label: 'backgroundSurfaceCard', + color: config.backgroundSurfaceCard, + onColorChanged: config.setBackgroundSurfaceCard, ), + SizedBox(height: spacing.xs), + Text( + 'Elevation', + style: context.streamTextTheme.captionEmphasis.copyWith( + color: context.streamColorScheme.textTertiary, + ), + ), + SizedBox(height: spacing.xs), ColorPickerTile( - label: 'backgroundDisabled', - color: config.backgroundDisabled, - onColorChanged: config.setBackgroundDisabled, + label: 'backgroundElevation0', + color: config.backgroundElevation0, + onColorChanged: config.setBackgroundElevation0, + ), + ColorPickerTile( + label: 'backgroundElevation1', + color: config.backgroundElevation1, + onColorChanged: config.setBackgroundElevation1, + ), + ColorPickerTile( + label: 'backgroundElevation2', + color: config.backgroundElevation2, + onColorChanged: config.setBackgroundElevation2, + ), + ColorPickerTile( + label: 'backgroundElevation3', + color: config.backgroundElevation3, + onColorChanged: config.setBackgroundElevation3, + ), + ColorPickerTile( + label: 'backgroundElevation4', + color: config.backgroundElevation4, + onColorChanged: config.setBackgroundElevation4, ), ], ), @@ -377,9 +466,9 @@ class _ThemeCustomizationPanelState extends State { onColorChanged: config.setBorderStrong, ), ColorPickerTile( - label: 'borderOnDark', - color: config.borderOnDark, - onColorChanged: config.setBorderOnDark, + label: 'borderInverse', + color: config.borderInverse, + onColorChanged: config.setBorderInverse, ), ColorPickerTile( label: 'borderOnAccent', @@ -387,14 +476,19 @@ class _ThemeCustomizationPanelState extends State { onColorChanged: config.setBorderOnAccent, ), ColorPickerTile( - label: 'borderOpacity10', - color: config.borderOpacity10, - onColorChanged: config.setBorderOpacity10, + label: 'borderOnSurface', + color: config.borderOnSurface, + onColorChanged: config.setBorderOnSurface, + ), + ColorPickerTile( + label: 'borderOpacitySubtle', + color: config.borderOpacitySubtle, + onColorChanged: config.setBorderOpacitySubtle, ), ColorPickerTile( - label: 'borderOpacity25', - color: config.borderOpacity25, - onColorChanged: config.setBorderOpacity25, + label: 'borderOpacityStrong', + color: config.borderOpacityStrong, + onColorChanged: config.setBorderOpacityStrong, ), ], ), @@ -414,6 +508,21 @@ class _ThemeCustomizationPanelState extends State { color: config.borderFocus, onColorChanged: config.setBorderFocus, ), + ColorPickerTile( + label: 'borderActive', + color: config.borderActive, + onColorChanged: config.setBorderActive, + ), + ColorPickerTile( + label: 'borderHover', + color: config.borderHover, + onColorChanged: config.setBorderHover, + ), + ColorPickerTile( + label: 'borderPressed', + color: config.borderPressed, + onColorChanged: config.setBorderPressed, + ), ColorPickerTile( label: 'borderDisabled', color: config.borderDisabled, diff --git a/packages/stream_core_flutter/lib/src/components/accessories/stream_audio_waveform.dart b/packages/stream_core_flutter/lib/src/components/accessories/stream_audio_waveform.dart index 73e4e9b..ebd9e71 100644 --- a/packages/stream_core_flutter/lib/src/components/accessories/stream_audio_waveform.dart +++ b/packages/stream_core_flutter/lib/src/components/accessories/stream_audio_waveform.dart @@ -127,7 +127,7 @@ class _StreamAudioWaveformSliderState extends State { final activeThumbColor = widget.activeThumbColor ?? theme.activeThumbColor ?? colorScheme.accentPrimary; final idleThumbColor = widget.idleThumbColor ?? theme.idleThumbColor ?? colorScheme.accentNeutral; final thumbColor = widget.isActive ? activeThumbColor : idleThumbColor; - final thumbBorderColor = widget.thumbBorderColor ?? theme.thumbBorderColor ?? colorScheme.borderOnAccent; + final thumbBorderColor = widget.thumbBorderColor ?? theme.thumbBorderColor ?? colorScheme.borderInverse; return HorizontalSlider( onChangeStart: widget.onChangeStart, @@ -285,7 +285,7 @@ class StreamAudioWaveform extends StatelessWidget { final theme = StreamAudioWaveformTheme.of(context); final colorScheme = context.streamColorScheme; - final color = this.color ?? theme.color ?? colorScheme.borderOpacity25; + final color = this.color ?? theme.color ?? colorScheme.borderOpacityStrong; final progressColor = this.progressColor ?? theme.progressColor ?? colorScheme.accentPrimary; final minBarHeight = this.minBarHeight ?? theme.minBarHeight ?? 2.0; final spacingRatio = this.spacingRatio ?? theme.spacingRatio ?? 0.3; diff --git a/packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart b/packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart index 9f66a03..9d73995 100644 --- a/packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart +++ b/packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart @@ -172,7 +172,7 @@ class DefaultStreamAvatarGroup extends StatelessWidget { size: avatarSize, border: Border.all( width: avatarBorderWidth, - color: colorScheme.borderOnDark, + color: colorScheme.borderInverse, strokeAlign: BorderSide.strokeAlignOutside, ), ), diff --git a/packages/stream_core_flutter/lib/src/components/badge/stream_badge_notification.dart b/packages/stream_core_flutter/lib/src/components/badge/stream_badge_notification.dart index e88092d..e51f110 100644 --- a/packages/stream_core_flutter/lib/src/components/badge/stream_badge_notification.dart +++ b/packages/stream_core_flutter/lib/src/components/badge/stream_badge_notification.dart @@ -229,5 +229,5 @@ class _StreamBadgeNotificationThemeDefaults extends StreamBadgeNotificationTheme Color get textColor => _colorScheme.textOnAccent; @override - Color get borderColor => _colorScheme.borderOnDark; + Color get borderColor => _colorScheme.borderInverse; } diff --git a/packages/stream_core_flutter/lib/src/components/badge/stream_media_badge.dart b/packages/stream_core_flutter/lib/src/components/badge/stream_media_badge.dart index b522606..2a6ad99 100644 --- a/packages/stream_core_flutter/lib/src/components/badge/stream_media_badge.dart +++ b/packages/stream_core_flutter/lib/src/components/badge/stream_media_badge.dart @@ -12,7 +12,7 @@ class StreamMediaBadge extends StatelessWidget { Widget build(BuildContext context) { return Container( decoration: BoxDecoration( - color: context.streamColorScheme.backgroundInverse, + color: context.streamColorScheme.chrome[10000], borderRadius: BorderRadius.all(context.streamRadius.max), ), padding: EdgeInsets.symmetric( @@ -28,13 +28,13 @@ class StreamMediaBadge extends StatelessWidget { MediaBadgeType.audio => context.streamIcons.microphoneSolid, }, size: 12, - color: context.streamColorScheme.textOnDark, + color: context.streamColorScheme.textInverse, ), if (duration case final duration?) Text( duration.toReadableString(), - style: context.streamTextTheme.numericMd.copyWith(color: context.streamColorScheme.textOnDark), + style: context.streamTextTheme.numericMd.copyWith(color: context.streamColorScheme.textInverse), ), ], ), diff --git a/packages/stream_core_flutter/lib/src/components/badge/stream_online_indicator.dart b/packages/stream_core_flutter/lib/src/components/badge/stream_online_indicator.dart index 19bf17b..ccd99dd 100644 --- a/packages/stream_core_flutter/lib/src/components/badge/stream_online_indicator.dart +++ b/packages/stream_core_flutter/lib/src/components/badge/stream_online_indicator.dart @@ -240,7 +240,7 @@ class _StreamOnlineIndicatorThemeDefaults extends StreamOnlineIndicatorThemeData Color get backgroundOffline => _colorScheme.accentNeutral; @override - Color get borderColor => _colorScheme.borderOnDark; + Color get borderColor => _colorScheme.borderInverse; @override AlignmentGeometry get alignment => AlignmentDirectional.topEnd; diff --git a/packages/stream_core_flutter/lib/src/components/common/stream_checkbox.dart b/packages/stream_core_flutter/lib/src/components/common/stream_checkbox.dart index 8bf6a02..7aa9f29 100644 --- a/packages/stream_core_flutter/lib/src/components/common/stream_checkbox.dart +++ b/packages/stream_core_flutter/lib/src/components/common/stream_checkbox.dart @@ -237,7 +237,7 @@ class _StreamCheckboxStyleDefaults extends StreamCheckboxStyle { WidgetStateProperty get checkColor => WidgetStateProperty.resolveWith((states) { if (states.contains(WidgetState.selected)) { if (states.contains(WidgetState.disabled)) return _colorScheme.textDisabled; - return _colorScheme.textOnDark; + return _colorScheme.textOnAccent; } return StreamColors.transparent; }); diff --git a/packages/stream_core_flutter/lib/src/components/controls/stream_remove_control.dart b/packages/stream_core_flutter/lib/src/components/controls/stream_remove_control.dart index 58a60cd..4740228 100644 --- a/packages/stream_core_flutter/lib/src/components/controls/stream_remove_control.dart +++ b/packages/stream_core_flutter/lib/src/components/controls/stream_remove_control.dart @@ -18,9 +18,9 @@ class StreamRemoveControl extends StatelessWidget { onTap: onPressed, child: Container( decoration: BoxDecoration( - color: colorScheme.accentBlack, + color: colorScheme.backgroundInverse, shape: BoxShape.circle, - border: Border.all(color: colorScheme.borderOnDark, width: 2), + border: Border.all(color: colorScheme.borderInverse, width: 2), ), alignment: Alignment.center, height: 20, diff --git a/packages/stream_core_flutter/lib/src/theme/components/stream_audio_waveform_theme.dart b/packages/stream_core_flutter/lib/src/theme/components/stream_audio_waveform_theme.dart index c74c4f5..be8c011 100644 --- a/packages/stream_core_flutter/lib/src/theme/components/stream_audio_waveform_theme.dart +++ b/packages/stream_core_flutter/lib/src/theme/components/stream_audio_waveform_theme.dart @@ -116,7 +116,7 @@ class StreamAudioWaveformThemeData with _$StreamAudioWaveformThemeData { /// The color of the waveform bars. /// - /// Falls back to [StreamColorScheme.borderOpacity25]. + /// Falls back to [StreamColorScheme.borderOpacityStrong]. final Color? color; /// The color of the progressed waveform bars. diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/stream_color_swatch_helper.dart b/packages/stream_core_flutter/lib/src/theme/primitives/stream_color_swatch_helper.dart index d62a6c4..a52ee22 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/stream_color_swatch_helper.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/stream_color_swatch_helper.dart @@ -1,6 +1,8 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/painting.dart'; +import '../../../stream_core_flutter.dart'; + class StreamColorSwatchHelper { const StreamColorSwatchHelper._(); @@ -21,13 +23,16 @@ class StreamColorSwatchHelper { final centerLightness = hslBase.lightness; final shades = [50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 900]; + final isLight = brightness == Brightness.light; return { + 0: isLight ? StreamColors.white : StreamColors.black, for (final shade in shades) shade: _adjustLightness( hslBase, _calculateLightness(shade, centerLightness, brightness: brightness), ), + 1000: isLight ? StreamColors.black : StreamColors.white, }; } diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/tokens/dark/stream_tokens.dart b/packages/stream_core_flutter/lib/src/theme/primitives/tokens/dark/stream_tokens.dart index 8e163aa..08652b9 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/tokens/dark/stream_tokens.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/tokens/dark/stream_tokens.dart @@ -4,11 +4,12 @@ class StreamTokens { StreamTokens._(); static const baseTransparent0 = Color(0x00FFFFFF); - static const baseTransparentBlack5 = Color(0x0D000000); - static const baseTransparentBlack10 = Color(0x1A000000); - static const baseTransparentWhite70 = Color(0xB3FFFFFF); static const baseTransparentWhite10 = Color(0x1AFFFFFF); static const baseTransparentWhite20 = Color(0x33FFFFFF); + static const baseTransparentWhite30 = Color(0x4DFFFFFF); + static const baseTransparentWhite70 = Color(0xB3FFFFFF); + static const baseTransparentBlack5 = Color(0x0D000000); + static const baseTransparentBlack10 = Color(0x1A000000); static const baseTransparentBlack70 = Color(0xB3000000); static const baseBlack = Color(0xFF000000); static const baseWhite = Color(0xFFFFFFFF); @@ -142,6 +143,10 @@ class StreamTokens { static const size480 = 480; static const size560 = 560; static const size640 = 640; + static const size760 = 760; + static const size144 = 144; + static const size208 = 208; + static const size56 = 56; static const radius0 = 0; static const radius2 = 2; static const radius4 = 4; @@ -182,24 +187,28 @@ class StreamTokens { static const fontWeightW500 = 500; static const fontWeightW600 = 600; static const fontWeightW700 = 700; + static const fontSizeSize8 = 8; static const fontSizeSize10 = 10; + static const fontSizeSize11 = 11; static const fontSizeSize12 = 12; + static const fontSizeSize13 = 13; static const fontSizeSize14 = 14; static const fontSizeSize16 = 16; static const fontSizeSize15 = 15; static const fontSizeSize17 = 17; static const fontSizeSize18 = 18; static const fontSizeSize20 = 20; + static const fontSizeSize22 = 22; static const fontSizeSize24 = 24; static const fontSizeSize28 = 28; static const fontSizeSize32 = 32; static const fontSizeSize40 = 40; static const fontSizeSize48 = 48; - static const fontSizeSize13 = 13; - static const fontSizeSize8 = 8; + static const fontSizeSize64 = 64; static const lineHeightLineHeight8 = 8; static const lineHeightLineHeight10 = 10; static const lineHeightLineHeight12 = 12; + static const lineHeightLineHeight13 = 13; static const lineHeightLineHeight14 = 14; static const lineHeightLineHeight15 = 15; static const lineHeightLineHeight16 = 16; @@ -228,11 +237,6 @@ class StreamTokens { static const typographyLineHeightTight = 16; static const typographyLineHeightNormal = 20; static const typographyLineHeightRelaxed = 24; - static final lightElevation0 = [ - const BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0), - ), - ]; static final lightElevation1 = [ const BoxShadow( color: Color.fromRGBO(0, 0, 0, 0.05), @@ -293,11 +297,6 @@ class StreamTokens { offset: Offset(0, 20), ), ]; - static final darkElevation0 = [ - const BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0), - ), - ]; static final darkElevation1 = [ const BoxShadow( color: Color.fromRGBO(255, 255, 255, 0.15), @@ -390,7 +389,6 @@ class StreamTokens { static const messageBubbleRadiusAttachmentInline = 8; static const composerRadiusFixed = 24; static const composerRadiusFloating = 24; - static const composerBg = Color(0xFF1C1C1C); static const buttonRadiusLg = 9999; static const buttonRadiusMd = 9999; static const buttonRadiusSm = 9999; @@ -413,27 +411,27 @@ class StreamTokens { static const buttonPaddingXWithLabelMd = 16; static const buttonPaddingXWithLabelSm = 16; static const buttonPaddingXWithLabelXs = 12; - static const buttonPrimaryBg = Color(0xFF78A8FF); - static const buttonPrimaryTextOnAccent = Color(0xFFFFFFFF); - static const buttonPrimaryText = Color(0xFF78A8FF); + static const buttonPrimaryBg = Color(0xFF4586FF); static const buttonPrimaryBgLiquidGlass = Color(0x00FFFFFF); + static const buttonPrimaryText = Color(0xFFA5C5FF); + static const buttonPrimaryTextOnAccent = Color(0xFFFFFFFF); + static const buttonPrimaryTextOnDark = Color(0xFF000000); static const buttonPrimaryBorder = Color(0xFF1B53BD); - static const buttonPrimaryTextOnDark = Color(0xFF1C1C1C); - static const buttonPrimaryBorderOnDark = Color(0xFF1C1C1C); - static const buttonSecondaryText = Color(0xFFFFFFFF); + static const buttonPrimaryBorderOnDark = Color(0xFF000000); + static const buttonSecondaryBg = Color(0xFF323232); static const buttonSecondaryBgLiquidGlass = Color(0xFF000000); + static const buttonSecondaryText = Color(0xFFF8F8F8); + static const buttonSecondaryTextOnAccent = Color(0xFFF8F8F8); + static const buttonSecondaryTextOnDark = Color(0xFF000000); static const buttonSecondaryBorder = Color(0xFF565656); - static const buttonSecondaryBg = Color(0xFF464646); - static const buttonSecondaryTextOnAccent = Color(0xFFFFFFFF); - static const buttonSecondaryTextOnDark = Color(0xFF1C1C1C); static const buttonSecondaryBorderOnDark = Color(0xFF1C1C1C); - static const buttonDestructiveText = Color(0xFFFC526A); static const buttonDestructiveBg = Color(0xFFFC526A); - static const buttonDestructiveTextOnAccent = Color(0xFFFFFFFF); static const buttonDestructiveBgLiquidGlass = Color(0xFF000000); + static const buttonDestructiveText = Color(0xFFFC526A); + static const buttonDestructiveTextOnAccent = Color(0xFFFFFFFF); + static const buttonDestructiveTextOnDark = Color(0xFF000000); static const buttonDestructiveBorder = Color(0xFFFC526A); - static const buttonDestructiveTextOnDark = Color(0xFF1C1C1C); - static const buttonDestructiveBorderOnDark = Color(0xFF1C1C1C); + static const buttonDestructiveBorderOnDark = Color(0xFF000000); static const iconSizeXs = 12; static const iconSizeSm = 16; static const iconSizeMd = 20; @@ -441,140 +439,159 @@ class StreamTokens { static const iconStrokeSubtle = 1.2; static const iconStrokeDefault = 1.5; static const iconStrokeEmphasis = 2; - static const backgroundCoreHover = Color(0x1AFFFFFF); - static const backgroundCorePressed = Color(0x33FFFFFF); - static const backgroundCoreSelected = Color(0x40FFFFFF); - static const backgroundCoreDisabled = Color(0xFF323232); - static const backgroundCoreApp = Color(0xFF000000); - static const backgroundCoreScrim = Color(0xBF000000); - static const backgroundCoreSurface = Color(0xFF464646); - static const backgroundCoreSurfaceSubtle = Color(0xFF323232); - static const backgroundCoreSurfaceStrong = Color(0xFF565656); - static const backgroundCoreOverlay = Color(0xBF000000); + static const emojiSm = 16; + static const emojiMd = 24; + static const emojiLg = 32; + static const emojiXl = 48; + static const emoji2xl = 64; + static const backgroundCoreElevation0 = Color(0xFF000000); + static const backgroundCoreElevation1 = Color(0xFF1C1C1C); + static const backgroundCoreElevation2 = Color(0xFF323232); + static const backgroundCoreElevation3 = Color(0xFF565656); + static const backgroundCoreElevation4 = Color(0xFF6A6A6A); + static const backgroundCoreSurface = Color(0xFF323232); + static const backgroundCoreSurfaceSubtle = Color(0xFF1C1C1C); + static const backgroundCoreSurfaceStrong = Color(0xFF464646); + static const backgroundCoreSurfaceCard = Color(0xFF323232); static const backgroundCoreInverse = Color(0xFFF8F8F8); + static const backgroundCoreOnAccent = Color(0xFFFFFFFF); + static const backgroundCoreHighlight = Color(0xFF5F1A05); static const backgroundCoreOverlayLight = Color(0xBF000000); static const backgroundCoreOverlayDark = Color(0x80000000); - static const backgroundElevationElevation0 = Color(0xFF000000); - static const backgroundElevationElevation1 = Color(0xFF1C1C1C); - static const backgroundElevationElevation2 = Color(0xFF323232); - static const backgroundElevationElevation3 = Color(0xFF464646); - static const backgroundElevationElevation4 = Color(0xFF565656); - static const borderUtilityFocus = Color(0xFFC3D9FF); + static const backgroundCoreScrim = Color(0xBF000000); + static const backgroundCoreApp = Color(0xFF000000); + static const backgroundUtilityHover = Color(0x26FFFFFF); + static const backgroundUtilityPressed = Color(0x33FFFFFF); + static const backgroundUtilitySelected = Color(0x40FFFFFF); + static const backgroundUtilityDisabled = Color(0xFF323232); + static const borderUtilityFocus = Color(0x4078A8FF); static const borderUtilityError = Color(0xFFFC526A); - static const borderUtilityWarning = Color(0xFFF26D10); - static const borderUtilitySuccess = Color(0xFF00A46E); - static const borderUtilitySelected = Color(0xFF78A8FF); - static const borderUtilityDisabled = Color(0xFF464646); + static const borderUtilityWarning = Color(0xFFFA922B); + static const borderUtilitySuccess = Color(0xFF00C384); + static const borderUtilitySelected = Color(0x26FFFFFF); + static const borderUtilityDisabled = Color(0xFF323232); + static const borderUtilityFocused = Color(0xFF19418D); + static const borderUtilityActive = Color(0xFF4586FF); + static const borderUtilityHover = Color(0x1AFFFFFF); + static const borderUtilityPressed = Color(0x33FFFFFF); static const borderCoreDefault = Color(0xFF565656); - static const borderCoreSubtle = Color(0xFF464646); - static const borderCoreStrong = Color(0xFF6A6A6A); - static const borderCoreOnDark = Color(0xFF1C1C1C); + static const borderCoreSubtle = Color(0xFF323232); + static const borderCoreStrong = Color(0xFF8F8F8F); + static const borderCoreInverse = Color(0xFF1C1C1C); static const borderCoreOnAccent = Color(0xFFFFFFFF); - static const borderCoreOpacity10 = Color(0x33FFFFFF); - static const borderCoreOpacity25 = Color(0x40FFFFFF); - static const borderCoreOnSurface = Color(0xFF6A6A6A); + static const borderCoreOpacitySubtle = Color(0x33FFFFFF); + static const borderCoreOpacityStrong = Color(0x40FFFFFF); static const chatBgIncoming = Color(0xFF323232); static const chatBgOutgoing = Color(0xFF142F63); static const chatBgAttachmentIncoming = Color(0xFF464646); static const chatBgAttachmentOutgoing = Color(0xFF19418D); - static const chatBgTypingIndicator = Color(0xFF565656); - static const chatTextTimestamp = Color(0xFFABABAB); - static const chatTextUsername = Color(0xFFEFEFEF); - static const chatTextMention = Color(0xFFFFFFFF); - static const chatTextLink = Color(0xFFFFFFFF); - static const chatTextReaction = Color(0xFFEFEFEF); - static const chatTextSystem = Color(0xFFEFEFEF); - static const chatTextIncoming = Color(0xFFFFFFFF); + static const chatTextIncoming = Color(0xFFF8F8F8); static const chatTextOutgoing = Color(0xFFF3F7FF); - static const chatBorderOutgoing = Color(0xFF142F63); + static const chatTextUsername = Color(0xFFD8D8D8); + static const chatTextTimestamp = Color(0xFFABABAB); + static const chatTextTypingIndicator = Color(0xFFF8F8F8); + static const chatTextRead = Color(0xFF4586FF); + static const chatTextMention = Color(0xFFA5C5FF); + static const chatTextLink = Color(0xFFA5C5FF); + static const chatTextReaction = Color(0xFFD8D8D8); + static const chatTextSystem = Color(0xFFD8D8D8); static const chatBorderIncoming = Color(0xFF323232); + static const chatBorderOutgoing = Color(0xFF142F63); + static const chatBorderOnChatIncoming = Color(0xFF8F8F8F); static const chatBorderOnChatOutgoing = Color(0xFF005FFF); - static const chatBorderOnChatIncoming = Color(0xFF6A6A6A); static const chatReplyIndicatorIncoming = Color(0xFF6A6A6A); static const chatReplyIndicatorOutgoing = Color(0xFFC3D9FF); static const chatWaveformBar = Color(0x40FFFFFF); - static const chatWaveformBarPlaying = Color(0xFF78A8FF); - static const chatPollProgressTrackIncoming = Color(0xFF565656); + static const chatWaveformBarPlaying = Color(0xFF4586FF); + static const chatPollProgressTrackIncoming = Color(0xFF464646); static const chatPollProgressTrackOutgoing = Color(0xFF1B53BD); - static const chatPollProgressFillIncoming = Color(0xFFF8F8F8); + static const chatPollProgressFillIncoming = Color(0xFFABABAB); static const chatPollProgressFillOutgoing = Color(0xFFFFFFFF); - static const chatThreadConnectorIncoming = Color(0xFF323232); - static const chatThreadConnectorOutgoing = Color(0xFF142F63); - static const inputBorderDefault = Color(0xFF565656); - static const inputBorderHover = Color(0xFF6A6A6A); - static const inputBorderFocus = Color(0xFF78A8FF); - static const inputTextDefault = Color(0xFFFFFFFF); + static const chatThreadConnectorIncoming = Color(0xFF565656); + static const chatThreadConnectorOutgoing = Color(0xFF19418D); + static const inputTextDefault = Color(0xFFF8F8F8); static const inputTextPlaceholder = Color(0xFFABABAB); - static const inputTextIcon = Color(0xFFABABAB); static const inputTextDisabled = Color(0xFF6A6A6A); - static const inputSendIcon = Color(0xFF78A8FF); + static const inputTextIcon = Color(0xFFABABAB); + static const inputSendIcon = Color(0xFF4586FF); static const inputSendIconDisabled = Color(0xFF6A6A6A); - static const reactionBg = Color(0xFF464646); - static const reactionBorder = Color(0xFF6A6A6A); - static const reactionText = Color(0xFFFFFFFF); - static const reactionEmoji = Color(0xFFFFFFFF); - static const presenceBgOnline = Color(0xFF00A46E); + static const reactionBg = Color(0xFF565656); + static const reactionBorder = Color(0xFF565656); + static const reactionText = Color(0xFFF8F8F8); + static const reactionEmoji = Color(0xFFF8F8F8); + static const presenceBgOnline = Color(0xFF00C384); static const presenceBorder = Color(0xFF1C1C1C); - static const presenceBgOffline = Color(0xFF565656); + static const presenceBgOffline = Color(0xFFABABAB); static const systemText = Color(0xFFFFFFFF); static const systemBgBlur = Color(0x03000000); static const systemScrollbar = Color(0x80FFFFFF); - static const systemCaret = Color(0xFFFFFFFF); - static const badgeBgPrimary = Color(0xFF78A8FF); - static const badgeBorder = Color(0xFF1C1C1C); + static const systemCaret = Color(0xFF4586FF); + static const badgeBgDefault = Color(0xFF565656); + static const badgeBgPrimary = Color(0xFF4586FF); + static const badgeBgNeutral = Color(0xFFABABAB); static const badgeBgError = Color(0xFFFC526A); - static const badgeBgNeutral = Color(0xFF565656); - static const badgeText = Color(0xFFFFFFFF); - static const badgeTextInverse = Color(0xFF1C1C1C); - static const badgeBgDefault = Color(0xFF1C1C1C); - static const badgeBgInverse = Color(0xFFF8F8F8); + static const badgeText = Color(0xFFF8F8F8); static const badgeTextOnAccent = Color(0xFFFFFFFF); + static const badgeBorder = Color(0xFF1C1C1C); static const badgeBgOverlay = Color(0xBF000000); - static const controlRadiocheckBg = Color(0x00FFFFFF); - static const controlRadiocheckBorder = Color(0xFF565656); - static const controlRadiocheckBgSelected = Color(0xFFFFFFFF); - static const controlRadiocheckIconSelected = Color(0xFF1C1C1C); - static const controlRemoveControlBg = Color(0xFF000000); - static const controlRemoveControlIcon = Color(0xFFFFFFFF); + static const controlRemoveControlBg = Color(0xFFF8F8F8); + static const controlRemoveControlIcon = Color(0xFF000000); static const controlRemoveControlBorder = Color(0xFF1C1C1C); - static const controlProgressBarTrack = Color(0xFF565656); - static const controlProgressBarFill = Color(0xFFF8F8F8); - static const controlPlayControlBg = Color(0xFF000000); - static const controlPlayControlIcon = Color(0xFFFFFFFF); - static const controlToggleSwitchBgSelected = Color(0xFF78A8FF); - static const controlToggleSwitchKnob = Color(0xFF565656); - static const controlToggleSwitchBg = Color(0xFF565656); + static const controlProgressBarFill = Color(0xFFABABAB); + static const controlProgressBarTrack = Color(0xFF464646); + static const controlToggleSwitchBg = Color(0xFFABABAB); + static const controlToggleSwitchBgSelected = Color(0xFF4586FF); static const controlToggleSwitchBgDisabled = Color(0xFF323232); + static const controlToggleSwitchKnob = Color(0xFF6A6A6A); + static const controlPlaybackToggleText = Color(0xFFF8F8F8); static const controlPlaybackToggleBorder = Color(0xFF565656); - static const controlPlaybackToggleText = Color(0xFFFFFFFF); - static const textPrimary = Color(0xFFFFFFFF); - static const textSecondary = Color(0xFFEFEFEF); + static const controlCheckboxBg = Color(0x00FFFFFF); + static const controlCheckboxBorder = Color(0xFF565656); + static const controlCheckboxBgSelected = Color(0xFF4586FF); + static const controlCheckboxIcon = Color(0xFFFFFFFF); + static const controlPlayButtonBg = Color(0xFF000000); + static const controlPlayButtonIcon = Color(0xFFFFFFFF); + static const controlPlaybackThumbBgDefault = Color(0xFFF8F8F8); + static const controlPlaybackThumbBorderActive = Color(0xFFFFFFFF); + static const controlPlaybackThumbBgActive = Color(0xFF4586FF); + static const controlPlaybackThumbBorderDefault = Color(0x40FFFFFF); + static const controlRadioButtonBg = Color(0x00FFFFFF); + static const controlRadioButtonBorder = Color(0xFF565656); + static const controlRadioButtonBgSelected = Color(0xFF4586FF); + static const controlRadioButtonIndicator = Color(0xFFFFFFFF); + static const controlRadioCheckBg = Color(0x00FFFFFF); + static const controlRadioCheckBorder = Color(0xFF565656); + static const controlRadioCheckBgSelected = Color(0xFF4586FF); + static const controlRadioCheckIcon = Color(0xFFFFFFFF); + static const textPrimary = Color(0xFFF8F8F8); + static const textSecondary = Color(0xFFD8D8D8); static const textTertiary = Color(0xFFABABAB); static const textInverse = Color(0xFF000000); - static const textDisabled = Color(0xFF6A6A6A); - static const textLink = Color(0xFFFFFFFF); static const textOnAccent = Color(0xFFFFFFFF); - static const textOnDark = Color(0xFF1C1C1C); - static const avatarPaletteBg1 = Color(0xFF142F63); - static const avatarPaletteBg2 = Color(0xFF003A3F); - static const avatarPaletteBg3 = Color(0xFF003A25); - static const avatarPaletteBg4 = Color(0xFF2E2576); - static const avatarPaletteBg5 = Color(0xFF5F1A05); + static const textDisabled = Color(0xFF6A6A6A); + static const textLink = Color(0xFFA5C5FF); + static const avatarPaletteBg1 = Color(0xFF1B53BD); + static const avatarPaletteBg2 = Color(0xFF006970); + static const avatarPaletteBg3 = Color(0xFF006643); + static const avatarPaletteBg4 = Color(0xFF553BD8); + static const avatarPaletteBg5 = Color(0xFFA82C00); static const avatarPaletteText1 = Color(0xFFE3EDFF); static const avatarPaletteText2 = Color(0xFFD1F3F6); static const avatarPaletteText3 = Color(0xFFBDFCDB); static const avatarPaletteText4 = Color(0xFFECEDFF); static const avatarPaletteText5 = Color(0xFFFCEDB9); - static const avatarBgDefault = Color(0xFF142F63); + static const avatarBgDefault = Color(0xFF1B53BD); static const avatarBgPlaceholder = Color(0xFF464646); static const avatarTextDefault = Color(0xFFE3EDFF); - static const avatarTextPlaceholder = Color(0xFF8F8F8F); - static const accentPrimary = Color(0xFF78A8FF); - static const accentSuccess = Color(0xFF00A46E); - static const accentWarning = Color(0xFFF26D10); + static const avatarTextPlaceholder = Color(0xFFABABAB); + static const avatarPresenceBgOnline = Color(0xFF00C384); + static const avatarPresenceBgOffline = Color(0xFFABABAB); + static const avatarPresenceBorder = Color(0xFF1C1C1C); + static const accentPrimary = Color(0xFF4586FF); + static const accentSuccess = Color(0xFF00C384); + static const accentWarning = Color(0xFFFA922B); static const accentError = Color(0xFFFC526A); static const accentNeutral = Color(0xFFABABAB); - static const accentBlack = Color(0xFF000000); static const brand50 = Color(0xFF091A3B); static const brand100 = Color(0xFF142F63); static const brand150 = Color(0xFF19418D); @@ -586,10 +603,19 @@ class StreamTokens { static const brand700 = Color(0xFFC3D9FF); static const brand800 = Color(0xFFE3EDFF); static const brand900 = Color(0xFFF3F7FF); - static const chipBg = Color(0xFF1B53BD); - static const chipText = Color(0xFFF3F7FF); - static const skeletonGradientDefaultBase = Color(0xFF323232); - static const skeletonGradientDefaultHighlight = Color(0xFF565656); - static const skeletonGradientAccentBase = Color(0xFF19418D); - static const skeletonGradientAccentHighlight = Color(0xFF1B53BD); + static const skeletonLoadingBase = Color(0x00FFFFFF); + static const skeletonLoadingHighlight = Color(0x33FFFFFF); + static const chrome0 = Color(0xFF000000); + static const chrome50 = Color(0xFF1C1C1C); + static const chrome100 = Color(0xFF323232); + static const chrome150 = Color(0xFF464646); + static const chrome200 = Color(0xFF565656); + static const chrome300 = Color(0xFF6A6A6A); + static const chrome400 = Color(0xFF8F8F8F); + static const chrome500 = Color(0xFFABABAB); + static const chrome600 = Color(0xFFC4C4C4); + static const chrome700 = Color(0xFFD8D8D8); + static const chrome800 = Color(0xFFEFEFEF); + static const chrome900 = Color(0xFFF8F8F8); + static const chrome1000 = Color(0xFFFFFFFF); } diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/tokens/light/stream_tokens.dart b/packages/stream_core_flutter/lib/src/theme/primitives/tokens/light/stream_tokens.dart index 9f987fe..ee07e22 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/tokens/light/stream_tokens.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/tokens/light/stream_tokens.dart @@ -4,11 +4,12 @@ class StreamTokens { StreamTokens._(); static const baseTransparent0 = Color(0x00FFFFFF); - static const baseTransparentBlack5 = Color(0x0D000000); - static const baseTransparentBlack10 = Color(0x1A000000); - static const baseTransparentWhite70 = Color(0xB3FFFFFF); static const baseTransparentWhite10 = Color(0x1AFFFFFF); static const baseTransparentWhite20 = Color(0x33FFFFFF); + static const baseTransparentWhite30 = Color(0x4DFFFFFF); + static const baseTransparentWhite70 = Color(0xB3FFFFFF); + static const baseTransparentBlack5 = Color(0x0D000000); + static const baseTransparentBlack10 = Color(0x1A000000); static const baseTransparentBlack70 = Color(0xB3000000); static const baseBlack = Color(0xFF000000); static const baseWhite = Color(0xFFFFFFFF); @@ -142,6 +143,10 @@ class StreamTokens { static const size480 = 480; static const size560 = 560; static const size640 = 640; + static const size760 = 760; + static const size144 = 144; + static const size208 = 208; + static const size56 = 56; static const radius0 = 0; static const radius2 = 2; static const radius4 = 4; @@ -182,24 +187,28 @@ class StreamTokens { static const fontWeightW500 = 500; static const fontWeightW600 = 600; static const fontWeightW700 = 700; + static const fontSizeSize8 = 8; static const fontSizeSize10 = 10; + static const fontSizeSize11 = 11; static const fontSizeSize12 = 12; + static const fontSizeSize13 = 13; static const fontSizeSize14 = 14; static const fontSizeSize16 = 16; static const fontSizeSize15 = 15; static const fontSizeSize17 = 17; static const fontSizeSize18 = 18; static const fontSizeSize20 = 20; + static const fontSizeSize22 = 22; static const fontSizeSize24 = 24; static const fontSizeSize28 = 28; static const fontSizeSize32 = 32; static const fontSizeSize40 = 40; static const fontSizeSize48 = 48; - static const fontSizeSize13 = 13; - static const fontSizeSize8 = 8; + static const fontSizeSize64 = 64; static const lineHeightLineHeight8 = 8; static const lineHeightLineHeight10 = 10; static const lineHeightLineHeight12 = 12; + static const lineHeightLineHeight13 = 13; static const lineHeightLineHeight14 = 14; static const lineHeightLineHeight15 = 15; static const lineHeightLineHeight16 = 16; @@ -228,11 +237,6 @@ class StreamTokens { static const typographyLineHeightTight = 16; static const typographyLineHeightNormal = 20; static const typographyLineHeightRelaxed = 24; - static final lightElevation0 = [ - const BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0), - ), - ]; static final lightElevation1 = [ const BoxShadow( color: Color.fromRGBO(0, 0, 0, 0.05), @@ -293,11 +297,6 @@ class StreamTokens { offset: Offset(0, 20), ), ]; - static final darkElevation0 = [ - const BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0), - ), - ]; static final darkElevation1 = [ const BoxShadow( color: Color.fromRGBO(255, 255, 255, 0.15), @@ -390,7 +389,6 @@ class StreamTokens { static const messageBubbleRadiusAttachmentInline = 8; static const composerRadiusFixed = 24; static const composerRadiusFloating = 24; - static const composerBg = Color(0xFFFFFFFF); static const buttonRadiusLg = 9999; static const buttonRadiusMd = 9999; static const buttonRadiusSm = 9999; @@ -414,25 +412,25 @@ class StreamTokens { static const buttonPaddingXWithLabelSm = 16; static const buttonPaddingXWithLabelXs = 12; static const buttonPrimaryBg = Color(0xFF005FFF); - static const buttonPrimaryTextOnAccent = Color(0xFFFFFFFF); - static const buttonPrimaryText = Color(0xFF005FFF); static const buttonPrimaryBgLiquidGlass = Color(0x00FFFFFF); - static const buttonPrimaryBorder = Color(0xFFA5C5FF); + static const buttonPrimaryText = Color(0xFF005FFF); + static const buttonPrimaryTextOnAccent = Color(0xFFFFFFFF); static const buttonPrimaryTextOnDark = Color(0xFFFFFFFF); + static const buttonPrimaryBorder = Color(0xFFA5C5FF); static const buttonPrimaryBorderOnDark = Color(0xFFFFFFFF); - static const buttonSecondaryText = Color(0xFF1A1B25); - static const buttonSecondaryBgLiquidGlass = Color(0xFFFFFFFF); - static const buttonSecondaryBorder = Color(0xFFD5DBE1); static const buttonSecondaryBg = Color(0xFFEBEEF1); + static const buttonSecondaryBgLiquidGlass = Color(0xFFFFFFFF); + static const buttonSecondaryText = Color(0xFF1A1B25); static const buttonSecondaryTextOnAccent = Color(0xFF1A1B25); static const buttonSecondaryTextOnDark = Color(0xFFFFFFFF); + static const buttonSecondaryBorder = Color(0xFFD5DBE1); static const buttonSecondaryBorderOnDark = Color(0xFFFFFFFF); - static const buttonDestructiveText = Color(0xFFD90D10); static const buttonDestructiveBg = Color(0xFFD90D10); - static const buttonDestructiveTextOnAccent = Color(0xFFFFFFFF); static const buttonDestructiveBgLiquidGlass = Color(0xFFFFFFFF); - static const buttonDestructiveBorder = Color(0xFFD90D10); + static const buttonDestructiveText = Color(0xFFD90D10); + static const buttonDestructiveTextOnAccent = Color(0xFFFFFFFF); static const buttonDestructiveTextOnDark = Color(0xFFFFFFFF); + static const buttonDestructiveBorder = Color(0xFFD90D10); static const buttonDestructiveBorderOnDark = Color(0xFFFFFFFF); static const iconSizeXs = 12; static const iconSizeSm = 16; @@ -441,140 +439,159 @@ class StreamTokens { static const iconStrokeSubtle = 1.2; static const iconStrokeDefault = 1.5; static const iconStrokeEmphasis = 2; - static const backgroundCoreHover = Color(0x0D1E252B); - static const backgroundCorePressed = Color(0x1A1E252B); - static const backgroundCoreSelected = Color(0x261E252B); - static const backgroundCoreDisabled = Color(0xFFEBEEF1); - static const backgroundCoreApp = Color(0xFFFFFFFF); - static const backgroundCoreScrim = Color(0x40000000); + static const emojiSm = 16; + static const emojiMd = 24; + static const emojiLg = 32; + static const emojiXl = 48; + static const emoji2xl = 64; + static const backgroundCoreElevation0 = Color(0xFFFFFFFF); + static const backgroundCoreElevation1 = Color(0xFFFFFFFF); + static const backgroundCoreElevation2 = Color(0xFFFFFFFF); + static const backgroundCoreElevation3 = Color(0xFFFFFFFF); + static const backgroundCoreElevation4 = Color(0xFFFFFFFF); static const backgroundCoreSurface = Color(0xFFEBEEF1); static const backgroundCoreSurfaceSubtle = Color(0xFFF6F8FA); - static const backgroundCoreSurfaceStrong = Color(0xFFC0C8D2); - static const backgroundCoreOverlay = Color(0xBFFFFFFF); + static const backgroundCoreSurfaceStrong = Color(0xFFD5DBE1); + static const backgroundCoreSurfaceCard = Color(0xFFF6F8FA); static const backgroundCoreInverse = Color(0xFF1A1B25); + static const backgroundCoreOnAccent = Color(0xFFFFFFFF); + static const backgroundCoreHighlight = Color(0xFFFEF9DA); static const backgroundCoreOverlayLight = Color(0xBFFFFFFF); - static const backgroundCoreOverlayDark = Color(0x40000000); - static const backgroundElevationElevation0 = Color(0xFFFFFFFF); - static const backgroundElevationElevation1 = Color(0xFFFFFFFF); - static const backgroundElevationElevation2 = Color(0xFFFFFFFF); - static const backgroundElevationElevation3 = Color(0xFFFFFFFF); - static const backgroundElevationElevation4 = Color(0xFFFFFFFF); - static const borderUtilityFocus = Color(0xFF78A8FF); + static const backgroundCoreOverlayDark = Color(0x401A1B25); + static const backgroundCoreScrim = Color(0x801A1B25); + static const backgroundCoreApp = Color(0xFFFFFFFF); + static const backgroundUtilityHover = Color(0x1A1A1B25); + static const backgroundUtilityPressed = Color(0x261A1B25); + static const backgroundUtilitySelected = Color(0x331A1B25); + static const backgroundUtilityDisabled = Color(0xFFEBEEF1); + static const borderUtilityHover = Color(0x1A1A1B25); + static const borderUtilityPressed = Color(0x331A1B25); + static const borderUtilitySelected = Color(0x261A1B25); + static const borderUtilityFocused = Color(0xFFC3D9FF); + static const borderUtilityActive = Color(0xFF005FFF); + static const borderUtilitySuccess = Color(0xFF00A46E); + static const borderUtilityWarning = Color(0xFFF26D10); static const borderUtilityError = Color(0xFFD90D10); - static const borderUtilityWarning = Color(0xFFC84801); - static const borderUtilitySuccess = Color(0xFF277E59); - static const borderUtilitySelected = Color(0xFF005FFF); static const borderUtilityDisabled = Color(0xFFEBEEF1); static const borderCoreDefault = Color(0xFFD5DBE1); static const borderCoreSubtle = Color(0xFFEBEEF1); - static const borderCoreStrong = Color(0xFFC0C8D2); - static const borderCoreOnDark = Color(0xFFFFFFFF); + static const borderCoreStrong = Color(0xFFA3ACBA); + static const borderCoreInverse = Color(0xFFFFFFFF); static const borderCoreOnAccent = Color(0xFFFFFFFF); - static const borderCoreOpacity10 = Color(0x1A000000); - static const borderCoreOpacity25 = Color(0x40000000); static const borderCoreOnSurface = Color(0xFFC0C8D2); + static const borderCoreOpacitySubtle = Color(0x1A1A1B25); + static const borderCoreOpacityStrong = Color(0x401A1B25); static const chatBgIncoming = Color(0xFFEBEEF1); static const chatBgOutgoing = Color(0xFFE3EDFF); static const chatBgAttachmentIncoming = Color(0xFFD5DBE1); static const chatBgAttachmentOutgoing = Color(0xFFC3D9FF); - static const chatBgTypingIndicator = Color(0xFF687385); - static const chatTextTimestamp = Color(0xFF687385); + static const chatTextIncoming = Color(0xFF1A1B25); + static const chatTextOutgoing = Color(0xFF091A3B); static const chatTextUsername = Color(0xFF414552); + static const chatTextTimestamp = Color(0xFF687385); + static const chatTextTypingIndicator = Color(0xFF1A1B25); + static const chatTextRead = Color(0xFF005FFF); static const chatTextMention = Color(0xFF005FFF); static const chatTextLink = Color(0xFF005FFF); static const chatTextReaction = Color(0xFF414552); static const chatTextSystem = Color(0xFF414552); - static const chatTextIncoming = Color(0xFF1A1B25); - static const chatTextOutgoing = Color(0xFF091A3B); - static const chatBorderOutgoing = Color(0xFFE3EDFF); static const chatBorderIncoming = Color(0xFFEBEEF1); - static const chatBorderOnChatOutgoing = Color(0xFF78A8FF); + static const chatBorderOutgoing = Color(0xFFE3EDFF); static const chatBorderOnChatIncoming = Color(0xFFA3ACBA); + static const chatBorderOnChatOutgoing = Color(0xFF78A8FF); static const chatReplyIndicatorIncoming = Color(0xFF87909F); static const chatReplyIndicatorOutgoing = Color(0xFF4586FF); - static const chatWaveformBar = Color(0x40000000); + static const chatWaveformBar = Color(0x401A1B25); static const chatWaveformBarPlaying = Color(0xFF005FFF); - static const chatPollProgressTrackIncoming = Color(0xFFC0C8D2); + static const chatPollProgressTrackIncoming = Color(0xFFD5DBE1); static const chatPollProgressTrackOutgoing = Color(0xFFA5C5FF); static const chatPollProgressFillIncoming = Color(0xFF687385); static const chatPollProgressFillOutgoing = Color(0xFF005FFF); - static const chatThreadConnectorIncoming = Color(0xFFC0C8D2); + static const chatThreadConnectorIncoming = Color(0xFFD5DBE1); static const chatThreadConnectorOutgoing = Color(0xFFC3D9FF); - static const inputBorderDefault = Color(0xFFD5DBE1); - static const inputBorderHover = Color(0xFFC0C8D2); - static const inputBorderFocus = Color(0xFF005FFF); static const inputTextDefault = Color(0xFF1A1B25); static const inputTextPlaceholder = Color(0xFF687385); - static const inputTextIcon = Color(0xFF687385); static const inputTextDisabled = Color(0xFFA3ACBA); + static const inputTextIcon = Color(0xFF687385); static const inputSendIcon = Color(0xFF005FFF); static const inputSendIconDisabled = Color(0xFFA3ACBA); static const reactionBg = Color(0xFFFFFFFF); - static const reactionBorder = Color(0xFFEBEEF1); + static const reactionBorder = Color(0xFFD5DBE1); static const reactionText = Color(0xFF1A1B25); static const reactionEmoji = Color(0xFF1A1B25); - static const presenceBgOnline = Color(0xFF277E59); + static const presenceBgOnline = Color(0xFF00A46E); static const presenceBorder = Color(0xFFFFFFFF); static const presenceBgOffline = Color(0xFF687385); static const systemText = Color(0xFF000000); static const systemBgBlur = Color(0x03FFFFFF); - static const systemScrollbar = Color(0x80000000); static const systemCaret = Color(0xFF005FFF); + static const systemScrollbar = Color(0x80000000); + static const badgeBgDefault = Color(0xFFFFFFFF); static const badgeBgPrimary = Color(0xFF005FFF); - static const badgeBorder = Color(0xFFFFFFFF); - static const badgeBgError = Color(0xFFD90D10); static const badgeBgNeutral = Color(0xFF687385); + static const badgeBgError = Color(0xFFD90D10); + static const badgeBgOverlay = Color(0xBF000000); static const badgeText = Color(0xFF1A1B25); - static const badgeTextInverse = Color(0xFFFFFFFF); - static const badgeBgDefault = Color(0xFFFFFFFF); - static const badgeBgInverse = Color(0xFF1A1B25); static const badgeTextOnAccent = Color(0xFFFFFFFF); - static const badgeBgOverlay = Color(0xBF000000); - static const controlRadiocheckBg = Color(0x00FFFFFF); - static const controlRadiocheckBorder = Color(0xFFD5DBE1); - static const controlRadiocheckBgSelected = Color(0xFF005FFF); - static const controlRadiocheckIconSelected = Color(0xFFFFFFFF); - static const controlRemoveControlBg = Color(0xFF000000); + static const badgeBorder = Color(0xFFFFFFFF); + static const controlRemoveControlBg = Color(0xFF1A1B25); static const controlRemoveControlIcon = Color(0xFFFFFFFF); static const controlRemoveControlBorder = Color(0xFFFFFFFF); - static const controlProgressBarTrack = Color(0xFFC0C8D2); static const controlProgressBarFill = Color(0xFF687385); - static const controlPlayControlBg = Color(0xFF000000); - static const controlPlayControlIcon = Color(0xFFFFFFFF); + static const controlProgressBarTrack = Color(0xFFD5DBE1); + static const controlToggleSwitchBg = Color(0xFF687385); static const controlToggleSwitchBgSelected = Color(0xFF005FFF); - static const controlToggleSwitchKnob = Color(0xFFFFFFFF); - static const controlToggleSwitchBg = Color(0xFFD5DBE1); static const controlToggleSwitchBgDisabled = Color(0xFFEBEEF1); - static const controlPlaybackToggleBorder = Color(0xFFD5DBE1); + static const controlToggleSwitchKnob = Color(0xFFFFFFFF); static const controlPlaybackToggleText = Color(0xFF1A1B25); + static const controlPlaybackToggleBorder = Color(0xFFD5DBE1); + static const controlCheckboxBg = Color(0x00FFFFFF); + static const controlCheckboxBorder = Color(0xFFD5DBE1); + static const controlCheckboxBgSelected = Color(0xFF005FFF); + static const controlCheckboxIcon = Color(0xFFFFFFFF); + static const controlPlayButtonBg = Color(0xFF000000); + static const controlPlayButtonIcon = Color(0xFFFFFFFF); + static const controlPlaybackThumbBgDefault = Color(0xFFFFFFFF); + static const controlPlaybackThumbBorderDefault = Color(0x401A1B25); + static const controlPlaybackThumbBgActive = Color(0xFF005FFF); + static const controlPlaybackThumbBorderActive = Color(0xFFFFFFFF); + static const controlRadioButtonBg = Color(0x00FFFFFF); + static const controlRadioButtonBorder = Color(0xFFD5DBE1); + static const controlRadioButtonBgSelected = Color(0xFF005FFF); + static const controlRadioButtonIndicator = Color(0xFFFFFFFF); + static const controlRadioCheckBg = Color(0x00FFFFFF); + static const controlRadioCheckBorder = Color(0xFFD5DBE1); + static const controlRadioCheckBgSelected = Color(0xFF005FFF); + static const controlRadioCheckIcon = Color(0xFFFFFFFF); static const textPrimary = Color(0xFF1A1B25); static const textSecondary = Color(0xFF414552); static const textTertiary = Color(0xFF687385); static const textInverse = Color(0xFFFFFFFF); + static const textOnAccent = Color(0xFFFFFFFF); static const textDisabled = Color(0xFFA3ACBA); static const textLink = Color(0xFF005FFF); - static const textOnAccent = Color(0xFFFFFFFF); - static const textOnDark = Color(0xFFFFFFFF); - static const avatarPaletteBg1 = Color(0xFFE3EDFF); - static const avatarPaletteBg2 = Color(0xFFD1F3F6); - static const avatarPaletteBg3 = Color(0xFFBDFCDB); - static const avatarPaletteBg4 = Color(0xFFECEDFF); - static const avatarPaletteBg5 = Color(0xFFFCEDB9); - static const avatarPaletteText1 = Color(0xFF142F63); - static const avatarPaletteText2 = Color(0xFF003A3F); - static const avatarPaletteText3 = Color(0xFF003A25); - static const avatarPaletteText4 = Color(0xFF2E2576); - static const avatarPaletteText5 = Color(0xFF5F1A05); - static const avatarBgDefault = Color(0xFFE3EDFF); - static const avatarBgPlaceholder = Color(0xFFEBEEF1); - static const avatarTextDefault = Color(0xFF142F63); + static const avatarPaletteBg1 = Color(0xFFC3D9FF); + static const avatarPaletteBg2 = Color(0xFFA9E4EA); + static const avatarPaletteBg3 = Color(0xFF8FEBBD); + static const avatarPaletteBg4 = Color(0xFFD4D7FF); + static const avatarPaletteBg5 = Color(0xFFFCD579); + static const avatarPaletteText1 = Color(0xFF091A3B); + static const avatarPaletteText2 = Color(0xFF002124); + static const avatarPaletteText3 = Color(0xFF002213); + static const avatarPaletteText4 = Color(0xFF1A114D); + static const avatarPaletteText5 = Color(0xFF331302); + static const avatarBgDefault = Color(0xFFC3D9FF); + static const avatarBgPlaceholder = Color(0xFFD5DBE1); + static const avatarTextDefault = Color(0xFF091A3B); static const avatarTextPlaceholder = Color(0xFF687385); + static const avatarPresenceBgOnline = Color(0xFF00A46E); + static const avatarPresenceBgOffline = Color(0xFF687385); + static const avatarPresenceBorder = Color(0xFFFFFFFF); static const accentPrimary = Color(0xFF005FFF); - static const accentSuccess = Color(0xFF277E59); - static const accentWarning = Color(0xFFC84801); + static const accentSuccess = Color(0xFF00A46E); + static const accentWarning = Color(0xFFF26D10); static const accentError = Color(0xFFD90D10); static const accentNeutral = Color(0xFF687385); - static const accentBlack = Color(0xFF000000); static const brand50 = Color(0xFFF3F7FF); static const brand100 = Color(0xFFE3EDFF); static const brand150 = Color(0xFFC3D9FF); @@ -586,10 +603,19 @@ class StreamTokens { static const brand700 = Color(0xFF19418D); static const brand800 = Color(0xFF142F63); static const brand900 = Color(0xFF091A3B); - static const chipBg = Color(0xFFE3EDFF); - static const chipText = Color(0xFF091A3B); - static const skeletonGradientDefaultBase = Color(0xFFF6F8FA); - static const skeletonGradientDefaultHighlight = Color(0xFFFFFFFF); - static const skeletonGradientAccentBase = Color(0xFFF3F7FF); - static const skeletonGradientAccentHighlight = Color(0xFFFFFFFF); + static const skeletonLoadingBase = Color(0x00FFFFFF); + static const skeletonLoadingHighlight = Color(0xFFFFFFFF); + static const chrome0 = Color(0xFFFFFFFF); + static const chrome50 = Color(0xFFF6F8FA); + static const chrome100 = Color(0xFFEBEEF1); + static const chrome150 = Color(0xFFD5DBE1); + static const chrome200 = Color(0xFFC0C8D2); + static const chrome300 = Color(0xFFA3ACBA); + static const chrome400 = Color(0xFF87909F); + static const chrome500 = Color(0xFF687385); + static const chrome600 = Color(0xFF545969); + static const chrome700 = Color(0xFF414552); + static const chrome800 = Color(0xFF30313D); + static const chrome900 = Color(0xFF1A1B25); + static const chrome1000 = Color(0xFF000000); } diff --git a/packages/stream_core_flutter/lib/src/theme/primitives/tokens/stream_tokens_typography.dart b/packages/stream_core_flutter/lib/src/theme/primitives/tokens/stream_tokens_typography.dart index ce24527..39e9b91 100644 --- a/packages/stream_core_flutter/lib/src/theme/primitives/tokens/stream_tokens_typography.dart +++ b/packages/stream_core_flutter/lib/src/theme/primitives/tokens/stream_tokens_typography.dart @@ -19,7 +19,7 @@ class StreamTokensTypography { fontFamily: 'Geist', fontSize: 16, fontWeight: FontWeight.w600, - height: 1, + height: 1.25, ); static const headingXs = TextStyle( fontFamily: 'Geist', @@ -103,24 +103,20 @@ class StreamTokensTypography { fontFamily: 'Geist', fontSize: 14, fontWeight: FontWeight.w700, - height: 1, ); static const numericLg = TextStyle( fontFamily: 'Geist', fontSize: 12, fontWeight: FontWeight.w700, - height: 1, ); static const numericMd = TextStyle( fontFamily: 'Geist', fontSize: 10, fontWeight: FontWeight.w700, - height: 1, ); static const numericSm = TextStyle( fontFamily: 'Geist', fontSize: 8, fontWeight: FontWeight.w700, - height: 1, ); } diff --git a/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dart b/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dart index 1cbcbbe..8a62692 100644 --- a/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dart +++ b/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.dart @@ -38,6 +38,7 @@ part 'stream_color_scheme.g.theme.dart'; /// See also: /// /// * [StreamBrandColor], which provides brand color shades. +/// * [StreamChromeColor], which provides neutral chrome color shades. /// * [StreamColors], which defines the primitive color palette. @immutable @ThemeGen(constructor: 'raw') @@ -46,13 +47,13 @@ class StreamColorScheme with _$StreamColorScheme { factory StreamColorScheme.light({ // Brand StreamColorSwatch? brand, + StreamColorSwatch? chrome, // Accent Color? accentPrimary, Color? accentSuccess, Color? accentWarning, Color? accentError, Color? accentNeutral, - Color? accentBlack, // Text Color? textPrimary, Color? textSecondary, @@ -61,13 +62,15 @@ class StreamColorScheme with _$StreamColorScheme { Color? textInverse, Color? textLink, Color? textOnAccent, - Color? textOnDark, // Background Color? backgroundApp, Color? backgroundSurface, Color? backgroundSurfaceSubtle, Color? backgroundSurfaceStrong, - Color? backgroundOverlay, + Color? backgroundSurfaceCard, + Color? backgroundOnAccent, + Color? backgroundHighlight, + Color? backgroundScrim, Color? backgroundOverlayLight, Color? backgroundOverlayDark, Color? backgroundDisabled, @@ -83,14 +86,17 @@ class StreamColorScheme with _$StreamColorScheme { Color? borderDefault, Color? borderSubtle, Color? borderStrong, - Color? borderOnDark, + Color? borderInverse, Color? borderOnAccent, Color? borderOnSurface, - Color? borderOpacity10, - Color? borderOpacity25, + Color? borderOpacitySubtle, + Color? borderOpacityStrong, // Border - Utility Color? borderFocus, Color? borderDisabled, + Color? borderHover, + Color? borderPressed, + Color? borderActive, Color? borderError, Color? borderWarning, Color? borderSuccess, @@ -109,67 +115,72 @@ class StreamColorScheme with _$StreamColorScheme { }) { // Brand brand ??= StreamBrandColor.light(); + chrome ??= StreamChromeColor.light(); // Accent accentPrimary ??= brand.shade500; accentSuccess ??= light_tokens.StreamTokens.accentSuccess; accentWarning ??= light_tokens.StreamTokens.accentWarning; accentError ??= light_tokens.StreamTokens.accentError; - accentNeutral ??= light_tokens.StreamTokens.accentNeutral; - accentBlack ??= light_tokens.StreamTokens.accentBlack; + accentNeutral ??= chrome.shade500; // Text - textPrimary ??= light_tokens.StreamTokens.textPrimary; - textSecondary ??= light_tokens.StreamTokens.textSecondary; - textTertiary ??= light_tokens.StreamTokens.textTertiary; - textDisabled ??= light_tokens.StreamTokens.textDisabled; - textInverse ??= light_tokens.StreamTokens.textInverse; + textPrimary ??= chrome.shade900; + textSecondary ??= chrome.shade700; + textTertiary ??= chrome.shade500; + textDisabled ??= chrome.shade300; + textInverse ??= chrome[0] ?? StreamColors.white; textLink ??= accentPrimary; - textOnAccent ??= light_tokens.StreamTokens.textOnAccent; - textOnDark ??= light_tokens.StreamTokens.textOnDark; + textOnAccent ??= chrome[0] ?? StreamColors.white; // Background - - backgroundApp ??= light_tokens.StreamTokens.backgroundCoreApp; - backgroundSurface ??= light_tokens.StreamTokens.backgroundCoreSurface; - backgroundSurfaceSubtle ??= light_tokens.StreamTokens.backgroundCoreSurfaceSubtle; - backgroundSurfaceStrong ??= light_tokens.StreamTokens.backgroundCoreSurfaceStrong; - backgroundOverlay ??= light_tokens.StreamTokens.backgroundCoreOverlay; + backgroundSurface ??= chrome.shade100; + backgroundSurfaceSubtle ??= chrome.shade50; + backgroundSurfaceStrong ??= chrome.shade150; + backgroundSurfaceCard ??= chrome.shade50; + backgroundOnAccent ??= chrome[0] ?? StreamColors.white; + backgroundHighlight ??= light_tokens.StreamTokens.backgroundCoreHighlight; + backgroundScrim ??= light_tokens.StreamTokens.backgroundCoreScrim; backgroundOverlayLight ??= light_tokens.StreamTokens.backgroundCoreOverlayLight; backgroundOverlayDark ??= light_tokens.StreamTokens.backgroundCoreOverlayDark; - backgroundDisabled ??= light_tokens.StreamTokens.backgroundCoreDisabled; - backgroundInverse ??= light_tokens.StreamTokens.backgroundCoreInverse; + backgroundDisabled ??= chrome.shade100; + backgroundInverse ??= chrome.shade900; + + backgroundElevation0 ??= chrome[0] ?? StreamColors.white; + backgroundElevation1 ??= chrome[0] ?? StreamColors.white; + backgroundElevation2 ??= chrome[0] ?? StreamColors.white; + backgroundElevation3 ??= chrome[0] ?? StreamColors.white; + backgroundElevation4 ??= chrome[0] ?? StreamColors.white; - backgroundElevation0 ??= light_tokens.StreamTokens.backgroundElevationElevation0; - backgroundElevation1 ??= light_tokens.StreamTokens.backgroundElevationElevation1; - backgroundElevation2 ??= light_tokens.StreamTokens.backgroundElevationElevation2; - backgroundElevation3 ??= light_tokens.StreamTokens.backgroundElevationElevation3; - backgroundElevation4 ??= light_tokens.StreamTokens.backgroundElevationElevation4; + backgroundApp ??= backgroundElevation0; // Border - Core borderDefault ??= light_tokens.StreamTokens.borderCoreDefault; borderSubtle ??= light_tokens.StreamTokens.borderCoreSubtle; borderStrong ??= light_tokens.StreamTokens.borderCoreStrong; - borderOnDark ??= light_tokens.StreamTokens.borderCoreOnDark; - borderOnAccent ??= light_tokens.StreamTokens.borderCoreOnAccent; - borderOnSurface ??= light_tokens.StreamTokens.borderCoreOnSurface; - borderOpacity10 ??= light_tokens.StreamTokens.borderCoreOpacity10; - borderOpacity25 ??= light_tokens.StreamTokens.borderCoreOpacity25; + borderInverse ??= chrome[0] ?? StreamColors.white; + borderOnAccent ??= chrome[0] ?? StreamColors.white; + borderOnSurface ??= chrome.shade200; + borderOpacitySubtle ??= light_tokens.StreamTokens.borderCoreOpacitySubtle; + borderOpacityStrong ??= light_tokens.StreamTokens.borderCoreOpacityStrong; // Border - Utility - borderFocus ??= brand.shade300; - borderDisabled ??= light_tokens.StreamTokens.borderUtilityDisabled; + borderFocus ??= brand.shade150; + borderDisabled ??= chrome.shade100; + borderHover ??= light_tokens.StreamTokens.borderUtilityHover; + borderPressed ??= light_tokens.StreamTokens.borderUtilityPressed; + borderActive ??= accentPrimary; borderError ??= accentError; borderWarning ??= accentWarning; borderSuccess ??= accentSuccess; - borderSelected ??= accentPrimary; + borderSelected ??= light_tokens.StreamTokens.borderUtilitySelected; // State - stateHover ??= light_tokens.StreamTokens.backgroundCoreHover; - statePressed ??= light_tokens.StreamTokens.backgroundCorePressed; - stateSelected ??= light_tokens.StreamTokens.backgroundCoreSelected; + stateHover ??= light_tokens.StreamTokens.backgroundUtilityHover; + statePressed ??= light_tokens.StreamTokens.backgroundUtilityPressed; + stateSelected ??= light_tokens.StreamTokens.backgroundUtilitySelected; stateFocused ??= brand.shade100; - stateDisabled ??= light_tokens.StreamTokens.backgroundCoreDisabled; + stateDisabled ??= light_tokens.StreamTokens.backgroundUtilityDisabled; // System systemText ??= light_tokens.StreamTokens.systemText; @@ -201,12 +212,12 @@ class StreamColorScheme with _$StreamColorScheme { return .raw( brand: brand, + chrome: chrome, accentPrimary: accentPrimary, accentSuccess: accentSuccess, accentWarning: accentWarning, accentError: accentError, accentNeutral: accentNeutral, - accentBlack: accentBlack, textPrimary: textPrimary, textSecondary: textSecondary, textTertiary: textTertiary, @@ -214,12 +225,14 @@ class StreamColorScheme with _$StreamColorScheme { textInverse: textInverse, textLink: textLink, textOnAccent: textOnAccent, - textOnDark: textOnDark, backgroundApp: backgroundApp, backgroundSurface: backgroundSurface, backgroundSurfaceSubtle: backgroundSurfaceSubtle, backgroundSurfaceStrong: backgroundSurfaceStrong, - backgroundOverlay: backgroundOverlay, + backgroundSurfaceCard: backgroundSurfaceCard, + backgroundOnAccent: backgroundOnAccent, + backgroundHighlight: backgroundHighlight, + backgroundScrim: backgroundScrim, backgroundOverlayLight: backgroundOverlayLight, backgroundOverlayDark: backgroundOverlayDark, backgroundDisabled: backgroundDisabled, @@ -230,15 +243,18 @@ class StreamColorScheme with _$StreamColorScheme { backgroundElevation3: backgroundElevation3, backgroundElevation4: backgroundElevation4, borderDefault: borderDefault, - borderOnDark: borderOnDark, + borderInverse: borderInverse, borderOnAccent: borderOnAccent, borderOnSurface: borderOnSurface, borderSubtle: borderSubtle, borderStrong: borderStrong, - borderOpacity10: borderOpacity10, - borderOpacity25: borderOpacity25, + borderOpacitySubtle: borderOpacitySubtle, + borderOpacityStrong: borderOpacityStrong, borderFocus: borderFocus, borderDisabled: borderDisabled, + borderHover: borderHover, + borderPressed: borderPressed, + borderActive: borderActive, borderError: borderError, borderWarning: borderWarning, borderSuccess: borderSuccess, @@ -258,13 +274,13 @@ class StreamColorScheme with _$StreamColorScheme { factory StreamColorScheme.dark({ // Brand StreamColorSwatch? brand, + StreamColorSwatch? chrome, // Accent Color? accentPrimary, Color? accentSuccess, Color? accentWarning, Color? accentError, Color? accentNeutral, - Color? accentBlack, // Text Color? textPrimary, Color? textSecondary, @@ -273,13 +289,15 @@ class StreamColorScheme with _$StreamColorScheme { Color? textInverse, Color? textLink, Color? textOnAccent, - Color? textOnDark, // Background Color? backgroundApp, Color? backgroundSurface, Color? backgroundSurfaceSubtle, Color? backgroundSurfaceStrong, - Color? backgroundOverlay, + Color? backgroundSurfaceCard, + Color? backgroundOnAccent, + Color? backgroundHighlight, + Color? backgroundScrim, Color? backgroundOverlayLight, Color? backgroundOverlayDark, Color? backgroundDisabled, @@ -294,14 +312,17 @@ class StreamColorScheme with _$StreamColorScheme { Color? borderDefault, Color? borderSubtle, Color? borderStrong, - Color? borderOpacity10, - Color? borderOpacity25, - Color? borderOnDark, + Color? borderInverse, + Color? borderOpacitySubtle, + Color? borderOpacityStrong, Color? borderOnAccent, Color? borderOnSurface, // Border - Utility Color? borderFocus, Color? borderDisabled, + Color? borderHover, + Color? borderPressed, + Color? borderActive, Color? borderError, Color? borderWarning, Color? borderSuccess, @@ -320,66 +341,72 @@ class StreamColorScheme with _$StreamColorScheme { }) { // Brand brand ??= StreamBrandColor.dark(); + chrome ??= StreamChromeColor.dark(); // Accent - accentPrimary ??= brand.shade500; + accentPrimary ??= brand.shade400; accentSuccess ??= dark_tokens.StreamTokens.accentSuccess; accentWarning ??= dark_tokens.StreamTokens.accentWarning; accentError ??= dark_tokens.StreamTokens.accentError; - accentNeutral ??= dark_tokens.StreamTokens.accentNeutral; - accentBlack ??= dark_tokens.StreamTokens.accentBlack; + accentNeutral ??= chrome.shade500; // Text - textPrimary ??= dark_tokens.StreamTokens.textPrimary; - textSecondary ??= dark_tokens.StreamTokens.textSecondary; - textTertiary ??= dark_tokens.StreamTokens.textTertiary; - textDisabled ??= dark_tokens.StreamTokens.textDisabled; - textInverse ??= dark_tokens.StreamTokens.textInverse; - textLink ??= accentPrimary; - textOnAccent ??= dark_tokens.StreamTokens.textOnAccent; - textOnDark ??= dark_tokens.StreamTokens.textOnDark; + textPrimary ??= chrome.shade900; + textSecondary ??= chrome.shade700; + textTertiary ??= chrome.shade500; + textDisabled ??= chrome.shade300; + textInverse ??= chrome[0] ?? StreamColors.black; + textLink ??= brand.shade600; + textOnAccent ??= chrome[1000] ?? StreamColors.white; // Background - backgroundApp ??= dark_tokens.StreamTokens.backgroundCoreApp; - backgroundSurface ??= dark_tokens.StreamTokens.backgroundCoreSurface; - backgroundSurfaceSubtle ??= dark_tokens.StreamTokens.backgroundCoreSurfaceSubtle; - backgroundSurfaceStrong ??= dark_tokens.StreamTokens.backgroundCoreSurfaceStrong; - backgroundOverlay ??= dark_tokens.StreamTokens.backgroundCoreOverlay; + backgroundSurface ??= chrome.shade100; + backgroundSurfaceSubtle ??= chrome.shade50; + backgroundSurfaceStrong ??= chrome.shade150; + backgroundSurfaceCard ??= chrome.shade100; + backgroundOnAccent ??= chrome[1000] ?? StreamColors.white; + backgroundHighlight ??= dark_tokens.StreamTokens.backgroundCoreHighlight; + backgroundScrim ??= dark_tokens.StreamTokens.backgroundCoreScrim; backgroundOverlayLight ??= dark_tokens.StreamTokens.backgroundCoreOverlayLight; backgroundOverlayDark ??= dark_tokens.StreamTokens.backgroundCoreOverlayDark; - backgroundDisabled ??= dark_tokens.StreamTokens.backgroundCoreDisabled; - backgroundInverse ??= dark_tokens.StreamTokens.backgroundCoreInverse; + backgroundDisabled ??= chrome.shade100; + backgroundInverse ??= chrome.shade900; + + backgroundElevation0 ??= chrome[0] ?? StreamColors.black; + backgroundElevation1 ??= chrome.shade50; + backgroundElevation2 ??= chrome.shade100; + backgroundElevation3 ??= chrome.shade200; + backgroundElevation4 ??= chrome.shade300; - backgroundElevation0 ??= dark_tokens.StreamTokens.backgroundElevationElevation0; - backgroundElevation1 ??= dark_tokens.StreamTokens.backgroundElevationElevation1; - backgroundElevation2 ??= dark_tokens.StreamTokens.backgroundElevationElevation2; - backgroundElevation3 ??= dark_tokens.StreamTokens.backgroundElevationElevation3; - backgroundElevation4 ??= dark_tokens.StreamTokens.backgroundElevationElevation4; + backgroundApp ??= backgroundElevation0; // Border - Core borderDefault ??= dark_tokens.StreamTokens.borderCoreDefault; borderSubtle ??= dark_tokens.StreamTokens.borderCoreSubtle; borderStrong ??= dark_tokens.StreamTokens.borderCoreStrong; - borderOpacity10 ??= dark_tokens.StreamTokens.borderCoreOpacity10; - borderOpacity25 ??= dark_tokens.StreamTokens.borderCoreOpacity25; - borderOnDark ??= dark_tokens.StreamTokens.borderCoreOnDark; - borderOnAccent ??= dark_tokens.StreamTokens.borderCoreOnAccent; - borderOnSurface ??= dark_tokens.StreamTokens.borderCoreOnSurface; + borderInverse ??= dark_tokens.StreamTokens.borderCoreInverse; + borderOpacitySubtle ??= dark_tokens.StreamTokens.borderCoreOpacitySubtle; + borderOpacityStrong ??= dark_tokens.StreamTokens.borderCoreOpacityStrong; + borderOnAccent ??= chrome[1000] ?? StreamColors.white; + borderOnSurface ??= chrome.shade200; // Border - Utility - borderFocus ??= brand.shade300; - borderDisabled ??= dark_tokens.StreamTokens.borderUtilityDisabled; + borderFocus ??= brand.shade150; + borderDisabled ??= chrome.shade100; + borderHover ??= dark_tokens.StreamTokens.borderUtilityHover; + borderPressed ??= dark_tokens.StreamTokens.borderUtilityPressed; + borderActive ??= accentPrimary; borderError ??= accentError; borderWarning ??= accentWarning; borderSuccess ??= accentSuccess; - borderSelected ??= accentPrimary; + borderSelected ??= dark_tokens.StreamTokens.borderUtilitySelected; // State - stateHover ??= dark_tokens.StreamTokens.backgroundCoreHover; - statePressed ??= dark_tokens.StreamTokens.backgroundCorePressed; - stateSelected ??= dark_tokens.StreamTokens.backgroundCoreSelected; + stateHover ??= dark_tokens.StreamTokens.backgroundUtilityHover; + statePressed ??= dark_tokens.StreamTokens.backgroundUtilityPressed; + stateSelected ??= dark_tokens.StreamTokens.backgroundUtilitySelected; stateFocused ??= brand.shade100; - stateDisabled ??= dark_tokens.StreamTokens.backgroundCoreDisabled; + stateDisabled ??= dark_tokens.StreamTokens.backgroundUtilityDisabled; // System systemText ??= dark_tokens.StreamTokens.systemText; @@ -411,12 +438,12 @@ class StreamColorScheme with _$StreamColorScheme { return .raw( brand: brand, + chrome: chrome, accentPrimary: accentPrimary, accentSuccess: accentSuccess, accentWarning: accentWarning, accentError: accentError, accentNeutral: accentNeutral, - accentBlack: accentBlack, textPrimary: textPrimary, textSecondary: textSecondary, textTertiary: textTertiary, @@ -424,12 +451,14 @@ class StreamColorScheme with _$StreamColorScheme { textInverse: textInverse, textLink: textLink, textOnAccent: textOnAccent, - textOnDark: textOnDark, backgroundApp: backgroundApp, backgroundSurface: backgroundSurface, backgroundSurfaceSubtle: backgroundSurfaceSubtle, backgroundSurfaceStrong: backgroundSurfaceStrong, - backgroundOverlay: backgroundOverlay, + backgroundSurfaceCard: backgroundSurfaceCard, + backgroundOnAccent: backgroundOnAccent, + backgroundHighlight: backgroundHighlight, + backgroundScrim: backgroundScrim, backgroundOverlayLight: backgroundOverlayLight, backgroundOverlayDark: backgroundOverlayDark, backgroundDisabled: backgroundDisabled, @@ -440,15 +469,18 @@ class StreamColorScheme with _$StreamColorScheme { backgroundElevation3: backgroundElevation3, backgroundElevation4: backgroundElevation4, borderDefault: borderDefault, + borderInverse: borderInverse, borderStrong: borderStrong, - borderOpacity10: borderOpacity10, - borderOpacity25: borderOpacity25, - borderOnDark: borderOnDark, + borderOpacitySubtle: borderOpacitySubtle, + borderOpacityStrong: borderOpacityStrong, borderOnAccent: borderOnAccent, borderOnSurface: borderOnSurface, borderSubtle: borderSubtle, borderFocus: borderFocus, borderDisabled: borderDisabled, + borderHover: borderHover, + borderPressed: borderPressed, + borderActive: borderActive, borderError: borderError, borderWarning: borderWarning, borderSuccess: borderSuccess, @@ -466,13 +498,13 @@ class StreamColorScheme with _$StreamColorScheme { const StreamColorScheme.raw({ required this.brand, + required this.chrome, // Accent required this.accentPrimary, required this.accentSuccess, required this.accentWarning, required this.accentError, required this.accentNeutral, - required this.accentBlack, // Text required this.textPrimary, required this.textSecondary, @@ -481,13 +513,15 @@ class StreamColorScheme with _$StreamColorScheme { required this.textInverse, required this.textLink, required this.textOnAccent, - required this.textOnDark, // Background required this.backgroundApp, required this.backgroundSurface, required this.backgroundSurfaceSubtle, required this.backgroundSurfaceStrong, - required this.backgroundOverlay, + required this.backgroundSurfaceCard, + required this.backgroundOnAccent, + required this.backgroundHighlight, + required this.backgroundScrim, required this.backgroundOverlayLight, required this.backgroundOverlayDark, required this.backgroundDisabled, @@ -502,14 +536,17 @@ class StreamColorScheme with _$StreamColorScheme { required this.borderDefault, required this.borderSubtle, required this.borderStrong, - required this.borderOnDark, + required this.borderInverse, required this.borderOnAccent, required this.borderOnSurface, - required this.borderOpacity10, - required this.borderOpacity25, + required this.borderOpacitySubtle, + required this.borderOpacityStrong, // Border - Utility required this.borderFocus, required this.borderDisabled, + required this.borderHover, + required this.borderPressed, + required this.borderActive, required this.borderError, required this.borderWarning, required this.borderSuccess, @@ -532,6 +569,9 @@ class StreamColorScheme with _$StreamColorScheme { /// The brand color swatch with shades from 50 to 950. final StreamColorSwatch brand; + /// The chrome (neutral) color swatch with shades from 0 to 1000. + final StreamColorSwatch chrome; + // ---- Accent colors ---- /// The primary accent color. @@ -546,54 +586,57 @@ class StreamColorScheme with _$StreamColorScheme { /// The error accent color. final Color accentError; - /// The neutral accent color. + /// Neutral accent for low-priority badges. final Color accentNeutral; - /// The black accent color. - final Color accentBlack; - // ---- Text colors ---- - /// The primary text color. + /// Main text color. final Color textPrimary; - /// The secondary text color. + /// Secondary metadata text. final Color textSecondary; - /// The tertiary text color. + /// Lowest priority text. final Color textTertiary; - /// The disabled text color. + /// Disabled text. final Color textDisabled; - /// The inverse text color. + /// Text on dark or accent backgrounds. final Color textInverse; /// The link text color. final Color textLink; - /// The text color on accent backgrounds. + /// Text on dark or accent backgrounds. final Color textOnAccent; - /// The text color on dark backgrounds. - final Color textOnDark; - // ---- Background colors ---- - /// The main app background color. + /// Global application background. final Color backgroundApp; - /// The surface background color. + /// Standard section background. final Color backgroundSurface; - /// The subtle surface background color. + /// Very light section background. final Color backgroundSurfaceSubtle; - /// The strong surface background color. + /// Stronger section background. final Color backgroundSurfaceStrong; - /// The overlay background color. - final Color backgroundOverlay; + /// Card surface background (slightly elevated above subtle). + final Color backgroundSurfaceCard; + + /// Surface that must remain white across themes (e.g., media controls over video). + final Color backgroundOnAccent; + + /// Highlight background (e.g., quoted message, search hit). + final Color backgroundHighlight; + + /// Dimmed overlay for modals. + final Color backgroundScrim; /// The light overlay background color. final Color backgroundOverlayLight; @@ -601,63 +644,72 @@ class StreamColorScheme with _$StreamColorScheme { /// The dark overlay background color. final Color backgroundOverlayDark; - /// Disabled background for inputs, buttons, or chips. + /// Disabled backgrounds for inputs, buttons, or chips. final Color backgroundDisabled; - /// The inverse background color. + /// Inverse background used for elevated, transient, or high-attention UI surfaces that sit on top of the default app background. final Color backgroundInverse; // ---- Background - Elevation ---- - /// The elevation 0 background color. + /// Flat surfaces. final Color backgroundElevation0; - /// The elevation 1 background color. + /// Slightly elevated surfaces. final Color backgroundElevation1; - /// The elevation 2 background color. + /// Card-like elements. final Color backgroundElevation2; - /// The elevation 3 background color. + /// Popovers. final Color backgroundElevation3; - /// The elevation 4 background color. + /// Dialogs, modals. final Color backgroundElevation4; // ---- Border colors - Core ---- - /// Standard surface border + /// Standard surface border. final Color borderDefault; - /// The subtle surface border color for separators. + /// Very light separators. final Color borderSubtle; - /// The strong surface border color. + /// Stronger surface border. final Color borderStrong; - /// The border color on dark backgrounds. - final Color borderOnDark; + /// Used on dark backgrounds. + final Color borderInverse; - /// The border color on accent backgrounds. + /// Borders on accent backgrounds. final Color borderOnAccent; /// The border color on surface backgrounds. final Color borderOnSurface; - /// The 10% opacity border color. - final Color borderOpacity10; + /// Image frame border treatment (subtle opacity). + final Color borderOpacitySubtle; - /// The 25% opacity border color. - final Color borderOpacity25; + /// Image frame border treatment (strong opacity). + final Color borderOpacityStrong; // ---- Border colors - Utility ---- - /// The focus ring border color. + /// Focus ring or focus border. final Color borderFocus; - /// The disabled state border color. + /// Optional disabled border for inputs, buttons, or chips. final Color borderDisabled; + /// Hover feedback border overlay. + final Color borderHover; + + /// Pressed feedback border overlay. + final Color borderPressed; + + /// Active/selected border (same value as borderSelected). + final Color borderActive; + /// The error state border color. final Color borderError; @@ -672,13 +724,13 @@ class StreamColorScheme with _$StreamColorScheme { // ---- State colors ---- - /// The hover state overlay color. + /// Hover feedback overlay. final Color stateHover; - /// The pressed state overlay color. + /// Pressed feedback overlay. final Color statePressed; - /// The selected state overlay color. + /// Selected overlay. final Color stateSelected; /// The focused state overlay color. @@ -732,6 +784,7 @@ class StreamColorScheme with _$StreamColorScheme { /// See also: /// /// * [StreamColorScheme], which contains the brand color. +/// * [StreamChromeColor], the neutral chrome swatch. /// * [StreamColorSwatch], the base class for color swatches. @immutable class StreamBrandColor extends StreamColorSwatch { @@ -786,6 +839,73 @@ class StreamBrandColor extends StreamColorSwatch { } } +/// The chrome (neutral) color swatch for the Stream design system. +/// +/// [StreamChromeColor] extends [StreamColorSwatch] and provides the neutral +/// chrome color palette with shades from 0 (white) to 1000 (black). Chrome +/// colors are used for backgrounds, text, borders, and other UI elements that +/// adapt to light/dark themes through the neutral gray scale. +/// +/// See also: +/// * [StreamColorScheme], which contains the chrome color. +/// * [StreamColorSwatch], the base class for color swatches. +@immutable +class StreamChromeColor extends StreamColorSwatch { + const StreamChromeColor._(super.primary, super._swatch); + + /// Creates a light theme chrome color swatch. + factory StreamChromeColor.light() { + final primaryColorValue = light_tokens.StreamTokens.chrome500.toARGB32(); + return ._( + primaryColorValue, + { + 0: light_tokens.StreamTokens.chrome0, + 50: light_tokens.StreamTokens.chrome50, + 100: light_tokens.StreamTokens.chrome100, + 150: light_tokens.StreamTokens.chrome150, + 200: light_tokens.StreamTokens.chrome200, + 300: light_tokens.StreamTokens.chrome300, + 400: light_tokens.StreamTokens.chrome400, + 500: Color(primaryColorValue), + 600: light_tokens.StreamTokens.chrome600, + 700: light_tokens.StreamTokens.chrome700, + 800: light_tokens.StreamTokens.chrome800, + 900: light_tokens.StreamTokens.chrome900, + 1000: light_tokens.StreamTokens.chrome1000, + }, + ); + } + + /// Creates a dark theme chrome color swatch. + factory StreamChromeColor.dark() { + final primaryColorValue = dark_tokens.StreamTokens.chrome500.toARGB32(); + return ._( + primaryColorValue, + { + 0: dark_tokens.StreamTokens.chrome0, + 50: dark_tokens.StreamTokens.chrome50, + 100: dark_tokens.StreamTokens.chrome100, + 150: dark_tokens.StreamTokens.chrome150, + 200: dark_tokens.StreamTokens.chrome200, + 300: dark_tokens.StreamTokens.chrome300, + 400: dark_tokens.StreamTokens.chrome400, + 500: Color(primaryColorValue), + 600: dark_tokens.StreamTokens.chrome600, + 700: dark_tokens.StreamTokens.chrome700, + 800: dark_tokens.StreamTokens.chrome800, + 900: dark_tokens.StreamTokens.chrome900, + 1000: dark_tokens.StreamTokens.chrome1000, + }, + ); + } + + /// The shade-0 color (always white – used on dark/accent surfaces). + Color get shade0 => this[0]!; + + /// The shade-1000 color (always black – used as the deepest neutral). + Color get shade1000 => this[1000]!; +} + /// A background/foreground color pair for avatars. /// /// Used for deterministic color selection based on user identity. diff --git a/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.g.theme.dart b/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.g.theme.dart index 262e994..c464c59 100644 --- a/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.g.theme.dart +++ b/packages/stream_core_flutter/lib/src/theme/semantics/stream_color_scheme.g.theme.dart @@ -31,12 +31,12 @@ mixin _$StreamColorScheme { return StreamColorScheme.raw( brand: t < 0.5 ? a.brand : b.brand, + chrome: t < 0.5 ? a.chrome : b.chrome, accentPrimary: Color.lerp(a.accentPrimary, b.accentPrimary, t)!, accentSuccess: Color.lerp(a.accentSuccess, b.accentSuccess, t)!, accentWarning: Color.lerp(a.accentWarning, b.accentWarning, t)!, accentError: Color.lerp(a.accentError, b.accentError, t)!, accentNeutral: Color.lerp(a.accentNeutral, b.accentNeutral, t)!, - accentBlack: Color.lerp(a.accentBlack, b.accentBlack, t)!, textPrimary: Color.lerp(a.textPrimary, b.textPrimary, t)!, textSecondary: Color.lerp(a.textSecondary, b.textSecondary, t)!, textTertiary: Color.lerp(a.textTertiary, b.textTertiary, t)!, @@ -44,7 +44,6 @@ mixin _$StreamColorScheme { textInverse: Color.lerp(a.textInverse, b.textInverse, t)!, textLink: Color.lerp(a.textLink, b.textLink, t)!, textOnAccent: Color.lerp(a.textOnAccent, b.textOnAccent, t)!, - textOnDark: Color.lerp(a.textOnDark, b.textOnDark, t)!, backgroundApp: Color.lerp(a.backgroundApp, b.backgroundApp, t)!, backgroundSurface: Color.lerp( a.backgroundSurface, @@ -61,11 +60,22 @@ mixin _$StreamColorScheme { b.backgroundSurfaceStrong, t, )!, - backgroundOverlay: Color.lerp( - a.backgroundOverlay, - b.backgroundOverlay, + backgroundSurfaceCard: Color.lerp( + a.backgroundSurfaceCard, + b.backgroundSurfaceCard, t, )!, + backgroundOnAccent: Color.lerp( + a.backgroundOnAccent, + b.backgroundOnAccent, + t, + )!, + backgroundHighlight: Color.lerp( + a.backgroundHighlight, + b.backgroundHighlight, + t, + )!, + backgroundScrim: Color.lerp(a.backgroundScrim, b.backgroundScrim, t)!, backgroundOverlayLight: Color.lerp( a.backgroundOverlayLight, b.backgroundOverlayLight, @@ -114,13 +124,24 @@ mixin _$StreamColorScheme { borderDefault: Color.lerp(a.borderDefault, b.borderDefault, t)!, borderSubtle: Color.lerp(a.borderSubtle, b.borderSubtle, t)!, borderStrong: Color.lerp(a.borderStrong, b.borderStrong, t)!, - borderOnDark: Color.lerp(a.borderOnDark, b.borderOnDark, t)!, + borderInverse: Color.lerp(a.borderInverse, b.borderInverse, t)!, borderOnAccent: Color.lerp(a.borderOnAccent, b.borderOnAccent, t)!, borderOnSurface: Color.lerp(a.borderOnSurface, b.borderOnSurface, t)!, - borderOpacity10: Color.lerp(a.borderOpacity10, b.borderOpacity10, t)!, - borderOpacity25: Color.lerp(a.borderOpacity25, b.borderOpacity25, t)!, + borderOpacitySubtle: Color.lerp( + a.borderOpacitySubtle, + b.borderOpacitySubtle, + t, + )!, + borderOpacityStrong: Color.lerp( + a.borderOpacityStrong, + b.borderOpacityStrong, + t, + )!, borderFocus: Color.lerp(a.borderFocus, b.borderFocus, t)!, borderDisabled: Color.lerp(a.borderDisabled, b.borderDisabled, t)!, + borderHover: Color.lerp(a.borderHover, b.borderHover, t)!, + borderPressed: Color.lerp(a.borderPressed, b.borderPressed, t)!, + borderActive: Color.lerp(a.borderActive, b.borderActive, t)!, borderError: Color.lerp(a.borderError, b.borderError, t)!, borderWarning: Color.lerp(a.borderWarning, b.borderWarning, t)!, borderSuccess: Color.lerp(a.borderSuccess, b.borderSuccess, t)!, @@ -138,12 +159,12 @@ mixin _$StreamColorScheme { StreamColorScheme copyWith({ StreamColorSwatch? brand, + StreamColorSwatch? chrome, Color? accentPrimary, Color? accentSuccess, Color? accentWarning, Color? accentError, Color? accentNeutral, - Color? accentBlack, Color? textPrimary, Color? textSecondary, Color? textTertiary, @@ -151,12 +172,14 @@ mixin _$StreamColorScheme { Color? textInverse, Color? textLink, Color? textOnAccent, - Color? textOnDark, Color? backgroundApp, Color? backgroundSurface, Color? backgroundSurfaceSubtle, Color? backgroundSurfaceStrong, - Color? backgroundOverlay, + Color? backgroundSurfaceCard, + Color? backgroundOnAccent, + Color? backgroundHighlight, + Color? backgroundScrim, Color? backgroundOverlayLight, Color? backgroundOverlayDark, Color? backgroundDisabled, @@ -169,13 +192,16 @@ mixin _$StreamColorScheme { Color? borderDefault, Color? borderSubtle, Color? borderStrong, - Color? borderOnDark, + Color? borderInverse, Color? borderOnAccent, Color? borderOnSurface, - Color? borderOpacity10, - Color? borderOpacity25, + Color? borderOpacitySubtle, + Color? borderOpacityStrong, Color? borderFocus, Color? borderDisabled, + Color? borderHover, + Color? borderPressed, + Color? borderActive, Color? borderError, Color? borderWarning, Color? borderSuccess, @@ -193,12 +219,12 @@ mixin _$StreamColorScheme { return StreamColorScheme.raw( brand: brand ?? _this.brand, + chrome: chrome ?? _this.chrome, accentPrimary: accentPrimary ?? _this.accentPrimary, accentSuccess: accentSuccess ?? _this.accentSuccess, accentWarning: accentWarning ?? _this.accentWarning, accentError: accentError ?? _this.accentError, accentNeutral: accentNeutral ?? _this.accentNeutral, - accentBlack: accentBlack ?? _this.accentBlack, textPrimary: textPrimary ?? _this.textPrimary, textSecondary: textSecondary ?? _this.textSecondary, textTertiary: textTertiary ?? _this.textTertiary, @@ -206,14 +232,17 @@ mixin _$StreamColorScheme { textInverse: textInverse ?? _this.textInverse, textLink: textLink ?? _this.textLink, textOnAccent: textOnAccent ?? _this.textOnAccent, - textOnDark: textOnDark ?? _this.textOnDark, backgroundApp: backgroundApp ?? _this.backgroundApp, backgroundSurface: backgroundSurface ?? _this.backgroundSurface, backgroundSurfaceSubtle: backgroundSurfaceSubtle ?? _this.backgroundSurfaceSubtle, backgroundSurfaceStrong: backgroundSurfaceStrong ?? _this.backgroundSurfaceStrong, - backgroundOverlay: backgroundOverlay ?? _this.backgroundOverlay, + backgroundSurfaceCard: + backgroundSurfaceCard ?? _this.backgroundSurfaceCard, + backgroundOnAccent: backgroundOnAccent ?? _this.backgroundOnAccent, + backgroundHighlight: backgroundHighlight ?? _this.backgroundHighlight, + backgroundScrim: backgroundScrim ?? _this.backgroundScrim, backgroundOverlayLight: backgroundOverlayLight ?? _this.backgroundOverlayLight, backgroundOverlayDark: @@ -228,13 +257,16 @@ mixin _$StreamColorScheme { borderDefault: borderDefault ?? _this.borderDefault, borderSubtle: borderSubtle ?? _this.borderSubtle, borderStrong: borderStrong ?? _this.borderStrong, - borderOnDark: borderOnDark ?? _this.borderOnDark, + borderInverse: borderInverse ?? _this.borderInverse, borderOnAccent: borderOnAccent ?? _this.borderOnAccent, borderOnSurface: borderOnSurface ?? _this.borderOnSurface, - borderOpacity10: borderOpacity10 ?? _this.borderOpacity10, - borderOpacity25: borderOpacity25 ?? _this.borderOpacity25, + borderOpacitySubtle: borderOpacitySubtle ?? _this.borderOpacitySubtle, + borderOpacityStrong: borderOpacityStrong ?? _this.borderOpacityStrong, borderFocus: borderFocus ?? _this.borderFocus, borderDisabled: borderDisabled ?? _this.borderDisabled, + borderHover: borderHover ?? _this.borderHover, + borderPressed: borderPressed ?? _this.borderPressed, + borderActive: borderActive ?? _this.borderActive, borderError: borderError ?? _this.borderError, borderWarning: borderWarning ?? _this.borderWarning, borderSuccess: borderSuccess ?? _this.borderSuccess, @@ -263,12 +295,12 @@ mixin _$StreamColorScheme { return copyWith( brand: other.brand, + chrome: other.chrome, accentPrimary: other.accentPrimary, accentSuccess: other.accentSuccess, accentWarning: other.accentWarning, accentError: other.accentError, accentNeutral: other.accentNeutral, - accentBlack: other.accentBlack, textPrimary: other.textPrimary, textSecondary: other.textSecondary, textTertiary: other.textTertiary, @@ -276,12 +308,14 @@ mixin _$StreamColorScheme { textInverse: other.textInverse, textLink: other.textLink, textOnAccent: other.textOnAccent, - textOnDark: other.textOnDark, backgroundApp: other.backgroundApp, backgroundSurface: other.backgroundSurface, backgroundSurfaceSubtle: other.backgroundSurfaceSubtle, backgroundSurfaceStrong: other.backgroundSurfaceStrong, - backgroundOverlay: other.backgroundOverlay, + backgroundSurfaceCard: other.backgroundSurfaceCard, + backgroundOnAccent: other.backgroundOnAccent, + backgroundHighlight: other.backgroundHighlight, + backgroundScrim: other.backgroundScrim, backgroundOverlayLight: other.backgroundOverlayLight, backgroundOverlayDark: other.backgroundOverlayDark, backgroundDisabled: other.backgroundDisabled, @@ -294,13 +328,16 @@ mixin _$StreamColorScheme { borderDefault: other.borderDefault, borderSubtle: other.borderSubtle, borderStrong: other.borderStrong, - borderOnDark: other.borderOnDark, + borderInverse: other.borderInverse, borderOnAccent: other.borderOnAccent, borderOnSurface: other.borderOnSurface, - borderOpacity10: other.borderOpacity10, - borderOpacity25: other.borderOpacity25, + borderOpacitySubtle: other.borderOpacitySubtle, + borderOpacityStrong: other.borderOpacityStrong, borderFocus: other.borderFocus, borderDisabled: other.borderDisabled, + borderHover: other.borderHover, + borderPressed: other.borderPressed, + borderActive: other.borderActive, borderError: other.borderError, borderWarning: other.borderWarning, borderSuccess: other.borderSuccess, @@ -330,12 +367,12 @@ mixin _$StreamColorScheme { final _other = (other as StreamColorScheme); return _other.brand == _this.brand && + _other.chrome == _this.chrome && _other.accentPrimary == _this.accentPrimary && _other.accentSuccess == _this.accentSuccess && _other.accentWarning == _this.accentWarning && _other.accentError == _this.accentError && _other.accentNeutral == _this.accentNeutral && - _other.accentBlack == _this.accentBlack && _other.textPrimary == _this.textPrimary && _other.textSecondary == _this.textSecondary && _other.textTertiary == _this.textTertiary && @@ -343,12 +380,14 @@ mixin _$StreamColorScheme { _other.textInverse == _this.textInverse && _other.textLink == _this.textLink && _other.textOnAccent == _this.textOnAccent && - _other.textOnDark == _this.textOnDark && _other.backgroundApp == _this.backgroundApp && _other.backgroundSurface == _this.backgroundSurface && _other.backgroundSurfaceSubtle == _this.backgroundSurfaceSubtle && _other.backgroundSurfaceStrong == _this.backgroundSurfaceStrong && - _other.backgroundOverlay == _this.backgroundOverlay && + _other.backgroundSurfaceCard == _this.backgroundSurfaceCard && + _other.backgroundOnAccent == _this.backgroundOnAccent && + _other.backgroundHighlight == _this.backgroundHighlight && + _other.backgroundScrim == _this.backgroundScrim && _other.backgroundOverlayLight == _this.backgroundOverlayLight && _other.backgroundOverlayDark == _this.backgroundOverlayDark && _other.backgroundDisabled == _this.backgroundDisabled && @@ -361,13 +400,16 @@ mixin _$StreamColorScheme { _other.borderDefault == _this.borderDefault && _other.borderSubtle == _this.borderSubtle && _other.borderStrong == _this.borderStrong && - _other.borderOnDark == _this.borderOnDark && + _other.borderInverse == _this.borderInverse && _other.borderOnAccent == _this.borderOnAccent && _other.borderOnSurface == _this.borderOnSurface && - _other.borderOpacity10 == _this.borderOpacity10 && - _other.borderOpacity25 == _this.borderOpacity25 && + _other.borderOpacitySubtle == _this.borderOpacitySubtle && + _other.borderOpacityStrong == _this.borderOpacityStrong && _other.borderFocus == _this.borderFocus && _other.borderDisabled == _this.borderDisabled && + _other.borderHover == _this.borderHover && + _other.borderPressed == _this.borderPressed && + _other.borderActive == _this.borderActive && _other.borderError == _this.borderError && _other.borderWarning == _this.borderWarning && _other.borderSuccess == _this.borderSuccess && @@ -389,12 +431,12 @@ mixin _$StreamColorScheme { return Object.hashAll([ runtimeType, _this.brand, + _this.chrome, _this.accentPrimary, _this.accentSuccess, _this.accentWarning, _this.accentError, _this.accentNeutral, - _this.accentBlack, _this.textPrimary, _this.textSecondary, _this.textTertiary, @@ -402,12 +444,14 @@ mixin _$StreamColorScheme { _this.textInverse, _this.textLink, _this.textOnAccent, - _this.textOnDark, _this.backgroundApp, _this.backgroundSurface, _this.backgroundSurfaceSubtle, _this.backgroundSurfaceStrong, - _this.backgroundOverlay, + _this.backgroundSurfaceCard, + _this.backgroundOnAccent, + _this.backgroundHighlight, + _this.backgroundScrim, _this.backgroundOverlayLight, _this.backgroundOverlayDark, _this.backgroundDisabled, @@ -420,13 +464,16 @@ mixin _$StreamColorScheme { _this.borderDefault, _this.borderSubtle, _this.borderStrong, - _this.borderOnDark, + _this.borderInverse, _this.borderOnAccent, _this.borderOnSurface, - _this.borderOpacity10, - _this.borderOpacity25, + _this.borderOpacitySubtle, + _this.borderOpacityStrong, _this.borderFocus, _this.borderDisabled, + _this.borderHover, + _this.borderPressed, + _this.borderActive, _this.borderError, _this.borderWarning, _this.borderSuccess, diff --git a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_dark_states.png b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_dark_states.png index a5140bf..f3e9b90 100644 Binary files a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_dark_states.png and b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_dark_states.png differ diff --git a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_light_states.png b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_light_states.png index 87fad47..0ce5c55 100644 Binary files a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_light_states.png and b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_light_states.png differ diff --git a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_dark_states.png b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_dark_states.png index c64a036..f50897b 100644 Binary files a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_dark_states.png and b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_dark_states.png differ diff --git a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_light_states.png b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_light_states.png index 1f2fa1a..7dd622d 100644 Binary files a/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_light_states.png and b/packages/stream_core_flutter/test/components/accessories/goldens/ci/stream_audio_waveform_slider_light_states.png differ diff --git a/packages/stream_core_flutter/test/components/badge/goldens/ci/stream_badge_notification_dark_matrix.png b/packages/stream_core_flutter/test/components/badge/goldens/ci/stream_badge_notification_dark_matrix.png index b84574c..c446714 100644 Binary files a/packages/stream_core_flutter/test/components/badge/goldens/ci/stream_badge_notification_dark_matrix.png and b/packages/stream_core_flutter/test/components/badge/goldens/ci/stream_badge_notification_dark_matrix.png differ diff --git a/packages/stream_core_flutter/test/components/buttons/goldens/ci/stream_button_dark_matrix.png b/packages/stream_core_flutter/test/components/buttons/goldens/ci/stream_button_dark_matrix.png index 7faaf0d..440a7ca 100644 Binary files a/packages/stream_core_flutter/test/components/buttons/goldens/ci/stream_button_dark_matrix.png and b/packages/stream_core_flutter/test/components/buttons/goldens/ci/stream_button_dark_matrix.png differ diff --git a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_dark_matrix.png b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_dark_matrix.png index 8acc8dd..032ca3c 100644 Binary files a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_dark_matrix.png and b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_dark_matrix.png differ diff --git a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_light_matrix.png b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_light_matrix.png index 4d0c3c0..f115b52 100644 Binary files a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_light_matrix.png and b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_link_preview_light_matrix.png differ diff --git a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_dark_matrix.png b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_dark_matrix.png index 8a267cd..8ce33f1 100644 Binary files a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_dark_matrix.png and b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_dark_matrix.png differ diff --git a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_light_matrix.png b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_light_matrix.png index c7dbbf6..7773457 100644 Binary files a/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_light_matrix.png and b/packages/stream_core_flutter/test/components/message_composer/goldens/ci/message_composer_attachment_reply_light_matrix.png differ