Skip to content

Commit 2114a11

Browse files
pekingmeimhappi
pekingme
authored and
imhappi
committed
[Docs] Updated dev doc for tonal surface colors in affected components.
PiperOrigin-RevId: 556901517
1 parent c04eaba commit 2114a11

18 files changed

+64
-57
lines changed

‎docs/components/BottomAppBar.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ floating action button (FAB), action item(s) and an overflow menu.
236236

237237
Element | Attribute | Related method(s) | Default value
238238
------------- | ------------------------ | ------------------------------------------ | -------------
239-
**Color** | `app:backgroundTint` | `setBackgroundTint`<br>`getBackgroundTint` | `?attr/colorSurface`
239+
**Color** | `app:backgroundTint` | `setBackgroundTint`<br>`getBackgroundTint` | `?attr/colorSurfaceContainer`
240240
**Elevation** | `app:elevation` | `setElevation` | `3dp`
241241
**Height** | `android:minHeight` | `setMinimumHeight`<br>`getMinimumHeight` | `80dp`
242242
**Shadows** | `app:addElevationShadow` | N/A | `false`

‎docs/components/BottomNavigation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,7 @@ The following is an anatomy diagram for the bottom navigation bar:
264264

265265
**Element** | **Attribute** | **Related methods** | **Default value**
266266
----------------- | --------------------- | ------------------- | -----------------
267-
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
267+
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainer`
268268
**Elevation** | `app:elevation` | `setElevation` | `3dp`
269269
**Compat Shadow** | `compatShadowEnabled` | N/A | `false`
270270

‎docs/components/BottomSheet.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -421,8 +421,8 @@ Content can also be added below the drag handle. (see [Using bottom sheets](#usi
421421

422422
Element | Attribute | Related method(s) | Default value
423423
-------------- | --------------------- | --------------------------------- | -------------
424-
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
425-
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceLargeComponent`
424+
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainerLow`
425+
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceCornerExtraLarge`
426426
**Elevation** | `android:elevation` | N/A | `1dp`
427427
**Max width** | `android:maxWidth` | `setMaxWidth`<br/>`getMaxWidth` | `640dp`
428428
**Max height** | `android:maxHeight` | `setMaxHeight`<br/>`getMaxHeight` | N/A

‎docs/components/Button.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ Element | Attribute | Related method(s) |
143143

144144
Element | Attribute | Related method(s) | Default value
145145
---------------- | --------------------- | ---------------------------------------------------------------------------- | -------------
146-
**Color** | `app:backgroundTint` | `setBackgroundColor`<br/>`setBackgroundTintList`<br/>`getBackgroundTintList` | `?attr/colorSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_background_color_selector.xml))
146+
**Color** | `app:backgroundTint` | `setBackgroundColor`<br/>`setBackgroundTintList`<br/>`getBackgroundTintList` | `?attr/colorSurfaceContainerLow` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/m3_text_button_background_color_selector.xml))
147147
**Stroke color** | `app:strokeColor` | `setStrokeColor`<br/>`setStrokeColorResource`<br/>`getStrokeColor` | `null`
148148
**Stroke width** | `app:strokeWidth` | `setStrokeWidth`<br/>`setStrokeWidthResource`<br/>`getStrokeWidth` | `0dp`
149149
**Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`<br/>`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent`

‎docs/components/Card.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ shown in the [card examples](#card-examples) section.
367367

368368
Element | Attribute | Related method(s) | Default value
369369
-------------------- | ------------------------- | ------------------------------------------------------------------- | -------------
370-
**Color** | `app:cardBackgroundColor` | `setCardBackgroundColor`<br/>`getCardBackgroundColor` | `?attr/colorSurface` or `?attr/colorSurfaceVariant` (filled style)
370+
**Color** | `app:cardBackgroundColor` | `setCardBackgroundColor`<br/>`getCardBackgroundColor` | `?attr/colorSurface` (outlined style)</br>`?attr/colorSurfaceContainerHighest` (filled style)</br>`?attr/colorSurfaceContainerLow` (elevated style)
371371
**Foreground color** | `app:cardForegroundColor` | `setCardForegroundColor`<br/>`getCardForegroundColor` | `@android:color/transparent` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/card/res/color/m3_card_foreground_color.xml))
372372
**Stroke color** | `app:strokeColor` | `setStrokeColor`<br/>`getStrokeColor`<br/>`getStrokeColorStateList` | `?attr/colorOutline` (unchecked)<br/>`?attr/colorSecondary` (checked)
373373
**Stroke width** | `app:strokeWidth` | `setStrokeWidth`<br/>`getStrokeWidth` | `1dp` (outlined style)<br/>`0dp` (elevated or filled style)

‎docs/components/DatePicker.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,13 @@ The following diagram shows the elements of a date picker:
294294
6. Current date
295295
7. Selected date
296296

297+
### Container
298+
299+
Element | Attribute | Related method(s) | Default value
300+
--------- | --------------------- | ----------------- | -------------
301+
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainerHigh`
302+
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceCornerExtraLarge`
303+
297304
### Title
298305

299306
Element | Attribute | Related method(s) | Default value

‎docs/components/Dialog.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,8 @@ particular type), a background scrim, and, optionally, title and buttons.
126126

127127
Element | **Attribute** | **Related methods** | **Default value**
128128
----------------------------------- | -------------------------------------------------------- | ------------------------------------------------------ | -----------------
129-
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
130-
**Shape** | `app:shapeAppearance`<br/>`app:shapeAppearanceOverlay` | N/A | `?attr/shapeAppearanceMediumComponent` with a corner size of `28dp`
129+
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurfaceContainerHigh`
130+
**Shape** | `app:shapeAppearance`<br/>`app:shapeAppearanceOverlay` | N/A | `?attr/shapeAppearanceCornerExtraLarge`
131131
**Background inset start and end** | `app:backgroundInsetStart`<br/>`app:backgroundInsetEnd` | `setBackgroundInsetStart`<br/>`setBackgroundInsetEnd` | `24dp`
132132
**Background inset top and bottom** | `app:backgroundInsetTop`<br/>`app:backgroundInsetBottom` | `setBackgroundInsetTop`<br/>`setBackgroundInsetBottom` | `80dp`
133133

‎docs/components/Menu.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -426,7 +426,7 @@ The following are menu anatomy diagrams showing all possible elements:
426426
Element | Attribute | Related method(s) | Default value
427427
-------------- | ----------------------------- | ----------------- | -------------
428428
**Background** | `android:popupMenuBackground` | N/A | `?attr/popupMenuBackground`
429-
**Color** | N/A | N/A | `?attr/colorSurface`
429+
**Color** | N/A | N/A | `?attr/colorSurfaceContainer`
430430
**Elevation** | `android:popupElevation` | N/A | `3dp`
431431

432432
#### Text attributes
@@ -571,17 +571,17 @@ For all attributes that apply to the `TextInputLayout`, see the
571571
#### `MaterialAutoCompleteTextView` attributes (input text, dropdown menu)
572572

573573
Element | Attribute | Related method(s) | Default value
574-
----------------------------------------- | ------------------------------------------------------------------- |-----------------------------------------------------------------------------------------------------| -------------
574+
----------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------
575575
**Input text** | `android:text` | `setText`<br/>`getText` | `@null`
576576
**Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceBodyLarge`
577577
**Input accepted** | `android:inputType` | `N/A` | framework's default
578578
**Input text color** | `android:textColor` | `setTextColor`<br/>`getTextColors`<br/>`getCurrentTextColor` | `?android:textColorPrimary`
579579
**Cursor color** | N/A (color comes from the theme attr `?attr/colorControlActivated`) | N/A | `?attr/colorPrimary`
580-
**Dropdown menu<br/>container color** | `app:dropDownBackgroundTint` | `setDropDownBackgroundTint`<br/>`setDropDownBackgroundTintList`<br/>`getDropDownBackgroundTintList` | `@null`</br>(which means `colorSurface` with</br> elevation overlay will be used)
580+
**Dropdown menu<br/>container color** | `app:dropDownBackgroundTint` | `setDropDownBackgroundTint`<br/>`setDropDownBackgroundTintList`<br/>`getDropDownBackgroundTintList` | `colorSurfaceContainer`
581581
**Dropdown menu elevation** | `android:popupElevation` | `getPopupElevation` | `3dp`
582582
**Simple items** | `app:simpleItems` | `setSimpleItems` | `null`
583583
**Simple item layout** | `app:simpleItemLayout` | N/A | `@layout/m3_auto_complete_simple_item`
584-
**Selected simple item color** | `app:simpleItemSelectedColor` | `setSimpleItemSelectedColor`<br/>`getSimpleItemSelectedColor` | `?attr/colorSurfaceVariant`
584+
**Selected simple item color** | `app:simpleItemSelectedColor` | `setSimpleItemSelectedColor`<br/>`getSimpleItemSelectedColor` | `?attr/colorSurfaceContainerHighest`
585585
**Selected simple item<br/>ripple color** | `app:simpleItemSelectedRippleColor` | `setSimpleItemSelectedRippleColor`<br/>`getSimpleItemSelectedRippleColor` | `@color/m3_simple_item_ripple_color`
586586

587587
#### Styles

‎docs/components/NavigationDrawer.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,12 +263,12 @@ subtitles, and an optional scrim.
263263

264264
Element | Attribute(s) | Related method(s) | Default value
265265
----------------------- | ------------------------------------------------------------------- | ------------------------------------------------ | -------------
266-
**Color** | `android:background` | `setBackground`<br>`getBackground` | `?attr/colorSurface`
266+
**Color** | `android:background` | `setBackground`<br>`getBackground` | `?attr/colorSurfaceContainerLow`
267267
**Shape** | `app:shapeAppearance`<br>`app:shapeAppearanceOverlay` | N/A | `null`
268268
**Elevation** | `app:elevation` (can be used on `NavigationView` or `DrawerLayout`) | `setElevation`<br>`getElevation` | `0dp` (`NavigationView`) or `1dp` (`DrawerLayout`)
269269
**Max width** | `android:maxWidth` | N/A | `280dp`
270270
**Fits system windows** | `android:fitsSystemWindows` | `setFitsSystemWindows`<br>`getFitsSystemWindows` | `true`
271-
**Drawer corner size** | `drawerLayoutCornerSize` | N/A | `16dp`
271+
**Drawer corner size** | `drawerLayoutCornerSize` | N/A | `16dp`
272272

273273
### Header attributes
274274

‎docs/components/ProgressIndicator.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ Element | Attribute | Related method(s)
293293
----------------------------- | --------------------------- | --------------------------------------------------------- | -------------
294294
**Track thickness** | `app:trackThickness` | `setTrackThickness`</br>`getTrackThickness` | `4dp`
295295
**Indicator color** | `app:indicatorColor` | `setIndicatorColor`</br>`getIndicatorColor` | `colorPrimary`
296-
**Track color** | `app:trackColor` | `setTrackColor`</br>`getTrackColor` | `indicatorColor` at `disabledAlpha`
296+
**Track color** | `app:trackColor` | `setTrackColor`</br>`getTrackColor` | `colorSurfaceContainerHighest` (linear)</br>`@android:color/transparent` (circular)
297297
**Track corner radius** | `app:trackCornerRadius` | `setTrackCornerRadius`</br>`getTrackCornerRadius` | `0dp`
298298
**Show animation behavior** | `app:showAnimationBehavior` | `setShowAnimationBehavior`</br>`getShowAnimationBehavior` | `none`
299299
**Hide animation behavior** | `app:hideAnimationBehavior` | `setHideAnimationBehavior`</br>`getHideAnimationBehavior` | `none`

‎docs/components/Search.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ Element | Attribute | Related method(s)
105105
**Search text appearance** | `android:textAppearance` | `setTextAppearance`<br/>`getTextAppearance` | `@style/TextAppearance.Material3.SearchBar`
106106
**Search text** | `android:text` | `setText`<br/>`getText` | `null`
107107
**Search hint** | `android:hint` | `setHint`<br/>`getHint` | `null`
108-
**Color** | `app:backgroundTint` | -- | `?attr/colorSurface`
108+
**Color** | `app:backgroundTint` | -- | `?attr/colorSurfaceContainerHigh`
109109
**Flag for default margins** | `app:defaultMarginsEnabled` | -- | `true`
110110
**Flag for navigation icon** | `app:hideNavigationIcon` | -- | `false`
111111

@@ -218,7 +218,7 @@ Element | Attribute | Related meth
218218
**Search text appearance** | `android:textAppearance` | `setTextAppearance`<br/>`getTextAppearance` | `@style/TextAppearance.Material3.SearchBar`
219219
**Search text** | `android:text` | `setText`<br/>`getText` | `null`
220220
**Search hint** | `android:hint` | `setHint`<br/>`getHint` | `null`
221-
**Color** | `app:backgroundTint` | -- | `?attr/colorSurface`
221+
**Color** | `app:backgroundTint` | -- | `?attr/colorSurfaceContainerHigh`
222222
**Flag for navigation icon** | `app:hideNavigationIcon` | -- | `true`
223223
**Flag for `DrawerArrowDrawable`** | `app:useDrawerArrowDrawable` | -- | `false`
224224
**Flag for soft keyboard** | `app:autoShowKeyboard` | -- | `true`

‎docs/components/SideSheet.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -264,15 +264,15 @@ Side sheets have a sheet, content, and, if modal, a scrim.
264264

265265
### Sheet attributes
266266

267-
Element | Attribute | Related method(s) | Default value
268-
-------------- |-----------------------------|---------------------------------------------------------| -------------
269-
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`
267+
Element | Attribute | Related method(s) | Default value
268+
---------------------------- | --------------------------- | ------------------------------------------------------- | -------------
269+
**Color** | `app:backgroundTint` | N/A | `?attr/colorSurface`</br>`?attr/colorSurfaceContainerLow` (modal)
270270
**Coplanar sibling view id** | `app:coplanarSiblingViewId` | `setCoplanarSiblingViewId`<br/>`setCoplanarSiblingView` | N/A
271-
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceLargeComponent`
272-
**Sheet edge** | `android:layout_gravity` | `setSheetEdge` (modal only) | end
273-
**Elevation** | `android:elevation` | N/A | 0dp
274-
**Max width** | `android:maxWidth` | `setMaxWidth`<br/>`getMaxWidth` | N/A
275-
**Max height** | `android:maxHeight` | `setMaxHeight`<br/>`getMaxHeight` | N/A
271+
**Shape** | `app:shapeAppearance` | N/A | `?attr/shapeAppearanceLargeComponent`
272+
**Sheet edge** | `android:layout_gravity` | `setSheetEdge` (modal only) | end
273+
**Elevation** | `android:elevation` | N/A | 0dp
274+
**Max width** | `android:maxWidth` | `setMaxWidth`<br/>`getMaxWidth` | N/A
275+
**Max height** | `android:maxHeight` | `setMaxHeight`<br/>`getMaxHeight` | N/A
276276

277277
### Behavior attributes
278278

0 commit comments

Comments
 (0)