Update easing curves (#1151)

* update easing

Author: lukasoppermann

.changeset/early-starfishes-eat.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Update easing curves

docs/storybook/stories/Motion/Base.stories.tsx

@@ -4,6 +4,8 @@ import baseMotionTokens from '../../../../dist/docs/base/motion/motion.json'
 import {DataTable, Table} from '@primer/react/drafts'
 import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../utilities/getTokensByName'
+import {CubicBezier} from '../StorybookComponents/BezierCurve/BezierCurve'
+import {Card} from '../StorybookComponents/Card/Card'
 
 export default {
   title: 'Motion/Base',
@@ -36,7 +38,7 @@ export const Base = () => {
               field: 'name',
               rowHeader: true,
               renderCell: row => {
-                return <InlineCode value={row.name} copyClipboard />
+                return <InlineCode value={row.name} cssVar={true} copyClipboard />
               },
             },
             {
@@ -58,39 +60,29 @@ export const Base = () => {
           ]}
         />
       </Table.Container>
-      <Table.Container>
-        <h2 id="easing">Base easing</h2>
-        <DataTable
-          aria-labelledby="easing"
-          data={data.filter(item => item.type === 'cubicBezier')}
-          columns={[
-            {
-              header: 'Token',
-              field: 'name',
-              rowHeader: true,
-              renderCell: row => {
-                return <InlineCode value={row.name} copyClipboard />
-              },
-            },
-            {
-              header: 'Output value',
-              field: 'value',
-              rowHeader: true,
-              renderCell: row => {
-                return <p>{JSON.stringify(row.value)}</p>
-              },
-            },
-            {
-              header: 'Source value',
-              field: 'original',
-              rowHeader: true,
-              renderCell: row => {
-                return <p>{JSON.stringify(row.original.$value)}</p>
-              },
-            },
-          ]}
-        />
-      </Table.Container>
+
+      <h2 id="easing">Base easing</h2>
+      <div style={{display: 'flex', flexDirection: 'row', alignItems: 'start', gap: 8}}>
+        {data
+          .filter(item => item.type === 'cubicBezier')
+          .map(item => (
+            <Card
+              key={item.name}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 8,
+                minWidth: 200,
+                maxWidth: 300,
+              }}
+            >
+              <CubicBezier bezier={item.value} />
+              <p>[{item.value.join(', ')}]</p>
+              <InlineCode value={item.name} cssVar={true} copyClipboard />
+            </Card>
+          ))}
+      </div>
     </>
   )
 }

docs/storybook/stories/StorybookComponents/BezierCurve/BezierCurve.tsx

@@ -0,0 +1,44 @@
+import React, {useRef, useEffect} from 'react'
+
+export const CubicBezier = ({bezier}: {bezier: [number, number, number, number]}) => {
+  const canvasRef = useRef(null)
+  const padding = 20
+  const lineWidth = '6'
+  const fillStart = 'purple'
+  const fillEnd = 'blue'
+
+  // Convert CSS cubic-bezier array to control points
+  const [x1, y1, x2, y2] = bezier
+  const p0 = {x: padding, y: 500 - padding}
+  const p1 = {
+    x: x1 * (500 - 2 * padding) + padding,
+    y: 500 - (y1 * (500 - 2 * padding) + padding),
+  }
+  const p2 = {
+    x: x2 * (500 - 2 * padding) + padding,
+    y: 500 - (y2 * (500 - 2 * padding) + padding),
+  }
+  const p3 = {x: 500 - padding, y: padding}
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext('2d')
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    // Create gradient
+    const gradient = ctx.createLinearGradient(p0.x, p0.y, p3.x, p3.y)
+    gradient.addColorStop(0, fillStart)
+    gradient.addColorStop(1, fillEnd)
+
+    // Draw bezier curve
+    ctx.strokeStyle = gradient
+    ctx.lineWidth = lineWidth
+    ctx.lineCap = 'round'
+    ctx.beginPath()
+    ctx.moveTo(p0.x, p0.y)
+    ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y)
+    ctx.stroke()
+  }, [p0, p1, p2, p3])
+
+  return <canvas ref={canvasRef} width={500} height={500} />
+}

docs/storybook/stories/StorybookComponents/Card/Card.css

@@ -0,0 +1,11 @@
+.Card {
+  border-radius: var(--borderRadius-default);
+  border-color: var(--borderColor-default);
+  border-width: 1px;
+  border-style: solid;
+  padding: 16px;
+
+  * {
+    max-width: 100%;
+  }
+}

docs/storybook/stories/StorybookComponents/Card/Card.tsx

@@ -0,0 +1,15 @@
+import React, {ReactNode} from 'react'
+import './Card.css'
+
+interface CardProps extends React.Component {
+  children: ReactNode
+  style: React.CSSProperties
+}
+
+export const Card = ({children, style}: CardProps) => {
+  return (
+    <div className="Card" style={style}>
+      {children}
+    </div>
+  )
+}

src/tokens/base/motion/easing.json5

@@ -12,7 +12,7 @@
         $description: 'Ideal for movement that starts on the page and ends off the page.',
       },
       easeOut: {
-        $value: [0.16, 1, 0.3, 1],
+        $value: [0.3, 0.8, 0.6, 1],
         $type: 'cubicBezier',
         $description: 'Ideal for movement that starts off the page and ends on the page.',
       },

src/tokens/base/motion/timing.json5

@@ -5,10 +5,6 @@
         $value: '0ms',
         $type: 'duration',
       },
-      '75': {
-        $value: '75ms',
-        $type: 'duration',
-      },
       '100': {
         $value: '100ms',
         $type: 'duration',