diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 7efc6dcb7..4ec0989c4 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -255,7 +255,7 @@ Shadows
  • - Motion + Transitions
  • Z-index diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index c95845e9c..6a681e34b 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -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 { diff --git a/docs/docs/components/copy-button.md b/docs/docs/components/copy-button.md index 312a08e4b..36a789206 100644 --- a/docs/docs/components/copy-button.md +++ b/docs/docs/components/copy-button.md @@ -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 { diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md index 6e063928d..e50225d9c 100644 --- a/docs/docs/components/tag.md +++ b/docs/docs/components/tag.md @@ -107,7 +107,7 @@ Use the `removable` attribute to add a remove button to the tag. ``` @@ -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); } `; diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index 56548c970..a26c53a15 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -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; diff --git a/docs/docs/theming/motion.md b/docs/docs/theming/motion.md deleted file mode 100644 index b96715dc5..000000000 --- a/docs/docs/theming/motion.md +++ /dev/null @@ -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 ---- - - - -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` |
    | -| `--wa-transition-normal` | `150ms` |
    | -| `--wa-transition-fast` | `75ms` |
    | \ No newline at end of file diff --git a/docs/docs/theming/transitions.md b/docs/docs/theming/transitions.md new file mode 100644 index 000000000..c1848b63e --- /dev/null +++ b/docs/docs/theming/transitions.md @@ -0,0 +1,49 @@ +--- +title: Transitions +description: Customize your theme's built-in transitions with Web Awesome's transition properties. +layout: page.njk +--- + + + +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` |
    | + +### 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` |
    | +| `--wa-transition-normal` | `150ms` |
    | +| `--wa-transition-fast` | `75ms` |
    | \ No newline at end of file diff --git a/src/components/animated-image/animated-image.styles.ts b/src/components/animated-image/animated-image.styles.ts index c88f6012a..5a274bdac 100644 --- a/src/components/animated-image/animated-image.styles.ts +++ b/src/components/animated-image/animated-image.styles.ts @@ -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 { diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts index dafcb1e93..01819c6b7 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts @@ -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 { diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index e9f61fd75..2532d616c 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -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; } diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts index f764d5935..e575ebfc8 100644 --- a/src/components/checkbox/checkbox.styles.ts +++ b/src/components/checkbox/checkbox.styles.ts @@ -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 { diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts index abc63bd8e..c451bdd2c 100644 --- a/src/components/color-picker/color-picker.styles.ts +++ b/src/components/color-picker/color-picker.styles.ts @@ -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 { diff --git a/src/components/copy-button/copy-button.styles.ts b/src/components/copy-button/copy-button.styles.ts index a9557e58a..03cc167d1 100644 --- a/src/components/copy-button/copy-button.styles.ts +++ b/src/components/copy-button/copy-button.styles.ts @@ -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 { diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts index 6de9d7ead..430514866 100644 --- a/src/components/details/details.styles.ts +++ b/src/components/details/details.styles.ts @@ -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 { diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts index 16d8c92ba..e825dbafd 100644 --- a/src/components/icon-button/icon-button.styles.ts +++ b/src/components/icon-button/icon-button.styles.ts @@ -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; } diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index 97b8c6e2e..c1d73b7b4 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -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 */ diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 149eded48..fd9730613 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -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; diff --git a/src/components/option/option.styles.ts b/src/components/option/option.styles.ts index eafe31a98..eddc633ab 100644 --- a/src/components/option/option.styles.ts +++ b/src/components/option/option.styles.ts @@ -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; } diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts index cc3a5860a..ec900f1bd 100644 --- a/src/components/radio/radio.styles.ts +++ b/src/components/radio/radio.styles.ts @@ -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 { diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts index f7d0ba608..40794ec73 100644 --- a/src/components/range/range.styles.ts +++ b/src/components/range/range.styles.ts @@ -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; } diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts index 6948980f2..1b7b8a22d 100644 --- a/src/components/rating/rating.styles.ts +++ b/src/components/rating/rating.styles.ts @@ -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; } diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index e1f87ad8f..4c6a1efd1 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -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 { diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts index d1005ff44..4e9c77c9e 100644 --- a/src/components/switch/switch.styles.ts +++ b/src/components/switch/switch.styles.ts @@ -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 { diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts index 5a6dbd751..a6bccc4c0 100644 --- a/src/components/tab-group/tab-group.styles.ts +++ b/src/components/tab-group/tab-group.styles.ts @@ -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 { diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts index 315e9cfdb..575f4809e 100644 --- a/src/components/textarea/textarea.styles.ts +++ b/src/components/textarea/textarea.styles.ts @@ -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; } diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts index 15320821b..0c64e73fc 100644 --- a/src/components/tree-item/tree-item.styles.ts +++ b/src/components/tree-item/tree-item.styles.ts @@ -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 { diff --git a/src/themes/default.css b/src/themes/default.css index 29e43cf63..913cdae61 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -348,6 +348,8 @@ /** * Transitions */ + --wa-transition-easing: ease; + --wa-transition-slow: 300ms; --wa-transition-normal: 150ms; --wa-transition-fast: 75ms;