@payfit/unity-themes 2.67.19 → 2.67.21

package/README.md

@@ -11,8 +11,8 @@ Install and configure this package by following these steps:
 1. **Install the package and dependencies**
 
    ```bash
-   yarn add tailwindcss @fontsource/{inter,source-serif-4}
-   yarn add @payfit/unity-themes
+   pnpm add tailwindcss @fontsource/{inter,source-serif-4}
+   pnpm add @payfit/unity-themes
    ```
 
 2. **Set up TailwindCSS in your project**
@@ -109,10 +109,10 @@ tokens/
 
 ```bash
 # Build the package
-yarn nx run unity-themes:build
+pnpm nx run unity-themes:build
 
 # Run tests
-yarn nx run unity-themes:test
+pnpm nx run unity-themes:test
 ```
 
 ## How to release manually

package/dist/css/unity.css

@@ -392,19 +392,19 @@
     --uy-color-surface-decorative-teal: var(--uy-color-teal-l6);
     --uy-color-surface-decorative-teal-high: var(--uy-color-teal-l9);
     --uy-color-surface-decorative-teal-low: var(--uy-color-teal-l3);
-    --uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l2);
+    --uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l1);
     --uy-color-surface-decorative-purple-high: var(--uy-color-purple-l9);
     --uy-color-surface-decorative-purple: var(--uy-color-purple-l6);
     --uy-color-surface-decorative-purple-low: var(--uy-color-purple-l3);
-    --uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l2);
+    --uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l1);
     --uy-color-surface-decorative-plum: var(--uy-color-plum-l6);
     --uy-color-surface-decorative-plum-high: var(--uy-color-plum-l9);
     --uy-color-surface-decorative-plum-low: var(--uy-color-plum-l3);
-    --uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l2);
+    --uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l1);
     --uy-color-surface-decorative-orange: var(--uy-color-orange-l6);
     --uy-color-surface-decorative-orange-high: var(--uy-color-orange-l9);
     --uy-color-surface-decorative-orange-low: var(--uy-color-orange-l3);
-    --uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l2);
+    --uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l1);
     --uy-color-content-primary: var(--uy-color-blue-l6);
     --uy-color-content-primary-enabled: var(--uy-color-blue-l7);
     --uy-color-content-primary-hover: var(--uy-color-blue-l10);
@@ -539,6 +539,8 @@
     --uy-color-border-inverted-high: var(--uy-color-grayscale-l0);
     --uy-color-utility-focus-ring: var(--uy-color-blue-l4);
     --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-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);
@@ -955,19 +957,19 @@
     --uy-color-surface-decorative-teal: var(--uy-color-teal-l6);
     --uy-color-surface-decorative-teal-high: var(--uy-color-teal-l9);
     --uy-color-surface-decorative-teal-low: var(--uy-color-teal-l3);
-    --uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l2);
+    --uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l1);
     --uy-color-surface-decorative-purple-high: var(--uy-color-purple-l9);
     --uy-color-surface-decorative-purple: var(--uy-color-purple-l6);
     --uy-color-surface-decorative-purple-low: var(--uy-color-purple-l3);
-    --uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l2);
+    --uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l1);
     --uy-color-surface-decorative-plum: var(--uy-color-plum-l6);
     --uy-color-surface-decorative-plum-high: var(--uy-color-plum-l9);
     --uy-color-surface-decorative-plum-low: var(--uy-color-plum-l3);
-    --uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l2);
+    --uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l1);
     --uy-color-surface-decorative-orange: var(--uy-color-orange-l6);
     --uy-color-surface-decorative-orange-high: var(--uy-color-orange-l9);
     --uy-color-surface-decorative-orange-low: var(--uy-color-orange-l3);
-    --uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l2);
+    --uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l1);
     --uy-color-content-primary: var(--uy-color-plum-l6);
     --uy-color-content-primary-enabled: var(--uy-color-plum-l8);
     --uy-color-content-primary-hover: var(--uy-color-plum-l9);
@@ -1109,6 +1111,8 @@
     --uy-color-border-inverted-high: var(--uy-color-grayscale-l2);
     --uy-color-utility-focus-ring: var(--uy-color-blue-l7);
     --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-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);
@@ -1678,6 +1682,7 @@
   --color-utility-shadow-400: var(--uy-color-utility-shadow-400);
   --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);
   --shadow-100: var(--uy-shadow-100);
   --shadow-200: var(--uy-shadow-200);
   --shadow-300: var(--uy-shadow-300);
@@ -1749,6 +1754,10 @@
   }
 }
 
+@utility gradient-stops-* {
+  --tw-gradient-stops: var(--tw-gradient-position), --value(--gradient-*);
+}
+
 @utility typography-* {
   font: --value(--typography-default-*);
   @media screen and (min-width: 490px) {

package/dist/esm/scripts/formats/processors/gradient-processor.d.ts

@@ -0,0 +1,8 @@
+import { Config, Dictionary, LocalOptions } from 'style-dictionary/types';
+/**
+ * Creates a utility that assigns a gradient token's stop list to Tailwind's
+ * gradient-stop custom property. Include Tailwind's gradient position in the
+ * value because its background utilities set that position separately and
+ * expect the stop list to consume it.
+ */
+export declare function processGradientTokens(dictionary: Dictionary, options: Config & LocalOptions): string;

package/dist/esm/scripts/transforms/gradient.d.ts

@@ -0,0 +1,4 @@
+import { Token } from 'style-dictionary';
+import { Config, PlatformConfig } from 'style-dictionary/types';
+export declare function filter(token: Token, options: Config): boolean;
+export declare function transform(token: Token, _config: PlatformConfig, options: Config): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-themes",
-  "version": "2.67.19",
+  "version": "2.67.21",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "style": "./dist/css/unity.css",
@@ -73,8 +73,8 @@
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
-    "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/vite-configs": "0.0.0-use.local"
+    "@payfit/vite-configs": "0.0.0-use.local",
+    "@payfit/storybook-config": "0.0.0-use.local"
   },
   "peerDependencies": {
     "@fontsource/inter": "5.0.19",

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

@@ -6484,22 +6484,22 @@
       "type": "color",
       "values": {
         "legacy": {
-          "resolved": "oklch(95.249% 0.02398 33.548)",
+          "resolved": "oklch(99.087% 0.00448 34.309)",
           "references": [
             {
-              "path": "color.orange.L2",
-              "name": "orange-l2",
-              "cssVariable": "--uy-color-orange-l2"
+              "path": "color.orange.L1",
+              "name": "orange-l1",
+              "cssVariable": "--uy-color-orange-l1"
             }
           ]
         },
         "rebrand": {
-          "resolved": "oklch(96.593% 0.02201 63.21)",
+          "resolved": "oklch(98.951% 0.00901 78.283)",
           "references": [
             {
-              "path": "color.orange.L2",
-              "name": "orange-l2",
-              "cssVariable": "--uy-color-orange-l2"
+              "path": "color.orange.L1",
+              "name": "orange-l1",
+              "cssVariable": "--uy-color-orange-l1"
             }
           ]
         }
@@ -6600,22 +6600,22 @@
       "type": "color",
       "values": {
         "legacy": {
-          "resolved": "oklch(94.722% 0.03438 342.15)",
+          "resolved": "oklch(97.96% 0.01323 340.54)",
           "references": [
             {
-              "path": "color.plum.L2",
-              "name": "plum-l2",
-              "cssVariable": "--uy-color-plum-l2"
+              "path": "color.plum.L1",
+              "name": "plum-l1",
+              "cssVariable": "--uy-color-plum-l1"
             }
           ]
         },
         "rebrand": {
-          "resolved": "oklch(95.054% 0.0442 325.92)",
+          "resolved": "oklch(98.074% 0.01687 325.7)",
           "references": [
             {
-              "path": "color.plum.L2",
-              "name": "plum-l2",
-              "cssVariable": "--uy-color-plum-l2"
+              "path": "color.plum.L1",
+              "name": "plum-l1",
+              "cssVariable": "--uy-color-plum-l1"
             }
           ]
         }
@@ -6716,22 +6716,22 @@
       "type": "color",
       "values": {
         "legacy": {
-          "resolved": "oklch(96.104% 0.02008 292.15)",
+          "resolved": "oklch(98.727% 0.00667 295.45)",
           "references": [
             {
-              "path": "color.purple.L2",
-              "name": "purple-l2",
-              "cssVariable": "--uy-color-purple-l2"
+              "path": "color.purple.L1",
+              "name": "purple-l1",
+              "cssVariable": "--uy-color-purple-l1"
             }
           ]
         },
         "rebrand": {
-          "resolved": "oklch(93.912% 0.03693 306.42)",
+          "resolved": "oklch(98.727% 0.00667 295.45)",
           "references": [
             {
-              "path": "color.purple.L2",
-              "name": "purple-l2",
-              "cssVariable": "--uy-color-purple-l2"
+              "path": "color.purple.L1",
+              "name": "purple-l1",
+              "cssVariable": "--uy-color-purple-l1"
             }
           ]
         }
@@ -6832,22 +6832,22 @@
       "type": "color",
       "values": {
         "legacy": {
-          "resolved": "oklch(97.487% 0.01887 196.85)",
+          "resolved": "oklch(98.741% 0.01366 196.94)",
           "references": [
             {
-              "path": "color.teal.L2",
-              "name": "teal-l2",
-              "cssVariable": "--uy-color-teal-l2"
+              "path": "color.teal.L1",
+              "name": "teal-l1",
+              "cssVariable": "--uy-color-teal-l1"
             }
           ]
         },
         "rebrand": {
-          "resolved": "oklch(96.544% 0.02736 188.32)",
+          "resolved": "oklch(98.684% 0.01389 185.97)",
           "references": [
             {
-              "path": "color.teal.L2",
-              "name": "teal-l2",
-              "cssVariable": "--uy-color-teal-l2"
+              "path": "color.teal.L1",
+              "name": "teal-l1",
+              "cssVariable": "--uy-color-teal-l1"
             }
           ]
         }
@@ -10781,6 +10781,55 @@
         }
       }
     },
+    {
+      "name": "payfit-ai",
+      "sourcePath": "gradient.payfit-ai",
+      "cssVariable": "--uy-gradient-payfit-ai",
+      "family": "gradient",
+      "type": "gradient",
+      "values": {
+        "legacy": {
+          "resolved": "oklch(88.467% 0.16439 92.595) 0%, oklch(71.011% 0.17788 346.37) 50%, oklch(66.102% 0.17494 254.38) 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"
+            }
+          ]
+        },
+        "rebrand": {
+          "resolved": "oklch(89.595% 0.13091 97.032) 0%, oklch(77.951% 0.22327 327.45) 50%, oklch(86.944% 0.07387 225.17) 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/legacy/colors.json

@@ -848,7 +848,7 @@
           "$value": "{color.teal.L3}"
         },
         "lowest": {
-          "$value": "{color.teal.L2}"
+          "$value": "{color.teal.L1}"
         }
       },
       "decorative-purple": {
@@ -862,7 +862,7 @@
           "$value": "{color.purple.L3}"
         },
         "lowest": {
-          "$value": "{color.purple.L2}"
+          "$value": "{color.purple.L1}"
         }
       },
       "decorative-plum": {
@@ -876,7 +876,7 @@
           "$value": "{color.plum.L3}"
         },
         "lowest": {
-          "$value": "{color.plum.L2}"
+          "$value": "{color.plum.L1}"
         }
       },
       "decorative-orange": {
@@ -890,7 +890,7 @@
           "$value": "{color.orange.L3}"
         },
         "lowest": {
-          "$value": "{color.orange.L2}"
+          "$value": "{color.orange.L1}"
         }
       }
     },

package/tokens/legacy/gradients.json

@@ -0,0 +1,22 @@
+{
+  "gradient": {
+    "payfit-ai": {
+      "$type": "gradient",
+      "$description": "Gradients for Payfit AI effects and components",
+      "$value": [
+        {
+          "color": "{color.yellow.L5}",
+          "position": 0
+        },
+        {
+          "color": "{color.plum.L5}",
+          "position": 0.5
+        },
+        {
+          "color": "{color.blue.L4}",
+          "position": 1
+        }
+      ]
+    }
+  }
+}

package/tokens/rebrand/colors.json

@@ -894,7 +894,7 @@
           "$value": "{color.teal.L3}"
         },
         "lowest": {
-          "$value": "{color.teal.L2}"
+          "$value": "{color.teal.L1}"
         }
       },
       "decorative-purple": {
@@ -908,7 +908,7 @@
           "$value": "{color.purple.L3}"
         },
         "lowest": {
-          "$value": "{color.purple.L2}"
+          "$value": "{color.purple.L1}"
         }
       },
       "decorative-plum": {
@@ -922,7 +922,7 @@
           "$value": "{color.plum.L3}"
         },
         "lowest": {
-          "$value": "{color.plum.L2}"
+          "$value": "{color.plum.L1}"
         }
       },
       "decorative-orange": {
@@ -936,7 +936,7 @@
           "$value": "{color.orange.L3}"
         },
         "lowest": {
-          "$value": "{color.orange.L2}"
+          "$value": "{color.orange.L1}"
         }
       }
     },

package/tokens/rebrand/gradients.json

@@ -0,0 +1,22 @@
+{
+  "gradient": {
+    "payfit-ai": {
+      "$type": "gradient",
+      "$description": "Gradients for Payfit AI effects and components",
+      "$value": [
+        {
+          "color": "{color.yellow.L5}",
+          "position": 0
+        },
+        {
+          "color": "{color.plum.L5}",
+          "position": 0.5
+        },
+        {
+          "color": "{color.blue.L4}",
+          "position": 1
+        }
+      ]
+    }
+  }
+}