feat: refactor color token structure with tier 3 tokens #13

AlaskaAirlines · Jul 3, 2024 · 325f3d7 · 325f3d7
1 parent d247f14
commit 325f3d7
Show file tree

Hide file tree

Showing 7 changed files with 1,964 additions and 2,099 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -717,4 +717,26 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 </auro-dialog>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</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
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
+  --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12);
+  --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1);
+  --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-default, #{$ds-color-icon-primary-default});
+  --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2);
+  --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5);
+  --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -143,3 +143,10 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 <!-- 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) -->
+<!-- AURO-GENERATED-CONTENT:END -->