From 69355fa5b080a97d7914ae039ae3d36c0d374034 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Fri, 8 May 2026 08:06:27 +0000 Subject: refactor(motion): introduce easing/duration tokens Add --ease-out-quart, --ease-in-out-quart, --duration-fast, --duration-slow in motion.css and migrate the global anchor, header, and theme-switch transitions to use them. Establishes a shared motion vocabulary for future polish. --- src/styles/colours.css | 8 ++++---- src/styles/motion.css | 6 ++++++ 2 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 src/styles/motion.css (limited to 'src/styles') diff --git a/src/styles/colours.css b/src/styles/colours.css index 12e64dab..eadd0c91 100644 --- a/src/styles/colours.css +++ b/src/styles/colours.css @@ -44,8 +44,8 @@ * { transition: - color 0.15s ease-in-out, - background-color 0.15s ease-in-out, - border-color 0.15s ease-in-out, - box-shadow 0.15s ease-in-out; + color var(--duration-fast) var(--ease-in-out-quart), + background-color var(--duration-fast) var(--ease-in-out-quart), + border-color var(--duration-fast) var(--ease-in-out-quart), + box-shadow var(--duration-fast) var(--ease-in-out-quart); } diff --git a/src/styles/motion.css b/src/styles/motion.css new file mode 100644 index 00000000..9e0f4257 --- /dev/null +++ b/src/styles/motion.css @@ -0,0 +1,6 @@ +:root { + --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1); + --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); + --duration-fast: 0.15s; + --duration-slow: 0.4s; +} -- cgit v1.2.3