From e42b2e4f6fba878b8400642e37e57c1182684e56 Mon Sep 17 00:00:00 2001 From: Material Eng Date: Wed, 4 Sep 2024 06:17:47 -0700 Subject: [PATCH] Minor documentation fixes. PiperOrigin-RevId: 670945518 --- README.md | 13 ++++++++----- concepts/color_extraction.md | 2 +- concepts/color_terms.md | 7 ++++--- concepts/contrast_for_accessibility.md | 4 ++-- concepts/dynamic_color_scheme.md | 12 ++++++------ concepts/scheme_generation.md | 10 +++++----- dev_guide/creating_color_scheme.md | 4 ++-- 7 files changed, 28 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index b653fa47..3932b767 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Color is a powerful design tool and part of the Material system along with styles like typography and shape. In products, colors and the way they are used can be vast and varied. An app’s color scheme can express brand and style. -Semantic colors can communicate meaning. And color control contrast supports +Semantic colors can communicate meaning. And color contrast control supports visual accessibility. In many design systems of the past, designers manually picked app colors to @@ -68,8 +68,11 @@ The library consists of various components, each having its own folder and ## Try it out -### Material Theme Builder +### Material Theme Builder -We recommend incorporating Material Theme Builder -[Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder) and -[web tool](https://material-foundation.github.io/material-theme-builder/) into the design workflow. With them, designers can easily experiment with different dynamic color themes and see how they transform their designs with just a few clicks. +We recommend incorporating the Material Theme Builder +[Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder) +and [web tool](https://material-foundation.github.io/material-theme-builder/) +into the design workflow. With them, designers can easily experiment with +different dynamic color themes and see how they transform their designs with +just a few clicks. diff --git a/concepts/color_extraction.md b/concepts/color_extraction.md index 9c109d8c..7e2c5931 100644 --- a/concepts/color_extraction.md +++ b/concepts/color_extraction.md @@ -48,7 +48,7 @@ Key metrics include: ## To color themes Ever wonder how Pixel extracts colors from a phone wallpaper to create -accessible and beautiful UIs? The steps can be summarized as below, +accessible and beautiful UIs? The steps can be summarized as follows: 1. Quantize to obtain a representative set of colors from the wallpaper. 1. Score to obtain suitable source colors. diff --git a/concepts/color_terms.md b/concepts/color_terms.md index 7b75ceef..9d53ae85 100644 --- a/concepts/color_terms.md +++ b/concepts/color_terms.md @@ -10,12 +10,13 @@ constraints in Dynamic Scheme. [Material color roles](https://m3.material.io/styles/color/roles) are like the "numbers" on a paint-by-number canvas. They are the connective tissue between elements of the UI and what color goes where. Roughly speaking, MCU assigns each -color role with a value from a specific tonal palette. For example, `onSurface` -color, use a color from the Neutral Palette with tone 30 in light scheme. +color role with a value from a specific tonal palette. For example, the +`onSurface` color uses a color from the Neutral Palette with tone 30 in light +scheme. ### Dynamic Scheme -Dynamic Scheme comprised by color attributes that are combined in a +The Dynamic Scheme is comprised of color attributes that are combined in a predetermined way to meet the needs of a user context or preference. It is essentially a mapping of color roles to color at specific tone in a tonal palette. For example, primary = *207H 80C 90T*, onPrimary = *207H 80C 40T*. diff --git a/concepts/contrast_for_accessibility.md b/concepts/contrast_for_accessibility.md index d4bb07db..ebacb60f 100644 --- a/concepts/contrast_for_accessibility.md +++ b/concepts/contrast_for_accessibility.md @@ -21,8 +21,8 @@ format. Contrast ratio is based on `Y`, a component in the CIEXYZ color space that measures brightness. `Y` is in a one-to-one relationship with `L*` from CIELab. -Given two colors where the lighter color's `Y` is `yL` the darker color's `Y` is -`yD`, the contrast ratio is defined as: +Given two colors where the lighter color's `Y` is `yL` and the darker color's +`Y` is `yD`, the contrast ratio is defined as: ``` contrast_ratio = (yL + 5.0) / (yD + 5.0) diff --git a/concepts/dynamic_color_scheme.md b/concepts/dynamic_color_scheme.md index ea4d6fce..baa8d716 100644 --- a/concepts/dynamic_color_scheme.md +++ b/concepts/dynamic_color_scheme.md @@ -25,12 +25,12 @@ smaller difference create lower contrast. ## What is Dynamic Scheme? `DynamicScheme` is the most important interface for dynamic color clients. It is -a scheme that clients can choose what color goes to which elements of the UI. A -helpful analogy is to think of UI as a paint-by-number canvas, with color roles -representing the "numbers" and `DynamicScheme` acting as a guideline to map from -those numbers to actual colors. `DynamicScheme` abstracts away the exact color -values, and the app developers only need to choose which color role to use at -each element of the UI. +a scheme that clients can use to choose what color goes to which elements of the +UI. A helpful analogy is to think of UI as a paint-by-number canvas, with color +roles representing the "numbers" and `DynamicScheme` acting as a guideline to +map from those numbers to actual colors. `DynamicScheme` abstracts away the +exact color values, and the app developers only need to choose which color role +to use at each element of the UI. More specifically, `DynamicScheme` comprises assignments of color values from tonal palettes generated from user or app developer's preference to color roles. diff --git a/concepts/scheme_generation.md b/concepts/scheme_generation.md index a1c821e3..c4df8273 100644 --- a/concepts/scheme_generation.md +++ b/concepts/scheme_generation.md @@ -2,8 +2,8 @@ ## Requirements for Dynamic Scheme -As described in [Dynamic Color Scheme](dynamic_color_scheme.md), MCU generating -a `DynamicScheme` is to create colors that satisfy constraints on visual +As described in [Dynamic Color Scheme](dynamic_color_scheme.md), `DynamicScheme` +generation aims to generate colors that satisfy constraints on visual accessibility and visual expression and trueness of colors. ### Hard constraints @@ -16,19 +16,19 @@ accessibility and visual expression and trueness of colors. 1. secondaryContainer prioritizes matching chroma over tone. This implies that it may adjust tone, in a specific direction, to achieve chroma as close as possible to the desired chroma. -1. tertiaryContainer should not be disliked or lightened otherwises. +1. tertiaryContainer should not be disliked, otherwise it would be lightened. ### Soft constraints 1. Tone should be as close to a "reference standard" as possible. -1. The distribution of tone should be even across colors. +1. The distribution of tones should be even across colors. 1. The contrast level should ideally be at a certain level, but it is not required. ## How MCU derives Dynamic Scheme Above constraints are expressed as algebraic formulas and solved in the -following steps, +following steps: ### 1. Starting tone specs diff --git a/dev_guide/creating_color_scheme.md b/dev_guide/creating_color_scheme.md index 49824fd5..6ec29a5b 100644 --- a/dev_guide/creating_color_scheme.md +++ b/dev_guide/creating_color_scheme.md @@ -42,7 +42,7 @@ them with the `DynamicColor` class. We provide color role APIs like #### Method 1 — Using a variant -The recommended way to generate a scheme from a source color is to use scheme +The recommended way to generate a scheme from a source color is to use a scheme variant constructor, such as `SchemeTonalSpot`. The following example generates a `SchemeTonalSpot` scheme in light mode and default contrast from `hct` as source color in HCT format. @@ -84,7 +84,7 @@ let scheme = SchemeTonalSpot( -We provide below variants: +We provide the below variants: * Content * Expressive