Use color transitions for outlines

.github/dependabot.yml

@@ -4,3 +4,7 @@ updates:
     directory: "/"
     schedule:
       interval: monthly
+  - package-ecosystem: "github-actions"
+    directory: "/examples/"
+    schedule:
+      interval: monthly

examples/dist/main.css

@@ -810,8 +810,8 @@ video {
   outline-width: 0px;
 }
 
-.transition-all {
-  transition-property: all;
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, outline-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

examples/index.html

@@ -21,7 +21,7 @@ <h2 class="font-bold text-lg mb-2">
         Button example
       </h2>
       <div class="mb-4">
-        <button type="button" class="bg-blue-600 px-4 py-2 text-bg-contrast hover:-bg-lightness-offset-10 rounded transition-all focus:outline-4 outline-0 outline outline-bg/40 font-medium">
+        <button type="button" class="bg-blue-600 px-4 py-2 text-bg-contrast hover:-bg-lightness-offset-10 rounded transition-colors focus:outline-4 outline-0 outline outline-bg/40 font-medium">
           Button
         </button>
       </div>
@@ -43,7 +43,7 @@ <h2 class="font-bold text-lg mb-2">
         Button with changing colors example
       </h2>
       <div class="mb-4">
-        <button type="button" class="bg-blue-600 px-4 py-2 text-bg-contrast hover:bg-blue-400 rounded transition-all focus:outline-4 outline-0 outline outline-bg/40 font-medium">
+        <button type="button" class="bg-blue-600 px-4 py-2 text-bg-contrast hover:bg-blue-400 rounded transition-colors focus:outline-4 outline-0 outline outline-bg/40 font-medium">
           Button
         </button>
       </div>
@@ -100,7 +100,7 @@ <h2 class="font-bold text-lg mb-2">
         Named colors example
       </h2>
       <div class="flex items-center gap-3 mb-4">
-        <button type="button" class="bg-primary px-4 py-2 text-bg-contrast hover:-bg-lightness-offset-10 rounded transition-all focus:outline-4 outline-0 outline outline-bg/40 font-medium">
+        <button type="button" class="bg-primary px-4 py-2 text-bg-contrast hover:-bg-lightness-offset-10 rounded transition-colors focus:outline-4 outline-0 outline outline-bg/40 font-medium">
           Button
         </button>
         <label class="flex items-center font-bold cursor-pointer hover:bg-lightness-offset-10">

examples/package.json

@@ -11,8 +11,5 @@
   "license": "ISC",
   "devDependencies": {
     "tailwindcss": "^3.3.3"
-  },
-  "dependencies": {
-    "tailwindcss-oklch": "^0.0.0-alpha"
   }
 }

examples/tailwind.config.js

@@ -1,7 +1,10 @@
 /** @type {import('tailwindcss').Config} */
+
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 module.exports = {
   content: ["index.html"],
-  plugins: [require('tailwindcss-oklch')({
+  plugins: [require('./../index.js')({
     contrastThreshold: .6,
   })],
   theme: {
@@ -10,6 +13,10 @@ module.exports = {
         primary: `oklch(var(--color-primary-l) var(--color-primary-c) var(--color-primary-h) / <alpha-value>)`,
         body: `oklch(var(--color-body-l) var(--color-body-c) var(--color-body-h) / <alpha-value>)`,
       },
+      transitionProperty: {
+        DEFAULT: `${defaultTheme.transitionProperty.DEFAULT}, outline-color`,
+        colors: `${defaultTheme.transitionProperty.colors}, outline-color`,
+      }
     },
   },
 }