Change Details

**Background** The Material Design team recently released an updated version of their design system called [[ https://m3.material.io/components/navigation-bar/overview | Material 3 | Material 3 ]], which includes significant changes to the "bottom navigation" component. The component has been renamed to "navigation bar," and the specifications for type, spacing, and color recommendations have also been updated. **Goals** - We want to update our current design to conform with Material 3 - Applying new color specs, see T330645 - Apply new type styles, see T330753 **Updates ([[https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=2293%3A9914&t=PsSMc0OThS3GV2fc-4 | Figma ]])** | | Explore | Saved | Search | Edits | Light | {F36885154} | {F36885156} | {F36885162} | {F36885164} | Sepia | {F36885173} | {F36885176} | {F36885178} | {F36885180} | Dark | {F36885182} | {F36885184} | {F36885186} | {F36885188} | Black | {F36885190} | {F36885192} | {F36885194} | {F36885196} - Updated sizes and spacing; check out [[ https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=2293%3A9914&t=PsSMc0OThS3GV2fc-4 | Figma ]] for details - New type style defined: `toolbar` see T330753 - Updated active states - Filled/bold state of Explore, Saved, Search, and Edits icon - New pill shape in the background - Inactive state: - New color group for both icon and label: `placeholder` see T330645 - Icon updates - Bold state for Explore icon, see **[1]** attachment - Bold state for Search icon, see **[2]** attachment - Outlined [[ https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Abookmark_border%3A | bookmark icon ]] for Saved - Outlined [[ https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aedit%3A | pencil icon ]] for Edits - Remove elevation (shadow), add a top border (0.5dp, color-group: `border`) - This is how truncation is handled ([[ https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=1014%3A755&t=PsSMc0OThS3GV2fc-4 | Figma ]]) 👇 {F36885199} **Attachments** **[1]** {F36948478} **[2]** {F36948479}

**Background** The Material Design team recently released an updated version of their design system called [[ https://m3.material.io/components/navigation-bar/overview | Material 3 | Material 3 ]], which includes significant changes to the "bottom navigation" component. The component has been renamed to "navigation bar," and the specifications for type, spacing, and color recommendations have also been updated. **Goals** - We want to update our current design to conform with Material 3 - Applying new color specs, see T330645 - Apply new type styles, see T330753 **Updates ([[https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=2293%3A9914&t=PsSMc0OThS3GV2fc-4 | Figma ]])** | | Explore | Saved | Search | Edits | Light | {F36885154} | {F36885156} | {F36885162} | {F36885164} | Sepia | {F36885173} | {F36885176} | {F36885178} | {F36885180} | Dark | {F36885182} | {F36885184} | {F36885186} | {F36885188} | Black | {F36885190} | {F36885192} | {F36885194} | {F36885196} - Updated sizes and spacing; check out [[ https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=2293%3A9914&t=PsSMc0OThS3GV2fc-4 | Figma ]] for details - New type style defined: `toolbar` see T330753 - Updated active states - Filled/bold state of Explore, Saved, Search, and Edits icon - New pill shape in the background - Inactive state: - New color group for both icon and label: `placeholder` see T330645 - Icon updates - Bold state for Explore icon, see **[1]** attachment - Bold state for Search icon, see **[2]** attachment - Outlined [[ https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Abookmark_border%3A | bookmark icon ]] for Saved - Outlined [[ https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aedit%3A | pencil icon ]] for Edits - Remove elevation (shadow), add a top border (0.5dp, color-group: `border`) - This is how truncation is handled ([[ https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=1014%3A755&t=PsSMc0OThS3GV2fc-4 | Figma ]]) 👇 {F36885199} **Attachments** **[1]** {F36948509} **[2]** {F36948510}

**Background** The Material Design team recently released an updated version of their design system called [[ https://m3.material.io/components/navigation-bar/overview | Material 3 | Material 3 ]], which includes significant changes to the "bottom navigation" component. The component has been renamed to "navigation bar," and the specifications for type, spacing, and color recommendations have also been updated. **Goals** - We want to update our current design to conform with Material 3 - Applying new color specs, see T330645 - Apply new type styles, see T330753 **Updates ([[https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=2293%3A9914&t=PsSMc0OThS3GV2fc-4 | Figma ]])** | | Explore | Saved | Search | Edits | Light | {F36885154} | {F36885156} | {F36885162} | {F36885164} | Sepia | {F36885173} | {F36885176} | {F36885178} | {F36885180} | Dark | {F36885182} | {F36885184} | {F36885186} | {F36885188} | Black | {F36885190} | {F36885192} | {F36885194} | {F36885196} - Updated sizes and spacing; check out [[ https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=2293%3A9914&t=PsSMc0OThS3GV2fc-4 | Figma ]] for details - New type style defined: `toolbar` see T330753 - Updated active states - Filled/bold state of Explore, Saved, Search, and Edits icon - New pill shape in the background - Inactive state: - New color group for both icon and label: `placeholder` see T330645 - Icon updates - Bold state for Explore icon, see **[1]** attachment - Bold state for Search icon, see **[2]** attachment - Outlined [[ https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Abookmark_border%3A | bookmark icon ]] for Saved - Outlined [[ https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aedit%3A | pencil icon ]] for Edits - Remove elevation (shadow), add a top border (0.5dp, color-group: `border`) - This is how truncation is handled ([[ https://www.figma.com/file/RnkoK5dDw3lCOEUooZS4jB/Android-App-Library?node-id=1014%3A755&t=PsSMc0OThS3GV2fc-4 | Figma ]]) 👇 {F36885199} **Attachments** **[1]** {F36948478}509} **[2]** {F36948479}510}