Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(theme): Add accessible-ink-color function #1719

Merged
merged 4 commits into from
Dec 8, 2017
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions packages/mdc-theme/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -236,3 +236,19 @@ It only returns the raw color value of the specified theme property.
@debug mdc-theme-prop-value(primary); // #3f51b5
@debug mdc-theme-prop-value(blue); // blue
```

#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)`

Returns an accessible ink color that has sufficient contrast against the given fill color.

Params:

- `$fill-color`: Supports the same values as `mdc-theme-prop-value`
- `$text-style`: Value must be one of `primary`, `secondary`, `hint`, `disabled`, `icon` (see `$mdc-theme-text-colors`)

> NOTE: This function is defined in `_variables.scss` instead of `_functions.scss` to avoid circular imports.

```scss
@debug mdc-theme-accessible-ink-color(secondary); // rgba(0, 0, 0, .87) (text-primary-on-light)
@debug mdc-theme-accessible-ink-color(blue); // white (text-primary-on-dark)
```
7 changes: 7 additions & 0 deletions packages/mdc-theme/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,10 @@ $mdc-theme-property-values: (

@return map-get($mdc-theme-property-values, $property);
}

// NOTE: This function must be defined in _variables.scss instead of _functions.scss to avoid circular imports.
@function mdc-theme-accessible-ink-color($fill-color, $text-style: primary) {
$fill-color-value: mdc-theme-prop-value($fill-color);

@return map-get(map-get($mdc-theme-text-colors, mdc-theme-contrast-tone($fill-color-value)), $text-style);
}