Skip to content

Commit

Permalink
Minor documentation fixes.
Browse files Browse the repository at this point in the history
PiperOrigin-RevId: 670945518
  • Loading branch information
Material Eng authored and copybara-github committed Sep 4, 2024
1 parent 337115a commit e42b2e4
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 24 deletions.
13 changes: 8 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
2 changes: 1 addition & 1 deletion concepts/color_extraction.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
7 changes: 4 additions & 3 deletions concepts/color_terms.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*.
Expand Down
4 changes: 2 additions & 2 deletions concepts/contrast_for_accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
12 changes: 6 additions & 6 deletions concepts/dynamic_color_scheme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
10 changes: 5 additions & 5 deletions concepts/scheme_generation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand Down
4 changes: 2 additions & 2 deletions dev_guide/creating_color_scheme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -84,7 +84,7 @@ let scheme = SchemeTonalSpot(

</section>

We provide below variants:
We provide the below variants:

* Content
* Expressive
Expand Down

0 comments on commit e42b2e4

Please sign in to comment.