From f39ff9c4ae809f9fb3703f12d8d9c9e90c7394ff Mon Sep 17 00:00:00 2001 From: Aaron Iker Date: Thu, 29 Jan 2026 17:50:48 +0100 Subject: [PATCH] feat: multiple transitions --- packages/ui/src/components/card.css | 4 ++- packages/ui/src/components/checkbox.css | 12 +++++++ packages/ui/src/components/dialog.css | 41 ++++++++++++------------ packages/ui/src/components/switch.css | 12 +++---- packages/ui/src/components/tabs.css | 3 ++ packages/ui/src/components/tag.css | 3 ++ packages/ui/src/styles/utilities.css | 42 +++++++++++++++++++++++++ 7 files changed, 89 insertions(+), 28 deletions(-) diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css index 6dae47223d..809fbdacde 100644 --- a/packages/ui/src/components/card.css +++ b/packages/ui/src/components/card.css @@ -4,7 +4,9 @@ flex-direction: column; background-color: var(--surface-inset-base); border: 1px solid var(--border-weaker-base); - transition: background-color 0.15s ease; + transition-property: background-color, border-color; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); border-radius: var(--radius-md); padding: 6px 12px; overflow: clip; diff --git a/packages/ui/src/components/checkbox.css b/packages/ui/src/components/checkbox.css index b10ebbbd19..cad0dd2dd6 100644 --- a/packages/ui/src/components/checkbox.css +++ b/packages/ui/src/components/checkbox.css @@ -4,6 +4,18 @@ gap: 12px; cursor: default; + [data-slot="checkbox-checkbox-control"] { + transition-property: border-color, background-color, box-shadow; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); + } + + [data-slot="checkbox-checkbox-indicator"] { + transition-property: opacity; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); + } + [data-slot="checkbox-checkbox-input"] { position: absolute; width: 1px; diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css index a0e7e111fd..e0e06c2414 100644 --- a/packages/ui/src/components/dialog.css +++ b/packages/ui/src/components/dialog.css @@ -6,11 +6,15 @@ z-index: 50; background-color: hsl(from var(--background-base) h s l / 0.2); - /* animation: overlayHide 250ms ease 100ms forwards; */ - /**/ - /* &[data-expanded] { */ - /* animation: overlayShow 250ms ease; */ - /* } */ + animation: overlayHide var(--transition-duration) var(--transition-easing) forwards; + + &[data-expanded] { + animation: overlayShow var(--transition-duration) var(--transition-easing) forwards; + } + + @starting-style { + animation: none; + } } [data-component="dialog"] { @@ -31,7 +35,6 @@ flex-direction: column; align-items: center; justify-items: start; - overflow: visible; [data-slot="dialog-content"] { display: flex; @@ -41,16 +44,8 @@ width: 100%; max-height: 100%; min-height: 280px; - overflow: auto; pointer-events: auto; - /* Hide scrollbar */ - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } - /* padding: 8px; */ /* padding: 8px 8px 0 8px; */ border-radius: var(--radius-xl); @@ -58,11 +53,15 @@ background-clip: padding-box; box-shadow: var(--shadow-lg-border-base); - /* animation: contentHide 300ms ease-in forwards; */ - /**/ - /* &[data-expanded] { */ - /* animation: contentShow 300ms ease-out; */ - /* } */ + animation: contentHide var(--transition-duration) var(--transition-easing) forwards; + + &[data-expanded] { + animation: contentShow var(--transition-duration) var(--transition-easing) forwards; + } + + @starting-style { + animation: none; + } [data-slot="dialog-header"] { display: flex; @@ -166,7 +165,7 @@ @keyframes contentShow { from { opacity: 0; - transform: scale(0.96); + transform: translateY(2.5%) scale(0.975); } to { opacity: 1; @@ -180,6 +179,6 @@ } to { opacity: 0; - transform: scale(0.96); + transform: translateY(-2.5%) scale(0.975); } } diff --git a/packages/ui/src/components/switch.css b/packages/ui/src/components/switch.css index 89e8447322..9ea722760a 100644 --- a/packages/ui/src/components/switch.css +++ b/packages/ui/src/components/switch.css @@ -26,9 +26,9 @@ border-radius: 3px; border: 1px solid var(--border-weak-base); background: var(--surface-base); - transition: - background-color 150ms, - border-color 150ms; + transition-property: background-color, border-color, box-shadow; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); } [data-slot="switch-thumb"] { @@ -47,9 +47,9 @@ 0 1px 3px 0 rgba(19, 16, 16, 0.08); transform: translateX(-1px); - transition: - transform 150ms, - background-color 150ms; + transition-property: transform, background-color, border-color; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); } [data-slot="switch-label"] { diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css index 9af141306b..5a8507564d 100644 --- a/packages/ui/src/components/tabs.css +++ b/packages/ui/src/components/tabs.css @@ -57,6 +57,9 @@ border-bottom: 1px solid var(--border-weak-base); border-right: 1px solid var(--border-weak-base); background-color: var(--background-base); + transition-property: background-color, border-color, color; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); [data-slot="tabs-trigger"] { display: flex; diff --git a/packages/ui/src/components/tag.css b/packages/ui/src/components/tag.css index 0e8b7b9f10..5ffd2b9115 100644 --- a/packages/ui/src/components/tag.css +++ b/packages/ui/src/components/tag.css @@ -8,6 +8,9 @@ border: 0.5px solid var(--border-weak-base); background: var(--surface-raised-base); color: var(--text-base); + transition-property: background-color, border-color, color; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); &[data-size="normal"] { height: 18px; diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css index 8c954f1fe4..82a913c883 100644 --- a/packages/ui/src/styles/utilities.css +++ b/packages/ui/src/styles/utilities.css @@ -1,6 +1,17 @@ :root { interpolate-size: allow-keywords; + /* Transition tokens */ + --transition-duration: 200ms; + --transition-easing: cubic-bezier(0.25, 0, 0.5, 1); + --transition-fast: 150ms; + --transition-slow: 300ms; + + /* Allow height transitions from 0 to auto */ + @supports (interpolate-size: allow-keywords) { + interpolate-size: allow-keywords; + } + [data-popper-positioner] { pointer-events: none; } @@ -129,3 +140,34 @@ line-height: var(--line-height-x-large); /* 120% */ letter-spacing: var(--letter-spacing-tightest); } + +/* Transition utility classes */ +.transition-colors { + transition-property: background-color, border-color, color, fill, stroke; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); +} + +.transition-opacity { + transition-property: opacity; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); +} + +.transition-transform { + transition-property: transform; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); +} + +.transition-shadow { + transition-property: box-shadow; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); +} + +.transition-interactive { + transition-property: background-color, border-color, color, box-shadow, opacity; + transition-duration: var(--transition-duration); + transition-timing-function: var(--transition-easing); +}