Rename --transition-timing-function-* variables to --ease-* (#14886)

This PR renames the `--transition-timing-function-*` theme variables to
`--ease-*` to more closely match the utility names and be a bit more
terse in general.

```diff
  @theme {
-   --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
-   --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
-   --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);

+   --ease-in: cubic-bezier(0.4, 0, 1, 1);
+   --ease-out: cubic-bezier(0, 0, 0.2, 1);
+   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  }
```

This is part of a bigger set of changes where we're renaming other theme
variables as well with the same goals, since many existing theme
variables like `--shadow-*` and `--radius-*` are already not using the
explicit CSS property name.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
 - Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
 - Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
+- Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886))
 
 ## [4.0.0-alpha.31] - 2024-10-29
 

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -366,9 +366,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --perspective-normal: 500px;
     --perspective-midrange: 800px;
     --perspective-distant: 1200px;
-    --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
-    --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
-    --transition-timing-function-in-out: cubic-bezier(.4, 0, .2, 1);
+    --ease-in: cubic-bezier(.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, .2, 1);
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
   }
 }
 

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -365,9 +365,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --perspective-normal: 500px;
   --perspective-midrange: 800px;
   --perspective-distant: 1200px;
-  --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
-  --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
-  --transition-timing-function-in-out: cubic-bezier(.4, 0, .2, 1);
+  --ease-in: cubic-bezier(.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, .2, 1);
+  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
 }
 
 .w-4 {

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -56,6 +56,10 @@ test('config values can be merged into the theme', () => {
             '0.5': '60%',
             '100%': '100%',
           },
+
+          transitionTimingFunction: {
+            fast: 'cubic-bezier(0, 0.55, 0.45, 1)',
+          },
         },
       },
       base: '/root',
@@ -83,6 +87,7 @@ test('config values can be merged into the theme', () => {
   expect(theme.resolve('1/2', ['--width'])).toEqual('60%')
   expect(theme.resolve('0.5', ['--width'])).toEqual('60%')
   expect(theme.resolve('100%', ['--width'])).toEqual('100%')
+  expect(theme.resolve('fast', ['--ease'])).toEqual('cubic-bezier(0, 0.55, 0.45, 1)')
 })
 
 test('will reset default theme values with overwriting theme values', () => {

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -133,6 +133,7 @@ export function keyPathToCssProperty(path: string[]) {
   if (path[0] === 'borderRadius') path[0] = 'radius'
   if (path[0] === 'boxShadow') path[0] = 'shadow'
   if (path[0] === 'animation') path[0] = 'animate'
+  if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
   if (path[0] === 'fontFamily') path[0] = 'font'
 
   for (let part of path) {

packages/tailwindcss/src/css-functions.test.ts

@@ -618,11 +618,10 @@ describe('theme function', () => {
           'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
         ],
         ['width.xs', '20rem'],
-        ['transition.timing.function.in.out', 'cubic-bezier(.4, 0, .2, 1)'],
+        ['transitionTimingFunction.in-out', 'cubic-bezier(.4, 0, .2, 1)'],
         ['backgroundColor.red.500', 'oklch(.637 .237 25.331)'],
       ])('theme(%s) → %s', async (value, result) => {
         let defaultTheme = await fs.readFile(path.join(__dirname, '..', 'theme.css'), 'utf8')
-
         let compiled = await compileCss(css`
           ${defaultTheme}
           .custom {

packages/tailwindcss/src/utilities.test.ts

@@ -13801,17 +13801,17 @@ test('ease', async () => {
     await compileCss(
       css`
         @theme {
-          --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
-          --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
+          --ease-in: cubic-bezier(0.4, 0, 1, 1);
+          --ease-out: cubic-bezier(0, 0, 0.2, 1);
         }
         @tailwind utilities;
       `,
       ['ease-in', 'ease-out', 'ease-[var(--value)]'],
     ),
   ).toMatchInlineSnapshot(`
     ":root {
-      --transition-timing-function-in: cubic-bezier(.4, 0, 1, 1);
-      --transition-timing-function-out: cubic-bezier(0, 0, .2, 1);
+      --ease-in: cubic-bezier(.4, 0, 1, 1);
+      --ease-out: cubic-bezier(0, 0, .2, 1);
     }
 
     .ease-\\[var\\(--value\\)\\] {
@@ -13820,13 +13820,13 @@ test('ease', async () => {
     }
 
     .ease-in {
-      --tw-ease: var(--transition-timing-function-in);
-      transition-timing-function: var(--transition-timing-function-in);
+      --tw-ease: var(--ease-in);
+      transition-timing-function: var(--ease-in);
     }
 
     .ease-out {
-      --tw-ease: var(--transition-timing-function-out);
-      transition-timing-function: var(--transition-timing-function-out);
+      --tw-ease: var(--ease-out);
+      transition-timing-function: var(--ease-out);
     }
 
     @supports (-moz-orient: inline) {

packages/tailwindcss/src/utilities.ts

@@ -3539,7 +3539,7 @@ export function createUtilities(theme: Theme) {
       ['transition-timing-function', 'linear'],
     ])
     functionalUtility('ease', {
-      themeKeys: ['--transition-timing-function'],
+      themeKeys: ['--ease'],
       handle: (value) => [
         transitionTimingFunctionProperty(),
         decl('--tw-ease', value),

packages/tailwindcss/theme.css

@@ -421,9 +421,9 @@
   --perspective-distant: 1200px;
 
   /* Transition timing functions */
-  --transition-timing-function-in: cubic-bezier(0.4, 0, 1, 1);
-  --transition-timing-function-out: cubic-bezier(0, 0, 0.2, 1);
-  --transition-timing-function-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
   @keyframes spin {
     to {