Skip to content

[material_ui] Default gen_defaults color helper prefix #12848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
QuncCccccc wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[material_ui] Default gen_defaults color helper prefix #12848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions packages/material_ui/tool/gen_defaults/templates/action_chip_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ class ActionChipTemplateM3 extends TokenTemplateM3 {
@override
String get parentFilePath => 'action_chip.dart';

String get _colorSchemePrefix => '_colors';

String get _textThemePrefix => '_textTheme';

@override
Expand All @@ -30,7 +28,7 @@ class $className extends ChipThemeData {
final BuildContext context;
final bool isEnabled;
final _ChipVariant _chipVariant;
late final ColorScheme $_colorSchemePrefix = Theme.of(context).colorScheme;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme $_textThemePrefix = Theme.of(context).textTheme;

@override
Expand All @@ -44,8 +42,8 @@ class $className extends ChipThemeData {
@override
TextStyle? get labelStyle => ${textStyle(TokenAssistChip.labelTextType, _textThemePrefix)}?.copyWith(
color: isEnabled
? ${color(TokenAssistChip.labelTextColor, _colorSchemePrefix)}
: ${color(TokenAssistChip.disabledLabelTextColor, _colorSchemePrefix)},
? ${color(TokenAssistChip.labelTextColor)}
: ${color(TokenAssistChip.disabledLabelTextColor)},
);

@override
Expand All @@ -54,17 +52,17 @@ class $className extends ChipThemeData {
if (states.contains(WidgetState.disabled)) {
return _chipVariant == _ChipVariant.flat
? null
: ${colorWithOpacity(TokenAssistChip.elevatedDisabledContainerColor, TokenAssistChip.elevatedDisabledContainerOpacity, _colorSchemePrefix)};
: ${colorWithOpacity(TokenAssistChip.elevatedDisabledContainerColor, TokenAssistChip.elevatedDisabledContainerOpacity)};
}
return _chipVariant == _ChipVariant.flat
? null
: ${color(TokenAssistChip.elevatedContainerColor, _colorSchemePrefix)};
: ${color(TokenAssistChip.elevatedContainerColor)};
});

@override
Color? get shadowColor => _chipVariant == _ChipVariant.flat
? Colors.transparent
: ${color(TokenAssistChip.elevatedContainerShadowColor, _colorSchemePrefix)};
: ${color(TokenAssistChip.elevatedContainerShadowColor)};

@override
Color? get surfaceTintColor => Colors.transparent;
Expand All @@ -78,15 +76,15 @@ class $className extends ChipThemeData {
@override
BorderSide? get side => _chipVariant == _ChipVariant.flat
? isEnabled
? ${border(color(TokenAssistChip.flatOutlineColor, _colorSchemePrefix), width: TokenAssistChip.flatOutlineWidth)}
: ${border(colorWithOpacity(TokenAssistChip.flatDisabledOutlineColor, TokenAssistChip.flatDisabledOutlineOpacity, _colorSchemePrefix))}
? ${border(color(TokenAssistChip.flatOutlineColor), width: TokenAssistChip.flatOutlineWidth)}
: ${border(colorWithOpacity(TokenAssistChip.flatDisabledOutlineColor, TokenAssistChip.flatDisabledOutlineOpacity))}
: const BorderSide(color: Colors.transparent);

@override
IconThemeData? get iconTheme => IconThemeData(
color: isEnabled
? ${color(TokenAssistChip.withIconIconColor, _colorSchemePrefix)}
: ${color(TokenAssistChip.withIconDisabledIconColor, _colorSchemePrefix)},
? ${color(TokenAssistChip.withIconIconColor)}
: ${color(TokenAssistChip.withIconDisabledIconColor)},
size: ${TokenAssistChip.withIconIconSize},
);

Expand Down
16 changes: 8 additions & 8 deletions packages/material_ui/tool/gen_defaults/templates/app_bar_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ class $className extends AppBarThemeData {
late final TextTheme _textTheme = _theme.textTheme;

@override
Color? get backgroundColor => ${color(TokenAppBar.containerColor, '_colors')};
Color? get backgroundColor => ${color(TokenAppBar.containerColor)};

@override
Color? get foregroundColor => ${color(TokenAppBar.titleColor, '_colors')};
Color? get foregroundColor => ${color(TokenAppBar.titleColor)};

@override
Color? get shadowColor => Colors.transparent;
Expand All @@ -48,13 +48,13 @@ class $className extends AppBarThemeData {

@override
IconThemeData? get iconTheme => IconThemeData(
color: ${color(TokenAppBar.leadingIconColor, '_colors')},
color: ${color(TokenAppBar.leadingIconColor)},
size: ${number(TokenAppBar.iconSize)},
);

@override
IconThemeData? get actionsIconTheme => IconThemeData(
color: ${color(TokenAppBar.trailingIconColor, '_colors')},
color: ${color(TokenAppBar.trailingIconColor)},
size: ${number(TokenAppBar.iconSize)},
);

Expand Down Expand Up @@ -85,11 +85,11 @@ class _MediumScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {

@override
TextStyle? get collapsedTextStyle =>
_textTheme.titleLarge?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});
_textTheme.titleLarge?.apply(color: ${color(TokenAppBar.titleColor)});

@override
TextStyle? get expandedTextStyle =>
_textTheme.headlineSmall?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});
_textTheme.headlineSmall?.apply(color: ${color(TokenAppBar.titleColor)});

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 20);
Expand All @@ -108,11 +108,11 @@ class _LargeScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {

@override
TextStyle? get collapsedTextStyle =>
_textTheme.titleLarge?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});
_textTheme.titleLarge?.apply(color: ${color(TokenAppBar.titleColor)});

@override
TextStyle? get expandedTextStyle =>
_textTheme.headlineMedium?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});
_textTheme.headlineMedium?.apply(color: ${color(TokenAppBar.titleColor)});

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 28);
Expand Down
4 changes: 2 additions & 2 deletions packages/material_ui/tool/gen_defaults/templates/badge_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ class $className extends BadgeThemeData {
late final ColorScheme _colors = _theme.colorScheme;

@override
Color? get backgroundColor => ${color(TokenBadge.color, '_colors')};
Color? get backgroundColor => ${color(TokenBadge.color)};

@override
Color? get textColor => ${color(TokenBadge.largeLabelTextColor, '_colors')};
Color? get textColor => ${color(TokenBadge.largeLabelTextColor)};

@override
TextStyle? get textStyle => ${textStyle(TokenBadge.largeLabelTextType, 'Theme.of(context).textTheme')};
Expand Down
4 changes: 2 additions & 2 deletions packages/material_ui/tool/gen_defaults/templates/banner_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ class $className extends MaterialBannerThemeData {
late final TextTheme _textTheme = Theme.of(context).textTheme;

@override
Color? get backgroundColor => ${color(TokenBanner.containerColor, '_colors')};
Color? get backgroundColor => ${color(TokenBanner.containerColor)};

@override
Color? get surfaceTintColor => Colors.transparent;

@override
Color? get dividerColor => ${color(TokenDivider.color, '_colors')};
Color? get dividerColor => ${color(TokenDivider.color)};

@override
TextStyle? get contentTextStyle => ${textStyle(TokenBanner.supportingTextType, '_textTheme')};
Expand Down
4 changes: 2 additions & 2 deletions packages/material_ui/tool/gen_defaults/templates/bottom_sheet_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class $className extends BottomSheetThemeData {
late final ColorScheme _colors = Theme.of(context).colorScheme;

@override
Color? get backgroundColor => ${color(TokenSheetBottom.dockedContainerColor, '_colors')};
Color? get backgroundColor => ${color(TokenSheetBottom.dockedContainerColor)};

@override
Color? get surfaceTintColor => Colors.transparent;
Expand All @@ -39,7 +39,7 @@ class $className extends BottomSheetThemeData {
Color? get shadowColor => Colors.transparent;

@override
Color? get dragHandleColor => ${color(TokenSheetBottom.dockedDragHandleColor, '_colors')};
Color? get dragHandleColor => ${color(TokenSheetBottom.dockedDragHandleColor)};

@override
Size? get dragHandleSize => const Size(${number(TokenSheetBottom.dockedDragHandleWidth)}, ${number(TokenSheetBottom.dockedDragHandleHeight)});
Expand Down
36 changes: 18 additions & 18 deletions packages/material_ui/tool/gen_defaults/templates/button_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,20 +146,20 @@ class ButtonTemplateM3 extends TokenTemplateM3 {
return '''
WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.disabled)) {
return ${colorWithOpacity(TokenButton.disabledContainerColor, _legacyDisabledContainerOpacity, '_colors')};
return ${colorWithOpacity(TokenButton.disabledContainerColor, _legacyDisabledContainerOpacity)};
}
return ${color(containerColor, '_colors')};
return ${color(containerColor)};
})''';
}

String get _shadowColor {
return switch (_variant) {
_ButtonVariant.elevated =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonElevated.containerShadowColor, '_colors')})',
'MaterialStatePropertyAll<Color>(${color(TokenButtonElevated.containerShadowColor)})',
_ButtonVariant.filled =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonFilled.containerShadowColor, '_colors')})',
'MaterialStatePropertyAll<Color>(${color(TokenButtonFilled.containerShadowColor)})',
_ButtonVariant.filledTonal =>
'MaterialStatePropertyAll<Color>(${color(TokenButtonTonal.containerShadowColor, '_colors')})',
'MaterialStatePropertyAll<Color>(${color(TokenButtonTonal.containerShadowColor)})',
Comment thread
QuncCccccc marked this conversation as resolved.
_ButtonVariant.outlined ||
_ButtonVariant.text => 'const MaterialStatePropertyAll<Color>(Colors.transparent)',
};
Expand Down Expand Up @@ -196,12 +196,12 @@ WidgetStateProperty.resolveWith((Set<WidgetState> states) {
WidgetStateProperty<BorderSide>? get side =>
WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(color: ${colorWithOpacity(TokenButton.disabledContainerColor, _legacyDisabledContainerOpacity, '_colors')});
return BorderSide(color: ${colorWithOpacity(TokenButton.disabledContainerColor, _legacyDisabledContainerOpacity)});
}
if (states.contains(WidgetState.focused)) {
return BorderSide(color: ${color(TokenColorRole.primary, '_colors')});
return BorderSide(color: ${color(TokenColorRole.primary)});
}
return BorderSide(color: ${color(TokenColorRole.outline, '_colors')});
return BorderSide(color: ${color(TokenColorRole.outline)});
Comment thread
QuncCccccc marked this conversation as resolved.
});''';
}

Expand Down Expand Up @@ -230,22 +230,22 @@ class $className extends ButtonStyle {
WidgetStateProperty<Color?>? get foregroundColor =>
WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.disabled)) {
return ${colorWithOpacity(TokenButton.disabledLabelTextColor, TokenButton.disabledLabelTextOpacity, '_colors')};
return ${colorWithOpacity(TokenButton.disabledLabelTextColor, TokenButton.disabledLabelTextOpacity)};
}
return ${color(_labelTextColor, '_colors')};
return ${color(_labelTextColor)};
});

@override
WidgetStateProperty<Color?>? get overlayColor =>
WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.pressed)) {
return ${colorWithOpacity(_stateLayerColor, _pressedStateLayerOpacity, '_colors')};
return ${colorWithOpacity(_stateLayerColor, _pressedStateLayerOpacity)};
}
if (states.contains(WidgetState.hovered)) {
return ${colorWithOpacity(_stateLayerColor, _hoveredStateLayerOpacity, '_colors')};
return ${colorWithOpacity(_stateLayerColor, _hoveredStateLayerOpacity)};
}
if (states.contains(WidgetState.focused)) {
return ${colorWithOpacity(_stateLayerColor, _focusedStateLayerOpacity, '_colors')};
return ${colorWithOpacity(_stateLayerColor, _focusedStateLayerOpacity)};
}
return null;
});
Expand Down Expand Up @@ -277,18 +277,18 @@ class $className extends ButtonStyle {
WidgetStateProperty<Color>? get iconColor {
return WidgetStateProperty.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.disabled)) {
return ${colorWithOpacity(TokenButton.disabledIconColor, TokenButton.disabledIconOpacity, '_colors')};
return ${colorWithOpacity(TokenButton.disabledIconColor, TokenButton.disabledIconOpacity)};
}
if (states.contains(WidgetState.pressed)) {
return ${color(_iconColor, '_colors')};
return ${color(_iconColor)};
}
if (states.contains(WidgetState.hovered)) {
return ${color(_iconColor, '_colors')};
return ${color(_iconColor)};
}
if (states.contains(WidgetState.focused)) {
return ${color(_iconColor, '_colors')};
return ${color(_iconColor)};
}
return ${color(_iconColor, '_colors')};
return ${color(_iconColor)};
Comment thread
QuncCccccc marked this conversation as resolved.
});
}

Expand Down
6 changes: 3 additions & 3 deletions packages/material_ui/tool/gen_defaults/templates/card_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class CardTemplateM3 extends TokenTemplateM3 {
}
return '''
$cardShape.copyWith(
side: ${border(color(TokenOutlinedCard.outlineColor, '_colors'))},
side: ${border(color(TokenOutlinedCard.outlineColor))},
)''';
}

Expand All @@ -77,10 +77,10 @@ class $className extends CardThemeData {
late final ColorScheme _colors = Theme.of(context).colorScheme;

@override
Color? get color => ${color(_containerColor, '_colors')};
Color? get color => ${color(_containerColor)};

@override
Color? get shadowColor => ${color(_containerShadowColor, '_colors')};
Color? get shadowColor => ${color(_containerShadowColor)};

@override
Color? get surfaceTintColor => Colors.transparent;
Expand Down
4 changes: 2 additions & 2 deletions packages/material_ui/tool/gen_defaults/templates/template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ abstract class TokenTemplate {
String number(num value) => value.toString();

/// Generates a [ColorScheme] color expression for the given token.
String color(TokenColorRole role, String prefix) {
String color(TokenColorRole role, [String prefix = '_colors']) {
final String colorName = switch (role) {
TokenColorRole.inverseOnSurface => 'onInverseSurface',
_ => role.name,
Expand All @@ -111,7 +111,7 @@ abstract class TokenTemplate {
}

/// Generates a color expression with opacity applied.
String colorWithOpacity(TokenColorRole role, double opacity, String prefix) {
String colorWithOpacity(TokenColorRole role, double opacity, [String prefix = '_colors']) {
final String colorExpression = color(role, prefix);
if (opacity == 1.0) {
return colorExpression;
Expand Down
23 changes: 11 additions & 12 deletions packages/material_ui/tool/gen_defaults/test/gen_defaults_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,9 @@ void main() {

test('color generates color expression', () {
final template = IconButtonTemplateM3(testPath());
expect(template.color(TokenColorRole.onSurface, '_colors'), '_colors.onSurface');
expect(
template.color(TokenColorRole.inverseOnSurface, '_colors'),
'_colors.onInverseSurface',
);
expect(template.color(TokenColorRole.onSurface), '_colors.onSurface');
expect(template.color(TokenColorRole.inverseOnSurface), '_colors.onInverseSurface');
expect(template.color(TokenColorRole.onSurface, '_customColors'), '_customColors.onSurface');
});

test('textStyle generates text name', () {
Expand All @@ -138,31 +136,32 @@ void main() {
test('M3 colorWithOpacity generates color expression with opacity', () {
final template = IconButtonTemplateM3(testPath());
expect(
template.colorWithOpacity(TokenColorRole.onSurface, 0.12, '_colors'),
template.colorWithOpacity(TokenColorRole.onSurface, 0.12),
'_colors.onSurface.withOpacity(0.12)',
);
expect(
template.colorWithOpacity(TokenColorRole.inverseOnSurface, 0.12, '_colors'),
template.colorWithOpacity(TokenColorRole.inverseOnSurface, 0.12),
'_colors.onInverseSurface.withOpacity(0.12)',
);
expect(template.colorWithOpacity(TokenColorRole.onSurface, 1.0), '_colors.onSurface');
expect(
template.colorWithOpacity(TokenColorRole.onSurface, 1.0, '_colors'),
'_colors.onSurface',
template.colorWithOpacity(TokenColorRole.onSurface, 0.12, '_customColors'),
'_customColors.onSurface.withOpacity(0.12)',
);
});

test('M3E colorWithOpacity uses withValues', () {
final template = IconButtonTemplateM3E(testPath());
expect(
template.colorWithOpacity(TokenColorRole.onSurface, 0.12, '_colors'),
template.colorWithOpacity(TokenColorRole.onSurface, 0.12),
'_colors.onSurface.withValues(alpha: 0.12)',
);
expect(
template.colorWithOpacity(TokenColorRole.inverseOnSurface, 0.12, '_colors'),
template.colorWithOpacity(TokenColorRole.inverseOnSurface, 0.12),
'_colors.onInverseSurface.withValues(alpha: 0.12)',
);
expect(
template.colorWithOpacity(TokenColorRole.inverseOnSurface, 1.0, '_colors'),
template.colorWithOpacity(TokenColorRole.inverseOnSurface, 1.0),
'_colors.onInverseSurface',
);
});
Expand Down
6 changes: 3 additions & 3 deletions packages/material_ui/tool/gen_defaults/test/test_fixtures/test_templates.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ class $className {

static const double height = ${TokenIconButton.height};
static const double borderRadius = ${TokenIconButton.borderRadius};
Color get iconColor => ${color(TokenIconButton.iconColor, '_colors')};
Color get iconColor => ${color(TokenIconButton.iconColor)};
Color get disabledIconColor =>
${colorWithOpacity(TokenIconButton.disabledIconColor, TokenIconButton.disabledIconOpacity, '_colors')};
${colorWithOpacity(TokenIconButton.disabledIconColor, TokenIconButton.disabledIconOpacity)};
Color get hoveredStateLayerColor =>
${colorWithOpacity(TokenIconButton.hoveredStateLayerColor, TokenIconButton.hoveredStateLayerOpacity, '_colors')};
${colorWithOpacity(TokenIconButton.hoveredStateLayerColor, TokenIconButton.hoveredStateLayerOpacity)};
OutlinedBorder get shape => ${shape(TokenIconButton.pressedContainerShape)};
}
''';
Expand Down
Loading