 Hi, I'm Yuna, and I'm here to cover what's new in Material Design on the web. We've got a lot to go over, so let's get started. The first update is the Material Theme Builder tool on Glitch. The tool itself is a self-contained application that showcases each of the material components with prompts to update the base theme shown. It helps teams to leverage the three subsystems of theming within Material, typography, shape, and color. The tool uses SAS variables to show users how to adjust an interface style and make their own brands shine by changing just a few lines of code within a theme file. For example, color can be adjusted via a series of variables such as primary, secondary, background, and surface colors. These come paired with on colors, which represent the text color on top of a variable background. Shape customization can be made for three component sized classes, small, medium, and large components. Small components include buttons and input. Medium components include modals and dialogues. And large components include menus and drawers. There's a great shape tool on Material.io to help you visualize these changes on our components before applying them to your code base. And finally, we can adjust typography through the generalized MDC typography variable or through SAS maps that allow you to customize individual typographic levels, such as having a separate weight and font family for primary headlines rather than the body copy. In the end, your theme could look something like this. This is just one example that comes from Google Developer Days in China. We've made thousands of themes around the world so far, so head over to Glitch to add your own. We're also working on a set of guidelines for adapting dark themes using material components. For example, in a dark theme, Google Material's color palette reduces intensity to mitigate visual vibration or strong color contrast against a darker background. Instead of solely adding drop shadows to illustrate elevation and depth, in a dark theme, a lighter overlay is applied. Check out the Material.io guidelines for more design guidance on how to transition your designs into a dark theme considering contrast, depth, desaturation, and limiting colors for accessibility. To help with this transition, MDC Web has released a set of typography theme variables that respond to background shades for text styles. You can now also use the theme variables in three different ways. The most supported and robust technique is with our SAS styling API, using variables and mix-ins to override styles. You can also create CSS classes with the variable names to style them by. And finally, for modern browsers, CSS custom properties can be used for the theme styling. We're still working on full support for custom properties at this time. We provide so many options because theming should not be limiting. You can extend the theme builder to make your own theme as unique as your product. Leverage our code and build on top of our material components to quickly and easily get started building product on the web. The next new feature in Material is data tables. You asked, we listened. Our designers considered these three principles when it comes to data tables. The first is that data must be organized in a meaningful way. Data tables should also be allowed for user interaction. And finally, those interactions should be as logical as the structure of the data table itself. Data tables come with some basic default functionality, such as row selection. But you can also hook them up to other components, such as these filter chips. Check out the links provided below for a deep dive into how you can actually implement data tables in your web projects and combine material components for orchestrated actions. We also have a new density subsystem option in Material. Material design uses low density space by defaults with large tap targets and margins, but offers high density space when it improves the user experience. We brought density into our system for the following reasons. The first is for scannability. Scannability is improved for data heavy applications with a higher density interface. The second is that dense UIs may actually help users focus by reducing space between actions. And finally, more content is available to the user on a single screen and more high density applications. Whether or not to increase your UI's density can be determined by how users interact with a component. Components with high density enable users to process and take action against large amounts of information in a more manageable way. Lists, tables, and long forms are components that benefit from increased density. But density shouldn't be used for every component. For example, don't apply density to components that involve focused tasks or alert the user of changes, such as snack bars or dialogues. Applying high density to alerts reduces their ability to command attention. A series of new styling classes on the web allows for us to access density in three ways. The default component size, a comfortable size, which provides a higher density display while respecting minimum touch target size, and compact, which may be used for pages with a lot of information, but may be inappropriate for user actions. Material.io got an update as well. We now provide a cross-platform view of all of our component offerings on a dedicated components page. This page allows for quick access to components and an overview of cross-platform availability. It should make it easier to navigate our product and implement it for your needs. Check out material.io slash components to browse them all yourself. And finally, we're kicking off a new initiative this year to focus on supporting material across web frameworks. Why? We know that most of you are developing web apps using a framework, and the open source community has stepped up immensely building components for some of the most adopted web frameworks out there. We want to celebrate this work and help bring the material design vision to life along with our open source community. So many of you have already built your own wrapper libraries using MDC web's components, foundations, and adapters. And we're working more closely with the rest of the open source community as well. We've updated material.io to link to three of the most popular open source component libraries. They've already uncovered bugs in the material design guidelines and asked great questions helping us to make material even better. And we're helping them to follow the spec and the material guidelines more closely as well. We look forward to continuing the conversation and working to bring the material design vision to every platform and framework, making it easier for everyone to use material design on the web. There's so much to explore and play with from theming to density to data tables to new website features and our open source community. It's an exciting time to be building the material. So check out material.io and the links below where you can find all the resources that I mentioned today. Can't wait to see what you build with material. I'll see you on the web.