-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a06d1cf
commit 59fefd7
Showing
9 changed files
with
253 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,4 +10,5 @@ logs | |
| node_modules | ||
| temp | ||
| *.css | ||
| *.css.map | ||
| *.css.map | ||
| !example/**/*.css | ||
File renamed without changes
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>color-demo</title> | ||
| <style> | ||
| * { | ||
| margin: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| img, | ||
| video { | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| body { | ||
| max-width: 840px; | ||
| width: 100%; | ||
| margin: 120px auto 100px; | ||
| padding-right: 40px; | ||
| padding-left: 40px; | ||
| } | ||
|
|
||
| .theme-trigger { | ||
| position: fixed; | ||
| top: 20px; | ||
| right: 100px; | ||
| } | ||
| </style> | ||
| <link rel="stylesheet" href="../../typography/css/index.css" /> | ||
| <link rel="stylesheet" href="./theme.css" /> | ||
| </head> | ||
|
|
||
| <body class="prose prose-ul-star"> | ||
| <button class="theme-trigger">Change theme</button> | ||
| <h1>Introducing Tone-based Surfaces in Material 3</h1> | ||
| <img src="../assets/cover.png" /> | ||
| <p> | ||
| The previous way makers could achieve tinted surfaces, which are a | ||
| hallmark of the M3 design language, was to assign the color role “surface” | ||
| to a component, and increase its elevation to achieve the desired tinting | ||
| which was applied via an opacity layer. | ||
| </p> | ||
| <figure> | ||
| <video src="../assets/surface-blog-sequence-old.mov" autoplay></video> | ||
| <figcaption> | ||
| Pre-update: A tinted overlay communicated the elevation of a component | ||
| surface | ||
| </figcaption> | ||
| </figure> | ||
| <p> | ||
| The update introduces dedicated surface color roles that are no longer | ||
| tied to elevation. Makers will be able to choose the right surface roles | ||
| based on the containment needs of their products, and now have more layout | ||
| flexibility for largSer screens. | ||
| </p> | ||
| <video src="../assets/surface-blog-sequence-new.mov" autoplay></video> | ||
| <p> | ||
| The new <strong>surface container</strong> roles and tokens include five | ||
| colors. | ||
| </p> | ||
| <p> | ||
| “Surface container” is the recommended default color role for a contained | ||
| area against the “surface” color role. It provides good contrast and can | ||
| be flexibly combined with all other surface container roles ranging from | ||
| “surface container lowest” with the lowest emphasis against the “surface” | ||
| role, to “surface container highest” with the highest emphasis against the | ||
| “surface” role. | ||
| </p> | ||
| <h2>Migrating to the new <code>surface color</code> roles</h2> | ||
| <p> | ||
| All Material Components will automatically update to use the new surface | ||
| container color roles. For makers using the previous opacity-based surface | ||
| model for custom color mappings, we recommend remapping these to the new | ||
| roles. | ||
| </p> | ||
| <ul> | ||
| <li>Surface Container Lowest is a new role</li> | ||
| <li>Surface at elevation +1 becomes Surface Container Low</li> | ||
| <li>Surface at elevation +2 becomes Surface Container</li> | ||
| <li>Surface at elevation +3 becomes Surface Container High</li> | ||
| <li> | ||
| Surface at elevation +4 and +5 are being deprecated, it is recommended | ||
| to use Surface Container Highest by default as a replacement. As an | ||
| alternative Surface Container High, or Surface Dim can be used depending | ||
| on the specific use case. | ||
| </li> | ||
| <li>Surface Variant becomes Surface Container Highest</li> | ||
| </ul> | ||
| <p> | ||
| To learn more about applying the new color roles in your products, visit | ||
| the <a>color system guidance</a>. | ||
| </p> | ||
| <script> | ||
| const trigger = document.querySelector('.theme-trigger') | ||
| trigger.addEventListener('click', () => { | ||
| document.documentElement.classList.toggle('dark') | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| @use './node_modules/material3-style/color/var'; | ||
|
|
||
| :root { | ||
| @include var.theme-light(); | ||
| } | ||
|
|
||
| .dark:root { | ||
| @include var.theme-dark(); | ||
| } | ||
|
|
||
| body { | ||
| color: var(--m3-color-on-surface); | ||
| background: var(--m3-color-surface); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters