feat(theme): Added new function for text emphasis opacities

material-components · Aug 24, 2018 · f841afe · f841afe
1 parent 036edc0
commit f841afe
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md
@@ -179,3 +179,15 @@ Params:
 @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)
 ```
+#### `mdc-theme-text-emphasis($emphasis)`
+
+Returns opacity value for given emphasis.
+
+Params:
+
+- `$emphasis`: Type of emphasis such as `high`, `medium` & `disabled`.
+
+```scss
+@debug mdc-theme-text-emphasis(high); // .87
+@debug mdc-theme-text-emphasis(disabled); // .38
+```
diff --git a/packages/mdc-theme/_variables.scss b/packages/mdc-theme/_variables.scss
@@ -62,6 +62,12 @@ $mdc-theme-text-colors: (
   )
 ) !default;
 
+$mdc-theme-text-emphasis: (
+  high: .87,
+  medium: .6,
+  disabled: .38,
+);
+
 @function mdc-theme-ink-color-for-fill_($text-style, $fill-color) {
   $contrast-tone: mdc-theme-contrast-tone($fill-color);
 
@@ -144,3 +150,7 @@ $mdc-theme-property-values: (
 @function mdc-theme-is-valid-theme-prop-value_($style) {
   @return type-of($style) == "color" or $style == "currentColor" or str_slice($style, 1, 4) == "var(";
 }
+
+@function mdc-theme-text-emphasis($emphasis) {
+  @return map-get($mdc-theme-text-emphasis, $emphasis);
+}