Skip to content

Commit

Permalink
[Color] Added tonal surface color theme attributes and updated themes.
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 492316991
  • Loading branch information
@pekingme @raajkumars
pekingme authored and raajkumars committed Dec 2, 2022
1 parent ee52406 commit 989d574
Show file tree
Hide file tree
Showing 9 changed files with 137 additions and 29 deletions.
65 changes: 36 additions & 29 deletions docs/theming/Color.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,19 @@ brand color:

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

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

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

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

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

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

Expand Down
8 changes: 8 additions & 0 deletions lib/java/com/google/android/material/color/res-public/values/public.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@
<public name="colorSurfaceInverse" type="attr"/>
<public name="colorOnSurfaceInverse" type="attr"/>

<public name="colorSurfaceBright" type="attr"/>
<public name="colorSurfaceDim" type="attr"/>
<public name="colorSurfaceContainerHighest" type="attr"/>
<public name="colorSurfaceContainerHigh" type="attr"/>
<public name="colorSurfaceContainer" type="attr"/>
<public name="colorSurfaceContainerLow" type="attr"/>
<public name="colorSurfaceContainerLowest" type="attr"/>

<public name="colorOutline" type="attr"/>
<public name="colorOutlineVariant" type="attr"/>

Expand Down
16 changes: 16 additions & 0 deletions lib/java/com/google/android/material/color/res/values/attrs.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,22 @@
<!-- The "on surface" inverse color, useful for inverted backgrounds. -->
<attr name="colorOnSurfaceInverse" format="color"/>

<!-- Tonal surface color roles. -->
<!-- The surface color which always stay the brightest in either dark or light theme. -->
<attr name="colorSurfaceBright" format="color"/>
<!-- The surface color which always stay the dimmest in either dark or light theme. -->
<attr name="colorSurfaceDim" format="color"/>
<!-- The container color of surface, which replaces the previous surface at elevation level 2. -->
<attr name="colorSurfaceContainer" format="color"/>
<!-- The container color of surface slightly elevated, which replaces the previous surface at elevation level 3. -->
<attr name="colorSurfaceContainerHigh" format="color"/>
<!-- The container color of surface the most elevated, which replaces the previous surface variant. -->
<attr name="colorSurfaceContainerHighest" format="color"/>
<!-- The container color of surface slightly lowered, which replaces the previous surface at elevation level 1. -->
<attr name="colorSurfaceContainerLow" format="color"/>
<!-- The container color of surface the most lowered. -->
<attr name="colorSurfaceContainerLowest" format="color"/>

<!-- A color meant to be used in element outlines. -->
<attr name="colorOutline" format="color"/>
<!-- A color meant to be used in element outlines on the surface-variant color. -->
Expand Down
14 changes: 14 additions & 0 deletions lib/java/com/google/android/material/dialog/res/values/themes_base.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,13 @@
<item name="colorOnSurfaceVariant">@color/m3_sys_color_light_on_surface_variant</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_light_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_light_inverse_on_surface</item>
<item name="colorSurfaceBright">@color/m3_sys_color_light_surface_bright</item>
<item name="colorSurfaceDim">@color/m3_sys_color_light_surface_dim</item>
<item name="colorSurfaceContainer">@color/m3_sys_color_light_surface_container</item>
<item name="colorSurfaceContainerLow">@color/m3_sys_color_light_surface_container_low</item>
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_light_surface_container_high</item>
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_light_surface_container_lowest</item>
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_light_surface_container_highest</item>
<item name="colorOutline">@color/m3_sys_color_light_outline</item>
<item name="colorOutlineVariant">@color/m3_sys_color_light_outline_variant</item>
<item name="colorError">@color/m3_sys_color_light_error</item>
Expand Down Expand Up @@ -283,6 +290,13 @@
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dark_on_surface_variant</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dark_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dark_inverse_on_surface</item>
<item name="colorSurfaceBright">@color/m3_sys_color_dark_surface_bright</item>
<item name="colorSurfaceDim">@color/m3_sys_color_dark_surface_dim</item>
<item name="colorSurfaceContainer">@color/m3_sys_color_dark_surface_container</item>
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dark_surface_container_low</item>
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dark_surface_container_high</item>
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dark_surface_container_lowest</item>
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dark_surface_container_highest</item>
<item name="colorOutline">@color/m3_sys_color_dark_outline</item>
<item name="colorOutlineVariant">@color/m3_sys_color_dark_outline_variant</item>
<item name="colorError">@color/m3_sys_color_dark_error</item>
Expand Down
14 changes: 14 additions & 0 deletions lib/java/com/google/android/material/theme/res/values-v31/themes.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_light_on_surface_variant</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_on_surface</item>
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_light_surface_bright</item>
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_light_surface_dim</item>
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_light_surface_container</item>
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_light_surface_container_low</item>
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_light_surface_container_high</item>
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_light_surface_container_lowest</item>
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_light_surface_container_highest</item>
<item name="colorOutline">@color/m3_sys_color_dynamic_light_outline</item>
<item name="colorError">@color/m3_sys_color_light_error</item>
<item name="colorOnError">@color/m3_sys_color_light_on_error</item>
Expand Down Expand Up @@ -87,6 +94,13 @@
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_dark_on_surface_variant</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_on_surface</item>
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_dark_surface_bright</item>
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_dark_surface_dim</item>
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_dark_surface_container</item>
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_dark_surface_container_low</item>
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_dark_surface_container_high</item>
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_dark_surface_container_lowest</item>
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_dark_surface_container_highest</item>
<item name="colorOutline">@color/m3_sys_color_dynamic_dark_outline</item>
<item name="colorError">@color/m3_sys_color_dark_error</item>
<item name="colorOnError">@color/m3_sys_color_dark_on_error</item>
Expand Down
14 changes: 14 additions & 0 deletions lib/java/com/google/android/material/theme/res/values-v31/themes_overlay.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_light_on_surface_variant</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_light_inverse_on_surface</item>
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_light_surface_bright</item>
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_light_surface_dim</item>
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_light_surface_container</item>
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_light_surface_container_low</item>
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_light_surface_container_high</item>
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_light_surface_container_lowest</item>
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_light_surface_container_highest</item>
<item name="colorOutline">@color/m3_sys_color_dynamic_light_outline</item>
<item name="colorOutlineVariant">@color/m3_sys_color_dynamic_light_outline_variant</item>
<item name="colorError">@color/m3_sys_color_light_error</item>
Expand Down Expand Up @@ -88,6 +95,13 @@
<item name="colorOnSurfaceVariant">@color/m3_sys_color_dynamic_dark_on_surface_variant</item>
<item name="colorSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_surface</item>
<item name="colorOnSurfaceInverse">@color/m3_sys_color_dynamic_dark_inverse_on_surface</item>
<item name="colorSurfaceBright">@color/m3_sys_color_dynamic_dark_surface_bright</item>
<item name="colorSurfaceDim">@color/m3_sys_color_dynamic_dark_surface_dim</item>
<item name="colorSurfaceContainer">@color/m3_sys_color_dynamic_dark_surface_container</item>
<item name="colorSurfaceContainerLow">@color/m3_sys_color_dynamic_dark_surface_container_low</item>
<item name="colorSurfaceContainerHigh">@color/m3_sys_color_dynamic_dark_surface_container_high</item>
<item name="colorSurfaceContainerLowest">@color/m3_sys_color_dynamic_dark_surface_container_lowest</item>
<item name="colorSurfaceContainerHighest">@color/m3_sys_color_dynamic_dark_surface_container_highest</item>
<item name="colorOutline">@color/m3_sys_color_dynamic_dark_outline</item>
<item name="colorOutlineVariant">@color/m3_sys_color_dynamic_dark_outline_variant</item>
<item name="colorError">@color/m3_sys_color_dark_error</item>
Expand Down
Loading

0 comments on commit 989d574

Please sign in to comment.