Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add component level tokens for theming #118

Merged
merged 4 commits into from
Jun 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions apiExamples/onDark.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
<auro-icon ondark category="interface" name="pin-trip"></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
<span style="color: var(--ds-color-text-primary-inverse)">
<auro-icon category="interface" name="pin-trip" onDark></auro-icon>default<br />
<auro-icon category="interface" name="pin-trip" onDark accent></auro-icon>accent<br />
<auro-icon category="interface" name="pin-trip" onDark disabled></auro-icon>disabled<br />
<auro-icon category="interface" name="pin-trip" onDark emphasis></auro-icon>emphasis<br />
<auro-icon category="interface" name="pin-trip" onDark error></auro-icon>error<br />
<auro-icon category="interface" name="pin-trip" onDark info></auro-icon>info<br />
<auro-icon category="interface" name="pin-trip" onDark secondary></auro-icon>secondary<br />
<auro-icon category="interface" name="pin-trip" onDark subtle></auro-icon>subtle<br />
<auro-icon category="interface" name="pin-trip" onDark success></auro-icon>success<br />
<auro-icon category="interface" name="pin-trip" onDark tertiary></auro-icon>tertiary<br />
<auro-icon category="interface" name="pin-trip" onDark warning></auro-icon>warning
</span>
18 changes: 11 additions & 7 deletions apiExamples/visualState.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<auro-icon category="interface" name="pin-trip"></auro-icon>
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon category="interface" name="pin-trip" accent></auro-icon>
<auro-icon category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon category="interface" name="pin-trip" error></auro-icon>
<auro-icon category="interface" name="pin-trip" success></auro-icon>
<auro-icon category="interface" name="pin-trip" advisory></auro-icon>
<auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
<auro-icon category="interface" name="pin-trip" accent></auro-icon> accent<br />
<auro-icon category="interface" name="pin-trip" disabled></auro-icon> disabled<br />
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon> emphasis<br />
<auro-icon category="interface" name="pin-trip" error></auro-icon> error<br />
<auro-icon category="interface" name="pin-trip" info></auro-icon> info<br />
<auro-icon category="interface" name="pin-trip" secondary></auro-icon> secondary<br />
<auro-icon category="interface" name="pin-trip" subtle></auro-icon> subtle<br />
<auro-icon category="interface" name="pin-trip" success></auro-icon> success<br />
<auro-icon category="interface" name="pin-trip" tertiary></auro-icon>tertiary<br />
<auro-icon category="interface" name="pin-trip" warning></auro-icon> warning
48 changes: 48 additions & 0 deletions demo/alaska.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!--
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
See LICENSE in the project root for license information.

HTML in this document is standardized and NOT to be edited.
All demo code should be added/edited in ./demo/index.md

With the exception of adding custom elements if needed for the demo.

----------------------- DO NOT EDIT -----------------------------

-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auro Web Component Generator | auro-icon custom element</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
</head>
<body class="auro-markdown">
<main></main>

<script type="module">
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
fetch('/demo/alaska.md')
.then((response) => response.text())
.then((text) => {
const rawHtml = marked.parse(text);
document.querySelector('main').innerHTML = rawHtml;
Prism.highlightAll();
});
</script>
<script type="module" data-demo-script="true" src="../src/auro-alaska.js"></script>

<!-- If additional elements are needed for the demo, add them here. -->
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
</body>
</html>
12 changes: 6 additions & 6 deletions demo/alaska.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import "@alaskaairux/auro-icon/dist/auro-alaska";
<auro-alaska style="width: 192px"></auro-alaska>
</div>

<auro-accordion lowProfile justifyRight>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

```html
Expand All @@ -27,7 +27,7 @@ import "@alaskaairux/auro-icon/dist/auro-alaska";
<auro-alaska onDark style="width: 192px"></auro-alaska>
</div>

<auro-accordion lowProfile justifyRight>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

```html
Expand All @@ -44,7 +44,7 @@ Using the `official` property will display the Alaska Airlines logo with the off
<auro-alaska official style="width: 192px"></auro-alaska>
</div>

<auro-accordion lowProfile justifyRight>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

```html
Expand All @@ -57,7 +57,7 @@ Using the `official` property will display the Alaska Airlines logo with the off
<auro-alaska official ondark style="width: 192px"></auro-alaska>
</div>

<auro-accordion lowProfile justifyRight>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

```html
Expand All @@ -77,7 +77,7 @@ The Alaska Airline logo has a preferred version of the logo depending in the siz
<auro-alaska style="width: 528px"></auro-alaska>
</div>

<auro-accordion lowProfile justifyRight>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

```html
Expand All @@ -96,7 +96,7 @@ The Alaska Airline logo has a preferred version of the logo depending in the siz
<auro-alaska official style="width: 528px"></auro-alaska>
</div>

<auro-accordion lowProfile justifyRight>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

```html
Expand Down
109 changes: 76 additions & 33 deletions demo/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca
| Property | Attribute | Type | Default | Description |
|------------------|------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| [accent](#accent) | `accent` | `Boolean` | | Sets the icon to use the accent style. |
| [advisory](#advisory) | `advisory` | `Boolean` | | Sets the icon to use the advisory style. |
| [ariaHidden](#ariaHidden) | `ariaHidden` | `String` | | Set aria-hidden value. Default is `true`. Option is `false`. |
| [category](#category) | `category` | `String` | | The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. |
| [customColor](#customColor) | `customColor` | `Boolean` | | Removes primary selector. |
Expand All @@ -26,14 +25,24 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca
| [hidden](#hidden) | `hidden` | `Boolean` | | If present, the component will be hidden both visually and from screen readers |
| [hiddenAudible](#hiddenAudible) | `hiddenAudible` | `Boolean` | | If present, the component will be hidden from screen readers, but seen visually |
| [hiddenVisually](#hiddenVisually) | `hiddenVisually` | `Boolean` | | If present, the component will be hidden visually, but still read by screen readers |
| [info](#info) | `info` | `Boolean` | | Sets the icon to use the info style. |
| [label](#label) | `label` | `Boolean` | | Exposes content in slot as icon label. |
| [name](#name) | `name` | `String` | | The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage |
| [onDark](#onDark) | `onDark` | `Boolean` | false | Set value for on-dark version of auro-icon |
| [primary](#primary) | `primary` | `Boolean` | | Sets the icon to use the baseline primary icon style. |
| [primary](#primary) | `primary` | `Boolean` | | DEPRECATED: Sets the icon to use the baseline primary icon style. |
| [secondary](#secondary) | `secondary` | `Boolean` | | Sets the icon to use the secondary style. |
| [subtle](#subtle) | `subtle` | `Boolean` | | Sets the icon to use the subtle style. |
| [success](#success) | `success` | `Boolean` | | Sets the icon to use the success style. |
| [tertiary](#tertiary) | `tertiary` | `Boolean` | | Sets the icon to use the tertiary style. |
| [uri](#uri) | `uri` | `String` | "https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist" | Set the uri for CDN used when fetching icons |
| [warning](#warning) | `warning` | `Boolean` | | Sets the icon to use the warning style. |

## Methods

| Method | Type | Description |
|-----------------------|-------------------------------------------|--------------------------------------------------|
| [handleCustomTagName](#handleCustomTagName) | `(name: string, elem: HTMLElement): void` | If component is registered as a custom name,<br />this function will add an attribute to the element<br />with the default name. This is so that other parent<br />components can still this the element.<br /><br />**name**: The default tag name.<br />**elem**: The element to add the attribute to. |

## Slots

| Name | Description |
Expand Down Expand Up @@ -92,13 +101,17 @@ Mono-color icons support the following attributes to illustrate visual state. Th
<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/visualState.html) -->
<!-- The below content is automatically added from ./../../apiExamples/visualState.html -->
<auro-icon category="interface" name="pin-trip"></auro-icon>
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon category="interface" name="pin-trip" accent></auro-icon>
<auro-icon category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon category="interface" name="pin-trip" error></auro-icon>
<auro-icon category="interface" name="pin-trip" success></auro-icon>
<auro-icon category="interface" name="pin-trip" advisory></auro-icon>
<auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
<auro-icon category="interface" name="pin-trip" accent></auro-icon> accent<br />
<auro-icon category="interface" name="pin-trip" disabled></auro-icon> disabled<br />
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon> emphasis<br />
<auro-icon category="interface" name="pin-trip" error></auro-icon> error<br />
<auro-icon category="interface" name="pin-trip" info></auro-icon> info<br />
<auro-icon category="interface" name="pin-trip" secondary></auro-icon> secondary<br />
<auro-icon category="interface" name="pin-trip" subtle></auro-icon> subtle<br />
<auro-icon category="interface" name="pin-trip" success></auro-icon> success<br />
<auro-icon category="interface" name="pin-trip" tertiary></auro-icon>tertiary<br />
<auro-icon category="interface" name="pin-trip" warning></auro-icon> warning
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
Expand All @@ -107,31 +120,41 @@ Mono-color icons support the following attributes to illustrate visual state. Th
<!-- The below code snippet is automatically added from ./../../apiExamples/visualState.html -->

```html
<auro-icon category="interface" name="pin-trip"></auro-icon>
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon category="interface" name="pin-trip" accent></auro-icon>
<auro-icon category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon category="interface" name="pin-trip" error></auro-icon>
<auro-icon category="interface" name="pin-trip" success></auro-icon>
<auro-icon category="interface" name="pin-trip" advisory></auro-icon>
```
<auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
<auro-icon category="interface" name="pin-trip" accent></auro-icon> accent<br />
<auro-icon category="interface" name="pin-trip" disabled></auro-icon> disabled<br />
<auro-icon category="interface" name="pin-trip" emphasis></auro-icon> emphasis<br />
<auro-icon category="interface" name="pin-trip" error></auro-icon> error<br />
<auro-icon category="interface" name="pin-trip" info></auro-icon> info<br />
<auro-icon category="interface" name="pin-trip" secondary></auro-icon> secondary<br />
<auro-icon category="interface" name="pin-trip" subtle></auro-icon> subtle<br />
<auro-icon category="interface" name="pin-trip" success></auro-icon> success<br />
<auro-icon category="interface" name="pin-trip" tertiary></auro-icon>tertiary<br />
<auro-icon category="interface" name="pin-trip" warning></auro-icon> warning
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### ondark visual state
#### onDark visual state

All compatible with `ondark` attribute.
All compatible with `onDark` attribute.

<div class="exampleWrapper" style="background: repeating-linear-gradient(45deg, var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a) 10px, var(--ds-color-background-darker, #01426a) 10px, var(--ds-color-background-darker, #01426a) 20px);">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
<!-- The below content is automatically added from ./../../apiExamples/onDark.html -->
<auro-icon ondark category="interface" name="pin-trip"></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
<span style="color: var(--ds-color-text-primary-inverse)">
<auro-icon category="interface" name="pin-trip" onDark></auro-icon>default<br />
<auro-icon category="interface" name="pin-trip" onDark accent></auro-icon>accent<br />
<auro-icon category="interface" name="pin-trip" onDark disabled></auro-icon>disabled<br />
<auro-icon category="interface" name="pin-trip" onDark emphasis></auro-icon>emphasis<br />
<auro-icon category="interface" name="pin-trip" onDark error></auro-icon>error<br />
<auro-icon category="interface" name="pin-trip" onDark info></auro-icon>info<br />
<auro-icon category="interface" name="pin-trip" onDark secondary></auro-icon>secondary<br />
<auro-icon category="interface" name="pin-trip" onDark subtle></auro-icon>subtle<br />
<auro-icon category="interface" name="pin-trip" onDark success></auro-icon>success<br />
<auro-icon category="interface" name="pin-trip" onDark tertiary></auro-icon>tertiary<br />
<auro-icon category="interface" name="pin-trip" onDark warning></auro-icon>warning
</span>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
Expand All @@ -140,13 +163,19 @@ All compatible with `ondark` attribute.
<!-- The below code snippet is automatically added from ./../../apiExamples/onDark.html -->

```html
<auro-icon ondark category="interface" name="pin-trip"></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" emphasis></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" accent></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" disabled></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" error></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" success></auro-icon>
<auro-icon ondark category="interface" name="pin-trip" advisory></auro-icon>
<span style="color: var(--ds-color-text-primary-inverse)">
<auro-icon category="interface" name="pin-trip" onDark></auro-icon>default<br />
<auro-icon category="interface" name="pin-trip" onDark accent></auro-icon>accent<br />
<auro-icon category="interface" name="pin-trip" onDark disabled></auro-icon>disabled<br />
<auro-icon category="interface" name="pin-trip" onDark emphasis></auro-icon>emphasis<br />
<auro-icon category="interface" name="pin-trip" onDark error></auro-icon>error<br />
<auro-icon category="interface" name="pin-trip" onDark info></auro-icon>info<br />
<auro-icon category="interface" name="pin-trip" onDark secondary></auro-icon>secondary<br />
<auro-icon category="interface" name="pin-trip" onDark subtle></auro-icon>subtle<br />
<auro-icon category="interface" name="pin-trip" onDark success></auro-icon>success<br />
<auro-icon category="interface" name="pin-trip" onDark tertiary></auro-icon>tertiary<br />
<auro-icon category="interface" name="pin-trip" onDark warning></auro-icon>warning
</span>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
Expand Down Expand Up @@ -196,3 +225,17 @@ Auro icon's by default are set to the value of the `--ds-size-300` token. To cus
```
<!-- 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-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
}
```
<!-- AURO-GENERATED-CONTENT:END -->
Loading