Skip to content

Commit

Permalink
[Color] Added new theme attributes for fixed accent colors.
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 506910629
  • Loading branch information
@pekingme @dsn5ft
pekingme authored and dsn5ft committed Feb 3, 2023
1 parent 1a25706 commit 4f3dc3e
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 16 deletions.
42 changes: 27 additions & 15 deletions docs/theming/Color.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,33 @@ brand color:

<!-- Auto-generated accent 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
---------------------- | ------------------------- | ------------------------------------ | -----------------------------------
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)
Color Role | Android Attribute | Light Theme Baseline (Dynamic) Color | Dark Theme Baseline (Dynamic) Color
-------------------------- | ---------------------------- | ------------------------------------ | -----------------------------------
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)
Primary Fixed | colorPrimaryFixed | primary90</br>(system_accent1_100) | primary90</br>(system_accent1_100)
Primary Fixed Dim | colorPrimaryFixedDim | primary80</br>(system_accent1_200) | primary80</br>(system_accent1_200)
On Primary Fixed | colorOnPrimaryFixed | primary10</br>(system_accent1_900) | primary10</br>(system_accent1_900)
On Primary Fixed Variant | colorOnPrimaryFixedVariant | primary30</br>(system_accent1_700) | primary30</br>(system_accent1_700)
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)
Secondary Fixed | colorSecondaryFixed | secondary90</br>(system_accent2_100) | secondary90</br>(system_accent2_100)
Secondary Fixed Dim | colorSecondaryFixedDim | secondary80</br>(system_accent2_200) | secondary80</br>(system_accent2_200)
On Secondary Fixed | colorOnSecondaryFixed | secondary10</br>(system_accent2_900) | secondary10</br>(system_accent2_900)
On Secondary Fixed Variant | colorOnSecondaryFixedVariant | secondary30</br>(system_accent2_700) | secondary30</br>(system_accent2_700)
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)
Tertiary Fixed | colorTertiaryFixed | tertiary90</br>(system_accent3_100) | tertiary90</br>(system_accent3_100)
Tertiary Fixed Dim | colorTertiaryFixedDim | tertiary80</br>(system_accent3_200) | tertiary80</br>(system_accent3_200)
On Tertiary Fixed | colorOnTertiaryFixed | tertiary10</br>(system_accent3_900) | tertiary10</br>(system_accent3_900)
On Tertiary Fixed Variant | colorOnTertiaryFixedVariant | tertiary30</br>(system_accent3_700) | tertiary30</br>(system_accent3_700)

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

Expand Down
12 changes: 12 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 @@ -19,16 +19,28 @@
<public name="colorPrimaryInverse" type="attr"/>
<public name="colorPrimaryContainer" type="attr"/>
<public name="colorOnPrimaryContainer" type="attr"/>
<public name="colorPrimaryFixed" type="attr"/>
<public name="colorPrimaryFixedDim" type="attr"/>
<public name="colorOnPrimaryFixed" type="attr"/>
<public name="colorOnPrimaryFixedVariant" type="attr"/>

<public name="colorSecondary" type="attr"/>
<public name="colorOnSecondary" type="attr"/>
<public name="colorSecondaryContainer" type="attr"/>
<public name="colorOnSecondaryContainer" type="attr"/>
<public name="colorSecondaryFixed" type="attr"/>
<public name="colorSecondaryFixedDim" type="attr"/>
<public name="colorOnSecondaryFixed" type="attr"/>
<public name="colorOnSecondaryFixedVariant" type="attr"/>

<public name="colorTertiary" type="attr"/>
<public name="colorOnTertiary" type="attr"/>
<public name="colorTertiaryContainer" type="attr"/>
<public name="colorOnTertiaryContainer" type="attr"/>
<public name="colorTertiaryFixed" type="attr"/>
<public name="colorTertiaryFixedDim" type="attr"/>
<public name="colorOnTertiaryFixed" type="attr"/>
<public name="colorOnTertiaryFixedVariant" type="attr"/>

<public name="colorOnBackground" type="attr"/>

Expand Down
24 changes: 24 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 @@ -26,6 +26,14 @@
<!-- A color that passes accessibility guidelines for text/iconography when drawn on top of
the primary container color. -->
<attr name="colorOnPrimaryContainer" format="color"/>
<!-- A primary branding color for the app, which stays the same between light and dark themes. -->
<attr name="colorPrimaryFixed" format="color"/>
<!-- A stronger, more emphasized variant of the fixed primary branding color. -->
<attr name="colorPrimaryFixedDim" format="color"/>
<!-- The color text/iconography when drawn on top of the fixed primary branding color. -->
<attr name="colorOnPrimaryFixed" format="color"/>
<!-- A lower-emphasized variant of the color on the fixed primary branding color. -->
<attr name="colorOnPrimaryFixedVariant" format="color"/>

<!-- The secondary branding color for the app, usually a bright complement to the primary
branding color. -->
Expand All @@ -38,6 +46,14 @@
<!-- A color that passes accessibility guidelines for text/iconography when drawn on top of
the secondary container color. -->
<attr name="colorOnSecondaryContainer" format="color"/>
<!-- A secondary branding color for the app, which stays the same between light and dark themes. -->
<attr name="colorSecondaryFixed" format="color"/>
<!-- A stronger, more emphasized variant of the fixed secondary branding color. -->
<attr name="colorSecondaryFixedDim" format="color"/>
<!-- The color text/iconography when drawn on top of the fixed secondary branding color. -->
<attr name="colorOnSecondaryFixed" format="color"/>
<!-- A lower-emphasized variant of the color on the fixed secondary branding color. -->
<attr name="colorOnSecondaryFixedVariant" format="color"/>

<!-- The tertiary branding color for the app, usually a bright complement to the primary
branding color. -->
Expand All @@ -50,6 +66,14 @@
<!-- A color that passes accessibility guidelines for text/iconography when drawn on top of
the tertiary container color. -->
<attr name="colorOnTertiaryContainer" format="color"/>
<!-- A tertiary branding color for the app, which stays the same between light and dark themes. -->
<attr name="colorTertiaryFixed" format="color"/>
<!-- A stronger, more emphasized variant of the fixed tertiary branding color. -->
<attr name="colorTertiaryFixedDim" format="color"/>
<!-- The color text/iconography when drawn on top of the fixed tertiary branding color. -->
<attr name="colorOnTertiaryFixed" format="color"/>
<!-- A lower-emphasized variant of the color on the fixed tertiary branding color. -->
<attr name="colorOnTertiaryFixedVariant" format="color"/>

<!-- A color that passes accessibility guidelines for text/iconography when drawn on top of
background. -->
Expand Down
24 changes: 24 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 @@ -28,14 +28,26 @@
<item name="colorPrimaryInverse">@color/m3_sys_color_light_inverse_primary</item>
<item name="colorPrimaryContainer">@color/m3_sys_color_light_primary_container</item>
<item name="colorOnPrimaryContainer">@color/m3_sys_color_light_on_primary_container</item>
<item name="colorPrimaryFixed">@color/m3_sys_color_primary_fixed</item>
<item name="colorPrimaryFixedDim">@color/m3_sys_color_primary_fixed_dim</item>
<item name="colorOnPrimaryFixed">@color/m3_sys_color_on_primary_fixed</item>
<item name="colorOnPrimaryFixedVariant">@color/m3_sys_color_on_primary_fixed_variant</item>
<item name="colorSecondary">@color/m3_sys_color_light_secondary</item>
<item name="colorOnSecondary">@color/m3_sys_color_light_on_secondary</item>
<item name="colorSecondaryContainer">@color/m3_sys_color_light_secondary_container</item>
<item name="colorOnSecondaryContainer">@color/m3_sys_color_light_on_secondary_container</item>
<item name="colorSecondaryFixed">@color/m3_sys_color_secondary_fixed</item>
<item name="colorSecondaryFixedDim">@color/m3_sys_color_secondary_fixed_dim</item>
<item name="colorOnSecondaryFixed">@color/m3_sys_color_on_secondary_fixed</item>
<item name="colorOnSecondaryFixedVariant">@color/m3_sys_color_on_secondary_fixed_variant</item>
<item name="colorTertiary">@color/m3_sys_color_light_tertiary</item>
<item name="colorOnTertiary">@color/m3_sys_color_light_on_tertiary</item>
<item name="colorTertiaryContainer">@color/m3_sys_color_light_tertiary_container</item>
<item name="colorOnTertiaryContainer">@color/m3_sys_color_light_on_tertiary_container</item>
<item name="colorTertiaryFixed">@color/m3_sys_color_tertiary_fixed</item>
<item name="colorTertiaryFixedDim">@color/m3_sys_color_tertiary_fixed_dim</item>
<item name="colorOnTertiaryFixed">@color/m3_sys_color_on_tertiary_fixed</item>
<item name="colorOnTertiaryFixedVariant">@color/m3_sys_color_on_tertiary_fixed_variant</item>
<item name="android:colorBackground">@color/m3_sys_color_light_background</item>
<item name="colorOnBackground">@color/m3_sys_color_light_on_background</item>
<item name="colorSurface">@color/m3_sys_color_light_surface</item>
Expand Down Expand Up @@ -274,14 +286,26 @@
<item name="colorPrimaryInverse">@color/m3_sys_color_dark_inverse_primary</item>
<item name="colorPrimaryContainer">@color/m3_sys_color_dark_primary_container</item>
<item name="colorOnPrimaryContainer">@color/m3_sys_color_dark_on_primary_container</item>
<item name="colorPrimaryFixed">@color/m3_sys_color_primary_fixed</item>
<item name="colorPrimaryFixedDim">@color/m3_sys_color_primary_fixed_dim</item>
<item name="colorOnPrimaryFixed">@color/m3_sys_color_on_primary_fixed</item>
<item name="colorOnPrimaryFixedVariant">@color/m3_sys_color_on_primary_fixed_variant</item>
<item name="colorSecondary">@color/m3_sys_color_dark_secondary</item>
<item name="colorOnSecondary">@color/m3_sys_color_dark_on_secondary</item>
<item name="colorSecondaryContainer">@color/m3_sys_color_dark_secondary_container</item>
<item name="colorOnSecondaryContainer">@color/m3_sys_color_dark_on_secondary_container</item>
<item name="colorSecondaryFixed">@color/m3_sys_color_secondary_fixed</item>
<item name="colorSecondaryFixedDim">@color/m3_sys_color_secondary_fixed_dim</item>
<item name="colorOnSecondaryFixed">@color/m3_sys_color_on_secondary_fixed</item>
<item name="colorOnSecondaryFixedVariant">@color/m3_sys_color_on_secondary_fixed_variant</item>
<item name="colorTertiary">@color/m3_sys_color_dark_tertiary</item>
<item name="colorOnTertiary">@color/m3_sys_color_dark_on_tertiary</item>
<item name="colorTertiaryContainer">@color/m3_sys_color_dark_tertiary_container</item>
<item name="colorOnTertiaryContainer">@color/m3_sys_color_dark_on_tertiary_container</item>
<item name="colorTertiaryFixed">@color/m3_sys_color_tertiary_fixed</item>
<item name="colorTertiaryFixedDim">@color/m3_sys_color_tertiary_fixed_dim</item>
<item name="colorOnTertiaryFixed">@color/m3_sys_color_on_tertiary_fixed</item>
<item name="colorOnTertiaryFixedVariant">@color/m3_sys_color_on_tertiary_fixed_variant</item>
<item name="android:colorBackground">@color/m3_sys_color_dark_background</item>
<item name="colorOnBackground">@color/m3_sys_color_dark_on_background</item>
<item name="colorSurface">@color/m3_sys_color_dark_surface</item>
Expand Down
24 changes: 24 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 @@ -24,14 +24,26 @@
<item name="colorPrimaryInverse">@color/m3_sys_color_dynamic_light_inverse_primary</item>
<item name="colorPrimaryContainer">@color/m3_sys_color_dynamic_light_primary_container</item>
<item name="colorOnPrimaryContainer">@color/m3_sys_color_dynamic_light_on_primary_container</item>
<item name="colorPrimaryFixed">@color/m3_sys_color_dynamic_primary_fixed</item>
<item name="colorPrimaryFixedDim">@color/m3_sys_color_dynamic_primary_fixed_dim</item>
<item name="colorOnPrimaryFixed">@color/m3_sys_color_dynamic_on_primary_fixed</item>
<item name="colorOnPrimaryFixedVariant">@color/m3_sys_color_dynamic_on_primary_fixed_variant</item>
<item name="colorSecondary">@color/m3_sys_color_dynamic_light_secondary</item>
<item name="colorOnSecondary">@color/m3_sys_color_dynamic_light_on_secondary</item>
<item name="colorSecondaryContainer">@color/m3_sys_color_dynamic_light_secondary_container</item>
<item name="colorOnSecondaryContainer">@color/m3_sys_color_dynamic_light_on_secondary_container</item>
<item name="colorSecondaryFixed">@color/m3_sys_color_dynamic_secondary_fixed</item>
<item name="colorSecondaryFixedDim">@color/m3_sys_color_dynamic_secondary_fixed_dim</item>
<item name="colorOnSecondaryFixed">@color/m3_sys_color_dynamic_on_secondary_fixed</item>
<item name="colorOnSecondaryFixedVariant">@color/m3_sys_color_dynamic_on_secondary_fixed_variant</item>
<item name="colorTertiary">@color/m3_sys_color_dynamic_light_tertiary</item>
<item name="colorOnTertiary">@color/m3_sys_color_dynamic_light_on_tertiary</item>
<item name="colorTertiaryContainer">@color/m3_sys_color_dynamic_light_tertiary_container</item>
<item name="colorOnTertiaryContainer">@color/m3_sys_color_dynamic_light_on_tertiary_container</item>
<item name="colorTertiaryFixed">@color/m3_sys_color_dynamic_tertiary_fixed</item>
<item name="colorTertiaryFixedDim">@color/m3_sys_color_dynamic_tertiary_fixed_dim</item>
<item name="colorOnTertiaryFixed">@color/m3_sys_color_dynamic_on_tertiary_fixed</item>
<item name="colorOnTertiaryFixedVariant">@color/m3_sys_color_dynamic_on_tertiary_fixed_variant</item>
<item name="android:colorBackground">@color/m3_sys_color_dynamic_light_background</item>
<item name="colorOnBackground">@color/m3_sys_color_dynamic_light_on_background</item>
<item name="colorSurface">@color/m3_sys_color_dynamic_light_surface</item>
Expand Down Expand Up @@ -78,14 +90,26 @@
<item name="colorPrimaryInverse">@color/m3_sys_color_dynamic_dark_inverse_primary</item>
<item name="colorPrimaryContainer">@color/m3_sys_color_dynamic_dark_primary_container</item>
<item name="colorOnPrimaryContainer">@color/m3_sys_color_dynamic_dark_on_primary_container</item>
<item name="colorPrimaryFixed">@color/m3_sys_color_dynamic_primary_fixed</item>
<item name="colorPrimaryFixedDim">@color/m3_sys_color_dynamic_primary_fixed_dim</item>
<item name="colorOnPrimaryFixed">@color/m3_sys_color_dynamic_on_primary_fixed</item>
<item name="colorOnPrimaryFixedVariant">@color/m3_sys_color_dynamic_on_primary_fixed_variant</item>
<item name="colorSecondary">@color/m3_sys_color_dynamic_dark_secondary</item>
<item name="colorOnSecondary">@color/m3_sys_color_dynamic_dark_on_secondary</item>
<item name="colorSecondaryContainer">@color/m3_sys_color_dynamic_dark_secondary_container</item>
<item name="colorOnSecondaryContainer">@color/m3_sys_color_dynamic_dark_on_secondary_container</item>
<item name="colorSecondaryFixed">@color/m3_sys_color_dynamic_secondary_fixed</item>
<item name="colorSecondaryFixedDim">@color/m3_sys_color_dynamic_secondary_fixed_dim</item>
<item name="colorOnSecondaryFixed">@color/m3_sys_color_dynamic_on_secondary_fixed</item>
<item name="colorOnSecondaryFixedVariant">@color/m3_sys_color_dynamic_on_secondary_fixed_variant</item>
<item name="colorTertiary">@color/m3_sys_color_dynamic_dark_tertiary</item>
<item name="colorOnTertiary">@color/m3_sys_color_dynamic_dark_on_tertiary</item>
<item name="colorTertiaryContainer">@color/m3_sys_color_dynamic_dark_tertiary_container</item>
<item name="colorOnTertiaryContainer">@color/m3_sys_color_dynamic_dark_on_tertiary_container</item>
<item name="colorTertiaryFixed">@color/m3_sys_color_dynamic_tertiary_fixed</item>
<item name="colorTertiaryFixedDim">@color/m3_sys_color_dynamic_tertiary_fixed_dim</item>
<item name="colorOnTertiaryFixed">@color/m3_sys_color_dynamic_on_tertiary_fixed</item>
<item name="colorOnTertiaryFixedVariant">@color/m3_sys_color_dynamic_on_tertiary_fixed_variant</item>
<item name="android:colorBackground">@color/m3_sys_color_dynamic_dark_background</item>
<item name="colorOnBackground">@color/m3_sys_color_dynamic_dark_on_background</item>
<item name="colorSurface">@color/m3_sys_color_dynamic_dark_surface</item>
Expand Down
Loading

0 comments on commit 4f3dc3e

Please sign in to comment.