@payfit/unity-themes 3.0.4 → 3.1.0

package/dist/css/unity.css

@@ -53,7 +53,9 @@
 @layer base {
   :root,
   [data-uy-theme="default"] {
-    --uy-animate-gradient-rotate: 3s linear infinite gradient-rotate;
+    --uy-animate-uy-ai-gradient-angle-rotate: 3s linear infinite uy-ai-gradient-angle-rotate;
+    --uy-animate-uy-ai-gradient-linear-sweep: 3s linear infinite uy-ai-gradient-linear-sweep;
+    --uy-animate-uy-ai-gradient-radial-pulse: 2s ease-in-out infinite uy-ai-gradient-radial-pulse;
     --uy-animate-spin: 2s linear infinite spin;
     --uy-animate-arc-shrink: 2s ease-in-out infinite arc-shrink;
     --uy-animate-pulse: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse;
@@ -575,6 +577,10 @@
     --uy-color-utility-inverted-focus-ring: var(--uy-color-yellow-l4);
     --uy-gradient-payfit-ai:
       var(--uy-color-yellow-l5) 0%, var(--uy-color-plum-l5) 50%, var(--uy-color-blue-l4) 100%; /** Gradients for Payfit AI effects and components */
+    --uy-gradient-payfit-ai-animated:
+      var(--uy-color-yellow-l5) 0%, var(--uy-color-plum-l5) 12.5%, var(--uy-color-blue-l4) 25%,
+      var(--uy-color-plum-l5) 37.5%, var(--uy-color-yellow-l5) 50%, var(--uy-color-plum-l5) 62.5%,
+      var(--uy-color-blue-l4) 75%, var(--uy-color-plum-l5) 87.5%, var(--uy-color-yellow-l5) 100%; /** Seamlessly repeating PayFit AI gradient for animated background-position effects */
     --uy-shadow-100: 0px 1px 4px 1px var(--uy-color-utility-shadow-100);
     --uy-shadow-200: 0px 2px 8px 1px var(--uy-color-utility-shadow-200);
     --uy-shadow-300: 0px 5px 10px 1px var(--uy-color-utility-shadow-300);
@@ -627,7 +633,9 @@
   }
 
   [data-unity-theme="compact"] {
-    --uy-animate-gradient-rotate: 3s linear infinite gradient-rotate;
+    --uy-animate-uy-ai-gradient-angle-rotate: 3s linear infinite uy-ai-gradient-angle-rotate;
+    --uy-animate-uy-ai-gradient-linear-sweep: 3s linear infinite uy-ai-gradient-linear-sweep;
+    --uy-animate-uy-ai-gradient-radial-pulse: 2s ease-in-out infinite uy-ai-gradient-radial-pulse;
     --uy-animate-spin: 2s linear infinite spin;
     --uy-animate-arc-shrink: 2s ease-in-out infinite arc-shrink;
     --uy-animate-pulse: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse;
@@ -712,7 +720,9 @@
 
 @theme {
   --color-*: initial;
-  --animate-gradient-rotate: var(--uy-animate-gradient-rotate);
+  --animate-uy-ai-gradient-angle-rotate: var(--uy-animate-uy-ai-gradient-angle-rotate);
+  --animate-uy-ai-gradient-linear-sweep: var(--uy-animate-uy-ai-gradient-linear-sweep);
+  --animate-uy-ai-gradient-radial-pulse: var(--uy-animate-uy-ai-gradient-radial-pulse);
   --animate-spin: var(--uy-animate-spin);
   --animate-arc-shrink: var(--uy-animate-arc-shrink);
   --animate-pulse: var(--uy-animate-pulse);
@@ -1229,6 +1239,7 @@
   --color-utility-shadow-500: var(--uy-color-utility-shadow-500);
   --color-utility-shadow-600: var(--uy-color-utility-shadow-600);
   --gradient-payfit-ai: var(--uy-gradient-payfit-ai);
+  --gradient-payfit-ai-animated: var(--uy-gradient-payfit-ai-animated);
   --shadow-100: var(--uy-shadow-100);
   --shadow-200: var(--uy-shadow-200);
   --shadow-300: var(--uy-shadow-300);
@@ -1311,19 +1322,13 @@
   }
 }
 
-
-@property --uy-ai-gradient-angle {
-  syntax: '<angle>';
-  inherits: true;
-  initial-value: 0deg;
-}
-
-@keyframes gradient-rotate {
-  to {
-    --uy-ai-gradient-angle: 360deg;
+@custom-variant supports-mask-border {
+  @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
+    @slot;
   }
 }
 
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -1466,6 +1471,186 @@
 }
 
 
+/**
+ * Payfit AI gradient effects.
+ *
+ * This asset contains the registered custom properties, base-layer glow
+ * recipe, and keyframes consumed by the AI gradient border utilities used in ai-kit components.
+ * It is intentionally separate from general-purpose animations so the effect can be
+ * maintained as one cohesive unit.
+ *
+ * Consumers use the defined custom properties to animate or control specific part of each
+ * effect that can be applied. It is particularly important for allowing interpolation
+ * of properties that would not normally animate, such as an angle in a gradient declaration.
+ */
+
+/**
+ * The current orientation of a conic Payfit AI gradient and its orbital glow.
+ * This registered property makes angle interpolation continuous while the
+ * `uy-ai-gradient-angle-rotate` keyframe is running.
+ */
+@property --uy-ai-gradient-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+/**
+ * The host-controlled gradient border width. The masked border reads this
+ * value for its inset and padding, so changing it keeps the border aligned
+ * without changing the host's padding, radius, or background.
+ */
+@property --uy-ai-gradient-border-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 1px;
+}
+
+/**
+ * Opacity contribution of each colour in `--uy-ai-gradient-glow`.
+ * Override it on the interactive host to tune glow strength independently of
+ * the host and its content opacity. Defaults to 20%.
+ */
+@property --uy-ai-gradient-glow-opacity {
+  syntax: '<percentage>';
+  inherits: true;
+  initial-value: 20%;
+}
+
+/**
+ * Unwrapped angle and scale for the interactive Payfit AI brand motion.
+ * Registering them lets the browser interpolate the two full turns in either
+ * direction as the trigger's hover or focus-visible state changes.
+ */
+@property --uy-payfit-ai-brand-rotation {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@property --uy-payfit-ai-brand-scale {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 1;
+}
+
+@layer base {
+  :root {
+    /** Distance from the host at which each glow colour orbits. */
+    --uy-ai-gradient-glow-orbit-radius: 6px;
+
+    /** Softness of each glow shadow. This is the box-shadow blur radius. */
+    --uy-ai-gradient-glow-blur-radius: 12px;
+
+    /** Angular offset for the plum glow, relative to the yellow glow. */
+    --uy-ai-gradient-glow-plum-phase-offset: 120deg;
+
+    /** Angular offset for the blue glow, relative to the yellow glow. */
+    --uy-ai-gradient-glow-blue-phase-offset: 240deg;
+
+    /**
+     * Three coloured box shadows that orbit the host as the gradient angle
+     * changes. `cos(angle)` supplies each horizontal offset and `sin(angle)`
+     * its vertical offset, tracing a circular path. The two additional
+     * shadows are phase-shifted by 120deg and 240deg, producing an evenly
+     * spaced yellow, plum, and blue glow.
+     *
+     * Use through `box-shadow: var(--uy-ai-gradient-glow)`. This property is
+     * only applied by `aiGradientEffect({ glow: true })` on hover or focus.
+    */
+    --uy-ai-gradient-glow:
+      calc(
+          cos(var(--uy-ai-gradient-angle)) *
+            var(--uy-ai-gradient-glow-orbit-radius)
+        )
+        calc(
+          sin(var(--uy-ai-gradient-angle)) *
+            var(--uy-ai-gradient-glow-orbit-radius)
+        )
+        var(--uy-ai-gradient-glow-blur-radius)
+        color-mix(
+          in srgb,
+          var(--uy-color-yellow-l5) var(--uy-ai-gradient-glow-opacity),
+          transparent
+        ),
+      calc(
+          cos(
+              calc(
+                var(--uy-ai-gradient-angle) +
+                  var(--uy-ai-gradient-glow-plum-phase-offset)
+              )
+            ) *
+            var(--uy-ai-gradient-glow-orbit-radius)
+        )
+        calc(
+          sin(
+              calc(
+                var(--uy-ai-gradient-angle) +
+                  var(--uy-ai-gradient-glow-plum-phase-offset)
+              )
+            ) *
+            var(--uy-ai-gradient-glow-orbit-radius)
+        )
+        var(--uy-ai-gradient-glow-blur-radius)
+        color-mix(
+          in srgb,
+          var(--uy-color-plum-l5) var(--uy-ai-gradient-glow-opacity),
+          transparent
+        ),
+      calc(
+          cos(
+              calc(
+                var(--uy-ai-gradient-angle) +
+                  var(--uy-ai-gradient-glow-blue-phase-offset)
+              )
+            ) *
+            var(--uy-ai-gradient-glow-orbit-radius)
+        )
+        calc(
+          sin(
+              calc(
+                var(--uy-ai-gradient-angle) +
+                  var(--uy-ai-gradient-glow-blue-phase-offset)
+              )
+            ) *
+            var(--uy-ai-gradient-glow-orbit-radius)
+        )
+        var(--uy-ai-gradient-glow-blur-radius)
+        color-mix(
+          in srgb,
+          var(--uy-color-blue-l4) var(--uy-ai-gradient-glow-opacity),
+          transparent
+        );
+  }
+}
+
+/** Rotates the conic gradient and the orbital glow angle once per cycle. */
+@keyframes uy-ai-gradient-angle-rotate {
+  to {
+    --uy-ai-gradient-angle: 360deg;
+  }
+}
+
+/** Sweeps the repeating linear gradient through its seamless repeat point. */
+@keyframes uy-ai-gradient-linear-sweep {
+  to {
+    background-position: 66.666667% 50%;
+  }
+}
+
+/** Expands and contracts the radial gradient to create a breathing effect. */
+@keyframes uy-ai-gradient-radial-pulse {
+  0%,
+  100% {
+    background-size: 100% 100%;
+  }
+
+  50% {
+    background-size: 200% 200%;
+  }
+}
+
+
 /* this is Midnight css reset */
 @layer base {
   html {

package/dist/esm/scripts/actions/append-css-assets.d.ts

@@ -0,0 +1,7 @@
+import { Config, Dictionary, PlatformConfig } from 'style-dictionary/types';
+/**
+ * Appends every CSS asset in a directory to the generated theme stylesheet.
+ *
+ * Assets are appended in filename order so their cascade order is explicit.
+ */
+export declare function appendCssAssets(_dictionary: Dictionary, config: PlatformConfig, options: Config): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-themes",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "style": "./dist/css/unity.css",

package/src/agent-references/tokens-catalog.json

@@ -45,21 +45,6 @@
         }
       }
     },
-    {
-      "name": "gradient-rotate",
-      "sourcePath": "animate.gradient-rotate",
-      "cssVariable": "--uy-animate-gradient-rotate",
-      "family": "animate",
-      "type": "animation",
-      "values": {
-        "default": {
-          "resolved": "3s linear infinite gradient-rotate"
-        },
-        "compact": {
-          "resolved": "3s linear infinite gradient-rotate"
-        }
-      }
-    },
     {
       "name": "pulse",
       "sourcePath": "animate.pulse",
@@ -165,6 +150,51 @@
         }
       }
     },
+    {
+      "name": "uy-ai-gradient-angle-rotate",
+      "sourcePath": "animate.uy-ai-gradient-angle-rotate",
+      "cssVariable": "--uy-animate-uy-ai-gradient-angle-rotate",
+      "family": "animate",
+      "type": "animation",
+      "values": {
+        "default": {
+          "resolved": "3s linear infinite uy-ai-gradient-angle-rotate"
+        },
+        "compact": {
+          "resolved": "3s linear infinite uy-ai-gradient-angle-rotate"
+        }
+      }
+    },
+    {
+      "name": "uy-ai-gradient-linear-sweep",
+      "sourcePath": "animate.uy-ai-gradient-linear-sweep",
+      "cssVariable": "--uy-animate-uy-ai-gradient-linear-sweep",
+      "family": "animate",
+      "type": "animation",
+      "values": {
+        "default": {
+          "resolved": "3s linear infinite uy-ai-gradient-linear-sweep"
+        },
+        "compact": {
+          "resolved": "3s linear infinite uy-ai-gradient-linear-sweep"
+        }
+      }
+    },
+    {
+      "name": "uy-ai-gradient-radial-pulse",
+      "sourcePath": "animate.uy-ai-gradient-radial-pulse",
+      "cssVariable": "--uy-animate-uy-ai-gradient-radial-pulse",
+      "family": "animate",
+      "type": "animation",
+      "values": {
+        "default": {
+          "resolved": "2s ease-in-out infinite uy-ai-gradient-radial-pulse"
+        },
+        "compact": {
+          "resolved": "2s ease-in-out infinite uy-ai-gradient-radial-pulse"
+        }
+      }
+    },
     {
       "name": "zoom-in",
       "sourcePath": "animate.zoom-in",
@@ -7710,6 +7740,35 @@
         }
       }
     },
+    {
+      "name": "payfit-ai-animated",
+      "sourcePath": "gradient.payfit-ai-animated",
+      "cssVariable": "--uy-gradient-payfit-ai-animated",
+      "family": "gradient",
+      "type": "gradient",
+      "values": {
+        "default": {
+          "resolved": "oklch(89.595% 0.13091 97.032) 0%, oklch(77.951% 0.22327 327.45) 12.5%, oklch(86.944% 0.07387 225.17) 25%, oklch(77.951% 0.22327 327.45) 37.5%, oklch(89.595% 0.13091 97.032) 50%, oklch(77.951% 0.22327 327.45) 62.5%, oklch(86.944% 0.07387 225.17) 75%, oklch(77.951% 0.22327 327.45) 87.5%, oklch(89.595% 0.13091 97.032) 100%",
+          "references": [
+            {
+              "path": "color.blue.L4",
+              "name": "blue-l4",
+              "cssVariable": "--uy-color-blue-l4"
+            },
+            {
+              "path": "color.plum.L5",
+              "name": "plum-l5",
+              "cssVariable": "--uy-color-plum-l5"
+            },
+            {
+              "path": "color.yellow.L5",
+              "name": "yellow-l5",
+              "cssVariable": "--uy-color-yellow-l5"
+            }
+          ]
+        }
+      }
+    },
     {
       "name": "layout-columns--default",
       "sourcePath": "grid.layout.default.columns",

package/tokens/common/animations.json

@@ -2,14 +2,30 @@
   "animate": {
     "$type": "animation",
     "$description": "Animation names for use in the design system",
-    "gradient-rotate": {
+    "uy-ai-gradient-angle-rotate": {
       "$value": {
-        "name": "gradient-rotate",
+        "name": "uy-ai-gradient-angle-rotate",
         "duration": "3s",
         "timingFunction": "linear",
         "iterationCount": "infinite"
       }
     },
+    "uy-ai-gradient-linear-sweep": {
+      "$value": {
+        "name": "uy-ai-gradient-linear-sweep",
+        "duration": "3s",
+        "timingFunction": "linear",
+        "iterationCount": "infinite"
+      }
+    },
+    "uy-ai-gradient-radial-pulse": {
+      "$value": {
+        "name": "uy-ai-gradient-radial-pulse",
+        "duration": "2s",
+        "timingFunction": "ease-in-out",
+        "iterationCount": "infinite"
+      }
+    },
     "spin": {
       "$value": {
         "name": "spin",

package/tokens/default/gradients.json

@@ -17,6 +17,21 @@
           "position": 1
         }
       ]
+    },
+    "payfit-ai-animated": {
+      "$type": "gradient",
+      "$description": "Seamlessly repeating PayFit AI gradient for animated background-position effects",
+      "$value": [
+        { "color": "{color.yellow.L5}", "position": 0 },
+        { "color": "{color.plum.L5}", "position": 0.125 },
+        { "color": "{color.blue.L4}", "position": 0.25 },
+        { "color": "{color.plum.L5}", "position": 0.375 },
+        { "color": "{color.yellow.L5}", "position": 0.5 },
+        { "color": "{color.plum.L5}", "position": 0.625 },
+        { "color": "{color.blue.L4}", "position": 0.75 },
+        { "color": "{color.plum.L5}", "position": 0.875 },
+        { "color": "{color.yellow.L5}", "position": 1 }
+      ]
     }
   }
 }

package/dist/esm/scripts/actions/append-animations.d.ts

@@ -1,3 +0,0 @@
-import { Config, Dictionary, PlatformConfig } from 'style-dictionary/types';
-export declare function appendAnimations(_dictionary: Dictionary, config: PlatformConfig, options: Config): void;
-export declare function removeAnimations(_dictionary: Dictionary, config: PlatformConfig, options: Config): void;