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.

Sign up for GitHub

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

Implement color theming support #102

Merged
merged 2 commits into from
Jul 26, 2024
Merged

Implement color theming support #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
963a63f
build: update dependencies and eslint config
jordanjones243 Jul 23, 2024
ac48e69
feat: implement color theming support #95
jordanjones243 Jul 24, 2024
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
244 changes: 0 additions & 244 deletions .eslintrc.cjs
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions .husky/commit-msg
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
npx --no-install commitlint --edit "$1"
3 changes: 0 additions & 3 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

./node_modules/.bin/npm-run-all linters test
15 changes: 3 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](

<!-- AURO-GENERATED-CONTENT:END -->

### CSS Custom Property fallbacks

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.

Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.

<!-- AURO-GENERATED-CONTENT:END -->

### Define dependency in project component

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
Expand Down Expand Up @@ -127,9 +118,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.3.0/dist/tokens/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.5/dist/bundled/essentials.css" />
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-badge@2.5.0/dist/auro-badge__bundled.js" type="module"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@[dtVersion]/dist/tokens/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@[wcssVersion]/dist/bundled/essentials.css" />
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-badge@[Version]/dist/auro-badge__bundled.js" type="module"></script>
```

<!-- AURO-GENERATED-CONTENT:END -->
Expand Down
1 change: 0 additions & 1 deletion apiExamples/label.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,3 @@
<auro-badge label error>Danger</auro-badge>
<auro-badge label success>Success</auro-badge>
<auro-badge label advisory>Advisory</auro-badge>
<auro-badge label style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 167</auro-badge>
3 changes: 1 addition & 2 deletions demo/api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<script type="module">
import 'https://cdn.jsdelivr.net/npm/marked@5.1.0/marked.min.js';
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
fetch('/demo/apiExamples.md')
fetch('/demo/api.md')
.then((response) => response.text())
.then((text) => {
const rawHtml = marked.parse(text);
Expand All @@ -41,7 +41,6 @@
});
</script>
<script type="module" src="../index.js" data-demo-script="true"></script>
<script src="./api.min.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>
Expand Down
22 changes: 20 additions & 2 deletions demo/apiExamples.md → demo/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

# auro-badge

HTML custom element for the use of drawing attention to additional interface information
HTML custom element for the use of drawing attention to additional interface information.

## Attributes

Expand All @@ -18,6 +18,7 @@ HTML custom element for the use of drawing attention to additional interface inf
| [mvp](#mvp) | `Boolean` | Sets the background color of the badge to the oneworld mvp color |
| [mvpgold](#mvpgold) | `Boolean` | Sets the background color of the badge to the oneworld mvpgold color |
| `mvpgold75k` | `Boolean` | Sets the background color of the badge to the oneworld mvpgold75k color |
| [ondark](#ondark) | `Boolean` | Enables styles for dark backgrounds |
| [pill](#pill) | `Boolean` | Enables pill UI option |
| [ruby](#ruby) | `Boolean` | Sets the background color of the badge to the oneworld ruby color |
| [sapphire](#sapphire) | `Boolean` | Sets the background color of the badge to the oneworld sapphire color |
Expand Down Expand Up @@ -262,4 +263,21 @@ Use the `pill` attribute to render a small 'pill size' UI.
<auro-badge pill style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 99</auro-badge>
```
<!-- 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.css) -->
<!-- The below code snippet is automatically added from ./../../src/tokens.css -->

```css
:host {
--ds-auro-badge-border-color: var(--ds-color-border-subtle-inverse, #326aa5);
--ds-auro-badge-boxshadow-color: var(--ds-color-border-subtle-default, #f0f7fd);
--ds-auro-badge-container-color: var(--ds-color-utility-navy-default, #326aa5);
--ds-auro-badge-text-color: var(--ds-color-text-primary-inverse, #ffffff);
}
```
<!-- AURO-GENERATED-CONTENT:END -->
4 changes: 0 additions & 4 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@
type="text/css"
href="https://cdn.jsdelivr.net/npm/prismjs@latest/themes/prism.css"
/>
<!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.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" />
Expand Down Expand Up @@ -39,6 +36,5 @@
</script>

<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
</body>
</html>
4 changes: 1 addition & 3 deletions demo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,6 @@ Use the `label` attribute for a text label experience. The last example illustra
<auro-badge label error>Danger</auro-badge>
<auro-badge label success>Success</auro-badge>
<auro-badge label advisory>Advisory</auro-badge>
<auro-badge label style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 167</auro-badge>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
Expand All @@ -184,8 +183,7 @@ Use the `label` attribute for a text label experience. The last example illustra
<auro-badge label>Hello World</auro-badge>
<auro-badge label error>Danger</auro-badge>
<auro-badge label success>Success</auro-badge>
<auro-badge label advisory>Advisory</auro-badge>
<auro-badge label style="color: var(--auro-color-text-primary-on-light); background-color: var(--auro-color-brand-tropical-300); border-color: var(--auro-color-brand-tropical-300)">Flight 167</auro-badge>
<auro-badge label advisory>Advisory</auro-badge>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
Expand Down
3 changes: 2 additions & 1 deletion docs/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# auro-badge

HTML custom element for the use of drawing attention to additional interface information
HTML custom element for the use of drawing attention to additional interface information.

## Attributes

Expand All @@ -15,6 +15,7 @@ HTML custom element for the use of drawing attention to additional interface inf
| `mvp` | `Boolean` | Sets the background color of the badge to the oneworld mvp color |
| `mvpgold` | `Boolean` | Sets the background color of the badge to the oneworld mvpgold color |
| `mvpgold75k` | `Boolean` | Sets the background color of the badge to the oneworld mvpgold75k color |
| `ondark` | `Boolean` | Enables styles for dark backgrounds |
| `pill` | `Boolean` | Enables pill UI option |
| `ruby` | `Boolean` | Sets the background color of the badge to the oneworld ruby color |
| `sapphire` | `Boolean` | Sets the background color of the badge to the oneworld sapphire color |
Expand Down
Loading