From 06269f52175386022a843285ae3dcfa3c19b3372 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Thu, 7 Dec 2017 04:01:04 -0800 Subject: [PATCH 1/3] feat(theme): Add accessible-ink-color function New `mdc-theme-accessible-ink-color($fill-color)` mixin --- packages/mdc-theme/README.md | 13 +++++++++++++ packages/mdc-theme/_variables.scss | 7 +++++++ 2 files changed, 20 insertions(+) diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md index b8b13a377e3..ea529754707 100644 --- a/packages/mdc-theme/README.md +++ b/packages/mdc-theme/README.md @@ -236,3 +236,16 @@ 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)` + +Returns an accessible ink color that has sufficient contrast against the given fill color. + +Supports the same values as `mdc-theme-prop-value`. + +> 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) +``` diff --git a/packages/mdc-theme/_variables.scss b/packages/mdc-theme/_variables.scss index be0c70306a6..eca38902ef5 100644 --- a/packages/mdc-theme/_variables.scss +++ b/packages/mdc-theme/_variables.scss @@ -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) { + $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)), primary); +} From 6f9e21d89ff029bbc7cf1125b8468f552477db2f Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Thu, 7 Dec 2017 16:09:04 -0800 Subject: [PATCH 2/3] WIP: Add `$text-style` param, defaulting to `primary` --- packages/mdc-theme/README.md | 7 +++++-- packages/mdc-theme/_variables.scss | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md index ea529754707..8632f6a97cf 100644 --- a/packages/mdc-theme/README.md +++ b/packages/mdc-theme/README.md @@ -237,11 +237,14 @@ It only returns the raw color value of the specified theme property. @debug mdc-theme-prop-value(blue); // blue ``` -#### `mdc-theme-accessible-ink-color($fill-color)` +#### `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)` Returns an accessible ink color that has sufficient contrast against the given fill color. -Supports the same values as `mdc-theme-prop-value`. +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. diff --git a/packages/mdc-theme/_variables.scss b/packages/mdc-theme/_variables.scss index eca38902ef5..8a24ffd4922 100644 --- a/packages/mdc-theme/_variables.scss +++ b/packages/mdc-theme/_variables.scss @@ -166,8 +166,8 @@ $mdc-theme-property-values: ( } // 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) { +@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)), primary); + @return map-get(map-get($mdc-theme-text-colors, mdc-theme-contrast-tone($fill-color-value)), $text-style); } From 00e4047300376724159001b2a5e21bc49da3ad90 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Thu, 7 Dec 2017 16:26:06 -0800 Subject: [PATCH 3/3] WIP: More helpful error messages for invalid $text-style values --- packages/mdc-theme/_variables.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/mdc-theme/_variables.scss b/packages/mdc-theme/_variables.scss index 8a24ffd4922..b2b1637b2ef 100644 --- a/packages/mdc-theme/_variables.scss +++ b/packages/mdc-theme/_variables.scss @@ -168,6 +168,11 @@ $mdc-theme-property-values: ( // 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); + $color-map-for-tone: map-get($mdc-theme-text-colors, mdc-theme-contrast-tone($fill-color-value)); - @return map-get(map-get($mdc-theme-text-colors, mdc-theme-contrast-tone($fill-color-value)), $text-style); + @if not map-has-key($color-map-for-tone, $text-style) { + @error "Invalid $text-style: '#{$text-style}'. Choose one of: #{map-keys($color-map-for-tone)}"; + } + + @return map-get($color-map-for-tone, $text-style); }