Skip to content

Commit

Permalink
perf: update to support new --ds token spec
Browse files Browse the repository at this point in the history 
This commit updates parts of the app to support a newer auro-accordion
as well as the new --ds token namespace.

Changes to be committed:
modified:   demo/demo.md
modified:   demo/index.html
modified:   src/style-tokenavatar.scss
modified:   src/style-tokendisplay.scss
modified:   src/style-tokenlist.scss
  • Loading branch information
@blackfalcon
blackfalcon committed Nov 1, 2023
1 parent 2baf5dc commit 82e241c
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 107 deletions.
28 changes: 12 additions & 16 deletions demo/demo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The first element is the `<auro-tokenlist>` default element. the listing of a to
]'></auro-tokenlist>
</div>

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

```html
Expand All @@ -34,7 +34,7 @@ The following example illustrates the `swatchType="rectangle"` feature that incl
]'></auro-tokenlist>
</div>

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

```html
Expand All @@ -54,7 +54,7 @@ Similar to the previous example, the following illustrates the `swatchType="circ
]'></auro-tokenlist>
</div>

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

```html
Expand All @@ -74,7 +74,7 @@ Not all tokens stay forever, so it's important to have a deprecation strategy. A
]'></auro-tokenlist>
</div>

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

```html
Expand All @@ -94,7 +94,7 @@ In addition to `type="deprecated"`, the custom element supports a `version` bool
]'></auro-tokenlist>
</div>

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

```html
Expand Down Expand Up @@ -129,7 +129,7 @@ The following example illustrates the standard token display table.
]'></auro-tokendisplay>
</div>

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

```html
Expand All @@ -154,7 +154,7 @@ This example illustrates the `ondark` token display table.
]'></auro-tokendisplay>
</div>

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

```html
Expand Down Expand Up @@ -182,7 +182,7 @@ The following example illustrates the auro token avatar with the `avatartype="fo
<auro-tokenavatar avatartype="font" ondark colorname="ds-color-text-primary-inverse"></auro-tokenavatar>
</div>

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

```html
Expand All @@ -195,31 +195,27 @@ The following example illustrates the auro token avatar with `avatartype="border

<div class="exampleWrapper">
<auro-tokenavatar avatartype="border" colorname="ds-color-border-error-default"></auro-tokenavatar>
<auro-tokenavatar avatartype="border" ondark colorname="ds-color-border-error-inverse"></auro-tokenavatar>
</div>

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

```html
<auro-tokenavatar avatartype="border" colorname="ds-color-border-error-default"></auro-tokenavatar>
<auro-tokenavatar avatartype="border" ondark colorname="ds-color-border-error-inverse"></auro-tokenavatar>
```
</auro-accordion>

The following example illustrates the auro token avatar with `avatartype="alert"` attribute in standard and ondark modes.

<div class="exampleWrapper">
<auro-tokenavatar avatartype="alert" colorname="ds-color-alert-success-default"></auro-tokenavatar>
<auro-tokenavatar avatartype="alert" ondark colorname="ds-color-alert-success-inverse"></auro-tokenavatar>
</div>

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

```html
<auro-tokenavatar avatartype="alert" colorname="ds-color-alert-success-default"></auro-tokenavatar>
<auro-tokenavatar avatartype="alert" ondark colorname="ds-color-alert-success-inverse"></auro-tokenavatar>
```
</auro-accordion>

Expand All @@ -230,7 +226,7 @@ The following example illustrates the auro token avatar with `avatartype="ui"` a
<auro-tokenavatar avatartype="ui" ondark colorname="ds-color-ui-default-inverse"></auro-tokenavatar>
</div>

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

```html
Expand All @@ -246,7 +242,7 @@ The following example illustrates the auro token avatar with `avatartype="icon"`
<auro-tokenavatar avatartype="icon" ondark colorname='ds-color-ui-default-inverse'></auro-tokenavatar>
</div>

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

```html
Expand Down
23 changes: 11 additions & 12 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,21 @@
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/prismjs@1.24.1/themes/prism.css"
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
/>
<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/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" href="https://unpkg.com/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/demoWrapper.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/elementDemoStyles.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/@alaskaairux/webcorestylesheets@latest/dist/demoWrapper.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@alaskaairux/webcorestylesheets@latest/dist/elementDemoStyles.css" />
</head>
<body class="auro-markdown">
<main></main>

<script type="module">
import 'https://unpkg.com/marked@latest/marked.min.js';
import 'https://unpkg.com/prismjs@latest/prism.js';
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
fetch('/demo/demo.md')
.then((response) => response.text())
.then((text) => {
Expand All @@ -33,11 +34,9 @@
<script type="module" src="../src/auro-tokenlist.js"></script>
<script type="module" src="../src/auro-tokenavatar.js"></script>

<script src="https://unpkg.com/@alaskaairux/auro-popover@latest/dist/auro-popover__bundled.js" type="module"></script>
<script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
<script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
<script src="https://unpkg.com/@alaskaairux/auro-popover@latest/dist/auro-popover__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-popover@latest/dist/auro-popover__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
</body>
</html>

Expand Down
48 changes: 24 additions & 24 deletions src/style-tokenavatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
// ---------------------------------------------------------------------

// Import Auro tokens
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SassCustomProperties';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties';

@import './../node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints';
@import './../node_modules/@alaskaairux/webcorestylesheets/dist/core';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints';
@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core';

/* stylelint-disable selector-max-combinators,
no-descending-specificity,
Expand All @@ -24,25 +24,25 @@

display: flex;
align-items: center;
padding: var(--auro-size-sm) 0;
padding: var(--ds-size-150, $ds-size-150) 0;
}

:host([ondark]) {
.avatar {
background-color: var(--auro-color-background-darker);
background-color: var(--ds-color-background-darker, $ds-color-background-darker);
}

.alertBox {
background-color: transparent;
}

.avatar--color {
box-shadow: inset 0 0 var(--auro-size-xxxs) var(--auro-size-xs) var(--auro-color-background-darker);
box-shadow: inset 0 0 var(--ds-size-25, $ds-size-25) var(--ds-size-100, $ds-size-100, $ds-size-100, $ds-size-100) var(--ds-color-background-darker, $ds-color-background-darker);
}

.uiBox {
&:after {
background-color: var(--auro-color-background-darker);
background-color: var(--ds-color-background-darker, $ds-color-background-darker);
}
}
}
Expand All @@ -52,11 +52,11 @@ p {
}

.avatarWrapper {
margin-right: var(--auro-size-md);
margin-right: var(--ds-size-200, $ds-size-200);
}

.avatarToken {
font-weight: var(--auro-text-heading-display-weight);
font-weight: var(--ds-text-heading-display-weight, $ds-size-200);
}

.avatar {
Expand All @@ -67,25 +67,25 @@ p {
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--auro-color-background-lighter);
background-color: var(--ds-color-background-lighter, $ds-size-200);
clip-path: circle(2.5rem at center);
font-size: var(--auro-size-xl);
font-size: var(--ds-size-400, $ds-size-400);

&:before {
position: absolute;
z-index: 100;
width: calc(5rem - 2px);
height: calc(5rem - 2px);
border: 1px solid var(--auro-color-border-primary-on-light);
border: 1px solid var(--ds-color-border-primary-default, $ds-color-border-primary-default);
border-radius: 50%;
content: '';
}
}

.icon {
width: 80%;
height: var(--auro-size-xs);
border-radius: var(--auro-size-xxs);
height: var(--ds-size-100, $ds-size-100);
border-radius: var(--ds-size-50, $ds-size-50);
margin-right: -40%;
}

Expand All @@ -98,28 +98,28 @@ p {
// inset image
&:after {
position: absolute;
top: calc(50% - var(--auro-size-xxs));
top: calc(50% - var(--ds-size-50, $ds-size-50));
left: 40%;
width: 80%;
height: var(--auro-size-xs);
border-radius: var(--auro-size-xxs);
background-color: var(--auro-color-background-lighter);
height: var(--ds-size-100, $ds-size-100);
border-radius: var(--ds-size-50, $ds-size-50);
background-color: var(--ds-color-background-lighter, $ds-size-200);
content: '';
}
}

.alertBox {
height: 30px;
border-width: 1px 0 1px var(--auro-size-xxs);
border-width: 1px 0 1px var(--ds-size-50, $ds-size-50);
border-style: solid;
background-color: var(--auro-color-base-white);
background-color: var(--ds-color-base-white);

// inset image
&:after {
top: calc(50% - var(--auro-size-xs));
top: calc(50% - var(--ds-size-100, $ds-size-100));
left: 15%;
width: var(--auro-size-sm);
height: var(--auro-size-sm);
width: var(--ds-size-150, $ds-size-150);
height: var(--ds-size-150, $ds-size-150);
border-width: 1px;
border-style: solid;
border-color: inherit;
Expand Down
Loading

0 comments on commit 82e241c

Please sign in to comment.