js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add transition easing property

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-07 18:12:02 -04:00
parent 0dccdaecdf
commit dd040d3b39
27 changed files with 103 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/sidebar.njk
View File

@@ -255,7 +255,7 @@
<a href="/docs/theming/shadows">Shadows</a>
</li>
<li>
<a href="/docs/theming/motion">Motion</a>
<a href="/docs/theming/transitions">Transitions</a>
</li>
<li>
<a href="/docs/theming/z-index">Z-index</a>

2
docs/docs/components/button.md
View File

@@ -486,7 +486,7 @@ This example demonstrates how to style buttons using a custom class. This is the
color: white;
font-size: 1.125rem;
box-shadow: 0 2px 10px #0002;
transition: var(--wa-transition-slow) all;
transition: all var(--wa-transition-slow) var(--wa-transition-easing);
}
wa-button.pink::part(base):hover {

2
docs/docs/components/copy-button.md
View File

@@ -210,7 +210,7 @@ You can customize the button to your liking with CSS.
border-right-color: #ad005c;
border-bottom-color: #ad005c;
border-radius: 6px;
transition: var(--wa-transition-slow) all;
transition: all var(--wa-transition-slow) var(--wa-transition-easing);
}
.custom-styles::part(button):hover {

4
docs/docs/components/tag.md
View File

@@ -107,7 +107,7 @@ Use the `removable` attribute to add a remove button to the tag.
<style>
.tags-removable wa-tag {
transition: var(--wa-transition-normal) opacity;
transition: opacity var(--wa-transition-normal);
}
</style>
```
@@ -118,7 +118,7 @@ import WaTag from '@shoelace-style/shoelace/dist/react/tag';
const css = `
.tags-removable wa-tag {
transition: var(--wa-transition-normal) opacity;
transition: opacity var(--wa-transition-normal);
}
`;

2
docs/docs/experimental/themer.md
View File

@@ -291,7 +291,7 @@ hasOutline: false
border-radius: var(--wa-border-radius-m);
box-shadow: inset 0 0 0 0 transparent;
padding: 1em;
transition: box-shadow var(--wa-transition-normal);
transition: box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
&[aria-checked="true"] {
border-color: transparent;

27
docs/docs/theming/motion.md
View File

@@ -1,27 +0,0 @@
---
title: Motion
description: Customize your theme's built-in transitions and animations with Web Awesome's motion properties.
layout: page.njk
---
<style>
.swatch {
background-color: var(--wa-color-neutral-fill-normal);
border: none;
}
.swatch:hover {
background-color: var(--wa-color-brand-fill-loud);
}
</style>
Motion like transitions and animations can make interactions more lively and emphasize the relationship between a user's action and its outcome.
## Transition Duration
Web Awesome uses transitions to ease between component states.
| Custom Property | Default Value | Preview |
| ------------------------ | ------------- | ------------------------------------------------------------------------------------------- |
| `--wa-transition-slow` | `300ms` | <div class="swatch" style="transition: background-color var(--wa-transition-slow)"></div> |
| `--wa-transition-normal` | `150ms` | <div class="swatch" style="transition: background-color var(--wa-transition-normal)"></div> |
| `--wa-transition-fast` | `75ms` | <div class="swatch" style="transition: background-color var(--wa-transition-fast)"></div> |

49
docs/docs/theming/transitions.md Normal file
View File

@@ -0,0 +1,49 @@
---
title: Transitions
description: Customize your theme's built-in transitions with Web Awesome's transition properties.
layout: page.njk
---
<style>
.swatch {
background-color: var(--wa-color-neutral-fill-normal);
border: none;
position: relative;
}
.swatch::after {
content: '';
position: absolute;
background-color: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-border-radius-s);
top: 0;
left: 0;
width: 0;
height: 100%;
transition: inherit;
}
.swatch:hover::after {
width: 100%;
}
</style>
Transitions can make interactions more lively and emphasize the relationship between a user's action and its outcome.
### Easing
Easing controls the standard `transition-timing-function` used for transitions throughout Web Awesome.
| Custom Property | Default Value | Preview |
| ------------------------ | ------------- | -------------------------------------------------------------------------------------- |
| `--wa-transition-easing` | `ease` | <div class="swatch" style="transition: width 600ms var(--wa-transition-easing)"></div> |
### Duration
Web Awesome uses different transition durations to make it easy to track a component's state while minimizing sluggish or distracting movement.
Properties that change between frequent, incidental states, such as hover and focus, generally use faster transitions than properties that change between states that are more intentional and impactful, like checked or open.
| Custom Property | Default Value | Preview |
| ------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------ |
| `--wa-transition-slow` | `300ms` | <div class="swatch" style="transition: width var(--wa-transition-slow) var(--wa-transition-easing)"></div> |
| `--wa-transition-normal` | `150ms` | <div class="swatch" style="transition: width var(--wa-transition-normal) var(--wa-transition-easing)"></div> |
| `--wa-transition-fast` | `75ms` | <div class="swatch" style="transition: width var(--wa-transition-fast) var(--wa-transition-easing)"></div> |

2
src/components/animated-image/animated-image.styles.ts
View File

@@ -36,7 +36,7 @@ export default css`
border-radius: var(--wa-border-radius-circle);
color: white;
pointer-events: none;
transition: var(--wa-transition-normal) opacity;
transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
}
:host([play]:hover) .animated-image__control-box {

2
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -26,7 +26,7 @@ export default css`
padding: 0;
margin: 0;
cursor: pointer;
transition: var(--wa-transition-normal) color;
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
}
:host(:not(:last-of-type)) .breadcrumb-item__label {

8
src/components/button/button.styles.ts
View File

@@ -172,10 +172,10 @@ export default css`
vertical-align: middle;
padding: 0;
transition:
var(--wa-transition-fast) background,
var(--wa-transition-fast) border,
var(--wa-transition-fast) box-shadow,
var(--wa-transition-fast) color;
background var(--wa-transition-fast) var(--wa-transition-easing),
border var(--wa-transition-fast) var(--wa-transition-easing),
box-shadow var(--wa-transition-fast) var(--wa-transition-easing),
color var(--wa-transition-fast) var(--wa-transition-easing);
cursor: inherit;
}

8
src/components/checkbox/checkbox.styles.ts
View File

@@ -56,10 +56,10 @@ export default css`
box-shadow: var(--box-shadow);
color: var(--wa-form-control-value-color);
transition:
var(--wa-transition-normal) border-color,
var(--wa-transition-normal) background-color,
var(--wa-transition-normal) color,
var(--wa-transition-normal) box-shadow;
background-color var(--wa-transition-normal) var(--wa-transition-easing),
border-color var(--wa-transition-fast) var(--wa-transition-easing),
box-shadow var(--wa-transition-fast) var(--wa-transition-easing),
color var(--wa-transition-fast) var(--wa-transition-easing);
}
.checkbox__input {

2
src/components/color-picker/color-picker.styles.ts
View File

@@ -51,7 +51,7 @@ export default css`
border: solid 2px white;
margin-top: calc(var(--grid-handle-size) / -2);
margin-left: calc(var(--grid-handle-size) / -2);
transition: var(--wa-transition-normal) scale;
transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
}
.color-picker__grid-handle--dragging {

2
src/components/copy-button/copy-button.styles.ts
View File

@@ -19,7 +19,7 @@ export default css`
color: inherit;
padding: var(--wa-space-xs);
cursor: pointer;
transition: var(--wa-transition-fast) color;
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
}
.copy-button--success .copy-button__button {

2
src/components/details/details.styles.ts
View File

@@ -70,7 +70,7 @@ export default css`
display: flex;
align-items: center;
color: var(--icon-color);
transition: var(--wa-transition-normal) rotate ease;
transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
}
.details--open .details__summary-icon {

2
src/components/icon-button/icon-button.styles.ts
View File

@@ -17,7 +17,7 @@ export default css`
color: inherit;
padding: var(--wa-space-xs);
cursor: pointer;
transition: var(--wa-transition-fast) color;
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
-webkit-appearance: none;
}

6
src/components/input/input.styles.ts
View File

@@ -35,9 +35,9 @@ export default css`
overflow: hidden;
cursor: text;
transition:
var(--wa-transition-normal) background,
var(--wa-transition-normal) border,
var(--wa-transition-fast) outline;
background var(--wa-transition-normal) var(--wa-transition-easing),
border var(--wa-transition-normal) var(--wa-transition-easing),
outline var(--wa-transition-fast) var(--wa-transition-easing);
}
/* Standard inputs */

2
src/components/menu-item/menu-item.styles.ts
View File

@@ -18,7 +18,7 @@ export default css`
font: inherit;
color: var(--wa-color-text-normal);
padding: var(--wa-space-2xs) var(--wa-space-2xs);
transition: var(--wa-transition-normal) fill;
transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
user-select: none;
-webkit-user-select: none;
white-space: nowrap;

2
src/components/option/option.styles.ts
View File

@@ -18,7 +18,7 @@ export default css`
font: inherit;
color: var(--wa-color-neutral-on-quiet);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
transition: var(--wa-transition-normal) fill;
transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
cursor: pointer;
}

8
src/components/radio/radio.styles.ts
View File

@@ -65,10 +65,10 @@ export default css`
box-shadow: var(--box-shadow);
color: transparent;
transition:
var(--wa-transition-normal) border-color,
var(--wa-transition-normal) background-color,
var(--wa-transition-normal) color,
var(--wa-transition-normal) box-shadow;
background var(--wa-transition-normal) var(--wa-transition-easing),
border-color var(--wa-transition-normal) var(--wa-transition-easing),
box-shadow var(--wa-transition-normal) var(--wa-transition-easing),
color var(--wa-transition-normal) var(--wa-transition-easing);
}
.radio__input {

8
src/components/range/range.styles.ts
View File

@@ -111,10 +111,10 @@ export default css`
var(--thumb-shadow),
0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
transition:
var(--wa-transition-normal) border-color,
var(--wa-transition-normal) background-color,
var(--wa-transition-normal) color,
var(--wa-transition-normal) box-shadow;
background-color var(--wa-transition-normal) var(--wa-transition-easing),
border-color var(--wa-transition-normal) var(--wa-transition-easing),
box-shadow var(--wa-transition-normal) var(--wa-transition-easing),
color var(--wa-transition-normal) var(--wa-transition-easing);
cursor: pointer;
}

2
src/components/rating/rating.styles.ts
View File

@@ -56,7 +56,7 @@ export default css`
}
.rating__symbol {
transition: var(--wa-transition-normal) scale;
transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
pointer-events: none;
}

10
src/components/select/select.styles.ts
View File

@@ -58,11 +58,11 @@ export default css`
overflow: hidden;
cursor: pointer;
transition:
var(--wa-transition-normal) background,
var(--wa-transition-normal) border,
var(--wa-transition-normal) box-shadow,
var(--wa-transition-normal) color,
var(--wa-transition-fast) outline;
background var(--wa-transition-normal) var(--wa-transition-easing),
border var(--wa-transition-normal) var(--wa-transition-easing),
box-shadow var(--wa-transition-normal) var(--wa-transition-easing),
color var(--wa-transition-normal) var(--wa-transition-easing),
outline var(--wa-transition-fast) var(--wa-transition-easing);
}
.select__display-input {

12
src/components/switch/switch.styles.ts
View File

@@ -56,8 +56,8 @@ export default css`
border-width: var(--border-width);
box-shadow: var(--box-shadow);
transition:
var(--wa-transition-normal) background,
var(--wa-transition-normal) border-color;
background var(--wa-transition-normal) var(--wa-transition-easing),
border-color var(--wa-transition-normal) var(--wa-transition-easing);
}
.switch__control .switch__thumb {
@@ -68,10 +68,10 @@ export default css`
box-shadow: var(--thumb-shadow);
translate: calc((var(--width) - var(--height)) / -2);
transition:
var(--wa-transition-normal) translate ease,
var(--wa-transition-normal) background-color,
var(--wa-transition-normal) border-color,
var(--wa-transition-normal) box-shadow;
translate var(--wa-transition-normal) var(--wa-transition-easing),
background-color var(--wa-transition-normal) var(--wa-transition-easing),
border-color var(--wa-transition-normal) var(--wa-transition-easing),
box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
}
.switch__input {

4
src/components/tab-group/tab-group.styles.ts
View File

@@ -22,8 +22,8 @@ export default css`
.tab-group__indicator {
position: absolute;
transition:
var(--wa-transition-normal) translate ease,
var(--wa-transition-normal) width ease;
translate var(--wa-transition-normal) var(--wa-transition-easing),
width var(--wa-transition-normal) var(--wa-transition-easing);
}
.tab-group--has-scroll-controls .tab-group__nav-container {

6
src/components/textarea/textarea.styles.ts
View File

@@ -32,9 +32,9 @@ export default css`
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
transition:
var(--wa-transition-normal) background,
var(--wa-transition-normal) border,
var(--wa-transition-fast) outline;
background var(--wa-transition-normal) var(--wa-transition-easing),
border var(--wa-transition-normal) var(--wa-transition-easing),
outline var(--wa-transition-fast) var(--wa-transition-easing);
cursor: text;
}

4
src/components/tree-item/tree-item.styles.ts
View File

@@ -65,7 +65,7 @@ export default css`
}
.tree-item__expand-button {
transition: var(--wa-transition-normal) rotate ease;
transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
}
.tree-item--expanded .tree-item__expand-button {
@@ -119,7 +119,7 @@ export default css`
.tree-item__label {
display: flex;
align-items: center;
transition: var(--wa-transition-normal) color;
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
}
.tree-item__children {

2
src/themes/default.css
View File

@@ -348,6 +348,8 @@
/**
* Transitions
*/
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;