Unverified Commit 0a7b3d72 authored by Darren Austin's avatar Darren Austin Committed by GitHub

Updated tokens to v0.92. (#100599)

parent 3420b9c5
......@@ -32,29 +32,34 @@ Map<String, dynamic> _readTokenFile(String fileName) {
Future<void> main(List<String> args) async {
const String materialLib = 'packages/flutter/lib/src/material';
const List<String> tokenFiles = <String>[
'assist_chip.json',
'banner.json',
'button_elevated.json',
'button_filled.json',
'button_filled_tonal.json',
'button_outlined.json',
'button_text.json',
'card_elevated.json',
'card_filled.json',
'card_outlined.json',
'chip_assist.json',
'chip_filter.json',
'chip_input.json',
'chip_suggestion.json',
'color_dark.json',
'color_light.json',
'dialog.json',
'elevation.json',
'elevated_card.json',
'fab_extended_primary.json',
'fab_large_primary.json',
'fab_primary.json',
'fab_small_primary.json',
'filled_card.json',
'filter_chip.json',
'input_chip.json',
'motion.json',
'navigation_bar.json',
'navigation_rail.json',
'outlined_card.json',
'palette.json',
'shape.json',
'slider.json',
'state.json',
'suggestion_chip.json',
'text_style.json',
'top_app_bar_large.json',
'top_app_bar_medium.json',
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.banner.action.focus.label-text.color": "primary",
"md.comp.banner.action.focus.state-layer.color": "primary",
......
{
"version": "v0_92",
"md.comp.elevated-button.container.color": "surface",
"md.comp.elevated-button.container.elevation": "md.sys.elevation.level1",
"md.comp.elevated-button.container.height": 40.0,
"md.comp.elevated-button.container.shadow-color": "shadow",
"md.comp.elevated-button.container.shape": "md.sys.shape.corner.full",
"md.comp.elevated-button.container.surface-tint-layer.color": "surfaceTint",
"md.comp.elevated-button.disabled.container.color": "onSurface",
"md.comp.elevated-button.disabled.container.elevation": "md.sys.elevation.level0",
"md.comp.elevated-button.disabled.container.opacity": 0.12,
"md.comp.elevated-button.disabled.label-text.color": "onSurface",
"md.comp.elevated-button.disabled.label-text.opacity": 0.38,
"md.comp.elevated-button.focus.container.elevation": "md.sys.elevation.level1",
"md.comp.elevated-button.focus.label-text.color": "primary",
"md.comp.elevated-button.focus.state-layer.color": "primary",
"md.comp.elevated-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
"md.comp.elevated-button.hover.container.elevation": "md.sys.elevation.level2",
"md.comp.elevated-button.hover.label-text.color": "primary",
"md.comp.elevated-button.hover.state-layer.color": "primary",
"md.comp.elevated-button.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
"md.comp.elevated-button.label-text.color": "primary",
"md.comp.elevated-button.label-text.text-style": "labelLarge",
"md.comp.elevated-button.pressed.container.elevation": "md.sys.elevation.level1",
"md.comp.elevated-button.pressed.label-text.color": "primary",
"md.comp.elevated-button.pressed.state-layer.color": "primary",
"md.comp.elevated-button.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
"md.comp.elevated-button.with-icon.disabled.icon.color": "onSurface",
"md.comp.elevated-button.with-icon.disabled.icon.opacity": 0.38,
"md.comp.elevated-button.with-icon.focus.icon.color": "primary",
"md.comp.elevated-button.with-icon.hover.icon.color": "primary",
"md.comp.elevated-button.with-icon.icon.color": "primary",
"md.comp.elevated-button.with-icon.icon.size": 18.0,
"md.comp.elevated-button.with-icon.pressed.icon.color": "primary"
}
{
"version": "v0_92",
"md.comp.filled-button.container.color": "primary",
"md.comp.filled-button.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-button.container.height": 40.0,
"md.comp.filled-button.container.shadow-color": "shadow",
"md.comp.filled-button.container.shape": "md.sys.shape.corner.full",
"md.comp.filled-button.disabled.container.color": "onSurface",
"md.comp.filled-button.disabled.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-button.disabled.container.opacity": 0.12,
"md.comp.filled-button.disabled.label-text.color": "onSurface",
"md.comp.filled-button.disabled.label-text.opacity": 0.38,
"md.comp.filled-button.dragged.container.elevation": "md.sys.elevation.level3",
"md.comp.filled-button.dragged.label-text.color": "onPrimary",
"md.comp.filled-button.dragged.state-layer.color": "onPrimary",
"md.comp.filled-button.dragged.state-layer.opacity": "md.sys.state.dragged.state-layer-opacity",
"md.comp.filled-button.focus.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-button.focus.label-text.color": "onPrimary",
"md.comp.filled-button.focus.state-layer.color": "onPrimary",
"md.comp.filled-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
"md.comp.filled-button.hover.container.elevation": "md.sys.elevation.level1",
"md.comp.filled-button.hover.label-text.color": "onPrimary",
"md.comp.filled-button.hover.state-layer.color": "onPrimary",
"md.comp.filled-button.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
"md.comp.filled-button.label-text.color": "onPrimary",
"md.comp.filled-button.label-text.text-style": "labelLarge",
"md.comp.filled-button.pressed.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-button.pressed.label-text.color": "onPrimary",
"md.comp.filled-button.pressed.state-layer.color": "onPrimary",
"md.comp.filled-button.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
"md.comp.filled-button.with-icon.disabled.icon.color": "onSurface",
"md.comp.filled-button.with-icon.disabled.icon.opacity": 0.38,
"md.comp.filled-button.with-icon.dragged.icon.color": "onPrimary",
"md.comp.filled-button.with-icon.focus.icon.color": "onPrimary",
"md.comp.filled-button.with-icon.hover.icon.color": "onPrimary",
"md.comp.filled-button.with-icon.icon.color": "onPrimary",
"md.comp.filled-button.with-icon.icon.size": 18.0,
"md.comp.filled-button.with-icon.pressed.icon.color": "onPrimary"
}
{
"version": "v0_92",
"md.comp.filled-tonal-button.container.color": "secondaryContainer",
"md.comp.filled-tonal-button.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-tonal-button.container.height": 40.0,
"md.comp.filled-tonal-button.container.shadow-color": "shadow",
"md.comp.filled-tonal-button.container.shape": "md.sys.shape.corner.full",
"md.comp.filled-tonal-button.disabled.container.color": "onSurface",
"md.comp.filled-tonal-button.disabled.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-tonal-button.disabled.container.opacity": 0.12,
"md.comp.filled-tonal-button.disabled.label-text.color": "onSurface",
"md.comp.filled-tonal-button.disabled.label-text.opacity": 0.38,
"md.comp.filled-tonal-button.focus.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-tonal-button.focus.label-text.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.focus.state-layer.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
"md.comp.filled-tonal-button.hover.container.elevation": "md.sys.elevation.level1",
"md.comp.filled-tonal-button.hover.label-text.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.hover.state-layer.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
"md.comp.filled-tonal-button.label-text.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.label-text.text-style": "labelLarge",
"md.comp.filled-tonal-button.pressed.container.elevation": "md.sys.elevation.level0",
"md.comp.filled-tonal-button.pressed.label-text.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.pressed.state-layer.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
"md.comp.filled-tonal-button.with-icon.disabled.icon.color": "onSurface",
"md.comp.filled-tonal-button.with-icon.disabled.icon.opacity": 0.38,
"md.comp.filled-tonal-button.with-icon.focus.icon.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.with-icon.hover.icon.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.with-icon.icon.color": "onSecondaryContainer",
"md.comp.filled-tonal-button.with-icon.icon.size": 18.0,
"md.comp.filled-tonal-button.with-icon.pressed.icon.color": "onSecondaryContainer"
}
{
"version": "v0_92",
"md.comp.outlined-button.container.height": 40.0,
"md.comp.outlined-button.container.shape": "md.sys.shape.corner.full",
"md.comp.outlined-button.disabled.label-text.color": "onSurface",
"md.comp.outlined-button.disabled.label-text.opacity": 0.38,
"md.comp.outlined-button.disabled.outline.color": "onSurface",
"md.comp.outlined-button.disabled.outline.opacity": 0.12,
"md.comp.outlined-button.focus.label-text.color": "primary",
"md.comp.outlined-button.focus.outline.color": "primary",
"md.comp.outlined-button.focus.state-layer.color": "primary",
"md.comp.outlined-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
"md.comp.outlined-button.hover.label-text.color": "primary",
"md.comp.outlined-button.hover.outline.color": "outline",
"md.comp.outlined-button.hover.state-layer.color": "primary",
"md.comp.outlined-button.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
"md.comp.outlined-button.label-text.color": "primary",
"md.comp.outlined-button.label-text.text-style": "labelLarge",
"md.comp.outlined-button.outline.color": "outline",
"md.comp.outlined-button.outline.width": 1.0,
"md.comp.outlined-button.pressed.label-text.color": "primary",
"md.comp.outlined-button.pressed.outline.color": "outline",
"md.comp.outlined-button.pressed.state-layer.color": "primary",
"md.comp.outlined-button.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
"md.comp.outlined-button.with-icon.disabled.icon.color": "onSurface",
"md.comp.outlined-button.with-icon.disabled.icon.opacity": 0.38,
"md.comp.outlined-button.with-icon.focus.icon.color": "primary",
"md.comp.outlined-button.with-icon.hover.icon.color": "primary",
"md.comp.outlined-button.with-icon.icon.color": "primary",
"md.comp.outlined-button.with-icon.icon.size": 18.0,
"md.comp.outlined-button.with-icon.pressed.icon.color": "primary"
}
{
"version": "v0_92",
"md.comp.text-button.container.height": 40.0,
"md.comp.text-button.container.shape": "md.sys.shape.corner.full",
"md.comp.text-button.disabled.label-text.color": "onSurface",
"md.comp.text-button.disabled.label-text.opacity": 0.38,
"md.comp.text-button.focus.label-text.color": "primary",
"md.comp.text-button.focus.state-layer.color": "primary",
"md.comp.text-button.focus.state-layer.opacity": "md.sys.state.focus.state-layer-opacity",
"md.comp.text-button.hover.label-text.color": "primary",
"md.comp.text-button.hover.state-layer.color": "primary",
"md.comp.text-button.hover.state-layer.opacity": "md.sys.state.hover.state-layer-opacity",
"md.comp.text-button.label-text.color": "primary",
"md.comp.text-button.label-text.text-style": "labelLarge",
"md.comp.text-button.pressed.label-text.color": "primary",
"md.comp.text-button.pressed.state-layer.color": "primary",
"md.comp.text-button.pressed.state-layer.opacity": "md.sys.state.pressed.state-layer-opacity",
"md.comp.text-button.with-icon.disabled.icon.color": "onSurface",
"md.comp.text-button.with-icon.disabled.icon.opacity": 0.38,
"md.comp.text-button.with-icon.focus.icon.color": "primary",
"md.comp.text-button.with-icon.hover.icon.color": "primary",
"md.comp.text-button.with-icon.icon.color": "primary",
"md.comp.text-button.with-icon.icon.size": 18.0,
"md.comp.text-button.with-icon.pressed.icon.color": "primary"
}
{
"version": "v0_90",
"version": "v0_92",
"md.comp.elevated-card.container.color": "surface",
"md.comp.elevated-card.container.elevation": "md.sys.elevation.level1",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.filled-card.container.color": "surfaceVariant",
"md.comp.filled-card.container.elevation": "md.sys.elevation.level0",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.outlined-card.container.color": "surface",
"md.comp.outlined-card.container.elevation": "md.sys.elevation.level0",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.assist-chip.container.height": 32.0,
"md.comp.assist-chip.container.shape": "md.sys.shape.corner.small",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.filter-chip.container.height": 32.0,
"md.comp.filter-chip.container.shadow-color": "shadow",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.input-chip.container.elevation": "md.sys.elevation.level0",
"md.comp.input-chip.container.height": 32.0,
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.suggestion-chip.container.height": 32.0,
"md.comp.suggestion-chip.container.shape": "md.sys.shape.corner.small",
......
{
"version": "v0_90",
"version": "v0_92",
"md.sys.color.background": "md.ref.palette.neutral10",
"md.sys.color.error": "md.ref.palette.error80",
......
{
"version": "v0_90",
"version": "v0_92",
"md.sys.color.background": "md.ref.palette.neutral99",
"md.sys.color.error": "md.ref.palette.error40",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.dialog.action.focus.label-text.color": "primary",
"md.comp.dialog.action.focus.state-layer.color": "primary",
......
{
"version": "v0_90",
"version": "v0_92",
"md.sys.elevation.level0": 0.0,
"md.sys.elevation.level1": 1.0,
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.extended-fab.primary.container.color": "primaryContainer",
"md.comp.extended-fab.primary.container.elevation": "md.sys.elevation.level3",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.fab.primary.large.container.color": "primaryContainer",
"md.comp.fab.primary.large.container.elevation": "md.sys.elevation.level3",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.fab.primary.container.color": "primaryContainer",
"md.comp.fab.primary.container.elevation": "md.sys.elevation.level3",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.fab.primary.small.container.color": "primaryContainer",
"md.comp.fab.primary.small.container.elevation": "md.sys.elevation.level3",
......
{
"version": "v0_90",
"version": "v0_92",
"md.sys.motion.duration.100Ms": 100.0,
"md.sys.motion.duration.1000Ms": 1000.0,
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.navigation-bar.active.focus.icon.color": "onSecondaryContainer",
"md.comp.navigation-bar.active.focus.label-text.color": "onSurface",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.navigation-rail.active.focus.icon.color": "onSecondaryContainer",
"md.comp.navigation-rail.active.focus.label-text.color": "onSurface",
......
{
"version": "v0_90",
"version": "v0_92",
"md.ref.palette.black": "0xFF000000",
"md.ref.palette.error0": "0xFF000000",
......
{
"version": "v0_90",
"version": "v0_92",
"md.sys.shape.corner.extra-large": {
"family": "SHAPE_FAMILY_ROUNDED_CORNERS",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.slider.active.track.color": "primary",
"md.comp.slider.active.track.height": 6.0,
......
{
"version": "v0_90",
"version": "v0_92",
"md.sys.state.dragged.state-layer-opacity": 0.16,
"md.sys.state.focus.state-layer-opacity": 0.12,
......
{
"version": "v0_90",
"version": "v0_92",
"md.sys.typescale.body-large.font": "md.ref.typeface.plain",
"md.sys.typescale.body-large.line-height": 24.0,
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.top-app-bar.large.container.color": "surface",
"md.comp.top-app-bar.large.container.elevation": "md.sys.elevation.level0",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.top-app-bar.medium.container.color": "surface",
"md.comp.top-app-bar.medium.container.elevation": "md.sys.elevation.level0",
......
{
"version": "v0_90",
"version": "v0_92",
"md.comp.top-app-bar.small.container.color": "surface",
"md.comp.top-app-bar.small.container.elevation": "md.sys.elevation.level0",
......
{
"version": "v0_90",
"version": "v0_92",
"md.ref.typeface.brand": "Roboto",
"md.ref.typeface.plain": "Roboto",
......
......@@ -22,13 +22,13 @@ class _TokenDefaultsM3 extends CardTheme {
final BuildContext context;
@override
Color? get color => Theme.of(context).colorScheme.${color("md.comp.elevated-card.container")};
Color? get color => ${componentColor("md.comp.elevated-card.container")};
@override
Color? get shadowColor => Theme.of(context).colorScheme.${tokens["md.comp.elevated-card.container.shadow-color"]};
Color? get shadowColor => ${color("md.comp.elevated-card.container.shadow-color")};
@override
Color? get surfaceTintColor => Theme.of(context).colorScheme.${tokens["md.comp.elevated-card.container.surface-tint-layer.color"]};
Color? get surfaceTintColor => ${color("md.comp.elevated-card.container.surface-tint-layer.color")};
}
''';
}
......@@ -5,34 +5,36 @@
import 'template.dart';
class DialogTemplate extends TokenTemplate {
const DialogTemplate(String fileName, Map<String, dynamic> tokens) : super(fileName, tokens);
const DialogTemplate(String fileName, Map<String, dynamic> tokens)
: super(fileName, tokens,
colorSchemePrefix: '_colors.',
textThemePrefix: '_textTheme.'
);
@override
String generate() => '''
// Generated version ${tokens["version"]}
class _TokenDefaultsM3 extends DialogTheme {
_TokenDefaultsM3(this.context)
: _colors = Theme.of(context).colorScheme,
_textTheme = Theme.of(context).textTheme,
super(
: super(
alignment: Alignment.center,
elevation: ${elevation("md.comp.dialog.container")},
shape: ${shape("md.comp.dialog.container")},
);
final BuildContext context;
final ColorScheme _colors;
final TextTheme _textTheme;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
// TODO(darrenaustin): overlay should be handled by Material widget: https://github.com/flutter/flutter/issues/9160
@override
Color? get backgroundColor => ElevationOverlay.colorWithOverlay(_colors.${color("md.comp.dialog.container")}, _colors.primary, ${elevation("md.comp.dialog.container")});
Color? get backgroundColor => ElevationOverlay.colorWithOverlay(${componentColor("md.comp.dialog.container")}, _colors.primary, ${elevation("md.comp.dialog.container")});
@override
TextStyle? get titleTextStyle => _textTheme.${textStyle("md.comp.dialog.subhead")};
TextStyle? get titleTextStyle => ${textStyle("md.comp.dialog.subhead")};
@override
TextStyle? get contentTextStyle => _textTheme.${textStyle("md.comp.dialog.supporting-text")};
TextStyle? get contentTextStyle => ${textStyle("md.comp.dialog.supporting-text")};
}
''';
}
......@@ -5,16 +5,18 @@
import 'template.dart';
class FABTemplate extends TokenTemplate {
const FABTemplate(String fileName, Map<String, dynamic> tokens) : super(fileName, tokens);
const FABTemplate(String fileName, Map<String, dynamic> tokens)
: super(fileName, tokens,
colorSchemePrefix: '_colors.',
textThemePrefix: '_textTheme.',
);
@override
String generate() => '''
// Generated version ${tokens["version"]}
class _M3Defaults extends FloatingActionButtonThemeData {
_M3Defaults(this.context, this.type, this.hasChild)
: _colors = Theme.of(context).colorScheme,
_textTheme = Theme.of(context).textTheme,
super(
: super(
elevation: ${elevation("md.comp.fab.primary.container")},
focusElevation: ${elevation("md.comp.fab.primary.focus.container")},
hoverElevation: ${elevation("md.comp.fab.primary.hover.container")},
......@@ -41,16 +43,16 @@ class _M3Defaults extends FloatingActionButtonThemeData {
final BuildContext context;
final _FloatingActionButtonType type;
final bool hasChild;
final ColorScheme _colors;
final TextTheme _textTheme;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
bool get _isExtended => type == _FloatingActionButtonType.extended;
@override Color? get foregroundColor => _colors.${color("md.comp.fab.primary.icon")};
@override Color? get backgroundColor => _colors.${color("md.comp.fab.primary.container")};
@override Color? get splashColor => _colors.${color("md.comp.fab.primary.pressed.state-layer")};
@override Color? get focusColor => _colors.${color("md.comp.fab.primary.focus.state-layer")};
@override Color? get hoverColor => _colors.${color("md.comp.fab.primary.hover.state-layer")};
@override Color? get foregroundColor => ${componentColor("md.comp.fab.primary.icon")};
@override Color? get backgroundColor => ${componentColor("md.comp.fab.primary.container")};
@override Color? get splashColor => ${componentColor("md.comp.fab.primary.pressed.state-layer")};
@override Color? get focusColor => ${componentColor("md.comp.fab.primary.focus.state-layer")};
@override Color? get hoverColor => ${componentColor("md.comp.fab.primary.hover.state-layer")};
@override
ShapeBorder? get shape {
......@@ -77,7 +79,7 @@ class _M3Defaults extends FloatingActionButtonThemeData {
}
@override EdgeInsetsGeometry? get extendedPadding => EdgeInsetsDirectional.only(start: hasChild && _isExtended ? 16.0 : 20.0, end: 20.0);
@override TextStyle? get extendedTextStyle => _textTheme.${textStyle("md.comp.extended-fab.primary.label-text")};
@override TextStyle? get extendedTextStyle => ${textStyle("md.comp.extended-fab.primary.label-text")};
}
''';
}
......@@ -5,50 +5,53 @@
import 'template.dart';
class NavigationBarTemplate extends TokenTemplate {
const NavigationBarTemplate(String fileName, Map<String, dynamic> tokens) : super(fileName, tokens);
const NavigationBarTemplate(String fileName, Map<String, dynamic> tokens)
: super(fileName, tokens,
colorSchemePrefix: '_colors.',
textThemePrefix: '_textTheme.',
);
@override
String generate() => '''
// Generated version ${tokens["version"]}
class _TokenDefaultsM3 extends NavigationBarThemeData {
_TokenDefaultsM3(BuildContext context)
: _theme = Theme.of(context),
_colors = Theme.of(context).colorScheme,
super(
_TokenDefaultsM3(this.context)
: super(
height: ${tokens["md.comp.navigation-bar.container.height"]},
elevation: ${elevation("md.comp.navigation-bar.container")},
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
);
final ThemeData _theme;
final ColorScheme _colors;
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
// With Material 3, the NavigationBar uses an overlay blend for the
// default color regardless of light/dark mode. This should be handled
// in the Material widget based off of elevation, but for now we will do
// it here in the defaults.
@override Color? get backgroundColor => ElevationOverlay.colorWithOverlay(_colors.${color("md.comp.navigation-bar.container")}, _colors.primary, ${elevation("md.comp.navigation-bar.container")});
@override Color? get backgroundColor => ElevationOverlay.colorWithOverlay(${componentColor("md.comp.navigation-bar.container")}, _colors.primary, ${elevation("md.comp.navigation-bar.container")});
@override MaterialStateProperty<IconThemeData?>? get iconTheme {
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
return IconThemeData(
size: ${tokens["md.comp.navigation-bar.icon.size"]},
color: states.contains(MaterialState.selected)
? _colors.${color("md.comp.navigation-bar.active.icon")}
: _colors.${color("md.comp.navigation-bar.inactive.icon")},
? ${componentColor("md.comp.navigation-bar.active.icon")}
: ${componentColor("md.comp.navigation-bar.inactive.icon")},
);
});
}
@override Color? get indicatorColor => _colors.${color("md.comp.navigation-bar.active-indicator")};
@override Color? get indicatorColor => ${componentColor("md.comp.navigation-bar.active-indicator")};
@override ShapeBorder? get indicatorShape => ${shape("md.comp.navigation-bar.active-indicator")};
@override MaterialStateProperty<TextStyle?>? get labelTextStyle {
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
final TextStyle style = _theme.textTheme.${textStyle("md.comp.navigation-bar.label-text")}!;
final TextStyle style = ${textStyle("md.comp.navigation-bar.label-text")}!;
return style.apply(color: states.contains(MaterialState.selected)
? _colors.${color("md.comp.navigation-bar.active.label-text")}
: _colors.${color("md.comp.navigation-bar.inactive.label-text")}
? ${componentColor("md.comp.navigation-bar.active.label-text")}
: ${componentColor("md.comp.navigation-bar.inactive.label-text")}
);
});
}
......
......@@ -5,16 +5,18 @@
import 'template.dart';
class NavigationRailTemplate extends TokenTemplate {
const NavigationRailTemplate(String fileName, Map<String, dynamic> tokens) : super(fileName, tokens);
const NavigationRailTemplate(String fileName, Map<String, dynamic> tokens)
: super(fileName, tokens,
colorSchemePrefix: '_colors.',
textThemePrefix: '_textTheme.',
);
@override
String generate() => '''
// Generated version ${tokens["version"]}
class _TokenDefaultsM3 extends NavigationRailThemeData {
_TokenDefaultsM3(BuildContext context)
: _theme = Theme.of(context),
_colors = Theme.of(context).colorScheme,
super(
_TokenDefaultsM3(this.context)
: super(
elevation: ${elevation("md.comp.navigation-rail.container")},
groupAlignment: -1,
labelType: NavigationRailLabelType.none,
......@@ -23,34 +25,35 @@ class _TokenDefaultsM3 extends NavigationRailThemeData {
minExtendedWidth: 256,
);
final ThemeData _theme;
final ColorScheme _colors;
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
@override Color? get backgroundColor => _colors.${color("md.comp.navigation-rail.container")};
@override Color? get backgroundColor => ${componentColor("md.comp.navigation-rail.container")};
@override TextStyle? get unselectedLabelTextStyle {
return _theme.textTheme.${textStyle("md.comp.navigation-rail.label-text")}!.copyWith(color: _colors.${color("md.comp.navigation-rail.inactive.focus.label-text")});
return ${textStyle("md.comp.navigation-rail.label-text")}!.copyWith(color: ${componentColor("md.comp.navigation-rail.inactive.focus.label-text")});
}
@override TextStyle? get selectedLabelTextStyle {
return _theme.textTheme.${textStyle("md.comp.navigation-rail.label-text")}!.copyWith(color: _colors.${color("md.comp.navigation-rail.active.focus.label-text")});
return ${textStyle("md.comp.navigation-rail.label-text")}!.copyWith(color: ${componentColor("md.comp.navigation-rail.active.focus.label-text")});
}
@override IconThemeData? get unselectedIconTheme {
return IconThemeData(
size: ${tokens["md.comp.navigation-rail.icon.size"]},
color: _colors.${color("md.comp.navigation-rail.inactive.icon")},
color: ${componentColor("md.comp.navigation-rail.inactive.icon")},
);
}
@override IconThemeData? get selectedIconTheme {
return IconThemeData(
size: ${tokens["md.comp.navigation-rail.icon.size"]},
color: _colors.${color("md.comp.navigation-rail.active.icon")},
color: ${componentColor("md.comp.navigation-rail.active.icon")},
);
}
@override Color? get indicatorColor => _colors.${color("md.comp.navigation-rail.active-indicator")};
@override Color? get indicatorColor => ${componentColor("md.comp.navigation-rail.active-indicator")};
}
''';
......
......@@ -5,7 +5,10 @@
import 'dart:io';
abstract class TokenTemplate {
const TokenTemplate(this.fileName, this.tokens);
const TokenTemplate(this.fileName, this.tokens, {
this.colorSchemePrefix = 'Theme.of(context).colorScheme.',
this.textThemePrefix = 'Theme.of(context).textTheme.'
});
static const String beginGeneratedComment = '''
......@@ -27,6 +30,8 @@ abstract class TokenTemplate {
final String fileName;
final Map<String, dynamic> tokens;
final String colorSchemePrefix;
final String textThemePrefix;
/// Replace or append the contents of the file with the text from [generate].
///
......@@ -54,16 +59,44 @@ abstract class TokenTemplate {
/// bottom of the file.
String generate();
/// Generate a [ColorScheme] color name for the given component token.
/// Generate a [ColorScheme] color name for the given token.
///
/// If there is an opacity specified for the given component, it will
/// apply that opacity to the component's color.
String color(String componentToken) {
final String tokenColor = '$componentToken.color';
/// If there is a value for the given token, this will return
/// the value prepended with [colorSchemePrefix].
///
/// Otherwise it will return 'null'.
///
/// See also:
/// * [componentColor], that provides support for an optional opacity.
String color(String colorToken) {
return tokens.containsKey(colorToken)
? '$colorSchemePrefix${tokens[colorToken]}'
: 'null';
}
/// Generate a [ColorScheme] color name for the given component's color
/// with opacity if available.
///
/// If there is a value for the given component's color, this will return
/// the value prepended with [colorSchemePrefix]. If there is also
/// an opacity specified for the component, then the returned value
/// will include this opacity calculation.
///
/// If there is no value for the component's color, 'null' will be returned.
///
/// See also:
/// * [color], that provides support for looking up a raw color token.
String componentColor(String componentToken) {
final String colorToken = '$componentToken.color';
if (!tokens.containsKey(colorToken))
return 'null';
String value = color(colorToken);
final String tokenOpacity = '$componentToken.opacity';
String value = '${tokens[tokenColor]!}';
if (tokens.containsKey(tokenOpacity)) {
final String opacity = tokens[tokens[tokenOpacity]!]!.toString();
final dynamic opacityValue = tokens[tokenOpacity];
final String opacity = opacityValue is double
? opacityValue.toString()
: tokens[tokens[tokenOpacity]!]!.toString();
value += '.withOpacity($opacity)';
}
return value;
......@@ -96,8 +129,18 @@ abstract class TokenTemplate {
return '';
}
/// Generate a [BorderSide] for the given component.
String border(String componentToken) {
if (!tokens.containsKey('$componentToken.color')) {
return 'null';
}
final String borderColor = componentColor(componentToken);
final double width = tokens['$componentToken.width'] as double;
return 'BorderSide(color: $borderColor${width != 1.0 ? ", width: $width" : ""})';
}
/// Generate a [TextTheme] text style name for the given component token.
String textStyle(String componentToken) {
return tokens['$componentToken.text-style']!.toString();
return '$textThemePrefix${tokens["$componentToken.text-style"]!.toString()}';
}
}
......@@ -212,7 +212,7 @@ class _DefaultsM2 extends CardTheme {
// These defaults are generated from the Material Design Token
// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
// Generated version v0_90
// Generated version v0_92
class _TokenDefaultsM3 extends CardTheme {
const _TokenDefaultsM3(this.context)
: super(
......
......@@ -1201,20 +1201,18 @@ class _DefaultsM2 extends DialogTheme {
// These defaults are generated from the Material Design Token
// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
// Generated version v0_90
// Generated version v0_92
class _TokenDefaultsM3 extends DialogTheme {
_TokenDefaultsM3(this.context)
: _colors = Theme.of(context).colorScheme,
_textTheme = Theme.of(context).textTheme,
super(
: super(
alignment: Alignment.center,
elevation: 6.0,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(28.0), topRight: Radius.circular(28.0), bottomLeft: Radius.circular(28.0), bottomRight: Radius.circular(28.0))),
);
final BuildContext context;
final ColorScheme _colors;
final TextTheme _textTheme;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
// TODO(darrenaustin): overlay should be handled by Material widget: https://github.com/flutter/flutter/issues/9160
@override
......
......@@ -157,7 +157,7 @@ class _ElevationOpacity {
// These defaults are generated from the Material Design Token
// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
// Generated version v0_90
// Generated version v0_92
// Surface tint opacities based on elevations according to the
// Material Design 3 specification:
......
......@@ -773,12 +773,10 @@ class _M2Defaults extends FloatingActionButtonThemeData {
// These defaults are generated from the Material Design Token
// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
// Generated version v0_90
// Generated version v0_92
class _M3Defaults extends FloatingActionButtonThemeData {
_M3Defaults(this.context, this.type, this.hasChild)
: _colors = Theme.of(context).colorScheme,
_textTheme = Theme.of(context).textTheme,
super(
: super(
elevation: 6.0,
focusElevation: 6.0,
hoverElevation: 8.0,
......@@ -805,8 +803,8 @@ class _M3Defaults extends FloatingActionButtonThemeData {
final BuildContext context;
final _FloatingActionButtonType type;
final bool hasChild;
final ColorScheme _colors;
final TextTheme _textTheme;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
bool get _isExtended => type == _FloatingActionButtonType.extended;
......
......@@ -12,6 +12,7 @@ import 'material.dart';
import 'material_localizations.dart';
import 'material_state.dart';
import 'navigation_bar_theme.dart';
import 'text_theme.dart';
import 'theme.dart';
import 'tooltip.dart';
......@@ -1216,19 +1217,18 @@ class _Defaults extends NavigationBarThemeData {
// These defaults are generated from the Material Design Token
// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
// Generated version v0_90
// Generated version v0_92
class _TokenDefaultsM3 extends NavigationBarThemeData {
_TokenDefaultsM3(BuildContext context)
: _theme = Theme.of(context),
_colors = Theme.of(context).colorScheme,
super(
_TokenDefaultsM3(this.context)
: super(
height: 80.0,
elevation: 3.0,
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
);
final ThemeData _theme;
final ColorScheme _colors;
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
// With Material 3, the NavigationBar uses an overlay blend for the
// default color regardless of light/dark mode. This should be handled
......@@ -1252,7 +1252,7 @@ class _TokenDefaultsM3 extends NavigationBarThemeData {
@override MaterialStateProperty<TextStyle?>? get labelTextStyle {
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
final TextStyle style = _theme.textTheme.labelMedium!;
final TextStyle style = _textTheme.labelMedium!;
return style.apply(color: states.contains(MaterialState.selected)
? _colors.onSurface
: _colors.onSurfaceVariant
......
......@@ -12,6 +12,7 @@ import 'material.dart';
import 'material_localizations.dart';
import 'navigation_bar.dart';
import 'navigation_rail_theme.dart';
import 'text_theme.dart';
import 'theme.dart';
/// A material widget that is meant to be displayed at the left or right of an
......@@ -951,12 +952,10 @@ class _DefaultsM2 extends NavigationRailThemeData {
// These defaults are generated from the Material Design Token
// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
// Generated version v0_90
// Generated version v0_92
class _TokenDefaultsM3 extends NavigationRailThemeData {
_TokenDefaultsM3(BuildContext context)
: _theme = Theme.of(context),
_colors = Theme.of(context).colorScheme,
super(
_TokenDefaultsM3(this.context)
: super(
elevation: 0.0,
groupAlignment: -1,
labelType: NavigationRailLabelType.none,
......@@ -965,17 +964,18 @@ class _TokenDefaultsM3 extends NavigationRailThemeData {
minExtendedWidth: 256,
);
final ThemeData _theme;
final ColorScheme _colors;
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
late final TextTheme _textTheme = Theme.of(context).textTheme;
@override Color? get backgroundColor => _colors.surface;
@override TextStyle? get unselectedLabelTextStyle {
return _theme.textTheme.labelMedium!.copyWith(color: _colors.onSurface);
return _textTheme.labelMedium!.copyWith(color: _colors.onSurface);
}
@override TextStyle? get selectedLabelTextStyle {
return _theme.textTheme.labelMedium!.copyWith(color: _colors.onSurface);
return _textTheme.labelMedium!.copyWith(color: _colors.onSurface);
}
@override IconThemeData? get unselectedIconTheme {
......
......@@ -729,7 +729,7 @@ class Typography with Diagnosticable {
// These defaults are generated from the Material Design Token
// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
// Generated version v0_90
// Generated version v0_92
class _M3Typography {
_M3Typography._();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment