From b21350067c8719a863dcd751bd50ec512b4c6b5f Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Fri, 24 Aug 2018 10:21:04 -0500
Subject: [PATCH] fix(skeleton-text): add and document custom properties

references #14850
---
 core/src/components/skeleton-text/readme.md              | 7 +++++++
 core/src/components/skeleton-text/skeleton-text.ios.scss | 6 +++++-
 core/src/components/skeleton-text/skeleton-text.md.scss  | 6 +++++-
 core/src/components/skeleton-text/skeleton-text.scss     | 4 ++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md
index 2ce99f92df..0618c8dd39 100644
--- a/core/src/components/skeleton-text/readme.md
+++ b/core/src/components/skeleton-text/readme.md
@@ -13,6 +13,13 @@ Skeleton Text is a component for rendering placeholder content. The element will
 | `width`  | `width`   | Width for the element to render at. Default is 100% | `string` |
 
 
+## CSS Custom Properties
+
+| Name           | Description                     |
+| -------------- | ------------------------------- |
+| `--background` | Background of the skeleton text |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/skeleton-text/skeleton-text.ios.scss b/core/src/components/skeleton-text/skeleton-text.ios.scss
index 55bbf164e0..e623466b43 100644
--- a/core/src/components/skeleton-text/skeleton-text.ios.scss
+++ b/core/src/components/skeleton-text/skeleton-text.ios.scss
@@ -5,8 +5,12 @@
 // iOS Skeleton Text
 // --------------------------------------------------
 
+:host {
+  --background: #{$skeleton-text-ios-bar-background-color};
+}
+
 span {
-  background-color: $skeleton-text-ios-bar-background-color;
+  background: var(--background);
 
   opacity: $skeleton-text-ios-bar-opacity;
 }
diff --git a/core/src/components/skeleton-text/skeleton-text.md.scss b/core/src/components/skeleton-text/skeleton-text.md.scss
index ce0fb6f146..f3881f357d 100644
--- a/core/src/components/skeleton-text/skeleton-text.md.scss
+++ b/core/src/components/skeleton-text/skeleton-text.md.scss
@@ -5,8 +5,12 @@
 // Material Design Skeleton Text
 // --------------------------------------------------
 
+:host {
+  --background: #{$skeleton-text-md-bar-background-color};
+}
+
 span {
-  background-color: $skeleton-text-md-bar-background-color;
+  background: var(--background);
 
   opacity: $skeleton-text-md-bar-opacity;
 }
diff --git a/core/src/components/skeleton-text/skeleton-text.scss b/core/src/components/skeleton-text/skeleton-text.scss
index 0bbb8135ab..f002bce4d0 100644
--- a/core/src/components/skeleton-text/skeleton-text.scss
+++ b/core/src/components/skeleton-text/skeleton-text.scss
@@ -5,6 +5,10 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * --background: Background of the skeleton text
+   */
+
   display: inline-block;
 
   width: 100%;