+
+ See code
+
+
+
+```html
+Primary
+Secondary
+Tertiary
+```
+
+
## Disabled
@@ -91,7 +111,7 @@ This example demonstrates `auro-button` in it's `disabled` state.
Tertiary
-
+See code
@@ -103,7 +123,7 @@ This example demonstrates `auro-button` in it's `disabled` state.
```
-
+
Primary
@@ -111,7 +131,7 @@ This example demonstrates `auro-button` in it's `disabled` state.
Tertiary
-
+See code
@@ -136,7 +156,7 @@ Use the `slim` attribute with the `auro-button` element for a slim style with le
Tertiary
-
+See code
@@ -174,7 +194,7 @@ Be sure to use the customColor attribute on the `auro-icon` component to allow c
-
+See code
@@ -218,7 +238,7 @@ Be sure to use the `customColor` attribute on the `auro-icon` component to allow
-
+See code
@@ -257,7 +277,7 @@ Be sure to use the `customColor` and `customSize` attributes on the `auro-icon`
-
+See code
@@ -292,7 +312,7 @@ Use the `rounded` attribute in conjunction with the `iconOnly` attribute for an
-
+See code
@@ -318,7 +338,7 @@ This example demonstrates a `rounded` `auro-button` with text and an `auro-icon`
-
+See code
@@ -344,7 +364,7 @@ A `rounded` `auro-button` with text only.
-
+See code
@@ -370,7 +390,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro-
-
+See code
@@ -424,7 +444,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
-
+See code
@@ -477,7 +497,7 @@ In the following example see how the `fluid` attributes alters the shape of the
Tertiary
-
+See code
@@ -502,7 +522,7 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
Tertiary
-
+See code
@@ -514,7 +534,7 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
```
-
+
Primary
@@ -522,7 +542,7 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
Tertiary
-
+See code
@@ -534,3 +554,25 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
```
+
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+
+
+
+```scss
+:host {
+ --ds-auro-button-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse);
+ --ds-auro-button-container-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+ --ds-auro-button-container-image: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+ --ds-auro-button-border-color: var(--ds-color-ui-default-default, $ds-color-ui-default-default);
+
+ // THE BELOW TOKEN SEEMS WRONG - WAITING FOR RESPONSE FROM JUNE
+ --ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, $ds-color-border-emphasis-inverse);
+ --ds-auro-button-loader-color: var(--ds-color-background-darkest, $ds-color-background-darkest);
+ --ds-auro-button-tap-color: transparent;
+}
+```
+
diff --git a/demo/index.md b/demo/index.md
index 6afe76e..e64d7e9 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -174,7 +174,7 @@ These examples illustrate a common use case where a user will want to pass a fun
PrimaryPrimary
- PrimaryPrimary
@@ -185,8 +185,8 @@ These examples illustrate a common use case where a user will want to pass a fun
```html
PrimaryPrimary
-PrimaryPrimary
+```
diff --git a/docs/partials/api.md b/docs/partials/api.md
index 84cc626..648b8a1 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -10,7 +10,7 @@
-
+See code
@@ -18,6 +18,19 @@
+
+
+
+
+
+
+ See code
+
+
+
+
+
+
## Disabled
This example demonstrates `auro-button` in it's `disabled` state.
@@ -27,7 +40,7 @@ This example demonstrates `auro-button` in it's `disabled` state.
-
+See code
@@ -35,12 +48,12 @@ This example demonstrates `auro-button` in it's `disabled` state.
-
+
-
+See code
@@ -57,7 +70,7 @@ Use the `slim` attribute with the `auro-button` element for a slim style with le
-
+See code
@@ -78,7 +91,7 @@ Be sure to use the customColor attribute on the `auro-icon` component to allow c
-
+See code
@@ -100,7 +113,7 @@ Be sure to use the `customColor` attribute on the `auro-icon` component to allow
-
+See code
@@ -119,7 +132,7 @@ Be sure to use the `customColor` and `customSize` attributes on the `auro-icon`
-
+See code
@@ -140,7 +153,7 @@ Use the `rounded` attribute in conjunction with the `iconOnly` attribute for an
-
+See code
@@ -157,7 +170,7 @@ This example demonstrates a `rounded` `auro-button` with text and an `auro-icon`
-
+See code
@@ -174,7 +187,7 @@ A `rounded` `auro-button` with text only.
-
+See code
@@ -191,7 +204,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro-
-
+See code
@@ -211,7 +224,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
-
+See code
@@ -231,7 +244,7 @@ In the following example see how the `fluid` attributes alters the shape of the
-
+See code
@@ -248,7 +261,7 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
-
+See code
@@ -256,12 +269,12 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
-