From 85ffe01675ec40d4b8d80ae2fd3b6ba3daa3e4ab Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Fri, 10 Aug 2018 13:34:14 -0500
Subject: [PATCH] fix(segment-button): add and document custom properties

references #14850
---
 core/src/components/segment-button/readme.md  | 21 +++++++++++++++++++
 .../segment-button/segment-button.scss        | 21 +++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index e4719c31f2..9ff5c88027 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -89,6 +89,27 @@ The value of the segment button.
 Emitted when the segment button is clicked.
 
 
+## CSS Custom Properties
+
+| Name               | Description                  |
+| ------------------ | ---------------------------- |
+| `--background`     | Background of the button     |
+| `--border-color`   | Color of the button border   |
+| `--border-radius`  | Radius of the button border  |
+| `--border-style`   | Style of the button border   |
+| `--border-width`   | Width of the button border   |
+| `--color`          | Color of the buton text      |
+| `--icon-size`      | Size of the button icon      |
+| `--margin-bottom`  | Bottom margin of the button  |
+| `--margin-end`     | End margin of the button     |
+| `--margin-start`   | Start margin of the button   |
+| `--margin-top`     | Top margin of the button     |
+| `--padding-bottom` | Bottom padding of the button |
+| `--padding-end`    | End padding of the button    |
+| `--padding-start`  | Start padding of the button  |
+| `--padding-top`    | Top padding of the button    |
+| `--transition`     | Transition of the button     |
+
 
 ----------------------------------------------
 
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index ae603c7f63..38b4958c00 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -4,6 +4,24 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the button
+   * @prop --border-color: Color of the button border
+   * @prop --border-radius: Radius of the button border
+   * @prop --border-style: Style of the button border
+   * @prop --border-width: Width of the button border
+   * @prop --color: Color of the buton text
+   * @prop --icon-size: Size of the button icon
+   * @prop --margin-top: Top margin of the button
+   * @prop --margin-end: End margin of the button
+   * @prop --margin-bottom: Bottom margin of the button
+   * @prop --margin-start: Start margin of the button
+   * @prop --padding-top: Top padding of the button
+   * @prop --padding-end: End padding of the button
+   * @prop --padding-bottom: Bottom padding of the button
+   * @prop --padding-start: Start padding of the button
+   * @prop --transition: Transition of the button
+   */
   --padding-start: 0;
   --padding-end: 0;
   --padding-top: 0;
@@ -12,6 +30,8 @@
 
   flex: 1;
 
+  color: var(--color);
+
   text-decoration: none;
   text-overflow: ellipsis;
 
@@ -53,6 +73,7 @@
   border-color: var(--border-color);
 
   background: var(--background);
+  color: inherit;
 
   contain: content;
   cursor: pointer;