Skip to content

Commit 989d574

Browse files
pekingmeraajkumars
pekingme
authored and
raajkumars
committed
[Color] Added tonal surface color theme attributes and updated themes.
PiperOrigin-RevId: 492316991
1 parent ee52406 commit 989d574

File tree

9 files changed

+137
-29
lines changed

9 files changed

+137
-29
lines changed

‎docs/theming/Color.md‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,19 @@ brand color:
3333

3434
Color Role | Android Attribute | Light Theme Baseline (Dynamic) Color | Dark Theme Baseline (Dynamic) Color
3535
---------------------- | ------------------------- | ------------------------------------ | -----------------------------------
36-
Primary | colorPrimary | #ff6750a4</br>(system_accent1_600) | #ffd0bcff</br>(system_accent1_200)
37-
On Primary | colorOnPrimary | white</br>(system_accent1_0) | #ff381e72</br>(system_accent1_800)
38-
Primary Container | colorPrimaryContainer | #ffeaddff</br>(system_accent1_100) | #ff4f378b</br>(system_accent1_700)
39-
On Primary Container | colorOnPrimaryContainer | #ff21005d</br>(system_accent1_900) | #ffeaddff</br>(system_accent1_100)
40-
Inverse Primary | colorPrimaryInverse | #ffd0bcff</br>(system_accent1_200) | #ff6750a4</br>(system_accent1_600)
41-
Secondary | colorSecondary | #ff625b71</br>(system_accent2_600) | #ffccc2dc</br>(system_accent2_200)
42-
On Secondary | colorOnSecondary | white</br>(system_accent2_0) | #ff332d41</br>(system_accent2_800)
43-
Secondary Container | colorSecondaryContainer | #ffe8def8</br>(system_accent2_100) | #ff4a4458</br>(system_accent2_700)
44-
On Secondary Container | colorOnSecondaryContainer | #ff1d192b</br>(system_accent2_900) | #ffe8def8</br>(system_accent2_100)
45-
Tertiary | colorTertiary | #ff7d5260</br>(system_accent3_600) | #ffefb8c8</br>(system_accent3_200)
46-
On Tertiary | colorOnTertiary | white</br>(system_accent3_0) | #ff492532</br>(system_accent3_800)
47-
Tertiary Container | colorTertiaryContainer | #ffffd8e4</br>(system_accent3_100) | #ff633b48</br>(system_accent3_700)
48-
On Tertiary Container | colorOnTertiaryContainer | #ff31111d</br>(system_accent3_900) | #ffffd8e4</br>(system_accent3_100)
36+
Primary | colorPrimary | primary40</br>(system_accent1_600) | primary80</br>(system_accent1_200)
37+
On Primary | colorOnPrimary | white</br>(system_accent1_0) | primary20</br>(system_accent1_800)
38+
Primary Container | colorPrimaryContainer | primary90</br>(system_accent1_100) | primary30</br>(system_accent1_700)
39+
On Primary Container | colorOnPrimaryContainer | primary10</br>(system_accent1_900) | primary90</br>(system_accent1_100)
40+
Inverse Primary | colorPrimaryInverse | primary80</br>(system_accent1_200) | primary40</br>(system_accent1_600)
41+
Secondary | colorSecondary | secondary40</br>(system_accent2_600) | secondary80</br>(system_accent2_200)
42+
On Secondary | colorOnSecondary | white</br>(system_accent2_0) | secondary20</br>(system_accent2_800)
43+
Secondary Container | colorSecondaryContainer | secondary90</br>(system_accent2_100) | secondary30</br>(system_accent2_700)
44+
On Secondary Container | colorOnSecondaryContainer | secondary10</br>(system_accent2_900) | secondary90</br>(system_accent2_100)
45+
Tertiary | colorTertiary | tertiary40</br>(system_accent3_600) | tertiary80</br>(system_accent3_200)
46+
On Tertiary | colorOnTertiary | white</br>(system_accent3_0) | tertiary20</br>(system_accent3_800)
47+
Tertiary Container | colorTertiaryContainer | tertiary90</br>(system_accent3_100) | tertiary30</br>(system_accent3_700)
48+
On Tertiary Container | colorOnTertiaryContainer | tertiary10</br>(system_accent3_900) | tertiary90</br>(system_accent3_100)
4949

5050
<!-- Auto-generated accent color table ends. Do not edit below or remove this comment. -->
5151

@@ -58,22 +58,29 @@ combinations. These additional color attributes are as follows:
5858

5959
<!-- Auto-generated additional color table starts. Do not edit below or remove this comment. -->
6060

61-
Color Role | Android Attribute | Light Theme Baseline (Dynamic) Color | Dark Theme Baseline (Dynamic) Color
62-
------------------ | ----------------------- | ------------------------------------ | -----------------------------------
63-
Error | colorError | #ffb3261e</br>(Same) | #fff2b8b5</br>(Same)
64-
On Error | colorOnError | white</br>(Same) | #ff601410</br>(Same)
65-
Error Container | colorErrorContainer | #fff9dedc</br>(Same) | #ff8c1d18</br>(Same)
66-
On Error Container | colorOnErrorContainer | #ff410e0b</br>(Same) | #fff9dedc</br>(Same)
67-
Outline | colorOutline | #ff79747e</br>(system_neutral2_500) | #ff938f99</br>(system_neutral2_400)
68-
Outline Variant | colorOutlineVariant | #ffcac4d0</br>(system_neutral2_200) | #ff49454f</br>(system_neutral2_700)
69-
Background | android:colorBackground | #fffffbfe</br>(system_neutral1_10) | #ff1c1b1f</br>(system_neutral1_900)
70-
On Background | colorOnBackground | #ff1c1b1f</br>(system_neutral1_900) | #ffe6e1e5</br>(system_neutral1_100)
71-
Surface | colorSurface | #fffffbfe</br>(system_neutral1_10) | #ff1c1b1f</br>(system_neutral1_900)
72-
On Surface | colorOnSurface | #ff1c1b1f</br>(system_neutral1_900) | #ffe6e1e5</br>(system_neutral1_100)
73-
Surface Variant | colorSurfaceVariant | #ffe7e0ec</br>(system_neutral2_100) | #ff49454f</br>(system_neutral2_700)
74-
On Surface Variant | colorOnSurfaceVariant | #ff49454f</br>(system_neutral2_700) | #ffcac4d0</br>(system_neutral2_200)
75-
Inverse Surface | colorSurfaceInverse | #ff313033</br>(system_neutral1_800) | #ffe6e1e5</br>(system_neutral1_100)
76-
Inverse On Surface | colorOnSurfaceInverse | #fff4eff4</br>(system_neutral1_50) | #ff313033</br>(system_neutral1_800)
61+
Color Role | Android Attribute | Light Theme Baseline (Dynamic) Color | Dark Theme Baseline (Dynamic) Color
62+
------------------------- | ---------------------------- | ------------------------------------------------ | -----------------------------------
63+
Error | colorError | error40</br>(Same) | error80</br>(Same)
64+
On Error | colorOnError | white</br>(Same) | error20</br>(Same)
65+
Error Container | colorErrorContainer | error90</br>(Same) | error30</br>(Same)
66+
On Error Container | colorOnErrorContainer | error10</br>(Same) | error90</br>(Same)
67+
Outline | colorOutline | neutral_variant50</br>(system_neutral2_500) | neutral_variant60</br>(system_neutral2_400)
68+
Outline Variant | colorOutlineVariant | neutral_variant80</br>(system_neutral2_200) | neutral_variant30</br>(system_neutral2_700)
69+
Background | android:colorBackground | primary99</br>(system_neutral1_10) | neutral10</br>(system_neutral1_900)
70+
On Background | colorOnBackground | neutral10</br>(system_neutral1_900) | neutral90</br>(system_neutral1_100)
71+
Surface | colorSurface | primary99</br>(system_neutral1_10) | neutral10</br>(system_neutral1_900)
72+
On Surface | colorOnSurface | neutral10</br>(system_neutral1_900) | neutral90</br>(system_neutral1_100)
73+
Surface Variant | colorSurfaceVariant | neutral_variant90</br>(system_neutral2_100) | neutral_variant30</br>(system_neutral2_700)
74+
On Surface Variant | colorOnSurfaceVariant | neutral_variant30</br>(system_neutral2_700) | neutral_variant80</br>(system_neutral2_200)
75+
Inverse Surface | colorSurfaceInverse | neutral24</br>(system_neutral1_800) | neutral90</br>(system_neutral1_100)
76+
Inverse On Surface | colorOnSurfaceInverse | neutral95</br>(system_neutral1_50) | neutral24</br>(system_neutral1_800)
77+
Surface Bright | colorSurfaceBright | neutral98</br>(m3_ref_palette_dynamic_neutral98) | neutral24</br>(m3_ref_palette_dynamic_neutral24)
78+
Surface Dim | colorSurfaceDim | neutral87</br>(m3_ref_palette_dynamic_neutral87) | neutral6</br>(m3_ref_palette_dynamic_neutral6)
79+
Surface Container | colorSurfaceContainer | neutral94</br>(m3_ref_palette_dynamic_neutral94) | neutral12</br>(m3_ref_palette_dynamic_neutral12)
80+
Surface Container Low | colorSurfaceContainerLow | neutral96</br>(m3_ref_palette_dynamic_neutral96) | neutral10</br>(system_neutral1_900)
81+
Surface Container Lowest | colorSurfaceContainerLowest | white</br>(system_neutral1_0) | neutral4</br>(m3_ref_palette_dynamic_neutral4)
82+
Surface Container High | colorSurfaceContainerHigh | neutral92</br>(m3_ref_palette_dynamic_neutral92) | neutral17</br>(m3_ref_palette_dynamic_neutral17)
83+
Surface Container Highest | colorSurfaceContainerHighest | neutral90</br>(system_neutral1_100) | neutral24</br>(m3_ref_palette_dynamic_neutral22)
7784

7885
<!-- Auto-generated additional color table ends. Do not edit below or remove this comment. -->
7986

‎lib/java/com/google/android/material/color/res-public/values/public.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@
3939
<public name="colorSurfaceInverse" type="attr"/>
4040
<public name="colorOnSurfaceInverse" type="attr"/>
4141

42+
<public name="colorSurfaceBright" type="attr"/>
43+
<public name="colorSurfaceDim" type="attr"/>
44+
<public name="colorSurfaceContainerHighest" type="attr"/>
45+
<public name="colorSurfaceContainerHigh" type="attr"/>
46+
<public name="colorSurfaceContainer" type="attr"/>
47+
<public name="colorSurfaceContainerLow" type="attr"/>
48+
<public name="colorSurfaceContainerLowest" type="attr"/>
49+
4250
<public name="colorOutline" type="attr"/>
4351
<public name="colorOutlineVariant" type="attr"/>
4452

‎lib/java/com/google/android/material/color/res/values/attrs.xml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,22 @@
7070
<!-- The "on surface" inverse color, useful for inverted backgrounds. -->
7171
<attr name="colorOnSurfaceInverse" format="color"/>
7272

73+
<!-- Tonal surface color roles. -->
74+
<!-- The surface color which always stay the brightest in either dark or light theme. -->
75+
<attr name="colorSurfaceBright" format="color"/>
76+
<!-- The surface color which always stay the dimmest in either dark or light theme. -->
77+
<attr name="colorSurfaceDim" format="color"/>
78+
<!-- The container color of surface, which replaces the previous surface at elevation level 2. -->
79+
<attr name="colorSurfaceContainer" format="color"/>
80+
<!-- The container color of surface slightly elevated, which replaces the previous surface at elevation level 3. -->
81+
<attr name="colorSurfaceContainerHigh" format="color"/>
82+
<!-- The container color of surface the most elevated, which replaces the previous surface variant. -->
83+
<attr name="colorSurfaceContainerHighest" format="color"/>
84+
<!-- The container color of surface slightly lowered, which replaces the previous surface at elevation level 1. -->
85+
<attr name="colorSurfaceContainerLow" format="color"/>
86+
<!-- The container color of surface the most lowered. -->
87+
<attr name="colorSurfaceContainerLowest" format="color"/>
88+
7389
<!-- A color meant to be used in element outlines. -->
7490
<attr name="colorOutline" format="color"/>
7591
<!-- A color meant to be used in element outlines on the surface-variant color. -->

‎lib/java/com/google/android/material/dialog/res/values/themes_base.xml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,13 @@
4444
<item name="colorOnSurfaceVariant">@color/m3_sys_color_light_on_surface_variant</item>
4545
<item name="colorSurfaceInverse">@color/m3_sys_color_light_inverse_surface</item>
4646
<item name="colorOnSurfaceInverse">@color/m3_sys_color_light_inverse_on_surface</item>
47+
<item name="colorSurfaceBright">@color/m3_sys_color_light_surface_bright</item>
48+
<item name="colorSurfaceDim">@color/m3_sys_color_light_surface_dim</item>
49+
<item name="colorSurfaceContainer">@color/m3_sys_color_light_surface_container</item>
50+
<item name="colorSurfaceContainerLow">@color/m3_sys_color_light_surface_container_low</item>
51+
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_light_surface_container_high</item>
52+
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_light_surface_container_lowest</item>
53+
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_light_surface_container_highest</item>
4754
<item name="colorOutline">@color/m3_sys_color_light_outline</item>
4855
<item name="colorOutlineVariant">@color/m3_sys_color_light_outline_variant</item>
4956
<item name="colorError">@color/m3_sys_color_light_error</item>
@@ -283,6 +290,13 @@
283290
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dark_on_surface_variant</item>
284291
<item name="colorSurfaceInverse">@color/m3_sys_color_dark_inverse_surface</item>
285292
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dark_inverse_on_surface</item>
293+
<item name="colorSurfaceBright">@color/m3_sys_color_dark_surface_bright</item>
294+
<item name="colorSurfaceDim">@color/m3_sys_color_dark_surface_dim</item>
295+
<item name="colorSurfaceContainer">@color/m3_sys_color_dark_surface_container</item>
296+
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dark_surface_container_low</item>
297+
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dark_surface_container_high</item>
298+
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dark_surface_container_lowest</item>
299+
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dark_surface_container_highest</item>
286300
<item name="colorOutline">@color/m3_sys_color_dark_outline</item>
287301
<item name="colorOutlineVariant">@color/m3_sys_color_dark_outline_variant</item>
288302
<item name="colorError">@color/m3_sys_color_dark_error</item>

‎lib/java/com/google/android/material/theme/res/values-v31/themes.xml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@
4040
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_light_on_surface_variant</item>
4141
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_surface</item>
4242
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_on_surface</item>
43+
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_light_surface_bright</item>
44+
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_light_surface_dim</item>
45+
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_light_surface_container</item>
46+
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_light_surface_container_low</item>
47+
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_light_surface_container_high</item>
48+
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_light_surface_container_lowest</item>
49+
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_light_surface_container_highest</item>
4350
<item name="colorOutline">@color/m3_sys_color_dynamic_light_outline</item>
4451
<item name="colorError">@color/m3_sys_color_light_error</item>
4552
<item name="colorOnError">@color/m3_sys_color_light_on_error</item>
@@ -87,6 +94,13 @@
8794
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_dark_on_surface_variant</item>
8895
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_surface</item>
8996
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_on_surface</item>
97+
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_dark_surface_bright</item>
98+
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_dark_surface_dim</item>
99+
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_dark_surface_container</item>
100+
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_dark_surface_container_low</item>
101+
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_dark_surface_container_high</item>
102+
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_dark_surface_container_lowest</item>
103+
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_dark_surface_container_highest</item>
90104
<item name="colorOutline">@color/m3_sys_color_dynamic_dark_outline</item>
91105
<item name="colorError">@color/m3_sys_color_dark_error</item>
92106
<item name="colorOnError">@color/m3_sys_color_dark_on_error</item>

‎lib/java/com/google/android/material/theme/res/values-v31/themes_overlay.xml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@
4040
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_light_on_surface_variant</item>
4141
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_surface</item>
4242
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_on_surface</item>
43+
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_light_surface_bright</item>
44+
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_light_surface_dim</item>
45+
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_light_surface_container</item>
46+
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_light_surface_container_low</item>
47+
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_light_surface_container_high</item>
48+
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_light_surface_container_lowest</item>
49+
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_light_surface_container_highest</item>
4350
<item name="colorOutline">@color/m3_sys_color_dynamic_light_outline</item>
4451
<item name="colorOutlineVariant">@color/m3_sys_color_dynamic_light_outline_variant</item>
4552
<item name="colorError">@color/m3_sys_color_light_error</item>
@@ -88,6 +95,13 @@
8895
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_dark_on_surface_variant</item>
8996
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_surface</item>
9097
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_on_surface</item>
98+
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_dark_surface_bright</item>
99+
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_dark_surface_dim</item>
100+
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_dark_surface_container</item>
101+
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_dark_surface_container_low</item>
102+
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_dark_surface_container_high</item>
103+
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_dark_surface_container_lowest</item>
104+
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_dark_surface_container_highest</item>
91105
<item name="colorOutline">@color/m3_sys_color_dynamic_dark_outline</item>
92106
<item name="colorOutlineVariant">@color/m3_sys_color_dynamic_dark_outline_variant</item>
93107
<item name="colorError">@color/m3_sys_color_dark_error</item>

0 commit comments

Comments
 (0)