feat(themes): update styles to support component themes #243

AlaskaAirlines · May 30, 2024 · 0ce75cc · 0ce75cc
1 parent 879b453
commit 0ce75cc
Show file tree

Hide file tree

Showing 11 changed files with 629 additions and 723 deletions.
diff --git a/apiExamples/passFunction.html b/apiExamples/passFunction.html
@@ -1,3 +1,3 @@
 <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
 <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
-<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button
+<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
diff --git a/demo/api.md b/demo/api.md
@@ -78,6 +78,25 @@
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/onDark.html -->
+  <auro-button ondark>Primary</auro-button>
+  <auro-button variant="secondary" ondark>Secondary</auro-button>
+  <auro-button variant="tertiary" ondark>Tertiary</auro-button>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alightRight>
+  <span slot="trigger">See code</span>
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/onDark.html) -->
+  <!-- The below code snippet is automatically added from ./../../apiExamples/onDark.html -->
+  ```html
+  <auro-button ondark>Primary</auro-button>
+  <auro-button variant="secondary" ondark>Secondary</auro-button>
+  <auro-button variant="tertiary" ondark>Tertiary</auro-button>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 
 ## Disabled
 
@@ -534,3 +553,22 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```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);
+  --ds-auro-button-loader-color: var(--ds-color-background-darkest, $ds-color-background-darkest);
+  --ds-auro-button-tap-color: transparent;
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git 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
   <!-- The below content is automatically added from ./../../apiExamples/passFunction.html -->
   <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
   <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
-  <auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button
+  <auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -185,8 +185,8 @@ These examples illustrate a common use case where a user will want to pass a fun
 ```html
 <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
 <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
-<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button
-```
+<auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 

diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -18,6 +18,22 @@
 
 </auro-accordion>
 
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+
+
+<auro-accordion alightRight>
+  <span slot="trigger">See code</span>
+
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/onDark.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ## Disabled
 
 This example demonstrates `auro-button` in it's `disabled` state.
@@ -269,3 +285,9 @@ Use the `loading` attribute to alter the content to teh shimmering dots to alert
 
 </auro-accordion>
 
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->