From 59d2e1285ca259d224d5eb017669b4e6a2171e9e Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Thu, 6 Feb 2025 09:23:08 -0800 Subject: [PATCH] feat(tokens): added new motion tokens (#2562) --- .changeset/giant-comics-admire.md | 5 +++++ dist/accordion/accordion.css | 4 ++-- dist/tokens/evo-light.css | 20 ++++++++++++++++++++ src/sass/accordion/accordion.scss | 4 ++-- src/tokens/evo-light.css | 20 ++++++++++++++++++++ 5 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 .changeset/giant-comics-admire.md diff --git a/.changeset/giant-comics-admire.md b/.changeset/giant-comics-admire.md new file mode 100644 index 000000000..ee2f257d9 --- /dev/null +++ b/.changeset/giant-comics-admire.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(tokens): added new motion tokens diff --git a/dist/accordion/accordion.css b/dist/accordion/accordion.css index 6422d0a45..eb7be48f4 100644 --- a/dist/accordion/accordion.css +++ b/dist/accordion/accordion.css @@ -26,8 +26,8 @@ ul.accordion details .details__content { transform: scaleY(0); transform-origin: top; transition: - opacity 0.5s cubic-bezier(0.3, 0, 0, 1), - transform 0.5s cubic-bezier(0.3, 0, 0, 1); + opacity var(--motion-duration-medium-3) var(--motion-easing-standard), + transform var(--motion-duration-medium-3) var(--motion-easing-standard); } ul.accordion details[open] .details__content { diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css index f864dabf8..30c143f29 100644 --- a/dist/tokens/evo-light.css +++ b/dist/tokens/evo-light.css @@ -196,4 +196,24 @@ var(--color-ai-solid-green-subtle) 100% ); --color-media-disabled-filter: grayscale(1) opacity(0.25); + /* Motion Functions */ + --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1); + --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1); + --motion-easing-quick-exit: cubic-bezier(1, 0, 0, 1); + --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1); + --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1); + --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1); + --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.5); + --motion-easing-linear: cubic-bezier(0, 0, 1, 1); + /* Motion Timings */ + --motion-duration-instant: 17ms; + --motion-duration-short-1: 50ms; + --motion-duration-short-2: 83ms; + --motion-duration-short-3: 167ms; + --motion-duration-medium-1: 250ms; + --motion-duration-medium-2: 333ms; + --motion-duration-medium-3: 500ms; + --motion-duration-long-1: 667ms; + --motion-duration-long-2: 883ms; + --motion-duration-long-3: 1000ms; } diff --git a/src/sass/accordion/accordion.scss b/src/sass/accordion/accordion.scss index 0d23a1e8d..a6361bdea 100644 --- a/src/sass/accordion/accordion.scss +++ b/src/sass/accordion/accordion.scss @@ -33,8 +33,8 @@ ul.accordion details .details__content { transform: scaleY(0); transform-origin: top; transition: - opacity 500ms cubic-bezier(0.3, 0, 0, 1), - transform 500ms cubic-bezier(0.3, 0, 0, 1); + opacity var(--motion-duration-medium-3) var(--motion-easing-standard), + transform var(--motion-duration-medium-3) var(--motion-easing-standard); } ul.accordion details[open] .details__content { diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css index f864dabf8..30c143f29 100644 --- a/src/tokens/evo-light.css +++ b/src/tokens/evo-light.css @@ -196,4 +196,24 @@ var(--color-ai-solid-green-subtle) 100% ); --color-media-disabled-filter: grayscale(1) opacity(0.25); + /* Motion Functions */ + --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1); + --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1); + --motion-easing-quick-exit: cubic-bezier(1, 0, 0, 1); + --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1); + --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1); + --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1); + --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.5); + --motion-easing-linear: cubic-bezier(0, 0, 1, 1); + /* Motion Timings */ + --motion-duration-instant: 17ms; + --motion-duration-short-1: 50ms; + --motion-duration-short-2: 83ms; + --motion-duration-short-3: 167ms; + --motion-duration-medium-1: 250ms; + --motion-duration-medium-2: 333ms; + --motion-duration-medium-3: 500ms; + --motion-duration-long-1: 667ms; + --motion-duration-long-2: 883ms; + --motion-duration-long-3: 1000ms; }