Adding base motion tokens for duration and easing

[lukasoppermann]

Summary

This PR adds a numeric scale for motion durations (used for css transitions and delays) and 4 generic easing curves.

Steps to test:

[changeset-bot]

🦋 Changeset detected

Latest commit: ea69900

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Design Token Diff

/css/functional/motion/motion.css

+++ /home/runner/work/primitives/primitives/dist/css/functional/motion/motion.css	2024-11-21 09:42:30.010712799 +0000
@@ -1,5 +1,6 @@
:root {
-  --motion-loading-delay-default: 1s; /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
-  --motion-spinner-duration-rotation: 1s; /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
-  --motion-skeletonLoader-shimmer-duration-scale: 1s; /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
+  --motion-loading-delay-default: var(--base-duration-1000); /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
+  --motion-spinner-duration-rotation: var(--base-duration-1000); /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
+  --motion-spinner-easing-rotation: var(--base-easing-linear); /* The easing curve for the "Spinner" loading indicator rotation */
+  --motion-skeletonLoader-shimmer-duration-scale: var(--base-duration-1000); /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
}

/css/primitives.css

+++ /home/runner/work/primitives/primitives/dist/css/primitives.css	2024-11-21 09:42:30.262716600 +0000
@@ -1,4 +1,21 @@
:root {
+  --base-easing-linear: cubic-bezier(0, 0, 1, 1); /* Ideal for non-movement properties, like opacity or background color. */
+  --base-easing-easeIn: cubic-bezier(0.7, 0.1, 0.75, 0.9); /* Ideal for movement that starts on the page and ends off the page. */
+  --base-easing-easeOut: cubic-bezier(0.16, 1, 0.3, 1); /* Ideal for movement that starts off the page and ends on the page. */
+  --base-easing-easeInOut: cubic-bezier(0.6, 0, 0.2, 1); /* Ideal for movement that starts and ends on the page. */
+  --base-duration-0: 0ms;
+  --base-duration-75: 75ms;
+  --base-duration-200: 200ms;
+  --base-duration-300: 300ms;
+  --base-duration-400: 400ms;
+  --base-duration-500: 500ms;
+  --base-duration-600: 600ms;
+  --base-duration-700: 700ms;
+  --base-duration-800: 800ms;
+  --base-duration-900: 900ms;
+  --base-duration-1000: 1s;
+}
+:root {
 --base-size-2: 0.125rem;
 --base-size-4: 0.25rem;
 --base-size-6: 0.375rem;
@@ -26,9 +43,10 @@
 --base-text-weight-semibold: 600;
}
:root {
-  --motion-loading-delay-default: 1s; /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
-  --motion-spinner-duration-rotation: 1s; /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
-  --motion-skeletonLoader-shimmer-duration-scale: 1s; /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
+  --motion-loading-delay-default: var(--base-duration-1000); /* The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies. */
+  --motion-spinner-duration-rotation: var(--base-duration-1000); /* The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation */
+  --motion-spinner-easing-rotation: var(--base-easing-linear); /* The easing curve for the "Spinner" loading indicator rotation */
+  --motion-skeletonLoader-shimmer-duration-scale: var(--base-duration-1000); /* The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right) */
}
:root {
 --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */

[langermank]

I think this is very clear 👍 and easy to extend of modify as we start using them

[langermank]

Does this fix our very loud build? 😄

[lukasoppermann]

In part it does remove some clutter, but not all. Will have to experiment with this.