adding motion tokens

primer · Nov 7, 2024 · 59ce842 · 59ce842
1 parent 307e706
commit 59ce842
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/.storybook/primitives-v8.css b/packages/react/.storybook/primitives-v8.css
@@ -1,6 +1,8 @@
 /* size/typography */
+@import '@primer/primitives/dist/css/base/motion/motion.css';
 @import '@primer/primitives/dist/css/base/size/size.css';
 @import '@primer/primitives/dist/css/base/typography/typography.css';
+@import '@primer/primitives/dist/css/functional/motion/motion.css';
 @import '@primer/primitives/dist/css/functional/size/border.css';
 @import '@primer/primitives/dist/css/functional/size/breakpoints.css';
 @import '@primer/primitives/dist/css/functional/size/size-coarse.css';

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -85,7 +85,7 @@
     "@primer/behaviors": "^1.7.2",
     "@primer/live-region-element": "^0.7.1",
     "@primer/octicons-react": "^19.9.0",
-    "@primer/primitives": "9.x || 10.x",
+    "@primer/primitives": "0.0.0-20241107121105",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",

diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css
@@ -17,15 +17,16 @@
   border: var(--borderWidth-thin) solid;
   border-color: var(--button-default-borderColor-rest);
   border-radius: var(--borderRadius-medium);
-  transition: 80ms cubic-bezier(0.65, 0, 0.35, 1);
+  transition-timing-function: var(--easing-exit);
+  transition-duration: var(--base-duration-instant);
   transition-property: color, fill, background-color, border-color;
   appearance: none;
   align-items: center;
   justify-content: space-between;
   gap: var(--base-size-8);
 
   &:hover {
-    transition-duration: 80ms;
+    transition-timing-function: var(--easing-entrance);
   }
 
   &:focus-visible {

diff --git a/packages/react/src/Button/styles.ts b/packages/react/src/Button/styles.ts
@@ -255,7 +255,8 @@ export const getBaseStyles = (theme?: Theme) => ({
   padding: '0 12px',
   gap: '8px',
   minWidth: 'max-content',
-  transition: '80ms cubic-bezier(0.65, 0, 0.35, 1)',
+  transitionTimingFunction: 'var(--easing-exit)',
+  transitionDuration: 'var(--base-duration-instant)',
   transitionProperty: 'color, fill, background-color, border-color',
   '&[href]': {
     display: 'inline-flex',
@@ -264,7 +265,7 @@ export const getBaseStyles = (theme?: Theme) => ({
     },
   },
   '&:hover': {
-    transitionDuration: '80ms',
+    transitionTimingFunction: 'var(--easing-entrance)',
   },
   '&:active': {
     transition: 'none',

diff --git a/packages/react/src/Checkbox/Checkbox.module.css b/packages/react/src/Checkbox/Checkbox.module.css
@@ -4,7 +4,7 @@
   /* checked -> unchecked - add 120ms delay to fully see animation-out */
   transition:
     background-color,
-    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    border-color var(--base-duration-instant) var(--easing-entrance);
 
   &::before {
     width: var(--base-size-16);
@@ -19,7 +19,7 @@
     mask-size: 75%;
     mask-repeat: no-repeat;
     mask-position: center;
-    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
+    animation: checkmarkOut var(--base-duration-instant) var(--easing-move) forwards;
   }
 
   &:checked,
@@ -31,7 +31,7 @@
     border-color: var(--control-checked-bgColor-rest);
 
     &::before {
-      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      animation: checkmarkIn var(--base-duration-instant) var(--easing-move) forwards var(--base-delay-instant);
     }
   }
 
@@ -42,7 +42,7 @@
   &:checked {
     transition:
       background-color,
-      border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;
+      border-color var(--base-duration-instant) var(--easing-exit) var(--base-delay-none); 
 
     &::before {
       visibility: visible;

diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
@@ -63,7 +63,7 @@ const StyledCheckbox = styled.input`
     mask-repeat: no-repeat;
     mask-position: center;
 
-    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
+    animation: checkmarkOut var(--base-duration-instant) var(--easing-move) forwards;
   }
 
   &:checked,
@@ -75,7 +75,7 @@ const StyledCheckbox = styled.input`
     ); /* using bgColor here to avoid a border change in dark high contrast */
 
     &::before {
-      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+      animation: checkmarkIn var(--base-duration-instant) var(--easing-move) forwards var(--base-delay-instant);
     }
   }
 
@@ -86,11 +86,11 @@ const StyledCheckbox = styled.input`
   &:checked {
     transition:
       background-color,
-      border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;
+      border-color var(--base-duration-instant) var(--easing-exit) var(--base-delay-none);
 
     &::before {
       visibility: visible;
-      transition: visibility 0s linear 0s;
+      transition: visibility 0s var(--easing-static) 0s;
     }
 
     &:disabled {

diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
@@ -176,7 +176,7 @@ const Backdrop = styled('div')`
   align-items: center;
   justify-content: center;
   background-color: ${get('colors.primer.canvas.backdrop')};
-  animation: dialog-backdrop-appear 200ms ${get('animation.easeOutCubic')};
+  animation: dialog-backdrop-appear var(--base-duration-fast) var(--easing-entrance);
 
   &[data-position-regular='center'] {
     align-items: center;
@@ -254,14 +254,16 @@ const StyledDialog = styled.div<StyledDialogProps>`
   opacity: 1;
 
   @media screen and (prefers-reduced-motion: no-preference) {
-    animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+    animation: Overlay--motion-scaleFade var(--base-duration-fast) var(--easing-entrance) var(--base-delay-none) 1
+      normal none running;
   }
 
   &[data-position-regular='center'] {
     border-radius: var(--borderRadius-large, 0.75rem);
 
     @media screen and (prefers-reduced-motion: no-preference) {
-      animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+      animation: Overlay--motion-scaleFade var(--base-duration-fast) cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
+        running;
     }
   }
 
@@ -273,7 +275,8 @@ const StyledDialog = styled.div<StyledDialogProps>`
     border-bottom-left-radius: 0;
 
     @media screen and (prefers-reduced-motion: no-preference) {
-      animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+      animation: Overlay--motion-slideInRight var(--base-duration-default) cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal
+        none running;
     }
   }
 
@@ -285,7 +288,8 @@ const StyledDialog = styled.div<StyledDialogProps>`
     border-bottom-right-radius: 0;
 
     @media screen and (prefers-reduced-motion: no-preference) {
-      animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+      animation: Overlay--motion-slideInLeft var(--base-duration-default) cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal
+        none running;
     }
   }
 
@@ -306,7 +310,8 @@ const StyledDialog = styled.div<StyledDialogProps>`
       border-bottom-left-radius: 0;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+        animation: Overlay--motion-slideUp var(--base-duration-default) cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
+          running;
       }
     }
 
@@ -319,7 +324,8 @@ const StyledDialog = styled.div<StyledDialogProps>`
       flex-grow: 1;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+        animation: Overlay--motion-scaleFade var(--base-duration-fast) cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
+          running;
       }
     }
   }

diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
@@ -72,7 +72,7 @@ export const StyledOverlay = styled.div<StyledOverlayProps>`
   width: ${props => widthMap[props.width || 'auto']};
   border-radius: 12px;
   overflow: ${props => (props.overflow ? props.overflow : 'hidden')};
-  animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};
+  animation: overlay-appear var(--base-duration-fast) var(--easing-entrance);
 
   @keyframes overlay-appear {
     0% {

diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -148,7 +148,7 @@ const loadingKeyframes = keyframes`
 `
 
 export const LoadingCounter = styled.span`
-  animation: ${loadingKeyframes} 1.2s ease-in-out infinite alternate;
+  animation: ${loadingKeyframes} 1.2s var(--easing-move) infinite alternate;
   background-color: var(--bgColor-neutral-muted, ${get('colors.neutral.subtle')});
   border-color: var(--borderColor-default, ${get('colors.border.default')});
   width: 1.5rem;

diff --git a/packages/react/src/internal/components/ValidationAnimationContainer.tsx b/packages/react/src/internal/components/ValidationAnimationContainer.tsx
@@ -19,7 +19,7 @@ const fadeIn = keyframes`
   `
 // using easeOutQuint easing fn https://easings.net/#easeOutQuint
 const AnimatedElement = styled.div<Props>`
-  animation: ${props => props.show && css`170ms ${fadeIn} cubic-bezier(0.44, 0.74, 0.36, 1);`};
+  animation: ${props => props.show && css`var(--base-duration-fast) ${fadeIn} var(--easing-entrance);`};
   @media (prefers-reduced-motion) {
     animation: none;
   }